（中职）第1章 Dreamweaver CS6基础ppt课件.ppt

《（中职）第1章 Dreamweaver CS6基础ppt课件.ppt》由会员分享，可在线阅读，更多相关《（中职）第1章 Dreamweaver CS6基础ppt课件.ppt（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题（中职）第1章 Dreamweaver CS6基础第 1 章 Dreamweaver CS6 基 础1.1中文DreamweaverCS6工作区简介1.1.1 中文 Dreamweaver CS6 工作区设置1设置中文 Dreamweaver CS6 工作区运行中文 Dreamweaver CS6，弹出它的欢迎屏界面，如图 1-1-1 所示。单击其内“新建”栏中的“HTML”链接文字，进入 Dreamweaver CS6 工作区，如图 1-1-2 所示。图 1-1-1 “Adobe Dreamweaver CS6”欢迎屏图 1-1-2采用“设计器”风格的 Dreamwea

2、ver CS6 工作区“由图 1-1-2 可以看出，Dreamweaver CS5 的工作区主要由标题栏、应用程序栏、菜单栏、文档窗口、状态栏、“标准”工具栏、“文档”工具栏、“属性”栏（或“属性”面板）、“插入”栏（或“插入”面板）和面板组等组成。单击“查看”“显示面板”或“隐藏面板”命令，可以显示或隐藏面板组和“属性”栏。单击“查看”“工具栏”“”命令，可以打开或关闭“文档”、“标准”或“样式呈现”工具栏。单击“窗口”“属性”或“插入”命令，可以打开或关闭“属性”与“插入”栏。单击“窗口”“”（面板名称）命令，可以打开或关闭相应的面板。2工作区布局和首选参数设置（1）改变 Dreamwea

3、ver CS6 工作区：单击“窗口”“工作区布局”“”命令，可以切换一种 Dreamweaver CS6 工作区布局。例如，单击“窗口”“工作区布局”“经典”命令，可切换到与 Dreamweaver CS6 相似的经典工作区状态。单击“工作区切换器”按钮，弹出它的菜单，单击该菜单内的命令，也可以切换一种工作区布局。（2）保存工作区：调整工作区布局（例如：打开或关闭一些面板、工具栏，调整面板的位置等）后，单击“窗口”“工作区布局”“新建工作区”命令，可弹出“新建工作区布局”对话框，在“名称”文本框内输入名称（例如， 第 1 工作区”），如图 1-1-3所示。再单击“确定”按钮，即可将当前工作区布

4、局保存。以后，只要单击“窗口”“工作区布局”“”命令（例如，单击“窗口”“工作区布局”“重置第 1 工作区”命令），即可进入相应风格的工作区。单击“窗口”“工作区布局”“管理工作区”命令，可以弹出“管理工作区”对话框，如图 1-1-4 所示。利用该对话框可以将工作区名称更名或删除。图 1-1-3“新建工作区布局”对话框图 1-1-4“管理工作区布局”对话框（3）首选参数设置：单击“编辑”“首选参数”命令，弹出“首选参数”对话框，Dreamweaver CS6 的 许 多设 置 需要 使用该对话框，以后将不断涉及该对话框的使用。例如，单击该对话框左边“分类”列表框中的“常规”选项，切换到“常规”

5、选项卡。利用它可以设置一些文档和编辑默认功能。例如，选中“分类”列表框中的“新建文档”选项，此时“首选参数”对话框如图 1-1-5 所示。在“默认文档”和“默认文档类型 （DTD）”下 拉列表框内可以选择默认的文档类型。在“默认扩展名”文本框内可以输入网页文件的默认扩展名。2图 1-1-5 “首选参数”（新建文档）对话框1.1.2 欢迎屏界面和建立本地站点1欢迎屏界面和新建网页文档通 常 在 启 动 Dreamweaver CS6 后 或 没 有 打 开 任 何 文 档 时 ， 会 自 动 弹 出 “ Dw ADOBEDREAMWEAVER CS6”界面，如图 1-1-1 所示。该对话框由 4

