制作一个简单的静态网站
总体框架:
<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"> <inputtype="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"> <inputtype="button" value="Reset Form"></td></tr></table></form>
</body>
</html>
结果展示: