当前位置：文档之家 › Dreamweaver CS6入门课件

Dreamweaver CS6入门课件

  • 格式：ppt
  • 大小：2.21 MB
  • 文档页数：22

下载文档原格式

  / 22

合集下载

Dreamweaver cs6 标准实例教程课件第1章Dreamweaver CS6概述

Dreamweaver cs6 标准实例教程课件第1章Dreamweaver CS6概述


执行“文件”｜“新建”命令，打开“新建文档”对话框 选择“空白页”类别的HTML基本项，布局“无”，然后单击“创建”按钮
1.2.1 菜单栏
1.2.2 工具栏
：显示代码视图。 ：在同一屏幕中以水平对比的方式显示代码和设计视图。 ：显示设计视图。
：在不打开浏览器的情况下实时预览页面的效果。 ：以黄色突出显示浏览器为呈现该页面而执行的代码版本，此代码是不 可编辑的。
第1章 Dreamweaver CS6概述
1.2 工作界面
执行“开始”|“程序”|“Adobe”| “Adobe Dreamweaver CS6”命 令启动Dreamweaver
第一次启动Dreamweaver CS6时， 会弹出“默认编辑器”对话框
单击“确定”按钮进入Dreamweaver CS6的欢迎界面
1.2.3 “插入”面板
“插入”面板
在不同面板之间进行切换
✓ 单击“颜色图标”命令，即可以彩色显示对象图标。 ✓ 单击下ห้องสมุดไป่ตู้列表中的“隐藏标签”命令，则只显示对象图标而不显示图标右
侧的标签。
1.2.4 文档窗口
文档窗口用于显示当前创建或者编辑的文档，可以根据选择显示方式的 不同而显示不同的内容。
1.2.5 “属性”面板
选中某一对象后，“属性”面板可以显示被选中对象的属性，还可 以在属性面板中修改被选对象的各项属性值。
单击面板右下角的 可关闭“属性”面板的下半部分。 单击面板右下角的 可打开“属性”面板的下半部分。
《Dreamweaver CS6网页设计与制作》第2章 Dreamweaver基础知识 刘敏娜 主编PPT课件

《Dreamweaver CS6网页设计与制作》第2章 Dreamweaver基础知识 刘敏娜 主编PPT课件


3、查看面板组的“选项”菜单：单击面板 或面板组右上方的选项按钮，在列表中可 以对网页进行设置，比如有新建和打开文 件等操作。
4、重命名面板组：可以为面板组命名，操 作方法：单击面板组的选项列表，选择重 命名面板组，输入新名称就可以了。
2.2.4自定义快捷键
Dreamweaver为用户定制了一些常用 命令的快捷键，当然用户也可以自己设置 快捷键。方法是：点击“编辑”菜单-〉“快 捷键”，选择需要更改的命令，如“新建” 命令，单击右上角的“复制副本”按钮复 制为副本（可以为副本重命名），在副本 设置中继续选择“新建”，在“按钮”输 入框按下新设置的快捷键（在键盘上直接 输入组合键，要求必须是包含ctrl键）,单击 “确定”即可生效。
窗口的各组成要素
面板组
组合在一个标题下面的多个相关的面板的集合。可以通过 单击组名称左侧的展开箭头将这多个面板在折叠或展开之 间切换。
文件面板
这个面板组非常重要，用来管理文件和文件夹，还可以对 站点进行操作，查看站点中的资源。
标签选择器
处于文档底部的状态栏中，用来显示当前选定html对象标 签的层次结构，单击其中的任何标签，就可以选中该标签 及其内容。
窗口的各组成要素
文档工具栏
文档工具栏上有视图切换的按钮，另外还包含文件管理功 能，上传下载，浏览器预览等功能按钮。
文档窗口
显示用户正在编辑的网页文档。
属性浮动面板
可以查看和编辑当前选定的网页元素的属性，此面板中的 内容会随着选中对象的不同而变化，比如当前选中了文字， 面板中就会显示文字相关的属性，如字体，大小，样式等。
单击文档工具栏左边的3个按钮，可以在“代
码视图”，“设计视图”和“拆分”视图之间切
换。另外在工具栏中还有添加网页标题，文件管理，Βιβλιοθήκη 本地和远程站点间传送文档等命令。如下
Dreamweaver CS6 字、图像、超链接 ppt课件

