Web 应用开发 - 实训一 网页开发
Web应用开发
实训一 网页开发
一、预习：
1、阅读：教材P1-P39
2、要掌握知识要点：表单标记、超链接标记、CSS的引用方式、CSS选择器、DOM、JavaScript的引入（内嵌式、外链式）、JavaScript的使用（事件处理、常用对象）。
二、验证：用谷歌浏览器或IE浏览器打开页面文件（源代码见chapter1.rar）
1、文件1-1（htmlDemo01.html，见p2），效果如图1-1所示。
2、文件1-3（htmlDemo03.html，见p5），效果如图1-4所示。
3、文件1-5（htmlDemo05.html，见p6），效果如图1-6所示。
4、文件1-6（htmlDemo06.html，见p8），效果如图1-8所示。
5、文件1-7（htmlDemo07.html，见p10），效果如图1-10所示。
6、文件1-8（htmlDemo08.html，见p11），效果如图1-11所示。
7、文件1-9（htmlDemo09.html，见p12），效果如图1-12所示。
8、文件1-10（cssDemo01.html，见p14），效果如图1-15所示。
9、文件1-11（cssDemo03.html，见p17），效果如图1-17所示。
10、文件1-12（jsDemo01.html，见p21），效果如图1-19所示。
11、文件1-13（jsDemo02.html，见p22），效果如图1-20所示。
12、文件1-14（jsDemo03.html，见p26），效果如图1-21所示。
三、实训：
1、完成传智书城首页设计,编写文件1-15(index.html,p29，所需其他文件见源代码chapter1.rar）
)，效果如图1-23所示。
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<link type="text/css" href="css/autoplay.css" rel="stylesheet" />
<script type="text/javascript" src="js/autoplay.js">script>
head>
<body class="main">
<div id="divhead">
<table cellspacing="0" class="headtable">
<tr>
<td>
<a href="#">
<img src="images/logo.png" width="200" height="60" border="0" />
a>
td>
<td style="text-align:right">
<img src="images/cart.gif" width="26" height="23" style="margin-bottom:-4px" /> <a href="#">购物车a>
| <a href="#">帮助中心a>
| <a href="#">我的帐户a>
| <a href="register.html">新用户注册a>
td>
tr>
table>
div>
<div id="divmenu">
<a href="#">文学a>
<a href="#">生活a>
<a href="#">计算机a>
<a href="#">外语a>
<a href="#">经管a>
<a href="#">励志a>
<a href="#">社科a>
<a href="#">学术a>
<a href="#">少儿a>
<a href="#">艺术a>
<a href="#">原版a>
<a href="#">科技a>
<a href="#">考试a>
<a href="#">生活百科a>
<a href="#" style="color:#FFFF00">全部商品目录a>
div>
<div id="divsearch">
<form action="#" id="searchform">
<table width="100%" border="0" cellspacing="0">
<tr>
<td style="text-align:right; padding-right:220px">
Search
<input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"
onmouseover="this.focus();"
onclick="my_click(this, 'textfield');"
onBlur="my_blur(this, 'textfield');"/>
<a href="#">
<img src="images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/>
a>
td>
tr>
table>
form>
div>
<div id="box_autoplay">
<div class="list">
<ul>
<li><img src="ad/index_ad1.jpg" width="900" height="335"/>li>
<li><img src="ad/index_ad2.jpg" width="900" height="335"/>li>
<li><img src="ad/index_ad3.jpg" width="900" height="335"/>li>
<li><img src="ad/index_ad4.jpg" width="900" height="335"/>li>
<li><img src="ad/index_ad5.jpg" width="900" height="335"/>li>
ul>
div>
<div id="divcontent">
<table width="900px" border="0" cellspacing="0" >
<tr>
<td width="497">
<img src="images/billboard.gif" width="497" height="38"/>
<table cellspacing="0" class="ctl">
<tr>
<td width="485" headers="29">
尊敬的传智书城用户，<br/>
为了让大家有更好的购物体验，3月25号起，当日达业务关小黑屋回炉升级！<br/>
具体开放时间留意公告，感谢大家的支持与理解，祝大家购物愉快！<br/>
3月23日<br/>
传智博客 传智书城系统管理部<br/>
td>
tr>
table>
td>
<td style="padding: 5px 15px 10px 40px">
<table width="100%" border="0" cellspacing="0">
<tr>
<td>
<img src="images/hottitle.gif" width="126" height="29">
td>
tr>
table>
<table width="100%" border="0" cellspacing="0">
<tr>
<td style="width: 80; text-align:center">
<a href="#">
<img src="bookcover/105.jpg" width="102" height="130" border="0">
a>
<br/>
td>
<td style="width: 80; text-align:center">
<a href="#">
<img src="bookcover/106.jpg" width="102" height="130" border="0">
a>
<br/>
td>
tr>
table>
td>
tr>
table>
div>
<div id="divfoot">
<table width="100%" border="0" cellspacing="0">
<tr>
<td rowspan="2" style="width: 10%">
<img src="images/logo.png" width="195" height="50" style="margin-left: 175px">
td>
<td style="padding-top: 5px; padding-left: 50px">
<a href="#">
<font color="#747556"><b>CONTACT USb>font>
a>
td>
tr>
<tr>
<td style="padding-left: 50px">
<font color="#CCCCCC"><b>COPYRIGHT 2015 © BookStore All Right RESERVED.b>font>
td>
tr>
table>
div>
body>
html>
2、完成传智书城注删页面设计,编写文件1-17(register.html,p34，所需其他文件见源代码chapter1.rar)，效果如图1-25所示。
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册title>
<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/form.js">script>
head>
<body class="main">
<div id="divhead">
<table cellspacing="0" class="headtable">
<tr>
<td>
<a href="index.html">
<img src="images/logo.png" width="200" height="60" border="0" />
a>
td>
<td style="text-align:right">
<img src="images/cart.gif" width="26" height="23" style="margin-bottom:-4px" /> <a href="#">购物车a>
| <a href="#">帮助中心a>
| <a href="#">我的帐户a>
| <a href="register.html">新用户注册a>
td>
tr>
table>
div>
<div id="divmenu">
<a href="#">文学a>
<a href="#">生活a>
<a href="#">计算机a>
<a href="#">外语a>
<a href="#">经管a>
<a href="#">励志a>
<a href="#">社科a>
<a href="#">学术a>
<a href="#">少儿a>
<a href="#">艺术a>
<a href="#">原版a>
<a href="#">科技a>
<a href="#">考试a>
<a href="#">生活百科a>
<a href="#" style="color:#FFFF00">全部商品目录a>
div>
<div id="divsearch">
<form action="#" id="searchform">
<table width="100%" border="0" cellspacing="0">
<tr>
<td style="text-align:right; padding-right:220px">
Search
<input type="text" name="textfield" class="inputtable" id="textfield" value="请输入书名"
onmouseover="this.focus();"
onclick="my_click(this, 'textfield');"
onBlur="my_blur(this, 'textfield');"/>
<a href="#">
<img src="images/serchbutton.gif" border="0" style="margin-bottom:-4px" onclick="search()"/>
a>
td>
tr>
table>
form>
div>
<div id="divcontent" align="center">
<form action="registersuccess.html" method="post" onsubmit="return checkForm();">
<table width="850px" border="0" cellspacing="0">
<tr>
<td style="padding: 30px"><h1>新会员注册h1>
<table width="70%" border="0" cellspacing="2" class="upline">
<tr>
<td style="text-align: right; width: 20%">会员邮箱：td>
<td style="width: 40%">
<input type="text" class="textinput" id="email"
name="email" onkeyup="checkEmail();">
td>
<td colspan="2"><span id="emailMsg">span>
<font color="#999999">请输入有效的邮箱地址font>
td>
tr>
<tr>
<td style="text-align: right">会员名：td>
<td>
<input type="text" class="textinput" id="username"
name="username" onkeyup="checkUsername();">
td>
<td colspan="2"><span id="usernameMsg">span>
<font color="#999999">字母数字下划线1到10位，不能是数字开头font>
td>
tr>
<tr>
<td style="text-align: right">密码：td>
<td>
<input type="password" class="textinput" id="password"
name="password" onkeyup="checkPassword();">
td>
<td><span id="passwordMsg">span>
<font color="#999999">密码请设置6-16位字符font>
td>
tr>
<tr>
<td style="text-align: right">重复密码：td>
<td>
<input type="password" class="textinput" id="repassword"
name="repassword" onkeyup="checkConfirm();">
td>
<td><span id="confirmMsg"> span>
td>
tr>
<tr>
<td style="text-align: right">性别：td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked/">男
<input type="radio" name="gender" value="女" />女
td>
<td> td>
tr>
<tr>
<td style="text-align: right">联系电话：td>
<td colspan="2">
<input type="text" class="textinput" style="width: 350px" name="telephone"/>
td>
<td>
td>
tr>
<tr>
<td style="text-align: right">个人介绍：td>
<td colspan="2">
<textarea class="textarea" name="introduce">textarea>
td>
<td> td>
tr>
table>
<table width="70%" border="0" cellspacing="0">
<tr>
<td style="padding-top: 20px; text-align: center">
<input type="image" src="images/signup.gif" name="submit" border="0"/>
td>
tr>
table>
td>
tr>
table>
form>
div>
<div id="divfoot">
<table width="100%" border="0" cellspacing="0">
<tr>
<td rowspan="2" style="width: 10%">
<img src="images/logo.png" width="195" height="50" style="margin-left: 175px">
td>
<td style="padding-top: 5px; padding-left: 50px">
<a href="#">
<font color="#747556"><b>CONTACT USb>font>
a>
td>
tr>
<tr>
<td style="padding-left: 50px">
<font color="#CCCCCC"><b>COPYRIGHT 2015 © BookStore All Right RESERVED.b>font>
td>
tr>
table>
div>
body>
html>
四、提交编写的源代码
打包成压缩文件：学号+姓名+实训1.rar