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

《网页设计与制作ppt高职 第8章创建模板、使用资源列表.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章布局模板、使用资源列表创建和使用模板任务1使用资源列表任务2本章导读制作网页前首先要进行布局，否则将难以继续进行网页的创建，而模板与资源列表则可以快速地创建相同风格的网页。创建使用模板使用资源列表能力目标任务1创建和使用模板阶段1布局模式阶段2使用模版阶段3应用模版阶段1布局模式页面布局，就是指通过对页面内容框架的安排，确定网页中导航条、图像、文本内容及其他网页对象的显示位置，以达到规整网页结构，完善内容显示效果的目的。在Dreamweave中，提供了专门的页面布局视图，以方便用户在其中进行网页布局。1.进入/退出

2、布局模式（1）选择“插入”面板中的“布局”面板。在面板中单击“布局模式”按钮。（2）在文档顶部显示的布局模式标签，表示现在正处于布局视图；如果要退出布局模式，只需要单击旁边的“退出”按钮，即可返回到标准模式视图。2.绘制布局表格（1）在布局视图中，单击“布局”面板中的“布局表格”按钮，鼠标指针变为十字形。（2）按住左键在文档中拖动鼠标（左图），即可在文档绘制一个布局表格（右图）。阶段2使用模版模板其实也是一个文档，可以将其作为创建其他文档的基础。熟练地应用模板，可以轻松快速地制作出多个样式相同、内容不同的网页。下面分别介

3、绍创建模板、定义可编辑区域和应用模板的操作方法。1.创建模板（1）在Dreamweaver中选择“文件→打开”命令，打开一个已经制作好的网页文档，然后选择“文件→另存为模板”命令。（2）打开“另存为模板”对话框，在“站点”下拉列表中选择站点，然后在“另存为”文本框中输入保存的模板名称。（3）单击“保存”按钮，模板文件即被保存在站点目录的“Templates”文件夹中。Dreamweaver的模板文件保存到站点的目录下的“Templates”文件夹中，其扩展名为“.dwt”；如果站点目录下没有“Templates”文件夹，

4、在保存模板文件时会自动创建该文件夹。在Dreamweaver中还可以通过直接创建来新建一个空白模板文件（1）在Dreamweaver中选择“文件→新建”命令，打开“新建文档”对话框。（2）在对话框的“常规”标签中，在“类别”列表中选择“模板页”，再在“模板页”列表中选择“HTML模板”项，然后单击“创建”按钮。（3）在Dreamweaver中可以看到已经成功地创建了一个空白模板页。2.定义可编辑区域（1）在Dreamweaver中打开模板文件，在文档中选择要定义为可编辑区域的内容。（2）选择“插入→模板对象→可编辑区域”

5、命令（左图），打开“新建可编辑区域”对话框（右图）。（3）在“新建可编辑区域”对话框中为可编辑区域命名，然后单击“确定”按钮，完成可编辑区域的创建。（4）在文档中可以看到可编辑区域被一个矩形框围起来，在左上角的标签上显示有可编辑区域的名称。3.删除可编辑区域在文档中选择要修改的可编辑区域，然后选择“修改→模板→删除模板标记”命令，即可将可编辑区域转变为锁定区域。阶段3应用模版（1）在Dreamweaver新建一个空白文档，然后选择“窗口→资源”命令（左图），打开“资源”面板，并在面板左侧单击“模板”按钮（右图）。（2）在

6、“资源”面板的模板分类中（左图），选择要应用的模板文件后，单击面板中的“应用”按钮，即可在文档中应用选择的模板（右图）。任务2使用资源列表在Dreamweaver中，资源是指存储在站点中的各种元素，如图像、影片和动画等。要查看站点中的资源，可以通过“资源”面板查看，包括“站点”和“收藏”两种查看方式。阶段1“资源”面板图像按钮：包括了站点的图像文件，能够显示GIF、JPEG和PNG3种类型的图像。颜色按钮：站点中所有网页使用的颜色信息，包括文本颜色、背景颜色和链接颜色信息。URLs按钮：站点中的外部链接信息，包括FTP、

7、gopher、HTTP和电子邮件链接等。Flash按钮：站点中的Flash格式文件。在资源面板中仅显示SWF文件，而不显示Flash源文件Shockwave按钮：站点中的Shockwave格式文件。影片按钮：站点的中的QuickTime或MPEG等格式的视频文件。脚本按钮：站点中的独立的JavaScript或VBScript文件。模板按钮：站点的中模板文件，通过模板文件可以快速的制作大量风格相同的网页。库按钮：站点中的库项目，可以在多个页面中使用，当修改一个项目时，所有包含该项目的网页都同时被更新。阶段2使用站点资源（1

8、）在文档中选择一段要应用新的颜色的文本内容，然后打开“资源”面板，单击“资源”面板左侧的“颜色”按钮。（2）选择“颜色”资源栏中要应用的颜色选项，然后单击“资源”面板底部的“应用”按钮。（3）在文档中可以看到，开始选择的文档颜色已经变为在“资源”面板中所选择的颜色了。阶段3使用库“库”是网页中的一部分内容，单独保存在