当前位置：文档之家 › Web开发实验一

Web开发实验一

  • 格式：doc
  • 大小：383.00 KB
  • 文档页数：12

下载文档原格式

  / 12

合集下载

web实验报告实验总结(一)

web实验报告实验总结(一)

web实验报告实验总结(一)前言作为一名资深的创作者，在进行web实验报告实验后，我对整个实验感到非常满意。

在这篇总结文稿中，我将会针对这次实验进行详细的总结和反思。

实验背景本次实验的目标是创建一个web实验报告，以展示对于web开发的理解和技能的应用。

通过这次实验，我能够进一步熟悉和掌握各种web开发技术和工具，同时提升我的团队协作能力和沟通能力。

实验过程我首先进行了实验需求的分析和设计，明确了实验目标和任务。

然后，我选择了合适的开发工具，包括文本编辑器、代码版本控制系统等。

接着，我开始进行编码和调试，并逐步完善和优化我的web实验报告。

最后，我进行了测试和评估，确保实验报告能够在不同的平台和浏览器上正常展示和运行。

正文实验成果通过这次实验，我成功地创建了一个具有良好用户体验的web实验报告。

我的实验报告包含了完整的内容，包括实验背景、实验目的、实验过程和实验结果等。

我运用了html、css和javascript等技术，使得实验报告的界面美观、交互性强。

同时，我还保证了实验报告的可访问性和响应式设计。

实验收获通过这次实验，我学到了很多关于web开发的知识和技能。

我熟练掌握了html、css和javascript等前端技术，能够创建精美的网页并实现丰富的交互效果。

我还学会了使用代码版本控制系统进行团队协作和代码管理，提高了我的项目管理能力。

此外，我还学会了进行测试和评估，并解决了一些兼容性和性能方面的问题。

实验感想这次实验让我更加深入地理解了web开发的重要性和挑战。

我意识到web开发需要不断学习和更新技术，保持对新技术的敏感度和热情。

在实践中，我也遇到了一些困难和问题，但通过自己的努力和团队的支持，我最终克服了这些困难并取得了较好的成果。

这次实验增强了我的自信心和动手能力，我相信在今后的学习和工作中会更加顺利。

结尾通过这次web实验报告实验，我不仅提升了我的web开发能力，还锻炼了我的团队合作和沟通能力。

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

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

长春大学20 15 —2016学年第二学期Web前端开发技术课程实验报告学院：计算机科学技术专业：软件工程班级：软件14402学号：041440211姓名：武嘉琪任课教师：车娜实验一构建HTML页面一、实验目的熟悉HTML制作网页的基础知识，并能熟练运用学过的内容制作、设计图文混排的网页。

二、内容及要求运用学过的代码设计一个图文混排网页，满足如下要求：1.既有图像又有文字，并且呈左右排列。

2.文字部分由标题和段落文本组成，它们的字体和字号不同。

3.在段落文本中，段落前有2字符留白，一些文字以特殊的颜色加以突出显示。

三、实验原理文本：font可以跟color、size、face等属性根据不同的值对文本进行修改；图片：img标记可以跟border、height、width、align、vspace、hspace 等属性根据不同的值对滚动字进行设置；其他相关内容：各级标签、标题设置、背景图等。

四、实验步骤1、确立自己的网页主题选择传智博客设计学院作为本次网页设计的主题。

2、网页基本设计(1)应用h2标记设计标题样式。

(2)应用font标记及其face、size、color等属性设计文本字体样式。

(3)应用p标记设计文本段落格式。

(4)应用img标记及其src、alt、align、hspace、height、width等属性设计图片排版样式。

五、实验代码及网页效果图1．搭建基本结构使用<img/>标记插入图像。

使用<h2>标记和<p>标记分别设置标题和段落文本。

并对< img />标记应用align属性和hspace属性实现图像居左文字居右、且图像和文字之间有一定距离的排列效果。

关键代码如下：<img src="作业/logo.gif" alt="网页设计、平面设计、UI设计"align="left" hspace="30" height="150" width="250"/><h2>传智播客设计学院</h2><p>传智播客设计学院</p >效果如图1-1所示。

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技术实验指导书

Web技术实验指导书

