Dreamweaver网页制作教程 第1章 Dreamweaver 8基础.ppt

第一章Dreamweaver 8基础本章要点：Dreamweaver 8的工作环境使用帮助系统HTML的基本结构HTML的常用标签查看源代码1.1 Dreamweaver 8简介n nMacromedia Dreamweaver 8 Macromedia Dreamweaver 8 是当前功能最强大、使用最广泛的专业网是当前功能最强大、使用最广泛的专业网页设计软件，用于对页设计软件，用于对 Web Web 站点、站点、Web Web 页和页和 Web Web 应用程序进行设计、应用程序进行设计、编码和开发。编码和开发。n n利用利用 Dreamweaver Dreamweaver 中的可视化编辑功能，用户可以快速地创建页面而中的可视化编辑功能，用户可以快速地创建页面而无需编写任何代码。用户可以查看所有站点元素或资源，并将它们从无需编写任何代码。用户可以查看所有站点元素或资源，并将它们从易于使用的面板直接拖到文档中。用户可以在易于使用的面板直接拖到文档中。用户可以在 Macromedia Fireworks Macromedia Fireworks 或其他图形应用程序中创建和编辑图像，然后将它们直接导入或其他图形应用程序中创建和编辑图像，然后将它们直接导入 DreamweaverDreamweaver，或者添加，或者添加 Macromedia Flash Macromedia Flash 对象，从而优化用户的开发对象，从而优化用户的开发工作流程。工作流程。n nDreamweaver Dreamweaver 还提供了功能全面的编码环境。还提供了功能全面的编码环境。n nDreamweaver Dreamweaver 还使用户可以使用服务器技术（如还使用户可以使用服务器技术（如 CFMLCFML、ASP.NETASP.NET、ASPASP、JSP JSP 和和 PHPPHP）生成由动态数据库支持的）生成由动态数据库支持的 Web Web 应用程序。应用程序。n nDreamweaver Dreamweaver 可以完全自定义。可以完全自定义。1.2 Dreamweaver 8的工作环境1.2.11.2.1工作区工作区1.1.关于集成工作区关于集成工作区在在 Windows Windows 中，中，Dreamweaver Dreamweaver 提供了一个将全部元提供了一个将全部元素置于一个窗口中的集成布局。在集成的工作素置于一个窗口中的集成布局。在集成的工作区中，全部窗口和面板都被集成到一个更大的区中，全部窗口和面板都被集成到一个更大的应用程序窗口中。如图应用程序窗口中。如图1-11-1所示。所示。Dreamweaver Dreamweaver 工工作区可以查看文档和对象属性。工作区还将许作区可以查看文档和对象属性。工作区还将许多常用操作放置于工具栏中，可以快速更改文多常用操作放置于工具栏中，可以快速更改文档。档。图图1-11-1设计器集成工作区布局设计器集成工作区布局2.选择工作区布局选择工作区布局在在 Windows Windows 中，可以选择设计器和编码器工作区布局。首次启中，可以选择设计器和编码器工作区布局。首次启动动 Dreamweaver Dreamweaver 时，会出现一个对话框让用户选择一种工作区布局。时，会出现一个对话框让用户选择一种工作区布局。可以随时切换到不同的工作区，如图可以随时切换到不同的工作区，如图1-21-2所示。所示。设计器是默认的集成工作区，其中全部文档窗口和面板被集成在一设计器是默认的集成工作区，其中全部文档窗口和面板被集成在一个较大的应用程序窗口中，并将面板组停靠在右侧。个较大的应用程序窗口中，并将面板组停靠在右侧。编码器同样是集成的工作区，但是将面板组停靠在左侧。编码器同样是集成的工作区，但是将面板组停靠在左侧。若要在首次启动若要在首次启动 Dreamweaver Dreamweaver 时选择一种工作区样式，执行以下操作：时选择一种工作区样式，执行以下操作：1)1)选择以下布局之一：选择以下布局之一：n n设计器。设计器。n n编码器。编码器。2)2)单击确定。单击确定。如图1-23.更改工作区布局更改工作区布局用户可以从中选择一种工作区布局。如果不熟悉编写代码，选择“设计器”。如果以后想更改工作区可以直接通过“窗口”菜单中的“工作区布局”来实现，如图1-2所示。4.Dreamweaver 工作区元素工作区元素1）菜单栏 Dreamweave 8的“菜单”共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。如图1-4所示。其中，编辑菜单里提供了对Dreamweaver菜单中首选参数的访问。图1-4菜单栏 菜单栏菜单栏 文件：用来管理文件。例如新建、打开、保存、另存为、导入、输出打印等。文件：用来管理文件。例如新建、打开、保存、另存为、导入、输出打印等。编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换和首选参数设置编辑：用来编辑文本。例如剪切、复制、粘贴、查找、替换和首选参数设置等。等。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。插入：用来插入各种元素。例如图片、多媒体组件、表格、框架及超级链接插入：用来插入各种元素。例如图片、多媒体组件、表格、框架及超级链接等。等。修改：具有对页面元素修改的功能，例如在表格中插入表格、拆分、合并单修改：具有对页面元素修改的功能，例如在表格中插入表格、拆分、合并单元格，对其对象等。元格，对其对象等。文本：用来对文本操作。例如设置文本格式等。文本：用来对文本操作。例如设置文本格式等。命令：所有的附加命令项。命令：所有的附加命令项。站点：用来创建和管理站点。站点：用来创建和管理站点。窗口：用来显示和隐藏控制面板以及切换文档窗口。如选择插入可以显示插窗口：用来显示和隐藏控制面板以及切换文档窗口。如选择插入可以显示插入面版。选择属性可以显示属性面版。按入面版。选择属性可以显示属性面版。按F4F4可以隐藏面版。可以隐藏面版。帮助：联机帮助功能。例如按下帮助：联机帮助功能。例如按下F1F1键，就会打开电子帮助文本。键，就会打开电子帮助文本。“常规常规”首选参数首选参数“常规常规”首选参数控制首选参数控制 DreamweaverDreamweaver 的常规外观的常规外观,设置设置 DreamweaverDreamweaver 的的“常规常规”首选参数首选参数:(1)(1)选择选择“编辑编辑”“首选参数首选参数”。出现出现“首选参数首选参数”对话框，其中显示对话框，其中显示了了“常规常规”首选项类别。首选项类别。(2)(2)设置首选参数选项。设置首选参数选项。(3)(3)单击单击“确定确定”。设置设置“常规常规”首选参数首选参数:“常规常规”首选参数首选参数(1)(1)显示起始页：用于在启动显示起始页：用于在启动 DreamweaverDreamweaver 或没有打开任何文档时显示或没有打开任何文档时显示 DreamweaverDreamweaver 起始页。起始页。(2)(2)启动时重新打开文档：打开在关闭启动时重新打开文档：打开在关闭 DreamweaverDreamweaver 时处于打开状态的任时处于打开状态的任何文档。如果未选择此选项，何文档。如果未选择此选项，DreamweaverDreamweaver 会在启动时显示起始页或会在启动时显示起始页或空白屏幕（这取决于空白屏幕（这取决于“显示起始页显示起始页”设置）。设置）。(3)(3)打开只读文件时发出警告：在打开只读文件（锁定的文件）时发出打开只读文件时发出警告：在打开只读文件（锁定的文件）时发出警告。提供了解锁警告。提供了解锁/取出文件、查看文件或取消的选项。取出文件、查看文件或取消的选项。(4)(4)移动文件时更新链接：确定当移动、重命名或删除站点中的文档时移动文件时更新链接：确定当移动、重命名或删除站点中的文档时 DreamweaverDreamweaver 所执行的操作。可以将该参数设置为总是自动更新链接、所执行的操作。可以将该参数设置为总是自动更新链接、从不更新链接或提示执行更新。从不更新链接或提示执行更新。(5)(5)更改工作区：可以选择更改工作区：可以选择“设计器设计器”布局（面板位于右侧的集成工作区）布局（面板位于右侧的集成工作区）或或“编码器编码器”布局（面板位于左侧的集成工作区）。在布局（面板位于左侧的集成工作区）。在“设计器设计器”布布局中，文档默认在局中，文档默认在“设计设计”视图中显示，而在视图中显示，而在“编码器编码器”布局中，文布局中，文档默认在档默认在“代码代码”视图中显示。选择新工作区后，退出视图中显示。选择新工作区后，退出 DreamweaverDreamweaver 然后重新启动它以查看所作的更改。然后重新启动它以查看所作的更改。(6)(6)插入对象时显示对话框：确定当使用插入对象时显示对话框：确定当使用“插入插入”栏或栏或“插入插入”菜单插入菜单插入图像、表格、图像、表格、Shockwave Shockwave 影片和其它某些对象时影片和其它某些对象时 DreamweaverDreamweaver 是否提是否提示输入附加的信息。如果禁用该选项，则不出现对话框，必须使用示输入附加的信息。如果禁用该选项，则不出现对话框，必须使用“属性属性”检查器指定图像的源文件和表格中的行数等。对于鼠标经过图检查器指定图像的源文件和表格中的行数等。对于鼠标经过图像和像和 Fireworks HTMLFireworks HTML，当插入对象时总是出现一个对话框，而与该选，当插入对象时总是出现一个对话框，而与该选项的设置无关。项的设置无关。(7)(7)允许行内双字节：。允许行内双字节：。(8)(8)标题后切换到普通段落：指定在标题后切换到普通段落：指定在“设计设计”视图中于一个标题段落的结视图中于一个标题段落的结尾按下尾按下 Enter Enter 键时，将创建一个用键时，将创建一个用 p p 标签进行标记的新段落。（标题标签进行标记的新段落。（标题段落是用段落是用 h1 h1 或或 h2 h2 等标题标签进行标记的段落。）当禁用该选项时，等标题标签进行标记的段落。）当禁用该选项时，在标题段落的结尾按下在标题段落的结尾按下 Enter Enter 健或健或 Return Return 键将创建一个用同一标题标键将创建一个用同一标题标签进行标记的新段落（允许在一行中键入多个标题，然后返回并填入签进行标记的新段落（允许在一行中键入多个标题，然后返回并填入详细信息）详细信息）。(9)(9)允许多个连续的空格：指定在允许多个连续的空格：指定在“设计设计”视图中键入两个或更多的空格时视图中键入两个或更多的空格时将创建不中断的空格，这些空格在浏览器中显示为多个空格。（例如，将创建不中断的空格，这些空格在浏览器中显示为多个空格。（例如，可以在句子之间键入两个空格，就如同在打字机上一样。）该选项主可以在句子之间键入两个空格，就如同在打字机上一样。）该选项主要针对习惯于在字处理程序中键入的用户。当禁用该选项时，多个空要针对习惯于在字处理程序中键入的用户。当禁用该选项时，多个空格将被当作单个空格（因为浏览器将多个空格当作单个空格）。格将被当作单个空格（因为浏览器将多个空格当作单个空格）。2）插入栏）插入栏插入栏包含用于将各种类型的对象（如图像、表格和层）插入插入栏包含用于将各种类型的对象（如图像、表格和层）插入到文档中的按钮。每个对象都是一段到文档中的按钮。每个对象都是一段 HTML HTML 代码，允许在插入它时设代码，允许在插入它时设置不同的属性。例如，可以在插入栏中单击表格按钮，插入置不同的属性。例如，可以在插入栏中单击表格按钮，插入一个表格。如果愿意，可以不使用插入栏而使用插入菜单插一个表格。如果愿意，可以不使用插入栏而使用插入菜单插入对象。入对象。插入栏包含用于创建和插入对象（如表格、层和图像）的按钮。当插入栏包含用于创建和插入对象（如表格、层和图像）的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称，如图钮的名称，如图1-61-6所示。所示。这些按钮被组织到几个选项卡中，可以在这些按钮被组织到几个选项卡中，可以在“插入插入”栏的左侧切换它们。栏的左侧切换它们。当前文档包含服务器代码时（例如当前文档包含服务器代码时（例如 ASP ASP 或或 CFML CFML 文档），还会显示其文档），还会显示其它选项卡。当启动它选项卡。当启动 DreamweaverDreamweaver 时，系统会打开上次使用的选项卡。时，系统会打开上次使用的选项卡。常用选项卡：可以创建和插入最常用的对象，例如图像和表格。常用选项卡：可以创建和插入最常用的对象，例如图像和表格。“插入插入”栏的选项卡栏的选项卡“插入插入”栏的选项卡栏的选项卡常用选项卡：可以创建和插入最常用的对象，例如图像和表格。常用选项卡：可以创建和插入最常用的对象，例如图像和表格。常用选项卡：可以创建和插入最常用的对象，例如图像和表格。常用选项卡：可以创建和插入最常用的对象，例如图像和表格。“布局布局布局布局”选项卡：可以插入表格、选项卡：可以插入表格、选项卡：可以插入表格、选项卡：可以插入表格、div div 标签、层和框架。还可以从三个表标签、层和框架。还可以从三个表标签、层和框架。还可以从三个表标签、层和框架。还可以从三个表格视图中进行格视图中进行格视图中进行格视图中进行选择：选择：选择：选择：“标准标准标准标准”（默认）、（默认）、（默认）、（默认）、“扩展表格扩展表格扩展表格扩展表格”和和和和“布局布局布局布局”。当选择当选择当选择当选择“布局布局布局布局”模式后，可以使用模式后，可以使用模式后，可以使用模式后，可以使用 布局工具：布局工具：布局工具：布局工具：“绘制布局单元格绘制布局单元格绘制布局单元格绘制布局单元格”和和和和“绘制布局表格绘制布局表格绘制布局表格绘制布局表格”。“表单表单表单表单”选项卡：包含用于创建表单和插入表单元素的按钮。选项卡：包含用于创建表单和插入表单元素的按钮。选项卡：包含用于创建表单和插入表单元素的按钮。选项卡：包含用于创建表单和插入表单元素的按钮。“文本文本文本文本”选项卡：可以插入各种文本格式设置标签和列表格式设置标签，选项卡：可以插入各种文本格式设置标签和列表格式设置标签，选项卡：可以插入各种文本格式设置标签和列表格式设置标签，选项卡：可以插入各种文本格式设置标签和列表格式设置标签，例如例如例如例如 b b、emem、p p、h1 h1 和和和和 ulul。“HTMLHTML”选项卡：可以插入用于水平线、文件头内容、表格、框架和脚选项卡：可以插入用于水平线、文件头内容、表格、框架和脚选项卡：可以插入用于水平线、文件头内容、表格、框架和脚选项卡：可以插入用于水平线、文件头内容、表格、框架和脚本的本的本的本的 HTML HTML 标签。标签。标签。标签。“应用程序应用程序应用程序应用程序”选项卡：可以插入动态元素，例如记录集、重复区域以及选项卡：可以插入动态元素，例如记录集、重复区域以及选项卡：可以插入动态元素，例如记录集、重复区域以及选项卡：可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。记录插入和更新表单。记录插入和更新表单。记录插入和更新表单。“Flash Flash 元素元素元素元素”选项卡：可以插入选项卡：可以插入选项卡：可以插入选项卡：可以插入 Macromedia Flash Macromedia Flash 元素。元素。元素。元素。“ASP.NETASP.NET”选项卡：可以插入选项卡：可以插入选项卡：可以插入选项卡：可以插入 A A 控件。控件。控件。控件。收藏夹选项卡：可以将插入栏中最常用的按钮分组和组织到某收藏夹选项卡：可以将插入栏中最常用的按钮分组和组织到某收藏夹选项卡：可以将插入栏中最常用的按钮分组和组织到某收藏夹选项卡：可以将插入栏中最常用的按钮分组和组织到某一公共位置。一公共位置。一公共位置。一公共位置。3 3）文档工具栏）文档工具栏4 4）“标准标准”工具栏工具栏5 5）“样式呈现样式呈现”工具栏工具栏6 6）“文档文档”窗口窗口7 7）“属性属性”检查器检查器 8)8)标签选择器标签选择器9 9）面板组）面板组1.3 使用 Dreamweaver 帮助系统1.3.11.3.1打开帮助打开帮助 当用户在当用户在 Dreamweaver Dreamweaver 中工作时，可以访问产品中的帮助。中工作时，可以访问产品中的帮助。若要打开若要打开 Dreamweaver Dreamweaver 帮助，执行：选择帮助帮助，执行：选择帮助 Dreamweaver Dreamweaver 帮助帮助。1.3.21.3.2搜索帮助搜索帮助 可以对可以对 Dreamweaver Dreamweaver 帮助执行全文搜索。帮助执行全文搜索。若要搜索产品中的帮助，执行以下操作：若要搜索产品中的帮助，执行以下操作：在在 Dreamweaver Dreamweaver 帮助中，单击搜索选项卡。帮助中，单击搜索选项卡。在文本框中键入一个单词或短语，然后单击列出主题。在文本框中键入一个单词或短语，然后单击列出主题。双击结果列表中的一个主题，可显示该主题。双击结果列表中的一个主题，可显示该主题。1.3.31.3.3使用索引使用索引 使用索引可以快速找到信息。使用索引可以快速找到信息。若要使用索引，执行以下操作：若要使用索引，执行以下操作：在在 Dreamweaver Dreamweaver 帮助中，单击索引选项卡。帮助中，单击索引选项卡。滚动到字母列表中的一个索引项，然后双击该项可显示索引信息。滚动到字母列表中的一个索引项，然后双击该项可显示索引信息。1.4 关于HTMLHTML（Hyper Text Markup Language）表示超文本标签语言，HTML语言是一种文本类、解释执行的标签语言，是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件，是一个包含标签的文本文件，这些标签告诉浏览器怎样显示这个页面。HTML文件必须有HTML或者HTMLL扩展名。查看源代码1.5.1 1.5.1 在在IEIE中查看网页的源代码中查看网页的源代码n n查看菜单上，指向源文件。查看菜单上，指向源文件。n n在网页的空白处单击鼠标右键，从弹出菜单中选择查看在网页的空白处单击鼠标右键，从弹出菜单中选择查看源文件源文件1.5.2 1.5.2 在在dreamweaverdreamweaver 8 8中查看网页源代码中查看网页源代码n n可以通过打开代码视图在文档窗口中显示源代码。可以通过打开代码视图在文档窗口中显示源代码。n n可以拆分文档窗口以同时显示页面及其关联的代码。可以拆分文档窗口以同时显示页面及其关联的代码。n n可以在代码检查器（一个单独的编码窗口）中工作。代码可以在代码检查器（一个单独的编码窗口）中工作。代码检查器与代码视图的工作方式相同；可以把它当作当检查器与代码视图的工作方式相同；可以把它当作当前文档的一个可分离的代码视图。前文档的一个可分离的代码视图。1.6 HTML文件的结构一个一个HTMLHTML文件的基本结构文件的基本结构 HTMLHTML文件开始文件开始 HTML HTML文件的头部开始文件的头部开始HTMLHTML文件的头部内容文件的头部内容 HTML HTML文件的头部结束文件的头部结束 HTML HTML文件的主体开始文件的主体开始 HTML HTML文件的主体内容文件的主体内容 HTML HTML文件的主体结束文件的主体结束 HTML HTML文件结束文件结束 1.7 HTML标签简介HTMLHTML标签常见的三种表示方法：标签常见的三种表示方法：文件或超文本文件或超文本/如如THIS TEXT IS BOLDTHIS TEXT IS BOLD，设置文本，设置文本THIS TEXT THIS TEXT IS BOLDIS BOLD为粗体；为粗体；文件或超文本文件或超文本/如如BODY BGCOLOR=，设置主体标签，设置主体标签BODYBODY的的背景背景BGCOLORBGCOLOR属性为红色属性为红色REDRED；注意：属性值应该被包含在引号中。双引号是最常用的，但注意：属性值应该被包含在引号中。双引号是最常用的，但是单引号也可以使用。中文引号跟英文引号是不一样的。是单引号也可以使用。中文引号跟英文引号是不一样的。上面所指的引号都是英文状态下的引号。上面所指的引号都是英文状态下的引号。如：分行标签如：分行标签，横线标签，横线标签。一个简单的一个简单的HTML格式文件格式文件我的网站我的第一页1.7.2 常用的标签常用的标签1)HTML文件标签2)头部标签3)主体标签4)段落标签5)文字标签6)图像标签7)链接标签一个简单的一个简单的HTML文件源代码文件源代码 meta http-equiv=Content-Type content=text/html;=gb2312/小灵通手机小灵通手机style type=text/!-&nbspnbsp;小灵通小灵通.jpg width=527 height=143/&nbspnbsp;“小灵通小灵通”无线市话（无线市话（Personal Phone SystemPersonal Phone System）简称）简称PHSPHS，是一种新型，是一种新型的个人无线接入系统。它采用先进的微蜂窝技术，通过微蜂窝基站实的个人无线接入系统。它采用先进的微蜂窝技术，通过微蜂窝基站实现无线覆盖现无线覆盖,将用户端（即无线市话手机）以无线的方式接入本地电将用户端（即无线市话手机）以无线的方式接入本地电话网，使传统意义上的固定电话不再固定在某个位置，可在无线网络话网，使传统意义上的固定电话不再固定在某个位置，可在无线网络覆盖范围内自由移动使用，随时随地接听、拨打本地和国内、国际电覆盖范围内自由移动使用，随时随地接听、拨打本地和国内、国际电话。话。语音清晰语音清晰 。a=http:/202.105.177.119/web/phs/hs_show.htm小灵小灵通手机展台通手机展台 本章小结本章主要介绍了本章主要介绍了 DreamweaverDreamweaver 8 8基本工作环境和设置、基本工作环境和设置、帮助系统的使用、语言的基本结构、常帮助系统的使用、语言的基本结构、常用标签和在用标签和在DreamweaverDreamweaver 8 8环境下查看源环境下查看源代码的方法。学习完本章后读者应该对代码的方法。学习完本章后读者应该对DreamweaverDreamweaver 8 8的工作区有初步的了解，对菜单栏、的工作区有初步的了解，对菜单栏、工具栏和面板有了一个基本的认识，理解帮助系工具栏和面板有了一个基本的认识，理解帮助系统的作用，掌握其基本使用方法。同时对掌握了统的作用，掌握其基本使用方法。同时对掌握了语言的结构和常用标签格式。本章的重语言的结构和常用标签格式。本章的重点是认识工作环境，掌握帮助系统的使用点是认识工作环境，掌握帮助系统的使用 。思考与习题思考与习题1.1.填空题填空题 （1 1）当启动）当启动DreamweaverDreamweaver“工作区设置工作区设置”对话框时，有哪两种布局可供选对话框时，有哪两种布局可供选择择_。（2 2）DreamweaverDreamweaver的工具栏主要作用是的工具栏主要作用是_。（3 3）DreamweaveDreamweave 8 8的的菜单共有菜单共有_。（4 4）DreamweaverDreamweaver为用户提供了三种视图方式，分别为为用户提供了三种视图方式，分别为_。（5 5）插入水平线步骤为插入水平线步骤为_。（6 6）打开的页面属性对话框步骤为）打开的页面属性对话框步骤为_。（7 7）打开）打开“首选参数首选参数”对话框的操作步骤为对话框的操作步骤为_。2.2.简答题简答题（1 1）简述）简述DreamweaverDreamweaver的操作界面分为哪几项，各项的作用是什么？的操作界面分为哪几项，各项的作用是什么？（2 2）简述）简述DreamweaverDreamweaver提供的三种视图方式各有什么特点？提供的三种视图方式各有什么特点？(3)(3)如何更改工作区布局？如何更改工作区布局？