web程序设计论文

Web程序设计辽 东 学 院 结 课 论 文Web程序设计报告学 生 姓 名： 学 院： 信息工程学院 专 业： 信息管理与信息系统 班 级： 学 号： 指 导 教 师： 贾英群 完 成 日 期： 2016年12月13日 辽 东 学 院Eastern Liaoning University 目 录（一）网站设计与实施流程、页面布局与视觉设计3（二）网站需求分析及原型设计3（三）表现标准：页面样式的可视化设计（Css3）3（四）结合JavaScript实施会员登录页面的分析与设计4（五）结合JavaScript实施会员注册页面的分析与设计4（六）页面固定菜单的分析与设计5（七）页面下拉菜单的分析与设计5（八）页面树形下拉菜单的分析与设计5（九）页面固定广告的分析与设计5（十）页面移动广告的分析与设计6（十一）页面漂浮广告的分析与设计6（十二）页面文本编辑器的分析与设计6网站设计情况评分表7答辩情况评分表8（一） 网站设计与实施流程、页面布局与视觉设计本学期我们学习了web程序设计这门课程，分别学习了通过网站需求分析来进行网站设计，设计并实现会员注册登陆界面，页面固定菜单和下拉菜单及树形下拉菜单的实现和页面文本编辑器的分析与设计，最后学习了页面固定广告，漂浮广告和移动广告的插入等知识，我们学习web程序设计这门课程所使用的软件主要是Microsoft frontpage。这是微软公司推出的一款网页设计、制作、发布、管理的软件。 FrontPage由于良好的易用性，被认为是优秀的网页初学者的工具，它的优点是集成了编辑、代码、预览三种模式于一身，与Microsoft Office各软件无缝连接并且具有良好的表格控制能力并且它继承了Microsoft Office产品系列的良好的易用性。1.版面设计：因为本人对军事比较感兴趣，所以这次我做了一个军事类的新闻网站，网站名字叫做辽东军事，首先最上方分为四个板块：军事快报、中国军情。环球视野和军迷论坛。下方左边是滚动式地展示重大军事新闻图片。右方是几个醒目的标题，是关于最近的军事热点问题及评论员文章。下方是一些图片文章，以图片的形式来给读者他们感兴趣的信息。再下面是军迷大本营板块，展示了一些从网上收集来的军迷商品信息，可以点击图片直接跳转到购买页面。2.网站的内容：网站有多方面的内容，有国内和国外最新的军事动态，有军迷论坛给读者发表自己的感想，你也可以创建一个话题大家一起讨论。军迷大本营板块给广大军迷提供一些高品质的军事商品供他们选购。此外可以点击登录和注册按钮来注册登录网站会员。3.背景颜色一般来说网页的颜色由两到三种颜色构成，我的网站大体使用米黄色过渡色来作为背景色，简约而不单调，有一种泛黄的书页的质感。四大板块采用红色背景，比较醒目，而且红色是代表革命，是代表中国的颜色，使大家一眼便明白这是一个军事相关的网站。注册页面采用的是棕色的背景，类似于桦木树皮的质感花纹，带给浏览者视觉的享受，注册页面字体是墨绿色二号楷体，可以很好地与背景颜色区分开来，一目了然。（二）需求分析、原型设计 本次我参考的网站是我最喜欢的铁血军事网，它的整个页面比较简洁，大体上以红色和白色为主色调，通过对铁血军事网的认真解读帮助我完成了我的网站的需求分析及原型设计。首先，军事类网站展示的内容必须多样化，所以我在网站中加入了国内及国外最新新闻版块，此外我在我的网站中展示了一些精心挑选的军事商品方便军事迷们挑选。它的原型设计如下：如图2.1（三）表现标准：页面样式的可视化设计（Css3）网页的可视化效果设计，主要是借助CSS3样式的强大功能，可以用来制作多彩的文字链接，利用相关的样式来丰富网页的视觉效果因为CSS能够灵活定制网页元素的风格，还能够迅速更新网站的风格，组合不同风格的网页，除了有很好的表现形式外，CSS还有很多的表现作用，比如：一、使页面载入得更快 由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 二、降低流量费用 页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。 三、修改设计时更有效率 由于使用了CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。 四、保持视觉的一致性 CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。 五、更好地被搜索引擎收录 由于将大部分的CSS和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。 六、对浏览者和浏览器更具亲和力 我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。 强大的功能还能够实现对网站的各方面控制。（四）结合JavaScript实施会员登录页面的分析与设计 如图4.1登录页面有用户名和密码两个文本输入框，下方有登录和重置按钮，当用户输入正确的用户名和密码后，点击登录按钮，页面会弹出一个提醒的对话框，提示您的用户名和密码，点击确定后完成登录，如果漏填用户名和密码则会提示你用户名和密码不能为空。用以实现上述功能的代码如下：function jimmy()var j = document.getElementById(a);/用户名var k = document.getElementById(b);/密码if(j.value.length5|k.value.length5)alert(用户名或密码太长，请重新输入！);j.value=; k.value=;j.focus();return false;else if(j.value=|k.value=)alert(用户名或密码不能为空!);j.value=; k.value=;j.focus();return false;elsealert(您的用户名是： + j.value + 密码是： + k.value + 进入主页面请按确定按钮);function ruby()var j = document.getElementById(a);var l = document.getElementById(c);if(j.value.length5)l.innerHTML=用户名太长，请输入五位以内的用户名;l.style.color=red;elsel.innerHTML=OK;function peter()alert(document.form1.select.optionsdocument.form1.select.selectedIndex.text);function haha()var k = document.getElementById(b);var n = document.getElementById(d);if(k.value.length5)n.innerHTML=密码太长;n.style.color=blue;elsen.innerHTML=OK;            用户名：            密码：           （五）结合JavaScript实施会员注册页面的分析与设计如图5.1设计思想：我的注册页面如图5.1所示，页面有用户名的文本输入框，用户名下发是手机号的输入框，后面有发送验证码的按钮，然后下方是验证码输入框用来填入接收到的验证码来完成验证。然后是密码和确认密码，如果两次输入的密码不一致的话会提示你两次输入的密码必须一致，然后是性别的单选框，下面是职业和工资的下拉单选框，然后是身份证号的输入框，因为每个人的爱好肯定不只一个，所以下方还设置了爱好的复选框，注册者可以选择多个爱好，此外下方还有名为其他的多行文本输入框用来收集记录注册者的其他信息，点击提交即可完成注册。实现代码如下： function aa() var s; s=reg.user.value; alert(用户名是+s); function aa2(t) var p1,p2; alert(t); p1=reg.pass1.value; p2=reg.pass2.value; if(p1!=p2) alert(两次密码必须相同); 注册 用 户 名： 手机号：  发送验证码 验证码： 密  码： 确认密码： 性  别：男女 职  业：-请选择-政府机构盈利性机构非盈利性机构军事方面无业输入 工  资：-请选择-10002000300050007000输入 身份证号： 爱  好：足球 篮球 游泳上网 其  他： （六）页面固定菜单的分析与设计如图6.1 我的页面固定菜单实现后的结果如图6.1所示。我的固定菜单分为军事大全、中国军情、今日头条、军迷大本营和联系我们六个一级菜单，单击后会向下弹出二级菜单，同时一级菜单的颜色有黑色变成绿色，再次点击一级菜单栏目后会收起下拉的二级栏目。实现的代码如下：/对表体进行css格式的设置*,body,ul,li,h1,h2 margin: 0;padding: 0;list-style: none;body font: 12px 宋体; padding-top: 20px;#menu width: 200px; margin: auto;/对menu h1进行css格式的设置#menu h1 cursor: pointer; color: #FFF; font-size: 12px; padding: 5px 0 3px 10px; border: #C60 1px solid; margin-top: 1px; background-color: #F93;/对menu h2进行css格式的设置#menu h2 cursor: pointer; color: #777; font-size: 12px; padding: 5px 0 3px 10px; border: #E7E7E7 1px solid; border-top-color: #FFF; background-color: #F4F4F4;/对menu ul进行css格式的设置#menu ul padding-left: 15px; height: 100px; border: #E7E7E7 1px solid; border-top: none; overflow: auto;/对menu ul li进行css格式的设置#menu ul li padding: 5px 0 3px 10px;/对no进行css格式的设置.no display: none;!-/function ShowMenu(obj, noid) /建立一个函数var block = document.getElementById(noid);/定义一个block变量，并给它赋值var n = noid.substr(noid.length - 1);/定义一个n变量，并给它赋值if (noid.length = 4) /当noid的长度为4时var ul = document.getElementById(noid.substring(0, 3).getElementsByTagName(ul);var h2 = document.getElementById(noid.substring(0, 3).getElementsByTagName(h2);/定义ul,h2变量，并给它赋值for (var i = 0; i h2.length; i+) /i的条件语句h2i.innerHTML = h2i.innerHTML.replace(+, -);h2i.style.color = #ff0000;/显示绿色 obj.style.color = ;/红色 for (var i = 0; i ul.length; i+) / i的条件语句 if (i != n) uli.className = no; else var span = document.getElementById(menu).getElementsByTagName(span);var h1 = document.getElementById(menu).getElementsByTagName(h1);/定义span,h1变量 for (var i = 0; i h1.length; i+) h1i.innerHTML = h1i.innerHTML.replace(+, -); h1i.style.color = ;/无色 obj.style.color = #79FF79;/浅绿色 for (var i = 0; i /定义一个点击事件/对表格进行设置/对单元格进行设置首页/对“首页”进行的设置/对单元格进行设置/当点击该菜单时，显示如下的二级菜单军事大全/对单元格进行设置 /当点击该菜单时，显示下面的二级菜单辽东军事/对单元格进行设置 /当点击该菜单时，显示如下的二级菜单中国军情/对单元格进行设置 /当点击该菜单时，显示如下的二级菜单今日头条/对单元格进行设置 /当点击该菜单时，显示如下的二级菜单军迷大本营/对单元格进行设置 /当点击该菜单时，显示如下的二级菜单联系我们/定义一个层/当发生点击按钮事件时，出现该菜单下的二级菜单中国军情最新新闻军事分析/定义一个层军事快报军迷论坛环球视野/当发生点击按钮事件时，出现该菜单下的二级菜单/定义一个层肉类蔬菜类凉菜类/当发生点击按钮事件时，出现该菜单下的二级菜单/定义一个层视频图片相关链接/当发生点击按钮事件时，出现该菜单下的二级菜单/定义一个层大事早知道社会百态我有话说/当发生点击按钮事件时，出现该菜单下的二级菜单/定义一个层常见问题解答自助服务反馈意见/当发生点击按钮事件时，出现该菜单下的二级菜单（七）页面下拉菜单的分析与设计如图7.1如图7.1是我的页面下拉菜单页面的截图，鼠标移动到上面时就会自动向下弹出，大大节省了网页的空间，上述功能实现的代码如下： JavaScript下拉菜单 * padding:0; margin:0; body font-family:verdana, sans-serif; font-size:small; #navigation, #navigation li ul list-style-type:none; #navigation margin:20px; #navigation li float:left; text-align:center; position:relative; #navigation li a:link, #navigation li a:visited display:block; text-decoration:none; color:#000; width:120px; height:40px; line-height:40px; border:1px solid #fff; border-width:1px 1px 0 0; background:#c5dbf2; padding-left:10px; #navigation li a:h