(7.6.15)--第9章 Dreamweaver网页制作基础.ppt

计算机科学与信息工程学院计算机科学与信息工程学院第第9章章 Dreamweaver网页制作基础网页制作基础计算机科学与信息工程学院计算机科学与信息工程学院第第9章章 Dreamweaver网页制作基础网页制作基础Dreamweaver CS6是是Adobe公司推出的一款集公司推出的一款集网页制作和网站管理于一身的网页制作软件。网页制作和网站管理于一身的网页制作软件。Dreamweaver将可视布局工具、应用程序开发将可视布局工具、应用程序开发功能和代码编辑支持组合为一个功能强大的工功能和代码编辑支持组合为一个功能强大的工具系统，功能相当完善，并支持所见即所得的具系统，功能相当完善，并支持所见即所得的网页编辑功能。网页编辑功能。目前，目前，Dreamweaver已成为目前网页制作者使已成为目前网页制作者使用最多的网站设计工具之一。用最多的网站设计工具之一。计算机科学与信息工程学院计算机科学与信息工程学院9.1 创建和管理站点创建和管理站点计算机科学与信息工程学院计算机科学与信息工程学院9.1.1 Dreamweaver的工作界面的工作界面计算机科学与信息工程学院计算机科学与信息工程学院1.Dreamweaver CS6的启动与退出的启动与退出启动启动Dreamweaver CS6的方法有以下几种：的方法有以下几种：单击单击“开始开始”按钮按钮“Adobe Dreamweaver CS6”。双击桌面上已经建立的双击桌面上已经建立的Adobe Dreamweaver CS6快捷方式图快捷方式图标。标。双击网页文件（如双击网页文件（如*.htm、*.html等）。等）。退出退出Dreamweaver CS6的方法有以下几种：的方法有以下几种：单击单击Dreamweaver CS6窗口右上角的窗口右上角的“关闭关闭”按钮。按钮。单击单击“文件文件”菜单中的菜单中的“退出退出”命令。命令。使用快捷键使用快捷键+。计算机科学与信息工程学院计算机科学与信息工程学院2.欢迎屏幕欢迎屏幕启动启动 Dreamweaver CS6后，通常会显示后，通常会显示“欢迎屏幕欢迎屏幕”。用户可以通过欢迎屏幕了解该软件的功能，也可以用来用户可以通过欢迎屏幕了解该软件的功能，也可以用来打开最近编辑过的网页或是创建新的网页。打开最近编辑过的网页或是创建新的网页。如果不想新如果不想新建网页，单击建网页，单击“欢迎屏幕欢迎屏幕”右上角的右上角的“关闭关闭”按钮，即按钮，即可显示可显示Dreamweaver CS6的工作窗口而不做任何操作。的工作窗口而不做任何操作。计算机科学与信息工程学院计算机科学与信息工程学院3.工作窗口工作窗口Dreamweaver CS6的工作窗口如图所示。的工作窗口如图所示。计算机科学与信息工程学院计算机科学与信息工程学院4.工具栏工具栏Dreamweaver CS6包含了包含了4个工具栏，它们分个工具栏，它们分别是：别是：“文档文档”工具栏工具栏“标准标准”工具栏工具栏“样式呈现样式呈现”工具栏工具栏“编码编码”工具栏工具栏可以通过选择菜单命令可以通过选择菜单命令“査看査看”“工具栏工具栏”，并在子菜单中选择显示或隐藏工具栏。，并在子菜单中选择显示或隐藏工具栏。计算机科学与信息工程学院计算机科学与信息工程学院（1）“文档文档”工具栏工具栏“文档文档”工具栏是默认自动显示，不用特意去工具栏是默认自动显示，不用特意去勾选。如被隐藏，可以通过选择菜单命令勾选。如被隐藏，可以通过选择菜单命令“査査看看”“工具栏工具栏”“文档文档”来显示。来显示。计算机科学与信息工程学院计算机科学与信息工程学院（2）“标准标准”工具栏工具栏“标准标准”工具栏在默认情况下是不显示的，可工具栏在默认情况下是不显示的，可以通过选择菜单命令以通过选择菜单命令“査看査看”“工具栏工具栏”“标准标准”来显示。来显示。“标准标准”工具栏上常用的按钮和功能和其他文工具栏上常用的按钮和功能和其他文字编辑软件类似。字编辑软件类似。计算机科学与信息工程学院计算机科学与信息工程学院5.状态栏状态栏文档编辑区下方为状态栏。文档编辑区下方为状态栏。状态栏上的主要按钮：状态栏上的主要按钮：标签选择器标签选择器指针选取工具指针选取工具手形工具手形工具缩放工具缩放工具设置缩放比率设置缩放比率手机大小、平板电脑大小、桌面电脑大小手机大小、平板电脑大小、桌面电脑大小预览窗口大小预览窗口大小网页文档大小网页文档大小/下载时间下载时间文档编码文档编码计算机科学与信息工程学院计算机科学与信息工程学院6.面板和面板组面板和面板组“面板面板”是是Dreamweaver CS6工作窗口组织的工作窗口组织的基本视觉单位，不同的面板将实现各自功能。基本视觉单位，不同的面板将实现各自功能。用户可以根据自己的需要，显示或隐藏指定的用户可以根据自己的需要，显示或隐藏指定的面板。面板。为了节省面板所占的为了节省面板所占的空间，空间，Dreamweaver采用采用了了“面板组面板组”组织方式，将一个或多个面板集组织方式，将一个或多个面板集中在一起显示。中在一起显示。计算机科学与信息工程学院计算机科学与信息工程学院9.1.2 创建站点创建站点计算机科学与信息工程学院计算机科学与信息工程学院9.1.2 创建站点创建站点在在 Dreamweaver中，站点是所有网页文件和资中，站点是所有网页文件和资源的集合。通过源的集合。通过 Dreamweaver站点，用户可以站点，用户可以统一地组织和管理网站中的所有的文档和资源。统一地组织和管理网站中的所有的文档和资源。本地站点本地站点远程站点远程站点测试站点测试站点计算机科学与信息工程学院计算机科学与信息工程学院9.1.3 管理站点管理站点计算机科学与信息工程学院计算机科学与信息工程学院9.1.3 管理站点管理站点管理站点是指根据实际需要对站点进行编辑、管理站点是指根据实际需要对站点进行编辑、复制、删除、导出和导入等操作。选择菜单命复制、删除、导出和导入等操作。选择菜单命令令“站点站点”“管理站点管理站点”命令，将打开命令，将打开“管管理站点理站点”对话框，在对话框，在“您的站点您的站点”列表中将显列表中将显示已经创建好的所有站点名称和站点类型。示已经创建好的所有站点名称和站点类型。编辑站点编辑站点复制站点复制站点删除站点删除站点导出和导入站点导出和导入站点计算机科学与信息工程学院计算机科学与信息工程学院在站点中创建文件夹和文件在站点中创建文件夹和文件在站点中创建文件夹和文件的操作与在站点中创建文件夹和文件的操作与Windows资源管理器中的操作相似。资源管理器中的操作相似。在创建站点之后，所有的文件夹和文件都处于在创建站点之后，所有的文件夹和文件都处于一个顶层文件夹即一个顶层文件夹即“根文件夹根文件夹”（或称根目录）（或称根目录），需要在其中创建多个文件夹来放置网页和图，需要在其中创建多个文件夹来放置网页和图像等不同类型的网站资源。像等不同类型的网站资源。计算机科学与信息工程学院计算机科学与信息工程学院组织站点的文件夹和文件组织站点的文件夹和文件文件夹命名应当全部使用英文小写字母或数字文件夹命名应当全部使用英文小写字母或数字字符。字符。对于内容、栏目较少的站点，往往会按资源类对于内容、栏目较少的站点，往往会按资源类型创建文件夹。型创建文件夹。对较为庞大的站点，往往会先对较为庞大的站点，往往会先按栏目或单位的组织结构创建文件夹，然后按按栏目或单位的组织结构创建文件夹，然后按资源类型创建文件夹。资源类型创建文件夹。“文件夹文件夹”这一提法仅适用于这一提法仅适用于Windows 10这样这样的图形用户界面操作系统，非的图形用户界面操作系统，非Windows的操作的操作系统往往使用系统往往使用“目录目录”这一提法。这一提法。计算机科学与信息工程学院计算机科学与信息工程学院9.2 建立基本的网页建立基本的网页计算机科学与信息工程学院计算机科学与信息工程学院9.2.1 创建和保存文档创建和保存文档计算机科学与信息工程学院计算机科学与信息工程学院9.2.1 创建和保存文档创建和保存文档Dreamweaver CS6支持对多种类型文档的编辑支持对多种类型文档的编辑和处理，可以创建和保存多种文档，如和处理，可以创建和保存多种文档，如HTML文件、文件、CSS文件和文件和ASP.NET文件等。以下操作文件等。以下操作以以HTML网页文件为例。网页文件为例。计算机科学与信息工程学院计算机科学与信息工程学院（1）创建文档的方法）创建文档的方法在在“文件文件”面板中新建文件。面板中新建文件。在在“欢迎屏幕欢迎屏幕”中，选择中，选择“新建新建”“HTML”命令。命令。选择菜单命令选择菜单命令“文件文件”“新建新建”。计算机科学与信息工程学院计算机科学与信息工程学院（2）保存文档的方法）保存文档的方法选择菜单命令选择菜单命令“文件文件”“保存保存”。选择菜单命令选择菜单命令“文件文件”“另存为另存为”，用来保，用来保存文档副本。存文档副本。选择菜单命令选择菜单命令“文件文件”“保存全部保存全部”，用来，用来同时保存所有打开的文档。同时保存所有打开的文档。计算机科学与信息工程学院计算机科学与信息工程学院（3）打开和关闭文档的方法）打开和关闭文档的方法在在“文件文件”面板的文件列表中，双击文档的文面板的文件列表中，双击文档的文件名。件名。选择菜单命令选择菜单命令“文件文件”“打开打开”，用来打开，用来打开要编辑的文件。要编辑的文件。选择菜单命令选择菜单命令“文件文件”“关闭关闭”，将关闭当，将关闭当前文档。前文档。选择菜单命令选择菜单命令“文件文件”“全部关闭全部关闭”，用来，用来同时关闭所有打开的文档。同时关闭所有打开的文档。计算机科学与信息工程学院计算机科学与信息工程学院9.2.2 HTML文档的基本结构与语法文档的基本结构与语法计算机科学与信息工程学院计算机科学与信息工程学院9.2.2 HTML文档的基本结构与语法文档的基本结构与语法为了更简便地描述为了更简便地描述HTML文档的结构，我们通常采用文档的结构，我们通常采用HTML元素的概念来取代标记的概念。元素的概念来取代标记的概念。HTML元素指的是从开始标记（元素指的是从开始标记（Start Tag）到结束标）到结束标记（记（End Tag）的所有代码）的所有代码：标记内容标记内容如：如：这是一个段落这是一个段落以上是一个完整的以上是一个完整的元素。元素。计算机科学与信息工程学院计算机科学与信息工程学院9.2.2 HTML文档的基本结构与语法文档的基本结构与语法HTML文档结构如下所示：文档结构如下所示：计算机科学与信息工程学院计算机科学与信息工程学院9.2.2 HTML文档的基本结构与语法文档的基本结构与语法大多数大多数 HTML元素可以嵌套使用，即一个元素可以嵌套使用，即一个HTML元素可元素可以包含其他的以包含其他的HTML元素，元素，HTML文档是由嵌套的文档是由嵌套的HTML元素构成的。元素构成的。计算机科学与信息工程学院计算机科学与信息工程学院9.2.3 输入文字及设置文字属性输入文字及设置文字属性计算机科学与信息工程学院计算机科学与信息工程学院（1）文字输入）文字输入通过键盘直接输入文字内容。通过键盘直接输入文字内容。输入特殊字符输入特殊字符。输入特殊字符外的其他字符。输入特殊字符外的其他字符。选择性粘贴。选择性粘贴。将文本从将文本从Word文档或文档或Excel文档导入。文档导入。插入可以自动更新的日期。插入可以自动更新的日期。计算机科学与信息工程学院计算机科学与信息工程学院（2）文字属性）文字属性字体系列：字体系列：Dreamweaver提供了若干个字体系提供了若干个字体系列，可以直接选用。也可以自定义新的字体系列，可以直接选用。也可以自定义新的字体系列或直接使用特定的字体名称，如列或直接使用特定的字体名称，如“宋体宋体”或或“黑体黑体”等。等。字体大小。字体大小。文本颜色：最常用的表示方法是文本颜色：最常用的表示方法是“六位十六进六位十六进制数制数”（如（如#FFFFFF）或）或“三位十六进制数三位十六进制数”（如（如#FFF）。为文字指定颜色的方法也适用）。为文字指定颜色的方法也适用于网页上其他指定颜色的属性设置。于网页上其他指定颜色的属性设置。文字加粗和倾斜。文字加粗和倾斜。文本修饰。文本修饰。计算机科学与信息工程学院计算机科学与信息工程学院9.2.4 设置页面属性设置页面属性计算机科学与信息工程学院计算机科学与信息工程学院9.2.4 设置页面属性设置页面属性在在Dreamweaver CS6中设置网页的页面属性的中设置网页的页面属性的操作方法是选择菜单命令操作方法是选择菜单命令“修改修改”“页面属页面属性性”。页面属性共有。页面属性共有6个分类：外观（个分类：外观（CSS）、）、外观（外观（HTML）、链接（）、链接（CSS）、标题）、标题（CSS）、标题）、标题/编码和跟踪图像。编码和跟踪图像。计算机科学与信息工程学院计算机科学与信息工程学院（1）外观（）外观（CSS）属性主要包括：属性主要包括：页面文字属性：字体、大小、颜色、加粗、倾斜；页面文字属性：字体、大小、颜色、加粗、倾斜；背景属性：背景颜色、背景图像、背景重复方式；背景属性：背景颜色、背景图像、背景重复方式；边距：左边距、右边距、上边距、下边距；边距：左边距、右边距、上边距、下边距；计算机科学与信息工程学院计算机科学与信息工程学院（2）外观（）外观（HTML）这一分类采用传统的这一分类采用传统的HTML方式来设置网页外方式来设置网页外观，属性代码将直接设置在观，属性代码将直接设置在HTML标签中，修标签中，修改和维护起来比较困难。因此，不推荐读者使改和维护起来比较困难。因此，不推荐读者使用这一分类来设置。用这一分类来设置。计算机科学与信息工程学院计算机科学与信息工程学院（3）链接（）链接（CSS）可以设置链接文字属性、链接颜色属性和下划可以设置链接文字属性、链接颜色属性和下划线样式。线样式。设置将对整个网页的文字链接起作用。设置将对整个网页的文字链接起作用。计算机科学与信息工程学院计算机科学与信息工程学院（4）标题（）标题（CSS）可以为可以为到到这这6个级别的标题设置统一个级别的标题设置统一的字体系列、加粗和倾斜属性，也能分别为标的字体系列、加粗和倾斜属性，也能分别为标题题1标题标题6设置不同的字体设置不同的字体大小和颜色属性。大小和颜色属性。如不作属性设置，标题文字会按所选择的标题如不作属性设置，标题文字会按所选择的标题的默认格式显示。的默认格式显示。计算机科学与信息工程学院计算机科学与信息工程学院（5）标题）标题/编码编码可以设置浏览器中显示的标题、文档类型可以设置浏览器中显示的标题、文档类型（DTD）和网页字符编码。）和网页字符编码。浏览器中显示的标题对应的浏览器中显示的标题对应的HTML标记是标记是“”。计算机科学与信息工程学院计算机科学与信息工程学院（6）跟踪图像）跟踪图像可以选择一张网页的设计草图，将其设置成跟可以选择一张网页的设计草图，将其设置成跟踪图像。跟踪图像的作用是铺在当前网页下面踪图像。跟踪图像的作用是铺在当前网页下面作为参考图（类似于网页背景），以跟踪网页作为参考图（类似于网页背景），以跟踪网页的设计。的设计。计算机科学与信息工程学院计算机科学与信息工程学院9.2.5 元标记元标记计算机科学与信息工程学院计算机科学与信息工程学院9.2.5 元标记元标记可以在网页的文件头部分（可以在网页的文件头部分（和和标记之间）找到如下的标记之间）找到如下的HTML代码，这段代码代码，这段代码用用标记说明了网页内容的类型。标记说明了网页内容的类型。标记直译为标记直译为“元标记元标记”，用来告知浏览，用来告知浏览器关于本网页的一些基本信息，以帮助浏览器器关于本网页的一些基本信息，以帮助浏览器正确地显示网页内容。由于其位于网页的文件正确地显示网页内容。由于其位于网页的文件头部分，因此被归为头部分，因此被归为“文件头标记文件头标记”（Dreamweaver称其为称其为“文件头标签文件头标签”）。）。计算机科学与信息工程学院计算机科学与信息工程学院9.2.5 元标记元标记标记（标记（Dreamweaver中称为中称为“标签标签”）的通用写法：的通用写法：其中，属性可以采用其中，属性可以采用“name”或或“http-equiv”。计算机科学与信息工程学院计算机科学与信息工程学院（1）说明性标记）说明性标记采用采用name属性的属性的标记属于说明性标记，标记属于说明性标记，name的值定义了标记性质，的值定义了标记性质，content指定了标指定了标记的内容。记的内容。操作：选择菜单命令操作：选择菜单命令“插入插入”“HTML”“文件头标签文件头标签”“Meta”说明性标签。说明性标签。计算机科学与信息工程学院计算机科学与信息工程学院（2）功能性标记）功能性标记采用采用http-equiv属性的属性的标记属于功能性标记属于功能性标记。标记。http-equiv即即“超文本传输协议配置超文本传输协议配置”（HTTP Equivment），是网页向浏览器告），是网页向浏览器告知的重要信息。知的重要信息。操作：选择菜单命令操作：选择菜单命令“插入插入”“HTML”“文件头标签文件头标签”功能性标签。功能性标签。计算机科学与信息工程学院计算机科学与信息工程学院9.2.6 HTML标题标记标题标记计算机科学与信息工程学院计算机科学与信息工程学院HTML标题标记 标记用来定义标题。标记用来定义标题。定义最大字号的标题，定义最大字号的标题，定义最小字定义最小字号的标题。号的标题。通过设置不同大小的标题，增加文档的条理性。通过设置不同大小的标题，增加文档的条理性。计算机科学与信息工程学院计算机科学与信息工程学院HTML标题标记Dreamweaver提供了提供了6种级别的文档（种级别的文档（标题标标题标题题1标题标题6）与与HTML的的标题标记标题标记相对应。相对应。定义标题的操作：在定义标题的操作：在“设计设计”视图中选定要设视图中选定要设置为标题的文字，随后在置为标题的文字，随后在“属性（属性（HTML）”面板的面板的“格式格式”下拉列表中选择某个级别的下拉列表中选择某个级别的标标题。题。文档中的标题和浏览器标题是两个概念。文档中的标题和浏览器标题是两个概念。计算机科学与信息工程学院计算机科学与信息工程学院9.2.7 段落、列表和水平线段落、列表和水平线计算机科学与信息工程学院计算机科学与信息工程学院9.2.7 段落、列表和水平线段落、列表和水平线段落属性涉及分段和换行、行间距和段间距、段落属性涉及分段和换行、行间距和段间距、文本缩进和凸出、项目列表和编号列表、水平文本缩进和凸出、项目列表和编号列表、水平线等。线等。计算机科学与信息工程学院计算机科学与信息工程学院（1）段落、换行与预格式化文字）段落、换行与预格式化文字称为段落标记，称为段落标记，和和之间所包含文本为之间所包含文本为一个段落。生成方式：在设计视图里按回车键。一个段落。生成方式：在设计视图里按回车键。或或称为换行标记，通常位于称为换行标记，通常位于元素之元素之中中。生成方式：在设计视图里。生成方式：在设计视图里按组合键按组合键+或选择菜单命令或选择菜单命令“插入插入”“HTML”“特特殊字符殊字符”“换行符换行符”。称为预格式化标记，称为预格式化标记，和和之间所之间所包含文本称为预格式化文字，在其中按回车键进包含文本称为预格式化文字，在其中按回车键进行换行时，不会产生行换行时，不会产生或或标签。生成方式：标签。生成方式：选中文字后在属性（选中文字后在属性（HTML）面板设置。）面板设置。计算机科学与信息工程学院计算机科学与信息工程学院（2）项目列表和编号列表）项目列表和编号列表在在HTML中，列表分为：中，列表分为：编号列表（有序列表）编号列表（有序列表）项目列表（无序列表）项目列表（无序列表）定义列表定义列表选择菜单命令选择菜单命令“格式格式”“列表列表”“项目列项目列表表”或或“编号列表编号列表”将选中的段落转变为将选中的段落转变为“项项目列表目列表”或或“编号列表编号列表”的项目。的项目。计算机科学与信息工程学院计算机科学与信息工程学院（2）项目列表和编号列表）项目列表和编号列表需要调整列表的类型或样式时，单击列表中任需要调整列表的类型或样式时，单击列表中任意项目，选择菜单命令意项目，选择菜单命令“格式格式”“列表列表”“属性属性”，或右击列表中任意项目，在快，或右击列表中任意项目，在快捷菜单中选择捷菜单中选择“列表列表”“属性属性”命令，在弹命令，在弹出的出的“列表属性列表属性”对话框中进行设置。对话框中进行设置。计算机科学与信息工程学院计算机科学与信息工程学院（3）水平线）水平线在在HTML中，可以通过插入中，可以通过插入标记来创建水标记来创建水平线，对内容区域进行分割。平线，对内容区域进行分割。选择菜单命令选择菜单命令“插入插入”“HTML”“水平线水平线”来创建水平线。来创建水平线。计算机科学与信息工程学院计算机科学与信息工程学院9.3 建立图文并茂的网页建立图文并茂的网页计算机科学与信息工程学院计算机科学与信息工程学院9.3.1 图像和多媒体类型图像和多媒体类型计算机科学与信息工程学院计算机科学与信息工程学院9.3.1 图像和多媒体类型图像和多媒体类型万维网结合了网络技术和多媒体技术。在网页万维网结合了网络技术和多媒体技术。在网页里，图像、视频以及其他多媒体内容和文字内里，图像、视频以及其他多媒体内容和文字内容一样不可或缺。图像、视频以及其他多媒体容一样不可或缺。图像、视频以及其他多媒体内容在网页中的主要作用：内容在网页中的主要作用：装饰网页，使访问者获得美的感受；装饰网页，使访问者获得美的感受；传递比文字内容更丰富的视觉、听觉信息；传递比文字内容更丰富的视觉、听觉信息；加深访问者的印象，并吸引其再次浏览网页。加深访问者的印象，并吸引其再次浏览网页。计算机科学与信息工程学院计算机科学与信息工程学院（1）常见的图像格式）常见的图像格式计算机中使用的图按存储方式可分为位图和矢计算机中使用的图按存储方式可分为位图和矢量图，按颜色可分为灰度图和彩色图。量图，按颜色可分为灰度图和彩色图。图像是指人通过视觉观察自然界的景物、生物，图像是指人通过视觉观察自然界的景物、生物，然后在大脑中形成的映像。图像是由像素点构然后在大脑中形成的映像。图像是由像素点构成的，也被称为位图。成的，也被称为位图。图形是指由一系列计算机指令经过运算而绘制图形是指由一系列计算机指令经过运算而绘制出来的，使用坐标、运算关系和颜色来描述，出来的，使用坐标、运算关系和颜色来描述，因此通常被称为矢量图。图形文件通常数据量因此通常被称为矢量图。图形文件通常数据量较小，放大与缩小都不会影响图形的各种特征。较小，放大与缩小都不会影响图形的各种特征。计算机科学与信息工程学院计算机科学与信息工程学院（1）常见的图像格式）常见的图像格式BMPGIFJPG/JPEGPNGEPSPSD在以上列出的图像格式中，在以上列出的图像格式中，GIF、JPG/JPEG和和PNG格式是比较适合在网页中使用的格式。格式是比较适合在网页中使用的格式。另外的几种格式，有些不被常用的浏览器所支另外的几种格式，有些不被常用的浏览器所支持，有些虽然被浏览器所支持，但文件过大而持，有些虽然被浏览器所支持，但文件过大而不适合网络传输。不适合网络传输。计算机科学与信息工程学院计算机科学与信息工程学院（2）常见的视频格式）常见的视频格式视频分为适合本地播放的影像视频和适合网络视频分为适合本地播放的影像视频和适合网络中播放的网络流媒体影像视频两种。中播放的网络流媒体影像视频两种。AVIMOVMPEGRMVBASFWMVMP4计算机科学与信息工程学院计算机科学与信息工程学院（3）常见的动画格式）常见的动画格式SWFFLVShockwave计算机科学与信息工程学院计算机科学与信息工程学院9.3.2 使用图像使用图像计算机科学与信息工程学院计算机科学与信息工程学院9.3.2 使用图像使用图像在网页制作中，应用图像有两种方式：在网页制作中，应用图像有两种方式：插入图像，实现图文混排的效果插入图像，实现图文混排的效果将图像作为修饰性元素，如作为网页背景等。将图像作为修饰性元素，如作为网页背景等。计算机科学与信息工程学院计算机科学与信息工程学院（1）HTML图像标记在在HTML中，中，称为图像标记，用来指定称为图像标记，用来指定将要显示在网页中的图像。将要显示在网页中的图像。相关属性：相关属性：使用使用src属性来指定具体图像文件，属性来指定具体图像文件，使用使用width与与height属性来设置图像的宽度和高属性来设置图像的宽度和高度。度。下面是图像标记的一个简单示例：下面是图像标记的一个简单示例：计算机科学与信息工程学院计算机科学与信息工程学院（1）HTML图像标记是一类特殊的是一类特殊的HTML元素只有开始标记元素只有开始标记“”而没有结束标记而没有结束标记“”，元素，元素内容为空（内容为空（Empty Content），因此这类元素），因此这类元素被称为空元素（被称为空元素（Empty Element），前文提到），前文提到的的、等也属于空元素。等也属于空元素。和一般的元素在结束标记进行结束不同，空元和一般的元素在结束标记进行结束不同，空元素在开始标记中进行结束（以开始标记的结束素在开始标记中进行结束（以开始标记的结束而结束）。而结束）。计算机科学与信息工程学院计算机科学与信息工程学院（2）插入图像）插入图像在网页中插入图像具体操作有：在网页中插入图像具体操作有：使用菜单命令插入图像。使用菜单命令插入图像。通过通过“文件文件”面板拖拽图像。面板拖拽图像。通过通过“资源资源”面板插入图像。面板插入图像。建议将要插入的图像文件预先复制到当前站点建议将要插入的图像文件预先复制到当前站点文件夹下，以方便操作。文件夹下，以方便操作。如果对图像有较高的要求，最好在插入前使用如果对图像有较高的要求，最好在插入前使用Photoshop等专业的图像处理软件对图像进行等专业的图像处理软件对图像进行亮度、对比度和色彩饱和度等预处理操作。亮度、对比度和色彩饱和度等预处理操作。计算机科学与信息工程学院计算机科学与信息工程学院（3）设置背景图像）设置背景图像可以选择菜单命令可以选择菜单命令“修改修改”“页面属性页面属性”，在打开的在打开的“页面属性页面属性”对话框中选择对话框中选择“外观外观（CSS）”分类，单击分类，单击“背景图像：背景图像：”文本框文本框右侧的右侧的“浏览浏览”按钮后选择背景图像，然后在按钮后选择背景图像，然后在“重复重复”下拉列表中选择设置背景图像的重复下拉列表中选择设置背景图像的重复方式。方式。在设置网页背景时，应同时设置背景颜色和背在设置网页背景时，应同时设置背景颜色和背景图像。这样，在背景图像没有覆盖到的区域，景图像。这样，在背景图像没有覆盖到的区域，背景颜色将作为背景图像的补充。背景颜色将作为背景图像的补充。计算机科学与信息工程学院计算机科学与信息工程学院9.3.3 使用多媒体内容使用多媒体内容计算机科学与信息工程学院计算机科学与信息工程学院9.3.3 使用多媒体内容使用多媒体内容利用利用Dreamweaver的多媒体支持能力，可以轻的多媒体支持能力，可以轻松地在网页中插入松地在网页中插入Flash动画（动画（SWF）、）、FLV视频和视频和MP4视频等。视频等。由于各类计算机和浏览器对这两个插件的支持由于各类计算机和浏览器对这两个插件的支持程度不尽相同，本书无法确保动画和视频在所程度不尽相同，本书无法确保动画和视频在所有计算机和浏览器上都能正确显示。有计算机和浏览器上都能正确显示。计算机科学与信息工程学院计算机科学与信息工程学院9.3.3 使用多媒体内容使用多媒体内容插入插入SWF动画：选择菜单命令动画：选择菜单命令“插入插入”“媒媒体体”“SWF”。插入插入FLV视频：选择菜单命令视频：选择菜单命令“插入插入”“媒媒体体”“FLV”。插入插入MP4视频：选择菜单命令视频：选择菜单命令“插入插入”“媒媒体体”“ActiveX”，随后设置，随后设置ActiveX组件的组件的“ClassID”为为“CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6”（需要手动输入）并添（需要手动输入）并添加必须的参数。加必须的参数。如果需要删除以上的动画或视频，可在选择组如果需要删除以上的动画或视频，可在选择组件占位符后按键盘上的件占位符后按键盘上的键即可。键即可。计算机科学与信息工程学院计算机科学与信息工程学院9.3.4创建超级链接创建超级链接计算机科学与信息工程学院计算机科学与信息工程学院（1）超级链接的基本概念）超级链接的基本概念超文本文档（网页）包含着若干个可以跳转到超文本文档（网页）包含着若干个可以跳转到另一个超文本文档的超级链接。超级链接简称另一个超文本文档的超级链接。超级链接简称为超链接，而超文本（为超链接，而超文本（HyperText）可以简单）可以简单地看作是包含了超链接的文本内容。地看作是包含了超链接的文本内容。超链接为人们提供了从当前浏览的网页（资源）超链接为人们提供了从当前浏览的网页（资源）跳转到另一个网页（资源）的机制。跳转到另一个网页（资源）的机制。本节提到的超链接（本节提到的超链接（HyperLink）特指网页中）特指网页中的链接，并不同于其他软件如的链接，并不同于其他软件如Word或或PowerPoint中的超链接概念。中的超链接概念。计算机科学与信息工程学院计算机科学与信息工程学院（2）链接的分类）链接的分类根据不同的标准，超级链接可以有以下几种分根据不同的标准，超级链接可以有以下几种分类。类。根据路径：分为绝对路径链接和相对路径链接两类。根据路径：分为绝对路径链接和相对路径链接两类。根据载体：分为文本链接和图像链接两类。根据载体：分为文本链接和图像链接两类。根据目标站点：分为站内链接和站外链接。根据目标站点：分为站内链接和站外链接。根据引用的资源：分为网页链接、锚记链接、下载根据引用的资源：分为网页链接、锚记链接、下载链接、电子邮件链接、空链接和脚本链接等。链接、电子邮件链接、空链接和脚本链接等。计算机科学与信息工程学院计算机科学与信息工程学院（3）HTML链接标记在在HTML中，超级链接是用中，超级链接是用标记来实现的。下面是标记来实现的。下面是为文字为文字“广西师范大学广西师范大学”创建超链接示例：创建超链接示例：广西师范大学广西师范大学其中其中href 属性用来指定链接目标的属性用来指定链接目标的 URL，target属性用来指定窗口打开方式，属性用来指定窗口打开方式，title属性用属性用来指定该链接的提示性文字。来指定该链接的提示性文字。计算机科学与信息工程学院计算机科学与信息工程学院（4）创建超级链接）创建超级链接在在Dreamweaver的的“设计设计”视图中，创建超级视图中，创建超级链接的基本方法有两种：链接的基本方法有两种：选中文本，然后在选中文本，然后在“属性（属性（HTML）”面板的面板的“链接链接”下拉列表框中设置链接目标地址下拉列表框中设置链接目标地址以及以及其他链接属性。其他链接属性。选择菜单命令选择菜单命令“插入插入”“超级链接超级链接”，在，在“超级链接超级链接”对话框设置对话框设置“链接链接”属性。属性。计算机科学与信息工程学院计算机科学与信息工程学院（5）创建不同类型的链接）创建不同类型的链接相对路径链接。相对路径链接。绝对路径链接。绝对路径链接。锚记链接。锚记链接。下载超级链接。下载超级链接。电子邮件链接。电子邮件链接。空链接。空链接。脚本链接。脚本链接。计算机科学与信息工程学院计算机科学与信息工程学院（6）图像超级链接图像超级链接图像超级链接指用图像作为载体的超级链接。图像超级链接指用图像作为载体的超级链接。分为以下三种：分为以下三种：图像超级链接：普通的图像超级链接，用来为一副图像超级链接：普通的图像超级链接，用来为一副图像添加超级链接功能。图像添加超级链接功能。图像热点超级链接：又称为图像热区超级链接，用图像热点超级链接：又称为图像热区超级链接，用来为一幅图像的多个不同区域添加超级链接功能。来为一幅图像的多个不同区域添加超级链接功能。鼠标经过（替换）图像：在鼠标光标经过图像时，鼠标经过（替换）图像：在鼠标光标经过图像时，将替换为另一个大小一致，但颜色或内容不同的图将替换为另一个大小一致，但颜色或内容不同的图像，从而产生动态交互效果。像，从而产生动态交互效果。计算机科学与信息工程学院计算机科学与信息工程学院（7）文字链接的样式）文字链接的样式选择菜单命令选择菜单命令“修改修改”“页面属性页面属性”，选择，选择“链接（链接（CSS）”分类。分类。文字链接属性文字链接属性应和网页文本属性有所不同。应和网页文本属性有所不同。计算机科学与信息工程学院计算机科学与信息工程学院9.3.5 使用表格使用表格计算机科学与信息工程学院计算机科学与信息工程学院9.3.5 使用表格使用表格表格是一种组织、分析和处理数据的手段，用表格是一种组织、分析和处理数据的手段，用途广泛，在各类软件中均能见到电子表格的身途广泛，在各类软件中均能见到电子表格的身影。影。在网页中，表格也是常看到的一种信息展示形在网页中，表格也是常看到的一种信息展示形式，作用：式，作用：网页表格的单元格可以用来展示各类数据。网页表格的单元格可以用来展示各类数据。将页面上各个组成部分作为单元格内容放在表格中，将页面上各个组成部分作为单元格内容放在表格中，进行网页版面布局。进行网页版面布局。计算机科学与信息工程学院计算机科学与信息工程学院（1）表格的构成和）表格的构成和HTML表格标记表格标记表格由行与列构成，行列交叉部分称为单元格。表格由行与列构成，行列交叉部分称为单元格。标记：定义表格。标记：定义表格。标记：定义行，每行有若干个单元格。标记：定义行，每行有若干个单元格。标记：定义单元格。标记：定义单元格。标记：定义行标题或列标题（如果有）。标记：定义行标题或列标题（如果有）。标题单元格使用来。标题单元格使用来。计算机科学与信息工程学院计算机科学与信息工程学院（1）表格的构成和）表格的构成和HTML表格标记表格标记下面是一个使用表格标记定义成绩表示例下面是一个使用表格标记定义成绩表示例。计算机科学与信息工程学院计算机科学与信息工程学院（2）表格的制作和编辑）表格的制作和编辑在在Dreamweaver的的“设计设计”视图中，能进行表视图中，能进行表格的插入、修改行和列、修改表格属性等一系格的插入、修改行和列、修改表格属性等一系列操作，比直接编辑列操作，比直接编辑HTML标记更为简便。标记更为简便。涉及的操作包括：涉及的操作包括：计算机科学与信息工程学院计算机科学与信息工程学院（2）表格的制作和编辑）表格的制作和编辑在当前位置插入表格。在当前位置插入表格。在当前位置插入一行或多行。在当前位置插入一行或多行。在当前位置插入一列或多列。在当前位置插入一列或多列。修改表格属性。修改表格属性。调整表格宽度。调整表格宽度。删除表格。删除表格。计算机科学与信息工程学院计算机科学与信息工程学院（2）表格的制作和编辑）表格的制作和编辑修改行、列、单元格的属性修改行、列、单元格的属性。拆分单元格拆分单元格。合并单元格合并单元格。删除行删除行。删除列删除列。输入文字和图像内容输入文字和图像内容。清除单元格内容清除单元格内容。计算机科学与信息工程学院计算机科学与信息工程学院9.4 使用使用CSS样式样式计算机科学与信息工程学院计算机科学与信息工程学院9.4 使用使用CSS样式样式CSS样式的最主要的作用是对网页进行格式化，样式的最主要的作用是对网页进行格式化，如字体、布局和实现特殊效果等。如字体、布局和实现特殊效果等。CSS独立于独立于HTML结构之外，当改变结构之外，当改变CSS属性属性时，时