网页页面设计教案.docx
《网页页面设计教案.docx》由会员分享，可在线阅读，更多相关《网页页面设计教案.docx（27页珍藏版）》请在冰点文库上搜索。
《网页页面设计》 教案
教学对象：
教学总学时：
主讲教师：
主讲教师单位：
时 间：
年 月 日
概 要
本门课程的教学目标和要求：
通过教学训练，使学生的设计能
力、软件应用能力及实际操作能力得到深入的提高。
通过理论讲解与实例分析，学生可熟悉网页页面设计与制作的相关知识；通过应用训练，学生可掌握相关软件，并逐步培养学生的创造能力；通过综合训练，学生可以将理论知识应用于实践，并逐步提高学生的设计能力。
学生在完成本课程学习后，应达到如下要求：
（1）正确理解网页页面的含义。
（2）掌握网页页面设计的基本知识和基本规律。
（3）熟悉网页页面设计的方法。
（4）能够将理论与实践相结合，独立完成网页页面设计与制作。
教学要点：
不同类型的网页页面设计。
教学重点及难点：
综合运用平面制图软件进行网页页面的设计与制作。
教学方法：
先课堂讲授,掌握一定基础知识，然后进行实例教学，启发创作，在课堂形成教学互动；最后创作练习，培养学以致
用，实战能力。
教学总时数：
56学时
教学参考书：
《网页页面设计与制作》
目录
课题一 网页概述
课题二 网页设计视听元素课题三 交互式视觉元素课题四 网页版面设计
课题五 网页配色课题六 PS网页切图
教 案 首 页
班
级
授课时间
年 月 日
课次
时数
课
题
课题一 网页概述
教学目的
通过本堂课的学习，使学生了解什么是网页页面设计，网页页面的规格、网页页面版面以及相关设计软件等。
授课提要
１、网站与网页
２、网页设计相关软件
３、网站的类型
４、网页的类型和规格
5、网页页面划分
重点
１、网页的类型和规格
２、网页页面划分
难点
１、网页的类型和规格
２、网页页面划分
教
具
案例、教材、多媒体
作业
通过对网页页面设计的学习完成网页主页设计。
后记
具体授课内容：
课题一 网页概述
网站设计是一个系统的软件应用工程，工作内容千头万绪，涉及到项目管理、页面设计，程序设计，网站测试，资料收集、文档编辑等方面工作，它需要不同的人员分工合作才能完成。
只有建立和实施规范的网站设计流程，有效整合各方面的工作内容，才能高效有序地开展网站设计工作，最终顺利地实现网站开发的目标。
通过本堂课的学习，使学生了解什么是网页页面设计，网页页面的规格、网页页面版面以及相关设计软件等。
概念分解：
一、网站与网页
1、网站：
为了更好的推广企业、机构、活动等整体形象，利用互联网技术
（数字技术）实现的超链接网络信息查询的多个页面。
2、网页：
网站中，用来提供相关信息的单一页面。
3、网站与网页的区别：
浏览器窗口中显示的单一页面，是网页。
而多个可以
实现超链接的页面统称为网站。
知识要点：
二、网页设计相关软件
1、网页编辑软件
Dreamweaver是MacromediaStudio的一部分，MacromediaStudio是包
括Flash、Fireworks、Contribute和FlashPaper的集成套件。
2、图形图像软件
（1）AdobePhotoshop和ImageReady
Photoshop是数字专业图像编辑领域内使用最普及的软件，它提供高效的图像编辑、处理以及文件处理功能，与其他软件的兼容性强，支持各种主流图像格式。
（2）Fireworks
Fireworks是专业的网页图片编辑工具,它与Dreamweaver软件的融合度很高，可以制作专门针对网页优化的各种元素或效果，如导航条、切片、GIF动画等。
（3）CorelDRAW
CorelDRAW也是一款专业的矢量绘图软件，功能丰富、接口开放性好，自带许多工具，可以将位图图像转换为矢量图形，其最新的版本在图片编辑方
面增加了许多新的特性、新的学习工具，在插画和页面布局方面也进行了加强。
（4）AdobeIllustrator
AdobeIllustrator是一个矢量绘图软件，在MicrosoftWindows平台和AppleMacintosh平台上都能良好地运行。
通过它我们可以创建复杂的艺术作品，技术图解，用于打印的图形和页面设计图样，多媒体以及Web。
Illustrator有强大的图形处理功能，提供了广泛的强大绘图和着色工具，支持所有主要的图形图像格式。
3、网页动画软件
（1）FLASH
FLASH是一款功能强大的动画制作软件,利用它，我们能制作出具有一流动画效果的FLASH影片。
（2）KoolMovesFlashEditor
KoolMoves是一个网站动画制作软件，它能够制作Flash电影以及其他与动画相关的素材。
该软件还能够制作动画GIF、制作文字特效、导入矢量剪贴画、附加WAV音频文件，为文字按钮和帧增加动作等。
（3）GIFMovieGear
GIFMovieGear是一款GIF动画制作软件，几乎所有制作GIF动画所需的编辑功能它都有，无须再用其他的图形软件辅助。
它可以处理背景透明化，而且操作简便，通过最佳化处理压缩图片的容量。
其次，它除了可以把做好的图片存成GIF的动画图外，还可支持PSD、JPEG、AVI、BMP、GIF与AVI格式输出。
三、网站的类型
1、按照行业特点划分网站类型
经济类网站（服饰类、食品类、生活用品类等）
娱乐类网站医药类网站教育类网站
2、按照网站规模划分网站类型
门户类网站
企业类网站个人网站
四、网页的类型和规格
1、首页设计
（1）什么是首页？
首页就是网站中第一个页面，通常用英文indext来表示，网站中除了首页之外的其他页面都称之为子页面或分页面。
（2）首页的种类
首页分为两种，形象页及传统型首页。
有的企业会为自己的网站制定形象页。
2、栏目页设计
当网站首页以形象面表现，企业栏目便缺失了，此时栏目页将很好的起到
补充作用。
3、内容页
用来根据栏目项逐一进行内容介绍的页面。
4、页面形式
（1）一屏页面：
介于两者之间的尺寸。
都是一屏界面。
（2）多屏页面：
多于一屏的界面，叫做多屏界面。
5、网页的规格
（1）640*480实际尺寸620*311
（2）800*600实际尺寸780*428（760~788）
（3）1024*768实际尺寸1007*600（788~1007）
主页 栏目页 内容网页
五、网页页面划分
1、页眉（页头）
页头就是页眉，作用是定义页面的主题，其中包括Logo、网站标题、旗
帜广告、还有导航栏。
这些都是页面的重要组成部分。
2、内容页
用于整个网站信息展示、内容介绍。
3、页脚（页尾）
页脚和页头一样有很多要素：
副导航栏、制作者或公司的信息、版权说明
等。
实训能力：
课题作业
实践作业名称：
《网页形象页面》设计实践内容
1、企业形象的展示
2、网页图片的选用与设计
3、说明文案的编排考虑
4、构成要素的考虑
实践目标
熟悉掌握网页设计中的视听元素，独立完成网页形象页面设计。
课题要求
1、网页主页规格1024*768。
2、色彩模式RGB分辨率72像素。
3、保存——学号姓名.PSD文件。
教 案 首 页
班
级
授课时间
年 月 日
课次
时数
课
题
课题二 网页设计的视听元素
教学目的
通过本堂课的学习，使学生了解网页设计的视听元素，掌握不同形式的网页元素特点。
授课提要
１、网页文字
２、网页图形图形
3、网页动画
4、网页音频与视频
5、网页交互式元素
重点
１、网页文字
２、网页交互式元素
难点
１、网页交互式元素
教
具
案例、教材、多媒体
作业
通过对网页页面设计的学习完成网页主页设计。
后记
具体授课内容：
课题二 网页设计的视听元素
通过本堂课的学习，使学生了解网页设计的视听元素，掌握不同形式的网页元素特点。
知识要点：
一、网页文字
1、文本文字
所谓文本，是指在网页编辑软件中可以编辑和更改内容的字符，它具有字体、字号、色彩等的基本属性。
2、图形文字
图形文字是指内容不可编辑、已经图形化的各种文字。
3、网页文字的设计准则
（1）文字的风格和编排符合网页主题。
（2）保持文字的可读性。
（3）保持文字设计的整体性。
（4）大量的文字适合使用文本文字，文本文字应选用常用的系统字体。
（5）图形文字要注意控制文件的大小。
二、网页图形图像
1、矢量图
矢量图也称为向量图，矢量图是通过数学方法计算对象的轮廓线和填充属性来描述图形的。
2、位图
位图也称为点阵图或像素图，它由网格上的点组成，这些点称为像素。
位图是连续色调图像（如照片或数字绘画）最常用的电子媒介，因为它可以表现阴影和颜色的细微层次。
3、矢量图和位图相互转化
4、图形图像的设计要点
在进行网页图形图像设计时，要根据网页的特点注意以下要点：
（1）96dpi是网页图像的最佳分辨率。
（2）控制图像文件的大小。
（3）根据不同目的，选择适当图像文件格式。
（4）大小：
单张30KB，单页60KB，较大图像应进行“切割”，图象的格式：
GIF、JPEG。
5、网页中常用的图形图像格式
（1）GIF图像格式：
GIF是GraphicInterchangeFormat（图像交换格式）的缩写，以.gif作为扩展名。
（2）JPEG图像格式：
JPEG是JointPictureExpertGroup（联合图像专家组）的缩写。
由于它支持全彩色模式，所以很适合用来优化颜色丰富的图像。
（3）PNG图像格式：
PNG是PortableNetwortGraphics（可移植网络图像）的缩写，是由Netscape公司开发出来的图像格式。
它汲取了GIF和JPG的优点。
（4）SWF格式：
SWF文件格式是一种基于矢量的图形文件格式，也是目前
Internet上唯一获广泛支持的矢量图形格式。
三、网页动画
1、GIF动画
GIF动画是像素图像动画，通过若干变化的256色位图图像间隔一定时间
连续播放产生动画效果，属于逐帧动画。
逐帧动画是指动画的每一帧都需要绘制的动画生成方式。
2、Flash动画
通过Micromedia公司的Flash软件能够制作出一种扩展名为
SWF（ShockwaveFormat）的动画，通常我们叫这种动画为Flash动画。
3、控件动画
控件动画是指通过编写程序代码，使图形或文字在一定的触发条件下产生
各种变形的动画生成方式。
四、网页音频与视频
1、音频
（1）MIDI文件：
MIDI（扩展名为.midi或.mid）文件只能用于器乐，不能
表现自然人声。
（2）WAV文件和AIF文件：
WAV文件（扩展名为.wav）是微软公司开发的一种声音文件格式，AIF文件（扩展名为.aif或.aiff）是苹果公司开发的声音文件格式。
（3）MP3文件：
MP3文件（即MPEG-音频层-3，扩展名为.mp3）是一种压缩格式，它可令声音文件明显缩小，MP3是现在网络音频文件格式的主流。
（4）RealAudio文件：
RealAudio文件（扩展名为.ra、.ram、.rpm）具有非常高的压缩程度，文件数据量要小于MP3。
（5）WMA文件：
WMA（WindowsMediaAudio，扩展名为.wma）格式是微软公司开发的压缩音乐格式。
2、视频
（1）RealMedia（文件扩展名为.RM）
（2）QuickTime（文件扩展名为：
.qt、.qtm、.mov）
（3）WindowsMedia媒体文件为ASF格式（扩展名为.asf或.wmv）
五、交互式视觉元素
1、按钮
按钮在网页中最为常见，它可以实现超链接功能。
按钮点击后能够产生某
种行为，或实现某种操作，多用于页面导航、信息提交以及各种功能的激活。
2、导航条
导航条实际上是一系列不同功能按钮或链接图标的组合，由于多个按钮或
链接图标排列形成横条或竖条，所以被称为导航条。
3、表单
表单是用于信息收集和用户反馈的一类对象。
设计表单时应尽量简单。
实训能力：
课题作业
实践作业名称：
《网页形象页面》设计实践内容
1、企业形象的展示
2、网页图片的选用与设计
3、说明文案的编排考虑
4、构成要素的考虑
实践目标
熟悉掌握网页设计中的视听元素，独立完成网页形象页面设计。
课题要求
1、网页主页规格1024*768。
2、色彩模式RGB分辨率72像素。
3、保存——学号姓名.PSD文件。
教 案 首 页
班
级
授课时间
年 月 日
课次
时数
课
题
课题三 网页交互式视觉元素
教学目的
通过本堂课的学习，使学生了解网页交互式视觉元素，掌握网页按钮和导航条的设计，能够独立完成网页导航条设计。
授课提要
１、按钮类型
２、导航条设计
重点
１、按钮类型
２、导航条设计
难点
１、导航条设计
教
具
案例、教材、多媒体
作业
通过对网页交互式视觉元素的学习完成网页按钮与导航条设计
后记
。
具体授课内容：
课题三 交互式视觉元素
通过本堂课的学习，使学生了解网页交互式视觉元素，掌握网页按钮和导航条的设计，能够独立完成网页导航条设计。
概念分解：
一、按钮类型
网页中的按钮主要有两种类型:
一种是单纯以图案作为按钮，例如箭头、三角形等简单的图案或符号作为示意；
另一种是附有文字的按钮，如例“首页”、“进入”、“下一步”等，能够直观地表达按钮的作用。
二、导航条设计
一个网站通常综合了各种丰富的信息，并以多个页面（频道）将不同的内容
呈现，为了在网页中提供链接到其他页面的通道，一般会设计导航条并将同一个导航条放置在所有网页的相同位置，以便浏览者快速打开其他网页获得更多的信息。
1、导航的形式
优秀的网站导航总是能够尽量回答用户好的导航问题，这些是通过使用导
航帮助系统如URL、网页标签、标记网页和导航条等工具实现的。
导航可以包括很多形式，常见的有标签形式、按钮形式、弹出菜单形式、无框图标形式、
Flash形式、多导航系统等。
（1）标签形式的导航
标签形式的导航通常用于图片比例大、文字提供信息量少、网站风格较为简单的网站中。
（2）按钮形式的导航
按钮形式的导航是传统的导航样式，按钮可以制作成多种形状，无论是规则还是不规则形状的按钮，都是最容易使读者理解点击含义的导航形式。
（3）弹出菜单形式的导航
为了节省页面的空间，很多网站的导航采用弹出菜单的形式。
当鼠标指针放在文字或图片上时，菜单随即弹出，这样即可以节省空间，又可以增强页面的交互效果。
（4）无框图标形式的导航
无框图标形式的导航将图标去掉边框，使用多种不规则的图案或线条，给用户以轻快的自由感，增强了网站的趣味性。
（5）Flash形式的导航
现在很多网站的导航是有Flash制作而成的。
追求动感的时尚类网站通常采用这种风格的导航形式。
（6）多导航系统
在多导航系统中，不存在从属关系，每个导航的作用都是不同的，导航内部可以采用多种形式表现。
2、导航的方向与位置
（1）导航的方向
按照方向来划分导航，可以将其划分为垂直导航、横排导航、倾斜导航和乱序导航。
（2）导航的位置
导航元素的位置不仅仅是一个品味的问题，它还是直接影响到用户访问网页的便利性。
通常网页页面中实际上有五个基本区域来放置导航元素。
实训能力：
课题作业
实践作业名称：
《网页导航栏》设计实践内容
1、导航形式的选择
2、导航元素设计
3、导航色彩的考虑实践目标
熟悉掌握网页设计中的导航设计，独立完成网页页面按钮与导航栏设计。
课题要求
1、网页主页规格1024*768。
2、色彩模式RGB分辨率72像素。
3、保存——学号姓名.PSD文件。
教 案 首 页
班
级
授课时间
年 月 日
课次
时数
课
题
课题四 网页版面设计
教学目的
通过本堂课的学习，使学生了解网页版面及版面布局的原则、方法及形式。
授课提要
１、网页版面
２、版面布局原则
３、版面布局常用方法
4、版面布局形式（分栏布局）
重点
１、版面布局常用方法
２、版面布局形式（分栏布局）
难点
１、版面布局常用方法
２、版面布局形式（分栏布局）
教
具
案例、教材、多媒体
作业
通过对网页版面的设计学习完成网页分页面设计设计。
后记
课题四 网页版面设计
具体授课内容：
通过本堂课的学习，使学生了解网页版面及版面布局的原则、方法及形式。
知识要点：
一、网页版面
1、网页版面
网页版型就是网页的页面布局，版式设计指在指定的页面空间上将各种视
听元素规划组合在一起，形成所需的某种布局。
设计者应该根据主题定位为网页规划合适的版式，使网页呈现个性风格，让浏览者产生视觉美感。
2、网页界面
界面指某种设计的综合布局形式，具有与外界交流及相互操作的作用。
网
页界面要求具有一定版型的同时，能够与浏览者交流互动，相互施加影响。
与网页版型不同，界面设计除了一般的布局处理，还要添加相关的操作功能。
二、版面布局原则
1、主次分明，中心突出
2、大小搭配，相互呼应
3、图文并茂，相得益彰
三、版面布局方法
1、正常平衡
2、异常平衡
3、对比
4、凝视
5、空白
6、图片解说
四、版面布局形式（分栏布局）
1、Ⅰ和Ⅱ以二分栏作为基础结构。
分栏式结构是最常见的网页框架，也可以称为竖分栏。
这是一种超过一屏
半，把页面从上到下分割为几列构架的设计结构。
分栏式结构是竖长方形页面的框架。
2、Ⅱ是Logo和导航处在页面下方的情况。
二分栏结构一般是左窄右宽，导航居左，底色加重表示强调。
也有的情况是右窄左宽，导航居右，但非主流。
3、Ⅲ是以三分栏作为基础结构的。
三分栏属于开放式结构，给人的感觉十分大气，适用于门户和流量大的
网站。
常规内容设置是：
导航横排在页面上部，左右两栏为功能区和附加信息区。
中栏为主要信息显示区和重要资料显示区。
根据信息源，将中栏进行一些小分栏变化，以确立网站特色。
色彩分布则主要是左右两栏色彩深一些，而中栏为白色等常见情况。
4、Ⅳ中的前两个是四分栏的结构框架，后两个是五分栏的结构框架。
四分栏式结构会使得页面相对很拥挤，给人一种网站的信息量很大的感觉。
信息储备少的站点采用这种框架，可以在视觉感观上调整信息量少的不足。
由于英文字比中文方块汉字占用空间小，因而四分栏在国外比较多见。
作为突破性的设计，应该有一些尝试，也许会发现它的妙用之处。
如果细心观察，你会注意到在变化了的二分栏或三分栏骨架中会出现小的四分栏式结构。
5、小四分栏式结构
由于英文字比中文方块汉字占用空间小，因而四分栏在国外比较多见。
作
为突破性的设计，应该有一些尝试，也许会发现它的妙用之处。
如果细心观察，你会注意到在变化了的二分栏或三分栏骨架中会出现小的四分栏式结构。
实训能力：
课题作业
实践作业名称：
《网页分页面》设计
实践内容
1、企业形象的展示
2、网页图片的选用与设计
3、说明文案的编排考虑
4、网页布局形式的考虑
实践目标
熟悉掌握网页设计中的版面设计，独立完成网页分页面设计。
课题要求
1、网页主页规格1024*768。
2、色彩模式RGB分辨率72像素。
3、保存——学号姓名.PSD文件。
教 案 首 页
班
级
授课时间
年 月 日
课次
时数
课
题
课题五 网页配色
教学目的
通过本堂课的学习，使学生了解什么是网页安全色，掌握网页基本配色。
授课提要
１、认识网页安全色
２、三原色原理
3、网页基本配色
4、网页配色分析
重点
１、网页基本配色
２、网页配色分析
难点
1、网页配色分析
教
具
案例、教材、多媒体
作业
通过对网页配色设计的学习完成网页分页面设计。
后记
具体授课内容：
课题五 网页配色
通过本堂课的学习，使学生了解什么是网页安全色，掌握网页基本配色。
知识要点：
一、认识网页安全色
1、网页安全色就是指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合，而使用网页安全色作为配色方案可以解决网页颜色失真的问题。
2、网页安全色总共包含216种颜色，因此网页安全色也称为216安全色。
二、三原色原理
在实用美术中，常有“远看色彩近看花，先看颜色后看花，七分颜色三分花”的说法。
这也就说明，在任何设计中，色彩对视觉的刺激起到第一信息传达的作用。
因此，对色彩的基础知识的良好掌控，在网页设计中才能做到游刃有余。
1、色环
色环是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色，就可以得到一个色彩环。
色环通常包括12种不同的颜色。
2、原色
也叫“三原色”。
即红、黄、蓝三种基本颜色。
自然界中的色彩种类繁多，变化丰富，但这三种颜色却是最基本的原色，原色是其他颜色调配不出来的。
除白色外，把三原色相互混合，可以调和出其他种颜色。
根据三原色的特性做出相应的色彩搭配，有最迅速最有力最强烈的传达视觉信息效果。
三、网页基本配色
1、无色设计：
不用彩色，只用黑、白、灰色。
2、类比设计：
相邻的颜色我们称为类比色。
类比色都拥有共同的颜色。
这种
颜色搭配产生了一种令人悦目、低对比度的和谐美感。
类比色非常丰富，在设
计时应用这种搭配同样让你轻易产生不错的视觉效果。
在色相环上任选三个连续的色彩或其任一明色和暗色。
3、冲突设计：
把一个颜色和它补色左边或右边的色彩配合起来。
4、互补设计：
在色轮上直线相对的两种颜色称为补色。
补色形成强列的对比
效果，传达出活力、能量、兴奋等意义。
补色要达到最佳的效果，最好是其中
一种面积比较小，另一种比较大。
比如在一个蓝色的区域里搭配橙色的小圆点。
使用色相环上全然相反的颜色。
5、单色设计：
一种色相由暗、中、明三种色调组成。
这就是单色。
单色搭配
上并没有形成颜色的层次，但形成了明暗的层次。
这种搭配在设计中应用时，
出来的效果永远不错，其重要性也可见一斑。
把一个颜色和任一个或它所有的明、暗色配合起来。
。
6、中性设计：
一种色相由暗、中、明三种色调组成。
这就是单色。
单色搭配
上并没有形成颜色的层次，
升级会员 