web网站开发实验报告

web网站开发实验报告
web网站开发实验报告

第1 页(共4 页)

课程:Web网站开发实验日期:2012 年 6 月11日

专业班号:组别:交报告日期:2012 年 6 月14 日

姓名:学号:报告退发:(订正、重做)

同组者:教师审批签字:

一、实验性质

设计型实验(2学时)

二、实验目的

通过实验,使学生理解表单验证及网页布局设计的基本思路,掌握表单验证及网页布局设计的基本方法,通过表单验证和网页布局的联系,进一步理解网站开发的基本思路,并能够根据应用需求设计一个合理的网页来解决实际问题,提高学生的动手能力以及理论与实践相结合的能力。

三、实验任务

1.掌握网页布局的基本思路和方法。

2.掌握表单验证的基本思路和方法。

四、实验准备

复习教材中有关网页布局及表单验证的内容,仔细阅读和分析教材中的例子。

五、实验内容

1.网页布局

应用Dreamweaver程序对网页进行布局。

(1)选择“文件”|“新建”命令,在弹出的对话框中新建一个网页,名为bd.html,在“文档”工具栏中将网页的标题设置为“表单应用”。

(2)插入一个2行1列表格(表格1),表格宽度为“98%”,边框为“0”。

(3)在表格1的第一个单元格中输入文字“表单应用”,设置该文字字体为“隶书”,大小为“36”像素,前后都插入图片logo_3.jpg。

(4)将光标定位在表格1的第二个单元格中,选择“插入”|“表单”|“表单”命令,在该单元格中插入一个表单域。

(5)在表单域中插入一个15行2列的表格(表格2)。表格宽度为500像素,边框为“1”,

间距为“0”。将该表格的左边列所有单元格的宽度设置为“90”像素,前9行单元格高度设

置为“30”。

(6)将表格2的第一行合并为一个单元格,设置单元格水平对齐方式为“居中对齐”,背景颜色为“#DF3071”。在单元格中输入文字“请完成以下内容的填写”,设置文字的大小为“18”像素,颜色为“白色”。

(7)将表格2的左边列各单元格的水平和垂直对齐方式都设置为“居中”对齐,并分别输入文本信息:昵称、密码、确认密码、性别、籍贯、出生日期、电子邮箱、联系电话、个人爱好、照片和备注,如下图所示:

(8)将光标定位在第二行第二个单元格中,单击“插入”工具栏上的“表单”类别,然后单击“文本字段”按钮,在弹出的对话框中单击“确定”按钮即在单元格中插入了一个单行文本框。设置该文本字段的字符宽度为“24”。在文本字段后输入“*”。效果如下图:

(9)用同样的方式在“密码”和“确认密码”后插入文本框。选中文本框,在“属性”面板中设置名称为psw,字符宽度设置为24,最多字符数为12,类型设置为“密码”。属性如下图所示:

(10)将光标定位在性别后的单元格中,单击“插入”工具栏上的“表单”类别,然后单击“单选按钮”按钮,在辅助功能属性窗口中的标签文字中输入“男”,如下图所示。确定后则在单元格中插入了一个单选按钮。

设置刚插入的单选按钮的名称为sex,选定值为1,初始状态为“已勾选”,如图所示:

(11)用同样的方法在男的后面插入一个单选按钮,在“属性”面板中设置单选按钮的名称为sex,选定值为2,初始状态为“未选中”,并在该按钮后输入文本“女”。最后效果如下图所示:

(12)将光标定位在籍贯后的单元格中。单击“列表/菜单”按钮,则在插入点添加一个菜单,在菜单的“属性”面板中设置名称为”jg”,类型为“菜单”。在“列表值”对话框中添加项目如下图所示。

设置好列表值后,在“属性”面板中设置初始化时选定“四川”。在菜单后输入文字“省(市)”。最后效果如下图所示:

(13)用同样的方法设置出生日期如下图所示:

(14)参考昵称后文本字段的方法设置“电子邮箱”和“联系电话”,效果如下图所示:

(15)将光标定位在个人爱好后的单元格中,插入复选框。将插入的复选框名称设置为hobby,选定值设置为internet,初始状态为“未选中”,并在复选框后输入文本“网络”。用同样的方式插入其他复选框,名称都设置为hobby,选定值分别为:music、travel、read、sports 和draw。外观效果如下图所示:

(16)将光标定位在照片后的单元格中,插入“文件域”。外观效果如下图所示:

(17)将光标定位在备注后的单元格中,单击“文本区域”按钮,在插入点添加一个文本区域对象。在“属性”面板中设置插入文本区域的字符宽度为40,行数为5,换行为“默认”。

(18)在表格2的第13行右边单元格中输入以下文字:

1.请填写上面的的各项内容。

2 .带星号的项目为必填项。

3.谢谢您提交以上重要信息。

(19)将表格2的第14行合并为一个单元格。设置单元格水平对齐方式为“居中对齐”,背景颜色为“#DF3071”。在单元格中输入文字“填写完成后,选择下面的”提交“按钮提交表单。”,设置文字的大小为“14”像素,颜色为“白色”。

(20)将表格2的最后一行合并为一个单元格,在“插入”工具栏中单击按钮,将插入的按钮值设为“提交”,动作设为“提交表单”,用同样的方法插入第二个按钮,将该按钮的动作设置为“重置表单”。效果如下图:

