网页设计与制作教学.ppt

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