dw留言板制作

dw留言板制作（精选2篇）

dw留言板制作 篇1

动态数据库网页 本讲要点

1、配置动态服务器IIS

2、建立动态站点

3、创建动态页面

4、创建数据库链接

5、制作表单文档

一、动态站点概述 何为动态 一种具有“交互性”的页面效果即网页会根据用户的要求和选择而动态改变和响应。制作动态网页需要做的工作有 第一要在个人电脑上调试动态网页。第二使用数据库技术。第三在Dreamweaver中建立动态站点。

二、配置IIS服务器 1安装IIS服务器 2设置IIS 3测试ASP动态网页 1安装IIS服务器 1执行【开始】【控制面板】命令打开【控制面板】。2双击【添加或删除程序】图标打开【添加或删除程序】窗口。3单击【添加/删除Windows组件】打开【Windows组件向导】对话框。4选择【Internet信息服务IIS】复选项。5单击【下一步】按钮开始安装IIS服务器。安装完成后的窗口如下图所示。2设置IIS 首先在D盘下面建立一个“liuyanban”的文件夹用来存放留言板动态页面文件。其次通过以下的步骤来设置站点虚拟目录 1从【控制面板】窗口打开【管理工具】在打开的【管理工具】窗口中选择【Internet信息服务快捷方式】。2设置IIS 2双击【Internet信息服务快捷方式】选项在弹出的【Internet信息服务】窗口左边窗格中右击【默认网站】项在弹出的菜单中执行【新建】【虚拟目录】命令弹出【虚拟目录创建向导】窗口如右图所示。2设置IIS 3单击【下一步】按钮继续。如左图所示在【别名】下面的文本框中输入“liuyanban”。单击【下一步】按钮继续。如右图所示在【目录】下边的文本框中输入“D:liuyanban”或者单击【浏览】按钮找到D盘的“liuyanban”文件夹。3测试ASP动态网页 在【Internet信息服务】窗口右边的窗格中找到建立的ASP动态页面右键单击后在弹出的快捷菜单中选择【浏览】项即可如图8-15所示。

三、创建留言板主页面

1、建立动态站点

2、创建留言板页面 建立动态站点 1定义站点。建立动态站点 2选择服务器技术。建立动态站点 3选择存放的本地文件夹。建立动态站点 4设置本机测试的URL。建立动态站点 5单击【下一步】按钮继续进行设置。由于是在本机测试并不需要远程服务器参与所以选择【否】项。建立动态站点 6单击【下一步】按钮继续。窗口显示了所填写的信息确认一下。如果发现有错可以单击【上一步】按钮返回修改设置确认无误后就可以单击【完成】按钮。这时动态站点就定义完成了现在可以在DW中进行动态网页的设计了。创建留言板页面 1创建留言板主页面ASP文档。2用表格布局留言板主页面。3在表格中插入一些显示元素。

四、用Access创建数据库 1创建空数据库文档 2创建留言板用户信息表 3创建管理员信息数据表 1创建空数据库文档 1新建一个名为data的文件夹然后将空数据库文件保存在data文件夹下文件名为liuyanban_data.mdb。1创建空数据库文档 2单击【创建】按钮创建一个名为liuyanban_data的数据库文件同时出现一个相应的数据库设计窗口如图所示。1创建空数据库文档 3双击【使用设计器创建表】命令弹出一个表设计器窗口如图所示。表的结构设计将在其中完成。2创建留言板用户信息表 1创建字段域。最后的结果如图所示。2创建留言板用户信息表 2设置用户信息数据表的主键字段。3设置字段属性。用户信息数据表设计完成以后关闭表设计器窗口可以看到数据库设计窗口中多了一个名字为yonghu的数据表如下图所示。3创建管理员信息数据表 创建一个用来存储和管理留言板管理员的信息的数据表名字为_guest创建结果如下图所示。最终的数据库设计窗口如下图所示。

五、留言板的逐步实现

1、创建数据库链接

2、留言板主页面的动态效果

3、创建用户留言页面

4、在留言板主页面实现留言记录导航

