网页制作精品教程完整版教学课件 整套教程电子讲义（最全最新）.ppt

《网页制作精品教程完整版教学课件 整套教程电子讲义（最全最新）.ppt》由会员分享，可在线阅读，更多相关《网页制作精品教程完整版教学课件 整套教程电子讲义（最全最新）.ppt（362页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第1章 网页基础知识网页基础知识 网页相关知识简介网页相关知识简介 认识网页构成认识网页构成 网站建设流程网站建设流程 1.1 1.1 网页相关知识简介网页相关知识简介 1.1.1 1.1.1 因特网因特网 因特网（因特网（Internet），又叫国际互联网，它是目），又叫国际互联网，它是目前世界上最大的计算机网络，将无数广域网、局前世界上最大的计算机网络，将无数广域网、局域网及单机按照一定的通讯协议组织在一起，方域网及单机按照一定的通讯协议组织在一起，方便了计算机之间的信息传递。便了计算机之间的信息传递。第2章 Dreamweaver 8Dreamweaver 8入门入门 熟悉熟悉Dream

2、weaver 8Dreamweaver 8工作界面工作界面 网站创建与管理网站创建与管理 基本页面属性设置基本页面属性设置 2.1 2.1 熟悉熟悉Dreamweaver 8Dreamweaver 8工作界面工作界面 启动启动Dreamweaver 8Dreamweaver 8后，在起始页的后，在起始页的“创建新项创建新项目目”列中单击第一项列中单击第一项“HTML”HTML”，将会创建一个，将会创建一个“.html”.html”格式的新文档，并进入格式的新文档，并进入Dreamweaver Dreamweaver 8 8工作界面。工作界面。2.1.1 2.1.1 标题栏和菜单栏标题栏和菜单栏

3、 标题栏上显示软件名称、文档标题和程序窗口标题栏上显示软件名称、文档标题和程序窗口控制按钮（控制按钮（“最小化窗口最小化窗口”按钮按钮 、“最大化最大化窗口窗口”按钮按钮 和和“关闭窗口关闭窗口”按钮按钮 ） 。菜单栏中几乎集中了菜单栏中几乎集中了Dreamweaver Dreamweaver 的全部操的全部操作命令，利用这些命令可以编辑网页、管理站作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。点以及设置操作界面等。 2.1.2 “2.1.2 “插入插入”栏栏 “插入插入”栏包含各种类型的对象按钮（如图栏包含各种类型的对象按钮（如图像、表格和层等），通过单击这些按钮，可像、表格

4、和层等），通过单击这些按钮，可将相应的对象插入到文档中。将相应的对象插入到文档中。2.1.3 2.1.3 文档标签与文档标签与“文档文档”工具栏工具栏 文档标签显示了网页文档名称；文档标签显示了网页文档名称；“文档文档”工工具栏用于切换网页视图，设置网页标题，检具栏用于切换网页视图，设置网页标题，检查浏览器支持等。查浏览器支持等。 2.1.4 2.1.4 状态栏状态栏 状态栏位于文档窗口底部，它提供了与当前状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。文档相关的一些信息。 范例范例1 1 利用状态栏中标签选择单元格利用状态栏中标签选择单元格 在制作网页时，往往会使用一些像素值非常在

5、制作网页时，往往会使用一些像素值非常小的图片作为装饰，而要选中这些小图片或小的图片作为装饰，而要选中这些小图片或小图片所在的单元格就有些困难了，下面我小图片所在的单元格就有些困难了，下面我们就来看看如何利用们就来看看如何利用“标签选择器标签选择器”来选中来选中这些小单元格（具体操作见视频这些小单元格（具体操作见视频2-12-1）。）。 2.1.5 2.1.5 浮动面板浮动面板 在在DreamweaverDreamweaver中，大多数操作都是通过面中，大多数操作都是通过面板实现的。板实现的。“属性属性”面板位于文档窗口的下方，主要用面板位于文档窗口的下方，主要用于查看或编辑所选对象的属性。于查

6、看或编辑所选对象的属性。除除“属性属性”面板外，面板外，Dreamweaver 8Dreamweaver 8还提供还提供了众多面板，如了众多面板，如“文件文件”面板、面板、“历史记录历史记录”面板等。面板等。 如要打开或关闭某个面板，可单击如要打开或关闭某个面板，可单击“窗口窗口”菜单下的相应选项。菜单下的相应选项。 范例范例2 2 练习面板基本操作练习面板基本操作 在了解了面板的种类和作用后，下面来看在了解了面板的种类和作用后，下面来看看如何打开新的面板、隐藏面板，以及完看如何打开新的面板、隐藏面板，以及完全关闭面板等（具体操作见视频全关闭面板等（具体操作见视频2-22-2）。）。 2.2

7、2.2 网站创建与管理网站创建与管理 2.2.1 2.2.1 确定站点目录结构确定站点目录结构 为便于以后管理和维护网站，在开始创建网页为便于以后管理和维护网站，在开始创建网页之前，最好先确定站点的目录结构。它主要包之前，最好先确定站点的目录结构。它主要包括两项任务，一是在本地磁盘上创建用来保存括两项任务，一是在本地磁盘上创建用来保存网站内容（包括网页文件和图像、动画等）的网站内容（包括网页文件和图像、动画等）的文件夹，该文件夹被称为站点根文件夹；为便文件夹，该文件夹被称为站点根文件夹；为便于管理站点中的内容，还要在站点文件夹中创于管理站点中的内容，还要在站点文件夹中创建若干子文件夹，以存放不

8、同类型的文件。建若干子文件夹，以存放不同类型的文件。 范例范例3 3 在在DreamweaverDreamweaver中定义中定义“火百合火百合”站点站点 为便于管理和编辑站点，在创建网页之前，为便于管理和编辑站点，在创建网页之前，首先要在首先要在DreamweaverDreamweaver中定义站点。定义站中定义站点。定义站点可以将本地磁盘中的站点同点可以将本地磁盘中的站点同DreamweaverDreamweaver建立一定的关联，可以使用建立一定的关联，可以使用DreamweaverDreamweaver上上传或下载站点内容（具体操作见视频传或下载站点内容（具体操作见视频2-32-3）。

9、 2.2.2 2.2.2 网页文档基本操作网页文档基本操作 1 1新建文档新建文档 Dreamweaver Dreamweaver中的文档也就是网页，创建新中的文档也就是网页，创建新网页的方法有多种，下面使用网页的方法有多种，下面使用“文件文件”菜单菜单创建网页。创建网页。 选择选择“文件文件”“新建新建”菜菜单，打开单，打开“新建新建文档文档”对话框。对话框。 2 2保存文档保存文档 新建或编辑网页文档后，需要保存文档新建或编辑网页文档后，需要保存文档，才能使所做的设置生效。，才能使所做的设置生效。 选择选择“文件文件”“保存保存”菜菜单，弹出单，弹出“另存另存为为”对话框对话框 选择保选择

10、保存位置存位置 输入文输入文件名件名 单击单击“保保存存”按钮按钮 3 3预览文档预览文档 对网页进行编辑或修改后，可在浏览器对网页进行编辑或修改后，可在浏览器中预览其效果。中预览其效果。打开文档后，单击文打开文档后，单击文档工具栏中的档工具栏中的 按钮按钮，在弹出的菜单中选，在弹出的菜单中选择择“预览在预览在IExplore IExplore 7.0”7.0”菜单项菜单项4 4打开和关闭文档打开和关闭文档 如要打开某站点中现有的网页文档，可以选如要打开某站点中现有的网页文档，可以选择择“文件文件”“打开打开”菜单，在弹出的菜单，在弹出的“打开打开”对话框中选择要打开的文件，然后单击对话框中选

11、择要打开的文件，然后单击“打开打开”按钮。按钮。选择目标选择目标文件所在文件所在文件夹文件夹 关闭文件的操作相当简单，只需单击相应文件关闭文件的操作相当简单，只需单击相应文件右上方的右上方的“关闭关闭”按钮按钮 。 单击选单击选择文件择文件 单击单击“打打开开”按钮按钮 范例范例4 4 利用利用“文件文件”面板创建网页面板创建网页使用使用“文件文件”面板，可以非常方便地管理站面板，可以非常方便地管理站点和站点中的文件。下面看一下在点和站点中的文件。下面看一下在“文件文件”面板中创建和命名文档的方法（具体操作见面板中创建和命名文档的方法（具体操作见视频视频2-42-4）。）。 2.2.3 2.2

12、.3 网页文件命名规则网页文件命名规则 为便于日后的维护和管理，网站中所有文件为便于日后的维护和管理，网站中所有文件和文件夹的命名最好遵循一定的规则。首先和文件夹的命名最好遵循一定的规则。首先，静态的首页文件一般命名为，静态的首页文件一般命名为“index.html”index.html”或或“index.htm”index.htm”。如果是包。如果是包含程序代码的动态页面，比如含程序代码的动态页面，比如ASPASP文件，则命文件，则命名为名为“index.asp”index.asp”。总之，后缀名与网页本。总之，后缀名与网页本身所使用的技术是对应的。身所使用的技术是对应的。 2.3 2.3

13、基本页面属性设置基本页面属性设置 2.3.1 2.3.1 指定网页文档标题和边距指定网页文档标题和边距 在浏览网页时，可以看到浏览器上端都会有表在浏览网页时，可以看到浏览器上端都会有表示网页特征或欢迎词之类的标题。在示网页特征或欢迎词之类的标题。在DreamweaverDreamweaver中，可以在中，可以在“文档工具栏文档工具栏”中的中的“标题标题”文本框中直接输入网页标题，也可以文本框中直接输入网页标题，也可以在在“页面属性页面属性”对话框的对话框的“标题标题/ /编码编码”类别类别中进行设置。中进行设置。 另外，利用另外，利用“页面属性页面属性”对话框，可以随意调对话框，可以随意调整网

14、页的上、下、左、右边距，如果想取消这整网页的上、下、左、右边距，如果想取消这些边距，可以把边距值设定为些边距，可以把边距值设定为“0”0”。2.3.2 2.3.2 指定网页背景颜色和背景图像指定网页背景颜色和背景图像 指定网页背景颜色的方法非常简单，只需在指定网页背景颜色的方法非常简单，只需在“页面属性页面属性”对话框中单击对话框中单击“背景颜色背景颜色”后后的颜色按钮，然后在弹出的调色板中单击选的颜色按钮，然后在弹出的调色板中单击选择相应颜色就可以了。择相应颜色就可以了。如果用户喜欢的话，也可以将图像设置为网页背景 （具体操作见视频2.3.2）。 2.3.3 2.3.3 为网页设置文本和链接

15、属性为网页设置文本和链接属性 通过设置通过设置“页面属性页面属性”对话框中的对话框中的“页面字页面字体体”、“大小大小”和和“文本颜色文本颜色”，可以设置，可以设置网页中文本的属性。网页中文本的属性。另外，要设置链接文本的属性，可以在另外，要设置链接文本的属性，可以在“页页面属性面属性”对话框左侧的分类列表中选择对话框左侧的分类列表中选择“链链接接”选项，然后在右侧设置各项参数。选项，然后在右侧设置各项参数。 范例范例5 5 为为“movie”movie”网页设置页面属性网页设置页面属性 通过前面的学习，相信大家对基本页面属性通过前面的学习，相信大家对基本页面属性的设置已经有了个大概的认识。本

16、节通过编的设置已经有了个大概的认识。本节通过编辑辑“movie”movie”网页，来使读者进一步掌握网网页，来使读者进一步掌握网页页面属性的设置方法（具体操作见视频页页面属性的设置方法（具体操作见视频2-2-5 5）。）。 第2章 Dreamweaver 8Dreamweaver 8入门入门 熟悉熟悉Dreamweaver 8Dreamweaver 8工作界面工作界面 网站创建与管理网站创建与管理 基本页面属性设置基本页面属性设置 2.1 2.1 熟悉熟悉Dreamweaver 8Dreamweaver 8工作界面工作界面 启动启动Dreamweaver 8Dreamweaver 8后，在起始

17、页的后，在起始页的“创建新项创建新项目目”列中单击第一项列中单击第一项“HTML”HTML”，将会创建一个，将会创建一个“.html”.html”格式的新文档，并进入格式的新文档，并进入Dreamweaver Dreamweaver 8 8工作界面。工作界面。2.1.1 2.1.1 标题栏和菜单栏标题栏和菜单栏 标题栏上显示软件名称、文档标题和程序窗口标题栏上显示软件名称、文档标题和程序窗口控制按钮（控制按钮（“最小化窗口最小化窗口”按钮按钮 、“最大化最大化窗口窗口”按钮按钮 和和“关闭窗口关闭窗口”按钮按钮 ） 。菜单栏中几乎集中了菜单栏中几乎集中了Dreamweaver Dreamwea

18、ver 的全部操的全部操作命令，利用这些命令可以编辑网页、管理站作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。点以及设置操作界面等。 2.1.2 “2.1.2 “插入插入”栏栏 “插入插入”栏包含各种类型的对象按钮（如图栏包含各种类型的对象按钮（如图像、表格和层等），通过单击这些按钮，可像、表格和层等），通过单击这些按钮，可将相应的对象插入到文档中。将相应的对象插入到文档中。2.1.3 2.1.3 文档标签与文档标签与“文档文档”工具栏工具栏 文档标签显示了网页文档名称；文档标签显示了网页文档名称；“文档文档”工工具栏用于切换网页视图，设置网页标题，检具栏用于切换网页视图，设置

19、网页标题，检查浏览器支持等。查浏览器支持等。 2.1.4 2.1.4 状态栏状态栏 状态栏位于文档窗口底部，它提供了与当前状态栏位于文档窗口底部，它提供了与当前文档相关的一些信息。文档相关的一些信息。 范例范例1 1 利用状态栏中标签选择单元格利用状态栏中标签选择单元格 在制作网页时，往往会使用一些像素值非常在制作网页时，往往会使用一些像素值非常小的图片作为装饰，而要选中这些小图片或小的图片作为装饰，而要选中这些小图片或小图片所在的单元格就有些困难了，下面我小图片所在的单元格就有些困难了，下面我们就来看看如何利用们就来看看如何利用“标签选择器标签选择器”来选中来选中这些小单元格（具体操作见视频

20、这些小单元格（具体操作见视频2-12-1）。）。 2.1.5 2.1.5 浮动面板浮动面板 在在DreamweaverDreamweaver中，大多数操作都是通过面中，大多数操作都是通过面板实现的。板实现的。“属性属性”面板位于文档窗口的下方，主要用面板位于文档窗口的下方，主要用于查看或编辑所选对象的属性。于查看或编辑所选对象的属性。除除“属性属性”面板外，面板外，Dreamweaver 8Dreamweaver 8还提供还提供了众多面板，如了众多面板，如“文件文件”面板、面板、“历史记录历史记录”面板等。面板等。 如要打开或关闭某个面板，可单击如要打开或关闭某个面板，可单击“窗口窗口”菜单下

21、的相应选项。菜单下的相应选项。 范例范例2 2 练习面板基本操作练习面板基本操作 在了解了面板的种类和作用后，下面来看在了解了面板的种类和作用后，下面来看看如何打开新的面板、隐藏面板，以及完看如何打开新的面板、隐藏面板，以及完全关闭面板等（具体操作见视频全关闭面板等（具体操作见视频2-22-2）。）。 2.2 2.2 网站创建与管理网站创建与管理 2.2.1 2.2.1 确定站点目录结构确定站点目录结构 为便于以后管理和维护网站，在开始创建网页为便于以后管理和维护网站，在开始创建网页之前，最好先确定站点的目录结构。它主要包之前，最好先确定站点的目录结构。它主要包括两项任务，一是在本地磁盘上创建

22、用来保存括两项任务，一是在本地磁盘上创建用来保存网站内容（包括网页文件和图像、动画等）的网站内容（包括网页文件和图像、动画等）的文件夹，该文件夹被称为站点根文件夹；为便文件夹，该文件夹被称为站点根文件夹；为便于管理站点中的内容，还要在站点文件夹中创于管理站点中的内容，还要在站点文件夹中创建若干子文件夹，以存放不同类型的文件。建若干子文件夹，以存放不同类型的文件。 范例范例3 3 在在DreamweaverDreamweaver中定义中定义“火百合火百合”站点站点 为便于管理和编辑站点，在创建网页之前，为便于管理和编辑站点，在创建网页之前，首先要在首先要在DreamweaverDreamweav

23、er中定义站点。定义站中定义站点。定义站点可以将本地磁盘中的站点同点可以将本地磁盘中的站点同DreamweaverDreamweaver建立一定的关联，可以使用建立一定的关联，可以使用DreamweaverDreamweaver上上传或下载站点内容（具体操作见视频传或下载站点内容（具体操作见视频2-32-3）。 2.2.2 2.2.2 网页文档基本操作网页文档基本操作 1 1新建文档新建文档 Dreamweaver Dreamweaver中的文档也就是网页，创建新中的文档也就是网页，创建新网页的方法有多种，下面使用网页的方法有多种，下面使用“文件文件”菜单菜单创建网页。创建网页。 选择选择“文

24、件文件”“新建新建”菜菜单，打开单，打开“新建新建文档文档”对话框。对话框。 2 2保存文档保存文档 新建或编辑网页文档后，需要保存文档新建或编辑网页文档后，需要保存文档，才能使所做的设置生效。，才能使所做的设置生效。 选择选择“文件文件”“保存保存”菜菜单，弹出单，弹出“另存另存为为”对话框对话框 选择保选择保存位置存位置 输入文输入文件名件名 单击单击“保保存存”按钮按钮 3 3预览文档预览文档 对网页进行编辑或修改后，可在浏览器对网页进行编辑或修改后，可在浏览器中预览其效果。中预览其效果。打开文档后，单击文打开文档后，单击文档工具栏中的档工具栏中的 按钮按钮，在弹出的菜单中选，在弹出的菜

25、单中选择择“预览在预览在IExplore IExplore 7.0”7.0”菜单项菜单项4 4打开和关闭文档打开和关闭文档 如要打开某站点中现有的网页文档，可以选如要打开某站点中现有的网页文档，可以选择择“文件文件”“打开打开”菜单，在弹出的菜单，在弹出的“打开打开”对话框中选择要打开的文件，然后单击对话框中选择要打开的文件，然后单击“打开打开”按钮。按钮。选择目标选择目标文件所在文件所在文件夹文件夹 关闭文件的操作相当简单，只需单击相应文件关闭文件的操作相当简单，只需单击相应文件右上方的右上方的“关闭关闭”按钮按钮 。 单击选单击选择文件择文件 单击单击“打打开开”按钮按钮 范例范例4 4

26、利用利用“文件文件”面板创建网页面板创建网页使用使用“文件文件”面板，可以非常方便地管理站面板，可以非常方便地管理站点和站点中的文件。下面看一下在点和站点中的文件。下面看一下在“文件文件”面板中创建和命名文档的方法（具体操作见面板中创建和命名文档的方法（具体操作见视频视频2-42-4）。）。 2.2.3 2.2.3 网页文件命名规则网页文件命名规则 为便于日后的维护和管理，网站中所有文件为便于日后的维护和管理，网站中所有文件和文件夹的命名最好遵循一定的规则。首先和文件夹的命名最好遵循一定的规则。首先，静态的首页文件一般命名为，静态的首页文件一般命名为“index.html”index.html

27、”或或“index.htm”index.htm”。如果是包。如果是包含程序代码的动态页面，比如含程序代码的动态页面，比如ASPASP文件，则命文件，则命名为名为“index.asp”index.asp”。总之，后缀名与网页本。总之，后缀名与网页本身所使用的技术是对应的。身所使用的技术是对应的。 2.3 2.3 基本页面属性设置基本页面属性设置 2.3.1 2.3.1 指定网页文档标题和边距指定网页文档标题和边距 在浏览网页时，可以看到浏览器上端都会有表在浏览网页时，可以看到浏览器上端都会有表示网页特征或欢迎词之类的标题。在示网页特征或欢迎词之类的标题。在DreamweaverDreamweav

28、er中，可以在中，可以在“文档工具栏文档工具栏”中的中的“标题标题”文本框中直接输入网页标题，也可以文本框中直接输入网页标题，也可以在在“页面属性页面属性”对话框的对话框的“标题标题/ /编码编码”类别类别中进行设置。中进行设置。 另外，利用另外，利用“页面属性页面属性”对话框，可以随意调对话框，可以随意调整网页的上、下、左、右边距，如果想取消这整网页的上、下、左、右边距，如果想取消这些边距，可以把边距值设定为些边距，可以把边距值设定为“0”0”。2.3.2 2.3.2 指定网页背景颜色和背景图像指定网页背景颜色和背景图像 指定网页背景颜色的方法非常简单，只需在指定网页背景颜色的方法非常简单，

29、只需在“页面属性页面属性”对话框中单击对话框中单击“背景颜色背景颜色”后后的颜色按钮，然后在弹出的调色板中单击选的颜色按钮，然后在弹出的调色板中单击选择相应颜色就可以了。择相应颜色就可以了。如果用户喜欢的话，也可以将图像设置为网页背景 （具体操作见视频2.3.2）。 2.3.3 2.3.3 为网页设置文本和链接属性为网页设置文本和链接属性 通过设置通过设置“页面属性页面属性”对话框中的对话框中的“页面字页面字体体”、“大小大小”和和“文本颜色文本颜色”，可以设置，可以设置网页中文本的属性。网页中文本的属性。另外，要设置链接文本的属性，可以在另外，要设置链接文本的属性，可以在“页页面属性面属性”

30、对话框左侧的分类列表中选择对话框左侧的分类列表中选择“链链接接”选项，然后在右侧设置各项参数。选项，然后在右侧设置各项参数。 范例范例5 5 为为“movie”movie”网页设置页面属性网页设置页面属性 通过前面的学习，相信大家对基本页面属性通过前面的学习，相信大家对基本页面属性的设置已经有了个大概的认识。本节通过编的设置已经有了个大概的认识。本节通过编辑辑“movie”movie”网页，来使读者进一步掌握网网页，来使读者进一步掌握网页页面属性的设置方法（具体操作见视频页页面属性的设置方法（具体操作见视频2-2-5 5）。）。 第3章 编辑网页内容编辑网页内容 文本的输入与格式设置文本的输入

31、与格式设置 插入图像和动画插入图像和动画 制作超链接制作超链接3.1 3.1 文本的输入与格式设置文本的输入与格式设置 3.1.1 3.1.1 输入文本输入文本 在在DreamweaverDreamweaver中输入文本的方法非常简单，中输入文本的方法非常简单，只要将光标定位在网页的某个位置，然后输入只要将光标定位在网页的某个位置，然后输入文字就可以了。文字就可以了。 另外，可以利用剪贴板将外部文本拷贝到网页另外，可以利用剪贴板将外部文本拷贝到网页中，然后设置其格式和各种属性。中，然后设置其格式和各种属性。 3.1.2 3.1.2 设置文本段落和字符格式设置文本段落和字符格式 Dreamwea

32、ver Dreamweaver中的文本格式设置与标准字处理中的文本格式设置与标准字处理程序（如程序（如WordWord）类似。用户可以利用）类似。用户可以利用“属性属性”面板为文本设置默认格式化样式（段落、标题面板为文本设置默认格式化样式（段落、标题 1 1、标题、标题 2 2等），或者直接设置所选文本的字等），或者直接设置所选文本的字体、大小、颜色、粗体、斜体、对齐方式和列体、大小、颜色、粗体、斜体、对齐方式和列表方式等。表方式等。1 1设置字体列表设置字体列表 DreamweaverDreamweaver中自带的字体有限，一般满足中自带的字体有限，一般满足不了大多数网页设计者的需求。我们可

33、以通不了大多数网页设计者的需求。我们可以通过设置字体列表来解决这一问题。过设置字体列表来解决这一问题。 选选择择字字体体 单击添单击添加字体加字体 2 2设置文本字体及大小设置文本字体及大小 学会设置字体列表后，就可以随心所欲学会设置字体列表后，就可以随心所欲地设置文本的字体了。下面就来学习在地设置文本的字体了。下面就来学习在属性面板中设置文本字体及大小的方法属性面板中设置文本字体及大小的方法。 拖动鼠标拖动鼠标选中文本选中文本 设置字体、设置字体、大小等属性大小等属性 3 3设置段落缩进设置段落缩进 通过设置段落缩进格式，可以更好地布局通过设置段落缩进格式，可以更好地布局文档。将光标置于需要

34、设置段落缩进的任文档。将光标置于需要设置段落缩进的任意段落中，然后在属性面板的意段落中，然后在属性面板的“格式格式”下下拉列表中选择拉列表中选择“段落段落”选项，单击选项，单击“文本文本凸出凸出”按钮按钮 可使段落凸出，单击可使段落凸出，单击“文本文本缩进缩进”按钮可使段落缩进。按钮可使段落缩进。 4 4设置列表项设置列表项 列表分为项目列表和编号列表，项目列表常列表分为项目列表和编号列表，项目列表常应用在应用在“列举列举”类型的文本中，编号列表常应类型的文本中，编号列表常应用在用在“条款条款”类型的文本中，这种方式使得文类型的文本中，这种方式使得文本更直观、明了。本更直观、明了。 选中所要设

35、置的文本，然后单击属性面板上选中所要设置的文本，然后单击属性面板上的的“项目列表项目列表”按钮按钮 ，即可设置列表项。，即可设置列表项。 范例范例1 1 设置设置“公司介绍公司介绍”网页文本网页文本在学习了文本的输入和格式设置方法后在学习了文本的输入和格式设置方法后，下面通过一个小例子来练习和巩固一，下面通过一个小例子来练习和巩固一下这些知识（具体操作见视频下这些知识（具体操作见视频3-13-1）。）。 3.1.3 3.1.3 插入水平线和特殊字符插入水平线和特殊字符 1 1水平线水平线 水平线对于组织信息和区分版块很有帮助。水平线对于组织信息和区分版块很有帮助。要插入水平线，可以选择要插入水

36、平线，可以选择“插入插入”“HTML”“HTML”“水平线水平线”菜单。菜单。 2 2插入特殊字符插入特殊字符 要插入特殊符号，可以选择要插入特殊符号，可以选择“插入插入”“HTML”“HTML”“特殊字符特殊字符”菜单，然后在弹出菜单，然后在弹出的菜单中选择相应的特殊字符。的菜单中选择相应的特殊字符。 如果在如果在“特殊字符特殊字符”菜单下没有找到需要的字菜单下没有找到需要的字符，可以通过选择该菜单中最下面的符，可以通过选择该菜单中最下面的“其他字其他字符符”命令打开命令打开“插入其他字符插入其他字符”对话框。对话框。 3.2 3.2 插入图像和动画插入图像和动画 3.2.1 3.2.1 插

37、入并设置图像属性插入并设置图像属性 在在DreamweaverDreamweaver中插入图像的方法非常简单，中插入图像的方法非常简单，在确定图像插入点后，单击在确定图像插入点后，单击“常用常用”插入栏中插入栏中的的“图像图像”按钮，打开按钮，打开“选择图像源文件选择图像源文件”对对话框，从中选择要插入的图像，然后单击话框，从中选择要插入的图像，然后单击“确确定定”按钮即可。按钮即可。3.2.2 3.2.2 插入插入flashflash动画动画 确定插入点后，单击确定插入点后，单击“常用常用”插入栏中的插入栏中的“媒体：媒体：Flash”Flash”按钮按钮 ，在弹出的，在弹出的“选择文件选择

38、文件”对话框中选择一个扩展名为对话框中选择一个扩展名为.swf.swf的的FlashFlash动动画，单击画，单击“确定确定”按钮，按钮，FlashFlash动画就被插入动画就被插入到了页面中。到了页面中。3.2.3 3.2.3 应用透明应用透明flashflash动画动画 假如我们为网页、某个表格或某个单元格指假如我们为网页、某个表格或某个单元格指定了一张很漂亮的背景图像，而当我们在单定了一张很漂亮的背景图像，而当我们在单元格中又插入一个元格中又插入一个FlashFlash动画的时候，由于动画的时候，由于FlashFlash动画的背景颜色会遮盖掉背景图像，这动画的背景颜色会遮盖掉背景图像，这

39、样就看不到漂亮的背景图像了。那么如何使样就看不到漂亮的背景图像了。那么如何使背景图像能够正常显示呢？答案就是设法将背景图像能够正常显示呢？答案就是设法将FlashFlash动画的背景颜色改成透明（具体操作见动画的背景颜色改成透明（具体操作见视频视频3.2.33.2.3）。）。 范例范例2 2 在在“火百合火百合”主页中插入图像和动画主页中插入图像和动画在学习了图像和动画的应用后，下面在学习了图像和动画的应用后，下面通过一个例子来练习一下这方面的知通过一个例子来练习一下这方面的知识（具体操作见视频识（具体操作见视频3-23-2）。）。 3.3 3.3 制作超链接制作超链接 3.3.1 3.3.1

40、 常规链接常规链接 常规超级链接包括内部超级链接和外部超级链常规超级链接包括内部超级链接和外部超级链接，内部超级链接是指目标文件位于站点内部接，内部超级链接是指目标文件位于站点内部的链接；外部超级链接可实现网站与网站之间的链接；外部超级链接可实现网站与网站之间的跳转，也就是从本网站跳转到其他网站。的跳转，也就是从本网站跳转到其他网站。 1 1内部链接内部链接 内部链接的设置非常灵活，在选中要设置链接的内部链接的设置非常灵活，在选中要设置链接的对象后，可以在属性面板的对象后，可以在属性面板的“链接链接”文本框中直文本框中直接输入要链接到的网址或网页名称；也可以单击接输入要链接到的网址或网页名称；

41、也可以单击属性面板上属性面板上“链接链接”文本框后的文件夹图标文本框后的文件夹图标 ，在弹出的在弹出的“选择文件选择文件”对话框中选择要链接到的对话框中选择要链接到的文件；还有一种方法是单击并拖动文件；还有一种方法是单击并拖动“属性属性”面板面板上上“链接链接”文本框后的文本框后的 按钮到按钮到“文件文件”面板中面板中的文件上。的文件上。 2 2外部链接外部链接 外部链接只能采用一种方法设置，就是外部链接只能采用一种方法设置，就是在选中对象后，在在选中对象后，在“属性属性”面板的面板的“链链接接”文本框中输入要链接到的网址。文本框中输入要链接到的网址。3.3.2 3.3.2 图片链接和下载链接

42、图片链接和下载链接 设置图片链接和下载链接的方法非常简单，选中设置图片链接和下载链接的方法非常简单，选中要设置为链接的文字或图片后，只要在要设置为链接的文字或图片后，只要在“属性属性”面板的面板的“链接链接”文本框中将链接目标设置为图像文本框中将链接目标设置为图像文件或压缩文件就可以了。文件或压缩文件就可以了。 3.3.3 3.3.3 电子邮件链接电子邮件链接 有些网站上留有电子邮件地址，单击该有些网站上留有电子邮件地址，单击该地址可打开地址可打开“Outlook Express”Outlook Express”的的“新新邮件邮件”窗口。这是一种特殊类型的链接窗口。这是一种特殊类型的链接，又叫

43、电子邮件链接，下面看看此类链，又叫电子邮件链接，下面看看此类链接的设置方法。接的设置方法。 3.3.4 3.3.4 热点链接热点链接 如何为一张图片设置多个链接呢？这就如何为一张图片设置多个链接呢？这就用到了热点。使用热点工具可以将一张用到了热点。使用热点工具可以将一张图片划分成多个区域，并为这些区域分图片划分成多个区域，并为这些区域分别设置链接。别设置链接。 范例范例3 3 为为“火百合火百合”网页设置链接网页设置链接在学习了超链接的设置方法后，下面在学习了超链接的设置方法后，下面通过一个例子，来进一步巩固前面所通过一个例子，来进一步巩固前面所学知识（具体操作见视频学知识（具体操作见视频3-

44、33-3）。）。 第4章 构建网页布局构建网页布局 使用表格使用表格使用框架使用框架4.1 4.1 使用表格使用表格 所谓表格就是由一个或多个单元格构成所谓表格就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为的集合，表格中横向的多个单元格称为行，垂直的多个单元格称为列。行与列行，垂直的多个单元格称为列。行与列的交叉区域称为单元格，网页中的元素的交叉区域称为单元格，网页中的元素通常都被放置在这些单元格中，以使其通常都被放置在这些单元格中，以使其“各安其位各安其位”。 此处表示未此处表示未明确设置单明确设置单元格的宽度元格的宽度 此处显示了表格的宽此处显示了表格的宽度。如果只显示一个度

45、。如果只显示一个“”符号，表示未符号，表示未明确设置表格宽度明确设置表格宽度 4.1.1 4.1.1 创建表格创建表格 在在DreamweaverDreamweaver中创建表格的方法非常简单，中创建表格的方法非常简单，确定插入点后，单击确定插入点后，单击“常用常用”插入栏中的插入栏中的“表表格格”按钮，打开按钮，打开“表格表格”对话框。设置各项参对话框。设置各项参数后，单击数后，单击“确定确定”按钮，便可插入表格。按钮，便可插入表格。 4.1.2 4.1.2 选择表格和单元格选择表格和单元格 在在DreamweaverDreamweaver中选择表格的方法非常中选择表格的方法非常简单，只需用

46、鼠标单击表格边框线即可简单，只需用鼠标单击表格边框线即可。要选择某个单元格，可首先将光标放置要选择某个单元格，可首先将光标放置在该单元格内，然后按【在该单元格内，然后按【CtrlCtrlA A】组】组合键或者单击合键或者单击“标签选择器标签选择器”中对应的中对应的“”标签。标签。要选择某行或某列，可将光标置于该行要选择某行或某列，可将光标置于该行的左侧或该列的顶部，当光标形状变为的左侧或该列的顶部，当光标形状变为黑色箭头黑色箭头 或或 时单击鼠标。时单击鼠标。4.1.3 4.1.3 设置表格和单元格的属性设置表格和单元格的属性 选中表格后，使用属性面板可以修选中表格后，使用属性面板可以修改表格

47、的行、列、宽、高，以及填改表格的行、列、宽、高，以及填充、间距等。充、间距等。 在单元格中单击，属性面板中将显示相应单元格的属性。1 1设置表格和单元格的宽度与高度设置表格和单元格的宽度与高度 制作网页时，很多情况下都需要改变表制作网页时，很多情况下都需要改变表格和单元格的宽度与高度，通过拖动边格和单元格的宽度与高度，通过拖动边框或在属性面板的框或在属性面板的“宽宽”和和“高高”文本文本框中直接输入数值，就可以非常方便地框中直接输入数值，就可以非常方便地改变表格和单元格的宽度与高度。改变表格和单元格的宽度与高度。设置表设置表格高度格高度 设置单元格设置单元格“宽宽”和和“高高” 2 2为表格和

48、单元格设置背景颜色及背景图像为表格和单元格设置背景颜色及背景图像 为表格和单元格设置背景颜色及背景为表格和单元格设置背景颜色及背景图像的方法相当简单。图像的方法相当简单。 将光标置于将光标置于单元格中单元格中 单击单击“背景背景”文本框后的文文本框后的文件夹图标件夹图标选选择择文文件件 范例范例1 1 使用表格构建使用表格构建“火百合火百合”主页布局主页布局 在第在第3 3章的范例章的范例2 2中介绍图像的插入方法时，中介绍图像的插入方法时，由于还没有讲到表格，所以给出的是现成的表由于还没有讲到表格，所以给出的是现成的表格。下面将结合表格与图像的应用来看一下格。下面将结合表格与图像的应用来看一

49、下“火百合火百合”主页的具体制作方法（具体操作见视主页的具体制作方法（具体操作见视频频4-14-1）。）。 范例范例2 2 制作细线表格制作细线表格在在DreamweaverDreamweaver中，有多种方法可以制中，有多种方法可以制作细线表格，下面我们讲解一种最简单作细线表格，下面我们讲解一种最简单也是最常用的方法，就是通过设置表格也是最常用的方法，就是通过设置表格的间距和背景颜色来制作细线表格（具的间距和背景颜色来制作细线表格（具体操作见视频体操作见视频4-24-2）。）。 4.1.4 4.1.4 合并与拆分单元格合并与拆分单元格 1 1合并单元格合并单元格 所谓合并单元格，就是将相邻的

50、几个单元格所谓合并单元格，就是将相邻的几个单元格合并成一个单元格。合并成一个单元格。 拖动鼠标选拖动鼠标选中要合并的中要合并的单元格单元格单击单击“合并所合并所选单元格，使选单元格，使用跨度用跨度”按钮按钮2 2拆分单元格拆分单元格 拆分单元格表示将一个单元格拆分成多个单元拆分单元格表示将一个单元格拆分成多个单元格，下面继续在前面的文档中操作，也就是将格，下面继续在前面的文档中操作，也就是将前面合并的单元格拆分开来，具体操作如下。前面合并的单元格拆分开来，具体操作如下。 在要拆分在要拆分的单元格的单元格中单击中单击单击单击“拆分单元格拆分单元格为行或列为行或列”按钮按钮打开打开“拆分单元拆分单