《Web程序设计(二)课程设计》实验报告

WEB程序设计实验报告

本科实验报告课程名称：WEB程序设计实验实验项目：HTML语言实验地点：专业班级：学号：学生姓名：指导教师：2013年月日一、实验目的和要求实验目的1．掌握常用的HTML语言标记；2．利用文本编辑器建立HTML文档，制作简单网页。

实验要求1．独立完成实验。

2．书写实验报告书。

二、实验内容和原理1．在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。

（请仔细阅读下列程序语句，理解每条语句的作用）源程序清单如下：<html><head><title>Example</title></head><body bgcolor="#00DDFF"><h1><B><I><FONT COLOR="#FF00FF"><MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome to you</MARQUEE></FONT></I></B></h1><hr><h2 align=center><FONT COLOR="#0000FF">A simple HTMLdocument</FONT></h2><EM>Welcome to the world of HTML</EM><p>This is a simple HTML document.It is to give you an outline of how to write HTML file and how the<b> markup tags</b> work in the <I>HTML</I> file</p><p>Following is three chapters<ul><li>This is the chapter one</li><li><A HREF="#item">This is the chapter two</A></li><li>This is the chapter three</li></ul></p><hr><p><A NAME="item">Following is items of the chapter two</A> </p><table border=2 bgcolor=gray width="40%"><tr><th>item</th><th>content</th></tr><tr><td>item 1</td><td>font</td></tr><tr><td>item 2</td><td>table</td></tr><tr><td>item 3</td><td>form</td></tr></table><hr><p>1<p>2<p>3<p>4<p>5<p>6<p>7<p><B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B></p></body></html>2．编写一个能输出如图所示界面的HTML文件。

web程序设计实验报告

web程序设计实验报告Web程序设计实验报告一、引言Web程序设计是现代信息技术领域中的重要一环，它涉及到网页的开发、交互设计和用户体验等方面。

本实验旨在通过设计一个简单的Web程序，来探索并应用相关的技术和概念。

二、实验目标本实验的目标是设计一个在线购物网站，实现用户注册、商品浏览、购物车管理和订单处理等基本功能。

通过这个实验，我们可以学习和掌握以下内容：1. HTML和CSS的基本语法和用法，用于构建网页的结构和样式。

2. JavaScript的基本语法和用法，用于实现网页的交互效果和动态功能。

3. 数据库的基本概念和操作，用于存储和管理用户信息、商品信息和订单信息等数据。

4. 服务器端的编程和部署，用于处理用户请求和返回相应的网页内容。

三、实验步骤1. 网页设计首先，我们需要设计网站的整体布局和样式。

通过HTML和CSS，我们可以创建网页的结构和外观。

在设计过程中，我们要考虑到网站的易用性和美观性，使用户能够方便地浏览和购买商品。

2. 用户注册和登录为了实现用户注册和登录功能，我们需要设计相应的表单和验证机制。

用户可以通过填写注册表单来创建自己的账户，并通过登录表单来访问自己的个人信息和购物车。

3. 商品浏览和搜索在网站上展示商品信息是吸引用户的关键。

我们可以通过数据库来存储商品的详细信息，并通过网页来展示和搜索这些商品。

用户可以通过关键词搜索或者浏览分类来找到自己想要购买的商品。

4. 购物车管理购物车是用户选择商品并进行结算的地方。

我们可以通过JavaScript来实现购物车的添加、删除和修改功能。

当用户点击结算按钮时，我们还需要生成相应的订单信息，并将其存储到数据库中。

5. 订单处理为了实现订单处理功能，我们需要设计一个订单管理系统。

当用户提交订单后，我们可以将订单信息存储到数据库中，并提供相应的查询和修改功能。

同时，我们还需要将订单信息发送给用户和商家，以便双方进行相应的处理。

四、实验结果通过实验，我们成功地设计并实现了一个简单的在线购物网站。

《Web程序设计课程设计》任务书

《Web程序设计课程设计》任务书《Web程序设计课程设计》任务书《Web程序设计》课程设计任务书一、课程简介本课程是培养学生动态网页设计与制作职业核心能力的重要课程，通过本课程的学习使学生掌握动态网页制作的基本方法，具备独立制作动态网页的能力。

二、课程设计内容应用本课程介绍的相关知识独立开发完成一个简易论坛程序。

三、课程设计要求1.能力目标（1）综合运用所学知识制作一个实用的论坛程序（2）培养学生综合运用所学知识的能力2.技术要求（1）应用VisualStudio20xx设计、开发和发布网站（2）应用HTML相关知识制作网站页面（3）应用Table或者CSS对网页进行合理布局（4）应用内置对象完成相关逻辑处理（5）应用各种控件完成相关模块的重用（6）应用相关知识完成数据库的连接与处理四、课程设计安排以综合课程设计为课程考核形式，充分利用所学知识和技能，以项目为驱动，进行Web程序设计与开发，进一步掌握动态网页程序的开发技术和技巧，强化学生实践动手能力。

1.确定课程设计课题（简易论坛的设计与开发）；2.根据主题要求，收集处理素材、确定、划分栏目。

3.采用框架，综合运用HTML、Javascript、C#等知识完成网页设计、制作。

4.课程设计时间为3天，届时将提交作品程序和相关文档，并以统一答辩的形式进行课程设计评价及课程考核。

序号内容按照教师提供的简易论坛演示程序及教材要求，归纳总结出其主要功能，编写软件需求说明书地点机目标让学生了解Web程序设学时备注提交软件需计课程设计要做哪些2学时房工作，待开发程序有哪子档些模块让学生了解待开发Web求说明书电1根据归纳出的主要功能，按照机2提供的规范文档，编写概要设房使用的技术，各功能模计说明书块的运行顺序让学生了解如何依据Web系统的功能模块，依据概要设计说明书，实现数设计符合要求的数据据库的各种表结构，绘制E-R3关系图，编写SQL脚本，并完成数据库设计说明书则和方法；并将SQL编程应用于设计中让学生掌握在依据以上设计说明书和演示程4序，开发实现作品程序房语言与数据库结合起来，实现真实应用。

Web程序设计课程设计报告模板

Web程序设计课程设计报告课程设计题目：某电子杂志网站姓名：肖琴霞专业：软件工程（国际教育）班级：10211133学号：**********指导教师：***2013 年 3 月 10 日一、设计目的《Web应用开发课程设计》是实践性教学环节之一，是《Web程序设计》课程的辅助教学课程。

