网络编辑实务项目七课件

1、网页版面设计 任务一 简介网页设计的常用软件知识目标教学目标能力目标情感目标1.知道网页常用设计软件。2.了解这些软件的基本知识。3.了解网页设计基本知识。学会在网络上寻找并下载软件。 通过新知的学习，提升作为一名网络编辑人员的素能；同时，在学习过程中感受相互协作工作的乐趣。任务一 简介网页设计的常用软件重点教学重难点难点学法学习网页制作基本知识。下载网页制作常用软件。建议采取操作法教法学法教法建议采取小组合作学习法任务一 简介网页设计的常用软件新知学习一、网页的基本元素 一般来说，组成网页的元素有文字、图形、图像、声音、动画、影像、超链接以及交互式处理等。它们的特点如下。任务一 简介网页设计

2、的常用软件新知学习1文字 网页的主体，负责传达信息的功能。在网页制作时，可通过字体、字型、字号和颜色等变化来美化页面格局。2图形 WWW上的图形文件格式主要有JEPG、GIF和PNG三种格式，其中JPEG格式可支持真彩色和灰度的图形，而GIF文件只能储存256色的图片。任务一 简介网页设计的常用软件3动画 动画是动态的图形，添加动画可以使网页更加生动。常用的动画格式包括动态GIF图片和Flash动画，前者是用数张GIF图片合成的简单动画；后者采用矢量绘图技术，生成带有声音效果及交互功能的复杂动画。4声音和视频 声音是多媒体网页中的重要组成部分。在将声音添加到网页之前，首先要对声音文件进行分析和

3、处理，包括用途、格式、文件大小和声音品质等。支持网络的声音文件格式很多，主要有MIDI、WAV、MP3和AIF等。 一般来说，不要使用声音文件作为背景音乐，那样会影响网页的下载速度。可以在网页中添加一个打开声音文件的链接，让音乐变得可以控制。在网页中也可以插入视频文件，视频文件使网页变得精彩生动，网页中支持的视频文件格式主要有Realplay、Mpeg、AVI和DivX等。新知学习任务一 简介网页设计的常用软件新知学习5表格 在网页中使用表格可以控制网页中信息的结构布局，精确定位网页元素在页面中出现的位置，使网页元素整齐美观。6超链接 超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体

4、的重要特点，正是超链接的使用，使互联网变得丰富多彩，可以在文本和图片上设置超链接。7导航栏 导航栏是用户在规划好站点结构，开始设计主页时必须考虑的一项内容。其作用是引导浏览者游历所有站点。实际上，导航栏就是一组超链接，链接的目标就是站点中的主要网页。一般情况下，导航栏应放在网页中引人注目的位置，通常在网页的顶部或者一侧，导航栏可以是文本链接，也可以是一些图标和按钮。任务一 简介网页设计的常用软件新知学习8信息提交表单表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。表单是提供交互功能的基本元素，例如问卷调查、信息查询、用户申请及网上订购等，都需要通过表单进

5、行信息的收集工作。9其他常见元素网页中除了以上几种最基本的元素之外，还有一些其他的常见元素，包括悬停按钮、Java特效和ActiveX等各种特效。这些元素使网页生动有趣，其乐无穷。综上所述，网页设计的技术复杂性比传统媒体要大得多，但总体来说，文本和图形是构成网页的基本元素，因此掌握页面排版和图像处理是非常重要的。任务一 简介网页设计的常用软件新知学习二、网页设计的常用软件介绍1. DreamWeaver自制动态HTML动画的网页2. Flash动画制作软件 3. Firework图像制作软件 4. Microsoft FrontPage 98/2000/2002/2003制作功能强大的网页 5

6、、Netscape编辑器制作简单的网页6Adobe Pagemill 3.0制作多框架、表单和Image Map图像的网页 任务一 简介网页设计的常用软件问题1 作为一个新手，刘天应选择什么软件入手制作网页？温馨提示：Frontpage可能是最简单、最容易，却又功能强大的网页编辑工具。采用典型的 Word 界面设计，只要你懂得使用 Word，就差不多等于已经会使用 Frontpage。就算你不懂 Word 也没关系，所见即所得的操作方式会让你很快上手，而且你无须学习 HTML 语法。任务一 简介网页设计的常用软件问题2 想要成为网页制作高手应作如何努力呢？温馨提示：想成为一个网页制作高手，其最

7、佳的选择应是从DreamWeaver 、Fireworks、Flash软件学习。它们被称为网页制作三剑客，将三个软件配合起来使用，会制作出非常精美的网页任务一 简介网页设计的常用软件问题3 为什么不能完全运用Frontpage软件制作网页？温馨提示：因为Frontpage有其不足之处：首先是浏览器兼容性不好，做出来的网页，用 Netscape 往往不能正常显示；其次，生成的垃圾代码多，也会自动修改代码，导致在某些情况下极为不便；再次，对DHTML的支持不好。但不管怎么说，Frontpage 的确是最好的入门级网页编辑工具。任务一 简介网页设计的常用软件1、请利用网络找寻软件软件的下载页面。2、

