个人网站设计

百度文库-让每个人平等地提升自我

1

题目：个人博客网站建设

学校：

学科专业：

学生：

学号：

指导教师：

百度文库-让每个人平等地提升自我

2

个人博客网站建设

摘要：

在IT网络日益普及的今天，越来越多的人开始接触网络，在网络上留下自己

的印记，拥有一个博客系统，就能更好的展示自己。本文分网站规划、使用工具、

前台设计、后台设计、问题解决等部分展示了“个人博客网站”的设计和建设过

程。网站具有发布博文、访客留言、友情链接、云标签、文章按功能统计等，基

本能满足个人博客的需求。

本文偏重技术角度详细介绍了前台后台每个模块的设计思路和实现功能，同

时介绍了建设网站中更改设计方案以满足使用者提出新的要求的例子，解决了类

似保护隐私文件等问题。

网站建设中使用了Dreamweaver、photoshop等工具，架设平台为Windows

Server2003+IIS、php、mysql，php运行在IIS环境下，网站用php语言编写

并使用数据库保存信息，同时使用CSS来设计网站风格。

关键词：phpmysqlIIS数据库技术

引言

随着信息时代的到来和网络技术的不断发展，中国每天访问Internet网络的

人群数量也在飞速的增加。而传统的静态网站已经不能适应日益膨胀的信息量和

及时发布等需求，在这种情况下，制作全动态的综合性网站是跟上潮流的唯一选

择。

我设计的个人博客网站就是建立在“动态”的基础上，让网站的浏览和维护

都变的最为简单，让网站成为展示自我，与网友沟通交流的重要工具。

网站设计以功能设计为重心，界面效果简洁大方，一个好的网站架构应该能

够让网站管理者随心所欲的更改网站里的全部内容，这也在网站的通用性方面有

很大增强。个人博客网站追求的目的就是把能写入数据库的部分全部设计在数据

链里，这样管理员只通过浏览器就能完成绝大部分的网站内容维护。

百度文库-让每个人平等地提升自我

3

网站建设中使用了Dreamweaver、photoshop等工具，架设平台为Windows

Server2003+IIS、php+mysql,网站用php语言编写并使用数据库保存信息，用

户和管理员在任何一台能上网的计算机上都能实现网站页面的浏览和网站内容的

管理。

第一章网站概述

1.1网站设计目的

第一批中文博客是在2002年出现的，早些时候博客只是一个新的网络名词并

无特殊之处，。就在不经意间，博客竟如雨后春笋般冒出来，博得越来越多网民的

欢心，并在互联网上引发了一股博客热潮。

博客的发展现状呈现出以下特点：发展速度惊人；从精英向大众人群迅猛扩

展；博客人群主体更加多元化；博客服务商激增，出现群雄争霸局面；博客资源

争夺激烈，博客服务商面临市场洗牌。

博客发展到今天已经取得了相当规模的成就，以新浪、搜狐、网易为代表的

三大门户网站都已经推出了自己的博客服务，还有一些著名的专业博客网站都已

经对博客资源展开了激烈的争夺。在规模扩大的同时博客技术也在不断的进步和

完善，目前博客技术已经取得的成果包括：发表日志，发表评论，相册等一些通

用功能。

拥有一个完全独立的博客就必须要有一个适合个人的博客网站，用户可根据自

己的实现想法和需求而改变博客的结构、色彩等，是自己完全可控的，本站就是

为实现这一目的而设计。

1.2网站实现功能

（1）管理内容：为个人博主提供博客的内容管理平台，提供日志、留言、评

论、链接、四大类的信息管理内容。除评论外，每种信息均可自行管理信息分类，

以及管理这种信息。

（2）阅读博客：系统首页为博客访问者提供了博客分类列表，浏览者可以选

择自己喜欢的博客专题。另外首页还包括最新日志列表、访问率最高的日志列表、

评论最多的博文、热点关键词等。

（3）系统功能页面：日志和博客关键字搜索，列出日志、评论、留言的总数、

友情链接的管理等。

网站首页模块

图1-1

一个网站最重要的是首页，如图1-1一般正规的网站所有的子页都在首页有

链接或体现，所以网站首页模块也反应了网站中大部分页面的功能。

1．通用页面头部和通用页底

百度文库-让每个人平等地提升自我

4

为了保持网站风格统一和修改的方便，把每页都出现的通用页首和页底做成