通过课程设计，使学生掌握Web网站的基本概念，结合实际的操作和设计，巩固课堂教学内容，使学生掌握软件开发的基本概念、原理和技术，将理论与实际相结合，应用现有的开发工具，规范、科学地完成一个完整地应用软件的设计与实现，把理论课与实验课所学内容做一综合，并在此基础上强化学生的实践意识、提高其实际动手能力和创新能力。

当今时代是飞速发展的信息时代，在各行各业中离不开信息处理，这正使得计算机被广泛的应用于信息管理系统。

计算机的最大好处在于利用它能够进行信息管理和查询。

使用计算机进行信息控制，不仅提高了工作效率，而且大大的提高了其安全性。

尤其对于复杂的信息管理，计算机能够充分发挥它的优越性。

计算机进行信息管理与信息管理系统的开发密切相关，系统的开发是系统管理的前提。

制作电子杂志网站可以方便读者阅读，且可以扩大读者的视野以及提高阅历。

二、设计解决方案问题解决方案：经过分析，我们决定利用ASP编程，使用Dreamweaver MX作前端开发工具，利用SQLServer2000作后台数据库管理，数据库驱动使用ADO。

前台功能模块：系统主界面与登录程序设计，杂志查询及订阅，读者服务模块，杂志分类设计等。

后台功能模块：管理主界面与登录程序设计，最新杂志信息管理模块，杂志订阅管理模块，在留言管理模块设计等。

后台管理的建立，使管理员可以通过后台很容易的对杂志城进行管理，比如：对最畅销杂志，公告和杂志城注册用户进行添加，删除等管理工作，还可以对读者在线留言的处理。

三、电子杂志网需求分析3.1 需求分析需求分析是整个设计过程的基础，最困难、最消耗时间的一步。

web应用程序设计实验报告

web应用程序设计实验报告实验报告：web应用程序设计一、实验目的本次实验旨在让学生了解web应用程序的设计原理、方法和过程；掌握使用HTML、CSS、JavaScript等前端技术和框架进行开发；并能够实现一个具有基本功能的web应用程序。

二、实验步骤1.需求分析在开发web应用程序之前，我们需要先做好需求分析。

需求分析重点围绕着用户需求展开，其中包括功能需求、非功能需求和约束条件等方面。

需要考虑的问题有：（1）应用程序的主要功能是什么？（2）用户需要达成什么目标？（3）用户在应用程序中使用的流程是怎样的？（4）应用程序需要保证的性能、可靠性、安全性等方面的要求。

2.技术选型根据需求分析的结果，我们需要确定使用哪些技术来实现这个web应用程序。

在这个过程中需要考虑到开发周期、人力投入、技术成熟度、可维护性和可扩展性等因素。

如果开发周期短、人力投入少、技术成熟度高，那么我们可以选择使用比较成熟的框架进行开发；如果要求高可维护性和可扩展性，那么我们则需要选择使用比较灵活的技术进行开发。

3.编码实现在技术选型完成后，我们需要根据需求设计页面和逻辑，并进行编码实现。

在这个过程中，需要注意以下几点：（1）HTML代码规范、模块化设计；（2）CSS代码规范、命名规则简洁明了；（3）JavaScript代码规范、模块化设计，避免全局对象污染；（4）注意可访问性、响应式设计和浏览器兼容性。

4.测试、部署在完成编码后，需要进行功能测试、兼容性测试、性能测试等工作，确保程序能够在各种浏览器和操作系统下正常工作，并且能够稳定运行。

如果有问题则需要进行修改和优化。

当测试结束并且符合要求后，我们可以将代码发布到服务器上进行实际部署，并进行相应的配置和维护等工作。

三、实验心得与体会本次实验让我对web应用程序设计的整个流程有了更清晰的认识。

由于之前已经学习了HTML、CSS和JavaScript等前端技术，所以对于编码实现方面并没有遇到太大的困难。

web课程设计实验总结

web课程设计实验总结一、教学目标本课程的教学目标是使学生掌握Web课程的基本知识，包括HTML、CSS和JavaScript等，培养学生具备基本的Web页面设计和开发能力。

知识目标：了解Web页面设计的基本概念，掌握HTML、CSS和JavaScript的基本语法和用法，了解Web页面设计的最佳实践。

技能目标：能够使用HTML、CSS和JavaScript编写简单的Web页面，能够使用一种或多种Web开发工具进行Web页面设计和开发。

情感态度价值观目标：培养学生对Web技术的学习兴趣，使学生认识到Web技术在现代社会中的重要性，培养学生具备良好的代码编写习惯和团队协作精神。

二、教学内容教学内容主要包括HTML、CSS和JavaScript三个部分。

1.HTML：介绍HTML的基本概念，常用的标签及其属性，如何构建一个基本的网页结构，包括标题、段落、列表、链接等。

2.CSS：介绍CSS的基本概念，如何选择器和样式规则，如何设置颜色、字体、布局等样式，如何使用CSS预处理器如Sass或Less。

3.JavaScript：介绍JavaScript的基本概念，如何编写JavaScript代码，如何使用JavaScript操作DOM元素，如何使用JavaScript实现简单的交互效果。

三、教学方法根据课程特点和学生的实际情况，采用讲授法、讨论法和实验法进行教学。

1.讲授法：通过讲解和示例，使学生了解和掌握Web页面的基本概念和语法。

2.讨论法：通过小组讨论，使学生更好地理解Web页面设计的方法和技巧。

3.实验法：通过动手实践，使学生掌握Web页面设计的实际操作方法。

四、教学资源教学资源包括教材、参考书、多媒体资料和实验设备。

1.教材：选择适合的教材，如《HTML与CSS设计与构建》等。

2.参考书：推荐一些适合初学者的参考书，如《JavaScript高级程序设计》等。

3.多媒体资料：提供一些在线教程和视频教程，帮助学生更好地理解Web页面设计的方法和技巧。

web程序设计课程设计报告

吉林工程技术师范学院信息工程学院《 web程序设计》课程设计报告题目：学生成绩信息查询系统专业：计算机科学与技术班级： C1042*名：***学号： 33 号指导教师：杨峰丰雪琰郭天娇齐艳茹时间： 2013.11.25日——12.6日摘要随着计算机技术的飞速发展，计算机在企业和事业单位的管理中应用的普及，利用计算机实现企业和部门的工作管理势在必行。

