Loading

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" />
<!-- 导入首页轮播图css和js脚本 -->
<link type="text/css" href="css/autoplay.css" rel="stylesheet" />
<script type="text/javascript" src="js/autoplay.js"></script>

</head>
<body class="main">
	<!-- 1.网上书城顶部 start -->
<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" />&nbsp;<a href="#">购物车</a> 
				| <a href="#">帮助中心</a> 
				| <a href="#">我的帐户</a>
				| <a href="register.html">新用户注册</a>							
			 
			</td>		
		</tr>
	</table>
</div>
	<!-- 网上书城顶部  end -->

	<!--2. 网上书城菜单列表  start -->
<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>
<!-- 网上书城菜单列表  end -->

<!-- 3.网上书城首页轮播图  start -->
	<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>
	<!-- 网上书城首页轮播图  end -->
	<!--4. 公告板和本周热卖  start -->
    <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>
<!-- 公告板和本周热卖  end -->	

<!--5. 网上书城底部 start -->
<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 US</b></font>
				</a>
			</td>
		</tr>
		<tr>
			<td style="padding-left: 50px">
				<font color="#CCCCCC"><b>COPYRIGHT 2015 &copy; BookStore All Right RESERVED.</b></font>
			</td>
		</tr>
	</table>
</div>
	<!-- 网上书城底部  end -->
</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">
	<!-- 1.网上书城顶部 start -->
<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" />&nbsp;<a href="#">购物车</a> 
				| <a href="#">帮助中心</a> 
				| <a href="#">我的帐户</a>
				| <a href="register.html">新用户注册</a>							
			 
			</td>		
		</tr>
	</table>
</div>
	<!-- 网上书城顶部  end -->
	<!--2. 网上书城菜单列表  start -->
<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>
<!-- 网上书城菜单列表  end -->
<!-- 3.网上书城用户注册  start -->
	<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">&nbsp;</span>
							</td>
						</tr>
						<tr>
							<td style="text-align: right">性别:</td>
							<td colspan="2">&nbsp;&nbsp;
								<input type="radio" name="gender" value="" checked="checked/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<input type="radio" name="gender" value="" /></td>
							<td>&nbsp;</td>
						</tr>
						<tr>
							<td style="text-align: right">联系电话:</td>
							<td colspan="2">
								<input type="text" class="textinput" style="width: 350px" name="telephone"/>
							</td>
							<td>&nbsp;
							</td>
						</tr>
						<tr>
							<td style="text-align: right">个人介绍:</td>
							<td colspan="2">
								<textarea class="textarea" name="introduce"></textarea>							
							</td>
							<td>&nbsp;</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>
    <!-- 网上书城用户注册  end -->
	<!--4. 网上书城下方显示 start -->
<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 US</b></font>
				</a>
			</td>
		</tr>
		<tr>
			<td style="padding-left: 50px">
				<font color="#CCCCCC"><b>COPYRIGHT 2015 &copy; BookStore All Right RESERVED.</b></font>
			</td>
		</tr>
	</table>
	</div>
       <!--4. 网上书城下方显示 start -->
</body>
</html>

四、提交编写的源代码

打包成压缩文件:学号+姓名+实训1.rar

源文件下载

https://wwpv.lanzoue.com/incUm17n91bi

posted @ 2023-09-03 13:44  qing影  阅读(35)  评论(0)    收藏  举报  来源