6、 部分组成，分别为“打开最近的项目”、“新建”、“主要功能”、“Dreamweaver 帮助”。如果选中“不再显示”复选框，则下次启动 Dreamweaver CS6 后或在没有任何文档打开时，就不会再出现此界面。（1）“打开最近的项目”栏：此栏中列出了最近打开过的文档名称，单击其中的项目可以快速弹出已经编辑过的文档。单击“打开”按钮，可以弹出“打开”对话框，利用该对话框可以选择要编辑的网页文档，再单击“打开”按钮，即可打开选定的文档。（2）“新建”栏：此栏中列出了大部分可以创建的文档，利用它可以快速创建一个新的文档或者一个站点。例如，单击“HTML”链接文字，可以进入 HTML 网页设计状态

7、；单击“ASP VBScript”链接文字，可进入 ASP VBScript 编辑状态。单击“更多”按钮或单击“文件”“新建”命令，可以弹出“新建文档”对话框，如图 1-1-6 所示。图 1-1-6“新建文档”对话框“ “ “默认选中左边拦内的“空白页”选项，在“页面类型”栏内可选择文档类型，在“布局”栏内可选择一种布局风格和其他设置。单击“创建”按钮，即可创建一个空页面。选中左边拦内的“空模板”选项，单击“创建”按钮，即可创建一个空模板页面。（3）“主要功能”栏：单击“主要功能”栏内的按钮，可以进入 网页，显示 Adobe 的“DW Dreamweaver CS6”帮助网站中相应的内容。（4

8、） 扩展”栏：单击“快速入门”、 新增功能”、 资源”或“Dreamweaver Exchange”按钮，可以链接到相应网页，提供相应的帮助信息。2建立本地站点建立本地站点就是将本地主机磁盘中的一个文件夹定义为站点，然后将所有文档都存放在该文件夹中，以便于管理。建立本地站点的方法如下。（1）单击“站点”“新建站点”命令，弹出“站点设置对象”对话框，如图 1-1-73所示。单击“文件”面板中的“管理站点”链接文字或者单击“站点”“管理站点”命令，都可以弹出“管理站点”对话框，单击该对话框内的“新建站点”按钮，也可以弹出“站点设置对象”对话框。图 1-1-7“站点设置对象”（站点）对话框一（2）在

9、“站点设置对象”（站点）对话框内的“站点名称”文本框中输入站点的名称（例如：“站点 1”）。在“本地站点文件夹”文本框中输入本地文件夹的路径（例如：“D:WEBZD1”），该文件夹作为站点的根目录，要求该文件夹必须已经在硬盘上建立了。也可以单击“本地站点文件夹”文本框右边的文件夹图标，弹出“选择根文件夹”对话框，利用该对话框可以选择本地文件夹。（3）单击“站点设置对象”（站点）对话框内的“本地信息”选项，切换到“站点设置对象”（高级设置-本地信息）对话框，如图 1-1-8 所示。（4）在“默认图像文件夹”文本框内输入存储站点图像的文件夹路径，单击该文本框右边的文件夹图标，弹出“选择图像文件夹”

10、对话框，利用它选择默认图像文件夹（E: WEBZD1JPG）。将图像添加到文档时，Dreamweaver 将使用该文件夹路径。图 1-1-8“站点设置对象”（高级设置-本地信息）对话框（5）单击“站点设置对象”对话框内的“保存”按钮，初步完成本地站点的设置。此时“文件”面板内会显示出本地站点文件夹内的文件，如图 1-1-9 所示。图 1-1-9“站点设置对象”（高级设置-本地信息）对话框41.2文档窗口、“属性”和“插入”栏文档窗口“文档窗口用来显示和编辑当前的文档页面。当文档窗口处于还原状态时，其标题栏内显示网页的标题、网页文档所在的文件夹的名称和网页文档的名称，“文档”工具栏和“标准”工具

11、栏在文档窗口外；在文档窗口最大化时，其标签内显示文档的名称， 文档”工具栏和“标准”工具栏在文档窗口内。文档窗口底部有状态栏，可提供多种信息。在调整网页中一些对象的位置和大小时，利用标尺和网格工具可以使操作更准确。1标尺（1）显示标尺：单击“查看”“标尺”“显示”命令，可在文档窗口内的左边和上边显示标尺。单击“查看”“标尺”命令的下一级菜单中的“像素”、“英寸”或“厘米”命令，可以更改标尺的单位。（2）重设原点：用鼠标拖曳标尺左上角处小正方形，此时鼠标指针呈十字线状。拖曳鼠标到文档窗口内合适的位置后松开左键，即可将原点位置改变。如果要将标尺的原点位置还原，可单击“查看”“标尺”“重设原点”命令