本系统结合学校实际的学生成绩及其他信息查询，经过实际的需求分析，采用WEB页面成绩信息管理系统。

整个系统从符合操作简便、界面友好、灵活、实用、安全的要求出发，完成成绩、个人信息管理的全过程，包括新进学员入校时信息档案的建立、中间事故等的变动引起学员信息的修改、学员信息查询、统计等学生管理工作以及学生各学期信息的新增、修改、出盘、查询等管理工作。

经过测试，本文所设计的学生成绩管理系统可以满足一般学生管方面的需要。

论文主要介绍了本课题的开发背景，所要完成的功能和开发的过程。

重点的说明了系统设计的重点、设计思想、难点技术和解决方案。

数据库；delphi7.0；学生成绩管理；WEB关键字：学生成绩查询；WEB；网站目录第1章概述 ....................................................................................................... 错误!未定义书签。

1.1 选题的意义 ........................................................................................... 错误!未定义书签。

1.1.1主题 ............................................................................................ 错误!未定义书签。

Web网页设计实验报告

课程设计报告书2010/2011 学年第 1 学期设计题目： Web网页制作实验报告年级专业： 08级市场营销姓名学号：指导老师：经济管理系 12月20日目录一、设计目的 (3)二、设计题目 (3)三、结构设计 (3)四、技术分析 (4)五、设计过程 (7)六、实验心得 (10)七、实验总结 (11)[附录]网页源代码节选 (12)一、设计目的在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

因此网站建设在Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我选择了”web网页设计”这门课, 本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。

了解和熟悉网页设计的基础知识和实现技巧。

根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。

熟练掌握Photoshop cs3、Dreamweaver cs等软件的的操作和应用。

增强动手实践能力，进一步加强自身综合素质。

学会和团队配合，逐渐培养做一个完整项目的能力。

二、设计题目《C罗球迷之家》三、结构设计选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。

首先，做好需求调研。

调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。

然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。

我们选做的主题是个人主页，并且选定题目为“C罗球迷之家”，其目的是做一个简单的网站，介绍C罗的各个方面，提供一定的资讯信息，。

进行一番调研之后，该网站整体站功能结构图如下：四、技术分析(一)建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。

WEB程序设计课程设计

WEB程序设计课程设计随着互联网的快速发展，Web程序设计已经成为一门热门的课程。

通过学习这门课程，学生们可以掌握Web开发的基本原理和技术，从而能够设计和开发出符合用户需求的高质量网页和网站。

本文将介绍WEB程序设计课程设计的内容和要点。

一、课程概述WEB程序设计课程旨在培养学生的Web开发能力，使其能够独立设计和开发出实用且具有交互性的网页应用。

课程内容包括HTML、CSS、JavaScript等前端开发技术，以及服务器端开发和数据库的知识。

学生在学习过程中将通过实践项目来巩固所学知识，并掌握团队合作和项目管理的能力。

二、教学目标1. 理解Web开发的基本原理和技术。

2. 掌握HTML、CSS、JavaScript等前端开发技术。

3. 学会使用服务器端开发技术，如PHP、Python等。

4. 熟悉数据库的使用和管理。

5. 培养学生的问题解决能力和团队合作精神。

三、教学内容1. HTML基础知识课程将从HTML的基础语法和标签开始讲解，包括文本、链接、图像、表单等元素的使用。

学生将通过编写简单的HTML页面来巩固所学知识，并逐步掌握网页的结构和布局。

2. CSS样式设计学生将学习如何使用CSS样式来美化网页，包括字体、颜色、布局等方面的设计。

通过实践项目，学生将提升对CSS样式的理解和运用能力。

3. JavaScript交互开发课程将介绍JavaScript的基本语法和常用函数，以及如何使用JavaScript实现网页的动态效果和用户交互。

学生将通过编写简单的JavaScript代码来实现一些常见的功能，如表单验证、图片轮播等。

4. 服务器端开发学生将学习如何使用服务器端开发语言，如PHP、Python等，来处理用户提交的数据并与数据库进行交互。

通过实践项目，学生将掌握服务器端开发的基本原理和技巧。

5. 数据库管理课程将介绍数据库的基本概念和SQL语言的使用，帮助学生理解数据库的重要性以及如何进行数据的增删改查操作。

web课程设计实验报告

web课程设计实验报告
本次实验完成了一个简易的Web课程设计项目。

做此实验的目的是熟悉Web课程设计中的开发流程，加深对相关技术的理解。

主要实验步骤如下：
1.设计Web课程设计项目的功能需求，完成系统需求报告。

3.构建前端页面，利用HTML/CSS技术实现页面布局和样式，用JavaScript语言实现前端逻辑，使得页面可响应用户交互。

4.构建Web服务器，利用Tomcat技术完成Web网页的部署和服务，用Servlet技术实现页面逻辑功能，收集客户端的表单数据，处理请求并响应客户端。

5.通过MySQL数据库技术实现数据持久化处理，完成表设计及编写后台存取数据库的程序，从而将项目中的数据进行持久化存储。

6.最终完成整个课程设计项目，能满足相应的功能要求和性能指标。

在课程项目设计中，我用到了HTML、CSS、JavaScript、Tomcat、Servlet、MySQL数据库等Web开发技术，完成了以上整个实验步骤，在课程设计中，我用到了技术实现网站前端界面布局和样式，用Servlet实现与服务器的交互，用MySQL数据库技术实现数据的持久化存储，最终能完成一个Web项目的研发。

通过本次实验，我加深了对Web课程设计中开发流程的理解，提高了Web开发的实践能力，完成了项目设计中的各个页面，实现了网页数据的持久化存储，最终完美呈现了网页，增强了网页设计能力，掌握了前端开发的知识。

实验结束时，我对这次课程项目的研发工作十分满意，完成了项目功能需求的设计、实现页面的布局以及前端逻辑的编写、Web服务器的搭建，最终将项目可视化，成功完成了Web项目开发。

《Web程序设计(二)课程设计》实验报告

《Web程序设计（二）课程设计》实验报告院系名称：管理学院专业班级：电子商务级班学生姓名：学号：注册功能登录功能发布留言查看留言留言修改留言删除合计20分15分15分20分15分15分100分2014年07 月一、实验目的本实验属于设计性实验，目的是使学生在学完《Web程序设计（二）》课程的基本知识之后，通过使用Struts2和Hibernate等框架设计并开发一个简单的在线留言系统，进一步熟悉和领悟JSP、Struts2、Hibernate和Java语言的语法结构和使用方法，通过实验学习Java Web系统的MVC开发步骤与方法，任务是设计一个简单的在线留言系统。

