web程序设计实验二

web程序设计实验二
web程序设计实验二

实验二HTML表单实验

学号:092715206 姓名:崔兆文

1.1 实验目的

通过实验掌握HTML的table标签使用方法;利用table进行页面布局。掌握html表单的基本制作方法。

1.2 实验要求

请完成实验并将实验过程写在下面的实验内容部分,每题要求给出题目、源代码(带必要的注释)以及程序运行效果截图。

1.3 实验内容

题1:利用表格实现如下登陆界面的布局(整体居中),并利用文本框控件制作用户名和密码输入框,利用按钮控件实现登陆按钮:

备注:

(1)整个网页有灰色背景

(2)表格宽度由第二行图片宽度决定,第一和第三行高度35,第二行放置一个蒲公英的图片作为该行背景,行的高度由图片高度决定

(3)第三行放置相应的控件实现类似效果即可。

源代码:

align="center" >

    用户名:

   密码:

size="7">

    

height="80px">用户名和密码与作业提交系统一致


copyringht ~hyy@https://www.360docs.net/doc/2a18901550.html,

运行效果截图:

题2:制作如下图所示的居中登陆框效果。

备注:

(1)表格整体宽度300像素,该表格位于一个div标签中,div有灰色的边框,表格分若干行(自己决定几行,做出类似效果即可)。

(2)点击登录按钮后跳转到如下页面。(该页面使用了一个textarea控件),宽度差不多

就行)

(3)点击“继续”按钮跳转到如下页面,表格宽度和各列宽度自己定,做出类似效果即可。

提示:表格边框色可以在table中添加“bordercolor=…”属性实现

将上面三个页面的源码,分别粘贴在下面,并将你最终的页面运行效果截图粘贴在下面。源代码:

第一个页面:

width="300px">

登入
账号 

密码 

type="password" placeholder="请输入密码">

href="pac2.html">

找回密码  注册账户

第二个页面:


我同意:

第三个页面:

注册页面
用户名:

*不能以数字、下划线开头
密码:

*数字和字母的组合
确认密码:

*重新输入上面的密码
性别:

checked="checked"/>Man

Woman

*要慎重选择
技术:

value="java"/>java

value="html"/>html

php

value="Python">Python

运维

*可以多选
国籍:

*选择自己所在的国家

运行效果截图:

图1.登入界面居中

图2.未点同意时“继续”按钮为灰色,无法选中

图3.选中同意点击继续后的跳转界面

1.4 实验总结

本次实验主要复习了HTML的table的各种标签,以及表单的制作方法(控件和属性)。在这次的实验中,我主要学到东西是如何将表格在页面中整体居中。参考的是网上的一种方法:采用绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了(主要代码见第一题)。

还有就是用js方法控制按钮是否为选中。即判断该按钮的先决条件是否达成。(主要代码见第二题的第二个见面)

Web应用程序设计综合实验报告材料

Web应用程序设计综合实验报告题目:网上购物系统 学生姓名: XXX 学号: XXXXXXXXXXX 院(系): XXXXXXX 专业: XXXXXXXXXX 指导教师: XXXXXXXXXX 2014 年 7月 6 日

1、选题背景 随着计算机技术的发展和网络人口的增加,网络世界也越来越广播,也越来越来越丰富,网上商城已经成为网上购物的一股潮流。互联网的跨地域性和可交互性使其在与传统媒体行业和传统贸易行业的竞争中是具有不可抗拒的优势。在忙碌丰富的社会生活中,人们开始追求足不出户就能买到心仪的商品,是越来越多的上网爱好者实现购物的一种方式,对于企业来说,网络交易能大大提高交易速度、节约成本。在这种形势下,传统的依靠管理人员人工传递信息和数据的管理方式就无法满足企业日益增长的业务需求,因而开发了这样一个具有前台后台的网上商城系统,以满足购物者和企业的需求。 因此这次毕业设计题目就以目前现有的网上商城系统为研究对象,研究一般的网上商城的业务流程,猜测其各个功能模块及其组合、连接方式,并分析其具体的实现方式,最后使用Java加web服务器和数据库完成一个网上商城系统的主要功能模块。通过这样一个设计,可以提高自己Java编程的水准,也练习了怎样构建一个完整的系统,从系统的需求分析到设计,直至编码、测试并运行,熟悉并掌握一个完整的Web开发流程,为今后工作打下基础。 1.1设计任务 从以下几个方面实现网络商城的基本功能: 1、用户部分: (1)用户的登录和注册,用户必须注册才能购物,注册时系统会对注册信息进行验证,进入系统或是结账时,用户可以进行登录,登录时,如果密码错误,系统会进行验证并提示错误。 (2)浏览商品,实现用户可以在网络商店中随意浏览商品,商品按类别分类,方便用户查找不同类别的商品 (3)购物车管理,能实现添加商品、删除商品、更新商品的功能。 (4)生成订单,查看购物车后单击下一步则生成订单信息表,一旦提交订单,则购物车就不能被改变。 2、管理员部分:

Web程序设计实验报告

Web程序设计实验报告 姓名:冯刚 学号:200905030324 班级:计科3班

Html代码: 1.首页代码 无标题文档