实验报告
课程名称网络技术基础实验项目TCP/IP协议配置实验仪器计算机
系别
专业
班级/学号
学生姓名
实验日期
成绩
指导教师
实验一 TCP/IP协议配置
一、实验目的（标题黑体小四）
1.熟练掌握模板的用法。
2.掌握CSS的用法。
3.掌握网站发布的方法。
二、实验内容
1. 创建和使用模板。
2. css的创建和使用。
3. 发布网站。
三、实验课时
4课时
四、实验步骤
创建网站
1、创建一个站点，并创建 images 文件夹存放图片。
将示例图片拷贝至images 目录下
2、创建 CSS 文件，名称为 style.css，将其保存至 style文件夹。
3、创建模板文件 tpl.dwt，并保存。
结果如下：
(1) 给 tpl.dwt 附加样式表 style.css。
在 tpl.dwt 的空白处点击鼠标右键，选择“附加样式表”：
选择 style.css 文件：
完成后，在 tpl.dwt 的 head标签里有如下的代码：
<link href="../style/style.css" rel="stylesheet" type="text/css" />
(2) 设置模板的背景颜色。
打开 CSS 面板，为 style.css 新建一条 css 规则。
过程如
下：
将背景颜色设为#ff1e70：
在 style.css 生成如下的代码：
body {
background-color: #ff1e70?
}
3) 制作布局。
插入一 2 行 2 列的表格。
表格的宽度=316+634=950，其他的设置：让表格居中对齐。
(4) 消除表格两边的空隙。
展开 CSS 样式表，双击 body：
双击 body后，打开“body的 CSS 规则定义”对话框，按照下面的方式设置：Style.css 的代码变为：
body {
background-color: #ff1e70?
margin: 0px?
}
(5) 变换布局。
将第二行的两个单元格合并。
(6) 编辑左上角单元格。
选中你左上角的单元格，根据上面的布局图，设置其宽为
316，高为 661。
将单元格的对齐方式设为水平为“左对齐”，垂直为“顶端”。
插入图片 left.jpg。
(7) 将在 e)中标注的右上角单元格的对齐方式设置为水平“左对齐”，垂直为“顶
端”。
嵌入一张 3行 1 列的表格。
设置如下。
(8) 将 g)中插入的表格的背景颜色设置为白色。
打开 CSS 面板，为 style.css 新建
一条规则：
(9) 将 g)中插入的表格的第一个单元格的宽度设置为 634，高度设置为 145。
将对齐方式设置为水平“左对齐”，垂直为“顶端”。
插入图片 top.jpg。
(10) 将 g)中插入的表格的第二个单元格的高度设置为 65。
(11) 将 g)中插入的表格的第三个单元格的高度设置为：661-145-65=451，正好占满
e)中的右上角单元格。
最后的布局如下图，为了方便后面表述，将单元格依次编号。
(12) 编写第 5 个单元“居中对齐”，垂直为“居中”。
并设置其字体大小为 12
创建可编辑区域。
选中 K)中的 3 和 4 单元格，点击鼠标右键，按下面的步骤执行。
在第 1 个单元格中已经插入的图片上创建热区。
并配置各个热区的链接文件，其中，首页的超级链接为 index.html；我的资料为 index.html；我的相册为photo.html；我的动漫为 flash.html；鹤过留影为 guest.html。
如下图：格，输入文本“版权所有，翻版必究”，对齐方式设置为水平
4、创建 index.html。
(1) 使用模板创建 index.html 文件。
（参考 3.6.4 节的 step 9）。
并将标题改为
博客”。
(2) 将第 3 个单元格的对齐方式设置为水平“左对齐”，垂直为“居中”。
个单元格中插入图片rec.jpg。
(3) 将第 4 个单元格的对齐方式设置为水平“左对齐”，垂直为“居中”。
(4) 在第 4 个单元格中，插入图片rec1.jpg，并设置粉色边框。
步骤如下：打开 CSS 面板，为 style.css 创建一条类别选择器。
选中图片，在属性面板中，设置图片的 css 规则。
设置边框后的效果。
(5)在第 4 个单元格中编辑文本。
先输入文字。
选中图片，在属性面板中设置对齐方式是“左对齐”
设好后的效果：为 style.css 添加标签选择器，设置文本的字体和颜色。
(6)上面的图片靠边界和文字太近，选中图片，设置“水平边距”和“垂直边距”
分别为 10。
(7)上面的文字距离边界太近，给 style.css 的 p标签加一个外边距。
自己利用模板创建其他的网页。
五、实验心得。