2.1 筑梦青春——创建与管理本地站点（课件）-高一《网页设计与制作（Dreamweaver CC》同步精品课堂（电工版2021）

网页设计与制作（Dreamweaver CC） 第三版 筑梦青春—创建和管理本地站点 Dreamweaver初级应用 筑梦青春—创建和管理本地站点 2.1 学习任务描述： 通过“筑梦青春——创建与管理本地站点”，认识DreamweaverCC 2018工作界面，掌握在Dreamweaver中创建、管理站点的基本流程，以及在Dreamweaver中新建和设计页面的基本过程。 （1）在D盘根目录中新建文件夹zmqc，将素材renwu3文件夹中的所有内容复制到zmqc 中。运行Dreamweaver,选择菜单“站点” ——“新建站点''命令，弹出“站点设置对象"对话框，如图2· 1所示。输入站点名称“筑梦青春"，单击“本地站点文件夹"文本框后的“浏览文件夹"按钮，在打开的对话框选择“D：\ zmqc”文件作为站点根目录，单击“保存”按钮。 筑梦青春—创建和管理本地站点 2.1 （2）选择菜单“文件"—— “新建"命令，弹出“新建文档"对话框，在左侧选择“新建文档"选项，“文档类型"选择"HTML"，单击“创建''按钮，即可创建一个空白网页。选择菜单：文件” “保存"命令，打开“另存为"对话框，输入文件名"index.html" 单击“保存”按钮，在“文件''面板即可出现该文件。 筑梦青春—创建和管理本地站点 2.1 （3）在“文件"面板中，选择站点“筑梦青春''，右击，在弹出的快捷菜单中选择“新建文件夹''命令。输入文件夹名称"images"，按Enter键保存图像文件。 在“文件"面板中，按住ctrl键，依次单击ch.jpg、lian.jpg和mx.jpg三个文件，按住鼠标左键，将其拖动到images文件夹上。 筑梦青春—创建和管理本地站点 2.1 （4）在“文件"面板中，双击打开文件jin．html， 按F12键打开浏览器预览，如图所示。 筑梦青春—创建和管理本地站点 2.1 （5）关闭浏览器窗口，将鼠标移到“文档"窗口上方的文件名标签上，单击“关闭" 按钮，关闭该文件。在“文件"面板中，选择jingji.html文件，按Delete键将其删除。 筑梦青春—创建和管理本地站点 2.1 （6）选择菜单“站点" ——“管理站点"命令，打开“管理站点"对话框，选择站点“筑梦青春"，单击 按钮，打开“导出站点"对话框，选择保存位置，默认的站点定义文件名是“筑梦青春．ste ”，单击“保存"按钮。 筑梦青春—创建和管理本地站点 2.1 Dreamweaver的工作界面 在桌面上双击Dreamweaver CC的快捷图标，或者选择“开始"——“程序"——“ Adobe Dreamweaver CC"命令，打开Dreamweaver的开始界面。 筑梦青春—创建和管理本地站点 2.1 筑梦青春—创建和管理本地站点 2.1 1 、工作区切换器 单击“工作区切换器"下拉按钮，如图2-11所示，在下拉菜单中，可以选择合适的工作区布局模式，不同工作区的界面会有所不同，系统默认的工作区是“标准"。 筑梦青春—创建和管理本地站点 2.1 标准：可以弥补编程能力较差带来的缺陷，直观可视，设计和修改简单、方便。 开发人员：主要供用代码制作网页的用户使用，如图2．12所示 在实际工作中，工作区布局方式是灵活多变的，可以使用“新建工作区"命令根据自己的需求创建工作区布局。 筑梦青春—创建和管理本地站点 2.1 筑梦青春—创建和管理本地站点 2.1 2、菜单栏 菜单栏提供九个主菜单项，利用它基本能够实现Dreamweaver CC的所有功能。菜单项按照功能的不同进行划分，用户使用方便。例如，“文件”菜单中包含对文档操作的命令：“插入”菜单中包含向网页中插入各种页面元素和创建超链接的命令；“站点”菜单中包含创建和管理站点的相关命令。 筑梦青春—创建和管理本地站点 2.1 3、“文档”工具栏和“文档”窗口 “文档”工具栏包含“文档”窗口视图模式的切换按钮，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令及选项。“文档”窗口用来显示当前打开的文档，在这里进行网页的编辑制作。 常用的视图方式是“设计”、“代码”、“拆分”和“实时视图” 筑梦青春—创建和管理本地站点 2.1 4、状态栏 状态栏位于“文档"窗口的底部，提供与正在编辑的文档有关的信息和工具。 筑梦青春—创建和管理本地站点 2.1 4、状态栏 筑梦青春—创建和管理本地站点 2.1 5、“属性”面板 “属性”面板用于查看和设置当前选定对象（如文本、图像等）的常用属性，面板的内容会因选择对象的不同而显示不同的属性。 筑梦青春—创建和管理本地站点 2.1 6、面板组 Dreamweaver中的面板通常被组织到面板组中，以选项卡的形式显示。对面板组和面板可以进行以下操作。 浮动的面板