web程序设计实验手册

《web程序设计实验手册》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实验一HTML语言的熟悉与应用【实验目的】通过学习和应用HTML的基本元素，了解并初步掌握静态网页的运行原理及其制作过程。【实验内容】建一个左右结构的框架结构，要求如下：（1）左边要求建立一个目录菜单，菜单的内容为教材书上的第二章的实例名。要求有不同的弹出方式（_top、_blank）。（2）右边为单击左边菜单所显示的相应内容。其形式如下图所示。【实验报告要求】1.实验目的2.写出框架主要代码，并分别要求用不同的弹出方式。3.在浏览器中观察主页运行情况并给出运行界面。4.切换到HTML代码下，学习掌握各标记的属性及用法，给出相应注释。5.实验小结，包括实验中遇到的问题及解

2、决方法。【小技巧】对于一些生僻的标记属性不必强行记忆，在用到的时候翻一下语法手册，多用几次就会熟练掌握了；刚开始，可以先选择几个不错的网页形式加以模仿，完成自己的主页；看到好的网页，在浏览器的“查看”菜单中选择“源文件”，就可以看到源程序，学习别人制作网页的一些方法和技巧，有时候通过这种办法可以学到书本上没有的东西，一些新功能也可以为你所用，出现在你的主页中。实验二HTML语言基础—表格应用[实验目的]1．使用记事本制作简单网页2．文本格式标记和表格标记3．学会使用链接标记和图像标记[实验任务]1．在“记事本”中写入简单的HTML语言，设计一个简单网页2．学会使用HTML

3、语言设计表格，显示学生寝室室友的基本情况3．加入链接和图像标记，显示寝室室友的照片和邮箱[实验步骤]一、使用“记事本”制作网页1．在桌面上创建学生工作目录（文件夹），命名规则为“学号(8位)+“-”+（实验序号）1”，如“20090101-1”实验文件夹的名称，如图1所示效果。图1在桌在建立第一次实验学生工作目录2．打开“记事本”程序，编入下图2所示的HTML语言，完成后将该文本文件命名为“1-1.htm”，保存到上述对应工作目录中。3．关闭文档，双击工作目录中的“1-1.htm”文件，显示效果如下图3所示。图2HTML代码图3“1-1.htm”网页显示效果二、文本格式和

4、表格标记使用HTML语言文本格式标记和表格标记编写一个网页，显示学生寝室室友的学号和姓名。1．打开“记事本”程序，根据图4样例输入网页内容，并更新其中的学生信息为本人所在寝室或者同学的信息，结束后，以“1-2.htm”保存该文件到上述学生工作目录中，关闭文档。2．双击“1-2.htm”，效果图如图5所示。图4HTML代码图5“1-2.htm”网页显示效果三、链接标记和图像标记1．在学生工作目录中建立子目录images，并获取上述网页中提到的同学电子版照片，并通过PhotoShop或者MicrosoftOfficePictureManager将图片尺寸编辑为150（宽）*2

5、00（高），单位为px，并按01.jpg、02.jpg的规则进行命名。2．通过“记事本”程序编写如图6所示的网页HTML源代码。提示：如果“我是你”，我先研究一下这个代码是什么意思？因为重复的内容非常多！一对、一对一对、一对