3.5 练习：制作友情链接页面

友情链接一般以列表的形式直观地展现在互联网上，其可以提高网站的知名度和增加网站的访问量。有的列表前有序号，有的没有序号。本练习将使用Dreamweaver软件制作一个有序列表的友情链接页面。

练习要点

□添加<table>和<td>标签的属性并赋值

□段落标签<p>的应用

□<ol><li>标签定义有序列表

□<ul><li>标签定义无序列表

□<img>标签的使用

□<a>标签定义超链接

操作步骤

STEP｜01　启动Dreamweaver，在欢迎界面中选择HTML选项，创建一个空白页面。

STEP｜02　在页面下方的【属性】面板中，单击【页面属性】按钮。

STEP｜03　在弹出的【页面属性】对话框中的【外观（CSS）】选项卡中，设置页面文本大小和文本颜色。

STEP｜04　激活左侧的【链接（CSS）】选项卡，设置链接字体的大小和各种链接颜色。

STEP｜05　激活左侧【标题/编码】选项卡，在【标题】文本框中输入页面标题，并单击【确定】按钮。

STEP｜06　切换至【代码】视图，将光标放置在<body></body>之间，通过插入<table>、<tr>和<td>标签创建一个5行×2列的表格。

STEP｜07　在<table>标签中添加width、align、cellpadding和cellspacing属性并设置相应的值。

提示

代码中的cellspacing="2"定义表格中各个单元格之间的间距为2。cellpadding="0"定义单元格的内间距。align="center"定义表格对齐方式为居中。

STEP｜08　将光标放置在第1行第1列单元格<td></td>标签之间，分别插入2个<img>标签并设置图像的高和宽。

STEP｜09　在第1行第2列单元格<td>标签中添加width属性及值，在<td></td>标签之间插入<input>和<button>标签并在标签中添加属性及值。

STEP｜10　输入文本并为每个文本的前后插入超链接代码<a href="#"></a>。

STEP｜11　将光标放置在第2行第1列单元格<td>标签中，添加colspan属性及值，并删除第2行第2列<td></td>标签，以及合并第3行单元格。

STEP｜12　在<td></td>标签之间，通过插入<table>、<tr>和<td>标签创建一个1行×10列的表格。

STEP｜13　在每个单元格中插入<img>标签，并设置图像的高、宽和边框以及超链接代码。

STEP｜14　使用同样的方法，合并第3行单元格，在合并后的单元格中插入标签，创建一个2行×2列的表格。

STEP｜15　在第1行第1列单元格<td>标签中，添加width、height和background的属性及相应的值，并通过插入<ul>和<li>标签创建一个无序列表。

STEP｜16　使用同样的方法，在第1行第2列单元格通过插入<ol>和<li>标签创建一个有序列表。

STEP｜17　将光标放置在第4行第1列单元格<td>标签中，添加该单元格height、colspan和background属性及值，并删除第4行第2列单元格。

STEP｜18　在<td></td>标签之间，插入一个有序列表，输入友情链接文本并为每个文本的前后插入超链接代码<a href="#"></a>。

上一章目录下一章