Dreamweaver网页设计与应用（Dreamweaver CC 2019）（微课版）课件 1初识Dreamwear

职业教育“十三五”数字媒体应用人才培养系列教材Dreamweaver网页设计与应用60个专业案例362个案例素材及源文件92个微课视频DreamweaverCC2019微课版教师专项服务项目1初识Dreamweaver项目引入：本项目主要讲解Dreamweaver

的

基础知识和基本操作。通过对这些

内容的学习，学生可以认识和了解

Dreamweaver

工作区的构成，学会创

建网站框架以及管理站点的方法，

为以后的网站设计和制作打下坚实

的基础

。了解Dreamweaver工作区的构成◆掌握创建网站框架的方法和流程◆

掌握站点的管理方法项目目标掌握“在线留言网页”的关键制作步骤掌握“时尚美发网页”的关键制作步骤◆

掌握“有机蔬菜网页”的关键制作步骤技能目标

培养对Dreamweaver的兴趣

提升独立创建和管理站点的自信心素养目标开始屏幕不同风格的工作区◆

多文档的编辑界面◆

“插入”面板◆任务实践—在线留言网页任务1.1

工作区启动DreamweaverCC2019后，首先看到的是开始屏幕，在其中可以选择新建文档的类型或打开已有的文档等。选择“编辑>首选项”命令，弹出“首选项”对话框，取消勾选“显示开始屏幕”复选框。单击“应用”按钮完成设置，单击“关闭”按钮，

关闭对话框。再次启动Dreamweaver

CC

2019时将不再显示开始屏幕。Dw文排开EzaM描人0

