网页设计与制作教学市公开课获奖课件省名师优质课赛课一等奖课件.ppt

网页设计与制作网页设计与制作网页设计与制作网页设计与制作教学课件教学课件教学课件教学课件1/24第第1515章：网站规划与网页设计章：网站规划与网页设计主主要要教教学学步步骤骤五、知识讲解与操作示范一、课程引导二、明确知识技能目标三、展示网页浏览效果四、分析操作任务六、课堂模仿实践七、疑难解析八、归纳总结九、布置习题2/24（一）课程引导（一）课程引导 此次课重点学习网页色彩设计、导航设此次课重点学习网页色彩设计、导航设计、网页页面元素设计、网页设计规范。计、网页页面元素设计、网页设计规范。3/24（二）明确知识技能目标（二）明确知识技能目标 （1 1）掌握网页色彩设计、导航设计和网）掌握网页色彩设计、导航设计和网页面面元素设计基本原理与方法。页面面元素设计基本原理与方法。（2 2）掌握网页设计规范。）掌握网页设计规范。4/24（三）展示网页浏览效果（三）展示网页浏览效果1 1预览网页预览网页5/24（四）分析操作任务（四）分析操作任务 利用本章所学习方法和技巧对该网页利用本章所学习方法和技巧对该网页15.html15.html页面布局、颜色搭配、文字图像进行页面布局、颜色搭配、文字图像进行合理调整和优化。合理调整和优化。6/24（五）知识讲解与操作示范（五）知识讲解与操作示范（1 1）15.2.4网页色彩设计网页色彩设计1色彩基本知识色彩基本知识（1 1）三原色）三原色 三原色是能够按照一些数量要求合成其它任何三原色是能够按照一些数量要求合成其它任何一个颜色基色。全部颜色其实都是由三原色按照不一个颜色基色。全部颜色其实都是由三原色按照不一样百分比混合而来。电脑屏幕色彩是由红、绿、一样百分比混合而来。电脑屏幕色彩是由红、绿、蓝三种原色组成。蓝三种原色组成。（2 2）色彩三要素）色彩三要素 色彩三要素是指色相、饱和度和明度。色彩三要素是指色相、饱和度和明度。7/24（五）知识讲解与操作示范（五）知识讲解与操作示范（2 2）2计算机表示颜色计算机表示颜色 颜色由红、绿、蓝三原色组合而成，在网页中采颜色由红、绿、蓝三原色组合而成，在网页中采取十六进制对颜色进行定义。取十六进制对颜色进行定义。（1 1）颜色十六进制数值）颜色十六进制数值（2 2）十进制）十进制RGBRGB值值（3 3）使用预设颜色名称）使用预设颜色名称 HTML HTML预设了一些颜色名称，在颜色文本框中直接预设了一些颜色名称，在颜色文本框中直接输入颜色名称也能设置对应颜色。输入颜色名称也能设置对应颜色。8/24（五）知识讲解与操作示范（五）知识讲解与操作示范（3 3）3颜色与心里反应颜色与心里反应 当看到不一样颜色时，会产生不一样心里感觉，当看到不一样颜色时，会产生不一样心里感觉，这就是一个色彩意向。这就是一个色彩意向。9/24（五）知识讲解与操作示范（五）知识讲解与操作示范（4 4）4页面色彩搭配技巧页面色彩搭配技巧（1 1）特色鲜明）特色鲜明（2 2）搭配合理）搭配合理（3 3）考究艺术性）考究艺术性（4 4）合理使用邻近色）合理使用邻近色（5 5）合理使用对比色）合理使用对比色（6 6）巧妙使用背景色）巧妙使用背景色（7 7）严格控制色彩数量）严格控制色彩数量10/24（五）知识讲解与操作示范（五）知识讲解与操作示范（5 5）15.2.5网页导航设计网页导航设计 导航是网站设计不可缺乏元素之一，它不但仅是信导航是网站设计不可缺乏元素之一，它不但仅是信息结构基础分类也是浏览者浏览网站路标。息结构基础分类也是浏览者浏览网站路标。导航作为页面主要视觉元素，放置在显著、易找区域是导航作为页面主要视觉元素，放置在显著、易找区域是必要，让浏览者进入网站第一时间就能够看到它。必要，让浏览者进入网站第一时间就能够看到它。导航样式有很多，包含横排导航、竖排导航、多排导航样式有很多，包含横排导航、竖排导航、多排导航、图片式导航、下拉菜单导航、隐藏式导航等导航、图片式导航、下拉菜单导航、隐藏式导航等等等。网站导航表现形式主要有：菜单、站内搜索引擎、网站导航表现形式主要有：菜单、站内搜索引擎、当前浏览位置等。当前浏览位置等。11/24（五）知识讲解与操作示范（五）知识讲解与操作示范（6 6）（1）菜单）菜单 菜单是网站最常见导航方法，一个好菜单系统关键在菜单是网站最常见导航方法，一个好菜单系统关键在于能适应网站层次需要，而且轻易让浏览者了解网站结构。于能适应网站层次需要，而且轻易让浏览者了解网站结构。（2 2）站内搜索引擎）站内搜索引擎 站内搜索引擎提供了一个主动查询方式，浏览者只要站内搜索引擎提供了一个主动查询方式，浏览者只要把自己需要寻找内容关键字输入到搜索引擎中，网站将自把自己需要寻找内容关键字输入到搜索引擎中，网站将自动地查找出站内符合条件页面，这是一个人性化做法。动地查找出站内符合条件页面，这是一个人性化做法。（3 3）当前浏览位置）当前浏览位置 所谓所谓“当前浏览位置当前浏览位置”就是在网站每个页面中加入当就是在网站每个页面中加入当前位置文字说明并逐层加入链接。前位置文字说明并逐层加入链接。12/24（五）知识讲解与操作示范（五）知识讲解与操作示范（7 7）15.2.6网页页面元素设计网页页面元素设计1页面标题设计页面标题设计 页面标题相当于商店招牌，标题通常位于页面上端页面标题相当于商店招牌，标题通常位于页面上端或中央，清楚明确地表示出来。或中央，清楚明确地表示出来。（1 1）标题大小、粗细要适当）标题大小、粗细要适当 （2 2）标题使用鲜艳色彩）标题使用鲜艳色彩 （3 3）利用空间突出标题）利用空间突出标题13/24（五）知识讲解与操作示范（五）知识讲解与操作示范（8 8）2页面汉字字设计页面汉字字设计 （1 1）文字字体选择）文字字体选择 网页中正文文本普通可使用系统默认汉字字体和西文网页中正文文本普通可使用系统默认汉字字体和西文字体，若需使用特殊字体，普通把使用了特殊字体对象制字体，若需使用特殊字体，普通把使用了特殊字体对象制作成图片。惯用汉字字体有宋体、黑体、楷体、仿宋体、作成图片。惯用汉字字体有宋体、黑体、楷体、仿宋体、行书、隶书、魏碑等，惯用英文字体有行书、隶书、魏碑等，惯用英文字体有Times New RomanTimes New Roman、ArialArial、ImpactImpact等等 (2 (2）文字粗细确实定）文字粗细确实定 文字变细会显得十分优美，反之将文字变粗会显得有力。文字变细会显得十分优美，反之将文字变粗会显得有力。14/24（五）知识讲解与操作示范（五）知识讲解与操作示范（9 9）（3 3）文字字号确实定）文字字号确实定 对于网页中正文文本，其字号普通设置为对于网页中正文文本，其字号普通设置为10101212磅；磅；对于网页中版权申明等文本普通设置为对于网页中版权申明等文本普通设置为9 91010磅；对于磅；对于网页中标题文本，普通设置为网页中标题文本，普通设置为12121818磅。磅。（4 4）文字字间距和行间距）文字字间距和行间距 网页汉字本字间距和行间距在某种程度上会改变访网页汉字本字间距和行间距在某种程度上会改变访问者阅读心理。问者阅读心理。15/24（五）知识讲解与操作示范（五）知识讲解与操作示范（1010）3页面中图像应用页面中图像应用 传递信息视觉要素包含版式、文字、图像、色彩等。传递信息视觉要素包含版式、文字、图像、色彩等。网页中图像在信息传达上应用具备以下功效：网页中图像在信息传达上应用具备以下功效：（1 1）要有良好视觉吸引力，能吸引浏览者注意力。）要有良好视觉吸引力，能吸引浏览者注意力。（2 2）要简练明确地传达网站信息，能使人们一目了）要简练明确地传达网站信息，能使人们一目了然地抓住网站信息重点。然地抓住网站信息重点。（3 3）要有强而有力诱导作用，造成鲜明视觉感受效）要有强而有力诱导作用，造成鲜明视觉感受效果，从观看过程中产生愿望和欲求。果，从观看过程中产生愿望和欲求。16/24（五）知识讲解与操作示范（五）知识讲解与操作示范（1111）对图像处理主要包含以下几个方面：对图像处理主要包含以下几个方面：（1 1）图像外形处理）图像外形处理（2 2）图像面积处理）图像面积处理（3 3）图像数量处理）图像数量处理（4 4）图像背景处理）图像背景处理17/24（五）知识讲解与操作示范（五）知识讲解与操作示范（1212）15.3网页设计规范网页设计规范15.3.1网页版面尺寸规范网页版面尺寸规范1网页宽度网页宽度 当前我国网络用户，大部分使用当前我国网络用户，大部分使用1515英寸和英寸和1717英英寸显示器，采取寸显示器，采取800600800600分辨率用户仍不少，为了分辨率用户仍不少，为了考虑这部分浏览者需要，制作网页时普通按照考虑这部分浏览者需要，制作网页时普通按照800600800600（单位为像素）分辨率规格来设计，页面（单位为像素）分辨率规格来设计，页面宽度不超出宽度不超出1 1屏。屏。18/24（五）知识讲解与操作示范（五）知识讲解与操作示范（1313）2网页文件大小网页文件大小 普通地，网站首页大小（包含全部图像、文本、普通地，网站首页大小（包含全部图像、文本、多媒体对象）不宜超出多媒体对象）不宜超出30KB30KB，网站二级页面文件，网站二级页面文件（包含全部图像、文本、多媒体对象等）不宜超出（包含全部图像、文本、多媒体对象等）不宜超出45KB45KB。假如网页大太，网页下载速度会变慢，影响。假如网页大太，网页下载速度会变慢，影响浏览速度。浏览速度。19/24（五）知识讲解与操作示范（五）知识讲解与操作示范（1414）3网页长度网页长度 从理论上来讲网页长度能够无限长，但普通不从理论上来讲网页长度能够无限长，但普通不宜超出宜超出3 3屏，最正确长度为屏，最正确长度为1.81.82.52.5屏。屏。4广告尺寸广告尺寸 广告尺寸应为标准尺寸，全尺寸广告尺寸应为标准尺寸，全尺寸banner不超出不超出14KB。20/24（五）知识讲解与操作示范（五）知识讲解与操作示范（1515）15.3.2文件夹、文件命名规范文件夹、文件命名规范主要命名规则有：主要命名规则有：（1 1）文件夹命名普通采取英文小写字母，特殊情况能够使用汉字拼）文件夹命名普通采取英文小写字母，特殊情况能够使用汉字拼音，常见文件夹命名：存放图形文件文件夹命名为音，常见文件夹命名：存放图形文件文件夹命名为imageimage，存放，存放flashflash文件文件夹命名为文件文件夹命名为flashflash，存放，存放CSSCSS样式表文件文件夹命名为样式表文件文件夹命名为stylestyle或或 CSSCSS，存放，存放JavaScriptJavaScript脚本文件夹命名为脚本文件夹命名为JSJS，存入友情链接文件夹命，存入友情链接文件夹命名为名为 link link，存放，存放 indlude indlude 文件文件夹命名为文件文件夹命名为includeinclude。（2 2）文件名称统一用小写英文字母、数字和下划线组合。）文件名称统一用小写英文字母、数字和下划线组合。（3 3）索引文件命名为）索引文件命名为index.htmlindex.html，主内容页命名为，主内容页命名为main.htmlmain.html。（4 4）菜单名称用菜单名英文单词或组合英文单词命名。）菜单名称用菜单名英文单词或组合英文单词命名。（5 5）图片、动画文件命名以英文单词或汉语拼音缩写命名。）图片、动画文件命名以英文单词或汉语拼音缩写命名。21/24（六）课堂模仿实践（六）课堂模仿实践 打开网站打开网站“课堂实践课堂实践”文件夹文件夹“16“16网页设计网页设计”中中网页文档网页文档“16.html”,“16.html”,利用本章所介绍方法和技巧对利用本章所介绍方法和技巧对该网页页面布局、颜色搭配、文字图像进行合理调整该网页页面布局、颜色搭配、文字图像进行合理调整和优化。然后浏览其效果，直到自己认为满意为止。和优化。然后浏览其效果，直到自己认为满意为止。22/24（八）归纳总结（八）归纳总结 本章主要对网站规划和网页设计进行了剖本章主要对网站规划和网页设计进行了剖析，分析了网页设计过程中一些基本原理和方析，分析了网页设计过程中一些基本原理和方法，主要包含版面布局、外观设计、法，主要包含版面布局、外观设计、LogoLogo设计、设计、色彩设计、导航设计、页面元素设计和网页设色彩设计、导航设计、页面元素设计和网页设计规范，为设计和制作网页提供理论指导和方计规范，为设计和制作网页提供理论指导和方法支持。法支持。23/24（九）布置习题（九）布置习题 在在“湖铁职院学院网站湖铁职院学院网站”站点文件夹站点文件夹“16“16网页网页设计设计”中创建网页中创建网页index.htmlindex.html，并利用本章所学习，并利用本章所学习方法和技巧对网页版式结构、导航栏设计、颜色搭方法和技巧对网页版式结构、导航栏设计、颜色搭配、文字效果、网页特效等方面进行美化、优化。配、文字效果、网页特效等方面进行美化、优化。24/24