一、创建数据库链接 1定义系统DSN 数据源名称 2通过DSN实现连接 1定义系统DSN 数据源名称 1打开【控制面板】双击其中的【管理工具】图标在转换到的【管理工具】窗口中可以看到一个【数据源ODBC】图标。2双击【数据源ODBC】图标打开【ODBC数据源管理器】对话框切换到【系统DSN】选项卡如图所示。1定义系统DSN 数据源名称 3添加一个新的系统DSN名称。单击【添加】按钮弹出【创建新数据源】对话框在其中选择“Driver do Microsoft Access.mdb”项如图所示。1定义系统DSN 数据源名称 4单击【完成】按钮以后弹出【ODBC Microsoft Access安装】对话框在其中定义数据源名并选取数据库文件。设置后如右图所示。1定义系统DSN 数据源名称 5单击【确定】按钮完成数据库的选择这时的【ODBC Microsoft Access安装】对话框如下图所示。6经过上面步骤的操作以后在上图所示的对话框中就会显示一个新定义的数据源名称。2通过DSN实现连接 打开留言板站点的主页面文档main.asp。在【应用程序】面板中的【数据库】面板下单击加号按钮在弹出的下拉菜单中单击【数据源名称】项如图所示。2通过DSN实现连接 在【数据源名称】对话框的【连接名称】文本框中输入数据源连接名称在【数据源名称】下拉列表中选择名字为“liuyanban”的DSN其他参数保持默认值如图所示。2通过DSN实现连接 单击【确定】以后【数据库】面板就会出现新定义的连接名称单击它前面的加号按钮展开可以看到留言板数据库中的两个表如图所示。这时就完成数据库和留言板站点的连接了连接名是liuyb。

二、留言板主页面的动态效果 1在【绑定】面板中定义记录集 2将记录集中数据绑定到表格域 1在【绑定】面板中定义记录集 在Dreamweaver中打开留言板站点主页面main.asp。打开【绑定】面板单击加号按钮在弹出的下拉菜单中执行【记录集查询】命令如图所示。1在【绑定】面板中定义记录集 在弹出的【记录集】对话框中定义记录集【名称】为i、选择数据库【连接】名为liuyb、选择数据库中的【表格】为yonghu、选择表中的字段域、定义记录排序的方法等如图所示。1在【绑定】面板中定义记录集 按照前面的步骤操作完成以后在【绑定】面板中就会出现新定义的记录集单击它前面的加号按钮可以展开记录集如图所示。2将记录集中数据绑定到表格域 1重新编辑留言板主页面。对留言板主页面main.asp中的表格重新编辑并删除单元格中的一些文字和图片如图所示。2将记录集中数据绑定到表格域 2将记录集中的数据域字段绑定到表格相应的单元格中。打开【绑定】面板展开记录集。用鼠标将记录集中的y_name字段拖放到页面表格的左上角中用同样的方法将其他数据域字段拖动到相应的单元格中结果如图所示。

