目录

用Dreamweaver MX打造自已的Blog-目录

一.数据库的建立 |  |
 | 对界面进行分析1 | 对界面进行分析2
 | 建立数据库 | 保存数据库
二.程序页面的制作 | 表单的制作 |
三.建立本地测试站点 | 建立本地测试站点 | 选择文件夹
四.建立数据连接 | 修改设计文件为程序 | 自定义连结字符串
五 .显示数据库中的内容 | 显示首页的制作 | 记录集的设置
 | 拖动记录集 | 重复记录集
 | 跳到相关页面 |
六.显示详细内容 | 显示数据 | 拖动记录集
七.添加日志 | 新建记录集 | 插入记录

欢迎各网站转载,传统媒体转载请与作者联系.否则一律视为侵权行为.
本书由雅洁设计(www.Yascool.com)之一线风(Atwind)独立成作
Copyright 2004-2005© YaStudio™, All rights reserved.
Author：Atwind 雅洁设计有限责任公司(WWW.YASCOOL.COM)


版权及说明文件

用Dreamweaver MX打造自已的Blog-前言
返回目录
本书由雅洁设计(www.Yascool.com)之一线风(Atwind)独立成作,欢迎各网站转载,传统媒体转载请与作者联系.否则一律视为侵权行为.

在去年的时候我说过要有新的电子书出来，本来是想写一本用Macromedia Dreamweaver MX打造
新闻系统的，可是后来发现网上有了，所以就一直没有写，但是很多网友都希望我们能
再出一本电子书，并且最好能有数据库。

前天晚我想了很多种方式，开始是想把网上的各种给整理一下，可是觉得这样的话版权就不好办了，最后想到，只有Blog还没有人教了做，并且现在的作品也不是很多,在中国站长站那儿大约有十几部作品,其中还有几部是ASP.Net的.好了,废话就说到这儿吧,我们今天就来讲讲怎么打造自已的Blog吧！

广告: 我们可以提供有关于设计方面的服务，目前我们主要提供为企业、单位、政府机关或者个人设计相关需要设计的项目，比如:"网站整体策划设计、平面广告CI设计、POP、产品包装、企业标志、企业形像识别系统（VI）、ICON界面设计、CG漫画卡通设计"等其它相关设计服务。
欢迎来信来电咨询

近期客户名单:
上海勤研电子有限公司
上海勤研电子有限公司
北京地大唱版有限公司

联系方式:
个人Email:Atwind@163.com
公司Email:Webmaster@yascool.com
固定电话:0371-3754631(周先生)
移动电话:13783638445(张先生)
Copyright 2004-2005© YaStudio™, All rights reserved.


对界面进行分析1

用Dreamweaver MX打造自已的Blog-对界面进行分析1
欢迎各网站转载,传统媒体转载请与作者联系.否则一律视为侵权行为.

一.数据库的建立

1.准备工作:

安好Macromedia Dreamweaver MX（用Macromedia Dreamweaver MX2004是一样的）、Win2000（当然WinXP也行）下的IIS5.0、Microsoft Access、当然还应具备相关的ASP知识。

关于IIS的建立请到我们网站的技术栏目里查找（具体地址是：十天学会ASP）

在做程序前，我们首先要把界面做好，这样才能根据界面来制作，

2.制作Blog程序的界面。

界面的制作需要网页设计能力，这不是本文的重点，因此我不做为重点来介绍，大家可以参考相关书籍，也可以用我设计的这个界面。

3.对界面进行分析。

做了快一天了，累死了，呵！！！先打会游戏吧！界面只设计了2个，还有几个主要的也要做出来才行！

等我们的界面设计出来了后就可以要据界面的内容来设计数据库了！然后就可以做成我们的ASP程序了！

日志详细内容样式如图
目录 说明 第一页 上一页 下一页 未页
Copyright 2004-2005? YaStudio?, All rights reserved.


对界面进行分析2

用Dreamweaver MX打造自已的Blog-对界面进行分析2

现在我们就来对一个日志进行分析，看它有那些元素，这样每一个元素（其实就是一个日志的相关属性）就会成为表中的一个字段。如图:

