dreamweaver第三单元任务五
Download
Report
Transcript dreamweaver第三单元任务五
第三单元 制作“作品展示”网页
任务五 使用代码制作表格网页
任务：使用HTML代码制作一个简单的表格布局网页，完成
属性设置并添加超级链接。
示例1
示例2
分析：在HTML的语法中，表格主要通过3个标签来构成，表
格标签、行标签、单元格标签。如下表所示：
标
记
描
述
<table>…</table>
表格标签
<tr>…</tr>
行标签
<td>…</td>
单元格标签
目录
上一页
下一页
退出
任务五 使用代码制作表格网页
自己动手：
1．准备工作。
在桌面上新建一个文件夹“yssx”，将光盘“第三单元素
材”下的“HTML”文件夹中的“htmlimages”文件夹拷贝到
“yssx”文件夹中，然后运行Dreamweaver 8，创建一个HTML
文档，文件命名为“jade.html”，保存在新建的“yssx”文
件夹中。目录结构图示。
将Dreamweaver 8的“文档”窗口切换到“代码”视图，
将其中的代码进行如下修改：
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312" />
<title>玉石鉴赏</title> <!--修改网页的标题 -->
</head>
目录
上一页
下一页
退出
任务五 使用代码制作表格网页
2.插入表格结构并设置属性。
•
<table width="700" align="center" border="1" bgcolor="#00CC66" cellpadding="0"
cellspacing="0">
•
<!--table: 表格标签-->
•
<tr> <!-- tr :行标签，必须成对出现在表格标签当中-->
•
<td height="50" colspan="3" >
•
<!-- td :单元格标签，必须插入到行标签之中 -->
•
</td>
•
</tr>
•
<tr bgcolor="#339999">
•
<td height="200" width="33%">
•
</td>
•
<td width="33%">
•
</td>
•
<td width="33%">
•
</td>
•
</tr>
表格、行、单元格
•
<tr bgcolor="#339999">
标签格式
•
<td height="61">
•
</td>
•
<td >
•
</td>
•
<td >
•
</td>
•
</tr>
•
<tr>
•
<td height="50" colspan="3" >
•
</td>
•
</tr>
•
</table>
目录
上一页
下一页
退出
任务五 使用代码制作表格网页
3.添加图像与文本
目录
上一页
下一页
退出
任务五 使用代码制作表格网页
4.添加超级链接
为表格第二行中的三幅图像添加超级链接，使之单击后可
以看到清晰的大图像，为第四行的文本添加文件下载链接，使
浏览者可以下载更多的玉石图像。
<a href="htmlimages/1.jpg" target="_blank"><img
src="htmlimages/1s.jpg" width="180" height="135"
border="0" /></a>
……
<a href="htmlimages/pic.rar" >更多精美玉石图像下载</a>
超级链接标签格式
目录
上一页
下一页
退出
任务五 使用代码制作表格网页
课堂练习1：
•
•
•
•
•
•
•
•
•
•
•
•
<table width="200" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
这是一个 2 行 3 列，
<tr>
宽 200 像素，边框为 1 ，
<td> </td>
<td> </td>
单元格间距为 0 、单元格
<td> </td>
边距为 0 的表格。
</tr>
</table>
目录
上一页
下一页
退出
任务五 使用代码制作表格网页
课堂练习2：
•
•
•
•
•
•
•
•
•
•
•
•
•
•
请写出如图所示表格的HTML代码：
<table >
<tr>
<td rowspan="3"></td>
<td colspan="2"></td>
</tr>
<tr>
<td ></td>
<td ></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
目录
上一页
下一页
退出
任务五 使用代码制作表格网页
任务总结：
通过完成以上任务，学习使用代码制作表格网页。
本任务需要重点掌握的知识是：表格标签、行标签、单元
格标签、超级链接标签的用法及属性。
目录
上一页
下一页
退出
任务五 使用代码制作表格网页
举一反三：
在Dreamweaver 8的代码视图下分析“作品展示”网页
1．启发思路：
在分析“作品展示”网页时注意以下几点：
⑴ 页面属性。
⑵ CSS样式的定义。
⑶ 表格结构。
⑷ 表格标签的“align”属性与行标签和单元格标签的
“align”属性的异同。
⑸ HTML代码中电子邮件超链接是如何实现的？
⑹ 超级链接的“href”属性部分都使用了哪些类型的链
接路径？
目录
上一页
下一页
退出
任务五 使用代码制作表格网页
作业：
1．使用代码制作网页“practice3-14html”，这个网页
中包含一个2行3列的表格。
2．使用HTML代码制作网页“practice3-15html”，网页
中包含课本P98“图JYFS3-11”所示表格。
3．制作本课开 始时所展示的彩色虚线表格。（给出CSS
样式的HTML代码。）
4．在第一单元任务一中，设计了自己的个人网站栏目，
使用HTML代码制作其中一个栏目的网页。
目录
上一页
下一页
退出
目录结构：
目录
上一页
下一页
退出
任务五 使用代码制作表格网页
相关知识：
表格标签格式：
<table width=“宽度” height =“高度” align=“对齐方式”
border=“边框宽度” bgcolor =“背景颜色” cellpadding=“单元格
边距” cellspacing =“单元格间距”>……</table>
行标签格式：
<tr height=“高度” align=“单元格内容的对齐方式”
bgcolor=“背景颜色” >……</tr>
单元格标签格式：
<td width ="宽度" height="高度" align ="内容的对齐方式"
bgcolor ="背景颜色" rowspan="跨越行数" colspan ="跨越列数
">……</td>
“rowspan”属性：用于实现单元格跨越多行
“colspan”属性：用于实现单元格跨越多列
任务五 使用代码制作表格网页
<a >…</a>:
超级链接标签，成对标签，属性包括href：链接路径属性
，可以使用相对路径或者绝对路径来描述；target:链接页面
的打开方式属性 。