《互联网应用中级标准教程教学课件作者邓劲生第十一章》由会员分享，可在线阅读，更多相关《互联网应用中级标准教程教学课件作者邓劲生第十一章（54页珍藏版）》请在金锄头文库上搜索。
1、第11章 更上一层楼特效、 色彩和布局,11.1 任务一：网页添加特殊效果 11.2 任务二：协调才是王道 11.3 设计用色10例 11.4 布局理念 11.5 小结,11.1 任务一：网页添加特殊效果,11.1.1 状态栏中显示文字 经常上网的朋友一定会注意到，许多网站的网页当光标移到超级链接上时，在浏览器的状态栏里会显示链接的简要说明，当光标移到一张图像上时，在状态栏里又会显示图像的简要说明状态栏成了一个信息提示栏，使有限的空间得到了充分利用。 （1）用鼠标单击选择菜单栏文字“硬件基础”，单击行为面板窗口中的【】按钮，从弹出的菜单中选择【设置文本】命令，再选择【设置状态栏文本】命令，如图
2、11-1所示。,下一页,11.1 任务一：网页添加特殊效果,（2）弹出【设置状态栏文本】对话框，在消息输入栏中输入要在状态栏中显示的文字，输入“硬件基础”，如图11-2所示。 （3）单击【确定】按钮，在行为面板中单击【事件】项下拉箭头，从中选择【onMouseOver】项，如图11-3所示。 （4）保存文件，进入浏览器中查看效果，当鼠标移动到链接上的时候，发现在网页的下面状态栏中，已经显示了刚刚输入的文字，如图11-4所示。,下一页,上一页,11.1 任务一：网页添加特殊效果,11.1.2 弹出新窗口 （1）首先制作一个用来弹出的页面，制作这个页面时，需要注意一点，由于本来窗口就很小，所以不要
3、留页边距。 （2）一个页面中可以有很多行为制作出来的效果，我们选择在刚才这个页面上添加效果。 （3）在行为面板中单击【事件】项下拉箭头，如图11-10所示选择onLoad，这表示页面一装载就会弹出一个新的窗口。,下一页,上一页,11.1 任务一：网页添加特殊效果,11.1.3 弹出消息框 在上网时你一定遇到过这种情况，用鼠标单击某一链接时，弹出一个提示框，告诉你“本栏目正在建设中”。这是怎么做出来的呢？ （1）在菜单项【友情链接】的表格栏中单击一下，再单击行为面板中的【】按钮。 （2）在行为面板中确定事件项为onClick，如图11-14所示。,下一页,上一页,11.1 任务一：网页添加特殊效
4、果,11.1.4 制作立体感的表格 （1）选择表格，单击文档窗口左下角标签栏中的标签，在弹出的菜单中选择【编辑标签】，如图11-16所示。 （2）在打开的【编辑标签】面板中选择所有的内容，如图11-17所示。 （3）将该标签的内容换为 ,下一页,上一页,11.1 任务一：网页添加特殊效果,11.1.5 文字特效 1. 光晕字 （1）首先启动Dreamweaver，在新文档中插入一个11的表格，边框设置为0，然后在其中输入需要修饰的文字。 （2）单击右面的浮动面板中的【设计】【CSS样式】命令打开这一浮动面板。 （3）单击【新建CSS样式】按钮，弹出如图11-19所示的对话框。,下一页,上一页,
5、11.1 任务一：网页添加特殊效果,2. 阴影字 有两种CSS滤镜能够使文字产生阴影效果，分别是Drowshadow和Shadow，它们产生的效果略有不同。 制作阴影字的操作步骤与制作光晕字的过程基本相同，只要在CSS样式中重新选择一种过滤器即可。 3. 遮罩字 CSS滤镜中还提供了遮罩的功能，可以把文字部分处理成遮罩，如果在背景中使用合适的图像，就能产生漂亮的镂空文字效果。,下一页,上一页,11.1 任务一：网页添加特殊效果,4. 动感字 制作动感字要用到Blur滤镜，作用是产生模糊效果，它的用法格式为Blur(Add=?, Direction=?, Strength=?)。Add参数是一个
6、布尔值，一般来说，当滤镜用于图像的时候取0，用于文字的时候取1；Direction代表模糊方向，单位是角度；Strength代表模糊移动值，单位为像素。,返 回,上一页,11.2 任务二：协调才是王道,11.2.1 网页的协调 首先，我们来看看3张网页的对比。 图11-27的网页草草的几行字，再插入几个图像。 网页色彩的搭配 无论是平面设计还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，看到的不是优美的版式或者是美丽的图像，而是网页的色彩。,下一页,11.2 任务二：协调才是王道,在此仅告诉大家一些网页配色时的小技巧。 （1）用一种色彩。这里是指先选定一种色彩，然后调整透明度
7、或者饱和度，这样的页面看起来色彩统一，有层次感。 （2）用两种色彩。先选定一种色彩，然后选择它的对比色。 （3）用一个色系。简单地说就是用一个感觉的色彩，如淡蓝、淡黄、淡绿或者土黄、土灰、土蓝。,下一页,上一页,11.2 任务二：协调才是王道,在网页配色中，还要避免一些误区，记住以下几点。 （1）不要将所有颜色都用到，尽量控制在35种色彩以内。 （2）背景和前文的对比尽量要大（绝对不要用花纹繁复的图案作为背景），以便突出主要文字内容。 在网页设计中出现的问题多表现为如下几种特征。 （1）颜色过多而没有主色调的统一。,下一页,上一页,11.2 任务二：协调才是王道,（2）链接的颜色变化过多，让人
8、看上去琳琅满目，简直无从下手。 （3）色彩明度和纯度大起大落，没有把握好节奏。色彩明度和纯度常常需要大家花很多时间和精力去调整。 （4）主次不分。作品在设计之前，要先问自己一些问题。,下一页,上一页,11.2 任务二：协调才是王道,11.2.2 颜色的协调 颜色的使用在网页制作中起着非常关键的作用，有很多网站以其成功的色彩搭配令人过目不忘。 1. 网页颜色原理和象征意义 所有网页上的颜色在HTML下看到的都是颜色英文单词或者十六进制的表示方法（如#000000表示黑色）。不同的颜色有着不同的含义，给人们各种各样的感觉和联想。,下一页,上一页,11.2 任务二：协调才是王道,2. 网页颜色的使用
9、风格 不同的网站有着自己的风格，也有着自己的颜色。网站使用颜色大致分为以下几种类型。 （1）公司色 在现在企业中，公司的CI（标志、色彩、字体、标语）形象显得尤其重要，每一个公司的CI设计必然有标准的颜色。 （2）风格色 许多网站使用的颜色秉承公司的风格。,下一页,上一页,11.2 任务二：协调才是王道,（3）习惯色 这些网站的颜色使用主要取决于自己的个人爱好，以个人网站居多，比如自己喜欢绿色、紫色、黑色等，在制作网站的时候就倾向于这种颜色。 3. 色彩搭配要注意的问题 （1）使用单色。 （2）使用邻近色。,下一页,上一页,11.2 任务二：协调才是王道,（3）使用对比色。对比色可以突出重点，
10、产生强烈的视觉效果，通过合理使用对比色能够使网站特色鲜明、重点突出。 （4）黑色的使用。黑色是一种特殊的颜色，如果使用恰当、设计合理，往往产生很强烈的艺术效果。 （5）背景色的使用。 （6）色彩的数量。初学者在设计网页时往往使用多种颜色，使网页变得很“花”，缺乏统一和协调，表面上看起来很“花”，但缺乏内在的美感。,返 回,上一页,11.3 设计用色10例,（1）图11-33是个大型的游戏网站。通常看到的此类网站以白色为背景，但是这个网站却用灰黑色RGB为（48，48，48/#333333）（以下颜色都用RGB表示），文章标题用色为RGB（203，201，153/#CCCC99），菜单使用的RG
11、B为（112，119，112/#707770）。 这样的配色可以显示独特的个性，又不失大型网站的风采。,下一页,11.3 设计用色10例,（2）图11-34是一个娱乐类的综合性网站UGO，其配色方案是背景色为RGB（0，0，0）中嵌套RGB（0，0，82），字体为RGB（33，185，192），菜单为RGB（80，80，80）。这样，虽以黑蓝为主色调，但是配以漂亮的图像，给人的感觉是生机盎然，充满了互动色彩和青春气息。 （3）图11-35所示的这个网站是大名鼎鼎的微软公司网站，微软不仅软件做得好，联网页制作也是世界一流。每一个网页都是制作的样板。,下一页,上一页,11.3 设计用色10例,（4
12、）现在介绍的这个网站相对简单，但其用色也别具匠心，现在我们来看一看，整体上使用的是白色RGB（255，255，255），菜单色为RGB（48，64，64）和RGB（0，81，111），字体使用的是RGB（83，86，91）。虽然简单，但颜色搭配得非常科学合理，如图11-36所示。 （5）图11-37所示的网站以黄色调为主，很体现公司的个性，现在我们就来看一看其颜色搭配。,下一页,上一页,11.3 设计用色10例,（6）橘红色如果运用得当的话，是一种非常适用于网页上的颜色。图11-38所示的这个网站就是一个非常著名的例子。其主色调为RGB（255，151，0）辅助色调为RGB（255，103，4
13、），菜单RGB为（252，200，0）。字体使用黑色，RGB为（0，0，0）。此种配色显得主人较为前卫，色彩热烈，给人的震慑力较强。 （7）鲜红色也是一种震撼感很强的颜色，如果搭配不当，也可能使网站没有风格和特点。图11-39所示的这个网站就是使用红色比较好的网站。,下一页,上一页,11.3 设计用色10例,（8）下面介绍的这种色调是制作网页的时候不会经常用到的颜色，如果使用到你的网页中，肯定会给人耳目一新的感觉。 （9）下面的设计更加简单化，但是颜色的使用使网页并不呆板，反而让人感觉到一股浓浓的诗意，使人置身于美丽和爱中。 （10）下面举出这个例子是想证明一个道理只要有足够的想象力，你就能够
14、设计出漂亮的网页。,返 回,上一页,11.4 布局理念,1. 确定网站的整体风格 网站的整体风格及其创意设计是最难以学习的。难就难在没有一个固定的模式可以参照和模仿。针对同一个主题，任何两个人都不可能设计出完全一样的网站。 2. 网站的平衡 如果你的页面是平衡的，当用户浏览这个页面的时候就会感觉它们是一个整体，看的时候目光的跳转也会很自然。,下一页,11.4 布局理念,（1）对称平衡。对称是最常见、最自然的平衡手段，这种方式通常用来设计比较正式的页面，不过这还需要和下面介绍的多种方式结合起来使用。 （2）非对称平衡。非对称其实并不是真正的“不对称”，而是一种层次更高的“对称”，如果把握不好，页
15、面就会显得乱。 （3）辐射平衡。页面中的元素以某一个点为中心展开就可以构成辐射平衡。,下一页,上一页,11.4 布局理念,3. 网页布局类型 网页布局大致可分为国字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。 （1）国字型。 （2）拐角型。 （3）标题正文型。 （4）左右框架型。 （5）上下框架型。,下一页,上一页,11.4 布局理念,（6）综合框架型。 （7）封面型。 （8）Flash型。 （9）变化型。 4. 排版空间划分 首先从网站内容上来进行排版。 网页上真正好的文本排布是这样的：一般放在最显著的地方，如整个显示的中央稍微偏右下；文本的排布
16、整体性好，使浏览起来通畅而丝毫没有阻碍，理解内容更加容易。,下一页,上一页,11.4 布局理念,总结一下有以下几种布局方式。 （1）上边和左边相结合，这是最常用的一种方式，上面是页面的题头和广告条，左边是按钮和其他链接，如图11-48所示。 （2）上边和下边的结合，如图11-49所示。 （3）上、左、下边相结合，如图11-50所示。 （4）上下左右形成一种包围的形式，如图11-51所示。,下一页,上一页,11.4 布局理念,5. 第一屏 所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。 6. 导航栏的位置 导航栏能让我们在浏览时容易地达到不同的页面，是网页元素非常重要的部分，所以导航栏一定要清晰、醒目，如图11-53所示。 7. 什么样的布局是最好的 这是初学者可能会问的问题，其实这需要具体情况具体分析。,下一页,上一页,11.4 布局理念,8. 网站建设误区 （1）不进行用户测试。 （2）导航混乱。 （3）滚动的文本、循环播放的GIF及Flash的滥用。 （4）网页艺术形式杂乱，为了设计而设计，JAVA及J
