web程序设计论文资料.docx
- 文档编号:5613881
- 上传时间:2023-05-08
- 格式:DOCX
- 页数:55
- 大小:5.93MB
web程序设计论文资料.docx
《web程序设计论文资料.docx》由会员分享,可在线阅读,更多相关《web程序设计论文资料.docx(55页珍藏版)》请在冰点文库上搜索。
web程序设计论文资料
辽东学院结课论文
Web程序设计报告
学生姓名:
学院:
信息工程学院
专业:
信息管理与信息系统
班级:
学号:
指导教师:
贾英群
完成日期:
2016年12月13日
辽东学院
EasternLiaoningUniversity
(一)网站设计与实施流程、页面布局与视觉设计
本学期我们学习了web程序设计这门课程,分别学习了通过网站需求分析来进行网站设计,设计并实现会员注册登陆界面,页面固定菜单和下拉菜单及树形下拉菜单的实现和页面文本编辑器的分析与设计,最后学习了页面固定广告,漂浮广告和移动广告的插入等知识,我们学习web程序设计这门课程所使用的软件主要是Microsoftfrontpage。
这是微软公司推出的一款网页设计、制作、发布、管理的软件。
FrontPage由于良好的易用性,被认为是优秀的网页初学者的工具,它的优点是集成了编辑、代码、预览三种模式于一身,与MicrosoftOffice各软件无缝连接并且具有良好的表格控制能力并且它继承了MicrosoftOffice产品系列的良好的易用性。
1.版面设计:
因为本人对军事比较感兴趣,所以这次我做了一个军事类的新闻网站,网站名字叫做《辽东军事》,首先最上方分为四个板块:
军事快报、中国军情。
环球视野和军迷论坛。
下方左边是滚动式地展示重大军事新闻图片。
右方是几个醒目的标题,是关于最近的军事热点问题及评论员文章。
下方是一些图片文章,以图片的形式来给读者他们感兴趣的信息。
再下面是军迷大本营板块,展示了一些从网上收集来的军迷商品信息,可以点击图片直接跳转到购买页面。
2.网站的内容:
网站有多方面的内容,有国内和国外最新的军事动态,有军迷论坛给读者发表自己的感想,你也可以创建一个话题大家一起讨论。
军迷大本营板块给广大军迷提供一些高品质的军事商品供他们选购。
此外可以点击登录和注册按钮来注册登录网站会员。
3.背景颜色
一般来说网页的颜色由两到三种颜色构成,我的网站大体使用米黄色过渡色来作为背景色,简约而不单调,有一种泛黄的书页的质感。
四大板块采用红色背景,比较醒目,而且红色是代表革命,是代表中国的颜色,使大家一眼便明白这是一个军事相关的网站。
注册页面采用的是棕色的背景,类似于桦木树皮的质感花纹,带给浏览者视觉的享受,注册页面字体是墨绿色二号楷体,可以很好地与背景颜色区分开来,一目了然。
(二)需求分析、原型设计
本次我参考的网站是我最喜欢的铁血军事网,它的整个页面比较简洁,大体上以红色和白色为主色调,通过对铁血军事网的认真解读帮助我完成了我的网站的需求分析及原型设计。
首先,军事类网站展示的内容必须多样化,所以我在网站中加入了国内及国外最新新闻版块,此外我在我的网站中展示了一些精心挑选的军事商品方便军事迷们挑选。
它的原型设计如下:
如图2.1
(三)表现标准:
页面样式的可视化设计(Css3)
网页的可视化效果设计,主要是借助CSS3样式的强大功能,可以用来制作多彩的文字链接,利用相关的样式来丰富网页的视觉效果因为CSS能够灵活定制网页元素的风格,还能够迅速更新网站的风格,组合不同风格的网页,除了有很好的表现形式外,CSS还有很多的表现作用,比如:
一、使页面载入得更快由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。
相对于表格嵌套的方式,CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。
而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。
二、降低流量费用页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了。
三、修改设计时更有效率由于使用了CSS制作方法,在修改页面的时候更加容易省时。
根据区域内容标记,到CSS里找到相应的ID,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式。
四、保持视觉的一致性CSS最重要的优势之一:
保持视觉的一致性;以往表格嵌套的制作方法,会使得页面与页面,或者区域与区域之间的显示效果会有偏差。
而使用CSS的制作方法,将所有页面,或所有区域统一用CSS文件控制,就避免了不同区域或不同页面体现出的效果偏差。
五、更好地被搜索引擎收录由于将大部分的CSS和内容样式写入了CSS文件中,这就使得网页中正文部分更为突出明显,便于被搜索引擎采集收录。
六、对浏览者和浏览器更具亲和力我们都知道网站做出来是给浏览者使用的,对浏览者和浏览器更具亲和力,CSS在这方面更具优势。
由于CSS富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统一和不变形。
强大的功能还能够实现对网站的各方面控制。
(四)结合JavaScript实施会员登录页面的分析与设计
如图4.1
登录页面有用户名和密码两个文本输入框,下方有登录和重置按钮,当用户输入正确的用户名和密码后,点击登录按钮,页面会弹出一个提醒的对话框,提示您的用户名和密码,点击确定后完成登录,如果漏填用户名和密码则会提示你用户名和密码不能为空。
用以实现上述功能的代码如下:
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=="")
{alert("用户名或密码不能为空!
");
j.value="";k.value="";
j.focus();
returnfalse;
}
else{alert("您的用户名是:
"+j.value+"密码是:
"+k.value+"进入主页面请按确定按钮");
}
}
functionruby(){
varj=document.getElementById("a");
varl=document.getElementById("c");
if(j.value.length>5)
{l.innerHTML="用户名太长,请输入五位以内的用户名";
l.style.color="red";
}
else
{l.innerHTML="OK";}
}
functionpeter(){
alert(document.form1.select.options[document.form1.select.selectedIndex].text);
}
functionhaha(){
vark=document.getElementById("b");
varn=document.getElementById("d");
if(k.value.length>5){
n.innerHTML="密码太长";
n.style.color="blue";
}
else{
n.innerHTML="OK";
}
}
fixed">
-1pt"> -1pt"> -1pt">