8、进行软件firework的下载。3、选择firework启动。任务二 学会网页构图的布局技巧知识目标教学目标能力目标情感目标1.网页布局的基础知识。2.网页布局的方法。3.网页布局的风格。学会网页设计的基本布局方法。 通过新知的学习，提升作为一名网络编辑人员的素能；同时，在学习过程中感受相互协作工作的乐趣。任务二 学会网页构图的布局技巧重点教学重难点难点学法能够合理的对网页进行布局。设计并制作个人网页。建议采取操作法教法建议采取项目制作学习法任务二 学会网页构图的布局技巧新知学习一、网页布局的基础知识 1. 网页布局的基本概念页面尺寸 整体造型 页头 文本 页脚 图片多媒体任务二 学会网页构图

9、的布局技巧新知学习2. 网页布局设计的原则（1）明确内容 网站的内容，包括网站功能和你的用户需要什么。你的整个设计都应该围绕这些方面来进行。（2）抓住用户 如果用户不能够迅速地进入你的网站，或操作不便捷，网站设计就是失败的。不要让用户失望而转向你的对手的网站。（3）优化内容 内容是核心。成功的网站不应是一本广告册子、图片的累积和内容贪乏。（4）快速下载 没有什么比要花很长时间下载页面更槽糕的了。作为一条经验，一个标准的网页应不大于60K，通过56K调制解调器加载花30秒的时间。有的设计者说网页加载应在15秒内。（5）网站升级 时刻注意网站的运行状况。性能很好的主机随着访问人数的增加，可能会运行

10、缓慢。但是，如果你不想失去访问者的话，一定要仔细计划好你的升级计划。任务二 学会网页构图的布局技巧新知学习二、网页布局的方法1. 纸上布局法（1）尺寸选择（2）造型的选择（3）增加页头（4）增加文本（5）增加图片 2. 软件布局法 如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。任务二 学会网页构图的布局技巧新知学习三、网页布局的风格介绍 1.

11、 “国”字形布局 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。 2. “匡”字形布局任务二 学会网页构图的布局技巧新知学习三、网页布局的风格介绍 3. “三”字形布局 这是一种简洁明快的网页布局，在国外用的比较多，国内比较少见。这种布局的特点是在页面上由横向两条色块将网页整体分割为3部分，色块中大多放置广告条与更新和版权提示。任务二 学会网页构图的布局技巧新知学习三、网页

12、布局的风格介绍 4. “川”字形布局 整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。任务二 学会网页构图的布局技巧新知学习三、网页布局的风格介绍 5. 海报型布局 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。任务二 学会网页构图的布局技巧新知学习三、网页布局的风格介绍 6. Flash布局 这种布局是指整个网页就是一个Flash动画，它本身就是动

13、态的，画面一般比较绚丽、有趣，是一种比较新潮的布局方式。其实这种布局与封面型结构是类似的，不同的是由于Flash强大的功能，页面所表达的信息更丰富。其视觉效果及听觉效果如果处理得当，会是一种非常有魅力的布局。任务二 学会网页构图的布局技巧新知学习三、网页布局的风格介绍 7. 标题文本型布局 标题文本型布局是指页面内容以文本为主，这种类型页面最上面往往是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这一类。任务二 学会网页构图的布局技巧新知学习三、网页布局的风格介绍 8. 框架型布局采用框架布局结构，常见的有左右框架型、上下框架型和综合框架型。由于兼容性和美观等因素，这种布局

14、目前专业设计人员采用的已不多，不过在一些大型论坛上还是比较受青睐的，有些企业网站也有应用。 9. 变化型布局即上述几种类型的结合与变化。任务二 学会网页构图的布局技巧问题1 在网页版面布局中主要是考虑哪些方面的布局？温馨提示：在版面布局中主要是考虑导航、必要信息与正文之间的布局关系。比较多的情况是采用顶部放置必要的信息，如公司名称、标志、广告条以及导航条，或将导航条放在左侧而右侧是正文等等，这样的布局结构清晰、易于使用。当然，您也可以尝试这些布局的变化形式，如：左右两栏式布局，一半是正文，另一半是形象的图片、导航；或正文不等两栏式布置，通过背景色区分，分别放置图片和文字等等。在设计中注意多吸取

15、好的网站设计的精髓。任务二 学会网页构图的布局技巧问题2 怎样使点、线、面在网页的整体构成中协调？温馨提示： 人的视觉，都是经过对生活的感觉都得来的。 在下方的东西，一般联想到大地。 在上方的东西，一般联想到浮云。线、面、体亦然。点、线、面的整体构成直辖市方法是：（1） 居中引起视觉集中注意 。 （2） 上引起下跌落感。 （3） 在上左或上右引起不安定感。（4） 下方中点，产生踏实感。（5） 左下右下，增加了动感。 任务二 学会网页构图的布局技巧问题3 怎样在构图中体现“形式美”。温馨提示：一副图，我们怎样才认为它是美的呢？这涉及到形、声、色的有机结合，打动视知 觉，使观者产生美的共鸣。一般来

