个人网站设计说明书

小金个人网站设计说明书1设计理念个人网站设计，以简约风格为主，本站亦是如此。本站点旨在通过现代网页制作技术，把有关个人信息通过网站形式发布到互联网，借此达到与外界互联互通的目的。就网站本身而言，力求主题清晰，结构明了，美观而不失大方。2总体框架2.1页面布局本站点页面设计简明，分上中下三个部分，位置大小固定。页面统一布局，采用模板页作为框架，选取背景图片统一风格。最上边是各个页面的标题部分，显示页面中间所显示的内容主题。网页底部是一个动态可选项目栏，相当于菜单栏，当鼠标滑动指向每一个分标题时，对应的分标题下所有可选项目弹出，此时可以用鼠标做出选择。页面中间区域是内容显示区域，采用框架表结构实现，区域大小固定，根据内同的多少有上下和左右滚动条可调节视域范围，便于统一风格和协调内容显示。2.2功能模块本站点设计功能明确简洁，可满足私人定制，目前只开通最主要的三个模块，包括：个人信息、娱乐（兴趣爱好）、联系方式等模块。关于个人信息又分为三部分，个人档案信息、日记部分和相册。个人档案记录和展示关于自我的一些基本信息，起到简单介绍作用，以文字列表形式实现；日记部分记录了有关个人的日常所闻与所感，以条目形式展示附带日记记录时间，由于日记可能较多所以提供分页功能；相册部分是对现实瞬间的扑捉与记录，以照片形式展示，采用自动播放形式，可以手动播放。在娱乐部分，主要有音乐和动画两部分，音乐与动画充分展示了个人的兴趣爱好，以多媒体形式展示。最后一个主要功能是联系方式，此部分提供列表形式的输入框，访客可以用过提交相关信息达到和站主的沟通。3详细设计说明图1站点整体文件树形目录3.1对于站点的相关文件设计说明站点名称：myweb主要文件夹：flash、images、music、Scripts、Templates主要页面：welcome.htm、index.html、dangan.html、riji.html、xiangce.html、yinyue.html、donghua.html、liuyan.html其他功能文件：daohang.css、logininput.css、bj.css、mm_css_menu.js图2档案页面3.2关于档案页设计说明scriptlanguage=JavaScript1.2type=text/javascriptsrc=mm_css_menu.js/scriptstyletype=text/cssmedia=screen@importurl(./daohang.css);body{background-image:url(images/bj2.jpg);overflow-y:hidden;background-repeat:no-repeat;}此部分引用固定格式，通过对.js文件的引用达到动态处理效果，属于框架的一部分。tablewidth=800height=138border=0trtdwidth=20height=24 /tdtdwidth=704 /tdtdwidth=62 /td/trtrtd /tdtdpclass=STYLE2昵称：小金br/年龄：23br/星座：摩羯座br/血型：A型br//ppclass=STYLE2职业：学生br/爱好：小说,网络,设计,音乐,旅游br/誓言：爱我所爱,无怨无悔br/追寻：找到自己的人生位置,给人以快乐给自己快乐!/ppclass=STYLE2QQ：1297015012br/Email：[e-mail]/ppclass=STYLE2人生信念：简简单单,做快乐自己!/ppclass=STYLE2br//ppclass=STYLE2br//ppbr//p/tdtd /td/trtrtd /tdtd /tdtd /td/tr/table以上部分是在框架中间位置插入表格属性，利用表格的行与列完成文字录入与位置固定。图3日记页面3.3关于对日记页设计说明divid=apDiv5tablewidth=581border=0cellspacing=2trtdwidth=29height=37 /tdtdwidth=33height=37 /tdtdwidth=10 /tdtdwidth=304 /tdtdwidth=107 /tdtdwidth=72 /td/trtrtd /tdtdwidth=33height=30imgsrc=images/01.jpgwidth=30height=30//tdtd /tdtdspanclass=STYLE4ahref=rjpage1.html完美生活/a/span/tdtddivalign=rightclass=STYLE42015-7-16/div/tdtd /td/tr……/*部分同格式内容省略*/trtdheight=23colspan=6 /td/tr/table/div以上部分是日志主题页面的，div与table样式设计，实现日记的编号排版与日记主题和时间显示功能。图4相册页面3.4关于相册的设计说明objectclassid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000……paramname=flash_componentvalue=ImageViewer.swc/paramname=movievalue=flash/xiangce.swf/paramname=qualityvalue=high/paramname=FlashVarsvalue=……(1).jpg','flash/01……(11).jpg','flash/01/object相册部分将照片集转化为FLASH格式进行自动播放，也可以手动控制按钮进行快速浏览。图5音乐页面3.5音乐页面设计tablewidth=800height=138border=0trtdwidth=20height=24 /tdtdwidth=704 /tdtdwidth=62 /td/trtrtd /tdtdpclass=STYLE2歌曲名字：未知/ppclass=STYLE2歌手名字：未知/ppclass=STYLE2embedsrc=music/music.wmawidth=338height=45/embed/ppclass=STYLE2这是一首不知道名字的歌曲，也不知道是哪年哪月我从哪下载的，忘了，不记得了，/ppclass=STYLE2小金偶尔会健忘的，呵呵！不过呢，这首音乐很好听哦，试试吧，相信你一定会喜欢！br//ppbr//p/tdtd /td/trtrtd /tdtd /tdtd /td/tr/table音乐页面主题是TABLE标签，内嵌播放标签embedsrc=music/music.wmawidth=338height=45/embed。图6动画页面3.6动画页面设计objectclassid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000codebase==9,0,28,0width=500height=326paramname=movievalue=flash/497.swf/paramname=qualityvalue=high/embedsrc=flash/497.swfquality=highpluginspage==ShockwaveFlashtype=application/x-shockwave-flashwidth=500height=326/embed/object以上是动画页面的参数设置，通过引入object来实现对动画媒体的引用。图7留言页面3.7关于留言页面设计说明divid=apDiv3tablewidth=800border=0cellspacing=5tr……/trformid=form1name=form1method=postaction=tr……labelinputname=textfieldtype=textclass=logininputid=textfield//label/trtr……/tr/formlabel……/label/td/tr/table/div在留言板页面，table与form结合完成简单的信息录入，达到信息传递作用。此部分不足之处是后台尚未建立数据库存储机制，目前页面端无法提交有关信息。4小结本站点功能模块简洁明了，基本能满足个人信息需求，但同时存在诸多的不足。功能方面，目前主要有日志、档案、音乐、动画等模块，以后还有更多的拓展项目要添加；技术方面，由于水平有限，很多功能不完善，没有连接网站数据库，不能实现在线实时交互，页面设计均以静态页面为主，只提供基本的浏览功能；设计方面，艺术成分较少，色调单一，视觉效果欠佳。以上这些均是在今后的学习中应该改进和提高的地方。该站点目前没有独立域名，无网络服务器对其进行在线管理，故暂不能连网公开。