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

《网页设计与制作案例教程-电子教案1.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作案例教程-电子教案1.ppt（29页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第第1 1章优秀网站赏析章优秀网站赏析 万万维维网使得网使得浏览浏览InternetInternet变变得非常得非常简单简单，只要用鼠只要用鼠标单击标单击，就可以，就可以显显示示图图文并茂的网文并茂的网页页，网，网页页中可以包含声音、中可以包含声音、视频视频、动动画等，画等，这这也是万也是万维维网在网在InternetInternet中最受中最受欢欢迎、使用迎、使用最多的原因。最多的原因。l 课程引导课程引导 在在学学习习创创建建网网站站、制制作作网网页页之之前前，我我们们先先浏浏览览几几个个优优秀秀的的网网站站，对对这这些些网网站站的的主主页页进进行行分分析析，了了解解优优秀秀网网页页的的布

2、布局局结结构构、色色彩彩搭搭配、配、导导航航栏栏的的设计设计、动动画效果等。画效果等。l 知识技能目标知识技能目标 （1 1）欣欣赏赏优优秀秀的的网网页页，学学习习他他人人之之长长，激激发发学学习习网网页设计页设计的的兴兴趣。趣。（2 2）分分析析优优秀秀网网页页的的布布局局结结构构、颜颜色色搭搭配配、视视觉觉效效果果，留留下下直直观观的的第第一一印印象象，为为学学习习制作网制作网页页奠定基奠定基础础。（3 3）对对网网页页的的组组成元素有一个初步印象。成元素有一个初步印象。l 知识讲解知识讲解1.11.1公公 司司 类类 网网 站站 赏赏 析析1.21.2 旅旅 游游 类类 网网 站站 赏赏

3、 析析1.51.5班班级级网网站站赏赏析析1.31.3体体 育育 类类 网网 站站 赏赏 析析1.41.4教教 育育 培培 训训 类类 网网 站站 赏赏 析析 1.1 1.1 公司类网站赏析公司类网站赏析 首首先先让让我我们们一一起起欣欣赏赏家家电电行行业业的的优优秀秀企企业业海海尔尔集集团团的的网网站站，启启动动IEIE浏浏览览器器，在在地地 址址 栏栏 中中 输输 入入 海海 尔尔 集集 团团 的的 网网 址址：（回回车车），展展显显在在眼眼前前便便是是该该网站独具特色的首网站独具特色的首页页。该该首首页页给给人人以以清清新新、爽爽朗朗的的感感受受，首首页页的的整整体体布布局局为为“上上、

4、中中、下下”三三个个版版块块，中中间间的的主主体内容又分体内容又分为为“左、中、右左、中、右”三个版三个版块块。颜颜色色主主要要采采用用浅浅蓝蓝和和玫玫瑰瑰红红为为主主，浅浅蓝蓝色色给给人人清清爽爽、雅雅致致的的感感受受，玫玫瑰瑰红红给给人人温温馨馨、浪浪漫的感受，漫的感受，颜颜色色对对比比较为较为强强烈，重点突出。烈，重点突出。首首页题头页题头的的动动化效果化效果体体现现了海了海尔尔集集团团的的理念和品理念和品质质，让让人既想到家的感人既想到家的感觉觉又能又能记记住住该该品牌。品牌。导导航航栏栏的的颜颜色色鲜鲜明明，文字与背景色，文字与背景色对对比比强强烈，引人注目。烈，引人注目。二二级导级

5、导航采用航采用横式排列横式排列，其，其优优点是不会点是不会遮住下面正文的内容。遮住下面正文的内容。接下来接下来让让我我们们欣欣赏赏“凤凤凰古城旅游网凰古城旅游网”，让让网站的网址是：网站的网址是：，其首，其首页页如如图图1-11-1所示。所示。1.21.2旅游类网站赏析旅游类网站赏析图图1-1凤凤凰古城旅游网的首凰古城旅游网的首页页 该该首首页页给给人人的的视视觉觉效效果果是是一一种种古古朴朴的的气气息息迎迎面面扑扑来来，整整体体色色彩彩、图图文文搭搭配配十十分分协协调调，咖咖啡色的运用和啡色的运用和图图片的搭配十分和片的搭配十分和谐谐。主主页页题题头头的的凤凤凰凰古古城城图图片片恰恰到到好好

6、处处，突突出出了主了主题题，同，同时时也起到了广告作用。也起到了广告作用。导导航航栏栏的文字的文字颇颇具特色。具特色。首首页页的的模模块块划划分分采采用用的的是是左左右右两两大大模模块块，内容划分清晰。内容划分清晰。接下来接下来让让我我们们一起欣一起欣赏赏“中国大众体育网中国大众体育网”，让让网站的网址是：网站的网址是：，其引，其引导页导页如如图图1-21-2所示，首所示，首页页如如图图1-31-3所示。所示。该该网站的引网站的引导页导页整体整体视觉视觉感受感受简洁简洁、现现代代感感较较强强。背景用大。背景用大块块的深的深绿绿色，色，给给人安静、人安静、稳稳重的感重的感觉觉。1.31.3体育类

7、网站赏析体育类网站赏析 在在字字体体的的运运用用上上有有大大有有小小，有有长长有有短短，显显得得有有对对比比，文文字字居居中中对对齐齐，显显得得庄庄重重。图图片片的的动态动态效果突出主效果突出主题题，产产生运生运动动的的视觉视觉感受。感受。该该网站的首网站的首页页整体整体视觉视觉感受清晰感受清晰、和、和谐谐。在在板板块块布布局局上上采采用用“左左、中中、右右”结结构构，整整体体颜颜色采用色采用绿绿色，既色，既统统一又有一又有变变化，主体突出。化，主体突出。接下来接下来让让我我们们欣欣赏赏新新东东方教育网站，方教育网站，让让网网站的网址是：站的网址是：www.neworiental.orgwww