《Web技术》实验指导书北京工商大学计算机与信息工程学院2011年3月目录实验一使用Dreamweaver制作HTML页面 (3)实验二CSS及JavaScript实验 (3)实验三MyEclipse使用 (4)实验四JSP技术应用实验 (4)实验五JSP动作 (5)实验六JSP的<jsp:useBean>动作使用 (5)实验七JSP内置对象——request对象和response对象 (6)实验八JSP内置对象——out对象和session对象 (6)实验九JSP使用技巧 (6)实验十MySQL数据库使用 (7)实验十一JSP数据库应用开发（4学时） (7)实验一使用Dreamweaver制作HTML页面【实验目的】掌握使用Dreamweaver制作HTML页面的方法【实验内容】1．使用HTML制作一个页面，要有背景颜色，页面显示内容及格式如下图所示。

2．制作一个页面，上有文字、图像和朋友的E.mail地址，在文字和图像上创建超级链接，单击链接时，页面跳转到其他页面，单击E.mail地址时，打开信箱，发送邮件。

3．制作一个计算器界面，界面如下图所示。

4．用Top: 显示logo图片和页面的标题。

Left: 登录模块Body: 当前页面的主要显示区域。

Bottom: 显示版权信息。

【实验报告】将实验文件发送到老师的电子信箱。

实验二CSS及JavaScript实验【实验目的】掌握CSS及JavaScript的使用方法【实验内容】1.定义一个main.css文件，在其中设置超链接的颜色、访问过的超链接的颜色，颜色自定。

另外，设计两个HTML页面，在其中创建超链接，并链接main.css文件，观察超链接的颜色。

2. 使用JavaScript脚本来验证用户输入的用户名是否为空，并要求密码的长度必须大于6，根据用户的输入给出相应的提示。

3. 页面上有一幅图像，在状态栏显示有关图像的说明。

单击图像时，换成另一幅图像，同时状态栏的内容也做相应的变更。

Web开发技术实验指导书

Web开发技术实验指导书

安徽农业大学《Web开发技术》JSP版课程配套教材《Web开发技术》实验指导书（JSP版）刘波编写安徽农业大学信息与计算机学院通信工程2008年2月目录实验一搭建JSP运行的实验环境 (1)实验二 JSP页面 (3)实验三显示不同大小的“你好JSP” (7)实验四 JSP指令和动作 (10)实验五 Tag文件的代码复用 (12)实验六中文显示服务器端日期 (14)实验七 JSP内置对象 (19)实验八 session对象 (23)实验九简易留言板 (28)实验十 JSP中使用Java Bean (31)实验十一 JSP中的文件操作 (41)实验十二 JSP中使用数据库 (48)实验十三 Java Servlet (66)实验十四网上书店 (71)实验报告 (76)实验一搭建JSP运行的实验环境一、实验目的（1）掌握JSP运行环境的安装与配置（2）理解JSP与Servlet的关系（3）运行简单的JSP页面，理解JSP的运行原理二、实验工具（1）JDK1.4、JDK1.5或JDK1.6，可以从SUN公司的网站免费下载（2）编辑工具－记事本（3）Tomcat服务器，也可以从网上免费下载三、实验步骤（1）按教材中演示安装JDK（2）按教材中演示安装Tomcat（3）启动Tomcat服务器，在浏览器中输入：http://localhost:8080，观察主页内容（4）观察Tomcat安装目录下的各个子目录的内容（5）打开记事本，输入下列源代码并保存为exer1.jsp。

将此文件复制到Tomcat安装目录下的webapps\ROOT目录下，运行该页面，观察其对应的Servlet源代码。

exer1.jsp的代码：<%@ page contentType="text/html;charset=GB2312" %> <!-- jsp指令标签 --><%@ page import="java.util.Date" %> <!-- jsp指令标签 --><%! Date date; // 数据声明int sum;public int add(int m,int n) // 方法声明{ return m+n;}%><HTML><BODY bgcolor=cyan> <!—html标记 --><FONT size=4><P>程序片创建Date对象：<% Date date=new Date(); //java程序片out.println("<BR>"+date);sum=add(12,34);%><BR>在下一行输出和:<BR><%= sum+100 %> <!-- Java表达式 --></FONT></BODY></HTML>（6）将exer1.jsp文件复制到Tomcat安装目录下的webapps\examples目录下，运行该页面，观察其对应的Servlet源代码。

WEB系统开发实验手册

WEB系统开发实验手册

实验1 Web应用程序设计基础一、实验目的1、了解HTML的概念，掌握HTML文档的基本结构；学会编写HTML文档。

2、掌握IIS配置的方法。