(21)保存文件。

(22)设置超链接

打开Frameset.html文件。在该框架文件的左边导航列表中选中文字“表单应用”,设置

超链接文件为“bd.html”,目标为“mainFrame”。属性如下图所示:

(23)在浏览器中预览效果。

2.表单验证

对已做成的网页中“昵称”、“密码”、“确认密码”和“电子邮件”进行非空验证。下面以“电子邮件”为例,对其进行非空验证。

六、实验总结

通过这次实验,我才真正理解了“纸上得来终觉浅,绝知此事要躬行。”这句话的真谛。

在网页布局部分,出现的问题不大,主要是将网页能够设计得美观一些;在表单验证部分,出现的问题主要是不知道将编写好的alert程序放入代码中的位置。为了能够做出最终验证的结果,我试了许多次,不断通过Web浏览器进行修改。其实没找到正确的位置主要是因为没有注意到标记。最终,经过自己的一番努力还是做出了非空验证的效果。

WEB开发技术实验报告

实验一JSP开发环境构建 实验目的:了解动态页面技术及B/S系统 掌握开发环境的构建 理解Eclipse开发WEB应用 实验内容: 实训项目一:安装JDK并配置环境变量 请阐述配置环境变量的方法: 实训项目二:安装TOMCAT并配置Server.xml修改端口号为8090 问题一:如何测试TOMCAT是否已经成功启动? 问题二:在浏览器地址栏输入什么地址可以访问到TOMCA T的测试页? 请阐述配置Server.xml修改端口号为8090基本实验步骤: 实训项目三:应用Eclipse建立项目并浏览一个JSP页面 请阐述应用Eclipse建立项目并浏览一个JSP页面基本实验步骤: 实验心得:(遇到了哪些问题,如何解决的,有那些体会) 实验二JSP语法 实验目的:了解JSP程序的组成元素 掌握JSP中使用JA V A程序片段的方法 实验内容: 实训项目一:编写一个JSP页面输出26个小写英文字母表 实训项目二:编写页面实现九九乘法表 实训项目三:利用成员变量被所有客户共享这一性质,实现一个简单的计数器 实训项目四:使用JA V A表达式输出系统当前时间 实训项目五:编写程序shijian2_9.jsp和computer.jsp两个页面,在第一个页面中使用include动作标记动态包含文件computer.jsp,并向它传递一个矩形的长和宽,computer.jsp 收到参数后,计算矩形的面积,并显示结果。 实训项目六:编写3个JSP页面:main.jsp,first.jsp和second.jsp,将3个JSP文件保存在同一个WEB工程中,main.jsp使用include动作标记加载first.jsp和second.jsp页面。First.jsp 页面可以画一张表格,second.jsp页面可以计算两个正整数的最大公约数。当first.jsp被加载时,获取main.jsp页面include动作标记的param子标记提供的表格行数和列数,当second.jsp 被加载时,获取main.jsp页面include动作标记的param子标记提供的两个正整数的值。 要求:上机编程完成上述实训项目,上机演示给教师检查,从中挑选三个程序的核心代码写在实训报告上 实验核心代码:

web前端开发技术实验报告 实验三

长春大学 20 15 —2016学年第二学期Web前端开发技术课程 实验报告 学院:计算机科学技术专业:软件工程 班级:软件15402

学号:041440210 姓名:王悦 任课教师:车娜 实验三 CSS网页布局 一、实验目的 1.掌握CSS盒子模型的概念,能够灵活运用盒子模型布局页面; 2.掌握盒子模型相关属性,能够使用它们熟练地控制网页元素; 3.理解块元素与行内元素的区别,能够对它们进行转换。 二、内容及要求 运用盒子模型的相关属性实现网页弹出框效果,满足如下要求: 1.网页弹出框由上面的标题和下面的宣传内容两部分组成; 2.标题通过h2定义; 3.在段落文本中内容部分由h3和p标记进行定义; 4.应用

标记、标记、边框属性、背景属性等设计页面结构效果。 三、实验原理 盒子模型:把HTML页面中的元素看作是一个矩形的盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
标记:是一个区块容器标记,可以将网页分割为独立的、不同的部分,以实现网页的规划和布局。 边框属性:使用border-style、border-width、border-color等属性可以实现丰富的边框效果。 padding属性:设置内边距,即元素内容与边框之间的距离,也常常称为内填充。 margin属性:设置外边距,即元素边框与相邻元素之间的距离。 background-color:设置网页元素的背景颜色,默认值为transparent,即背景透明,这时子元素会显示其父元素的背景。 background-image属性:将图像作为网页元素的背景。 标记:行内元素。之间只能包含文本和各种行内标记,如加粗标记、倾斜标记等,中还可以嵌套多层

Web网页设计实验报告

WEB系统开发 综合实验报告 题目红尘客栈网上订房页面 专业计算机科学与技术(信息技术及应用) 班级计信2班 学生蒋波涛 重庆交通大学 2013年

目录 一、设计目的 (3) 二、设计题目 (3) 三、结构设计 (3) 四、技术分析 (4) 五、设计过程 (7) 六、实验心得 (10) 七、实验总结 (11)

