网页制作_页面布局与模板

1、网页制作项目一 认识网页和网站n网页：网页：存放在存放在Web服务器上供客户机服务服务器上供客户机服务 用户浏览的页面；用户浏览的页面； 是一种综合了文字、图片、动画和音乐等内容是一种综合了文字、图片、动画和音乐等内容 的超文本文件，具有可视化和交互性的特点。的超文本文件，具有可视化和交互性的特点。网站： 是网页的集合，网页是构成网站的基本元素。学习目标了解网页的构成了解网页的构成掌握网页的布局设计掌握不同风格网页的布局熟悉Photoshop软件工具的应用第1章 网页版式设计 n网页版式的基本类型网页版式的基本类型n网页版式设计注意事项网页版式设计注意事项n页面布局基本步骤页面布局基本步骤 n

2、模板模板7.1 网页版式的基本类型 网页版式的基本类型可分为网页版式的基本类型可分为“国国”字型、拐角型、标题正文型、左右框架字型、拐角型、标题正文型、左右框架型、上下框架型、封面型、型、上下框架型、封面型、Flash动画型动画型等几种。等几种。1. “国”字型 “国国”字型结构是指网页的最上面是字型结构是指网页的最上面是网站的网站的Logo（标志）、（标志）、Banner（横幅（横幅广告条）和导航栏，中间是当前网页的广告条）和导航栏，中间是当前网页的主要内容（通常被分成大小不等的三列，主要内容（通常被分成大小不等的三列，其中中间的一列用来放置当前网页的主其中中间的一列用来放置当前网页的主体内

3、容），最下面是网站的版权声明等体内容），最下面是网站的版权声明等信息。信息。LogoBanner导航栏导航栏版权声明等信息版权声明等信息2. 拐角型拐角型结构与拐角型结构与“国国”字型结构其实只是字型结构其实只是形式上存在一些区别，即网页的最上面是形式上存在一些区别，即网页的最上面是网站的网站的Logo（标志）、（标志）、Banner（横幅广（横幅广告条）和导航栏，中间是当前网页的主要告条）和导航栏，中间是当前网页的主要内容（通常被分成大小不等的两列，其中内容（通常被分成大小不等的两列，其中较宽的一列用来放置当前网页的主体内较宽的一列用来放置当前网页的主体内容），最下面是网站的版权声明等信息。

4、容），最下面是网站的版权声明等信息。LogoBanner导航栏导航栏版权声明等信息版权声明等信息3. 标题正文型标题正文型结构是指网页的最上面标题正文型结构是指网页的最上面是当前网页的标题或类似的对象（如修是当前网页的标题或类似的对象（如修饰性图像），下面是当前网页的正文。饰性图像），下面是当前网页的正文。一些文章页面或注册页面等就是这一些文章页面或注册页面等就是这种类型。种类型。 当前页面的标题当前页面的标题当前页面的正文当前页面的正文4. 左右框架型左右框架型结构，一般左面是导航左右框架型结构，一般左面是导航链接，有时最上面会有一个小的标题或链接，有时最上面会有一个小的标题或标致，右面是正

5、文。标致，右面是正文。我们见到的大部分的大型论坛都是我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采这种结构的，有一些企业网站也喜欢采用。用。这种类型结构非常清晰，一目了然。这种类型结构非常清晰，一目了然。 当前页面的标题当前页面的标题导导航航链链接接显示当前链接的内容显示当前链接的内容5. 上下框架型上下框架型结构与左右框架型类似，上下框架型结构与左右框架型类似，区别仅仅在于是一种上下分为两页的框区别仅仅在于是一种上下分为两页的框架。架。 导航链接导航链接修修饰饰图图案案显示当前链接的内容显示当前链接的内容6. 封面型封面型结构一般出现在网站的首页，封面型结构一般出现在网站的

6、首页，大部分是通过精美的平面设计并结合局大部分是通过精美的平面设计并结合局部的动画效果，之后在网页中放上几个部的动画效果，之后在网页中放上几个简单的链接或者仅放一个简单的链接或者仅放一个“进入进入”或或“Enter”之类的链接，以提示访问者进之类的链接，以提示访问者进入网站的下一级页面。入网站的下一级页面。7.Flash动画型Flash动画型结构与封面型结构类似，动画型结构与封面型结构类似，只是该结构的网页是由只是该结构的网页是由Flash动画组成。动画组成。由于由于Flash动画具有丰富及强大的交动画具有丰富及强大的交互功能，所以该结构的网页可表达的信互功能，所以该结构的网页可表达的信息更丰

7、富，而且其视听效果也十分完美。息更丰富，而且其视听效果也十分完美。7.2 网页版式设计注意事项n网页的宽度网页的宽度n网页的高度网页的高度n网页文件大小网页文件大小1.网页的宽度浏览器一般都有一个浏览器一般都有一个20像素宽的纵向像素宽的纵向滚动条，所以网页的最大宽度小于或等滚动条，所以网页的最大宽度小于或等于水平分辨率于水平分辨率-20。2. 网页的高度网页的高度一般以浏览器窗口的屏网页的高度一般以浏览器窗口的屏数来度量，网页的长度一般不宜超过数来度量，网页的长度一般不宜超过3屏。屏。过长的网页不方便访问者查找自己过长的网页不方便访问者查找自己想要的内容。想要的内容。3. 网页文件大小在设计

8、网页时，必须保证网页能被在设计网页时，必须保证网页能被访问者快速地下载，即保证网页文件体访问者快速地下载，即保证网页文件体积尽可能小。积尽可能小。一般地，网站的首页文件（包含所一般地，网站的首页文件（包含所有图像、文本和多媒体对象）不宜超过有图像、文本和多媒体对象）不宜超过30KB，网站二级页面的文件不宜超过，网站二级页面的文件不宜超过45KB。7.3 页面布局基本步骤n设计草图设计草图n建立本地站点建立本地站点n创建网页创建网页n页面属性设置页面属性设置n使用表格或使用表格或div划分页面区域划分页面区域n设置表格或设置表格或div属性属性n插入嵌套表格或嵌套插入嵌套表格或嵌套divn添加页

9、面元素添加页面元素n对页面元素属性设置对页面元素属性设置1. 设计草图2. 建立本地站点建立一个文件夹用于管理站点所有文建立一个文件夹用于管理站点所有文件，并在件，并在Dreamweaver8中将其设置为中将其设置为站点的根文件夹。站点的根文件夹。在站点根文件夹中建立一个在站点根文件夹中建立一个resources子文件夹，用于存放非网页子文件夹，用于存放非网页文件资源。文件资源。3. 创建网页在站点中新建一个网页文件，并命名，在站点中新建一个网页文件，并命名，例如：例如：index.html。4. 页面属性设置利用菜单中利用菜单中【修改修改】|【页面属性页面属性】命令，进行页面基本设置。命令，

10、进行页面基本设置。包括：包括：n基本文字格式基本文字格式n页面背景设置页面背景设置n链接效果设置链接效果设置n页面标题页面标题n编码编码5. 插入表格根据设计草图在网页页面中添加表格，根据设计草图在网页页面中添加表格，明确各页面主要区域的位置和大小。明确各页面主要区域的位置和大小。注意注意：表格的最上方、最下方、最左侧：表格的最上方、最下方、最左侧和最右侧的行列可用于和最右侧的行列可用于“区域间隔区域间隔”使使用。用。6. 表格属性设置对页面中的表格的属性和单元格的属对页面中的表格的属性和单元格的属性进行设置，便于下面页面元素的添加。性进行设置，便于下面页面元素的添加。注意注意：表格的边框、边

11、距、间距值通常：表格的边框、边距、间距值通常设置为设置为0。7.插入嵌套表格在前面添加的区域表格的某些单元格在前面添加的区域表格的某些单元格中添加表格（即嵌套表格），明确各细中添加表格（即嵌套表格），明确各细小部分的位置和大小。小部分的位置和大小。注意注意：页面中只要是与其他部分性质有：页面中只要是与其他部分性质有区别的内容，都可以占据一个独立的小区别的内容，都可以占据一个独立的小表格。表格。8. 添加页面元素在页面相应区域、相应表格或单元格在页面相应区域、相应表格或单元格内添加页面元素（如图片，文字，链接内添加页面元素（如图片，文字，链接等）。等）。9. 设置页面元素属性利用利用CSS对各页

12、面元素进行格式设置。对各页面元素进行格式设置。7.4 模板模板实质上就是一种特殊类型的文档，模板实质上就是一种特殊类型的文档，作为创建其他文档的基础，用于设计布作为创建其他文档的基础，用于设计布局比较固定的页面结构或元素。局比较固定的页面结构或元素。使用模板的好处：使用模板的好处：n网页风格一致，避免制作同一页面的麻烦。网页风格一致，避免制作同一页面的麻烦。n修改共同的页面时，不必一个一个修改，只修改共同的页面时，不必一个一个修改，只需要更改应用模板。需要更改应用模板。如果一个网站布局比较统一，拥有相如果一个网站布局比较统一，拥有相同的导航，并且显示不同栏目内容的位同的导航，并且显示不同栏目内

13、容的位置基本保持不变，那么这种布局的网站置基本保持不变，那么这种布局的网站就可以考虑使用模板来创建。就可以考虑使用模板来创建。n1. 创建模板创建模板 n2. 定义可编辑区域定义可编辑区域 n3. 应用模板应用模板 1. 创建模板n（1）将网页另存为模板）将网页另存为模板n（2）新建模板）新建模板 （1）将网页另存为模板n1）打开一个存在或已制作好的网页，删除其）打开一个存在或已制作好的网页，删除其中不要的内容，选择中不要的内容，选择【文件文件】|【另存为模板另存为模板】命令，打开命令，打开【另存为模板另存为模板】对话框。对话框。n2）在）在【站点站点】下拉列表中设置模板保存的站下拉列表中设置

14、模板保存的站点，在点，在【现存的模板现存的模板】列表框中显示了当前站列表框中显示了当前站点中的已有模板。在点中的已有模板。在【另存为另存为】框中输入模板框中输入模板名称，单击名称，单击【保持保持】按钮。按钮。（2）新建模板选择选择【文件文件】|【新建新建】命令，打开命令，打开【新建文档新建文档】对话框，然后在对话框，然后在【类别类别】列表中选择列表中选择【基本页基本页】，并在，并在【基本页基本页】列表中选择列表中选择【HTML模板模板】选项。单击选项。单击【创建创建】按钮。按钮。2. 定义可编辑区域 模板创建之后，需要根据具体要求对模板创建之后，需要根据具体要求对模板进行编辑，指定哪些区域可以编辑，模板进行编辑，指定哪些区域可以编辑，哪些区域不能编辑。在模板文档中，可哪些区域不能编辑。在模板文档中，可编辑区是页面中可变的区域，如具体栏编辑区是页面中可变的区域，如具体栏目区。不可编辑区是页面中不可变的区目区。不可编辑区是页面中不可变的区域，如导航栏和版权栏等。域，如导航栏和版权栏等。定义步骤：定义步骤：n（1）打开新建的模板文件，在文档中选）打开新建的模板文件，在文档中选择要定义为可编辑区的区域。择要定义为可编辑区的区域。n（2）选择）选择【插入插入】|【模板对象模板对象】|【可编辑区域可编辑区域】命令。命令。n（3）在打开的）在打开的【新建可