1.2创建“佳美馨装饰”站点（课件）《Dreamweaver网页设计立体化教程（微课版）》（人民邮电出版社）

Dreamweaver 网页设计立体化教程（微课版）（Dreamweaver CC 2020） 项目一 网页设计基础 1 目录 Contents 任务一 规划“佳美馨装饰”网站结构 任务二 创建“佳美馨装饰”站点 实训一 规划“中国皮影”网站 实训二 创建“中国皮影”站点 2 创建“佳美馨装饰”站点，需要先新建一个文件夹作为网站的根目录，然后在Dreamweaver的站点管理对话框中创建站点 。 一、任务描述 （一）任务背景 （1）认识Dreamweaver?CC?2020的操作界面各组成部分。 （2）掌握创建和编辑站点的方法。 （二）任务目标 3 二、相关知识 （一）认识Dreamweaver CC 2020的操作界面 Dreamweaver CC 2020的操作界面 4 二、相关知识 （一）认识Dreamweaver CC 2020的操作界面 菜单栏以菜单命令的方式集合了Dreamweaver的所有命令，单击某个菜单项，在打开的下拉菜单中选择相应的命令即可执行对应的操作。 1．菜单栏 根据不同的用户需求，切换器集合了“开发人员”和“标准”两种工作区模式，当然也可以新建并保存自定义工作区模式。 2．工作区切换器 5 二、相关知识 （一）认识Dreamweaver CC 2020的操作界面 文档工具栏位于菜单栏下方，主要用于显示页面名称、切换视图模式、查看源代码标签等操作。Dreamweaver提供了“代码”、“拆分”、“设计”、“实时”4种视图模式。 3．文档工具栏 代码视图 拆分视图 设计视图 实时视图 6 二、相关知识 （一）认识Dreamweaver CC 2020的操作界面 4．文档窗口 文档窗口 文档窗口主要用于显示当前创建和编辑的网页文档内容。文档窗口由标题栏、编辑区和状态栏组合而成。 标题栏主要用于显示当前页面的名称。 编辑区主要用于编辑网页。 状态栏主要用于显示网页区域中的标签名称以及切换页面设置的分辨率。 7 二、相关知识 （一）认识Dreamweaver CC 2020的操作界面 5．工具栏 自定义工具栏 工具栏位于文档窗口的左侧，在不同视图下工具栏中会显示不同的工具。用户也可以根据需要自定义工具栏中所显示的工具，方法为：在工具栏中单击“自定义工具栏”按钮 ，在打开的“自定义工具栏”对话框中选中需要的工具，然后单击“完成”按钮，如图所示。 8 二、相关知识 （一）认识Dreamweaver CC 2020的操作界面 6．“属性”面板 文档“属性”面板 “属性”面板用于显示文档窗口中所选元素的属性，并允许用户在该面板中修改元素属性。在网页中选择的元素不同，其“属性”面板中的各参数也会不同，如选择文档，那么属性面板上将会出现关于设置文档的“HTML属性”面板和“CSS属性”面板，如图所示。 9 二、相关知识 （一）认识Dreamweaver CC 2020的操作界面 7．面板组 插入面板 面板组是停靠在操作界面右侧的浮动面板集合，包含了编辑网页文档的常用工具。下面简单介绍其中的3种面板。 “插入”面板是Dreamweaver面板组非常重要的组成部分，主要用于在网页中插入各类网页元素，只需在“类别”下拉列表框中选择所需类别即可进行切换， 自定义收藏夹 10 二、相关知识 （一）认识Dreamweaver CC 2020的操作界面 7．面板组 “CSS设计器”面板 “CSS 设计器”面板用于创建和编辑CSS样式，依次单击面板各列表标题处的 、按钮，可实现源、媒体、选择器、属性等的新建和删除操作。 11 二、相关知识 （一）认识Dreamweaver CC 2020的操作界面 7．面板组 “文件”面板 “文件”面板：用于查看站点、文件或文件夹。用户可以展开或折叠“文件”面板，当折叠时，将以文件列表的形式显示本地站点等内容。 12 二、相关知识 （二）创建和管理站点 “管理站点”对话框 在Dreamweaver中，站点是指某个网站的文档的本地或远程存储位置，利用站点，可以组织和管理所有Web文档，然后将站点上传到Web服务器、以便于跟踪和维护链接以及管理和共享文件。用户可以创建多个站点，创建的站点还可以进行管理操作。方法为：选择【站点】/【管理站点】菜单命令，打开“管理站点”对话框，在其中可以对已创建的站点进行操作。 13 二、相关知识 （二）创建和管理站点 1．创建本地站点 在Dreamweaver中新建网页前，最好先创建本地站点，然后在本地站点中创建网页，这样便于在其他计算机中预览。创建本地站点主要有以下3种方法： 选择【站点】/【新建站点】菜单命令，在打开的对话框中设置站点的名称、保存位置等。 选择【站点】/【管理站点】菜单命令，打开“管理站点”对话框，单击“新建站点”按钮，在打开的对话框中进行设置。 在“文件”面板中单击“管理站点”超链接或该超链接前的下拉按钮 ，在打开的下拉列表中选择“管理站点”选项，打开“管理站点”对话框，单击“新建站点”按钮，在打开的对话框中进行设置。 14 二、相关知识 （二）创建和管理站点 2．编辑站点 编辑站点是指对存在的站点重新设置参数，如为创建的站点输入URL地址，方法为：选择【站点】/【管理站点】菜单命令，打开“管理站点”对话框，在预览列表框中选择需要修改的站点，单击“编辑当前选定的站点”按钮 ，在打开的对话框左侧单击“高级设置”选项，在展开的列表中选择“本地信息”选项，单击选中“站点跟目录”单选项，在“Web URL”文本框中输入URL地址，然后单击“保存”按钮。 15 二、相关知识 （二）创建和管理站点 3．导出站点 导出站点的方法为：选择【站点】/【管理站点】菜单命令，打开“管理站点”对话框，在预览列表框中选择需导出的站点，单击“导出当前选定站点”按钮 ，打开“导出站点”对话框，选择导出站点保存的位置，其他保持默认设置，单击“保存”按钮完成导出站点操作。 导出站点 16 二、相关知识 （二）创建和管理站点 4．导入站点 “.ste”格式的站点可以由Dreamweaver直接导入，以实现站点的备份和共享。导入站点的方法为：打开“管理站点”对话框，单击“导入站点”按钮，打开“导入站点”对话框，找到需要导入站点并将其选中，单击“打开”按钮，返回“管理站点”对话框，查看导入的站点，单击“完成”按钮，返回Dreamweaver主界面，自动打开“文件”面板显示导入的站点。 17 二、相关知识 （二）创建和管理站点 5．复制与删除站点 复制站点：打开“管理站点”对话框，在预览列表框中选择需要复制的站点，单击“复制当前选定的站点”按钮 可复制站点，单击“编辑当前选定的站点”按钮可对复制的站点进行编辑。 删除站点：打开“管理站点”对话框，在预览列表框中选择要删除的站点，单击“删除当前选定的站点”按钮 ，在打开的提示对话框中单击“是”按钮即可删除站点。 18 二、相关知识 （二）创建和管理站点 6．管理站点中的文件和文件夹 添加文件或文件夹：网站内容的分类决定了站点中文件和文件夹的数量，通常，网站中每个分支的所有文件统一存放在单独的文件夹中，根据网站的大小，还可继续进行细分。 移动和复制文件或文件夹：新建文件或文件夹后，若对文件或文件夹的位置不满意，可将其移动。为了加快新建文件或文件夹的速度，还可通过复制的方法快速新建文件或文件夹。 删除文件或文件夹：若不再使用站点中的某个文件或文件夹，则可将其删除。 重命名文件或文件夹：选择需要重命名的文件或文件夹，单击鼠标右键，在弹出的快捷菜单中选择【编辑】/【重命名】命令，使文件或文件夹的名称呈可编辑状态，输入新名称即可。 19 三、任务实施 下面以新建“佳美馨装饰”网站的本地站点为例，介绍站点的创建方法，具体操作如下。 （一）创建站点 设置站点名称 设置站点保存位置 新创建的站点 20 三、任务实施 编辑站点是指重新设置站点的参数，下面编辑“佳美馨装饰”网站 站点，并输入URL地址，具体操作如下。 （二）编辑站点 编辑站点 设置Web URL 21 三、任务实施 为了更好地管理网页和素材，下面在“佳美馨装饰”网站站点中编辑文件 和文件夹，具体操作如下。 （三）管理站点文件夹 修改文件名称 新建文件和文件夹 新建文件夹 22 三、任务实施 （三）管理站点文件夹 拷贝文件夹 粘贴文件夹 更新文件链接 23 三、任务实施 （三）管理站点文件夹 复制文件夹 导出站点 设置导出站点位置 24 目录 Contents 任务一 规划“佳美馨装饰”网站结构 任务二 创建“佳美馨装饰”站点 实训一 规划“中国皮影”网站 实训二 创建“中国皮影”站点 25 本实训需要规划中国皮影网站的结构。该网站主要用于宣传中国非物质文化遗产——皮影戏，包括皮影的起源、发展与文化内涵，皮影的造型、制作与表演，皮影的地方特色等内容。要求该网站结构板块分明，布局合理。 实训要求 实训一 规划“中国皮影”网站 根据本实训的要求，先搜集相关图片和文字等资料，然后制作网页结构图交给客户确认。本实训的网站首页结构如图所示。 实训思路 “中国皮影”网站首页结构 26 实训一 规划“中国皮影”网站 步骤提示 （1）根据客户提出的要求创建并修改站点基本结构。 （2）搜集相关的文本、图像等资料，设计制作网页结构并将其发送给客户确认。 27 目录 Contents 任务一 规划“佳美馨装饰”网站结构 任务二 创建“佳美馨装饰”站点 实训一 规划“中国皮影”网站 实训二 创建“中国皮影”站点 28 创建“中国皮影”网站站点并在站点中创建“index.html” 文件和“web”“image”文件夹 ，通过练习掌握在Dreamweaver中创建站点、新建网页、创建文件夹等操作。 实训要求 实训二 创建“中国皮影”站点 在规划站点时，需要先确定该网站需要包含的内容，然后细分每个版块的内容。新建站点，然后确定本地文件的保存位置，最后用“文件”面板规划网站的内容和表现形式。站点参考效果如图所示。 实训思路 “中国皮影”站点效果 29 实训二 创建“中国皮影”站点 步骤提示 （1）选择【站点】/【新建站点】菜单命令新建“中国皮影”站点。 （2）在“文件”面板的“中国皮影”站点中新建“index.html”文件和“web”“image”文件夹。 30 $$