Dreamweaver CS6基本操作

第2章

主要知识学习时间20分钟10分钟10分钟10分钟10分钟10分钟10分钟10分钟Dreamweaver CS6基本操作本章重点：本章主要介绍创建站点、管理站点、设置网页的文本以及设置网页的超级链接。学习目的：初步认识Dreamweaver CS6，为深入了解该软件做好基础。参考时间：90分钟2.1 Dreamweaver CS6的工作界面2.2 创建站点2.3 管理站点内容2.4 网页文件的基本操作2.5 设置网页文本2.6 为网页添加图像2.7 设置超级链接2.8 插入Flashp017-042第二章.indd 172014-6-5 14:43:26

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计 2.1 Dreamweaver CS6的工作界面在学习Dreamweaver CS6之前，先来了解一下它的工作环境，便于以后的使用，Dreamweaver CS6的工作界面主要由菜单栏、文件工具栏、文件窗口、状态区、“属性”面板和面板组等组成。Dreamweaver CS6的工作界面2.1.1 菜单栏在菜单栏中主要包括“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”和“帮助”10个菜单。单击任意一个菜单，都会弹出下拉菜单，使用下拉菜单中的命令基本上能够实现Dreamweaver CS6的所有功能，菜单栏中还菜单栏包括一个工作界面切换器和一些控制按钮。 文件：在该下拉菜单中包括了“新建”、“打开”、“关闭”、“保存”和“导入”等常用命令，用于查看当前文件或对当前文件进行操作。 编辑：在该下拉菜单中包括了“拷贝”、“粘贴”、“全选”、“查找和替换”等用于基本编辑操作的标准菜单命令。 查看：在该下拉菜单中包括了设置文件的各种视图命令，如“代码”视图和“设计”视图等，还可以显示或隐藏不同类型的页面元素和工具栏。 插入：用于将各种网页元素插入到当前文件中，包括“图像”、“媒体”和“表格”等。

“文件”下拉菜单“编辑”下拉菜单“查看”下拉菜单“插入”下拉菜单18p017-042第二章.indd 182014-6-5 14:43:26

第2章 Dreamweaver CS6基本操作修改：用于更改选定页面元素或项的属性，包括“页面属性”、“合并单元格”和“将表格转换为 AP Div”等。格式：用于设置文本的格式，包括“缩进”、“对齐”和“样式”等。命令：提供对各种命令的访问，包括“开始录制”、“扩展管理”和“应用源格式”等。站点：用于创建和管理站点。“修改”下拉菜单“格式”下拉菜单“命令”下拉菜单“站点”下拉菜单窗口：提供对Dreamweaver CS6中所有面板、检查器和窗口的访问。帮助：提示对Dreamweaver CS6文件的访问。

“窗口”下拉菜单“帮助”下拉菜单2.1.2 文件工具栏使用文件工具栏可以在文件的不同视图之间进行切换，如“代码”视图和“设计”视图等，在工具栏中还包含各种查看选项和一些常用的操作。文件工具栏文件工具栏中的常用按钮的功能如下。“代码”按钮：单击该按钮，仅在文件窗口中显示和修改HTML源代码。“拆分”按钮：单击该按钮，可在文件窗口中同时显示HTML源代码和页面的设计效果。“设计”按钮：单击该按钮，仅在文件窗口中显示网页的设计效果。“在浏览器中预览/调试”按钮：单击该按钮，在弹出的下拉菜单中选择一种浏览器，用于预览和调试网页。 提示：在下拉菜单中选择“编辑浏览器列表”命令，弹出“首选参数”对话框，在该对话框中可以设置主浏览器和次浏览器。19p017-042第二章.indd 192014-6-5 14:43:27

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计“在浏览器中预览/调试”下拉菜单“首选参数”对话框“文件管理”按钮：单击该按钮，在弹出的下拉菜单中包括“消除只读属性”、“获取”、“上传”和“设计备注”等命令。“检查浏览器兼容性”按钮：单击该按钮，在弹出的下拉菜单中包括“检查浏览器兼容性”、“显示所有问题”和“设置”等命令。“标题”文本框：用于设置或修改文件的标题。“文件管理”下拉菜单 “检查浏览器兼容性”下拉菜单2.1.3 文件窗口文件窗口用于显示当前创建和编辑的文件，在该窗口中，可以输入文字、插入图片和表格等，也可以对整个页面进行设置，通过单击文件工具栏中的“代码”按钮、“拆分”按钮、“设计”按钮或“实时视图”等按钮，可以分别在窗口中查看代码视图、拆分视图、设计视图或实时显示视图。文件窗口2.1.4 状态区状态区位于文件窗口的底部，提供与用户正在创建的文件有关的其他信息。在状态区中包括卷标选择器、窗口大小弹出菜单和下载指示器等功能。状态区2.1.5 “属性”面板“属性”面板是网页中非常重要的面板，用于显示在文件窗口中所选元素的属性，并且可以对选择的元素的属性进行修改，该面板中的内容因选定的元素不同会有所不同。“属性”面板20p017-042第二章.indd 202014-6-5 14:43:27

