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、将文件保存为*. Html4、用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、重复步骤4，步骤 5实验二熟悉HTML 网页和各种标签【实验目的】熟悉HTML 的基本结构和常用标记，使用记事本编写网页文件。

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

进一步，向网页中加入图片，使用相应标签对网页进行美化。

网页美化中涉及到的标签包括：图像标签、超链接标签等。

【实验步骤】1、打开记事本程序，编写网页的基本结构2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将文件保存为*. Html4、用浏览器打开所保存的网页文件，在浏览器中显示效果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、用<table>、<tr>、<td>等标签在网页中建立相应的表格3、改变表格中border、width 、height 等属性4、文件保存为*. Html5、浏览器打开所保存的网页文件，显示修改后的效果6、根据结果重新调整源代码实验六网页表单的制作【实验目的】掌握网页中表单的制作方法【实验内容】建立一个基本的HTML 文件网页中表单制作设置各种表单控件【实验步骤】1、打开记事本程序，编写网页的基本结构2、利用<form> 标签在网页中插入表单，制作一个调查问卷表，该表单主要包括单行文本框，单选钮、复选框，选择下拉框、文本域等表单元素3、文件保存为*. Html4、浏览器打开所保存的网页文件，显示修改后的效果5、根据结果重新调整源代码实验七熟悉CSS 基本结构一【实验目的】了解CSS 的基本结构掌握在网页中加入CSS的方法【实验内容】练习CSS 的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用【实验步骤】1、打开记事本程序，编写网页的基本结构2、编写一段CSS 代码3、使用三种不同的方法将编写的CSS 代码加入网页中4、浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、根据结果重新调整源代码实验八熟悉CSS 基本结构二【实验目的】掌握CSS 的布局方法【实验内容】练习CSS 的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用利用Div+CSS 方法对网页进行布局【实验步骤】1、打开记事本程序，编写网页的基本结构2、编写一段CSS 代码3、使用三种不同的方法将编写的CSS 代码加入网页中4、浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、根据结果重新调整源代码6、重新建立一个网页7、向网页中插入三个Div 标签，结合CSS 实现定位8、文件保存为*. Html9、浏览器打开所保存的网页文件，显示修改后的效果10、根据结果重新调整源代码11、根据结果重新调整源代码实验九熟悉CSS 基本结构三【实验目的】掌握CSS 中设置背景的方法【实验内容】练习CSS 的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写CSS 代码，对网页的背景进行设置，设置网页的背景图片【实验步骤】1、打开记事本程序，编写网页的基本结构2、编写一段CSS 代码3、使用三种不同的方法将编写的CSS 代码加入网页中4、浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、根据结果重新调整源代码6、编写相应的CSS 代码，将网页的背景颜色分别设置为红色、绿色、蓝色7、文件保存为*. Html8、浏览器打开所保存的网页文件，显示修改后的效果9、根据结果重新调整源代码10、重新建立一个网页11、编写CSS 代码，为网页添加背景图片，使图片不平铺12、修改CSS 代码，使图片在水平方向平铺13、修改CSS 代码，使图片在垂直方向平铺14、修改CSS 代码，使图片同时在水平和垂直方向平铺15、文件保存为*. Html16、浏览器打开所保存的网页文件，显示修改后的效果17、根据结果重新调整源代码实验十熟悉CSS 基本结构三【实验目的】掌握CSS 中设置字体和文本样式的方法【实验内容】练习CSS 的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写CSS 代码，对网页的字体和文本样式进行设置【实验步骤】1、打开记事本程序，编写网页的基本结构2、编写一段CSS 代码3、使用三种不同的方法将编写的CSS 代码加入网页中4、浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、根据结果重新调整源代码6、向网页中插入一段文字7、编写相应的CSS代码，对文本字体进行设置，分别将其设置为“TimesNew Roman”、“宋体”、“黑体”8、修改CSS代码，对字体大小进行设置9、修改CSS代码，设置文本段落缩进10、修改CSS 代码，设置文本对齐方式，分别将文本设置为左对齐、右对齐、居中对齐11、文件保存为*. Html12、浏览器打开所保存的网页文件，显示修改后的效果13、根据结果重新调整源代码实验十一熟悉Dreamweaver 使用（一）【实验目的】掌握Dreamweaver的基本使用方法掌握在Dreamweaver创建站点的方法掌握在Dreamweaver中添加页面元素的方法【实验内容】在本地磁盘建立文件夹，在此基础上利用Dreamweaver建立自己的站点，并为站点设置主页文件，进而向主页中添加文本、图像、超链接等元素。

【实验步骤】1、在本地磁盘建立“newsite”文件夹2、启动Macromedia Dreamweaver 83、利用Dreamweaver 8将“newsite”文件夹设置为站点4、建立站点首页index.html5、对首页进行编辑，向其中添加文本、插入图像、超链接，并设置相应的格式6、文件保存为*. Html7、浏览器打开所保存的网页文件，显示修改后的效果8、根据结果重新调整源代码实验十二熟悉Dreamweaver 使用（二）【实验目的】掌握在Dreamweaver中使用表格的方法掌握在Dreamweaver中使用表单的方法掌握在Dreamweaver中使用CSS 的方法【实验内容】在Dreamweaver中建立基本HTML 页，分别向其中插入表格、表单，并对其格式进行设置；利用CSS样式面板对网页进行美化。

【实验步骤】1、在本地磁盘建立“newsite”文件夹2、启动Macromedia Dreamweaver 8 3、建立基本HTML 页4、对页面进行编辑，向其中添加表格，对表格属性进行设置5、向页面中加入表单，进而向表单中添加单行文本框，单选钮、复选框，选择下拉框、文本域等表单元素6、利用CSS样式面板对网页中的文本内容进行设置，包括设置字体、字体大小、网页背景颜色等7、文件保存为*. Html8、浏览器打开所保存的网页文件，显示修改后的效果9、根据结果重新调整源代码。