html homework27

1. 使用框架完成如下功能

将框架先上下分割成两部分（上半部分的为TopFrame）、再将下半部分垂直分割为两部分（左侧为BottomLeftFrame，右侧为BottomRightFrame），为TopFrame添加一个logo、为BottomLeftFrame添加一个菜单（使用a标签），当点击超链接标签时，在BottomRightFrame中显示目标页面

如图示例（可自行设计）

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 7         <title></title>
 8     </head>
 9     <frameset rows="20%,*">
10         <frame name="TopFrame" src="topbook.html"/>
11         <frameset cols="20%,*">
12             <frame name="BottomLeftFrame" src="bookmenu.html"/>
13             <frame name="BottomRightFrame" src="right.html"/>
14         </frameset>
15     </frameset>
16 </html>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 7         <title></title>
 8     </head>
 9     <body>
10     <ul>
11         <li><a href="addBook.html" target="BottomRightFrame">添加图书</a></li>
12         <li><a href="checkBook.html" target="BottomRightFrame">查看图书</a></li>
13             
14     </ul>
15     </body>
16 </html>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 7         <title></title>
 8     </head>
 9     <body>
10         <h4 align="center"><font size="5"><b>添加图书</b></font></h4>
11         <table>
12             <tr>
13                 <td>书名：</td>
14                 <td><input type="text"/></td>
15             </tr>
16             <tr>
17                 <td>作者：</td>
18                 <td><input type="text"/></td>
19             </tr>
20             <tr>
21                 <td>出版社：</td>
22                 <td><input type="text"/></td>
23             </tr>
24             <tr>
25                 <td>内容简介：</td>
26                 <td><textarea rows="5" cols="40"></textarea></td>
27             </tr>
28         </table>
29     </body>
30 </html>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 7         <title></title>
 8     </head>
 9     <body>
10         <h5 align="center"><font size="5"><b>查看图书</b></font></h5>
11         <hr />
12         <table border="1" width="100%">
13             <tr>
14             <td>ID</td><td>书名</td><td>作者</td><td>出版社</td><td>出版日期</td>
15             </tr>
16             <tr>
17                 <td>b_001</td><td>《幻城》</td><td>郭敬明</td><td>人民教育出版社</td><td>2004-05-21</td>
18             </tr>
19             <tr>
20                 <td>b_001</td><td>《幻城》</td><td>郭敬明</td><td>人民教育出版社</td><td>2004-05-21</td>
21             </tr>
22             <tr>
23                 <td>b_001</td><td>《幻城》</td><td>郭敬明</td><td>人民教育出版社</td><td>2004-05-21</td>
24             </tr>
25             
26             <tr>
27                 <td>b_001</td><td>《幻城》</td><td>郭敬明</td><td>人民教育出版社</td><td>2004-05-21</td>
28             </tr>
29         </table>
30 
31     </body>
32 </html>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 7         <title></title>
 8     </head>
 9     <body>
10     <h5 align="center" ><font size="7">图书管理系统</font></h5>
11     
12     </body>
13 </html>

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 7         <title></title>
 8     </head>
 9     <body>
10     <img src="img/秋天美景.png" />
11     </body>
12 </html>

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2 "http://www.w3.org/TR/html4/strict.dtd">
  3 
  4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  5     <head>
  6         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7         <title></title>
  8     </head>
  9     <body>
 10     <h5 align="center" ><font size="7">图书管理系统</font></h5>
 11     
 12     </body>
 13 </html>
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 22 "http://www.w3.org/TR/html4/strict.dtd">
 23 
 24 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 25     <head>
 26         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 27         <title></title>
 28     </head>
 29     <body>
 30     <img src="img/秋天美景.png" />
 31     </body>
 32 </html>
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
 43 
 44 
 45 
 46 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 47 "http://www.w3.org/TR/html4/strict.dtd">
 48 
 49 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 50     <head>
 51         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 52         <title></title>
 53     </head>
 54     <body>
 55         <h1 align="center"><font size="5" color="red" face="楷体">用户注册</font></h1>
 56         <hr />
 57         <table border="1" align="center" width="30%" bordercolor="#00ffff">
 58             <tr>
 59                 <td>用户名：</td>
 60                 <td><input type="text"/></td>
 61             </tr>
 62             <tr>
 63                 <td>密码：</td>
 64                 <td><input type="password"/></td>
 65             </tr>
 66             <tr>
 67                 <td>确认密码：</td>
 68                 <td><input type="password"/></td>
 69             </tr>
 70             <tr>
 71                 <td>密码提示问题：</td>
 72                 <td><select>
 73                     <option>===请选择===</option>
 74                     <option>所在学校：</option>
 75                     <option>专业：</option>
 76                     <option>班级：</option>
 77                     <option>职位：</option>
 78                     <option>家庭住址：</option>
 79                 </select></td>
 80                 
 81             </tr>
 82             <tr>
 83                 <td>密码提示答案：</td>
 84                 <td><input type="text"/></td>
 85             </tr>
 86             <tr>
 87                 <td>真实姓名：</td>
 88                 <td><input type="text"/></td>
 89             </tr>
 90             <tr>
 91                 <td>性别：</td>
 92                 <td><input type="radio"name="gender"/>男<input type="radio"name="gender"/>女</td>
 93             </tr>
 94             <tr>
 95                 <td>年龄：</td>
 96                 <td><input type="number"/></td>
 97             </tr>
 98             <tr>
 99                 <td>籍贯：</td>
100                 <td>
101                     <select>
102                         <option>===请选择===</option>
103                         <option>北京</option>
104                         <option>上海</option>
105                         <option>广州</option>
106                         <option>深圳</option>
107                         <option>河南</option>
108                         <option>四川</option>
109                         <option>济南</option>
110                         <option>山东</option>
111                         <option>河北</option>
112                         <option>东北</option>
113                         <option>内蒙古</option>
114                         <option>石家庄</option>
115                         <option>乌鲁木齐</option>
116                         <option>天津</option>
117                     </select>
118                 </td>
119             </tr>
120             <tr>
121                 <td>联系电话：</td>
122                 <td><input type="tel"/></td>
123             </tr>
124             <tr>
125                 <td>个人爱好：</td>
126                 <td><input type="checkbox"/>篮球<input type="checkbox"/>足球<input type="checkbox"/>排球</td>
127             </tr>
128             <tr>
129                 <td>QQ:</td>
130                 <td><input type="text"/></td>
131             </tr>
132             <tr>
133                 <td>MSN:</td>
134                 <td><input type="text"/></td>
135             </tr>
136             <tr>
137                 <td>Email:</td>
138                 <td><input type="email"/></td>
139             </tr>
140             
141         </table>
142     </body>
143 </html>