HTML CSS上机实验指导书 网页设计实验指导
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
南阳理工学院
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
实验三熟悉使用Dreamweaver制作HTML网页的方法
【实验目的】
熟悉使用Dreamweaver制作HTML网页的方法
【实验内容】
使用Dreamweaver建立一个站点，然后建立简单的HTML文件，并输入相应的内容，要求使用相应标签对网页内容进行排版，同时注意掌握Dreamweaver 的使用方法。
【实验步骤】
1、打开Dreamweaver程序，建立站点，新建一个网页文件
2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置
3、将网页文件保存，注意查看文件所在位置
4、按F12键，使用浏览器打开所保存的网页文件，在浏览器中显示效果
5、根据结果重新调整原代码
6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果
7、重复步骤4，步骤5
实验四列表标签和超链接标签
【实验目的】
掌握网页中列表标签和超链接标签的使用方法
【实验内容】
通过编写代码和可视化两种方式进行练习
建立一个基本的HTML文件
设计网页中列表标签
设计网页中的超链接标签
【实验步骤】
1、打开Dreamweaver程序，建立站点，新建一个网页文件
2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行试验内容要求的设置
3、将网页文件保存，注意查看文件所在位置
4、按F12键，使用浏览器打开所保存的网页文件，在浏览器中显示效果
5、根据结果重新调整原代码
6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果
7、重复步骤4，步骤5
实验五网页表格的制作
【实验目的】
掌握网页中表格的制作方法
【实验内容】
建立一个基本的HTML文件
网页中表格
设置单元格合并
【实验步骤】
1、打开记事本程序，编写网页的基本结构
2、用
| 等标签在网页中建立相应的表格 3、改变表格中border、width、height等属性 4、文件保存为*. Html 5、浏览器打开所保存的网页文件，显示修改后的效果 6、根据结果重新调整源代码 实验六网页表单的制作 【实验目的】 掌握网页中表单的制作方法 【实验内容】 建立一个基本的HTML文件 网页中表单制作 设置各种表单控件 【实验步骤】 1、打开记事本程序，编写网页的基本结构 2、利用 |