当前位置:首页 >> 互联网 >>

动态网页设计

基于 Dreamweaver8 的动态网页设计
【摘要】 伴随着社会的发展和教育的现代化, 上网越来越多地被人们所选择。 快速及时的新闻浏览,五彩缤纷的网上信息,网络逐渐融入人们的生活。被人们 称为第三媒体——因特网(Internet)。制作网站是企业和个人的宣传自己的重 要手段,同时也是学习者获取学习信息的重要手段,尤其是在教育领域,在素质 教育与终身教育成为必然的今天,人们对信息的需求有了更新,更高的要求,而 网站由于本身所具有的信息量大,传递快速,没有时空限制等特点恰好满足这种 要求。所以网站也逐渐成为一种新兴的教育资源。有关网站的技术也层出不穷, 从静态网页到动态网页的变化也正说明了这一点。掌握动态网页的基本知识,以 及动态网页设计过程就显得尤为重要。在众多的网页设计语言中,Dreamweaver 由于其简单易懂,被广大用户所青睐,成为设计的主流软件,特别是应用于动态 网页的设计。 【关键字】网站 动态网页 Dreamweaver8

因特网(Internet)的蓬勃发展对人类生活的各个方面产生的深刻的影响, 也赋予了人类更大的自由和选择空间。利用因特网,人们可以迅速地获得更多的 信息和交流机会。当我们漫步在因特网上时,不禁回想到这样的问题:网站是什 么?它的工作原理是什么?浏览的信息来自何方、又去向何处?带着这些问题, 我们来一起了解一下网站设计的基础和核心内容-——动态网页设计。 一 、 动态网页的基本知识 (一)网站及其工作原理 简单地说,网站就是网页文件组成的集合。在网站中,网页按照特定的结构 方式进行组合,使浏览者在访问该网站是能够链接到各个网页来观看网页内容, 实现因特网漫步。 各种网站资源被保存在提供 WEB 服务的计算机上。 用户通过浏览器向网站发 出请求,网站的 WEB 服务器会根据浏览器请求的页面类型而采取不同的处理机 制,并将处理结果发送到用户端。 (二)网页 什么是网页呢?网页实际是一个文件, 他存放在世界某个角落的某一台计算 机中而这台计算机必须是与互联网相连的。网页经由网址(URL)来识别与存取,

当我们在浏览器输入网址后, 经过一段复杂而又快速的程序,网页文件会被传送 到你的计算机,然后再通过浏览器解释网页的内容,再展示到你的眼前。 文字与图片是构成一个网页的两个最基本的元素。你可以简单的理解为:文 字,就是网页的内容,图片,就是网页的美观。除此之外,网页的元素还包括动 画、音乐、程序等等。网页实际上只是一个纯文本文件,它通过各式各样的标记 对页面上的文字、图片、表格、声音等元素进行描述(例如字体、颜色、大小), 而浏览器则对这些标记进行解释并生成页面。 (三)网页的类型 网页主要分为静态网页和动态网页两类。静态网页之所以称为静态,是因为 对于每个访问该页面的用户来说,他所看到的内容都是相同的。即使在网页中通 过插入动画以及客户脚本, 它的变化对所有用户也是相同的。 而与静态网页不同, 动态网页的内容会随着不同的用户和不同的访问需求而发生变化。 通常我们看到的静态网页,俗称 HTML 文件。这类网页一旦写好,除非改写 这些 HTML 源代码,否则无法更改网页上的内容,都是以 htm 或 html 后缀结尾 的文件。 而动态网页却不同, 它实质上是 HTML 和一些语言的结合, 如 ASP 是 HTML 和 VBSCRIPT 的结合,然后再结合了数据库的操作。如一个文件的后缀为.asp, 其内容包含实现动态功能的 VBSCRIPT 或 JAVASCRIPT 语句,如果去掉这些语句, 它和标准的 HTML 文件没有任何区别。 (四)动态网页常用的开发工具 1、 ASP 简介 在动态网页的开发过程中,Microsoft 公司的 ASP(Active Server Pages) 被广为使用。ASP 是一套服务器端的脚本运行环境,当用户从浏览器向 WEB 服务 器请求一个.asp 文件时,服务器全面读取请求的文件,并执行脚本命令,然后 生成一个标准的 HTML 文件传给浏览器执行。ASP 提供了一些内置对象和组件, 允许用户从浏览器中接收和发送信息。ASP 可以和诸如 SQL Server 这样的数据 库进行连接,进而完成数据的交换与更新。 2、 Dreamweaver8 网页编辑软件 Dreamweaver8 是 当 前 最 流 行 的 Macromedia 公 司 的 网 页 设 计 软 件 , Dreamweaver 不仅是一个专业的可视化网页创建编辑器,而且它还是一个出色的

