第3章_Dreamweaver基本操作
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
如图所示：
如果在“字体”下拉列表中没有所需要的字体， 可以选择“编辑字体列表”命令，打开如图所示的 “编辑字体列表”对话框。
在该对话框的“可用字体”列表中选择所需的字 体，单击按钮，将所选的字体添加到“选择的字体”
列表中。
2.字体大小设置
选中要设置字体大小的文字。 执行【文本】|【大小】命令，或者在“属性”面板的“大 小”列表中选择所需要的选项即可。
简介：Dreamweaver CS3“所见即所得”的可 视化网站开发工具。 3.1.1 Dreamweaver CS3的启动 3.1.2 Dreamweaver CS3的工作环境 3.1.3 站点操作 3.1.4 文档操作
3.1.1 Dreamweaver CS3的启动
方法一：在“开始”菜单中启动 方法二：双击桌面上Dreamweaver CS3的快 捷方式图标。
5.设置页面属性（2）设置网页其他属性
③ 跟踪图像。跟踪图像是放在文档窗口中的 JEPG、GIF或PNG图像。在“分类”列表框 中选择“跟踪图像”选项，右侧选项主要用于 设置隐藏图像、设置图像的不透明度和更改图 像的位置.
5.设置页面属性（2）设置网页其他属性
6．预览网页 保存好新建的文档之后，可以在浏览器中对所 做的网页进行预览，预览的方法有： 方法一：按【F12】键。 方法二：在工具栏中单击按钮，在弹出的快捷 菜单中选择浏览器。
5．标准工具栏
标准工具栏包含来自“文件”和“编辑”菜单 中的一般操作的按钮，如“新建”、“打开”、 “保存”、“保存全部”、“剪切”、“复 制”、“粘贴”、“撤销”和“重做”，如图 所示。
6．文档窗口
“文档”窗口显示当前文档。 可以选择下列任一视图
“设计”视图是用于可视化页面布局、可视化编辑 和快速应用程序开发的设计环境。 “代码”视图是用于编写和编辑HTML、 JavaScript、服务器语言代码以及任何其他类型代 码的手工编码环境。 “代码和设计”视图使用户可以在单个窗口中同时 看到同一文档的“代码”视图和“设计”视图。
2．管理本地站点（2）文件的基本பைடு நூலகம்作
2．管理本地站点（3）指定站点首页
① 在站点窗口中单击站点。选取需要设置首 页的站点，然后右击站点，选择快捷菜单中的 “新建文件”命令，出现一个Untitled.htm （无标题）文件图标，此时，在文本框内输入 index.htm，然后按【Enter】键。 ② 在站点窗口的站点上右击index.htm文件图 标，选择快捷菜单中的“设成首页”命令
5．设置页面属性（2）设置网页其他属性
① 外观。在“分类”列表框中选择“外观” 选项，右侧信息主要用于设置网页基本页面布 局，包括页面字体、大小、文本颜色、背景颜 色、背景图像、左边距、右边距、上边距和下 边距
5.设置页面属性（2）设置网页其他属性
② 链接。网页中的链接就是以文字或图像作 为链接对象，然后指定一个要跳转的网页地址， 当浏览者单击文字或是其他对象时，浏览器跳 转到指定的目标网页。
3.字体颜色设置
选中要设置颜色的文字。 执行【文本】|【颜色】命令，弹出如图3-34所示的颜色选择
对话框，在其中选择一种颜色，然后单击“确定”按钮即可。
也可以直接在“属性”面板上进行字体颜色的设置。单 击“属性”面板上的按钮，调色板，选择所需要的颜色，也 可直接在按钮右边的文本框中输入颜色的十六进制数字或者 颜色名称。
在对话框中选择要插入的图像文件，单击“确 定”按钮，完成图像的插入操作。
插入到文档窗口中的图像会以原始大小显示
在页面中.
2.设置图像属性
在页面中插入了图像后， 可以在“属性”面板中对 插入的图像进行属性设置.
3.编辑图像
重新取样 裁剪图像 调整亮度、对比度 锐化图像
对例题插入的图像进行剪裁
7．状态栏
“文档”窗口底部的状态栏提供与用户正创建 的文档有关的其他信息。 标签选择器显示环绕当前选定内容的标签的层 次结构。单击该层次结构中的任何标签可选择 该标签及其全部内容。单击 <body> 可以选择 文档的整个正文，如图所示。
8．属性面板
属性面板并不是将所有的属性加载在面板上， 而是根据用户选择的对象来动态显示对象的属 性。 属性面板的状态完全是随当前文档中选择的对 象而确定的。
3.2 文本属性设置
字体设置
字体大小设置
字体颜色设置
字体样式设置
1.字体设置
使用“属性”面板或者【文本】菜单中的选项可以设 置或更改所选文本的字体，步骤如下： ① 选择要编辑的文本。如果未选择文本，设置将应用 于随后键入的文本。 ② 执行【文本】|【字体】命令，选择相应的字体菜 单项即可。 ③ 可以在“属性”面板中实现对字体的设置。打开 “属性”面板中的“字体”下拉列表选择相应的字体 项
3.4 超链接的创建与管理
超链接的相关知识：
超链接的分类 链接路径：绝对路径、相对路径
超链接的创建
在下面的内容中，将通过介绍北京科技大学天津学院的网 站实例，来讲解各种超链接的创建和使用方法。
选中“校园风光”四个字，然后在“属性”面板的“链接”文本 框中输入目标页面文件的URL，或者单击旁边的“浏览文件”按钮，打 开“选择文件”对话框，在站点中选择相应的页面文件作为超链接的目
3.1.4 文档操作
1．新建网页 2．保存网页 3．关闭网页 4．打开网页
3.1.4 文档操作
5．设置页面属性
（1）设置网页标题 （2）设置网页其他属性
① 外观 ② 链接 ③ 跟踪图像
6．预览网页
1．新建网页
启动Dreamweaver CS3，选择“文件”|“新建” 命令，弹出如图所示的对话框。可以看到， “页面类型”默认为HTML，保持默认选项， 单击“创建”按钮
② 弹出站点定义对话框，可以在对话框上选 择“基本”或者“高级”选项卡进行设置，这 里选择“基本”选项卡，它采用向导式的设置 方法。 ③ 单击“下一步”按钮，在弹出的对话框中 设定是否要使用服务器端的技术。 ④ 单击“下一步”按钮，在弹出的对话框中 设定计算机与服务器的连接方式。 ⑤ 如果发现设置存在错误，可以单击“下一 步”按钮返回到前面的步骤修改设置；如果没 有错误则单击“完成”按钮，这样最初的网站
1．创建本地站点（2）高级设置
① 站点名称 ② 本地根文件夹 ③ 自动刷新本地文件列表 ④ 链接相对于 ⑤ 默认图像文件夹 ⑥ HTTP地址 ⑦ 缓存
2．管理本地站点 （1）编辑站点
① 在站点面板单击“站点名称”对话框，在 下拉列表框中选择“管理站点”命令，如左下 图所示。 ② 在弹出的“管理站点”对话框左侧列表中 选择需要编辑的站点，然后单击右侧按钮，则 可以进行相应的操作，如右下图所示。
4．打开网页
打开已经建立好的网页的方法是： ① 选择“文件”|“打开”命令，在弹出的对话 框中选择要打开的文件。 ② 在站点管理器中找到相应的网页文件，双 击打开。 ③ 按【Ctrl+O】组合键。 ④ 在页面标题处右击，在弹出的快捷菜单中 选择“打开”命令。
5．设置页面属性（1）设置网页标题
1．创建本地站点
（1）基本设置 （2）高级设置
2．管理本地站点
（1）编辑站点 （2）文件的基本操作 （3）指定站点首页
1．创建本地站点（1）基本设置
① 在菜单栏中选择“站点”|“管理站点”命 令，弹出“管理站点”对话框，如图所示，单 击“新建”按钮，然后选择“站点”命令。
1．创建本地站点（1）基本设置
第3章 Dreamweaver基本操作
本章主要内容
3.1 3.2 3.3 3.4 3.5 3.6 3.7
Dreamweaver CS3快速入门 文本属性设置 图像操作 超链接的创建与管理 使用多媒体对象 表格操作 表单操作
3.1 Dreamweaver CS3快速入门
3.1.2 Dreamweaver CS3的工作环境
1．标题栏
启动Dreamweaver CS3后，标题栏将显示文 字Dreamweaver CS3 新建或打开一个文档后，在后面还会显示该文 档所在的位置和文件名称。
2．菜单栏
菜单栏 文件 编辑 查看 插入记录 修改 主 要 功 能
管理文件，例如新建、打开、保存、另存为、导入、输出打印 编辑文本，例如剪切、复制、粘贴、查找、替换和参数设置等 切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能 插入各种元素，例如图片、多媒体组件、表格、框架及超链接等 对页面元素修改的功能，例如在表格中插入表格、拆分、合并单 元格等 用来对文本操作，例如设置文本格式等 所有的附加命令项 用来创建和管理站点
2．保存网页
在上页创建的文档中，选择“插入记 录”|“图像”命令，在弹出的对话框中选择 插入一张枫叶的图片 。 选择“文件”|“另存为”命令，弹出对话框， 在文件名中输入“枫叶”，单击“保存”按钮。 此时，文件的名称显示为 。
3．关闭网页
关闭网页的方法有以下几种： ① 选择“文件”|“关闭”命令。 ② 单击网页文件右上角的按钮。 ③ 输入【Ctrl+W】组合键。 ④ 在页面标题处右击，在弹出的快捷菜单中 选择“关闭”命令。
3.3 图像操作
插入图像
设置图像属性
编辑图像
1.插入图像
插入一个图像 将光标定位在文档中要插入图像的位置。 执行【插入】|【图像】菜单命令，或者在常 用工具栏中单击按钮，弹出如下图所示的对话 框。在该对话框中，上面默认的“文件系统” 选项代表从本地磁盘中选择图像文件，如果选 择“数据源”选项，则可以从数据库中选取图 像文件。
单击图像“属性”面板中的“剪裁”按钮，则 图像周围出现一个剪裁框 。
调整好剪裁框的位置和大小后，在剪裁框内双击鼠标 或者再次在“属性”面板上单击“剪裁”按钮，则剪 裁框以外的图像就被剪切掉了。
锐化图像
单击图像“属性”面板中的“锐化”按钮，则 弹出一个对话框.
根据需要调整锐化值的大小，也可在文本框中输入一个0到10之间的 值进行锐化调整，值越大，锐化程度越大。 调整好后，单击“确定”按钮，即完成了对图像所作的更改。下图为锐 化前后的图像效果对比：
9．浮动面板
其他面板可以统称为浮动面板，这些面板都浮 动于编辑窗口之外。 在初次使用Dreamweaver CS3的时候，这些 面板根据功能被分成了若干组。 在窗口菜单中，选择不同的命令可以打开基本 面板组、设计面板组、代码面板组、应用程序 面板组、资源面板组和其他面板组。
3.1.3 站点操作
菜单栏文件文件管理文件例如新建打开保存另存为导入输出打印编辑编辑编辑文本例如剪切复制粘贴查找替换和参数设置等查看查看切换视图模式以及显示隐藏标尺网格线等辅助视图功能插入记录插入记录插入各种元素例如图片多媒体组件表格框架及超链接等修改修改对页面元素修改的功能例如在表格中插入表格拆分合并单文本文本用来对文本操作例如设置文本格式等命令命令所有的附加命令项站点站点用来创建和管理站点窗口窗口用来显示和隐藏控制面板以及切换文档窗口帮助帮助联机帮助功能例如按f1键即可打开电子帮助文本3
标文件。
3.5 使用多媒体对象
添加背景音乐
文本 命令 站点 窗口 帮助
用来显示和隐藏控制面板以及切换文档窗口
联机帮助功能，例如按【F1】键，即可打开电子帮助文本
3．插入面板组
通过多个按钮，可以很容易地加入图像、声音、 多媒体动画、表格、图层、框架、表单、 Flash和ActiveX等网页元素，如图所示。
4．文档工具栏
文档工具栏包含各种按钮，它们提供各种“文 档”窗口视图（如“设计”视图和“代码”视 图）的选项、各种查看选项和一些常用操作 （如在浏览器中预览），如图所示。
方法一：在工具栏“标题”文本框中输入网页 标题“枫叶的页面”，一般来说都使用有意义 的中文作为标题。 方法二：在文档窗口中选择“修改”|“页面属 性”命令，或者按【Ctrl+J】组合键，弹出 “页面属性”对话框，在“分类”列表框中选 择“标题/编码”选项，在右侧的“标题”文 本框中输入网页的标题 。
4.字体样式设置
字体样式包括字体的加粗、倾斜等。在 Dreamweaver CS3中，用户可以很容易地设 置文字样式：先在页面中选择文字，然后在 “属性”面板中单击按钮，可以设置文字为粗 体；单击按钮，则设置文字为斜体。若要取消 设置，可以再次单击按钮即可。除此之外而， 还可以使用快捷键设置字体的加粗和倾斜格式， 按下“Ctrl+B”组合键，可以使文字加粗；按下 “Ctrl+I”组合键，可以使文字倾斜。