![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=1739274386-kNuuaYgDhZne9rbgxcFBbaqDjCeqRgNZ-0-7687d640aaf10c8f42a69f1ef640b1ee)
练习要点
□插入Div
□新建规则
□设置文本格式
□添加链接
□使用<marquee>标签
操作步骤
STEP|01 设置Div标签。启动Dreamweaver,在欢迎界面中选择HTML选项,创建一个空白页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00448.jpg?sign=1739274386-MqJ6Zz96UgDHgBeMq8uD32C6drVC7D1I-0-876ddf72d7635c6e90261042aa389c73)
STEP|02 执行【插入】|Div命令,在弹出的【插入Div】对话框中,将ID设置为box,并单击【新建CSS规则】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00449.jpg?sign=1739274386-rzd8Tjuw3vpjjhNmCq8eadBKWzB4TXJM-0-d6191a7f721ca4ef63224fbaca346e10)
STEP|03 在弹出的【新建CSS规则】对话框中,单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00450.jpg?sign=1739274386-atRpUleWBXBvKUZypBJmnbd0CPKWHA5c-0-fad87cc3fc8050d03a5b04c8c2b86a8d)
STEP|04 在弹出的【#box的CSS规则定义】对话框中,激活【背景】选项卡,单击【background- image】选项后面的【浏览】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00451.jpg?sign=1739274386-gEia2yt4Vh1d9rZ1t37vp1zl9zp1zIQO-0-8a7105a06d47da53530b98f536bd2635)
STEP|05 在弹出的【选择图像源文件】对话框中,选择图像文件,并单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00452.jpg?sign=1739274386-ACh4aZJk2bQJLssGS7Yy79oekaDE1XqD-0-a6683ad228602308846a79c08e2ef1ec)
STEP|06 然后,在【#box的CSS规则定义】对话框中,将background-repeat设置为no-repeat。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00453.jpg?sign=1739274386-19NWcb7HhxrdNUBNZlvDkPz1mpmu8oy4-0-b76c33ce3b3224decbdab3a86be16dbb)
STEP|07 激活【方框】选项卡,在该选项卡中设置各项数值。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00454.jpg?sign=1739274386-Zl2LVRykc56g8xBwvT4JXk5A3ZIkQBMY-0-70e86451bd2792d34767f508c6d9e60f)
STEP|08 激活【类型】选项卡,将font-size设置为12px,并单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00455.jpg?sign=1739274386-mpy1BdEg7Le6uLeCfZJsEBH7vCz9aDuW-0-4b3bd2d25a0a0d75e80907c61b31bbba)
STEP|09 设置滚动文本。在【设计】视图中,删除Div标签文本,输入滚动文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00456.jpg?sign=1739274386-PZEm5XCFzu3Qgb6XNJNwFmwpctdR6dPW-0-874ba84a3686ed0b3825be1f8dee8478)
STEP|10 切换到【代码】视图中,选中第一行文本中的日期文本,单击【属性】面板CSS选项卡中的颜色块,设置文本颜色。使用同样方法,设置其他日期文本的字体颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00457.jpg?sign=1739274386-Ppg77zzn6DyqyuNA7ZKmPwEhdQegljZV-0-c70989bf609db8f3fa53349534ca2aff)
STEP|11 将光标定位在第一行文本的“爱”前面,添加两个空格符号“ ”。使用同样方法,为其他文本添加空格符号。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00458.jpg?sign=1739274386-CZO9Scsh6Y1k8GyuZyDo45G4tVXCNJrL-0-8527b697a735ae0e1429226e567dbbf0)
STEP|12 选择第一行中的文本,在【属性】面板HTML选项卡中的【链接】文本框中输入链接地址,以#代表链接地址。使用同样方法,为其他文本创建链接。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00459.jpg?sign=1739274386-GVNuemJhW1CUU1rcJpHUAgozJ02nuFDo-0-df32723f3896e204acca4f7a2c5f5912)
STEP|13 设置滚动效果。最后,在<div>标签中添加<marquee>标签,并输入显示滚动效果的代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00460.jpg?sign=1739274386-hQqGAMd86vEJJI4I8fMBhHDM2PHYrHe4-0-e0133d2e9f8c87379850231ff569643c)