网页页面设计教案

word文档可自由复制编辑《网页页面设计》教案教学对象：教学总学时：主讲教师：主讲教师单位：时间：年月日概要本门课程的教学目标和要求：通过教学训练，使学生的设计能力、软件应用能力及实际操作能力得到深入的提高。通过理论讲解与实例分析，学生可熟悉网页页面设计与制作的相关知识；通过应用训练，学生可掌握相关软件，并逐步培养学生的创造能力；通过综合训练，学生可以将理论知识应用于实践，并逐步提高学生的设计能力。学生在完成本课程学习后，应达到如下要求：（1）正确理解网页页面的含义。（2）掌握网页页面设计的基本知识和基本规律。（3）熟悉网页页面设计的方法。（4）能够将理论与实践相结合，独立完成网页页面设计与制作。教学要点：不同类型的网页页面设计。教学重点及难点：综合运用平面制图软件进行网页页面的设计与制作。教学方法：先课堂讲授,掌握一定基础知识，然后进行实例教学，启发创作，在课堂形成教学互动；最后创作练习，培养学以致用，实战能力。教学总时数：56学时教学参考书：《网页页面设计与制作》目录课题一网页概述课题二网页设计视听元素课题三交互式视觉元素课题四网页版面设计课题五网页配色课题六PS网页切图教案首页班级授课时间年月日课次时数课题课题一网页概述教学目的通过本堂课的学习，使学生了解什么是网页页面设计，网页页面的规格、网页页面版面以及相关设计软件等。授课提要１、网站与网页２、网页设计相关软件３、网站的类型４、网页的类型和规格5、网页页面划分重点１、网页的类型和规格２、网页页面划分难点１、网页的类型和规格２、网页页面划分教具案例、教材、多媒体作业通过对网页页面设计的学习完成网页主页设计。后记课题一网页概述具体授课内容：网站设计是一个系统的软件应用工程，工作内容千头万绪，涉及到项目管理、页面设计，程序设计，网站测试，资料收集、文档编辑等方面工作，它需要不同的人员分工合作才能完成。只有建立和实施规范的网站设计流程，有效整合各方面的工作内容，才能高效有序地开展网站设计工作，最终顺利地实现网站开发的目标。通过本堂课的学习，使学生了解什么是网页页面设计，网页页面的规格、网页页面版面以及相关设计软件等。概念分解：一、网站与网页1、网站：为了更好的推广企业、机构、活动等整体形象，利用互联网技术（数字技术）实现的超链接网络信息查询的多个页面。2、网页：网站中，用来提供相关信息的单一页面。3、网站与网页的区别：浏览器窗口中显示的单一页面，是网页。而多个可以实现超链接的页面统称为网站。知识要点：二、网页设计相关软件1、网页编辑软件Dreamweaver是MacromediaStudio的一部分，MacromediaStudio是包括Flash、Fireworks、Contribute和FlashPaper的集成套件。2、图形图像软件（1）AdobePhotoshop和ImageReadyPhotoshop是数字专业图像编辑领域内使用最普及的软件，它提供高效的图像编辑、处理以及文件处理功能，与其他软件的兼容性强，支持各种主流图像格式。（2）FireworksFireworks是专业的网页图片编辑工具,它与Dreamweaver软件的融合度很高，可以制作专门针对网页优化的各种元素或效果，如导航条、切片、GIF动画等。（3）CorelDRAWCorelDRAW也是一款专业的矢量绘图软件，功能丰富、接口开放性好，自带许多工具，可以将位图图像转换为矢量图形，其最新的版本在图片编辑方面增加了许多新的特性、新的学习工具，在插画和页面布局方面也进行了加强。（4）AdobeIllustratorAdobeIllustrator是一个矢量绘图软件，在MicrosoftWindows平台和AppleMacintosh平台上都能良好地运行。通过它我们可以创建复杂的艺术作品，技术图解，用于打印的图形和页面设计图样，多媒体以及Web。Illustrator有强大的图形处理功能，提供了广泛的强大绘图和着色工具，支持所有主要的图形图像格式。3、网页动画软件（1）FLASHFLASH是一款功能强大的动画制作软件,利用它，我们能制作出具有一流动画效果的FLASH影片。（2）KoolMovesFlashEditorKoolMoves

