下载掌阅APP，畅读海量书库
立即打开
下面通过几个经典案例来巩固一下前面所学的知识。
滚动文本可以利用<marqee>标签来创建，而它是IE浏览器的专用标签。在本例中罗列公司的联系信息时，由于各项的顺序并不是很重要，因此采用插入<marqee>标签和无序列表的方法。
最终效果
本例的最终效果如图4-18所示。
图4-18 最终效果
解题思路
1 制作滚动文字。
2 制作列表。
3 浏览器中确认文本效果。
操作步骤
1 打开text.htm文件，单击“拆分”按钮切换到拆分视图，选中页面中的一段文字，如图4-19所示。
2 在这段文字前面输入代码：<marquee directio n="up"height="40''"scrollamount="2">，如图4-20所示。
图4-19 选择页面文字
图4-20 输入代码
3 在这段文字后面输入</marquee>，结束滚动文字标记，如图4-21所示。
4 单击“设计”按钮切换到设计视图。选择文本后，在属性面板中单击“项目列表”按钮，效果如图4-22所示。
5 按下“F12”键，运行浏览器以后，可以看到页面中由下至上的滚动文字效果以及页面中间的无序列表，如图4-23所示。
图4-21 输入代码
图4-22 添加项目列表后的效果
图4-23 滚动文字和无序列表效果
在制作网页的过程中，我们经常会用到文字。文字是网页中非常重要的组成部分。而有时候一些特殊的文字和字符在制作网页的过程中会给我们带来不小的麻烦，下面就向大家介绍在网页中如何巧妙地使用上标和下标。
最终效果
本例的最终效果如图4-24所示。
图4-24 最终效果
解题思路
1 选择需要制作上下标的位置。
2 巧妙地根据文字的效果对上下标进行设置。
操作步骤
1 启动Dreamweaver CS5软件，新建一个普通的HTML网页文件，或者打开一个已经制作好的网页。然后在网页中输入需要的文字（如500，如图4-25所示），并把光标放置在需要插入上标和下标的位置。
2 在“插入”面板的“常用”分类中，单击“标签选择器”按钮，如图4-26所示。
图4-25 新建网页并输入文字
图4-26 “标签选择器”按钮
3 打开的“标签选择器”如图4-27所示。
4 在“标签选择器”中选择“HTML标签”后，在右侧表中选择sup标签，单击“插入”按钮，如图4-28所示。
图4-27 “标签选择器”
图4-28 选择sup标签
5 在“标签编辑器”中输入上标的内容（例如输入2），然后单击“确定”按钮，如图4-29所示。
6 回到设计视图，看一下输入标签后的效果，如图4-30所示。
7 按照输入上标的方法，在“标签选择器”中选择“HTML标签”后，在右侧列表中选择sub标签，然后单击“插入”按钮，如图4-31所示。
图4-29 标签编辑器
图4-30 输入上标的效果
图4-31 标签选择器
8 在“标签编辑器”中输入下标内容（例如输入108），如图4-32所示。
图4-32 在标签编辑器中输入108
9 设置完成后，单击“确定”按钮，回到设计窗口，可以看到最终的效果，如图4-33所示。
10 按下“F12”键，预览调整后的网页效果，如图4-34所示。
图4-33 制作下标的最终效果
图4-34 预览效果
很多时候我们在对文字处理时经常会用到Photoshop等绘图软件，对文字进行处理后，输出为图片的格式，然后插入到制作的网页中。这种方法的确可以美化我们的页面，但同时会带来一个负面影响，那就是图片的增多会增大网页所占空间，影响浏览者浏览网页的速度，下面就向大家介绍一下怎样制作三维文字。
最终效果
本例的最终效果如图4-35所示。
图4-35 最终效果
解题思路
1 在网页中设置文字的位置和大小。
2 建立CSS样式，根据三维文字格式对具体参数进行设置。
3 调整文字颜色或位置。
操作步骤
1 运行Dreamweaver CS5软件，新建一个普通的HTML网页文件。在新文档中插入一个1×1的表格，边框设置为0，如图4-36所示。
2 在建立好的表格中输入需要修饰的文字，这里输入“三维文字”，如图4-37所示。
图4-36 插入一个表格
图4-37 在表格中输入文字
3 在“CSS样式”面板中单击“新建CSS规则”按钮，并进行参数设置，如图4-38所示。
4 设置好上述参数后，单击“确定”按钮，弹出“CSS规则定义”对话框，在“类型”设置区域中可以设置字体、字号、颜色等属性，如图4-39所示。
图4-38 “新建CSS规则”对话框
图4-39 “CSS规则定义”对话框
5 单击“确定”按钮，按照步骤3和步骤4再次新建CSS样式，如图4-40所示。
6 如图4-41所示，选择设置窗口左侧“分类”列表中的“定位”选项，在右侧的“定位”设置区域的“Position”下拉列表中选择“相对”，在“Width”文本框中填入100，在后面的单位下拉列表中选择%，单击“确定”按钮。
图4-40 再次新建一个CSS规则
图4-41 设置CSS规则
7 再次新建CSS规则，如图4-42所示，选择设置窗口左侧“分类”列表中的“扩展”选项，在右侧的“扩展”设置区域的“Fi lter”下拉列表中填入“glow（color=ffffff,strength=1）shadow(color=dedede,direction=100)”。
8 单击“新建CSS规则”按钮，再次新建一个CSS规则，如图4-43所示。
图4-42 设置CSS规则
图4-43 再次新建一个CSS规则
9 设置好上述参数后，单击“确定”按钮，弹出“CSS样式定义”对话框，在“类型”设置区域中可以设置字体、字号、颜色等属性，如图4-44所示。
10 在完成上述几个CSS规则的设置后，在CSS面板中选中每个CSS规则，然后单击鼠标右键，从弹出菜单中选择“套用”命令，把这些CSS样式都应用到所选文字上，如图4-45所示。
图4-44 设置CSS规则的属性
图4-45 设置CSS规则的属性
11 若多个页面都使用该方法，则可以把以上定义的几个样式综合起来，保存为一个CSS样式。即将前面操作中的代码片段“<style>…</style>”另存为一个CSS文件，如另存为3dfont.css。
将这个CSS文件与页面保存在同一目录下，然后使用如下方法调用：
12 按“F12”键，预览最终效果，如图4-46所示。
图4-46 预览效果