PHP+CMS+Dreamweaver网站设计实例教程王德永张少龙第4章教育网站静态页面布局.pptVIP

PPT研究院 POWERPOINT ACADEMY * * 新建模板的方式有两种：一种是从现有文档中新建模板，另一种是从新建的空白文档中新建模板。 接下来，我们演示制作从现有文档中新建模板的方式。我们利用已经存在的lufood.html（鲁菜菜单特点）页面，制作生成模板用来制作其他菜系特点的页面。 一、新建模板 首先，我们观察lufood.html页面，确定保存为模板的区域。由图4-94，我们可以分析出保存为模板的区域。红色线框内的内容是变化的，其他区域的内容是固定的。 一、新建模板 1、布局模板页面 利用我们学过的表格，图文知识搭建模板页面，搭建完成后的页面如下图4-95所示。 一、新建模板 2、创建可编辑区域 在模板中，可编辑区域是要制作的页面的一部分，对于基于模板的页面，能够改变可编辑区域的内容。 创建可编辑区域，可以执行以下操作： 选择要设置为可编辑区域的文本或内容。 将插入点放在想要插入可编辑区域的地方。 一、新建模板 3、保存模板 保存模板的方式如下图4-98所示。 一、新建模板 4、应用模板制作新的网页sufood.html（苏菜菜系特点） 执行“菜单”→“新建网页”，弹出新建网页窗口，选择“模板中的页”，如图4-99所示。 一、新建模板 5、编辑模板创建的新页面sufood.html 在可编辑区域输入文字图片，操作过程如下图4-100所示 一、新建模板 6、保存预览 保存预览完成页面的制作，效果图如下图4-101所示。 一、新建模板 分析list.html页面，选定哪些区域是固定的，哪些内容是需要可编辑的。分析后的可编辑区域如图4-102中红色线框所示。 1、分析页面，选定可编辑区域 将红线框起来的内容删除掉，然后选择“插入”面板→“模板”→“可编辑区域”，制作如下图4-103所示。 2、插入“可编辑”区域 执行“文件”→“另存为模板”，弹出窗口给模板命名，完成模板的创建。 在站点目录下生成新的文件夹“Templates”，生成的模板位于该文件夹中，如图4-105所示，至此完成模板页的制作。 3、文件另存为模板 评分项目 评分标准 分值 比例 任务结果 熟练掌握表格布局---制作内容页模板页面布局 0~10 50% 熟练掌握超级链接的使用---制作导航条 0~10 熟练掌握模板的应用---创建内容页模板 0~30 任务过程 根据任务实施过程的态度、团队协作、拓展能力和创新能力等方面进行考核 酌情打分 20% 知识的掌握 模板制作 酌情打分 20% 任务完成时间 在规定的时间内完成任务者得满分，每推延1小时扣5分 0~20分 10% 本任务我们主要学习了模板的制作。 模板是网页编辑软件生成具有相似结构和外观的一种网页制作功能。用模板创建的网页具有某种特性，有相同的布局、相似的导航栏结构。在接下来的学习中，我们会应用到模板的相关知识，请同学们务必牢牢掌握模板的操作方法 4.5.1 实训目的 4.5.2 实训任务 4.5.3 实训考核 通过实训使学生更加熟练掌握DreamweaverCS5的使用：例如表格布局、各种超级链接的应用、图文混排、表单和模板等知识的相关应用。 本实训的任务包括如下三个： 制作企业网站主页index.html，完成后的效果图如下图4-106所示。 制作企业网站列表页list.html，完成后的效果图如下图4-107所示。 制作企业网站内容页content.html，完成后的效果图如下图4-108所示。 评分项目 评分标准 分值 比例 任务结果 熟练掌握表格布局---制作三张网页的页面布局 0~30 50% 熟练掌握超级链接的使用---制作网页中的导航和超级链接 0~30 熟练掌握图文混排相关知识---添加内容页 0~20 制作表单---数量掌握表单的相关知识 0~20 任务过程 根据任务实施过程的态度、团队协作、拓展能力和创新能力等方面进行考核 酌情打分 20% 知识的掌握 DreamweaverCS5相关知识 酌情打分 20% 任务完成时间 在规定的时间内完成任务者得满分，每推延1小时扣5分 0~20分 10% 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 馋死 表格布局在任务一中已经进行了详细的讲述再次不赘述，此处仅讲解“管理培训”栏目的制作方式来对表格布局知识进行回顾。 执行菜单“插入”→“表格”命令，插入1行2列的表格。设置表格的宽度为220像素。设置表格的边框、单元格的边距、单元格的间距为0像素。 设置表格的第一个单元格的宽度为110像素，高度为34像素。在“拆分”模式下，设置单元格的背景图片为“back_title1.jpg”。设置单元格对齐方式为：水平居中、垂直居中对齐。 设置第二个单元格的对齐方式为：水平右对齐垂直居中对齐。 1、使用表格布局页面 执