8、.neworiental.org。该该网站的首网站的首页页主要列出了主要列出了导导航菜航菜单单和网站和网站地地图图，简洁简洁明了、排列整明了、排列整齐齐，便于，便于浏览浏览者者查查找找自己所需的信息。自己所需的信息。底色采用白色，按底色采用白色，按钮钮采用采用蓝蓝色，非常醒目。色，非常醒目。1.41.4教育培训类网站赏析教育培训类网站赏析图图1-2 中国大众体育网的引中国大众体育网的引导页导页图图1-3 中国大众体育网的首中国大众体育网的首页页新新东东方教育网站的新方教育网站的新闻闻网网页页如如图图1-41-4所示。所示。图图1-4 新新东东方教育网的新方教育网的新闻闻网网页页 该该网网页页给

9、给人人的的视视觉觉感感受受是是和和谐谐美美观观，在在模模块块的的划划分分上上比比较较明明显显，采采用用“左左、中中、右右”三三个个板板块块，左左、中中、又又三三块块又又分分别别划划分分多多个个内内容容板板块块，每每个个内内容容板板块块都都采采用用了了不不同同颜颜色色和和形形式式做做标标题题装装饰饰，可可以以一一目目了了然然看看到到所所有有内内容容的的板板块块位置，在位置，在视觉视觉方面也方面也给给人以醒目和新人以醒目和新颖颖的感的感觉觉。颜颜色色的的搭搭配配主主要要采采用用黄黄、绿绿色色调调，采采用用了了类类似色的搭配，似色的搭配，给给人以清新、和人以清新、和谐谐的的视觉视觉美感。美感。主主体

10、体之之外外左左右右两两边边采采用用了了视视觉觉强强烈烈的的动动画画广广告告，在在颜颜色色的的运运用用上上也也与与整整体体颜颜色色搭搭配配十十分分协调协调。接下来接下来让让我我们们一起欣一起欣赏赏武武汉汉理工大学海事理工大学海事二班的网站，二班的网站，让让网站的网址是：网站的网址是：，其主其主页页如如图图1-51-5所示。所示。1.51.5班级网站赏析班级网站赏析图图1-5班班级级网站的首网站的首页页 该该网站首网站首页给页给人的感人的感觉觉是是重彩型重彩型视觉视觉感受感受强强烈。烈。整个整个页页面色彩运用大面面色彩运用大面积积的的蓝蓝色色渐变为渐变为底底色，使文字内容不多的色，使文字内容不多的

11、页页面面显显得不空洞，整个得不空洞，整个色彩运用色彩运用蓝蓝色和色和绿绿色色为为主的搭配，主的搭配，类类似色的运似色的运用用给给人以和人以和谐统谐统一的一的视觉视觉效果。效果。题头题头采用采用简单简单清晰的清晰的图图片片，给给人以清新、人以清新、大气、和大气、和谐谐的的简单简单之美。之美。模模块块划分也清晰，其中也采用了划分也清晰，其中也采用了动动画画面，画画面，从静从静态态中突出灵中突出灵动动感。感。整体整体给给人温馨、和人温馨、和谐谐梦梦幻的感幻的感觉觉。课堂实践课堂实践 浏览浏览几个网站，几个网站，对对所所浏览浏览网站首网站首页页的特色的特色和不足和不足进进行行赏赏析析说说明，主要包括明

12、，主要包括页页面布局面布局结结构、构、颜颜色搭配、色搭配、导导航航栏栏、文字效果、文字效果、图图片效果、片效果、动动画效果等。从以下网站中画效果等。从以下网站中选择选择两个网站两个网站进进行行赏赏析。析。（1 1）当当）当当购购物网站：物网站：http:/http:/ 2）南开大学网站：）南开大学网站：http:/http:/ 3）且听）且听风风吟文学网：吟文学网：http:/http:/ 4）叱）叱进军进军个人网站：个人网站：（5 5）携程旅游网：）携程旅游网：（6 6）中国体育）中国体育资讯资讯网：网：（7 7）太平洋）太平洋电脑电脑网：网：（8 8）班）班级级网站：网站： 课外拓展实践课

13、外拓展实践 1 1浏览浏览以下网站，分析以下网站，分析这这些网站首些网站首页页的的特色和不足。特色和不足。（1 1）天津大学网站：）天津大学网站：http:/http:/（2 2）易趣网：）易趣网：http:/http:/ 3）木叶之家个人网：）木叶之家个人网：http:/http:/ 4）求）求职职网：网：（5 5）开心）开心购购物网：物网：http:/ 6）湖南）湖南张张家界旅游网：家界旅游网：（7 7）曙光人才网：）曙光人才网：http:/http:/2 2利用搜索引擎网站利用搜索引擎网站查查找四川找四川长长虹集虹集团团、深圳、深圳TCLTCL集集团团、九天音、九天音乐乐网的网址。网的网址。本章小结本章小结 本章主要欣本章主要欣赏赏了几个了几个优优秀网站的首秀网站的首页页，通，通过过分析分析对这对这些网站的布局些网站的布局结结构、构、颜颜色搭配、色搭配、视视觉觉效果留下了初步印象。效果留下了初步印象。习题习题 利用搜索引擎利用搜索引擎获获取广取广东东“李宁体育用品公李宁体育用品公司司”的网址和的网址和“遛狗网遛狗网”的网址，并的网址，并简简要要说说明明这这两个网站首两个网站首页页的特色。的特色。