web程序设计实验html,web程序设计实验手册

web程序设计实验手册

(11页)

本资源提供全文预览，点击全文预览即可全文预览,如果喜欢文档就下载吧，查找使用更方便哦！

15.9 积分

实验一实验一 HTML 语言的熟悉与应用语言的熟悉与应用【实验目的】 通过学习和应用 HTML 的基本元素，了解并初步掌握静态网页的运行原理 及其制作过程。【实验内容】 建一个左右结构的框架结构，要求如下： (1) 左边要求建立一个目录菜单，菜单的内容为教材书上的第二章的实 例名。要求有不同的弹出方式(_top、_blank)。 (2) 右边为单击左边菜单所显示的相应内容。其形式如下图所示。【实验报告要求】 1. 实验目的 2. 写出框架主要代码，并分别要求用不同的弹出方式。 3. 在浏览器中观察主页运行情况并给出运行界面。 4. 切换到 HTML 代码下，学习掌握各标记的属性及用法，给出相应注释。 5. 实验小结，包括实验中遇到的问题及解决方法。 【小技巧】 对于一些生僻的标记属性不必强行记忆，在用到的时候翻一下语法手册， 多用几次就会熟练掌握了；刚开始，可以先选择几个不错的网页形式加以模仿， 完成自己的主页；看到好的网页，在浏览器的“查看”菜单中选择“源文件”，就 可以看到源程序，学习别人制作网页的一些方法和技巧，有时候通过这种办法 可以学到书本上没有的东西，一些新功能也可以为你所用，出现在你的主页中。实验二实验二 HTML 语言基础语言基础—表格应用表格应用[实验目的] 1． 使用记事本制作简单网页 2． 文本格式标记和表格标记 3． 学会使用链接标记和图像标记 [实验任务] 1． 在“记事本”中写入简单的 HTML 语言，设计一个简单网页 2． 学会使用 HTML 语言设计表格，显示学生寝室室友的基本情况 3． 加入链接和图像标记，显示寝室室友的照片和邮箱 [实验步骤] 一、使用“记事本”制作网页 1．在桌面上创建学生工作目录(文件夹) ，命名规则为“学号(8 位)+“-”+(实验序 号)1” ，如“20090101-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 所示。提示：如果提示：如果““我是你我是你”” ，我先研究一下这个，我先研究一下这个 代码是什么意思？因为重复的内容非常多！代码是什么意思？因为重复的内容非常多！ 一对、一对、一对一对 一对、一对、一对一对 表示表格、表示表格、 表示表格一行、表示表格一行、 表示一个单元格、表示一个单元格、 表示图像标记表示图像标记 XXX表示链接标记表示链接标记 align 属性表示水平对齐方式属性表示水平对齐方式 bgcolor 属性表示背景色属性表示背景色 width 属性表示宽度属性表示宽度 mailto 表示启动邮件程序表示启动邮件程序图 7 “1-3.htm”显示效果图[实验结论] 利用 HTML 语言设计网页的代码书写是非常麻烦的，通过此练习使学生们可以了解 HTML 语言的语法特点及基本语句。 表格深度实验： 请按如下结果制作网页实验三实验三 CSS 样式表样式表【实验目的】了解和掌握 CSS 样式的语法规则；熟练掌握 CSS 样式的对于页面显示控 制的作用，通过 CSS+DIV 实现主页的显示 【实验内容】 通过 CSS+DIV 定制一个主页。主页页面的形式自定，但要求有以下内容：(1) 浮动的广告图片 (2) TAB 方式按钮 (3) 两测有滚动广告图片(类似新浪) 【实验报告要求】 1. 实验目的 2. 程序流程图 3. 部分关键代码实验四实验四 Javascript 语法语法【实验目的】 了解和掌握 Javascript 的语法规则；熟练掌握 Javascript 语言的流程控制语 句、过程控制和函数的语法及具体的使用方法。 【实验内容】 (1)实现定时猜数游戏。要求如下：随机给出一个 0 至 99(包括 0 和 99)之间的数字，然后让用户在规定的时规定的时间间内猜出什么数字。你可以随便猜一个数字，游戏会提示太大还是太小，从而缩小结果范围，最终得出正确结果。界面设计参考如下图所示。提示： (1) 定时函数：setTimeout(“时间到使用函数”，毫秒数) (2) 按钮的使能属性:disable 属性值为 true 该按钮不可能使用；当其值 为 false 时，该按钮可以接受使用。 【实验报告要求】 1. 实验目的 2. 程序流程图 3. 部分关键代码 4. 实验小结，包括实验中遇到的问题及解决方法，以及说明 Windows 方式、 Web 方式完成该程序的差别是什么。实验五 Windows 窗体控件的使用(一)【实验目的】 熟悉掌握 Windows 窗体的文本控件、标签的控件、命令按钮控件、列表控 件等控件的属性及使用方法。 【实验内容】 电影院售票窗体界面的设计与实现。 基本要求： 1、电影票种类有二，包厢类票单价 50 RMB，普座票单价 35 RMB。使用 RadioButton 控件进行电影票种类的选择，根据选择情况在一个 Label 控件 上显示该类票的单价。 2、购票数量在 TextBox 控件中输入。 3、点击确定按钮，应付金额显示在另一 Label 控件中。【实验报告要求】 1. 实验目的 2. 程序流程 3. 界面操作说明 4. 实验小结，包括实验中遇到的问题及解决方法实验六 Windows 窗体的使用(二) 【实验目的】 熟练掌握 Windows 窗体控件的属性及使用方法。【实验内容】 简单计算器的实现。 基本要求： 具备简单计算器的基本按键，包括 10 个数字键、加减乘除键、sqrt 键、1/x 键、＝键、Backspace 键、Clear 键，CE 键(Clear Entry 局部清除键)，利用 Button 控件完成，布局合理美观。【实验报告要求】 1. 实验目的 2. 程序流程 3. 部分代码 4. 实验小结，包括实验中遇到的问题及解决方法实验七 ASP.NET 服务器控件的使用 【实验目的】 了解和掌握几种 ASP.NET 服务器控件的使用，尤其是服务器验证控件的特 点及其应用，现时掌握数据库的连接方式。【实验内容】 制作一个免费邮箱的登录页面，页面布局自定，登录成功后给出一个登录 成功页面。另外，如果用户没有注册名时，允许用户进行注册，注册时不允许 出现重复的用户名，注册要求用户填写下列资料，使用恰当的服务器验证控件 完成输入信息的验证工作： 1. 用户名，只能由字母、数字和下划线组成，且首字符不能为数字； 2. 密码，要求在 6 到 15 位之间； 3. 确认密码，必须和密码一致； 4. 查询密码问题，可任意； 5. 查询密码答案，必须 8 位以上； 6. 电话按要求的格式输入。例如：02787654321 或者(027)87654321 或 者 027-87654321 当用户输入与要求不符时，用 Label 控件给出必要提示。【实验报告要求】 1. 实验目的 2. 程序流程图 3. 部分代码 4. 实验小结，包括实验中遇到的问题及解决方法实验八、九、十 基于 ASP.NET 的电子通信录系统的设计与实现 【实验目的】 通过制作一个电子通信录系统来掌握使用 ADO.NET 访问与操纵数据库的 方法。 【实验内容】 一、电子通信录包括三部分信息： 1. 用户登录注册信息 2. 通信组信息 3. 联系人信息 数据结构描述：数据库名－Correspondence 用户名数据表结构(TableUser) 字段名说明数据类型长度允许空值是否主键 UserID用户名 Password密码 CreatTime用户建立时间通信组数据表结构 (TableGroup) 字段名说明数据类型长度允许空值是否主键 GID通信组 ID UserID用户名 GName通信组名 GDescription通信组描述联系人数据表结构 (TableUser) 字段名说明数据类型长度允许空值是否主键 UID联系人 ID GID所在通信组 ID Name联系人姓名 Gender联系人性别 Address联系人地址 PostCode邮政编码 Telephone联系人电话 Mobile联系人手机 E-mail联系人 E-mail 说明：不同的用户拥有不同的联系组，不同的联系组用不同的联系人。 二、电子通信录系统应至少包括下列功能页面(页面布局自定)： 1. 用户首先要进行注册，注册成功后，还要允许用户进行密码修改。 2. 通信组的创建 AddGroup.aspx 3. 通信组的显示与维护 AltGroup.aspx(包括通信组信息的删除和修改) 通信组是根据联系人之间的关系建立不同性质的 Group，以上页面主要 访问数据库中的 TableGroup 数据表。页面主要功能分别为：组的创建和维 护。比如，可以建立亲友通信组、工作通信组、同学通信组以及其他类型通 信组等。 4. 联系人信息的添加 AddPerson.aspx5. 联系人信息的显示与维护 AltPerson.aspx(包括联系人信息的删除和修改) 根据联系人与通信组的关系，对联系人进行分类添加和维护，以上页面 涉及到对 TableUser 数据表的操作，同时需要考虑与 TableGroup 数据表之间的 关系。 6. 查找通信录 Find.aspx设置查找条件，用户可以直接输入查询关键字，也可以先选择通信组， 再输入查询关键字，系统返回查询结果，可以绑定 DataGrid 控件来显示查询结 果。扩展要求：如果时间允许，可制作管理员登录页面，被授权的用户才有资 格创建和维护信息，普通用户只可进行信息查询。 小提示：页面中可适当加入一些 ASP.NET 的验证控件，帮助检查用户输入 的有效性。【设计文档】 按照软件工程思想规范整个系统的开发流程，并反映在设计文档中，主要 包括下列步骤： 1. 需求分析 2. 系统框架 3. 模块设计 4. 编码实现 5. 系统测试和发布等 关 键 词： web 程序设计 实验 手册

 天天文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。