独立的文件，并与mysql数据库相连，方便更容易的更改页首页底内容。

2．首页博文

首页博文显示最新发表的6篇文章的简介，访客可以通过简介了解大致的文

章内容。

3．最新按类统计模块

这一模块实现按类进行统计，向访问展示了本站发表的文章的情况，可以了

解到最新发表的文章、最新访客的评论、热门文章和热评文章。

4．分类模块

站内的内容按不同的类别归属于某一个大类，访问可以根据分类来更方便的

阅读感兴趣的方面。

5．云标签模块

本站使用了云标签功能，发表的每篇文章都可以设置多个关键词，在首页可

以将本站最热的关键词显示在最前，这样就方便查看相关的文章。

6．友情链接

可以将网友的相关博客或自己感兴趣的网站做链接，提高交互性，后台可以

对友情链接进行管理。

7．搜索功能

可以提供全站文章的搜索功能。

网站特点介绍

1．全动态设计

整个网站基本没有静态内容，而是用几个网页框架读取数据库信息，网站的日

常维护乃至高级维护都不需要借助网页编辑工具，只需要在浏览器上即可完成。

2．独立的前后台设计

前台只管读取数据库，后台只管编辑数据库，两者分工不同在操作上完全独

立，而通过数据库有把前后台紧密的连接在一起。

3．分工明确的模块功能

文章模块、分类模块、云标签模块、友情链接模块、文章统计模块、搜索模

块……每个模块只完成他所要完成的事情，设计清楚，操作简单。

4．高度模板化的页面设计

网站前台的核心页面只有四个，但是就是通过这四个页面的不同组合可以把

所有信息展现在浏览者面前。

5．统一的页面风格

所有页面都使用相同的CSS所以整体风格保持一直，通用页面在设计上框架

也基本保持一致，使网站的整体感很强。

百度文库-让每个人平等地提升自我

5

6．单用户模块

因为是设计成个人博客系统，所以本站只能单用户使用，使用更专一。

第二章网站建设工具介绍

页面框架设计：Dreamweaver8

页面图片处理：PhotoShopCS2

网页脚本语言：PHP

页面风格控制：CSS

编程调试工具：EditPlus

后台数据库：mysql

网站架设平台：WindowsServer2003+IIS+PHP-5.2.0

Dreamweaver8

Dreamweaver8是由美国著名多媒体软件开发厂商Macromedia公司推出的一

套专业可视化网页开发工具。它与该公司的另外两个网页制作软件Flash、

Fireworks并称“DreamTeam”。其中Flash用来生成矢量动画；Fireworks完成Web

图像制作；而Dreamweaver则进行各类素材的集成和发布。

Dreamweaver8提供了强大的可视化编辑功能来确保高质量网页的完成，设计环境

使用CSS样式表来进行网页样式的统一管理，可以迅速高效地开发出代码简洁、

专业规范的站点。同时，Dreamweaver8还提供了许多与编程相关的工具和功能，

并且，借助Dreamweaver8还可以使用服务器语言（例如ASP、JSPColdFusion

标记语言和PHP）生成支持动态数据库的Web应用程序。

2.1.1Dreamweaver8简介

1．DreamWeaver8界面

Dreamweaver8的工作界面包括：标题栏、菜单栏、工具栏、文档窗口、上下

文菜单、标签选择器、状态栏、属性检查器、面板组等。

2．Dreamweaver8安装坏境

Dreamweaver8虽然使用上与DreamweaverMX2004基本相同，但Dreamweaver

8对需要安装的计算机所实用的系统提出了更高的要求，最基本的配置是：800MHz

IntelPentiumIII处理器（或同等处理器）以及更高频率的处理器、Windows2000

或WinwowsXP、256MBRAM、1024*768,16位显示器以及650MB以上可用磁盘空间。

3．Dreamweaver8新增功能

Dreamweaver8相对于其前期版本，其包含了许多新功能。这些功能的增加使

得软件的易用性得到了改善，也更方便了网页设计、网站开发的工作，新增功能

包括缩放功能、“样式呈现”工具栏、对XML数据进行可视化操作、CSS布局的可

视化、代码折叠功能以及插入Flash视频等。

百度文库-让每个人平等地提升自我

6

2.1.2Dreamweaver8的特点

1．灵活的编写方式

Dreamweaver8具有灵活编写网页的特点，将“设计”和“代码”编辑器合二

