1、网页版面设计网页版面设计 任务一任务一 简介网页设计的常用软件简介网页设计的常用软件知识目标知识目标教学目标教学目标能力目标能力目标情感目标情感目标1.知道网页常用设计软件。知道网页常用设计软件。2.了解这些软件的基本知识。了解这些软件的基本知识。3.了解网页设计基本知识。了解网页设计基本知识。学会在网络上寻找并下载软件。学会在网络上寻找并下载软件。通过新知的学习，提升作为一名通过新知的学习，提升作为一名网络编辑人员的素能；同时，在学网络编辑人员的素能；同时，在学习过程中感受相互协作工作的乐趣。习过程中感受相互协作工作的乐趣。任务一任务一 简介网页设计的常用软件简介网页设计的常用软件重点重点教
2、学重难点教学重难点难点难点学法学法学习网页制作基本知识。学习网页制作基本知识。下载网页制作常用软件。下载网页制作常用软件。建议采取操作法建议采取操作法教法学法教法学法教法教法建议采取小组合作学习法建议采取小组合作学习法任务一任务一 简介网页设计的常用软件简介网页设计的常用软件新知学习新知学习一、网页的基本元素一、网页的基本元素 一般来说，组成网页的元素有文字、图形、图像、声音、动画、影像、超链接以及交互式处理等。它们的特点如下。任务一任务一 简介网页设计的常用软件简介网页设计的常用软件新知学习新知学习1文字文字 网页的主体，负责传达信息的功能。在网页制作时，可通过字体、字型、字号和颜色等变化来
3、美化页面格局。2图形图形 WWW上的图形文件格式主要有JEPG、GIF和PNG三种格式，其中JPEG格式可支持真彩色和灰度的图形，而GIF文件只能储存256色的图片。任务一任务一 简介网页设计的常用软件简介网页设计的常用软件3动画动画 动画是动态的图形，添加动画可以使网页更加生动。常用的动画格式包括动态GIF图片和Flash动画，前者是用数张GIF图片合成的简单动画；后者采用矢量绘图技术，生成带有声音效果及交互功能的复杂动画。4声音和视频声音和视频 声音是多媒体网页中的重要组成部分。在将声音添加到网页之前，首先要对声音文件进行分析和处理，包括用途、格式、文件大小和声音品质等。支持网络的声音文件
4、格式很多，主要有MIDI、WAV、MP3和AIF等。一般来说，不要使用声音文件作为背景音乐，那样会影响网页的下载速度。可以在网页中添加一个打开声音文件的链接，让音乐变得可以控制。在网页中也可以插入视频文件，视频文件使网页变得精彩生动，网页中支持的视频文件格式主要有Realplay、Mpeg、AVI和DivX等。新知学习新知学习任务一任务一 简介网页设计的常用软件简介网页设计的常用软件新知学习新知学习5表格 在网页中使用表格可以控制网页中信息的结构布局，精确定位网页元素在页面中出现的位置，使网页元素整齐美观。6超链接 超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点，正是超链
5、接的使用，使互联网变得丰富多彩，可以在文本和图片上设置超链接。7导航栏 导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。其作用是引导浏览者游历所有站点。实际上，导航栏就是一组超链接，链接的目标就是站点中的主要网页。一般情况下，导航栏应放在网页中引人注目的位置，通常在网页的顶部或者一侧，导航栏可以是文本链接，也可以是一些图标和按钮。任务一任务一 简介网页设计的常用软件简介网页设计的常用软件新知学习新知学习8信息提交表单表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。表单是提供交互功能的基本元素，例如问卷调查、信息查询、用户申请及网上订购等，
6、都需要通过表单进行信息的收集工作。9其他常见元素网页中除了以上几种最基本的元素之外，还有一些其他的常见元素，包括悬停按钮、Java特效和ActiveX等各种特效。这些元素使网页生动有趣，其乐无穷。综上所述，网页设计的技术复杂性比传统媒体要大得多，但总体来说，文本和图形是构成网页的基本元素，因此掌握页面排版和图像处理是非常重要的。任务一任务一 简介网页设计的常用软件简介网页设计的常用软件新知学习新知学习二、网页设计的常用软件介绍二、网页设计的常用软件介绍1.DreamWeaver自制动态自制动态HTML动画的网页动画的网页2.Flash动画制作软件动画制作软件 3.Firework图像制作软件图
7、像制作软件 4.Microsoft FrontPage 98/2000/2002/2003制作功能强大的网页制作功能强大的网页 5、Netscape编辑器编辑器制作简单的网页制作简单的网页6Adobe Pagemill 3.0制作多框架、表单和制作多框架、表单和Image Map图像的网页图像的网页 任务一任务一 简介网页设计的常用软件简介网页设计的常用软件问题1 作为一个新手，刘天应选择什么软件入手制作网页？温馨提示：Frontpage可能是最简单、最容易，却又功能强大的网页编辑工具。采用典型的 Word 界面设计，只要你懂得使用 Word，就差不多等于已经会使用 Frontpage。就算你
8、不懂 Word 也没关系，所见即所得的操作方式会让你很快上手，而且你无须学习 HTML 语法。任务一任务一 简介网页设计的常用软件简介网页设计的常用软件问题2 想要成为网页制作高手应作如何努力呢？温馨提示：想成为一个网页制作高手，其最佳的选择应是从DreamWeaver、Fireworks、Flash软件学习。它们被称为网页制作三剑客，将三个软件配合起来使用，会制作出非常精美的网页任务一任务一 简介网页设计的常用软件简介网页设计的常用软件问题3 为什么不能完全运用Frontpage软件制作网页？温馨提示：因为Frontpage有其不足之处：首先是浏览器兼容性不好，做出来的网页，用 Netsca
9、pe 往往不能正常显示；其次，生成的垃圾代码多，也会自动修改代码，导致在某些情况下极为不便；再次，对DHTML的支持不好。但不管怎么说，Frontpage 的确是最好的入门级网页编辑工具。任务一任务一 简介网页设计的常用软件简介网页设计的常用软件1、请利用网络找寻软件软件的下载页面。2、进行软件firework的下载。3、选择firework启动。任务二 学会网页构图的布局技巧知识目标知识目标教学目标教学目标能力目标能力目标情感目标情感目标1.网页布局的基础知识。网页布局的基础知识。2.网页布局的方法。网页布局的方法。3.网页布局的风格。网页布局的风格。学会网页设计的基本布局方法学会网页设计的
10、基本布局方法。通过新知的学习，提升作为一名网络通过新知的学习，提升作为一名网络编辑人员的素能；同时，在学习过程中感受编辑人员的素能；同时，在学习过程中感受相互协作工作的乐趣。相互协作工作的乐趣。任务二 学会网页构图的布局技巧重点重点教学重难点教学重难点难点难点学法学法能够合理的对网页进行布局。能够合理的对网页进行布局。设计并制作个人网页。设计并制作个人网页。建议采取操作法建议采取操作法教法教法建议采取项目制作学习法建议采取项目制作学习法任务二 学会网页构图的布局技巧新知学习新知学习一、网页布局的基础知识一、网页布局的基础知识 1.网页布局的基本概念网页布局的基本概念页面尺寸 整体造型 页头 文
11、本 页脚 图片多媒体任务二 学会网页构图的布局技巧新知学习新知学习2.网页布局设计的原则网页布局设计的原则（1）明确内容 网站的内容，包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。（2）抓住用户 如果用户不能够迅速地进入你的网站，或操作不便捷，网站设计就是失败的。不要让用户失望而转向你的对手的网站。（3）优化内容 内容是核心。成功的网站不应是一本广告册子、图片的累积和内容贪乏。（4）快速下载 没有什么比要花很长时间下载页面更槽糕的了。作为一条经验，一个标准的网页应不大于60K，通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。（5）网站升级 时刻
12、注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行缓慢。但是，如果你不想失去访问者的话，一定要仔细计划好你的升级计划。任务二 学会网页构图的布局技巧新知学习新知学习二、网页布局的方法二、网页布局的方法1.纸上布局法纸上布局法（1）尺寸选择（2）造型的选择（3）增加页头（4）增加文本（5）增加图片 2.软件布局法软件布局法 如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用
13、层的功能设计出用纸张无法实现的布局意念。任务二 学会网页构图的布局技巧新知学习新知学习三、网页布局的风格介绍三、网页布局的风格介绍 1.“国国”字形布局字形布局 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。2.“匡匡”字形布局字形布局任务二 学会网页构图的布局技巧新知学习新知学习三、网页布局的风格介绍三、网页布局的风格介绍 3.“三三”字形布局字形布局 这是一种简洁明快的
14、网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。任务二 学会网页构图的布局技巧新知学习新知学习三、网页布局的风格介绍三、网页布局的风格介绍 4.“川川”字形布局字形布局 整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。任务二 学会网页构图的布局技巧新知学习新知学习三、网页布局的风格介绍三、网页布局的风格介绍 5.海报型布局海报型布局 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚
15、至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。任务二 学会网页构图的布局技巧新知学习新知学习三、网页布局的风格介绍三、网页布局的风格介绍 6.Flash布局布局 这种布局是指整个网页就是一个Flash动画，它本身就是动态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。任务二 学会网页构图的布局技巧新知学习新知学习三、网页布局的风格介绍三、网页布局的风格介绍 7.
16、标题文本型布局标题文本型布局 标题文本型布局是指页面内容以文本为主，这种类型页面最上面往往是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这一类。任务二 学会网页构图的布局技巧新知学习新知学习三、网页布局的风格介绍三、网页布局的风格介绍 8.框架型布局框架型布局采用框架布局结构，常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局目前专业设计人员采用的已不多，不过在一些大型论坛上还是比较受青睐的，有些企业网站也有应用。9.变化型布局变化型布局即上述几种类型的结合与变化。任务二 学会网页构图的布局技巧问题问题1 在网页版面布局中主要是考虑哪些方面的布局
17、？温馨提示：温馨提示：在版面布局中主要是考虑导航、必要信息与正文之间的布局关系。比较多的情况是采用顶部放置必要的信息，如公司名称、标志、广告条以及导航条，或将导航条放在左侧而右侧是正文等等，这样的布局结构清晰、易于使用。当然，您也可以尝试这些布局的变化形式，如：左右两栏式布局，一半是正文，另一半是形象的图片、导航；或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等等。在设计中注意多吸取好的网站设计的精髓。任务二 学会网页构图的布局技巧 问题问题22 怎样使点、线、面在网页的整体构成中协调？温馨提示：温馨提示：人的视觉，都是经过对生活的感觉都得来的。在下方的东西，一般联想到大地。在上方的
18、东西，一般联想到浮云。线、面、体亦然。点、线、面的整体构成直辖市方法是：（1）居中引起视觉集中注意。（2）上引起下跌落感。（3）在上左或上右引起不安定感。（4）下方中点，产生踏实感。（5）左下右下，增加了动感。任务二 学会网页构图的布局技巧 问题问题33 怎样在构图中体现“形式美”。温馨提示：温馨提示：一副图，我们怎样才认为它是美的呢？这涉及到形、声、色的有机结合，打动视知 觉，使观者产生美的共鸣。一般来说，有如下几点：（1）稳定性：我们的视知觉总是试图找一个平衡点，若找不到则产生混乱。（2）对称性：相应的部位等量，易产于统一的秩序感，但比较单调，可采用增加 局部动势的方法，以取得鲜明、生动的
19、效果。（3）非对称平衡：可以平衡为基础，调整尺寸形态结构。或者以形态各异的形，经视觉判断，放置在确定的位置，以得到预想的平衡。（4）统一性：对同质要素、大小类似、色明度类和不一样的要素需统一，这样不会造成零散、不统一的感觉。任务二 学会网页构图的布局技巧1.收集各类不同的网页各一张。2.设计一张网页构图。任务三任务三 搭配网页颜色的技巧搭配网页颜色的技巧知识目标知识目标教学目标教学目标能力目标能力目标情感目标情感目标第一、认识色彩。第一、认识色彩。第二、色彩搭配原则。第二、色彩搭配原则。第三、网页色彩搭配方法。第三、网页色彩搭配方法。第四、色彩的心理表现。第四、色彩的心理表现。能够在网页制作中
20、合理的运用色彩构成原则。能够在网页制作中合理的运用色彩构成原则。通过新知的学习，提升作为一名网络通过新知的学习，提升作为一名网络编辑人员的素能；同时，在学习过程中感受编辑人员的素能；同时，在学习过程中感受相互协作工作的乐趣。相互协作工作的乐趣。任务三任务三 搭配网页颜色的技巧搭配网页颜色的技巧重点重点教学重难点教学重难点难点难点学法学法学习如何搭配网页颜色。学习如何搭配网页颜色。颜色搭配的心理认知。颜色搭配的心理认知。建议采取操作法建议采取操作法教法学法教法学法教法教法建议采取小组合作学习法建议采取小组合作学习法任务三任务三 搭配网页颜色的技巧搭配网页颜色的技巧新知学习新知学习一、认识色彩一、
21、认识色彩1.色彩的三要素色彩的三要素（1）明度。（2）色相（3）纯度任务三任务三 搭配网页颜色的技巧搭配网页颜色的技巧新知学习新知学习 2.色彩构成基础（1）间色（2）复色（3）同种色（4）同类色（5）类似色（6）邻近色（7）对比色（8）补色任务三任务三 搭配网页颜色的技巧搭配网页颜色的技巧新知学习新知学习二、色彩搭配原则二、色彩搭配原则 在选择网页色彩时，除了考虑网站本身的特点外还要遵循一定的艺术规律，从而设计出精美的网页。1色彩的鲜明性色彩的鲜明性2色彩的独特性色彩的独特性3色彩的艺术性色彩的艺术性4色彩搭配的合理性色彩搭配的合理性任务三任务三 搭配网页颜色的技巧搭配网页颜色的技巧新知学习
22、新知学习三、网页色彩搭配方法三、网页色彩搭配方法 网页配色很重要，网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配则会让访问者浮躁不安。1同种色彩搭配同种色彩搭配2邻近色彩搭配邻近色彩搭配3对比色彩搭配对比色彩搭配4暖色色彩搭配暖色色彩搭配5冷色色彩搭配冷色色彩搭配6有主色的混合色彩搭配有主色的混合色彩搭配7文字与网页的背景色对比要突出文字与网页的背景色对比要突出任务三任务三 搭配网页颜色的技巧搭配网页颜色的技巧新知学习新知学习四、色彩分析四、色彩分析1.各色相的心理分析各色相的心理分析淡的颜色使人觉得软、暗的颜色使人觉得强硬、暖色有
23、前进感，冷色有后退感、明的颜色给人轻的感觉、暗的颜色给人重的感觉2色彩的象征色彩的象征任务三任务三 搭配网页颜色的技巧搭配网页颜色的技巧问题问题1 在网页颜色搭配中用一种色彩或两种颜色有什么讲究。温馨提示：温馨提示：1用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，（说得通俗些就是将 色彩变淡或则加深），产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。2用两种色彩。先选定一种色彩，然后选择它的对比色（在Photoshop 里按ctrl+shift+I）。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。3用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，
24、淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在Photoshop 里按前景色方框，在跳出的拾色器窗中选择自定义，然后在色库中选就可以了：）4用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。任务三任务三 搭配网页颜色的技巧搭配网页颜色的技巧问题问题2 在网页配色中有哪些忌讳？温馨提示：温馨提示：1不要将所有颜色都用到，尽量控制在三到五种色彩以内。2背景和前文的对比尽量要大，（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。任务三任务三 搭配网页颜色的技巧搭配网页颜色的技巧训练训练1 用photshop绘制色环 训练训练2 用photshop绘制色彩纯度变化的装
25、饰画秋天。训练训练3 用photshop绘制色彩明度变化的装饰画童年任务四任务四 了解网页字体的表现风格了解网页字体的表现风格知识目标知识目标教学目标教学目标能力目标能力目标情感目标情感目标1 1、文字设计的原则。、文字设计的原则。2 2、文字的组合。、文字的组合。3 3、网页设计常用字体。、网页设计常用字体。能够在网页制作中合理的运用文字构成原则。能够在网页制作中合理的运用文字构成原则。通过新知的学习，提升作为一名网络通过新知的学习，提升作为一名网络编辑人员的素能；同时，在学习过程中感受编辑人员的素能；同时，在学习过程中感受相互协作工作的乐趣。相互协作工作的乐趣。任务四任务四 了解网页字体的
26、表现风格了解网页字体的表现风格重点重点教学重难点教学重难点难点难点学法学法学习如何制作和设计字体。学习如何制作和设计字体。合理布局网页中的文字。合理布局网页中的文字。建议采取操作法建议采取操作法教法学法教法学法教法教法建议采取项目合作学习法建议采取项目合作学习法任务四任务四 了解网页字体的表现风格了解网页字体的表现风格新知学习新知学习 一、文字设计的原则一、文字设计的原则1文字的可读性：文字的可读性：2赋予文字个性：赋予文字个性：3.在视觉上应给人以美感：在视觉上应给人以美感：4.在设计上要富于发明性在设计上要富于发明性任务四任务四 了解网页字体的表现风格了解网页字体的表现风格新知学习新知学习
27、二、文字的组合二、文字的组合1人们的阅读习惯2字体的外形特征3设计基调4注意负空间的运用任务四任务四 了解网页字体的表现风格了解网页字体的表现风格新知学习新知学习1英文字体英文字体（1）活泼型：Amosis Technik（2）肃穆型：Hattenschweiler（3）流畅型：Patrician Sample（4）庄重型：SF Quantzite（5）衬托型：SF Quartzite OutLine2中文字体中文字体（1）宋体：中文字体（2）黑体：中文字体（3）仿宋：中文字体（4）楷书：中文字体（5）华文新魏：中文字体（6）方正姚体：中文字体（7）华文隶书：中文字体（8）幼圆：中文字体（9）
28、华文行楷：中文字体（10）华文琥珀：中文字体（11）华文彩云：中文字体任务四任务四 了解网页字体的表现风格了解网页字体的表现风格问题问题1 网页英文字体中衬线体和非衬线体有何区别？温馨提示：温馨提示：1.衬线体(Serif)就是笔画边缘的装饰部分。2.非衬线体/无衬线体(Sans-serif)就是指不带衬线的部分任务四任务四 了解网页字体的表现风格了解网页字体的表现风格 问题问题2 刘天在上网过程中发现，在网页中很少看到“斜体”字型，这是为什么呢？温馨提示：温馨提示：网页中常见的字体的样式分为：正常Normal、粗体Bold和斜体Italic。简单来说，粗体就是字体会更加黑，更加“粗”。斜体就
29、是将字轴微微倾斜。他们都是用于在篇幅内强调某段文字上。对于中文斜体，一般在网络上是不使用的。因为中文笔画繁多，使用了斜体将难以辨认。任务四任务四 了解网页字体的表现风格了解网页字体的表现风格问题问题3 刘天在网页中输入英文时，常常发现由于英文单词大小不一，造成其间隔不均匀，使版面看起来不整齐美观。他需要怎样解决这类问题呢？温馨提示：温馨提示：这是由于字间距造成的。字距调整是一种因视觉需要而做的技术处理。简单说，在两个特定的字符连排的时候，你可以为它们单独指定与众不同的字间距。比如当一个大写A后面跟随一个小写 v的时候，两个字符间就会出现视觉上的更大的间距(实际上字间距是一样的)，这是普通的字符间距所无法解决的。如果减少它们的间距，那么其他的字母就会连 成一团。这时候就需要字距调整来处理了。任务四任务四 了解网页字体的表现风格了解网页字体的表现风格1用平面设计软件设计网站标题（中英文皆可）。2确定网页草稿。3制作静态网页。
