Dreamweaver软件介绍教学文案
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
不同浏览器的兼容视图不一样，不同 电脑的预览情况也不一样。IE浏览器标 准可以避免此类问题。
由此根据网页的实际预览情况进行对 网页美化加工，达到预期效果。
No.5 软件的基本使用
No.2 界面介绍
8
3.DW软件功能介绍
1）自适应网格
自适应网格版面，来创建跨平台和跨浏览 器的兼容网页设计。直观地创建复杂网页 设计和页面版面，无需忙于编写代码。
2）改善FTP性能 利用重新改良的多线程FTP传输工具节 省上传大型文件的时间。更快速高效地 上传网站文件，缩短制作时间。
3）更新的实时视图 使用更新的“实时视图”功能在发 布前测试页面。“实时视图”现已 使用最新版的WebKit转换引擎，能 够提供绝佳的HTML5支持。
Dreamweaver软件介绍 LOGO
网页 设计
目录页
CONTENTS PAGE
01 什么是DW 02 软件工作界面介绍 03 软件功能介绍 04 软件安装系统要求 05 软件的基本使用
1. 什么是Dreamweaver？
1）大家都很困惑，DW是什么
Adobe Dreamweaver，简称“DW”，中文名称 “梦想编织者”，是一款集网页制作和 管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视 觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动 感的网页。
站点文件的命名不建议用中文，中文名 字在使用ftp软件上传在网上容易出错。 站点文件夹不建议存在桌面。
No.5 软件的基本使用
12
5.DW的基本使用
3）网页内容的编写
点击代码栏，在Body与Body之间为网页内 容，Title与Title之间为网页标题.设计界面为 网页预览界面。
<div><h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3></div>
4）每一个版本都有对应功能的更新与优化
No.3 功能介绍
9
4.DW软件安装系统要求
软件安装对电脑系统及硬件都有一定要求
以DreamweaverCC为例 Windows
①Intel或AMD处理器 ②Windows7、Windows8、 Windows10 ③512MB内存 ④1GB可用硬盘空间用于 安装；安装过程中需要额外的可用空间（无法安装在可 移动闪存设备上）⑤1024x768屏幕，16位显卡 ⑥DVD-ROM驱动器 MacOS
浮动窗口上为工具栏菜单，用户可以根 据需求进行工具栏的拖拽，方便用户使 用。
No.2 文化知识概述
7
2. DW软件界面介绍
4）参数设置界面介绍
工作环境参数设置 利用“首选参数”对话框可以修改
Dreamweaver的系统参数。选择菜单栏中 的“编辑”>“首选参数”菜单或按快捷 键【Ctrl+U】可打开该对话框，如图所示 可对多个界面参数进行设置，css样式也可 以直接在界面设置相应内容。设置完后直 接单击确定即可。
10
5.DW的基本使用
1）新建网页文件
新建文件点击菜单栏的文件-->新 建，会出来一个新建文件窗口，选择 新建文件的类型，系统默认是HTML 文档，最后点击创建，就会出来一个 HTML文档
根据用户需求创建相应类型的网页 文件，还可以对新建的网页文件进行 格式限定，如左右侧栏目的改改变， 标题固定。
No.2 界面介绍
图二 图一
6
2. DW软件界面介绍
3）编辑窗口界面介绍
浮动编辑栏目分为代码栏、设计栏，实 时代码栏可以预览代码效果。点击拆分 可以将视口分为代码预览和网页预览。
网页预览快捷键为F12，网页预览是默 认的windows浏览器。各个版本的浏览 器网页预览情况不一样。建议软件外选 择IE浏览器预览。
No.5 软件的基本使用
11
5.DW基本使用
2）站点文件的保存
保存、重命名创建一个html标准格式的 文件页面，默认的文件名是 untitled1.html，点击文件-->另存为， 会弹出一个保存位置的窗口，文件名改 为test.html，保存类型为All Documents（*.html;*.html;*.shtm;*） 类型。点击保存按钮即可
①Intel 多核处理器 ②Mac OS X 10.5.8 或10.6 版 ③512MB 内存 ④1.8GB 可用硬盘空间用于安装；安装 过程中需要额外的可用空间（无法安装在使用区分大小 写的文件系统的卷或可移动闪存设备上） ⑤1280x800 屏幕，16 位显卡DVD-ROM 驱动器
பைடு நூலகம்
No.4 安装要求
No.1 什么是Dreamweaver
4
2. DW软件界面介绍
1）启动版面
安装后，每一次打开打开软件，它会自 动跳出此版面。在该版面可以打开软件 最近使用的文件类目或者新建不同类型 的网页编辑窗口，也可以打开软件预设 网页编辑模板。
No.2 界面介绍
5
2. DW软件界面介绍
2）属性面板介绍 属性面板会随着编辑的内容而变化，属性面板包含编 辑的文字的所有内容，包括字体，颜色，大小等。 单击向下拉菜单属性面板，。展开后，用户只要选择 要编辑的对象，就可以对其属性进行编辑。 用户对所有由启动面板弹出来的浮动面板在被打开后 可以重新组合 右侧图二为页面属性单击后的界面，可编辑5个类目
左侧是“DW”软件图标
您记住这款软件了吗？
Adobe Dreamweaver
No.1 什么是Dreamweaver
3
1. 什么是Dreamweaver？
2）DW有哪些版本？
右侧为DW软件的历史版本，此软件分 为 Macromedia 时代 、Adobe时 代 以 及现在的CC 版本时代。每一个时代的 软件都有其特色，每一个新版本的发布 都比上一个版本有了更大的进步。
输出的内容就为：This is a heading
</h1></h2></h3>均为控制字体大小的双标 记 具体文字大小可在页面属性及CSS格式中调 整。
No.5 软件的基本使用
13
5.DW的基本使用
4）网页内容的预览
按F12键进行网站内容预览，也可以点 击预览按钮进行预览浏览器的选择。在 预览时尽量选择IE浏览器进行预览。
由此根据网页的实际预览情况进行对 网页美化加工，达到预期效果。
No.5 软件的基本使用
No.2 界面介绍
8
3.DW软件功能介绍
1）自适应网格
自适应网格版面，来创建跨平台和跨浏览 器的兼容网页设计。直观地创建复杂网页 设计和页面版面，无需忙于编写代码。
2）改善FTP性能 利用重新改良的多线程FTP传输工具节 省上传大型文件的时间。更快速高效地 上传网站文件，缩短制作时间。
3）更新的实时视图 使用更新的“实时视图”功能在发 布前测试页面。“实时视图”现已 使用最新版的WebKit转换引擎，能 够提供绝佳的HTML5支持。
Dreamweaver软件介绍 LOGO
网页 设计
目录页
CONTENTS PAGE
01 什么是DW 02 软件工作界面介绍 03 软件功能介绍 04 软件安装系统要求 05 软件的基本使用
1. 什么是Dreamweaver？
1）大家都很困惑，DW是什么
Adobe Dreamweaver，简称“DW”，中文名称 “梦想编织者”，是一款集网页制作和 管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视 觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动 感的网页。
站点文件的命名不建议用中文，中文名 字在使用ftp软件上传在网上容易出错。 站点文件夹不建议存在桌面。
No.5 软件的基本使用
12
5.DW的基本使用
3）网页内容的编写
点击代码栏，在Body与Body之间为网页内 容，Title与Title之间为网页标题.设计界面为 网页预览界面。
<div><h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3></div>
4）每一个版本都有对应功能的更新与优化
No.3 功能介绍
9
4.DW软件安装系统要求
软件安装对电脑系统及硬件都有一定要求
以DreamweaverCC为例 Windows
①Intel或AMD处理器 ②Windows7、Windows8、 Windows10 ③512MB内存 ④1GB可用硬盘空间用于 安装；安装过程中需要额外的可用空间（无法安装在可 移动闪存设备上）⑤1024x768屏幕，16位显卡 ⑥DVD-ROM驱动器 MacOS
浮动窗口上为工具栏菜单，用户可以根 据需求进行工具栏的拖拽，方便用户使 用。
No.2 文化知识概述
7
2. DW软件界面介绍
4）参数设置界面介绍
工作环境参数设置 利用“首选参数”对话框可以修改
Dreamweaver的系统参数。选择菜单栏中 的“编辑”>“首选参数”菜单或按快捷 键【Ctrl+U】可打开该对话框，如图所示 可对多个界面参数进行设置，css样式也可 以直接在界面设置相应内容。设置完后直 接单击确定即可。
10
5.DW的基本使用
1）新建网页文件
新建文件点击菜单栏的文件-->新 建，会出来一个新建文件窗口，选择 新建文件的类型，系统默认是HTML 文档，最后点击创建，就会出来一个 HTML文档
根据用户需求创建相应类型的网页 文件，还可以对新建的网页文件进行 格式限定，如左右侧栏目的改改变， 标题固定。
No.2 界面介绍
图二 图一
6
2. DW软件界面介绍
3）编辑窗口界面介绍
浮动编辑栏目分为代码栏、设计栏，实 时代码栏可以预览代码效果。点击拆分 可以将视口分为代码预览和网页预览。
网页预览快捷键为F12，网页预览是默 认的windows浏览器。各个版本的浏览 器网页预览情况不一样。建议软件外选 择IE浏览器预览。
No.5 软件的基本使用
11
5.DW基本使用
2）站点文件的保存
保存、重命名创建一个html标准格式的 文件页面，默认的文件名是 untitled1.html，点击文件-->另存为， 会弹出一个保存位置的窗口，文件名改 为test.html，保存类型为All Documents（*.html;*.html;*.shtm;*） 类型。点击保存按钮即可
①Intel 多核处理器 ②Mac OS X 10.5.8 或10.6 版 ③512MB 内存 ④1.8GB 可用硬盘空间用于安装；安装 过程中需要额外的可用空间（无法安装在使用区分大小 写的文件系统的卷或可移动闪存设备上） ⑤1280x800 屏幕，16 位显卡DVD-ROM 驱动器
பைடு நூலகம்
No.4 安装要求
No.1 什么是Dreamweaver
4
2. DW软件界面介绍
1）启动版面
安装后，每一次打开打开软件，它会自 动跳出此版面。在该版面可以打开软件 最近使用的文件类目或者新建不同类型 的网页编辑窗口，也可以打开软件预设 网页编辑模板。
No.2 界面介绍
5
2. DW软件界面介绍
2）属性面板介绍 属性面板会随着编辑的内容而变化，属性面板包含编 辑的文字的所有内容，包括字体，颜色，大小等。 单击向下拉菜单属性面板，。展开后，用户只要选择 要编辑的对象，就可以对其属性进行编辑。 用户对所有由启动面板弹出来的浮动面板在被打开后 可以重新组合 右侧图二为页面属性单击后的界面，可编辑5个类目
左侧是“DW”软件图标
您记住这款软件了吗？
Adobe Dreamweaver
No.1 什么是Dreamweaver
3
1. 什么是Dreamweaver？
2）DW有哪些版本？
右侧为DW软件的历史版本，此软件分 为 Macromedia 时代 、Adobe时 代 以 及现在的CC 版本时代。每一个时代的 软件都有其特色，每一个新版本的发布 都比上一个版本有了更大的进步。
输出的内容就为：This is a heading
</h1></h2></h3>均为控制字体大小的双标 记 具体文字大小可在页面属性及CSS格式中调 整。
No.5 软件的基本使用
13
5.DW的基本使用
4）网页内容的预览
按F12键进行网站内容预览，也可以点 击预览按钮进行预览浏览器的选择。在 预览时尽量选择IE浏览器进行预览。