1.7 Dreamweaver CC工作环境（课件）-《网页设计与制作（DreamweaverCC)》（电子工业出版社）同步精品课堂

1.7 Dreamweaver CC工作环境 网页设计与制作（Dreamweaver CC) 同步精品课堂 电子工业出版社 目录 02 01 DreamweaverCC的启动 DreamweaverCC的工作区 03 调整工作区 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学目标 知识目标 1. 理解Dreamweaver CC的基本功能。 2. 熟悉Dreamweaver CC的启动过程。 3. 掌握Dreamweaver CC的工作区布局及调整方法 1.能够启动并熟练操作Dreamweaver CC。 2.能够根据需求调整工作区。 3.初步具备使用Dreamweaver CC进行网页设计的能力。 能力目标 增强自信心和成就感，培养耐心和细致的工作态度。 情感目标 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 教学重难点 调整DreamweaverCC的工作区。 1.DreamweaverCC的启动。 2. DreamweaverCC的工作区。 难点 重点 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 导入新课 掌握DreamweaverCC的启动 熟悉DreamweaverCC的工作区 调整工作区。 Dreamweaver CC等你来驾驭，打造独一无二的网页作品！ 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 启动Adobe Dreamweaver CC步骤？ 可单击任务栏中的“开始”按钮， 选择“所有程序”中的 Adobe Dreamweaver CC图标 1.7.1.DreamweaverCC的启动 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.1.DreamweaverCC的启动 Adobe DreamweaverCC应用程序窗口 单击Dreamweaver CC即可被启动 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.1.DreamweaverCC的启动 Adobe DreamweaverCC应用程序窗口 单击Dreamweaver CC即可被启动 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.2 Dreamweaver CC的工作区 Dreamweaver CC的欢迎界面 启动Dreamweaver CC后，会显示欢迎界面——用于打开最近使用过的文档或创建新文档。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.2 Dreamweaver CC的工作区 文档编辑区 菜单栏 面板组 属性面板 工作区分为四个区域，它们是菜单栏，文档编辑区，“属性”面板和面板组 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.2 Dreamweaver CC的工作区 菜单栏位于 Dreamweaver CC应用程序最上面，包含一个工作区切换器、几个菜单以及其 他应用程序控件 菜单栏几乎集中了DreamweaverCC 的全部操作选项，利用这些选项，可编辑网页、管理 站点以及设置操作界面等 （1）菜单栏 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.2 Dreamweaver CC的工作区 文档编辑区是网页文档的主要编辑区域，可以进行网页的编辑和开发，其中包含文档选项卡、文档工具栏、编辑区和状态栏 （2）文档编辑区 文档选项卡 编辑区 状态栏 工具栏 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.2 Dreamweaver CC的工作区 默认情况下，“属性”面板位于工作区的底部边缘，但是可以将其取消停靠并使其成为工作 区中的浮动面板。 “属性”面板，可以检查和编辑当前选定页面元素(如文本和插入的对象)的最常用 属性。 （3）“属性”面板 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.2 Dreamweaver CC的工作区 （3）面板与面板组 Dreamweaver CC默认的面板组有插入面板、文件面板、CSS 设计器等。 1. 插入面板包含用于创建和插入对象(如表格、图像和超链接)的按钮。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.2 Dreamweaver CC的工作区 （3）面板与面板组 2. 使用文件面板可以方便地添加、删除和重命名文件及文件夹，以便根据需要更改组织结构， 是网站管理中最重要、最常用的面板。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.2 Dreamweaver CC的工作区 （3）面板与面板组 3. “CSS 设计器”面板(选择“窗口”| “CSS 设计器”选项) 属于CSS “属性”面板，能“可视化”地创建CSS 样式和规则， 并设置属性和媒体查询 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1. 源窗格：列出与文档相关的所有CSS 样式表。使用此窗格， 可以创建CSS并将其附加到文档中，也可以定义文档中的样式。 2. 媒体窗格：在“源”窗格中列出了所选源中的全部媒 体查询。 3. 选择器窗格：在“选择器”窗格中列出了所选源中的全部选择器。 4. 属性窗格：显示可为指定的选择器设置的属性。 1.7 Dreamweaver CC工作环境 ”CSS设计器”面板由以下四部分组成。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 考一考 CSS 设计器是上下文相关的。这意味着? 对于任何给定的上下文或选定的页面元素，都可以查看关联的选择器和属性。 Dreamweaver CC的工作区布局是否可以自定义？ 是的，Dreamweaver CC的工作区布局高度可自定义。用户可以根据自己的工作习惯和需求，调整面板的位置、大小和显示状态，以优化工作流程。 Dreamweaver CC提供了哪些预设的工作区布局？它们各自的特点是什么？ 设计师工作区：强调图像编辑和设计元素，通常包含较大的设计区域，以及方便进行图像处理和页面布局的工具面板。 代码编写工作区：侧重于代码编辑和调试，工作区布局中代码编辑器占据较大空间，同时提供代码提示、语法高亮等功能。 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 做一做 启动Dreamweaver CC工具，熟悉DreamweaverCC的工作区，根据书本内容，在工具中找到对应区域 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.3 调整工作区 为了方便工作，经常需要调整工作区使它适应工作的需要，以下是一些常用的调整技巧。 (1)显示、隐藏及关闭面板 在“窗口”菜单中，选中或取消相应面板，从而显示或隐藏该面板 单击面板的标题或标签，可以展开该面板，而双击面板的标题或标签，可以隐藏该面。 单击面板标题栏右侧的按钮，从弹出的菜单中选择“关闭面板组”选项，可以关闭相 应面板组 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.3 调整工作区 (2)停放/取消停放面板 停放是一组放在一起显示的面板或面板组，通常在垂直方向显示。可将面板移到停放中或 从停放中移走停放或取消停放面板。 要停放面板，可将其标签拖动到停放中(顶部、底部或两个其他面板之间)。 要停放面板组，可将其标题栏(标签上面的实心空白栏)拖动到停放中。 要删除面板或面板组，可将其标签或标题栏从停放中拖走。可以将其拖动到另一个停放中， 或者使其变为自由浮动. 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.3 调整工作区 (3) 移动面板 在移动面板时，会看到蓝色突出显示的放置区域，用户可以在该区域中移动面板。例如， 通过将一个面板拖动到另十个面板上面或下南的窄蓝鱼放置区域中，可以在停放中向上或向下 移动该面板。如果拖动到的区域不是放置区域，则该面板将在工作区中自由浮动。 要将面板、面板组或面板堆叠最小化或最大化，可双击选项卡，也可以双击选项卡区域(选 项卡旁边的空白区)。 (4) 调整面板大小 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 1.7 Dreamweaver CC工作环境 1.7.3 调整工作区 (5)标尺、网格与辅助线 在“查看”菜单中，选择“标尺”|“显示”选项，可在文档编辑窗口中显示标尺，如图1-32 所示；选择“网格设置”|“显示网格”选项可以在文档编辑区中显示网格，如图1-33 所示， 从而方便设计时的定位。 辅助线是从标尺拖动到文档上的线条，它们有助于更加准确地放置和对齐对象。还可以使 用辅助线来测量页面元素的大小，或者模拟Web浏览器的重叠部分(可见区域), 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 练一练 Dreamweaver CC的工作环境包含多个面板和工具栏，其中________用于直接修改选中元素的属性； ____则提供了丰富的网页元素和对象供用户选择插入。 为了提升开发效率，Dreamweaver CC允许用户自定义_________，以满足个人或团队的开发需求。 属性面板 插入面板 工作区 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 课堂小结 1. 显示、隐藏及关闭面板 2. 停放/取消停放面板 3. 移动面板 4. 调整面板大小 5. 标尺、网格与辅助线 DreamweaverCC的工作区 DreamweaverCC的启动 1．单击任务栏中的“开始”按钮， 2. 选择“所有程序”中的 AdobeDreamweaver CC图标 3. 启动应用程序 Dreamweaver CC 工作环境 调整工作区 1. 菜单栏 2. 文档编辑区 3. “属性”面板 4. 面板组 （1）文档选项卡 （2）文档工具栏 （3）编辑区和状态栏 （1）插入面板 （2）文件面板 （3）CSS 设计器 掌握国家标准《机械制图》中有关图幅、比例、字体图线等基本规定。 谢谢 $$