分析结果如下：

Blog属性 | 对应字段 | 数据类型
心情图片 | PICpath | (200) 200指的是我们用文本数据类型
标 题 | Title | (200) 如图
作 者 | Author | (30) 很少人的名字是15个汉字以上的
地 点 | Place | (50)
日 期 | AddData | (日期/时间)
天气情况 | Weahter | (30)
内 容 | Content | (备注)


建立数据库

用Dreamweaver MX打造自已的Blog-建立数据库

4.建立数据库

打开Microsoft Access新建一个空数据库,然后点设计出现设计视图后按下图设计:

在建立AddData字段时注意在默认值中写上＝Now() 如图下图:

这样就会在每建立一个新的Blog时自动填上日期和时间了（这里填上的时间是你IIS所在服务器的时间，因些如果服务器时间有问题，这儿也会有问题的。）


保存数据库

用Dreamweaver MX打造自已的Blog-保存数据库

4.保存数据库

好了，全部填完后就按Ctrl＋S来保存，这时ACCESS会提示你表的名称，填上Blog，然后会提示你必须要有一个关键字，用关键字来唯一标识每个Blog日志。在PICpath字段前面插入一行，然后填上ID。并标识为关键字就行了！关键字的数据类型用自动编号

好了，日志部分的表就建好了，如果你还要管理功能的话还要有个管理员的表，不过我们现在只是做个学习版的,所以在这儿不做管理员那块.

下图就是我们打开数据表Blog后的样子了！


表单的制作

用Dreamweaver MX打造自已的Blog-表单的制作

二.程序页面的制作:

1.表单的制作:

好了，现在就要开始做发布页面了，呵做个Blog的目的就是为了发表我们自已的想说的东西而已了！呵～ 这时要注意，点上面的表单，出现了下面的用红线框住的东东！这个可是必须的哟！如下图

表单的详细设计见下图:

表单中比如选择文字了，字体了，字色呀！URl 图片等属性都不用要，因为这个是我从别的地方抠下来的，然后改了改！当然如果你对JS和UBB很熟的话也可以加上。这儿为了尽量让大家明白我去掉了一些不必要的东西，等大家以后知道的多了后就会自然而然的加上去的。记得还要把Form的名字改成Blog


建立本地测试站点

用Dreamweaver MX打造自已的Blog-建立本地测试站点

三.建立本地测试站点:

因为是需要IIS所以要建立本地站点

1. 起名

如下图

2.选择语言

如下图


选择文件夹

用Dreamweaver MX打造自已的Blog-选择文件夹

3.选择文件夹

如下图

4.本地测试路径

如下图

5.下面的两步基本上不用改就行了，嘿～～～


修改设计文件为程序

用Dreamweaver MX打造自已的Blog-修改设计文件为程序

四.建立数据连接:

1.修改设计文件为程序文件

如图下图所示，到现在为止，我们建立了三个页面，首页(Index.htm)，详细页(Detail.htm )，发布页(Post.htm)，他们还都是ＨＴＭ格式的，所以还要改，才能用。新建三个同样的但是以ASP为后缀的文件将原设计界面各自拷到相应的页面上.

2.自定义连结字符串

我做的程序放在E:\do下面Blog.mdb是数据库所以我的连结字符串是如下的形式:

Driver={Microsoft Access Driver (*.mdb)};DBQ=e:\do\Blog.mdb

创建成功后就可以把数据库中的东东显示出来了！：）如下面三个图显示:


自定义连结字符串

用Dreamweaver MX打造自已的Blog-自定义连结字符串

经过上面的几步,我们的数据就就和当前的页面连结上了!:)


显示首页的程序制作

用Dreamweaver MX打造自已的Blog-显示首页的程序制作

五 .显示数据库中的内容:

1.显示首页中的内容

打开Index.asp,在中间填上一行暂无相关内容等样子的字符串。这样如果数据库中没有内容时就显示这一行，而不会提示出错，这个很重要，如下图:

2.建立记录集

点应用程序中的绑定下面的那个＋号，点记录集，如下图


