《HTML+CSS上机实验指导书 网页设计实验指导.doc》由会员分享，可在线阅读，更多相关《HTML+CSS上机实验指导书 网页设计实验指导.doc（9页珍藏版）》请在三一办公上搜索。
1、南阳理工学院HTML+CSS上机实验指导书（2011版）软件学院.NET教研室2011.8目 录实验一熟悉HTML网页如何手工制作2实验二熟悉HTML网页和各种标签3实验三熟悉使用DREAMWEAVER制作HTML网页的方法3实验四列表标签和超链接标签4实验五网页表格的制作4实验六网页表单的制作5实验七熟悉CSS基本结构一5实验八熟悉CSS基本结构二5实验九熟悉CSS基本结构三6实验十熟悉CSS基本结构三7实验十一熟悉DREAMWEAVER使用（一）8实验十二熟悉DREAMWEAVER使用（二）8实验一熟悉HTML网页如何手工制作【实验目的】熟悉HTML的基本结构和常用标记，使用记事本编写网页
2、文件。【实验内容】建立一个简单的HTML文件，并输入相应的内容，要求使用相应标签对网页内容进行排版。排版中涉及到的标签包括：标题标签、字体标签、分段标签等。【实验步骤】1、打开记事本程序，编写网页的基本结构2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将文件保存为*. Html4、用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、重复步骤4，步骤5实验二熟悉HTML网页和各种标签【实验目的】熟悉HTML的基本结构和常用标记，使用记事本编写网页文件。【实验内容】建立一个简单的HTML文件，并输入相应的内容，要求使用相应标签对网页内容进行排版
3、。进一步，向网页中加入图片，使用相应标签对网页进行美化。网页美化中涉及到的标签包括：图像标签、超链接标签等。【实验步骤】1、打开记事本程序，编写网页的基本结构2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将文件保存为*. Html4、用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果7、重复步骤4，步骤5实验三熟悉使用Dreamweaver制作HTML网页的方法【实验目的】熟悉使用Dreamweaver制作HTML网页的方法【实验内容】使用Dreamweaver建立一个站点，然
4、后建立简单的HTML文件，并输入相应的内容，要求使用相应标签对网页内容进行排版，同时注意掌握Dreamweaver的使用方法。【实验步骤】1、打开Dreamweaver程序，建立站点，新建一个网页文件2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行排版设置3、将网页文件保存，注意查看文件所在位置4、按F12键，使用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果7、重复步骤4，步骤5实验四列表标签和超链接标签【实验目的】掌握网页中列表标签和超链接标签的使用方法【实验内容】通过编写代码和可视化
5、两种方式进行练习建立一个基本的HTML文件设计网页中列表标签设计网页中的超链接标签【实验步骤】1、打开Dreamweaver程序，建立站点，新建一个网页文件2、对网页进行编辑，输入文本内容，并用相应的标签对文本内容进行试验内容要求的设置3、将网页文件保存，注意查看文件所在位置4、按F12键，使用浏览器打开所保存的网页文件，在浏览器中显示效果5、根据结果重新调整原代码6、向网页中加入图片，利用相应标签对图片进行设置，达到美化网页效果7、重复步骤4，步骤5实验五网页表格的制作【实验目的】掌握网页中表格的制作方法【实验内容】建立一个基本的HTML文件网页中表格设置单元格合并【实验步骤】1、打开记事本
6、程序，编写网页的基本结构2、用、等标签在网页中建立相应的表格3、改变表格中border、width、height等属性4、文件保存为*. Html5、浏览器打开所保存的网页文件，显示修改后的效果6、根据结果重新调整源代码实验六网页表单的制作【实验目的】掌握网页中表单的制作方法【实验内容】建立一个基本的HTML文件网页中表单制作设置各种表单控件【实验步骤】1、打开记事本程序，编写网页的基本结构2、利用标签在网页中插入表单，制作一个调查问卷表，该表单主要包括单行文本框，单选钮、复选框，选择下拉框、文本域等表单元素 3、文件保存为*. Html4、浏览器打开所保存的网页文件，显示修改后的效果5、根据
7、结果重新调整源代码实验七熟悉CSS基本结构一【实验目的】了解CSS的基本结构掌握在网页中加入CSS的方法【实验内容】练习CSS的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用【实验步骤】1、 打开记事本程序，编写网页的基本结构2、 编写一段CSS代码3、 使用三种不同的方法将编写的CSS代码加入网页中4、 浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、 根据结果重新调整源代码实验八熟悉CSS基本结构二【实验目的】掌握CSS的布局方法【实验内容】练习CSS的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用利用Div+CSS方法对网页进行布局【实验
8、步骤】1、 打开记事本程序，编写网页的基本结构2、 编写一段CSS代码3、 使用三种不同的方法将编写的CSS代码加入网页中4、 浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、 根据结果重新调整源代码6、 重新建立一个网页7、 向网页中插入三个Div标签，结合CSS实现定位8、 文件保存为*. Html9、 浏览器打开所保存的网页文件，显示修改后的效果10、 根据结果重新调整源代码11、 根据结果重新调整源代码实验九熟悉CSS基本结构三【实验目的】掌握CSS中设置背景的方法【实验内容】练习CSS的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写CSS代码，对网
9、页的背景进行设置，设置网页的背景图片【实验步骤】1、 打开记事本程序，编写网页的基本结构2、 编写一段CSS代码3、 使用三种不同的方法将编写的CSS代码加入网页中4、 浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、 根据结果重新调整源代码6、 编写相应的CSS代码，将网页的背景颜色分别设置为红色、绿色、蓝色7、 文件保存为*. Html8、 浏览器打开所保存的网页文件，显示修改后的效果9、 根据结果重新调整源代码10、 重新建立一个网页11、 编写CSS代码，为网页添加背景图片，使图片不平铺12、 修改CSS代码，使图片在水平方向平铺13、 修改CSS代码，使图片在垂直方向平
10、铺14、 修改CSS代码，使图片同时在水平和垂直方向平铺15、 文件保存为*. Html16、 浏览器打开所保存的网页文件，显示修改后的效果17、 根据结果重新调整源代码实验十熟悉CSS基本结构三【实验目的】掌握CSS中设置字体和文本样式的方法【实验内容】练习CSS的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写CSS代码，对网页的字体和文本样式进行设置【实验步骤】1、 打开记事本程序，编写网页的基本结构2、 编写一段CSS代码3、 使用三种不同的方法将编写的CSS代码加入网页中4、 浏览器打开所保存的网页文件，检验是否成功将CSS加入网页中5、 根据结果重新调整源代码6
11、、 向网页中插入一段文字7、 编写相应的CSS代码，对文本字体进行设置，分别将其设置为“Times New Roman”、“宋体”、“黑体”8、 修改CSS代码，对字体大小进行设置9、 修改CSS代码，设置文本段落缩进10、 修改CSS代码，设置文本对齐方式，分别将文本设置为左对齐、右对齐、居中对齐11、 文件保存为*. Html12、 浏览器打开所保存的网页文件，显示修改后的效果13、 根据结果重新调整源代码实验十一熟悉Dreamweaver使用（一）【实验目的】掌握Dreamweaver的基本使用方法掌握在Dreamweaver创建站点的方法掌握在Dreamweaver中添加页面元素的方法
12、【实验内容】在本地磁盘建立文件夹，在此基础上利用Dreamweaver建立自己的站点，并为站点设置主页文件，进而向主页中添加文本、图像、超链接等元素。【实验步骤】1、在本地磁盘建立“newsite”文件夹2、启动Macromedia Dreamweaver 83、利用Dreamweaver 8将“newsite”文件夹设置为站点4、建立站点首页index.html5、对首页进行编辑，向其中添加文本、插入图像、超链接，并设置相应的格式6、文件保存为*. Html7、浏览器打开所保存的网页文件，显示修改后的效果8、根据结果重新调整源代码实验十二熟悉Dreamweaver使用（二）【实验目的】掌握在
13、Dreamweaver中使用表格的方法掌握在Dreamweaver中使用表单的方法掌握在Dreamweaver中使用CSS的方法【实验内容】在Dreamweaver中建立基本HTML页，分别向其中插入表格、表单，并对其格式进行设置；利用CSS样式面板对网页进行美化。【实验步骤】1、在本地磁盘建立“newsite”文件夹2、启动Macromedia Dreamweaver 83、建立基本HTML页4、对页面进行编辑，向其中添加表格，对表格属性进行设置5、向页面中加入表单，进而向表单中添加单行文本框，单选钮、复选框，选择下拉框、文本域等表单元素6、利用CSS样式面板对网页中的文本内容进行设置，包括设置字体、字体大小、网页背景颜色等7、文件保存为*. Html8、浏览器打开所保存的网页文件，显示修改后的效果9、根据结果重新调整源代码
