网页设计与制作 —— 学习情境六：整体网站的制作

Presentation on theme: "网页设计与制作 —— 学习情境六：整体网站的制作"— Presentation transcript:

1 网页设计与制作 —— 学习情境六：整体网站的制作
网页设计与制作 　　　　—— 学习情境六：整体网站的制作 主讲教师：李果、邹珺

2 整体网站的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境6 任务： 整体网站的制作
1、行为与事件的概念，行为的基本操作，标准动作 2、 JavaScript基本知识 特效页面在布局页面任务中的作用： 制定方案 工作过程 工作检查 工作总结

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

4 整体网站的制作 工作内容 工作计划示例 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境6 任务： 计划用时： 完成情况：
绘制页面布局草图，页面布局 制作首页，添加网页文字，插入图片和fFlash动画 用行为设计图片翻转效果；用行为设计弹出广告页面和信息提示框； 用行为设计文字持续滚动效果 建立二级连接，制作二级页面 计划用时： 40分钟 45分钟 50分钟 完成情况： 制定方案 工作过程 工作检查 工作总结 返回

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

6 整体网站的制作 实施方案示例 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境6 任务： 绘制页面布局草图，页面布局
制作首页，添加网页文字，插入图片和fFlash动画 用行为设计图片翻转效果；用行为设计弹出广告页面和信息提示框； 用行为设计文字持续滚动效果 建立二级连接，制作二级页面 计划用时： 40分钟 45分钟 50分钟 负责人： 检查人： 完成情况： 修改意见： 修改情况： 工作计划 制定方案 工作过程 工作检查 工作总结 返回

7 整体网站的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境6 学习内容： 网页素材的收集与处理 动画的制作
利用表格进行页面布局 首页的制作 二级子页的制作 各页面间链接的制作 学习内容： 工作计划 制定方案 工作过程 工作检查 工作总结

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

9 整体网站的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境6 专业能力目标： 能够合理设计并制作首页
能够合理设计并制作子页 能够正确设置首页与子页的链接关系 专业能力目标： 工作计划 制定方案 工作过程 工作检查 工作总结 返回

10 整体网站的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境6 社会能力目标： 具有良好的职业道德和职业素养
具有较强的与人沟通和交流的能力 具有良好的工作习惯与清晰的思维 社会能力目标： 工作计划 制定方案 工作过程 工作检查 工作总结 返回

11 整体网站的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境6 具有较好的学习新知识和技能的能力
具有解决问题的方法能力与制定相关工作计划的能力 具有查找相关资料和获取信息解决相关问题的能力 方法能力目标： 制定方案 工作过程 工作检查 工作总结 返回

12 整体网站的制作 工作内容 工作计划 制定方案 工作过程 工作检查 工作总结 学习情境6 页面效果图
1.绘制页面布局草图，规划网站页面表格结构 制定方案 工作过程 制作步骤 工作检查 工作总结 返回

13 返回

14 1.Logo标志 这个Logo标志“食”表示，饣米也，——《说文》，按六谷之饭日食，供食用，也比喻某种不可缺少的东西。
虽说简单，但明朗，使人一看既知。完整的突出了网站的本意，中国的饮食可以说是“食”天下，孙中山先生在其《建国主略》一书中说：“我国近代文明进化，事事皆落人之后，惟食一道之进步，至今沿为各国所不及。 中国人将食的追求作为人生至乐来追求，吃饭成为第一要求，食谱的广泛，举几能够食者皆食。

15 2.色彩搭配 方案：白+绿+橙 网页的底色为白色，代表纯洁，朴素，神圣明快，使人有安全感，给心脏病人以慰藉，对烦躁情绪有镇静作用。
绿色：新鲜，平静，和平，柔和，安逸，青春。绿色与人类息息相关，是永恒的欣欣向荣的自然之色，代表了生命与希望，也充满了青春活力，它本身具有一定的与自然健康相关的感觉。 橙色代表光明，华丽，兴奋，甜蜜，快乐。 此三种色系搭配起来的效果使浏览者在工作之余放松心情，解除疲劳，食欲随之而来，并可细细品味其中这奥妙。

16 首先网页分七个导航：首页，饮食文化，科学饮食，安全饮食，儿童饮食，饮食礼仪，健康食谱。
3.网站结构描述 首先网页分七个导航：首页，饮食文化，科学饮食，安全饮食，儿童饮食，饮食礼仪，健康食谱。 饮食文化包含历史文化，饮食故事，名人铁事， 食口溯源和菜肴来历。 科学饮食包含了美颜健身，饮食平衡和饮食保健。 安全饮食包括了营养饮食，养生之道。 儿童饮食包括儿童饮食。 饮食礼仪包括了饮食礼仪，厨房常识，异域养食，明星与美食和潮流饮食。 健康食谱包括了烹制大全，精品小吃和酒醇茶浓咖啡香。 网站有三级链接，首页包含最新新闻，营养美食及烹饪内容。使人们能够更快了解到市场上的消息。 一级链接进入之后，每个子页则是对每个小标题的详细介绍。

17 4.主页 主页是一张以1010*600绿色饮食图片为主，突出饮食主题，使网页更有鲜明度和吸引力，加上“食天下”作为链接，然后点击进入首页。如图：

18 5.首页 步骤1：打开 Dreamweaver MX 2004，首先首页上面插入一行宽为780的表格，然后是一个780*100一行两列的表格，第一列插入Logo标志“食天下”，第二列插入一个620*100的flash。 步骤2：下来则是导航栏，同样是一个780的表格，然后插入背景图像为780*40（4fu.jpg）的图片，如图： 在上面分别写入七个导航：首页，饮食文化，科学饮食，安全饮食，儿童饮食，饮食礼仪，健康食谱。

19 5.首页 步骤3：接下来是一个一行两列450*350的表格，左列中插一个450*350的flash,flash是由菜肴图片一张一张的闪动，右侧中插入一个19行一列宽为300居中对齐的表格，在每行中写入内容文字，如：咸鱼煲仔饭里竟有10多条寄生虫。（字体为宋体，12号）。 步骤4：下面是三个栏目：营养，美食，烹饪。插一个780的表格，再插一个一行三列的嵌套，每列里面再加一个8行2列的表格，每列宽为260，高为25，垂直方向为顶端对齐，然后输入相对内容，字体为宋体，12号。 步骤5：其次是插一个三行六列780*160的“食图观”栏目，边框为1的表格，每列中插入图片并加以标名名称。 步骤6：最后是一行表格为780的版权所有。

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

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