Dreamweaver CS6实例-实现自我介绍界面（简洁型）

最新推荐文章于 2024-08-08 15:58:05 发布

等日出看彩虹

最新推荐文章于 2024-08-08 15:58:05 发布

阅读量8.4k

点赞数 8

分类专栏： HTML 文章标签： html html5

本文链接：https://blog.csdn.net/m0_54158068/article/details/123823866

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

操作步骤

1.打开Dreamweaver CS6软件，并执行文件、新建命令在页面类型中选择HTML创建HTML页面，如下图所示。

2.在窗口界面的菜单栏中点击插入、页面属性，选择外观（CSS）视图，在字体“大小”下拉列表框中选择12，并设置页面边距均为0，点击确定按钮，完成页面属性设置。如下图所示。

3.先将“输入光标”选定在“标签body”中，之后在窗口界面的菜单栏中点击插入、表格，设置行数为8、列数为2、表格宽度为800（单位为像素）、边框粗细为1、单元格边距为0、单元格间距为6、标题为无，点击确定按钮，完成表格的设置。如下图所示。

4.在窗口界面点击代码部分中的“table”标签，在页面下方显示的属性栏中设置对齐方式为“居中对齐”，将插入的表格居中对齐。如下图所示。

5.在窗口界面的表格标签table内容中，一个完整的“<tr> </tr>”标签代表1行，一个完整的“<td> </td>”标签表示1列。

用鼠标点击第1行第1列的标签<td>前，页面下方会显示出该列的属性栏，在“背景颜色”中输入“#6699FF”；之后选择第1行第2列的标签<td>前在显示的属性栏中输入背景颜色值“#339900”；之后按照同样的方法分别设置第4行1、2列背景颜色分别为“#663300、#FFFFCC”，第7行1、2列背景颜色分别为“#CCFFFF、#FFFFCC”，第8行1、2列背景颜色分别为“#CCCCFF、#FFDDDD”。如下图所示。

6.在窗口界面的表格标签table内容中，一个完整的“<tr> </tr>”标签代表1行，一个完整的“<td> </td>”标签表示1列。

选中第2行第1列的标签<td>中的信息“ ”并输入文字“∵基本信息”，之后选中“∵基本信息”在下方属性栏中点击加粗按钮，文字被包含在标签“<stong></strong>”中。同理，将第2行第2列，第6行第1、2列分别输入“∵兴趣爱好、∵学习经历、∵获得奖项”，并且加粗文字，加粗方法相同。如下图所示。

7.在窗口界面的表格标签table内容中，一个完整的“<tr> </tr>”标签代表1行，一个完整的“<td> </td>”标签表示1列。

鼠标点击第1行第1列的标签<td>前空白处，之后在下方属性栏中点击标签<tr>，设置高为12。同理，设置第3行、第7行高为2。如下图所示。

8.在窗口界面的表格标签table内容中，一个完整的“<tr> </tr>”标签代表1行，一个完整的“<td> </td>”标签表示1列。

在第4行和第8行输入的各个单元格中输入信息，每输入一行创建一个<br />用于换行。并选择“user001@nuist.edu.cn”和“http://www.user001.com.cn”在属性栏中设置相应属性，如下图所示。

代码实现

提示：编译环境采用的是“Dreamweaver CS6”，如果是更高版本DW软件，可以只选取标签“<title> </title>”中的内容，其余部分采用软件打开时自给的信息。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DW CS6实例测试</title>
<style type="text/css">
body,td,th {
	font-size: 12px;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}

</head>
<body>
</style><table width="800" border="1" align="center" cellpadding="0" cellspacing="6">
  <tr>
    <td height="12" bgcolor="#6699FF"></td>
    <td height="12" bgcolor="#339900"></td>
  </tr>
  <tr>
    <td><strong>∵基本信息</strong></td>
    <td><strong>∵兴趣爱好</strong></td>
  </tr>
  <tr>
    <td width="50%" height="2"></td>
    <td height="2"></td>
  </tr>
  <tr>
    <td width="50%" bgcolor="#FFFFCC">姓名：张军,<br />
    性别：男<br />
    出生日期：1988年12月<br />
    电子邮箱：<a href="mailto:ser001@nuist.edu.cn">user001@nuist.edu.cn</a><br />
    个人主页：<a href="http://www.user001.com.cn">http://www.user001.com.cn</a><br />
    手机号码：138138000123<br />
    </td>
    <td bgcolor="#CCFFFF">体育方面：乒乓球、游泳<br />
    音乐方面：弹钢琴、唱歌<br />
    技术方面：软件开发、动画制作<br />
    阅读方面：推理小说、散文<br /><br /></td></tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td><strong>∵学习经历</strong></td>
    <td><strong>∵获得奖项</strong></td>
  </tr>
  <tr>
    <td height="2" bgcolor="#CCFFFF"></td>
    <td height="2" bgcolor="#FFFFCC"></td>
  </tr>
  <tr>
    <td bgcolor="#CCCCFF">本科：南京信息工程大学 计算机与软件学院<br />
    硕士：南京大学 软件工程<br /><br /><br /></td>
    <td bgcolor="#FFDDDD">2008年9月，校软件设计大赛一等奖。<br />
    2009年3月，学院课件设计比赛一等奖。<br />
    2010年5月，省科技创新大赛二等奖。<br /><br /></td>
  </tr>
</table>
</body>
</html>