第8章 旅游网站模板和库制作(免费下载)

dreamweaver cs5,案例教程

Dreamweaver CS5 网页制作基础教程

dreamweaver cs5,案例教程

第8章 旅游网站模板和库制作本章将介绍使用库和模板制作网页 的基本方法。

学习目标了解库和模板的含义和主要作用。 了解常用模板对象的含义和作用。 掌握【资源】面板的使用方法。 掌握创建和应用库项目的方法。 掌握创建和应用模板的方法。

dreamweaver cs5,案例教程

8.1 设计思路在一个网站中，许多网页除了内容不同外，往往具有相同的 结构，如果这些具有相同结构的网页都需要一个一个地去制 作势必浪费很多时间和精力，同时日后如果需要改变网页结 构再一个一个地去修改也不现实。在网站中，许多网页往往 有一部分具有相同的内容，如广告、页眉和页脚，如果相同 的内容每次重复制作也实在没有必要。本书实例“旅游网站” 也一样，除了主页面只有一个，可以直接制作外，二级页面 都具有相同的结构，只是显示的主要内容不同，因此为了省 时省力，可以首先制作一个模板，通过模板生成需要的网页， 再添加具体内容即可。其中页眉、导航栏和页脚以及每个栏 目的二级导航栏制作成库，放置在网页的相应位置。

dreamweaver cs5,案例教程

8.2 创建模板

认识模板 直接创建新模板 将现有网页保存为模板

dreamweaver cs5,案例教程

8.2.1 认识模板

模板是一种特殊类型的文档，用于设计固定的并可 重复使用的页面布局结构，基于模板创建的网页文 档会继承模板的布局结构。因此，在批量制作具有 相同版式和风格的网页文档时，使用模板是一个不 错的选择，它可使网站拥有统一的布局和外观，而 且模板变化时可以同时更新基于该模板创建的网页 文档，提高了站点管理和维护的效率。

dreamweaver cs5,案例教程

在设计模板时，设计者可在模板中插入模板对象，从而指定 在基于模板的网页文档中哪些区域是可以进行修改和编辑的。 实际上在模板中操作时，模板的整个页面都可以进行编辑， 这与平时设计网页没有差别。惟一不同的是最后一定要插入 可编辑的模板对象，否则创建的网页没有可编辑的区域，无 法添加内容。在基于模板创建的网页文档中，只能在可编辑 的模板对象中添加或更改内容，不能修改其他区域。在 Dreamweaver CS5中，常用的模板对象有可编辑区域、重复区 域、重复表格和令属性可编辑等类型。 模板操作必须在Dreamweaver站点中进行，如果没有站点，在 保存模板时会提示创建Dreamweaver站点。在Dreamweaver中， 创建的模板文件保存在站点的“Templates”文件夹内， “Templates”文件夹是自动生成的，不能对其名称进行修改。

dreamweaver cs5,案例教程

8.2.2 直接创建新模板通过【新建文档】对话框和【资源】面板可直接从空 白文档开始创建新模板。在菜单栏中选择【文件】/ 【新建】命令，打开【新

建文档】对话框，选择【空 模板】/【HTML模板】/【无】选项。

dreamweaver cs5,案例教程

新建可编辑区域的方法： 1. 在菜单栏中选择【插入】/【模板对象】/【可编辑区域】命 令。 2. 用鼠标右键单击，在弹出的快捷菜单中选择【模板】/【新 建可编辑区域】。 3. 在【插入】面板的【常用】类别中，单击 按钮。

dreamweaver cs5,案例教程

可编辑区域是指可以进行添加、修改和删除网页元素等操作的 区域，可编辑区域控制着在基于模板创建的网页中用户可以编 辑哪些区域。可编辑区域在模板中由高亮显示的矩形边框围绕， 该边框使用在首选参数中设置的高亮颜色。该区域左上角的选 项卡显示该区域的名称。如果在文档中插入空白的可编辑区域， 则该区域的名称会出现在该区域内部。 修改可编辑区域等模板对象名称的方法是，单击模板对象的名 称将其选中，然后在【属性】面板的【名称】文本框中修改模 板对象名称即可。

如果已经将模板文件的某个区域设置为可编辑，现在要取消这 一设置，使其在基于模板的文档中不再可编辑，可使用【删除 模板标记】 命令。方法是，单击可编辑区域左上角的标签以选 中它，选择【修改】/【模板】/【删除模板标记】命令，也可 单击鼠标右键，然后选择【模板】/【删除模板标记】命令。

dreamweaver cs5,案例教程

插入重复表格的方法：在菜单栏中选择【插入】/【模板对象】 /【重复表格】命令，打开【插入重复表格】对话框。

dreamweaver cs5,案例教程

重复表格是指包含重复行的表格格式的可编辑区域，可以定义 表格的属性并设置哪些单元格可编辑。重复表格可以被包含在 重复区域内，但不能被包含在可编辑区域内。另外，在将现有 网页保存为模板时，不能将选定的区域变成重复表格，只能插 入重复表格。 如果在【插入重复表格】对话框中不设置【单元格边距】、 【单元格间距】和【边框】的值，则大多数浏览器按【单元格 边距】为“1”、【单元格间距】为“2”和【边框】为“1”显示 表格。【插入重复表格】对话框的上半部分与普通的表格参数 没有什么不同，重要的是下半部分的参数。

dreamweaver cs5,案例教程

插入重复区域的方法：选择想要设置为重复区域的文本或内容 或将插 …… 此处隐藏：832字，全部文档内容请下载后查看。喜欢就下载吧 ……