《网页设计与制作》 教学课件 主讲人：湖南铁道职业技术学院陈承欢 HUNAN RAILWAY PROFESSIONAL TECHNOLOGY COLLEGE
Hunan Railway Professional Technology College 主讲人：湖南铁道职业技术学院 陈承欢 《网页设计与制作》 教学课件
教学单元1：优秀网站赏析 一、课程引导 二、明确知识技能目标 湖南鍋道营政饰学院 三、展示网页浏览效果 主要教学环节 四、分析操作任务 五、知识讲解与操作示范 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题 网页设计与制作
教学单元1：优秀网站赏析 主 要 教 学 环 节 五、知识讲解与操作示范 一、课程引导 二、明确知识技能目标 三、展示网页浏览效果 四、分析操作任务 六、课堂模仿实践 七、疑难解析 八、归纳总结 九、布置习题
(一)课程引导 湖南 万维网使得浏览Internet?变得非常简单，只要用鼠 标单击，就可以显示图文并茂的网页，网页中可以包含 道 声音、视频、动画等，这也是万维网在Internet中最受 欢迎、使用最多的原因。 学习创建网站、制作网页之前，我们先浏览几个优 残 秀的网站，对这些网站的主页进行分析，了解优秀网页 的布局结构、色彩搭配、导航栏的设计、动画效果等。 琴 网页设计与制作
（一）课程引导 万维网使得浏览Internet变得非常简单，只要用鼠 标单击，就可以显示图文并茂的网页，网页中可以包含 声音、视频、动画等，这也是万维网在Internet中最受 欢迎、使用最多的原因。 学习创建网站、制作网页之前，我们先浏览几个优 秀的网站，对这些网站的主页进行分析，了解优秀网页 的布局结构、色彩搭配、导航栏的设计、动画效果等
(二) 明确知识技能目标 湖南绒道 (1)欣赏优秀的网页，学习他人之长，激发学习 网页设计的兴趣。 (2)分析优秀网页的布局结构、颜色搭配、视觉 效果，留下直观的第一印象，为学习制作网页奠定基 础。 (3)对网页的组成元素有一个初步印象。 戏 拳院 网页设计与制作
（二）明确知识技能目标 （1）欣赏优秀的网页，学习他人之长，激发学习 网页设计的兴趣。 （2）分析优秀网页的布局结构、颜色搭配、视觉 效果，留下直观的第一印象，为学习制作网页奠定基 础。 （3）对网页的组成元素有一个初步印象
三) 知识讲解 湖南 1.1 公司类网站赏析 欣赏海尔集团的网站： 道 启动IE浏览器，输入网址：www.haier.com（回车) 展显在眼前便是该网站独具特色的首页。 该首页给人以清新、爽朗的感受，首页的整体布局 为“上、中、下”三个版块，中间的主体内容又分为 爽 “左、中、右”三个版块。 陵 网页设计与制作
（三）知识讲解 欣赏海尔集团的网站： 启动IE浏览器，输入网址：www.haier.com（回车） 展显在眼前便是该网站独具特色的首页。 该首页给人以清新、爽朗的感受，首页的整体布局 为“上、中、下”三个版块，中间的主体内容又分为 “左、中、右”三个版块。 1.1 公司类网站赏析
(三) 知识讲解 湖 1.1公司类网站赏析 线 颜色对比较为强烈，重点突出 主要采用浅蓝和玫瑰红为主，浅蓝色给人清爽、雅 致的感受，玫瑰红给人温馨、浪漫的感受， 首页题头的动化效果体现了海尔集团的理念和品质， 薰 让人既想到家的感觉又能记住该品牌。 导航栏的颜色鲜明，文字与背景色对比强烈，引人 注目。二级导航采用横式排列，其优点是不会遮住下面 琴 正文的内容。 网页设计与制作
（三）知识讲解 颜色对比较为强烈，重点突出 主要采用浅蓝和玫瑰红为主，浅蓝色给人清爽、雅 致的感受，玫瑰红给人温馨、浪漫的感受，。 首页题头的动化效果体现了海尔集团的理念和品质， 让人既想到家的感觉又能记住该品牌。 导航栏的颜色鲜明，文字与背景色对比强烈，引人 注目。二级导航采用横式排列，其优点是不会遮住下面 正文的内容。 1.1 公司类网站赏析
(三) 知识讲解 1.2 旅游类网站赏析 湖南 欣赏“凤凰古城旅游网”，网址是：www.fhvip.com。 ☑该首页给人的视觉效果是一种古朴的气息迎面扑来， 道 整体色彩、图文搭配十分协调，咖啡色的运用和图片的 搭配十分和谐。 蒙 ☑主页题头的凤凰古城图片恰到好处，突出了主题， 爽 同时也起到了广告作用。 ☑导航栏的文字颇具特色。 ☑首页的模块划分采用的是左右两大模块， 内容划分清晰。 吃 网页设计与制作
欣赏“凤凰古城旅游网”，网址是：www.fhvip.com。 该首页给人的视觉效果是一种古朴的气息迎面扑来， 整体色彩、图文搭配十分协调，咖啡色的运用和图片的 搭配十分和谐。 主页题头的凤凰古城图片恰到好处，突出了主题， 同时也起到了广告作用。 导航栏的文字颇具特色。 首页的模块划分采用的是左右两大模块， 内容划分清晰。 1.2 旅游类网站赏析 （三）知识讲解
(三) 知识讲解一首页欣赏 www.fhyip.com 古城旅游网 湖南鍋道营政饰学院 前渝独线：074-C730CT0024小时亩班 广末地区客-风惊浴线-凤凰古罐、南方长、语来二三日 /风晚天择天天发团 广西地区览凤凰着线风凰古南方长葡苗二晚三日 家 旗 图1-1 凤凰古城旅游网的首页 网顶设计与制作
图1-1 凤凰古城旅游网的首页 （三）知识讲解－首页欣赏
(三) 知识讲解 1.3 体育类网站赏析 南城道 欣赏“中国大众体育网”，网址是：www.chinasfa.net。 ☑该网站的引导页整体视觉感受简洁、现代感较强。 ☑背景用大块的深绿色，给人安静、稳重的感觉。 ☑在字体的运用上有大有小，有长有短，显得有对比， 或 文字居中对齐，显得庄重。 ☑图片的动态效果突出主题，产生运动的视觉感受。 琴 ☑该网站的首页整体视觉感受清晰、和谐。 ☑整体颜色采用绿色，既统一又有变化，主体突出。 施 网页设计与制作
欣赏“中国大众体育网”，网址是：www.chinasfa.net。 该网站的引导页整体视觉感受简洁、现代感较强。 背景用大块的深绿色，给人安静、稳重的感觉。 在字体的运用上有大有小，有长有短，显得有对比， 文字居中对齐，显得庄重。 图片的动态效果突出主题，产生运动的视觉感受。 该网站的首页整体视觉感受清晰、和谐。 整体颜色采用绿色，既统一又有变化，主体突出。 1.3 体育类网站赏析 （三）知识讲解
(三) 知识讲解一首页欣赏 湖南城道质营政饰学院 国大众体育网 点击此处进入 京1CP备05050274号 图1-2 中国大众体育网的引导页 网页设计与制作
图1-2 中国大众体育网的引导页 （三）知识讲解－首页欣赏