12、。2网格（1）显示和隐藏网格线：单击“查看”“网格设置”“显示网格”命令，可在显示和隐藏网格之间切换。显示网格和标尺后的“文档”窗口如图 1-2-1 所示。（2）网格的参数设置：单击“查看”“网格设置”“网格设置”命令，可以弹出“网格设置”对话框，如图 1-2-2 所示。利用该对话框，可以进行网格间隔、颜色、形状，以及是否显示网格和是否靠齐网格等进行设置。图 1-2-1标尺和网格图 1-2-2 “网格设置”对话框（3）靠齐功能：如果没选中“查看”“网格设置”“靠齐到网格”命令或选中“网格设置”对话框内的“靠齐到网格”复选框，则移动 AP Div 或改变 AP Div 的大小时，最小单位是 1

13、个像素；否则，最小的单位是 5 个像素，在移动 AP Div 时可以自动与网格对齐。AP Div 是一个可以放置对像的容器，可方便地移动，在第 4 章有详细介绍。3状态栏状态栏位于文档窗口的底部（没给出左边的标签检查器），如图 1-2-3 所示。（1）标签选择器：即 HTML 标签选择器，它在状态栏的最左边，它以 HTML 标记显示方式来表示光标当前位置处的网页对象信息。一般光标当前位置处有多种信息，则可显示出多个 HTML 标记。不同的 HTML 标记表示不同的 HTML 元素信息。例如，表示文5档主体，表示图像，表示插入对象等。单击某个 HTML 标记，DreamweaverCS6 会自动

14、选取与该标记相对应的网页对象，用户可对该对象进行编辑。图 1-2-3Dreamweaver CS5 的状态栏（2）选取工具（3）手形工具（4）缩放工具：用来选取“文档”窗口内的对象。：在对象大于“文档”窗口时，用来移动对象的位置。：单击“文档”窗口，可增加“文档”窗口显示比例；按住 Alt 键，同时单击“文档”窗口（此时放大镜内显示“-”），可减小“文档”窗口显示比例。（5）“设置缩放比例”下拉列表框：用来选择“文档”窗口的显示比例。（6）“窗口大小”栏：单击它会弹出一个快捷菜单，在还原状态下，单击该快捷菜单上边一栏中的一个命令，可立刻按照选定的大小改变窗口的大小。单击“手机大小”、“平板电脑

15、大小”和“桌面电脑大小”3 个图标按钮中的任一个图标按钮，可“以切换到相应的不同大小的文档窗口。（7） 文档大小/估计的下载时间”栏：给出了文档的字节数和网页预计下载的时间。4文档视图窗口文档窗口有“设计”、“代码”和“代码和设计”等几种视图窗口，它们适用于不同的网页编辑要求。打开一个网页，了解其中三种视图窗口的特点。，切换到该视图（1）“设计”视图窗口：单击“文档”工具栏内“设计”按钮窗口，它用于可视化页面开发的设计环境，如图 1-2-4 所示。（2）“代码和设计”视图窗口：单击“代码”按钮，切换到该视图窗口，它是一种用于输入和修改 HTML、JavaScript、服务器语言代码等手工编码环

16、境，如图 1-2-5所示。单击“查看”“刷新设计视图”命令，可刷新设计视图状态下显示的网页。图 1-2-4“设计”视图窗口图 1-2-5“代码”视图窗口（3）“代码和设计”视图窗口：单击“拆分”按钮，切换到该视图窗口，它可以使在单个窗口中同时看到同一文档的“代码”和“设计”视图，如图 1-2-6 所示。单击选中“设计”窗口中对象时，“代码”窗口内的光标会定位在相应的代码处；拖6曳选中“设计”窗口内的内容时，则“代码”窗口内也会选中相应的代码。反之也会有相应的效果，有利于修改 HTML 代码。如果要切换文档窗口的视图，还可以单击“查看”“代码”（或“设计”、“代码和设计”）命令或按 Ctrl+-

