Download presentation
Presentation is loading. Please wait.
1
第3章 页面操作 冉启斌
2
本章学习目标 基本操作 3.1 文档元素 3.2 页面的可视化向导 3.3 查看和编辑头文件 3.4 案例3-1
3
第3章 页面操作 3.1 基本操作
4
基本操作 页面操作是设计网页的基本操作，它包括了打开和编辑文档、控制文档属性、定义文档标题等多个方面。
5
3.1.1新建页面 当dreamweaver cs.0启动时，系统会自动创建一个无标题的文档，默认为html空网页，如果为您提供了几种选择新的工作文档的选项。可以用下列方法创建新文档： 1. 选择 “文件” > “新建”。 即出现 “新建文档”对话框，如图3-1所示。“常规”选项卡已被选定。
6
3.1.1新建页面 2. 从 “类别”列表中选择 “基本页”、“动态页”、“模板页”、“其他”或 “框架集”；然后从右侧的列表中选择要创建的文档的类型。例如，选择“基本页”创建 HTML 文档，或选择“动态页”创建 ColdFusion 或 ASP文档，诸如此类。 3. 单击 “创建”按钮。新文档在 “文档”窗口中打开。
7
3.1.2存储页面 文档创建之后需要保存它，保存文档步骤如下： 若要保存新文档，请执行以下操作：
1. 选择 “文件” > “保存”，快捷键是Ctrl+S，如图3-2所示
8
3.1.2存储页面 2. 在出现的对话框中，定位到要用来保存文件的文件夹。 注意：最好将文件保存在 Dreamweaver 站点中。
3. 在 “文件名称”文本框中，键入文件名。 请不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。具体说来就是不要在打算放到远程服务器上的文件名中使用特殊字符 （如 é、 ?、或 ￥）或标点符号 （如冒号、斜杠或句号）；很多服务器在上传时会更改这些字符，这会导致与这些文件的链接中断。 4. 单击 “保存”
9
3.1.3打开已有的页面 在 Dreamweaver 中可打开现有 Web 页或基于文本的文档，即使它们不是用Dreamweaver 创建的。可打开该文档并用 Dreamweaver 在 “设计”视图或 “代码”视图中编辑该文档。 若要打开现有的文件，请执行以下操作： 1. 选择 “文件” > “打开”，出现 “打开”对话框，如图3-3所示。
10
3.1.3打开已有的页面 2. 定位到并选择要打开的文件。 3. 单击 “打开”，文档在文档窗口中打开。
11
3.1.4浏览和调试页面 可以随时在浏览器中预览文档，而不必先保存文档或将文档上传到 Web 服务器，默认浏览器为IE浏览器，浏览页面的具体方法为： 方法一：单击 “文件” > “在浏览器中预览”，选择一个浏览器浏览。 方法二：使用快捷键F12 键在主浏览器中显示当前文档，或者使用Ctrl+F12在候选浏览器中显示当前文档。
12
3.1.4浏览和调试页面 方法三：单击在浏览器上预览/调试按钮，或者在下拉菜单中选择浏览器，如图3-4所示。
13
3.1.5 页面属性 页面标题、背景图像和颜色、文本和链接颜色以及边距是每个 Web 文档的基本属性。用户可以使用 “页面属性”对话框设置或更改页面属性。 打开页面属性对话框。 使用下面的方法之一就可以打开页面属性对话框，如图3-5所示。 方法一：单击“修改”菜单下的“页面属性”； 方法二：单击文本 “属性”检查器中的 “页面属性”按钮，即会打开 “页面属性”对话框。 方法三：在页面空白处单击右键，选择“页面属性”。
14
页面属性对话框
15
3.1.5 页面属性 2. 设置页边距 在“页面属性”对话框中的“外观”选项卡中设置上、下、左、右边距。 3. 设置页面标题
2. 设置页边距 在“页面属性”对话框中的“外观”选项卡中设置上、下、左、右边距。 3. 设置页面标题 在页面属性对话框中的“标题/编码”选项卡，在标题单行文本框中输入页面标题。 注意：如果不给页面加标题，页面会在浏览器窗口、书签列表和历史记录列表中显示为无标题文档。 4. 设置页面背景颜色 在页面属性对话框中的“外观”类别中可以设置页面的背景颜色。 注意：如果同时使用背景图像和背景颜色，下载图像时会出现颜色，然后图像覆盖颜色。如果背景图像包含任何透明像素，则背景颜色会透过背景图像显示出来。
16
3.1.5 页面属性 5. 设置页面链接颜色 在页面属性的“链接”选项卡中，可以设置页面中链接的颜色，如图3-6所示。
17
3.1.6 导入WORD文件 在dreamweaver cs.0中可以直接导入Word文档和Excel文档。其步骤如下：
在对话框中选择“清理Word段落间距”的复选框，可以清理Word生成的无关HTML代码。 3. 单击“确定” 也可以在打开了word生成的HTML文档后，再单击“命令”菜单中的“清理Word生成的HTML”选项，如图3-7所示
18
清理Word生成的HTML
19
3.1.7 HTML源文件的操作 显示HTML源代码的方法有： 方法一：单击“查看”菜单下的“代码”选项。
方法二：直接单击文档工具栏中的按钮。 方法三：单击“代码”菜单中的“代码检查器”打开代码检查器。
20
第3章 页面操作 3.2 文档元素
21
3.2 文档元素 在dreamweaver cs.0页面中有多种元素，可以使用鼠标直接单元选中这些元素，也可以采用选择标签的方法来选择相应的文档元素，其中包括可见元素和不可见元素。对于可见元素，可以单击并直接进行编辑；对于不可见元素，就需要在编辑前把它设为可见元素。
22
3.2.1选择元素 若要在“文档”窗口的“设计”视图中选择元素，通常可以单击元素。如果元素不可见，必须使其可见后才能选择它。
1. 选择可见元素 若要选择 “文档”窗口中的可见元素，请单击元素或在元素上拖过。 2. 选择不可见元素 选择不可见元素，请选择“查看”>“可视化助理”>“不可见元素”（如果还没有选择该菜单项），然后在 “文档”窗口中单击元素的标记。 3. 选择整个标记 若要选择完整的标签，请单击 “文档”窗口左下角的标签，如图3-9所示，如果要选择该单元格，单击TD标签即可选择了。
23
3.2.2改变不可见元素 有些HTML代码在浏览器中没有可见的表示形式。例如，comment 标签不会出现在浏览器中。但是，此标签在创建能够选择、编辑、移动和删除这类不可见元素的页面时很有用。Dreamweaver 使您可以指定在 “文档”窗口的“设计”视图中是否显示标记不可见元素位置的图标。若要指明在选择“查看”>“可视化助理”>“不可见元素”时显示哪些元素标记，可以在“不可见元素”首选参数中设置选项，如图3-10所示。
24
查看菜单
25
3.2.2改变不可见元素 若要更改 “不可见元素”首选参数，单击“编辑”菜单下的“首选参数”，选择 “不可见元素”选项卡，如图3-11所示，在显示的选项组中，选择需要显示或隐藏的元素复选框。
26
第3章 页面操作 3.3页面的可视化向导
27
3.3.1调整文档窗口大小 在Dreamveaver8.0中，状态栏显示“文档”窗口的当前尺寸（以像素为单位）。如图3-12所示
方法一：直接拖动窗口，查看元素如何适应页面。在 Windows 中，用户可以将“文档”窗口最大化以便它填充集成窗口的整个文档区域。
28
3.3.1调整文档窗口大小 方法二：若要将“文档”窗口的大小调整为预定义的大小，可以从“文档”窗口底部的“窗口大小”弹出菜单中选择一种大小，如图3-13所示
29
3.3.1调整文档窗口大小 注意：在 Windows 中，您可以将“文档”窗口最大化以便它填充集成窗口的整个文档区域。当“文档”窗口最大化时，您无法调整它的大小。如果是在 640 x 480 显示器上使用，可以选择“536 x 196（640 x 480，默认）”的大小。 注意：当“文档”窗口最大化时，您无法调整它的大小。对于不是很精确的大小调整，请使用操作系统的标准窗口大小调整方法，如拖动窗口的右下角。
30
3.3.2 使用标尺 标尺可帮助您测量、组织和规划布局。标尺可以显示在页面的左边框和上边框中，以像素、英寸或厘米为单位来标记。
1. 显示或隐藏标尺 若要在打开和关闭状态之间切换标尺，请选择“查看”>“标尺”>“显示”，如图3-14所示。
31
3.3.2 使用标尺 2. 更改度量单位 若要更改度量单位，请从“查看”>“标尺”子菜单中选择“像素”、“英寸”或“厘米”，如图3-14所示。 3. 设置标尺原点 要更改原点，请将标尺原点图标 拖到页面上的任意位置，如图3-15。 若要将原点重设到它的默认位置，请选择“查看”>“标尺”>“重设原点”。
32
3.3.2 使用标尺 4. 使用网格功能 单击“查看”菜单中的“网格”子菜单，选择“显示网格”即可在文档编辑区内显示网格，去掉显示网格前的 ，即可隐藏网格。 在“查看”菜单中选择“网格”子菜单中“网格设置”，弹出如图3-16所示网格设置对话框。
33
第3章 页面操作 3.4查看和编辑头文件
34
3.4.1显示头部元素 在dreamweaver cs.0可以使用 “查看”菜单、“文档”窗口的 “代码”视图或代码检查器查看文档的 head 部分中的元素。 方法一：单击“查看”菜单中的“代码”，在HTML代码中<head>与</head>之间的代码就是文档头文件的内容。 方法二：单击“查看”菜单中的“文件头内容”。对于 head 内容的每一个元素，“设计”视图中的“文档”窗口顶部都有一个标记。例如，在一个空白的HTML文件中将显示和两个标记，单击标记，属性面板出现如图3-17所示信息，主要是查看文档的Meta信息。
35
3.4.1显示头部元素 单击标记，属性面板出现如图3-18所示的信息，此标记主要是对文档标题的查看。
36
3.4.2 使用头部元素 网页的中的头部元素包含了说明信息、关键字、说明信息、基础和链接等。单击“插入”菜单下的“HTML”选项，在“文件头标签”的下拉菜单中选择要插入的文件头元素插入即可，如图3-19所示。
37
3.4.2 使用头部元素 提示：在“查看”菜单中设置显示“文件头内容”，单击 head 部分中的图标之一以选中它，即可在属性检查器中设置或修改元素的属性。 下列是有关HEAD元素的属性信息， 1. 插入设置 Meta 属性：meta 标签是记录有关当前页面的信息（如字符编码、作者、版权信息或关键字）的 head 元素。这些标签也可以用来向服务器提供信息，如页面的失效日期、刷新间隔和 PICS 等级。 2. 设置标题属性：只有一种标题属性：页面标题。在大多数浏览器中查看页面时，标题会出现在浏览器标题栏和 Dreamweaver“文档”窗口的标题栏中。标题还出现在工具栏中。在“标题”文本框中输入页面标题。
38
3.4.2 使用头部元素 3. 设置关键字属性：许多搜索引擎装置（自动浏览 Web 页为搜索引擎收集信息以编入索引的程序）读取关键字 meta 标签的内容，并使用该信息在它们的数据库中将您的页面编入索引。因为有些搜索引擎限制索引的关键字或字符的数目，或者当超过了限制的数目时，它将忽略所有的关键字，所以最好只使用几个精选的关键字。在标记为“关键字”的文本框中输入关键字，并以逗号隔开。 4. 设置描述属性：许多搜索引擎装置（自动浏览 Web 页为搜索引擎收集信息以编入索引的程序）读取说明 meta 标签的内容。有些使用该信息在它们的数据库中将您的页面编入索引，而有些还在搜索结果页面中显示该信息（而不只是显示文档的前几行）。有些搜索引擎限制索引字符的数目，所以最好将说明限制在几个字在标记为“说明”的文本框中输入描述性文本。 5. 设置刷新属性：使用刷新元素可以指定浏览器在一定的时间后应该自动刷新页面，方法是重新载入当前页面或转到不同的页面。该元素通常用于在显示了说明 URL 已改变的文本消息后，将用户从一个 URL 重定向到另一个 URL。
39
3.4.2 使用头部元素 6. 延迟是在浏览器刷新页面之前需要等待的时间（以秒为单位）。若要使浏览器在完成载入后立即刷新页面，请在该文本框中输入 0。动作指定在指定的延迟后，浏览器是转到另一个 URL 还是刷新当前页面。若要打开另一个 URL 而不是刷新当前页面，请单击“浏览”按钮，然后浏览到并选择要载入的页面。 7. 设置基础属性：使用 Base 元素可以设置页面中所有文档相对路径相对的基础 URL。 8. 设置链接标签的属性：使用 link 标签可以定义当前文档与其它文件之间的关系。 注意：head 部分中的 link 标签与 body 部分中的文档之间的 HTML 链接是不一样的。
40
第3章 页面操作 案例3-1 创建基本页面
41
案例效果
42
案例3-1 创建基本页面 知识目标： 操作步骤： 利用dreamweaver cs.0新建一个基础页面并设置页面属性
2. 在图中所示的标题文本框中设置标题为“公司简介”，如图4-18所示。
43
案例3-1 创建基本页面 3、单击“修改”菜单“页面属性”，在弹出的对话框中设置背景颜色在新建的页面中设置页面的背景颜色为蓝色，将页边距各项设置为0，如图3-22所示。
44
案例3-1 创建基本页面 4、在“页面属性”对话框中单击“链接”打开链接选项卡，并设置页面的链接颜色如图3-23所示，下划线样式设置为“仅在变换图像时显示”，链接颜色为白色，变换图像及活动链接为红色，已访问链接为浅灰色。
45
案例3-1 创建基本页面 5、单击“插入”菜单下的“HTML”选项，在“文件头标签”的下拉菜单中的“关键字”，在弹出的对话框中设置页面的搜索的关键字为“美得尔公司”，如图3-24所示。
46
案例3-1 创建基本页面 6. 输入公司的简介内容 7. 单击文件菜单下的保存命令，将文件保存为“company.html”。
47
本章小结 本章学习了如何在dreamweaver cs.0中创建一个空白页面，如何利用网页模板创建所需要的网页，并对打开的网页进行编辑及操作。对网页中头文件的编辑可以达到特殊的作用，在这其中使用了一些HTML代码。
Similar presentations