为一，在设计窗口中精化源代码，使用户能够按工作的需要定制自己的用户界面，

并且利用一些浮动窗口，用鼠标单击的方式插入图像、表格、表单、应用程序、

脚本语言等各种对象，同时也提供对代码的编辑，包括样式表和JavaScript脚本。

2．可视化的编辑界面

Dreamweaver8是一种所见即所得的HTML编辑器，可以实现页面元素的插入

和生成。可视化编辑环境大量减少了代码的编写，同时也保证了其专业性和兼容

性，并且可以对内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。

无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver8

都将提供便捷的方式使用户设计网页和管理网站变得更容易。

3．功能更多的CSS支持、CSS的可视化设计、CSS检查工具

CSS样式一直都是网页制作的一个重要环节，网页文本字体、颜色，图像的位

置等外观设置都可以通过CSS样式表来控制。Dreamweaver8中有强大的CSS样式

表编辑器，使用者可以利用CSS面板上的功能按照要求，非常轻松地编辑出自己

满意的CSS样式，从而达到美化网页外观的效果。

4．强大的Web站点管理功能

用户自定义控制不仅可以迅速完成个人页面以及站点的设计，而且

Dreamweaver8的RoundtripHTML/JavaScript行为库以及模板和标签功能也非常

适合大型网站的合作开发，通过与其他群组产品的配合使用以及众多第三方支持

可轻松完成动态发布电子商务网站的构建。FTP安全保障，是Dreamweaver8新增

功能之一，所有传输的文件完全加密，并阻止越权存取你的信息、文件内容、用

户名和口令。

5．内建的图形编辑引擎

修剪、改变大小、尺寸、旋转角度、调节明暗度都不需要离开Dreamweaver8

环境，因为它本身集成了MacromediaFireworks的基本图形编辑技术，这是以往

版本所没有的功能，如图2-1所示。

图2-1内建的图形编辑引擎功能

6．Dreamweaver8的集成特性

Dreamweaver8继承了Fireworks、Flash和Shockwave的集成特性，可以在

这些Web创作工具之间自由地进行切换，轻松地创建美观实用的网页。

7．丰富的媒体支持能力

可以方便地在网页中加入Java、Flash、Shockwave、ActiveX以及其他Plug-in

百度文库-让每个人平等地提升自我

7

媒体文件。而且Dreamweaver8具有强大的多媒体处理功能，在设计DHTML（Dynamic

HTML，动态HTML）和CSS(CascadingStyleSheets,层叠样式表)方面表现的极为

出色，它利用JavaScript和DHTML语言代码轻松实现网页元素的动作和交互操作，

产生完美的网页效果。

PHP

PHP，一个嵌套的缩写名称，是英文超级文本预处理语言（PHP:Hypertext

Preprocessor）的缩写。PHP是一种HTML内嵌式的语言，是一种在服务器端执

行的嵌入HTML文档的脚本语言，语言的风格有类似于C语言，现在被很多的网站

编程人员广泛的运用。PHP独特的语法混合了C、Java、Perl以及PHP自创新

的语法。它可以比CGI或者Perl更快速的执行动态网页。用PHP做出的动态页

面与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比

完全生成HTML标记的CGI要高许多；与同样是嵌入HTML文档的脚本语言

JavaScript相比，PHP在服务器端执行，充分利用了服务器的性能；PHP执行引擎

还会将用户经常访问的PHP程序驻留在内存中，其他用户再一次访问这个程序时

就不需要重新编译程序了，只要直接执行内存中的代码就可以了，这也是PHP高

效率的体现之一。PHP具有非常强大的功能，所有的CGI或者JavaScript的功能

PHP都能实现，而且支持几乎所有流行的数据库以及操作系统[4]。

2.2.1PHP与传统静态页面的区别

把信息系统纳入Internet/Intranet的框架之后,首先要解决的问题是通过

网页访问后台数据库信息。所有应用程序都被分割为页面的形式,用户的交互操作

是以提交表单等方式来实现的,这就要求Web站点具有很强的动态数据发布能力。

然而,目前Web的服务,仍以提供"静态"主页内容为主。所谓"静态",指的就是站

点的主页内容是"固定不变"的,无法根据用户的需求和实际情况作出相应的变化。

当浏览器通过Internet的HTTP协议向站点的Web服务器申请主页时,站点服务器

就会将已设计好的静态的HTML文件传送给浏览器。若要更新主页的内容,只能用

非在线的手动方式更新HTML的文件数据。

PHP所设计出的是动态主页,可接收用户提交的信息并作出反应,其中的数据

可随实际情况而改变,无须人工对网页文件进行更新即可满足应用需要。例如:当

在浏览器上填好表单并提交HTTP请求时,可以要求在站点服务器上执行一个表单

所设定的应用程序,而不只是一个简单的HTML文件。该应用程序分析表单的输入

数据,根据不同的数据内容将相应的执行结果(通常是数据库查寻的结果集)以

HTML的格式传送给浏览器。数据库的数据可以随时变化,而服务器上执行的应用程

序却不必更改,客户端得到的网页信息会始终保持新鲜的魅力[2]。

2.2.2PHP的特性

开放的源代码：所有的PHP源代码事实上都可以得到。

百度文库-让每个人平等地提升自我

8

基于服务器端：由于PHP是运行在服务器端的脚本,可以运行在UNIX、LINUX、

WINDOWS下。

嵌入HTML：因为PHP可以嵌入HTML语言，所以学习起来并不困难。

简单的语言：PHP坚持脚本语言为主，与Java和C++不同。

效率高：PHP消耗相当少的系统资源。

图像处理：用PHP动态创建图像

面向对像：在php4,php5中，面向对象方面都有了很大的改进，现在php完

全可以用来开发大型商业程序。

PHP相对于其他语言，编辑简单，实用性强，更适合初学者[2]。

2.2.3PHP的功能

PHP在数据库方面的丰富支持，也是它迅速走红的原因之一，它支持下列的数

据库或是资料表：AdabasDDBAdBadbmfileProInformixInterBamSQL

MicrosoftSQLServerMySQLSolidSybaODBCOracle8OraclePostgreSQL

而在Internet上它也支持了相当多的通讯协议(protocol)，包括了与电子邮件

相关的IMAP，POP3；网管系统SNMP；网络新闻NNTP；帐号共用NIS；全球信

息网HTTP及Apache服务器；目录协议LDAP以及其它网络的相关函数。除此

之外，用PHP写出来的Web后端CGI程序，可以很轻易的移植到不同的系统平

台上。例如，先以Linux架的网站，在系统负荷过高时，可以快速地将整个系统

移到SUN工作站上，不用重新编译CGI程序。面对快速发展的Internet，这是

长期规划的最好选择。在加入其它的模块之后，提供了更多样的支持如下：英文

拼写检查BC高精确度计算公元历法PDF文件格式Hyperwave服务器图形处

理编码与解码功能哈稀处理WDDX功能qmail与vmailmgr系统压缩文件处

理XML解析除此之外，一般语言有的数学运算、时间处理、文件系统、字符串

处理、行程处理等功能[3]。

2.2.4IIS环境下PHP的安装、配置与调试

1．PHP的安装如图2-2

图2-2

2．配置PHP如图2-3

图2-3

百度文库-让每个人平等地提升自我

9

单击“添加”按钮进行应用程序扩展名的映射，浏览可执行文件为已安装PHP

目录下的“”，同时“扩展名”为“.php”。如图2-4

图2-4

3．调试PHP

打开文本编辑器，输入代码

<?php

phpinfo();

?>

将该文件保存在已定义的文件夹内，并输入保存文件名如图2-5

图2-5

Mysql

MySQL是一个小型关系型数据库管理系统。

2.3.1Mysql简介

MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、

总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体

拥有成本而选择了MySQL作为网站数据库。

MySQL最初的开发者的意图是用mSQL和他们自己的快速低级例程(ISAM)去连

接表格。不管怎样，在经过一些测试后，开发者得出结论：mSQL并没有他们需要

的那么快和灵活。这导致了一个使用几乎和mSQL一样的API接口的用于他们的数

据库的新的SQL接口的产生，这样，这个API被设计成允许为用于mSQL而写的第

三方代码更容易移植到MySQL[1]。

2.3.2Mysql的特性[2]

1.使用C和C++编写，并使用了多种编译器进行测试，保证源代码的可移植性

2.支持AIX、FreeBSD、HP-UX、Linux、MacOS、NovellNetware、OpenBSD、

OS/2Wrap、Solaris、Windows等多种操作系统

3.为多种编程语言提供了API。这些编程语言包括C、C++、Eiffel、Java、

Perl、PHP、Python、Ruby和Tcl等。

4.支持多线程，充分利用CPU资源

5.优化的SQL查询算法，有效地提高查询速度

百度文库-让每个人平等地提升自我

10

6.既能够作为一个单独的应用程序应用在客户端服务器网络环境中，也能够

作为一个库而嵌入到其他的软件中提供多语言支持，常见的编码如中文的GB2312、

BIG5，日文的Shift_JIS等都可以用作数据表名和数据列名

7.提供TCP/IP、ODBC和JDBC等多种数据库连接途径

8.提供用于管理、检查、优化数据库操作的管理工具

2.3.3Mysql的安装

运行mysql5.0.27的安装文件出现如下图2-6界面

图2-6

其他工具

除了PHP和MYSQL、DW外，网站的设计与开发还会用到其他软件。

2.4.1PhotoShop

Photoshop是Adobe公司推出的一款功能十分强大、使用范围广泛的平面图像

处理软件。目前Photoshop是众多平面设计师进行平面设计，图形、图像处理的

首选软件。

1．菜单栏

Photoshop菜单栏中菜单命令包括了Photoshop大部分操作命令，与使用其他

Windows应用软件的菜单命令一样，直接用鼠标单击菜单栏，在打开的菜单中选择

菜单命令即可，如图2-7

图2-7

2．状态栏的使用

当Photoshop屏幕上出现图像编辑窗口时，状态栏主要显示三个部分的内容：

左侧部分显示当前图像缩放的百分比，中间部分为图像文件信息，左侧部分为当

前使用工具的说明，如图2-8。

图2-8

3．工具箱的使用

Photoshop提供了一个集画图、编辑、颜色选择、屏幕视图等操作于一体的工

具盘。有效利用工具盘是提高Photoshop操作效率的捷径。

选择缺省工具的方法是,用鼠标左键直接在工具盘上单击所需工具图标。

在工具箱中,如果工具图标右下方有一个小三角,表示该工具图标中还隐藏着

百度文库-让每个人平等地提升自我

11

其他工具图标。选择隐藏工具的方法是:将鼠标移到隐藏工具所在的图标上,按下

鼠标左键不松手,将会出现隐藏工具选项,将鼠标移到所需工具图标上松开鼠标,

就可以选择该工具。当选择工具后,图像上的光标将变为工具状。

4．面板组的显示与控制

在缺省状态下,Photoshop提供三个面板组给我们在操作中编辑、查询，每一

组中都包含三个以上的面板,它们是“导航器/信息/选项”，面板组、“颜色/色板/

画笔”,面板组和“图层/通道/路径/历史记录/动作”面板组。

使用下述方法之一可以选择面板：

(1)在打开的面板组中,用鼠标单击所选面板的标签。

(2)选择“窗口,,菜单栏下的显示或隐藏某面板项。

使用下述方法之一可以控制显示或隐藏面板组：

(l)反复按【TAB】键,可以控制显示或隐藏面板组及工具盘。

(2)反复按【SHIFT＋TAB】键,可以控制显示或隐藏面板组。

每个面板组右上角都有一个三角图标,单击它可以打开面板菜单,从而调整面

板选项;而通过拖曳面板组右下角边框,可以改变面板组的大小。

2.4.2CSS技术[3]

CSS（CascadingStylesheets，层叠样式表）是一种制作网页的新技术，现在

已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能

够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，

大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时，CSS

简直象是神对我们的恩赐！

CSS（CascadingStylesheets，层叠样式表）是一种制作网页的新技术，现

在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。

W3C（TheWorldWideWebConsortium）把动态HTML（DynamicHTML）分为

三个部分来实现：脚本语言（包括JavaScript、Vbscript等）、支持动态效果的

浏览器（包括InternetExplorer、NetscapeNavigator等）和CSS样式表。

一、层叠样式表的特点

且不说过去的网页缺少动感，就是在网页内容的排版布局上也有很多困难，

如果不是专业人员或特别有耐心的人，很难让网页按自己的构思和创意来显示信

息。即便是掌握了HTML语言精髓的人也要通过多次地测试，才能驾驭好这些信息

的排版，过程十分漫长和痛苦。为了Internet的发展，让更多人早日踏足这个多

姿多彩的世界，新的HTML辅助工具呼之欲出。

样式表就是在这种需求下诞生的，它首先要做的是为网页上的元素精确地定位，

可以让网页设计者象导演一样，轻易地控制由文字、图片组成的演员们，在网页

这个舞台上按剧本要求好好地表演。

百度文库-让每个人平等地提升自我

12

其次，它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上

的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。

以前两者在网页上的分布是交错结合的，查看修改很不方便，而现在把两者分开

就会大大方便网页的设计者。内容结构和格式控制相分离，使得网页可以光由内

容构成，而将所有网页的格式控制指向某个CSS样式表文件。这样一来的好出表

现在两个方面：

第一，简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，

加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将

被只保存一次）。

第二，只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风

格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的

修改，大大减少了重复劳动的工作量，当你面对的是有数百个网页的站点时，CSS

简直象是神对我们的恩赐！

二、添加层叠样式表的方法

我们为网页添加样式表的方法有四种。

1．最简单的方法是直接添加在HTML的标识符（tag）里：

网页内容

举个例子：

CSS实例

代码说明：

用蓝色显示字体大小为10pt的“CSS实例”。尽管使用简单、显示直观，但是

这种方法不怎么常用，因为这样添加无法完全发挥样式表的优势“内容结构和格

式控制分别保存”。

2．添加在HTML的头信息标识符里：

type=”text/css”表示样式表采用MIME类型，帮助不支持CSS的浏览器过

滤掉CSS代码，避免在浏览器面前直接以源代码的方式显示我们设置的样式表。

但为了保证上述情况一定不要发生，还是有必要在样式表里加上注释标识符“”。

3．链接样式表

同样是添加在HTML的头信息标识符里：

百度文库-让每个人平等地提升自我

13

media=”screen”>

*.css是单独保存的样式表文件，其中不能包含

以@import开头的联合样式表输入方法和链接样式表的方法很相似，但联合样

式表输入方式更有优势。因为联合法可以在链接外部样式表的同时，针对该网页

的具体情况，做出别的网页不需要的样式规则。

需要注意的是：

•联合法输入样式表必须以@import开头。

•如果同时输入多个样式表有冲突的时候，将按照第一个输入的样式表对网页

排版。

•如果输入的样式表和网页里的样式规则冲突时，使用外部的样式表。

百度文库-让每个人平等地提升自我

14

2.4.3EditPlus

EditPlus是Internet时代的32位元文本编辑程序，HTML编辑及程序员的

Windows平台编辑器。它可以充分的替换写字板，它也提供网页作者及程序设计

师许多强悍的功能。

对於HTML、CSS、PHP、ASP、Perl、C/C++、Java、javascript及VBScript

的语法突显。当然，它也可以在自定义语法文件后扩充其他的程序语言。

嵌合网页浏览器作HTML页的预览，及FTP命令做本地文件上传到FTP服

务器。

其他功能还包括HTML工具栏、用户工具、行号、标尺、网址突显。自动完成、

剪贴文本、区块选取、强大的搜索与替换、多重撤消/重做、拼写检查、自定义

键盘快捷键、以及更多。

这个小工具也许只是记事本的增强版，但他的各项功能都是恰到好处，颜色

识别、多文本查找、文件对比等功能在实际编程中再实用不过。在我的开发过程

中倒是有一多半页面是用它编辑出来的。

第三章网站前台页面设计

这一部分是浏览者能直接接触到的部分，因此网页外观设计思路是所有前台页

面框架尽量一致，风格尽量统一，这样使浏览者在不同页面间跳转时有连续感。

功能设计的思路是最大程度利用数据库，网站功能精巧的集中在少数几个PHP页

面上，但通过这几个页面的不同组合跳转再从数据库读取数据能很轻松的演变出

成千上万个页面来。

整体规划

重点设计首页，首页做好后其他页面结构和风格与首页相同。结构方面每个页

面从数据库读取通用页首和页底，给人以页面之间的熟悉感。风格用CSS统一控

制字体颜色大小、超链接属性、表格背景边框等，各页面完全相同，如图3-1

图3-1

网站通用头部，如图3-2

图3-2

网站通用底部，如图3-3

图3-3

网站文章内容的跳转和栏目的链接主要通过以下几个部分实现

百度文库-让每个人平等地提升自我

15

1．点击文章标题可进入相关的文章内容页面

2．通过文章统计模块进入相应的文章页面

3．通过文章分类模块进入相应的文章页面

首页设计

首页框架设计

1．尽量精简

首页的作用好比一本书的封面，是为了吸引用户浏览你的网址内容。因此，

首页的设汁应以醒目为上、令人一目了然。切勿堆砌太多不必要的细节，或使画

面过于复杂。在首页上清楚列出几项要点以及主页内容即可。页面给人的第一观

感最为重要，尽管这是一个学院的网站，首页的好坏直接影响师生们对整个网站

的感受。

2．尽量简朴

首页上的图形应力求简朴，避免耽搁用户的时间。图像愈大、颜色愈深，传

送页面的时间愈长。这也并不是说要完全略去图像不用，只是要注意使用图像所

引起的效果。首页上的颜色最好不超过六十四种，页顶图像最好保持在大约

10KB(千字节)以下。切勿禁不住诱惑,觉得非要放入大幅的图画不可；应考虑只用

三两幅短小精悍的图像。首页整体上要能够迅速传送。如果载入的时间超过五至

十秒，很多用户就会等得不耐烦。

3．使首页易于漫游

首页的其中一个主要功能是作为漫游工具，指引用户查阅你存储在网址或其他

地点的信息，尽量使漫游过程不费吹灰之力。基于清晰明确和速度的考虑，首页

上的链接项目应只限于几个高级的类别。另外，所提供的信息不应埋藏在重重叠

叠的页面之下。穿越五个以上的联接项目已足以令人厌烦。因此，必须在广度和

深度之间求取平衡。

首页PHP代码设计

各模块构成：

1．文章简介模块

2．文章统计模块

3．文章分类模块

分页显示页面设计

分页显示页面功能设计

本页面的主要功能是将文章按每页指定数量显示出来，并实现上下页翻页功能

进行查找，这在文章总数达到一点数量的时候非常有用。页面框架与前面的首页

百度文库-让每个人平等地提升自我

16

基本相同，主体部分顶端和底端都显示当前栏目名称，中间是本栏目下的全部文

章，如果文章总数超过6篇则只显示前6篇，同时“下页”的链接生效，点击后

即可显示下面6篇文章。本页实现效果如下图3-4所示。

图3-4

文章显示页面设计

文章内容页面主要是利用url参数获得文章id编号，如果编号正确并且文章

有效则显示文章主体内容，及读出数据库中id对应的posts字段下的内容并显示。

值得一提的是文档主体右边的“文章统计分类”和“文章分类”及文章底部的“相

关文章”，文章分类自动全站文章的分类，访问者可根据喜欢查看有关的类别文章

以获得自己想要的内容，而相关文章更是利用数据库定义的关键字自动读取

keywords相近的5篇文章，在查找同类文章时非常有用。

用户登录页面设计

用户可以在网站的管理入口输入用户名和密码登录网站，登陆网站之后就能发

表博文、管理来访者的留言、管理友情链接等。

用户登录页面由表单添加用户名和密码文本框以及登录按钮，通过“用户登录”

选项将用户输入的用户名和密码和后台数据库中表urs中的用户名和密码相对

应，如果正确则转到登录成功页面，否则转到登录失败页面。同时提供忘记密码

模块的链接入口。

第四章网站后台功能设计

这一部分是网站管理员经常接触的内容，网站后台是管理员添加更改网站内

容和进行综合设置的地方，后台功能设计好坏直接关系到网站整体功能的强弱和

网站使用的效率，从技术角度上讲他不像前台那样只需要从数据库中读取数据，

而是要先定义好数据库内容，再对数据库进行数据的添加、更改、删除等综合操

作，因此它与前台相比要更复杂，也需要投入更多的时间和精力。

整体规划

首先需要用户名和密码才能登陆，管理员进入后台后，可进行“文章管理”，

“分类管理”、“评论管理”、“标签管理”、“链接管理”，及数据库的备份与恢复操

作，如图4-1

图4-1

百度文库-让每个人平等地提升自我

17

数据库结构设置

动态PHP站点的运行必须以数据库支持运作，因此数据库的设计极为重要。本

网站的数据库按不同需求建立了以下表，并根据各个表的需要设立了不同字段。

数据表的总体结构如下图4-2：

图4-2

按照功能大致分为五类。

Ur：用户信息，包括urs表和urmeta表。

link：链接信息，包括links表。

post:文章及评论信息，包括posts、postmeta、comments。

category,link_category,tag:这个是比较复杂的信息模块，它包含了对分

类，链接分类，标签的管理，包括term，term_relationships和term_taxonomy

表。

option:全局设置信息，包括options表。

posts

作为一个博客系统，最核心的当然是博主发表的一些“文章”了，这些“文

章”存放的地方就是这个posts表了。注意，这里所说的“文章”是加引号的，

因为这个表里存放的除了普通的文章之外，还有附件和页面（page）的一些信息。

表里面的post_type这个字段就是用来标示类型的。还有一点需要注意的就是，

这个表里一些字段是针对于post_type的特定类型的，比如menu_order这个字

段是“页面（page）”特有的，用来指定“页面”的顺序。post_mime_type是针

对附件的，来指定附件的类型。

postmeta

每篇文章的属性是不可能仅仅用posts表里的那几个字段来完全标示的，往

往还有一些因人而异的属性：写这篇文章时候的心情，地点等等。这些属性的名

称和值类型都是不确定的，因此，采用了元信息(meta)来表示它们。这个表很简

单，只有meta_id,post_id,meta_key,meta_value这四个字段。post_id是

相关post的id。我们注意到meta_value是longtext类型的，这里仅是用来

存储值。

在撰写文章的时候，编辑框下面有一个CustomFields的选项，我们可以在

这里添加post的meta信息。

百度文库-让每个人平等地提升自我

18

comments

用户评论。除了评论的内容以外，还记录了评论用户的名字，邮箱，网址，

浏览器类型等信息。比较重要的两个字段是comment_post_ID和

comment_approved，前一个用来指示这条评论隶属于哪一篇文章，后一个用来记

录审核状况。还有一个比较有意思的是这个commnet_agent字段，我们可以利用

这个字段来统计一下用户浏览器类型。

urs

用户帐号表。存储用户名、密码还有一些用户的基本信息。

urmeta

类似上面的postmeta，存储一些因人而异的用户信息。（比如QQ？ICQ？）

options

用来记录博客的一些设置和选项。里面有一个blog_id字段。

links

用来存储Blogroll里面的链接。

terms

记录分类，链接分类，标签的一些简要信息，包括名称，缩写。

term_taxonomy

是对terms中的信息的关系信息补充，有所属类型

（category,link_category,tag），详细描述，父类，所拥有文章（链接）数量。

term_relationships

关系表，多对多的，object_id是与不同的对象关联，例如posts中的ID（links

中的link_id）等，term_taxonomy_id就是关联term_taxonomy中的

term_taxonomy_id。

term_relationships中的term_order；

terms中的term_group，option。

用户登陆模块设计

管理员通过进行后台登录，提交数据后与数据库建立连接，查询数据库中是否

有对应的用户存在，如果有则进入后台，如果用户名或密码错误就返回登录界面，

如图4-3

图4-3

登录页面代码设计

functionlogin_header($title='Login',$message='',$error=''){

global$error;

百度文库-让每个人平等地提升自我

19

if(empty($error))

$error=newError();"n";

$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);

exit();

}//如果验证成功则进入后台管理界面，后台地址使用定义的变量获取地址

文章管理模块设计

文章管理模块包含了搜索文章、按文章发表时间显示、按类别显示、对文章的

编辑、删除、修改、状态的管理和按分页显示文章列表，通过传递ID值调用相

应的文章。如图4-4

图4-4

链接管理模块设计

通过后台的链接管理模块，管理员可轻松的添加、删除和修改前台的友情链接

部分。如图4-5

图4-5

分类管理模块设计

分类管理模块包含了搜索分类、对分类的添加、编辑、删除、修改的管理和按

分页显示分类列表，通过传递ID值调用相应的分类。如图4-6

图4-6

标签管理模块设计

标签主要是管理发表博客时所使用到的关键词，通过此模块可以实现对标签的

编辑、修改、添加、删除等操作，并以分页的方式显示。如图4-7

图4-7

标签管理代码设计

<?phpprintf(__('管理标签(添加新标签)'),'#addtag')?>

<?phpel:?>

<?php_e('管理标签')?>

百度文库-让每个人平等地提升自我

20

<?phpendif;?>

<?php_e('搜索标签

');?>:

attribute_escape(stripslashes($_GET['s']));?>"/>

"class="button"

/>

<?php

$page_links=paginate_links(array(

'ba'=>add_query_arg('pagenum','%#%'),

'format'=>'',

'total'=>ceil(count_terms('post_tag')/$tagsperpage),

'current'=>$pagenum

));//标签分类显示，超过20条就以分页的方式显示

"name="deleteit"

class="button-condarydelete"/>

<?phpnonce_field('bulk-tags');?>