一、设计目的 在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet 应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我选择了”web网页设计”这门课, 本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求,给出网页设计方案,可以按要求,利用合适图文素材设计制作符合要求的网页设计作品。 熟练掌握Photoshop cs3、Dreamweaver cs等软件的的操作和应用。增强动手实践能力,进一步加强自身综合素质。学会和团队配合,逐渐培养做一个完整项目的能力。 二、设计题目 《红尘客栈》 三、结构设计 选定主题,确定题目之后,在做整个网站之前对网站进行需求分析。首先,做好需求调研。调研方式主要是上网查阅资料,在图书馆里翻阅相关书籍。 然后,调研结束之后对整个网站进行功能描述,并对网站进行总体规划,接着逐步细化。 我们选做的主题是个人主页,并且选定题目为“红尘客栈”,其目的是做一个简单的网站,介绍酒店概况,提供一定的资讯信息。 四、技术分析 (一)建立布局 在这次的网页设计中用到大量的布局,所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器,也是众多入门者的捷径。特别是其在布局方面的出色表现,更受青睐。大家都知道,没有表格的帮助,很难组织出一个协调合理的页面。 1.点击“ALT+F6”键,进入布局模式,插入布局表格。建立一个大概的布局。 2.使用背景图片:选中该项,按浏览可以插入一幅准备好的图片作为表格的背景,因为图片是以平铺的形式作为表格背景,所以表格大小和图片尺寸都要控制好。 (二)网页中的图像

web前端实习报告三篇

web前端实习报告三篇 篇一 一、实训项目 简易记事本 二、实训目的和要求 本次实训是对前面学过的所有面向对象的编程思想以及JAVAWEB编程方法的一个总结、回顾和实践,因此,开始设计前学生一定要先回顾以前所学的内容,明确本次作业设计所要用到的技术点并到网上搜索以及查阅相关的书籍来搜集资料。通过编写采用JSP+Servlet+JavaBean技术框架的应用系统综合实例,以掌握JavaWEB开发技术。 具体要求有以下几点: 1.问题的描述与程序将要实现的具体功能。 2.程序功能实现的具体设计思路或框架,并检查流程设计。 3.代码实现。 4.设计小结。 三、实训项目的开发环境和所使用的技术 基于J2SE基础,利用以上版本的集成开发环境完成实训项目,界面友好,代码的可维护性好,有必要的注释和相应的文档。 四、实训地点、日程、分组情况: 实训地点:4栋303机房日程:

阶段:1.班级分组,选定课题,查阅相关资料半天2. 划分模块、小组成员分工半天3.利用CASE工具进行系统设计和分析,并编制源程序5天 第二阶段:上机调试,修改、调试、完善系统2天 第三阶段:撰写、上交课程设计报告,上交课程设计作品源程序(每人1份)2天 五、程序分析 功能模块说明弹出菜单 for(intf=0;f 创建保存文件对话框 publicvoidsaveFile { 创建打开文件对话框 privatevoidopenFile { JFileChooserfilechoose=newJFileChooser ;intresult=( null);if(result==_OPTION)} {try{ Filefile= ;FileReaderfr=newFileReader(file);intlen= (int) ;char[]context=newchar[len];(context,0,len); ; (newString(context));

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

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

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

网页制作实验报告

网页制作实验报告 页制作实验报告 实验一:站点设置 一、实验目的及要求 本实例是经过“站点定义为”对话框中的“高级”选项卡创建一具新站点。 二、仪器用具 1、生均一台多媒体电脑,组建内部局域,同时接入国际互联。 2、安装windows xp操作系统;建立iis服务器环境,支持asp。 3、安装页三剑客(dreamweaver mx;flash mx;fireworks mx)等页设计软件; 三、实验原理 经过“站点定义为”对话框中的“高级”选项卡创建一具新站点。 四、实验办法与步骤 1)执行“站点\治理站点”命令,在弹出的“治理站点”对话框中单击“新建”按钮,在弹出的快捷菜单中挑选“站点”命令。 2)在弹出的“站点定义为”对话框中单击“高级”选项卡。 3)在“站点名称”文本框中输入站点名称,在“默认文件夹”文本框中挑选所创建的站点文件夹。在“默认图象文件夹”文本框中挑选存放图象的文件夹,完成后单击“确定”按钮,返回“治理站点”对话框。 4)在“治理站点”对话框中单击“完成”按钮,站点创建完毕。 五、实验结果 六、讨论与结论 实验开始之前要先建立一具根文件夹,在实验的过程中把站点存在自己建的文件夹里,如此才干使实验条理化,别至于在实验后寻别到自己的站点。在实验过程中会浮现一些选项,计算机普通会有默认的挑选,最后别要去更改,假如要更改要先充分了解清晰该选项的含义,以及它会造成的效果,否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。 实验二:页面图像设置 一、实验目的及要求: 本实例的目的是设置页面的背景图像,并创建鼠标经过图像。 二、仪器用具 1、生均一台多媒体电脑,组建内部局域,同时接入国际互联。 2、安装windows xp操作系统;建立iis服务器环境,支持asp。 3、安装页三剑客(dreamweaver mx;flash mx;fireworks mx)等页设计软件; 4、安装acdsee、photoshop等图形处理与制作软件; 5、其他一些动画与图形处理或制作软件。 三、实验原理 设置页面的背景图像,并创建鼠标经过图像。 四、实验办法与步骤 1) 在“页面属性”对话框中设置页面的背景图像。 2) 在页面文档中单击“”插入鼠标经过图像。 五、实验结果

