网页设计与制作 —— 学习情境四：网站引导页的制作 网页设计与制作 　　　　—— 学习情境四：网站引导页的制作 主讲教师：李果、邹珺

网站引导页的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境4 任务： 网站引导页的制作 1、创建CSS样式的能力 2、利用CSS控制页面样式的能力 层叠样式在布局页面任务中的作用： 制定方案 工作过程 工作检查 工作总结

网站引导页的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境4 学生分组： 根据情景1的分组情况而定 工作计划： 指导学生根据任务量和时间量安排计划。 工作计划： (示例) 工作过程 工作检查 工作总结

网站引导页的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境4 学生提交计划： 教师抽查，现场指导调整。 指导学生根据任务计划制定实施方案。 实施方案： (示例) 制定方案 工作过程 工作检查 工作总结

网站引导页的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境4 学习内容： 制作引导动画 利用AS添加引导动画的链接 在网页中插入引导动画 学习内容： 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结

网站引导页的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境4 专业能力目标 教学目标： 社会能力目标 方法能力目标 工作检查 工作总结

1.网站色彩 提到咖啡总会让人联想到美好的爱情，卡布奇诺的浓浓情意也从电视荧幕上走到生活中来，在爱情无处不在的今天，我们一起来体会咖啡带来的绵绵情意。 咖啡色代表的是“平实”，“不被注意”或“不需要被了解”。咖啡色在视觉上代带宽厚，沉稳，在广告设计上可以作为主色系表达主题诉求，但是一定要和鲜红色做背衬。如果整个设计是咖啡色调则代表怀旧、古朴、传统和凝重。给人一种沧桑厚重的时代回望。在商标上一般用作老字号的代表。给现代女士的用品很少用咖啡色调，一般用明快的浅色系。 网站主色调用土黄色，给人一种稳定和安全的感觉，让人联想到美好的爱情无处不在的感觉。

2.编辑CSS样式 .a { font-family: "宋体"; font-size: 12px; line-height: 30px; } .dh { font-size: 13px; font-weight: bold; color: #cccccc; .wenzi { line-height: 25px; color: #502614;

2.编辑CSS样式 .biao { font-family: "宋体"; font-size: 13px; color: #990000; } .daohang { font-size: 12px; color: #8e7656; .d { color: #e6c061; .biaoti { font-weight: bold;

3.主页 网站与3行1列，宽851像素。网页分七个导航：主页、咖啡文化、咖啡物语、健康咖啡、咖啡品尝、产品展示、咖啡用具七个导航。右边一个FLASH。界面如下：

4.一级链接 步骤1、在网页顶部插入1行1列，宽度为1000像素，其它项为0的表格。选中表格，在属性面板中设置表格居中对齐。 步骤2、把光标定位在左侧单元格中，单击“常用”面板中的“Flash”按钮，插入Flash文件夹中的“ding3.swf”。 步骤3、在表格下面再次插入1行1列，宽度为1000像素的表格，设置表格居中对齐。 步骤4、把光标定位在单元格中，单击“常用”面板中的“图像”按钮，插入images文件夹中的图像“dingi.jpg”。

4.一级链接 步骤5、在表格下面再次插入2行1列，宽度为1000像素的表格，设置表格居中对齐。 步骤6、设置第1个单元格背景色为绿色#505B43。在此单元格内插入1行1列宽205像素。在属性面板中，设置背景图像image/dhdt.gif。在此单元格内插入2行1列，宽120像素。在属性面板中，设置第一个单元格高度为45。在第二个单元格内插入表格13行1列，宽100像素。在属性面板中，分别设置单元格高度35，1像素。分别写入七个导航：主页、咖啡文化、咖啡物语、咖啡用具、咖啡品尝、健康咖啡、产品展示。 步骤7、右边插入1行4列，宽100%的表格。

4.一级链接 步骤8、设置单元格背景色为土黄色#DED7A5。在属性面板中，分别设置单元格宽度为45、574、51、125，高度为40。 步骤9、插入2行2列，宽795像素的表格。选中插入表格并设置为居中对齐。拖动鼠标，选中所有单元格，在属性面板中设计单元格宽度为45像素。然后在右列单元格内均插入图片mingren.jpg，并居中图片。在第二行输入相应的内容。 步骤10、插入4行2列，宽1000像素的表格。选中插入表格并设置为居中对齐。背景颜色为#3E2500。拖动鼠标，选中所有单元格，在属性面板中设计单元格宽度为200、600、200像素。在中间一栏输入导航相关内容。界面如下：

网站引导页的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境4 5分钟 学生自我检查： 10分钟 修改： 15分钟 小组内相互检查： 10分钟 修改： 制定方案 工作过程 15分钟 小组间相互检查： 10分钟 修改： 工作检查 15分钟 教师抽查： 10分钟 修改： 工作总结

网站引导页的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境4 学生自评项(15分钟) 1.指导学生对自己的作品进行评价 学生自评项(15分钟) 学生互评项(25分钟) 工作计划 制定方案 2.指导学生对其它同学的作品进行评价(30分钟) 工作过程 3.教师对学生的作品进行评价(30分钟) 工作检查 4.指导学生填写成果评价表(20分钟) 工作总结