用Dreamweaver MX 2004设计超简留言本

dreamweaver|设计

  初学者在学ASP的时候往往是无从学起,学理论的时候又太抽象不好懂,实践的时候又找不到合适的例子来分析练习,有时候找到一个源程序学习的时候,功能太繁杂,涉及到的ASP模块太多,也附带了不少的函数,这样使初学者一头雾水,知难而退,实际上ASP是比较容易掌握的,今天就是为了这个目的,剥茧抽丝做了一个非常简单的留言板,只有留言,删除和回复的功能,没有管理权限功能(站长登录,修改密码等)、判断功能(表单验证等)及分页功能,简洁干炼,主要是为了初学者掌握最重要的知识,就是如何抓取数据库以及如何查看、删除、修改记录的操作,我们先从这个超级简单的留言板开刀吧,此关只要能过,恭喜您了,将来即可步入ASP应用的行列了!:)本教程完成后会提供下载!

  首先我们先做准备工作,先做一下策划,看看我们可能要做哪些页面,所谓说好的开始就是成功的一半,所以大家不要急着做,听我慢慢讲来。为了让大家都能制作出自己的留言板,尽量实现一个网页一个功能模块,我们就做以下六个网页:

  一、index.asp----首页即显示留言页
  二、conn.asp----公共网页,每个网页都要包含它,是连接打开数据库的操作。
  三、write.asp和save.asp----分别是发表留言的表单网页和保存留言页。
  四、del.asp----删除留言页
  五、reply.asp----回复当前留言页

  好了,说到这里我们可以动工了,首先做一个最重要的工作,就是建立起一个数据库,将来存放网友的留言所用。
  1、数据库名:guest.mdb
  2、数据库表:只有一个表:book
  3、数据表book里增设以下字段,见图1

