Dreamweaver网页制作基础教程项目五制作新闻动态讲解材料.pptVIP

王焕杰 电话 邮箱:cnsyjsj@163.com 沈阳市信息工程学校 项目五 制作新闻动态 核心技术 ? 掌握创建和应用模板的方法 ? 掌握编辑和管理模板的方法 ? 了解创建和应用库的方法 ? 了解编辑与管理库项目的方法 任务目标 ? 任务一：网页模板的应用 ? 任务二：库项目的应用 能力目标 ? 模板创建和应用 ? 通过模板的更新成批更新风格相似的系列网页 ? 库项目的创建和应用 ? 通过库项目的更新成批更新风格相似的系列网页 项目背景 在校园网建设的基础上，要求完成校园网上“校园新闻”栏目的制作，使各个页面具有相似的风格。同时，对多个风格相同的网页进行同样的修改，即修改后仍需保持页面风格的一致。 项目分析 如果采用常规的网页编辑方法，不得不在每个页面中进行重复操作，很乏味，同时又浪费了大量的时间。在Dreamweaver中可以使用模板和库项目技术解决这个问题。 设计“校园新闻”系列网页，创建风格相同的5个页面，如图5.1.1和图5.1.2所示。其中，如图5.1.1所示的页面为模板。图示的“校园新闻”系列网页中，不但所有页面的风格相同，而且有些内容也完全一样。这种情况下，如果采用一般的编辑方法，需要在每个文件中重复设计相同的内容，既浪费时间也容易出错。如果利用模板或库项目技术进行设计，将大大提高工作效率。 本项目包含了模板与库项目的创建、应用、编辑和管理几个方面的内容。体现在： 应用模板快速设计与“校园新闻”风格相同的5个网页。 应用库项目快速设计与“校园新闻”风格相同的5个网页。 图5.1.1 用于创建模板的页面 设计思路 创建模板文件（包括创建空白模板并添加内容，以及将第一个页面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： 在文件窗口右侧空白区域，绘制AP Div，分别设置宽度和高度为755像素、387像素。在其中插入宽度参数为100%的一行一列表格，输入内容“当前位置：首页新闻中心”；将光标移动到表格后面，继续插入一个宽度参数为100%的八行三列表格，适当调整单元格宽度，在表格第一列全部插入图像ico