网页和网站制作第一次课教学设计书

1 网页和网站制作第一次课教学设计书 2012 年 2 月 28 日 星期 2 授课地点： 615 课时： 2 标题 第一章 网页和网站制作流程 教学 目标 能力目标 知识目标 从全局的角度概要性的了解网站制作技术和流程，了解本学期学习目标及进度安排。 认识网页和网站； 网页的基本构成元素； 网页设计的相关术语； 如何设计网页； 网页设计师应具备的素质； 静态页面的制作流程； 教学 任务 (内容 ) 网页是因特网展示信息的一种形式。 一般网页上会有文本和图像，复杂一些的还会有声音、视频、动画等多媒体。要制作出精美的网页，不仅要能够熟练的使用软件，还要掌握网页的一些基本概念和基本原则，只有对网页的基础知识进行深入的学习，才能快速掌握网页的设计技巧。 重点 难点 重点： 网站制作流程 难点： 网页设计原则 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习 /课程 引入 局网站案例赏析 回答法； 演示法； 板书； 多媒体教学 ； 网络资源； 实训设备； 思考；回答问题； 5 2 知识 讲授 1 认识网页 网 页和网站 网页的基本构成元素 文本和图像；超链接；动画；表单；音频和视频 2 什么是网页设计 网页设计概述 网页设计与网页制作 网页设计的特点 交互性；版式的不可控性；技术与艺术结合的紧密型；多媒体的综合性；多维性 3 网页设计的相关术语 因特网；浏览器；网页；网站；ip;名；静态网页；动态网页；虚拟主机；租赁服务器；主机托管； 4 网页设计涵盖的内容 视听元素；版式设计； 回答法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考； 理解； 记忆； 5 5 5 5 能力 训练 5 如何设计网页 网页设计的基本原则 明确主题；首页设计；分类；互动性；图像应用技巧；避免滥用技术；及时维护更新 网站设计成功的要素： 整体布局；信息；下载速度；图像和版面设计；文字的可读性；多媒体功能的运用；导向清晰 网页设计风格及色彩搭配 6 网页设计原则 为用户考虑原则；主题突出原则；整体原则；内容与形式相统一的原则；更新和维护原则 7 网页设计师应具备的素质 艺术素质；技能素质；综合素质 8 网站制作流程 前期策划；页面细化及实施；后期维护 9 静态 页面的制作流程 观察设计稿；拆分设计稿；网页设计的实现；表格布局； 局 回答法； 演示法； 实际操作法； 多媒体教学 ； 实训设备； 实践操作 10 10 10 10 10 3 归纳 提高 局页面特点：表现、内容和行为相分离 讲述法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考；回答问题 3 课后 任务 2 课后 小结 4 第 二 次课教学设计书 2012 年 3 月 1 日 星期 4 授课地点： 615 课时： 2 标题 第二章 式入门 第一节 式 教学 目标 能力目标 知识目标 网页制作离不开 术，采用 术可以有效对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制，只要对相应代码做出一些简单的编辑，就可以改变同一页面中不同部分或不同页面的外观和格式。 本节主要掌握 特点及基本语法。 特点； 类型； 基本语法； 如何使用 内联样式表； 嵌入样式表； 外部样式表； 单位和值； 教 学 任务 (内容 ) 对于设计者来说， 一个非常灵活的工具，使用户不必再把复杂的样式定义编写在文档结构中，而将有关文档的样式内容全部脱离出来，在行内定义，在标题中定义，甚至作为外部样式文件供 面调用。 则 特点 类型 基本语法： 做什么 式表的基本用法： 怎样在 插入样式表 应用到网页中 单位和值 重点 难点 重点：内联样式；嵌入式样式；外部样式表 难点：单位和值的定义 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习 /课程 引入 网页中的 答法； 演示法； 板书； 多媒体教学 ； 思考；回答问题； 5 5 知识 讲授 则如下： 选择符 属性 1：值 1；属性 2：值 2； 特点 类型 自定义 式； 式； 择器样式； 基本语法： 选择符 属性 1：值 1；属性 2：值 2； 冲突 怎样使用 做什么 文本格式和颜色；图形外观和布局；动态操作 回答法； 演示法； 板书； 多媒体教学 ； 实训设备 思考； 理解； 记忆； 10 10 10 能力 训练 式表的基本用法： 怎样在 插入样式表 式表规则 选择符；声明 应用到网页中 内联样式；嵌入式样式；外部样式表 单位和值 定义颜色值；定义字体；群选择符；派生选择符； 择符；类别选择符 回答法； 演示法； 实际操作法； 多媒体教学 ； 实训设备 实践操作 15 15 15 归纳 提高 三种选择器 三种定义方式 讲述法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考；回答问题 3 课后 任务 预习应用实例：为页面添加 式 2 课后 小结 6 第 三 次课教学设计书 2012 年 3 月日 6 星期 2 授课地点： 615 课时： 2 标题 第二章 式入门 第二节 应用实例：为页面添加 式 教学 目标 能力目标 知识目标 本例通过一个工作室网站页面，讲解如何在页面中添加 式及控制页面元素，在完成本例制作后，能够掌握 式基本应用。 外部样式文件添加； 常见的样式设置技巧； 教学 任务 (内容 ) 本例设 计制作一个工作室的网站页面，页面布局新颖，运用的色彩艳丽，页面中的背景及图片的布局给浏览者一种神秘的感觉。在设计页面时结合了相应的配色原理，使页面形成了一种独特的设计风格。 重点 难点 重点： 难点： 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习 /课程 引入 局案例赏析 回答法； 演示法； 板书； 多媒体教学 ； 思考；回答问题； 5 7 知识 讲授 1 设计分析 2 布局， 析： #00%; 00./ #10835006微软雅黑 ; #10 # 40600855宋体 ; 3792 #30905 #3420500 #3420500 #3420500 #00%; 00.); 回答法； 演示法； 板书； 多媒体教学 ； 实训设备 思考； 理解； 记忆； 10 20 8 000; 0 # 能力 训练 制作步骤： 站点建立 页面 局 添加 式 回答法； 演示法； 实际操作法； 多媒体教学 ； 实训设备 实践操作 20 20 归纳 提高 案例总结使用 式表可以彻底减轻网页设计者的工作负担， 式表能够在恰当的地方集中一批命令，以实现某种可视效果，而不是将它们分散在整个文档中。本节通过制作一个网站页面，介绍在网页设计中应用 式 的方法和技巧。 讲述法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考；回答问题 3 课后 任务 完成制作产品介绍网站首页 2 课后 小结 9 第 四 次课教学设计书 2012 年 3 月 8 日 星期 4 授课地点： 615 课时： 2 标题 第三章 使用 局页面 定位；常用布局方式 教学 目标 能力目标 知识目标 介绍 局的基本知识，如 义 常见布局方式。掌握及使用关于 局知识和方法。 什么是 嵌套和固定格式；浮动定位； 位；可视化盒子模型；常用的布局方式 教学 任务 (内容 ) 在设计网页时，能否控制好各个模块在页面中的位置非常关键，本课将对 行详细介绍，讲解利用 页面元素定位的方法。 重点 难点 重点：常用的布局方式 难点：定位方式 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习 /课程 引入 工作室页面的制作要点回顾 回答法； 演示法； 板书； 多媒 体教学 ； 网络资源； 实训设备； 思考；回答问题； 5 10 知识 讲授 1、定义 入 嵌套和固定格式 2、 局定位 （ 1）浮动定位 （ 2） 位 相对定位 绝对定位 悬浮定位 3、可视化盒子模型 盒子模型 视觉可视化模型 空白边叠加 回答法； 演示法； 板书； 多媒体教学 ； 实训设备 思考； 理解； 记忆； 5 10 10 能力 训练 4、常用的布局方式 居中布局设计 使用自动空白边让设计居中 使用定位和 负值空白边让设计居中 浮动布局设计 两列固定宽度布局 两列固定宽度居中布局 两列宽度自适应布局 两列右列宽度自适应布局 三列浮动中间列宽自动适应布局 高度自适应设计 回答法； 演示法； 实际操作法； 多媒体教学 ； 实训设备 实践操作 20 25 归纳 提高 5、 子模型的新增属性 述法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考；回答问题 5 课后 任务 熟练常用布局方式设计 2 课后 小结 11 第 五 次课教学设计书 2012 年 3 月 13 日 星期 2 授课地点： 615 课时： 2 标题 第三章 使用 局页面 应用实例 :使用 局页面（ 1） 教学 目标 能力目标 知识目标 通过实例的制作，在使用 版的页面中，利用 记，加上 其样式的控制，可以方便的实现各种效果，而且还实现了网站结构、表现、行为三者分离的目的。 100%宽度居中布局； 盒子模型应用 ； 局方法； 其它 性应用 教学 任务 (内容 ) 完成某企业网站首页的制作，要求简洁布局结构及统一的排版方式，整个页面给人以一种清晰的感觉，再加上整个页面以蓝色为主色调，图片和文字巧妙搭配，使页面更具商业气息。 重点 难点 重点： 局与 式表现 难点： 100%宽度显示居中布局方法 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习/课程 引入 1、 复习居中布局和左右有侧自动列宽布局 2、 子新增模型 回答法； 演示法； 板书； 多媒体教学 ； 思考；回答问题 5 12 知识 讲授 1、设计分析： 页面配色 整个页面以蓝色为主色调，图片和文字巧妙搭配，使页面更具商业气息 版面布局 2、布局分析 * .); 宋体 ; 2666666; 9 1448微软雅黑 ; 0 1445微软雅黑 ; 0 回答法； 演示法； 板书； 多媒体教学 ； 实训设备 思考； 理解； 记忆； 5 10 能力 训练 1、 版面布局分析 2、 页面布局 3、背景制作 演示法； 实际操作 法； 多媒体教学 ； 实践操作 10 20 20 归纳 提高 100%宽度居中对齐网页布局方法 讲述法； 多媒体 思考 5 课后 任务 继续完成此案例 5 课后 小结 13 第 六 次课教学设计书 2012 年 3 月 15 日 星期 4 授课地点： 615 课时： 2 标题 第三章 使用 局页面 应用实例 :使用 局页面（ 2） 教学 目标 能力目标 知识目标 通过实例的制作 ，在使用 版的页面中，利用 记，加上 其样式的控制，可以方便的实现各种效果，而且还实现了网站结构、表现、行为三者分离的目的。 100%宽度居中布局； 盒子模型应用； 局方法； 其它 性应用 教学 任务 (内容 ) 完成某企业网站首页的制作，要求简洁布局结构及统一的排版方式，整个页面给人以一种清晰的感觉，再加上整个页面以蓝色为主色调，图片和文字巧妙搭配，使页面更具商业气息。 重点 难点 重点： 局与 式表现 难点： 100%宽度显示居中布局方法 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习 /课程 引入 复习此例整体版面布局 回答法； 演示法； 板书； 多媒体教学 ； 思考；回答问题； 5 14 知识 讲授 局： # 00%; 47.); 87 # 86006./ # 2203 # 8000 # 600微软雅黑 ; 8144 # 0050 # 6017 # 0606 # 6056./ # 005600 # 6080./ # 6080回答法； 演示法； 板书； 多媒体教学 ； 实训设备 思考； 理解； 记忆； 15 15 ./ # 6080./ # 005600 # 005600 # 00%; 00185488; 00 # 6000 # 能力 训练 4作 5 导航条制作 6 主体内容制作 7 底部信息制作 回答法； 演示法； 实际操作法； 多媒体教学 ； 实践操作 10 10 20 10 归纳 提高 本节通过实例的制作，简单介绍了 局的基本知识，如 局页面、定义 常见的布局方式，完成本例后，应了解、掌握及使用关于 局的知识和方法。 讲述法； 演示法； 板书； 多媒体教学 ； 思考；回答问题 5 课后 任务 完成举一反三：制作健康网站 5 课后 小结 16 第 七 次课教学设计书 2012 年 3 月 20 日 星期 2 授课地点： 615 课时： 2 标题 第四章 使用 制网页背景 网页背景属性介绍 教学 目标 能力目标 知识目标 在网页设计中，使用 制网页背景是很常用的一项技术。一个优秀的页面，背景颜色要能够和网页中的内容相匹配，以吸引浏览着的目光，本章使学生达到能灵活运用用 页面背景颜色； 块背景颜色； 页面背景图片； 页面背景图片的重复； 页面背景图片的位置； 教学 任务 (内容 ) 通过如下页面背景设置掌握背景属性的设置及技巧 重点 难点 重点：设置背景图片位置 难点： 景新增属性 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习 /课程 引入 复习 100%宽度布局页面 回答法； 演示法； 板书； 多媒体教学 ； 网络资源； 实训设备； 思考；回答问题； 5 17 知识 讲授 回答法； 演示法； 板书； 多媒体教学 ； 实训设备 思考； 理解； 记忆； 10 10 10 能力 训练 1、 设置页面背景颜色 2、 设置块背景颜色 3、 背景图片 4、 为页面设置背景图片 5、 背景图片的重复 6、 设置背景图片的位置 7、 设置背景滚动 8、 背景样式的缩写方式 回答法； 演示法； 实际 操作法； 多媒体教学 ； 实训设备 实践操作 10 10 10 归纳 提高 9、 的背景新增属性 讲述法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考；回答问题 10 课后 任务 画出案例金融网站版式 5 课后 小结 18 第 八 次课教学设计书 2012 年 3 月 22 日 星期 4 授课地点： 615 课时： 2 标题 第四章 使用 制网页背景 应用案例：制作金融类网站页面 教学 目标 能力目标 知识目标 通过设计制作一个金融类网站页面，来讲解控制页面背景的方法，并讲解使用制页面整体布局的方法。 页面背景颜色； 块背景颜色； 页面背景图片； 页面背景图片的重复； 页面背景图片的位置； 教学 任务 (内容 ) 根据提供的素材完成如图所示案例制作 重点 难点 重点：背景图片的常用技巧设置 难点：背景图片的精确控制 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习 /课程 引入 背景的相关 性 回答法； 演示法； 板书； 多媒体教学 ； 网络资源； 实训设备； 思考；回答问题； 5 19 知识 讲授 设计分析 页面布局及配色 页面背景应用技巧分析 回答法； 演示法； 板书； 多媒体教学 ； 实训设备 思考； 理解； 记忆； 2 8 10 能力 训练 制作步骤： 新建文件 整体布局 页面 作 页面主题内容制作 页面底部信息制作 回答法； 演示法； 实际操作法； 多媒体教学 ； 实训设备 实践操作 10 10 10 10 5 归纳 提高 案例总结：使用 制网页背景是网页设计中的一种很常用的方法，使用制网页背景可以使网页设计者精确控 制页面中的每一种背景颜色和背景图像的显示方式。通过一个金融网站案例掌握背景设置技巧。 讲述法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考；回答问题 5 课后 任务 完成课后练习“保健品网站页面制作” 5 课后 小结 20 第 九 次课教学设计书 2012 年 3 月 27 日 星期 2 授课地点： 615 课时： 2 标题 第五章 使用 制文字样式 教学 目标 能力目标 知识目标 对于网站设计者 来说，文字永远是不可缺少的重要组成部分。站点越大，图形和字内容越多，需要管理的文字样式也就越多。使用 制文字样式是一种很好的方法，便于设计者进行设置或修改。本章详细的为读者讲述使用 制页面中文字及段落样式的方法。 字体和大小； 文字颜色和粗细； 斜体； 下划线、顶划线和删除线； 英文字母大小写； 控制段落样式 教学 任务 (内容 ) 根据提供的素材完成如图所示案例制作 重点 难点 重点： 控制段落样式 难点： 英文字母大小写 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习 /课程 引入 背景 用要点 回答法； 演示法； 板书； 多媒体教学 ； 网络资源； 实训设备； 思考；回答问题； 5 21 知识 讲授 字体和大小； 文字颜色和粗细； 斜体； 下划线、顶划线和删除线； 英文字母大小写； 控制段落样式 回答法； 演示法； 板书； 多媒体教学 ； 实训设备 思考； 理解； 记忆； 10 10 10 能力 训练 1、 字体大小 用训练 2、 颜色、下划线等应用训练 3、 中英文段落控制训练 4、 背景图片制作训练 回答法； 演示法； 实际操作法； 多媒体教学 ； 实训设备 实践操作 10 10 10 10 归纳 提高 文字处理 述法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考；回答问题 4 课后 任务 画出应用实例：设计类网站制作版式 1 课后 小结 22 第 十 次课教学设计书 2012 年 3 月 29 日 星期 4 授课地点： 615 课时： 2 标题 第五章 使用 制文字样式 应用实例：制作设计类网站 教学 目标 能力目标 知识目标 本例运用 局方式制作一个设计类网站页面，在该页面的制作过程中，要仔细理解是用局制作页面的方法，并能够应用 式对文字进行控制和设置。 式对文字的控制和设置 教学 任务 (内容 ) 本例设计制作设计类网站，其页面布局比较简单。导航栏中的文字采用 签来调整文字的字间距并且为文字应用了 式，以方便后期进行修改。从整体看，网页效果美观、大方。 重点 难点 重点： 式对文字进行控制和设置 难点： 仔细理解用 局制作页面的方法 步 骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习/课程 引入 文字样式相关属性控制 回答法； 演示法； 板书； 多媒体教学 ； 网络资源； 实训设备； 思考；回答问题； 5 23 知识 讲授 设计分析 布局， 式分析： #6050 #6003./ 05 #8002 # #30130./ #789 #00 #5 #55 #6083./ #2783 #2783 #9727./ 50 #9 #0060./ 7回答法； 演示法； 板书； 多媒体教学 ； 实训设备 思考； 理解； 记忆； 5 10 24 0 #5800./ 5 #06040 #5800./ 5 #06040 #5800./ 5 #60515 #250853./ # 25 050 #450655./ #550 #6017./ 8 能力 训练 1 页面布局 2 导航背景 理 3 页面制作 回答法； 演示法； 实际操作 法； 多媒体教学 ； 实训设备。 实践操作 10 10 30 归纳 提高 式表能够在恰当的地方集中一批命令，以实现某 种可视效果，从而彻底减轻网页设计者的工作负担。通过一个网站页面的设计制作，介绍 式在网页设计中的应用方法和技巧。 讲述法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考；回答问题 5 课后 任务 举一反三：制作社区类网站 5 课后 小结 26 第 十一 次课教学设计书 2012 年 4 月 3 日 星期 2 授课地点： 615 课时： 2 标题 第六章 使用 制图片样式 教学 目标 能力目标 知识目标 设计者在制作网页页面时不仅要考虑如何才能实现图片的特殊效果，而且要考虑在制作完成后如何才能对图片进行修改，使用 制图片不仅可以解决以上问题，而且可以实现一些在 面中无法实现的特殊效果。本章讲解使用制图片样式的方法。 图片边框设置； 图片缩放设置； 图片水平对齐； 图片垂直对齐； 图文混排； 教学 任务 (内容 ) 使用 以通过控制具体的数值来控制图片样式，比直接在 进行手动调整更加精确，而且可以实现一些在 无法实现的特殊效果。本节讲解两种控制图片的基本方法，控制图 片边框与控制图片缩放。 重点 难点 重点： 图文混排 难点：混排效果调整 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习 /课程 引入 背景 置要点 回答法； 演示法； 板书； 多媒体教学 ； 网络资源； 实训设备； 思考；回答问题； 5 27 知识 讲授 1 图片样式 图片边框的设置；图片缩放的设置 2 图片对齐 水平对齐；垂直对齐 3 图文混排 文本混排；设置混排间距 回答法； 演示法； 板书； 多媒体教学 ； 实训设备 思考； 理解； 记忆； 10 10 10 能力 训练 1 图片边框设置 2 图文混排效果设置 回答法； 演示法； 实际操作法； 多媒体教学 ； 实训设备 实践操作 10 20 归纳 提高 4 边框的新增属性 述法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考；回答问题 10 课后 任务 画出应用实例：某婚庆网站版式 5 课后 小结 28 第 十二 次课教学设计书 2012 年 4 月 5 日 星期 4 授课地点： 615 课时： 2 标题 第六章 使用 制图片样式 应用实例 教学 目标 能力目标 知识目标 通过设计制作一个婚庆公司网站页面，来讲解在网页中实现图文混排的方法，以及为页面中的图片和文字应用样式的方法。掌握图文混排的方法和样式的设置。 文混排技巧 教学 任务 (内容 ) 完成以下部分页面的制作 重点 难点 重点： 图文混排 难点：相关 本 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习 /课程 引入 背景 置要点 回答法； 演示法； 板书； 多媒体 思考；回答问题； 5 29 知识 讲授 设计分析 布局分析 图文混排 式分析 #500888; #。 #2345 回答法； 演示法； 板书； 多媒体教学 ； 实训设备 思考； 理解； 记忆； 10 10 10 能力 训练 制作步骤 左侧图文制作 中部图文制作 回答法； 演示法； 实际操作法； 多媒体教学 ； 实训设备 实践操作 10 20 归纳 提高 案例总结：大多数网页都不会只有文字或图片组成，而是将文字与图片结合在一起，通过图文混排的方式可以使页面中的各种元素结合在一起。通过一个网站页面的设计制作，介绍 式控制图文混排的方法和 技巧。 讲述法； 演示法； 板书； 多媒体教学 ； 思考；回答问题 5 课后 任务 制作产品介绍网站 2 课后 小结 30 第 十三 次课教学设计书 2012 年 4 月 10 日 星期 2 授课地点： 615 课时： 2 标题 第七章 使用 制列表样式 教学 目标 能力目标 知识目标 列表让设计者能够对相关元素进行分组，并由此给它们制定结构。大多数网站都包含某种形式的列表，例如新闻列表、标题列表等。本章将对如何在创建列表进行详细的讲解。 列表的控制原则； 列表的类型及使用； 改变项目样式； 使用列表制作实用菜单。 教学 任务 (内容 ) 在网页中列表元素是非常重要的应用形式。通过 式控制列表，可以轻松地实现整齐直观的现实效果。 重点 难点 重点： 改变项目样式 难点： 定义列表 步骤 教学内容 教学方法 教学手段 学生活动 时间分配 复习 /课程 引入 图文混排 式应用技巧 回答法； 演示法； 板书； 多媒体教学 ； 网络资源； 实训设备； 思考；回答问题； 5 31 知识 讲授 列表控制概述 列表控制原则； 列表类型及使用； 无序列表 ;有序列表;定义列表 改变项目样式； 图片符号； 回答法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考； 理解； 记忆； 10 10 10 能力 训练 1 无序列表应用 2 有序列表应用 3 定义列表应用 回答法； 演示法； 实际操作法； 多媒体教学 ； 实训设备； 实践操作 10 10 15 归纳 提高 增属性 ; 讲述法； 演示法； 板书； 多媒体教学 ； 实训设备； 思考；回答问题 5 课后 任务 使用列表制作菜单 5 课后 小结 32 第 十四 次课教学设计书 2012 年 4 月 13 日 星期 4 授课地点： 615 课时： 2 标题 第七章 使用 制列表样式 应用实例 教学 目标 能力目标 知识目标 本例通过设计制作一个音乐类网站页面，讲解在页面中如何添加 列表的方法，掌握创建列表的方法和技巧，并应用到实际的工作中。 有序列表； 无序列表； 定义列表； 教学 任务 (内容 ) 完成制作音乐网站的首页，整个页面以白色为主色调，给人以简洁干净的感觉。首页中文字和图片的巧妙搭配，能够使整个页面看起来更加清晰明了。并且，页面中多处使用了列表的形式来展示网页中的内容。 重点 难