2022年2022年静态网页制作实验指导书[收 .pdf

《2022年2022年静态网页制作实验指导书[收 .pdf》由会员分享，可在线阅读，更多相关《2022年2022年静态网页制作实验指导书[收 .pdf（22页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、南阳理工学院静态网页设计实验指导书（2011版）软件学院数据库教研室2011.9 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 22 页 - - - - - - - - - 目录实验一熟悉 HTML网页和各种标签 1实验二网页表格和表单的制作.3实验三熟悉 CSS基本结构.5实验四CSS 背景样式控制.7实验五CSS 字体和文本样式设置.9实验六熟悉 DREAMWEA VER 使用（一） . 10实验七熟悉 DREAMWEA VER 使用（二） . 14实验八JAVAS

2、CRIPT基本语法 . 16实验九JAVASCRIPT函数.17实验十JAVASCRIPT对象 . 19名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版1 实验一熟悉 HTML 网页和各种标签1、实验目的1、掌握 HTML 文档的基本结构、标记和标记属性的概念及作用2、学会使用文本编辑软件建立和编辑HTML 文档的方法3、能够使用标记在网页中插入和编辑基本的网页元素4、学会

3、使用超级链接的方法2、实验内容及步骤1、建立一个空的 HTML 文件（1）在机器上建立自己的文件夹；（2）进入文件夹内，单击鼠标右键，建立一个文本文档；（3）在文档中输入 HTML 的基本标签，构建HTML 文档的基本结构；（4）保存文本文档，为文档命名，并将文档的扩展名修改为.html 或.htm；2、修改 HTML 文件的标题（1）用记事本程序打开HTML 文件，在 标签中输入 HTML 文件的标题；（2）保存；3、为 HTML 文件添加主体内容（1）用记事本程序打开HTML 文件，在 标签中输入 HTML 文件的主体内容；（2）保存；4、对 HTML 文件的主体部分进行相应的排版（1）使

4、用标题标签设置文档的标题，并利用标题标签的align 属性使标题居中显示；（2）使用段落标签为文档设置段落，并利用段落标签的align 属性设置段落的对齐方式；（3）在文档中使用换行标签；（4）利用水平分割线标签，在文档中添加水平分割线；（5） 使用字体样式标签设置文档的字体，并利用字体样式标签的face、 size、color 属性修改文档的字体、字号、颜色；5、无序列表和有序列表的使用（1）在网页中插入一个无序列表，将无序列表的type 属性值设为 ” square” ，效果如图 1 所示：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - -

5、 - - - 名师精心整理 - - - - - - - 第 3 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版2 图 1 （2）在网页中插入一个有序列表，将有序列表的 type属性值设为 ” a” ，效果如图 2 所示：图 2 6、利用 img 标签，为 HTML 文件设置背景图片7、为 HTML 文件的标题设置超级链接，使其能够链接到相应的网页名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 22 页 - -

6、- - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版3 实验二网页表格和表单的制作1、实验目的掌握网页中表格的制作方法掌握网页中表单的制作方法2、实验内容及步骤1、使用 HTML 标签设计表格，显示学生的基本情况，显示效果如图3 所示（1）制作一个空的 HTML 文档；（2） 利用 table标签在网页中插入一个5 行 4 列的表格，并输入相应的内容；（3）利用 table标签的 align 属性，使表格居中显示；（4）利用 tr 标签的 align 属性，使单元格内容居中显示；（5）利用 tr 标签的 bgcolor 属性，使每一行显示不同的颜色；图 3 2、制

7、作一个简单的调查问卷页面，显示效果如图4 所示图 4 （1）制作一个空的 HTML 文档；（2）用 form 标签定义表单；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版4 （3）向表单中添加单行文本输入框，用于填写姓名；（4）向表单中添加单选框，用于选择性别；（5）向表单中添加下拉列表，用于选择户籍所在地；（6）向表单中添加复选框，用于选择用户兴趣；（7）向表单中添加多

8、行文本，用于用户留言；（8）向表单中添加提交和重置按钮；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版5 实验三熟悉 CSS基本结构1、实验目的了解 CSS的基本结构掌握在网页中加入CSS的方法掌握 CSS的布局方法2、实验内容及步骤1、练习 CSS的三种使用方式：行间样式表的使用、内部样式表的使用、外部样式表的使用（1）建立一个空的 HTML 文档；（2）向文档中输入文

9、字，并用段落标签p 对其进行排版；（3） 编写段 落 标签p 的行间 样式表 ， 将 color 属 性设 置为 red， 将background-color属性设置为 blue，实现对段落内容的设置。参考代码如下： （4） 编写段 落标签p 的内部 样式表 ， 将 color 属 性设 置为 red， 将background-color属性设置为 blue，实现对段落内容的设置。参考代码如下： pcolor:red;background-color:blue” （5）新建一个样式表文件， 编写段落标签 p 的外部样式表， 将 color 属性设置为 red，将 background-colo

10、r 属性设置为 blue，在 HTML 文档中嵌入该样式表实现对段落内容的设置。参考代码如下：pcolor:red;background-color:blue” 2、利用 Div+CSS 方法在网页中插入两个方块，效果如图5 所示（1）建立一个空的 HTML 文档；（2）向 HTML 文档中插入两个 div 标签；（3）编写 CSS 代码，将第一个div 标签的颜色设置为红色，将第二个div标签的颜色设置为蓝色；（4）编写 CSS 代码，将第一个 div 标签的高度和宽度设置为200像素，将第二个 div 标签的宽度设置为300 像素，高度设置为200 像素；名师资料总结 - - -精品资料欢

11、迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版6 图 5 3、在上一步骤的基础上，使两个div 块并列显示于一行，效果如图6 所示（1）打开上一步中的HTML 文件；（2）修改第一个 div 标签的 CSS代码，加入 float 属性，并使其值为left；图 6 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - -

12、- - - 第 8 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版7 实验四CSS背景样式控制1、实验目的掌握利用 CSS 设置网页背景的方法2、实验内容及步骤1、设置网页的背景颜色（1）建立一个空的 HTML 网页；（2）编写相应的 CSS代码，将网页的背景颜色分别设置为红色、绿色、蓝色，参考代码如下： bodybackground-color:#ff0000; bodybackground-color:#00ff00; bodybackground-color:#0000ff; 2、设置网页的背景图片（1）编写相应的 CSS代码

13、，为网页设置背景图片，使图片平铺，参考代码如下： .one background-image:url(“ gift.jpg” ); background-repeat:repeat; （2）编写相应的 CSS代码，为网页设置背景图片，使图片不平铺，参考代码如下： .two background-image:url(“ gift.jpg” ); background-repeat:no-repeat; （3） 编写相应的 CSS代码，为网页设置背景图片， 使图片在水平方向平铺，参考代码如下：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - -

14、- - 名师精心整理 - - - - - - - 第 9 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版8 .three background-image:url(“ gift.jpg” ); background-repeat:repeat-x; （4） 编写相应的 CSS代码，为网页设置背景图片， 使图片在垂直方向平铺，参考代码如下： .four background-image:url(“ gift.jpg” ); background-repeat:repeat-y; 名师资料总结 - - -精品资料欢迎下载 - - - -

15、 - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版9 实验五CSS字体和文本样式设置1、实验目的掌握 CSS中设置字体的方法掌握 CSS中设置文本样式的方法2、实验内容及步骤1、利用 CSS设置网页中字体的样式（1）建立一个空的 HTML 网页；（2）编写相应的 CSS 代码，将网页中的字体设置为宋体，参考代码如下： .onefont-family: ” 宋体” ; （3）修改 CSS代码，将网页中的字体大小设置为18 像素，参

16、考代码如下： .onefont-size:18px; （4）修改 CSS 代码，将网页中的字体颜色设置为红色，参考代码如下： .onecolor:” red” ; 2、利用 CSS设置网页中文本样式（1）建立一个空的 HTML 网页；（2）编写相应的 CSS 代码，将网页中的段落缩进20 个像素，参考代码如下： .onetext-indent:20px; （3）修改 CSS 代码，将网页中字符之间的间隔设置为10 像素，参考代码如下： .oneletter-spacing:10px; （4）修改 CSS代码，将网页中的段落行距设置为50 像素，参考代码如下： .oneline-height:5

17、0px; 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版10 实验六熟悉 Dreamweaver 使用（一）1、实验目的掌握 Dreamweaver的基本使用方法掌握在 Dreamweaver创建站点的方法掌握在 Dreamweaver中添加页面元素的方法2、实验内容及步骤1、利用 Dreamweaver创建一个本地站点（1）建立包含站点文件的文件夹；（2）打开 Dre

18、amweaver ，执行“站点 /新建站点”菜单命令，打开“未命名站点 1 的站点定义为”对话框，如图7 所示；图 7 （3）在“您打算为您的站点起什么名字？”编辑框中输入站点的名字；（4）单击“下一步”按钮，询问是否使用服务器技术。由于实例全部是静态网页，因此选择“否，我不想使用服务器技术”，单击选项按钮。如图8 所示；（5）单击“下一步”按钮，询问文件储存在计算机的位置，如图9 所示；单击所编辑框右侧的文件夹按钮， 打开 “选择站点未命名站点1 的本地根文件夹”对话框，选择第一步中建立的文件夹；（6）单击“下一步”按钮，询问连接到远程服务器的方式，如图10所示。在下列表中选择“无”选项；（

19、7）单击“下一步” 按钮，在对话框中显示前面定置的所有信息，单击“完成”按钮；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版11 图 8 图 9 2、为网站创建首页，并向其中插入文本元素和图像元素（1）打开“文件”面板，显示第一步中新建站点信息。在站点上点击鼠标右键，选择“新建文件”菜单项，建立index.html 文件；（2）双击 index.htm 文件，进入网页的

20、设计视图；（3）在网页中确定插入点，并输入一段文字；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版12 （4）使用字体属性面板， 将输入的文字的字体设置为 “宋体”，字体大小设置为 20px，并为输入的文字设置标题；（5）执行“插入 /图像”菜单命令，向网页中插入图像；（6）使用图像属性面板，设置插入的图像的大小；（7）为文字标题设置超链接，使其能够链接到相应的网址；3

21、、制作一个简单的提交留言页面，最终效果如图11所示（1）新建一个空的网页文件；（2）执行“插入 /表单”菜单命令，插入一个表单；（3）将光标放置在表单内，插入一个5 行 2 列的表格，并将表格的第1、第 5 行进行合并；（4）在表格的第 1 行插入“提交留言”；（5）在表格第 2 行第 1 列插入“姓名”，第 2 列插入文本域；（6）在表格第 3 行第 1 列插入“密码” ，第 2 列插入文本域， 并在属性面板中将文本类型设置为“密码” ；（7）在表格第 4 行第 1 列插入“留言”，第 2 列插入文本区域；（8）在表格第 5 行插入“提交”和“重置”按钮；图 10 名师资料总结 - - -精

22、品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版13 图 11 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 15 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版14 实验七熟悉 Dreamweaver 使用（二）1、实验目

23、的掌握在 Dreamweaver中使用 CSS的方法2、实验内容及步骤1、设置网页中的文字样式（1）新建一个空的网页文件；（2）打开网页的设计视图，向网页中输入相应的文本信息；（3）执行“文本 /CSS 样式/新建”命令，弹出“新建CSS规则”对话框，新建类选择器 one，如图 12所示；图 12 （4）单击“确定”按钮，弹出“one的 CSS 规则定义”对话框，将字体设置为“宋体”，大小设置为20px，颜色设置为 #FF0000，单击“确定”按钮，完成 CSS规则定义；（5）选定文本，单击右键，在弹出的菜单中选择CSS 样式-one，保存网页；2、为网页设置背景图片（1）打开第 1 步中建立

24、网页文件；（2）执行“文本 /CSS 样式/新建”命令，弹出“新建CSS规则”对话框，为 body 标签建立 CSS样式，如图 13 所示；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版15 图 13 （3）单击“确定”按钮，弹出“ body 的 CSS 规则定义”对话框，选择“背景”分类，如图14 所示，单击背景图像编辑框右侧的浏览按钮为网页选择背景图片，单击“确定”

25、按钮，完成CSS 规则定义；图 14 （4）保存并预览；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 17 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版16 实验八Javascript基本语法1、实验目的熟悉 Javascript基本语法掌握在网页中加入Javascript语句的方法熟悉 Javascript对程序流程的控制2、实验内容及步骤1、向网页中插入 Javascript语句编写（1）新建一个空的网页文件；（2

26、）编写 Javascript代码，并将其插入到网页文件的head标签中，参考代码如下； var mydate = new Date(); var str =” 欢迎你的光临！ ” ; alert(“ 今天是： nn” +mydate+” nn” +str); （3）保存并预览；2、练习 Javascript控制语句（1）新建一个空的网页文件；（2）编写 Javascript代码，使其能够根据当前时间， 在网页中显示不同的问候语，参考代码如下； var curday = new Date(); hours = curday .getHours(); if(hours=12) alert(“ 早上

27、好！ ” ); else if(hours=18) alert(“ 中午好！ ” ); else alert(“ 晚上好！ ” ); （3）保存并预览；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 18 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版17 实验九Javascript函数1、实验目的掌握 Javascript内置函数的使用方法掌握如何在 Javascript中定义自己的函数掌握 Javascript的事件处

28、理机制2、实验内容及步骤1、编写计算两个数的和的网页，最终效果如图15 所示图 15 （1）建立一个空的网页文件（2）向网页中插入一级标题：计算两个数的和；（3）向网页中插入一个表单；（4）向表单中插入一个3 行 2 列的表格，合并表格的第3 行；（5）在表格的第 1 行第 1 列输入“加数 1” ，第 1 行第 2 列插入一个文本域；（6）在表格的第 2 行第 1 列输入“加数 2” ，第 2 行第 2 列插入一个文本域；（7）在表格的第 3 行插入一个“计算”按钮；（8）为“计算”按钮编写计算两个数之和的函数sum，实现计算两个文本域中值之和，参考代码如下； function sum(fo

29、rm) var x = parseInt(form.num1.value); var y = parseInt(form.num2.value); var z = x+y; alert(计算结果为： +z); （9）在“计算”按钮的onclick 事件中调用 sum 函数；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 19 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版18 （10）保存并预览；名师资料总结 - - -精

30、品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 20 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版19 实验十Javascript对象1、实验目的掌握 Javascript常用内置对象的使用掌握 Javascript浏览器对象的使用2、实验内容及步骤1、编写计算一个数的m次幂的网页，最终效果如图16 所示图 16 （1）建立一个空的网页文件（2）向网页中插入一级标题：计算n的 m 次幂；（3）向网页中插入一个表单；（4）向表单中插入一个3 行 2

31、 列的表格，合并表格的第3 行；（5）在表格的第 1 行第 1 列输入“ n” ，第 1 行第 2 列插入一个文本域；（6）在表格的第 2 行第 1 列输入“ m” ，第 2 行第 2 列插入一个文本域；（7）在表格的第 3 行插入一个“计算”按钮；（8）为“计算”按钮编写计算n的 m 次幂的函数 pow，参考代码如下； function pow(form) var x = parseInt(form.num1.value); var y = parseInt(form.num2.value); var z = Math.pow(x,y); alert(计算结果为： +z); （9）在“计算”

32、按钮的onclick 事件中调用 pow 函数；（10）保存并预览；2、利用浏览器对象 Window 的 open()方法、close()方法实现窗口的打开与关名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 21 页，共 22 页 - - - - - - - - - 静态网页设计实验指导书软件学院数据库教研室2011 版20 闭，显示效果如图17 所示。图 17 （1）建立一个空的网页文件（2）编写打开窗口的JavaScript函数 openWindow()，参考代码如下： func

33、tion openWindow() window.open(http:/); （3）编写打开窗口的JavaScript函数 closeWindow()，参考代码如下： function closeWindow() window.close(); （4）向网页中插入“打开窗口”按钮；（5）向网页中插入“关闭窗口”按钮；（6）在“打开窗口”按钮的onclick 事件中调用 openWindow()函数；（7）在“关闭窗口”按钮的onclick 事件中调用 closeWindow()函数；名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 22 页，共 22 页 - - - - - - - - -