《Web技术应用与开发》课程设计报告Word格式文档下载.docx
《《Web技术应用与开发》课程设计报告Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《《Web技术应用与开发》课程设计报告Word格式文档下载.docx（17页珍藏版）》请在冰豆网上搜索。
表单用户交互功能逻辑设计
5.第7天：
Web表单应用程序的调试、修整、完善与定稿
模块划分、内容结构如何组织的方法，对一个Web程序设计的影响是很大的，有效的规划可以为Web程序设计增加美感。
其它的模块则有一定的联系性，以下是我Web程序设计的组织框架。
但是所有的模板其并非是层级关系——即一层一层的点下去，他们可以通过导航栏上的链接转到其它WEB程序设计上，由此可形成一个具有Web程序设计的模式，因此这些模块之间可以实现无顺序关系，却仍能感受到该Web程序设计是一个很条理。
3.界面设计：
有效性和交互性设计：
数字输入框的数字有效性；
特定内容的文本框输入的有效性；
四．模块的实现与调试
1．模块的实现：
模块系统可以直接深入到站点及其Web程序设计的所有内容，将Web程序设计中的有效数据采集出来（而不仅是Web程序设计或链接），并保持数据之间的逻辑关系。
例如对一个外部西湘旅游息站点，采集系统可以将其每个教育信息的标题、正文、作者、日期等信息单独采集出来，分别作为字段存储在系统中，并无缝组合形成自身的Web程序设计信息。
Web程序设计具有强大的批量设置功能，可以显示文章标题、文章作者、文章来源、内容分页方式、配色风格、版面设计模板等信息。
Web程序设计是计算机综合处理图形图像、文字、音频和视频等多种信息及其存储与传输的技术，可以分为Web程序设计硬件技术和Web程序设计技术两大部分。
Web程序设计素材的收集与制作，即对文本、图像、动画、声音以及视频影像等各种类型的Web程序设计素材的收集准备与制作，就可以自己构建一个对制作本科教学课件方便而有效的素材库。
另外，在一些电子出版物中有很多优秀的Web程序设计素材，平时应注意收集和整理，这也是提高制作速度与Web程序设计素材库质量的有效途径。
以上我们所说的都是素材的采集，接下来我们就要整理素材和进行素材编辑，这样在制作课件时将这些素材输出，就能又快又好地制作出精美的课件。
2．模块的调试：
对所设计的作品进行调试是十分重要的，在制作Web程序设计的过程中可以通过调试的方法查找模块存在的不足，以便更正。
我刚开始做Web程序设计的时候没有要合理使用层和表格，也或许是为图方便曾经大量使用层，当做好Web程序设计进行调试时，发现所有的层都走了样，整个Web程序设计几乎残破不堪，后来我重新使用表格才得到了我想要的结果，也是那时候我才发现表格用起来也不是那么麻烦。
3．模块代码：
定义CSS样式，也就是网页样式。
/*CSSDocument*/
td{
font:
normalnormalnormal20px"
新宋体"
;
border-width:
medium;
/*文字边框样式*/
border-top:
2pxinset#33FF00;
border-right:
2pxinset#33FF00;
border-left:
border-bottom:
/*border:
10px#009900;
*/
padding:
10px;
margin:
auto}
.label1{/*字体*/
obliquenormalbold48px"
color:
#000099}
.label2{/*字体*/
font-size:
large;
font-family:
"
宋体"
background-image:
url（images/img1.jpg）;
}
.p1{/*三个问题的样式*/
normalnormalbold20px"
.tablestyle{
thick;
/*表格边框样式*/
8pxoutset#006600;
4pxoutset#006600;
4pxoutset#006600;
border-color:
#0000CC;
border-style:
double;
利用HTML语言安排控件
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
/>
title>
中国旅游网<
/title>
linkrel="
stylesheet"
href="
style.css"
type="
text/css"
/head>
bodyclass="
label2"
<
formid="
form1"
>
tablealign="
center"
class="
tablestyle"
tr>
th>
td>
table>
<
tralign="
tdwidth="
419"
fontclass="
label1"
中国旅游论坛<
/font>
/td>
/tr>
278"
&
nbsp;
用户名：
inputtype="
text"
name="
use"
id="
usename"
title="
请输入用户名,可以输入英文、汉字和字母，最长30个字节,格式为“X00”－“X99”，X可以是任意字母的大小写"
br/>
<
hr/>
证件号码:
num"
number"
请输入证件号码,可以输入英文、汉字和字母"
p1"
您最希望前往的旅游地区？
radio"
radio1"
xhl"
value="
陕西"
onclick="
chooseradio（）;
returntrue;
/>
陕西
<
xbj"
北京"
北京
xxz"
西藏"
onclick="
西藏<
&
xhn"
海南"
海南
xsc"
四川"
四川
xsh"
上海"
上海
您最希望所选旅游地区获得的旅游项目？
radio2"
qm"
骑马"
disabled/>
骑马
ps"
爬山"
爬山
yy"
游泳"
游泳<
hx"
滑雪"
滑雪
ms"
美食"
美食
sb"
散步"
散步
您平时的兴趣爱好？
checkbox"
checkbox1"
c1"
看书"
choosecheck
（1）;
returntrue"
看书
c2"
上网"
choosecheck
（2）;
上网
c3"
下棋"
下棋
c4"
看报"
看报
c5"
篮球"
篮球
c6"
聊天"
聊天
您的家庭住址？
省/市:
selectname="
select"
select1"
style="
#3169B5;
onchange="
choosepla（）;
optionvalue="
0"
selected="
selected"
/option>
1"
湖南省<
2"
上海市<
3"
浙江省<
/select>
&
&
县/市：
<
selectid="
select2"
选择所在县/市"
optionselected="
请说说您的旅游感想<
textareacols="
60"
t1"
beizu"
rows="
8"
title="
请填写备注内容,可以输入英文、汉字和字母"
/textarea>
tdalign="
submit"
提交"
提交注册"
onClick="
submitit（）;
style="
#FF0000;
reset"
重置"
重新设置"
/table>
/th>
tdvalign="
top"
imgsrc="
images/1.jpg"
width="
200"
height="
pic"
onload="
setTimeout（'
chT
（1）'
1000）"
hr/>
inputname="
submit2"
button"
chT1（）"
开始"
submit1"
chT2（）;
停止"
/form>
/body>
/html>
JavaScript交互功能的实现
scriptlanguage="
javascript"
varimgs=newArray（）;
varn=0;
varisif=1;
for（i=1;
i<
5;
i++）
{
imgs[i]=newImage（）;
imgs[i].src="
images/"
+i+"
.jpg"
vararr_Ln_Check="
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
functionLoginName（）{
varj=1;
vark=0;
varl=0;
vart=0;
varv=0;
if（document.mainBody.loginName.value!
="
）{
if（document.mainBody.loginName.value.length==3）{
for（l=0;
l<
arr_Ln_Check.length;
l++）{
if（document.mainBody.loginName.value.charAt（0）==arr_Ln_Check.charAt（l））{v=1;
break;
}
if（v）{
for（j=1;
j<
3;
j++）{
for（k=0;
k<
10;
k++）{
if（document.mainBody.loginName.value.charAt（j）==str_Ps_Check.charAt（k））{t=t+1;
}
}
if（t==2）{document.mainBody.tiShi4.value="
输入正确！
document.mainBody.tiShi4.style.color="
green"
in_Txt4=1;
}else{
document.mainBody.tiShi4.value="
错误！
格式为“X00”－“X99”，X是任意大小写字母！
document.mainBody.tiShi4.style.color="
red"
}else{
}else{document.mainBody.tiShi4.value="
document.mainBody.tiShi4.style.color="
}
functionchechmima（）//证件号码判断
vargetv=document.form1.number.value;
alert（"
证件号码不能为空，请重新输入！
）;
if（getv=="
）
{
alert（"
document.form1.number.focus（）;
returnfalse;
}
for（vari=0;
getv.length;
varischar=getv.charAt（i）;
if（!
（ischar>
="
ischar<
9"
））
{
证件号码只能由数字组成！
请重新输入！
document.form1.number.select（）;
returnfalse;
}
functionchT（num）//变换图片
if（num==1&
isif==1）
n++;
if（n>
4）n=1;
document.all（"
）.src=imgs[n].src;
functionchT1（）
isif=1;
setTimeout（'
1000）;
functionchT2（）
isif=0;
functionchoosecheck（num）
if（num==1）
if（document.all（"
）.checked）{document.all（"
）.disabled=true;
document.all（"
else{document.all（"
）.disabled=false;
elseif（num==2）
if（document.all（"
else{document.all（"
elseif（num==3）{
functionchooseradio（）
if（document.all（"
）.checked）{
document.all（"
document.all（"
）.disabled=false
升级会员 