web程序设计论文资料Word下载.docx
《web程序设计论文资料Word下载.docx》由会员分享，可在线阅读，更多相关《web程序设计论文资料Word下载.docx（55页珍藏版）》请在冰点文库上搜索。
本次我参考的网站是我最喜欢的铁血军事网，它的整个页面比较简洁，大体上以红色和白色为主色调，通过对铁血军事网的认真解读帮助我完成了我的网站的需求分析及原型设计。
首先，军事类网站展示的内容必须多样化，所以我在网站中加入了国内及国外最新新闻版块，此外我在我的网站中展示了一些精心挑选的军事商品方便军事迷们挑选。
它的原型设计如下：
如图2.1
（三）表现标准：
页面样式的可视化设计（Css3）
网页的可视化效果设计，主要是借助CSS3样式的强大功能，可以用来制作多彩的文字链接，利用相关的样式来丰富网页的视觉效果因为CSS能够灵活定制网页元素的风格，还能够迅速更新网站的风格，组合不同风格的网页，除了有很好的表现形式外，CSS还有很多的表现作用，比如：
一、使页面载入得更快由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。
相对于表格嵌套的方式，CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。
而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
二、降低流量费用页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。
三、修改设计时更有效率由于使用了CSS制作方法，在修改页面的时候更加容易省时。
根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性CSS最重要的优势之一：
保持视觉的一致性；
以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。
而使用CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。
五、更好地被搜索引擎收录由于将大部分的CSS和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。
六、对浏览者和浏览器更具亲和力我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，CSS在这方面更具优势。
由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。
强大的功能还能够实现对网站的各方面控制。
（四）结合JavaScript实施会员登录页面的分析与设计
如图4.1
登录页面有用户名和密码两个文本输入框，下方有登录和重置按钮，当用户输入正确的用户名和密码后，点击登录按钮，页面会弹出一个提醒的对话框，提示您的用户名和密码，点击确定后完成登录，如果漏填用户名和密码则会提示你用户名和密码不能为空。
用以实现上述功能的代码如下：
<
scriptlanguage="
javascript"
>
functionjimmy（）{
varj=document.getElementById（"
a"
）;
//用户名
vark=document.getElementById（"
b"
//密码
if（j.value.length>
5||k.value.length>
5）
{alert（"
用户名或密码太长，请重新输入！
"
j.value="
;
k.value="
j.focus（）;
returnfalse;
}
elseif（j.value=="
||k.value=="
）
用户名或密码不能为空!
else{alert（"
您的用户名是：
+j.value+"
密码是：
+k.value+"
进入主页面请按确定按钮"
functionruby（）{
varl=document.getElementById（"
c"
{l.innerHTML="
用户名太长，请输入五位以内的用户名"
l.style.color="
red"
else
OK"
functionpeter（）{
alert（document.form1.select.options[document.form1.select.selectedIndex].text）;
functionhaha（）{
varn=document.getElementById（"
d"
if（k.value.length>
5）{
n.innerHTML="
密码太长"
n.style.color="
blue"
else{
/script>
/head>
bodybackground="
09430342.png"
style="
background-attachment:
fixed"
p>
<
/p>
formname="
form1"
method="
post"
action="
>
fontsize="
6"
&
nbsp;
spanstyle="
letter-spacing:
-1pt"
<
/span>
/font>
4"
color="
#FFFFFF"
用户名：
inputtype="
text"
name="
textfield"
id="
&
密码：
password"
textfield2"
onClick="
ruby（）;
&
submit"
Submit"
value="
登录"
returnjimmy（）;
reset"
Submit2"
重置"
/form>
/body>
（五）结合JavaScript实施会员注册页面的分析与设计
如图5.1
设计思想：
我的注册页面如图5.1所示，页面有用户名的文本输入框，用户名下发是手机号的输入框，后面有发送验证码的按钮，然后下方是验证码输入框用来填入接收到的验证码来完成验证。
然后是密码和确认密码，如果两次输入的密码不一致的话会提示你两次输入的密码必须一致，然后是性别的单选框，下面是职业和工资的下拉单选框，然后是身份证号的输入框，因为每个人的爱好肯定不只一个，所以下方还设置了爱好的复选框，注册者可以选择多个爱好，此外下方还有名为其他的多行文本输入框用来收集记录注册者的其他信息，点击提交即可完成注册。
实现代码如下：
script>
functionaa（）
{
vars;
s=reg.user.value;
alert（"
用户名是"
+s）;
}
functionaa2（t）
varp1,p2;
alert（t）;
p1=reg.pass1.value;
p2=reg.pass2.value;
if（p1!
=p2）
两次密码必须相同"
!
--#BeginEditable"
doctitle"
-->
--#EndEditable-->
<
linkrel="
stylesheet"
type="
text/css"
href="
new_page_1.css"
e516dc9305545b104e4ac5a9fc8e881b.jpg"
h1align="
center"
fontface="
黑体"
注册<
/h1>
divalign="
tableborder="
0"
width="
640"
height="
520"
bordercolor="
#AF9F86"
reg"
tr>
tdalign="
right"
<
labelfor="
fp1"
华文行楷"
size="
5"
用户名：
/label>
/td>
tdbordercolor="
#FAEEE0"
align="
left"
palign="
inputname="
user"
float:
left"
/tr>
手机号：
T1"
20"
buttonname="
B1"
发送验证码<
/button>
验证码：
T2"
密&
码：
pass1"
确认密码：
pass2"
onblur="
aa2（this）"
性&
别：
td>
radio"
sex"
1"
男<
2"
checked>
女<
tdwidth="
159"
职&
业：
<
471"
selectsize="
D2"
option>
----请选择----<
/option>
政府机构<
盈利性机构<
非盈利性机构<
军事方面<
无业<
输入<
/select>
工&
资：
D1"
1000<
2000<
3000<
5000<
7000<
身份证号：
user0"
divid="
div4"
display:
inline"
/div>
爱&
好：
checkbox"
hb1"
ft"
足球<
hb2"
ms"
篮球
hb3"
tor"
/>
游泳<
上网<
其&
他：
textarearows="
S2"
cols="
49"
/textarea>
tdcolspan="
button"
提交"
onclick="
aa（）"
（六）页面固定菜单的分析与设计
如图6.1
我的页面固定菜单实现后的结果如图6.1所示。
我的固定菜单分为军事大全、中国军情、今日头条、军迷大本营和联系我们六个一级菜单，单击后会向下弹出二级菜单，同时一级菜单的颜色有黑色变成绿色，再次点击一级菜单栏目后会收起下拉的二级栏目。
实现的代码如下：
DOCTYPEhtml>
html>
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
style>
//对表体进行css格式的设置
*,body,ul,li,h1,h2
{
margin:
0;
padding:
list-style:
none;
body{
font:
12px"
宋体"
padding-top:
20px;
#menu{
width:
200px;
margin:
auto;
//对menuh1进行css格式的设置
#menuh1{
cursor:
pointer;
color:
#FFF;
font-size:
12px;
padding:
5px03px10px;
border:
#C601pxsolid;
margin-top:
1px;
background-color:
#F93;
//对menuh2进行css格式的设置
#menuh2{
#777;
#E7E7E71pxsolid;
border-top-color:
#F4F4F4;
//对menuul进行css格式的设置
#menuul{
padding-left:
15px;
height:
100px;
border-top:
overflow:
//对menuulli进行css格式的设置
#menuulli{
//对no进行css格式的设置
.no{
display:
/style>
JavaScript"
--//
functionShowMenu（obj,noid）{//建立一个函数
varblock=document.getElementById（noid）;
//定义一个block变量，并给它赋
升级会员 