第2章 Dreamweaver CS6基本操作 提示：通过双击“属性”面板空白处可将“属性”面板折叠起来。再次双击空白处，可展开“属性”面板。折叠“属性”面板2.1.6 面板组面板组位于工作窗口的右侧，用于帮助用户监控和修改工作，其中包括“插入”面板、“CSS样式”面板和“组件”面板等。1．打开面板如果需要使用的面板没有在面板组中显示出来，则可以使用“窗口”菜单将其打开，具体的操作步骤如下。步骤1 在菜单栏中单击“窗口”菜单，在弹出的下拉菜单中选择需要打开的面板，在这里选择“资源”。步骤2 打开“资源”面板。面板组“窗口”下拉菜单“资源”面板 提示：如果要关闭该面板，再次在菜单栏中执行“窗口 | 资源”命令即可。2．关闭与打开全部面板按F4键，即可关闭工作界面中所有的面板。再次按F4键，关闭的面板又会显示在原来的位置上。关闭全部面板21p017-042第二章.indd 212014-6-5 14:43:27

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计2.1.7 “常用”插入面板网页元素虽然多种多样，但是它们都可以被称为对象。大部分的对象都可以通过“插入”面板插入到文件中。“插入”面板 包括“常用”插入面板、“布局”插入面板、“表单”插入面板、“数据”插入面板、“Spry”插入面板、“jQuery Mobile”插入面板、“InContext Editing”插入面板、“文本”插入面板和“收藏夹”插入面板。在面板中包含用于创建和插入对象的按钮。“常用”插入面板用于创建和插入常用对象，例如表格、图像和日期等。“常用”插入面板2.1.8 “布局”插入面板单击“插入”面板上方的下三角按钮，在弹出的下拉列表中选择“布局”选项，即可打开“布局”插入面板，该面板用于插入 Div 标签、绘制AP

Div和插入Spry菜单栏等。

选择“布局”选项“布局”插入面板

2.1.9 “表单”插入面板单击“插入”面板上方的下三角按钮，在弹出的下拉列表中选择“表单”选项，即可打开“表单”插入面板。在“表单”插入面板中包含一些用于创建表单和插入表单元素（包括Spry验证构件）的按钮。

选择“表单”选项“表单”插入面板

22p017-042第二章.indd 222014-6-5 14:43:27

第2章 Dreamweaver CS6基本操作2.1.10 “数据”插入面板单击“插入”面板上方的下三角按钮，在弹出的下拉列表中选择“数据”选项，即可打开“数据”插入面板。使用该面板可以插入Spry数据对象和其他动态元素。“数据”插入面板2.1.11 “Spry”插入面板单击“插入”面板上方的下三角按钮，在弹出的下拉列表中选择“Spry”选项，即可打开“Spry”插入面板。在该面板中包含一些用于构建Spry页面的按钮，例如Spry区域、Spry重复项和Spry折迭式等。“Spry”插入面板2.1.12 “jQuery Mobile”插入面板单击“插入”面板上方的下三角按钮，在弹出的下拉列表中选择“jQuery Mobile”选项，即可打开“jQuery Mobile”插入面板。该面板用于插入jQuery Mobile页面和jQuery Mobile列表视图等。“jQuery Mobile”插入面板23p017-042第二章.indd 232014-6-5 14:43:27

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计2.1.13 “InContext Editing”插入面板单击“插入”面板上方的下三角按钮，在弹出的下拉列表中选择“InContext Editing”选项，即可打开“InContext Editing”插入面板。在该面板中包含生成InContext编辑页面的按钮。“InContext Editing”插入面板2.1.14 “文本”插入面板单击“插入”面板上方的下三角按钮，在弹出的下拉列表中选择“文本”选项，即可打开“文本”插入面板。该面板中包含用于插入各种文本格式和列表格式的按钮。“文本”插入面板2.1.15 “收藏夹”插入面板单击“插入”面板上方的下三角按钮，在弹出的下拉列表中选择“收藏夹”选项，即可打开“收藏夹”插入面板。该面板用于将最常用的按钮分组和组织到某一公共位置。“收藏夹”插入面板 2.2 创建站点Dreamweaver可以用于创建单个网页，但在大多数情况下，是将这些单独的网页组合起来成为站点。Dreamweaver CS6不仅提供了网页编辑特性，而且带有强大的站点管理功能。有效地规划和组织站点，对建立网站是非常必要的。合理的站点结构能够加快对站点的设计，提高工作效率，节省时间。如果将所有的网页都存储在一个目录下，当站点的规模越来越大时，管理起来就会变得很不容易。因此一般来说，应该充分利用文件夹来管理文件。24p017-042第二章.indd 242014-6-5 14:43:28