TH(n监险D05如Dm共(H欢迎使用Dreamweaver。

很高兴见到您。快速开喻让我们来构建一个网站首选项文指选项：□

显示开始屏菌(5自动时重新打开文档R)四打开只读文件时警告用户(W)四自用相关文件(T)接索动态相关文件(D)

手动代码提示四插入对象时显示对话框(D)编辑选项：四允许双字节内联输入(B)四标题后切换到普通段落(A

)复制/用店□允许多个连续的空格0M)四用<ctrecg和

<m>

代茜<b>

和cis(U)四在<p>或

ch1>-ch5>

标签中旅置可编错区时发出警告□限对活动交档执行数消操作历史步骤最多次数0:50柳写字典(Gk点动

0H01.1.1

开始屏幕开始页面

“首选参数”对话框应用程序内更颁

文件比较文件类型/

器

新理功能指南新建文档标记色彩果布LietingWC验证程序

不可见元素代码改写

代码格式CS

样式Btract窗口(W)帮助(H)显示面板(P)

工具栏(B)排列顺序(A)F4>>工作区布局(W)

>开发人员资源(A)行为(E)

Shift+F4CC库(C)代码检查器(D)F10CSS设计器(C)

Shift+F11标准重置'标准'(R)新建工作区(N)

…管理工作区(M)

….保存当前(S)选择“窗口>工作区布局”命令，弹出子菜单，选择“标准”或“开发人员”命令可切换工作区风格，工作区会发生相应的改变。1.1.2

不同风格的工作区“工作布局”命令DreamweaverCC2019

提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单击文档窗口上方

的选项卡切换到相应的文档。通过多文档的编辑界面，用户可以同时

编辑多个文档。Dw

标准

·口

X

文件(F)编塌(E)查看(V)

插入(1)

工具(T)查找(D)站点(S)窗口(W)帮助(H)代码

拆分

设计Untitled-1×Untitled-2×Untitled-3×D.14,…品文件CCLibraries插入画

CSS设计器432x360B

DOM由

资源国，代码片断1.1.3多文档编辑界面多文档编辑界面章!“插入”面板包括“

HTML”“表单”“模板”“Bootstrap组

件”“

iQueryMobile”“iQuery

UI”“收藏夹”7个选项卡，不同功能的按钮分门别类地放在

不同的选项卡中。在Dreamweaver

CC

2019中，“插入”面板可以菜单和选

项卡两种方式显示。如果需要切换为菜单样式，可用鼠标右键单击“插

入”面板的选项卡区域，在弹出的快捷菜单中选择“显示为菜单”命令。Dw

文件(F)编揖(E)查看(V)插入(1)工具(T)查找(D)站点(S)窗□(W)

标准·

一

口X帮助(H)

章!HTML表单模板Bootstrap组件jQuery

Mobile

jQuery

UI收意夹回

日显示为菜单2

区

日◎

险

丰

回

云

画

四□

D

四

田

ul

ol

li

8

四

目[

□插入面板1.1.4

插入面板使用“打开”命令打开文件，使用“页面属性”对话框改变链接文字的状态，熟悉CSS功能的使用方法。任务实践——在线留言网页效果图站点管理器◆

定义新站点◆

创建文件夹◆

创建和保存网页◆

任务实践—时尚美发网页任务1.2

创建网站框架站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点，以及导入或导出站点。若要管理站点，必须打开“管理站点”

对话框。文

件桌

面本地文件↑√

桌面>

此电脑

)

广

网络>

桌面项目C1.2.1

站点管理器“文件”面板

“桌面”列表

“管理站点”面板本地磁盘(C:)

本地磁盘(E:)本地磁盘(F:)

本地磁盘(G:)管理站点…管理站点大

小管理站点大小文件在Dreamweaver

CC

2019

中，站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一组文件，远程站点是远程

Web

服

务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站

点，使其他人可以访问它们。站点设置对象未命名站点2×站点服

器CSS预处理器高级设置默认图像文件夹

日

链擅相对于：O文档◎站点根目录WebURL:ht://加果没有定义远程服务器：请输入webURL。加果已定义选程服务暑，Dreamweaver将使用服务器设置中指定的WebURL。□区分大小写的链接检查四启用缓存缓存中保存置站点中的文件和资源信息。这将加快资源面板和链接管

瞳功能的生度。

力

聪消

保存

本地信息遍盖设计备注文件祝图列ContributePHPBoatstap模板jQueryWe字体动通资源JSLint站点设置对象未命名站点2×Dreamweaver站点是网站中使用的所有文件和资源的集合。Dreamweaver站点通常包含两个部分：可在其中存储和处理文件的计尊机上的本地文件夹，以及可在其甲将相同文件发布到Web上的服务器上的远程文件夹。您可以在此处为Dramweaver站点选择本地文件夹和名称。站点名称：未命名站点2本地站点文件夹；C:UbersAdmritatoDocument味命名站点2\

□将G比存储库与此站点关联◎初始化为Gt存储库◎使用UR克强现有G存储库：用户名：密码：

试□保存凭据

助

取消

保存

1.2.2

定义新站点站服务器,

C

S

5

处

理

器高级设置站点建立好之后，需要先在站点管理器中规划站点文件夹。(1)在“文件”面板中选择站点。(2)通过以下两种方法新建文件夹。①单击“文件”面板右上方的按钮，在弹出的菜单中选择“文件>新建文件夹”命令。②在“文件”面板中，在站点上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令。(3)输入新文件夹的名称1.2.3创建文件夹在标准的DreamweaverCC2019环境下，创建和保存网页的操作步骤如下。(1)选择“文件>新建”命令，或按Ctrl+N组合键，弹出“新建文

档”对话框，选择“新建文档”选项，在“文档类型”列表中选择

“</>HTML”选项，在“框架”区域选择“无”选项卡。(2)设置完成后，单击“创建”按钮，弹出文档窗口，新文档在该窗口中打开。根据需要在文档窗口中选择不同的视图设计网页1.2.4创建和保存网页发型专场

资讯专栏风格美发沙龙使用“打开”命令打开文件，使用组合键复制并粘贴文件，使用“新建”命令新建文件，使用“保存”命令保存文件。任务实践—时尚美发网页效果图打开站点编辑站点◆

复制站点

删除站点◆

导出和导入站点◆任务实践—有机蔬菜网页任务1.3

管理站点当要修改某个网站的内容时，首先要打开站点。具体操作步骤如

下

。(1)

启

动DreamweaverCC

2019。(2)选择“窗口>文件”命令，或按

F8

键，弹出“文件”面板，在

“桌面”下拉列表中选择要打开的站点，打开站点。文件定义服务器本地文件↑站点-文稿(C:UsersAdministratorDe.

…

index.html文件活动已完成。1.3.1

打开站点本地磁盘(C:)

本地磁盘(E:)本地磁盘(F:)

本地磁盘(G:)

文稿管理站点

…选择站点

打开站点管理站点大小文件站点设置对象文稿

×站点服务器默认图像文件夹：

日

链接相对于：O文档

○站点根目录Web

URL:htp://

如果没有定义远程服务器，请输入WebURL。如果已定义远程服务器，Dreamweaver将使用服务器设置中指定的WebURL。□区分大小写的链接检查☑启用缓存绣存中保存着站点中的文件和资源信息。这将加快资源面板和链接管理功能的速度。帮助取消保存CSS预处理器Y

高级设置本地信息遮盖设计备注文件视图列ContributePHPBootstrap模板jQueryWeb字体动画资源JS

Lint

如果要修改站点的一些设置，就需要编辑站点。例如，修改站点的默认图像文件夹的路径。1.3.2

编辑站点复制站点可省去重复建立多个结构相同的站点的操作步骤，从而提高工作效率。在“管理站点”对话框中可以复制站点，具体操作步骤如

下。(1)在“管理站点”对话框中选择要复制的站点。(2)单击“复制当前选定的站点”按钮进行复制。(3)双击新复制的站点，弹出“站点设置对象”对话框，在“站点名称”文本框中可以更改新站点的名称。复制站点1.3.3删除站点只是删除DreamweaverCC2019同本地站点间的关系，而本地站点包含的文件和文件夹仍然保存在磁盘原来的位置。换句话说，

删除站点