三、创建用户留言页面 1添加表单并布局表格 2添加表单域 3定义提交按钮的服务器行为 4在【行为】面板定义表单提交的错误检查 1添加表单并布局表格 新建一个动态页面并将其保存为“write.asp”它就是用户留言页面。在【表单】工具栏中单击【表单】按钮插入一个表单。然后在表单中插入一个表格表格布局如图所示。2添加表单域 1添加“姓名”文本字段。通过【表单】工具栏中的【文本字段】按钮完成在单元格中添加一个“文本字段”表单域。在【属性】面板中【文本域】下面的文本框中定义这个文本字段的名字为name如图所示。2添加表单域 2添加OICQ、E-mail、个人主页文本字段。OICQ、E-mail、个人主页表单域的添加方法同上均为文本字段在【属性】面板中各个文本字段的命名情况是 OICQ文本字段oicq E-mail文本字段mail 个人主页文本字段homepage。2添加表单域 3添加“性别”单选按钮表单域性别“男”的单选按钮属性设置如图所示。2添加表单域 同样的方法再设置一个性别“女”的单选按钮。完成后的页面效果如下图所示。2添加表单域 4添加“选择头像”表单域。因为“选择头像”右边的单元格中要有若干备选的头像图片所以我们应该事先制作或者搜集一些卡通头像图片。复制以后的【文件】面板情况如图所示。2添加表单域 将光标定位在“选择头像”右边的单元格中分两行插入8个头像图片。在每幅图片的右边添加一个单选按钮。名字统一定义为tx第一个单选按钮的【初始状态】选择为【已勾选】其他的单选按钮为【未选中】每个单选按钮【选定值】属性的设置稍微麻烦一些。2添加表单域 以第1个单选按钮为例先选中这个单选按钮前面对应的头像图片在【属性】面板中复制这个图片【源文件】地址如图所示。2添加表单域 再选中与头像对应的单选按钮在【属性】面板的【选定值】处粘贴刚才复制的头像图片源文件地址如图所示。2添加表单域 其他7个单选按钮的【选定值】属性都按照同样的方法进行设置。最后编辑页面效果如图所示。2添加表单域 5添加“留言内容”文本区域。效果如图8-60所示。2添加表单域 6添加提交和重置按钮。完成以后的页面效果如图所示。2添加表单域 7添加隐藏区域。将光标定位在“提交”按钮的左边单击【表单】工具栏中的【隐藏域】按钮在【属性】面板中定义它的名字为ip在【值】文本框中输入代码 3定义提交按钮的服务器行为 打开【绑定】面板单击加号按钮执行【记录集查询】命令并按照图示介绍的方法绑定【记录集】。选中整个表格打开【服务器行为】面板单击加号按钮选择【插入记录】命令。在【插入记录】对话框中设置表单域与数据库字段名一一对应在【表单元素】中依次选中元素在下面的【列】中选择与数据库相对应的域。4在【行为】面板定义表单提交的错误检查 选中【提交】按钮打开【行为】面板单击加号按钮在弹出的菜单中选择【检查表单】命令。设置表单域和检查事件name选择【必需的】ociq选择【数字】mail选择选择【必需的】【电子邮件地址】homepage不选liuyan选择【必需的】如图所示。最后单击【确定】按钮事件为onClick。四在留言板主页面实现留言记录导航 1实现留言记录导航 2留言内容显示问题的解决 1实现留言记录导航 在main.asp页面实现留言记录导航主要包括控制一页显示留言数和翻页按钮上一页、下一页、最前一页、最后一页。这个功能主要使用【应用程序】工具栏来完成。将工具栏切换到【应用程序】工具栏后得应用程序按钮如图所示。1实现留言记录导航 这里主要应用【记录集分页】按钮和【记录集导航状态】按钮。单击【记录集分页】按钮弹出如右上图所示的下拉列表框 单击【记录集导航状态】按钮弹出如右下图所示的对话框。1实现留言记录导航 下面为留言板主页面添加记录导航功能 1将光标定位在编辑页面的下边单击【记录集导航状态】按钮弹出【记录集导航状态】对话框单击【确定】按钮后页面如图所示。1实现留言记录导航 2再回车另起一行单击【记录集分页】按钮弹出【记录集导航条】对话框如下图所示。单击【确定】按钮记录导航条将以文字方式显示。1实现留言记录导航 这样就完成了显示留言数量和翻页的按钮如图所示。2留言内容显示问题的解决 需要解决的问题 防止留言内容支持html代码 防止留言很长时main.asp页面上的表格被自动撑大文字不会自动换行 用如下的操作解决上述问题 2留言内容显示问题的解决 1将原来绑定到留言内容单元格中的记录集字段删除然后在这个单元格中添加【文本区域】表单域添加好后的文本区域如图所示。2留言内容显示问题的解决 2选中刚才添加的文本区域在【属性】面板中设置【字符宽度】为66【行数】为5然后单击【绑定到动态源】按钮如图所示。2留言内容显示问题的解决 3单击【绑定到动态源】按钮以后会弹出【动态数据】对话框在其中的【域】中选择记录集中的y_liuyan单击【确定】按钮。这样就将y_liuyan字段绑定到留言内容文本区域了如图所示。2留言内容显示问题的解决 经过以上操作以后再次测试留言效果时会发现 留言内容能自动换行了 而且不支持html代码。通过前面制作留言板站点已经初步实现了一些站点功能 用户可以通过留言页面填写和提交用户信息和留言内容 在留言板主页面可以显示用户留言信息 可以显示留言数以及实现了导航翻页功能。

dw留言板制作 篇2