实验报告-Web技术

课内实验报告 课程名:Web 技术 任课教师:吴振宇 专业:物联网工程 成绩: 2015/2016学年第1学期 南京邮电大学

基于JSP的网上书城设计与实现 一、实验描述 1、需求分析 随着计算机网络技术的飞速发展和人们生活节奏的不断加快,电子商务技术已经逐渐融入了人们的日常生活当中,网上商城作为电子商务最普遍的一种形式,已被大众逐渐接受。因此开发一个网上商城系统,适合当今形势,更加方便人们在线购物。 2、分工: 负责实现图书选购、购物车功能、收藏功能、查看图书详细信息、用户注册、用户登录、查看用户的订单信息、修改用户个人信息。 负责实现现有图书管理:修改,删除,查看、用户管理:查看,修改,删除、订单管理:查看订单清单,更新订单付款,出货状态,删除订单、添加新图书、添加图书分类。 负责书写实验报告。 二、实验内容 1、总体设计 (1)系统设计 本系统采用三层架构设计,它的工作原理如下图所示。 三层架构模型 采用三层构架以后,用户界面层通过统一的接口向业务层发送请求,业务层按自己的逻辑规则将请求处理之后进行数据库操作,然后将数据库返回的数据封装成类的形式返回给用户界面层(2)系统流程

前台系统流程图 后台系统流程图

(3)数据库设计 数据库在一个信息管理系统中占有非常重要的地位,数据库结构设计的好坏将直接对应用系统的效率,以及实现的效果产生影响。合理的数据库结构设计可以提高数据存储的效率,保证数据的完整和一致。 数据库需求分析 针对一般在线书店的需求,得出如下需求信息。 1.用户分为未注册用户和已注册用户。 2.订单分为单张详细订单和总订单。 3.一个用户可以购买多本图书。 4.一个用户对应一张订单。 5.一个列表对应多张订单。 针对本系统功能分析,总结出如下的需求信息。 1.用户,包括数据项:用户ID、用户名、密码。 2.图书,包括数据项:图书编号、图书名、价格、图书介绍。 3.订单列表,包括数据项:订单编号、图书编号、购书数量。 4.订单,包括数据项:订单编号、用户编号、下单时间。 实体关系E-R图 商品实体E-R图

web实验报告

中国矿业大学计算机学院2012 级本科生课程报告 课程名称Web技术 学生姓名周鹏 学号08123336 专业计科13-5班 任课教师赵莹 报告时间2015.11.12

任课教师评语 实验成果评价 各实验成果评分 成绩:任课教师签字: 年月日

目录 实验一、静态web页面设计实验 (1) 1.1、实验要求 (1) 1.2、实验目的 (1) 1.3、详细设计 (1) 1.3.1、实验内容 (1) 1.3.2、设计步骤 (1) 1.4、设计心得 (2) 实验二、动态web页面设计实验 (3) 2.1、实验要求 (3) 2.2、实验目的 (3) 2.3、详细设计与编码 (3) 2.3.1、实验内容 (3) 2.3.2、设计步骤 (3) 2.4、设计心得 (5) 实验三、Web数据库实验 (6) 3.1、实验要求 (6) 3.2、实验目的 (6) 3.3.1、实验内容 (6) 3.3.2、设计步骤 (6) 3.4、设计心得 (12)

实验一、静态web页面设计实验 1.1、实验要求 1、使用HTML 5 开发Web静态页面。按照HTML 5的规范设计与开发网站。 2、练习HTML 5的新HTML5新特性和效果。 3、练习使用Web页面开发工具。(MyEclipse、Dreamwear、https://www.360docs.net/doc/945536638.html,或其它) 4、完成实验报告和实验成果。 1.2、实验目的 1.配置Web(TOMCAT)服务器,了解Web工作原理。 2.熟悉常用HTML 5标记的含义,能够熟练使用这些标记设计静态Web页面,实现Web页面上的各种元素的合理布局,如表单、表格、图片以及框架等标记的使用。 3.了解 CSS样式表的定义和使用方法,能够使用CSS美化和布局Web页面。 4.掌握JavaSript脚本语言的基本语法。 5.能够使用JavaScript 与浏览器对象进行交互。 6.能够使用JavaSript处理表单和表单元素事件。 1.3、详细设计 1.3.1、实验内容 1.能够独立安装Web服务器,TOMCAT,理解Web服务器的常用配置,并利用其搭建网站,设计一组静态的网页,至少5个页面,其中包括1个注册页面。 2.利用CSS技术布局并美化页面。 3.使用JavaScript脚本对注册页面进行验证,防止错误数据输入。 4.使用一些JavaScript脚本实现网面部分内容的动态显示,加入时钟等(不限于此)。 1.3.2、设计步骤 (1)搭建平台 在搭建平台过程中,由于自己开始用Eclipse开发过简单的JSP,自己就首选了Eclipse,自己的Tomcat在开始是也都配置完成了,主要就是主题选用。 (2)主题选择 在着手写网页之前,自己先构思一下,具体要以什么为主题,写一个什么风格的网页,最终决定写一个以矿大考研为主题的网页。 (3)网页搭建 在开发中,因为开始开发JSP时只是很简单的功能,自己对HTML语法并不熟悉,在同学帮助下先,然后通过百度以及课件知识,一步一步往框架中添加各个元素,图片、链接、文本框等等,最终形成现在这个页面。

Web应用开发技术实验报告

实验一:简单计算器 实验代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class c1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void change1(object sender, EventArgs e) { double n1 = double.Parse(t1.Text) + double.Parse(t2.Text); this.t4.Text = n1.ToString(); } protected void change2(object sender, EventArgs e) { double n1 = double.Parse(t1.Text) - double.Parse(t2.Text); this.t4.Text = n1.ToString(); } protected void change3(object sender, EventArgs e) { double n1 = double.Parse(t1.Text) * double.Parse(t2.Text); this.t4.Text = n1.ToString(); } protected void change4(object sender, EventArgs e) { double n1 = double.Parse(t1.Text) / double.Parse(t2.Text); this.t4.Text = n1.ToString(); } }

