《Web技术应用与开发》课程设计报告Word格式文档下载.docx
- 文档编号:18791399
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:17
- 大小:23.28KB
《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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web技术应用与开发 Web 技术 应用 开发 课程设计 报告