1、网站规划与设计网站设计说明书 班级_计算机应用 0802 班_学号 _2008513100216_姓 名 _苗红闪_（完成日期） 2010 年 6 月 22 日个人主页网设计说明书- 2 -目录摘要2关键字21.概述21.1 目的意义及解决问题21.2 系统功能31.3 系统特点31.4 系统运行环境32.功能需求分析42.1 课题社会背景及发展42.2 客户及功能需求分析52.3 系统运行所需环境32.4 系统具体功能需求33.系统设计63.1 采用的软件及开发平台63.2 网站结构示意图73.3 网站的详细设计74.技术实现84.1 主要功能模块技术实现84.2 主要技术问题解105、总结
2、12参考文献13附录 A14附录 B14个人主页网设计说明书- 3 -文学网设计说明摘 要目前 css+div 层布局已成为网站对页面布局的首选，针对其对页面元素易布局，页面美观等众多优点，本站采用 css+div 模式对页面进行布局设计。文学网设计开发完成环境操作系统 windows xp professional，浏览器版本 IE 6.0；页面主要采用 css+div 布局；网页特效JavaScrip 脚本技术实现，对用户注册信息的合法性检验；Ajax 技术实现异步提交，向后台提交请求实现页面的部分刷新。关键字: css+div 、JavaScrip 、Ajax个人主页网设计说明书- 4
3、-1 概述1.1 目的意义及解决问题本课题目的熟练掌握所学知识，通过自己掌握的知识，独立进行页面设计，网页元素的布局，主要掌握 div 层的布局，通过 css 控制 div 层在页面的显示，修饰、美化页面。通过本次题目，着重解决了 css 对 div 层布局，控制显示的问题。掌握了 Ajax 在网站的应用。1.2 系统功能鼠标划过 banner 图片，通过 Ajax 向后台提取信息，并在当前页面显示个人简要信息；首页显示当前日期（年月日）时间（时分秒） ；简单注册功能，注册后显示用户的注册信息。个人的简历自己的作品欣赏1.3 系统特点对于注册功能，在浏览器客户端进行验证。对用户名的输入（只能输
4、入数字和英文） ，运用 Ajax技术，给用户提示信息（用户名是否可用） 。对用户输入的每一项进行合法验证，对于不合法数据给予用户提示信息，只有用户所填资料都合法后才给予提交。用户生日注册项，采用日历控件，用户只能选择输入，减少了用户输入的错误数据的发生。1.4 系统运行环境软件需求：个人主页网设计说明书- 5 -开发技术：Ajax 异步提交；服务器：tomcat 5.0系统需配置 JDk 环境；浏览器：IE 6.0 以上版本浏览器及 Firefox 等一些主流浏览器( 不同浏览器效果有所不同)硬件需求：内存：128M 以上内存；处理器：奔腾 4 以上处理器；硬盘：40G 以上；2 功能需求分析
5、2.1 课题社会技术背景及发展现状目前 CSS+DIV 布局，已成为页面布局的主流， Ajax 技术实现了网页的部分刷新，已在众多网站应用。客户需要浏览美观的页面，同时不会等待很长的页面加载时间，在浏览网站的时候给予客户有好的提示。2.2 客户及功能需求分析客户需要浏览到美观的网站，当客户向服务器发出请求时，在正常网络状况下，请求的页面应该能快速加载到客户端浏览器上，减少客户等待时间。客户在网站的一些交互操作，应给予相应的友好提示信息。对于客户的访问本站的一些信息，产生相应 cookie 保存到客户端，减少客户下次浏览本站的一些操作。2.3 系统运行所需环境软件需求：开发技术：Ajax 异步提
6、交；服务器：tomcat 5.0系统需配置 JDk 环境；浏览器：IE 6.0 以上版本浏览器及 Firefox 等一些主流浏览器( 不同浏览器效果有所不同)硬件需求：内存：128M 以上内存；处理器：奔腾 4 以上处理器；硬盘：40G 以上2.4 系统具体功能需求鼠标滑过 banner 图片时，通过 Ajax 技术向服务器发送请求，并在当前页面显示相关信息；个人主页网设计说明书- 6 -对用户在本站的操作，给予友好的提示信息，对于客户的非法操作，给予合理处理并提示客户；主页的超链；3 系统设计3.1 采用的软件及开发平台开发软件：Dreamweaver CS3 、 PhotoShop CS3
7、开发平台：操作系统 windows XP Professional SP3 、奔腾 E6300 2.8GHZ 内存 2G、硬盘 320G3.2 网站结构示意图3.3 网站的详细设计首页弹出层模块（Ajax 应用）var docEle = function() return document.getElementById(arguments0) | false;function openNewDiv(_id) var m = “ida“;/ 新激活图层var newDiv = document.createElement(“div“);newDiv.id = _id;newDiv.style.p
8、osition = “absolute“;newDiv.style.zIndex = “9999“;LiteratureFriendlyLinkhtmlimagesimagesimagesmagicHatPobaby.htmlimagesMagicHat.htmlIndex.htmlReg.jspShowmsg.jspMe.htmlReadme.htmlPersonmsg.jspStyle.css个人主页网设计说明书- 7 -newDiv.style.width = “200px“;newDiv.style.height = “100px“;newDiv.style.top = “100px“
9、;newDiv.style.color = “red“;newDiv.style.left = (parseInt(document.body.scrollWidth) - 200) / 2 + “px“; / 屏幕居中newDiv.style.border = “1px solid #860001“;newDiv.style.padding = “20px“;newDiv.innerHTML = xmlHttp.responseText;document.body.appendChild(newDiv);var hideDiv = document.createElement(“div“);
10、/鼠标移除层hideDiv.id = m;hideDiv.style.position = “absolute“;hideDiv.style.zIndex = “1“;hideDiv.style.width = “206px“;hideDiv.style.height = “106px“;hideDiv.style.top = “99px“;hideDiv.style.left = (parseInt(document.body.scrollWidth) - 200) / 2 + “px“; / 屏幕居中document.body.appendChild(hideDiv);hideDiv.on
11、mouseout = function()document.body.removeChild(docEle(_id);document.body.removeChild(docEle(m);return false;4 技术实现4.1 主要功能模块技术实现用户验证信息输入合法性验证代码(JavaScript)String.prototype.trim= function() / 用正则表达式将前后空格 / 用空字符串替代。 return this.replace(/(s*)|(s*$)/g, “); function usercheck1()var reMail = /(?:a-zd+_-+.
12、?)*a-zd+(?:(a-zd+-?)*a-zd+.)+(a-z2,)+$/i;var username = form1.username.value.trim();var pwd = form1.textfield22.value.trim();var pwd2 = form1.textfield222.value.trim();var email = form1.textfield2222.value.trim();var tel = form1.textfield22222.value.trim();if(username=“)var mspan= document.getElemen
13、tById(“usermsg“);个人主页网设计说明书- 8 -mspan.innerHTML=“*用户名不能为空“;else if(pwd=“)var mspan= document.getElementById(“errortext“);mspan.innerHTML=“*密码不能为空“;else if(pwd2!=pwd)var mspan= document.getElementById(“errortext1“);mspan.innerHTML=“*两次密码不一致“;else if(email=“)var mspan= document.getElementById(“errorte
14、xt3“);mspan.innerHTML=“*email 不能为空“;else if(!reMail.test(email)var mspan= document.getElementById(“errortext3“);mspan.innerHTML=“*email 格式不正确“;else if(tel=“)var mspan= document.getElementById(“errortext4“);mspan.innerHTML=“*电话号码不能为空“;elsedocument.form1.submit();4.2 主要技术问题解决运用 ajax 技术实现页面的部分刷新；运用 jav
15、ascirpt 对用户输入信息的合法性的验证5 总结通过完成本次课题，掌握了 CSS 对网页 Div 的布局，了解到 CSS+DIV 网页布局的在网站布局应用的重要性。自己应该熟知 CSS 的属性，才能合理对层进行在网页中的布局，掌握新的技术在网站的应用（如，ajax 技术的应用，实现了页面的部分刷新，减少了网络流量，加快了客户端的加载速度） ，网站要求高效，就要开发新的技术。对于过程中出现的问题，要感谢王斌老师和苗洪闪同学，在他们的指导和帮助下，问题得到了解决。让我体会到交流的重要性，相互学习的重要性。只有相互学习，知识水平才能快速提高，掌握的知识更加牢固。感谢学校提供学习网站开发的机会，从
16、中让我掌握了实用的技术。个人主页网设计说明书- 9 -参 考 文 献1李烨.别具光芒 CSS+DIV 网页布局与美化 ，北京：人民邮电出版社.个人主页网设计说明书- 10 -附录 A 网站结构图个人主页网设计说明书- 11 -附录 B 各页面功能介绍文件名 主要功能 主要技术index.html 站点首页，提供到各板块的链接CSS+div 布局Reg.jsp 用户注册 Ajaxj、avascript 表格 CSS 布局Showreg.jsp 显示用户的注册信息 Jsp 技术Me.html 显示站长介绍信息 表格、CSS 布局shuoming.html 本站介绍信息 表格、Pobab.Html 友情链接页面 网页元素布局magicHat.html 友情链接页面 网页元素布局 javascriptflash 小游戏 Flash