二、实验内容与步骤（一）IIS配置和添加IIS服务在安装IIS好之后，可以对IIS进行配置，步骤如下。

1、选择“开始”→“控制面板”→性能和维护→“管理工具”→“Internet 信息服务管理器”来打开IIS管理器。

如下图。

2、在“默认网站”上单击鼠标右键，选择“新建 虚拟目录”，如下图。

3、在“别名”处输入“ test”，如下图。

,4、然后点击下一步，在目录处点击“浏览”按钮，选中存放网页的文件夹（或输入“E:\web”）。

点击下一步，进行默认的设置后，点击下一步，直到完成。

5、先将传给你们的文件“输出各列颜色.asp”复制到你刚才新建的文件夹中（如“E:\web”）打开IE浏览器，在地址栏输入相应的地址，.5（你的电脑的IP地址）/test /输出各列颜色.asp 或者http://localhost/test/输出各列颜色.asp进行测试。

（还可以将localhost换成本机IP地址进出测试，也可以换成相邻电脑的IP，访问他电脑中的WEB）6.将传给你们的文件“注册网页.htm”复制到你刚才新建的文件夹中（如“E:\web”）打开IE浏览器，在地址栏输入相应的地址，http://IP地址/test/注册网页.htm或者http://localhost/test/注册网页.htm进行测试。

7.将传给你们的文件夹“网页”复制到你刚才新建的文件夹中（如“E:\web”）打开IE浏览器，在地址栏输入相应的地址，http://localhost/test/网页/我的网页.htm进行测试。

（二）建立更多的Web站点1、在E盘下建立一个文件夹，名字为web2，并将相应的文件复制到web2文件夹中。

2、在“默认网站”上单击鼠标右键，选择“新建 虚拟目录”，如下图所示。

电大web开发基础形考1

电大w e b开发基础形考1 -CAL-FENGHAI-(2020YEAR-YICAI)_JINGBIAN
实验报告
实验1：电商网站前端页面内容编写
实验目标
掌握使用html制作电商网站页面的技巧。

实验环境
操作系统：Windows 10
编辑软件：Visual studio code
Cpu：intel i5 8400
内存：16g
硬盘：256g固态
实验内容
根据素材中的设计图，编写网站首页，查询列表页和详情页三个网页的html内容（暂时不用编写CSS代码）
实验结果
实验体会
学习到了HTML语言的设计和代码指令自然不必再赘述，但更重要的是锻炼了思维能力，培养了设计创新的能力。

在整个HTML学习的过程中，代码的运用、基础知识的学习可以说只是作为技术的基础层面，而要想真正完成一个项目，更多的是需要思维能力的锻炼和项目的创新。

因为如果没有这种能力，或者比较薄弱，一方面难以想出新的项目的构思，另一方面无法想出动画的翻转或者各种效果的指令代码的书写。

所有的这些都贯穿于HTML的实训过程中。

再具体的将来，就是对于所学的每个指令，并非是记忆住其书写的格式，而是需要我们加入自己对每个代码感悟和认识。

怎样的情况下去应用，如何用，使用时的技巧，这些都是重要的对于自己能力的锻炼。

另外，结合于其中的，还有对于独立思考的能力的培养。

这一点是显而易见的。

无论是对于一个新的项目的编写，还是对于学习每一条单独的指令，老师和同学所能帮助的是
引导和解决难题的作用，而要想真正做到自己学会指令，则离不开独立思考，独立学习的过程和环节。

web实验一报告

实验1 静态网页制作一、实验目的1、通过本实验了解HTML标记语言的基本语法格式2、了解使用HTML语言制作静态网页的基本技术3、掌握HTML表格的设计方法4、设计一个学生成绩查询的 2.0网站二、实验要求1、使用HTML语言，在Windows“记事本”程序中编写HTML代码，制作学生成绩登记表，要求能在浏览器中正确显示字体、字型、字号等格式。

2、设计一个用于学生成绩查询的 2.0网站。

