浅谈Dreamweaver设计与制作网页

第27卷第2期 吉林工商学院学报 V01．27．No．2 201 1年3月 AND JOURNALOFJILn、JBUSINESSTECHNOLOGYCOLLEGE Mar．201l 浅谈Dreamweaver设计与制作网页 狄加利 (吉林工商学院经贸分院，吉林长春130062) 【摘要】在今天的网络信息时代，互联网已成为了人们生活的一部分，越来越多的人关注着网络信息．网页作为网络信 息的载体，则需要更多的网页设计与制作的人来构建和维护，而学会一个好的网页设计与制作开发及维护工具是成为 一个真正的网页设计师的关键，网页编辑软件Dreamweaver恰恰就为我们提供了一个良好的开发环境。

[关键词】Dreamweaver；网页设计；网页制作；CSS；HTML [中图分类号】TP3ll 【文献标识码】A 【文章编号】1674．3288(2011)02．0100．04 【收稿日期】2011-03．09 [作者简介】狄加利(1975一)，男，吉林长春人，吉林工商学院经贸分院讲师，研究方向：电子商务与网页设计 随着Intemet互联网的快速发展，它已经走入了企事业单位以及公司，同时也走入了家庭，而网页也成了 企事业单位和公司的信息窗口，让自己的信息及时呈现在人们的面前，从而人们也不必走出家门就可以知晓 外面的世界因此，网页设计与制作、网站维护等技术已必不可少，也显得越来越重要了目前，Dreamweaver CS3是一个业界领先的网页开发工具之一，具有很强的使用户高效地设计、开发和维护基本的标准网站和 Web应用程序的功能 览的效果相同，具有直观性、使用方便、很容易上手的优点而它的三种视图也为不同的网页设计者提供了 方便一是代码视图更适合专业开发网页代码的编程人员，并且有代码提示功能，可以更快速的编写代码开 发网页。

二是显示设计视图专为不熟悉网页HTML代码的初学者而设计，可以无需编写任何代码就能快速 创建网页三是拆分视图更适合初学者来熟悉HTML网页代码，从而更加容易学会HTML网页代码编程， 伴随着有插入HTML代码的菜单提示，能够快速的完成HTML代码的编程操作，让初学者能够快速成为一 名专业网站开发人员 第一，表格布局几乎已经成为一个网页结构的标准，我们随便打开一个网站，它们的网页通常都有表格 实现布局的它能对不同的网页对象加以处理和控制，而又不用担心会受不同对象的影响，并且整个页面也 会变得美观、大方且界面排列整齐有序，能精确地定位网页元素，也可对数据进行排序，还可以将其它文档的 能也为设置各个单元格的参数变得简单，有多种表格样式，可以任意选择所需，就自动生成了表格的配色方 案，也可以自己定义相应样式，并有预览示图可以参考，生成有个性有创意的格局像新浪、网易等大型网站 信息进行格式化的，布局显得直观、简洁和整齐 第二，框架布局，它将一个浏览器窗口划分成几个部分，用户不用切换窗口就可以浏览到多个网页内容， 加快了浏览速度，统一了页面格局，实现了页面的多态化，灵活运用滚动条来查看网页内容。

当前比较流行 的腾讯网就采用了这种技术，只要进入到QQ秀商城就可以看到最典型的框架结构效果而有的网站的后台 管理平台也常采用这种技术，因为它的一个窗口可以实现多页面浏览，便于管理操作 置不能出现两种网页元素的弊点，其最大的特点就是它的灵活性，不占用页面空间，可以放在页面的任意位 置，这样也就很轻松地来构建页面布局也可将没有重叠的层的布局转化为表格布局，以定位网页元素还 ?? 100?? 万方数据 可以和透明Flash形成页面特殊效果，它也是一些网站常用的技术，如我们经常看到页面的文本内容或图像 上有鱼的游动、蝴蝶的飞舞、光的闪烁等另外，利用层与时间轴的结合，可以制作出动画效果的页面，可以 作为当前最流行的网络营销的一种手段如在层中插入某公司图片或视频的产品宣传广告，让这个广告在 页面上进行流动，这种动态效果会大大吸引人们的注意力，从而增加了商品宣传和销售，对加快公司的发展 有着促进作用虽然我们浏览者对打开网站就会弹出这类广告有着不同的意见，但是设计者人性化地加上 关闭按钮让我们有选择性地关闭，重要的是它的作用还是不容忽视的。

设计，即使我们不是专业编程人员，我们想要的布局设计也会非常容易设计起来 标签在页面中有浮 动的特性，需要利用CSS样式表来定位CSS样式表不但可以定位网页元素的位置，而且可以改变页面的排 版、统一页面的风格，可以不用每一个页面都去设置单独的样式，只需建立一个样式表文件，然后再将其链接 到其它页面就可以实现统一的页面风格了同时也可以设置不同对象的不同样式，产生独特的效果如文 本格式化、艺术字效果、页面特效、鼠标特效，背景渐变等这样不但美化了页面，而且产生良好的视觉效果， 吸引浏览者的眼球，以实现网页设计的目的 再次，Dreamweaver能很快地完成网页的动态效果、视频和图像的处理功能 利用行为可以产生奇特的鼠标、键盘和页面效应，可以防止别人直接拷贝自己网页的内容如有些网站 利用点击鼠标打开浏览器窗口行为，它可以实现自定义窗口，让浏览者看到的是个性化的窗口，加深对该网 页的印象并注意网页的内容再有我们常常在网站上看到弹出菜单效果的导航条，我们只需利用行为中的 狐等这样的大型网站中也有选项卡式的内容板块，也只需利用DreamweaverCS3中的Spry选项卡式面板、 Spry可折叠式面板、Spry折叠式技术来轻松实现。

懂使用Flash来增加网页的动感，用Flash视频产生影视效应，因为它们文件小，浏览速度快，是其它视频文 件无法比拟的，所以在网页上得到了广泛的应用比如，我们经常在新浪网上看到视频新闻，以及优酷视频 网和土豆视频网，或网站中出现广告视频窗口，都使用了Flash视频的功能，利用它来实现在线视频，让浏览 者非常容易在线收看影音文件，不用担心播放不流畅，而影响收看效果从而对信息产生强烈的敏感性，对 新闻消息产生的印象亦更加深刻，对新产品性能更加了解，为人们的生活提供了方便这些动画和视频可以 像处理软件，增强了图像与网页的协调性这三款软件合在一起就成了“网页的梦之队”，可谓是完美的组合， 让网页设计人员成为一名真正的网页设计师 最后，强大的动态交互式网页实现功能和管理维护功能 态的、数据库驱动的Web应用程序(即动态网页，可以实现在线添加、删除、修改和查询等交互行为)若使用 用手工书写代码的优点，非常适合初学者建设动态网站，如建立文章发布系统、在线音乐网站、文件上传系统、 投票系统、会员管理系统、在线调查、商务／产品展示和购物、邮件群发、论坛、Blog和网站后台管理系统等动态 网站，其操作直观易懂，让我们从枯燥的编写代码中解脱出来，成为一名真正的网页设计与制作高手。

以ASP动态网页技术为例，当前的商务网站或论坛网站中不可缺少的会员管理系统下面简述一下利 用Dreamweaver工具制作会员管理系统的过程 (1)系统结构设计 会员从网站首页登录到首页，才能实现首页上的会员功能，如会员购物、会员发布论坛新帖等不是会 员只有注册为会员才能实现会员的功能新会员注册时要通过表单的行为验证，同时检查用户名不能重名， 才能注册成功，并将密码发送到注册时用的E―Mail邮件地址中，忘记密码时可以到自己邮箱去查若对自己 注册信息进行修改，可登录到修改页，只有会员本身才能进入其修改页，所以每个会员只可以对自己的资料 ?? ?? 101 万方数据 也1】俘吼^月四1日E嚣累班^日鞋小IRI??HJ¨头巩舌贝酬睢、硎际jF信雷Ⅲ删目gfl J修以管皿性P健 的功能。

当要在众多会员中盘找某个会员信息时，通过会员查找立刻找到相关信息；对于非法注册的会员， 实现批量删除对于不同的会员分配给他们不同的权限等级，实现不同等级会员的管理功能不同系统结 构图(图I) ∈ n一 隔丫儿午八④ ＼―一／ 1 一 占赢 蕊 (2)数据库设计 符表示方式，是为了数据库的安全考虑．防止数据库被下载．给周站带来不必要的危害这类数据库不需要 单独服务器支持即可运行，将其存于站点中的data (此目录可自拟)目录中，奉示例数据库只用了一个 会员表．如有需要也可以将会员拆成多个表．如地址 信息和权限都可单独成表，以实现地址单独添加、修 改和删除，而不影响会员记录；也可单独增加或修改 会员等级．实现更多权限级别membeLm会员表 结构图(图2)其中，会员权限分为三个等级，默认 为普通会员。

(3剧建站点 利用Dreamweaver的‘姑点”下拉菜单‘新建站 点”．设置本地信息和测试服务器信息，站点名称为 会员管理系统，本地文件夹和测试服务器文件都指 向站点根目录℃：unetpub＼wwwroot"，服务器模型可 选择ASP VBScrlpl或ASPJ'avaScript．这里选择 ASPVBScripl．这和后面创建页面类型保持一致 (4)测试jI匠务器 xFProfcssiohalScrvicePack2 使用Windows 版本以上或WindowsServer2000版本眦上的Inter- nd信息服务器《简称IlS)，它的安装方法很简单，我 们可以通过‘控制面板”中的‘‘添加，删除windows组 件”来添加，只是添加时插入需要的当前操作系统版 本号相同的安装盘才能添加成功 万方数据 (5J数据库连接 利用D―weaver的应用程序面板来连接数据库，采用自定义连接字符串的方法，这种方法便于从本地 应连接‘性用测试服务器上的驱动程序”．连接字符串(圈3)为： 目3自定女{接宇#$ (6)动志页面宣现步骤 在页面中榷加表单，用于提交数据；③在表单中．利J盯表格或CSS+DIV标签设置页面市局；④在布局中加人 相应表单域；⑤对表学进行表单行为验证，确保袁单提交数据的合法性；⑥为相应动态髑页创建记录集；⑦添 加相应的服务器行为(如用户身份验证中的用户登录，限制对页的访问、用户注销和检查新用户，插^记录． 修改记录．删除记录、重复区域．分页等)。

(7)本地测试 在Dreamweaver中通过F{2快捷键来浏览首页“index 车即可浏览测试会员管理系统， (8)t传 可以利用D