【本章导读】
本章介绍了 Dreamweaver CS6 操作界面的组成和功能;站点的含义、管理和设置本地站 点,以及如何实现本地站点与 FTP 服务器间传输文件等内容。本章是使用 Dreamweaver CS6 创建网站的入门级操作。
【本章要点】
l 熟悉 Dreamweaver CS6 的操作界面,了解属性面板的功能。
l 熟练使用菜单和面板进行基本操作。
l 掌握站点的含义、管理和设置本地站点的操作方法。
2.1 Dreamweaver CS6 操作界面简介
打开 Dreamweaver CS6 软件,首先看到的是图 21 所示的欢迎界面。在欢迎界面可以完成 打开或新建文档等操作,若要设置下次打开 Dreamweaver 时不显示欢迎界面,则可以单击勾 选欢迎界面左下角的“不再显示”选项,因为欢迎界面中的“打开最近的项目”“新建”和“主 要功能” 非常方便实用, 因此建议再次打开时保留欢迎界面。 例如在欢迎界面通过单击 “打开”
按钮 ,打开一个网页文档,即可进入文档编辑界面,如图 22 所示。
Dreamweaver CS6 的文档编辑界面(即主界面)主要由菜单栏、文档工具栏、文档窗口、
状态栏、属性面板、面板组等部分组成,其中“文档窗口”是显示和编辑文档内容的工作区域,
是操作的核心区域。
图 21 欢迎界面
图 22 Dreamweaver CS6 主界面
2.1.1 菜单栏和布局切换按钮
菜单栏提供全面的 Dreamweaver CS6 操作命令,包括文件、编辑、查看、插入、修改、
格式、命令、站点、窗口和帮助,如图 23 所示。在最小化按钮前还有一个显示为“设计器”
的工作区布局切换按钮,单击该按钮打开的下拉菜单如图 24 所示,可针对不同使用者切换工 作区的布局。例如,图 25 为“经典”布局界面,与系统默认的“设计器”布局方式基本一致,
不同之处在于该布局方式将“插入”面板还原到老版本的“插入”栏形式,以适应老用户的使 用习惯。
图 23 菜单栏所在区域
图 24 工作区布局切换菜单 图 25 “经典”布局界面
“文件”面板
状态栏 属性面板
2.1.2 文档窗口
文档窗口也称文档编辑区,显示当前文档的具体内容,对文档的编辑和修饰大都在该窗 口中完成。文档窗口有三种视图显示模式,分别是设计视图、代码视图和拆分视图。
l 在“设计”视图中,文档窗口显示的文档近似于浏览器中显示的情形,如图 22 所示。
l 在“代码”视图中,显示当前文档的 HTML 代码,如图 26 所示。
图 26 “代码”视图下的文档窗口
l 在“拆分”视图中,分别在左右窗口同时显示上述两种视图,如图 27 所示。
图 27 “拆分”视图下的文档窗口
2.1.3 文档工具栏
文档工具栏如图 28 所示,包括用于快速切换文档窗口视图的视图按钮,以及一些与显示 和查看文档、在本地和远程站点间传输文档有关的常用命令和选项。
图 28 文档工具栏
l 视图按钮 :用于切换文档窗口的三种视图。
l 实时视图按钮 :显示不可编辑的、交互式的、基于浏览器的文档视图。
l 可视化助理按钮 :允许用户使用不同的可视化助理来设计页面。
l 刷新设计器按钮 :修改了网页文档的源代码后单击此按钮将刷新设计视图,使其显 示修改后的效果。
l “标题”文本框:显示或输入网页文档的标题。
2.1.4 “属性”面板
“属性”面板(如图 29 所示)主要用于查看和更改所选择对象的各种属性,针对所选对 象的不同, “属性”面板中的参数会有所不同。其中包含“HTML”和“CSS”两个选项。 “属 性”面板下部为扩展面板,在“属性”面板右侧的空白处双击可以展开或收起扩展面板。
图 29 “属性”面板
2.1.5 状态栏
文档窗口底部的状态栏中显示着当前被编辑文档的相关信息, 同时还包含了一些显示控制 功能,如图 210 所示。
图 210 状态栏
l 标签选择器: 用于显示当前选定对象的标签层次结构, 单击该层次结构中的任何标签 名,则在属性面板中显示该标签相关的属性参数。
l 选取工具按钮 :默认状态下的鼠标形状。
l 手形工具按钮 :对于尺寸较大的文档,特别是超出 Dreamweaver 界面的情况特别 有用,通过该工具可任意拖动文档的显示区域。
l 缩放工具按钮 和“设置缩放比例”下拉列表:用于为文档设置缩放比例,默认情
标签选择器 窗口大小设置
编码方式 下载文档大小/下载时间
况下为 100%。
l 标准大小设置按钮 :三个按钮分别为手机大小(480×800)、平板电脑大小
(768×1024)和桌面电脑大小(1000 宽) 。
l “窗口大小设置”下拉列表框:仅在“设计”视图中可见,用来将文档窗口的大小调 整到预定义或自定义的尺寸。
l 下载文档大小/下载时间显示器:能够实时显示当前编辑的文档大小和预计的下载时间。
l 编码类型显示器:显示当前文档的编码类型,简体中文网页一般采用 GB2312 或 Unicode(UTF8)等编码方式。
2.1.6 面板组
面板组一般位于 Dreamweaver 界面的右侧,提供了编辑文档和设置操作时类似于工具栏的 功能集合。其中除了“插入”面板之外,还有“CSS 样式”“AP 元素”“数据库”“绑定”“服务 器行为”“文件”和“资源”等多个面板,一般来说面板组中显示的内容与文档中的当前操作有 关,可以在“窗口”菜单中设置要显示的面板。图 211 所示为面板组展开和折叠之后的界面。
图 211 展开与折叠的面板组
2.2 创建与管理本地静态站点
2.2.1 站点概述 1.站点的含义和分类
Dreamweaver 站点是网站中使用的所有文件和资源的集合。站点中包括网页文件、图片文 件、服务器端处理程序和 Flash 动画文件等。站点在操作系统中的形式就是一个层次结构的文 件夹,即一个文件夹下包含各种子文件夹及文件,例如某个简单的个人网站站点,在 Windows 的文件夹窗口和 Dreamweaver 中“文件”面板中的显示分别如图 212 和图 213 所示。其中,
在“文件”面板中还可以实现将文件上传到网络服务器,自动跟踪和维护、管理文件以及共享 文件等功能。
图 212 文件夹窗口中的站点结构 图 213 “文件”面板中的站点结构
Dreamweaver 中的站点一般分为本地站点和远程站点两种。 本地站点用于存放整个网站内 容的本地文件夹,是用户的工作目录,一般制作网页时只需建立本地站点。远程站点是指存储 于服务器上的站点。
2.站点的规划原则
在定义站点之前,首先要做好站点的规划,包括站点的目录结构和链接结构等。这里讲 的站点目录结构是指本地站点的目录结构, 远程站点的结构应该与本地站点相同。 目录结构创 建是否合理,对于网站的上传、更新、维护、扩充和移植等工作有很大的影响。因此,在设计 网站目录结构时,应该遵循以下原则:
(1)将文件分类存放在不同的文件夹中。每个站点对应一个根文件夹,然后创建多个子 文件夹。可以将同种类型的文件放在同一子文件夹,如图片文件存放在 images 文件夹下;也 可以按网站的栏目划分子文件夹。
(2)给文件或文件夹命名时应使用英文或汉语拼音,不要使用中文目录名,防止因此而 引起的链接和浏览错误。命名应有一定规律,便于日后管理。
(3)目录层次不要太深,最好 3 级以内,不要超过 5 级。
(4)首页使用率最高,因此建立一个首页文件夹很有必要,用于存放网站首页中的各种 文件。
2.2.2 创建本地站点
对于初学者规则站点、设计站点结构比较困难,但创建站点的操作与 Windows 系统下创 建文件夹类似,比较容易。
下面以简单的“个人网站站点”为例,介绍本地站点的创建过程。
1.新建站点
在“站点”菜单中单击“新建站点”命令,如图 214 所示,打开“站点设置对象”对 话框。
图 214 菜单中“新建站点”命令
2.设置站点名称
站点名称与站点根目录不一样,站点名称并不是根文件夹的名称,在 Dreamweaver 中设 置站点名称只是为了方便管理站点,为更好地了解站点内容,一般用中文命名。如图 215 所 示,创建的站点名称为“我的个人网站” 。
图 215 设置站点名称 3.设置本地站点根文件夹
站点根目录可以在 Windows 的“文件夹窗口”建立完成,也可以在设置站点过程中创建。
l 在“站点设置对象”对话框,单击“本地站点文件夹”后面的浏览文件按钮 ,打 开“选择根文件夹”对话框,如图 216 所示。
图 216 “选择根文件夹”对话框
l 选择或使用新建按钮 创建站点根文件夹(如 mywebsite),双击打开该文件夹,单 击“选择”按钮,完成操作。新创建的站点会在“文件”面板中显示。
2.2.3 管理本地站点
Dreamweaver 可以管理多个站点,但当前站点只有一个。切换当前站点、创建站点、修改 站点名称或根目录、删除站点、导入站点等操作在“管理站点”对话框中完成。
在“站点”菜单中单击“管理站点”命令,打开“管理站点”对话框,如图 217 所示。
①
②
图 217 “管理站点”对话框
“管理站点”对话框中,各按钮的功能如下:
l 删除按钮 :在“管理站点”对话框中删除当前选定的站点,但被删除的站点文件 夹及内容仍存在。
l 编辑按钮 :打开“站点设置对象”对话框,修改当前选中站点的名称或根文件夹 等内容。
l 复制按钮 :复制当前选中的站点,复制站点文件,减少站点开发时间。
l 导出按钮 :将 Dreamweaver 中的站点保存成 ste 格式的站点信息文件。当需要备 份当前站点定义信息或需要在其他电脑上使用当前站点的定义时, 可以对站点进行导 出操作。
l 导入站点:将 ste 格式的站点信息文件导入到 Dreamweaver 中。
l 新建站点:创建新的站点,与在“站点”菜单中的“新建站点”命令作用相同。
l 新建 Business Catalyst 站点:用来创建新的 Business Catalyst 站点。
l 导入 Business Catalyst 站点:用来导入 Business Catalyst 站点。
2.2.4 编辑站点内容
站 点 的 内 容 包 括 网 站 用 到 的 所 有 文 件 , 这 些 文 件 以 文 件 夹 的 形 式 组 织 管 理 。 在 Dreamweaver 中编辑站点内容是指:新建文件夹、新建网页文件操作,以及对文件夹或文件进 行编辑操作。在“文件”面板中,单击右键会出现有关编辑站点的快捷菜单,如图 218 所示。
图 218 右键快捷菜单
1.新建站点子文件夹
首先选中要创建子文件夹的父文件夹,如站点根目录,单击鼠标右键,在弹出的快捷菜 单中单击“新建文件夹”命令,输入子文件夹名称(如:images 或 css),完成操作。
2.新建网页文件
首先选中网页文件所在的文件夹,单击鼠标右键,在弹出的快捷菜单中单击“新建文件”
命令,输入文件名称(如:index),完成操作。
3.编辑文件或文件夹
对站点根目录下的文件或文件夹进行剪切、复制、删除、重命名等编辑操作时,首先要 选中操作对象,即某个文件或文件夹,之后单击鼠标右键,在弹出的快捷菜单中单击“编辑”
命令,在弹出的子菜单中选择需要的编辑命令,如图 219 所示。
图 219 删除 index.html 文件的操作界面
2.3 利用 FTP 服务器传输站点
FTP(File Transport Protocol)即文件传输协议,简单地说就是在本地电脑和远程服务器 之间建立通信连接,然后根据需要进行文件的传输操作。通常情况下,小型网站可以在完成本 地站点制作后,再设置远程服务器,将网站所有内容上传至远程服务器。有时也可以在创建站 点时设置好远程服务器, 可以制作好一部分页面就上传一部分页面, 便于在网络中查看页面效 果。本节介绍如何在 Dreamweaver 中设置 FTP 服务器,并在本地站点和 FTP 服务器之间传输 文件。
设置之前首先应知道远程 FTP 服务器的 IP 地址,及用户账号和密码,一般的 FTP 服务器 都要求用户输入账号和密码,这样 FTP 服务器会根据登录者的不同等级为其分配不同的权限。
下面例子中用到的 FTP 服务器是局域网环境的教师机, 其原理与 Internet 上的远程服务器类似。
2.3.1 在服务器端运行 FTP 服务器程序
在服务器端运行 FTP 服务器程序,并设置用户名、密码、权限、共享目录等参数。例如:
在教师机端运行 FTP Server 程序,运行界面如图 220 所示。
图 220 FTP Server 的运行界面
2.3.2 在客户端设置 FTP 服务器的参数
以学生机为客户端,要上传的网站以“我的个人网站”为例,如果将此站点与远程服务 器之间建立 FTP 连接,则按下面的步骤设置 FTP 服务器的参数。
单击选择“站点”菜单→“管理站点”命令,打开“管理站点”对话框。选择当前站点
(如:我的个人网站)后,单击编辑按钮 ,打开“站点设置对象”对话框,如图 221 所示。
图 221 设置添加服务器 1.设置服务器参数
在“站点设置对象”对话框中单击选择左侧的“服务器”选项后,单击 按钮打开“服 务器”选项设置界面,输入 FTP 服务器的 FTP 地址、用户名、密码等信息,如图 222 所示。
2.测试服务器连接
单击“测试”按钮,弹出“文件活动”对话框,如图 223 所示,显示正在与设置的远程 服务器连接。连接成功后,弹出提示框“Dreamweaver 已经成功连接您的 Web 服务器”时,
说明所设置的 FTP 服务器参数正确。
图 222 设置服务器参数 图 223 测试服务器连接 服务器参数的含义如下:
l 服务器名称:指定服务器的名称。
l 连接方法:指与服务器连接时所用的网络连接协议等,这里选 FTP。
l FTP 地址:指 FTP 服务器的 IP 地址。
l “用户名”和“密码” :如果服务器端有权限设置,则按要求输入用户名和密码。
l 根目录:输入 FTP 服务器用于存放上传站点内容的文件夹路径。例如每个学生在教 师机都有自己对应的文件夹,则可将该文件夹设置为根目录,如图 224 所示。
l Web URL:上面的根目录对应的 URL。
图 224 设置服务器的根目录
完成上述步骤后,在“站点设置对象”对话框中显示新添加的服务器,如图 225 所示。
如果需要再次编辑可单击对话框下方的 按钮, 返回到服务器参数设置对话框。 否则单击 “保 存”按钮结束全部设置。一个站点可以设置多个服务器,即可与多个服务器之间传递文件。
图 225 服务器设置完成
图 226 “文件”面板 1.上传文件至 FTP 服务器
单击“文件”面板上的“连接到远程服务器”按钮 可建立与远程服务器的 FTP 连接。
再单击“展开以显示本地或远程站点”按钮 ,展开为双窗模式,左侧窗格中为 FTP 服务器 文件树,右侧为本地文件树,如图 227 所示。
图 227 显示远程服务器与本地站点的双窗模式
选中右侧窗格中需要上传的单个或多个文件/文件夹,单击“上传文件”按钮 即可将文 件上传至远程服务器。上传过程中将提示上传相关文件(如 CSS 样式表文件、网页中引用的 多媒体文件等),单击“是”按钮则可将相关文件一并上传,上传过程如图 228 所示。
2.从 FTP 服务器下载文件至本地硬盘
在左侧远程服务器窗口中选择下载的单个或多个文件/文件夹,单击“获取文件”按钮可 将将选中文件下载至本地电脑,下载过程中同样会提示获取相关文件,单击“是”按钮则可将 相关文件一并下载, 进行下载操作时应注意下载的文件会直接覆盖本地同名文件, 不会出现任 何提示。如图 229 所示为下载根目录下所有内容即整个站点的操作提示。
示本地或 远程站点
图 228 上传文件时的提示框 图 229 确认下载提示框
2.4 实践演练
2.4.1 创建本地站点
【目的要求】
创建如图 230 所示的个人站点,站点根目录为 E:\mywebsite,
站点中包含了 3 个一级子文件夹“css”“fonts”和“images” ,其 中 “images” 文件夹用于存放网页中使用的图片文件。 “index.html”
为网站中的主页文件, “说明.txt”为有关网站说明的文本文件。
【说明】
(1)首先在 Windows 的文件夹窗口创建站点的文件夹结构。
(2)从网络上下载一个图片文件,存入 E:\mywebsite\images 文件夹下。
(3)启动 Dreamweaver。
【操作步骤】
1.在本地硬盘创建站点文件夹
打开 Windows 下的文件夹窗口,在本地硬盘上创建站点中的文件夹。如在 E 盘根目录下 创建新文件夹“mywebsite” ,之后新建“E:\ mywebsite”下的 3 个子文件夹,如图 231 所示。
需要注意的是站点的根文件夹需在 Windows 下创建,其子文件夹既可以在 Windows 下创建,
也可以在 Dreamweaver 的“文件”面板中创建。此外,文本文档“说明.txt”也可以在 Windows 下创建。
图 231 Windows 下的文件夹窗口
图 230 站点结构图
图 232 设置站点名称及根文件夹 图 233 “文件”面板中显示的站点内容 3.在“文件”面板编辑站点内容
如果站点内容需要修改,如改变子文件夹名称、创建新的文件夹、删除某个文件或文件 夹等,可以在“文件”面板中进行操作。具体方法是:在“文件”面板中选中目标文件或文件 夹,单击鼠标右键,在弹出的右键菜单中进行新建或编辑操作,如图 234 所示。
图 234 “文件”面板的右键快捷菜单 4.建立首页文档
在站点中新建网页文档的方法有以下几种:
l 在“文件”面板空白处单击鼠标右键,在右键快捷菜单中单击“新建文件”命令,即 可新建一个网页文档,在图 235 所示的默认文档名处输入主页文件名“index”完成 操作。如果编辑此文档,可在文件名“index.html”上双击。
l 在欢迎界面,单击选择新建分组中的“HTML” ,进入新建文档的编辑窗口。
l 单击选择“文件”菜单→“新建”命令,或者按下快捷键 Ctrl+N,将弹出如图 236 所示的“新建文档”对话框。在该对话框中按默认选项进行选择,单击“创建”按钮,
进入新建网页文档的编辑窗口。
图 235 新建网页文档并更改默认文件名
图 236 “新建文档”对话框
说明:后两种方法创建的新文件使用的是默认的文件名,需在保存文件时输入主页的文 件名“index.html” 。
5.在 Dreamweaver 中编辑文本文档
在 “文件” 面板中双击文件名即可打开该文档, 进入文档编辑窗口。 如在文件名 “说明.txt”
上双击,即可打开文本文档的编辑窗口。在编辑区域输入文档内容,如图 237 所示,然后在
“文件”菜单中选择“保存”命令,保存文档。如果关闭此文档,可在编辑窗口文档选项卡名 称处单击关闭按钮 ,或在“文件”菜单中单击“关闭”命令。
图 237 文本文档编辑窗口
图 238 网页内容示例
【说明】打开 mywebsite 站点根目录下的 index.html 主页文档,或者新建一个网页文档练 习本任务。准备两张图片,一张用于做网页背景,一张做网页内容。
【操作步骤】
1.准备图片素材
下载图片素材到站点存放图片的文件夹下, 如 “我的个人网站” 站点的 “mywebsite\images”
目录下。
注意:从网上下载图片时尽量不使用默认文件名,可以自己给文件命名,如将背景图片 文件命名为“bj1” 。此外还要注意图片的大小是否适合使用。
2.打开 Dreamweaver,进入 index.html 的文档窗口
设置当前站点后,在 Dreamweaver 中新建的文件会自动保存在站点文件夹中。已经创建 了“我的个人网站”站点及文件“index.html” ,在文件名上双击,即可打开该网页文档。如果 还没有创建 index.html 网页文件,可以在“文件”菜单中选择“新建”命令,创建一个页面类 型为 HTML 的空白页。打开文档窗口并确认此时为“设计”视图,如图 239 所示。
3.在“设计”视图输入网站内容
(1)文本的输入:直接在光标处输入文本“欢迎光临我的个人网站” ,回车光标停留在 下一行。
(2)插入“水平线” :首先定位插入点,然后以下操作方法任选其一。
l 在“插入”面板操作:选择“常用”类别,单击“水平线” ,如图 240 所示。
l 在“插入”菜单操作:选择“HTML” ,在弹出的子菜单中单击“水平线”命令。
图 239 打开 index.html 文档的初始界面
图 240 在“插入”面板插入水平线操作
(3)插入“图像” :首先定位插入点,通过以下两种方法打开“选择图像源文件”对话 框,在站点的“images”文件夹下,打开相应的图像文件,如图 241 所示。
图 241 “选择图像源文件”对话框
“HTML”按钮,再单击“格式”后面的下拉按钮,在下拉列表中选择“标题 1”选项,完成 操作。操作界面如图 242 所示。
图 242 设置文本为“标题 1”格式 5.在“属性”面板中设置图像的大小
在如图 243 所示的“属性”面板中,设置图像大小,宽×高为 800×200 像素。
图 243 在“属性”面板设置图像的宽和高
操作方法:单击选中图像,在界面下方“属性”面板中的“宽”和“高”后面分别输入 数值。图中方框选中区域中的“重置按钮” ,其功能为恢复图片原来的大小。
6.在“页面属性”对话框中设置网页的背景及字体颜色
(1)打开“页面属性”对话框,在以下三种操作方法中任选其一。
l 在“属性”面板操作:单击“页面属性”按钮,如图 244 所示。
l 在“修改”菜单操作:单击“修改”菜单→“页面属性命令” (对应快捷键 Ctrl+J)。
(2)在“页面属性”对话框的“分类”列表中选择“外观(CSS) ” 。在右侧的参数设置 区域,设置“文本颜色”为白色(#FFF);在“背景图像”处,单击“浏览”按钮,选择站点
“images”文件夹下的背景文件“bj1.jpg” ,如图 245 所示。设置好后单击“确定”按钮,则 显示如图 237 所示效果。
图 244 “属性”面板
图 245 “页面属性”对话框 7.保存文档,并预览网页
(1)保存文档操作:单击“文件”菜单→“保存”命令(或使用快捷键 Ctrl+S)。
(2)在浏览器中预览网页,操作方法如下:
l 功能键操作:按下键盘上的功能键 F12,将在主浏览器中预览当前网页。
l 在“文档”工具栏单击“在浏览器中浏览/调试”按钮 ,在打开的如图 246 所示的 浏览器列表中选择所用的浏览器。
图 246 “浏览器”列表
2.4.3 自定义 Dreamweaver 编辑环境
【任务 1】在“首选参数”对话框中设置主浏览器
【目的要求】
一般电脑中经常安装多个浏览器,如有 IE 浏览器、360 浏览器等。但只能有一个为主浏 览器,即在预览/调试网页的时候,单击 F12 功能键默认启用的浏览器。有时不同的浏览器对 网页的显示效果会有所不同。此处要求将 IExplore 设置为主浏览器。
【操作步骤】
(1)单击选择“编辑”菜单→“首选参数”命令,打开“首选参数”对话框。
图 247 设置主浏览器
【任务 2】在“窗口”菜单设置显示或隐藏所有面板
【目的要求】
隐藏所有面板将使文档窗口获得更大的显示范围。
【操作步骤】
单击“窗口”菜单→“显示面板”/“隐藏面板”命令或者直接按 F4 键,可以显示/隐藏 所有面板,如图 248 所示。
图 248 “窗口”菜单中的“隐藏面板”命令
思考与练习
1.如何展开或收起“属性”面板下的扩展面板?
2.如何在多个站点之间进行切换,即设置当前站点?
3.如何修改站点名称?
4.如何给网页文件设置标题?预览时,网页文档的标题显示在什么位置?
5.如何删除站点中的文件或文件夹?
6.能否在欢迎界面创建新文件?
7.能否在 Dreamweaver 中编辑文本文件?
8.在 Dreamweaver 中可以创建哪些类型的文件?
9.如何修改 Dreamweaver 默认的主浏览器?
10.写出下列操作对应的快捷键。
(1)新建文件、保存文件、关闭文件
(2)撤消键入、剪切、粘贴
(3)刷新设计视图、插入图像
(4)打开“页面属性”对话框
(5)检查站点范围内的链接
(6)显示/隐藏“插入”面板、显示/隐藏“属性”面板
(7)显示/隐藏“文件”面板、显示/隐藏所有面板
(8)在主浏览器中预览/调试网页
11.操作练习:创建一个个人网站的本地站点,以自己的学号作为站点根文件夹。站点下 的子文件夹自拟至少两个。创建一个主页文档,文档内容自拟。创建一个文本文档,输入自己 的网站简介及作者的姓名、班级等信息。
12.操作练习:在“设计”视图设置主页文档的内容,要求页面中有文本、图像,设置 网页背景、网页标题等。