网页设计与制作教学市公开课金奖市赛课一等奖课件

《网页设计与制作》

教学课件第1页第1页第15章：网站规划与网页设计主要教学环节五、知识解说与操作示范一、课程引导二、明确知识技能目的三、展示网页浏览效果四、分析操作任务六、课堂模仿实践七、疑难解析八、归纳总结九、布置习题第2页第2页（一）课程引导

本次课重点学习网页色彩设计、导航设计、网页页面元素设计、网页设计规范。第3页第3页（二）明确知识技能目的（1）掌握网页色彩设计、导航设计和网页面面元素设计基本原理与办法。（2）掌握网页设计规范。第4页第4页（三）展示网页浏览效果1．预览网页第5页第5页（四）分析操作任务利用本章所学习办法和技巧对该网页15.html页面布局、颜色搭配、文字图像进行合理调整和优化。第6页第6页（五）知识解说与操作示范（1）15.2.4网页色彩设计1．色彩基本知识（1）三原色三原色是能够按照一些数量要求合成其它任何一个颜色基色。全部颜色其实都是由三原色按照不同百分比混合而来。电脑屏幕色彩是由红、绿、蓝三种原色组成。（2）色彩三要素色彩三要素是指色相、饱和度和明度。第7页第7页（五）知识解说与操作示范（2）

2．计算机表示颜色颜色由红、绿、蓝三原色组合而成，在网页中采用十六进制对颜色进行定义。（1）颜色十六进制数值（2）十进制RGB值（3）使用预设颜色名称HTML预设了一些颜色名称，在颜色文本框中直接输入颜色名称也能设置相应颜色。

第8页第8页（五）知识解说与操作示范（3）

3．颜色与心里反应当看到不同颜色时，会产生不同心里感觉，这就是一个色彩意向。第9页第9页（五）知识解说与操作示范（4）

4．页面色彩搭配技巧（1）特色鲜明（2）搭配合理（3）讲究艺术性（4）合理使用邻近色（5）合理使用对比色（6）巧妙使用背景色（7）严格控制色彩数量第10页第10页（五）知识解说与操作示范（5）15.2.5网页导航设计

导航是网站设计不可缺乏元素之一，它不但仅是信息结构基础分类也是浏览者浏览网站路标。导航作为页面主要视觉元素，放置在明显、易找区域是必要，让浏览者进入网站第一时间就能够看到它。导航样式有诸多，包括横排导航、竖排导航、多排导航、图片式导航、下拉菜单导航、隐藏式导航等等。网站导航表现形式主要有：菜单、站内搜索引擎、当前浏览位置等。第11页第11页（五）知识解说与操作示范（6）（1）菜单菜单是网站最常见导航办法，一个好菜单系统关键在于能适应网站层次需要，并且容易让浏览者理解网站结构。（2）站内搜索引擎站内搜索引擎提供了一个积极查询方式，浏览者只要把自己需要寻找内容关键字输入到搜索引擎中，网站将自动地查找出站内符合条件页面，这是一个人性化做法。（3）当前浏览位置所谓“当前浏览位置”就是在网站每个页面中加入当前位置文字阐明并逐层加入链接。第12页第12页（五）知识解说与操作示范（7）15.2.6网页页面元素设计1．页面标题设计页面标题相称于商店招牌，标题通常位于页面上端或中央，清楚明确地表示出来。（1）标题大小、粗细要适当（2）标题使用鲜艳色彩（3）利用空间突出标题第13页第13页（五）知识解说与操作示范（8）2．页面中文字设计（1）文字字体选择网页中正文文本普通可使用系统默认中文字体和西文字体，若需使用特殊字体，普通把使用了特殊字体对象制作成图片。惯用中文字体有宋体、黑体、楷体、仿宋体、行书、隶书、魏碑等，惯用英文字体有TimesNewRoman、Arial、Impact等(2）文字粗细确实定文字变细会显得十分优美，反之将文字变粗会显得有力。第14页第14页（五）知识解说与操作示范（9）（3）文字字号确实定对于网页中正文文本，其字号普通设置为10～12磅；对于网页中版权申明等文本普通设置为9～10磅；对于网页中标题文本，普通设置为12～18磅。（4）文字字间距和行间距网页中文本字间距和行间距在某种程度上会改变访问者阅读心理。第15页第15页（五）知识解说与操作示范（10）3．页面中图像应用传递信息视觉要素包括版式、文字、图像、色彩等。网页中图像在信息传达上应用具备下列功效：（1）要有良好视觉吸引力，能吸引浏览者注意力。（2）要简练明确地传达网站信息，能使人们一目了然地抓住网站信息重点。（3）要有强而有力诱导作用，造成鲜明视觉感受效果，从观看过程中产生愿望和欲求。第16页第16页（五）知识解说与操作示范（11）对图像处理主要包括下列几种方面：（1）图像外形处理（2）图像面积处理（3）图像数量处理（4）图像背景处理第17页第17页（五）知识解说与操作示范（12）15.3网页设计规范15.3.1网页版面尺寸规范1．网页宽度当前我国网络用户，大部分使用15英寸和17英寸显示器，采用800×600分辨率用户仍不少，为了考虑这部分浏览者需要，制作网页时普通按照800×600（单位为像素）分辨率规格来设计，页面宽度不超出1屏。第18页第18页（五）知识解说与操作示范（13）

2．网页文献大小普通地，网站首页大小（包括所有图像、文本、多媒体对象）不宜超出30KB，网站二级页面文献（包括所有图像、文本、多媒体对象等）不宜超出45KB。假如网页大太，网页下载速度会变慢，影响浏览速度。第19页第19页（五）知识解说与操作示范（14）3．网页长度从理论上来讲网页长度能够无限长，但普通不宜超出3屏，最佳长度为1.8～2.5屏。4．广告尺寸广告尺寸应为原则尺寸，全尺寸banner不超出14KB。第20页第20页（五）知识解说与操作示范（15）15.3.2文献夹、文献命名规范主要命名规则有：（1）文献夹命名普通采用英文小写字母，特殊情况能够使用中文拼音，常见文献夹命名：存储图形文献文献夹命名为image，存储flash文献文献夹命名为flash，存储CSS样式表文献文献夹命名为style或CSS，存储JavaScript脚本文献夹命名为JS，存入友情链接文献夹命名为link，存储indlude文献文献夹命名为include。（2）文献名称统一用小写英文字母、数字和下划线组合。（3）索引文献命名为index.html，主内容页命名为main.html。（4）菜单名称用菜单名英文单词或组合英文单词命名。（5）图片、动画文献命名以英文单词或汉语拼音缩写命名。第21页第21页（六）课堂模仿实践打开网站“课堂实践”文献夹“16网页设计”中网页文档“16.html”,利用本章所简介办法和技巧对该网页页面布局、颜色搭配、文字图像进行合理调整和优化。然后浏览其效果，直到自己认为满意为止。第22页第22页（八）归纳总结

本章主要对网站规划和网页设计进行了剖析，分析了网页设计过程中一些基本原理和办法，主要包括版面布局、外观设计、Logo设计、色彩设计、导航设