网页设计与制作课件第8章 节 创建模板、使用资源列表.ppt

第8章 布局模板、使用资源列表 创建和使用模板 任务1 使用资源列表 任务2 本章导读 制作网页前首先要进行布局，否则将难以继续进行网页的创建，而模板与资源列表则可以快速地创建相同风格的网页。 创建使用模板 使用资源列表 能力目标 任务1 创建和使用模板 阶段1 布局模式 阶段2 使用模版 阶段3 应用模版 阶段1 布局模式 页面布局，就是指通过对页面内容框架的安排，确定网页中导航条、图像、文本内容及其他网页对象的显示位置，以达到规整网页结构，完善内容显示效果的目的。在Dreamweave中，提供了专门的页面布局视图，以方便用户在其中进行网页布局。 2.绘制布局表格 （1）在布局视图中，单击“布局”面板中的“布局表格”按钮 ，鼠标指针变为十字形。 （2）按住左键在文档中拖动鼠标（左图），即可在文档绘制一个布局表格（右图）。 阶段2 使用模版 模板其实也是一个文档，可以将其作为创建其他文档的基础。熟练地应用模板，可以轻松快速地制作出多个样式相同、内容不同的网页。下面分别介绍创建模板、定义可编辑区域和应用模板的操作方法。 1.创建模板 （1）在Dreamweaver中选择“文件→打开”命令，打开一个已经制作好的网页文档，然后选择“文件→另存为模板”命令。 （2）打开“另存为模板”对话框，在“站点”下拉列表中选择站点，然后在“另存为”文本框中输入保存的模板名称。 （3）单击“保存”按钮，模板文件即被保存在站点目录的“Templates”文件夹中。 Dreamweaver的模板文件保存到站点的目录下的“Templates”文件夹中，其扩展名为“.dwt”；如果站点目录下没有“Templates”文件夹，在保存模板文件时会自动创建该文件夹。 在Dreamweaver中还可以通过直接创建来新建一个空白模板文件 （1）在Dreamweaver中选择“文件→新建”命令，打开“新建文档”对话框。 （2）在对话框的“常规”标签中，在“类别”列表中选择“模板页”，再在“模板页”列表中选择“HTML模板”项，然后单击“创建”按钮。 （3）在Dreamweaver中可以看到已经成功地创建了一个空白模板页。 2.定义可编辑区域 （1）在Dreamweaver中打开模板文件，在文档中选择要定义为可编辑区域的内容。 （2）选择“插入→模板对象→可编辑区域”命令（左图），打开“新建可编辑区域”对话框（右图）。 （3）在“新建可编辑区域”对话框中为可编辑区域命名，然后单击“确定”按钮，完成可编辑区域的创建。 （4）在文档中可以看到可编辑区域被一个矩形框围起来，在左上角的标签上显示有可编辑区域的名称。 3.删除可编辑区域 在文档中选择要修改的可编辑区域，然后选择“修改→模板→删除模板标记”命令，即可将可编辑区域转变为锁定区域。 阶段3 应用模版 （1）在Dreamweaver新建一个空白文档，然后选择“窗口→资源”命令（左图），打开“资源”面板，并在面板左侧单击“模板”按钮（右图）。 （2）在“资源”面板的模板分类中（左图），选择要应用的模板文件后，单击面板中的“应用”按钮，即可在文档中应用选择的模板（右图）。 任务2 使用资源列表 在Dreamweaver中，资源是指存储在站点中的各种元素，如图像、影片和动画等。要查看站点中的资源，可以通过“资源”面板查看，包括“站点”和“收藏”两种查看方式。 阶段1 “资源”面板 图像按钮 ：包括了站点的图像文件，能够显示GIF、JPEG和PNG3种类型的图像。 颜色按钮 ：站点中所有网页使用的颜色信息，包括文本颜色、背景颜色和链接颜色信息。 URLs按钮 ：站点中的外部链接信息，包括FTP、gopher、HTTP和电子邮件链接等。 Flash按钮 ：站点中的Flash格式文件。在资源面板中仅显示SWF文件，而不显示Flash源文件 Shockwave按钮 ：站点中的Shockwave格式文件。 影片按钮 ：站点的中的QuickTime或MPEG等格式的视频文件。 脚本按钮 ：站点中的独立的JavaScript或VBScript文件。 模板按钮 ：站点的中模板文件，通过模板文件可以快速的制作大量风格相同的网页。 库按钮 ：站点中的库项目，可以在多个页面中使用，当修改一个项目时，所有包含该项目的网页都同时被更新。