静态网页设计制作-全套PPT课件.pptx

项目一 Dreamweaver 2021概述;任务1 Dreamweaver 2021窗口组成;首次自定义体验;Dreamweaver 2021欢迎界面;Dreamweaver 2021的工作环境;一、菜单栏 与其他多数软件类似，Dreamweaver 2021的菜单栏位于工作界面最上方，如图所示。 二、文档工具栏 文档工具栏主要集中了一些可以在文档的不同视图之间快速切换的常用命令，以及一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。Dreamweaver 2021中的文档工具栏如图所示。 三、通用工具栏 通用工具栏位于界面左侧，开始页面的通用工具栏如图所示，主要集中了一些与查看文档、在本地和远程站点之间传输文档、以及代码编辑有关的常用命令和选项。;四、“插入”面板 Dreamweaver 2021的“插入”浮动面板，默认停靠在界面右侧的浮动面板组中。单击浮动面板组中的“插入”按钮，即可弹出“插入”面板，如图所示。 “插入”面板的初始视图为“HTML”面板。单击“插入”面板中“HTML”面板右侧的倒三角形按钮，即可在弹出的下拉列表中选择需要的面板，从而在不同的面板之间切换，如图所示。;五、文档窗口 文档窗口用于显示当前创建或者编辑的文档，可以根据选择的显示方式不同而显示不同的内容。用户的操作结果都会显示在文档窗口中。不管是利用Dreamweaver 2021提供的工具或命令编写，还是直接在“代码”视图中编写，所进行的工作都在文档窗口中完成。文档窗口中包含了所编辑或创建文档的所有HTML代码。 单击文档工具栏中的按钮，切换到“设计”视图，文档窗口显示的内容与浏览器中显示的内容相同，如图所示。;“代码”视图;“拆分”视图; 调换“设计”视图和“代码”视图;六、“属性”面板 默认情况下，Dreamweaver 2021没有开启“属性”面板，用户可以执行“窗口”|“属性”命令打开“属性”面板。选中网页中的某个对象后，“属性”面板可以显示被选中对象的属性，如图所示。 七、浮动面板组 Dreamweaver 2021的浮动面板组位于工作环境右侧，包含的面板如图所示。 在菜单栏中的“窗口”下拉菜单中可以打开或者关闭这些面板。例如，执行“窗口”｜“CSS设计器”命令，可以打开如图所示的“CSS设计器”面板。;任务2 文件操作;“打开”对话框;二、创建文件 创建新的网页文件，有以下两种方法： （1）在Dreamweaver 2021中，执行“文件”｜“新建”命令，弹出“新建文档”对话框，如图所示。 （2）如果要基于模板创建文档，则先在“新建文档”对话框中单击“网站模板”标签，选择模板所在的站点，然后再选择需要的模板文件。这时可以通过预览区域浏览所选择模板的样式，如图所示。; 选择网站模板;（3）利用Dreamweaver 2021，用户还可以基于Bootstrap起始页模板很便捷地创建快速响应的网页。在“新建文档”对话框中选择“启动器模板”类别，在“示例文件夹”列表中选择“Bootstrap模板”，然后在“示例页”列表中选择需要的Bootstrap起始页模板，如图所示。;三、存储文件 保存网页文件的方法随保存文件的目的不同而不同。 （1）如果同时打开了多个网页文件，则执行“文件”｜“保存”或“文件”｜“另存为”命令只保存当前编辑的页面。 （2）若要保存打开的所有页面，则执行“文件”｜“保存全部”命令。 （3）若是第一次保存该文件，则执行“文件”｜“保存”命令弹出“另存为”对话框，如图所示。 （4）如果希望将一个网页文档以模板的形式保存，则先切换到要保存的文件所在的窗口，执行“文件”｜“另存为模板”命令，打开“另存模板”对话框，如图所示。;四、设置文档属性 页面标题、背景图像和颜色、文本和链接颜色以及边距是每个Web文档的基本属性。 （1）在Dreamweaver中打开要修改页面属性的网页文件。 （2）执行“文件”/“页面属性”命令，在弹出的“页面属性”对话框中对页面的外观、链接、标题和编码以及跟踪图像进行设置，如图所示。 （3）在“外观”分类中，可以设置页面字体、大小、颜色、背景颜色和图像、背景图像的填充方式和页边距。 （4）在“链接”分类中，可以定义链接的默认字体、字号、颜色，以及链接文本不同状态下的颜色、修饰样式。;（5）在“标题”分类中，可以定义标题字体，并指定最多六个级别的标题标签使用的字体大小和颜色。 （6）在“标题/编码”分类中，可以指定页面在浏览器窗口或编辑窗口中显示的标题、所用语言的文档编码类型，以及指定要用于该编码类型的Unicode范式。 （7）在“跟踪图像”分类中，可以指定跟踪图像及图像的透明度。 （8）设置完毕后，单击“确定”按钮关闭对话框。所做设置将应用于当前文档。;项目总结;项目实战;实战二