摘要： 2一、引言 1二、需求分析 1三、开发工具选择 1四、主体设计 2（一）网站开发流程 21.功能结构图绘制 22.界面设计 23. DIV+CSS布局 34.网页DIV结构和层样式 3（二）网站基本功能 51.首页 52.个人空间 63.婚姻恋爱 64.人气会员 75.在线聊天 76.搜索会员 87.情感博客 98.新手指南 99.关于我们 1010.公告中心 10（三）JavaScript特效实现 11五、总结 12谢辞 14参考文献 14声 明本人所呈交的 《一线牵婚恋网站的设计与实现》 ，是我在指导教师的指导和查阅相关著作下独立进行分析研究所取得的成果。除文中已经注明引用的内容外，本论文不包含其他个人已经发表或撰写过的研究成果。对本文的研究做出重要贡献的个人和集体，均已在文中作了明确说明并表示谢意。作者签名： 魏垂栋 日期： 2016.3 摘要：网站采用table表格布局，使得代码比较冗长繁琐，不容易维护，而且过多的table表格嵌套会导致页面加载速度极慢，也不符合当前w3c标准。采用HTML+DIV+CSS来布局网站，本站就是采用这样的技术来构建的。整个网站的流程是：整理网站资料，然后完成页面效果图设计，切图写HTML+CSS，然后在页面里面的某些模块增加JS动态效果。值得一提的是，本站运用了多个JS动态技术，以致于让页面充满生动性和互动性，最终实现整个网站的制作，重点突出了网站的实用性和版面简洁等特点。
2016年3月目录
声 明 1
 Abstrant:
Table table layout websites, making the code more cumbersome, not easy to maintain, but too much table nested table causes page loads extremely slow, do not conform to current W3C standards.HTML+DIV+CSS is used to layout Web sites, this site is using the technology to build.Pro
 *景先生毕设|www.jxszl.com +Q: ￥3^5`1^9`1^6^0`7^2$ 
cess is for the entire website: copy and Web site information, and then complete the pagedesign, pictures and write HTML+CSS, then some modules add JS in the page dynamic.It is worth mentioning that, this site uses multiple JS dynamic technology, that page is full of lively and interactive, and ultimately made for the entire website, highlights the usefulness of our site layout and simple and so on.
Keywords: DIV+CSS; W3C; JS dynamic technology
一、引言
采用HTML+DIV+CSS制作网站符合当前W3C标准，代码容易维护，扩展性好，从而成为了主流的网页布局方法。因此本课题采用了HTML+DIV+CSS布局的方法实现了小型交友网站的构建与设计。 
近几年，电视交友节目和交友中介琳琅满目，遍地开花。不得不说的是，“非诚勿扰”“非常完美”等这些著名的电视节目，给广大的单身男子提供了找对象的平台。俗话说，事出有因，为什么这么多的交友节目、交友中介，都是因为有市场，有需求。基于目前找对象难的现状，经过网上搜索整理资料，如今火爆的交友节目果真如此，日趋紧张的男女比例失衡的问题，为此我开始筹集网站开发资料，并结合自己的专业学习的知识，筹备开发一个交友网站。通过网站系统开发方法、设计思路等技术手段进行了该系统与总体数据的规划、设计与实现。在交友网站设计与实现过程中采用了基于HTML技术组建的交友网站的基本框架的思想，用DIV+CSS进行网页布局，结合一些JS脚本技术作为整个网站建设的手段。利用网上交友网站这个平台可以结识自己青睐的对象，甚至联系密切的情况下，还可以见面。网站当中的互动功能，更能充分活跃会员之间氛围，营造一个真实有趣的交友网站平台。
二、需求分析
日益恶化的男女比例失衡的问题，是这个社会，甚至每一个家庭都需要面对的难题，随着网络的迅速发展，很多著名的交友网站给网络交友打好坚实的基础，使得网络交友的普及得到了印证。设计并建立一个好的交友网站可以更好的促进发展，构建一个良好的网络交友平台，从而促进人与人之间，人与社会之间的多方面的共享，从而极大缓解了我国找不到结婚对象的压力。 
在这些背景下，网络交友必然成为社会发展的趋势，也是当代年轻人青睐的交友方式，必将获得巨大的成功。
三、开发工具选择
在本项目里运用了Photoshop画网页，先各部分布局，然后根据内容设计画布。在Photoshop画完网页后切片而得出的素材和html网页，Dreamweaver就根据其设计页面和素材而做出的网页，还有用js和jq达到图片自动切换等效果。
网上交友系统里面，实现了个人空间、婚姻恋爱、人气会员、在线聊天、搜索会员、情感博客、新手指南、关于我们、公告中心等页面模块制作，布局清晰简洁，从而能让用户便捷快速的能找到页面入口，更大程度上方便了用户使用。在经过线下的市场调研和分析之后，本人再结合了目前网上比较流行的交友平台，特此制作网上交友的静态网站。
网站开发工具的选择尤为重要，更何况对于一个专业的交友网站来说，更显得尤为谨慎。本站的制作用到的工具有：Dreamweaver、JS、Photoshop、记事本等制作软件，利用了Dreamweaver优秀的可视化网页制作特性，利用了Photoshop高效的图片处理特性，集合页面特效JS的补助，让整个网站更显得活泼生动了。值得一提的是，在这几个软件中，Dreamweaver占有举足轻重的地位，因为它作为Web网站和应用程序的重要专业工具。它的主要特性表现在：可视化布局、应用程序开发、代码编辑，支持组合一个功能强大的开发工具，当今的网站开发人员和设计人员都青睐这款软件。因此，开发工具的选择显得非常重要。
四、主体设计
（一）网站开发流程
1.功能结构图绘制
层次模块结构是将网站划分为若干子页面，子页面下再划分为若干的模块。 以前面的需求分析为基础，将系统分为两大模块，即前台开发和后台开发。前台模块包括：用户注册模块，课程的查看功能模块，电子资源功能模块，教师队伍查看功能模块，留言板模块；后台功能：管理员登入模块，信息的审核，用户的管理功能，教师信息的添加功能，信息发布、推荐、删除功能以及后台数据库的管理。功能结构如图41所示。 
图41 网站详细结构图
2.界面设计
运用DIV+CSS布局，加入HTML的代码设计设计出交友网站的整个网站页面，从而把整个页面框架都呈现出来了。首先要设计基本框架，利用Photoshop进行基本的设计。首页具体框架如图42所示。
Top
Logo
Login or Regedit
Banner
在线会员
婚姻法规
广告位
VIP会员
推荐会员
广告位
周魅力排行榜
友情链接
底部链接
版权所有
图42 首页布局框架
首页布局主要是以简单为原则，给网站访问的用户方便快捷的感觉。网页整体配色采用粉红色作为主色调，更突显爱情、交友的元素特征。各个模块的布局符合传统的网页的布局。列表框架如图43所示。
Top

原文链接：http://www.jxszl.com/jsj/xxaq/48825.html