第2章 Dreamweaver CS6基本操作2.2.1 认识站点Dreamweaver站点是一种管理网站中所有关联文件的工具，通过站点可以实现将文件上传到网络服务器、自动跟踪和维护、管理文件以及共享文件等功能。严格地说，站点也是一种文件的组织形式，由文件和文件所在的文件夹组成，不同的文件夹保存不同的网页内容，如images文件夹用于存放图片，这样便于以后管理与更新。Dreamweaver中的站点包括本地站点、远程站点和测试站点3类。本地站点用于存放整个网站框架的本地文件夹，是用户的工作目录，一般制作网页时只需建立本地站点。远程站点是存储于Internet服务器上的站点和相关文件。通常情况下，为了不连接Internet而对所建的站点进行测试，可以在本地计算机上创建远程站点，来模拟真实的Web服务器进行测试。测试站点是Dreamweaver处理动态页面的文件夹，使用此文件夹生成动态内容并在工作时连接到数据库，用于对动态页面进行测试。 提示：静态网页是标准的HTML文件，采用HTML编写，是通过HTTP在服务器端和客户端之间传输的纯文本文件，其扩展名是htm或html。动态网页以.asp、jsp、php等形式为后缀，以数据库技术为基础，含有程序代码，是可以实现如用户注册、在线调查、订单管理等功能的网页文件。动态网页能根据不同的时间、不同的来访者显示不同的内容，动态网站更新方便，一般在后台直接更新。2.2.2 站点及目录的作用站点是用来存储一个网站的所有文件的，这些文件包括网页文件、图片文件、服务器端处理程序和Flash动画等。在定义站点之前，首先要做好站点的规划，包括站点的目录结构和链接结构等。这里讲的站点目录结构是指本地站点的目录结构，远程站点的结构应该与本地站点相同，便于网页的上传与维护。链接结构是指站点内各文件之间的链接关系。2.2.3 合理建立目录站点的目录结构与站点的内容多少有关。如果站点的内容很多，就要创建多级目录，以便分类存放文件；如果站点的内容不多，目录结构可以简单一些。创建目录结构的基本原则是方便站点的管理和维护。目录结构创建是否合理，对于网站的上传、更新、维护、扩充和移植等工作有很大的影响。特别是大型网站，目录结构设计不合理时，文件的存放就会混乱。甚至到了无法更新维护的地步。因此，在设计网站目录结构时，应该注意以下几点：● 无论站点的大小，都应该创建一定规模的目录结构，不要把所有的文件都存放在站点的根目录中。如果把很多文件都放在根目录中，很容易造成文件管理的混乱，影响工作效率，也容易发生错误。● 按模块及其内容创建子目录。● 目录层次不要太深，一般控制在5级以内。● 不要使用中文目录名，防止因此而引起的链接和浏览错误。● 为首页建立文件夹，用于存放网站首页中的各种文件，首页使用率最高，为它单独建一个文件夹很有必要。● 目录名应能反映目录中的内容，方便管理维护。但是这也容易导致一个安全问题，浏览者很容易猜测出网站的目录结构，也就容易对网站实施攻击。所以在设计目录结构的时候，尽量避免目录名和栏目名完全一致，可以采用数字、字母、下划线等组合的方式来提高目录名的猜测难度。25p017-042第二章.indd 252014-6-5 14:43:28

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计2.2.4 创建本地站点在开始制作网页之前，最好先定义一个新站点，这是为了更好地利用站点对文件进行管理，也可以尽可能减少错误，如链接出错、路径出错等。使用Dreamweaver的向导创建本地站点的具体操作步骤如下。步骤1 打开Dreamweaver CS6，在菜单栏中选择步骤2 单击对话框中的“浏览文件夹”按钮，“站点 | 新建站点”命令，弹出“站点设置对象”选择需要设为站点的目录。对话框，在对话框中输入站点的名称。设置站点名称浏览文件夹步骤3 弹出“选择根文件夹”对话框，选择需要设为根目录的文件夹，然后单击“打开”按钮。步骤4 单击“打开”按钮后，将会打开该文件夹，单击“选择”按钮。步骤5 返回“站点设置对象”对话框，单击“服务器”选项，在弹出的对话框中单击“添加新服务器”按钮，即可弹出配置服务器的对话框。步骤6 在对话框中可以设置服务器的名称、连接方式等，设置完成后单击“保存”即可。单击“添加新服务器”按钮配置服务器步骤7 返回“站点设置对象”对话框，本地站点文件夹已设定为选择的文件夹，在对话框中单击“保存”按钮，完成本地站点的创建。步骤8 本地站点创建完成，在“文件”面板中的“本地文件”窗口中会显示该站点的根目录。选择文件夹完成设置站点根目录26p017-042第二章.indd 262014-6-5 14:43:28

