网页制作_页面布局与模板合编.ppt

9. 设置页面元素属性 利用CSS对各页面元素进行格式设置。 7.4 模板 模板实质上就是一种特殊类型的文档，作为创建其他文档的基础，用于设计布局比较固定的页面结构或元素。 使用模板的好处： 网页风格一致，避免制作同一页面的麻烦。 修改共同的页面时，不必一个一个修改，只需要更改应用模板。 如果一个网站布局比较统一，拥有相同的导航，并且显示不同栏目内容的位置基本保持不变，那么这种布局的网站就可以考虑使用模板来创建。 1. 创建模板 2. 定义可编辑区域 3. 应用模板 1. 创建模板 （1）将网页另存为模板 （2）新建模板 （1）将网页另存为模板 1）打开一个存在或已制作好的网页，删除其中不要的内容，选择【文件】|【另存为模板】命令，打开【另存为模板】对话框。 2）在【站点】下拉列表中设置模板保存的站点，在【现存的模板】列表框中显示了当前站点中的已有模板。在【另存为】框中输入模板名称，单击【保持】按钮。 （2）新建模板 选择【文件】|【新建】命令，打开【新建文档】对话框，然后在【类别】列表中选择【基本页】，并在【基本页】列表中选择【HTML模板】选项。单击【创建】按钮。 2. 定义可编辑区域 模板创建之后，需要根据具体要求对模板进行编辑，指定哪些区域可以编辑，哪些区域不能编辑。在模板文档中，可编辑区是页面中可变的区域，如具体栏目区。不可编辑区是页面中不可变的区域，如导航栏和版权栏等。 定义步骤： （1）打开新建的模板文件，在文档中选择要定义为可编辑区的区域。 （2）选择【插入】|【模板对象】|【可编辑区域】命令。 （3）在打开的【新建可编辑区域】对话框中给该可编辑区域命名。 3. 应用模板 （1）选择【文件】|【新建】命令，打开【新建文档】对话框。 （2）选择【模板】选项卡，切换到【从模板新建】对话框。 （3）在【模板用于】列表中选择当前站点，并在右侧列表中选择站点中模板。 （4）单击【创建】按钮。 网页制作 项目一 认识网页和网站 网页：存放在Web服务器上供客户机服务 用户浏览的页面； 是一种综合了文字、图片、动画和音乐等内容 的超文本文件，具有可视化和交互性的特点。 网站： 是网页的集合，网页是构成网站的基本元素。 学习目标 了解网页的构成 掌握网页的布局设计 掌握不同风格网页的布局 熟悉Photoshop软件工具的应用 第1章 网页版式设计 网页版式的基本类型 网页版式设计注意事项 页面布局基本步骤 模板 7.1 网页版式的基本类型 网页版式的基本类型可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、封面型、Flash动画型等几种。 1. “国”字型 “国”字型结构是指网页的最上面是网站的Logo（标志）、Banner（横幅广告条）和导航栏，中间是当前网页的主要内容（通常被分成大小不等的三列，其中中间的一列用来放置当前网页的主体内容），最下面是网站的版权声明等信息。 Logo Banner 导航栏 版权声明等信息 2. 拐角型 拐角型结构与“国”字型结构其实只是形式上存在一些区别，即网页的最上面是网站的Logo（标志）、Banner（横幅广告条）和导航栏，中间是当前网页的主要内容（通常被分成大小不等的两列，其中较宽的一列用来放置当前网页的主体内容），最下面是网站的版权声明等信息。 Logo Banner 导航栏 版权声明等信息 3. 标题正文型 标题正文型结构是指网页的最上面是当前网页的标题或类似的对象（如修饰性图像），下面是当前网页的正文。 一些文章页面或注册页面等就是这种类型。 当前页面的标题 当前页面的正文 4. 左右框架型 左右框架型结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。 我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。 这种类型结构非常清晰，一目了然。 　　 当前页面的标题 导 航 链 接 显示当前链接的内容 5. 上下框架型 上下框架型结构与左右框架型类似，区别仅仅在于是一种上下分为两页的框架。 导航链接 修 饰 图 案 显示当前链接的内容 6. 封面型 封面型结构一般出现在网站的首页，大部分是通过精美的平面设计并结合局部的动画效果，之后在网页中放上几个简单的链接或者仅放一个“进入”或“Enter”之类的链接，以提示访问者进入网站的下一级页面。 7. Flash动画型 Flash动画型结构与封面型结构类似，只是该结构的网页是由Flash动画组成。 由于Flash动画具有丰富及强大的交互功能，所以该结构的网页可表达的信息更丰富，而且其视听效果也十分完美。 7.2 网页版式设计注意事项 网页的宽