实 验 报 告
实验名称 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去检验一个页面是否符合规范。