Dreamweaver CS5网页设计案例教程.pptx

本章简介：

网页是网站最基本的组成部分，网站之间并不是杂乱无章的，它们通过各种链接相互关联，从而描述相关的主题或实现相同的目的。本章讲述DreamweaverCS5工作界面、创建网站框架、网页文件设置、管理站点的方式等内容。;课堂学习目标;1.1操作界面;1.1.1操作目的;1.1.2操作步骤;1.1.3相关工具;2.不同风格的界面

DreamweaverCS5的操作界面新颖淡雅，布局紧凑，为用户提供了一个轻松、愉悦的开发环境。

若户想修改操作界面的风格，切换到自己熟悉的开发环境，可选择“窗口工作区布局”命令，弹出其子菜单，在子菜单中选择“编码器”或“设计器”命令，选择其中的一种界面风格，页面会发生相应的改变。;3.伸缩自如的功能面板

在浮动面板的右上角单击按钮，可以隐藏或展开面板。

如果用户觉得工作区不够大，可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处，当鼠标指针呈双向箭头时拖曳鼠标，调整工作区的大小。若用户需要更大的工作区，可以将面板隐藏。;4.多文档的编辑界面

DreamweaverCS5提供了多文档的编辑界面，将多个文档整合在一起，方便用户在各个文档之间切换。用户可以单击文档编辑窗口上方的选项卡，切换到相应的文档。通过多文档的编辑界面，用户可以同时编辑多个文档。;5.插入面板

DreamweaverCS5“插入”面板在菜单栏的下方。;6.更完整CSS功能

传统的HTML所提供的样式及排版功能非常有限，因此，现在复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂，需要一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时地提供辅助说明。DreamweaverCS5就提供了这种方便有效的CSS功能。

“属性”面板提供了CSS功能。用户可以通过“属性”面板中“类”选项的下拉列表对所选的对象应用样式或创建和编辑样式。若某些文字应用了自定义样式，当用户调整这些文字的属性时，会自动生成新的CSS样式。;1.2创建网站框架;1.2.1操作目的;1.2.2操作步骤;1.2.3相关工具;1.3管理站点;1.3.1操作目的;12;1.3.3相关工具;2.创建文件夹

建立站点前，要先在站点管理器中创建站点文件夹。;3.定义新站点

建立好站点文件夹后用户就可定义新站点了。在DreamweaverCS5中，站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一组文件，远程站点是远程Web服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点，使公众可以访问它们。在DreamweaverCS5中创建Web站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再将这些网页的副本上传到一个远程Web服务器上，使公众可以访问它们。;1.4网页文件头设置;1.4.1操作目的;12;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链接是不一样的，其具体操作步