Web技术实验报告模版

西安郵電學院 Web技术实验报告 院系名称:计算机学院 专业名称:网络工程 班级:1005班 学生姓名:王二孟 学号(8位):04102143 指导教师:陈有为 起止时间:2012年10月~2012年12月

实验一JDK和Tomcat的下载、安装、配置与运行 一、实验目的 1、熟练掌握JDK软件包下载、安装的方法。 2、熟练掌握Java程序运行环境变量配置的方法。 3、熟练掌握Tomcat Web服务器软件的下载、安装和配置。 4、理解集成JDK和Tomcat,构建JSP基础运行环境的方法。 5、初步了解JSP程序运行的工作原理、特点。 二、实验要求 1、下载、安装Java JDK软件包。 2、设置JDK软件包工作的环境变量。 3、编译执行一个简单的Java程序,测试JDK是否配置成功。 4、下载、安装Tomcat Web服务器。 三、实验内容 1、安装、配置Java JDK软件开发环境。 JDK安装步骤如下:

许可证协议确认 JDK安装完成界面 JDK安装成功了,但是目前还不能够使用控制台来编译和运行Java程序。要想使用控制台来编译和运行Java程序,还需要配置系统环境变量。配置系统环境变量的步骤如下。

通过前面的步骤,已经安装好了JDK,并配置好了环境变量,这时就可以在控制台编译并运行Java程序了。 public class HelloWorld { public static void main(String args[]) { System.out.println("Hello,World!"); } } 2、安装、测试Tomcat Web服务器。 从Apache的官方网站下载免费的Tomcat,步骤如下。

网页设计实验报告 实验一

昆明理工大学信息工程与自动化学院学生实验报告 (201 —201 学年第一学期) 课程名称:Web设计技术开课实验室:年月日年级、专业、班学号姓名成绩 实验项目名称网页设计简介、HTML基础介绍、文字与 段落、列表指导教师 教师 评语教师签名: 年月日 注:报告内容按实验须知中七点要求进行。 一.打开记事本,编写第一个页面。 (1)打开记事本:单击“开始”→“程序”→“附件”→“记事本”。 (2)输入下面代码: 欢迎你! 我的朋友. 当你进入HTML编程世界的时候,你的
感觉是全新的!
(3)单击“文件”→“选择”→“保存”菜单项,选择文件类型为“所有文件”,文件名输入“index.html”并选择文件保存地址(记住一定要把文件的后缀存为.html或.htm,否则网页无法显示)。 (4)用浏览器打开这个文件,看看效果吧! 二.用HTML语言编写符合以下要求的文档:标题为“班级主页”,在浏览器窗口用户区显示“欢迎来到我们的班级主页”,完成后效果如图: 代码: 班级主页 欢迎来到我们的班级主页

WEB前端开发技术实验报告 实验九

长春大学2015—2016学年第二学期Web前端开发技术课程 实验报告 学院:计算机科学技术专业:软件工程 班级:软件15401 学号:01 姓名: 任课教师:车娜

实验九网页综合设计(一) 一、实验目的 1.掌握站点的建立,能够建立规范的站点; 2.了解切图工具,能够运用切片裁切效果图; 3.完成首页面的制作,并能够实现简单的JavaScript特效; 二、内容及要求 1.建立一个站点,完成网站的初始化设置; 2.利用Fireworks工具,对效果图进行裁切; 3.完成主页的布局,以及对css公共样式进行初始化设置。 4.完成头部区域、导航菜单、banner焦点图以及通知公告区域的制作; 5.使用滑动门技术,实现导航菜单在鼠标进过时显示特殊背景效果。 图9-1效果图 三、实验原理 1.建立站点:打开Dreamweaver工具,在菜单栏中选择【站点】→【新建站点】选项,在弹出的窗口中输入站点名称。然后,浏览并选择站点根目录的存储位置,如下图所示。 图9-2建立站点

2.切片:打开Fireworks工具,选择工具箱中的切片工具,拖动鼠标左键,根据网页需要在图像上绘制切片区域。绘制完成后,在菜单栏上选择【文件】→【导出】选项,导出后的图片存储在站点根目录的images文件夹内,切图后的素材如下图所示。 图9-3切片图像 3.HTML结构:整个页面大致可以分为头部、导航、banner焦点图、通知公告、主体内容、版权信息等六个模块,具体结构如下图所示。 图9-4HTML结构图 4.CSS样式:页面导航和版权信息模块通栏显示,其他模块均宽1000px

且居中显示,即页面的版心为1000px。除了banner部分的文字为微软雅黑和黑体外,其余文字均为宋体。主体内容中链接文字均显示为#222222、宋体、12px。这些共同的样式可以提前定义,以减少代码冗余。 5.JavaScript特效 在该页面中,分别在头部、banner焦点图和主体内容部分添加了JavaScript 特效。具体如下: ?头部 当鼠标移至头部的“我的收藏”时,会弹出一个下拉菜单,如下图所示 图9-5头部效果图 ?banner焦点图 banner焦点图可实现自动轮播,当鼠标移动到轮播按钮时停止轮播,并显示当前轮播按钮所对应的焦点图,同时按钮的样式也发生改变。当鼠标移出时继续执行自动轮播效果。例如,鼠标移上按钮3时的效果如下图所示。 图9-6banner焦点图 四、实验步骤 1、结构分析 2、样式分析

web实验报告

一,相关技术 为实现注册和登录功能,首先采用JSP和HTML分别设计regist和login页面,再采用servlet技术实现这两项功能。 为实现上传文件至服务器和下载自己上传的文件,也先JSP和HTML设计页面,再在页面中设计两按钮,点击时用调用JSP实现上传和调用servlet实现下载。 采用JSP和HTML设计result页面。是各种结果在result页面显示 二,系统需求分析 为实现登录和注册。设计一个包,包中包含User类。User中有账号,密码,昵称三类属性。 设计登录页面,输入账号和密码实现登录。当输入信息正确时,显示成功,否则失败。 设计注册页面,输入账号,密码,昵称三属性实现注册。 设计上传和下载页面,点击相应按钮实现相应动作。 三,系统设计和实验结果 1,显示结果页面核心代码 <% String message=(String)request.getAttribute("message"); %> <%= message %> 2,注册相关代码 A,注册界面核心代码

输入信息

账号: 密码: 昵称:

