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

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