Download presentation
Presentation is loading. Please wait.
1
Dreamware Dreamweaver是Macromedia公司出品的专门用来创建和管理网站的专业软件，应用Dreamweaver，可以轻松构建网站结构，高效地制作网页。 案例回顾 在第二章中我们对“淡蓝的天空”个人网站进行了前期的规划和设计，现将第二章已做的工作汇总如下： 第七章 网页综合设计－
2
第七章 网页综合设计－ 本章主要介绍一下内容： 7.1案例回顾 7.2网页综合设计 实例7－1 熟悉Dreamweaver的基本环境
实例7－2 创建“淡蓝的天空”个人网站本地站点 实例7－3 “淡蓝的天空”个人网站首页设计（一） 实例7－3 “淡蓝的天空”个人网站首页设计（二） 实例7－4 “淡蓝的天空”----“感动你的心灵”栏目网页设计 实例7－5 表单网页的设计 实例7－6 “游泳健身网”首页－框架网页的设计
3
网站名称 淡蓝的天空 网站定位 极具个性化的个人网站，分享个人兴趣爱好与资源，以期通过网络平台结识更多的同好者。 网站访问群体定位 所有志趣相投的朋友，共同交流和资源共享，主要定位晚上上网的全职朋友 网站逻辑结构 采用层次型逻辑结构 网站目录结构 两级目录，目录名采用拼音，images目录两级管理 色彩的选取 采用蓝色（＃0082CE）为主要色调 版面布局 如图2－15、17所示 导航系统 以栏目名称直接导航的形式体现
4
晚安 栏目内容及目的：在网络上展现自己，让别人了解自己
网站栏目 平凡的陌生人 栏目内容及目的：在网络上展现自己，让别人了解自己 感动你的心灵 栏目内容及目的：共享作者喜欢的文摘、网络文学、杂文、幽默等，与有共同兴趣的朋友一同来欣赏，以期望在心灵深处有所触动。 请聆听 栏目内容及目的：把自己喜欢的音乐呈现给同好者或浏览者，来共同欣赏这美妙的乐曲。 那笨拙的脚印 栏目内容及目的：分享作者收集的网络资源 同心结 栏目内容及目的：主要是给有着共同兴趣的朋友提供相互链接的平台，以达到能和同类的网站进行相互推荐，建立良好的合作关系的目的 晚安 栏目内容及目的：主要是留言本，提供浏览者与浏览者、浏览者与作者间共同交流的地方。
5
注： “感动你的心灵”和“那笨拙的脚印”为重点栏目。
以上为“淡蓝的天空”个人网站前期已做的相关工作，本章仍然以第二章案例为准来详细介绍完整的网页设计过程，期望以点代面使学习者对网站的设计过程有个完整设计思路。
6
7.2网页综合设计 实例7－1 熟悉Dreamweaver的基本环境
一、要求与目的 ★ 掌握Dreamweaver的基本工作环境：窗口、菜 单、插入、文档工具栏、状态栏等 ★ 掌握“属性”工作面板 二、过程与步骤
7
1.启动Dreamweaver软件 单击“开始－程序－启动－Macromedia－Macromedia Dreamweaver MX 2004” 启动Dreamweaver软件。 Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。使用者可以选择面向设计人员的布局或面向手工编码人员需求的布局。首次启动 Dreamweaver 时，会出现一个工作区设置对话框，如图7－2所示。
8
图7－1 选择工作区布局
9
如果设计者熟悉编写代码，选择“代码编写者”；如果不熟悉编写代码，选择“设计者”。如果以后想更改工作区，可在软件正常启动后使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如图7－2所示：
10
图7－2 更改工作区
11
注释：“设计者”工作区是一个使用多文档界面的集成工作区，其中全部文档窗口和面板被集成在一个更大的应用程序窗口中，并将面板组停靠在右侧。
“代码编写者”同样是集成工作区，但将面板组停靠在左侧，文档默认状态下显示代码窗口。 本例选择“设计者”工作区界面。
12
2. Dreamweaver工作界面 建立新页面或者打开已经完成的页面时，会出现工作区窗口，如图7－3所示。栏目说明如下： (1)“插入栏”，也叫工具栏（如图7－4）：包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。每个对象都是一段 HTML 代码，允许在插入它时设置不同的属性。例如，设计者可以通过单击“插入”栏中的“表格”按钮插入一个表格。
13
图7－3 Dreamweaver工作环境
14
图7－4 插入栏 某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。
15
“常用”类别可以创建和插入最常用的对象，例如图像和表格。
“插入栏”中“常用”按钮里的选项说明： “常用”类别可以创建和插入最常用的对象，例如图像和表格。 “布局”类别可以插入表格、div 标签、层和框架。还可以从三个表格视图中进行选择：“标准”（默认）、“扩展表格”和“布局”。当选择“布局”模式后，可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。 “表单”类别包含用于创建表单和插入表单元素的按钮。 “文本”类别可以插入各种文本格式设置标签和列表格式设置标签。 “HTML”类别可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。
16
“服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，可以将这些对象插入“代码”视图中。
“应用程序”类别可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。 “Flash 元素”类别可以插入 Flash 元素。 “收藏”类别可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。
17
(2) “文档”窗口 显示当前创建和编辑的文档。
(3) 文档工具栏 文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。如图7－5。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
18
图7－4 文档工具栏
19
以下对选项进行说明： 显示代码视图 仅在“文档”窗口中显示“代码”视图。
显示代码视图 仅在“文档”窗口中显示“代码”视图。 显示代码视图和设计视图 在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。 显示设计视图 仅在“文档”窗口中显示“设计”视图。 标题 允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。
20
没有浏览器/检查错误 使您可以检查跨 浏览器兼容性。
文件管理 显示“文件管理”弹出菜单。 在浏览器中预览/调试 在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。 刷新设计视图 当您在“代码”视图中进行更改后刷新文档的“设计”视图。 视图选项 允许您为“代码”视图和“设计”视图设置选项。
21
(4) “属性检查器”（如图7-6）： 用于查看和更改所选对象或文本的各种属性。
(4) “属性检查器”（如图7-6）： 用于查看和更改所选对象或文本的各种属性。 图7－6属性检查器
22
(5) “面板组”（如图7-7） 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头；若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。
(6) “文件”面板（如图7-8） 使您可以管理您的文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。
23
Dreamweaver MX 2004还提供很多的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。
图7－7面板组 图7－8 文件面板 Dreamweaver MX 2004还提供很多的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。
24
(7) 状态栏 状态栏提供正创建的文档有关的其它信息。如图7－9所示。
(7) 状态栏 状态栏提供正创建的文档有关的其它信息。如图7－9所示。 图7－9状态栏
25
标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 <body> 可以选择文档的整个正文。
窗口大小 弹出菜单（仅在“设计”视图中可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。 “窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。
26
3.菜单的简要说明 Dreamweaver MX 2004中的菜单条如图7-10所示： 图7－10 菜单条
27
“文件”菜单 包含“新建”、“打开”、“保存”、“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。
“编辑”菜单 包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。 “查看”菜单 使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。 “插入”菜单提供“插入”栏的替代项，用于将对象插入您的文档。 “修改”菜单 使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。
28
“文本”菜单使您可以轻松地设置文本的格式。
“命令”菜单 提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。 “站点”菜单 提供用于管理站点以及上传和下载文件的菜单项。 “窗口”菜单 提供对 DW中的所有面板、检查器和窗口的访问。 帮助”菜单 提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统，还包括各种语言的参考材料。
29
实例7－2 创建“淡蓝的天空”个人网站本地站点
一、要求与目的 ★ 建立本地网站文件夹，确立网站位置 ★ 使用Dreamweaver站点定义向导定义本地网站 ★ 创建网站目录结构 二、过程与步骤 1. 建立本地网站文件夹，确立网站位置 (1) 在桌面状态下，首先双击打开“我的电脑”。 (2) 在“我的电脑”窗口中，打开E盘，选择“文件－新 建－文件夹”命令，在E盘中建立名为“bluesky”的文件夹，如图7－11所示。
30
图7－11建立“bluesky”文件夹
31
2. 建立Dreamweaver本地站点 (1) 启动 Dreamweaver MX 2004
(2) 选择“站点－管理站点”（即从“站点”菜单选择“管理站 点”）。 出现“管理站点”对话框，如图7－12所示。 图7－12管理站点对话框
32
(3) 在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。 出现“站点定义”对话框，如图7－12所示。如果对话框显示的是“高级”选项卡，则单击“基本”。 出现“站点定义向导”的第一个界面，在文本框中要求为站点输入一个名称，该名称可以是任何所需的名称。在本例中输入“bluesky”，以在 Dreamweaver MX 2004中标识该站点。
33
图 6－13 输入站点名称
34
(4) 单击“下一步”。出现向导的下一个界面，如图7-14所示，询问您是否要使用服务器技术。选择“否”选项，表示目前该站点是一个静态站点，没有动态页。
图7－14选择是否要使用服务器技术
35
(5) 单击“下一步”。出现询问您要如何使用您的文件向导界面，如图7－15所示。选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”的选项。 在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。单击该文本框旁边的文件夹图标。 随即会出现“选择站点的本地根文件夹”对话框。在其中选择E盘下的“bluesky”文件夹。
36
图7－15 选择站点本地文件夹
37
(6) 单击“下一步”， 出现询问“您如何连接到远程服务器”向导界面，在对话框中选择“无”，如图7-16所示。目前，本地站点信息对于开始创建网页已经足够了，以后可以设置有关远程站点的信息。
图7－16 选择如何连接到远程服务器
38
(7) 单击“下一步”，该向导的下一个屏幕将出现，其中显示上述的设置概要。如图7-17所示。
(7) 单击“下一步”，该向导的下一个屏幕将出现，其中显示上述的设置概要。如图7-17所示。 图7-17 设置概要
39
(8) 单击“完成”完成设置。 随即出现“管理站点”对话框，显示刚建的新站点。单击“完成”关闭“管理站点”对话框。
(8) 单击“完成”完成设置。 随即出现“管理站点”对话框，显示刚建的新站点。单击“完成”关闭“管理站点”对话框。
40
3.建立网站目录结构 (1)、打开“我的电脑”，在E盘“bluesky”目录下，建立images文件夹，用来放置网站各文件中共同的图片。
(2)、根据已划分好的网站栏目（见6.1节），在“E:\bluesky”目录下分别建立以网站栏目名称的拼音为文件夹名的文件夹，即分别为“jiaoyin”、“pingfanderen”、“tongxinjie”、“xinling”、“wanan”、“yinyue”六个文件夹。 (3)、在第二步建立的六个文件夹中，再分别依次建立六个images文件夹，以用来分别存放六个栏目的图片。参见图2－5所示。 (4)、至此，已为“淡蓝的天空”站点创建了本地站点和目录结构，下一步，就可以分别编辑具体的网页了。
41
实例7－3 “淡蓝的天空”个人网站首页设计（一）
一、要求与目的 ★ 掌握利用一张图片作为网页整体界面的设计方式，以及提高页面效率的思路 ★ 掌握页面整体设置的方法 ★ 掌握表格及其表格的设置、合并、背景添加等相关操作 ★ 掌握图形及其图形的插入
42
二、过程与步骤 1.准备工作 (1) 为了更好地张扬个性，符合网站的名称，表现网站的内涵，首页采用以一张图片作为网页整体界面的设计方式，利用互联网收集的素材和photoshop软件合成制作了如图7－18所示的图画作为网站的整体界面。
43
图7-18 一张整体图片作为首页界面
44
注：图片中采用蓝色（＃0082CE）为主要色调，并将栏目名称、网站名称与图形合成在一起。其中栏目名称、网站名称字体颜色也采用主色调，制作过程请参考其它书籍。
在网页设计中，除了要进行前述的一些规划和设计工作外，在实际制作时还要考虑网络因素，这些因素将决定网页最终的下载显示速度以及使用的便利性。 设计原则：“8秒钟规则”，即浏览者在浏览一个网站时应在8秒钟时间范围内下载一个完整网页。所以在设计网页时应使预计的下载时间少于8秒钟。
45
提示：影响网页显示速度的主要因素就是网页中图像的数量及大小。加快页面下载时间最有效的方法，就是减少页面中的图像大小和数量。
在本例中为了加快页面显示速度，体现“8秒钟规则”，利用photoshop软件将图7－18整体切割成6个部分，如图7-19切割示意图所示，分割后的5个文件保存至站点根目录的images下备用。其中中间白色区域不用专门保存成文件，在后续设计时可用白色背景替代，以减轻网络传输负担，提高页面传输效率。
46
(2) 设置显示器分辨率为1024×768，作为本例的设计标准，也是将来建议用户浏览网页的最佳分辨率。
(2) 设置显示器分辨率为1024×768，作为本例的设计标准，也是将来建议用户浏览网页的最佳分辨率。 图7-19 切割示意图
47
2.创建首页文件，并进行页面设置 (1) 启动 Dreamweaver MX 2004，单击菜单“文件－新建”，出现“新建文档”对话框如图7－20所示，在“类别”中选择基本页，在“基本页”中选择“THML”，点“创建”按钮，建立一个新的文档。
48
图7－20 “新建文档”对话框
49
(2) 页面设置 选择“设计”视图，打开新文档窗口下部的属性栏，选择其中的“页面属性”按钮，弹出“页面属性”窗口，如图7－21所示，在其中“分类”里的“外观”中，设置“左边距”、“上边距”、“下边距”值均为0个象素。 边距设置的目的是为了将来在浏览器中浏览网页时，上、下、左不留空白，使得网页整洁、美观。
50
图7－21 设置页面边距
51
在“分类”里的“标题/编码”中，设置标题为“淡蓝的天空”，如图7－22所示。点“确定”，完成文档的页面设置。
图7－22 设置文档标题
52
提示：网页标题的设置也可以在新建文档的文档工具栏中直接设置。如图7－23所示。
图 7－23 文档工具栏中直接设置网页标题 (3) 将文件保存，文件名为“index”。首页文件名一般默认命名为“index.htm”。 (4) 设置index.htm文件为首页 在软件窗口右边的文件面板中可看到刚保存的index.htm名如图7－24，在文档面板选择index.htm文件单击鼠标右键出现如图7－25的菜单，选择“设成首页”项完成。
53
图7－24在文件面板的显示 图7－25设置首页
54
3.设计表格 图6－26 建立表格并设置
55
(1) 单击“插入栏”中的按钮，在弹出的表格窗口中建立一个4行3列的表格，其中表格宽度设置为1002象素，边框粗细、单元格边距、单元格间距均设为0，页眉选择两者，如图7－26所示。点击“确定”，完成后的表格如图7－27所示。 提示：也可单击“插入”菜单，选择“图像”按钮，插入表格，功能上是一样的。
56
图7－27 建立的4行3列表格结果
57
(2) 合并单元格并设置参数 为了把图7－19分割的图形文件无缝拼装起来，需要对表格中的单元格进行合并，并对合并后的单元格参数做相应的设置。步骤如下： A . 将第一列四个单合格合并成一个单元格：选中第一列四个单元格（如图7－28），在下面属性面板中点选合并按钮（如图7－29），完成单元格合并，并再次在属性面板中为新单元格设置“宽度”为：491（491为图7－19中blue1.jpg图形宽度尺寸，以下同），选择“垂直”为顶端（如图7－30），完成结果如图7－31所示。
58
图7－28 选中第一列四个单元格 图7－29 选择合并按钮
59
图7－30 设置合并后单元格宽度 图7－31 合并单元格最终结果图
60
B. 选中第二列第一个单元格，设置属性值：宽度为：326，水平：左对齐，垂直：顶端。如图7－32所示。
图7－32 设置单元格参数
61
选中第二列第二个单元格，设置属性值：高度：18（方法同上）。
选中第二列第三个单元格，设置属性值：高度：208。 合并第三列第一至第三个单元格，并设置合并后的单元格属性值：水平：左对齐，垂直：顶端，宽度为：185，高度为：450。 将第二列第四个单元格与第三列第四个单元格横向合并，并设置合并后的单元格属性值：高度为：131。 表格合并后的结果图如图7－33所示。
62
图7－33 首页表格合并及参数设置后最终结果图
63
4. 插入图形及设置背景图像 (1) 在最终建好的表格中（如图7－33，以下同）选择A单元格，在其中插入两张图片。步骤为：单击“插入栏”中的 图像按钮如图7－34，在弹出的“选择图像源文件”对话框中选择blue1.jpg（分割后的第一个文件，如图7－19，以下同）如图7－35所示。完成后在同一单元格中，接着插入图像blue2.jpg
64
(2) 选择B单元格,插入图像blue3.jpge。 (3) 选择C单元格,插入图像blue4.jpge。
图7－34 插入图像 (2) 选择B单元格,插入图像blue3.jpge。 (3) 选择C单元格,插入图像blue4.jpge。 提示：在插入blue4.jpg后，网页中的表 格会被撑大变形，这时只需在表格空白处单击一下，表格就会自动回复原尺寸。
65
图7－35 选择插入的图像文件
66
至此，已完成首页的整体画面拼装工作，结果如图7－18。
(4)设置单元格背景 选择D单元格，在下面“属性”面板中为本单元格设置背景如图7－36所示。选择背景图片为blue5.jpg。保存文件。 图7－36 为单元格设置背景 至此，已完成首页的整体画面拼装工作，结果如图7－18。
67
实例7－3 “淡蓝的天空”个人网站首页设计（二）
一、要求与目的 ★ 掌握网页中嵌入网页的方法，即iframe 标签的实际应用 ★ 掌握在页面中flash动画使用与透明设置 ★ 掌握图片热区划分及利用热区链接的方 法 ★ 掌握层及层的使用
68
二、过程与步骤 (1) 在首页中嵌入网页图6－37 嵌入的网页内容 打开实例2－3（一）设计好的首页文件，为了使首页整体布局不单调，在本例首页中首页拟嵌入一个已设计好的网页frame.htm（如图7－37，设计方法参考HTML、CSS、Javascript相关内容）。
69
图6－37 嵌入的网页内容
70
步骤为： (1) 点选如图7－33中的E单元格区域，在“属性”面板中设置：垂直：顶端。 (2) 单击“插入”菜单中的“标签”命令，在出现的“标签选择器”对话框中，选择“标记语言标签”中的“HTML标签”，在右边HTML标签窗口中选择“iframe”标签代码，如图7－38所示。
71
图7－38 插入“iframe”标签
72
(3) 单击“插入”按钮，在弹出的“iframe”标签编辑器中，在“源”处选择要插入的frame.htm网页，其他设置如图7－39所示。
73
提示：图7－37中高度值需与图7－33中E单元格高度值保持一致，均为208点“确定”完成网页嵌入工作。保存后浏览结果如图7－40所示。
图7－40 嵌入frame.htm网页后的首页图
74
(1) 点选如图7－33中的D单元格区域，在“属性”面板中单击，设置文本为右对齐。
2. 插入flash动画并设置透明 为了修饰首页画面，添加一个已准备好的flash动画，步骤为： (1) 点选如图7－33中的D单元格区域，在“属性”面板中单击，设置文本为右对齐。 (2) 单击“插入栏”中的按钮，在弹出的“选择文件”对话框中，在网站根目录下的images中选择flash动画文件cztk1.swf。单击“确定”后，在“设计”窗口右下角出现flash动画图标如图7－41。在下面“属性”面板中设置flash动画的大小值为宽：208、高：130，如图7－42所示。
75
图7－41 网页中插入flash后的标志 图7－42 设置flash动画的大小
76
(3) 保存首页文件，单击“属性”面板中的按 钮，发现flash动画背景与主页不协调如图7－43所示。为保持首页整体效果，需将flash动画背景设置成透明效果如图7－44，
77
步骤如下: A. 点选“设计”窗口右下角flash动画图标，然后单击属性面板中的“参数“按钮如图7－45所示。
78
B. 在出现的“参数”对话框中单击 按钮，在下面 “参数”添加“wmode”，在“值”一栏添加“transparent”，单击”确定完成，如图7－46。
图7－46添加flash动画背景透明参数
79
3.首页栏目名称于对应网页的链接 (1) 图片热区 在本例中，由于将栏目名称与首页整体做成一张图片，栏目名称与对应网页链接时，需采用图片热区及热区链接的方法。实现步骤如下： 单击图7－33中C单元格图片，然后在下面“属性”面板中单击“矩形热点工具”（如图7－47），在C单元格图片中拉出一个矩形框，将“平凡的陌生人”几个字选中，如图7－48，这时属性面板变化为如图7－49所示的面板框，在链接处点选，选择网站根目录下“pingfanderen”子目录中的my.htm文件，在“目标”区选择_blank方式，完成图片中“平凡的陌生人”栏目字与对应网页my.htm链接过程。
80
图7－48选择的热区范围 图7－47 选择热点工具 图7－49 热区链接
81
提示：图7－49中，目标选择框中选择的值相当于HTML语言中的超连接标识href中的属性target选择项，有： _blank，_parent，_self，_top。详情参考HTML一章。
(2) 采用同样的方法，依次将“感动你的心灵”与“xinling”子目录中的xling1.htm文件、“请聆听”与“yinyue”子目录中的music.htm文件、“那笨拙的脚印”与“jiaoyin”子目录中的zg.htm文件、“同心结”与“tongxinjie”子目录中的link.htm文件、“晚安”与“wanan”子目录中的liuyanban.htm文件进行对应网页文件的超级链接。 4. 创建层及在层中嵌入网页 (1) 创建层 在“插入”工具栏“布局”选项卡中单击“描绘层”按钮 （如图7－50所示），然后用鼠标在图7－33中D区域中拖出一个范围如图7－51所示。
82
建立层后，单击层标志，在下面出现的层属性面板中设置参数，参数值如图7－52所示。
图7－50 插入层 图7－51 拖动范围 建立层后，单击层标志，在下面出现的层属性面板中设置参数，参数值如图7－52所示。 图7－52设置层的参数
83
其中：“层编号”：指层的名称，以便对层进行标识。
“左”、“上”：指层相对于页面或被嵌入层的左上角的位置。 “宽”、“高”：指层的宽度、高度。 “可见性”：设置可见性参数。 “背景颜色”：层的背景颜色，此项空白时表示背景色为透明。 “溢出”：确定层的内容超出其大小时的处理方式。 Visible（可见）：扩展大小使其所有内容均可见，层向右下方扩展。 Hidden（隐藏）：保持层大小，剪切其超出不分。 Scroll（滚动）：无论内容是否超出层的大小均为层加入滚动条。 Auto（自动）：只有在内容超出层的边界时出现滚动条 “剪辑”：可设置层可见部分边界到页面边界距离。 “Z轴”：层的叠放顺序。 提示：创建层也可选择“插入－布局对象－层”。
84
(2) 在层中嵌入网页 在层中单击一下，嵌入网页musicbj1.htm（此网页内容是一个播放音乐并可控制的播放页面，用Javascript教本编制，学习者可自行结合前述章节内容研读分析）。网页嵌入方法同上，参数设置如图7－53所示。 图7－53 层中嵌入网页－参数设置 5. 至此，完成“淡蓝的天空“个人网站的首页设计任务。如图2－2所示
85
实例7－4 “淡蓝的天空”----“感动你的心灵”栏目网页设计
一、要求与目的 ★ 掌握网页中嵌入CSS代码的方法 ★ 掌握图片链接的方法 ★ 掌握文字链接方法 ★ 掌握电子邮件的链接方法 ★ 掌握网页定位显示的方法 ★ 掌握网页导航系统的设计 二、过程与步骤 1. 总体栏目设计思路 由于本栏目是网站的重点栏目，内容主要和文学方面的 有关，为了体现栏目特性，做了如下设计（如图7－54所 示）：
86
图7－54“感动你的心灵”栏目设计图
87
(1) 栏目主页设计成一本书的样式，名称为：xling.htm。
(2) 栏目布局设计为左中右型，左、中为主要界面，右为栏目导航条。其中左边嵌入一个内容为不断交替显示图画的网页，名称为：xling1.html,中间嵌入栏目主题网页，名称为xling2.htm. (3) 栏目网页主色调为浅蓝（#E3F0F6） 2. 设计封面 将图7－55的封面图分割成如图7－56所示的六块（尺寸大小见随书提供的电子文档）。
88
图7－55 栏目封面图 新建一个文件，用文件名为xling.htm在“xinling”目录中保存。建立一个12×8的表格，然后单元格合并成如图7－57所示的表格，插入图形（方法参见实例2－2）后如图图7－58所示。
89
图7－56 栏目封面图分割图 图7－57 合并表格示意图
90
给栏目网页嵌入CSS代码控制整个网页格式，步骤为： (1) 添加超链接字体和定义超链接字体上不显示下划线
在图7－57的A、B、C、D、E、F中分别插入文摘、网文、测验、幽默、杂文、专栏的对应图形后结果如图7－58所示。方法参见实例2－2。 3. 网页嵌入CSS代码 给栏目网页嵌入CSS代码控制整个网页格式，步骤为： (1) 添加超链接字体和定义超链接字体上不显示下划线 单击“面板组”中的“设计”，选择“CSS样式”，在“未定。。。” 上右击选择“新建”如图7－59所示，在出现的“新建CSS样式” 窗口中（如图7－60所示）的“选择器类型”选择“标签”，在 “标签”下拉框中选择“a”（HTML链接标识），点击确定。在 “a的CSS样式定义”窗口中设置参数如图7－61所示，确定完成。
91
图7－58 栏目界面结果图 图7－59 添加CSS样式 图7－60 新建CSS样式
92
图7－61 定义超链接的字体及链接后不显示下划线
(2) 设置超链接文字颜色 在“面板组”中的“CSS样式”上再次单击右键新建CSS样式，在“新建CSS样式”窗口中选择如图7－62所示的选项，确定后在出现的“a:link的CSS选项定义”窗口中“颜色”选择#CC3399，如图7－63所示，确定完成。
93
图7－62 设置超链接 图7－63设置超链接文字颜色
94
用同样的方法设置：A:visited的文字颜色（浏览过的超链接文字颜色）为：#993399
A:active的文字颜色（光标按下超链接时文字的颜色）为：#FF0000 (3)设置光标移到超链接文字上方时光标样式和文字的颜色 如（2）过程，新建CSS样式表在如图7－62所示的“选择器” 中选择“A:hover”，确定后在出现的“A:hover的 CSS样式定义”窗口中文字颜色设置为：#0099CC（方法同上）， 设置光标样式如图7－64所示，确定完成。 图7－65为选择的光标最终样式
95
假设我们要对栏目页面的整体格式做如下控制：字体：华文行楷，字体大小：16像素，页面上边距、左边距为0像素，页面背景为：xbj.jpg。
图7－64 选择超链接光标样式 图7－65选择的光标最终样式 (4) 添加控制整体页面格式的CSS代码 假设我们要对栏目页面的整体格式做如下控制：字体：华文行楷，字体大小：16像素，页面上边距、左边距为0像素，页面背景为：xbj.jpg。 CSS代码添加步骤如下：
96
A. 添加字体和设置大小 新建CSS样式，在出现如图7－60中“标签”选项选择“body”（其它选项不变），单击确定，在出现的“body的 CSS样式定义”窗口中选择字体，但其中没有“华文行楷”选项如图7－66所示，单击“编辑字体列表。。”，在出现的“编辑字体列表”窗口中做如图7－67所示的操作，完成字体添加过程。然后选择“华文行楷”字体，大小设置16px。 图7－66 设置字体
97
在图7－66中的左边“分类”选择“方框”后做如图7－68所示的操作，完成页面上边距、左边距的设置。
图7－67 字体添加过程 B. 设置页面 在图7－66中的左边“分类”选择“方框”后做如图7－68所示的操作，完成页面上边距、左边距的设置。
98
图7－68设置页面上边距、左边距
99
完成以上过程后，最终在Dreamweaver的代码窗口中
C. 页面背景 在图7－66中的左边“分类”选择“背景”后做如图7－69所示的操作，完成页面背景的设置。最后点“确定”完成整体CSS代码添加过程。 图7－69 设置页面背景 完成以上过程后，最终在Dreamweaver的代码窗口中 自动给栏目页面添加的CSS代码为：
100
<style type="text/css">
<!-- a { font-size: 16px; text-decoration: none; } a:link { color: #CC3399; a:visited { color: #993399; a:active { color: #FF0000;
101
a:hover { cursor: s-resize; color: #0099CC; } body { font-family: "华文行楷"; font-size: 16px; background-image: url(images/xbj.jpg); margin-top: 0px; margin-left: 0px; --> </style>
102
5. 导航中的各选项与各自对应的页面进行超级链接 (1) 导航条中 “网文”图片的超级链接
4. 嵌入网页 在图7－54左边中间单元格中嵌入xling1.html页面，参数为：名称：temp1、对齐：右对齐、宽：387、高：413、滚动：否、不显示边框。方法参见实例2－3。 在图7－54中间的单元格中嵌入xling2.html页面，参数为：名称：temp2、对齐：右对齐、宽：374、高：324、滚动：否、不显示边框。方法参见实例2－3。 5. 导航中的各选项与各自对应的页面进行超级链接 (1) 导航条中 “网文”图片的超级链接 单击导航条中的“网文“图片（图7-57中的A单元格），在属性面板中（如图7－70所示）单击 选择“xinling\fram1.htm”链接文件，在“目标”中填入“temp2”，完成链接过程
103
提示：链接操作方法还可以单击图7－70中 按钮拖至左边“面板组”中的“文件”面板中的对应文件后松手，同样完成链接过程。如图7－71所示。
图7－70 在属性面板中设置超级链接 其中在“目标”中填入的“temp2”是上个步骤嵌入xling2.html页面时起得嵌入区域名称，这就意味着在“目标”中填入的名称是什么，将来单击超级链接时出现的网页就在“目标”中填入的名称区域中显示，即本步骤中意味着将来点击“网文”图标时，“网文”图标链接的网页fram1.htm将在temp2区域中显示。请熟练掌握此种定位显示方法，此方法在网页设计中经常使用。 提示：链接操作方法还可以单击图7－70中 按钮拖至左边“面板组”中的“文件”面板中的对应文件后松手，同样完成链接过程。如图7－71所示。
104
(2) 导航条中的其它图片的超级链接方法同上。
图7－71 拖动完成链接过程 (2) 导航条中的其它图片的超级链接方法同上。
105
6. 文字链接和电子邮件链接 单击网页最下面单元格，在属性面板中设置水平、垂直都为居中，然后在此单元格格中输入“首页 喜欢吗？”，此时发现第3步中设置的页面整体CSS已经起了效果了，文字自动为：字体：华文行楷、字体大小：16px。 选中“首页”两字，在属性面板中“链接”中选择首页文件index.htm，完成文字方式的超级链接，这也是本页面返回主页的通道。
106
完成后发现电子邮件的链接属性已受到第3步中设置的页面超级链接CSS参数的控制。
图7－72 “电子邮件链接”按钮 图7－73电子邮件链接 完成后发现电子邮件的链接属性已受到第3步中设置的页面超级链接CSS参数的控制。 7.“淡蓝的天空”----“感动你的心灵”栏目网页的设计最终结果如图7－54所示。本网站其其他栏目请学习者自行练习完成。
107
实例7－5 表单网页的设计 一、要求与目的 ★ 了解表单的用途 ★ 掌握在网页中应用表单的步骤 二、过程与步骤
新建一个文件，用文件名为zhucebiao.htm在“swiming”目录中保存. 1.新建一个3行5列的表格，表格宽度为：770 px,其它参数如图7－74所示。 图7－74 设置表格参数
108
除第一列和最后一列外，其它单元格背景色设为：#00B3D3，第一列至第四列的宽度分别设置为：45、114、445、114（单位均为：像素）。
2. 在第一行的第二列中输入标题文字“会员注册”，在属性面板中设置参数如图7－75所示。 图7－75 标题文字参数设置 在此单元格中插入水平线，步骤为：选择“插入－HTML－水平线”命令，参数设置如图7-76所示。其中为水平线颜色设置白色，方法是在点击代码窗口，修改水平线代码为：
109
步骤为：单击第二行的第三列单元格，选择“插入栏”中“常用”按钮里的“表单”选项。这时插入栏变为如图7-77所示的各表单选项
<hr align="center" width="90%" size="1" noshade color="#FFFFFF"> 加下划线的代码为添加进去的。 图7-76水平线参数设置 3. 在第二行的第三列单元格中插入表单 步骤为：单击第二行的第三列单元格，选择“插入栏”中“常用”按钮里的“表单”选项。这时插入栏变为如图7-77所示的各表单选项 图7-77 表单选项
110
单击表单按钮 ，这时在单元格中出现表单的红色标识记号如图7-78所示，此表单标识的范围也代表有关表单的作用范围，这一点对初学者很重要，所有与表单有关的处理对象、标识等必须放在此标识范围之内。
图7-78插入表单后的标识 提示：也可以采用菜单完成表单的创建：“插入－表单－表单”。 4. 在表单的红色标识内单击一下后，插入一个10行3列的表格（为了方便以下说明，此表格在这里称为表格2），参数设置为：宽度：100％，填充、间距、边框均为0。 5. 选中表格2的整个第二列，设置参数如图7－79所示。
111
选中表格2的整个第三列，将水平参数设为左对齐，其它参数如图7－79一样。
图7－79 设置整列参数 选中表格2的整个第三列，将水平参数设为左对齐，其它参数如图7－79一样。 6. 在表格2的第1行第2列单元格内输入文字“姓名：” （以下不特别说明的均指在表格2中操作），单击第1行第3列单元格后，单击文本字段按钮插入文本字段 ，参数设置如图7-80所示。
112
图7－80 设置文本字段 7. 单击第2行第2列单元格内输入文字“性别：”，单击第2行第3列单元格后，单击单选按钮 插入单选在按钮，接着输入文字“男”，再单击单选按钮 后输入文字“女”参数设置如图7-81所示，其中在第一个单选按钮的属性中设置“初始状态”为“已勾选”，表明此选项为默认选项。
113
8. 单击第3行第2列单元格内输入文字“密码：”，单击第3行第3列单元格后，单击文本字段按钮 插入文本字段，参数设置如图7-82所示。
图7－81 设置单选按钮 8. 单击第3行第2列单元格内输入文字“密码：”，单击第3行第3列单元格后，单击文本字段按钮 插入文本字段，参数设置如图7-82所示。
114
9. 单击第4行第2列单元格内输入文字“年龄：” ，单击第4行第3列单元格后，单击列表/菜单 按钮插入列表，得到的效果如图7-83所示。
如图7-82 设置密码 9. 单击第4行第2列单元格内输入文字“年龄：” ，单击第4行第3列单元格后，单击列表/菜单 按钮插入列表，得到的效果如图7-83所示。 选中“列表”标识，在属性面板内单击“列表值”按钮，在弹出的对话框中输入第一个年龄段，如图7-84所示。
115
单击 按钮后输入第2个年龄段，同理输入其它年龄段，如图7-85所示。
单击 按钮后输入第2个年龄段，同理输入其它年龄段，如图7-85所示。 图7-83 加入列表、菜单按钮
116
图7-84 第一个年龄段的输入 图7-85 其它年龄段的输入
117
单击“确定”按钮后回到页面状态，在属性面板的“初始化时选定”列表内选择“20－30”，如图7-86所示，这样在浏览器中“20－30”便成为初始选择项。
图7-86 设置初始选择项
118
10. 单击第5行第2列单元格内输入文字“你喜欢何种泳姿：”，单击第5行第3列单元格后，单击复选框 按钮，输入名称“自由泳”，同理输入其它栏目，复选框设置的内容可以进行多项选择，如图7-87所示。
图7-87 设置复选框
119
11. 单击第7行第2列单元格内输入文字“您的建议：”，单击第7行第3列单元格后，单击文本区域按钮
11. 单击第7行第2列单元格内输入文字“您的建议：”，单击第7行第3列单元格后，单击文本区域按钮 ，参数设置如图7-88所示。 图7-88 设置多行列表区域
120
12. 单击第8行第2列单元格内输入文字“您的E-MAIL地址：”，单击第8行第3列单元格后，单击文本字段按钮 ，效果如图7-89所示。
121
13. 单击第9行第2列单元格内输入文字“现在提交：”，单击第9行第3列单元格后，单击按钮 ，参数设置如图7-90所示。
13. 单击第9行第2列单元格内输入文字“现在提交：”，单击第9行第3列单元格后，单击按钮 ，参数设置如图7-90所示。 图7-90提交按钮的属性设定
122
再次单击按钮 ，设置“重置”按钮，参数设置如图7-91所示。
再次单击按钮 ，设置“重置”按钮，参数设置如图7-91所示。 图7-91重置（恢复）按钮的属性设定 14.至此便完成了一个会员注册表的表单。如图7－92所示。
123
提示：1．表单多用来收集来自用户的信息，通常用在调查、订单、搜索等页面中。
图7－92 完整的表单 提示：1．表单多用来收集来自用户的信息，通常用在调查、订单、搜索等页面中。 2．有效的表单需要两个组件：一是描述表单的页面（即本例），二是处理用户在表单域中所输入信息的服务器段应用程序或客户端教本（如ASP）。后一个设计请参考相关书籍。
124
实例7－6 “游泳健身网”首页－ 框架网页的设计 一、要求与目的 ★ 了解框架的用途 ★ 掌握在网页中应用框架的步骤
实例7－6 “游泳健身网”首页－ 框架网页的设计 一、要求与目的 ★ 了解框架的用途 ★ 掌握在网页中应用框架的步骤 ★ 掌握框架网页定位与嵌入网页定位的不同 二、过程与步骤框架的理解
125
在浏览网页的时候，常常会遇到这样的一种导航结构。就是超级链接做在左边单击以后链接的目标出现在右面。或者在上边单击链接指向的目标页面出现在下面。要做出这样的效果，就需要使用框架。为了更好的理解什么是框架。我们画一张示意图来进行讨论。如图7-93， 图7-93，框架示意图
126
这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index
这是一个左右结构的框架。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件，图中我们用index.htm命名。框架中左边命名为A，指向的是一个网页A.htm。右边命名为B，指向的是一个网页B.htm。 以下我们就利用框架建立一个“游泳健身网”主页为例,如图7-94所示，来详细说明框架网页的设计过程2.建立框架。 启动Dreamweaver，点“文件”菜单－新建，弹出“新建文档”对话框做如图7－95所示选择，或在插入栏>布局>选“框架”中的：上方和嵌套的右侧框架，如图7－96所示。
127
图7-94 “游泳健身网”主页
128
图7-95 利用菜单建立框架
129
图7-96 利用插入栏的布局选项建立框架 选择“窗口”菜单－“框架”，弹出“框架”面板如图7－97所示。从框架面板可知，系统对顶部、左、右框架生成命名。顶部框架名为：topframe，左框架名为：mainFrame，右框架名为： rightFrame，当然可以通过框架属性面板对框架重新命名，了解这一点非常重要。创建超级链接时，要依据它正确控制指向的页面。
130
图7－97 建立的框架网页页面
131
在框架“标题”中输入文字“游泳健身网”，点“文件－保存框架页”，给框架页命名为swiming
在框架“标题”中输入文字“游泳健身网”，点“文件－保存框架页”，给框架页命名为swiming.htm，再点击“文件－保存全部”，在弹出的“另存为”对话框中在“文件名”处输入文件名为：right.htm,在此处保存时一定需要注意软件提示的虚线保存区域如图7－98所示，按事先拟定好的名称（如图7－97）来命名。
132
图7－98 保存右框架网页 图7-99选择框架网页
133
在点“保存”后，软件接着提示保存左框架，命名为：main. htm，保存后再次提示保存顶部框架，命名为：head
在点“保存”后，软件接着提示保存左框架，命名为：main.htm，保存后再次提示保存顶部框架，命名为：head.htm。完成整个框架的保存工作，总计为四个网页：swiming.htm――框架网页、head.htm――顶部网页、main.htm――左框架网页、right.htm――右框架网页。 3. 设置框架各网页属性 在软件右边的“框架”面板中单击左上角如图7-99所示，选择总体框架，在下面的属性中做如图图7-100所示的设置。 “框架”面板中再次单击顶部框架如图7－101所示，在下面的属性中做如图7-102所示的设置 。
134
图7-100 设置总体框架属性 图7－101选择顶部框架 图7-102设置顶部框架属性 图7-103设置左框架属性
135
同方法，设置左框架属性如图7-103所示。修改框架中的参数：选择整个框架，单击“代码”视图，在窗口中将原来的参数：
<frameset rows="200,*" cols="*" frameborder="NO" border="0" framespacing="0"> <frame src="head.htm" name="top" scrolling="no" noresize id="top"> <frameset cols="*,80" frameborder="NO" border="0" framespacing="0"> <frame src="main.htm" name="main" scrolling="yes" id="main"> <frame src="right.htm" name="rightFrame" scrolling="NO" noresize> </frameset>
136
修改为： <frameset rows="200,*" border="0" framespacing="0" frameborder="NO"> <frame src="head.htm" name="top" scrolling="no" noresize id="top"> <frameset cols="510,*" framespacing="0" frameborder="NO" border="0"> <frame src="main.htm" name="main" scrolling="yes"id="main" > <frame src="right.htm" name="rightfram" scrolling="no" noresize > </frameset> 目的是为了左框架网页main.htm在浏览器中按510像素宽度显示。
137
建立新的html页，在属性面板中设置“页面属性”为：上边距：2px，左边距：1px。插入一个1行2列的表格，表格属性设置如图7－104所示。
4.设计内含的各框架网页 顶部框架网页head.htm 建立新的html页，在属性面板中设置“页面属性”为：上边距：2px，左边距：1px。插入一个1行2列的表格，表格属性设置如图7－104所示。 图7－104 表格属性设置 第一列插入图logo-1.gif，第二列插入图home.jpg，保存名为：head.htm,最终效果图为图7－105所示。
138
(2) 右框架网页――right.htm 步骤为： 第一步：建立新的html页
图7－105 顶部框架网页－head.html (2) 右框架网页――right.htm 步骤为： 第一步：建立新的html页 第二步：给网页建立CSS文件：单击“面板组”中的“设计”，选择“CSS样式”，在“未 定。。。”上右击选择“新建”如图7－59所示，在出现的“新建CSS样式”窗口中（如图7－106所示）的“选择器类型”选择“标签”，在“标签”下拉框中选择“body”，在“定义在”中选择“新建样式表文件”后，点击确定。
139
图7－106 建立样式表文件 在随后出现的“保存样式表文件为”窗口中，给样式表文件命名问text1.css。保存后设置”body”属性为：字体：宋体、字体大小：12px、颜色：#0066FF。根据实例2－4所讲授的方法设置其它CSS参数，text1.css内容为：
140
body { font-family: "宋体"; font-size: 12px; color: #0066FF; } a:link { color: #FFFFFF; text-decoration: none; a:hover { color: #FF0000; text-decoration: underline; a:visited {
141
保存文件，文件名为：right. htm，保存text1. css。此时在刚保存的right
保存文件，文件名为：right.htm，保存text1.css。此时在刚保存的right.htm代码中软件自动添加了一句代码（点击right.htm代码视图查看）： <link href="text1.css" rel="stylesheet“ type="text/css"> 请将本例CSS方式和实例2－4中CSS代码的添加方式做一比较，本例属于外部单独CSS文件控制网页的方式，实例2－4中CSS代码控制属于内部控制方式（CSS代码放在同一网页的脚本中）。
142
第三步：建立一个3行1列的表格，表格参数为：宽度：250px,填充、间距、边框。在第一行中插入一个6行1列表格，表格参数为：宽度：100％,填充：5、间距、边框均为0，背景色：#666666。在第二行中插入一个3行1列表格，表格参数为：宽度：100％,填充：5、间距、边框均为0，背景色：#00b3d3。最终建立如图7－107所示的效果图。后续部分请学习者参考图7－107自行完成，也可参考随书提供的电子示例。 第四步 链接、定位网页显示窗口：选择图7－107所示的“蛙泳技术”文字，在下面的属性面板中设置链接文件为wy.htm(已设计好的，请学习者自行设计)，关键是设置“目标”选项： “目标”也称为目标区。也就是超级链接指向的页面出现在什么目标区域。
143
默认的情况下域中总有四个选项： _blank ：单击链接以后，指向页面出现在新窗口中。 _parent：用指向页面替换他外面所在的框架结构。
图7－107右框架－right.htm 默认的情况下域中总有四个选项： _blank ：单击链接以后，指向页面出现在新窗口中。 _parent：用指向页面替换他外面所在的框架结构。
144
C、 _self： 将连接页面显示在当前框架中。
D、_top： 跳出所有框架，页面直接出现在浏览器中。 提示：如果要链接到自己的站点外的某一页面，请始终使用"_top" 或 "_blank" 来确保该页面不会嵌入框架内。 在本例中，为了实现在点击右框架网页－right.htm中的选项如“蛙泳技术”时，“蛙泳技术”链接的网页wy.htm在左框架区域即main.htl区域中显示，在“目标”区域填入“main”，如图7－108所示。这里的“main”参数项来源是根据图7－103左框架属性设置时，当初在“框架名称”中所填入的参数值决定的。
145
这样通过 “目标”选项填入参数的选择，就可随意定位链接网页的显示区域，这项技术网页学习者应多加理解和实践。
图7－108 链接文件和定位显示区域 图7－107中的其它文字链接可参考本步骤完成。 (3) 左框架网页――main.htm 左框架网页――main.htm最终完成效果如图7－109所示，请学习者自行完成。
146
按上述步骤完成其它一些相同设计和链接后，最终完成利用网页框架技术设计的 “游泳健身网”首页，最终总体效果如图7－94所示。
图7－109左框架网页――main.htm 按上述步骤完成其它一些相同设计和链接后，最终完成利用网页框架技术设计的 “游泳健身网”首页，最终总体效果如图7－94所示。
147
但需要重点提示的是网页框架技术在有些种类的浏览器或低版本的浏览器中得不到支持。这一点设计者在设计网页时应多加注意。
提示：框架有很多优点，但是若理解不很透彻，容易搞混。如果设计的网站页面不多，可以创建一个不使用框架的Web页面来完成框架的功能。例如，如果您想让导航条显示在页面的左侧或顶部，既可以使用框架页面，也可以使用表格而不使用框架。 但需要重点提示的是网页框架技术在有些种类的浏览器或低版本的浏览器中得不到支持。这一点设计者在设计网页时应多加注意。 操作题 1、试用Dreamweaver建立自己的个人主页，要求;要有规划和设计书面资料。 2、试用Dreamweaver建立一个公司名为“太阳电脑公司”的网站，公司主要经营电脑配件。
Similar presentations
