Download presentation
Presentation is loading. Please wait.
1
大学计算机应用基础实践教程 共 页
2
实践项目九 网 页 制 作 共 页
3
主要内容 活动三 设计旅游类网站 共 页
4
旅游类网站有丰富多彩，能满足大众的需求，图文并茂，结构清晰，搜索便利等特点，本活动将制作图9-90 所示的虚拟旅游类网站。
共 页
5
共 页
6
本活动网站采用框架结构中的“上方固定，下方固定”模式，在各页面用表格进行布局，
使页面结构清晰。 共 页
7
1．表格的基本操作 表格的基本操作包括插入表格、选择表格、添加或删除行和列、单元格的拆分与合并等。掌握这些基本用法，利用表格就可以实现对网页的布局，如汽车之家的网站就是用了大量表格来进行布局的，如图9-91 所示。 共 页
8
共 页
9
表格通常由标题、行、列、单元格、边框几部分组成，如图9-92 所示，是一个3 行3 列
的表格，边框粗细为2 像素。其中，标题位于表格第一行，用来说明表格的主题。表格中的每一个格就是单元格；水平方向的一系列单元格组合在一起就是行；垂直方向的一系列单元格组合在一起就是列；边框是分隔单元格的线框。 共 页
10
共 页
11
共 页
12
共 页
13
共 页
14
对于插入的表格有时需要进行编辑，编辑操作首先是选择表格要编辑的区域，可以选择整个表格、一行、一列、连续或不连续的多个单元格，具体操作步骤如图9-96 和图9-97 所示。
共 页
15
共 页
16
共 页
17
共 页
18
共 页
19
共 页
20
在应用表格时，有时需要对单元格进行拆分与合并。实际上，不规则的表格是由规则的表格拆分、合并而成。拆分是指将一个单元格拆分为多个单元格，合并是指将多个连续的单元格合并成一个单元格。具体操作步骤如图9-101～图9-104 所示。 共 页
21
共 页
22
共 页
23
共 页
24
共 页
25
2．在表格中添加内容 表格建立后，可以在表格中添加内容。内容包括表格、文本、图像等网页元素。插入图像的具体步骤：在“编辑区”中，将光标移至要插入图像的单元格中，选择“插入”/“图像”（如图9-105 所示），在弹出的“选择图像源文件”对话框中，浏览并选中要插入的图像，单击“确定”按钮，表格中即会出现插入的图像，如图9-106 所示。 共 页
26
共 页
27
共 页
28
在表格中插入新的表格，称为表格的嵌套，用这种方式可以创建出复杂的表格，是网页布局常用的方法之一，具体操作步骤如下：
（1）在“编辑区”中，将光标移到要插入表格的单元格中。 共 页
29
（2）选择“插入”/“表格”命令。与插入新表格操作相同，在弹出的“表格”对话框中，
在“行数”文本框中输入2，“列数”文本框中输入2 设置“表格宽度”为90%，单位是“像素”， “边框粗细”为0 像素，单击“确定”按钮。此时，在单元格中插入了一个2 行2 列的表格，如 图9-107 所示。 共 页
30
共 页
31
（2）通过键盘直接在单元格中输入文字，或通过其他文档采用“复制”和“粘贴”的方法将文字输入到单元格中。
在表格中插入文字具体的操作步骤如下： （1）将光标移至新插入表格的单元格中。 （2）通过键盘直接在单元格中输入文字，或通过其他文档采用“复制”和“粘贴”的方法将文字输入到单元格中。 共 页
32
3．表格属性 利用属性检查器对表格属性进行设置，可以美化表格，实现网页布局所需要的效果。属性设置包括两部分，一是整个表格的属性设置，如表格的大小、边框、对齐方式、背景等；二是单元格的属性设置，如单元格的大小、对齐方式、边框、背景等。 共 页
33
共 页
34
共 页
35
共 页
36
共 页
37
单元格的属性设置与表格属性设置相似，先选中需要设置属性的单元格，在右键快捷菜单中选择“编辑标签”命令，弹出“标签编辑器”对话框（如图9-112 所示），通过该对话框的“常规”和“浏览器特定的”选项对单元格的属性进行设置。 共 页
38
共 页
39
4．表格数据的导入与导出 在网页制作时，有时需要输入大量的表格数据。Dreamweaver CS4 可以实现把表格数据导入到网页中或把网页中的表格数据导出。另外，使用Dreamweaver CS4 还可以对表格中的数据进行排序操作。在Dreamweaver CS4 中导入表格数据的具体操作步骤如图9-113～图9-115 所示。 共 页
40
共 页
41
共 页
42
共 页
43
共 页
44
共 页
45
共 页
46
共 页
47
共 页
48
5．框架 框架是网页中常使用的效果。使用框架，可以在同一浏览窗口中显示多个不同的文件。最常见的用法是将窗口的左侧或上侧的区域设置为目录区，用于显示文件的目录或导航条。而将右边一块面积较大的区域设置为页面的主体区域。通过在文件目录和文件内容之间建立的超链接，用户单击目录区中的文件目录，文件内容将在主体区域内显示，用这种方法便于用户继续浏览其他的网页文件。 共 页
49
框架实际上是一种特殊的网页，它可以根据需要把浏览器窗口划分为多个区域，每个框架区域都是一个单独的网页。
框架（Frames）由框架集（Frameset）和单个框架（Frame）两部分组成。框架集是一个定义框架结构的网页，它包括网页内框架的数量、每个框架的大小、框架内网页的来源和框架的其他属性等。单个框架包含在框架集中，是框架集的一部分，每个框架中都放置一个内容网页，组合起来就是浏览者看到的框架式网页。 共 页
50
访问者的浏览器不需要为每个页面重新加载与导航相关的图形。
使用框架具有以下优点： 使网页结构清晰，易于维护和更新。 访问者的浏览器不需要为每个页面重新加载与导航相关的图形。 每个框架网页都具有独立的滚动条，因此访问者可以独立控制各个页面。然而，在网页中使用框架也具有一些缺点： 某些早期的浏览器不支持框架结构的网页。 下载框架式网页速度慢。 不利于内容较多、结构复杂页面的排版。 大多数的搜索引擎都无法识别网页中的框架，或者无法对框架中的内容进行遍历或搜索。 共 页
51
Dreamweaver CS4 提供了15 种框架类型（见 图9-123），具体操作步骤见图9-121～图9-125 所示。
1）创建空白框架网页 Dreamweaver CS4 提供了15 种框架类型（见 图9-123），具体操作步骤见图9-121～图9-125 所示。 共 页
52
共 页
53
共 页
54
共 页
55
共 页
56
2）将现有文档创建为框架网页 在Dreamweaver CS4 中，可以对现有的页面进行拆分，构成一个框架网页，例如，现有页面文档在浏览器中的效果如图9-126 所示，选择“插入”/“HTML”/“框架”/“上方及左侧嵌套”命令（如图9-127），在顶部和左侧拆分出新的页面，立即构成了一个上方固定左侧嵌套的框架页面，在上方和左侧分别插入图像，浏览效果如图9-128 所示。 共 页
57
共 页
58
共 页
59
共 页
60
（1）将鼠标移至要创建嵌套框架集的框架内，如图9-129 所示。
框架的嵌套是指一个框架集套在另一个框架集内。“上方固定，左侧嵌套”实际上就是一个嵌套的框架集，是在上下结构的框架集中嵌套一个左右结构的框架集，具体操作步骤如下： （1）将鼠标移至要创建嵌套框架集的框架内，如图9-129 所示。 共 页
61
共 页
62
（2）选择”插入”/“HTML”/“框架”/“左对齐”命令，新插入一个框架集，如图9-130所示。此时，嵌套框架集制作完成。
共 页
63
在框架面板中选择需要处理的框架，通过拖动框架边框调整框架大小；通过选择“修改”/“框架集”/“拆分上框架”或“拆分下框架”或“拆分左框架”或“拆分右框架”拆分框架；将框架边框拖离页面实现删除框架。使用框架集“属性检查器”可以方便地设置框架集的边框宽度和颜色、框架行和列的大小，如图9-131 所示。此外利用框架“属性检查器”还可以设置框架的属性，包括框架名称、源文件、滚动条、边框、边界等，如图9-132 所示。 共 页
64
共 页
65
共 页
66
（1）建立站点，将站点名定义为“旅游天地”。
（2）选择“文件”/“新建”/“示例中的页”/“上方固定，下方固定”，单击“创建”按钮,保存框架文件。 共 页
67
（3）在上方页面建立一个2 行9 列的表格，按图9-90 所示在表格中插入图像。
（4）在中间页面建立一个10 行4 列的表格，按图9-90 所示在表格中插入图像和文字。 （5）在下方页面建立一个1 行1 列的表格，按图9-90 所示在表格中插入图像，插入一个层及文本。 共 页
68
谢谢 共 页
Similar presentations