B,实现注册的servlet核心代码 driverName="com.microsoft.sqlserver.jdbc.SQLServerDriver"; Class.forName(driverName); String name = request.getParameter("name"); String pwd = request.getParameter("pwd"); String call = request.getParameter("call"); Connection con=null; String dbURL="jdbc:sqlserver://localhost:1433;DatabaseName=student"; String userName="sa"; String userPwd="a693501"; con=DriverManager.getConnection(dbURL,userName,userPwd); PreparedStatement ps = null; String sql = "insert into admin (name,pwd,call)values(?,?,?)"; try{ ps = con.prepareStatement(sql); ps.setString(1,name); ps.setString(2, pwd); ps.setString(3, call); ps.executeUpdate(); C,结果截图

web网站开发实验报告

web网站开发实验报告 web本人站开发实验报告 西安理工大学实验报告 成绩1页(共4页)课程:Web本人站开发实验出厂日期:201*年 6月11日专业班号:组别:交报告日期:201*年6月14日姓名:学号:报告退发:(订正、重做)同组本人:教师审批签字:、实验性质 设计型实验(2学时) 二、实验目的 通过实验,使学生理解表单验证及本人页布局设计的基本思路, 掌握表单验证及本人页布局设计的基本方法,通过表单验证和本人页 布局的联系,进步概括本人站开发的基本思路,并能够根据应用需求 设计个合理的本人页解决目前来解决实际问题,量子力学提高学生的 动手能力以及理论与实践相结合的能力。 三、实验任务 1.掌握本人页布局的基本思路和多页方法。2.掌握表单验证的 基本思路和方法。 四、实验准备 复习教中有关本人页布局及表单验证的内容,仔细阅读和分析教 中的例子。 五、实验内容 1.本人页布局 应用Dreamweaver程序对本人页进行定位。

(1)选择“件”本人“新建”命令,在弹出的对话框中新建个本 人页,名为bd.html,在“档”工具栏控制面板中将本人页的标题设置为“表单应用”。(2)插入个2行1列表格(表格1),表格宽度为“98%”,边框为“0”。(3)在表格1的个单元格中输入古字“表单 应用”,设置该字字体为“隶书”,大本人为“36”像,前后都插入 图片logo_3.jpg。 (4)将进能定位在表格1的二个单元格中,选择“插入”本人 “表单”本人“表单”命令,在该单元格中插入个表单域。 (5)在表单域中才插入个15行2列的表格(表格2)。表格宽度为500像,边框为“1”,间距为“0”。将该表格的列所有单元格的 宽度设置为“90”像,前9行单元格高度设 置为“30”。 (6)将表格2的行合并为个单元格,设置单元格稳定度对齐方式 为“居中对齐”,背景颜色为“#DF3071”。在单元格中输入字“请完 成以下内容的填写”,设置字的大本人为“18”像,颜色为“白色”。 (7)将表格2的左边列各单元格的水平和垂直对齐方式都手段设 置为“居中”对齐,并分别输入本内部信息:昵称、密码、确认密码、性别、籍贯、出生日期、电子邮箱、联系电话、个人爱、照片和备注,如下图所示: (8)将光标定位在二行二个单元格中,单击“插入”工具栏上的“表单”类别,然后单击“本字段”按钮,在弹出的对话框中单击 “确定”按钮即在单元格中插入了个四格框。设置该本字段的字符宽 度为“24”。在本字段后输入“*”。效果如下图: (9)用同样的方式在“密码”和“确认密码”后插入本框。选中 本框,在“属性”面板中设置名称为psw,字符宽度设置为24,最多 字符数为12,类型设置为“密码”。属性如下图所示:

Web网站设计实验报告

Web网站设计实验报告 学生: 学号: 班级: 系别: 学院:

目录 一、设计目的 (3) 二、设计题目 (3) 三、结构设计 (3) 四、技术分析 (5)

五、设计过程 (6) 六、实验总结 (7) [附录]网页源代码节选 (8) 一.设计目的 在Internet飞速发展的今天,互联网成为人们快速获取、发布和传递信息的重要渠道,它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见,它已成为政府、企事业单位信息化建设中的重要组成部分,从而倍受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利。但是,我们成天浏览的网站网页到底是如何制作的呢我想这一点很多同学都没有去深究过。所以为了了解网页制作的过程,我们在老师的指导下分前台和后台进行了一系列操作,并有所收获。 我们了解和熟悉了网页设计的基础知识和实现技巧,也熟练掌握

了Photoshop cs3、Dreamweaver cs等软件的的操作和应用。 二.设计题目 《篮球球迷交流网》 主要是篮球新闻、视频,还有交流帖子区,交易广告平台等。三.结构设计 选定主题,确定题目之后,网站设计还是一张白纸,我所做的是需要在这张白纸上一点点勾勒出网站的大框架,然后慢慢填充,实现网站的构想。首先我们在网上和图书管里查阅了大量的资料,以确定我们所需要的基本技术。然后,我们对整个网站进行总体规划,接着逐步细化。 我的设计主题是篮球球迷交流网,包括多个方面,框架为:首先是首页,首页下是新闻头条,分栏有球迷自述、篮球美图、给我留言,从分栏都可以回到首页。 首页主要分为新闻头条、热门话题区、靓图展示。 此为网站的大体板块,下面我们就每一页的页面板块进行详细的分析,有了大体框架,我们只需要在每一页的主要内容上做以划分,

javaweb上机实验报告学生管理系统

javaweb上机实验报告学生管理系统 1 2020年4月19日

一实验题目 在线学生管理系统 二开发背景简介 随着网络技术的发展和普及许多以前基于CS的应用都开始向BS方向发展,而Java在这方面的应用有着许多其它技术不具备的优点,Java开发Web应用的主要技术是Servlet和Jsp技术,其实Jsp只Servlet的一种进化方便了开发者的使用。 它们都具有强大的功能适用于许多大型项目的开发。在未来基于BS的应用也必将得到较好的发展。本实验是在讲完Jsp和Servlet课程后为掌握所学的知识而做的实验。 三开发工具 本次试验是在Windows平台下开发采用的集成开发工具是Myeclipse8.5,数据库使用的是MySql5.5,服务器采用的是Tomcat7.0。 四实验设计 在本实验中模仿的是MVC设计模式,但由于系统比 2 2020年4月19日

较小因此省略了业务层,在页面层中直接调用了数据层。在做这个在线学生管理系统中业务基本上都是由Jsp页面完成的没有用到Servlet控制器。 五实现的功能 六试验截图 1.登陆界面 3 2020年4月19日

登录能够选择是身份,能够是学生,老师,和管理员。 登录界面是login.html,它想login.jsp页面传了3个参数来进行页面的验证,其中验证的部分代码是, String uname = request.getParameter("userName"); String pwd = request.getParameter("userPass"); int i =Integer.parseInt(request.getParameter("identity")); 4 2020年4月19日

Web前端技术课程实训报告

《Web前端技术课程设计》报告 一、实训课题名称 二、课题设计目的 通过实训,应使学生巩固所学知识,把所学的理论知识运用到网站制作实践中。 培养学生动手能力,将PS制作效果图、HTML、CSS+DIV网页布局、JavaScript等Web 前端开发技术结合起来,在实训环节中进行运用。为以后学习动态网站打下基础。三、实现功能: 用PhotoShop、DreamWeaver等开发工具制作一个由静态网页构成的简单网站,要求包括一个首页、至少三个子网页,按照网站开发流程,先做网页效果图,然后制作网页素材、构建网站文件结构、规划网页布局、制作网页动画、实现网页功能,尔后进行网站测试,并编制出各阶段必要的文档。在编写文档时,必须严格遵照要求,最后提交文档。 功能要求:该网站首页必须包括网站logo、导航条(带有鼠标事件变化效果)、banner (简单flash动画)、图片、多媒体运用、文字等主要信息展示;子网页包括用户注册(带有表单输入项本地验证功能)、登录(用户名和密码非空验证)、子网页相关栏目。各页面之间通过超链接切换。 最后要求提交详细的课程设计报告及网页效果图(.psd)和网站运行文件,现场运行验收开发的系统。 四、课题设计内容: (1)开发背景 (2)网站分析设计部分 1)客户需求分析 ●网站栏目划分 ●栏目内容介绍 ●网站拓扑图 ●网页风格创意设计 2)网站风格定位 3)网站建设方案 4)网站效果图 (3)网站制作部分 1)效果图制作 2)网页素材及网站架构制作 3)首页制作页面设计 4)子页面制作 五、体会及下一步学习方向

