第2章 DreamweaverCS3的基本操作
合集下载
第2章 初识Dreamweaver CS3
2.1.2 文档窗口
状态栏： 状态栏：提供当前正在创建的文档的相关信息
标尺和网格： 标尺和网格：调整网页中对象的位置和大小
在文档窗口中显示标尺：在菜单中选择【查看】 在文档窗口中显示标尺：在菜单中选择【查看】→ 标尺】 【显示】 【标尺】→【显示】 在文档窗口中显示网格： 查看】 【网格设置】 在文档窗口中显示网格：【查看】→【网格设置】 →【显示网格】 【显示网格】
Dreamweaver CS3工作环境 工作环境
启动Dreamweaver CS3，在Dreamweaver CS3的工 启动 ， 的工 作界面中首先出现的是欢迎屏幕。如图所示。 作界面中首先出现的是欢迎屏幕。如图所示。
Dreamweaver CS3工作环境 工作环境
文档”窗口、菜单栏、 工作界面主要由 “文档”窗口、菜单栏、插入 面板组和“属性”面板组成，如图所示。 栏、面板组和“属性”面板组成，如图所示。
2.2 创建第一个网站
2.2.1 2.2.2 2.2.3 2.2.4 创建本地站点 创建简单网页 站点管理 站点文件操作
2.2.1 创建本地站点
定义本地站点是指用户在本地计算机上， 定义本地站点是指用户在本地计算机上，构建出 站点的框架， 站点的框架，从整体上对站点进行全局把握 。 首先在本地计算机上为站点创建一个根文件夹 （根目录），然后在其中创建多个子文件夹，便 根目录），然后在其中创建多个子文件夹， ），然后在其中创建多个子文件夹 于将网站中的所有文档和素材分门别类的存储。 于将网站中的所有文档和素材分门别类的存储。
插入栏
插入栏： 插入栏：由7个选项卡组成，每个选项卡 个选项卡组成， 又包含多个按钮， 又包含多个按钮，可以方便地插入各类网 页对象。插入栏有两种显示方式， 页对象。插入栏有两种显示方式，菜单格 式和制表符格式，默认状态是制表符格式。 式和制表符格式，默认状态是制表符格式。
Dreamweaver CS3网页制作基础教程-教学大纲
《Dreamweaver CS3中文版网页制作基础》课程教学大纲一、课程性质和任务本课程是网页制作的一门实用课程，是网络类专业的一门实践性很强的技术基础课。
它的主要任务是培养学生规划、设计和制作网站的实际技能。
二、课程教学目标1、掌握Dreamweaver CS3界面的组成与使用方法2、掌握创建和发布站点的基本方法3、掌握首选参数及页面属性的设置方法4、掌握文本、图象、多媒体的主要属性与设置方法5、掌握制作超级链接的方法6、掌握表格的创建、编辑与属性设置方法7、掌握框架结构网页的制作方法8、掌握使用AP Div和CSS样式布局网页的方法9、掌握使用时间轴创建动画的方法10、掌握使用模板和库项目创建网页的方法11、掌握使用行为和Spry构件的方法12、掌握使用表单设计网页的方法13、掌握创建ASP应用程序的方法四、教学内容和基本要求第1章Dreamweaver CS3概况∙了解Dreamweaver CS3的基本概况。
∙熟悉Dreamweaver CS3的工作界面。
∙掌握常用工具栏和面板的基本使用方法。
∙了解Dreamweaver CS3的新特性。
第2章规划、创建和管理站点∙了解网站制作的一般流程。
∙了解网页布局的基本方式。
∙了解网页色彩搭配的基本原理。
∙掌握定义站点的基本方法。
∙掌握设置首选参数的基本方法。
∙掌握创建文件夹和文件的基本方法。
∙掌握编辑、复制和删除站点的基本方法。
∙掌握导出和导入站点的基本方法。
第3章创建和设置文档∙掌握创建、打开、保存和关闭文档的方法。
∙掌握添加文档内容的方法。
∙掌握设置文档格式的方法。
第4章使用图像和媒体∙了解网页中常用图像的基本格式。
∙掌握插入图像和设置图像属性的方法。
∙掌握插入图像占位符的方法。
∙掌握设置网页背景颜色和背景图像的方法。
∙掌握插入Flash动画、图像查看器、ActiveX视频的方法。
第5章设置超级链接∙了解超级链接的种类。
∙掌握设置文本和图像超级链接的方法。
Dreamweaver CS3 详解
Dreamweaver CS3 简介Dreamweaver CS3是一款功能强大的可视化的网页编辑与管理软件。
利用它，不仅可以轻松地创建跨平台和跨浏览器的页面，也可以直接创建具有动态效果的网页而不用自己编写一行源代码。
Dreamweaver CS3 最主要的优势在于能够进行多任务工作，并且在操作方法、界面风格方面更加人性化。
用户可以根据自己的喜好和工作方式，重新排列面板和面板组，自定义工作区。
1 Dreamweaver CS3概述Dreamweaver CS3是由Adobe公司在并购Macromedia之后推出的最新版本，它是一款专业的Web站点开发软件，可用于Web站点、Web页和Web应用程序的设计、编码和开发工作。
在业界通常将Dreamweaver、Flash、Fireworks称为网页三剑客。
将各种网页制作的相关工具紧密联系起来是Dreamweaver系列的一大亮点，同时良好的插件体系，使Dreamweaver CS3可通过第三方插件进行补充。
另外，Dreamweaver CS3还为开发人员提供了动态语言支持与丰富的模板。
另外值得称道的是，Dreamweaver CS3不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。
Dreamweaver CS3在功能强大与易用性之间具有很好的平衡，使用Dreamweaver CS3可以有效地提高Web开发的工作效率。
2 Dreamweaver CS3的新增功能相对于以前的版本Dreamweaver CS3的功能主要在以下方面进行了增强：1. Ajax 的Spry 框架通过Adobe Dreamweaver CS3，可以使用Ajax 的Spry框架进行动态用户界面的可视化设计、开发和部署。
Ajax 的Spry 框架是一个面向Web 设计人员的JavaScript 库，用于构建向用户提供更丰富体验的网页。
Dreamweaver-cs-基础与实例教程第2章PPT课件
•14
2.3.3 重新编辑和删除CSS样式
首先在CSS样式面板中选择一种不需要的样式，然后单 击“编辑样式”按钮，就可以重新编辑CSS样式了；如 果单击“删除CSS规则”按钮，就可以删除“CSS 样式” 面板中的所选样式，并从应用该规则的所有元素中删 除格式。
•15
2.3.4 应用CSS样式
定义了CSS样式后，可以将这些CSS样式应用于网页中 的文本、图像、Flash等对象。具体的方法如下。
•21
3.外观(Layout)设置 （1）滚动文字对齐方式align 基本语法： <marquee align="对齐方式">滚动文字</marquee> 对方方式=top、middle、bottom，对齐上沿、中间、下
沿。 （2）滚动背景颜色属性bgcolor 在滚动文字的后面，可以添加背景颜色。 基本语法： <marquee bgcolor="color_value">滚动文字</marquee>
•7
2.2 制作一个简单的网页
在认识了Dreamweaver之后，接下来我们将利用文字和 图片，完成“数学与计算机”系网站主页的内容，学 习在Dreamweaver中输入并设置文字格式的基本操作， 完成效果如图所示。
•8
2.3 CSS样式
2.3.1 创建CSS样式 2.3.2 将外部样式表导入到当前文档 2.3.3 重新编辑和删除CSS样式 2.3.4 应用CSS样式
•19
（2）滚动方式属性behavior 通过这个属性能够设定不同方式的滚动文字效果。如滚
动的循环往复、交替滚动、单次滚动等。 基本语法： <marquee behavior="value">滚动文字</marquee> （3）滚动循环属性loop 通过这个属性能够让文字滚动循环进行。 基本语法： <marquee loop="次数">滚动文字</marquee>
2.3.3 重新编辑和删除CSS样式
首先在CSS样式面板中选择一种不需要的样式，然后单 击“编辑样式”按钮，就可以重新编辑CSS样式了；如 果单击“删除CSS规则”按钮，就可以删除“CSS 样式” 面板中的所选样式，并从应用该规则的所有元素中删 除格式。
•15
2.3.4 应用CSS样式
定义了CSS样式后，可以将这些CSS样式应用于网页中 的文本、图像、Flash等对象。具体的方法如下。
•21
3.外观(Layout)设置 （1）滚动文字对齐方式align 基本语法： <marquee align="对齐方式">滚动文字</marquee> 对方方式=top、middle、bottom，对齐上沿、中间、下
沿。 （2）滚动背景颜色属性bgcolor 在滚动文字的后面，可以添加背景颜色。 基本语法： <marquee bgcolor="color_value">滚动文字</marquee>
•7
2.2 制作一个简单的网页
在认识了Dreamweaver之后，接下来我们将利用文字和 图片，完成“数学与计算机”系网站主页的内容，学 习在Dreamweaver中输入并设置文字格式的基本操作， 完成效果如图所示。
•8
2.3 CSS样式
2.3.1 创建CSS样式 2.3.2 将外部样式表导入到当前文档 2.3.3 重新编辑和删除CSS样式 2.3.4 应用CSS样式
•19
（2）滚动方式属性behavior 通过这个属性能够设定不同方式的滚动文字效果。如滚
动的循环往复、交替滚动、单次滚动等。 基本语法： <marquee behavior="value">滚动文字</marquee> （3）滚动循环属性loop 通过这个属性能够让文字滚动循环进行。 基本语法： <marquee loop="次数">滚动文字</marquee>
Dreamweaver CS3基础
图2-12 代码视图
返回本节
第2章 Dreamweaver CS3基础 章 基础
在【文档】工具栏中单击【设计】按钮 ，可以切换到设计视图 模式，编辑区将显示网页的预览效果，如图2-13所示。
图2-13 设计视图 专家点拨： 专家点拨：在设计视图中，以所见即所得的方式编辑网页。制作 者只需利用Dreamweaver提供的设计工具直接插入和编辑网页中的元素 ，系统会自动生成HTML代码。 返回本节
返回本节
第2章 Dreamweaver CS3基础 章 基础
（6）站点定义完成后，可以看到【文件】面板中列出了站点中的目录 结构，如图2-21所示。如果【文件】面板没有显示在窗口中，可以选择 【窗口】|【文件】命令将其显示出来。
图2-21 站点建立后的【文件】面板 专家点拨： 专家点拨：以上操作步骤仅仅介绍了定义站点向导提供的最基本设置，还有 很多设置涉及到服务器技术的选用，以及利用Dreamweaver开发动态网站时开 发语言的选择等。因为和本书内容关联不大，所以这里不再赘述。 返回本节
第2章 Dreamweaver CS3基础 章 基础
Dreamweaver是一款专业的HTML编辑器，用于对Web站点、Web页和 Web应用程序进行设计、编码和开发。Dreamweaver中的可视化编辑功能 和功能强大的编码环境，使不同层次的网页制作者都能拥有更加完美的 Web创作体验。 本章主要内容： 本章主要内容：
图2-24 在文档窗口中编辑网页
图2-25 “另存为”对话框
（2）选择【文件】|【保存】命令，在弹出的【另存为】对话框中选择要 保存的路径（这里保存在samples\part2目录下），并将文件名更改为 mypage1.html。如图2-25所示。单击【保存】按钮保存文件。 返回本节
网页设计Dreamweaver CS3教程1-6章(基础篇)
网页效果
活动三：打造自己的个性化站点
活动小结：
在这次活动中我们完完整整的制作了一个个人的网站，
是不是比想象中的容易啊！在本次制作中使用了“高级”
选项卡来建立网站，这比使用向导建立更快捷。 在制作中，网页间的链接是很重要的，作为一个设计者
值得注意的是，你的设计要让使用者能方便的在你的站点
中的任何网页之中进行跳转。
件的特点。
活动一：初识网页
活动小结：
网页中使用的最多的元素是文字和图片。图 片的一般格式为jpg或gif文件。flash的使用能使网 页增加动感。 动态网页能对用户提交的信息作出及时的反 馈，使网页更具人性化。 Dreamweave有着可视化的操作界面，特别在 与flash和fireworks的相互配合，成为网页创意组 件中最重要的一员。
活动三：制作 “我的第一张网页”
制作完成后的 效果图
活动三：制作 “我的第一张网页”
活动小结：
制作网页的基本流程可以分为：建立
站点->创建网页->插入网页元素->编辑网
页元素->保存网页->预览效果。
第一章实验：制作“我的个人介 绍”
实验要求：
一、建立站点目录mysitelx，并将站点指定至站点目录。 二、制作网页“我的个人介绍”，在网页中加入背景图片、文字、 水平线、图片和超级链接。 三、通过记事本打开网页，修改现有的HTML代码，比较前后效果。
活动四：编辑我的站点
教学目标：
掌握编辑站点的方法。
知识要点：
网站地图，管理网站文件、链接检查、添加和 删除站点。
活动四理功能 （2）站点视觉地图 （3）添加和删除站点
视图工具栏
“管理站点”对话框
Dreamweaver CS3网页设计案例教程 (2)
6.设置网页的标题
HTML页面的标题可以帮助站点浏览者理解所查看网页的内容，并在浏览 者的历史记录和书签列表中标志页面。文档的文件名是通过保存文件命令 保存的网页文件名称，而页面标题是浏览者在浏览网页时浏览器标题栏中 显示的信息。
7.设置网页的默认格式
用户在制作新网页时，页面都有一些默认的属性，如网页的标题、网页 边界、文字编码、文字颜色、超链接的颜色等。若需要修改网页的页面属 性，可选择“修改 > 页面属性”命令，弹出“页面属性”对话框。
2.1 植物香水网页
案例分析 设计理念 操作步骤 相关工具
2.1.1 案例分析
香水是一种混合了香精油、固定作植物香水网页，在设计风格
上要表现出香水清新自然的迷人气息和魅力。
2.1.2 设计理念
在网页设计制作过程中，上方采用了漂亮的花草图片，使整个面
喜爱做西点的朋友们制作的西点网页，在网页设计时要表现出淡雅 温馨和甜美浪漫的风格。
2.2.2 设计理念
在网页设计制作过程中，整个页面以淡雅的黄色为基调，表现出
恬静、舒爽的氛围。清晰明确的导航设计，体现出现代气息。蛋糕
和云彩的摆放，表现出制作蛋糕的样式和轻松的感觉。左侧的菜单 链接，介绍了多种西点的制作方法，每种制作方法都有详尽的步骤 图讲解说明，使读者一目了然。整个网页设计温馨甜美，充分体现 了生活的惬意。
选择“插入”面板中的“文本”选项卡，单击“字符”展开式按 钮 ，选择“不换行空格”按钮。
选择“插入记录 > HTML > 特殊字符 > 不换行空格”命令，或按 <Ctrl+Shift+Space>快捷键。
将输入法转换到中文的全角状态下。
4.设置是否显示不可见元素
第2章 Dreamweaver CS3基础
式控制按钮，通过这些按钮可以方便地设置文本的格式。 式控制按钮，通过这些按钮可以方便地设置文本的格式。
单击“插入” 文本）面板的“文本” 图 2-1-9 单击“插入”（文本）面板的“文本”标签 2．文字属性的设置 ． 所示的文本“属性”栏和窗口中的“文本”菜单来设定。 文本的属性可以由图 2-1-5 所示的文本“属性”栏和窗口中的“文本”菜单来设定。 格式” （1）文字标题格式的设置：文本有六种标题格式，对应的字号大小和段落对齐方式都是设定好的。在“格式” ）文字标题格式的设置：文本有六种标题格式，对应的字号大小和段落对齐方式都是设定好的。 下拉列表框内可选择各种格式，其中各选项的含义如下： 下拉列表框内可选择各种格式，其中各选项的含义如下： “无”选项：无特殊格式的规定，仅决定于浏览器本身。 选项：无特殊格式的规定，仅决定于浏览器本身。 “段落”选项：正文段落，在文字的开始与结尾处有换行，各行的文字间距较小。 段落”选项：正文段落，在文字的开始与结尾处有换行，各行的文字间距较小。 “标题 1”～“标题 6”选项：是标题 1～标题 6，约为中文 1 至 6 号字大小。 选项： 号字大小。 ～ 选项 ～ ， “预先格式化的”选项：预定义的格式。 预先格式化的”选项：预定义的格式。 使用了字体组合的方法，取代了简单地给文本指定一种字体的方法。 （2）创建字体组合：Dreamweaver 使用了字体组合的方法，取代了简单地给文本指定一种字体的方法。字体 ）创建字体组合： 组合就是多个不同字体依次排列的组合。在设计网页时，可给文本指定一种字体组合。在浏览器中浏览该网页时， 组合就是多个不同字体依次排列的组合。在设计网页时，可给文本指定一种字体组合。在浏览器中浏览该网页时， 系统会按照字体组合中指定的字体顺序自动寻找用户计算机中安装的字体。 系统会按照字体组合中指定的字体顺序自动寻找用户计算机中安装的字体。采用这种方法可以兼顾各种浏览器和
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 站点根目录相对路径
开始于当前站点的根目录， 开始于当前站点的根目录，如 /images/1.jpg
链接目标
• 此处的链接目标是指链接打开的位置 • 在属性面板的“目标”下拉列表中可设置为： 在属性面板的“目标”下拉列表中可设置为：
_blank
• 在新窗口中打开
_parent
• 在父框架或父窗口中打开
• 插入flash动画 插入flash动画
常用工具栏-媒体： 常用工具栏-媒体：flash
在网页中使用超级链接
• 什么是超级链接（超链） 什么是超级链接ห้องสมุดไป่ตู้超链）
超链接在本质上属于一个网页的一部分， 超链接在本质上属于一个网页的一部分，它是 一种允许我们同其他网页或站点之间进行连接 的元素。 的元素。
在网页中使用声音
• 插入声音
常用工具栏-媒体常用工具栏-媒体-插件 播放器的隐藏：属性面板-参数-hidden,true 播放器的隐藏：属性面板-参数循环播放：loop,true 循环播放：
在网页中使用flash动画 在网页中使用flash动画
• 什么是flash动画？ 什么是flash动画？ 动画
回答：是在文件路径中有中文字体。 回答：是在文件路径中有中文字体。 回复者： 回复者：露露 同学
• Dreamweaver中的站点指的是什么？ Dreamweaver中的站点指的是什么？ 中的站点指的是什么
Dreamweaver CS3 中的站点时文件和文件夹 的集合，它对应于服务器上的web网站 的集合，它对应于服务器上的web网站
• 建立站点
站点菜单站点菜单-新建站点
创建网页文档
• 新建asp网页或html网页 新建asp网页或 网页或html网页 • 设置网页文档属性
Flash是由 Flash是由macromedia公司(后由Adobe收购) 是由macromedia公司 后由Adobe收购 公司( 收购) 动画的标准， 推出的交互式矢量图和 Web 动画的标准，不 同于常见的视频格式，其文件后缀名为.swf， 同于常见的视频格式，其文件后缀名为.swf， 被广泛应用于网页设计，动画制作等领域。 被广泛应用于网页设计，动画制作等领域。
•
问题："button1.swf"是一个无效文件名,或者文件路径或文件名中含有中文字符。 我 是一个无效文件名, 问题："button1.swf"是一个无效文件名 或者文件路径或文件名中含有中文字符。 要补充
• • • • • • • • • • 回答：是处在文件路径问题上，在本地根站点的路径上出现了中文字体，才导致产生 回答：是处在文件路径问题上，在本地根站点的路径上出现了中文字体， 这样的问题。 这样的问题。 回复者： 回复者：露露 同学
超链接中的路径
• 什么是路径？ 什么是路径？
路径是指链接目标的地址
路径的表示方法
• 绝对路径
被链接文档的完整URL， 被链接文档的完整URL，如 /xyjj.html
• 文档相对路径
以当前文档所在位置为起点到被链接文档经由的路径，如： 以当前文档所在位置为起点到被链接文档经由的路径， 1.jpg images/1.jpg ../images/1.jpg
给文字应用超级链接
• 首先准备好所有的文档 • 添加超级链接的方法
选中文字-在属性面板里拖动“指向文件按钮” 选中文字-在属性面板里拖动“指向文件按钮” 到目标文件上 也可以直接在属性面板的“链接” 也可以直接在属性面板的“链接”文本框中输 入网址
• 给图片应用超级链接也使用同样的方法
超级链接详解
第2章 DreamweaverCS3 基本操作
本章主要内容
• 在Dreamweaver中建立站点 Dreamweaver中建立站点 • 创建网页文件 • 在网页中使用文字和图像 • 在网页中使用声音和动画 • 在网页中使用超级链接
在Dreamweaver中建立站点 Dreamweaver中建立站点
在网页中使用文字
• 设置文字格式
字体、大小、颜色 字体、大小、
• 设置段落格式
设置标题(<h1></h1>)、段落对齐、间距、 设置标题(<h1></h1>)、段落对齐、间距、换 行标签(<br/>) 行标签(<br/>)
• 设置样式 • 使用段落列表
在网页中使用图像
• 插入图像 • 插入图像占位符 • 设置图像属性
• 超链的组成
链接载体（源端点） 链接载体（源端点）
• 可以是文本、图片、图片热区、动画等 可以是文本、图片、图片热区、
链接目标（目标端点） 链接目标（目标端点）
• 可以是内部链接、外部链接、锚点链接、Email链 可以是内部链接、外部链接、锚点链接、Email链 接、图像、声音、文件等 图像、声音、
_self
• 在当前窗口或框架中打开
_top
• 载入整个浏览器窗口，删除所有框架 载入整个浏览器窗口，
上机实训
• 2.1 拟定一个主题，如个人主页、班级主页、产 拟定一个主题，如个人主页、班级主页、 品介绍、人文地理等，制作一个图文混排的网页； 品介绍、人文地理等，制作一个图文混排的网页； • 2.2 制作一个友情链接的页面，提供如新浪、网 制作一个友情链接的页面，提供如新浪、 淘宝等网站的图片链接， 易、淘宝等网站的图片链接，要求在新窗口中打 开链接； 开链接； • 2.3 制作一个电子相册的主页，有循环播放的背 制作一个电子相册的主页， 景音乐，使用图片或flash按钮组成导航菜单 按钮组成导航菜单。 景音乐，使用图片或flash按钮组成导航菜单。