互动网页设计

第五章互动网页设计

5．1 用Dreamweaver制作静态网页

Dreamweaver MX是建立Web站点和应用程序的专业工具。

它将可视布局工具、应用程序开发功能，和代码编辑支持组合为一个强大的工具，利用它可快速地创建符合标准的站点和应用程序。

开发人员可以将其选择的服务器技术与Dreamweaver配合使用，建立将用户连接到数据库、Web服务和旧式系统的强大Internet应用程序。

下面介绍用DreamWeaver来制作一个静态网页的方法。

演示：“华中大在线”

预备：在D盘根目录下建一个文件夹“MyWeb”

5.1.1 制作网站主页

启动DreamWeaver；

单击“文件”菜单的“新建”命令；

选择“常规”选项中“基本页”的“HTML”；

然后单击“创建”按钮。

打开一个默认的htm类型的文件（untitled-1*）。选择“设计”选项后，在此基础上进行编辑。

1、建立并保存主页文档

在“标题”栏中输入“华中大在线”

单击“修改”菜单下的“页面属性”命令

在出现的“页面属性”对话框中设置：

背景：白色；文本：黑色(2004在“外观”中)

超级链接：红色(2004在“链接”中)

单击“文件”菜单下“保存”命令，将该文件保存在文件夹D:\MyWeb中，文件名为index.htm。

2主页的设计(演示、分析：主页)

（1）插入主页的画面

单击“插入”菜单的“图像”命令，弹出“选择图像源”对话框；

在文件夹“D:\MyWeb\image”中：

选择文件“bg1.jpg”后，单击“确认”按钮

（2）在主页中建立超级链接

右击出现的图片后，选择“属性”命令；

在“属性”对话框中选择“矩形热点工具”。

在图片上用鼠标选择“新闻”区域为热点区域。

打开该热点的“属性”对话框，进行属性的设置：链接：

为当前文件夹D:\MyWeb下的web/xinwen.htm

即在网页中单击此热点时，链接到web目录下的xinwen.htm页面；

目标：选择_self”，表示不另外打开新的浏览器窗口替代：键入“浏览新闻”，表示链接提示信息

关闭“属性”面板，“新闻”已设置为超级链接。类似地，再将“论坛”区域设置为超级链接：

链接为：web/luntan.htm；

替代为：论坛

（3）保存主页

单击“文件”菜单下“保存”命令

保存编辑好的index.htm文件

按F12键，可浏览已经修改了的主页

单击超级链接“新闻”，可进入到相应的子页面。(不过由于要访问的子页面还没有建立，所以浏览器显示“该页无法显示”等信息)

5.1.２建立一个子页面(新闻页)

１、设计“新闻页”的框架(演示、分析：新闻页) “新闻页”的框架如下图所示：

页标动画

子子页选项

主要内容

2、建立“新闻页”的文档

单击“文件”菜单的“新建”命令；

选择“常规”选项中“基本页”的“HTML”

然后单击“创建”按钮，创建一个新的html文档

在“标题”栏中输入“华中大新闻中心”

单击“修改”菜单的“页面属性”命令

进行与主页相应的设置：

单击“文件”菜单“保存”命令，将文件保存在文件夹Ｄ:\MyWeb\Web中，文件名为xinwen.htm

３、新闻页的设计

(1) 用表格实现粗框架

单击“插入”菜单“表格”命令，

在对话框中的行数和列数中输入“2”和“1”

然后单击“确定”按钮。

在表格第一行单击鼠标，使之处于编辑状态

用同样方法在该行内插入一个1行、2列的表格(2) 设计“页标”的宽和高

激活新插入的表格的第一行、第一列

此时状态栏如图所示：

加重表示已经激活，即：

编辑已经处于该列、或单元格中。

在属性框中将该列的宽、和高分别设置为:

241和106象素:

(3) 插入一张图片作为页标

单击“插入”菜单“图象”命令

插入文件“MyWeb/image/online.gif”中的图片

(4) 设计动画的框架

在第1行、第2列中再插入一个2行、1列的表格使编辑处于这个新插入表格的第1行

在该行的属性框中设置高为60象素。

(5) 在该行中插入一张Flash动画

单击“插入”菜单“媒体”的“Flash”命令；

插入文件“MyWeb/flash/xqbanner.swf”中的动画。

在该动画的“属性”对话框中，将其

宽设置为535(或525)，高为60，其他设置如图：

保存后，按F12进行显示。

（若限制Flash动画的显示，

单击提示栏，选择“允许阻止的内容”）

(6) 设计“子页选项”

在第2行的属性框中进行如下设置：

高为46，背景颜色为黑色，字体颜色为白色：

在该行中输入一些导航性的文字：

校内快讯|专题报道|校报在线|高校动态|返回首页

选择文字后，打开属性对话框：

选择字的“大小”(如18)并加粗

选择字体：如：华文新魏。若没有，可添加字体：先打开“字体”框的“编辑字体列表”

单击按钮“＋”添加列表项；

单击按钮“«”将所选择的字体添加到列表中

将每个文字项目依次设置为超级链接，分别链接到相应的页面。