网页设计课后题答案
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
附录A 习题参考答案
A.1 第1章
一、填空题
1.网页
2.HTML（Hyper Text Markup Language或超文本标记语言）
3.静态网页、动态网页
4..html、.htm、.shtml
5.可以进行交互（用户通过网页可以进行交互或用户可以进行读写操作）
二、简答及实训题
1.文字、图片、动画、声音、视频等
2.编辑工具：Adobe Dreamweaver、Visual 、Eclipse
图像处理软件：Adobe Photoshop、Adobe Fireworks
网站发布软件：CuteFTP、FlashFXP
3.asp、、php、jsp等
4.一般情况下，网站开发流程包括前期的确定网站的主题、网站的整体规划、收集整理网站素材；中期的开发与测试网站、域名空间的申请与备案、发布网站；后期的更新维护网站和宣传与推广网站。
5.略。
A.2 第2章
一、填空题
1.Dreamweaver、Fireworks、Flash
2.“代码”视图、“设计”视图、“拆分”视图
3.index.htm、index.html、default.htm、default.html
4.F12
5.Internet Information Server(因特网信息服务器)
二、实训题
略。
A.3 第3章
一、填空题
1.标记符（标签、标识符）
2.文件头、文件体
3.</BR>
4.绝对路径、相对路径、根目录相对路径
5.<FORM></FORM>
二、实训题
1.代码如下：
<html>
<head>
<title> Hello world!</title>
</head>
<body>
<p> Hello world!</p>
</body>
</html>
2.代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title>
</head>
<body>
<h3>静夜思</h3>
<h3>李白</h3>
<p>床前明月光，<br />
疑是地上霜。
<br />
举头望明月，<br />
低头思故乡。
</p>
</body>
</html>
3.代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title>
</head>
<body>
<h3>超链接</h3>
<ul>
<li><a href="" target="_blank">百度</a></li> <li><a href="" target="_blank">新浪</a></li>
<li><a href="" target="_blank">搜狐</a></li> <li><a href="" target="_blank">网易</a></li>
</ul>
</body>
</html>
4.代码如下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>学生信息表</title>
</head>
<body>
<table width="400" border="1" align="center" align="center">
<caption>
学生信息表
</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>院系</th>
<th>专业</th>
</tr>
<tr>
<td>0001</td>
<td>张三</td>
<td>男</td>
<td>信息工程学院</td>
<td>软件工程</td>
</tr>
<tr>
<td>0002</td>
<td>李四</td>
<td>男</td>
<td>文学院</td>
<td>汉语言文学</td>
</tr>
</table>
</body>
</html>
5.代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用户注册页面</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<h3>用户注册</h3>
<p>姓名：
<input type="text" name="textfield" id="textfield" />
</p>
<p>密码：
<input type="password" name="password1" id="textfield1" />
</p>
<p>密码验证：
<input type="password" name="password2" id="textfield2" />
</p>
<p>请上传你的照片：
<input type ="file" name="File">
</p>
<p>请选择你喜欢的音乐：
<input type ="Checkbox" name ="M1" value ="rock" checked> 摇滚乐
<input type ="Checkbox" name ="M2" value E="jazz">
爵士乐
<input type ="Checkbox" name ="M2" value ="pop">
流行乐</p>
<p>请选择你居住的城市：
<input type ="Radio" name ="city" value ="beijing" checked> 北京
<input type ="Radio" name ="city" value ="shanghai">
上海
<input type ="Radio" name ="city" value ="nanjing">
南京</p>
<p>
<input type="Hidden" name="Form_name" value ="Invest">
<input type="Button" name="button" value="普通按钮">
<input type="Submit" name="Submit" value="提交表单">
<input type="Reset" name="Reset" value="重置表单">
</p>
</form>
</body>
</html>
A.4 第4章
一、实训题
1.略。
A.5 第5章
一、填空题
1.Cascading Style Sheet 控制网页样式并允许将样式信息与网页内容分离
2.行内样式表内联样式表外联样式表导入样式表
3.标签选择器类选择器ID选择器
二、简答及实训题
1.略。
A.6 第6章
一、填空题
1.7栏标题栏、菜单栏、工具属性栏、工具栏、图像窗口、图像状态栏、面板组合栏
2.英文
3.5种 RGB
4.alt+delete
5.ctrl+alt+z
二、简答及实训题
1.有如下几点：
（1）确定页面大小。
一般情况下要考虑当前市场上显示器的分辨率。
（2）确定网页主色调。
网页的主色调是树立网站形象的关键因素，设计一个优秀的网站首先需要确定网站的主体色调。
（3）设计网页的结构。
网页的结构是通过网站规划书中网页的功能模块来划分的。
2.可以分为三步：
第一步：将前景色置为红色；
第二步：选中要填充的图层；
第三步：按组合快捷键alt+delete 即可填充前景色给该图层。
3.常用的图片格式如下：
（1）PSD格式，PSD（Photoshop Document）是Photoshop默认的文件格式。
（2）BMP格式，BMP是英文Bitmap（位图）的简写，它是Windows系统中的标准图像文件格式，能够被多种Windows应用程序所支持。
（3）JPEG格式，JPEG也是常见的一种图像格式，它由联合照片专家组（Joint Photographic Experts Group）开发。
（4）GIF格式，GIF是英文Graphics Interchange Format（图形交换格式）的缩写。
它是在WWW及其他联机服务上常用的一种文件格式，用于显示超文本标记语言文档中的索引颜色图形和图像。
（5）PNG格式PNG（Portable Network Graphics）是一种新兴的网络图像格式。
PNG 是目前保证最不失真的格式，它汲取了GIF和JPG二者的优点，存贮形式丰富，兼有GIF和JPG的色彩模式。
4.主要有：
（1）切片是生成表格的依据，切片的过程要先总体后局部，即先把网页整体切分成几个大部分，再细切其中的小部分。
（2）对于渐变的效果或圆角等图片特殊效果，需要在页面中表现出来的，要单独切出来。
（3）输出文件后，需要在Dreamweaver中进行编辑，原则上是少用图片，如果能用背景颜色代替的就使用背景颜色，能使用图案的也尽可能使用图案平铺来形成背景，以加速网页的显示。
5.略。
A.7 第7章
一、填空题
1.Active Server Page，Java Server Pages。
2.Internet Information Server，因特网信息服务器。
3.unix,linux。
4.ASP、ASP．NET、PHP、JSP
5.Apache
二、简答及实训题
1.静态网站是指其组成网页是静态网页，即网页内容是“固定不变”的，不会随着访问者、时间、地点的不同而改变。
当用户的浏览器通过互联网的HTTP（Hypertext Transport Protocol，超文本传输协议）协议向Web服务器请求提供网页内容时，服务器仅仅是将原来已设计好的静态HTML文档传送给用户的浏览器，其页面的内容使用的仅仅是标准的HTML代码，最多再加上GIF格式的动态图片或FLASH动画等。
静态网站的特点是制作简单、显示速度快，但是无交互性、不易维护和更新。
动态网站是指其组成网页主要是动态网页，即网页是可以进行交互的。
当用户的浏览器通过互联网的HTTP协议向Web服务器请求提供网页内容时，服务器根据用户浏览器的请求，连接相应的数据库，然后执行服务器端程序，生成静态HTML文档，最后将其传送给用户的浏览器。
动态网站的特点是制作较为复杂、显示速度较慢，但是其具有交互性，并且方便维护与更新。
2.动态网站的工作过程主要包括如下几个步骤：
（1）用户开发动态网页，编写服务器端脚本代码。
（2）客户端通过浏览器请求访问Web页面。
（3）Web服务器找到指定的页面。
（4）Web服务器执行指定的页面，执行相应的代码，生成HTML页面。
（5）HTML页面被传回到客户机的浏览器中。
（6）客户机的浏览器根据HTML给用户显示Web页面。
3.ASP技术的特点如下：
（1）利用ASP技术可以突破静态网页的一些功能限制，实现动态网页技术。
（2）ASP代码是嵌入在HTML代码所组成的文件中的，因此易于学习和使用。
（3）服务器上的ASP程序会在服务器端执行ASP程序，并将结果以HTML格式传送到客户端浏览器上，因此兼容性极好，使用各种浏览器都可以正常浏览ASP所产生的网页。
（4）ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更加强大，并且大大节省了开发时间，提高了开发效率。
（5）ASP可以使用服务器端ActiveX组件来执行各种各样的特殊任务，如存取数据库、发送Email或访问文件系统等，使得网页的功能更加丰富。
（6）由于服务器是将ASP程序执行后的结果以HTML形式传回到客户端浏览器的，因此使用者根本不会看到ASP所编写的原始程序代码，可防止ASP程序代码被窃取，提高了网站的安全性。
（7）利用ASP可以方便地连接ACCESS或SQL数据库，这为网站的开发提供了便捷的路径。
（8）ASP不仅可以与HTML结合开发网站，也可以与XHTML（eXtensible HyperText Markup Language，可扩展超文本标记语言）和WML（Wireless Markup Language，无线标记语言）结合制作WAP手机网站。
JSP技术的特点如下：
（1）跨平台性。
JSP基本上可以在所有平台上的任意环境中开发，可以在任意环境中进行系统部署，可以在任意环境中进行扩展。
（2）可伸缩性。
从只有一个小的Jar文件就可以运行Servlet/JSP，到由多台服务器进行集群或负载均衡，进行事务处理和消息处理。
（3）多样化和功能强大的开发工具支持。
Java已经有许多非常优秀的开发工具，而且大部分是免费的，并且其中许多已经可以顺利的运行在多种平台下。
（4）支持大量服务器端组件。
Web应用需要强大的服务器端组件来支持，开发人员需要利用其他工具设计实现复杂功能的组件供Web页面调用，以增强系统性能。
JSP可以使用成熟的JAVA BEANS组件来实现大量的复杂功能。
4.略。
A.8 第8章
一、填空题
1.微软（Microsoft）
2..ASP
3.单引号（'）
4.#
5.“ _”（一个空格和一个下划线）
二、简答及实训题
1.ASP可以使用两种脚本引擎，即VBScript和JavaScript。
它们的功能类似，运行环境相同，但是相对而言，JavaScript多用于客户端脚本，而VBScript多用于服务器端脚本。
不同之处有：（1）VBScript是ASP默认的脚本语言，可以直接使用，而如果要使用JavaScript作为ASP的脚本，则需要在代码页面的顶端（第一行）加上“<%@ language="javascript"%>”作为说明（不包括括号）。
（2）VBScript不区分大小写，而JavaScript区分大小写。
2.需要注意以下几点：
（1）变量的命名要见名知义；
（2）变量名中可以使用字符或数字，但是要以字母开头；
（3）变量名不区分大小写；
（4）变量名的长度不能超过255个字符；
（5）变量名不能和VBScript或ASP的关键字重名，如不能使用if、for等作为变量名。
3.Request对象的主要功能是客户端通过浏览器请求HTTP服务时，负责收集从客户端浏览器传递给服务器的信息。
如通过HTML表单用GET或POST方法传递的参数、Cookies 中的信息和用户认证信息等。
Response对象的主要功能是响应客户端请求，并且将响应信息返回到客户端浏览器中，也可以用来设置Cookies的值和实现浏览器重定位等。
Request和Response正好实现了服务器和客户端之间接收和发送数据的功能，从而实现了基本的交互性能。
4.创建一个名为read_text.asp的文件，内容如下：
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>编写ASP代码实现读取文本文件内容</title>
</head>
<body>
<%
Set FS = Server.CreateObject("Scripting.FileSystemObject")
Set RS = FS.OpenTextFile(Server.MapPath("textfile.txt"),1)
While not rs.AtEndOfStream
Response.Write RS.ReadLine
Response.Write("<br />")
Wend
%>
<p> <a href="textfile.txt">查看此文本文件</a> </p>
</body>
</html>
5.先创建一个表单保存在myform.html中，具体代码如下：
<form action="word_create.asp">
Name: <input type="text" name="Name" size="50" maxlength="100">
Email: <input type="text" name="Email" size="50" maxlength="100">
Comments:
<textarea cols="50" rows="10" name="comments"></textarea>
<input type="submit" value="Submit">
</form>
再创建一个名为word_create.asp的文件，内容如下：
<% Response.ContentType = "application/msword" %>
<html>
<% strName = Request.Querystring("Name")
strEmail = Request.Querystring("Email")
strComments = Request.Querystring("Comments")
%>
<head>此ASP代码用来创建一个Word文档</head>
<body>
<p align="right">〈%=formatdatetime(now,2)%></p>
亲爱的
<%= strname %>:
我的EMAIL是: <%= stremail %>
我的内容是: <%= strComments %>
</body>
</html>
A.9 第9章
一、填空题
1.层次模型、网状模型、关系模型
2.Open Database Connectivity
3.Connection Command Recordset
二、简答及实训题
1.数据库（Database，简称DB），即存储数据的仓库。
是长期存储在计算机中有组织的、可为多个用户共享的，与应用程序相对独立的数据的有机集合。
数据库的特点如下：
（1）数据的结构化，即按照一定的模型进行组织、描述和存储；
（2）具有较高的独立性；
（3）容易扩展；
（4）具有较小的冗余度；
（5）为用户共享。
2.略
A.10 第10章
一、实训题
1.略。
A.11 第11章
一、填空题
1.对象、事件驱动编程
2.asp、jsp、JavaScript
3.区分
4.全局、局部
5.在HTML文档中嵌入脚本程序、链接脚本文件、在标记内添加脚本
二、简答及实训题
1.目前支持JavaScript的浏览器主要有Internet Explorer、Firefox、Opera和Maxthon等。
2.为了便于JavaScript代码的重复利用，我们通常采用链接脚本文件方式进行加载。
其优点是：
（1）提高了JavaScript代码的重复利用率；
（2）减少了引用页面的代码量，使引用页面代码统一整洁，便于维护；
（3）当浏览器加载完毕后，外部的js文件会被浏览器缓存，从而减少了下载js 文件的请求。
3.JavaScript事件驱动中的事件是通过鼠标或热键的动作引发的。
它主要有以下几个事件：单击事件onClick、改变事件onChange、选中事件onSelect、获得焦点事件onFocus、失去焦点onBlur、载入文件onLoad、鼠标指示事件onMouseOver、提交事件onSubmit。
应用事件处理程序有两种方法：
（1）直接在HTML 标记中指定。
这种方法是用得最普遍的。
方法是：<标记... ... 事件="事件处理程序" [事件="事件处理程序" ...]> （2）在JavaScript 中说明。
方法是：
<对象>.<事件> = <事件处理程序>;
4.主要代码如下：
<script language="javascript" type="text/javascript">
alert("hello \n world");
</script>
5.代码如下：
（1）HTML页面代码
<html>
<head>
<title>用户注册</title>
<script language="javascript" src="regcheckdata.js">
</script>
<style type="text/css">
<!--
.style1 {
font-size: 12px
}
-->
</style>
</head>
<body>
<form name="form" action="" method="get" onSubmit="return checkdata()"> <table width="40%" align="center" border="1">
<tr bgcolor="#CCCCFF">
<td colspan="2" align="center"><span class="style1"> 用户注册</span></td>
</tr>
<tr bgcolor="#CCCCFF">
<td width="40%"><div align="right" class="style1"> 用户名：</div></td>
<td width="60%"><input type=text name="username" size="20" maxlength="10"></td>
</tr>
<tr bgcolor="#CCCCFF">
<td><div align="right" class="style1"> 密码： </div></td>
<td><input type=password name="pwd" size="20" maxlength="12"></td> </tr>
<tr bgcolor="#CCCCFF">
<td><div align="right" class="style1"> 密码确认： </div></td>
<td><input type=password name="pwd2" size="20" maxlength="12"></td> </tr>
<tr bgcolor="#CCCCFF">
<td><div align="right" class="style1"> 性别： </div></td>
<td><input name="sex" type=radio value="male">
男
<input type=radio name="sex" value="female">
女 </td>
</tr>
<tr bgcolor="#CCCCFF">
<td><div align="right" class="style1"> 你来自： </div></td>
<td><select name="province">
<option value=0 selected>请选择</option>
<option value=34>安徽</option>
<option value=11>北京</option>
<option value=50>重庆</option>
<option value=35>福建</option>
<option value=62>甘肃</option>
<option value=44>广东</option>
<option value=45>广西</option>
<option value=52>贵州</option>
<option value=46>海南</option>
<option value=13>河北</option>
<option value=23>黑龙江</option>
<option value=41>河南</option>
<option value=42>湖北</option>
<option value=43>湖南</option>
<option value=32>江苏</option>
<option value=36>江西</option>
<option value=22>吉林</option>
<option value=21>辽宁</option>
<option value=64>宁夏</option>
<option value=15>内蒙古</option>
<option value=63>青海</option>
<option value=31>上海</option>
<option value=14>山西</option>
<option value=37>山东</option>
<option value=51>四川</option>
<option value=61>陕西</option>
<option value=12>天津</option>
<option value=54>西藏</option>
<option value=65>新疆</option>
<option value=53>云南</option>
<option value=33>浙江</option>
<option value=71>台湾</option>
<option value=81>香港</option>
<option value=82>澳门</option>
<option value=0>其他</option>
</select></td>
</tr>
<tr bgcolor="#CCCCFF">
<td><div align="right" class="style1"> 自我介绍： </div></td> <td><textarea rows="8" cols="30" name="intro">
</textarea></td>
</tr>
<tr bgcolor="#CCCCFF">
<td></td>
<td><input type="submit" value="提交">
<input type="reset" value="重置"></td>
</tr>
</table>
</form>
</body>
</html>
（2）JavaScript验证代码（regcheckdata.js）
function checkdata() { //检测数据的合法性
var ssn=ername.value.toLowerCase();
if (!checkUserName(ssn)) return false; //用户名检查
if( strlen(form.pwd.value)<6 || strlen(form.pwd.value)>16 ) { alert("\正确地登录密码长度为6-16位，仅可用英文、数字、特殊字符！") form.pwd.focus() //密码框获得焦点
return false;
}
if( strlen2(form.pwd.value) ) {
alert("\您的密码中包含了非法字符，仅可用英文、数字、特殊字符！") form.pwd.focus()
return false;
}
if( form.pwd.value == ername.value ) { //用户名和密码不能相同alert("\用户名和密码不能相同！")
form.pwd.focus()
return false;
}
if( form.pwd2.value =="" ) { //密码不能为空
alert("\请输入密码确认！")
form.pwd2.focus()
return false;
}
if( form.pwd2.value != form.pwd.value ) {
alert("\两次密码输入不一致！")
form.pwd.focus()
return false;
}
if( !(form.sex[0].checked || form.sex[1].checked) ) {
alert("请选择性别!");
form.sex[0].focus();
return false;
}
//检查省份
if( form.province.selectedIndex == 0 ) {
alert("请选择省份!");
form.province.focus();
return false;
}
if(form.intro.value == "") {
alert("\自我介绍不能为空!");
form.intro.focus();
return false;
}
return true;
}
//检查用户名函数具体实现
function checkUserName(ssn){ //对用户名进行检测
if( ssn.length<3 || ssn.length>18 ) {
alert("\请输入正确的用户名,用户名长度为3-18位！")
ername.focus()
return false;
}
if (isWhiteWpace(ssn)){
alert("\请输入正确的用户名,用户名中不能包含空格！")
ername.focus()
return false;
}
if (!isSsnString(ssn)){
alert("\ 对不起，您选择的用户名不正确或已被占用！用户名\n由a～z 的英文字母(不区分大小写)、0～9的数字、点、减\n号或下划线组成，长度为3～18个字符，只能以数字或字母\n开头和结尾,例如:kyzy_001。
")
ername.focus()
return false;
}
return true;
}
function strlen(str){ //获取字符串长度
var len;
var i;
len = 0;
for (i=0;i<str.length;i++){
if (str.charCodeAt(i)>255) len+=2; else len++;
}
return len;
}
function strlen2(str){ //判断字符串是否包含非法字符var len;
var i;
len = 0;
for (i=0;i<str.length;i++){
if (str.charCodeAt(i)>255) return true;
}
return false;
}
function isWhiteWpace (s){ //判断字符串只是否有空
var whitespace = " \t\n\r";
var i;
for (i = 0; i < s.length; i++){
var c = s.charAt(i);
if (whitespace.indexOf(c) >= 0) {
return true;
}
}
return false;
}
function isSsnString (ssn){ //用正则表达式来判断字符串中所包含的字符var re=/^[0-9a-z][\w-.]*[0-9a-z]$/i;//正则表达式
if(re.test(ssn))
return true;
else
return false;
}
A.12 第12章
一、简答及实训题
1.XML与HTML相比较，具有如下特点：
（1）使用有意义的标记
HTML：给浏览器读取，不能传送数据的语义。
XML：具有语义。
（2）数据的语义与显示方式分开
HTML：决定数据显示方式的语言。
XML：描述数据内容的语言，本身并不决定数据该如何显示，数据的显示由XSL决定。
（3）可自定义的标记
HTML：标记由少数权威团体制定，种类有限且不能随意添加。
XML：可由用户按需要增加标记。
如数学标记语言MATHML、财经标记语言FPML、电子商务标记语言EBXML等。
（4）严格的语法控制
HTML：语法规则比较多元化，具有较大灵活性。
文件结构比较松散，不能很容易的转换为其他类型格式，比较难用程序来做大量而有效的处理，数据再利用的潜力大为降低。
XML：对语法有严格的要求，所有XML的文件都必须经过严格的“验证”过程才算完成，文件格式容易转换。
总之，XML与HTML的设计区别是：XML是用来存储数据的，重在数据本身。
而HTML 是用来定义数据的，重在数据的显示模式。
XML不是HTML的升级，也不是HTML的替代产品，虽然两者有点相似，但他们的应用领域和范围完全不同。
2. AJAX的作用和优点如下：
（1）减轻服务器的负担
AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求以及响应对服务器造成的负担。
（2）无刷新更新页面
减少了用户心理和实际的等待时间，特别是需要读取大量数据的时候，不用像Reload那样出现白屏的情况。
AJAX使用XMLHTTP对象发送请求并得到服务器响应，在不重新载入整个页面的情况下用JavaScript操作DOM最终更新页面。
所以在读取数据的过程中，用户所面对的不是白屏，而是原来的页面内容（也可以加一个Loading的提
示框让用户知道处于读取数据的过程），只有当数据接收完毕之后才更新相应部分的内容。
这种更新是瞬间的，用户几乎感觉不到。
（3）更好的用户体验
AJAX可以实现博客、RSS、百科全书、威客、网摘、社会网络（SNS）等功能，提高了用户体验。
（4）资源充分利用
可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的时候来处理，不但减轻了服务器和带宽的负担，而且节约了空间和宽带租用成本。
（5）可以调用外部数据
通过AJAX可以调用大量的已经存在的数据，提高了开发效率。
（6）良好的兼容性
AJAX是基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
（7）结构清晰
AJAX进一步促进了页面呈现和数据的分离，结构清晰。
3.略。