Dreamweaver CS6 字、图像、超链接 ppt课件


ppt课件
第1页
“标题/编码”属性
标题：指定在“文档”窗口和大多数浏览器窗口的标题栏中出现的页 面标题。
文档类型：指定一种文档类型定义，使浏览器使用相应的方式加载网 页并显示。
编码：指定文档中字符所用的编码。（如果选择 Unicode (UTF-8) 作 为文档编码，则不需要实体编码，因为 UTF-8 可以安全地表示所有字 符）；一般使用默认的Unicode编码，以中文为主的网页也可以 “简 体中文(GB2312）”。
①在“文档”窗口中，将插入点放置在要显示图像的地方，然后执行 下列操作之一：
在“插入”面板的“常用”类别中，单击“图像”图标。
选择菜单“插入”>“图像”。
②选择“文件系统”以选择一个图像文件。
③单击“确定”。将显示“图像标签辅助功能属性”对话框
④在“替代文本”和“详细描述”文本框中输入值，然后单击“确定
段落、列表和表格的结构，但不保留粗体、斜体和其他格式设置）。 带结构的文本以及基本格式：粘贴结构化并带简单HTML格式的文本，
粘贴的默认格式。 带结构的文本以及全部格式：可以粘贴文本并保留所有结构、HTML格
式设置和CSSHale Waihona Puke 式。ppt课件第5页
5、在属性检查器中设置HTML 格式文本属性 可以使用文本属性检查器应用 HTML 格式或层叠样式表 (CSS) 格
”>“HTML”>“水平线”。 可以在属性检查器中对水平线进行样式的设置。 “ID”文本框：可用于为水平线指定 ID。 宽和高：以像素为单位或以页面大小百分比的形式指定水平线的宽度
和高度。
ppt课件
第 10 页
对齐：指定水平线的对齐方式（默认、左对齐、居中对齐或右对齐） 。仅当水平线的宽度小于浏览器窗口的宽度时，该设置才适用。
《网设计课件：AdobeDreamweaverCS6基础教程》

《网设计课件：AdobeDreamweaverCS6基础教程》

《网设计课件：Adobe Dreamweaver CS6基础教 程》
想要成为一名出色的网页设计师吗？这份课件将带领你了解Dreamweaver CS6 的基本知识和技能，让你轻松入门网页设计。
了解Dreamweaver CS6
掌握Dreamweaver CS6的基本概念和功能。学习如何创建和管理网页项目，以 及如何使用Dreamweaver的多种工具。
图像和媒体
学习如何在网页中插入图像和媒体文件，并掌握调整图像大小、添加图像属性和优化网页加载速度的技巧。
表格和表单
掌握使用Dreamweaver创建和编辑表格，以及制作表单并进行表单验证的方法。
CSS样式和布局
学习如何使用CSS样式和布局来设计漂亮和响应式的网页，以吸引用户并提升 用户体验。
Байду номын сангаас
界面和工具导览
熟悉Dreamweaver CS6的用户界面和各种工具，并理解它们的作用和用法，提 高你的工作效率。
基本网页结构
学习创建基本网页结构的步骤，包括HTML标签和属性的使用，以及如何组织 和布局网页内容。
文本和超链接
了解如何在网页中添加文本内容和超链接，并学习使用CSS样式来美化文本和 超链接的外观。
Dreamweaver CS6-第2章文本与文档课件

Dreamweaver CS6-第2章文本与文档课件


2.2.3 修改项目符号或编号
（1）将插入点放在设置项目符号或编号的文本中。
（2）通过以下几种方法启动“列表属性”对话框。 单击“属性”面板中的“列表项目”按钮。 选择“格式 > 列表 > 属性”命令。
2.2.4 设置文本缩进格式
设置文本缩进格式有以下几种方法。 在“属性”面板中单击“内缩区块”按钮 或“删除内缩区块”按 钮 ，使段落向右移动或向左移动。 选择“格式 > 缩进”或“格式 > 凸出”命令，使段落向右移动或向 左移动。 按Ctrl+Alt+] 组合键或Ctrl+Alt+ [ 组合键，使段落向右移动或向左 移动。
2.1.6 设置页边距
按照文章的书写规则，正文与纸的四周需要留有一定的距离，这个距离叫页 边距。网页设计也如此，在默认状态下文档的上、下、左、右边距不为零。
修改页边距的具体操作步骤如下。 （1）选择“修改 > 页面属性”命令，弹出“页面属性”对话框。 （2）根据需要在对话框的“左边距”“右边距”“上边距”“下边 距”“边距宽度”和“边距高度”选项的数值框中输入相应的数值。
“页面属性”对话框
2.1.7 设置网页的标题
HTML 页面的标题可以帮助站点浏览者理解所查看网页的内容，并在 浏览者的历史记录和书签列表中标志页面。文档的文件名是通过保存文件 命令保存的网页文件名称，而页面标题是浏览者在浏览网页时浏览器标题 栏中显示的信息。 更改页面标题的具体操作步骤如下。
（1）选择“修改 > 页面属性”命令，弹出“页面属性”对话框。 （2）在对话框的“分类”选项框中选择“标题/编码”选项，在对话 框右侧“标题”选项的文本框中输入页面标题，单击“确定”按钮，完成 设置。
输入文字后的效果图
网页设计与制作Dreamweaver CS6标准教-ppt课件-01

网页设计与制作Dreamweaver CS6标准教-ppt课件-01



3. 导航条 导航条是网站设计中最重要的元素之一，即表现了网站 的站点结构和内容分类，又方便了用户对网站的浏览。 4. 图像 Gif用于画面简单、细节信息少的图像，如背景图片，可 以减少图像文件的大小；Jpeg用于画面较为复杂、细部 信息多的图像；PNG用于有透明背景的图像。 一种是独立完整的图像，二是在Firework或Photoshop 中使用切片功能获得的图像。 5. 动画 网页设计中常用的动画有Gif动画和Flash动画。 6. 背景 使用合理能够增强页面的整体创意效果。

1. 结构布局 常用的结构布局方式包括“国”字型、拐角型、 上下框架和左右框架等类型。 2. 艺术布局 常用的平面艺术设计原则有分割、对称和平衡等。 总之，根据内容和栏目编排要求以及客户审美需 求，将各种典型结构灵活运用，将艺术设计原则 融会贯通，锐意创新，创作出结构布局合理，页 面精美的网页。

网页由三部分组成：结构（Structure）、表现 （Presentation）和行为（Behavior），相应 的技术标准由三个部分组成：结构化标准语言， CSS样式表和脚本语言。

1.3.1结构化语言 1.3.2CSS样式 1.3.3脚本语言 1.3.4ASP技术



结构化语言HTML（Hyper Text Markup Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup Language，可扩展的超文本标记语言）是 HTML的升级版本。 超文本标记语言HTML5是将取代HTML4.01标 准和XHTML1.0标准的HTML标准版本。




2. RGB色彩模式和网页安全色 每种色彩都可以用红(R)、绿(G)、蓝(B)3种色彩按一 定的比例调和而成，这3种色彩被称为光的3原色 将在不同操作系统和浏览器中具有一致显示效果的颜 色定义为网络安全色，网络安全色有216种。在网页 设计软件中，任何颜色都有一个六位的十六进制编号， 如#D6D6D6，任何由00、33、66、99、CC或者FF 组合而成的颜色值，都表示一个Web安全色 3. 利用图像配色
第1章 Dreamweaver CS6快速入门[11页]

第1章 Dreamweaver CS6快速入门[11页]


实例目的
本实例的目的是让大家掌握使用HTML5新增的<video>标签在网页中 实现视频播放的方法。视频标签的出现无疑是HTML5的一大亮点，但是 旧的浏览器不支持<video>标签，并且涉及到视频文件的格式问题。
实例重点
添加<video>标签并设置属性 添加<source>标签链接视频文件 了解<video>标签支持的视频格式
代码视图与设计视图的切换 网页标题的设置方法 输入网页正文内容
实例目的
本实例的目的是让大家了解HTML5新增的<canvas>标签，该标签是 图形定义标签，通过该标签可以实现在网页中自动绘制出一些常见的图 形，例如矩形、椭圆形等。
实例重点
掌握新建HTML5文档的方法 了解HTML5文档代码 掌握HTML5中<cavas>标签的使用
实例目的
本实例的目的是让大家掌握使用HTML5新增的<audio>标签在网页中 嵌入音频播放的方法，使用<audio>标签不需要使用任何插件即可以在网 页中嵌入音频。
实例重点
添加<audio>标签并设置属性 了解<audio>标签支持的视频格式
实例目的
本实例的目的是让大家掌握使用“页面属性”对话框对网页整体属 性进行设置的方法，例如网页的背景颜色、背景图像、字体、字体大小、 字体颜色和页边距等。
实例目的
本实例的目的是让大家掌握在站点创建过程中设置远程服务器的方 法。通常情况下，都是创建本地站点，完成网站的制作后，再设置远程 服务器信息，将网站上传到远程服务器，但有些情况下，也可以在创建 站点时，将该站点的远程服务器设置好，这样可以制作好一部分网站页 面，就上传一部分页面，可以便于在网络中查看页面的效果。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

时代码”视图显示浏览器用于执行该页面的实际代码，当
在“实时”视图中与该页面进行交互时，它可以动态变化。 第 3
“实时代码”视图不可编辑。
页
1 DREAMWEAVER的工作界面
精
多屏幕：借助“多屏幕预览”面板，为智能手机、平板电脑和 台式机进行设计。使用媒体查询支持,为各种不同设备设计样式 并将呈现内容可视化。（查看页面，就如同页面在不同尺寸的 屏幕中显示。）
“文件”等面板独立显示，适合对网页的调试和修改。
第 10
页
精
2 站点的搭建与管理
Dreamweaver的站点是一种管理网站中所有相关联 文件的工具。通过站点可以对网站的相关页面及各 类素材进行统一管理，还可以以使用站点管理实现 将文件上传到网页服务器，测试网站。
站点简单的说就是一个文件夹。在这个文件夹里包 含了网站中所有用到的文件。我们通过这个文件夹 （站点），对我们的网站进行管理，有次序，一目 了然。
这些面板集中了网页编辑和站点管理中常用的工具 按钮。这些面板被集中到面板组中，每个面板都可 以展开或折叠，并且可以和其他面板一起或取消停 靠。
第6 页
精
1 DREAMWEAVER的工作界面
第7 页
1 DREAMWEAVER的工作界面
文件面板：
精
没有创建站点的状态
创建站点哟后的状态
第8 页
第 11 页
2.1 创建本地站点
精
在制作页面之前，首先要在Dreamweaver中创建站点。 一开始只需制作本地站点，这个位于本地硬盘中的文件夹 被当成一个远程站点的镜像，完成本地站点的制作后，即 可将本地站点上传至远端服务器，作为远程站点。
的不同视图之间快速切换。工具栏中还包含一些与 查看文档、在本地和远程站点间传输文档有关的常 用命令和选项。
1 DREAMWEAVER的工作界面
精
代码：显示Html源代码视图。
拆分：同时显示Html源代码和“设计”视图。
设计：只显示“设计”视图。
提示：如果处理的是XML、JavaScript、CSS或乾其他基 于代码的文件类型，则无法在“设计”视图中查看文件， 而且“设计”和“拆分”按钮将会变暗。
重新执行“窗口>属性”命令或者点击属性检查器右上角， 第 5
可以关闭属性检查器。
页界面
5、浮动面板 工作界面的右侧排列着一些浮动面板，包括“插
入”、“CSS”、“文件”、“资源”等。 “插入”面板：其中的按钮被分为９个类别。
“文件”面板：是站点管理器的缩略图，可以创建 文件夹和文件，也可以上传或下载服务器端的文件。
4、属性面板（属性检查器）
可以检查和编辑当前页面选定元素的最常用属性，它的内
容根据选定的元素的不同会有所不同。在“属性面板”中 提供了HTML和CSS两种类型的属性设置。
默认情况下，属性检查器位于工作区的底部边缘，但是可 以将其取消停靠并使其成为工作区中的浮动面板。在顶部 “属性”的右边，按下鼠标左键，即可拖动属性检查器为 浮动面板，按照同样的方法，还可以将它拖回到底部，停 靠在工作区下面。
实时视图：类似于“设计”视图，“实时”视图更逼真地 显示文档在浏览器中的表示形式，并使您能够像在浏览器 中那样与文档进行交互。“实时”视图不可编辑。但可以 在“代码”视图中进行编辑，然后刷新“实时”视图来查 看所做的更改。（ 显示不可编辑的、交互式的、基于浏 览器的文档视图）
实时代码：仅当在“实时”视图中查看文档时可用。“实
1 DREAMWEAVER的工作界面
精
6、状态栏
标签选择器：显示环绕当前选定内容的标签的层次结构。 单击该层次结构中的任何标签以选择该标签及其全部内容。
选取工具：启用和禁用手形工具。
手形工具：对于尺寸大的文档，可以用该工具任意拖动文 档的显示区域。
缩放工具、设置缩放比率：可以为文档设置缩放比率。
经典布局：与设计器布局方式基本一致，不同之处在于该 布局方式将“插入”面板还原到老版本的“插入”栏形式。
编码人员（高级）布局：主要针对习惯于通过直接编写代 码来生成网页的用户以及经常从事CSS和JS脚本编写的人 员。
双重屏幕布局：可以同时查看页面设计效果和具体代码
（通过“代码检查器”窗口），还将常用的“CSS样式”、
该文档的“设计”视图。在执行某些操作（如保存文件或单击
此按钮）之后，在“代码”视图中所做的更改才会自动显示在
“设计”视图中。
第4
文档标题：为文档输入一个标题，显示在浏览器的标题栏中。
页
1 DREAMWEAVER的工作界面
精
3、文档编辑窗口
“文档”窗口显示当前文档。若要切换到某个文档，请击 它的选项卡。
在浏览器中预览/调试：在浏览器中预览或调试文档。从弹出菜 单中选择一个浏览器。
文件管理：显示“文件管理”弹出菜单。
W3C验证：用于验证当前文档或选定的标签。
检查浏览器兼容性：用于检查 CSS 是否对于各种浏览器均兼容。
可视化助理：可以使用各种可视化助理来设计页面。
刷新“设计”视图：在“代码”视图中对文档进行更改后刷新
间。
编码格式：显示当前文档的文本编码。
第9 页
1 DREAMWEAVER的工作界面
精
7、自定义工作区布局类型
默认情况下，采用设计器布局模式。切换布局模式，单 击标题栏右侧的布局模式切换下拉按钮，在弹出的下拉菜 单中选择；或选择“窗口”/“工作区布局”下的子菜单 命令。
应用程序开发人员（高级）布局：主要针对Web应用程 序开发人员而设计，偏重于代码编写。
精
Dreamweaver CS6 入门
第0 页
菜单栏
1 DREAMWEAVER的工作界面
文档工具栏
文档编辑窗口 属性面板
状态栏
浮动面板
第1 页
精
精
1 DREAMWEAVER的工作界面
1、菜单栏 包括“文件”、“编辑”、“查看”等10个菜单
2、文档工具栏 使用“ 文档” 窗口工具栏包含的按钮可以在文档
窗口大小：此工具在“代码”视图中不可用。使用此工具， 可以将“文档”窗口的大小调整到预定义或自定义的尺寸。 更改设计视图或实时视图中页面的视图大小时，仅更改视 图大小的尺寸，而不更改文档大小。
下载文件大小/下载时间：显示页面(包括所有相关文件，
如：图像和其它媒体文件)的预计文档大小和预计下载时