16、说，有如下几点：（1） 稳定性：我们的视知觉总是试图找一个平衡点，若找不到则产生混乱。（2） 对称性：相应的部位等量，易产于统一的秩序感，但比较单调，可采用增加 局部动势的方法，以取得鲜明、生动的效果。（3） 非对称平衡：可以平衡为基础，调整尺寸形态结构。或者以形态各异的形， 经视觉判断，放置在确定的位置，以得到预想的平衡。（4） 统一性：对同质要素、大小类似、色明度类和不一样的要素需统一，这样不会造成零散、 不统一的感觉。任务二 学会网页构图的布局技巧收集各类不同的网页各一张。2. 设计一张网页构图。任务三 搭配网页颜色的技巧知识目标教学目标能力目标情感目标第一、认识色彩。第二、色彩搭配原则

17、。 第三、网页色彩搭配方法。 第四、色彩的心理表现。能够在网页制作中合理的运用色彩构成原则。 通过新知的学习，提升作为一名网络编辑人员的素能；同时，在学习过程中感受相互协作工作的乐趣。任务三 搭配网页颜色的技巧重点教学重难点难点学法学习如何搭配网页颜色。颜色搭配的心理认知。建议采取操作法教法学法教法建议采取小组合作学习法任务三 搭配网页颜色的技巧新知学习一、认识色彩1. 色彩的三要素（1）明度。（2）色相（3）纯度任务三 搭配网页颜色的技巧新知学习 2. 色彩构成基础（1）间色（2）复色（3）同种色（4）同类色（5）类似色（6）邻近色（7）对比色（8）补色任务三 搭配网页颜色的技巧新知学习二、

18、色彩搭配原则 在选择网页色彩时，除了考虑网站本身的特点外还要遵循一定的艺术规律，从而设计出精美的网页。1色彩的鲜明性2色彩的独特性3色彩的艺术性4色彩搭配的合理性任务三 搭配网页颜色的技巧新知学习三、网页色彩搭配方法 网页配色很重要，网页颜色搭配的是否合理会直接影响到访问者的情绪。好的色彩搭配会给访问者带来很强的视觉冲击力，不恰当的色彩搭配则会让访问者浮躁不安。1同种色彩搭配2邻近色彩搭配3对比色彩搭配4暖色色彩搭配5冷色色彩搭配6有主色的混合色彩搭配7文字与网页的背景色对比要突出任务三 搭配网页颜色的技巧新知学习四、色彩分析1. 各色相的心理分析淡的颜色使人觉得软、暗的颜色使人觉得强硬、暖色

19、有前进感，冷色有后退感、明的颜色给人轻的感觉、暗的颜色给人重的感觉2色彩的象征任务三 搭配网页颜色的技巧问题1 在网页颜色搭配中用一种色彩或两种颜色有什么讲究。温馨提示：1用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，（说得通俗些就是将 色彩变淡或则加深），产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。 2用两种色彩。先选定一种色彩，然后选择它的对比色（在Photoshop 里按ctrl+shift+I）。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。 3用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩

20、的方法各人不同，我是在Photoshop 里按前景色方框，在跳出的拾色器窗中选择自定义，然后在色库中选就可以了：） 4用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。 任务三 搭配网页颜色的技巧问题2 在网页配色中有哪些忌讳？温馨提示：1不要将所有颜色都用到，尽量控制在三到五种色彩以内。 2背景和前文的对比尽量要大，（绝对不要用花纹繁复的图案作背景），以便突出主要文字内容。 任务三 搭配网页颜色的技巧训练1 用photshop绘制色环 训练2 用photshop绘制色彩纯度变化的装饰画秋天。训练3 用photshop绘制色彩明度变化的装饰画童年任务四 了解网页字体的表现风格知识目标教

21、学目标能力目标情感目标1、文字设计的原则。2、文字的组合。 3、网页设计常用字体。 能够在网页制作中合理的运用文字构成原则。 通过新知的学习，提升作为一名网络编辑人员的素能；同时，在学习过程中感受相互协作工作的乐趣。任务四 了解网页字体的表现风格重点教学重难点难点学法学习如何制作和设计字体。合理布局网页中的文字。建议采取操作法教法学法教法建议采取项目合作学习法任务四 了解网页字体的表现风格新知学习 一、文字设计的原则1文字的可读性： 2赋予文字个性： 3. 在视觉上应给人以美感：4 . 在设计上要富于发明性任务四 了解网页字体的表现风格新知学习二、文字的组合1人们的阅读习惯2字体的外形特征3设计基调4注意负空间的运用任务四 了解网页字体的表现风格新知学习1英文字体（1）活泼型：Amosis Technik（2）肃穆型：Hattenschweiler（3）流畅型： Patrician Sample（4）庄重型：SF Quantzite（5）衬托型：SF Quartzite OutLine2中文字体（1）宋体：中文字体（2