基于Dreamweaver的网站设计与实现

摘要：以自行设计的网站为例，介绍了利用Dreamweaver CS5网页制作工具，实现静态页面的功能，如导航条、动态时钟、滚动文字等的设计方法，实现动态页面的功能，如动态网页开发平台的架设，登录界面等的设计方法。

关键词：Dreamweaver 网站设计 动态网页

中图分类号：TP311 文献标识码：A 文章编号：1007-9416（2013）10-0149-03

在当今信息时代，Internet不仅是一个通信和交流的平台，同时也是一个必不可少的宣传、展示和交易的平台，与其他设计工作相比，网站设计具有交互性、多态性、综合性、艺术性等特点，一个网站建设过程综合了策划创意、平面设计、网络工程、时间空间处理等诸多方面，因此，网页要做到识别性强、形象品质好、设计理念清楚、色彩统一和谐、定位准确，其中最重要的是遵循用户第一、主线突出原则。

1 系统结构设计

系统结构设计是对网站的整体规划，是网站开发的基础。主要包括界面风格设计、导航设计、交互设计。

1.1 界面风格设计[1]

设计网站应主题鲜明，视觉设计要传达一定的意图和要求，要有明确的主题。因此，主题鲜明是网页设计的前提，不同的主题应有不同的设计风格。不同的设计风格，给人以不同的视觉效果。网页设计属视觉设计领域，它的最终目的是使网页内容清晰、具有条理性，并达到最佳的视觉效果。其设计不但要单纯、简练、清晰和准确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明的突出设计主题。同时，要使网页从形式上给人良好的印象，鲜明的突出主题，可以通过对网页的空间层次、主从关系、视觉秩序及彼此间逻辑关系的把握运用来实现。合理布局、调整主次的位置关系、突出主题，能让浏览者在短时间内过目不忘、回味无穷。

设计网站应内容与形式统一，内容与形式统一是指在进行页面编排时，形式语言必须符合页面的内容，能够体现内容的丰富含义，实现内容与形式的有机结合。网页形式要具有丰富的表现力，要将一个无生命的网页予以生命，变成充满活力的生命体。应用不同的形式，形成不同的造型效果和趣味，有利于创造独特新颖的页面，这些方法包括单纯与秩序、对比与调和、对称与平衡、节奏与韵律以及留白。不论采用那种形式的方法，都必须与内容达成一致。

网站首页如图1所示。

1.2 导航设计

导航是引导学习者学习的航标，是教学策略的体现。成功的数字学习资源应该具有良好有效的学习导航系统，才能避免学生因为学习资源的丰富而在信息中迷失方向、偏离学习目标，降低学习效率。因此，在本专题学习网站设计中，导航策略设计力求目标明确、方法简单、内容完整、相互交叉，以便学习者在浏览网站进行学习时，很快在网站内找到、浏览到自己需要的资源，方便地应用网站提供的各种资源、方法进行学习和协作交流。本站的导航设计采用了常见的导航条导航、功能面板导航、分页面导航三种形式。

导航条在网页中被广泛运用，相对于文本导航，图像导航条导航更加生动、形象。选择[插入]|[图像对象]|[导航条]命令，打开“插入导航条”对话框，可以增加、删除导航条元件，可将选中的导航条元件向上移动、向下移动，可选[修改]|[导航条]命令修改导航条，如图2所示。

而在同一模块内采用了Spry选项卡式面板导航，Spry选项卡式面板可将多项内容放置于同一区域中，浏览者可以通过单击面板上需要访问的选项卡来显示相应内容，其余内容隐藏，而不需要打开单独的页面来访问相应内容，因此给浏览者提供了方便，也节省了网页空间。

将插入点定位于网页要插入Spry选项卡式面板的位置，选择[插入]|[布局对象]|[Spry选项卡式面板]命令，即可在网页中插入Spry选项卡式面板。单击插入Spry选项卡式面板的名称，选择插入Spry选项卡式面板，打开属性检查器，如图3所示，在“面板”列表框中可重新设置面板名称，在“默认面板”下拉列表框中可以选择加载时默认显示哪个选项卡及其内容，如果要修改某选项卡的内容，可在属性检查器的“面板”列表框中选择对应的选项卡，然后在编辑窗口的内容区域内添加相应的内容。

1.3 网站的系统结构

本网站包括8个模块，系统结构如4图所示。

2 首页设计

2.1 动态时钟的实现

将如下代码加入需要显示时钟的页面：

var today=new Date（）；

var hours=today.getHours（）；

var minutes=today.getMinutes（）；

var seconds=today.getSeconds（）；

var timeValue=""+（（hours >12）？hours-12：hours）；

timeValue+=（（minutes

timeValue+=（hours>=12）？"pm"："am"；

function initArray（）{

this.length=initArray.arguments.length

for（var i=0；i

this[i+1]=initArray.arguments[i] }

var d=new initArray（"星期日"，"星期一"，"星期二"，"星期三"，"星期四"，"星期五"，"星期六"）；

document.write（""，today.getFullYear（），"年"，""，today.getMonth（）+1，"月"，""，today.getDate（），"日"，d[today.getDay（）+1]，" "，timeValue）；

2.2 滚动文字的实现

通过加入一个HTML标记可以添加滚动文字，增加文字的动态效果，丰富页面内容：

这里的文字是滚动的效果

......

3 动态网页开发平台的架设

交互式动态网页是指能动态更新的交互式网页，其内容的更新和维护是通过基于数据库技术的管理系统完成的。

