网页设计与制作教学.ppt

《网页设计与制作教学.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作教学.ppt（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页设计与制作教学 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望第第1515章：网站规划与网页设计章：网站规划与网页设计主主要要教教学学环环节节五、知识讲解与操作示范一、课程引导二、明确知识技能目标三、展示网页浏览效果四、分析操作任务六、课堂模仿实践七、疑难解析八、归纳总结九、布置习题（一）课程引导（一）课程引导 本次课重点学习网页的色彩设计、导航本次课重点学习网页的色彩设计、导航设计、网页页面元素的设计、网页设计的规设计、网页页面元素的设计、网页设计的规范。范

2、。（二）明确知识技能目标（二）明确知识技能目标 （1 1）掌握网页色彩设计、导航设计和网）掌握网页色彩设计、导航设计和网页面面元素设计的基本原理与方法。页面面元素设计的基本原理与方法。（2 2）掌握网页设计的规范。）掌握网页设计的规范。（三）展示网页浏览效果（三）展示网页浏览效果1 1预览网页预览网页（四）分析操作任务（四）分析操作任务 运用本章所学习的方法和技巧对该网页运用本章所学习的方法和技巧对该网页15.html15.html的页面布局、颜色搭配、文字图像进的页面布局、颜色搭配、文字图像进行合理调整和优化。行合理调整和优化。（五）知识讲解与操作示范（五）知识讲解与操作示范（1 1）15.

3、2.4网页色彩设计网页色彩设计1色彩的基本知识色彩的基本知识（1 1）三原色）三原色 三原色是能够按照一些数量规定合成其他任何三原色是能够按照一些数量规定合成其他任何一种颜色的基色。所有的颜色其实都是由三原色按一种颜色的基色。所有的颜色其实都是由三原色按照不同的比例混合而来。电脑屏幕的色彩是由红、照不同的比例混合而来。电脑屏幕的色彩是由红、绿、蓝三种原色组成。绿、蓝三种原色组成。（2 2）色彩三要素）色彩三要素 色彩三要素是指色相、饱和度和明度。色彩三要素是指色相、饱和度和明度。（五）知识讲解与操作示范（五）知识讲解与操作示范（2 2）2计算机表示颜色计算机表示颜色 颜色由红、绿、蓝三原色组合

4、而成，在网页中采颜色由红、绿、蓝三原色组合而成，在网页中采用十六进制对颜色进行定义。用十六进制对颜色进行定义。（1 1）颜色十六进制数值）颜色十六进制数值（2 2）十进制的）十进制的RGBRGB值值（3 3）使用预设的颜色名称）使用预设的颜色名称 HTML HTML预设了一些颜色名称，在颜色文本框中直接预设了一些颜色名称，在颜色文本框中直接输入颜色名称也能设置相应颜色。输入颜色名称也能设置相应颜色。（五）知识讲解与操作示范（五）知识讲解与操作示范（3 3）3颜色与心里反应颜色与心里反应 当看到不同的颜色时，会产生不同的心里感觉，当看到不同的颜色时，会产生不同的心里感觉，这就是一种色彩意向。这就

5、是一种色彩意向。（五）知识讲解与操作示范（五）知识讲解与操作示范（4 4）4页面色彩的搭配技巧页面色彩的搭配技巧（1 1）特色鲜明）特色鲜明（2 2）搭配合理）搭配合理（3 3）讲究艺术性）讲究艺术性（4 4）合理使用邻近色）合理使用邻近色（5 5）合理使用对比色）合理使用对比色（6 6）巧妙使用背景色）巧妙使用背景色（7 7）严格控制色彩的数量）严格控制色彩的数量（五）知识讲解与操作示范（五）知识讲解与操作示范（5 5）15.2.5网页导航设计网页导航设计 导航是网站设计不可缺少的元素之一，它不仅仅是导航是网站设计不可缺少的元素之一，它不仅仅是信息结构的基础分类也是浏览者浏览网站的路标。信息

6、结构的基础分类也是浏览者浏览网站的路标。导航作为页面的重要视觉元素，放置在明显、易找的区导航作为页面的重要视觉元素，放置在明显、易找的区域是必要，让浏览者进入网站第一时间就可以看到它。域是必要，让浏览者进入网站第一时间就可以看到它。导航样式有很多，包括横排导航、竖排导航、多排导航样式有很多，包括横排导航、竖排导航、多排导航、图片式导航、下拉菜单导航、隐藏式导航等导航、图片式导航、下拉菜单导航、隐藏式导航等等等。网站导航的表现形式主要有：菜单、站内搜索引擎、网站导航的表现形式主要有：菜单、站内搜索引擎、当前浏览位置等。当前浏览位置等。（五）知识讲解与操作示范（五）知识讲解与操作示范（6 6）（1

