个人博客网站设计Word下载.docx

1、第一批中文博客是在2002年出现的，早些时候博客只是一个新的网络名词并无特殊之处，。就在不经意间，博客竟如雨后春笋般冒出来，博得越来越多网民的欢心，并在互联网上引发了一股博客热潮。博客的发展现状呈现出以下特点：发展速度惊人；从精英向大众人群迅猛扩展；博客人群主体更加多元化；博客服务商激增，出现群雄争霸局面；博客资源争夺激烈，博客服务商面临市场洗牌。博客发展到今天已经取得了相当规模的成就，以新浪、搜狐、网易为代表的三大门户网站都已经推出了自己的博客服务，还有一些著名的专业博客网站都已经对博客资源展开了激烈的争夺。在规模扩大的同时博客技术也在不断的进步和完善，目前博客技术已经取得的成果包括：发表日

2、志，发表评论，相册等一些通用功能。 拥有一个完全独立的博客就必须要有一个适合个人的博客网站，用户可根据自己的实现想法和需求而改变博客的结构、色彩等，是自己完全可控的，本站就是为实现这一目的而设计。1.2网站实现功能（1）管理内容：为个人博主提供博客的内容管理平台，提供日志、留言、评论、链接、四大类的信息管理内容。除评论外，每种信息均可自行管理信息分类，以及管理这种信息。（2）阅读博客：系统首页为博客访问者提供了博客分类列表，浏览者可以选择自己喜欢的博客专题。另外首页还包括最新日志列表、访问率最高的日志列表、评论最多的博文、热点关键词等。（3）系统功能页面： 日志和博客关键字搜索，列出日志、评论

3、、留言的总数、友情链接的管理等。 网站首页模块图1-1一个网站最重要的是首页，如图1-1一般正规的网站所有的子页都在首页有链接或体现，所以网站首页模块也反应了网站中大部分页面的功能。1通用页面头部和通用页底为了保持网站风格统一和修改的方便，把每页都出现的通用页首和页底做成独立的文件，并与mysql数据库相连，方便更容易的更改页首页底内容。2首页博文首页博文显示最新发表的6篇文章的简介，访客可以通过简介了解大致的文章内容。3最新按类统计模块这一模块实现按类进行统计，向访问展示了本站发表的文章的情况，可以了解到最新发表的文章、最新访客的评论、热门文章和热评文章。4分类模块站内的内容按不同的类别归属

4、于某一个大类，访问可以根据分类来更方便的阅读感兴趣的方面。5云标签模块本站使用了云标签功能，发表的每篇文章都可以设置多个关键词，在首页可以将本站最热的关键词显示在最前，这样就方便查看相关的文章。6友情链接可以将网友的相关博客或自己感兴趣的网站做链接，提高交互性，后台可以对友情链接进行管理。7搜索功能可以提供全站文章的搜索功能。 网站特点介绍1全动态设计 整个网站基本没有静态内容，而是用几个网页框架读取数据库信息，网站的日常维护乃至高级维护都不需要借助网页编辑工具，只需要在浏览器上即可完成。2独立的前后台设计前台只管读取数据库，后台只管编辑数据库，两者分工不同在操作上完全独立，而通过数据库有把前

5、后台紧密的连接在一起。3分工明确的模块功能文章模块、分类模块、云标签模块、友情链接模块、文章统计模块、搜索模块每个模块只完成他所要完成的事情，设计清楚，操作简单。4高度模板化的页面设计网站前台的核心页面只有四个，但是就是通过这四个页面的不同组合可以把所有信息展现在浏览者面前。5统一的页面风格所有页面都使用相同的CSS所以整体风格保持一直，通用页面在设计上框架也基本保持一致，使网站的整体感很强。6单用户模块因为是设计成个人博客系统，所以本站只能单用户使用，使用更专一。第二章 网站建设工具介绍页面框架设计：Dreamweaver 8页面图片处理：PhotoShop CS2网页脚本语言：PHP页面风