二、实验步骤1.下载并安装配置JDK、eclipse、tomcat软件，使计算机有一个程序开发设计的软件支持。

2.用access建立一个数据库，在数据库中按要求建立表，包括用户注册基本信息表、年龄信息表、收入信息表、文化程度表、娱乐方式信息表、体育运动信息表、电影类型表。

3.在JDK中新建一个工程，建立一个包，名为beans，其下建立一个java文件，名为conndb，其中写入数据库调用信息。

4.用代码编写出html页面和相应的jsp文件，包括导航页面、注册页面、register.jsp、登录页面、login.jsp、问卷调查页面、diaochasend.jsp、问卷结果显示页面。

5.在控制面板中用sql.server接数据库。

6.配置并打开tomcat服务器，在服务器上运行项目，正确就完成，错误则进行修正。

7.在其他pc端进行检验，确保程序能够正常运行三、系统设计1、界面设计2、功能设计本系统具有注册功能、登录功能、发布留言功能、查看留言功能、留言修改功能、留言删除功能。

3、数据库设计本留言板程序采用的是sql server 2005进行数据库的设计与实现，数据库命名为dbs。

建表如下：① User表：② Tip表：四、系统的核心代码1、Index.jsp<body><div id="box"><div id="bottom1"><a href="regist.jsp">注册</a><a href="index.jsp">登录</a><a href="message_list.jsp">留言管理</a></div><div id="login"><div>用户登陆</div></div><div id="bottom"><s:form method="post" name="login" action="Login" theme="simple"validate="true"><p>用户名：<s:textfield name="erName" maxlength="20"cssClass="input-border"></s:textfield></p><p>  密码：<s:password name="user.passWord" maxlength="20"cssClass="input-border"></s:password> <label for="password"></label></p><p>     <s:submit value="登陆" onmouseover="this.className='login-b2'" onmousedown="this.className='login-b3'" onmouseout="this.className='login-b'" cssClass="login-b" ></s:submit>      <s:reset value="重置" ></s:reset></p></s:form>没有帐号？ <a href="regist.jsp">点击注册</a></div><s:property value="#er"/></div>2、Regist.jsp<body><div id="box"><div id="bottom1"><a href="regist.jsp">注册</a><a href="index.jsp">登录</a><a href="message_list.jsp">留言管理</a></div><div id="login"><div>用户注册</div></div><div id="bottom"><s:form action="UserRegist" name="regist" method="post" validate="true" theme="simple"><p>用户姓名：<s:textfield label="用户名 " name="ername" maxlength="20" cssClass="input-border"></s:textfield></p><p>用户密码：<s:password label="密码 " name="regist.password" maxlength="20" cssClass="input-border"></s:password></p><p>密码确认：<s:password label="确认密码 " name="regist.repassword" maxlength="20" cssClass="input-border"></s:password></p><p>真实姓名：<s:textfield label="真实姓名 " name="" maxlength="20" cssClass="input-border"></s:textfield></p><p>性  别：<s:radio label="性别" list="#{'男':'男','女':'女'}" name="ex" value="'男'"></s:radio></p><p>   <s:submit value="注册" ></s:submit>    <s:reset value="重置" ></s:reset></p></s:form>已有帐号？<a href="index.jsp">点击登陆</a></div></div></body>3、AddMes.jsp<body><div id="box"><div id="bottom1"><a href="regist.jsp">注册</a><a href="index.jsp">登录</a><a href="addmes.jsp">留言</a><a href="message_list.jsp">留言管理</a></div><div id="login"><div>请您留言</div></div><div id="bottom"><form action="MessageServlet" method="post" name="form"><p>留言标题：<input name="title" type="text" size="50" /></p><p> 留言内容：<textarea name="content" cols="38" rows="5"></textarea> <label for="password"></label></p><p>     <input type="submit" name="button" id="button" value="提交留言" />       <input type="reset" name="button2" id="button2" value="重新填写" /> </p></form></div></div></body>4、MessageList.jsp<body><div id="box"><div id="bottom1"><a href="regist.jsp">注册</a><a href="index.jsp">登录</a><a href="addmes.jsp">留言</a><a href="message_list.jsp">留言管理</a></div><div id="login"><div>留言内容及管理</div></div><div id="bottom"><table width="90%" border="1" id="table"><c:choose><c:when test="${empty pageModel.list}"><tr><td height="68" colspan="3">没有留言内容!</td></tr></c:when><c:otherwise><c:forEach items="${pageModel.list}" var="m"><tr><td rowspan="2">用户名：${ername}<br />用户ID:${erId}</td><td height="43">留言标题：${m.title}</td><td rowspan="2" align="center"><c:if test="${!empty user}"><a href="ManagerServlet?method=delete&id=${m.id}">删除</a><a href="ManagerServlet?method=update&id=${m.id}">更改</a></c:if></td></tr><tr><td height="76">留言内容：${m.content}</td></tr></c:forEach></c:otherwise></c:choose></table></div></div></body>5、DBConnect.javapackage com.kuan.dao;import java.sql.Connection;import java.sql.DriverManager;import java.sql.ResultSet; //导入数据库操作的类import java.sql.SQLException;import java.sql.Statement;public class DBConnect {private static Connection conn = null; //连接对象private static Statement stmt = null;private static String user="sa";//数据库的用户名private static String password=""; //数据库的密码//语句对象private static ResultSet rs = null; //结果集对象private static StringAccessDriver="com.microsoft.sqlserver.jdbc.SQLServerDriver";//保存Mssql驱动程序private static StringAccessURL="jdbc:sqlserver://localhost:1433;integratedSecurity=true;DatabaseName =dbs";//保存Mssql连接字符串public DBConnect() {conn = null;}public static Connection getConnection() {try{Class.forName(AccessDriver).newInstance();conn=DriverManager.getConnection(AccessURL,user,password);}catch(Exception e){e.printStackTrace();}return conn;}//加载驱动，连接数据库public static Statement getStmt() {try{Class.forName(AccessDriver).newInstance();conn=DriverManager.getConnection(AccessURL,user,password);stmt=conn.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_ UPDATABLE);}catch(Exception e){e.printStackTrace();}return stmt;}public static ResultSet getRS(String sql) throws SQLException {//查询ResultSet rs ;Statement stmt = DBConnect.getStmt();rs = stmt.executeQuery(sql);return rs;}public static int Update(String sql) throws SQLException {//插入int ret = 0 ;Statement stmt = DBConnect.getStmt();ret = stmt.executeUpdate(sql);return ret;}public static void close(){if(rs!=null)try {rs.close();} catch (SQLException e) { } if(stmt!=null)try {stmt.close();} catch (SQLException e) { } if(conn!=null)try {conn.close();} catch (SQLException e) { } }}6、User.javapackage com.kuan.model;public class User {private Integer id; //ID编号private String username; //用户名private String password; //密码private String name; //姓名private String sex; //性别public String getSex() {return sex;}public void setSex(String sex) {this.sex = sex;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) { ername = username;}public String getPassword() {return password;}public void setPassword(String password) { this.password = password;}public String getName() {return name;}public void setName(String name) { = name;}}7、Message.javapackage com.kuan.model;public class Message {private Integer id; //ID编号private String title; //标题private String content; //内容private Integer userId; //用户IDpublic Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getTitle() {return title;}public void setTitle(String title) {this.title = title;}public String getContent() {return content;}public void setContent(String content) { this.content = content;}public Integer getUserId() {return userId;}public void setUserId(Integer userId) { erId = userId;}}UserDao.javapackage com.kuan.dao;import java.util.List;import org.hibernate.Query;import org.hibernate.Session;import er;public class UserDao {public void saveUser(User user){Session session = null; //Session对象try {//获取Sessionsession.beginTransaction(); //开启事物session.save(user); //持久化usersession.getTransaction().commit(); //提交事物} catch (Exception e) {e.printStackTrace(); //打印异常信息}finally{}}/*** 查询所有用户信息* @return List集合*/public List<User> findAllUser(){Session session = null; //Session对象List<User> list = null; //List集合try {//获取Sessionsession.beginTransaction(); //开启事物String hql = "from user1";list = session.createQuery(hql) //创建Query对象 .list(); //获取结果集session.getTransaction().commit(); //提交事物} catch (Exception e) {e.printStackTrace(); //打印异常信息session.getTransaction().rollback();//回滚事物}finally{//关闭Session}return list;}/*** 通过用户名和密码查询用户* 用于登录* @param username 用户名* @param password 密码* @return User对象*/public User findUser(String username, String password){Session session = null; //Session对象User user = null; //用户try {//获取Sessionsession.beginTransaction(); //开启事物//HQL查询语句String hql = "from user1 u where ername=? and u.password=?";Query query = session.createQuery(hql) //创建Query对象.setParameter(0, username)//动态赋值.setParameter(1, password);//动态赋值user = (User)query.uniqueResult(); //返回User对象session.getTransaction().commit(); //提交事物} catch (Exception e) {e.printStackTrace(); //打印异常信息}finally{}return user;}/*** 判断指定用户名的用户是否存在* @param username 用户名* @return*/public boolean findUserByName(String username){Session session = null; //Session对象boolean exist = false;try {//获取Sessionsession.beginTransaction(); //开启事物//HQL查询语句String hql = "from user1 u where ername=?";Query query = session.createQuery(hql) //创建Query对象.setParameter(0, username);//动态赋值Object user = query.uniqueResult(); //返回User对象//如果用户存在exist为trueif(user != null){exist = true;}session.getTransaction().commit(); //提交事物} catch (Exception e) {e.printStackTrace(); //打印异常信息}finally{}return exist;}}8、UserLogin.javapackage com.kuan.action;import java.sql.ResultSet;import java.util.Map;import com._52run.struts_task.dao.DBConnect;import er;import com.opensymphony.xwork2.ActionContext;import com.opensymphony.xwork2.ActionSupport;public class UserLogin extends ActionSupport {private static final long serialVersionUID = 1L;private User user ;private String msg ;public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public User getUser() {return user;}public void setUser(User user) {er = user;}public String execute() throws Exception {String sql = "select * from user1 where userName = '"+user.getUsername()+"' and uPwd = '"+user.getPassword()+"'";ResultSet rs = DBConnect.getRS(sql);if(!rs.next()) {msg = "用户名或密码错误，请重新输入!";DBConnect.close();return INPUT;} else {ActionContext actionContext = ActionContext.getContext();Map<String, String> session = actionContext.getSession();session.put("user", user.getUsername());//ActionContext.getContext().getSession().put("user",user.getuserName());DBConnect.close();return SUCCESS;}}/* public void validate() {String sql = "select * from regist where userName = '"+user.getuserName()+"' and uPwd = '"+user.getpassWord()+"'";try {ResultSet rs = DBConnect.getRS(sql);if(!rs.next()) {this.addFieldError("msg", "用户名或密码错误，请重新输入");}} catch (SQLException e) {// TODO Auto-generated catch blockSystem.out.print("出现异常");}}*/}9、UserRegist.javapackage com.kuan.action;import java.sql.ResultSet;import java.util.Map;import com._52run.struts_task.dao.DBConnect;import er;import com.opensymphony.xwork2.ActionContext;import com.opensymphony.xwork2.ActionSupport;public class UserLogin extends ActionSupport {private static final long serialVersionUID = 1L;private User user ;private String msg ;public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public User getUser() {return user;}public void setUser(User user) {er = user;}public String execute() throws Exception {String sql = "select * from user1 where userName = '"+user.getUsername()+"' and uPwd = '"+user.getPassword()+"'";ResultSet rs = DBConnect.getRS(sql);if(!rs.next()) {msg = "用户名或密码错误，请重新输入!";DBConnect.close();return INPUT;} else {ActionContext actionContext = ActionContext.getContext();Map<String, String> session = actionContext.getSession();session.put("user", user.getUsername());//ActionContext.getContext().getSession().put("user",user.getuserName());DBConnect.close();return SUCCESS;}}/* public void validate() {String sql = "select * from regist where userName = '"+user.getuserName()+"' and uPwd = '"+user.getpassWord()+"'";try {ResultSet rs = DBConnect.getRS(sql);if(!rs.next()) {this.addFieldError("msg", "用户名或密码错误，请重新输入");}} catch (SQLException e) {// TODO Auto-generated catch blockSystem.out.print("出现异常");}}*/}五、实验总结通过这次Web程序设计实验，我把Web程序设计课程的知识框架重新梳理清楚，对Struts2和Hibernate等框架更加熟悉，对JSP、Struts2、Hibernate和Java语言的语法结构和使用方法更加灵活和得心应手。

web编程课程实验报告

实验报告：Web编程课程实验一、实验目的本次实验旨在通过实践操作，掌握Web编程的基本技能，包括HTML、CSS、JavaScript等前端技术和后端服务器编程技术。

通过实验，加深对Web开发流程的理解，提高实际开发能力，为今后的学习和工作打下坚实的基础。

二、实验内容本次实验主要涉及以下内容：1. 制作一个简单的个人网站，包括个人简介、作品展示、联系信息等页面。

2. 使用HTML、CSS和JavaScript进行页面布局和样式设计，实现基本的交互效果。

3. 通过后端服务器编程技术，实现用户注册、登录、信息管理等功能的开发。

三、实验过程1. 需求分析：首先对个人网站的需求进行分析，确定需要实现的功能和页面结构。

2. 设计页面布局：使用HTML和CSS进行页面布局和样式设计，设计出美观、易于使用的界面。

3. 实现交互效果：使用JavaScript实现页面的动态效果和交互功能，如轮播图、表单验证等。

4. 后端服务器编程：通过后端编程语言（如Python、Java等）实现用户注册、登录、信息管理等功能的开发。

5. 测试与调试：对整个网站进行测试和调试，确保各个功能正常运行，用户体验良好。

6. 部署与发布：将网站部署到服务器上，发布并分享给朋友和家人。

四、实验总结通过本次实验，我掌握了Web编程的基本技能，包括HTML、CSS、JavaScript等前端技术和后端服务器编程技术。

在实验过程中，我遇到了很多问题，但通过查阅资料和请教老师，最终都得到了解决。

通过实践操作，我加深了对Web开发流程的理解，提高了实际开发能力。

同时，我也意识到了团队合作的重要性，只有相互协作才能更好地完成项目。

在今后的学习和工作中，我将继续深入学习Web编程技术，不断提高自己的技能水平。

Web程序设计实验报告

洛阳理工学院课程设计报告课程名称 ___________________________________ 设计题目 ___________________________________ 专业 ___________________________________ 班级 ___________________________________ 学号 ___________________________________姓名 ___________________________________完成日期 ___________________________________网站开发实例教程图书销售管理系统计算机科学与技术 B100508 B 王路霞课程设计任务书图书销售管理系统设计题目：_______________________________________________ _________________________________________________________设计内容与要求：（1）数据库设计要符合范式要求。

（2）能对用户信息、图书信息信息等进行添加、删除、修改等操作；（3）提供用户对图书的查询功能，输入用户名或密码，能查找出该用户所订购的图书；（4）提供必要的统计功能，如用户一共订购了多少本书等。

指导教师：郭俊恩2013年 6 月 21 日课程设计评语成绩：指导教师：郭俊恩年月日目录第1章需求分析 (2)系统目标 (2)功能需求分析 (2)第2章系统设计 (3)系统结构域模块功能 (3)逻辑结构设计 (3)第3章详细设计与实现 (5)模块流程图 (5)界面效果图 (8)第4章测试 (10)基础信息设置测试 (10)第5章总结 (12)参考文献 (13)第1章需求分析系统目标具体分解为：1. 方便客户查看和购买图书；2. 用户购买后可以查看自己的订单；3.用户可以修改自己的登录密码；4. 对于以前没有登陆过的用户可以注册自己的信息。

javaweb程序设计课程设计

java web程序设计课程设计一、课程目标知识目标：1. 理解Java Web程序设计的基本原理，掌握Web应用的结构和开发流程；2. 学会使用Java EE技术栈，包括Servlet、JSP和JSTL，实现动态网页的生成与处理；3. 掌握关系型数据库的基本操作，能够运用JDBC进行数据持久化；4. 了解常用的设计模式在Java Web开发中的应用。

技能目标：1. 能够独立搭建Java Web开发环境，完成基本项目的构建与部署；2. 掌握运用Servlet处理客户端请求，实现前后端的数据交互；3. 熟练运用JSP和JSTL标签库，编写动态网页，提高代码的可读性和维护性；4. 学会运用JDBC进行数据库连接、查询、更新和删除等操作；5. 能够运用所学知识，完成一个简单的Java Web应用项目。

情感态度价值观目标：1. 培养学生对Java Web程序设计的兴趣和热情，激发主动学习的动力；2. 培养学生团队协作精神，学会在项目中分工合作，共同解决问题；3. 培养学生良好的编程习惯，注重代码规范和优化，提高代码质量；4. 引导学生关注网络安全和用户隐私，树立正确的网络道德观念。

本课程针对高年级学生，结合Java Web程序设计的学科特点，注重理论与实践相结合，旨在提高学生的编程技能和项目实践能力。

课程目标具体、可衡量，以便学生和教师在教学过程中能够明确课程预期成果，并为后续的教学设计和评估提供依据。

二、教学内容1. Java Web开发环境搭建：介绍Java EE开发环境，包括JDK安装、IDE使用、Tomcat服务器配置等。

- 教材章节：第1章 Java Web开发基础2. Servlet技术：讲解Servlet的生命周期、请求与响应处理、会话管理。

- 教材章节：第2章 Servlet技术3. JSP和JSTL：介绍JSP页面开发，包括页面指令、脚本语言、标准标签库JSTL。

- 教材章节：第3章 JSP技术；第4章 JSTL标签库4. 数据库连接技术：讲解JDBC的使用，包括数据库驱动、连接池、SQL语句编写。

Web程序设计课程设计报告

Web程序设计课程设计报告课程设计题目：某电子杂志网站姓名：肖琴霞专业：软件工程（国际教育）班级：10211133学号：**********指导教师：***2013 年 3 月 10 日一、设计目的《Web应用开发课程设计》是实践性教学环节之一，是《Web程序设计》课程的辅助教学课程。

通过课程设计，使学生掌握Web网站的基本概念，结合实际的操作和设计，巩固课堂教学内容，使学生掌握软件开发的基本概念、原理和技术，将理论与实际相结合，应用现有的开发工具，规范、科学地完成一个完整地应用软件的设计与实现，把理论课与实验课所学内容做一综合，并在此基础上强化学生的实践意识、提高其实际动手能力和创新能力。

当今时代是飞速发展的信息时代，在各行各业中离不开信息处理，这正使得计算机被广泛的应用于信息管理系统。

计算机的最大好处在于利用它能够进行信息管理和查询。

使用计算机进行信息控制，不仅提高了工作效率，而且大大的提高了其安全性。

