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