三、实验步骤1、使用Windows记事本程序制作网页1）编写HTML代码：启动Windows附件中的记事本程序，编写HTML代码2）保存HTML文件3）执行如图1-1图1-14）源代码：<head><title>学生成绩登记表</title></head><body><table style="width: 100%;"><caption><font size = "6" color=red face="隶书">学生成绩登记表</caption> <tr><td>学号</td><td>姓名</td><td>班级</td><td>数学</td><td>语文</td><td>英语</td></tr><tr><td>0001</td><td>张三</td><td>计算机0101</td><td>76</td><td>98</td><td>85</td></tr><tr><td>0002</td><td>李四</td><td>计算机0101</td><td>62</td><td>76</td><td>71</td></tr><tr><td>0003</td><td>王五</td><td>计算机0101</td><td>81</td><td>82</td><td>92</td></tr></table></body></html>2、设计一个用于学生成绩查询的 2.0网站1）设计要求：假设某学校现在有3个班级，要求设计一个能在网络中通过IE浏览器进行各班级学生成绩查询的网站。

WEB技术基础实验指导书(实验1)

实验一、简单网页设计一、实验目的1．掌握JSP运行环境的配置；2．掌握HTML语言中基本标记的含义及其使用方法；3．掌握CSS样式表的使用方法；二、实验内容1．在Tomcat服务器中测试一个简单的JSP页面；2．制作一个个人信息注册页面；3．制作一个样式表文件，并将其关联到一个HTML页面；三、实验步骤1.JSP页面测试1)安装JDK：下载JDK包以后，按安装向导的提示进行安装；2)安装Tomcat：下载Tomcat安装文件后，运行安装文件并按安装向导的提示进行安装；3)在安装Tomcat之后，在操作系统的开始菜单的“所有程序”项中会出现一个Apache Tomcat x.x用户组：4)在这些程序项中“Configure Tomcat”用于修改Tomcat的一些基本配置，“MonitorTomcat”用于启动与停止Tomcat，“Tomcat 6.0 Program Directory”用于进入Tomcat的安装目录；5)选择“Tomcat 6.0 Program Directory”进入到Tomcat的安装目录之后，可以看到bin、conf、lib、logs、webapps、work等子目录；6)在conf文件夹的server.xml文件中找到<Connector port="8080"protocol="HTTP/1.1" maxThreads="150" connectionTimeout="20000"redirectPort="8443"/>，并将8080改为你想要设置的端口号（如80等）。

注意该段配置未被用<!-- -->注释，而且其协议名称应该是HTTP/1.1。

7)在webapps文件夹下新建一个myweb文件夹，然后在myweb文件夹下面新建一个WEB-INF文件夹；8)编写一个test.jsp页面，该页面代码如下：<html><head><title>My First JSP Page</title></head><body><%="Hello,world!"%></body></html>9)将test.jsp放置到myweb文件夹中；10)启动Tomcat服务器；11)打开浏览器，输入http://localhost:<端口号>/myweb/test.jsp，查看结果。

《Web前端开发》-实验指导书

《Web前端开发》-实验指导书《Web前端开发》实验指导书目录实验1 HTML基础与布局元素 (3)实验2 表格与表单的应用 (6)实验3 框架 (8)实验4 CSS样式表基础 (12)实验5 CSS样式布局 (16)实验6 Dreamweaver制作网页 (19)实验7 网站设计 (22)实验8 JavaScript基础 (26)实验9 JavaScript对象 (29)实验10 DOM编程 (33)实验11 JavaScript常用特效 (36)实验1 HTML基础与布局元素一、实验目的1．掌握使用HTML的基本结构创建网页2．掌握使用行级和块级标签组织页面内容3．掌握使用图像标签实现图文并茂的页面二、实验内容使用HTML基本元素设计基本网页三、实验环境（1）使用的操作系统及版本。

Windows XP Professional（2）使用的编译系统及版本。

Dreamweaver CS6四、实验步骤及说明任务1基本块级元素使用HTML编辑工具，编写HTML代码，实现如图所示的页面效果任务2用于布局的块级元素编写HTML代码，实现如图所示的页面效果任务3行级元素编写HTML代码，实现如图所示的页面效果。

任务4超链接编写HTML代码，实现导航菜单的链接●单击lj.html页面的“人物简介”，将跳转到ww.html的介绍页。

●单击lj.html页面的“王孟”，将跳转到设置锚点的ww.html页面相应位置。

●单击ww.html的返回链接可以返回到lj.html。

●单击“联系我们”，将自动打开本机的电子邮件程序。

小结及思考题扩展训练：实现如图所示的页面效果实验2 表格与表单的应用一、实验目的1.掌握表格的基本结构，熟悉表格标签的使用。

2.会使用表格标签属性修饰美化表格。

3.了解表单的基本形式，掌握表单元素的使用方法。