尤其对于复杂的信息管理，计算机能够充分发挥它的优越性。

计算机进行信息管理与信息管理系统的开发密切相关，系统的开发是系统管理的前提。

制作电子杂志网站可以方便读者阅读，且可以扩大读者的视野以及提高阅历。

二、设计解决方案问题解决方案：经过分析，我们决定利用ASP编程，使用Dreamweaver MX作前端开发工具，利用SQLServer2000作后台数据库管理，数据库驱动使用ADO。

前台功能模块：系统主界面与登录程序设计，杂志查询及订阅，读者服务模块，杂志分类设计等。

后台功能模块：管理主界面与登录程序设计，最新杂志信息管理模块，杂志订阅管理模块，在留言管理模块设计等。

后台管理的建立，使管理员可以通过后台很容易的对杂志城进行管理，比如：对最畅销杂志，公告和杂志城注册用户进行添加，删除等管理工作，还可以对读者在线留言的处理。

三、电子杂志网需求分析3.1 需求分析需求分析是整个设计过程的基础，最困难、最消耗时间的一步。

Web实验报告系统实习报告范文

Web实验报告系统实习报告范文1.研究课题的目的和意义以及国内外研究动态1.1研究课题的目的和意义目前，各学校都很注重电子化、信息化校园的建设，学生和教师可以方便地访问校园网和互联网。

基于校园网的各种应用，包括信息发布、网络办公、选课排课等均已开展。

构建一个在线的教学系统，完成实际教学的相关环节，可以打破学生学习所受到的时间和空间的，形成式的教学，充分发挥校园网络的作用，进一步将电子化、信息化校园的建设落实到实际教学中，切实推动教学工作，为进行网络化、个性化教育打下基础。

本文根据实验教学的特点，构建一个基于web的在线实验报告系统，并在教学实践中进行了广泛应用。

每个学期，亭林中学的教学过程中都涉及到很多要求学生实际动手的课程，这样，学生就有很多的实验报告要撰写，报告完成之后的、老师批阅报告、对报告进行评分都是必不可少的步骤，在以往没有实验报告管理系统的时候，这是一个很费时费力的过程，举例来说，学生不一定会遵守统一的报告命名规则，这样，教师在收集报告的时候就会浪费一定的时间和精力去重命名文档，而教师在批阅后，微软发布情人节安全补丁浏览网页动画或被恶意.netframewor。

需要手动打分，并作重复的填写工作等，这样，每个学期的课程都会产生大量的数据，给信息造成了很大的困难。

本系统的应用可以较好地改善以上的问题，完全支持网络办公，节省成本，提高效率，改善流程。

基于以上的原因和需求，经过亭林中学的校领导层决策，决定开发本项目，以提高学校教学工作效率，为教学工作提供有力支持。

信息化建设基本分为四个阶段，学校也不例外。

四个阶段是：第一阶段应用认识阶段，从零开始了解信息化，属于学习阶cobol方面实习报告软件工程硕士论文开题报告段；第二阶段关键应用阶段，为了满足教学科研的需要，采取的一些局部信息化应用；第三阶段扩展应用阶段，随着经验的积累逐步扩展已有应用，数据局部集中；第四阶段整合应用阶段：构建一个整合的信息网络，数据集中，以承载行政管理、电化教学、科研、数字图书馆、远程教育、电子收费等不同需要。

web应用程序设计实验报告

web应用程序设计实验报告Web应用程序设计实验报告Web应用程序是指可以在Web浏览器中运行的应用程序。

在本次实验中，我们学习了如何设计和开发一个简单的Web应用程序，其中包括用户界面设计、数据存储和交互逻辑的开发。

一、需求分析在设计任何应用程序之前，我们需要先明确应用程序的需求。

在本次实验中，我们的应用程序需要满足以下需求：1. 用户可以注册和登录账户；2. 用户可以上传和查看图片；3. 用户可以给图片添加标签；4. 用户可以查看所有图片和按标签查看图片。

二、技术选型在满足需求的基础上，我们需要选择合适的技术来实现我们的应用程序。

在本次实验中，我们选择了以下技术：1. 前端框架：Bootstrap；2. 后端框架：Flask；3. 数据库：SQLite。

三、实现过程1. 用户注册和登录我们使用Flask-WTF扩展来实现用户注册和登录。

该扩展提供了对表单的验证和渲染的支持，可以方便地处理表单数据。

在注册页面，用户需要填写电子邮件地址和密码。

我们使用WTForms库来验证和渲染表单。

如果表单数据有效，则将用户数据保存到数据库中。

在登录页面，用户需要输入电子邮件地址和密码。

如果该用户已注册并且密码正确，则将用户数据保存到session中。

2. 图片上传和查看我们使用Flask-Uploads扩展来实现图片上传。

该扩展提供了对文件上传和处理的支持，可以方便地处理图片文件。

在上传页面，用户需要选择一个图片文件并输入标签。

我们使用Flask-WTF来验证和渲染表单。

如果表单数据有效，则将图片文件保存到服务器上，并将图片信息保存到数据库中。

在查看页面，我们使用Flask-Bootstrap来渲染图片列表。

用户可以按标签查看图片，也可以查看所有图片。

3. 数据库设计我们使用SQLite作为我们的数据库，因为它易于使用和配置。

我们设计了以下表：1. users表：保存用户数据，包括电子邮件地址和密码；2. images表：保存图片数据，包括文件名、文件路径和标签。

wab程序设计课程设计

wab程序设计课程设计一、课程目标知识目标：1. 学生能理解Wab程序设计的基本概念，掌握Web编程的核心技术，如HTML、CSS和JavaScript。

2. 学生能运用所学知识，独立设计并实现简单的Web页面，具备基本的网页布局和样式设计能力。

3. 学生了解Web前端的开发流程，掌握调试和优化网页性能的基本方法。

技能目标：1. 学生具备运用HTML进行网页结构编写的能力，能正确使用标签组织页面内容。

2. 学生掌握CSS的使用，能对网页进行有效的样式设计和布局调整。

3. 学生能运用JavaScript实现简单的交互功能，如表单验证、动态效果等。

情感态度价值观目标：1. 培养学生对Web程序设计的兴趣，激发学生的学习热情，使其主动参与课程学习。

2. 培养学生的团队协作能力，使其在项目实践中学会与他人合作、沟通和解决问题。

3. 培养学生的创新意识，鼓励学生在Web设计过程中尝试新思路、新方法，形成独特的个人风格。

