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

项目引入：本项目主要讲解Dreamweaver的基础知识和基本操作。通过对这些内容的学习，学生可以认识和了解Dreamweaver工作区的构成，学会创建网站框架以及管理站点的方法，为以后的网站设计和制作打下坚实的基础。项目1初识Dreamweaver了解Dreamweaver工作区的构成掌握创建网站框架的方法和流程掌握站点的管理方法项目目标掌握“在线留言网页”的关键制作步骤掌握“时尚美发网页”的关键制作步骤掌握“有机蔬菜网页”的关键制作步骤技能目标培养对Dreamweaver的兴趣提升独立创建和管理站点的自信心素养目标任务1.1工作区开始屏幕不同风格的工作区多文档的编辑界面“插入”面板任务实践—在线留言网页1.1.1开始屏幕启动DreamweaverCC2019后，首先看到的是开始屏幕，在其中可以选择新建文档的类型或打开已有的文档等。选择“编辑>首选项”命令，弹出“首选项”对话框，取消勾选“显示开始屏幕”复选框。单击“应用”按钮完成设置，单击“关闭”按钮，关闭对话框。再次启动DreamweaverCC2019时将不再显示开始屏幕。开始页面“首选参数”对话框1.1.2不同风格的工作区选择“窗口>工作区布局”命令，弹出子菜单，选择“标准”或“开发人员”命令可切换工作区风格，工作区会发生相应的改变。“工作布局”命令1.1.3多文档编辑界面DreamweaverCC2019提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单击文档窗口上方的选项卡切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。多文档编辑界面1.1.4插入面板“插入”面板包括“HTML”“表单”“模板”“Bootstrap组件”“jQueryMobile”“jQueryUI”“收藏夹”7个选项卡，不同功能的按钮分门别类地放在不同的选项卡中。在DreamweaverCC2019中，“插入”面板可以菜单和选项卡两种方式显示。如果需要切换为菜单样式，可用鼠标右键单击“插入”面板的选项卡区域，在弹出的快捷菜单中选择“显示为菜单”命令。插入面板任务实践——在线留言网页使用“打开”命令打开文件，使用“页面属性”对话框改变链接文字的状态，熟悉CSS功能的使用方法。效果图任务1.2创建网站框架站点管理器定义新站点创建文件夹创建和保存网页任务实践—时尚美发网页1.2.1站点管理器站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点，以及导入或导出站点。若要管理站点，必须打开“管理站点”对话框。“文件”面板“桌面”列表“管理站点”面板1.2.2定义新站点在DreamweaverCC2019中，站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一组文件，远程站点是远程Web服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点，使其他人可以访问它们。1.2.3创建文件夹站点建立好之后，需要先在站点管理器中规划站点文件夹。（1）在“文件”面板中选择站点。（2）通过以下两种方法新建文件夹。①单击“文件”面板右上方的按钮，在弹出的菜单中选择“文件>新建文件夹”命令。②在“文件”面板中，在站点上单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹”命令。（3）输入新文件夹的名称1.2.4创建和保存网页在标准的DreamweaverCC2019环境下，创建和保存网页的操作步骤如下。（1）选择“文件>新建”命令，或按Ctrl+N组合键，弹出“新建文档”对话框，选择“新建文档”选项，在“文档类型”列表中选择“</>HTML”选项，在“框架”区域选择“无”选项卡。（2）设置完成后，单击“创建”按钮，弹出文档窗口，新文档在该窗口中打开。根据需要在文档窗口中选择不同的视图设计网页任务实践—时尚美发网页使用“打开”命令打开文件，使用组合键复制并粘贴文件，使用“新建”命令新建文件，使用“保存”命令保存文件。效果图打开站点编辑站点复制站点删除站点导出和导入站点任务实践—有机蔬菜网页任务1.3管理站点1.3.1打开站点当要修改某个网站的内容时，首先要打开站点。具体操作步骤如下。（1）启动DreamweaverCC2019。（2）选择“窗口>文件”命令，或按F8键，弹出“文件”面板，在“桌面”下拉列表中选择要打开的站点，打开站点。打开站点选择站点1.3.2编辑站点如果要修改站点的一些设置，就需要编辑站点。例如，修改站点的默认图像文件夹的路径。1.3.3复制站点复制站点可省去重复建立多个结构相同的站点的操作步骤，从而提高工作效率。在“管理站点”对话框中可以复制站点，具体操作步骤如下。（1）在“管理站点”对话框中选择要复制的站点。（2）单击“复制当前选定的站点”按钮进行复制。（3）双击新复制的站点，弹出“站点设置对象”对话框，在“站点名称”文本框中可以更改新站点的名称。1.3.4删除站点删除站点只是删除DreamweaverCC2019同本地站点间的关系，而本地站点包含的文件和文件夹仍然保存在磁盘原来的位置。换句话说，删除站点后，虽然站点文件夹保存在计算机中，但DreamweaverCC2019中已经不存在此站点。例如，按下列步骤删除站点后，“管理站点”对话框中不存在该站点的名称。在“管理站点”对话框中删除站点的具体操作步骤如下。（1）在“管理站点”对话框中选择要删除的站点。（2）单击“删除当前选定的站点”按钮即可删除选择的站点。1.3.5导出和导入站点如果要在计算机之间移动站点，或者与其他用户共同设计站点，可通过DreamweaverCC2019的导出和导入站点功能实现，方法为先将站点导出为“.ste”格式的文件，然后在其他计算机上将其导入Dreamw