- Dreamweaver CC中文版网页设计与制作从新手到高手
- 吴东伟
- 635字
- 2021-03-19 19:00:27
3.6 练习:制作全景图像欣赏页面
在Dreamweaver软件中,使用<marquee>标签可以实现元素(图像和文字等)在网页中移动的效果,达到动感十足的视觉效果。通过添加<marquee>标签,并设置其属性可以实现移动效果。本练习通过使用<marquee>标签制作一个360度风景欣赏页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00226.jpg?sign=1739528857-wbzoo3m0VfWT5GmsOKGsTdYTzhONqsIo-0-7044bbda5171cef63771fe43199a65ad)
练习要点
□<marquee>标签的应用
□<marquee>标签的系列属性
□<div></div>标签布局
操作步骤
STEP|01 设置页面属性。启动Dreamweaver,在欢迎界面中选择HTML选项,创建一个空白页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00227.jpg?sign=1739528857-FEoTfRUgBt3lW3INECFMIOuzzkmvBToL-0-ad078195ded460b9eb575ba7967e71ef)
STEP|02 在页面下方的【属性】面板中,单击【页面属性】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00228.jpg?sign=1739528857-Azirm1cf5Q6GWpg2ySmyZzdPKBOim1J3-0-0060d7647397934bcc67f4cc1f8f15b8)
STEP|03 在弹出的【页面属性】对话框中的【外观(CSS)】选项卡中,设置页面文本大小、文本颜色和背景颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00229.jpg?sign=1739528857-RAr6kQRWdEjoYKje4aHszGVXB3c2eTAQ-0-408865a1a2d18c0cb4263189d27dc657)
STEP|04 激活左侧的【链接(CSS)】选项卡,设置链接字体的大小和各种链接颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00230.jpg?sign=1739528857-8gPEiFtwB6CSulfMp92SKThd6GgQIeDq-0-f0181c52281fe1cdef13b4aee2d5175e)
STEP|05 切换至【代码】视图,将光标放置在<body></body>之间,插入<div></div>标签,在页面中创建一个层。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00231.jpg?sign=1739528857-NPbgqtU3AYT2mcCbfr7OC7aUToWLvXUx-0-7da2139bebb594832c77e1315dfd0ea6)
STEP|06 在<div></div>标签之间插入<img>标签并设置图像的高和宽。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00232.jpg?sign=1739528857-QkOTQ6xYX5IK0vwY3u4EyhOlTFder3uv-0-de4c81bf946b569b50a67e90fead8356)
STEP|07 将光标放置在</div>标签后,插入<div></div>标签,在页面中创建第2个层。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00233.jpg?sign=1739528857-lof6OFkglUOjssbnboobi4tkYVIRLk5e-0-4ba95c74c4dae0ae2774f63a19d27830)
STEP|08 在<div></div>标签之间,插入<img>图像标签并设置图像的边框、高和宽,并为各个图像插入超链接代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00234.jpg?sign=1739528857-wAksHdLA5OCUZW3TBCT0XZZmGvI3g1re-0-948f62ba489ec79953dbfc717b22e43b)
STEP|09 在<div>标签中,为该标签定义style属性。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00235.jpg?sign=1739528857-3kgXjN2eL7Rt5kLk9STgyEVr6rOr7PTk-0-8a549e9e219bdd3ed3389cef7f1bb27f)
STEP|10 将光标放置在第2个</div>标签后,插入<div></div>标签,在页面中创建第3个层。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00236.jpg?sign=1739528857-nFh7pS0v4HLNWnmm3DRZOkJZCYIiDxer-0-6e497d9ce7c33fdcf8bf5614ed46eb1d)
STEP|11 在该层中输入文本,并为每个文本插入超链接代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00237.jpg?sign=1739528857-IGP2BC3u6yNpgaBcyD31Rtd21FnR4tlM-0-c2a895c223d0b2965c15f5c1ac8112ed)
STEP|12 使用相同的方法,在页面中创建第4个层。并在<div></div>标签中创建一个1行×2列的表格。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00238.jpg?sign=1739528857-nh58BRPexdzUvVVtClH3dpQCjn0WC7f2-0-2e064531a5f65ba9bf62fd2fc4208997)
STEP|13 然后,在第1行第1列单元格中插入<img>标签及设置该标签的属性,为该单元格插入图像。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00239.jpg?sign=1739528857-l267ame9yHnIAiv9S3at40RgnaWK3uh7-0-889253ff353164e45f6c4bc5d2149603)
STEP|14 在第1行第2列单元格中插入<marquee> </marquee> <img>标签,定义图像滚动的样式。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00240.jpg?sign=1739528857-9Ep6gpX0rplwpP7QcKps02417btxxc5O-0-1b1880ce5fd4105e534944fa8a73de5b)
STEP|15 将光标放置在第4个</div>标签后,插入<div></div>标签,在页面中创建第5个层,并输入版权文本。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00241.jpg?sign=1739528857-K7uEH5pkfnJP6hoUh9l989WzcGu9rwTx-0-c20a1877da06b6ce4c62f29848ea4047)