第2章 Dreamweaver CS6基本操作 2.3 管理站点内容创建站点的主要目的就是有效地管理站点文件。无论是创建空白文件还是利用已有的文件创建站点时，都需要对站点中的文件夹或文件进行操作。利用“文件”面板，可以对本地站点中的文件夹和文件进行创建、删除、移动和复制等操作。2.3.1 添加文件或删除文件1．添加文件夹站点中的所有文件被统一存放在单独的文件夹内，根据包含文件的多少，又可以细分到子文件夹里。在本地站点中创建文件夹的具体操作步骤如下。步骤1 打开“文件”面板，可以看到所创建的站点。在面板的“本地文件”窗口中右击站点名称，弹出右键快捷菜单，选择“新建文件夹”命令。步骤2 新建文件夹的名称处于可编辑状态，可以为新建的文件夹重新命名，将新建文件夹命名为“效果”。步骤3 在不同的文件夹名称上右击鼠标，并选择“新建文件夹”命令，就会在所选择的文件夹下创建子文件夹。例如在“效果”文件夹下创建“001”子文件夹。新建文件夹重命名新建文件夹 提示：如果想修改文件夹名，选定文件夹后，单击文件夹的名称或按F2键，将名称启动处于可编辑状态，输入新的名称即可。2．添加文件文件夹创建完成后，就可以在文件夹中创建相应的文件了，创建文件的具体操作步骤如下。步骤1 打开【文件】面板，在准备新建文件的文件夹上单击鼠标右键，在弹出的快捷菜单中选择【新建文件】命令。步骤2 新建文件的名称处于可编辑状态，可以为新建的文件重新命名。新建的文件名默认为“”，可将其改为“”。

选择【新建文件】命令

重命名文件 提示：创建文件时，一般应先创建主页，文件名应设定为或，否则，上传后将无法显示网站内容。文件名后缀.html不可省略，否则就不是网页了。27p017-042第二章.indd 272014-6-5 14:43:28

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计2.3.2 实战：删除文件或文件夹要从本地站点中删除文件或文件夹，具体操作步骤如下。步骤1 在“文件”面板中，选中要删除的文件或文件夹。步骤2 单击鼠标右键，在弹出的菜单中选择“编辑 | 删除”命令。或直接按Delete键。步骤3 这时会弹出提示对话框，询问是否要删除所选的文件或文件夹。单击“是”按钮，即可将文件或文件夹从本地站点中删除。

选择文件夹或文件选择“删除”命令提示对话框 提示：与站点的删除操作不同，对文件或文件夹的删除操作会从磁盘上将相应的文件或文件夹删除。按Delete键，也可将其删除。2.3.3 重命名文件或文件夹下面介绍如何重命名文件，具体操作步骤如下。步骤1 在“文件”面板中，选中要重命名的文件或文件夹。步骤2 单击鼠标右键，在弹出的菜单中选择“编辑 | 重命名”命令。或者双击该文件或文件夹，即可为该文件重新命名。

选择“重命名”命令重命名后的效果 2.4 网页文件的基本操作浏览网页时，文本是最直接的获取信息的方式。文本是基本的信息载体，不管网页内容如何丰富，文本自始至终都是网页中最基本的元素。本章对文本的一些基本操作进行介绍，例如插入文本、文本属性设置、项目列表等。2.4.1 创建空白网页文本是制作网页中最基本的内容，也是网页中的重要元素。一个网页，主要是靠文本内容来传达信息的。文本是网页的主要显示方式，更是网页的灵魂。28p017-042第二章.indd 282014-6-5 14:43:29

第2章 Dreamweaver CS6基本操作新建、保存及打开网页文件，是正式学习网页制作的第一步，也是网页制作的基本条件。下面介绍网页文件的新建、保存等基本操作，具体操作步骤如下。步骤1 启动Dreamweaver CS6软件，打开项目创建窗口。步骤2 在菜单栏中执行“文件 | 新建”命令，打开“新建文件”对话框，在“空白页”的“页面类型”项目列表中选择“HTML”，然后在右边的“布局”列表中选择“无”。项目创建项目【新建文件】对话框步骤3 单击“创建”按钮，新建HTML网页文件，创建一个空白的HTML网页文件。步骤4 在菜单栏中执行“文件 | 保存”命令，打开“另存为”对话框，在该对话框中为网页文件选择存储的位置和文件名，并选择保存类型，如HTML Documents。新建的HTML文件【另存为】对话框 提示：保存网页的时候，使用者可以在“保存类型”下拉列表中根据制作网页的要求选择不同的文件类型，区别文件的类型主要是文件后面的后缀名称不同。设置文件名的时候，不要使用特殊符号，尽量不要使用中文名称。步骤5 单击“保存”按钮，即可将网页文件保存。2.4.2 打开网页文件下面介绍如何打开网页文件，具体操作步骤如下。步骤1 如果要打开一个网页文件，可以在菜单栏中执行“文件 | 打开”命令，在“打开”对话框中选择要打开的网页文件。步骤2 单击“打开”按钮，即可在Dreamweaver中打开网页文件。29p017-042第二章.indd 292014-6-5 14:43:29

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计选择“打开”命令“打开”对话框 2.5 设置网页文本在Dreamweaver CS6中，用户可以通过直接输入、复制和粘贴或导入的方式，轻松地将文本插入到文件中，除此之外，还可以通过“插入”面板上的“文本”选项插入一些文本内容，如日期、特殊字符等。2.5.1 为网页输入文本插入和编辑文本是网页制作的重要步骤，也是网页制作不可缺少的组成部分。在Dreamweaver中，插入网页文本比较简单，可以直接输入，也可以将其他电子文本中的文字内容复制到其中。本节将具体介绍网页文本输入和编辑的操作步骤。步骤1 启动Dreamweaver CS6软件，打开随书附带光盘中的“CDROM素材第2章输入文本.html”文件。步骤2 将光标插入到网页文件标题的下面，并输入文本。打开素材文件输入文本2.5.2 实战：设置文本属性步骤1 继续上一个例子，选中输入的文本，在“属步骤2 单击文本框右侧的“加粗”按钮、性”面板中单击“CSS”按钮，然后在“字“居中对齐”按钮，然后将字体颜色设置体”文本框中选择“楷体”，按Enter键，弹出“新建为“#F60”，字体大小设置为“36px”。在CSS规则”对话框，在“选择器名称”下方的文本框“垂直”选项的右侧单击下三角按钮，在弹出中输入名称，然后单击“确定”按钮。的下拉列表中选择“顶端”。