网站的设计和制作包括多方面的知识, 它是艺术和技术的综合应用, 具体说来有网站策划、网站美工、网站具体模块规划, 总体数据库设计, 网站制作、后台内容管理模块制作、网站测试、网站上传等步骤组成, 作者结合某学校工会网站的制作, 总结小型网站的制作经验和技巧, 以为网站制作积累宝贵经验。

1、网站的策划与设计

网站的整体策划是根据学校工会领导的综合部署下进行的, 这里需要工会工作人员认真讨论研究后, 给网站制作人员下达明确的任务说明, 由于工会工作人员的精心准备, 对网站的风格、网站的功能、网站的规模、网站的模块划分已经非常明确。经过工会工作人员和网站制作人员的共同探讨协商, 整理出网站的初步风格、功能要求和模块设计。

参考其他学校的网页制作效果, 使用美术基础和网页制作软件PS, 设计出来3套网页效果图初稿, 每套均有首页, 二级页面、三级页面的具体效果, 最终由领导确定了一套。在设计的过程中, 参考美术老师的意见, 借鉴加创新, 结合网页的特点, 如单位使用像素, 宽度适合于800像素的显示器。导航栏的高度要适中, 整体结合“块”结构, 使用分栏设计, 整体风格统一。定稿后, 由网站制作人员对网页效果图进行切片处理, 作为组装网页的原素材和参考图。

根据网站的具体功能, 将网站划分为八大模块:工会简介、工会文件、工会简讯、工会活动、女工园地、健康人生、法律法规、友情链接。其中有些模块只需要一个页面, 更多的模块需要二级网页、三级网页的显示。多数模块的内容是需要存储在数据库中的, 因此二级模块、三级模块的设计要用到数据库中的内容。

首先是选择使用何种类型的数据库管理软件, 数据库管理软件根据功能可分为大型, 中型, 小型数据库。根据工会网站的具体内容并不复杂, 所以选择了小型数据库管理软件Access。但在数据分析和数据表, 表结构的设计上却耗费了作者一定的精力。因为没有考虑到后台内容管理的功能设计, 所以最初设计表时把需要用到数据库的各个模块都分别设计了表, 但最后的后台内容管理模块在数据库内容增删改查时却遇到了大麻烦, 因为最初表设计得多了, 在做增删改查时也需要做相同多的模块设计, 内容就重复了, 所以又重新设计表, 使用类别字段来区分模块。由此总结的经验就是:数据库设计非常重要, 一定要把前期后期工作全面考虑, 相互结合, 才能为后期程序的编写提供方便。

2、网站的制作

网站的制作使用DW软件完成, 具体制作步骤是:首先创建站点, 设置服务器, 使用DIV+CSS方法创建各个模块的页面和框架, 链接数据库, 在各个页面设置绑定记录集, 设置服务器行为。网页的制作是最为繁琐的工作, 首先依据网页设计效果进行布局的设置, 具体方法是使用DIV进行布局, 然后使用CSS方法对各个DIV样式进行设置, 在设置样式的时候, 选择使用外部样式表的方法, 因为外部样式表更易于管理。在设置背景图像时, 使用PS的切片工具进行制作, 切片工具有一个BUG, 就是其存储名称不能修改, 因此在切片时, 最好的方法是先设置好切片的名称属性, 在导出时就可以使用这个名称命名切片了, 同时存储的格式最好是GIF格式, 因为这个格式支持透明背景, 并且在网页浏览器中支持渐变效果。

网页特效的制作是很有意思的一件事情, 这是需要使用JS代码, 网上有很多JS代码的效果和原程序, 但很麻烦的一件事情是如何读懂这些代码, 把相应的内容替换成你所需要的内容, 比如, 图片说明文字, 超链接等等, 还有一件事情是, 网上提供的JS效果并不是你所需要的尺寸和颜色, 这也需要你读懂JS代码, 同时把相应的样式修改成你所需要的样式。本网站使用的JS特效有一个新闻展示效果, 具体制作方法是下载JS代码, 修改JS代码, 把JS特效嵌入到相应的DIV中, 其中的制作难点是, 网站要求新闻展示是随时间更新的, 这就需要把静态的新闻换成动态的新闻, 因此需要从后台数据库中提取相应的字段, 同时在后台管理模块中, 还要相应的模块处理新闻的增删改查。

