网页设计与制作教学市公开课一等奖百校联赛特等奖课件.pptx

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