静态网页制作实验指导书.doc

PAGE  南阳理工学院 静态网页设计实验指导书 （2011版） 软件学院·数据库教研室 2011.9 目录  TOC \o 1-1 \p \h \z \u  HYPERLINK \l _Toc304662480 实验一　熟悉HTML网页和各种标签……………………  PAGEREF _Toc304662480 \h 3  HYPERLINK \l _Toc304662481 实验二　网页表格和表单的制作 …………………………. PAGEREF _Toc304662481 \h 5  HYPERLINK \l _Toc304662482 实验三　熟悉CSS基本结构 ………………………………. PAGEREF _Toc304662482 \h 7  HYPERLINK \l _Toc304662483 实验四　CSS背景样式控制 ………………………………. PAGEREF _Toc304662483 \h 9  HYPERLINK \l _Toc304662484 实验五　CSS字体和文本样式设置 ……………………... PAGEREF _Toc304662484 \h 11  HYPERLINK \l _Toc304662485 实验六　熟悉Dreamweaver使用（一）…………..  PAGEREF _Toc304662485 \h 12  HYPERLINK \l _Toc304662486 实验七　熟悉Dreamweaver使用（二）…………..  PAGEREF _Toc304662486 \h 16  HYPERLINK \l _Toc304662487 实验八　Javascript基本语法………………………...  PAGEREF _Toc304662487 \h 18  HYPERLINK \l _Toc304662488 实验九　Javascript函数 …………………………….. PAGEREF _Toc304662488 \h 19  HYPERLINK \l _Toc304662489 实验十　Javascript对象……………………………...  PAGEREF _Toc304662489 \h 21  静态网页设计实验指导书——软件学院·数据库教研室［2011版］ PAGE 21 实验一　熟悉HTML网页和各种标签 1、实验目的 1、掌握HTML文档的基本结构、标记和标记属性的概念及作用 2、学会使用文本编辑软件建立和编辑HTML文档的方法 3、能够使用标记在网页中插入和编辑基本的网页元素 4、学会使用超级链接的方法 2、实验内容及步骤 1、建立一个空的HTML文件 （1）在机器上建立自己的文件夹； （2）进入文件夹内，单击鼠标右键，建立一个文本文档； （3）在文档中输入HTML的基本标签，构建HTML文档的基本结构； （4）保存文本文档，为文档命名，并将文档的扩展名修改为.html或.htm； 2、修改HTML文件的标题 （1）用记事本程序打开HTML文件，在title标签中输入HTML文件的标题； （2）保存； 为HTML文件添加主体内容 （1）用记事本程序打开HTML文件，在body标签中输入HTML文件的主体内容； （2）保存； 4、对HTML文件的主体部分进行相应的排版 （1）使用标题标签设置文档的标题，并利用标题标签的align属性使标题居中显示； （2）使用段落标签为文档设置段落，并利用段落标签的align属性设置段落的对齐方式； （3）在文档中使用换行标签； （4）利用水平分割线标签，在文档中添加水平分割线； （5）使用字体样式标签设置文档的字体，并利用字体样式标签的face、size、color属性修改文档的字体、字号、颜色； 5、无序列表和有序列表的使用 （1）在网页中插入一个无序列表，将无序列表的type属性值设为”square”，效果如图1所示： 图1 （2）在网页中插入一个有序列表，将有序列表的type属性值设为”a”，效果如图2所示： 图2 6、利用img标签，为HTML文件设置背景图片 7、为HTML文件的标题设置超级链接，使其能够链接到相应的网页 实验二　网页表格和表单的制作 1、实验目的 掌握网页中表格的制作方法 掌握网页中表单的制作方法 2、实验内容及步骤 1、使用HTML标签设计表格，显示学生的基本情况，显示效果如图3所示 （1）制作一个空的HTML文档； （2）利用table标签在网页中插入一个5行4列的表格，并输入相应的内容； （3）利用table标签的align属性，使表格居中显示； （4）利用tr标签的ali