网站后台内容管理是方便网站维护人员工作方便专门制作的, 工会网站的维护工作是由工会工作人员远程进行管理的, 因此就有必要制作一个专门方便工会工作人员管理网站内容的模块。其制作内容就设计到对后台数据库的增删改工作, 由于在数据库设计过程中, 没有考虑到后期的维护工作, 因此在对新闻内容的增删改工作上, 出现了需要给多个表进行增删改的要求, 因此建议今后设计数据库时, 将所有的新闻表重新整合, 以类别区分各种信息。

另外在处理图片上传的工作时, 需要考虑如何上传图片信息。之所以要专门指出图片上传是有原因的, 因为图片需要上传到服务器上才能将其具体路径信息记录到相应数据表记录的字段中, 也就是说, 如果某条新闻需要图片的支持, 那么这条新闻的图片是以相对路径的形式存储在数据库中的, 所以在增改新闻图片时, 必须先把图片上传到服务器相应的目录下。图片上传到服务器后, 它的文件名将随机改变, 所以要记录好图片的新文件名。这样才能进行和图片相关的操作。文件上传可以分为两种:有组件上传和无组件上传。作者使用的是无组件上传, 原因是有组件上传要求远程服务器上必须安装相应的组件才能完成文件上传功能, 而无组件上传不需要在服务器上安装相应的组件即可完成文件的上传。

网站的测试是网站制作必不可少的步骤和环节, 网站制作完毕之后, 必须及时进行网站测试, 测试可以分为两种测试:黑盒测试和白盒测试。作者将黑盒测试的任务交给3名学生进行, 经过2天的测试, 将各个模块统统测试3遍, 测试中发现了一些问题:网页标题没设置、个别网站内容出现DIV跑位现象, 不同的浏览器出现不同的效果, 个别网站出现内容描述不清晰的情况等等, 通过作者的核实, 都进行了更改并重新测试。白盒测试则是由作者亲自完成的, 在测试中出现的问题主要有:站点中出现了没有用的网页, 处理的办法是将其删除;表单中出现了没有用到的项目, 有些项目类型不合适, 处理办法是删除或修改;经过黑盒测试和白盒测试之后, 还需要使用者在长期的维护过程中, 不断的测试, 并把需要修改的地方指明给作者, 由作者进行修改, 这就出现的软件的不同版本。

3、网站的上传与更新

网站制作、测试完毕后, 就交付给学校网站维护人员进行上传, 网站是存放在学校服务器上的, 也就是说, 所有的网页浏览者通过浏览器将网页请求发送到学校网站服务器上, 由服务器将浏览者请求的网页发送给浏览者。

网络信息的更新需要使用后台管理系统进行, 这个系统是作者专门针对本网站设计制作的, 专为网站信息的更新维护设计, 这样通过此系统, 公会工作人员通过远程浏览器即可更新网络服务器上的公会网站数据库, 从而方便轻松的维护更新网站内容。值得一提的是, 网站后台管理系统也是相当复杂的一个模块, 涉及到管理员密码设置更改, 网页访问限制, 数据库信息的增删改查等内容, 所有动态信息均通过此模块对网站数据库进行更新。

4、结语

工会网站的使用, 实现了无纸化办公, 能够快捷的发布消息, 减少了许多人力物力的开销, 提高了工作效率, 这是本系统的功能和特点。从网站的策划, 设计, 制作, 测试到发布, 整个过程作者亲力亲为, 其中体会非常深刻, 本网站的建设基本完成, 其基本功能全部实现。如何把类似的网站设计成网站模板, 如果实现模板化, 此类网站的制作将会更加便捷快速。

参考文献

[1]陈益材.DWCS4+ASP——动态网站建设从入门到精通[M].机械工业出版社, 2010.

[2]魏洪斌, 周鑫, 刘志江.Dreamweaver MX网页设计[M].清华大学出版社, 2005.

[3]荣钦科技.ASP+Dreamweaver MX 2004数据库网站开发与实例[M].清华大学出版社, 2004.

[4]秦学礼.DreamweaverMX2004实用教程[M].清华大学出版社, 2004.