静态网页设计制作 教案 第1章 Dreamweaver 2021 概述

STYLEREFbt1a项目一STYLEREFbt1bDreamweaver2021概述项目一Dreamweaver2021概述思政目标了解Dreamweaver2021的界面组成，对其发展历史有较清楚的认识，培养探究精神。逐步培养读者勤于思考、善于钻研的学习习惯技能目标熟悉Dreamweaver2021的启动方法熟悉Dreamweaver2021的工作界面掌握Dreamweaver2021的文件操作。项目导读Dreamweaver是一款用于网页制作和站点管理的“所见即所得”的网页编辑工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，使得各个层次的开发人员和设计人员都能够快速创建界面精美的、基于标准的网站和应用程序，其直观性与高效性是很多网页编辑工具无法比拟的。任务1Dreamweaver2021窗口组成任务引入小明是一名网页设计师，经常利用Dreamweaver2021软件为客户设计各种不同类型的，但是要想熟练的使用Dreamweaver2021软件，必须先了解该软件的操作界面、窗口布局等。只有对界面有了宏观的认识，才能更好更快的进行网站设计。那么默认的界面中有哪些内容，各个区域的功能是什么呢？知识准备安装完Dreamweaver2021简体中文版之后，执行“开始”/“程序”/“AdobeDreamweaver2021”命令，或在桌面上找到AdobeDreamweaver2021图标按钮，双击或者右击选择“打开”，即可启动Dreamweaver2021简体中文版。为帮助用户快速适应Dreamweaver2021工作区中的更改，初次启动时，Adobe提供“首次使用体验”（如图1-1），用户可以快速找到适合的工作区和主题选项。图1-1首次自定义体验Dreamweaver2021默认的颜色主题为黑色，为便于标识界面元素，本书选择浅色的颜色主题。启动Dreamweaver2021简体中文版（以下简称Dreamweaver2021）之后，默认显示Dreamweaver2021的欢迎界面，如图1-2所示。该界面用于打开最近使用过的文档或创建新文档，还可以从中通过产品介绍或视频教程了解关于Dreamweaver的更多信息。如果不希望每次启动时都打开这个界面，可以在“首选项”/“常规”对话框中修改设置。图1-2Dreamweaver2021欢迎界面单击欢迎界面上“新建”栏目下所需的文档类型，或执行“文件”/“新建”命令，在打开的“新建文档”对话框中选择“新建文档”类别的HTML基本项，然后选择框架栏的“无”，单击“创建”按钮进入Dreamweaver2021中文版的工作界面，如图1-3所示。图1-3Dreamweaver2021的工作环境一、菜单栏与其他多数软件类似，Dreamweaver2021的菜单栏位于工作界面最上方，如图1-4所示。图1-4菜单栏二、文档工具栏文档工具栏主要集中了一些可以在文档的不同视图之间快速切换的常用命令，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。Dreamweaver2021中的文档工具栏如图1-5所示。图1-5文档工具栏在工具栏中包含了一些图标按钮和弹出菜单，可以用不同的方式来查看文档窗口或者预览设计效果，具体各个按钮图标的功能如下：：显示代码视图。：在同一屏幕中显示“代码”视图和“设计”视图。：在不打开浏览器的情况下实时预览页面的效果。单击该按钮右侧的倒三角形按钮，在弹出的下拉菜单中可选择“设计”视图。三、通用工具栏通用工具栏位于界面左侧，开始页面的通用工具栏如图1-6所示，主要集中了一些与查看文档、在本地和远程站点之间传输文档、以及代码编辑有关的常用命令和选项。：单击该按钮显示当前打开的所有文档列表。：单击该按钮弹出文件管理下拉菜单，如图1-7所示。：扩展全部代码。：格式化源代码。：应用注释。：删除注释。：自定义工具栏。单击该按钮打开“自定义工具栏”对话框，如图1-8所示。在工具列表中勾选需要的工具左侧的复选框，即可将工具添加到通用工具栏中。：在“实时视图”模式下该按钮可见。单击该按钮，可以打开CSS检查模式，以可视方式调整设计，实现期望的样式设计。CSS检查模式允许开发人员以可视化方式详细显示CSS框模型属性，包括填充、边框和边距；轻松切换CSS属性，且无需读取代码；或使用独立的第三方实用程序。CSS检查模式在具有某些设置时最有用，如：CSS设计器以“当前”模式打开、启用实时视图。如果没有这些设置中的任何一种，将在文档窗口顶部显示相关的提示信息。图1-6通用工具栏图1-7文件管理下拉菜单图1-8“自定义工具栏”对话框四、“插入”面板Dreamweaver2021的“插入”浮动面板，默认停靠在界面右侧的浮动面板组中。单击浮动面板组中的“插入”按钮，即可弹出“插入”面板，如图1-9所示。“插入”面板的初始视图为“HTML”面板。单击“插入”面板中“HTML”面板右侧的倒三角形按钮，即可在弹出的下拉列表中选择需要的面板，从而在不同的面板之间切换，如图1-10所示。图1-9“插入”面板图1-10在不同面板之间进行切换“插入”面板有7组选项，每组中有不同类型的对象。使用“插入”菜单中的命令也可以插入各种对象，使用菜单还是使用“插入”面板根据用户的习惯决定。默认状态下，“插入”面板中的对象图标显示右侧标签，如果单击下拉列表中的“隐藏标签”命令，则只显示对象图标，而不显示图标右侧的标签。五、文档窗口文档窗口用于显示当前创建或者编辑的文档，可以根据选择的显示方式不同而显示不同的内容。用户的操作结果都会显示在文档窗口中。不管是利用Dreamweaver2021提供的工具或命令编写，还是直接在“代码”视图中编写，所进行的工作都在文档窗口中完成。文档窗口中包含了所编辑或创建文档的所有HTML代码。单击文档工具栏中的按钮，切换到“设计”视图，文档窗口显示的内容与浏览器中显示的内容相同，如图1-11所示。使用Dreamweaver2021提供的工具或命令，可以方便地进行创建、编辑文档的各种工作，即使完全不懂HTML代码的读者也可以制作出精美的网页。图1-11“设计”视图单击工具栏中的按钮，切换到代码视图，在文档窗口中显示的是当前文档的代码，如图1-12所示。尽管在设计视图中可以完成绝大部分工作，但是有些工作还是必须使用代码编辑，这就必须在代码视图中进行，比如编辑插入的脚本，对脚本进行检查、调试等。图1-12“代码”视图在编写文档时，有时可能必须兼顾设计样式和实现代码，这时就需要代码与设计视图同屏显示。单击工具栏中的按钮，就可以实现这个功能，如图1-13所示。图1-13“拆分”视图此外，在Dreamweaver2021的“拆分”模式下，执行“查看”｜“拆分”｜“顶部的设计视图”菜单命令，可以将“代码”视图和“设计”视图上下调换；执行“查看”｜“拆分”｜“垂直拆分”菜单命令，可以垂直拆分视图，此时执行“查看”｜“拆分”｜“左侧的设计视图”菜单命令，可以将“代码”视图和“设计”视图左右调换，如图1-14所示。图1-14调换“设计”视图和“代码”视图这样，同一文档的两种视图可以在同一窗口中对照显示，并且当选中“设计”视图或者“代码”视图中的某一部分时，在另外的“代码”视图或者“设计”视图中也会选中相应的网页元素。六、“属性”面板默认情况下，Dreamweaver2021没有开启“属性”面板，用户可以执行“窗口”|“属性”命令打开“属性”面板。选中网页中的某个对象后，“属性”面板可以显示被选中对象的属性，如图1-15所示。用户可以在属性面板中修改被选对象的各项属性值。图1-15“属性”面板“属性”面板分成上下两部分。不同的对象有不同的属性，因此选中不同对象时，“属性”面板显示的内容是不同的。单击面板右下角的按钮可以关闭“属性”面板的下面部分。这时，按钮变成按钮，单击此按钮可以重新打开“属性”面板的下面部分。七、浮动面板组Dreamweaver2021的浮动面板组位于工作环境右侧，包含的面板如图1-16所示。在菜单栏中的“窗口”下拉菜单中可以打开或者关闭这些面板。例如，执行“窗口”｜“CSS设计器”命令，可以打开如图1-17所示的“CSS设计器”面板。图1-16“窗口”菜单图1-17“CSS设计器”面板任务2文件操作任务引入小明已经对Dreamweaver2021的操作界面有了一个初步的认识。接下来开始制作网页，那么，怎么开始绘制新的网页文件？怎么打开已有的文件？绘制好的网页文件怎么保存到设定位置？知识准备Dreamweaver2021的文件操作是制作网页最基本的操作，包括网页文件的打开、保存、关闭等。一、打开文件若要编辑一个网页文件，必须先打开该文件。Dreamweaver2021可以打开多种格式的文件，例如htm、html、shtml、xhtml、asp、json、pro、js、aspx、dwt、xml、lbi、sql、css、svg等。执行“文件”｜“打开”命令，弹出“打开”对话框，如图1-18所示。“打开”对话框与其他的Windows应用程序一样，可以在对话框中选中要打开的文件名，然后单击“打开”按钮即可打开该文件；也可在对话框中双击所需的文件打开。图1-18“打开”对话框二、创建文件创建新的网页文件，有以下两种方法：（1）在Dreamweaver2021中，执行“文件”｜“新建”命令，弹出“新建文档”对话框，如图1-19所示。选择要创建的文件类型和布局，然后单击“创建”按钮，即可创建新文件。图1-19“新建文档”对话框创建HTML文件时，默认的文档类型为HTML5。用户可以在“文档类型”列表框中选择需要的文档类型。如果要创建自定义Bootstrap文档，可以在“框架”区域选择“Bootstrap”，然后使用Bootstrap组件构建网站，或者使用Extract从Photoshop复合中将图像、字体、样式、文本等网页元素导入Bootstrap文档。（2）如果要基于模板创建文档，则先在“新建文档”对话框中单击“网站模板”标签，选择模板所在的站点，然后再选择需要的模板文件。这时可以通过预览区域浏览所选择模板的样式，如图1-20所示。选择需要使用的模板后，单击“创建”按钮，即可创建一个基于该模板的新文件。图1-20选择网站模板（3）利用Dreamweaver2021，用户还可以基于Bootstrap起始页模板很便捷地创建快速响应的网页。在“新建文档”对话框中选择“启动器模板”类别，在“示例文件夹”列表中选择“Bootstrap模板”，然后在“示例页”列表中选择需要的Bootstrap起始页模板，如图1-21所示。图1-21选择Bootstrap起始页模板三、存储文件保存网页文件的方法随保存文件的目的不同而不同。（1）如果同时打开了多个网页文件，则执行“文件”｜“保存”或“文件”｜“另存为”命令只保存当前编辑的页面。（2）若要保存打开的所有页面，则执行“文件”｜“保存全部”命令。（3）若是第一次保存该文件，则执行“文件”｜“保存”命令弹出“另存为”对话框，如图1-22所示。若文件已经保存过，则执行“文件”｜“保存”命令时，直接保存文件。（4）如果希望将一个网页文档以模板的形式保存，则先切换到要保存的文件所在的窗口，执行“文件”｜“另存为模板”命令，打开“另存模板”对话框，如图1-23所示。在该对话框的“站点”下拉列表框中选择一个保存该模板文件的站点，然后在“另存为”后面的文本框中输入文件的名称，最后单击“保存”按钮完成文件的保存。图1-22“另存为”对话框图1-23“另存模板”对话框四、设置文档属性页面标题、背景图像和颜色、文本和链接颜色以及边距是每个Web文档的基本属性。一般情况下，新建一个网页文件后，其默认的页面属性都不符合设计需要。可以通过设置文档的页面属性来自定义页面外观。操作步骤如下：（1）在Dreamweaver中打开要修改页面属性的网页文件。（2）执行“文件”/“页面属性”命令，在弹出的“页面属性”对话框中对页面的外观、链接、标题和编码以及跟踪图像进行设置，如图1-24所示。图1-24“页面属性”对话框（3）在“外观”分类中，可以设置页面字体、大小、颜色、背景颜色和图像、背景图像的填充方式和页边距。页边距是指页面文档主体部分与浏览器上、下、左、右边框的距离。如果同时使用背景图像和背景颜色，下载图像时会先出现颜色，然后图像覆盖颜色。如果背景图像包含透明像素，则背景颜色会透过背景图像显示出来。默认情况下，Dreamweaver使用CSS指定页面属性。如果选择使用HTML指定页面属性，属性面板仍然显示“样式”弹出式菜单，不过，字体、大小、颜色和对齐方式控件将只显示使用HTML标签的属性设置，应用于当前选择的CSS属性值将是不可见的，且“大小”弹出式菜单也将被禁用。（4）在“链接”分类中，可以定义链接的默认字体、字号、颜色，以及链接文本不同状态下的颜色、修饰样式。（5）在“标题”分类中，可以定义标题字体，并指定最多六个级别的标题标签使用的字体大小和颜色。（6）在“标题/编码”分类中，可以指定页面在浏览器窗口或编辑窗口中显示的标题、所用语言的文档编码类型，以及指定要用于该编码类型的Unicode范式。（7）在“跟踪图像”分类中，可以指定跟踪图像及图像的透明度。跟踪图像是Dreamweaver一个非常有用的功能，是放在文档窗口背景中的、使用各种绘图软件绘制的一个想象中的网页排版格局图，可以是JPEG、