二、实验内容使用表单标签与表格标签设计应用网页二、实验环境1.使用的操作系统及版本。

Windows XP Professional2.使用的编译系统及版本。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</td>
</tr>
<tr>
<td colspan="3" style="background-color: #CCFFFF">
登陆状态</td>
</tr>
<tr>
<td colspan="4" style="background-color: #33CCCC">
您的位置：</td>
</tr>
</table>
</td>
<td class="style4" dir="ltr"
style="text-align: center; background-color: #99CCFF">
<asp:LinkButton ID="LinkButtonReset" runat="server">个性重置</asp:LinkButton>
//逐个获取sInput中每个字符，若不是空格将该字符连接到temp中
//否则，将temp值转换为整数后储存到数组元素
for (int i = 0; i <= sInput.Length - 1; i++)
{
if (sInput.Substring(i, 1) != " ")
{
temp += sInput.Substring(i, 1);
<asp:Button ID="btnSubmit" runat="server" onclick="btnSubmit_Click" Text="等级" />
<asp:Label ID="lblDisplay" runat="server" Text="Label"></asp:Label>
</form>
认真完成各项实验内容
30分
报告质量
填写内容完整、体现设计过程和结果，实验总结能体现问题和收获
70分
说明：
评阅教师：
日期：年月日
实验内容
一、利用table、Div和CSS对网页布局。
1.利用table对网页布局的主要代码如下：
<body>
<form id="form1" runat="server">
case 5:
case 4:
case 3:
case 2:
case 1:
case 0:
lblDisplay.Text = "不及格";
break;
}
}
浏览效果截图如图2.1
图2.1
2.在WEB窗体上输出九九乘法表
public partial class _Default : System.Web.UI.Page
//输出两个空格
Response.Write ("&nbsp;&nbsp");
}
//换行输出
Response .Write ("<br/>");
}
}
}
浏览效果如图2.2
图2.2
3.输入一组空格间隔10个以内的整数，输出该数组的降序排列
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtInput" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" onclick="btnSubmit_Click" Text="降序" />
</div>
</form>
{
protected void Page_Load(object sender, EventArgs e)
{
//控制行数
for (int i = 1; i <= 9; i++)
{
//输出1行
for (int j=1;j<=i;j++)
{
//输出一个乘法算式
Response .Write (i.ToString () + "*" + j.ToString () + "=" + (i*j).ToString ());
{
//获取文本框中输入的字符串，并在最后添加一个空格
string sInput = txtInput.Text.Trim() + " ";
//j控制数组下标，每个aInput数组储存一个整数，temp储存一个整形字符串
int j = 0;
int[] aInput = new int[10];
string temp = "0";
<br />
<asp:TextBox ID="txtDividend" runat="server"></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="提交" onclick="btnSubmit_Click" />
</div>
图2.4
5.设计用户信息类UserInfo。
public class UserInfo
<div>
<asp:Table ID="Table1" runat="server">
</asp:Table>
</div>
<table class="style1" style="width: 100%">
<tr>
<td class="style2" rowspan="2">
<asp:Image ID="ImageLogo" runat="server" Height="66px"
{
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
float fGrade = float.Parse(txtInput.Text);
int iGrade = (int)(fGrade / 10);
switch (iGrade)
</td>
<td class="style3" style="text-align: center; background-color: #99CCFF">
<asp:LinkButton ID="LinkButtonRegister" runat="server">注册</asp:LinkButton>
</form>
</body>
浏览效果截图见图1.1：
图1.1
2.利用Div对网页布局的主要代码：
<head runat="server">
<title></title>
<link href="DivCss.css" rel="stylesheet" type="text/css" />
</head>
实验内容和要求：
1．参考实验指导书的实验步骤，完成实验1-3。
2．将实验2和实验3的主要代码、运行结果截图填入实验报告。
3．完成思考题
4．就本次实验遇到的问题和收获作出总结。
报告应在2周内完成，并以学号+姓名+实验一为名以班级为单位上交（电子文档）。
成绩评定表
类别
评分标准
分值
得分
合计
上机表现
按时出勤、遵守纪律
</div>
</div>
<div id="position">position
</div>
</div>
</form>
</body>
3.建立.css文件
/*控制DivCssCss.aspx*/
#logo
{
float:left;
width :30%;
}
#navigation
{
background-color:#99CCFF;
{
case 10:
case 9:
lblDisplay.Text = "优秀";
break;
case 8: