Dreamweaver CS3网页制作-电子教案

第第1 1章章 网页制作基础知识网页制作基础知识目录前进结束后退本章导读本章导读上机实训上机实训知识细目知识细目本章任务本章任务本章导读本章导读本章主要介绍了网站、网页的基本概念、本章主要介绍了网站、网页的基本概念、WWW服务的工作原理、服务的工作原理、DreamweaverCS3的工作界面组成、的工作界面组成、HTML文档的基本文档的基本结构和常见的结构和常见的HTML标记。标记。目录前进结束后退本章任务本章任务了解网站、网页的基本概念、了解网站、网页的基本概念、WWWWWW服务的服务的工作原理工作原理；掌握掌握DreamweaverDreamweaver CS3 CS3的属性面板和文档的属性面板和文档工具栏的作用；工具栏的作用；掌握掌握HTMLHTML文档的基本结构，学会使用文档的基本结构，学会使用HTMLHTML源代码制作简单网页的方法。源代码制作简单网页的方法。熟悉熟悉DreamweaverDreamweaver CS3 CS3的工作界面、文档的工作界面、文档窗口视图方式、面板组的基本操作；窗口视图方式、面板组的基本操作；目录前进结束后退知识细目知识细目1.1网页基础知识网页基础知识1.2DreamweaverCS3的工作界面的工作界面1.3HTML语言的基础知识语言的基础知识目录前进结束后退Internet：是一个全球性的计算机互联网络，中文名称是一个全球性的计算机互联网络，中文名称为为“国际互联网国际互联网”或或“因特网因特网”，如下图所示。，如下图所示。Internet示意图示意图1.1网页基础知识网页基础知识目录前进结束后退网站：指在网络上，根据一定的规则，使用网页开发网站：指在网络上，根据一定的规则，使用网页开发软件制作的用于展示特定内容的相关网页的集合。软件制作的用于展示特定内容的相关网页的集合。网页：一般又称作网页：一般又称作HTML文档，可以在互联网上传输，文档，可以在互联网上传输，能被浏览器识别和翻译成页面并显示出来。能被浏览器识别和翻译成页面并显示出来。网站、网页、主页之间的关系网站、网页、主页之间的关系网站是若干网页的集合网站是若干网页的集合,包括主页和其他网页。包括主页和其他网页。主页是指在浏览器的地址栏中输入网址后默认显示的主页是指在浏览器的地址栏中输入网址后默认显示的页面，是网站的索引页，其他网页通过超链接与主页页面，是网站的索引页，其他网页通过超链接与主页相连。相连。目录前进结束后退1.1网页基础知识网页基础知识WWW服务服务WWW含义为含义为“全球网全球网”或或“万维网万维网”，它以，它以HTTP为基础，提供面向为基础，提供面向Internet的信息查询服务，可以让的信息查询服务，可以让用户使用统一界面的信息浏览系统查询用户使用统一界面的信息浏览系统查询Internet上的上的各类信息，其原理如下图所示。各类信息，其原理如下图所示。目录前进结束后退WWW服务的基本原理服务的基本原理1.1网页基础知识网页基础知识DreamweaverCS3的启动界面的启动界面打开最近编辑过的网页文件新建网页文件或其他对象选用已有的范例创建CSS样式表等网页文件1.2DreamweaverCS3的工作界面的工作界面目录前进结束后退DreamweaverCS3的工作界面的工作界面目录前进结束后退菜单栏菜单栏目录前进结束后退“文件文件”：提供新建、打开、保存、预览、转换文档格式等命令。：提供新建、打开、保存、预览、转换文档格式等命令。“编辑编辑”：提供用于基本操作的标准菜单命令。：提供用于基本操作的标准菜单命令。“查看查看”：用于切换文档的各种视图，显示或隐藏各种页面元素。：用于切换文档的各种视图，显示或隐藏各种页面元素。“插入记录插入记录”：向页面中插入各种页面元素，创建超链接。：向页面中插入各种页面元素，创建超链接。“修改修改”：用于设置页面属性及更改选定页面元素的属性。：用于设置页面属性及更改选定页面元素的属性。“文本文本”：用于设置文本及段落的格式。：用于设置文本及段落的格式。“命令命令”：提供了对各种命令的访问。：提供了对各种命令的访问。“站点站点”：提供了创建、编辑站点的命令。：提供了创建、编辑站点的命令。“窗口窗口”：用于设置工作区布局和各种面板的打开和隐藏。：用于设置工作区布局和各种面板的打开和隐藏。插入栏插入栏目录前进结束后退“常用常用”类别：用于创建和插入最常用的对象。类别：用于创建和插入最常用的对象。“布局布局”类别：用于插入表格、类别：用于插入表格、div标签、框架和标签、框架和Spry构件。构件。还还可以选择表格的两种视图：标准（默认）视图和扩展可以选择表格的两种视图：标准（默认）视图和扩展视图。视图。“表单表单”类别：包含一些按钮，用于创建表单和插入表单元素。类别：包含一些按钮，用于创建表单和插入表单元素。“数据数据”类别：可以插入类别：可以插入Spry数据对象和其它动态元素。数据对象和其它动态元素。“Spry”类别：包含一些用于构建类别：包含一些用于构建Spry页面的按钮。页面的按钮。“文本文本”类别：用于插入各种文本格式和列表格式的标签。类别：用于插入各种文本格式和列表格式的标签。“收藏夹收藏夹”类别：用于将最常用的按钮分组和组织到某一公共类别：用于将最常用的按钮分组和组织到某一公共位置。位置。文档工具栏文档工具栏目录前进结束后退“文档标题文档标题”：显示当前网页的标题。新建文档时，默认的网：显示当前网页的标题。新建文档时，默认的网页标题是页标题是“无标题文档无标题文档”。“文件管理文件管理”：显示：显示“文件管理文件管理”菜单，包括上传、下载等命菜单，包括上传、下载等命令。令。“在浏览器中预览在浏览器中预览/调试调试”：选择一种浏览器预览或调试文档。：选择一种浏览器预览或调试文档。“可视化助理可视化助理”：用户可以使用各种可视化助理来设计页面。：用户可以使用各种可视化助理来设计页面。“检查浏览器兼容性检查浏览器兼容性”：用于检查：用于检查CSS是否对各种浏览器均兼是否对各种浏览器均兼容。容。“文档文档”窗口显示当前打开的文档，用户在这里进行网页的窗口显示当前打开的文档，用户在这里进行网页的编辑制作，分为编辑制作，分为“代码代码”视图、视图、“设计设计”视图和同时显示视图和同时显示“代码代码”视图和视图和“设计设计”视图的视图的“拆分拆分”视图三种视图模式。视图三种视图模式。文档窗口文档窗口标签选择器位于状态栏的最左边，以标签选择器位于状态栏的最左边，以HTML标记显示页面对象标记显示页面对象信息，通过它可以选择各种页面元素。信息，通过它可以选择各种页面元素。标签选择器标签选择器目录前进结束后退状态栏状态栏目录前进结束后退选取工具：用于选取选取工具：用于选取“文档文档”窗口内的对象。窗口内的对象。手形工具：用来移动对象的位置。手形工具：用来移动对象的位置。缩放工具：增大或减小窗口的显示比例。缩放工具：增大或减小窗口的显示比例。窗口大小：显示当前文档窗口的大小，以像素为单位。窗口大小：显示当前文档窗口的大小，以像素为单位。文件大小和估计的下载时间：显示页面的预计文档大小和预计下载文件大小和估计的下载时间：显示页面的预计文档大小和预计下载时间。时间。“属性属性”面板用于查看和编辑当前选定对象（如文本、图像等）面板用于查看和编辑当前选定对象（如文本、图像等）的各种属性。不同页面元素对应的的的各种属性。不同页面元素对应的的“属性属性”面板也不同。面板也不同。属性面板属性面板打开属性面板的方法打开属性面板的方法选择选择“窗口窗口”“属性属性”命令命令按按Ctrl+F3快捷键快捷键目录前进结束后退面板组面板组DreamweaverCS3的面板的面板组中包含许多面板，每个面组中包含许多面板，每个面板都可以展开或折叠，如右板都可以展开或折叠，如右图所示，关闭或打开面板可图所示，关闭或打开面板可以通过以通过“窗口窗口”菜单来完成。菜单来完成。在调整网页中一些对象的位置和大小时，利用在调整网页中一些对象的位置和大小时，利用DreamweaverCS3提供的标尺和网格工具，可以使操作更加准确。提供的标尺和网格工具，可以使操作更加准确。标尺和网格只在网页文档窗口内显示，在浏览器中不会显示。标尺和网格只在网页文档窗口内显示，在浏览器中不会显示。选择选择“查看查看标尺标尺显示显示”命令，可打开标尺。命令，可打开标尺。选择选择“查看查看网格设置网格设置显示网格显示网格”命令可打开网格。命令可打开网格。标尺和网格标尺和网格目录前进结束后退1.3HTML语言的基础知识语言的基础知识头部信息头部信息正文主体部分正文主体部分HTML文档基本结构文档基本结构用用HTML语言制作语言制作网页的两种方法网页的两种方法记事本记事本Dreamweaver、FrontPage等软件等软件 HTML语言语言HTML语言即超文本标记语言，是目前网络上应用最为广泛的语言即超文本标记语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。语言，也是构成网页文档的主要语言。目录前进结束后退（1）标题标记）标题标记格式：格式：网页的标题网页的标题说明：该标记在说明：该标记在标记中，所包含的文字将出现在浏标记中，所包含的文字将出现在浏览器的标题栏上。览器的标题栏上。（2）主体标记）主体标记格式：格式：主体内容主体内容说明：包括所有主体内容，可以设置页面的背景颜色、背景图像、说明：包括所有主体内容，可以设置页面的背景颜色、背景图像、文字颜色等属性。文字颜色等属性。HTML常用标记常用标记目录前进结束后退提示提示在在HTMLHTML文档中，所有的标记都要用括号文档中，所有的标记都要用括号括起来，如括起来，如、。HTMLHTML标记不区分大小写。标记不区分大小写。标记中如果包含多个参数，各参数之间用空格分隔，参数位置不标记中如果包含多个参数，各参数之间用空格分隔，参数位置不 受限制。受限制。（4）换行标记）换行标记格式：格式：说明：用来标记一个换行动作，换行后的内容仍属于同一段落。说明：用来标记一个换行动作，换行后的内容仍属于同一段落。（5）水平线标记）水平线标记格式：格式：说明：在页面中插入一条水平线，通常用于分割文档。说明：在页面中插入一条水平线，通常用于分割文档。（6）图像标记）图像标记格式：格式：说明：在页面中插入一幅图像。说明：在页面中插入一幅图像。（3）段落标记）段落标记格式：格式：段落文本段落文本说明：用来划分段落，在该标记中可以输入一段文字说明：用来划分段落，在该标记中可以输入一段文字。目录前进结束后退（8）表格标记）表格标记表格标记由表格标记、行标记和单元格标记表格标记由表格标记、行标记和单元格标记3部分组成。部分组成。表格标记表格标记行标记行标记单元格标记单元格标记（7）超链接标记）超链接标记格式：格式：文本或文本或图像图像说明：为标记中的文本或图像添加超链接目标，浏览网页时单说明：为标记中的文本或图像添加超链接目标，浏览网页时单击可打开指定的目标文件。击可打开指定的目标文件。目录前进结束后退上机实训上机实训实训实训2 2：在：在Dreamweaver CS3Dreamweaver CS3打开打开D:chapter1lx2.htmlD:chapter1lx2.html网页文件，网页文件，在在“代码代码”视图中修改源代码，完成以下操作。视图中修改源代码，完成以下操作。（1 1）将页面背景颜色设置为）将页面背景颜色设置为“#FF99FF#FF99FF”。（2 2）将）将“太平洋电脑网太平洋电脑网”链接到链接到http:/http:/。（3 3）将表格设置为居中对齐。）将表格设置为居中对齐。（4 4）为图像添加注释文本）为图像添加注释文本“笔记本电脑笔记本电脑”。（5 5）修改网页标题为）修改网页标题为“首页首页”。实训实训1 1：在记事本中创建如图：在记事本中创建如图1 1所示的网页，保存在所示的网页，保存在D:chapter1D:chapter1文文件夹中，网页文件名为件夹中，网页文件名为lx1.htmllx1.html。图图1lx1.html图图2lx2.html目录前进结束后退目录前进结束后退本章导读本章导读上机实训上机实训知识细目知识细目本章任务本章任务第第2 2章章 站点的创建与管理站点的创建与管理本章导读本章导读前进结束后退本章主要介绍了网站的开发流本章主要介绍了网站的开发流程、本地站点的创建及站点管程、本地站点的创建及站点管理，网页文件的创建、保存、理，网页文件的创建、保存、预览等基本操作。预览等基本操作。目录本章任务本章任务前进结束后退掌握站点的创建方法；掌握站点的创建方法；了解网站的开发流程；了解网站的开发流程；学会网页文件的新建、保存、预览等操作。学会网页文件的新建、保存、预览等操作。掌握站点的编辑、导入和导出等操作；掌握站点的编辑、导入和导出等操作；目录2.1 2.1 网站规划网站规划2.2 2.2 创建站点创建站点2.3 2.3 管理站点管理站点2.4 2.4 操作站点文件操作站点文件前进结束后退知识细目知识细目创建本地站点创建本地站点站点的分类站点的分类使用使用“文件文件”面板面板删除站点删除站点导入站点导入站点导出站点导出站点编辑站点编辑站点创建网站目录结构创建网站目录结构预览文档预览文档保存文档保存文档新建网页文件新建网页文件设置首页文件设置首页文件目录2.1网站规划网站规划网站的开发流程网站的开发流程:网站规划设计网站发布和更新维护网站创建及网页制作前进结束后退网站的规划流程网站的规划流程:确定网站的主题收集素材规划网站的栏目及目录结构确定网站的风格目录2.2创建站点创建站点远程站点远程站点站点的分类站点的分类按地理位置按地理位置本地站点本地站点按站点的交互性按站点的交互性静态站点静态站点动态站点动态站点站点的分类站点的分类 概念：站点可以简单地理解为存放网页及各种概念：站点可以简单地理解为存放网页及各种素材的文件夹。素材的文件夹。前进结束后退目录前进结束后退创建本地站点创建本地站点选择选择“站点站点新建站点新建站点”命令命令输入站点的名称输入站点的名称选择如何连接到远程服务器选择如何连接到远程服务器选择本地站点文件夹选择本地站点文件夹选择服务器技术选择服务器技术目录2.3管理站点管理站点前进结束后退目录选择选择“站点站点管理站点管理站点”命令，或在命令，或在“文件文件”面板的下拉列表中选择面板的下拉列表中选择“管理站点管理站点”命令，打开命令，打开“管理站点管理站点”对话框，如下图所示。对话框，如下图所示。“管理站点”对话框 编辑站点编辑站点（1）选择）选择“站点站点管理站点管理站点”命令，打开命令，打开“管理站点管理站点”对话框。对话框。（2）选择编辑的站点，单击）选择编辑的站点，单击“编辑编辑”按钮，弹出按钮，弹出“站点定义站点定义”对话对话框。框。选择选择“基本基本”选项卡，可对站点基本信息进行修改。选项卡，可对站点基本信息进行修改。选择选择“高级高级”选项卡，可对站点信息进行更为详细的修改。选项卡，可对站点信息进行更为详细的修改。前进结束后退目录修改站点基本信息修改站点详细信息前进结束后退本地站点站点定义文件导出导入站点的导入和导出站点的导入和导出 选择“站点站点管理站点管理站点”命令，打开命令，打开“管理站点管理站点”对话框，框，选择要要删除的站点，除的站点，单击“删除除”按按钮。删除站点删除站点提示提示在更换一台机器继续网站开发时，通常先将本地站点导出到站在更换一台机器继续网站开发时，通常先将本地站点导出到站点定义文件中，然后在另一台机器上将站点信息导入。点定义文件中，然后在另一台机器上将站点信息导入。站点定义文件的扩展名为站点定义文件的扩展名为.ste。提示提示站点被删除后，只是删除了站点的定义信息，硬盘中相应位置站点被删除后，只是删除了站点的定义信息，硬盘中相应位置的文件和文件夹并不会被删除。的文件和文件夹并不会被删除。目录2.4操作站点文件操作站点文件前进结束后退创建网站目录结构创建网站目录结构在在“我的电脑我的电脑”或或“资源管理器资源管理器”中创建。中创建。在在“文件文件”面板中选择站点名称或父级文件夹，右单击，在弹面板中选择站点名称或父级文件夹，右单击，在弹出的快捷菜单中选择出的快捷菜单中选择“新建文件夹新建文件夹”命令，如下图所示。命令，如下图所示。目录在“文件”面板中创建目录结构 前进结束后退提示提示建立网站目录结构时要注意以下问题：建立网站目录结构时要注意以下问题：不要将所有文件都存放在根目录下，以免造成文件管理混乱。不要将所有文件都存放在根目录下，以免造成文件管理混乱。按栏目内容建立子目录。按栏目内容建立子目录。在每个栏目目录下都建立独立的在每个栏目目录下都建立独立的imagesimages目录保存图像资源。目录保存图像资源。目录的层次不要太深，建议不要超过目录的层次不要太深，建议不要超过3 3层。层。目录使用英文名称，不要使用中文名称。目录使用英文名称，不要使用中文名称。不要使用过长的目录名称。不要使用过长的目录名称。新建网页文件新建网页文件使用菜单命令创建网页。使用菜单命令创建网页。选择选择“文件文件新建新建”命令，打开命令，打开“新建文档新建文档”对话框，选对话框，选择择“空白页空白页HTMLHTML”选项，在选项，在“布局布局”列表中选择列表中选择“无无”，单，单击击“创建创建”按钮。按钮。使用使用“文件文件”面板创建网页。面板创建网页。在在“文件文件”面板中选择站点，右单击，在弹出的快捷菜单面板中选择站点，右单击，在弹出的快捷菜单中选择中选择“新建文件新建文件”命令，输入文件的名称，按命令，输入文件的名称，按EnterEnter键。键。使用启动界面创建网页。使用启动界面创建网页。目录前进结束后退根据不同服务器的命名要求，网页文件名通常使用小写英文、根据不同服务器的命名要求，网页文件名通常使用小写英文、阿拉伯数字以及符号的组合，不能使用空格、特殊字符、中文等，阿拉伯数字以及符号的组合，不能使用空格、特殊字符、中文等，否则在显示时会出错，因为很多服务器不支持中文。否则在显示时会出错，因为很多服务器不支持中文。提示提示设置首页文件设置首页文件首页，通常称为主页，是指用户在浏览器的地址栏中输入网址后网站首页，通常称为主页，是指用户在浏览器的地址栏中输入网址后网站自动打开的默认页面自动打开的默认页面。在在“文件文件”面板中，右单击要设置为首页的文件，在弹出的快捷菜单面板中，右单击要设置为首页的文件，在弹出的快捷菜单中选择中选择“设成首页设成首页”命令。命令。服服务器器类型型默默认的首的首页名称名称Windows Server(NT/2000/2003/XP)index.htm index.htmldefault.htm default.aspUnix、Linuxindex.htm index.html目录前进结束后退保存文档保存文档选择选择“文件文件保存保存”命令命令按按Ctrl+S快捷键快捷键如果对打开的文档进行了修改，但尚未保存，文件名后将自如果对打开的文档进行了修改，但尚未保存，文件名后将自动添加一个动添加一个“*”，保存后，保存后“*”将消失。将消失。提示提示预览文档预览文档选择选择“文件文件在浏览器中预览在浏览器中预览IExplore”命令命令单击单击“文档文档”工具栏上的工具栏上的“在浏览器中预览在浏览器中预览/调试调试”按钮，选择按钮，选择“预览在预览在IExplore”按按F12键键目录前进结束后退“文件文件”面板的基本操作面板的基本操作打开文件打开文件双击网页文件双击网页文件右单击网页文件，选择右单击网页文件，选择“打开打开”命命令令目录“文件”面板“文件”面板工具栏前进结束后退移动文件移动文件(夹夹)右单击，选择右单击，选择“编辑编辑剪切剪切”，在目的位置右单击，在目的位置右单击选择选择“编辑编辑粘贴粘贴”直接用鼠标拖动直接用鼠标拖动删除文件删除文件(夹夹)右单击，在快捷菜单中选择右单击，在快捷菜单中选择“编辑编辑删除删除”命命令令按按Delete键键创建文件或文件夹创建文件或文件夹在“文件”面板中，选择一个文件(夹）输入名称右单击选择“新建文件（夹）”目录前进结束后退实训实训1：新建一个以自己姓名命名的个人站点，该站点使用：新建一个以自己姓名命名的个人站点，该站点使用“ASPJavaScript”服务器技术服务器技术,，站点保存在，站点保存在“D:ktsjsite”文件夹中，文件夹中，使用使用“文件文件”面板新建首页文件面板新建首页文件“index.html”和图像文件夹和图像文件夹“images”，在，在“我的电脑我的电脑”中查看相应目录的变化。中查看相应目录的变化。实训实训2：将上题中创建的站点使用：将上题中创建的站点使用“管理站点管理站点”功能将其导出，将功能将其导出，将导出的站点定义文件通过网络或移动存储设备拷贝到其他计算机中，导出的站点定义文件通过网络或移动存储设备拷贝到其他计算机中，使用使用“管理站点管理站点”功能将其导入。功能将其导入。实训实训3：新建站点：新建站点“奥运资料奥运资料”，站点保存在，站点保存在“D:ktsjaytp”文文件夹中件夹中,将该站点中的将该站点中的beijing.html改名为改名为index.html，并浏览该网，并浏览该网页。页。实训实训4：删除站点：删除站点“奥运资料奥运资料”中的中的lx.html和和wj.html文件，并将文件，并将fnll.jpg文件移动到文件移动到image文件夹中。文件夹中。上机实训上机实训目录本章要点本章导读本章任务上机实训第第3 3章网页的基本操作章网页的基本操作 本章要点本章要点3.1文本的输入和编辑文本的输入和编辑 文本的输入文本的输入文字的换行文字的换行插入空格插入空格文本的属性设置文本的属性设置插入水平线插入水平线3.2页面设置页面设置“页面属性页面属性”对话框的打开对话框的打开 页面属性对话框的设置页面属性对话框的设置 本章要点本章要点3.3网页图像格式网页图像格式 GIF图像图像JPG/JPEG图像图像PNG图像图像3.4图像的插入图像的插入3.5设置图像属性设置图像属性本章要点本章要点3.6插入插入Flash动画动画插入插入Flash动画文件动画文件 设置透明背景设置透明背景 插入插入Flash按钮按钮 3.7插入其他多媒体元素插入其他多媒体元素插入音频文件插入音频文件 插入视频文件插入视频文件3.8超链接的类型超链接的类型链接路径链接路径链接类型链接类型本章要点本章要点3.9创建各种超链接创建各种超链接文本超链接文本超链接 图像超链接图像超链接锚点超链接锚点超链接电子邮件超链接电子邮件超链接空链接空链接 文件下载链接文件下载链接脚本链接脚本链接本章本章导读导读 本章介绍本章介绍DreamWeaverDreamWeaver建立网页的基本操作。建立网页的基本操作。主要包括文本的输入和编辑方法；图像的插入和属主要包括文本的输入和编辑方法；图像的插入和属性设置；性设置；FlashFlash动画和其他多媒体元素的插入；各动画和其他多媒体元素的插入；各种超链接的建立方法。种超链接的建立方法。本章任务本章任务1.学会文本的输入方法；学会文本的输入方法；2.学会文本的属性设置；学会文本的属性设置；3.学会页面属性的设置；学会页面属性的设置；4.学会图像的插入和属性设置；学会图像的插入和属性设置；5.能插入能插入Flash动画、音频和视频文件；动画、音频和视频文件；6.了解超链接的各种类型；了解超链接的各种类型；7.能建立各种类型的超链接。能建立各种类型的超链接。3.1文本的输入和编辑文本的输入和编辑直接通过键盘输入文本。直接通过键盘输入文本。在其他应用程序中，选择文本，按在其他应用程序中，选择文本，按Ctrl+C键复制，切键复制，切换到换到DreamWeaver文档窗口文档窗口,选择菜单选择菜单“编辑编辑粘贴粘贴”命令命令（或按（或按Ctrl+V键）复制文本。键）复制文本。选择菜单选择菜单“文件文件导入导入word文档文档”命令，弹出命令，弹出“导导入入Word文档文档”对话框，选择要导入的对话框，选择要导入的Word文，单击文，单击“打开打开”按钮，将该按钮，将该word文档中的全部文本添加到文档窗口中。文档中的全部文本添加到文档窗口中。1文本的输入文本的输入2文字的换行文字的换行强制换行有段落换行和换行符换行两种方式。强制换行有段落换行和换行符换行两种方式。(1)段落换行段落换行在换行位置按在换行位置按Enter键，会自动添加段落标记键，会自动添加段落标记和和，生成新的段，生成新的段落，并且在两段之间会空出一行。落，并且在两段之间会空出一行。(2)换行符换行换行符换行按按Shift+Enter键。键。选择菜单选择菜单“插入记录插入记录HTML特殊字符特殊字符换行符换行符”命令。命令。选择插入栏选择插入栏“文本文本”类别中的按钮，在下拉菜单中选择类别中的按钮，在下拉菜单中选择“换行符换行符”命令。命令。在代码视图窗口中，输入换行代码标记在代码视图窗口中，输入换行代码标记。3.1文本的输入和编辑文本的输入和编辑设置文本格式，需先选中文本，出现如图文本属性面板，可以对文本进设置文本格式，需先选中文本，出现如图文本属性面板，可以对文本进行相应的属性设置。行相应的属性设置。3插入空格插入空格按按Ctrl+Shift+SpaceCtrl+Shift+Space键。键。选择菜单选择菜单“插入记录插入记录HTMLHTML特殊字符特殊字符不换行空格不换行空格”命令。命令。选择插入栏选择插入栏“文本文本”类别中的按钮，在下拉菜单中选择类别中的按钮，在下拉菜单中选择“不换行空格不换行空格”命命令。令。在代码视图窗口中，输入空格代码在代码视图窗口中，输入空格代码 nbsp;。切换中文输入法为全角状态，按空格键输入。切换中文输入法为全角状态，按空格键输入。3.1文本的输入和编辑文本的输入和编辑4文本的属性设置文本的属性设置“文本属性”面板(1)设置文本字体设置文本字体设置文本字体，先选择要设置字体的文本，然后在文本属性面板的设置文本字体，先选择要设置字体的文本，然后在文本属性面板的“字体字体”列列表中选择合适字体类型。表中选择合适字体类型。DreamWeaver中默认的是宋体字，中默认的是宋体字，“字体字体”列表默认显示列表默认显示的是英文字体类型，若设置其他中文字体，要先将中文字体类型添加到字体列表中，的是英文字体类型，若设置其他中文字体，要先将中文字体类型添加到字体列表中，方法是：方法是：单击文本属性面板中单击文本属性面板中“字体字体”列表按钮，选择列表按钮，选择“编辑字体列表编辑字体列表”命令，弹出命令，弹出“编辑字体列表编辑字体列表”对话框。对话框。在在“可用字体可用字体”列表中选择要添加的字体，双击鼠标或单击按钮，将其添加列表中选择要添加的字体，双击鼠标或单击按钮，将其添加到到“选择的字体选择的字体”列表中。字体添加完毕后，单击列表中。字体添加完毕后，单击“确定确定”按钮。按钮。3.1文本的输入和编辑文本的输入和编辑“编辑字体列表”对话框(2)设置文字大小设置文字大小 在属性面板的在属性面板的“大小大小”列表中选择相应的大小级别和单位，可以更列表中选择相应的大小级别和单位，可以更改选择文字的大小。改选择文字的大小。(3)设置文本颜色设置文本颜色系统默认文本颜色是黑色，要设置文本其他颜色，先选择文本，单击系统默认文本颜色是黑色，要设置文本其他颜色，先选择文本，单击属性面板中的，在颜色拾取器中选择颜色，或在右边的文本框中输入颜色属性面板中的，在颜色拾取器中选择颜色，或在右边的文本框中输入颜色的名称或的名称或1616进制代码，例如：进制代码，例如：redred或或#FF0000#FF0000。颜色拾取器3.1文本的输入和编辑文本的输入和编辑(1)创建水平线创建水平线 光标定位于需要插入水平线的位置，选择菜单光标定位于需要插入水平线的位置，选择菜单“插入记录插入记录HTMLHTML水平线水平线”命令。命令。(2)修改水平线修改水平线选择水平线，窗口下方出现如图选择水平线，窗口下方出现如图3-143-14所示的属性面板，通所示的属性面板，通过属性面板，可以设置水平线的一些属性。过属性面板，可以设置水平线的一些属性。“水平线属性”面板 5插入水平线插入水平线3.1文本的输入和编辑文本的输入和编辑 设置水平线颜色。右击水平线，在弹出菜单中选择设置水平线颜色。右击水平线，在弹出菜单中选择“编辑标编辑标签签”命令，打开命令，打开 “标签编辑器标签编辑器”对话框。选择对话框。选择“浏览器特定的浏览器特定的”选项，单击，在颜色拾取中选择合适颜色，单击选项，单击，在颜色拾取中选择合适颜色，单击“确定确定”按钮。按钮。3.1文本的输入和编辑文本的输入和编辑“标签编辑器”对话框 3.2页面属性页面属性选择菜单选择菜单“修改修改页面属性页面属性”命令。命令。按按Ctrl+JCtrl+J键。键。右击文档窗口空白处，在弹出的菜单中选择右击文档窗口空白处，在弹出的菜单中选择“页面属性页面属性”命令。命令。单击属性面板中按钮。单击属性面板中按钮。1“页面属性页面属性”对话框的打开对话框的打开 2页面属性对话框的设置页面属性对话框的设置 “页面属性页面属性”对话框共有五种分类：对话框共有五种分类：“外观外观”、“链接链接”、“标题标题”、“标题标题/编码编码”、“跟踪图像跟踪图像”，其中常用的是，其中常用的是“外外观观”、“链接链接”和和“标题标题/编码编码”三个类别。三个类别。(1)外观外观在在“外观外观”选项中可以设置页面的默认字体、背景颜色和页面边距等。选项中可以设置页面的默认字体、背景颜色和页面边距等。3.2页面属性页面属性“外观”对话框(2)链接链接在在“链接链接”选项中可以设置链接的字体、颜色和下划线样式等，如图选项中可以设置链接的字体、颜色和下划线样式等，如图所示。所示。“链接”对话框 3.2页面属性页面属性(3)标题标题/编码编码在在“标题标题/编码编码”选项中可以设置网页标题和编码类别，如图所示。选项中可以设置网页标题和编码类别，如图所示。“标题/编码”对话框 3.2页面属性页面属性2JPG/JPEG图像图像JPEG的含义是的含义是“联合图像专家组联合图像专家组”，文件扩展名为，文件扩展名为“.jpg”或或“.jpeg”。JPEG格式可以支持格式可以支持24位真彩色，普遍应用于存储连续色位真彩色，普遍应用于存储连续色调的图像。调的图像。JPEG格式可以支持有损或无损压缩，是可以把文件压缩到格式可以支持有损或无损压缩，是可以把文件压缩到最小的格式。最小的格式。JPEG格式压缩的主要是高频信息，能用较大的压缩比保格式压缩的主要是高频信息，能用较大的压缩比保存颜色丰富的图像，适合应用于互联网，可减少图像的传输时间，目前存颜色丰富的图像，适合应用于互联网，可减少图像的传输时间，目前各类浏览器均支持各类浏览器均支持JPEG这种图像格式。这种图像格式。3.3网页图像格式网页图像格式1GIF图像图像GIF的含义是的含义是“图像互换格式图像互换格式”。GIF文件不属于任何应用程序，目文件不属于任何应用程序，目前几乎所有相关软件都支持前几乎所有相关软件都支持GIF图像文件。图像文件。GIF格式图像可以制作成格式图像可以制作成GIF动画。动画。GIF文件的缺点是最多只能使用文件的缺点是最多只能使用256种颜色，适合存储色调不连续种颜色，适合存储色调不连续或具有大面积单一颜色的图像，例如按钮、图标、徽标或其它具有统一或具有大面积单一颜色的图像，例如按钮、图标、徽标或其它具有统一色彩和色调的图像。色彩和色调的图像。3PNG图像图像PNG的含义是的含义是“可移植性网络图像可移植性网络图像”，是网络接受的新型图像文，是网络接受的新型图像文件格式。件格式。PNG能够提供长度比能够提供长度比GIF小小30的无损压缩图像文件，但与的无损压缩图像文件，但与JPEG相比，压缩量较少，它同时提供相比，压缩量较少，它同时提供24位和位和48位真彩色图像支持以位真彩色图像支持以及其他诸多技术性支持。由于及其他诸多技术性支持。由于PNG非常新，所以目前并不是所有的程非常新，所以目前并不是所有的程序都可以用它来存储图像文件，序都可以用它来存储图像文件，Photoshop可以处理可以处理PNG图像文件，图像文件，也可以用也可以用PNG图像文件格式存储。文件必须具有图像文件格式存储。文件必须具有.png文件扩展名才能文件扩展名才能被被Dreamweaver识别为识别为PNG文件。文件。3.3网页图像格式网页图像格式3.4图像的插入图像的插入(1)将光标定位到窗口中要插入图像的位置，执行以下操作之一，将光标定位到窗口中要插入图像的位置，执行以下操作之一，打开打开“选择图像源文件选择图像源文件”对话框。对话框。选择菜单选择菜单“插入记录插入记录图像图像”命令。命令。选择插入栏选择插入栏“常用常用”类别中的类别中的“图像图像”按钮。按钮。按按Ctrl+Alt+I键。键。“选择图像源文件“对话框(2)在在“选取文件名自选取文件名自”选项中选择：选项中选择：文件系统：选择一个图像文件，一般情况应选择此选项。文件系统：选择一个图像文件，一般情况应选择此选项。数据源：选择一个动态图像源。数据源：选择一个动态图像源。(3)选择要插入的图像文件，单击选择要插入的图像文件，单击“确定确定”按钮。按钮。3.4图像的插入图像的插入(4)如果图像文件不在站点文件夹中，会提示用户将文件保存到站如果图像文件不在站点文件夹中，会提示用户将文件保存到站点文件夹中。点文件夹中。(5)弹出如图所示的弹出如图所示的“图像标签辅助功能属性图像标签辅助功能属性”对话框，在对话框，在“替换文替换文本本”和和“详细描述详细描述”文本框中输入值，然后单击文本框中输入值，然后单击“确定确定”按钮。按钮。“图像标签辅助功能属性”对话框3.5设置图像属性设置图像属性单击选择图像，窗口下方会出现图像属性面板，可以利用属性面单击选择图像，窗口下方会出现图像属性面板，可以利用属性面板设置图像的属性。板设置图像的属性。“图像属性”面板1插入插入Flash动画文件动画文件(1)在在“文档文档”窗口的窗口的“设计设计”视图中，将光标定位在要插入动画的视图中，将光标定位在要插入动画的位置，然后执行以下操作之一：位置，然后执行以下操作之一：选择插入栏选择插入栏“常用常用”类别中的类别中的“媒体媒体”按钮，在下拉菜单中选择按钮，在下拉菜单中选择“Flash”命令命令选择菜单选择菜单“插入记录插入记录媒体媒体Flash”命令。命令。按按Ctrl+Alt+F键。键。(2)弹出弹出“选择文件选择文件”对话框，选择一个对话框，选择一个Flash文件文件(扩展名为扩展名为.swf)，单击，单击“确定确定”按钮。若按钮。若Flash文件不在当前站点文件夹中，需文件不在当前站点文件夹中，需将文件复制到站点文件夹中，完成后在将文件复制到站点文件夹中，完成后在“文档文档”窗口中出现窗口中出现Flash占占位符，大小和位符，大小和Flash动画的原始尺寸相同。动画的原始尺寸相同。3.6插入插入Flash动画动画(1)在在“文档文档”窗口的窗口的“设计设计”视图中，选择插入的视图中，选择插入的Flash占位符，占位符，打开打开Flash属性面板。属性面板。(2)单击编辑参数按钮，出现参数对话框。单击编辑参数按钮，出现参数对话框。2设置透明背景设置透明背景“参数”对话框 3.6插入插入Flash动画动画(3)单击单击“添加添加”按钮，输入如图所示参数，单击按钮，输入如图所示参数，单击“确定确定”按钮。按钮。(1)在在“文档文档”窗口中，将光标定位到要插入窗口中，将光标定位到要插入Flash按钮的位置，按钮的位置，然后执行以下操作之一：然后执行以下操作之一：选择插入栏选择插入栏“常用常用”类别中的类别中的“媒体媒体”按钮，在下拉菜单中选择按钮，在下拉菜单中选择“Flash按钮按钮”命令命令选择菜单选择菜单“插入记录插入记录媒体媒体Flash按钮按钮”命令。命令。3插入插入Flash按钮按钮“插入Flash按钮”对话框 3.6插入插入Flash动画动画(2)弹出如图所示对话框，完成相应设置，单击弹出如图所示对话框，完成相应设置，单击“应用应用”或或“确定确定”按钮，将按钮，将Flash按钮插入按钮插入“文档文档”窗口中。窗口中。(1)在在“设计设计”视图中，将光标定位到要插入音频文件的位置，视图中，将光标定位到要插入音频文件的位置，然后执行以下操作之一：然后执行以下操作之一：选择插入栏选择插入栏“常用常用”类别中的类别中的“媒体媒体”按钮，在下拉菜单中选按钮，在下拉菜单中选择择“插件插件”命令。命令。选择菜单选择菜单“插入记录插入记录媒体媒体插件插件”命令。命令。(2)在选择文件对话框中选择要插入的音频文件，单击在选择文件对话框中选择要插入的音频文件，单击“确定确定”按钮。按钮。(3)在文档窗口中出现在文档窗口中出现，表示音频文件已经插入到当前网页中，表示音频文件已经插入到当前网页中，可以单击属性面板中的按钮可以单击属性面板中的按钮试听。试听。1插入音频文件插入音频文件 3.7插入其他多媒体元素插入其他多媒体元素音频播放控件 目前网页可用的视频文件类型也有多种，有目前网页可用的视频文件类型也有多种，有Flash视频，也有非视频，也有非Flash视频，插入视频的方法也有多种，常见的操作是：视频，插入视频的方法也有多种，常见的操作是：(1)将视频文件拷贝到站点文件夹。将视频文件拷贝到站点文件夹。(2)在在“文档文档”窗口中输入视频名称，并选中。窗口中输入视频名称，并选中。(3)单击属性面板的链接框右侧的浏览文件按钮，浏览选择站点单击属性面板的链接框右侧的浏览文件按钮，浏览选择站点中的视频文件。中的视频文件。2插入视频文件插入视频文件 3.7插入其他多媒体元素插入其他多媒体元素3.8超链接的类型超链接的类型1链接路径链接路径(1)绝对路径绝对路径绝对路径是指被链接目标对象的完整路径，包括服务器协议名称、绝对路径是指被链接目标对象的完整路径，包括服务器协议名称、主机名称、文件夹名称和文件名称，其格式为：传输协议：主机名称、文件夹名称和文件名称，其格式为：传输协议：/服务器地服务器地址：通讯端口址：通讯端口/文件位置文件位置/文件名。文件名。例：例：http:/ (1)利用属性面板创建利用属性面板创建在在“文档文档”窗口中选择文本。窗口中选择文本。在属性面板中执行下列操作之一：在属性面板中执行下列操作之一：单击单击“链接链接”框右侧的文件夹图标，浏览选择目标文件。框右侧的文件夹图标，浏览选择目标文件。在在“链接链接”框中直接键入文档的路径和文件名。框中直接键入文档的路径和文件名。单击单击“链接链接”框右侧的指向文件图标，拖动鼠标到右侧文件面板中框右侧的指向文件图标，拖动鼠标到右侧文件面板中相应的文件。相应的文件。在属性面板在属性面板“目标目标”列表框中选择文档的打开方式：列表框中选择文档的打开方式：_blank：将链接的文档在一个新的浏览器窗口打开，原来打开的浏览：将链接的文档在一个新的浏览器窗口打开，原来打开的浏览器窗口不变。器窗口不变。_parent：将链接的文档在该链接所在框架的父级框架或父级窗口中：将链接的文档在该链接所在框架的父级框架或父级窗口中打开。打开。_self：将链接的文档在当前的浏览器窗口中打开。该目标是系统默：将链接的文档在当前的浏览器窗口中打开。该目标是系统默认的，因此不需要指定它。认的，因此不需要指定它。_top：将链接的文档在整个浏览器窗口中打开，从而删除所有框架。：将链接的文档在整个浏览器窗口中打开，从而删除所有框架。(2)利用超链接命令创建利用超链接命令创建将光标放在文档中希望建立链接的位置。将光标放在文档中希望建立链接的位置。通过下列操作之一，执行超链接命令：通过下列操作之一，执行超链接命令：选择菜单选择菜单“插入记录插入记录超级链接超级链接”命令。命令。单击单击“插入插入”栏的栏的“常用常用”类别中的类别中的“超链接超链接”按钮。按钮。弹出如图弹出如图3-46所示超级链接对话框，完成相应设置，单击所示超级链接对话框，完成相应设置，单击“确定确定”按钮。按钮。3.9创建各种超链接创建各种超链接“超级链接”对话框网页中的图像也可以建立超链接，图像超链接有两种情况：一种是网页中的图像也可以建立超链接，图像超链接有两种情况：一种是以整个图像为对象建立超链接，这种链接的建立方法和文本链接的建立以整个图像为对象建立超链接，这种链接的建立方法和文本链接的建立方法一样。另一种是为图像的不同区域分别创建超链接，称为图像热点方法一样。另一种是为图像的不同区域分别创建超链接，称为图像热点的链接，这种链接的建立方法是：的链接，这种链接的建立方法是：(1)在文档窗口中插入图像，并选中图像。在文档窗口中插入图像，并选中图像。(2)利用热点工具划分图像的不同区域。利用热点工具划分图像的不同区域。(3)利用指针热点工具选择图像热点。利用指针热点工具选择图像热点。(4)在热点属性面板中完成超链接设置在热点属性面板中完成超链接设置“热点属性”面板3.9创建各种超链接创建各种超链接2图像超链接图像超链接(1)创建命名锚记创建命名锚记创建命名锚记是指定要访问内容的特定位置，方法是：创建命名锚记是指定要访问内容的特定位置，方法是：将光标定位到要插入命名锚记的位置。将光标定位到要插入命名锚记的位置。执行以下操作之一来插入命名锚记。执行以下操作之一来插入命名锚记。选择菜单选择菜单“插入记录插入记录命名锚记命名锚记”命令。命令。选择插入栏选择插入栏“常用常用”类别中的类别中的“命名锚记命名锚记”按钮。按钮。按按Ctrl+Alt+A键。键。弹出弹出“命名锚记命名锚记”对话框，在对话框，在“锚记名称锚记名称”框中，键入锚记的框中，键入锚记的名称，单击名称，单击“确定确定”按钮，在光标处会出现锚点标记。按钮，在光标处会出现锚点标记。3.9创建各种超链接创建各种超链接3锚点超链接锚点超链接“命名锚记”对话框(2)链接到命名锚记链接到命名锚记在在“文档文档”窗口中，选择要从其创建链接的文本或图像，然后执行窗口中，选择要从其创建链接的文本或图像，然后执行以下操作之一，将其链接到命名锚记。以下操作之一，将其链接到命名锚记。在属性面板的在属性面板的“链接链接”框中，键入符号框中，键入符号(#)和锚记名称。和锚记名称。单击属性面板中单击属性面板中“链接链接”框右侧的框右侧的“指向文件指向文件”图标，然后将它图标，然后将它拖到要链接到的锚记上。拖到要链接到的锚记上。在在“文档文档”窗口中，按住窗口中，按住Shift键不放拖动鼠标，从所选文本或键不放拖动鼠标，从所选文本或图像拖动到要链接到的锚记。图像拖动到要链接到的锚记。3.9创建各种超链接创建各种超链接4电子邮件超链接电子邮件超链接 (1)利用属性面板创建邮件链接利用属性面板创建邮件链接在文档窗口中选择要创建电子邮件链接的文本或图像。在文档窗口中选择要创建电子邮件链接的文本或图像。在属性面板的在属性面板的“链接链接”框中，键入框中，键入mailto:电子邮件地址，如电子邮件地址，如mailto:。(2)利用菜单命令创建邮件链接利用菜单命令创建邮件链接在文档窗口中将光标定位到要创建邮件链接的位置，：在文档窗口中将光标定位到要创建邮件链接的位置，：选择菜单选择菜单“插入记录插入记录电子邮件链接电子邮件链接”命令。命令。单击单击“插入插入”栏栏“常用常用”类别中的类别中的“电子邮件链接电子邮件链接”按钮。按钮。出现如图所示电子邮件链接对话框，完成设置，单击出现如图所示电子邮件链接对话框，完成设置，单击“确定确定”按按钮。钮。文本：输入用于链接电子邮件的文本。文本：输入用于链接电子邮件的文本。E-mail：输入电子邮件地址。：输入电子邮件地址。“电子邮件链接”对话框3.9创建各种超链接创建各种超链接空链接是没有指向任何对象的链接。对象建立空链接或链接后，才可以空链接是没有指向任何对象的链接。对象建立空链接或链接后，才可以附加行为或动作。空链接的建立很简单，可采用下面方法：附加行为或动作。空链接的建立很简单，可采用下面方法：(1)选中需建立空链接的文本或图像。选中需建立空链接的文本或图像。(2)在属性面板在属性面板“链接链接”框中键入框中键入javascript:;（javascript后依次接一后依次接一个冒号和一个分号）或者一个个冒号和一个分号）或者一个#号。号。3.9创建各种超链接创建各种超链接5空链接空链接6文件下载链接文件下载链接文件下载链接方法和文本链接的建立方法完全相同，只是应当注意，文件下载链接方法和文本链接的建立方法完全相同，只是应当注意，为了减少网络流量，应当将一些较大的文件压缩成压缩包或分卷压缩包，为了减少网络流量，应当将一些较大的文件压缩成压缩包或分卷压缩包，存放于站点文件夹中。存放于站点文件夹中。(1)选择用于创建脚本链接的文本或图像。选择用于创建脚本链接的文本或图像。(2)在属性面板的在属性面板的“链接链接”文本框中输入文本框中输入javascript:，后跟一些，后跟一些JavaScript代码或一个代码或一个JavaScript函数。在冒号与代码之间不能函数。在冒号与代码之间不能键入空格。键入空格。3.9创建各种超链接创建各种超链接7脚本链接脚本链接上机实训 设置网页页面属性，输入文本并设置文本格式，效果如图所示。设置网页页面属性，输入文本并设置文本格式，效果如图所示。在网页中插入图像，并设置图像格式。在网页中插入图像，并设置图像格式。实训实训3泉水甲天下泉水甲天下实训实训4风景这边独好风景这边独好实训实训5Flash应用应用上机实训 在网页中插入在网页中插入FlashFlash动画和动画和FlashFlash按钮。按钮。实训实训6娱乐天地娱乐天地 在网页中插入音频和视频文件。在网页中插入音频和视频文件。实训实训7班级首页班级首页 在网页中建立不同类型的超链接。在网页中建立不同类型的超链接。实训实训8济南旅游地图济南旅游地图 在网页中创建图像热点和锚点链接。在网页中创建图像热点和锚点链接。第第4 4章章 网页的布局网页的布局目录前进结束后退本章导读本章导读上机实训上机实训知识细目知识细目本章任务本章任务本章导读本章导读本章主要介绍了网页的布局方法，包括表本章主要介绍了网页的布局方法，包括表格的创建和布局、框架的创建及应用、格的创建和布局、框架的创建及应用、APAP元素的创建及属性设置、模板的创建和应元素的创建及属性设置、模板的创建和应用。用。目录前进结束后退本章任务本章任务了解使用表格、框架规划网页布局的方法；了解使用表格、框架规划网页布局的方法；掌握表格的创建、编辑等基本操作；掌握表格的创建、编辑等基本操作；掌握框架的创建及属性设置的方法；掌握框架的创建及属性设置的方法；学会使用框架进行网页导航的方法；学会使用框架进行网页导航的方法；学会学会AP DivAP Div的基本操作及属性设置；的基本操作及属性设置；学会模板的创建方法；学会模板的创建方法；学会使用模板创建和更新网页的方法。学会使用模板创建和更新网页的方法。目录前进结束后退知识细目知识细目4.1表格的基本操作表格的基本操作4.2设置表格属性设置表格属性4.3使用表格使用表格“布局布局”视视图图4.4框架框架(集集)的基本操作的基本操作4.5设置框架设置框架(集集)的属性的属性4.6APDiv的基本操作的基本操作4.7设置设置APDiv的属性的属性4.8APDiv在排版中的应用在排版中的应用4.9模板的建立模板的建立4.10模板的应用模板的应用目录前进结束后退4.1表格的基本操作表格的基本操作创建表格创建表格（1 1）打开）打开“表格表格”对话框，如右图：对话框，如右图：选择选择“插入记录插入记录表格表格”命令。命令。选择插入栏选择插入栏“常用常用”类别中的类别中的“表表 格格”按钮。按钮。按按Ctrl+Alt+TCtrl+Alt+T键。键。（