Web程序设计实验手册20111216.docVIP

武汉工业学院 适用专业：计算机科学与技术专业 制 定 人：蒋丽华 教 研 室：计算机科学与技术教研室 数学与计算机学院 2011年12月 实验一 HTML语言的熟悉与应用 【实验目的】 通过学习和应用HTML的基本元素，了解并初步掌握静态网页的运行原理及其制作过程。 【实验内容】 建一个左右结构的框架结构，要求如下： 左边要求建立一个目录菜单，菜单的内容为教材书上的第二章的实例名。要求有不同的弹出方式（_top、_blank）。 右边为单击左边菜单所显示的相应内容。其形式如下图所示。 【实验报告要求】 1. 实验目的 2. 写出框架主要代码，并分别要求用不同的弹出方式。 3. 在浏览器中观察主页运行情况并给出运行界面。 4. 切换到HTML代码下，学习掌握各标记的属性及用法，给出相应注释。 5. 实验小结，包括实验中遇到的问题及解决方法。 【小技巧】 对于属性不必强行记忆，在用到的时候翻一下语法手册，多用几次就会熟练掌握了刚开始，可以先选择几个不错的网页形式加以模仿，完成自己的看到好的网页，在浏览器的“”菜单中选择“源文件”，就可以看到源程序，学习别人制作网页的一些方法和技巧，有时候通过这种办法可以学到书本上没有的东西，一些新功能也可以。实验二 HTML语言基础—表格应用 [实验目的] 使用记事本制作简单网页 文本格式标记和表格标记 学会使用链接标记和图像标记 [实验任务] 在“记事本”中写入简单的HTML语言，设计一个简单网页 学会使用HTML语言设计表格，显示学生寝室室友的基本情况 加入链接和图像标记，显示寝室室友的照片和邮箱 [实验步骤] 一、使用“记事本”制作网页 1．在桌面上创建学生工作目录（文件夹），命名规则为“学号(8位)+“-”+（实验序号）1”，如1”实验文件夹的名称，如图1所示效果。 图1在桌在建立第一次实验学生工作目录 2．打开“记事本”程序，编入下图2所示的HTML语言，完成后将该文本文件命名为“1-1.htm”，保存到上述对应工作目录中。 3．关闭文档，双击工作目录中的“1-1.htm”文件，显示效果如下图3所示。 图2 HTML代码 图3“1-1.htm”网页显示效果 二、文本格式和表格标记 使用HTML语言文本格式标记和表格标记编写一个网页，显示学生寝室室友的学号和姓名。 1．打开“记事本”程序，根据图4样例输入网页内容，并更新其中的学生信息为本人所在寝室或者同学的信息，结束后，以“1-2.htm”保存该文件到上述学生工作目录中，关闭文档。 2．双击“1-2.htm”，效果图如图5所示。 图4 HTML代码 图5 “1-2.htm”网页显示效果 三、链接标记和图像标记 1．在学生工作目录中建立子目录images，并获取上述网页中提到的同学电子版照片，并通过PhotoShop或者Microsoft Office Picture Manager将图片尺寸编辑为150（宽）*200（高），单位为px，并按01.jpg、02.jpg的规则进行命名。 2．通过“记事本”程序编写如图6所示的网页HTML源代码。 图6 HTML源代码 3．双击“1-3.htm”，效果如图7所示。 图7 “1-3.htm”显示效果图 [实验结论] 利用HTML语言设计网页的代码书写是非常麻烦的，通过此练习使学生们可以了解HTML语言的语法特点及基本语句。 表格深度实验： 请按如下结果制作网页 实验三 CSS样式表 【实验目的】 了解和掌握CSS样式的语法规则；熟练掌握CSS样式的对于页面显示控制的作用，通过CSS+DIV实现主页的显示 【实验内容】 通过CSS+DIV定制一个主页。主页页面的形式自定，但要求有以下内容： 浮动的广告图片 TAB方式按钮 两测有滚动广告图片（类似新浪） 【实验报告要求】 1. 实验目的 2. 程序流程图 3. 部分关键代码 实验四 Javascript语法 【实验目的】 了解和掌握Javascript的语法规则；熟练掌握Javascript语言的流程控制语句、过程控制和函数的语法及具体的使用方法。 【实验内容】 （1）实现定时猜数游戏。要求如下： 随机给出一个0至99(包括0和99)之间的数字，然后让猜什么数字。你可以随便猜一个数字，游戏会提示太大还是太小，从而缩小结果范围，最终“时间到使用函数”，毫秒数) 按钮的使能属性:disable属性值为true该按钮不可能使用；当其值为false时，该按钮可以接受使用。 【实验报告要求】 1. 实验目的 2. 程序流程图 3. 部分关键代码 4. 实验小结，包括实验中遇到的问题及解决方法，以及说明Windows方式、Web方式完成该程序的差别是什么。 实验五 Windows窗体控件的使用(一) 【实验目的】 熟悉掌握Wi