Web客户端编程实验

最新推荐文章于 2021-07-02 05:10:41 发布

没入门就实践的newhand

最新推荐文章于 2021-07-02 05:10:41 发布

阅读量378

点赞数

分类专栏： Java web

本文链接：https://blog.csdn.net/MrLuo8/article/details/111332315

版权

Java web 专栏收录该内容

12 篇文章 7 订阅

订阅专栏

实验报告
实验名称 Web客户端编程日期 2020年 09 月29 日
一、实验目的：
使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。
验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。
通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。
通过实验了解JavaScript的编程规范及基本语法，能够分析JavaScript程序的功能，可以在网页制作中使用JavaScript程序。

二、实验环境：

Eclipse+HTML

三、实验内容：
1、
1）使用frameset标签，以及搭配使用DIV+CSS，设计并布局一个简单的页面。
2）在其中的一个页面里面，开发一个用户注册界面，要求：使用JavaScript检查格式是否正确。
程序代码：
Main.html

<html>
<head>
<meta charset="UTF-8">
<title>产品管理系统</title>
<link href="frame.css" rel="Stylesheet" type="text/css"/>
<link href="menu.css" rel="Stylesheet" type="text/css"/>
<style type="text/css">
body
{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}
</style>

<script language="javascript" type="text/javascript">
function SetWinHeight(obj)
{
var win=obj;
if (document.getElementById)
{
if (win &&!window.opera)
{
if (win.contentDocument && win.contentDocument.body.offsetHeight) 
win.height = win.contentDocument.body.offsetHeight; 
elseif(win.Document && win.Document.body.scrollHeight)
win.height = win.Document.body.scrollHeight;
}
}
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div id="framecontentLeft">
<div class="menu">
<ul>
<li><a href="CategoryList.html">产品类别</a></li>
<li><a href="ProductList.html">产品明细</a></li>
</ul>
</div>
</div>
<div id="framecontentTop">
<div style="text-align: center;">
<div style="float: right;">
<a href="test.html">登录</a>
</div>
<h1>产品管理系统</h1>
</div>
</div>
<div id="maincontent">
<iframe id="content" name="content" onload="Javascript:SetWinHeight(this)" frameborder="0" scrolling="yes" width="100%"></iframe>
<p>你好,javaweb</p>
<picture>
    <source srcset="paper.gif" media="(max-width: 400px)">
    <img src="D:\JAVA_Workplace\first_test_one\WebContent/paper.gif" alt="Flowers" style="width:auto;">
</picture>
</div>
</form>
</body>
</html>

Frame.css

@charset "UTF-8";
#framecontentTop
{
position: absolute;
top: 0;
left: 0;
height: 100px;
width: 100%;
overflow: hidden;
vertical-align: middle;
background-color: #D2E6FA;
/*background-color:white;*/
}

#framecontentLeft
{
position: fixed;
top: 100px;
left: 0;
height: 100%;
width: 150px;
overflow: hidden;
vertical-align: top;
background-color: #d9f2e6;
}

#maincontent
{
position: fixed;
left: 150px;/*Set left value to WidthOfLeftFrameDiv*/
top: 100px;/*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #d6c5ed;
border-top: solid 2px #d6c5ed;
border-left: solid 2px #b186d5;
}
* html body
{
padding: 100px 0 0 150px;/*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}
* html #maincontent
{
height: 100%;
width: 100%;
}
* html #framecontentTop
{
width: 100%;
}

Menu.css

@charset "UTF-8";
.menus
{
}
.menu ul
{
padding: 0;
margin: 0;
list-style-type: none;
width: 100%;
}
.menu li
{
position: relative;
background: #d4d8bd;
height: 26px;
}
.menu a, .menu a:visited
{
display: block;
text-decoration: none;
height: 25px;
line-height: 25px;
width: 149px;
color: #000;
text-indent: 5px;
border: 1px solid #fff;
border-width: 0 1px 1px 0;
}
.menu a:hover
{
color: #ffffff;
background: #949e7c;
}

CategoryList.html

<html>
<head>
<meta charset="UTF-8">
<title>类别列表</title>
</head>
<body>
<div>
	<table>
		<tr>
			<td>类别</td>
			<td>类别</td>
			<td>类别</td>
		</tr>

		<tr>
			<td>类别</td>
			<td>类别</td>
			<td>类别</td>
		</tr>
	</table>
</div>
</body>
</html>

ProductList.html

<html>
<head>
<meta charset="UTF-8">
<title>类别列表</title>
</head>
<body>
<div>
	<table>
		<tr>
			<td>类别</td>
			<td>类别</td>
			<td>类别</td>
		</tr>

		<tr>
			<td>类别</td>
			<td>类别</td>
			<td>类别</td>
		</tr>
	</table>
</div>
</body>
</html>

Test.html

<html>
<head>
<meta charset="UTF-8">
<title>类别列表</title>
</head>
<body>
<div>
	<table>
		<tr>
			<td>类别</td>
			<td>类别</td>
			<td>类别</td>
		</tr>

		<tr>
			<td>类别</td>
			<td>类别</td>
			<td>类别</td>
		</tr>
	</table>
</div>
</body>
</html>

程序运行截图：

在这里插入图片描述

2、思考并回答问题
（1）超文本标记语言的文档主要由哪些标记构成？缺少任何一部份会对文件产生什么影响？不带任何标记的文档又会怎样？
答：HTML文档结构一般包括包括标记（Html）、头部（Head）、主体（Body）三部分。缺少任何部分对文件没有影响。不带任何标识的html文档也没有问题，只要文档的类型为html。
（2）要想使浏览器中显示的文字分行排列，应使用何种标记处理？
答：可以使用标签或者定义一个段落。
（3）HTML语言中表格、表单分别有什么作用？
答：表格的作用是可以精确控制文本和图像在网页中的显示位置，所以一般都使用表格来进行布局。表单的主要作用是,在网页上提供一个图形用户界面，以采集和提交用户输入的数据。
（4）层叠样式表CSS的主要作用是改变什么？
答：CSS可用于控制Web 页面的外观，通过使用CSS样式设计页面的格式，可以实现页面内容与表现形式的分离；也可以和JavaScript等浏览器端脚本语言合作做出许多动态的效果。
（5）JavaScript语言和Java语言的主要区别有哪些？
答：（1）JavaScript 是基于对象的语言，而Java是面向对象的语言。（2）JavaScript 是弱类型语言，即其变量无须事先申明，类型可以动态定义；而Java 是强类型语言，变量必须说明类型。（3）JavaScript的对象时动态的，即JavaScript执行时对象的数据成员和方法的数量是可变的，而Java中的对象时静态的。

四、心得体会：
通过此次实验，了解了如何使用frameset标签，以及搭配使用DIV+CSS，设计并布局一个简单的页面，以及如何通过JavaScript去检验一个页面是否符合规范。

没入门就实践的newhand

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web客户端编程实验

实验报告实验名称 Web客户端编程日期 2020年 09 月29 日一、实验目的：使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。通过实验了解Java
复制链接

扫一扫

专栏目录