![Dreamweaver CC中文版网页设计与制作从新手到高手](https://wfqqreader-1252317822.image.myqcloud.com/cover/545/27110545/b_27110545.jpg)
3.5 练习:制作友情链接页面
友情链接一般以列表的形式直观地展现在互联网上,其可以提高网站的知名度和增加网站的访问量。有的列表前有序号,有的没有序号。本练习将使用Dreamweaver软件制作一个有序列表的友情链接页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00207.jpg?sign=1738982347-kBJyICfNpQIoh9hnLbcq9IKDykw77gIv-0-67dddd4a11169d6239f85c0e73c59d4c)
练习要点
□添加<table>和<td>标签的属性并赋值
□段落标签<p>的应用
□<ol><li>标签定义有序列表
□<ul><li>标签定义无序列表
□<img>标签的使用
□<a>标签定义超链接
操作步骤
STEP|01 启动Dreamweaver,在欢迎界面中选择HTML选项,创建一个空白页面。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00208.jpg?sign=1738982347-CcpyPNgySMEHCGDA17rsWNohhbTIpT3t-0-9a7dc4f02d27dd9152e0eda8fe75a71b)
STEP|02 在页面下方的【属性】面板中,单击【页面属性】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00209.jpg?sign=1738982347-YWpJhBEM6aJStZSD7H46xyOEjjKXOmfy-0-0426b6b8fbe99ecb8b5122caa699ec46)
STEP|03 在弹出的【页面属性】对话框中的【外观(CSS)】选项卡中,设置页面文本大小和文本颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00210.jpg?sign=1738982347-mvGHMQ2O4ZYDXorzpxEysRTgqoWgasDa-0-ebba7b0356c47cb120e70f3c4a945119)
STEP|04 激活左侧的【链接(CSS)】选项卡,设置链接字体的大小和各种链接颜色。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00211.jpg?sign=1738982347-yJKuzkjDsmW1W5QueLJCJ0OHUOj5X6Se-0-9f10727596c8837a4b05db545bcb3d60)
STEP|05 激活左侧【标题/编码】选项卡,在【标题】文本框中输入页面标题,并单击【确定】按钮。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00212.jpg?sign=1738982347-4sGFp7kgNwXl9y25dtwcj3URjTpGZmxu-0-217157fe779092d59d3d46e43b7578e0)
STEP|06 切换至【代码】视图,将光标放置在<body></body>之间,通过插入<table>、<tr>和<td>标签创建一个5行×2列的表格。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00213.jpg?sign=1738982347-S6Oz8Oy5rotv7yOsKte6YMT7xeqOhcbS-0-ae37932b1e7f65d0d2c07bde332a21c9)
STEP|07 在<table>标签中添加width、align、cellpadding和cellspacing属性并设置相应的值。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00214.jpg?sign=1738982347-jApBuV6jqVzzvSLVHi5RdSvQVYdsO3MQ-0-a9945e2fd0dd25808df87da0d586aab2)
提示
代码中的cellspacing="2"定义表格中各个单元格之间的间距为2。cellpadding="0"定义单元格的内间距。align="center"定义表格对齐方式为居中。
STEP|08 将光标放置在第1行第1列单元格<td></td>标签之间,分别插入2个<img>标签并设置图像的高和宽。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00215.jpg?sign=1738982347-M691EUeJvRELPCRwc3mFzuQeiit7Emtt-0-9ed2524a7db0dbb37114ed1ae3fbecb8)
STEP|09 在第1行第2列单元格<td>标签中添加width属性及值,在<td></td>标签之间插入<input>和<button>标签并在标签中添加属性及值。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00216.jpg?sign=1738982347-eICF2Nb2oPbstlA0O9U2eJlotDkjeozD-0-ece5f48dbd3fe31e3f5d91e89db7b3e6)
STEP|10 输入文本并为每个文本的前后插入超链接代码<a href="#"></a>。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00217.jpg?sign=1738982347-OPoZeRaAlYTh3F5yP2Abg66Oe33RsWLC-0-cb2c33952501e314abef4f0cf6b183b5)
STEP|11 将光标放置在第2行第1列单元格<td>标签中,添加colspan属性及值,并删除第2行第2列<td></td>标签,以及合并第3行单元格。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00218.jpg?sign=1738982347-jQfHB20wJgXn2FXJ3KEBzpr4wByLzjtc-0-baac905dc93b57d4cf1ec3903d984d5f)
STEP|12 在<td></td>标签之间,通过插入<table>、<tr>和<td>标签创建一个1行×10列的表格。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00219.jpg?sign=1738982347-q0wJ1f0sytU8HUe01NryJ9kOuSDWvI1w-0-3cb99fb49726c984faf5982e4f7b2742)
STEP|13 在每个单元格中插入<img>标签,并设置图像的高、宽和边框以及超链接代码。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00220.jpg?sign=1738982347-e6YNYyjHVpxm19UfFpHTOODAjU6ZfMlQ-0-b165475a83f3524b066087f33014a154)
STEP|14 使用同样的方法,合并第3行单元格,在合并后的单元格中插入标签,创建一个2行×2列的表格。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00221.jpg?sign=1738982347-HvKEdqYDb5tLQ69DjT1asqNDNmX7fvGY-0-266dca171c1cbb8afd7b8bc7d575ea0a)
STEP|15 在第1行第1列单元格<td>标签中,添加width、height和background的属性及相应的值,并通过插入<ul>和<li>标签创建一个无序列表。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00222.jpg?sign=1738982347-Se3LQHcilJCJOeF7hZp9YMrotjkBuBfS-0-24a1c8e1aed84b8a05f8b69b73238f38)
STEP|16 使用同样的方法,在第1行第2列单元格通过插入<ol>和<li>标签创建一个有序列表。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00223.jpg?sign=1738982347-nuh3byMCkeTtVFZ8i7HOC1BALjHzi6Al-0-e7593e073c0363f2d426ab76fcb2973e)
STEP|17 将光标放置在第4行第1列单元格<td>标签中,添加该单元格height、colspan和background属性及值,并删除第4行第2列单元格。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00224.jpg?sign=1738982347-VbkOSKEwDV0tkcPKXnBfb7gkZbBYC8ID-0-9b592a84fe558ce2248b6b798dee49f4)
STEP|18 在<td></td>标签之间,插入一个有序列表,输入友情链接文本并为每个文本的前后插入超链接代码<a href="#"></a>。
![](https://epubservercos.yuewen.com/F962BF/15477639704528206/epubprivate/OEBPS/Images/00225.jpg?sign=1738982347-G5iOzDIN4LFLLgUsyjqaLeSdGyc21C8u-0-87740d48accd2a5d8af4cf81d6697af0)