网站维护工具。 用户可以通过它管理和维护已有的站点,从此不必在维护和管理 方面花太多的力气,省下的时间可以考虑如何再修饰自己的网页。在 Dreamweaver8 中提供了基于 ASP、JSP、PHP、ASP.NET、VBScript 和 ColdFusion 等动态网页技术的 WEB 应用程序开发功能,通过数据库、服务器行为和绑定面板 快速定义数据库连接, 将数据库记录显示在页面和通过页面操作数据库数据,使 得用户避开了繁琐的代码书写过程,因此受到很多网页制作人员的青睐。 二、基于 Dreamweaver8 的动态网页的设计过程 (一)网站的整体与版式设计 这是网页设计的首要工作, 每一个网站都有自己的特色,只有这样才能从网 络世界中脱颖而出。网站的整体与版式设计主要包括以下几个内容: 1、确定网站的主题、内容、功能 ①在网站设计工作之前一定要明确网站的主题 (如:学习,体育,娱乐,慈善, 儿童,女性,军事,生活等等)。确定主题一定要注意以下几点:第一,主题要小而 精,千万不要面面俱到,否则给人的感觉就是没有主题,没有特色,样样有却样 样都很肤浅;第二,题材最好是你自己擅长或者喜爱的内容。比如:您对电影感 兴趣,可以报道最新的影讯,影视动态等;第三,主题需要创新。换句话说,也 就是要有自己的特色。 ②搞清楚该网站应该包含哪些方面的具体内容,必须具备哪些功能。网站内 容、 功能方面的需求最好由客户方以书面的形式提供, 对于客户提出的书面报告, 每一项都要全面而深刻的理解,及时与客户进行沟通交流,做到有的放矢。 2、网站的整体版面设计 一个好的网站能够通过非常出色的整体风格和版式设计将主题鲜明的表现 出来;同时,页面看上去还要非常的美观。在完全了解客户的需求后,就可以进 行网站的整体风格和版式设计阶段, 在设计过程中, 一定要周到考虑, 耐心细致, 绘制出相应的草图并附之以说明,从而形成详细而全面的设计文档资料。网站的 整体风格和版式设计分为以下几个部分: ①网站板式设计 ②网站的目录结构和导航栏的设计 ③功能设计

(二)动态网页数据库设计 1、数据库概述 动态网页设计中用到的数据库类型很多, 主要有 DBASE、 ACCESS、 SQL SERVER 等,目前比较常用的是微软公司的 ACCESS 数据库系统。本文以 ACCESS 为例。 2、数据库连接 在动态网页中,数据库的连接方式主要有两种:数据源名称(DSN)和自定 义连接字符串的方式。 其中前一种较为简单,但是要求设计者拥有服务器操作的 权限;后一种比较灵活,也是较为常用的方式,它的实现代码为: “provider=microsoft.jet.oledb.4.0;data source=数据库路径” 。 3、ACCESS 数据库设计 在动态网页中,数据库的设计是在 ACCESS 环境下的设计,主要分析数据库 表和表间关系(一对一、一对多) ,建立必要的查询表等内容。例如,在制作论 坛时可建立三张数据库表:主题表(用于存储主题信息,包括发布人、发布信息 等) 、回复表(用于存储回复信息,包括回复人、回复信息等)和管理员表(用 于存储管理员的信息,包括姓名和密码) ,同时建立关系和查询表(主要用于建 立回复的对应的主题之间的一对多的联系) 。只有数据库表建立正确,才能保证 动态网页设计的顺利完成。 (三)Dreamweaver8 动态网页的详细设计(以论坛的设计为例) 1、功能模块设计 在功能设计阶段,主要完成相关模块的定义和功能说明。在论坛设计中,主 要包括:主页面模块、管理员登录模块、管理员管理模块、主题内容显示模块、 主题相关回复浏览模块、发表新主题模块、发表主题回复模块、搜索模块等。针 对这些模块分别设计相应的页面,并在对应的页面上绑定相应的记录集。 2、界面设计 ①整体效果设计: 主要包括区域分配和风格的设计。论坛是在因特网上自由 发表言论的地方,客户端面对的是各种各样的人群,因此,论坛的风格应该适合 大众的口味,在颜色的搭配上应该以浅色为主。页面上的 LOGO 应该醒目,宣传 标语应尽量言简意赅,这样才能起到吸引人的作用。 ②主界面(论坛主题的显示页)的设计:主要包括 LOGO 的设计、标题设计、