教师评语

参考方案: 目录 开发背景 (4) 前期准备 (4) 客户需求分析 (4) 网站风格定位 (5) 色彩 (5) 排版 (5) 特效 (6) 网站建设方案 (6) 网页风格创意设计 (7) 网站栏目划分 (7) 栏目内容介绍 (8) 网站拓扑图 (9) 实训目的 (10) 实训任务 (10) 实训项目 (11) 网站基本介绍 (11) 报名界面 (10) 保存的文件位置 (11) 首页展示效果图 (12) 导航条展示效果图 (13) 留言板表格布局 (14) 网站版权的展示图 (14) 国内黑客网站界面展示图 (15) 黑客新闻界面展示图 (16) 电影展示图 (18) 黑客简介界面展示图 (20) 黑客区别界面展示图 (21) 黑客分类界面展示图 (22) 实训中的问题和解决办法 (23) 实训体会 (24)

Java Web实验报告一

实验一开发环境配置及Servlet程序设计 一、实验目的 1、了解并熟悉编程环境、编程工具,包括Tomcat、MyEclipse和JDK; 2、学会配置环境变量; 3、掌握在MyEclipse中编辑简单源程序的方法、创建包和servlet类的方法; 4、掌握在Tomcat中手工创建可执行程序的方法; 5、加强对servlet的生命周期的理解;掌握servlet程序的实现方法。 二、实验内容及要求 本次实验内容分为两部分: 1、验证部分 1)通过手动的方式在Tomcat中建立工程my,在该工程中建立所需的文件夹以及文件web.xml。 2)在MyEclipse中建立一个名为TestLifeCycleServlet.java的servlet。 3)运行该servlet。 2、编程实现部分 编写一个页面程序(JSP程序)和一个后台程序(servlet程序),用户从页面中输入姓名、性别、年龄等信息,并提供一个查询按钮。当用户提交查询按钮时,执行servlet程序,该程序将用户输入的信息显示出来。用户界面的显示效果参见图1所示: 图1 表单显示效果示例 三、实现 1、验证部分 实现过程、必要的配置文件说明、实验结果等。 第一个实验 实验过程 第一步: 打开tomcat文件夹,在webapps中新建一个my的文件夹

第二步 在my文件夹中新建一个WEB-INF文件夹,并把web.xml放入 第三步 把TestLifeCycleServlet.java和index.jsp放入my文件夹中 第四步

让tomcat运行起来 第五步 输入http://localhost:8080/my/servlet/TestLifeCycleServlet web.xml代码 TestLifeCycleServlet TestLifeCycleServlet TestLifeCycleServlet /servlet/TestLifeCycleServlet index.jsp 运行结果 实验二 第一步 先建一个web project命名为wy,在src目录下新建一个Servlet命名为ThreeParams import javax.servlet.*; import javax.servlet.http.*; import java.io.*; public class ThreeParams extends HttpServlet{

网页设计与制作实验报告文档

2020 网页设计与制作实验报告文档 Contract Template

网页设计与制作实验报告文档 前言语料:温馨提醒,报告一般是指适用于下级向上级机关汇报工作,反映情况,答复上级机关的询问。按性质的不同,报告可划分为:综合报告和专题报告;按行文的直接目的不同,可将报告划分为:呈报性报告和呈转性报告。体会指的是接触一件事、一篇文章、或者其他什么东西之后,对你接触的事物产生的一些内心的想法和自己的理解 本文内容如下:【下载该文档后使用Word打开】 实验一:站点设置 一、实验目的及要求 本实例是通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。 二、仪器用具 1、生均一台多媒体电脑,组建内部局域网,并且接入国际互联网。 2、安装windowsxp操作系统;建立iis服务器环境,支持asp。 3、安装网页三剑客(dreamweavermx;flashmx;fireworksmx)等网页设计软件; 三、实验原理 通过“站点定义为”对话框中的“高级”选项卡创建一个新站点。

四、实验方法与步骤 1)执行“站点管理站点”命令,在弹出的“管理站点”对话框中单击“新建”按钮,在弹出的快捷菜单中选择“站点”命令。 2)在弹出的“站点定义为”对话框中单击“高级”选项卡。 3)在“站点名称”文本框中输入站点名称,在“默认文件夹”文本框中选择所创建的站点文件夹。在“默认图象文件夹”文本框中选择存放图象的文件夹,完成后单击“确定”按钮,返回“管理站点”对话框。 4)在“管理站点”对话框中单击“完成”按钮,站点创建完毕。 五、实验结果 六、讨论与结论 实验开始之前要先建立一个根文件夹,在实验的过程中把站点存在自己建的文件夹里,这样才能使实验条理化,不至于在实验后找不到自己的站点。在实验过程中会出现一些选项,计算机一般会有默认的选择,最后不要去更改,如果要更改要先充分了解清楚该选项的含义,以及它会造成的效果,否则会使实验的结果失真。实验前先熟悉好操作软件是做好该实验的关键。 实验二:页面图像设置 一、实验目的及要求: 本实例的目的是设置页面的背景图像,并创建鼠标经过图像。 二、仪器用具 1、生均一台多媒体电脑,组建内部局域网,并且接入国际