Dreamweaver网页设计案例教程（DreamweaverCC2019）全套教学课件.pptx

网页是网站最基本的组成部分，网站之间并不是杂乱无章的，它们通过各种链接相互关联，从而描述相关的主题或实现相同的目的。本章讲述Dreamweaver CS6的工作界面、创建网站框架、网页文件设置、管理站点的方式等内容。;课堂学习目标;1.1　操作界面;1.1.1　操作目的 ;1.1.2　操作步骤;1.1.3　相关工具;2.不同风格的界面 Dreamweaver CS6的操作界面新颖淡雅，布局紧凑，为用户提供了一个轻松、愉悦的开发环境。 若用户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择“窗口 工作区布局”命令，弹出其子菜单，在子菜单中选择其中的一种界面风格，页面会发生相应的改变。;3.伸缩自如的功能面板 在浮动面板的右上角单击 按钮，可以隐藏或展开面板。 如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。;4.多文档的编辑界面 Dreamweaver CS6提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单击文档编辑窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。;5.插入面板 Dreamweaver CS6“插入”面板在菜单栏的下方。;6.更完整CSS功能 传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，需要一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供辅助说明。Dreamweaver CS5就提供了这种方便有效的CSS功能。 “属性”面板提供了CSS功能。用户可以通过“属性”面板中“类”选项的下拉列表对所选的对象应用样式或创建和编辑样式。若某些文字应用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。;1.2　创建网站框架;1.2.1　操作目的 ;1.2.2　操作步骤;1.2.3　相关工具;1.3　管理站点;1.3.1　操作目的 ;1 2;1.3.3　相关工具;2.创建文件夹 建立站点前，要先在站点管理器中创建站点文件夹。;3.???义新站点 建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CS6中，站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver CS5中创建 Web 站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再将这些网页的副本上传到一个远程 Web 服务器上，使公众可以访问它们。;1.4　网页文件头设置;1.4.1　操作目的 ;1 2;1.4.3　相关工具;2.插入作者和版权信息 要设置网页中的作者和版权信息，可选择“插入 HTML 文件头标签 Meta”命令，弹出“Meta”对话框。 ;3.设置刷新时间 要指定载入页面刷新或者转到其他页面的时间，可设置文件头部的刷新时间项，具体操作步骤如下。 （1）选择“插入 HTML 文件头标签 刷新”命令，弹出“刷新”对话框。 （2）在“刷新”对话框中设置刷新时间。 ;4.设置描述信息 搜索引擎也可通过读取meta 标签的说明内容来查找信息，但说明信息主要是设计者对网页内容的详细说明，而关键字可以让搜索引擎尽快搜索到网页。设置网页说明信息的具体操作步骤如下。 （1）选择“插入 HTML 文件头标签 说明”命令，弹出“说明”对话框。 （2）在“说明”对话框中设置说明信息。 ;5.设置页面中所有链接的基准链接 基准链接类似于相对路径，若要设置网页文档中所有链接都以某个链接为基准，可添加一个基准链接，但其他网页的链接与此页的基准链接无关。设置基准链接的具体操作步骤如下。 （1）选择“插入 HTML 文件头标签 基础”命令，弹出“基础”对话框。 （2）在“基础”对话框中设置“HREF”和“目标”两个选项。;6.设置当前文件与其他文件的关联性 head 部分的link标签可以定义当前文档与其他文件之间的关系，它与 body 部分中的文档之间的 HTML链接是不一样的，其具体操作步骤如下。 （1）选择“插入记录 HTML 文件头标签 链接”命令，弹出“链接”对话框。 （2）在“链接