设置字体新建“CSS规则”对话框设置页面属性30p017-042第二章.indd 302014-6-5 14:43:30

第2章 Dreamweaver CS6基本操作步骤3 将网页文件进行保存，按F12键在浏览器中浏览最后效果。浏览网页2.5.3 设置段落格式一般情况下，在网页中要输入大量的文字来对某件事或者某件物品进行详细的讲解，为了便于分析，我们会在制作的过程中为其设置简单的段落格式。设置段落格式的具体操作步骤如下。步骤1 打开随书附带光盘中的“CDROM素材第2章设置段落.html”文件，将鼠标放在段落中任意位置或选择段落中的一些文本。执行“格式 | 段落格式”命令或者在“属性”面板的“格式”下拉列表中选择段落格式。步骤2 选择一个段落格式，例如标题1，与所选格式关联的HTML标记（表示“标题1”的h1、表示“预先格式化的”文本的pre等）将应用于整个段落。若选择“无”选项，则删除段落格式。

在菜单栏中选择“格式”下的“段落格式”

在页面属性面板中选择步骤3 在段落格式中对段落应用标题标签时，Dreamweaver会自动地添加下一行文本，作为标准段落，若要更改此设置，可执行“编辑 | 首选参数”命令，在弹出的对话框中，在“常规”分类的“编辑选项”区域中，取消所选的“标题后切换到普通段落”复选框。取消“标题后切换到普通段落”复选框2.5.4 设置列表格式项目列表格式主要是在项目的属性对话框中进行设置。使用“列表属性”对话框可以设置整个列表或个别列表项的外观。可以设置编号样式、重置计数或设置个别列表项或整个列表的项目符号样式选项。步骤1 新建一个网页文件，然后执行“格式 | 列表

步骤2 将插入点放置在列表项的文本中，然后在| 项目列表”命令，然后在文件中输入几段文字。 菜单栏中执行“格式 | 列表 | 属性”命令，打开“列表属性”对话框。31p017-042第二章.indd 312014-6-5 14:43:30

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计插入项目列表并输入文字“列表属性”对话框步骤3 在弹出的对话框中单击“列表类型”右侧的下三角按钮，在弹出的下拉列表中选择“编号列表”选项，单击“样式”右侧的下三角按钮，选择“大写罗马字母”选项，然后单击“确定”按钮。设置“列表属性”对话框在设置项目属性的时候，如果在“列表属性”对话框中的“开始计数”文本框中输入有序编号的起始数值，那么在光标所处的位置上整个项目列表会重新编号。如果在“重设计数”文本框中输入新的编号起始数字，那么在光标所在的项目列表处以输入的数值为起点，重新开始编号。更改项目列表属性后的效果2.5.5 实战：设置特殊字符在浏览网页时，经常会看到一些特殊的字符，如◎、€、◇等。这些特殊字符在HTML中以名称或数字的形式表示，称为实体。HTML包含版权符号（©）、“与”符号（&）、注册商标符号（®）等Dreamweaver本身拥有字符的实体名称。每个实体都有一个名称（如—）和一个数字等效值（如—）。下面将对Dreamweaver CS6中的特殊字符进行介绍。步骤1 打开随书附带光盘中的“CDROM素材第2章输入文本.html”文件，将光标插入到“在下方输入文本”下面的空白处，单击“文本”插入面板，然后单击“字符”按钮右侧的下三角按钮，在展开的下拉列表中可看到Dreamweaver中的特殊符号。步骤2 单击其中任意一个，即可插入相应的符号。

选择特殊字符插入符号

步骤3 如果要使用Dreamweaver中的其他字符，步骤4 在“插入其他字符”对话框中单击想要插可以在展开的下拉列表中选择“其他字符”命令，入的字符，然后单击“确定”按钮，即可在网页打开“插入其他字符”对话框。文件中插入相应的字符。32p017-042第二章.indd 322014-6-5 14:43:30

