整理HTMLCSS上机实验指导书网页设计实验指导.docx

1、整理HTMLCSS上机实验指导书网页设计实验指导（完整）HTMLCSS上机实验指导书网页设计实验指导 编辑整理：尊敬的读者朋友们：这里是精品文档编辑中心，本文档内容是由我和我的同事精心编辑整理后发布的，发布之前我们对文中内容进行仔细校对，但是难免会有疏漏的地方，但是任然希望（完整）HTMLCSS上机实验指导书网页设计实验指导）的内容能够给您的工作和学习带来便利。同时也真诚的希望收到您的建议和反馈，这将是我们进步的源泉，前进的动力。本文可编辑可修改，如果觉得对您有帮助请收藏以便随时查阅，最后祝您生活愉快 业绩进步，以下为（完整）HTMLCSS上机实验指导书网页设计实验指导的全部内容。南阳理工学院

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

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

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

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

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

7、,制作一个调查问卷表，该表单主要包括单行文本框,单选钮、复选框,选择下拉框、文本域等表单元素 3、文件保存为. Html4、浏览器打开所保存的网页文件，显示修改后的效果5、根据结果重新调整源代码实验七熟悉CSS基本结构一【实验目的】了解CSS的基本结构掌握在网页中加入CSS的方法【实验内容】练习CSS的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用【实验步骤】1、打开记事本程序，编写网页的基本结构2、编写一段CSS代码3、使用三种不同的方法将编写的CSS代码加入网页中4、浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、根据结果重新调整源代码实验八熟悉CSS基本结

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

9、验目的】掌握CSS中设置背景的方法【实验内容】练习CSS的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写CSS代码,对网页的背景进行设置，设置网页的背景图片【实验步骤】1、打开记事本程序，编写网页的基本结构2、编写一段CSS代码3、使用三种不同的方法将编写的CSS代码加入网页中4、浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、根据结果重新调整源代码6、编写相应的CSS代码，将网页的背景颜色分别设置为红色、绿色、蓝色7、文件保存为*. Html8、浏览器打开所保存的网页文件，显示修改后的效果9、根据结果重新调整源代码10、重新建立一个网页11、编写CSS代码

10、,为网页添加背景图片，使图片不平铺12、修改CSS代码，使图片在水平方向平铺13、修改CSS代码，使图片在垂直方向平铺14、修改CSS代码,使图片同时在水平和垂直方向平铺15、文件保存为. Html16、浏览器打开所保存的网页文件，显示修改后的效果17、根据结果重新调整源代码实验十熟悉CSS基本结构三【实验目的】掌握CSS中设置字体和文本样式的方法【实验内容】练习CSS的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写CSS代码，对网页的字体和文本样式进行设置【实验步骤】1、打开记事本程序，编写网页的基本结构2、编写一段CSS代码3、使用三种不同的方法将编写的CSS代码加入

11、网页中4、浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、根据结果重新调整源代码6、向网页中插入一段文字7、编写相应的CSS代码，对文本字体进行设置，分别将其设置为“Times New Roman”、“宋体”、“黑体”8、修改CSS代码，对字体大小进行设置9、修改CSS代码,设置文本段落缩进10、修改CSS代码，设置文本对齐方式，分别将文本设置为左对齐、右对齐、居中对齐11、文件保存为*。 Html12、浏览器打开所保存的网页文件，显示修改后的效果13、根据结果重新调整源代码实验十一熟悉Dreamweaver使用（一）【实验目的】掌握Dreamweaver的基本使用方法掌握在Dr

12、eamweaver创建站点的方法掌握在Dreamweaver中添加页面元素的方法【实验内容】在本地磁盘建立文件夹，在此基础上利用Dreamweaver建立自己的站点，并为站点设置主页文件，进而向主页中添加文本、图像、超链接等元素。【实验步骤】1、在本地磁盘建立“newsite文件夹2、启动Macromedia Dreamweaver 83、利用Dreamweaver 8将“newsite”文件夹设置为站点4、建立站点首页index.html5、对首页进行编辑，向其中添加文本、插入图像、超链接，并设置相应的格式6、文件保存为. Html7、浏览器打开所保存的网页文件，显示修改后的效果8、根据结果

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