6、格控制：CSS编程调试工具：EditPlus后台数据库： mysql网站架设平台：Windows Server 2003 + IIS + PHP -5.2.0 Dreamweaver 8Dreamweaver 8是由美国著名多媒体软件开发厂商Macromedia公司推出的一套专业可视化网页开发工具。它与该公司的另外两个网页制作软件Flash、Fireworks并称“DreamTeam”。其中Flash用来生成矢量动画；Fireworks完成Web图像制作；而Dreamweaver则进行各类素材的集成和发布。Dreamweaver 8提供了强大的可视化编辑功能来确保高质量网页的完成，设计环境使用

7、CSS样式表来进行网页样式的统一管理，可以迅速高效地开发出代码简洁、专业规范的站点。同时，Dreamweaver 8还提供了许多与编程相关的工具和功能，并且，借助Dreamweaver 8还可以使用服务器语言（例如ASP、JSP ColdFusion标记语言和PHP）生成支持动态数据库的Web应用程序。2.1.1 Dreamweaver 8简介1DreamWeaver 8界面Dreamweaver 8的工作界面包括：标题栏、菜单栏、工具栏、文档窗口、上下文菜单、标签选择器、状态栏、属性检查器、面板组等。2Dreamweaver 8安装坏境Dreamweaver 8虽然使用上与Dreamweav

8、er MX 2004基本相同，但Dreamweaver 8对需要安装的计算机所实用的系统提出了更高的要求，最基本的配置是：800 MHz Intel Pentium III处理器（或同等处理器）以及更高频率的处理器、Windows 2000或Winwows XP、256MB RAM、1024*768,16位显示器以及650MB以上可用磁盘空间。3Dreamweaver 8新增功能Dreamweaver 8相对于其前期版本，其包含了许多新功能。这些功能的增加使得软件的易用性得到了改善，也更方便了网页设计、网站开发的工作，新增功能包括缩放功能、“样式呈现”工具栏、对XML数据进行可视化操作、CSS

9、布局的可视化、代码折叠功能以及插入Flash视频等。2.1.2 Dreamweaver 8的特点1灵活的编写方式Dreamweaver 8具有灵活编写网页的特点，将“设计”和“代码”编辑器合二为一，在设计窗口中精化源代码，使用户能够按工作的需要定制自己的用户界面，并且利用一些浮动窗口，用鼠标单击的方式插入图像、表格、表单、应用程序、脚本语言等各种对象，同时也提供对代码的编辑，包括样式表和JavaScript脚本。2可视化的编辑界面Dreamweaver 8是一种所见即所得的HTML编辑器，可以实现页面元素的插入和生成。可视化编辑环境大量减少了代码的编写，同时也保证了其专业性和兼容性，并且可以对

10、内部的HTML编辑器和任何第三方的HTML编辑器进行实时的访问。无论用户习惯手工输入HTML源代码还是使用可视化的编辑界面，Dreamweaver 8都将提供便捷的方式使用户设计网页和管理网站变得更容易。3功能更多的CSS支持、CSS的可视化设计、CSS检查工具CSS样式一直都是网页制作的一个重要环节，网页文本字体、颜色，图像的位置等外观设置都可以通过CSS样式表来控制。Dreamweaver 8中有强大的CSS样式表编辑器，使用者可以利用CSS面板上的功能按照要求，非常轻松地编辑出自己满意的CSS样式，从而达到美化网页外观的效果。4强大的Web站点管理功能用户自定义控制不仅可以迅速完成个人页