第2章 Dreamweaver CS6基本操作插入其他字符插入其他字符2.5.6 实战：制作图文混排网站页面下面介绍将图片插入到文本中的操作步骤。步骤1 打开随书附带光盘中的“CDROM素材第2章制作图文混排网站页面.html”文件，将光标插入到文本的任意位置。步骤2 执行“插入 | 图像”命令，在弹出的对话框中打开随书附带光盘中的“CDROM素材第2章黑色衣服.jpg”图片，然后单击“确定”按钮。在“弹出的图像标签辅助功能属性”对话框中单击“确定”即可完成插入图片。将光标插入到文本中插入图片后的效果步骤3 选中图片，右键单击鼠标，在弹出的快捷菜单中执行“对齐 | 左对齐”命令，即可将图片混排于文本中。步骤4 执行“插入 | 图像”命令，在弹出的对话框中打开随书附带光盘中的“CDROM素材第2章蓝色衣服.jpg”图片文件，然后单击“确定”按钮，使用同样方法将这张图片混排于文本中，即可完成图文混排网站页面。选择对齐方式完成图文混排网站页面33p017-042第二章.indd 332014-6-5 14:43:31

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计 2.6 为网页添加图像为网页添加图像可以使网页充满活力、富有美感，并可以直观地体现网页要突出的内容，而网页的风格也是需要依靠图像才能得以体现。在网页中使用图像是有限制的。准确地使用图像来体现网页的风格，同时又不会影响浏览网页的速度，这是在网页中插入图像的基本要求。首先，使用的图像素材要贴近网页风格，能够明确表达所要说明的内容，并且图片要富于美感，能够吸引浏览者的注意，并能够通过图片对网站产生兴趣。最好是用自己制作的图片来体现设计意图。当然选择其他合适的图片经过加工和修改之后再运用到网页中也是可以的，但一定要注意版权问题。其次，在选择美观、得体的图片的同时，还要注意图片的大小。相对而言，图像所占文件大小往往是文字的数百至数千倍，所以图像是导致网页文件过大的主要原因。过大的网页文件往往会造成浏览速度过慢等问题，所以尽量使用小一些的图像文件也是很重要的。2.6.1 插入图像新建一个网页文件，执行“插入 | 图像”命令，选择一幅图片。

选择“图像”命令插入图片后的效果

2.6.2 实战：鼠标经过图像鼠标经过图像效果是由两张图片组成的，正常显示为原始图像，当鼠标经过时显示另一张图像，鼠标离开后又恢复为原始图像。下面介绍鼠标经过图像的制作步骤。步骤1 新建网页文件，执行“修改 | 页面属性”命令，在弹出的“页面属性”对话框中，按需要设置“字体”、“字号”、“颜色”、“背景图像”等选项，然后单击“确定”按钮。设置页面属性设置页面属性后的效果步骤2 执行“插入 | 表格”命令，在弹出的“表格”对话框中设置要插入表格的“行”和“列”，将表格宽度设置为1014像素。“边框粗细”、“单元格粗细”、“单元格边距”均设置为“0”。然后单击“确定”按钮。步骤3 在单元格中输入文本并调整单元格的大小。34p017-042第二章.indd 342014-6-5 14:43:31

第2章 Dreamweaver CS6基本操作设置表格属性输入文本并调整单元格步骤4 选中第一行单元格，在“属性”面板中单击按钮，然后单击“格式”右侧的下三角按钮，在弹出的下拉列表中选择“标题1”，然后选择其他单元格，将格式设置为“标题2”。步骤5 将光标插入到表格中，在“属性”面板中单击按钮，切换至该面板后，单击“居中对齐”按钮。设置字体格式选择居中对齐步骤6 选择第一行单元格，删除第一行的文字，然后执行“插入 | 图像对象 | 鼠标经过对象”命令，在弹出的 “插入鼠标经过图像”对话框中，在“原始图像”右侧单击“浏览”按钮，在弹出的“原始文件”对话框中选择一张素材图片，然后单击“确定”按钮，返回“插入鼠标经过图像”对话框，在“鼠标经过图像”右侧单击“浏览”按钮，在弹出的对话框中选择一张鼠标经过时要变成的图像，返回“插入鼠标经过图像”对话框，单击“确定”按钮。“插入鼠标经过图像”对话框选择素材图片浏览“鼠标经过图像”在“插入鼠标经过图像”对话框中单击“确定”按钮35p017-042第二章.indd 352014-6-5 14:43:32

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计步骤7 返回到网页文件中保存该网页后，按F12键在浏览器中查看效果。鼠标未经过时的效果鼠标经过后的效果2.6.3 实战：添加背景图片下面介绍在网页文件中插入图片的方法。新建网页文件，然后执行“修改 | 页面属性”命令，在弹出的“页面属性”对话框中单击“背景图片”右侧的“浏览”按钮，弹出“选择图像源文件”对话框，选择素材图片所在的文件，单击所需的文件，单击“确定”按钮返回到“页面属性”对话框，然后单击“确定”按钮，即可完成添加背景图片的操作。单击“浏览”选择素材文件单击“确定”按钮添加背景后的效果 2.7 设置超级链接在一个文档中可以创建以下几种类型的链接。● 链接到其他文档或者文件（例如图片、影片或声音文件等）的链接。● 命名锚记链接，此类链接跳转至文档内的特定位置。● 电子邮件链接，此类链接新建一个已填好收件人地址的空白电子邮件。● 空链接和脚本链接，此类链接用于在对象上附加行为，或者创建执行JavaScript代码的链接。36p017-042第二章.indd 362014-6-5 14:43:33

