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

1、1南阳理工学院南阳理工学院html+css 上机实验指导书上机实验指导书（2011 版）软件学院.net 教研室2011.82目目 录录实验一实验一熟悉熟悉 html 网页如何手工制作网页如何手工制作 .2实验二实验二熟悉熟悉 html 网页和各种标签网页和各种标签.3实验三实验三熟悉使用熟悉使用 dreamweaver 制作制作 html 网页的方法网页的方法 .3实验四实验四列表标签和超链接标签列表标签和超链接标签 .4实验五实验五网页表格的制作网页表格的制作.4实验六实验六网页表单的制作网页表单的制作.5实验七实验七熟悉熟悉 css 基本结构一基本结构一.5实验八实验八熟悉熟悉 css

2、基本结构二基本结构二.5实验九实验九熟悉熟悉 css 基本结构三基本结构三.6实验十实验十熟悉熟悉 css 基本结构三基本结构三.7实验十一实验十一熟悉熟悉 dreamweaver 使用（一）使用（一）.8实验十二实验十二熟悉熟悉 dreamweaver 使用（二）使用（二）.83实验一实验一熟悉熟悉 html 网页网页如何手工制作如何手工制作【实验目的实验目的】熟悉 html 的基本结构和常用标记，使用记事本编写网页文件。【实验内容实验内容】建立一个简单的 html 文件，并输入相应的内容，要求使用相应标签对网页内容进行排版。排版中涉及到的标签包括：标题标签、字体标签、分段标签等。【实验步骤

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

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

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

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

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

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

9、成功将 css 加入网页中5、 根据结果重新调整源代码实验八实验八熟悉熟悉 css 基本结构二基本结构二【实验目的实验目的】掌握 css 的布局方法【实验内容实验内容】练习 css 的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用利用 div+css 方法对网页进行布局【实验步骤实验步骤】1、 打开记事本程序，编写网页的基本结构2、 编写一段 css 代码3、 使用三种不同的方法将编写的 css 代码加入网页中4、 浏览器打开所保存的网页文件，检验是否成功将 css 加入网页中5、 根据结果重新调整源代码6、 重新建立一个网页7、 向网页中插入三个 div 标签，结合 css

10、 实现定位8、 文件保存为*. html9、 浏览器打开所保存的网页文件，显示修改后的效果10、根据结果重新调整源代码711、根据结果重新调整源代码实验九实验九熟悉熟悉 css 基本结构三基本结构三【实验目的实验目的】掌握 css 中设置背景的方法【实验内容实验内容】练习 css 的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写 css 代码，对网页的背景进行设置，设置网页的背景图片【实验步骤实验步骤】1、 打开记事本程序，编写网页的基本结构2、 编写一段 css 代码3、 使用三种不同的方法将编写的 css 代码加入网页中4、 浏览器打开所保存的网页文件，检验是否成功将

11、 css 加入网页中5、 根据结果重新调整源代码6、 编写相应的 css 代码，将网页的背景颜色分别设置为红色、绿色、蓝色7、 文件保存为*. html8、 浏览器打开所保存的网页文件，显示修改后的效果9、 根据结果重新调整源代码10、重新建立一个网页11、编写 css 代码，为网页添加背景图片，使图片不平铺12、修改 css 代码，使图片在水平方向平铺13、修改 css 代码，使图片在垂直方向平铺14、修改 css 代码，使图片同时在水平和垂直方向平铺15、文件保存为*. html16、浏览器打开所保存的网页文件，显示修改后的效果17、根据结果重新调整源代码实验十实验十熟悉熟悉 css 基本

12、结构三基本结构三【实验目的实验目的】掌握 css 中设置字体和文本样式的方法【实验内容实验内容】8练习 css 的三种使用方式：外部样式表的使用、内部样式表的使用、内嵌样式的使用编写 css 代码，对网页的字体和文本样式进行设置【实验步骤实验步骤】1、 打开记事本程序，编写网页的基本结构2、 编写一段 css 代码3、 使用三种不同的方法将编写的 css 代码加入网页中4、 浏览器打开所保存的网页文件，检验是否成功将 css 加入网页中5、 根据结果重新调整源代码6、 向网页中插入一段文字7、 编写相应的 css 代码，对文本字体进行设置，分别将其设置为“times new roman” 、

13、“宋体” 、 “黑体”8、 修改 css 代码，对字体大小进行设置9、 修改 css 代码，设置文本段落缩进10、修改 css 代码，设置文本对齐方式，分别将文本设置为左对齐、右对齐、居中对齐11、文件保存为*. html12、浏览器打开所保存的网页文件，显示修改后的效果13、根据结果重新调整源代码实验十一实验十一熟悉熟悉 dreamweaver 使用（一）使用（一）【实验目的实验目的】掌握 dreamweaver 的基本使用方法掌握在 dreamweaver 创建站点的方法掌握在 dreamweaver 中添加页面元素的方法【实验内容实验内容】在本地磁盘建立文件夹，在此基础上利用 dream

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