第二章 DWCS5基本操作
合集下载
第2章 Dreamweaver CS5基础
第2章Dreamweaver CS5基础在网络普及的现代，优秀的网页是一个很好的展现自我的平台。
古话说得好，“工欲善其事，必先利其器”，我们在进行网页设计前，首先要选择一个优秀的网页设计工具。
Dreamweaver、Flash、Fireworks最早是由Macromedia公司推出的一套网页设计软件。
Flash 用来生成二维动画，Fireworks用来制作矢量图像，Dreamweaver可以进行各种素材的集成和网络发布。
这三款软件在国内有“网页三剑客”之称。
2005年，Macromedia公司被著名影像处理软件公司Adobe收购，“网页三剑客”成为了Adobe软件家族的主要成员。
2.1 Dreamweaver CS5简介Adobe Dreamweaver CS5是Adobe最新推出的网页设计制作工具，是一款集网页制作和管理网站于一身的网页编辑器，是一种专业的HTML编辑器，采用“所见即所得”的编辑方式，利用Div、行为、CSS、模板等技术对Web站点、Web页、Web应用程序进行设计、编码和开发。
由于Dreamweaver CS5的可视化编辑功能，在通常情况下，用户可以不需要编写任何代码，直接在可视化环境中调整各种元素，快速地创建页面。
可以直接将在Photoshop、Fireworks或其他图形应用程序中创建和编辑的图像，以及在Flash中创建的动画导入到Dreamweaver CS5中，并能够进行基于ColdFusion、ASP、JSP、PHP服务器技术的动态网站的创建。
由此可见，Dreamweaver CS5为用户提供了实用方便的编辑工具，可帮助用户迅速高效地制作出功能强大的网站。
2.2 Dreamweaver的工作界面2.2.1 启动Dreamweaver CS5安装好Dreamweaver CS5后，单击“开始”菜单，选择“程序”，在程序中选择“Adobe”中的“Adobe Dreamweaver CS5”命令后，即可启动Dreamweaver CS5，如图2-1所示。
网页制作案例教程第2章已完成
2．快速新建文档 【新建】栏中列出了各种类型的项目，利用 它可以快速创建一个新的文档或者创建一个 站点。如果单击“html”到“xml”中的任一 选项便可创建一个该类型的网页；如果单击 “Dreamweaver站点”则可创建一个新站点。
2.2.2 文档的常规操作
1．新建和打开网页文档 2．保存文档和关闭文档
第2章
Dreamweaver CS5基础
本章要点 • 认识Dreamweaver CS5工作区 • 掌握文档操作 • 熟练掌握文本的编辑 • 掌握图像的插入及编辑 • 了解其它对象的使用
2.1
Dreamweaver CS5工作区简介
2.1.1 运行Dreamweaver CS5 第一次运行Dreamweaver CS5时，会弹出 【默认编辑器】对话框，如图2-1所示。可以 通过该对话框设置Dreamweaver CS5采用什 么类型的文件作为其默认编辑工具。
图2-6 标尺和网格
2.网格 单击【查看】/【网格设置】/【显示网格】命 令，可以调出【网格设置】对话框，如图2-8 所示。利用该对话框，可对网格和靠齐等参 数进行设置。
图2-8 【网格设置】对话框
2.1.4 属性面板和插入面板
1.属性面板 利用【属性】面板可以显示并精确调整网页中选定对象的属 性，如图2-9所示。
图2-27 【页面属性】对话框
2.3 插入和编辑文本
2.3.1 插入文本
1．将Word文档保存成网页 （1）打开Microsoft Word并打开要转换的Word文 档。单击菜单栏的【文件】/【另存为Web页】命 令，将打开的Word文档存成网页HTML格式文件。 （2）在Dreamweaver CS5中打开用Word编辑的 网页文件，选择【命令】/【清理Word生成的 HTML】菜单命令，打开【清理Word生成的 HTML】对话框，如图2-34所示。
Dreamweaver cs5标准实例教程配套全册教学课件
2.2.3 “插入”面板
单击文档窗口右侧浮动面板组中的“插入”按钮，即可弹出以前熟悉的“插入”面 板。
“插入”面板共有8类对象元素，包含一些最常用的项目：常用、布局、表单、数 据、Spry、InContext Editing、文本和收藏夹。“插入”面板的初始视图为“常用” 面板，单击“插入”面板中“常用”面板右侧的倒三角形按钮，即可在弹出的下拉 列表中选择需要的面板，从而在不同的面板之间进行切换。如图所示。
所谓动态网页，是指服务器会针对不同的使用者以及不同的要求执行不同的程序， 从而提供不同的服务，一般与数据库有关。这种网页通常在服务器端以扩展名asp、 jsp或是aspx 等储存。动态网页的页面自动生成，无须手工维护和更新HTML文档； 不同的时间、不同的人访问同一网址时会产生不同的页面。
动态网页与静态网页的最大不同就是Web服务器和用户之间的动态交互，这也是 Internet强大生命力的体现。
第1章 网页制作基础知识
本章重点
本章和网页制作的基本步骤，然后简要介绍设计制作网页的常用工 具，重点介绍Adobe公司最新推出的Dreamweaver CS5，它涵盖了 网页制作与站点管理，是使用最多的网页制作工具之一。
学习目的
通过本章的学习，您可以：
网页与网站 网站建设的基本步骤
1.1 网页与网站
网页是网络上的基本文档，网页中包含文字、图片、声音、动画、影像以及 链接等元素，通过对这些元素的有机组合，就构成了包含各种信息的网页。简单 地说，通过浏览器在WWW上所看到的每一个超文本文件都是一个网页，而通过 超链接连接在一起的若干个网页的集合即构成网站。
通常我们看到的网页，都是以.htm、.html、.shtml等为后缀的文件。在网站设计 中，这种纯粹HTML格式的网页通常被称为静态网页。静态网页的内容是固定的， 当用户浏览网页内容时，服务器仅仅是将已有的静态HTML文档传送给浏览器供用 户阅读。若网站维护者要更新网页的内容，就必须手工更新所有的HTML文档。
ch2 Dreamweaver_CS5快速入门
12/10/2014
二、编辑文本 1）网页中输入的文本可以像Word文档一样，进行编 辑。 – 1. 拖动鼠标选中一个或多个文字、一行或多行文本， 也可以选中网页中的全部文本。 – 2. 按BackSpace键或Delete键实现删除文本操作。 – 3. 实现复制、剪切、粘贴等操作。 – 4. 实现查找与替换操作。5. 实现撤消或重做操作。 2）设置文本格式 – 字体(通用性问题)、大小、颜色、风格 – 注：CSS（Cascading Style Sheet，可译为“层 叠样式表”或“级联样式表”）是一组格式设置规则， 用于控制Web页面的外观。
第二课：制作网页的基本操作
一 、在网页中添加文本 添加普通文本 方法： A、直接输入 （1）用鼠标单击网页编辑窗口中的空白区域， 窗口中随即出现闪动的光标，标识输入文字的起 始位置。 （2）选择适当的输入法输入文字 B、复制和粘贴 C、从其他文件导入
12/10/2014
3
文档标签
文档标签位于应用程序栏下方，左侧显示当前打开 的所有网页文档的名称及其关闭按钮；右侧显示当前 文档在本地磁盘中的保存路径以及向下还原按钮；下 方显示当前文档中的包含文档以及链接文档。
当用户打开多个网页时，通过单击文档标签可在各 网页之间切换。另外，单击下方的包含文档或链接文 档，同样可打开相应文档。
分门别类地将文件保存在不同的目录下,在大型网站中， 分支页面的文件应存放在单独的文件夹中存放网页图像的文 件夹一般命名为“images”或者“img”。在动态网站中，用来 存放数据库的文件夹一般被命名为“data”或者“database”。 目录的层次不要太深， 建议不要超过3层 不要使用中文文件名和中文目录名 不要使用过长的目录名,比较长的文件名可使用下划线 “_”来隔开多个单词或关键字。
二、编辑文本 1）网页中输入的文本可以像Word文档一样，进行编 辑。 – 1. 拖动鼠标选中一个或多个文字、一行或多行文本， 也可以选中网页中的全部文本。 – 2. 按BackSpace键或Delete键实现删除文本操作。 – 3. 实现复制、剪切、粘贴等操作。 – 4. 实现查找与替换操作。5. 实现撤消或重做操作。 2）设置文本格式 – 字体(通用性问题)、大小、颜色、风格 – 注：CSS（Cascading Style Sheet，可译为“层 叠样式表”或“级联样式表”）是一组格式设置规则， 用于控制Web页面的外观。
第二课：制作网页的基本操作
一 、在网页中添加文本 添加普通文本 方法： A、直接输入 （1）用鼠标单击网页编辑窗口中的空白区域， 窗口中随即出现闪动的光标，标识输入文字的起 始位置。 （2）选择适当的输入法输入文字 B、复制和粘贴 C、从其他文件导入
12/10/2014
3
文档标签
文档标签位于应用程序栏下方，左侧显示当前打开 的所有网页文档的名称及其关闭按钮；右侧显示当前 文档在本地磁盘中的保存路径以及向下还原按钮；下 方显示当前文档中的包含文档以及链接文档。
当用户打开多个网页时，通过单击文档标签可在各 网页之间切换。另外，单击下方的包含文档或链接文 档，同样可打开相应文档。
分门别类地将文件保存在不同的目录下,在大型网站中， 分支页面的文件应存放在单独的文件夹中存放网页图像的文 件夹一般命名为“images”或者“img”。在动态网站中，用来 存放数据库的文件夹一般被命名为“data”或者“database”。 目录的层次不要太深， 建议不要超过3层 不要使用中文文件名和中文目录名 不要使用过长的目录名,比较长的文件名可使用下划线 “_”来隔开多个单词或关键字。
dreamweaver教程第2章
2.2.2 熟悉Dreamweaver CS5的 【插入】面板
【插入】面板中包括8组面板，分别是：
2.3 体验CS5的新增功能
2.3.1 增强的CSS功能 2.3.2 实时视图导航 2.3.3 简化的站点设置
2.3.4 Adobe BrowserLab
2.3.5 Business Catalyst 集成 2.3.6 动态相关文件 2.3.7 PHP 自定义类代码提示 2.3.8 站点特定的代码提示 2.3.9 Subversion 支持增强功能
2.3.5 Business Catalyst 集成
Adobe Business Catalyst是一个承载应用
程序，将传统的桌面工具替换为一个中央平 台，供Web设计人员使用。允许构建任何内 容，包括数据驱动的基本Web站点，以及功 能强大的在线商店。
2.3.6 动态相关文件
“动态.3 简化的站点设置
升级后的【站点设置对象】对话框使设置本
地 站点更简单，“远程服务器”类别允许 在一个视图中指定远程服务器和测试服务器。
2.3.4 Adobe BrowserLab
Dreamweaver CS5集成了Adobe
BrowserLab（一种新的CS Live在线服务）， 该服务为跨浏览器兼容性测试提供快速准确 的解决方案。
外部文件和脚本，以组合基于PHP的内容管 理系统 (CMS)页面，以及在“相关文件”工 具栏中显示其文件名。
2.3.7 PHP 自定义类代码提示
PHP自定义类代码提示显示PHP凼数、对象
和常量的正确诧法，有助于输入更准确的代 码。代码提示还可以使用自定义凼数、类以 及第三方框架（如Zend框架）。
版，可以将其卸载。
《DreamweaverCS5网页设计》课件
第2章目录
设置页面的标题和编码： 1. 选择“修改”→“页面属性”，或者在属性检查器中单击 “页面属性”。 2. 在“页面属性”对话框中，单击“标题/编码”类别，如图 2.1所示。 3. 在“标题”框中，指定页面标题。也可以使用文档工具栏 来指定页面标题。 4. 从“编码”下拉列表框中选择文档中字符所用的编码。 5. 单击“确定”。
第1章目录
8／183
1.2 设置Dreamweaver站点
1.2.1 Dreamweaver工作流程 规划和设置站点 组织和管理站点文件 设计网页布局 向页面添加内容 通过手动编码创建页面 针对动态内容设置Web应用程序 创建动态页 测试和发布
第1章目录
9／183
1.2 设置Dreamweaver站点
第10章 制作ASP动态网页
3／183
第1章 Dreamweaver CS5 使用基础
1.1 认识Dreamweaver CS5工作区 1.2 设置Dreamweaver站点 1.3 创建和管理站点文件
4／183
ቤተ መጻሕፍቲ ባይዱ
1.1 认识Dreamweaver CS5工作区
1.1.1 启动Dreamweaver CS5 启动Dreamweaver CS5：单击“开始”，指向“所有程序”，然后单击 “Adobe Dreamweaver CS5”。 在“开始”菜单或任务栏中为这个软件添加一个快捷方式。 1.1.2 工作区布局概述 工作区中主要包括以下元素。 欢迎屏幕。 应用程序栏。 文档工具栏。 标准工具栏。 编码工具栏。 样式呈现工具栏 文档窗口 属性检查器 标签选择器 面板组 插入面板 文件面板
第1章目录
13／183
Dreamweaver CS5基本操作实例
一、Dreamweaver MX中文版建站初步建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。
现在免费的网页空间很少了，在还可以申请到可以使用几个月的免费空间，这对于学习网页制作已经够了。
接下来主要介绍本地站点的建立，站点文件命名。
简明步骤：1、在C盘新建一个文件夹→在Dreamweaver中定义站点→新建文件和文件夹→给文件和文件夹命名。
目标是做一个个人网站。
打开“我的电脑”，打开C盘，点鼠标右键，选择新建。
2、选择文件夹选项3、C盘下会出现一个新建文件夹图标4、输入你想要的站点名称，这里输入media,其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦！5、现在开始在Dreamweaver MX中把media这个文件夹定义为站点。
打开Dreamweaver，在菜单栏上，点击“站点”菜单，选择“新建站点”命令。
6、接下来需要给站点起一个名字，可以起任意一个名字。
7、这里起名为media,按下一步。
9、按“下一步”按钮，选择是否使用服务器技术。
因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。
10、按“下一步”按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。
11、按“下一步”，选择要定义的本地根文件夹。
12、这里选择media文件夹。
13、点“选择”按钮，因为没有使用远程服务器，就选择“无”。
14、按“下一步”按钮。
15、按完成按钮，一个站点就定义好了。
二、文件命名及修改默认扩展名站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择“新建文件”。
给新建的文件输入名称。
新建文件夹与新建文件类似，就不重复了。
在文件命名和站点结构方面，养成良好的习惯很重要。
网站首页默认的文件名，取决于申请的主页空间，一般是index.htm、index.html、default.htm 等。
Dreamweaver CS5中文版基础教程02
2.2.2 修改项目符号或编号
（1）将插入点放在设置项目符号或编号的文本中。
（2）通过以下几种方法启动“列表属性”对话框。
单击“属性”面板中的“列表项目”按钮 选择“格式 > 列表 > 属性”命令。 。
2.2.3 设置文本缩进格式
设置文本缩进格式有以下几种方法。 在“属性”面板中单击“文本缩进”按钮 按钮 ，使段落向右移动或向左移动。 选择“格式 > 缩进”或“格式 > 凸出”命令，使段落向右 移动或向左移动。 按Ctrl+Alt+] 快捷键或Ctrl+Alt+ [ 快捷键，使段落向右 移动或向左移动。 或“文本凸出”
“网格设置”对话框
“网格设置”对话框
2.3.3 标尺
标尺显示在文档窗口的上方和左侧，用以标志网页元素的位
置。标尺的单位分为像素、英寸和厘米。
2.3.4 课堂案例——艺术摄影网
使用“水平线”命令在文档中插入水平线。使用“属性”面板
改变水平线的高度。使用代码改变水平线的颜色。
效果图
2.4 课堂练习——家具装饰网
具按钮
，弹出13个特殊字符按钮。在其中选择需要的特殊字符
的工具按钮，即可插入特殊字符。
2.2.7 课堂案例——电器城网店
使用“项目列表”按钮创建列表。
效果图
2.3 水平线、网格与标尺
水平线 显示和隐藏网格 标尺 课堂案例——艺术摄影网
2.3.1 水平线
分割线又叫做水平线，可以将文字、图像、表格等对象在视觉上分割
2.2.1 设置项目符号或编号
通过项目列表或编号列表按钮设置项目符号或编号，步骤如 下。 （1）选择段落。 （2）在“属性”面板中，单击“项目列表”按钮 号列表”按钮 ，为文本添加项目符号或编号。 通过列表设置项目符号或编号，步骤如下。 （1）选择段落。 （2）选择“格式 > 列表”命令，弹出其子菜单，选择“项目 列表”或“编号列表”命> 网格设置 > 网格设置”命令，弹出“网格设置”对话框。 在“间隔”选项的文本框中输入一个数字，并从下拉列表中选择间隔的单位， 单击“确定”按钮关闭对话框，完成网格线间隔的修改。 4．修改网格线的形状和颜色 选择“查看 > 网格设置 > 网格设置”命令，弹出“网格设置”对话框， 在对话框中，先单击“颜色”按钮并从颜色拾取器中选择一种颜色，或者在 文本框中输入一个十六进制的数字，然后单击“显示”选项组中的“线”或 “点”单选项单击“确定”按钮，完成网格线颜色和线型的修改。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
15
在设计页面时需要设置页面元素的位置或对齐页面元素，Dreamweaver CS5提供了“标尺”和“网格”功能。选择“查看”|“标尺”|“显示”命令， 可以在文档中显示“标尺”，选择“查看”|“网格”|“显示网格”命令，可 以在网页文档中显示网格，如图所示。重复操作，可以隐藏显示标尺和网格。
16
在Dreamweaver CS5中，使用跟踪图像功能可以载入某 个网页的布局(或图片)，然后借助该网页的布局来安排正 在制作的网页布局。选择“查看”|“跟踪图像”|“载入”命 令，打开“选择图像源文件”对话框，如图2-33所示。
17
18
每一个网页都是由HTML脚本所组成的*.html文件，一 个完整的HTML网页文件包含head和body两个部分，head 部分包括许多不可见的信息，例如语言编码、版权声明、 关键字等，使用Dreamweaver CS5，可以设置这些信息。
1
Dreamweaver CS5是一款专业的网页制作软件，可 以制作单独的网页文件，但制作网页的根本目的是为了构 建一个完成的网站。Dreamweaver既是一个网页的创建和 编辑工具，又是一个站点创建和管理的工具。因此，在创 建网页之前必须规划和设计好网站。本章主要讲述了 Dreamweaver CS5的一些基本操作，包括规划和创建站点 以及网页文件的基本操作。
10
创建了本地站点后，就可以创建文档并将保存在站点 文件夹中。在创建和编辑文档时，Dreamweaver CS5会自 动生成文档的HTML代码和JavaScript代码，使用 Dreamweaver代码编辑器可以测试和编辑这些代码。 Dreamweaver CS5提供了多种创建文档的方法，可以创建 一个新的空白HTML文档，或使用模板创建新文档。同时， 还提供了功能强大的“新建文档”对话框来满足用户创建 不同类型的文档的需求。 创建网页文档 打开和保存网页文档
19
20
4
网站建立在互联网基础之上，以计算机、网络和通信技 术为依托，通过一台或多台安装了系统程序、服务程序及 相关应用程序的计算机，向访问者提供相应的服务。网站 中的服务具体通过网页来实现，根据网站提供服务的不同， 网站可分为政府网站、新闻网站、搜索网站、电子商务网 站等。
5
创建Web站点的第一步是规划。为了使网站在完成后 能够达到最佳效果，在利用Dreamweaver CS5建立任何 Web站点之前，应根据需求对站点的结构进行设计与规划。
11
在Dreamweaver CS5中创建网页文档，选择“文件”｜ “新建”命令，或按下Ctrl+N键，打开“新建文档”对话 框，如图所示。选择“空白页”选项卡，在“页面类型” 列表框中选择HTML选项，在“布局”列表框中选择“无” 选项，单击“创建”按钮，即可创建一个空白网页文档， 如图所示。
12
6
在创建站点之前，一般在本地将整个网络完成，然后 再将站点上传到Web服务器上。因此，在开始创建网页之 前，最好的选择是用Dreamweaver建立一个本地站点。。 创建本地站点 创建远程站点 管理站点
7
创建本地站点，可以更好地利用站点对文件进行管理， 尽可能地减少错误，例如链接和路径出错等。创建本地站 点，可以使用站点定义向导快速创建。
2
命令的使用 规划和创建站点
创建本地站点 管理站点 Dreamweaver CS5网页文件的基本操作 使用可视化向导 设置页面头部信息
3
规划站点的目的在于明确创建站点的方向并采用的方法， 同时也是确定本地站点所要实现的功能。规划时要明确网 站的主题，搜集需要的信息等。规划站点主要是规划站点 的结构。创建站点既可以创建一个网站，又可以创建一个 本地网页文件的存储地址，规划好站点后即可开始创建站 点。 站点的概念 规划站点
13
在使用Dreamweaver CS5制作网页时，打开和保存 文档是最常用的命令。
“打开”对话框
14
“另存为”对话框
Dreamweaver CS5提供了“标尺”、“网格”和“跟踪图像”3种可视化向 导，用于辅助设计和估计网页在浏览器中的外观。 使用“标尺”和“网格” 使用“跟踪图像” 设置文档头部信息
8
设置站点远程信息的目的是使Drea程站点)上传或下载文件。 在完成Dreamweaver站点的本地信息设置以后，就可以开 始设置站点的远程文件夹(根据开发环境的不同，远程文件 夹是存储用于进行测试、协作、生产、部署等文件的位置)。
9
创建好站点后，根据需要创建各频道、栏目文件夹等， 对于创建好的站点，也可以进行再次编辑，或删除和复制 这些站点。