网页设计与制作案例教程-1

★ 本章小结 ★
本章主要欣赏了几个优秀网站的首页，通 过分析对这些网站的布局结构、颜色搭配、视 觉效果留下了初步印象。
★ 习题 ★
利用搜索引擎获取广东“李宁体育用品公 司”的网址和“遛狗网”的网址，并简要说明 这两个网站首页的特色。
ห้องสมุดไป่ตู้
知识技能目标
（1）欣赏优秀的网页，学习他人之长， 激发学习网页设计的兴趣。
（2）分析优秀网页的布局结构、颜色搭 配、视觉效果，留下直观的第一印象，为学习 制作网页奠定基础。
（3）对网页的组成元素有一个初步印象。
知识讲解
1.1 公 司 类 网 站 赏 析 1.2 旅 游 类 网 站 赏 析 1.3 体 育 类 网 站 赏 析 1.4 教 育 培 训 类 网 站 赏 析 1.5 班 级 网 站 赏 析
（4）求职网：www.chijoy.1m.cn （5）开心购物网： http://www.aroundsuzhou.com/ （6）湖南张家界旅游网：www.zjjok.com （7）曙光人才网： http://www.twinssusccess.cn 2．利用搜索引擎网站查找四川长虹集团、深 圳TCL集团、九天音乐网的网址。
颜色的搭配主要采用黄、绿色调，采用 了类似色的搭配，给人以清新、和谐的视觉 美感。
主体之外左右两边采用了视觉强烈的动 画广告，在颜色的运用上也与整体颜色搭配 十分协调。
1.5 班级网站赏析
接下来让我们一起欣赏武汉理工大学海事 二班的网站，让网站的网址是： www.haishi0302.com，其主页如图1-5所示。
图1-5 班级网站的首页
该网站首页给人的感觉是重彩型视觉感 受强烈。
整个页面色彩运用大面积的蓝色渐变为 底色，使文字内容不多的页面显得不空洞， 整个色彩运用蓝色和绿色为主的搭配，类似 色的运用给人以和谐统一的视觉效果。
题头采用简单清晰的图片，给人以清新、 大气、和谐的简单之美。
模块划分也清晰，其中也采用了动画画面， 从静态中突出灵动感。整体给人温馨、和谐 梦幻的感觉。
（5）携程旅游网：www.ctrip.com （6）中国体育资讯网： www.sportinfo.net.cn （7）太平洋电脑网：www.pconline.com.cn （8）班级网站：jkb0301.cqie.net
★ 课外拓展实践 ★
1．浏览以下网站，分析这些网站首页的 特色和不足。 （1）天津大学网站： http://www.tju.edu.cn （2）易趣网：http://www.ebay.com.cn/ （3）木叶之家个人网： http://zhangrui.haocool.net/
颜色主要采用浅蓝和玫瑰红为主，浅蓝 色给人清爽、雅致的感受，玫瑰红给人温馨、 浪漫的感受，颜色对比较为强烈，重点突出。
首页题头的动化效果体现了海尔集团的 理念和品质，让人既想到家的感觉又能记住 该品牌。
导航栏的颜色鲜明，文字与背景色对比 强烈，引人注目。
二级导航采用横式排列，其优点是不会 遮住下面正文的内容。
1.1 公司类网站赏析
首先让我们一起欣赏家电行业的优秀企 业——海尔集团的网站，启动IE浏览器，在 地址栏中输入海尔集团的网址： www.haier.com（回车），展显在眼前便是 该网站独具特色的首页。
该首页给人以清新、爽朗的感受，首页 的整体布局为“上、中、下”三个版块，中 间的主体内容又分为“左、中、右”三个版 块。
该网站的首页主要列出了导航菜单和网站 地图，简洁明了、排列整齐，便于浏览者查找 自己所需的信息。
底色采用白色，按钮采用蓝色，非常醒目。
图1-2 中国大众体育网的引导页
图1-3 中国大众体育网的首页
新东方教育网站的新闻网页如图1-4所示。
图1-4 新东方教育网的新闻网页
该网页给人的视觉感受是和谐美观，在 模块的划分上比较明显，采用“左、中、右” 三个板块，左、中、又三块又分别划分多个 内容板块，每个内容板块都采用了不同颜色 和形式做标题装饰，可以一目了然看到所有 内容的板块位置，在视觉方面也给人以醒目 和新颖的感觉。
在字体的运用上有大有小，有长有短， 显得有对比，文字居中对齐，显得庄重。图 片的动态效果突出主题，产生运动的视觉感 受。
该网站的首页整体视觉感受清晰、和谐。 在板块布局上采用“左、中、右”结构， 整体颜色采用绿色，既统一又有变化，主体 突出。
1.4 教育培训类网站赏析
接下来让我们欣赏新东方教育网站，让网 站的网址是：www.neworiental.org。
1.2 旅游类网站赏析
接下来让我们欣赏“凤凰古城旅游网”， 让网站的网址是：www.fhvip.com，其首页如 图1-1所示。
图1-1 凤凰古城旅游网的首页
该首页给人的视觉效果是一种古朴的气 息迎面扑来，整体色彩、图文搭配十分协调， 咖啡色的运用和图片的搭配十分和谐。
主页题头的凤凰古城图片恰到好处，突 出了主题，同时也起到了广告作用。
★ 课堂实践 ★
浏览几个网站，对所浏览网站首页的特色 和不足进行赏析说明，主要包括页面布局结构、 颜色搭配、导航栏、文字效果、图片效果、动 画效果等。从以下网站中选择两个网站进行赏 析。
（1）当当购物网站： http://www.dangdang.com/ （2）南开大学网站： http://www.nankai.edu.cn/index.asp （3）且听风吟文学网： http://wind.yinsha.com/ （4）叱进军个人网站：my.6to23.com
第1章 优秀网站赏析
课程引导
万维网使得浏览Internet变得非常简单， 只要用鼠标单击，就可以显示图文并茂的网 页，网页中可以包含声音、视频、动画等， 这也是万维网在Internet中最受欢迎、使用 最多的原因。
在学习创建网站、制作网页之前，我们先 浏览几个优秀的网站，对这些网站的主页进 行分析，了解优秀网页的布局结构、色彩搭 配、导航栏的设计、动画效果等。
导航栏的文字颇具特色。 首页的模块划分采用的是左右两大模块， 内容划分清晰。
1.3 体育类网站赏析
接下来让我们一起欣赏“中国大众体育 网”，让网站的网址是：www.chinasfa.net， 其引导页如图1-2所示，首页如图1-3所示。
该网站的引导页整体视觉感受简洁、现代 感较强。背景用大块的深绿色，给人安静、稳 重的感觉。