HTML-CSS上机实验指导书-网页设计实验指导

1、PAGE IPAGE 9南阳理工学院HTML+CSS上机实验指导书（2011版）软件学院.NET教研室2011.8目 录 TOC o 1-1 h z u HYPERLINK l _Toc307299177 实验一熟悉HTML网页如何手工制作 PAGEREF _Toc307299177 h 2 HYPERLINK l _Toc307299178 实验二熟悉HTML网页和各种标签 PAGEREF _Toc307299178 h 3 HYPERLINK l _Toc307299179 实验三熟悉使用Dreamweaver制作HTML网页的方法 PAGEREF _Toc307299179 h 3 HY

2、PERLINK l _Toc307299180 实验四列表标签和超链接标签 PAGEREF _Toc307299180 h 4 HYPERLINK l _Toc307299181 实验五网页表格的制作 PAGEREF _Toc307299181 h 4 HYPERLINK l _Toc307299182 实验六网页表单的制作 PAGEREF _Toc307299182 h 5 HYPERLINK l _Toc307299183 实验七熟悉CSS基本结构一 PAGEREF _Toc307299183 h 5 HYPERLINK l _Toc307299184 实验八熟悉CSS基本结构二 PAGE

3、REF _Toc307299184 h 5 HYPERLINK l _Toc307299185 实验九熟悉CSS基本结构三 PAGEREF _Toc307299185 h 6 HYPERLINK l _Toc307299186 实验十熟悉CSS基本结构三 PAGEREF _Toc307299186 h 7 HYPERLINK l _Toc307299187 实验十一熟悉Dreamweaver使用（一） PAGEREF _Toc307299187 h 8 HYPERLINK l _Toc307299188 实验十二熟悉Dreamweaver使用（二） PAGEREF _Toc307299188

4、h 8实验一熟悉HTML网页如何手工制作【实验目的】熟悉HTML的基本结构和常用标记，使用记事本编写网页文件。【实验内容】建立一个简单的HTML文件，并输入相应的内容，要求使用相应标签对网页内容进行排版。排版中涉及到的标签包括：标题标签、字体标签、分段标签等。【实验步骤】1、打开记事本程序，编写网页的基本结构2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将文件保存为*. Html4、用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、重复步骤4，步骤5实验二熟悉HTML网页和各种标签【实验目的】熟悉HTML的基本结构和常用标记，使用记事本编

5、写网页文件。【实验内容】建立一个简单的HTML文件，并输入相应的内容，要求使用相应标签对网页内容进行排版。进一步，向网页中加入图片，使用相应标签对网页进行美化。网页美化中涉及到的标签包括：图像标签、超链接标签等。【实验步骤】1、打开记事本程序，编写网页的基本结构2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将文件保存为*. Html4、用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果7、重复步骤4，步骤5实验三熟悉使用Dreamweaver制作HTML网页的方法【实验目的】熟

6、悉使用Dreamweaver制作HTML网页的方法【实验内容】使用Dreamweaver建立一个站点，然后建立简单的HTML文件，并输入相应的内容，要求使用相应标签对网页内容进行排版，同时注意掌握Dreamweaver的使用方法。【实验步骤】1、打开Dreamweaver程序，建立站点，新建一个网页文件2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将网页文件保存，注意查看文件所在位置4、按F12键，使用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果7、重复步骤4，步骤5实验四

7、列表标签和超链接标签【实验目的】掌握网页中列表标签和超链接标签的使用方法【实验内容】通过编写代码和可视化两种方式进行练习建立一个基本的HTML文件设计网页中列表标签设计网页中的超链接标签【实验步骤】1、打开Dreamweaver程序，建立站点，新建一个网页文件2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行试验内容要求的设置3、将网页文件保存，注意查看文件所在位置4、按F12键，使用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果7、重复步骤4，步骤5实验五网页表格的制作【实验目的】掌握网页

