1 / 23

《 网页设计与制作 》 教学课件

《 网页设计与制作 》 教学课件. 教学单元 1 ：优秀网站赏析. （一）课程引导. 万维网使得浏览 Internet 变得非常简单，只要用鼠标单击，就可以显示图文并茂的网页，网页中可以包含声音、视频、动画等，这也是万维网在 Internet 中最受欢迎、使用最多的原因。 学习创建网站、制作网页之前，我们先浏览几个优秀的网站，对这些网站的主页进行分析，了解优秀网页的布局结构、色彩搭配、导航栏的设计、动画效果等。. （二）明确知识技能目标. （ 1 ）欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣。

paytah
Download Presentation

《 网页设计与制作 》 教学课件

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 《网页设计与制作》教学课件 教学单元1：优秀网站赏析

  2. （一）课程引导 万维网使得浏览Internet变得非常简单，只要用鼠标单击，就可以显示图文并茂的网页，网页中可以包含声音、视频、动画等，这也是万维网在Internet中最受欢迎、使用最多的原因。 学习创建网站、制作网页之前，我们先浏览几个优秀的网站，对这些网站的主页进行分析，了解优秀网页的布局结构、色彩搭配、导航栏的设计、动画效果等。

  3. （二）明确知识技能目标 （1）欣赏优秀的网页，学习他人之长，激发学习网页设计的兴趣。 （2）分析优秀网页的布局结构、颜色搭配、视觉效果，留下直观的第一印象，为学习制作网页奠定基础。 （3）对网页的组成元素有一个初步印象。

  4. （三）知识讲解 1.1　公司类网站赏析 欣赏海尔集团的网站： 　　启动IE浏览器，输入网址：www.haier.com（回车）

  5. （三）知识讲解 展显在眼前便是该网站独具特色的首页。 该首页给人以清新、爽朗的感受，首页的整体布局为“上、中、下”三个版块，中间的主体内容又分为“左、中、右”三个版块。 颜色对比较为强烈，重点突出 　　主要采用浅蓝和玫瑰红为主，浅蓝色给人清爽、雅致的感受，玫瑰红给人温馨、浪漫的感受，。 　　首页题头的动化效果体现了海尔集团的理念和品质，让人既想到家的感觉又能记住该品牌。 导航栏的颜色鲜明，文字与背景色对比强烈，引人注目。二级导航采用横式排列，其优点是不会遮住下面正文的内容。

  6. （三）知识讲解 1.2　旅游类网站赏析 　 欣赏“凤凰古城旅游网”，网址是：www.fhvip.com。

  7. 该首页给人的视觉效果是一种古朴的气息迎面扑来，该首页给人的视觉效果是一种古朴的气息迎面扑来， • 整体色彩、图文搭配十分协调，咖啡色的运用和图片的搭配十分和谐。 • 主页题头的凤凰古城图片恰到好处，突出了主题， • 同时也起到了广告作用。 • 导航栏的文字颇具特色。 • 首页的模块划分采用的是左右两大模块， • 内容划分清晰。

  8. （三）知识讲解 1.3　体育类网站赏析 欣赏“中国大众体育网” 网址是：www.chinasfa.net。

  9. 该网站的引导页整体视觉感受简洁、现代感较强。 该网站的引导页整体视觉感受简洁、现代感较强。 • 背景用白色，给人安静、稳重的感觉。 • 在字体的运用上有大有小，有长有短，显得有对比， 文字居中对齐，显得庄重。 • 图片的动态效果突出主题，产生运动的视觉感受。 • 该网站的首页整体视觉感受清晰、和谐。 • 整体颜色采用中国红色，既统一又有变化，主体突出。

  10. （三）知识讲解 1.4　教育培训类网站赏析 欣赏新东方教育网站， 网址是：http://www.moe.edu.cn/

  11. 其首页主要列出了导航菜单和网站地图，简洁明了、排列整齐。其首页主要列出了导航菜单和网站地图，简洁明了、排列整齐。 • 　颜色的搭配主要采用黄、绿色调，采用了类似色的搭配，给人以清新、和谐的视觉美感。 • 　该网页给人的视觉感受是和谐美观，在模块的划分上比较明显，采用“左、中、右”三个板块 • 　每个内容板块都采用了不同颜色和形式做标题装饰，在视觉方面也给人以醒目和新颖的感觉。

  12. （三）知识讲解 1.5　班级网站赏析 欣赏海事二班的网站 网址是：www.haishi0302.com

  13. （三）知识讲解 • 该网站首页给人的感觉是重彩型视觉感受强烈。 • 　整个页面色彩运用大面积的蓝色渐变为底色，使文字内容不多的页面显得不空洞，整个色彩运用蓝色和绿色为主的搭配，类似色的运用给人以和谐统一的视觉效果。 • 　题头采用简单清晰的图片，给人以清新、大气、和谐的简单之美。 • 　模块划分也清晰，其中也采用了动画画面，从静态中突出灵动感。整体给人温馨、和谐梦幻的感觉。

  14. （三）知识讲解－首页欣赏 图1-5　　班级网站的首页

  15. （四）课堂实践 浏览几个网站，对所浏览网站首页的特色和不足进行赏析说明，主要包括页面布局结构、颜色搭配、导航栏、文字效果、图片效果、动画效果等。从以下网站中选择两个网站进行赏析。 （1）当当购物网站：www.dangdang.com/ （2）南开大学网站: www.nankai.edu.cn/index.asp （3）且听风吟文学网：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

  16. （五）课堂拓展实践 1．浏览以下网站，分析这些网站首页的特色和不足。 　（1）天津大学网站：www.tju.edu.cn 　（2）易趣网：www.ebay.com.cn/ 　（3）木叶之家个人网：zhangrui.haocool.net/ 　（4）求职网：www.chijoy.1m.cn 　（5）开心购物网：www.aroundsuzhou.com/ 　（6）湖南张家界旅游网：www.zjjok.com 　（7）曙光人才网：www.twinssusccess.cn 2．利用搜索引擎网站查找四川长虹集团、深圳TCL集 团、九天音乐网的网址。

  17. 疑难解析 ★ • 问题1：如何上网浏览网站？ • 答：先启动浏览器Internet Explorer（简称为IE）或者NetscapeNavigator，然后在地址栏中输入相应的网址并回车就能浏览该网站的首页或引导页。 • 问题2：如果不知道某个网站的网址，怎样获得该网站的网址或浏览该网站？ • 答：可以利用搜索引擎网站进行搜索。方法是：先打开搜索引擎网站，然后在搜索引擎的检索框中输入你需要查询网站的相关关键词，例如“旅游”、“IT教育”等，然后直接按回车键或单击【搜索】按钮，就会列出大量与所输入的关键词相关的网站标题条目，在所列的条目中找到所需网站的标题双击即可打开该网站，该网站的网址也就知道了。 • 常用搜索引擎网站有： • （1）百度网：www.baidu.com（2）谷歌网：www.Goodle.com（3）搜弧网：www.sohu.com（4）网易网：www.163.com（5）新浪网：www.sina.com.cn

  18. （六）本章小节 本章主要欣赏了几个优秀网站的首页，通过分析对这些网站的布局结构、颜色搭配、视觉效果留下了初步印象。

  19. （七）布置习题 利用搜索引擎获取广东“李宁体育用品公司”的网址和“遛狗网”的网址，并简要说明这两个网站首页的特色。

More Related