《网页设计与制作》课件-项目五 任务一 制作“新闻动态”（一）

Dreamweaver网页制作基础教程项目五制作新闻动态

核心技术掌握创建和应用模板的方法掌握编辑和管理模板的方法了解创建和应用库的方法了解编辑与管理库项目的方法任务目标任务一：网页模板的应用任务二：库项目的应用能力目标

模板创建和应用通过模板的更新成批更新风格相似的系列网页库项目的创建和应用通过库项目的更新成批更新风格相似的系列网页项目背景在校园网建设的基础上，要求完成校园网上“校园新闻”栏目的制作，使各个页面具有相似的风格。同时，对多个风格相同的网页进行同样的修改，即修改后仍需保持页面风格的一致。项目分析如果采用常规的网页编辑方法，不得不在每个页面中进行重复操作，很乏味，同时又浪费了大量的时间。在Dreamweaver中可以使用模板和库项目技术解决这个问题。设计“校园新闻”系列网页，创建风格相同的5个页面，如图5.1.1和图5.1.2所示。其中，如图5.1.1所示的页面为模板。图示的“校园新闻”系列网页中，不但所有页面的风格相同，而且有些内容也完全一样。这种情况下，如果采用一般的编辑方法，需要在每个文件中重复设计相同的内容，既浪费时间也容易出错。如果利用模板或库项目技术进行设计，将大大提高工作效率。本项目包含了模板与库项目的创建、应用、编辑和管理几个方面的内容。体现在：应用模板快速设计与“校园新闻”风格相同的5个网页。应用库项目快速设计与“校园新闻”风格相同的5个网页。图5.1.1用于创建模板的页面图5.1.2基于模板的5个风格相同的页面项目准备构建好相关网页，如图5.1.3所示。图5.1.3已构建好的“xyxw.html”网页文件设计思路创建模板文件（包括创建空白模板并添加内容，以及将第一个页面xyxw.htm另存为模板文件temp.dwt这两种方法）。（1）打开模板文件temp.dwt，设置模板的可编辑区域。（2）创建基于模板的其他页面，并修改每个页面中不同的内容。（3）通过更新模板，批量更新基于模板创建的系列网页。任务一网页中的文本任务描述随着校网园规模的扩大，网站的网页越来越多，网站中各页面的风格也不完全统一，要求网站管理员采取措施，使网站更便于管理，使网站中的风格统一，采用很少的修改就可以更改大多数网页的结构和风格。下面以制作“校园新闻”系列网页为例进行介绍。知识准备利用模板和库，不仅可以快速创建风格一致的网页，更重要的是，模板和库可以让设计者在短时间内重新设计自己的网站，或者对一系列风格相似的网页实现同样的修改，从而使维护站点更轻松。模板（Template）的作用是帮助设计者批量生成具有固定格式的页面。1．利用模板创建系列页面1）创建模板（1）将现有文件保存为模板。（2）创建空白模板。2）定义模板可编辑区域（1）设置可编辑区域。要使用模板，必须将模板中的某些区域设置为可编辑区域，以便在不同页面中输入不同的内容。（2）删除可编辑区域。2．利用模板更新网页1）修改模板并更新网页2）将模板应用到已经存在的网页3）模板的管理（1）模板的重命名。（2）删除模板。（3）将文件与模板分离。任务实施 步骤1：步骤1：新建一个空白网页文件并打开。步骤2：在文件窗口中插入Div标签并链接样式表文件ys.css，应用类样式.ys，从而规定Div标签的宽度为1000像素，高度为800像素。步骤3：将光标定位到Div标签内，插入宽度为1000像素的两行一列的表格1。第一行单元格高度设为152像素，插入图像top.jpg；第二行单元格高度设为53像素，插入图像top1.jpg。步骤4：将光标移至表格1之后，接着插入宽度为200像素的两行二列的表格2。将第一行两个单元格合并，高度设为33像素，链接外部样式表ys1.css文件，获取背景图像，输入内容；在第二行第一个单元格中插入图像pic1.jpg，在第二个单元格内嵌套四行一列的表格，输入内容即可。

设计“校园新闻”网页步骤5：将光标再次移至表格2之后，继续插入一个宽度为200像素的三行一列的表格3，从上至下的3个单元格内分别插入图像a_03.gif、a_06.gif、a_08.gif。步骤6：将光标移至表格3之后，在Div标签底部插入宽度为1000像素的一行一列表格，链接外部样式表ys2.css文件，填充背景图像。然后在其中嵌套三行一列的表格，适当调整宽度，输入文字，设置字体大小为12像素。步骤7：在文件窗口右侧空白区域，绘制APDiv，分别设置宽度和高度为755像素、387像素。在其中插入宽度参数为100%的一行一列表格，输入内容“当前位置：首页>>新闻中心”；将光标移动到表格后面，继续插入一个宽度参数为100%的八行三列表格，适当调整单元格宽度，在表格第一列全部插入图像icon2.gif，在表格第二列输入各个新闻标题，在表格第三列输入时间。步骤8：保存网页并按“F12”键预览网页，如图5.1.3所示。步骤1：打开本地站点“ycxx”文件夹中“项目5”下的xyxw.html文件，如图5.1.3所示。

创建模板将设计好的xyxw.html页面另存为模板文件temp.dwt，操作步骤如下。图5.1.3已构建好的“xyxw.html”网页文件步骤2：执行下列操作之一，打开“另存模板”对话框，如图5.1.4所示。在菜单栏中选择“文件”→“另存为模板”选项。在“插入”工具栏的“常用”类别中，单击“模板”按钮上的下拉箭头，打开下拉菜单，单击“创建模板”选项，如图5.1.5所示。图5.1.4“另存模板”对话框图5.1.5“模板”按钮下拉菜单步骤3：在“站点”下拉列表框中选择“ycxx”，在“另存为”文本框中输入模板名称“temp”。步骤4：单击“保存”按钮。系统将自动在站点根目录“ycxx”下创建“Templates”文件夹，并将创建的模板文件temp.dwt保存在该文件夹中。将模板temp.dwt中页面右下方的内容部分定义为可编辑区域，效果如图5.1.6所示，操作步骤如下。

定义可编辑区域定义内容区域为可编辑区域步骤1：在模板文件temp.dwt中选择右下角的APDiv1。步骤2：执行下列操作之一，打开“新建可编辑区域”对话框。在菜单栏中选择“插入记录”→“模板对象”→“可编辑区域”选项，如图5.1.7所示。图5.1.7“可编辑区域”选项在“插入”工具栏的“常用”类别中，单击“模板”按钮上的下拉箭头，打开“模板”下拉菜单，选择“可编辑区域”选项。选择要设置为可编辑区域的对象，单击鼠标右键，在弹出的快捷菜单中选择“模板”→“新建可编辑区域”选项。“新建可编辑区域”对话框如图5.1.8所示。图5.1.8“新建可编辑区域”对话框步骤3：在“名称”文本框中输入可编辑区域的名称。步骤4：单击“确定”按钮，在模板文件中建立一个可编辑区域。步骤1：在菜单栏中选择“文件”→“新建”选项，在弹出的“新建文件”对话框中选择“模板中的页”选项卡，如图5.1.9所示。

创建基于模板的新页面步骤2：从中间的“站点”列表中选择站点“ycxx”，然后选择右侧“temp”模板，单击“创建”按钮，此时将打开一个新的文件窗口，如图5.1.10所示。图5.1.10基于模板的新文件窗口步骤3：将“text”可编辑区域中的内容删除，替换为“放假通知”的内容，标题文字居中显示，正文部分链接样式表ziti.css文件并应用.ziti类样式，修改网页文件标题为“新闻动态”。编辑完毕后，第一个页面如图5.1.11所示（提示：文字素材文件为“放假通知.txt”）。在新文件的右上方显示“模板：temp”，表示当前文件是基于模板temp建立的。文件中凡是属于锁定区域的地方，鼠标指针将变成形状，表示不可编辑。标有“text”名称的地方是可编辑区域。图5.1.11替换可编辑区域的内容步骤4：第一个页面编辑完成后，以xinwen1.html为文件名保存在本地站点的“项目5/mresult”文件夹中。步骤5：采用上述步骤编辑系列网页中的其他页面，并以xinwen2.html、xinwen3.html、xinwen4.html、xinwen5.html为名保存到本地站点的“项目5/mresult”文件夹中。步骤6：保存并按“F12”键预览网页。至此，“校园新闻”系列网页的创建全部完成。在编辑基于模板的新文件时，只需替换可编辑区域的内容即可，锁定区域的内容不用也不能修改，这不但保证了系列页面风格的一致，也保证了锁定区域内容不受破坏，从而大大提高了设计效率。步骤1：打开模板文件temp.dwt。步骤2：修改模板文件锁定区域“校园之星”内容，修改完毕后，保存模板，如图5.1.12所示。

修改模板和更新网页图5.1.12修改模板文件修改“校园之星”的内容步骤3：此时，系统打开“更新模板文件”对话框，所有套用该模板的文件都会出现在列表框中，如图5.1.13所示。单击“更新”按钮，系统会继续弹出“更新页面”对话框，如图5.1.14所示，然后单击“关闭”按钮。图5.1.13“更新模板文件”对话框图5.1.14“更新页面”对话框知识拓展知识点1：利用模板创建系列页面1．创建模板1）将现有文件保存为模板方法一：在菜单栏中选择“文件”→“另存为模板”选项，打开保存对话框。方法二：在“插入”工具栏的“常用”类别中，单击“模板”按钮上的下拉箭头，打开下拉菜单，单击“创建模板”选项。2）创建空白模板方法一：在菜单栏中选择“文件”→“新建”选项，打开“新建文件”对话框。单击“空模板”选项卡，从“模板类型”中选择“HTML模板”，然后单击“创建”按钮。方法二：利用工具栏创建空白模板。新建一个网页文件，在“插入”工具栏的“常用”类别中，单击“模板”按钮上的下拉箭头，选择“创建模板”选项、。方法三：使用“资源”面板创建新模板。在菜单栏中选择“窗口”→“资源”选项，或在“文件”组合面板上单击“资源”选项卡，打开“资源”面板。单击左侧“模板”类别按钮后，单击底部的“新建模板”按钮，一个新的、无标题模板被添加到模板列表中。输入模板名称，按“Entert”键，新的空模板便创建完成。2．定义模板可编辑区域模板创建完成后，接下来一项重要的工作是定义模板的可编辑区域。默认情况下，新创建的模板的所有区域都是锁定区域。可编辑区域是指基于模板的页面中可以更改的内容。当需要修改基于模板创建的网页时，只能修改模板所定义的可编辑区域，而基于模板的页面中不可更改的部分称为“锁定区域”或“不可编辑区域”。锁定区域一般是用来体现网站风格的部分，在整个网站中这些区域是相对固定和独立的，如导航条等。1）设置可编辑区域要使用模板，必须将模板中的某些区域设置为可编辑区域，以便在不同页面中输入不同的内容。方法一：在菜单栏中选择“插入记录”→“模板对象”→“可编辑区域”选项，如图5.1.7所示。方法二：在“插入”工具栏的“常用”类别中，单击“模板”按钮上的下拉箭头，打开“模板”下拉菜单，选择“可编辑区域”选项，如图5.1.16所示。方法三：选择要设置为可编辑区域的对象，单击鼠标右键，在弹出的快捷菜单中选择“模板”→“新建可编辑区域”选项。在“名称”文本框中输入可编辑区域的名称，单击“确定”按钮，即可在模板文件中建立一个可编辑区域。2）删除可编辑区域方法一：将插入点置于可编辑区域中，在菜单栏中选择“修改”→“模板”→“删除模板标记”选项。方法二：在标签选择器中的<mmtemplate:editable>标签上单击鼠标右键，在弹出的快捷菜单中选择“删除标签”选项。知识点2：利用模板更新网页1．修改模板和更新网页如果在“更新模板文件”对话框中单击“不更新”按钮，则只保存模板，而不会立即更新文件。如果以后想用修改后的模板更新文件，则可采用下列方法。（1）更新某个文件，可以执行以下操作之一。选择菜单栏中的“修改”→“模板”→“更新当前页”选项。在“模板”面板的列表框中用鼠标右键单击当前文件所应用的模板，在弹出的快捷菜单中选择“更新当前页”选项。（2）更新整个站点，可以执行以下操作之一.在文件编辑窗口，选择菜单栏中的“修改”→“模板”→“更新页面”选项。在“模板”面板的列表框中用鼠标右键单击当前文件所应用的模板，在弹出的快捷菜单中选择“更新站点”选项。此时打开如图5.1.14所示的“更新页面”对话框，单击“完成”按钮开始更新操作。更新完毕后，单击“关闭”按钮退出。2．将模板应用到已经存在的网页方法一：打开网页文件，在“模板”面板的列表框中用鼠标右键单击当前文件所应用的模板，在弹出的快捷菜单中选择“应用”选项。方法二：打开网页文件，在“模板”面板上单击“应用”按钮。方法三：打开网页文件，直接从“模板”面板上将要应用的模板拖到当前文件中。方法四：打开网页文件，选择菜单栏中的“修改”→“模板”→“应用模板到页”选项，打开“选择模板”对话框，如图5.1.20所示。图5.1.20“选择模板”对话框3．模板的管理模板文件扩展名为.dwt，模板文件创建完成后，系统将自动在站点根目录下创建“Templates”文件夹，并将创建好的模板文件保存在该文件夹中。1）模板的重命名在“模板”面板的模板列表中，选中要重新命名的模板，在其名称上再单击一次鼠标，即可激活其文本编辑状态；也可以在选中模板后，用鼠标右键单击模板，在弹出的快捷菜单中选择“编辑”→“重命名”选项；还可以在站点管理器中选定“T