以及,功能菜单显示方式、客户信息和版权信息显示区。论坛的主界面是体现一 个论坛主要风格和功能的地方,一定设计得布局合理、内容完全、重点突出。一 般将论坛的主题放在页面的中心位置,搜索区域放在页面的上方,以达到醒目的 效果。功能菜单的显示方式有行显示、列显示以及浮动显示等方式,在论坛中, 一般采用列显示方式,这样可以突出主题留言。 ③子页面的设计。 子页面是和主页面相关的链接页面,在设计时要注意和主 页面保持风格统一、 正确显示。论坛中的子页面较多,其中比较有代表的是两 类页面:连接页面和详细页面,动态页面一个显著特点是数据的动态显示,即根 据客户端的不同要求 WEB 服务器产生不同的响应结果。论坛搜索页面,是利用获 取表单中的文本域的值来绑定记录集,这样当客户在文本域中输入了搜索内容 时, 服务器根据该文本域的值检索到数据库中的相应记录,然后输出给浏览器显 示。 论坛主题显示页面是根据主页面中动态标题字段作为传递参数而得到的详细 页面,他利用的是服务器行为中的“转到详细页面”的行为来实现的。论坛的主 题回复浏览页面是利用高级筛选记录集的方法来实现的。 论坛中其它的动态页面 的设计类似。在子页面的设计中应该注意以下几点:第一,明确页面之间参数的 传递。从甲页面到乙页面需要依赖哪个参数(变量)实现数据记录的同步,这是 动态网页设计的关键所在;第二,确定所使用的服务器行为。从主页进入子页面 或者子页面之间进行跳转时,都要使用到服务器行为,也就是说,客户端的对服 务器的后台数据库究竟是实施的添加、删除还是更新操作,一定要把握正确。第 三,绑定正确的数据库表。数据库表是动态网页的后台数据支持系统,它必须和 前台的网页相对应, 一个数据库包含好几张数据表和查询表,而在某一个动态网 页上显示的可能是其中的一个或几个, 只有在动态网页上出现的数据库表才进行 绑定。 ④后台管理设计。主要包括管理员的登录界面,系统资料的修改界面等。这 一阶段是整个动态网页顺利实施和安全运行的保证。Dreamweaver8 中提供了两 个登录相关的服务器行为: “用户登录”和“限制用户对页的访问” ,一般来说, 这两个服务器行为在一起使用,前者主要用于对登录用户的用户名和密码的识 别, 后者主要用于对登录页面的安全限制,即只要想访问该页就必须首先进行登 录。 相比而言, 可能后一种行为会更重要, 可以更为有效地阻止黑客的恶意攻击,

这也是网站的安全保障线。 (四)动态网页处理过程 动态网页不管设计的如何眼花缭乱, 最终都是依靠 WEB 服务器的读取和写入 操作来实现的。在 Windows xp 以上的操作系统支持下,动态网页服务器使用的 是 Windows 自带的组件 IIS(Internet Informantion Server)服务器。在安装 好 IIS 服务器后, 对服务器的测试路径和本地路径进行设置,当设置成功后就可 以正确浏览你设计的动态网页了!但是,如果你想把页面放入真正的网络世界, 就需要和 ISP 供应商联系, 申请服务器域名和空间后,就可以将自己的动态网页 放入因特网的空间内,实现和他人沟通和交流的需求了。

参考文献:
[1] 张胜.Dreamweaver8+ASP 动态网站建设基础与实践教程.电子工业出版社. [2] 陈笑,宋萍,张翅.中文版 Dreamweaver8 实用教程.清华大学出版社. [3] 邹婷. DREAMWEAVER8 标准教程(网页设计培训标准教程) . 中国青年出版社.