是一个网站动画制作软件，它能够制作

Flash电影以及其他与动画相关的素材。该软件还能够制作动画

GIF、制作文字特效、导入矢量剪贴画、附加

WAV

音频文件，为文字按钮和帧增加动作等。（3）GIFMovieGearGIFMovieGear是一款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、中性设计：一种色相由暗、中、明三种色调组成。这就是单色。单色搭配上并没有形成颜色的层次，但形成了明暗的层次。这种搭配在设计中应用时，出来的效果永远不错，其重要性也可见一斑。加入一个颜色的补色或黑色使它色彩消失或中性化。7、分裂补色设计：如果我们同时用补色及类比色的方法来确定的颜色关系，就称为分裂补色。这种颜色搭配既具有类比色的低对比度的美感，又具有补色的力量感。形成了一种既和谐又有重点的颜色关系。把一个颜色和它补色任一边的颜色组合起来。8、原色设计：除了在一些儿童的产品中，三原色同时使用是比较少见的。但是，无论是在中国还是在美国的文化中，红黄搭配都是非常受欢迎。红黄搭配应用的范围很广——从快餐店到加油站，我们都可以看见这两种颜色同时在一起。蓝红搭配也很常见，但只有当两者的区域是分离时，才会显得吸引人，如果是紧邻在一起，则会产生冲突感。把纯原色红、黄、蓝色结合起来。9、二次色设计：二次色之间都拥有一种共同的颜色——其中两种共同拥有蓝色，两种共同拥有黄色，两种共同拥有红色——所以它们轻易能够形成协调的搭配。如果三种二次色同时使用，则显得很舒适、吸引，并具有丰富的色调。它们同时具有的颜色深度及广度，这一点在其它颜色关系上很难找到。把二次色绿、紫、橙色结合起来。10、三次色三色设计：三次色三色设计是下面二个组合中的一个：红橙、黄绿、蓝紫色或是蓝绿，黄橙、红紫色，并且在色相环上每个颜色彼此都有相等的距离。实训能力：四、网页配色分析其实运用色轮分析后，很容易得到答案。A:单色搭配B:补色搭配C:三原色搭配D:类比色搭配实训能力：课题作业实践作业名称：《网页分页面》设计实践内容1、企业形象的展示2、网页图片的选用与设计3、说明文案的编排考虑4、网页色彩的考虑实践目标熟悉掌握网页设计中的配色设计，独立完成网页分页面设计。课题要求1、网页主页规格1024*768。2、色彩模式RGB分辨率72像素。3、保存——学号姓名.PSD文件。教案首页班级授课时间年月日课次时数课题课题六PS网页切图教学目的通过本堂课的学习，使学生了解什么是网页切图与切片，掌握网页切图的方法，能够独立完成网页页面切图。授课提要切图与切片切图操作过程从切图到生成网页重点１、切图与切片2、切图操作过程难点１、切图操作过程2、从切图到生成网页教具案例、教材、多媒体作业通过对网页页面切图的学习完成网页页面切图设计。后记课题六PS网页切图具体授课内容：通过本堂课的学习，使学生了解什么是网页切图与切片，掌握网页切图的方法，能够独立完成网页页面切图。知识要点：一、切图与切片1、切图，是一种网页制作技术，他是将美工效果图转换为页面效果图的重要技术。Photoshop、Illistrator、Coreldraw提供了强大的切图工具，Fireworks也提供了切图技术，Flash则直接提供了网页格式输出技术（不需要切图）。2、切片，是切图的直接结果，切图实际上就将图切分为一系列的切片。这些图片通常按照统一的名称进行编码。3、切图的作用使用切片可以有效地减小页面文件的大小，提高浏览者浏览页面的体验。想想看是把一个图片完整下载下来快，还是把一个图片分成若干个小图同时下载快呢？所以，这就是切图的必要性。二