web程序设计实验手册.docxVIP

实验一 HTML 语言的熟悉与应用 【实验目的】 通过学习和应用 HTML 的基本元素，了解并初步掌握静态网页的运行原理及其制作过程。 【实验内容】 建一个左右结构的框架结构，要求如下： （1） 左边要求建立一个目录菜单， 菜单的内容为教材书上的第二章的实例 名。要求有不同的弹出方式（ _top、 _blank）。 （2） 右边为单击左边菜单所显示的相应内容。其形式如下图所示。 【实验报告要求】 实验目的 写出框架主要代码，并分别要求用不同的弹出方式。 在浏览器中观察主页运行情况并给出运行界面。 切换到 HTML 代码下，学习掌握各标记的属性及用法，给出相应注释。 实验小结，包括实验中遇到的问题及解决方法。 【小技巧】 对于一些生僻的标记属性不必强行记忆， 在用到的时候翻一下语法手册， 多用几次就会熟练掌握了； 刚开始，可以先选择几个不错的网页形式加以模仿， 完成自己的主页；看到好的网页，在浏览器的 “查看 ”菜单中选择 “源文件 ”，就可以看到源程序，学习别人制作网页的一些方法和技巧， 有时候通过这种办法可以学到书本上没有的东西，一些新功能也可以为你所用，出现在你的主页中。 实验二 HTML 语言基础 — 表格应用 [ 实验目的 ] 1． 使用记事本制作简单网页 2． 文本格式标记和表格标记 3． 学会使用链接标记和图像标记 [ 实验任务 ] 1． 在“记事本”中写入简单的 HTML 语言，设计一个简单网页 2． 学会使用 HTML 语言设计表格，显示学生寝室室友的基本情况 3． 加入链接和图像标记，显示寝室室友的照片和邮箱 [ 实验步骤 ] 一、使用“记事本”制作网页 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 所示。  提示：如果“我是你” ，我先研究一下 个代源代 是什么意思？因 重复的内容非常多！ html/html 一 、 head/head 一 title/title 一 、 body/body 一 table/table 表示表格、 tr/tr 表示表格一行、 td/td 表示一个 元格、 img src= ”?”表示 像 a href= ”?”XXX/a 表示 接 align 属性表示水平 方式 bgcolor 属性表示背景色 width 属性表示 度 mailto 表示启 件程序 图 7 “ 1-3.htm”显示效果图 [ 实验结论 ] 利用 HTML 语言设计网页的代码书写是非常麻烦的，通过此练习使学生们可以了解 HTML 语言的语法特点及基本语句。 表格深度实验： 请按如下结果制作网页 实验三 CSS 样式表 【实验目的】 了解和掌握 CSS 样式的语法规则；熟练掌握 CSS 样式的对于页面显示控制的作用，通过 CSS+DIV 实现主页的显示 【实验内容】 通过 CSS+DIV 定制一个主页。主页页面的形式自定，但要求有以下内容： （1） 浮动的广告图片 （2） TAB 方式按钮 （3） 两测有滚动广告图片（类似新浪） 【实验报告要求】 实验目的 程序流程图 部分关键代码 实验四 Javascript 语法 【实验目的】 了解和掌握 Javascript的语法规则；