![Dreamweaver CC中文版网页设计与制作从新手到高手](https://wfqqreader-1252317822.image.myqcloud.com/cover/545/27110545/b_27110545.jpg)
5.6 练习:制作滚动文本
在Dreamweaver中,除了可以制作简单的静态文本之外,还可以使用CSS样式和<marquee>标签实现字幕滚动效果,从而增加页面的生动性。在本练习中,将通过制作一个网站公告文本的滚动效果,来详细介绍制作滚动文本的操作方法。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00447.jpg?sign=1738885642-2lyjomhPMk5qu9121y3uXfUFoiDCBOiX-0-71c0e7918f858a343a0b2b869cbdb6de)
练习要点
□插入Div
□新建规则
□设置文本格式
□添加链接
□使用<marquee>标签
操作步骤
STEP|01 设置Div标签。启动Dreamweaver,在欢迎界面中选择HTML选项,创建一个空白页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00448.jpg?sign=1738885642-O9LMe0i95JsUjmCmd9VKbHrNpvgrhGFk-0-6ab8bfb4f31c3b45beae5b4a8350e10a)
STEP|02 执行【插入】|Div命令,在弹出的【插入Div】对话框中,将ID设置为box,并单击【新建CSS规则】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00449.jpg?sign=1738885642-J60ML7Hv86m3nClguVInUVMsd0ZXai5l-0-204dd19a129ca7444fe372d66a99cabf)
STEP|03 在弹出的【新建CSS规则】对话框中,单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00450.jpg?sign=1738885642-x1bJjNgj3EVvoDYNC5EGmapv4r07N30q-0-82f8fdb7f1db61963234f5d56c0b1596)
STEP|04 在弹出的【#box的CSS规则定义】对话框中,激活【背景】选项卡,单击【background- image】选项后面的【浏览】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00451.jpg?sign=1738885642-E4tCRUEip57CikjN4A1olrLbp5hNmOOd-0-6474b8d906403a7d8ce8b800df8d2db8)
STEP|05 在弹出的【选择图像源文件】对话框中,选择图像文件,并单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00452.jpg?sign=1738885642-1Z1nOG7XWefqfDpPLPudllCognixt6oE-0-8cbbc6f8a2c52ae42a663a05ad0a6775)
STEP|06 然后,在【#box的CSS规则定义】对话框中,将background-repeat设置为no-repeat。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00453.jpg?sign=1738885642-WNXBzlzOZa6kCaaHca5BRQLdcJUfcqrK-0-fa77276fd029d40ec2a21a0ce7c1dff4)
STEP|07 激活【方框】选项卡,在该选项卡中设置各项数值。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00454.jpg?sign=1738885642-IGrbJLu3BHyGMmSpFkeRAGcaKWQrlNPA-0-026b117ffdc9430201c64f6b9778303e)
STEP|08 激活【类型】选项卡,将font-size设置为12px,并单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00455.jpg?sign=1738885642-oJ9uQSQEzC08wk3fvBBIbUr0EB5OmSmv-0-18b4a210ecac27c3de3e1b5c8f61860a)
STEP|09 设置滚动文本。在【设计】视图中,删除Div标签文本,输入滚动文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00456.jpg?sign=1738885642-hKs8SXL5F8hjzkqZhXGmCIuwce0Ehkv5-0-f20154850f6ee92a9e73816b1b010c36)
STEP|10 切换到【代码】视图中,选中第一行文本中的日期文本,单击【属性】面板CSS选项卡中的颜色块,设置文本颜色。使用同样方法,设置其他日期文本的字体颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00457.jpg?sign=1738885642-hSTpk3sTnClrCE8Pzd43rmxa7RDINlhY-0-15b2f24dfaa6f5af85d4fbf784c56fc7)
STEP|11 将光标定位在第一行文本的“爱”前面,添加两个空格符号“ ”。使用同样方法,为其他文本添加空格符号。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00458.jpg?sign=1738885642-blqQzFTKFZeleqPu6XXbTDMmZxqrRcEa-0-c6a9e5f2e51482203d42dd27729afb9b)
STEP|12 选择第一行中的文本,在【属性】面板HTML选项卡中的【链接】文本框中输入链接地址,以#代表链接地址。使用同样方法,为其他文本创建链接。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00459.jpg?sign=1738885642-vUkJ77lImuJ7lIkFIlXnDpd0BByHylAL-0-2f456ae92ca99d15788db7f9471f5dec)
STEP|13 设置滚动效果。最后,在<div>标签中添加<marquee>标签,并输入显示滚动效果的代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00460.jpg?sign=1738885642-WkJ42Sf2SHwELp0g9pbHSGiKyM5I6eVJ-0-0b441dc84673abde835d4ed8834444ef)