1、天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告1天 津 理 工 大 学课 程 项 目 报 告个人主题网站学生姓名：王庆嘉学 号：20095525年级专业：2009 级中加合作计算机 1 班联系电话：15522504593学 院：计算机与通信工程学院天津中国提交日期：2012 年 6 月 14 日天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告2个人主题网站作 者：王庆嘉 指导老师：郭力杰 (天津理工大学计算机与通信工程学院 2009 级中加合作计算机，天津 3001
2、91) 摘要：以课本Web 程序设计为基础，通过完成逐步完成 HTML、HTML+CSS、JS、PHP、PHP+mySQL 等一系列实验，逐步完善了自己个人网站的建立。其中经历了代码的反复调试，通过网络查找错误，查找他人例子反复修改，终于完成前台和后台的建设。其中在 XHTML 中学习到了如何使用 标签建立表单；在 CSS 中通过对字体、颜色、DIV 布局完成了前台的美工设计；在 JS 中通过一系列函数和DOM的定位完成一些动态网页的设计；通过 PHP 脚本语言操纵 mySQL 数据库，使注册信息被传递到数据库的表中，从而完成了网站的后台建立。其中为了更好的实现一个网站的登录、注册功能查阅有关
3、 PHP5 方面的书籍、上网搜资料完成对 cookies和 sessions 的设置，使用户验证更加完善。关键词： web 标准；xhtml；css；JavaScript；PHP； MySQL；1 前言为了更好地学习 Web 知识，系统地了解 Web 程序设计这门课程，决定建立一个个人主题网站。通过对个人主题网站的制作，进一步地了解网站设计的基本知识，并且将书本上的知识和代码与实际的操作结合起来，对整个 Web 程序设计有了一个系统的了解。个人主题网站实现了网站基本的注册、登录、验证、文件上传等基本功能2 个人主题网站理论基础21 个人主题网站国内外现状（1）普通互联网用户对 Web2.0 知
4、者甚少。 73.3%被调研者不了解 Web2.0。 （2）个人博客已经成为重要的传播力量。 个人博客已经成为用户重要的信息来源渠道，个人博客这种网络上的口碑传播已经成为 9.8%的互联网用户了解 Web2.0 的信息渠道来源。 （3）门户博客有望成为后起之秀。 在用户经常访问的博客网站中，排名第一的是博客网，其次是新浪博客、搜狐博客、天涯博客和网易部落，门户博客有望成为后起之秀。 （4）相对于离线 RSS，更多的用户倾向于使用在线 RSS。 天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告3仅使用在线 RSS 服务的用户比例高达
5、60.8%，仅使用离线 RSS 服务的用户比例为14.6%，前者是后者的 4 倍。 （5）通过 RSS 浏览新闻仍然不是用户浏览新闻的主要方式。 使用 RSS 浏览新闻占所有浏览方式比例不到 20%的用户群体，占调研总体的50.9%。22 网站设计与编程工具介绍Dreamwaver CS5WampServer23 数据库介绍使用 mySQL 的 phpmyAdmin 软件进行数据库的管理 天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告4通过 PHP 脚本语言自动创建 my_db 数据库并建立 User 表来存储用户数据3 个人主
6、题网站详细设计31 网站整体功能模块介绍（1）注册模块：注册新用户（2）登录模块：对已注册的用户实现登录（3）上传模块：上传指定类型的文件到指定文件夹中（4）日志模块：对已登录的用户开放日志功能32 数据库设计通过 PHP 脚本语言建立 my_db 数据在 my_db 数据库中建立 User 表来存储用户注册信息天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告5User 表中包含 User_ID,User_name,User_pwd,User_email,User_card 这 5个字段创建数据库 journal_db，并建立 j
7、ournal_list 表来存放日志4 个人主题网站整体设计 41 CSS 设计天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告6body font-size:12px; font-family:“Times New Roman“, Times, serif; text-align:center;#Container width:100%;#Header width:900px; margin:0 auto; height:80px; background-image: url(素材/导航栏背景.png)#PageBody wid
8、th:900px; margin:8px auto; height:400px;#SideBar width:260px; text-align:left; float:left; clear:left; overflow: hidden;height:400px;#MainBody width:636px; text-align:left; float:right; clear:right; overflow:hidden;height:400px; background-color: #F5F5DC;#Footer width:900px; margin:0 auto; height:50
9、px; background:#F0F5F8;#banner background:0 30px no-repeat;width:730px;margin:auto;clear:both;#menu padding:20px 20px 0 0#menu ul float:right;list-style:none;margin:0px;#menu ul li float:left;display:block;line-height:30px;margin:0 10px;#menu ul li a:link,#menu ul li a:visited font-size:15px; font-f
10、amily:“宋体“;font-weight:bold;color: #FFFFFF;#menu ul li a:hover.menuDiv width:1px;height:28px;background:#999;/登录框设计#loginbackground-color:#F0F5F8;width:240px;height:270px;border-color:#b8d4e8;border-width:1px;border-style:solid;margin:8px;.txtinborder-width:1px;border-style:solid;border-color:#99999
11、9;width:150px;height:26px;天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告7.txtin1border-width:1px;border-style:solid;border-color:#999999;width:150px;height:22px;.txtin2border-width:1px;border-style:solid;border-color:#999999;width:250px;height:35px;.searchbackground-color:#F0F5F8;border-co
12、lor:#b8d4e8;border-width:1px;border-style:solid;width:240px;height:100px;margin:0px auto;/搜索栏设计.searchinmargin:15px 0px 0px 0px;/字体设计.titlefont-size:30px; font-family:“宋体“; color:#708090;.word1font-size:12px; font-family:“宋体“;.word2font-size:15px; font-family:“Times New Roman“, Times, serif;.word3fo
13、nt-size:12px; font-family:“宋体“; color: #666666;.word4font-size:22px; font-family:“宋体“; color:#CD5C5C;#line1border-bottom:1px solid #CCCCCC; width:220px; height:10px; margin:auto;#line2border-bottom:1px solid #CCCCCC; width:870px; height:7px; margin:auto;.div1margin-top:0px;float:left;天津理工大学计算机与通信工程学
14、院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告8clear:left;.div2margin-left:15px;.testfloat:left;/特殊字体设计.span2font-size:35px;color:#3399CC;.span3font-size:25px;color:#FF3333;.span4font-size:20px;color: #FFD700;.span5font-size:20px;color:#00AA00;.timecolor:#FF00FF;/已登录字体设计.loginokfont-family:STXinwei;font-
15、size:22px;color:#CC0000;.user1 font-family:STXinwei;font-size:23px;color:#FFBB00;.user2font-family:Microsoft YaHei;color:#0088A8;font-size:18px;.user3color:#00AA00;font-family:Microsoft YaHei;font-size:16px;/日志模块 CSS 设计 #journal_header width:auto; height:80px; background-color:#CCCCFF;#journal_body
16、width:auto; height:400; background-color:#CCDDFF;.journal_title font-family:Microsoft YaHei; font-size:22px;.journal_text font-family:Microsoft YaHei; font-size:20px; .journal_title1 font-family:STXinwei; font-size:32px;color:#3399CC;.journal_title2 font-family:STXinwei; font-size:32px;color:#FF3333
17、;天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告9.journal_title3 font-family:STXinwei; font-size:32px; color: #FFD700;.journal_title4 font-family:STXinwei; font-size:32px;color:#00AA00;.journal_title5 font-family:STXinwei; font-size:32px;color:#FF69B4;.journal_title6 font-family:STXinwei; f
18、ont-size:32px;color:#BA55D3;.journal_txtinborder-width:1px;border-style:solid;border-color:#999999;width:350px;height:24px; #Header2 width:900px; margin:25px auto; height:80px;#PageBody2 width:600px; margin:8px auto; height:auto; 42 前台页面设计我的网页 首页 天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项
19、目报告10微博 写日志 我的日志 电影 关于 帐号： “ / 密码： “/记住密码记住密码 天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告11请输入您的搜索内容。最近的新鲜事！时间：英国一位农夫在自家花园内发现了三只瑟瑟发抖的小狐狸，于是给了它们一个毛绒玩具。没想到小家伙们把它当做了自己的妈妈，不但和它形影不离，吃饭的时候还会留下部分食物，把盆子推到它跟前。这样浓浓的亲情不禁让人感慨。但在自然界，超过70%的幼年小狐狸活不到它们 1 岁的生日。我一不高兴就喜欢吃东西，一吃东西就发胖，一发胖我就很不高兴。你有这种症状吗？天津理工大
20、学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告12西游记中沙僧最爱说的 8 句话，笑死我了。 1.大师兄师傅被妖怪抓走了 2.二师兄师傅被妖怪抓走了 3.大师兄二师兄被妖怪抓走了 4.大师兄师傅和二师兄都被妖怪抓走了 5.师傅放心吧，大师兄会来救我们的 5.师傅大师兄说的对 6.大师兄二师兄说的对 7.二师兄大师兄说的对 8.师傅，不能赶大师兄走啊天津理工大学 计算机与通信工程学院 专业：计算机科学与技术（中加）姓名：王康 班级：09 中加五班 学号：200956694. 3 后台脚本设计登录模块脚本代码日志模块脚本代码4. 4 后台数据
21、库设计注册模块后台代码 返回注册页面重新注册“;天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告16elseecho“用户名已存在，注册失败“;echo“返回注册页面重新注册“;mysql_close($con); /关闭数据库连接?日志模块后台代码点击此处查看日志“;mysql_close($con);?5 个人主题网站实验测试51 网站首页验证截图2首页 JS 动画效果52 网站各功能验证截图（1） 注册功能天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告18注册
22、成功利用 JS 对注册信息的有效性验证 天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告19利用 PHP 对写入数据库的数据再次把关天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告20（2） 登录功能登录成功 天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告21设置 Cookies 保存用户帐号密码天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目
23、报告22利用 Sessions 判定用户是否登录未登录无法使用写日志功能，页面跳转至注册页面（3）上传功能上传成功天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告23在 upload 文件夹中发现上传图片(4)日志功能写日志模块 发表成功天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告24在“我的日志”模块中发现发表日志53 浏览器兼容性测试选取 IE8 和遨游 3 这两款浏览器进行兼容测试其中IE8 能对此个人主题网站完全兼容对各个模块的功能能完全展示遨游 3 在极
24、速浏览模式下 CSS 布局会出现问题，并且遨游 3 不支持“微软雅黑”、“华文新魏”等 office 字体，将这些字体默认为宋体6 总结终于完成 Small Project Work 的大作业，历时很长，周末花了很多时间投入其中，其中经历了“迷茫” 、 “痛苦” 、 “绝望”和“柳暗花明”一系列心理变化，终于完成了此次作业，但还是感觉不是尽善尽美，不管 CSS 美工还是 PHP 后台脚本都有很多漏洞和值得修改的地方，由于时间不允许，只得作罢。感觉最大的收获是对 PHP 有了更深的认识，并对查找问题，发现错误，解决错误有一些心得。从查找资料中明白一个编写 Web 程序的“真理”：“参考书上虽然是
25、对的，但是到你用的时候就不对了。 ”我总结出了自己“复制”查考书的套路，读懂代码、修改参数、查找错误、简单化代码、修改、复杂化的循环套路。写了天津理工大学计算机与通信工程学院 WEB SITES DESIGN AND PROGRAMMING 课程项目报告25这么多 Web 的代码感觉出错误并不可怕，可怕的是没错误但你还是不正确。例如，在日志模块中，我在数据库中提取日志数据输出到“我的日志”页面中，结果全是乱码，后来我将所有页面的编码改成了“GB2312” ，可是发现乱码全变成了问号，无奈又在数据库中将校对改成了“gb2312_chinese_ci”可是还是不对，最后使用了 mysql_quer
26、y(“SET NAMES GB2312“);mysql_query(“SET CHARACTER_SET_CLIENT=GB2312“);mysql_query(“SET CHARACTER_SET_RESULTS=GB2312“);才浏览器能正确输出中文。经历了从什么都不会到设计自己的个人主题网站，学到了很多东西，感觉到Web 是计算机中很“迷人”的一块领域，也是实用性很强的一门学科，自己不会的东西还很多， “看 PHP 看得越多越痛苦，因为发现自己不会的也越来越多”有时常发出这样的感慨。学无止境，还有 Ajax、JQuery 等技术等着我去探索。参考文献 1 Robert.W.Sebesta著(美) Web 程序设计（第 6 版） 王春智 刘伟梅 译 清华大学出版社 2 PHP5 与 MySQL5 网络程序开发原理与实践教程/满在龙，周遵麟，孙更新编著 .北京：电子工业出版社，2008，103 精通 PHP5 应用开发 / 秦涛 曾玉文 编著 北京：人民邮电出版社， 2007.5等等