7、）菜单）菜单 菜单是网站最常见的导航方法，一个好的菜单系统关菜单是网站最常见的导航方法，一个好的菜单系统关键在于能适应网站的层次需要，并且容易让浏览者理解网键在于能适应网站的层次需要，并且容易让浏览者理解网站的结构。站的结构。（2 2）站内搜索引擎）站内搜索引擎 站内搜索引擎提供了一种主动查询方式，浏览者只要站内搜索引擎提供了一种主动查询方式，浏览者只要把自己需要寻找的内容的关键字输入到搜索引擎中，网站把自己需要寻找的内容的关键字输入到搜索引擎中，网站将自动地查找出站内符合条件的页面，这是一种人性化的将自动地查找出站内符合条件的页面，这是一种人性化的做法。做法。（3 3）当前浏览位置）当前浏览

8、位置 所谓所谓“当前浏览位置当前浏览位置”就是在网站的每个页面中加入就是在网站的每个页面中加入当前位置的文字说明并逐级加入链接。当前位置的文字说明并逐级加入链接。（五）知识讲解与操作示范（五）知识讲解与操作示范（7 7）15.2.6网页页面元素设计网页页面元素设计1页面标题设计页面标题设计 页面标题相当于商店的招牌，标题通常位于页面的页面标题相当于商店的招牌，标题通常位于页面的上端或中央，清楚明确地表示出来。上端或中央，清楚明确地表示出来。（1 1）标题大小、粗细要合适）标题大小、粗细要合适 （2 2）标题使用鲜艳的色彩）标题使用鲜艳的色彩 （3 3）利用空间突出标题）利用空间突出标题（五）知

9、识讲解与操作示范（五）知识讲解与操作示范（8 8）2页面中文字设计页面中文字设计 （1 1）文字字体的选择）文字字体的选择 网页中正文文本一般可使用系统默认的中文字体和西网页中正文文本一般可使用系统默认的中文字体和西文字体，若需使用特殊字体，一般把使用了特殊字体的对文字体，若需使用特殊字体，一般把使用了特殊字体的对象制作成图片。常用的中文字体有宋体、黑体、楷体、仿象制作成图片。常用的中文字体有宋体、黑体、楷体、仿宋体、行书、隶书、魏碑等，常用英文字体有宋体、行书、隶书、魏碑等，常用英文字体有Times New Times New RomanRoman、ArialArial、ImpactImpa