说明:·任一字段的数据类型中的“常归”项中的“允许空字符串”最好填“是”

   ·日期/时间的“常归”项中默认值为Now();站长回复里的“常归”项中的默认值为“暂没有回复”,注意此处要加双引号,是半角而不是全角。

  数据库建好后开始做公共网页,用来打开数据库,打开Dreamweaver MX 2004,按如下方法新建动态ASP网页:

  并保存为CONN.ASP,在编辑区里切换到显示代码视图里,注意把第一行自动生成的代码删掉。

  这次主要是写连接数据库和参数设置的ASP代码,不用输出什么HTML标签,所以把代码全部删掉,用DREAWMEAVER插入栏自带的ASP对象写入以下代码,ASP栏里没有的代码只能自己手写输入了。

  注意要把所有要编译的ASP代码放在<% %>之间,这样才能正常运行,否则会出错!这是基本常识哦。让我解释以上代码的意思吧:

  代码第一行: 用来建立connection对象,connection对象扮演着十分重要的前期连接工作,连接成功数据库才会有以后的数据操作功能。

  代码第二行:设置数据库连接参数。包括有数据库驱动程序和数据库文件名。

  代码第三行:用conn连接对象打开数据库。

  这些是通用连接数据库的方法,任何需要打开数据库的动态网页都可以照搬以上代码就行了,只把数据库的名字换成你的数据库名字就行了,注意路径要正确。所以可以把这些代码用Dreawmeaver里的代码片断复制下来,以后直接插入就可以用了,比较方便,也不用记忆,这是一个小技艺吧!

  新建动态网页index.asp:先在设计视图里排版好一个留言板的界面,设计好的页面效果图如下:

  下面表格规划和显示都很清楚,一目了然,什么排版的我就不说了吧:),这可是基本功啊,如果不行的话可先学好Dreamweaver,[如果是初学者请先看Dreamweaver视频教程啊!]再来学ASP哦!稳打稳进,至理名言^_^.如果想偷懒的话,可以直接下载源代码,学习研究ASP代码也可以啊,我不反对哦,至少我也是这么懒的,理解万岁!:)

  排好版后再进入代码视图里,在不同的位置插入以下ASP代码:如下图:

  在网页代码的最上面第一行,点击用红线圈起来的标志可以插入第一行的代码,并可以浏览到具体文件上,比较方便,注意选择file文件类型的,不是virtual虚拟类型的。这样就插入了conn.asp数据库连接代码页,此代码被包含在当前网页位置中进行正常编译,不用重复写数据库连接代码,它的好处很大哦,使页面结构化,容易修改和维护,如果数据库连接错误,或数据库文件变动,只需更改conn.asp即可,不必要修改每一页的代码。要善于用这个方法啊,会使你的程序简单化,清晰化,这是常用的编程方法。

 

  然后再输入以上第二行到第六行的划红线的代码块,此代码块的意义让我一一讲来:

  第三行代码:既然网页和数据库用connection建立连接打开关系了,之后最重要的工作就是读取数据了。建立rs对象变量为recordset对象,这样以后可以用rs对象变量来存取数据库操作。

  第四行代码:把从数据表book里查询的结果放到sql变量上。它的意思是把book里所有的数据都取出来,并按id从大到小排序。desc表示从大到小排序,如果不加的话,最新的留言可是在最后面哦,不方便了。

  第五行代码:表示用rs对象变量open方法来打开数据表book,取出结果按sql的查询方法。

  以上是通用的读取记录的方法,到其它地方都可以举一反三,要熟悉使用!

  接着我们要做无留言记录的判断显示代码出来,我们要定位到“暂无留言”这个表格标签代码的开头,加上第28行如下划红线的代码即可,此代码表示判断语句:如果RS记录指针的EOF结尾和BOF开头都为空,就返回真,执行以下标签,即输入暂无留言这个表格,而不输出下面的其它标签了。再定位到“暂无留言”表格标签的结尾,输入以下36、37行划红线的代码完成判断条件,Response.end表示输出结束,不再输出以下的代码。

  其次再做如果记录不为空的情况下输入留言的表格出来,分别定位在输出留言表格标签的前面和后面,插入ASP代码块如下图输入:

  此代码块的意思为:将RS记录指针指向第一个记录,然后开始判断移动记录时,记录结尾是否为空,如果不为空接着移动指针,把所有数据都读取出来。直到结尾为空时,退出循环。

  然后我们做最重要的也是最频繁使用的工作了,就是把数据表里各字段的记录分别读取出来放在表格的不两路位置上,例姓名,QQ,邮箱及留言等。先转换到设计视图和代码视图的环境下,如下图:

  我们发现上图多了很多标记,这就是刚才在代码视图中输入的ASP代码,方便我们在设计视图中进行修改,输出预览是不影响排版的。我们把光标定位在姓名旁边的表格里,点击插入栏ASP里的,自动插入代码区里指定位置,比较方便,不容易搞错,如下图:

  然后选中姓名旁边的标记,点属性栏里的Edit编辑按钮,输入rs("name")即可。<%= %>表示输出变量值,相当于response.write的简化版。rs是上次已建过的recordset对象,可以直接读取字段里的内容,name是数据表里book里的姓名字段。

  同理按以上方法再插入ASP代码留言内容、发表者、发表时间及回复内容在不同位置,分别是:

  留言内容:<%=server.htmlencode(rs("content"))%>
  发表者:<%= rs("name") %>
  发表时间:<%= rs("time") %>
  站长回复:<%= rs("repcontent") %>

  大家可能发现了,留言内容插入的代码和别的稍微不一样,多了server.htmlencode这个对象,这是为了安全问题设置的,是HTML编码对象,可以使带有HTML标签的文本不被解释为HTML标记,这样可以防止被恶意者来写入特殊执行代码,造成不必要的损失。

  这样就写好了,如下图所示:

 

  接着再做OICQ,EMAIL,HOMEPAGE的链接设置,这个和上述不太一样,它不是直接显示出记录即可,而是将鼠标移到QICQ上浮现留言者的QQ号码,点击EMAIL自动给留言者发信,点击HOMEPAGE直接到达留言者的网站。
  选中OICQ,加上“#”空链接,同样的也给EMAIL和HOMEPAGE加上“#”空链接。如下图所示:

  大家都知道给图片加提示比较简单,直接在ALT里设置文字说明就可以了,但文字却没有ALT,没关系,我们的Dreamweaver早就想到了,很强大哦!在代码区里OICQ的空链接#后,按空格(注意是英文输入法才有效)会出现智能提示参数出来,我们选择“title”,然后接着打上"<%= rs("oicq") %>"即可!

  同样的方法给EMAIL和HOMEPAGE加上啊,方法如下图划红线所示:

  一切OK了!!!^_^发现设计视图里的OICQ,EMAIL和HOMEPAGE的背景变成了浅蓝色,这说明我们在链接上给它们加了ASP代码,这样不同的提示是否很体贴啊:)

  你肯定等不及了,看看效果吧!但还没有记录啊,没有做留言提交页和回复页,删除页,只好暂时在数据库里手动添加记录吧。

  今天太晚了!明天再接着写吧!呵呵!

下一页

时间: 2024-09-19 23:54:03

用Dreamweaver MX 2004设计超简留言本的相关文章

用Dreamweaver MX 2004设计超简留言本(二)

dreamweaver|设计 相关文章:用Dreamweaver MX 2004设计超简留言本 接着昨天晚上的教程继续给大家讲解,前面做的留言本只能显示数据,让我们赋于它生命吧,让这个留言板把网友们互动起来,大家可以积极发言,讨论侃山.首先要做一个写留言的网页,为了简单化,我们把写入留言的网页和提交保存留言的网页分成两个,这样容易看懂,方便学员分析. 我们先做写入留言的网页,静态或动态网页均可,不需要任何ASP代码,最好建个静态文件,这样浏览速度快,不增加服务器负担,也不是说全是ASP网页就好哦