8、中表格的制作方法【实验内容】建立一个基本的HTML文件网页中表格设置单元格合并【实验步骤】1、打开记事本程序，编写网页的基本结构2、用、等标签在网页中建立相应的表格3、改变表格中border、width、height等属性4、文件保存为*. Html5、浏览器打开所保存的网页文件，显示修改后的效果6、根据结果重新调整源代码实验六网页表单的制作【实验目的】掌握网页中表单的制作方法【实验内容】建立一个基本的HTML文件网页中表单制作设置各种表单控件【实验步骤】1、打开记事本程序，编写网页的基本结构2、利用标签在网页中插入表单，制作一个调查问卷表，该表单主要包括单行文本框，单选钮、复选框，选择下拉框

9、、文本域等表单元素 3、文件保存为*. Html4、浏览器打开所保存的网页文件，显示修改后的效果5、根据结果重新调整源代码实验七熟悉CSS基本结构一【实验目的】了解CSS的基本结构掌握在网页中加入CSS的方法【实验内容】练习CSS的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用【实验步骤】打开记事本程序，编写网页的基本结构编写一段CSS代码使用三种不同的方法将编写的CSS代码加入网页中浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中根据结果重新调整源代码实验八熟悉CSS基本结构二【实验目的】掌握CSS的布局方法【实验内容】练习CSS的三种使用方式：外部样式表的使用、

10、内部样式表的使用、内嵌样式的使用利用Div+CSS方法对网页进行布局【实验步骤】打开记事本程序，编写网页的基本结构编写一段CSS代码使用三种不同的方法将编写的CSS代码加入网页中浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中根据结果重新调整源代码重新建立一个网页向网页中插入三个Div标签，结合CSS实现定位文件保存为*. Html浏览器打开所保存的网页文件，显示修改后的效果根据结果重新调整源代码根据结果重新调整源代码实验九熟悉CSS基本结构三【实验目的】掌握CSS中设置背景的方法【实验内容】练习CSS的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写CSS代码，

11、对网页的背景进行设置，设置网页的背景图片【实验步骤】打开记事本程序，编写网页的基本结构编写一段CSS代码使用三种不同的方法将编写的CSS代码加入网页中浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中根据结果重新调整源代码编写相应的CSS代码，将网页的背景颜色分别设置为红色、绿色、蓝色文件保存为*. Html浏览器打开所保存的网页文件，显示修改后的效果根据结果重新调整源代码重新建立一个网页编写CSS代码，为网页添加背景图片，使图片不平铺修改CSS代码，使图片在水平方向平铺修改CSS代码，使图片在垂直方向平铺修改CSS代码，使图片同时在水平和垂直方向平铺文件保存为*. Html浏览器打开

12、所保存的网页文件，显示修改后的效果根据结果重新调整源代码实验十熟悉CSS基本结构三【实验目的】掌握CSS中设置字体和文本样式的方法【实验内容】练习CSS的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写CSS代码，对网页的字体和文本样式进行设置【实验步骤】打开记事本程序，编写网页的基本结构编写一段CSS代码使用三种不同的方法将编写的CSS代码加入网页中浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中根据结果重新调整源代码向网页中插入一段文字编写相应的CSS代码，对文本字体进行设置，分别将其设置为“Times New Roman”、“宋体”、“黑体”修改CSS代码，

13、对字体大小进行设置修改CSS代码，设置文本段落缩进修改CSS代码，设置文本对齐方式，分别将文本设置为左对齐、右对齐、居中对齐文件保存为*. Html浏览器打开所保存的网页文件，显示修改后的效果根据结果重新调整源代码实验十一熟悉Dreamweaver使用（一）【实验目的】掌握Dreamweaver的基本使用方法掌握在Dreamweaver创建站点的方法掌握在Dreamweaver中添加页面元素的方法【实验内容】在本地磁盘建立文件夹，在此基础上利用Dreamweaver建立自己的站点，并为站点设置主页文件，进而向主页中添加文本、图像、超链接等元素。【实验步骤】1、在本地磁盘建立“newsite”文

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