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

资源描述

南阳理工学院静态网页设计实验指导书（2011版）软件学院·数据库教研室 2011.9 目录实验一　熟悉HTML网页和各种标签…………………… 3 实验二　网页表格和表单的制作 ………………………….5 实验三　熟悉CSS基本结构 ……………………………….7 实验四　CSS背景样式控制 ……………………………….9 实验五　CSS字体和文本样式设置 ……………………...11 实验六　熟悉DREAMWEAVER使用（一）………….. 12 实验七　熟悉DREAMWEAVER使用（二）………….. 16 实验八　JAVASCRIPT基本语法………………………... 18 实验九　JAVASCRIPT函数 ……………………………..19 实验十　JAVASCRIPT对象……………………………... 21 静态网页设计实验指导书——软件学院·数据库教研室［2011版］实验一　熟悉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）保存； 3、为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标签的align属性，使单元格内容居中显示；（5）利用tr标签的bgcolor属性，使每一行显示不同的颜色；图3 2、制作一个简单的调查问卷页面，显示效果如图4所示图4 （1）制作一个空的HTML文档；（2）用form标签定义表单；（3）向表单中添加单行文本输入框，用于填写姓名；（4）向表单中添加单选框，用于选择性别；（5）向表单中添加下拉列表，用于选择户籍所在地；（6）向表单中添加复选框，用于选择用户兴趣；（7）向表单中添加多行文本，用于用户留言；（8）向表单中添加提交和重置按钮；实验三　熟悉CSS基本结构 1、实验目的了解CSS的基本结构掌握在网页中加入CSS的方法掌握CSS的布局方法 2、实验内容及步骤 1、练习CSS的三种使用方式：行间样式表的使用、内部样式表的使用、外部样式表的使用（1）建立一个空的HTML文档；（2）向文档中输入文字，并用段落标签p对其进行排版；（3）编写段落标签p的行间样式表，将color属性设置为red，将background-color属性设置为blue，实现对段落内容的设置。参考代码如下： <p style=”color:red;background-color:blue”></p> （4）编写段落标签p的内部样式表，将color属性设置为red，将background-color属性设置为blue，实现对段落内容的设置。参考代码如下： <style type=”text/css”> p{color:red;background-color:blue”} </style> （5）新建一个样式表文件，编写段落标签p的外部样式表，将color属性设置为red，将background-color属性设置为blue，在HTML文档中嵌入该样式表实现对段落内容的设置。参考代码如下： p{color:red;background-color:blue”} 2、利用Div+CSS方法在网页中插入两个方块，效果如图5所示（1）建立一个空的HTML文档；（2）向HTML文档中插入两个div标签；（3）编写CSS代码，将第一个div标签的颜色设置为红色，将第二个div标签的颜色设置为蓝色；（4）编写CSS代码，将第一个div标签的高度和宽度设置为200像素，将第二个div标签的宽度设置为300像素，高度设置为200像素；图5 3、在上一步骤的基础上，使两个div块并列显示于一行，效果如图6所示（1）打开上一步中的HTML文件；（2）修改第一个div标签的CSS代码，加入float属性，并使其值为left；图6 实验四　CSS背景样式控制 1、实验目的掌握利用CSS设置网页背景的方法 2、实验内容及步骤 1、设置网页的背景颜色（1）建立一个空的HTML网页；（2）编写相应的CSS代码，将网页的背景颜色分别设置为红色、绿色、蓝色，参考代码如下： <style type=”text/css”> body{background-color:#ff0000;} </style> <style type=”text/css”> body{background-color:#00ff00;} </style> <style type=”text/css”> body{background-color:#0000ff;} </style> 2、设置网页的背景图片（1）编写相应的CSS代码，为网页设置背景图片，使图片平铺，参考代码如下： <style type=”text/css”> .one{ background-image:url(“gift.jpg”); background-repeat:repeat; } </style> （2）编写相应的CSS代码，为网页设置背景图片，使图片不平铺，参考代码如下： <style type=”text/css”> .two{ background-image:url(“gift.jpg”); background-repeat:no-repeat; } </style> （3）编写相应的CSS代码，为网页设置背景图片，使图片在水平方向平铺，参考代码如下： <style type=”text/css”> .three{ background-image:url(“gift.jpg”); background-repeat:repeat-x; } </style> （4）编写相应的CSS代码，为网页设置背景图片，使图片在垂直方向平铺，参考代码如下： <style type=”text/css”> .four{ background-image:url(“gift.jpg”); background-repeat:repeat-y; } </style> 实验五　CSS字体和文本样式设置 1、实验目的掌握CSS中设置字体的方法掌握CSS中设置文本样式的方法 2、实验内容及步骤 1、利用CSS设置网页中字体的样式（1）建立一个空的HTML网页；（2）编写相应的CSS代码，将网页中的字体设置为宋体，参考代码如下： <style type=”text/css”> .one{font-family:”宋体”;} </style> （3）修改CSS代码，将网页中的字体大小设置为18像素，参考代码如下： <style type=”text/css”> .one{font-size:18px;} </style> （4）修改CSS代码，将网页中的字体颜色设置为红色，参考代码如下： <style type=”text/css”> .one{color:”red”;} </style> 2、利用CSS设置网页中文本样式（1）建立一个空的HTML网页；（2）编写相应的CSS代码，将网页中的段落缩进20个像素，参考代码如下： <style type=”text/css”> .one{text-indent:20px;} </style> （3）修改CSS代码，将网页中字符之间的间隔设置为10像素，参考代码如下： <style type=”text/css”> .one{letter-spacing:10px;} </style> （4）修改CSS代码，将网页中的段落行距设置为50像素，参考代码如下： <style type=”text/css”> .one{line-height:50px;} </style> 实验六　熟悉Dreamweaver使用（一） 1、实验目的掌握Dreamweaver的基本使用方法掌握在Dreamweaver创建站点的方法掌握在Dreamweaver中添加页面元素的方法 2、实验内容及步骤 1、利用Dreamweaver创建一个本地站点（1）建立包含站点文件的文件夹；（2）打开Dreamweaver，执行“站点/新建站点”菜单命令，打开“未命名站点1的站点定义为”对话框，如图7所示；图7 （3）在“您打算为您的站点起什么名字？”编辑框中输入站点的名字；（4）单击“下一步”按钮，询问是否使用服务器技术。由于实例全部是静态网页，因此选择“否，我不想使用服务器技术”，单击选项按钮。如图8所示；（5）单击“下一步”按钮，询问文件储存在计算机的位置，如图9所示；单击所编辑框右侧的文件夹按钮，打开“选择站点未命名站点1的本地根文件夹”对话框，选择第一步中建立的文件夹；（6）单击“下一步”按钮，询问连接到远程服务器的方式，如图10所示。在下列表中选择“无”选项；（7）单击“下一步”按钮，在对话框中显示前面定置的所有信息，单击“完成”按钮；图8 图9 2、为网站创建首页，并向其中插入文本元素和图像元素（1）打开“文件”面板，显示第一步中新建站点信息。在站点上点击鼠标右键，选择“新建文件”菜单项，建立index.html文件；（2）双击index.htm文件，进入网页的设计视图；（3）在网页中确定插入点，并输入一段文字；（4）使用字体属性面板，将输入的文字的字体设置为“宋体”，字体大小设置为20px，并为输入的文字设置标题；（5）执行“插入/图像”菜单命令，向网页中插入图像；（6）使用图像属性面板，设置插入的图像的大小；（7）为文字标题设置超链接，使其能够链接到相应的网址； 3、制作一个简单的提交留言页面，最终效果如图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 图11 实验七　熟悉Dreamweaver使用（二） 1、实验目的掌握在Dreamweaver中使用CSS的方法 2、实验内容及步骤 1、设置网页中的文字样式（1）新建一个空的网页文件；（2）打开网页的设计视图，向网页中输入相应的文本信息；（3）执行“文本/CSS样式/新建”命令，弹出“新建CSS规则”对话框，新建类选择器one，如图12所示；图12 （4）单击“确定”按钮，弹出“one的CSS规则定义”对话框，将字体设置为“宋体”，大小设置为20px，颜色设置为#FF0000，单击“确定”按钮，完成CSS规则定义；（5）选定文本，单击右键，在弹出的菜单中选择CSS样式->one，保存网页； 2、为网页设置背景图片（1）打开第1步中建立网页文件；（2）执行“文本/CSS样式/新建”命令，弹出“新建CSS规则”对话框，为body标签建立CSS样式，如图13所示；图13 （3）单击“确定”按钮，弹出“body的CSS规则定义”对话框，选择“背景”分类，如图14所示，单击背景图像编辑框右侧的浏览按钮为网页选择背景图片，单击“确定”按钮，完成CSS规则定义；图14 （4）保存并预览；实验八　Javascript基本语法 1、实验目的熟悉Javascript基本语法掌握在网页中加入Javascript语句的方法熟悉Javascript对程序流程的控制 2、实验内容及步骤 1、向网页中插入Javascript语句编写（1）新建一个空的网页文件；（2）编写Javascript代码，并将其插入到网页文件的head标签中，参考代码如下； <script type=”text/javascript”> var mydate = new Date(); var str =”欢迎你的光临！”; alert(“今天是：\n\n”+mydate+”\n\n”+str); </script> （3）保存并预览； 2、练习Javascript控制语句（1）新建一个空的网页文件；（2）编写Javascript代码，使其能够根据当前时间，在网页中显示不同的问候语，参考代码如下； <script type=”text/javascript”> var curday = new Date(); hours = curday.getHours(); if(hours<=12) {alert(“早上好！”);} else if(hours<=18) {alert(“中午好！”);} else {alert(“晚上好！”);} </script> （3）保存并预览；实验九　Javascript函数 1、实验目的掌握Javascript内置函数的使用方法掌握如何在Javascript中定义自己的函数掌握Javascript的事件处理机制 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，实现计算两个文本域中值之和，参考代码如下； <script type="text/javascript"> function sum(form){ var x = parseInt(form.num1.value); var y = parseInt(form.num2.value); var z = x+y; alert("计算结果为："+z); } </script> （9）在“计算”按钮的onclick事件中调用sum函数；（10）保存并预览；实验十　Javascript对象 1、实验目的掌握Javascript常用内置对象的使用掌握Javascript浏览器对象的使用 2、实验内容及步骤 1、编写计算一个数的m次幂的网页，最终效果如图16所示图16 （1）建立一个空的网页文件（2）向网页中插入一级标题：计算n的m次幂；（3）向网页中插入一个表单；（4）向表单中插入一个3行2列的表格，合并表格的第3行；（5）在表格的第1行第1列输入“n”，第1行第2列插入一个文本域；（6）在表格的第2行第1列输入“m”，第2行第2列插入一个文本域；（7）在表格的第3行插入一个“计算”按钮；（8）为“计算”按钮编写计算n的m次幂的函数pow，参考代码如下； <script type="text/javascript"> function pow(form){ var x = parseInt(form.num1.value); var y = parseInt(form.num2.value); var z = Math.pow(x,y); alert("计算结果为："+z); } </script> （9）在“计算”按钮的onclick事件中调用pow函数；（10）保存并预览； 2、利用浏览器对象Window的open()方法、close()方法实现窗口的打开与关闭，显示效果如图17所示。图17 （1）建立一个空的网页文件（2）编写打开窗口的JavaScript函数openWindow()，参考代码如下： <script type="text/javascript"> function openWindow(){ window.open(""); } </script> （3）编写打开窗口的JavaScript函数closeWindow()，参考代码如下： <script type="text/javascript"> function closeWindow(){ window.close(); } </script> （4）向网页中插入“打开窗口”按钮；（5）向网页中插入“关闭窗口”按钮；（6）在“打开窗口”按钮的onclick事件中调用openWindow()函数；（7）在“关闭窗口”按钮的onclick事件中调用closeWindow()函数； 20

展开阅读全文