在Windows操作系统中，一般都是利用IIS来构建动态网站开发平台的，IIS是一种允许在公共Internet上信息的Web服务器，IIS通过使用超文本传输协议（HTTP）传输信息，同时支持FTP服务，IIS能很好地支持ASP，是动态网站开发的理想平台，本网站是在Windows 7环境下开发的。

3.1 安装IIS

Windows系统在默认情况下没用安装IIS，必须在安装Windows后另行安装。打开Windows功能窗口，找到Internet信息服务，将Internet信息服务前面的加号点开，找到web管理工具，选中IIS管理服务、IIS管理脚本和工具、IIS管理控制台。然后点开万维网服务，点开应用程序开发功能，依次选中：.NET扩展性、ASP、、ISAPI扩展、ISAPI筛选器，如果想安装PHP，需要将CGI也选中。选中这些之后，其他默认即可，然后点确定，Windows就开始安装IIS了。

3.2 配置IIS

安装完IIS还需要设置网页主目录及IP地址，进入“控制面板”窗口，单击[系统与安全]图标，进入“系统和安全”页面后，再单击其中的[管理工具]图标，出现“管理工具”窗口后，双击“Internet信息服务（IIS）管理器”选项进行IIS设置，在“Internet信息服务（IIS）管理器”窗口中删除“Default Web Site”，添加信天媒体站点。进入“Asp”设置页面后，展开“行为”选项组，将“启用父路径”的参数设置为True。接下来配置IIS站点，单击窗口右侧的“操作”栏中的“绑定”选项，打开“网站绑定”对话框，在“网站绑定”对话框中选定当前命名的网站，单击[编辑]按钮打开“编辑网站绑定”对话框，可以在其中设置网站的IP地址、端口号和主机名，如果是创建本地测试服务器，可以不在其中设置任何内容，然后单击[确定]按钮返回“网站绑定”对话框，在“网站绑定”对话框中单击[关闭]按钮，完成网站绑定参数的设置。在“Internet信息服务（IIS）管理器”窗口中双击[默认文档]按钮，打开“默认文档”页面后单击“操作”栏中的“添加”选项，出现“添加默认文档”对话框，在该对话框中的“名称”文本框中输入index.asp，表明名为index.asp的文档将作为网站的默认文件，单击[确定]按钮，返回“Internet信息服务（IIS）管理器”窗口，完成IIS的配置，如图5所示。

3.3 设置站点

为了方便在设计制作过程中查看页面效果，需要在Dreamweaver中为设计的动态网页设置一个临时站点，启动Dreamweaver，选择[站点]|[管理站点]命令，出现“管理站点”对话框，选定事先设置好的用于创建动态网站的站点名（如信天媒体），然后单击[编辑]按钮，打开“站点设置对象”对话框，根据需要设置或更改站点名称和本地站点文件夹。选择“服务器”类别，单击[添加新服务器]按钮，在出现的设置选项中添加服务器名称、连接方法、服务器文件夹和Web URL参数，注意将“连接方法”设置为“本地/网络”。切换到“高级”选项卡，将“服务器模型”设置为ASP VBScript。单击[保存]按钮返回“站点设置对象”对话框，即可看到服务器列表出现新添加的服务器，选中“测试”选项。单击[保存]按钮，完成Dreamweaver站点的定义。

3.4 连接数据库

Dreamweaver提供了多种连接数据库的方法，最常用的是使用ASP进行连接，具体连接到数据库的方式又分为“数据源名称（DSN）”和“自定义连接字符串方式”两种。本网站采用的是“数据源名称（DSN）”方式连接到数据库，选择[窗口]|[数据库]命令，打开“数据库”面板，单击“数据库”面板上的[添加]按钮，从菜单中选[择数据源名称（DSN）]选项，出现“数据源名称（DSN）”对话框后，单击[定义]按钮，打开“ODBC数据源管理器”对话框，利用其中的选项，即可定义一个数据源，如图6所示。[2]

4 资源下载模块登录页面设计[3]

在用户访问资源下载模块时，首先要进行身份验证，这个功能是靠登录页面来实现的，如图7所示。

该界面设计先执行[插入]|[表单]|[表单]命令，然后将鼠标放置在该表单中，执行菜单[插入]|[表格]命令，插入3行2列的表格，在表格的第1行，第2列执行[插入]|[表单]|[文本域]命令，插入一个单行文本域表单对象，并定义文本域名为“username”，在表格的第2行，第2列执行[插入]|[表单]|[文本域]命令，插入一个单行文本域表单对象，并定义文本域名为“password”，在表格的第3行，执行[插入]|[表单]|[按钮]命令，插入两个按钮，一个是登录时用的“提交表单”，值为“登录”，另一个为“重设表单”，值为“重置”。表单编辑完成后，下面编辑该网页的动态内容，使用户可以通过该网页中表单的提交实现登录功能。打开“服务器行为”面板，单击该面板上按钮，执行菜单[用户身份验证]|[登录用户]命令，向该页面添加“登录用户”的服务器行为，如图8所示。执行[文件]|[保存]命令，将该文档保存到本地站点中，完成登录网页的制作。

5 结语

随着网络教育的发展，校园文化网站的风格设计显得尤为重要，设计独特、新颖、让人回味无穷的网站，给人以智慧、启迪的网络文化。同时，网站系统的建设与维护是个长期的过程，需要不断地与使用者沟通，不断地增加新的功能、美化界面，从而使网站不断地注入新的活力。

参考文献

[1]徐美雅.浅谈网站风格设计的基本要求.天津电大学报[J]，2009年3月：59-62.

[2]程晓旭.动态网页设计技术的分析和比较[J].计算机应用研究，2002年第12期：135-155.

[3]刘红坤等.实现登录页面验证码功能的不同方式[J].福建电脑，2011年第6期：139-140.