Dreamweaver CC网页设计课件第1章上

要以模板为基础创建新的文档，只需选择“文件”→“新建”命令，打开“新建文档 ”对话框，单击左侧 “网站模板”选项卡，选择相应的站点，指定对应的模板，单击“ 创建”按钮即可。若前面已建立了模板，则对话框中显示已建立的模板。若前面没有建立 模板，则对话框中显示“<无项目>”.
1.20
第1章 认识 Dreamweaver CC
1.17
第1章 认识 Dreamweaver CC
1.4 文件的基本操作
1.4.1 创建新的空白文档
选择菜单命令“文件”→“新建”，打开“新建文档”对话框，在左侧选择“空白页 ”选项，在“页面类型”列表框中选择HTML选项，在“布局”列表框中选择“无”选项 ，单击“创建”按钮，即可完成一个新的空白文档的创建，默认的文件名为Untitled1.html。
2. 文档工具栏
“代码”视图：对于有编程现特殊的网页效果。
“设计”视图：以所见即所得的方式显示所有网页元素。 “拆分”视图：将文档窗口分为左右两部分，左侧是代码部分，显示代码。右侧是技术
部分，显示网页元素及其在页面中的布局。 “实时视图”：显示不可编辑、交互式的、基于浏览器的文档视图。
1.3 Dreamweaver CC站点的建立及规划
1.3.3 创建站点的文件和文件夹
【实例1-2】 修改站点信息 2）在“文件”面板中选中站点名称，鼠标在“文件”面板中的空白处按右键，在弹
出菜单中选择“新建文件夹”命令，此时文件夹名字处于可修改状态，输入文字“file”,按 回车键结束输入。
3）在“文件”面板中选中站点名称，鼠标在“文件”面板中的空白处按右键，在弹 出菜单中选择“新建文件”命令，输入文字“index2”，按回车键结束输入。
1.3
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的工作界面和基本操 作
1.2.1 Dreamweaver CC的启动
单击“开始”按钮，选择“程序”中的“Adobe Dreamweaver CC”命令，就可以启 动Dreamweaver CC应用程序。
启动Dreamweaver CC后首先看到的画面是开始页面，供用户选择新建文件的类型， 或打开已有的文档等，在此选择“新建”下的“HTML”选项，便可进入工作界面。
1.13
第1章 认识 Dreamweaver CC
1.3 Dreamweaver CC站点的建立及规划
1.3.2 站点的管理
单击菜单命令“站点”→“管理站点”，在打开的“管理站点”对话框中可对站点进 行管理操作。
1. 站点的切换 在“文件”面板左上侧的下拉列表中选择已经创建的站点，就可以切换到对这个站点 进行操作的状态。还可以单击菜单命令“站点”→“管理站点”，在打开“管理站点”对 话框中选择需要的站点，单击“完成”按钮。这样就可以在文件面板中显示新切换的站点
1.3.3 创建站点的文件和文件夹
【实例1-2】 修改站点信息 1）单击菜单命令“站点”→“管理站点”，打开“管理站点”对话框，选择站点“
藏獒传说”，单击“编辑当前选定的站点”按钮 ，在弹出的“站点设置对象”对话框中 将网站名称改为“藏獒大世界”，单击“保存”和“完成”按钮结束站点编辑。
1.16
第1章 认识 Dreamweaver CC
Dreamweaver CC对工作界面进行了全面精简，减少了对话框的数量和很多不必要 的操作按钮，新增加了许多HTML5元素，功能更强大。它不仅可以制作出任何结构复 杂的静态网页，具有完美的操作界面、强大的模板功能、创建动态网页、强大的代码编 辑功能，在Dreamweaver CC中，CSS+Div功能更加完善，站点管理更为简捷、高效。
1.14
第1章 认识 Dreamweaver CC
1.3 Dreamweaver CC站点的建立及规划
1.3.2 站点的管理
2. “管理站点”对话框 在管理站点对话框中可以对站点进行编辑管理，如新建、编辑、复制、删除、导入和 导出等。
1.15
第1章 认识 Dreamweaver CC
1.3 Dreamweaver CC站点的建立及规划
1.2
第1章 认识 Dreamweaver CC
1.1 Dreamweaver CC概述
Dreamweaver CC是美国Adobe公司推出的集网页制作和站点管理于一身的网页制 作软件，也是第一个专门为网页设计师量身定制的可视化网页制作软件，利用它可以制 作出跨越平台限制和浏览器限制的、充满丰富动感的网页。以前，网页设计者在制作网 页时必须熟练掌握HTML语言和JavaScript，但是现在设计者使用Dreamweaver CC就 可以轻松制作出精美的网页，而且在制作过程中可以同步预览制作效果，使得网页设计 过程简单明了。
第1章 认识 Dreamweaver CC
学习目标
❖掌握Dreamweaver CC工作界面的基本操作 ❖能利用站点定义向导创建站点和编辑管理站点 ❖初步体验制作一个完整网站的方法
1.1
第1章 认识 Dreamweaver CC
本章内容
1.1 Dreamweaver CC简述 1.2 Dreamweaver CC的工作界面和基本操作 1.3 Dreamweaver CC站点的建立及规划 1.4 文件的基本操作 1.5 理解空白文档的初始代码 1.6 制作第一个网站“藏獒传说”
文档标题是在用浏览器打开文档时显示在浏览器窗口标题栏上的名称，文档标题在 文档的<title>和</title>标记中。它和文档的文件名称是不同的概念，文件名称则是文档 存储在磁盘上的文件名。
1.7
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的工作界面和基本操 作
1.3.1 利用站点定义向导创建站点
【实例1-1】 “藏獒传说”网站的建立 单击菜单命令“站点” →“新建站点”，可打开“站点设置对象”对话框，在站点
名称右侧的文本框中输入网站的名称，这里输入“藏獒传说”，单击本地站点文件夹右侧 的按钮，指定“藏獒传说”站点的文件夹。
1.12
第1章 认识 Dreamweaver CC
件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“ 窗口”、“帮助”10个菜单。 2. 文档工具栏
文档工具栏中包含“代码”、“拆分”、“设计”、“实时视图”等视图显示方式， 相互之间可以快速切换，并且可以设置文档的标题。
1.6
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的工作界面和基本操 作
6. 面板组 除了属性面板外，针对不同的控制对象，还有其他几个面板组，例如“插入”面板、
“文件”面板以及“CSS设计器”面板等。按F4可以打开或隐藏所有面板。 7. 开发中心
单击该按钮，可以使用系统默认浏览器自动打开Dreamweaver开发中心页面。 8. 同步设置
该按钮用于实现Dreamweaver CC与Creative Cloud同步，单击该按钮可在弹出的对话 框中进行同步设置。
1.18
第1章 认识 Dreamweaver CC
1.4 文件的基本操作
1.4.2 打开现有文档
选择菜单命令“文件”→“打开”，在“打开”对话框中选择要打开的文件后，单击 “打开”按钮即可进入该文档的编辑模式。
1.19
第1章 认识 Dreamweaver CC
1.4 文件的基本操作
1.4.3 基于模板创建文档
1.4 文件的基本操作
1.4.4 存储和关闭文档
当第一次保存文档时，选择菜单命令“文件”→“保存”或“另存为”，在“另存为 ”对话框中选择要保存的文件路径、文件名和文件格式，单击“保存”按钮即可保存文档 。已经保存过的文档再次保存时，只需单击“文件”→“保存”命令即可，不再出现对话 框。
1.21
1.4
工作区设置对话
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的工作界面和基本操 作
1.2.2 Dreamweaver CC的工作界面
1.5
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的工作界面和基本操 作
1. 菜单栏 菜单栏中包含了Dreamweaver CC操作的所有命令。这些命令按照操作类别分为“文
1.2 Dreamweaver CC的工作界面和基本操 作
5. 属性面板 在Dreamweaver CC中属性面板是经常使用的工具之一。当选中某一对象时，属性
面板会自动地显示相关信息和参数，可以对其进行修改和设定
1.9
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的工作界面和基本操 作
1.3 Dreamweaver CC站点的建立及规划
1.3.1 利用站点定义向导创建站点
【实例1-1】 “藏獒传说”网站的建立 至此“藏獒传说”网站的站点已建立，在“文件”面板中会显示站点中所有的文件
和文件夹。我们可以通过“文件”面板，就像使用资源管理器一样来管理网站的文件，如 拷贝、粘贴、删除、移动和打开文件等。
1.10
第1章 认识 Dreamweaver CC
1.2 Dreamweaver CC的工作界面和基本操 作
9. 设计器 单击该按钮，可以在弹出的菜单中选择适合自己的面板布局方式，以更好地适应不同
的工作类型。单击该按钮弹出的下拉列表。
1.11
第1章 认识 Dreamweaver CC
1.3 Dreamweaver CC站点的建立及规划
3. 文档窗口 文档窗口是设计网页的主窗口，在该窗口中，用户可以对各种网页元素进行编辑和
排版。在文档窗口中右击，在弹出的快捷菜单中可以选择相应的命令进行操作。 4. 状态栏