新网页设计与制作项目实训教程 教学课件 严加琼 曾金发 项目11.pptVIP

项目11 使用模板和库制作网页 项目描述 在Dreamweaver 中可以利用模板和库创建出具有统一风格的网页，在开发网站时不但可以提高开发效率，而且方便网站的后续维护。本项目运用所学知识创建企业模板，效果如图11-1所示，利用模板创建公司简介网页，效果如图11-2所示。 项目描述 项目描述 11.2 知识储备 11.2.1 模板和库概述 11.2.2 建立网页模板 11.2.3 库 11.2 知识储备 　　Dreamweaver CS5中的资源除了包括图像、影片、颜色、脚本和链接之外，还有两种比较特殊的类型，即模板和库。 　　模板是一种特殊类型的文档，文件扩展名为“.dwt”，可用于设计固定的页面布局，用户可基于该模板创建文档，创建的文档会自动继承模板的页面布局。 　　库是一种特殊的Dreamweaver文件，其后缀名为“.lbi”。 11.2 知识储备 　　模板和库的区别是：模板可以用来制作整体网页的重复部分，而库是面向网页局部重复部分。模板主要用于保持页面统一，而库文件更主要的是为了满足经常修改的需要，库项目比模板更加灵活，库项目只是页面中的一小部分，可以放置在页面的任何位置。 11.2 知识储备 11.2.2 建立网页模板 　1.模板区域的类型 模板区域共有四种类型： （1）可编辑区域。 （2）重复区域。 （3）可选区域。 （4）可编辑标签属性 。 11.2 知识储备 2.创建模板 　　模板的制作与普通网页的制作相同，是用来制作网页的公共部分。设计者可以根据需要，直接创建空白的模板，也可以将已有文档转换为模板。 　　要使模板生效，其中至少还要创建一个可编辑区域，否则基于该模板的页面是不可编辑的。 为了便于管理，最好将创建的模板存放在站点根目录下的“Templates”文件夹中，使用文件扩展名为“.dwt”。若该文件夹不存在，则当存储一个新模板时，Dreamweaver CS5会自动生成此文件夹。 11.2 知识储备 创建模板有以下三种方法： 　（1）通过“资源”面板，创建空模板 在“资源”面板中单击左侧“模板”按钮，进入“模板”子面板，如图11-3所示。然后单击下方的“新建模板”按钮，创建空模板。此时新的模板添加“模板”子面板的列表中，为该模板输入名称，如图11-4所示。 11.2 知识储备 （2）通过“插入”面板，创建模板 　　在打开的文档窗口中，单击“插入”面板的“常用”模式中的“创建模板”按钮，将当前文档转换为模板文档。 （3）使用“新建文档”对话框创建空模板 　　在Dreamweaver CS5中可以直接创建模板网页，具体步骤如下： 11.2 知识储备 ① 单击菜单“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中选择“空模板”中的“HTML模板”选项，如图11-5所示。 11.2 知识储备 ② 单击“创建”按钮，创建模板文档。 ③ 单击菜单“文件” →“保存”命令，弹出Dreamweaver CS5提示对话框，如图11-6所示。 11.2 知识储备 ④ 单击“确定”按钮，弹出“另存模板”对话框，在对话框中的“站点”下拉表中选择站点，在“另存为”文本框中输入名称。如图11-7所示。⑤ 单击“保存”按钮，保存模板。 11.2 知识储备 3. 创建可编辑区域、重复区域、可选区域 　(1)创建可编辑区域 　　在默认情况下，新创建的模板所有区域都处于锁定状态，用户要根据具体要求定义和修改模板的可编辑区域。 创建可编辑区域的具体操作步骤如下： ① 将光标置于要定义的可编辑区域。 11.2 知识储备 ② 单击菜单“插入”→“模板对象”→“可编辑区域”命令，打开“新建可编辑区域”对话框，在“名称”文本框中输入名称，如图11-8所示。 ③ 单击“确定”按钮，插入可编辑区域。 11.2 知识储备 (2) 创建重复区域 　　重复区域指的是在文档中可能会重复出现的区域，定义重复区域的具体步骤如下： ① 单击菜单“插入”→“模板对象”→“重复区域”命令，打开“新建重复区域”对话框，如图11-9所示。② 在对话框的“名称”文本框中输入名称，单击“确定”按钮，即可创建重复区域。 11.2 知识储备 (3) 创建可选区域　　可选区域是模板中的区域，可将其设置为在基于模板的文件中显示或隐藏。 创建可选区域的具体操作步骤如下： ① 单击菜单“插入”→“模板对象”→“可选区域”命令，打开“新建可选区域”对话框，如图11-10所示。 11.2 知识储备 ② 在“新建可选区域”对话框的“名称”文本框中输入这个可选区域的名称。 ③ 如果要设置可选区域的值，切换至“高级”选项卡，在其中进行设置。如图11-11所示。 11.2 知识储备 4.编辑模版 　(1