制作一个简单的静态网站
总体框架:
<html>
<frameset rows="20%,80%">
<frame src="top.html" noresize scrolling="no" name="top"></frame>
<frameset cols="30%,70%">
<frame src="treemenu.html" noresize scrolling="no" name="treemenu"></frame>
<frame src="main.html" noresize scrolling="yes" name="main"></frame>
</frameset>
</frameset>
</html>
结果展示:
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
top.html<br/>
<a href="login.html" target="main">Login</a>,<br />
<a href="register.html" target="main">Register</a><br/>
</body>
</html>
treemeenu.html
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
treemenu.html
<a href="introduction.html" target="main">作者的个人简介</a>
</html>
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
main.html (Section C)
</body>
</html>
introducation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
(作者的个人简介)
<form>
<table>
<input type="button" value="sing a song">
<input type="button" value="dancing">
<input type="button" value="writing">
<input type="button" value="eating ">
</table>
</form>
</body>
</html>
结果展示:
login.html
<html>
<body bgcolor="#00FFFF">
<form>
<table>
<caption>
<Strong>Please Log In</Strong>
</caption>
<tr>
<td align="right">Login:</td>
<td><input type="text" name="loginInput" style="width:180px">
</td>
</tr>
<tr>
<td >Password:</td>
<td><input type="password" name="passwordInput"
style="width:180px">
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="OK"> <input
type="button" value="Forget Password"></td>
</tr>
</table>
</form>
</body>
</html>
结果展示:
register.html
<html>
<body bgcolor="#DEE2E9">
<form action="">
<table>
<caption>
<strong>New Number</strong>
</caption>
<tr>
<td>ID</td>
<td><input type="text">
</td>
</tr>
<tr>
<td>Password</td>
<td><input type="password">
</td>
</tr>
<tr>
<td>Re-Password</td>
<td><input type="password">
</td>
</tr>
<tr>
<td>First Name</td>
<td><input type="text">
</td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text">
</td>
</tr>
<tr>
<td>Address</td>
<td><input type="text">
</td>
</tr>
<tr>
<td>City</td>
<td><input type="text">
</td>
</tr>
<tr>
<td>State</td>
<td><select>
<option>(select State)</option>
</select></td>
</tr>
<tr>
<td>Country</td>
<td><input type="text">
</td>
</tr>
<tr>
<td>Email Address</td>
<td><input type="text">
</td>
</tr>
<tr>
<td>Select Interest</td>
<td><input type="checkbox">Technology <br/>
<input type="checkbox">Enterprise <br/><input type="checkbox">Research<br/>
<input type="checkbox">Government <br/><input type="checkbox">People<br/>
<input type="checkbox">Life Style <br/><input type="checkbox">Opinion<br/>
</td>
</tr>
<tr>
<td>Question</td>
<td><select>
<option>(select Question)</option>
</select></td>
</tr>
<tr>
<td>Answer</td>
<td><input type="text">
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Submit Information"> <input
type="button" value="Reset Form"></td>
</tr>
</table>
</form>
</body>
</html>
结果展示: