第11章 更上一层楼——特效、色彩和布局.pptVIP

第11章 更上一层楼——特效、色彩和布局 11.1 任务一：网页添加特殊效果 11.2 任务二：协调才是王道 11.3 设计用色10例 11.4 布局理念 11.5 小结 11.1　任务一：网页添加特殊效果 11.1.1　状态栏中显示文字 经常上网的朋友一定会注意到，许多网站的网页当光标移到超级链接上时，在浏览器的状态栏里会显示链接的简要说明，当光标移到一张图像上时，在状态栏里又会显示图像的简要说明……状态栏成了一个信息提示栏，使有限的空间得到了充分利用。 （1）用鼠标单击选择菜单栏文字“硬件基础”，单击行为面板窗口中的【＋】按钮，从弹出的菜单中选择【设置文本】命令，再选择【设置状态栏文本】命令，如图11-1所示。 11.1　任务一：网页添加特殊效果 （2）弹出【设置状态栏文本】对话框，在消息输入栏中输入要在状态栏中显示的文字，输入“硬件基础”，如图11-2所示。 （3）单击【确定】按钮，在行为面板中单击【事件】项下拉箭头，从中选择【onMouseOver】项，如图11-3所示。 （4）保存文件，进入浏览器中查看效果，当鼠标移动到链接上的时候，发现在网页的下面状态栏中，已经显示了刚刚输入的文字，如图11-4所示。 11.1　任务一：网页添加特殊效果 11.1.2　弹出新窗口 （1）首先制作一个用来弹出的页面，制作这个页面时，需要注意一点，由于本来窗口就很小，所以不要留页边距。 （2）一个页面中可以有很多行为制作出来的效果，我们选择在刚才这个页面上添加效果。 （3）在行为面板中单击【事件】项下拉箭头，如图11-10所示选择onLoad，这表示页面一装载就会弹出一个新的窗口。 11.1　任务一：网页添加特殊效果 11.1.3　弹出消息框 在上网时你一定遇到过这种情况，用鼠标单击某一链接时，弹出一个提示框，告诉你“本栏目正在建设中”。这是怎么做出来的呢？ （1）在菜单项【友情链接】的表格栏中单击一下，再单击行为面板中的【＋】按钮。 （2）在行为面板中确定事件项为onClick，如图11-14所示。 11.1　任务一：网页添加特殊效果 11.1.4　制作立体感的表格 （1）选择表格，单击文档窗口左下角标签栏中的table标签，在弹出的菜单中选择【编辑标签】，如图11-16所示。 （2）在打开的【编辑标签】面板中选择所有的内容，如图11-17所示。 （3）将该标签的内容换为 table bordercolor=#ffffff cellspacing=0 cellpadding=0 width=599 height=414 bordercolorlight=#000000 border=1 align=center 11.1　任务一：网页添加特殊效果 11.1.5　文字特效 1. 光晕字 （1）首先启动Dreamweaver，在新文档中插入一个1×1的表格，边框设置为0，然后在其中输入需要修饰的文字。 （2）单击右面的浮动面板中的【设计】→【CSS样式】命令打开这一浮动面板。 （3）单击【新建CSS样式】按钮，弹出如图11-19所示的对话框。 11.1　任务一：网页添加特殊效果 2. 阴影字 有两种CSS滤镜能够使文字产生阴影效果，分别是Drowshadow和Shadow，它们产生的效果略有不同。 制作阴影字的操作步骤与制作光晕字的过程基本相同，只要在CSS样式中重新选择一种过滤器即可。 3. 遮罩字 CSS滤镜中还提供了遮罩的功能，可以把文字部分处理成遮罩，如果在背景中使用合适的图像，就能产生漂亮的镂空文字效果。 11.1　任务一：网页添加特殊效果 4. 动感字 制作动感字要用到Blur滤镜，作用是产生模糊效果，它的用法格式为Blur(Add=?, Direction=?, Strength=?)。Add参数是一个布尔值，一般来说，当滤镜用于图像的时候取0，用于文字的时候取1；Direction代表模糊方向，单位是角度；Strength代表模糊移动值，单位为像素。 11.2　任务二：协调才是王道 11.2.1　网页的协调 首先，我们来看看3张网页的对比。 图11-27的网页草草的几行字，再插入几个图像。 网页色彩的搭配 无论是平面设计还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，看到的不是优美的版式或者是美丽的图像，而是网页的色彩。 11.2　任务二：协调才是王道 在此仅告诉大家一些网页配色时的小技巧。 （1）用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这样的页面看起来色彩统一，有层次感。 （2）用两种色彩。先选定一种色彩，然后选择它的对比色。 （3）用一个色系。简单地说就是用一个感觉的色彩，如淡蓝、淡黄、淡绿或者土黄、土灰、土蓝。 11.2　任务二：协调才是王道