![Dreamweaver CC中文版网页设计与制作从新手到高手](https://wfqqreader-1252317822.image.myqcloud.com/cover/545/27110545/b_27110545.jpg)
3.6 练习:制作全景图像欣赏页面
在Dreamweaver软件中,使用<marquee>标签可以实现元素(图像和文字等)在网页中移动的效果,达到动感十足的视觉效果。通过添加<marquee>标签,并设置其属性可以实现移动效果。本练习通过使用<marquee>标签制作一个360度风景欣赏页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00226.jpg?sign=1739226946-EXcVlp6QknZ5oyWD22ybvHS878wm4UMm-0-dc1b0dd002b60d879e133677f8bd99cf)
练习要点
□<marquee>标签的应用
□<marquee>标签的系列属性
□<div></div>标签布局
操作步骤
STEP|01 设置页面属性。启动Dreamweaver,在欢迎界面中选择HTML选项,创建一个空白页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00227.jpg?sign=1739226946-ZGkbD2B15RM0FzTbEiZVNzWl4WKW4aQz-0-c0ec589c9e477505e2ee4936fcbd7687)
STEP|02 在页面下方的【属性】面板中,单击【页面属性】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00228.jpg?sign=1739226946-yxDLGR1uRCpdIX1euDd9IiilEK911KQ1-0-48756618dd3b48c36829f4b2c01e5b98)
STEP|03 在弹出的【页面属性】对话框中的【外观(CSS)】选项卡中,设置页面文本大小、文本颜色和背景颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00229.jpg?sign=1739226946-7Mfq5rBdtdf81sgJXXdMaBtV2h6JuxoX-0-72639533afc90eb4a7a324775e23109b)
STEP|04 激活左侧的【链接(CSS)】选项卡,设置链接字体的大小和各种链接颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00230.jpg?sign=1739226946-RJ9AjJK2S87QvZP7mokD8nYTq0vJ8rW5-0-f1fc55a21d122cb657943992a8775b72)
STEP|05 切换至【代码】视图,将光标放置在<body></body>之间,插入<div></div>标签,在页面中创建一个层。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00231.jpg?sign=1739226946-d72R6J6x0qCJoNJK2clM6i0DYJ6B3NgZ-0-de0540f656e704ea64672fbe624970b4)
STEP|06 在<div></div>标签之间插入<img>标签并设置图像的高和宽。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00232.jpg?sign=1739226946-oGshSCMAERug8JYUpI9HP6aIa7U8VWta-0-2d09f36d258dce679e4a51fddab6e190)
STEP|07 将光标放置在</div>标签后,插入<div></div>标签,在页面中创建第2个层。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00233.jpg?sign=1739226946-fSzG6WHxR6V3kkZ6hzbfhjR6XZrA1d75-0-3f36d4addea9cbb7a768d31a2a02caed)
STEP|08 在<div></div>标签之间,插入<img>图像标签并设置图像的边框、高和宽,并为各个图像插入超链接代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00234.jpg?sign=1739226946-jEwx6B5Xo6FgThNL8YlOU9hrf8OD59zb-0-ba69e49bf80de13245ed1714bfa72e7d)
STEP|09 在<div>标签中,为该标签定义style属性。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00235.jpg?sign=1739226946-SGf4HQkFxEty9p8RZXFh9mNNJ9IOD1VP-0-835aa628773e87205807a03c3e4506ae)
STEP|10 将光标放置在第2个</div>标签后,插入<div></div>标签,在页面中创建第3个层。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00236.jpg?sign=1739226946-bROfBtxGdL9LJ4pBDPrF9pR3wXD45mUj-0-ef63f883841218c7c9586bf2dd8a0c23)
STEP|11 在该层中输入文本,并为每个文本插入超链接代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00237.jpg?sign=1739226946-QgH8jTycBFnhpvkyK7YKXRVaugqTXQLE-0-990adfb0b4548914bc5ab6b81becbe85)
STEP|12 使用相同的方法,在页面中创建第4个层。并在<div></div>标签中创建一个1行×2列的表格。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00238.jpg?sign=1739226946-nHhvIKp9hYrdoKLdrTalauv0dNhsxXDl-0-a4249dd4f424e5f82bb543b1aab9e734)
STEP|13 然后,在第1行第1列单元格中插入<img>标签及设置该标签的属性,为该单元格插入图像。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00239.jpg?sign=1739226946-Xb7nmhYevz6L1A2jk183DAP2E7P2N8JT-0-2f9b91b408bd92b84bb36f408b1576d8)
STEP|14 在第1行第2列单元格中插入<marquee> </marquee> <img>标签,定义图像滚动的样式。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00240.jpg?sign=1739226946-VIKpbbW1ymRjm86PcjYjq8WKF3cfzyzz-0-fdd0b6549d087535d502e7ccce1e765b)
STEP|15 将光标放置在第4个</div>标签后,插入<div></div>标签,在页面中创建第5个层,并输入版权文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00241.jpg?sign=1739226946-a9vSd78H9O6oBniE0OnA5VTO9C1MWhdT-0-e8a10878c3b923626ea46abfa83c6f33)