Dreamweaver MX 2004设计留言本实战

dreamweaver|设计 9月份设计界最热的消息莫过于Macromedia公司的Studio MX 2004了,朋友们都很关心新版软件的新特性,那么就让我通过这个留言本的教程跟大家一起体验Studio MX 2004中的Dreamweaver MX 2004(以下简称DW2004)吧. 一.IIS(Internet 信息服务)安装配置 这里以Windows Server 2003(以下简称Win2003)为例.因为Win2003是服务器级的操作系统,所以自带有IIS6.0,其它版本的系统可以

Dreamweaver MX 2004设计留言本实战(组图)

dreamweaver|设计 9月份设计界最热的消息莫过于Macromedia公司的StudioMX2004了,朋友们都很关心新版软件的新特性,那么就让我通过这个留言本的教程跟大家一起体验StudioMX2004中的Dreamweaver MX 2004(以下简称DW2004)吧. 一.IIS(Internet 信息服务)安装配置 这里以WindowsServer2003(以下简称Win2003)为例.因为Win2003是服务器级的操作系统,所以自带有IIS6.0,其它版本的系统可以在添加或删除

Dreamweaver MX 2004设计留言本实战(3)

dreamweaver|设计 按Ctrl+F9展开服务器行为面板,看那四项中的前三项前是否有勾号,如果没有就是相应项在定义站点是没设置好,重做DW的站点定义那一步,然后开始创建记录集,有三种方法: 1)在服务器行为面板上单击+号 2)在插入菜单上Insert>>Application Objects>>Recordset 3)在Application工具组里单击第一个图标: 因为我们还没连接过数据库,所以现在还需要定义连接数据库字符串.在弹出的Recordset对话框中单击如图45

Dreamweaver MX 2004视频宝典教程(19)

dreamweaver|教程 第 19 集:Dreamweaver设计面板组 课程目标:学会Dreamweaver设计面板组的使用. 课程要点:Dreamweaver MX 2004设计面板组包括CSS样式面板和层面板.本节将简要介绍两个面板的使用方法. [全屏观看] | [下载视频] |

Dreamweaver MX 2004 表格设计

dreamweaver|设计 Dreamweaver MX 2004的强大功能以及更加完善的人性化设置已经深受大家喜爱.在此笔者就谈谈该软件新版本中的表格设计. 表格在网页中的重要性不言而喻:网页的框架.结构都要通过合理的表格布局来完成和实现. 在Dreamweaver MX2004中(以下简称DW MX 2004),插入表格的界面和以前的对话框已经起了很大的变化(图1). 其中的Table Size虽然变化不大,但是下边新增加的功能着实方便了不少:例如新增加的表格标题.布局功能以及附加信息显示

DreamWeaver MX 2004专题

dreamweaver Dreamweaver MX 2004 CSS使用教程 [2005-03-06] 菜鸟学用Dreamweaver MX 2004行为教程 [2005-03-09] Dreamweaver MX 2004入门教程 [2005-03-11] Dreamweaver MX 2004从零开始教程 [2005-03-11] Dreamweaver MX 2004打造留言本详解 [2005-03-13] DreamweaverMX2004站点远程连接设置 [2005-02-25] 用

Dreamweaver MX 2004从零开始(3)

dreamweaver 用框架构建网页 我们登录一些论坛之后,可以看见左边是每个讨论区的名称,点击任意一个讨论区就可以在右部区域中看见相应讨论区的内容,不过左右部分是独立显示的,例如拖动左边的滚动条不会影响右侧的显示效果.其实这就是页面中利用了框架技术,因此可以把浏览器的显示空间分割为几个部分,每个部分都独立显示网页内容.而且把几个框架结合在一起构成框架集,能够让页面具有更为丰富的效果. 一.创建框架和框架集 第一步:在Dreamweaver MX 2004中新建一个页面,运行"View→Vis

Dreamweaver MX 2004从零开始(1)

dreamweaver 随着Internet的普及,很多人已经不满足于仅仅上网冲浪,而希望深入地参与其中.现在,拥有自己的Web网站已经成为一种潮流.虽然制作一个简单的网页并不困难,但是制作出超凡脱俗的网站就不那么容易了,因此我们特意为大家准备了最新网站设计软件Dreamweaver MX 2004的系列教程,希望对大家有所帮助. 通常在一个网站中会有几十甚至几百个风格基本相似的页面,如果每次都重新设定网页结构以及相同栏目下的导航条.各类图标就显得非常麻烦,不过我们可以借助Dreamweaver