网页页面设计教案Word格式文档下载.docx
- 文档编号:13099587
- 上传时间:2022-10-05
- 格式:DOCX
- 页数:27
- 大小:125.17KB
网页页面设计教案Word格式文档下载.docx
《网页页面设计教案Word格式文档下载.docx》由会员分享,可在线阅读,更多相关《网页页面设计教案Word格式文档下载.docx(27页珍藏版)》请在冰豆网上搜索。
综合运用平面制图软件进行网页页面的设计与制作。
教学方法:
先课堂讲授,掌握一定基础知识,然后进行实例教学,启发创作,在课堂形成教学互动;
最后创作练习,培养学以致
用,实战能力。
教学总时数:
56学时
教学参考书:
《网页页面设计与制作》
目录
课题一 网页概述
课题二 网页设计视听元素课题三 交互式视觉元素课题四 网页版面设计
课题五 网页配色课题六 PS网页切图
教 案 首 页
班
级
授课时间
年 月 日
课次
时数
课
题
教学目的
通过本堂课的学习,使学生了解什么是网页页面设计,网页页面的规格、网页页面版面以及相关设计软件等。
授课提要
1、网站与网页
2、网页设计相关软件
3、网站的类型
4、网页的类型和规格
5、网页页面划分
重点
1、网页的类型和规格
2、网页页面划分
难点
教
具
案例、教材、多媒体
作业
通过对网页页面设计的学习完成网页主页设计。
后记
具体授课内容:
课题一 网页概述
网站设计是一个系统的软件应用工程,工作内容千头万绪,涉及到项目管理、页面设计,程序设计,网站测试,资料收集、文档编辑等方面工作,它需要不同的人员分工合作才能完成。
只有建立和实施规范的网站设计流程,有效整合各方面的工作内容,才能高效有序地开展网站设计工作,最终顺利地实现网站开发的目标。
概念分解:
一、网站与网页
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文件。
课题二 网页设计的视听元素
通过本堂课的学习,使学生了解网页设计的视听元素,掌握不同形式的网页元素特点。
1、网页文字
2、网页图形图形
3、网页动画
4、网页音频与视频
5、网页交互式元素
2、网页交互式元素
1、网页交互式元素
课题二 网页设计的视听元素
知识要点:
一、网页文字
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是现
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 页面 设计 教案