第2章 Dreamweaver CS6基本操作2.7.1 文本和图像链接浏览网页时，会看到一些带下划线的文字，将鼠标移动到文字上时，鼠标指针将变成形状，单击鼠标，会打开一个网页，这样的链接就是文本链接。浏览网页时，如果将鼠标移动到图像上之后，鼠标指针变成形状，单击鼠标打开一个网页，这样的链接就是图像链接。下面介绍利用菜单命令创建文字或图片链接的创建。步骤1 新建网页文件，在场景中输入文本或图片，步骤2 执行“修改 | 创建链接”命令，选择该将需要添加链接的文字或图片选中。命令后，弹出“选择文件”对话框，选择一个网页文件即可。选择文本选择目标文件 提示：在“属性”面板中单击“浏览文件”按钮，选择一个网页文件即可。2.7.2 实战：创建E-mail链接电子邮件链接是一种特殊的链接，点击这种链接，不会跳转到相应的网页上，而是会启动计算机中相应的Email程序（一般是outlook express），允许书写电子邮件，发往链接指向的邮箱。步骤1 新建网页文件，在场景中输入文本或图片，将需要添加链接的文字或图片选中。选中文本步骤2 执行“插入 | 电子邮件链接”命令添加电子邮件链接，在弹出的“电子邮件链接”对话框的“电子邮箱”右侧输入电子邮件地址，然后单击“确定”按钮即可。输入链接邮箱 提示：电子邮箱的格式为：用户名@域名（服务提供商名）。2.7.3   锚记链接创建锚记链接就是先在文档的指定位置设置命名锚记，并给该命名锚记一个唯一名称以便引用。再通过创建链接至相应命名锚记的链接，可以实现同一页面或不同页面指定位置的跳转，使访问者能够快速地浏览到选定位置的内容，加快页面浏览的速度。37p017-042第二章.indd 372014-6-5 14:43:33

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计步骤1 打开随书附带光盘中的“CDROM素材第步骤2 执行“插入 | 锚记链接”命令，弹出“命2章锚记链接”文件，将光标插入到文本“设置”名锚记”对话框，进行命名后单击“确定”按的前面。钮，在文本“设置”前面将出现图标。将光标插入到文本“设置”前锚记链接步骤3 选中文本“主页”，在“属性”面板的“链接”右侧输入“#设置”，即输入“#”号并输入前面设置的锚记名。步骤4 添加完锚记链接后按Ctrl+S快捷键将网页保存，再按F12键预览，当单击网页上方的“主页”链接时，网页会立刻跳转至网页下方的“设置”处。添加命名锚记链接以上是在同一网页内设置锚记链接，如果想单击当前页面中的“主页”，让其跳转至“”中的“设置”处，只要先在“”页的“设置”处添加命名锚记，然后修改“”页，在“属性”面板的“链接”栏中将需要跳转的网页名加在命名锚记前就可以了，即将链接改为“#设置”。2.7.4 空链接所谓空链接，就是指向自身的链接。之所以指向自身，是为了在链接上添加行为，改善用户的浏览体验，如当光标移动到图片链接上时，此图片切换成另一幅图片。另一种情况是，当前显示页和链接所指位置是同一页，此时链接页面已经打开，再链接至本页已多此一举，但没有链接又会造成页面上显示有差异，所以要添加一个空链接，让页面风格保持一致。新建网页文件并输入文本，选择将要设置空链接的文字，在“属性”面板的“链接”文本框中输入一个“#”。添加空链接38p017-042第二章.indd 382014-6-5 14:43:34

