HTMLCSS上机实验指导书网页设计实验指导

南阳理工学院

HTML+CSS上机实验指导书

（2011版）

软件学院·.NET教研室

2011.8

目 录

实验一 熟悉HTML网页如何手工制作 ......................................................................... 3 实验二 熟悉HTML网页和各种标签 ............................................................................. 3 实验三 熟悉使用DREAMWEAVER制作HTML网页的方法 ........................................... 4 实验四 列表标签和超链接标签 .................................................................................... 4 实验五 网页表格的制作 ............................................................................................... 5 实验六 网页表单的制作 ............................................................................................... 5 实验七 熟悉CSS基本结构一 ........................................................................................ 6 实验八 熟悉CSS基本结构二 ........................................................................................ 6 实验九 熟悉CSS基本结构三 ........................................................................................ 7 实验十 熟悉CSS基本结构三 ........................................................................................ 7 实验十一 熟悉DREAMWEAVER使用（一） ................................................................. 8 实验十二 熟悉DREAMWEAVER使用（二） ................................................................. 9

实验一 熟悉HTML网页如何手工制作

【实验目的】

熟悉HTML的基本结构和常用标记，使用记事本编写网页文件。

【实验内容】

建立一个简单的HTML文件，并输入相应的内容，要求使用相应标签对网页内容进行排版。排版中涉及到的标签包括：标题标签、字体标签、分段标签等。

【实验步骤】

1、打开记事本程序，编写网页的基本结构

2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置 3、将文件保存为*. Html

4、用浏览器打开所保存的网页文件，在浏览器中显示效果 5、根据结果重新调整原代码 6、重复步骤4，步骤5

实验二 熟悉HTML网页和各种标签

【实验目的】

熟悉HTML的基本结构和常用标记，使用记事本编写网页文件。

【实验内容】

建立一个简单的HTML文件，并输入相应的内容，要求使用相应标签对网页内容进行排版。

进一步，向网页中加入图片，使用相应标签对网页进行美化。网页美化中涉及到的标签包括：图像标签、超链接标签等。

【实验步骤】

1、打开记事本程序，编写网页的基本结构

2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置 3、将文件保存为*. Html

4、用浏览器打开所保存的网页文件，在浏览器中显示效果 5、根据结果重新调整原代码

6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果 7、重复步骤4，步骤5