11、面以及站点的设计，而且Dreamweaver 8的Roundtrip HTML/JavaScript行为库以及模板和标签功能也非常适合大型网站的合作开发，通过与其他群组产品的配合使用以及众多第三方支持可轻松完成动态发布电子商务网站的构建。FTP安全保障，是Dreamweaver 8新增功能之一，所有传输的文件完全加密，并阻止越权存取你的信息、文件内容、用户名和口令。5内建的图形编辑引擎修剪、改变大小、尺寸、旋转角度、调节明暗度都不需要离开Dreamweaver 8环境，因为它本身集成了Macromedia Fireworks的基本图形编辑技术，这是以往版本所没有的功能，如图2-1所示。图2-1

12、内建的图形编辑引擎功能6Dreamweaver 8的集成特性Dreamweaver 8继承了Fireworks、Flash和Shockwave的集成特性，可以在这些Web创作工具之间自由地进行切换，轻松地创建美观实用的网页。7丰富的媒体支持能力可以方便地在网页中加入Java、Flash、Shockwave、ActiveX以及其他Plug-in媒体文件。而且Dreamweaver 8具有强大的多媒体处理功能，在设计DHTML（Dynamic HTML，动态HTML）和CSS（Cascading Style Sheets,层叠样式表）方面表现的极为出色，它利用JavaScript和DHTML语言代

13、码轻松实现网页元素的动作和交互操作，产生完美的网页效果。 PHPPHP，一个嵌套的缩写名称，是英文超级文本预处理语言（PHP:Hypertext Preprocessor）的缩写。PHP 是一种 HTML 内嵌式的语言，是一种在服务器端执行的嵌入HTML文档的脚本语言，语言的风格有类似于C语言，现在被很多的网站编程人员广泛的运用。PHP 独特的语法混合了 C、Java、Perl 以及 PHP 自创新的语法。它可以比 CGI 或者 Perl 更快速的执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；

14、与同样是嵌入HTML文档的脚本语言JavaScript相比，PHP在服务器端执行，充分利用了服务器的性能；PHP执行引擎还会将用户经常访问的PHP程序驻留在内存中，其他用户再一次访问这个程序时就不需要重新编译程序了，只要直接执行内存中的代码就可以了，这也是PHP高效率的体现之一。PHP具有非常强大的功能，所有的CGI或者JavaScript的功能PHP都能实现，而且支持几乎所有流行的数据库以及操作系统4。2.2.1 PHP与传统静态页面的区别把信息系统纳入Internet/Intranet 的框架之后,首先要解决的问题是通过网页访问后台数据库信息。所有应用程序都被分割为页面的形式,用户的交互操

15、作是以提交表单等方式来实现的,这就要求Web 站点具有很强的动态数据发布能力。然而,目前Web的服务,仍以提供 静态主页内容为主。所谓静态,指的就是站点的主页内容是固定不变的,无法根据用户的需求和实际情况作出相应的变化。当浏览器通过Internet的HTTP协议向站点的Web服务器申请主页时,站点服务器就会将已设计好的静态的HTML文件传送给浏览器。若要更新主页的内容, 只能用非在线的手动方式更新HTML的文件数据。 PHP所设计出的是动态主页,可接收用户提交的信息并作出反应, 其中的数据可随实际情况而改变,无须人工对网页文件进行更新即可满足应用需要。例如:当在浏览器上填好表单并提交HTTP请

16、求时,可以要求在站点服务器上执行一个表单所设定的应用程序,而不只是一个简单的HTML文件。该应用程序分析表单的输入数据,根据不同的数据内容将相应的执行结果（通常是数据库查寻的结果集）以HTML的格式传送给浏览器。数据库的数据可以随时变化,而服务器上执行的应用程序却不必更改,客户端得到的网页信息会始终保持新鲜的魅力2。2.2.2 PHP的特性开放的源代码：所有的PHP源代码事实上都可以得到。基于服务器端：由于PHP是运行在服务器端的脚本,可以运行在UNIX、LINUX、WINDOWS下。嵌入HTML：因为PHP可以嵌入HTML语言，所以学习起来并不困难。简单的语言：PHP坚持脚本语言为主，与Ja

17、va和C+不同。效率高：PHP消耗相当少的系统资源。图像处理：用PHP动态创建图像面向对像：在php4,php5 中，面向对象方面都有了很大的改进，现在php完全可以用来开发大型商业程序。PHP 相对于其他语言，编辑简单，实用性强，更适合初学者2。2.2.3 PHP的功能PHP 在数据库方面的丰富支持，也是它迅速走红的原因之一，它支持下列的数据库或是资料表：Adabas D DBA dBase dbm filePro Informix InterBase mSQL Microsoft SQL Server MySQL Solid Sybase ODBC Oracle 8 Oracle Post

18、greSQL 而在 Internet 上它也支持了相当多的通讯协议 （protocol），包括了与电子邮件相关的 IMAP， POP3；网管系统 SNMP；网络新闻 NNTP；帐号共用 NIS；全球信息网 HTTP 及 Apache 服务器；目录协议 LDAP 以及其它网络的相关函数。除此之外，用 PHP 写出来的 Web 后端 CGI 程序，可以很轻易的移植到不同的系统平台上。例如，先以 Linux 架的网站，在系统负荷过高时，可以快速地将整个系统移到 SUN 工作站上，不用重新编译 CGI 程序。面对快速发展的 Internet，这是长期规划的最好选择。在加入其它的模块之后，提供了更多样的

19、支持如下：英文拼写检查 BC 高精确度计算 公元历法 PDF 文件格式 Hyperwave 服务器 图形处理 编码与解码功能 哈稀处理 WDDX 功能 qmail 与 vmailmgr 系统 压缩文件处理 XML 解析 除此之外，一般语言有的数学运算、时间处理、文件系统、字符串处理、行程处理等功能 3。2.2.4 IIS环境下PHP的安装、配置与调试1PHP的安装如图2-2图2-22配置PHP如图2-3图2-3单击“添加”按钮进行应用程序扩展名的映射，浏览可执行文件为已安装PHP目录下的“”，同时“扩展名”为“.php”。如图2-4图2-43调试PHP打开文本编辑器，输入代码将该文件保存在已定

20、义的文件夹内，并输入保存文件名如图2-5图2-5 Mysql MySQL是一个小型关系型数据库管理系统。2.3.1 Mysql简介MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。MySQL最初的开发者的意图是用mSQL和他们自己的快速低级例程（ISAM）去连接表格。不管怎样，在经过一些测试后，开发者得出结论：mSQL并没有他们需要的那么快和灵活。这导致了一个使用几乎和mSQL一样的API接口的用于他们的数据库的新的SQL接口的产生，这样，这个API被设

21、计成允许为用于mSQL而写的第三方代码更容易移植到MySQL1。2.3.2 Mysql的特性21.使用C和C+编写，并使用了多种编译器进行测试，保证源代码的可移植性 2.支持AIX、FreeBSD、HP-UX、Linux、Mac OS、Novell Netware、OpenBSD、OS/2 Wrap、Solaris、Windows等多种操作系统 3.为多种编程语言提供了API。这些编程语言包括C、C+、Eiffel、Java、Perl、PHP、Python、Ruby和Tcl等。4.支持多线程，充分利用CPU资源 5.优化的SQL查询算法，有效地提高查询速度 6.既能够作为一个单独的应用程序应用

22、在客户端服务器网络环境中，也能够作为一个库而嵌入到其他的软件中提供多语言支持，常见的编码如中文的GB 2312、BIG5，日文的Shift_JIS等都可以用作数据表名和数据列名7.提供TCP/IP、ODBC和JDBC等多种数据库连接途径 8.提供用于管理、检查、优化数据库操作的管理工具 2.3.3 Mysql的安装运行mysql5.0.27的安装文件出现如下图2-6界面图2-6 其他工具除了PHP和MYSQL、DW外，网站的设计与开发还会用到其他软件。2.4.1 PhotoShopPhotoshop是Adobe公司推出的一款功能十分强大、使用范围广泛的平面图像处理软件。目前Photoshop是

23、众多平面设计师进行平面设计，图形、图像处理的首选软件。1菜单栏Photoshop菜单栏中菜单命令包括了Photoshop大部分操作命令，与使用其他Windows应用软件的菜单命令一样，直接用鼠标单击菜单栏，在打开的菜单中选择菜单命令即可，如图2-7图2-72状态栏的使用当Photoshop屏幕上出现图像编辑窗口时，状态栏主要显示三个部分的内容：左侧部分显示当前图像缩放的百分比，中间部分为图像文件信息，左侧部分为当前使用工具的说明，如图2-8。图2-83工具箱的使用Photoshop提供了一个集画图、编辑、颜色选择、屏幕视图等操作于一体的工具盘。有效利用工具盘是提高Photoshop操作效率的捷

24、径。选择缺省工具的方法是,用鼠标左键直接在工具盘上单击所需工具图标。在工具箱中,如果工具图标右下方有一个小三角,表示该工具图标中还隐藏着其他工具图标。选择隐藏工具的方法是:将鼠标移到隐藏工具所在的图标上,按下鼠标左键不松手,将会出现隐藏工具选项,将鼠标移到所需工具图标上松开鼠标,就可以选择该工具。当选择工具后,图像上的光标将变为工具状。4面板组的显示与控制在缺省状态下,Photoshop提供三个面板组给我们在操作中编辑、查询，每一组中都包含三个以上的面板,它们是“导航器/信息/选项”，面板组、“颜色/色板/画笔”,面板组和“图层/通道/路径/历史记录/动作”面板组。使用下述方法之一可以选择面板

25、：（1）在打开的面板组中,用鼠标单击所选面板的标签。（2）选择“窗口,菜单栏下的显示或隐藏某面板项。使用下述方法之一可以控制显示或隐藏面板组：（l）反复按【TAB】键,可以控制显示或隐藏面板组及工具盘。（2）反复按【SHIFTTAB】键,可以控制显示或隐藏面板组。每个面板组右上角都有一个三角图标,单击它可以打开面板菜单,从而调整面板选项;而通过拖曳面板组右下角边框,可以改变面板组的大小。2.4.2 CSS技术3CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码，

26、加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐！ CSS（Cascading Stylesheets，层叠样式表）是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。W3C（The World Wide Web Consortium）把动态HTML（Dynamic HTML）分为三个部分来实现：脚本语言（包括JavaScript、Vbscript等）、支持动态效果的浏览器（包括Internet Explorer、Netscape Navigator等）和CSS样

27、式表。一、层叠样式表的特点 且不说过去的网页缺少动感，就是在网页内容的排版布局上也有很多困难，如果不是专业人员或特别有耐心的人，很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试，才能驾驭好这些信息的排版，过程十分漫长和痛苦。为了Internet的发展，让更多人早日踏足这个多姿多彩的世界，新的HTML辅助工具呼之欲出。样式表就是在这种需求下诞生的，它首先要做的是为网页上的元素精确地定位，可以让网页设计者象导演一样，轻易地控制由文字、图片组成的演员们，在网页这个舞台上按剧本要求好好地表演。 其次，它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上

28、的内容结构，而为了让浏览者更好地看到这些信息，就要通过格式控制来帮忙了。以前两者在网页上的分布是交错结合的，查看修改很不方便，而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离，使得网页可以光由内容构成，而将所有网页的格式控制指向某个CSS样式表文件。这样一来的好出表现在两个方面： 第一，简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。 第二，只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，大大减少了重复劳动的工作量，当你面对的是有数百个网页的站点时，CSS简直象是神对我们的恩赐！二、添加层叠样式表的方法 我们为网页添加样式表的方法有四种。 1最简单的方法是直接添加在HTML的标识符（tag）里： 网页内容 举个例子： p style=”color: blue;