第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 制作第一个网站“藏獒传说” 本章内容 1.1 第1章 认识 Dreamweaver CC Dreamweaver CC是美国Adobe公司推出的集网页制作和站点管理于一身的网页制作软件，也是第一个专门为网页设计师量身定制的可视化网页制作软件，利用它可以制作出跨越平台限制和浏览器限制的、充满丰富动感的网页。以前，网页设计者在制作网页时必须熟练掌握HTML语言和JavaScript，但是现在设计者使用Dreamweaver CC就可以轻松制作出精美的网页，而且在制作过程中可以同步预览制作效果，使得网页设计过程简单明了。 Dreamweaver CC对工作界面进行了全面精简，减少了对话框的数量和很多不必要的操作按钮，新增加了许多HTML5元素，功能更强大。它不仅可以制作出任何结构复杂的静态网页，具有完美的操作界面、强大的模板功能、创建动态网页、强大的代码编辑功能，在Dreamweaver CC中，CSS+Div功能更加完善，站点管理更为简捷、高效。 1.1 Dreamweaver CC概述 1.1 第1章 认识 Dreamweaver CC 1.2.1 Dreamweaver CC的启动 1.2 Dreamweaver CC的工作界面和基本操作 单击“开始”按钮，选择“程序”中的“Adobe Dreamweaver CC”命令，就可以启动Dreamweaver CC应用程序。 启动Dreamweaver CC后首先看到的画面是开始页面，供用户选择新建文件的类型，或打开已有的文档等，在此选择“新建”下的“HTML”选项，便可进入工作界面。 工作区设置对话 1.1 第1章 认识 Dreamweaver CC 1.2.2 Dreamweaver CC的工作界面 1.2 Dreamweaver CC的工作界面和基本操作 1.1 第1章 认识 Dreamweaver CC 1.2 Dreamweaver CC的工作界面和基本操作 1. 菜单栏 菜单栏中包含了Dreamweaver CC操作的所有命令。这些命令按照操作类别分为“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”、“帮助”10个菜单。 2. 文档工具栏 文档工具栏中包含“代码”、“拆分”、“设计”、“实时视图”等视图显示方式，相互之间可以快速切换，并且可以设置文档的标题。 1.1 第1章 认识 Dreamweaver CC 1.2 Dreamweaver CC的工作界面和基本操作 2. 文档工具栏 “代码”视图：对于有编程经验的网页设计用户而言，可在“代码”视图中查看、修改 和编写网页代码，以实现特殊的网页效果。 “设计”视图：以所见即所得的方式显示所有网页元素。 “拆分”视图：将文档窗口分为左右两部分，左侧是代码部分，显示代码。右侧是技术 部分，显示网页元素及其在页面中的布局。 “实时视图”：显示不可编辑、交互式的、基于浏览器的文档视图。 文档标题是在用浏览器打开文档时显示在浏览器窗口标题栏上的名称，文档标题在文档的<title>和</title>标记中。它和文档的文件名称是不同的概念，文件名称则是文档存储在磁盘上的文件名。 1.1 第1章 认识 Dreamweaver CC 1.2 Dreamweaver CC的工作界面和基本操作 3. 文档窗口 文档窗口是设计网页的主窗口，在该窗口中，用户可以对各种网页元素进行编辑和排版。在文档窗口中右击，在弹出的快捷菜单中可以选择相应的命令进行操作。 4. 状态栏 状态栏位于文档窗口的底部，用于提供与用户当前编辑的文档有关的信息，如标签选择器、窗口大小弹出菜单等。 1.1 第1章 认识 Dreamweaver CC 1.2 Dreamweaver CC的工作界面和基本操作 5. 属性面板 在Dreamweaver CC中属性面板是经常使用的