JavaScript被某些程序员简称为JS,两者是同一回事。
使用框架页来构建一个大网页没有什么好处,加载一个网页的时候,相当于要求浏览器要加载多个网页,同时,大网页中的框架标签使用起来,又需要浏览器加载。加重浏览器负担的同时,开发起来,也不好管理。要从多个网页中切换。远远不如CSS的DIV布局,甚至还远落后于表格规划网页布局。
虽然使用框架页来构造网页布局的人已经越来越少了,但是还是有必要了解其基本语法。免得看见框架页构建的网页时,不知所云。
一、基本目标
构建如下网页,
二、基本思想
如图:
三、制作过程
如上所示,需要一个frame.html,里面什么都没有,就只有包含三个框架,其中上方表单框架中的网页为form.html,此文件挂载着js.js。左下方框架为left.html。右下方的框架为空网页right.html,其实创建一个空网页也行,但是Dreamweaver要求每个框架必须包含文件。
(1)frame.html
首先需要声明的是,此只有包含三个框架的网页没有body标签,也就是说,一个网页中只要有<html>标签是唯一的。<head>标签可以省略,<body>可以被<frame>标签替代。
整个网页的代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>frame</title>
</head>
<!--表示先从网页高50%的地方,横着划分框架线,由于分了两份,下方必须包含两个frame标签,不能多不能少-->
<frameset rows="50%,*" border="0">
<!--上方框架放入form.html,即使需要滚动条都不提供,不允许用户自由调节框架-->
<frame src="form.html" scrolling="no" noresize="noresize" />
<!--再从下方的框架中宽20%的地方,竖着划分框架线-->
<frameset cols="20%,*" border="0">
<frame src="left.html" scrolling="no" noresize="noresize" />
<!--右下方的框架中放入right.html,而且此框架的名字为right,为left中的超级链接做准备工作-->
<frame src="right.html" name="right" scrolling="no" noresize="noresize"/>
</frameset>
</frameset>
</html>
frameset 元素是 frame 元素的容器。HTML 文档可包含 frameset 元素或 BODY 元素之一,而不能同时包含两者。
此元素在 Microsoft Internet Explorer 3.0 的 HTML 中可用,在 Internet Explorer 4.0 的脚本中可用。
注意:不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过,如果需要为不支持框架的浏览器添加一个 <noframes> 标签,请务必将此标签放置在 <body></body> 标签中!
(2)form.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--此处的网页编码,如果不把js文件国际化不能更改为utf-8,否则js传递过来的值会乱码-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Form</title>
<!--声明我需要使用网站根目录下的js文件夹中js.js-->
<script type="text/javascript" src="js/js.js">
</script>
</head>
<body>
<!--submit按钮的响应函数为submittest(),对reset按钮写函数意义不大,因为reset按钮到最后存在着一个析取函数,把所有组件都还原成默认值-->
<form οnsubmit="submittest()">
<fieldset>
<legend>
<!--&为&的转义字符,因为&在网页中是显示不出来的-->
This is a Form & Jsp Example
</legend>
<label>
User:
<input type="text" id="user" name="user" />
</label>
<br />
<label>
Pwd:
<input type="password" id="pwd" name="pwd" />
</label>
<br />
<label>
<!--此为下拉菜单的最基本写法,如果加入size属性就会变成另一种菜单了-->
Nation:
<select id="nation" name="nation">
<option value="China">
China
</option>
<option value="England">
England
</option>
<option value="USA">
USA
</option>
</select>
</label>
<br />
<label>
<!--此为复选框-->
Checked?
<input type="checkbox" id="c1" value="Yes" name="c1" />
Yes
</label>
<br />
<label>
<!--此为多行文本框的基本写法,其中“添加备注”是此文本框的默认值,wrap="virtual"令文本框输入到末端自动换行-->
P.S:
<textarea id="ps" name="ps" rows="2" cols="8" wrap="virtual">添加备注</textarea>
</label>
<br />
<label>
<input type="submit" value="Sumbit" />
</label>
<input type="reset" value="Reset" />
<label></label>
</fieldset>
</form>
</body>
</html>
备注:
一、<fieldset> 标签
fieldset 元素可将表单内的相关元素分组。最关键的是,此标签完全可以通过css样式去修饰,从而达到不错的效果
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
二、<label> 标签
<label> 标签为 input 元素定义标注(标记)。 这使得表单内的每一栏元素都可以被css所修饰。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
所有主流浏览器都支持 <label> 标签。Safari 2 或更早的版本不支持 <label> 标签。
(3)js/js.js
// JavaScript Document
function submittest(){
//js中,所有变量都用var不分int与String
//创建一个变量msg,然后这个字符串不断增加个组件的值,换行用C语言中的\n
var msg="You have been inputed:\n";
//获取组件值的方法,此法仅能获取CSS、文本框、密码框、下拉菜单的值,单选按钮、复选框的值获取不了,必须通过建立数组,遍历整个单选框组。
var user=document.getElementById("user").value;
msg+="用户名:"+user+"\n";
var pwd=document.getElementById("pwd").value;
msg+="密码:"+pwd+"\n";
var nation=document.getElementById("nation").value;
msg+="国籍:"+nation+"\n";
var ps=document.getElementById("ps").value;
msg+="备注:"+ps+"\n";
//最后把这个信息以弹窗的信息呈现,请不要把此命令的英文拼错,alert警报,alter改变
alert(msg);
}
(4)left.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>left</title>
</head>
<body>
<dl>
<dt>网址导航</dt>
<dd><a href="http://www.baidu.com" target="right">Baidu</a></dd>
<dd><a href="http://www.163.com" target="right">163</a></dd>
<dd><a href="http://www.csdn.net" target="right">CSDN</a></dd>
</dl>
</body>
</html>
列表内的标签定义超级链接在框架right中打开。
此网页用了定义列表的方式<dl><dt><dd>三级方式,是HTML种三大列表中的一种,对比于有序列表<ol><li>,无序列表<ul><li>,此标签的出场频率比较少。
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
(5)right.html
一个空网页,不用做任何编辑
自此,本网页制作全部完成。