记录集的设置

用Dreamweaver MX打造自已的Blog-记录集的设置

然后在弹出的对话框中做如下设置：如下图

名称：RS
连结：Conn 这个是你先前设的连结名，我用的是Conn
表格：Blog 这个是Blog内容的表名，我用的就是Blog
列： 可以全部的，也可以是选定的，在这儿我们选定ID、Title、AddData
筛选：这个不用管了
排序：ID 倒序 这样我们的Blog就会从我们最新的日志开始排列

好了这时可以点右边的测试，会出现没有数据，当然了，我们没有往里面加吗！：）

好，点确定再看看出现了什么。如下图展开记录集RS后出现了所示的样子，这样我们的记录集就建立成功了。


拖动记录集

用Dreamweaver MX打造自已的Blog-拖动记录集

3.拖动记录集里的每条记录:

现在把相关的记录“拖”到相应的位置上就行了^_^

A.当没有数据时显示的内容：
选中我们刚写上的那句“对不起，还没有内容”然后点服务器行为选项卡－》显示区域－》记录集如果为空则显示。如下图

B.当有数据时显示的内容：

回到绑定显项卡，把Title拖到相应的位置，同理AddData也拖一下，：）如下图023


重复记录集

用Dreamweaver MX打造自已的Blog-重复记录集

然后就是要显示多少条记录了，看看你的位置有多大，然后就可以重复多少记录了，如下两图

我的是重复了18条（为什么？我也不知，呵！反正就18条吧！）这时还有一个服务器行为要做就是当有数据时显示，选中我们的18条（在现在这种情况下显示出来的仍然是一条，不要以为是18条哟）记录，然后:)看图吧！

弹出来的对话框默认就行了。
好了，执行一下首页看看效果吧！如下图


跳到相关页面

用Dreamweaver MX打造自已的Blog-跳到相关页面

C.当点击文章标题时跳到相关页面。
选中Title的那个字段，然后点服务器行为中的转到详细页如下图：

然后在弹出来的转到详细信息页中做如下设置：如下图,然后点确定就行了。

好了，首页我们就做完了，然后我们就来做Detail.asp页面吧！：)这个可是显示你的Blog的地方哟！


显示数据

用Dreamweaver MX打造自已的Blog-显示数据

六.显示数据库中的详细内容:

1.显示数据库中的详细内容

打开Detail.asp页面, 重做一遍建立记录集吧！不过这儿不同于前面的地方，如下图

这儿最关键的就是参数的筛选了，因为我们这儿的信息是依赖于Index.asp传过来的ID的参数。

2.现在把相关的记录集拖到相应的位置:

A.心情图片：选中图片－》源文件->数据源（如图）


拖动记录集

用Dreamweaver MX打造自已的Blog-拖动记录集

这儿要改一下源文件的值，因为我们的表情值都是00到10，所以要在前面加上imgages/在后面加上“.gif”这样才会显示图片如下图。

B.标题：从这儿到面的内容就只是简单的拖拖就行了，拖好后如图


新建记录集

用Dreamweaver MX打造自已的Blog-新建记录集

七.添加日志 :

好了,做好了,现在没有数据,那么我们就来做发表日志的页面吧!:)
1.首先,当然还是来建立集录记了!如图

点服务器行为->+号->插入记录,如图


插入记录

用Dreamweaver MX打造自已的Blog-插入记录

在弹出的(如图)

对话框中做如下设置:

注意一下表单中的相应内容要插到数据库的相应内容就行了!详细设置看图吧!

好了,做好了吗?做好了就可以发表了!就是这么简单!:)

呵~~~
我们的Blog就做到这儿了,如果大家还有什么要求我们会尽量的去满足大家的.这个Blog是有些简单!

如果大家需要的话,我再做一个功能多一点的,大家可以下 回去自已研究.这里我就不多说了.

有什么问题欢迎到我们的论坛提问题http://bbs.yascool.com/

也可以给我发电子邮件,我会尽量回答大家的.

本程序可由http://www.yascool.com/down/blog.rar 处下载

完~