第2章 Dreamweaver CS6基本操作2.7.5 下载链接如果链接指向的不是HTML文档，而是其他类型的文档，那么单击链接后，出现的结果也不相同。如果链接的是图像文档，如GIF、JPG或PNG文档，点击后则会在浏览器窗口中显示图像。如果是浏览器不能识别的文档类型，如带有“.rar”扩展名的压缩文件，则会打开“新建下载任务”对话框，询问是否下载该文件。如果同意下载，单击“浏览”按钮，弹出“另存为”对话框，选择保存位置即可。2.7.6 实战：创建具有链接的网页下面以实例介绍创建具有链接的网页。步骤1 新建网页文件，执行“修改 | 页面属性”命令，弹出“页面属性”对话框，在“外观（CSS）”选项组中单击“文本颜色”右侧的下三角按钮，选择一种颜色，在“背景图像”右侧单击“浏览”按钮，在弹出的“选择图像源文件”对话框中选择“背景”素材图片，然后单击“确定”按钮。设置字体颜色并设置背景选择背景图片步骤2 返回到“页面属性”对话框，将“左边距”、“右边距”、“上边距”、“下边距”均设置为0px，然后单击“确定”按钮。步骤3 执行“插入 | 表格”命令，在弹出的“表格”对话框中设置表格的“行”和“列”，将“表格宽度”设置为“100%”，然后单击“确定”按钮。设置页面边距设置表格属性步骤4 插入表格后，在“属性”面板中单击“对齐”右侧的下三角按钮，在弹出的下拉列表中选择“居中对齐”命令。步骤5 然后将表格的高度调整到合适的高度，并选择要插入图像的表格，在“属性”面板中将“水平”设置为“居中对齐”，将“垂直”设置为“居中”。设置表格的对齐设置表格中文本的对齐39p017-042第二章.indd 392014-6-5 14:43:34

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计步骤6 执行“插入 | 图像”命令，在弹出的“选步骤7 在插入图片的两侧输入文本“上一张”和择图像源文件”对话框中选择一幅素材，然后单“下一张”。使用同样的方法制作出三个网页文击“确定”按钮，在弹出的对话框中的“替换文件，将新建网页文件中插入的图片分别命名为“图本”右侧的文本框中输入名称为“图1”，然后单2”、“图3”、“图4”，切换到第二个网页文件，将击“确定 ”按钮。光标插入到已插入图片的前面。为插入图片命名将光标插入到图片前面步骤8 执行“插入 | 命名锚记”命令，即可在图步骤9 切换到第一个网页文件，选中文本“下一片前面出现“命名锚记”图标。张”，在“属性”面板中“链接”右侧的文本框中输入第二个网页文件的名称，在该名称后面继续输入“#图2”。插入“锚记”设置连接步骤10 切换到第三个网页文件，将光标插入到图片的前面，执行“插入 | 命名锚记”命令，然后切换到第二个网页文件，选中文本“下一张”，然后在属性面板中的“链接”右侧的文本框中输入第三个网页文件的名称，在该文件名称后面继续输入“#图3”。然后以同样的方法为第三个网页文件和第四个网页文件设置链接，即可完成具有链接的网页。 2.8 插入Flash在网页中可以插入的Flash对象有：Flash动画、Flash按钮和Flash文本等。Flash技术是传递基于矢量的图形和动画的首选解决方案，与Shockwave电影相比，其优势是文件小且网上传输速度快。在网页中插入Flash动画的具体操作步骤如下。40p017-042第二章.indd 402014-6-5 14:43:35

第2章 Dreamweaver CS6基本操作步骤1 新建网页文件，执行“插入 | 媒体 | 插件”命令，在弹出的“选择文件”对话框中选择一个“.swf”格式的视频文件，然后单击“确定”按钮，即可插入Flash动画。步骤2 保存后即可按F12键在浏览器中查看效果。选择文件插入Flash动画后的效果 2.9 操作答疑通过专家答疑可以对困惑的地方做进一步的了解，通过操作习题可以巩固本章所学的知识。2.9.1 专家答疑（1）如何只对部分文本进行单独设置？答：通过选中字体后在窗口下方的属性界面，可以对所选文本的属性进行设置，还可以设置表格内容的各种属性。（2）HTML与CSS的区别？答：HTML是网页的结构，CSS是网页的样式，JavaScript是行为。比如，盖房子先要把结构建出来，然后用CSS来装饰。比如用Dreamweaver的属性面板来设置一个字的字体、颜色和大小，设置完成后，就会自动生成一个.style1的红色代码，在之间就是CSS，CSS的名称为“层叠样式表”，从字面也就能理解了。2.9.2 操作习题1．选择题（1）文本信息最基本的信息载体，不管网页内容如何丰富，文本自始至终都是网页中最基本的（  ）。  A.元素                        B.像素                                C.单元格               D.载体（2）在Dreamweaver CS6中默认的保存方式为（  ）。   Documents          . Documents                     Files2．填空题（1）在Dreamweaver中，编辑段落的方式主要操作包括_____________ 、_____________ 、_____________ 、_____________ 等。（2）_____________ 是制作网页中最基本的内容，也是网页中的重要元素。3．操作题制作一个简单的文本网页。41p017-042第二章.indd 412014-6-5 14:43:35

零点起飞学Dreamweaver+Flash+Photoshop CS6网页设计最终效果图（01）利用“页面属性”对话框设置文本效果和插入背景。（02）利用插入表格调整板式。（03）利用窗口下的属性界面，设置插入表格的颜色和字体颜色。42p017-042第二章.indd 422014-6-5 14:43:35