本课程针对学生年级特点，以实用性为导向，结合Web程序设计学科性质，注重培养学生的实际操作能力和团队协作能力。

课程目标明确，分解为具体可衡量的学习成果，为后续教学设计和评估提供依据。

二、教学内容1. Web编程基础- HTML：页面结构、常用标签、表单制作- CSS：选择器、盒模型、布局、样式优先级- JavaScript：基本语法、函数、事件处理、DOM操作2. Web页面设计与实现- 页面布局：使用HTML和CSS实现常见的网页布局- 响应式设计：媒体查询、移动端适配- 交互功能：表单验证、轮播图、下拉菜单3. 网页调试与优化- 调试工具：Chrome开发者工具的使用- 性能优化：图片优化、CSS优化、JavaScript优化4. 项目实践- 团队合作：分组进行项目实践，明确分工与协作- 项目开发流程：需求分析、设计、编码、测试、部署- 作品展示与评价：展示项目成果，进行自评和互评教学内容依据课程目标进行选择和组织，注重科学性和系统性。

《web程序设计》教学大纲(本科)

《web程序设计》教学大纲注：课程类别是指公共基础课/学科基础课/专业课；课程性质是指必修/限选/任选。

一、课程地位与课程目标（-）课程地位web程序设计》本课程是计算机科学与技术的专业课。

本课程的目的是使学生在巩固计算机网络基础知识的基础上，初步掌握网络环境下的基本编程语言及方法，理解并掌握网络环境下人机界面交互编程技术及方法,相关基本数据库操作技术及方法,在互联网的应用层掌握建立网站和制作主页的基本方法及相关技术。

（二）课程目标1、理解ASP程序设计的基本概念，具有理解和分析动态网站架设功能设计问题的基础和能力；2、理解动态网站设计的基本概念及理论，了解典型动态网站架设的基本方法及工具软件；能够完成设计方案并分析阐明设计的合理性；3、理解ASP程序设计的基本概念，理解掌握动态网站web界面的设计及交互的基本技术及方法；3、熟练掌握ASP设计中典型工具软件EditPlus的应用，掌握利用网络资源实现文件存取等组件功能的方法及手段；4、熟练掌握ASP设计中数据交互及数据库操作的基本方法，能利用工具软件设计及实现典型基本功能的动态网站。

增强学生对新技术的兴趣，培养学生对网络技术运用于自动化领域的能力，增强学生对通过专业技能促进社会生产自动化水平提高的信心。

二、课程目标达成的途径与方法《web程序设计》课程教学以课堂教学为主，结合自主学习和实验教学，针对典型动态网站架设及功能实现的基本概念及方法，培养学生运用基础知识和专业知识，分析和解决实际问题工程问题的能力和方法。

1课堂教学主要讲述基本概念，基本原理、和设计方法。

在课堂教学中，充分引入互动环节，提高教学效果。

2设计验证性、设计性实验，采用实验教学方式，训练实验技能，培养理论知识的应用能力。

3设计与专业相结合的实际应用问题，如自动化生产线电子看板系统，培养学生分析问题、实现工程应用的能力及方法三、课程目标与相关毕业要求的对应关系注：1.支撑强度分别填写H、M或L （其中H表示支撑程度高、M为中等、L为低）；2 .毕业要求须根据课程所在专业培养方案进行描述。

web程序设计实验报告.doc

Web程序设计实验报告院另IJ计算机与通信工程学院专业计算机科学与技术班级学号__________________________________姓名______________________________________成绩2013 年12 月27【实验编号】【实验名称】1熟悉环境和CSS的使用实验内容完成三个页面，三个页面之间可以通过链接互相访问，自由的设置其中的控件，使用一个css 表单來美化这三个页而。

实验步骤index,<!DOCTYPE PUBLIC 11-//W3C//DTD 4.01 Transitional//EN ,!>< ><head><title>index. </title><meta http-equiv=n keywords H content = H keyworcil, keyword2, keyword3,!> <metahttp-equiv=IT description 11 content=,f this is my page 1’〉<meta http —equiv="content —type" content=,f text/ ; charset=UTF-8n >< !——<link re 1=’’style s heet n t ype=’T text/css’▼ href =n . /styles . css"〉——>clink rel=n stylesheet n type=,f text/css ,f href = "mycss • css ’▼〉</head><body><hl>Sunset</hl><p> <a href=lf 1. IT > link l</a> </br> <a href='*2. " > link 2</a></p></body></ >文綷qt, Mio IVQCJ 收廉… XIMP 镧⑽ ___________________________________________O 棚IK v S，就：收联P 0•备困▼ Sunsetlink 1lmk2 1.<!DOCTYPE PUBLIC 11-//W3C//DTD 4.01 Transitional//EN,!> < ><head><title>l. </title><meta http-equiv=n keywords n content=,!keywordl, keyword2, keyword3,f > <meta-- 4^18080/ttil/ift4tx hlikl (v)® Tools Lilt ra »« O b nn KVOJ *http—equiv="description" content="this is my page11〉<meta http-equiv="content-type1’ content=,,text/htrnl; charset=UTF-811 > clinkrel=,f stylesheet n type=” text/css" href=,f mycss .css’’〉< !——clink re l=,f stylesheet n type=n text/css” href=H . /styles . css’’〉——> </head><body><hl> This is my pagel. <br> </hl></body></ >2.<!DOCTYPE PUBLIC l!-//W3C//DTD 4.01 Transitional//EN l!> < ><head><title>2. </title〉<meta http—equiv=n keywords" content=l!keywordl z keyword2, keyword3IT> <metahttp-equiv=n description11 content="this is my page1’〉<meta http-equiv=n content-type11 content = n text/ ; charset=UTF-8n> clink rel=,fstylesheet,f type=,f text/css,f href=,f mycss . css,f >< !——<link rel=n stylesheet n type=n text/css,T href=!l. /styles . css"〉——> </head><body><hl> This is my page2. <br> </hl> </body></ >This is my page2.Mycss.css0CHARSET "UTF-8";hl {color: red;background-color: gray;text-align: left;font-size: 58pt;}body{color: blue;background-image: url (Sunset.jpg); }实验编号 2实验名称___________________ 熟悉DOM的原理和使用rm（w"在刚才建立的index. 页而添加一个删除按钮，做一个基于DOM的js函数，每次点击删除按钮就会将刚才生成的一个控件删除。