17、键。图 1-2-6“代码和设计”视图窗口“属性”栏和“插入”栏1“属性”栏利用“属性”栏可以显示并精确调整网页中选定对象的属性。“属性”栏具有智能化的特点，选中网页中不同对象，其“属性”栏的内容会随之发生变化。例如单击选中网页中插入的图像，则图像的“属性”栏，如图 1-2-7 所示。图 1-2-7图像的“属性”栏单击“属性”栏右下角的按钮，可以展开“属性”栏；单击“属性”栏右下角的按钮，可收缩“属性”栏。双击“属性”栏内部或标题栏，可以在展开和收缩“属性”栏下半部分之间切换。2“插入”栏如果单击“窗口”“工作区布局”“经典”命令，会在菜单栏下边显示“插入”栏（制表符状态），如图 1-2-8 所

18、示。右击“常用”标签，弹出它的快捷菜单，单击该菜单内的“显示为菜单”命令，可以将“插入”栏切换到菜单显示外观状态，如图 1-2-9所示。单击“常用”按钮，弹出它的快捷菜单，单击该菜单内的“显示为制表符”命令，可以将“插入”栏切换到制表符显示外观状态，如图 1-2-8 所示。图 1-2-8图 1-2-9“插入”栏（制表符状态）“插入”栏（菜单状态）7拖曳“插入”栏内左边图标 到右下方，使该面板独立成浮动面板，如图 1-2-10 所示。单击该面板内“常用”标签右边的黑色箭头，弹出其快捷菜单，单击该菜单内的一个对象类型名称或图标，可以弹出相应类型中各对象的名称所组成的“插入”面板。例如，单击该菜单内

19、的“布局”对象类型名称，可以弹出由一些“布局”对象名称组成的“插入”面板。在制表符状态下，有 8 个标签，每个标签内有多个对象类型名称和图标。单击标签可以切换选项，单击“插入”面板内的对象类型名称或图标，或者拖曳对象类型名称或图标到文档窗口中，可将相应的对象插入到网页中。对于有些对象，会弹出一个对话框，进行设置后，单击“确定”按钮，即可插入对象。如果在插入对象的同时按住 Ctrl 键，就可以不弹出对话框，直接插入一个空对象。以后要给该空对象进行设置，可双击该对象或在其“属性”栏内进行设置。在菜单状态下，单击左边的箭头按钮，弹出它的菜单，其内有 8 个与插入对象有关的命令，单击命令后，其右边会出

20、现相关的按钮，单击按钮后即可进行相关操作。一般人们习惯使用制表符状态的“插入”栏。1.3面板基本操作和“历史”面板面板的基本操作1面板的折叠/展开和位置调整（1）面板的位置调整：拖曳面板组标题栏，可以移动面板组；拖曳面板标题栏或面板标签，可以移动面板，如果面板在面板组内，可以移出该面板组，成为独立的面板，如图 1-3-1 所示。如果将面板拖曳到其他面板组或面板内，如图 1-3-2 所示，可以将被拖曳的面板加入该面板组或面板，构成一个新面板组，如图 1-3-3 所示。图 1-3-1 独立的面板图 1-3-2 将面板拖曳到其他面板图 1-3-3构成面板组（2）面板的折叠/展开：Dreamweave

21、r CS6 有一些功能强大的面板。单击面板组中的面板标签，可以切换到相应的面板。单击面板组或面板右上角的按钮，可以将面板组或面板收缩，如图 1-3-4 所示。单击面板组或面板右上角的按钮，可以将面板组或面板展开。双击收缩的面板组或面板标题栏，可以将面板和面板组展开；单击展开的面板组或面标题栏，可以将面板组或面标收缩。8图 1-2-10 “插入”面板2面板的大小调整与关闭（1）调整面板的大小：将鼠标指针移到面板的边缘，当鼠标指针变成双向箭头时，单击并拖曳面板的边框，达到所需的大小后松开左键即可。（2）关闭面板：单击面板（组）标题栏右上角的按钮。另外，右击面板标题栏，弹出它的快捷菜单，如图 1-3

22、-5 所示，单击其内的“关闭”命令，都可以关闭面板组；单击该菜单内的“关闭标签组”命令，可关闭当前面板。单击面板内右上角的按钮，可弹出它的面板菜单，如图 1-3-6 所示。利用该菜单也可以关闭面板和面板组。单击“窗口”“”（面板名称）命令，使该命令取消，也可以关闭指定的面板。图 1-3-4面板组收缩图 1-3-5面板快捷菜单图 1-3-6面板菜单1.3.2 “历史”面板单击“窗口”“历史记录”命令，可以弹出“历史记录”面板，如图 1-3-1 所示。1撤销和重复操作（1）“历史”面板记录了每一步操作，如图 1-3-7 所示。利用它可以撤销一些操作。例如，要返回第 1 步操作效果时，只需将该面板内

23、左侧的指针拖曳至第 2 步操作即可。另外，单击“编辑”“撤销”命令，可以撤销刚刚进行的操作，单击“编辑”“重做”命令，可以重复刚刚撤销的操作。（2）重复操作：按住 Ctrl 键，单击选中该面板内的 2 条需要重复的步骤，如图 1-3-8所示。也可以拖曳选中需要执行的步骤。再单击该面板中的“重放”按钮。2自定义命令利用“历史记录”面板重复步骤只能应用于同一个文件内的对象，如果要应用到其他文件，可以将这些步骤保存为命令，在其他文件中即执行“命令”菜单中的相应命令，调用这些步骤。利用“历史记录”面板自定义命令的方法如下。（1）按住 Ctrl 键，单击选中“历史记录”面板中需要保存的步骤。（2）单击“

24、历史记录”面板内右下角按钮，弹出“保存为命令”对话框，如图 1-3-9所示。在文本框中输入命令的名称。再单击“确定”按钮，即可将选中步骤保存为命令。图 1-3-7 “历史记录”面板图 1-3-8选择 2 条操作图 1-3-9 “保存为命令”对话框（3）这时在“命令”菜单中就可以看到刚刚命名的命令，以后就可以像使用系统命9令那样使用这个自定义命令了。（4）删除自定义命令：单击“命令”“编辑命令列表”命令，弹出“编辑命令列表”对话框，可以修改自定义命令名称。单击“删除”按钮，可以删除选中的命令。1.4网页文档的基础知识和操作HTML 网页文档HTML（超文本置标语言）是一种用来制作网页文档的简单置

25、标标识语言，它是全球广域网上描述网页内容和外观的标准。HTML 使用了一些约定的标识，对 WWW 上的各种信息进行标注，IE 等浏览器会自动将 HTML 标识进行翻译，在屏幕上显示出相应的内容，而标识符号不会显示出来。只要有浏览器就可以运行 HTML 文档。HTML 文件档是标准的 ASCII普遍文本文件，它由许多被称为标识（也称为标签）的特殊字符串组成。标识通常由尖括号“”以及其中所包含的标记元素组成。1输入 HTML 文档使用 Windows 记事本软件来创建 HTML 文件。打开 Windows 的记事本软件，输入如下的 HTML 文档。注意：一定要在英文输入方式下输入 HTML 文件中

26、的各种英文标识。用 HTML 语言编写的第一个网页圣诞节 用 HTML 语 言 编 写 的 第 一 个网页圣诞节 圣 诞 节圣诞节(Christmas)，这个名称是“基督弥撒”的缩写。弥撒是教会的一种礼拜仪式。圣诞节是一个宗教节。因 为 把 它 当 作 耶 稣 的 诞 辰 来 庆 祝 ，因 而 又 名 耶 诞 节 。这 一 天 ，世 界 所 有 的 基 督 教 会 都举行特别的礼拜仪式。每年12 月 25 日 ，是 基 督 徒 庆 祝 耶 稣 基 督 诞 生 的 庆 祝 日 ，在 圣 诞 节 ，大 部 分 的 天 主 教 教 堂都会先在 12 月 24 日的耶诞夜，亦 即 12 月 25 日

27、凌 晨 举 行 子 夜 弥 撒 ， 而 一 些 基 督 教 会 则 会 举 行 报 佳 音 ， 然 后 在 12 月25 日庆祝圣诞节；而基督教的另一大分支东正教的圣诞节庆祝则在每年的 1 月 7 日。102保存和打开网页（1）保存网页：为了便于管理，在“D:WEBZD1”磁盘目录下建立一个名字为“HTML网页文档”的文件夹，在该文件夹内保存各种 HTML 文档。再在该文件夹下建立一些文件夹，用来存储网页中的各种素材。单击 Windows 的记事本软件菜单栏内的“文件”“另存为”命令，弹出“另存为”对话框，在该对话框内的“保存在”下拉列表框内选中“D: WEBZD1”文件夹，在“文件名”文本框

28、中输入“HTML1-0.htm”，注意：一定要输入 HTML 文档的扩展名“.htm”或“.html”。然后，单击“保存”按钮，即可保存名字为“HTML1-0.htm”的 HTML 文档。（2）打开和修改网页：单击 Windows 的记事本软件菜单栏内的“文件”“打开”命令。弹出“打开”对话框，在“文件类型”下拉列表框中选择“所有文件”选项，选中要打开的文件“HTML1-0.htm”，单击“打开”按钮，在记事本中显示“HTML1-0.htm”网页文档的代码。以后即可修改网页。修改好网页后，单击“文件”“保存”命令，可将修改后的代码保存。（3）刷新网页：再将鼠标指针移到网页之上，单击鼠标右键，弹

29、出其快捷菜单，再单击该菜单中的“刷新”命令，即可看到修改后的网页。3HTML 文档中基本结构标识解释HTML 语言的标识种类很多，“HTML1-0.htm”HTML 文档中所用标识的含义介绍如下。（1）/：它是最基本的标识，不可缺少。表示 HTML 文档的开始，表示 HTML 文档的结束。（2）/：与就是一 对标记，称为文件头部 标记，它可以提高网页文档的可读性，向浏览器提供一个信息。它可以忽略，但一般不予忽略。（3）/：其内包含网页正文内容，一般不可少。（4）/：网页的标题，它是/标识内不可少的标识。（5）：使用标识中的 BCOLOR 属性，可以设置网页的背景颜色。使用的格式有以下两种。 格

30、式 1：其中，RR、GG、BB 可以分别取值为 00FF 的十六进制数。RR 用来表示颜色中的红色成分多少，数值越大，颜色越深。GG 用来表示绿色成分多少，BB 用来表示蓝色成分多少。红、绿、蓝三色按一定比例混合，可以得到各种颜色。例如：RR =FF，GG=FF，BB=FF，则为白色；如果 RRGGBB 取值为 000000，则为黑色；RRGGBB 取值为 FF8888，则为浅红色。 格式 2：该种格式是直接使用颜色的英文名称来设定网页的背景颜色。例如：用来设置网页的背景颜色为蓝色。（6）/：它是正文的第三级标题标识。此外，还有第一到第六级标题标识，分别为/、/、/。级别越高，文字越小。（7）

31、：它是图像标识。用来加载 GIF 图像与动画。在网页中加载 GIF 动画的方法与加载 GIF 图像的方法一样。GIF 动画文件的扩展名也是.gif，文件格式是 GIF89A格式。制作 GIF 动画的软件有很多，例如：Photoshop 和 Fireworks 等。11（8）SRC：它是依附于其他标识的一个属性，依附于标识时，用来导入 GIF 图像与动画。其格式如下：width=高度 height=高度 ALING=位置其中高度和宽度用像素个数表示，位置用 left 等表示居左等。如果图像文件“T1.GIF”在该 HTML 文档所在文件夹内的 GIF 文件夹内，则应写为 。如果文件的目录或文件名

32、不对，则在浏览器中显示网页时，图像的位置处会显示一个带“”的小方块。Width、height 和 ALING=left 分别用来设置图像宽度、高度和居左分布的属性。（9）：它是换行标识。表示以后的内容移到下一行。它是单向标识，没有。（10）/：它是保留文本原来格式的标识。它的作用是将其中的文本内容按照原来的格式显示。否则浏览器会自动取消文本中的空格。（11）/：它是粗体标识。可使其中的文字变为粗体。（12）/：文本回车标记。（13）style=font-size: 24px; color: #00F; font-weight: bold;：用来设置内联样式，文字颜色为黑色，大小为 18px，加

33、粗风格。4浏览网页（1）方法一：双击“D:WEBZD1HTML 网页文档”文件夹内的“HTML1-0.htm”网页HTML 文档图标，弹出浏览器窗口，同时打开选中的网页，如图 1-4-1 所示。图 1-4-1在浏览器中打开“HTML1-0.htm”HTML 网页文档（2）方法二：在 Dreamweaver CS6 内打开网页，按 F12 键，可用浏览器浏览网页。（3）方法三：单击“开始”“运行”命令，弹出“运行”对话框，如图 1-4-2（“打开”文本框内还没有内容）所示。单击“浏览”按钮，弹出“浏览”对话框，如图 1-4-3所 示 。 选 择 “ 所 有 文 件 ” 文 件 类 型 ， 选 择

34、 “ D:WEBZD1HTML 网 页 文 档 ” 文 件 夹 内 的“HTML1-0.htm”网页 HTML 文档，单击“打开”按钮，回到“打开”对话框，在“打开”对话框内的“打开”文本框内已有选中的文件目录与名字，如图 1-4-2 所示。单击“确定”按钮，即可在浏览器中打开选择的网页文档，如图 1-4-1 所示。（4）方法四：双击浏览器图标，弹出浏览器窗口。单击浏览器窗口内的“文件”“打开”命令，弹出“打开”对话框，与如图 1-4-2 所示相似。单击“浏览”按钮，弹出一个对话框，与图 1-4-2 所示相似。选择 HTML 文件，单击“打开”按钮，回到“打开”对话框。单击“确定”按钮，即可在

35、浏览器中打开选择的网页文档。12图 1-4-2 “打开”对话框图 1-4-3 “浏览”对话框1.4.2 URL 和文件的路径名1文件的路径名（1）绝对路径：绝对路径是写出全部路径，系统按照全部路径进行文件的查找。绝对路径中的盘符后用“：”或“：/”，各个目录名之间以及目录名与文件名之间，应用“”或“/”分隔开。绝对路径名的写法及其含义如表 1-3-1 所示。表 1-3-1绝对路径名的写法及其含义绝对路径名含义HREF=http:/ 在域名为 的服务器中 TD 目录下H1.htm 放在 D 盘的 YF 目录下的 TD 子目录中（2）相对路径：相对路径是以当前文件所在路径和子目录为起始目录，进行相

36、对的文件查找。通常都采用相对路径，这样可以保证站点中的文件整体移动后，不会产生断链现象。相对路径名的写法及其含义如表 1-2-2 所示。表 1-2-2相对路径名的写法及其含义相对路径名含义HREF=H1.htmHREF=YF/H1.htmHREF=YF/TD/H1.htmHREF=./H1.htmHREF=./ ./H1.htmH1.htm 是 当 前 目 录 下 的 文 件 名H1.htm 是 当 前 目 录 中 “ YF” 目 录 下 名 为 HT1.htm 的 文 件H1.htm 是 当 前 目 录 中 “ YF/TD” 目 录 下 名 为 H1.htm 的 文 件H1.htm 是 当

37、前 目 录 的 上 一 级 目 录 下 名 字 为 H1.htm 的 文 件H1.htm 是 当 前 目 录 的 上 两 级 目 录 下 名 字 为 H1.htm 的 文 件2URL在单机系统中，定位一个文件需要路径和文件名；对于遍布全球的 Internet 网，显然还需要知道文件存放在哪个网络的哪台主机中才行。另外，单机系统中，所有的文件都由统一的操作系统管理，因而不必给出访问该文件的方法；而在 Internet 上，各个网络，各台主机的操作系统都不一样，因此必须指定访问该文件的方法。URL 即统一资源定位器，文件名的扩展，指出了文件在 Internet 中的位置。它存在的目的是统一 WWW

38、 上的地址编码，给每一个网页指定唯一的地址。在查询信息时，只要给出 URL 地址，WWW 服务器就可以根据它找到网络资源的位置，并将它传送给计算机。单击网页中的链接时，就将 URL 地址的请求传送给了 WWW 服务器。一个完整的 URL 地址通常由通信协议名（访问该资源所采用的协议，即访问该资源的方法）、Web 服务器地址（存放该资源主机域名地址，在因特网上，主机名可以用主机1314域名地址或 IP 地址，通常以字符形式出现）、文件在服务器中的路径和文件名四部分组成 。 例 如 “ http:/ 其 中 “ http:/” 是 通 信 协 议 名 ，“”是 Web 服务器地址（主机域名地址），“/YF/TD/”是文件在服务器中的路径，“HTML1-0.htm”是文件名。与单机系统绝对路径和相对路径的概念类似，URL 也有绝对 URL 和相对 URL 之分。上文所述的是绝对 URL。相对 URL 是相对于最近访问的 URL。比如正在观看一个 URL 为“ http:/ ” 的 文 件 ， 如 想 看 同 一 目 录 下 的 另 一 个 文 件“HTML1-1.htm”，可直接使用“HTML1-1.htm”，这时“HTML1-1.htm”就是一个相对 URL，它的绝对 URL 为“ HTML1-1.htm”。