10、ct等等 (2 (2）文字粗细的确定）文字粗细的确定 文字变细会显得十分优美，反之将文字变粗会显得有力。文字变细会显得十分优美，反之将文字变粗会显得有力。（五）知识讲解与操作示范（五）知识讲解与操作示范（9 9）（3 3）文字字号的确定）文字字号的确定 对于网页中正文文本，其字号一般设置为对于网页中正文文本，其字号一般设置为10101212磅；磅；对于网页中版权声明等文本一般设置为对于网页中版权声明等文本一般设置为9 91010磅；对于磅；对于网页中标题文本，一般设置为网页中标题文本，一般设置为12121818磅。磅。（4 4）文字的字间距和行间距）文字的字间距和行间距 网页中文本的字间距和行

11、间距在某种程度上会改变网页中文本的字间距和行间距在某种程度上会改变访问者的阅读心理。访问者的阅读心理。（五）知识讲解与操作示范（五）知识讲解与操作示范（1010）3页面中图像应用页面中图像应用 传递信息的视觉要素包括版式、文字、图像、色彩传递信息的视觉要素包括版式、文字、图像、色彩等。等。网页中图像在信息传达上应用具备以下功能：网页中图像在信息传达上应用具备以下功能：（1 1）要有良好的视觉吸引力，能吸引浏览者的注意）要有良好的视觉吸引力，能吸引浏览者的注意力。力。（2 2）要简洁明确地传达网站信息，能使人们一目了）要简洁明确地传达网站信息，能使人们一目了然地抓住网站信息的重点。然地抓住网站信

12、息的重点。（3 3）要有强而有力的诱导作用，造成鲜明的视觉感）要有强而有力的诱导作用，造成鲜明的视觉感受效果，从观看过程中产生愿望和欲求。受效果，从观看过程中产生愿望和欲求。（五）知识讲解与操作示范（五）知识讲解与操作示范（1111）对图像的处理主要包括以下几个方面：对图像的处理主要包括以下几个方面：（1 1）图像的外形处理）图像的外形处理（2 2）图像的面积处理）图像的面积处理（3 3）图像的数量处理）图像的数量处理（4 4）图像的背景处理）图像的背景处理（五）知识讲解与操作示范（五）知识讲解与操作示范（1212）15.3网页设计的规范网页设计的规范15.3.1网页版面尺寸规范网页版面尺寸规

13、范1网页的宽度网页的宽度 目前我国的网络用户，大部分使用目前我国的网络用户，大部分使用1515英寸和英寸和1717英寸显示器，采用英寸显示器，采用800600800600分辨率的用户仍不少，分辨率的用户仍不少，为了考虑这部分浏览者的需要，制作网页时一般按为了考虑这部分浏览者的需要，制作网页时一般按照照800600800600（单位为像素）分辨率的规格来设计，（单位为像素）分辨率的规格来设计，页面宽度不超过页面宽度不超过1 1屏。屏。（五）知识讲解与操作示范（五）知识讲解与操作示范（1313）2网页文件大小网页文件大小 一般地，网站的首页大小（包括所有图像、文一般地，网站的首页大小（包括所有图像

14、、文本、多媒体对象）不宜超过本、多媒体对象）不宜超过30KB30KB，网站的二级页面，网站的二级页面的文件（包括所有图像、文本、多媒体对象等）不的文件（包括所有图像、文本、多媒体对象等）不宜超过宜超过45KB45KB。如果网页大太，网页下载的速度会变。如果网页大太，网页下载的速度会变慢，影响浏览速度。慢，影响浏览速度。（五）知识讲解与操作示范（五）知识讲解与操作示范（1414）3网页的长度网页的长度 从理论上来讲网页的长度可以无限长的，但一从理论上来讲网页的长度可以无限长的，但一般不宜超过般不宜超过3 3屏，最佳长度为屏，最佳长度为1.81.82.52.5屏。屏。4广告尺寸广告尺寸 广告尺寸应

15、为标准尺寸，全尺寸广告尺寸应为标准尺寸，全尺寸banner不超过不超过14KB。（五）知识讲解与操作示范（五）知识讲解与操作示范（1515）15.3.2文件夹、文件命名规范文件夹、文件命名规范主要命名规则有：主要命名规则有：（1 1）文件夹命名一般采用英文小写字母，特殊情况可以使用中文拼）文件夹命名一般采用英文小写字母，特殊情况可以使用中文拼音，常见的文件夹命名：存放图形文件的文件夹命名为音，常见的文件夹命名：存放图形文件的文件夹命名为imageimage，存放，存放flashflash文件的文件夹命名为文件的文件夹命名为flashflash，存放，存放CSSCSS样式表文件的文件夹命名样式表

16、文件的文件夹命名为为stylestyle或或 CSS CSS，存放，存放JavaScriptJavaScript脚本的文件夹命名为脚本的文件夹命名为JSJS，存入友情，存入友情链接的文件夹命名为链接的文件夹命名为 link link，存放，存放 indlude indlude 文件的文件夹命名为文件的文件夹命名为includeinclude。（2 2）文件名称统一用小写的英文字母、数字和下划线的组合。）文件名称统一用小写的英文字母、数字和下划线的组合。（3 3）索引文件命名为）索引文件命名为index.htmlindex.html，主内容页命名为，主内容页命名为main.htmlmain.ht

17、ml。（4 4）菜单名称用菜单名的英文单词或组合英文单词命名。）菜单名称用菜单名的英文单词或组合英文单词命名。（5 5）图片、动画文件的命名以英文单词或汉语拼音缩写命名。）图片、动画文件的命名以英文单词或汉语拼音缩写命名。（六）课堂模仿实践（六）课堂模仿实践 打开网站打开网站“课堂实践课堂实践”文件夹文件夹“16“16网页设计网页设计”中中网页文档网页文档“16.html”,“16.html”,运用本章所介绍的方法和技巧运用本章所介绍的方法和技巧对该网页的页面布局、颜色搭配、文字图像进行合理对该网页的页面布局、颜色搭配、文字图像进行合理调整和优化。然后浏览其效果，直到自己认为满意为调整和优化。

18、然后浏览其效果，直到自己认为满意为止。止。（八）归纳总结（八）归纳总结 本章主要对网站规划和网页设计进行了剖本章主要对网站规划和网页设计进行了剖析，分析了网页设计过程中的一些基本原理和析，分析了网页设计过程中的一些基本原理和方法，主要包括版面布局、外观设计、方法，主要包括版面布局、外观设计、LogoLogo设设计、色彩设计、导航设计、页面元素设计和网计、色彩设计、导航设计、页面元素设计和网页设计的规范，为设计和制作网页提供理论指页设计的规范，为设计和制作网页提供理论指导和方法支持。导和方法支持。（九）布置习题（九）布置习题 在在“湖铁职院学院网站湖铁职院学院网站”站点文件夹站点文件夹“16“16网页网页设计设计”中创建网页中创建网页index.htmlindex.html，并运用本章所学习，并运用本章所学习的方法和技巧对网页的版式结构、导航栏设计、颜的方法和技巧对网页的版式结构、导航栏设计、颜色搭配、文字效果、网页特效等方面进行美化、优色搭配、文字效果、网页特效等方面进行美化、优化。化。