本章简介:网页是网站最基本的组成部分,网站之间并不是杂乱无章的,它们通过各种链接相互关联,从而描述相关的主题或实现相同的目的。本章讲述DreamweaverCS3的工作界面、创建网站框架、网页文件设置、管理站点的方式等内容。第1章初识DreamweaverCS3课堂学习目标操作界面创建网站框架管理站点网页文件头设置1.1操作界面操作目的操作步骤相关工具1.1.1操作目的通过打开文件和调出属性面板命令,熟悉菜单栏的操作。通过链接选项改变链接文字的状态,熟悉CSS功能的应用方法。1.1.2操作步骤12341.1.3相关工具1.开始页面启动DreamweaverCS3后首先看到的画面是开始页面,供用户选择新建文件的类型,或打开已有的文档等。对于老用户可能不太习惯开始页面,可选择“编辑首选参数”命令,弹出“首选参数”对话框,取消选择“显示欢迎屏幕”复选框,单击“确定”按钮完成设置。当用户再次启动DreamweaverCS3后,将不再显示开始页面。开始页面“首选参数”对话框2.不同风格的界面DreamweaverCS3的操作界面新颖淡雅,布局紧凑,为用户提供了一个轻松、愉悦的开发环境。若用户想修改操作界面的风格,切换到自己熟悉的开发环境,可选择“窗口工作区布局”命令,弹出其子菜单,在子菜单中选择“编码器”或“设计器”命令,页面则会显示不同的界面风格。3.伸缩自如的功能面板在文档编辑窗口的右侧和下方与面板交界的框线中央各有一个箭头,单击箭头便可隐藏或展开面板。如果用户觉得工作区不够大,可以将鼠标指针放在文档编辑窗口右侧与面板交界的框线处,当鼠标指针呈双向箭头时拖曳鼠标,调整工作区的大小。若用户需要更大的工作区,可以将面板隐藏。4.多文档的编辑界面DreamweaverCS3提供了多文档的编辑界面,将多个文档整合在一起,方便用户在各个文档之间切换。用户可以单击文档编辑窗口上方的选项卡,切换到相应的文档。通过多文档的编辑界面,用户可以同时编辑多个文档。多文档的编辑界面5.插入面板DreamweaverCS3的“插入”面板在菜单栏的下方。“插入”面板6.更完整CSS功能传统的HTML所提供的样式及排版功能非常有限,因此,现在复杂的网页版面主要靠CSS样式来实现。而CSS样式表的功能较多,语法比较复杂,需要一个很好的工具软件有条不紊地整理复杂的CSS源代码,并适时地提供辅助说明。DreamweaverCS3就提供了这种方便有效的CSS功能。“属性”面板提供了CSS功能。用户可以通过“属性”面板中“样式”选项的下拉列表对所选的对象应用样式或创建和编辑样式。若某些文字应用了自定义样式,当用户调整这些文字的属性时,会自动生成新的CSS样式。1.2创建网站框架操作目的操作步骤相关工具1.2.1操作目的通过打开效果文件,熟练掌握打开命令。通过复制效果,熟练掌握新建命令。通过关闭新建文件,熟练掌握保存和关闭命令。1.2.2操作步骤12341.2.3相关工具1.创建和保存网页创建站点后,用户需要创建网页来组织要展示的内容。合理的网页名称非常重要,一般网页文件的名称应容易理解,能反映网页的内容。在网站中有一个特殊的网页是首页,每个网站必须有一个首页。访问者每当在IE浏览器的地址栏中输入网站地址,如在IE浏览器的地址栏中输入“”时会自动打开新浪网的首页。一般情况下,首页的文件名为“index.htm”、“index.html”、“index.asp”、“default.asp”、“default.htm”或“default.html”。选择“文件新建”命令,启用“新建文档”对话框,创建空白网页。网页设计完成后,选择“文件保存”命令,弹出“另存为”对话框,设置后单击“保存”按钮,将该文档保存在站点文件夹中。2.在站点地图中创建网页在站点地图中,各网页文件间的链接关系以树状的形式显示出来。站点地图是理想的站点结构布局工具,用户利用它可以快速地设置整个站点的结构,然后创建站点地图的图形图像。但是,站点地图仅适用于本地站点,对于远程站点,必须将其站点内容复制到本地磁盘上的一个文件夹中,并设置为本地站点后才能查看和使用站点地图。在站点地图中,可以进行选择网页、打开网页进行编辑、向站点添加新页、创建文件之间的链接、更改网页标题等操作。3.在文件列表中创建网页除了可以在站点地图中新建网页外,还可以在文件列表窗口中新建网页。1.3管理站点操作目的操作步骤相关工具1.3.1操作目的通过站点管理命令,熟练掌握创建站点的方法。通过新建站点,熟练掌握创建站点根目录的过程。12341.3.2操作步骤1.3.3相关工具1.站点管理器站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站点以及导入或导出站点。打开站点编辑站点复制站点删除站点导入和导出站点2.创建文件夹建立站点前,要先在站点管理器中创建站点文件夹。(1)在站点管理器的右侧窗口中单击选择站点。(2)通过以下两种方法新建文件夹。①选择“文件新建文件夹”命令。②用鼠标右键单击站点,在弹出的快捷菜单中选择“新建文件夹”命令。(3)输入新文件夹的名称。3.定义新站点建立好站点文件夹后用户就可定义新站点了。在DreamweaverCS3中,站点通常包含两部分,即本地站点和远程站点。本地站点是本地计算机上的一组文件,远程站点是远程Web服务器上的一个位置。用户将本地站点中的文件发布到网络上的远程站点,使公众可以访问它们。在DreamweaverCS3中创建Web站点,通常先在本地磁盘上创建本地站点,然后创建远程站点,再将这些网页的副本上传到一个远程Web服务器上,使公众可以访问它们。创建本地站点的步骤本地站点主要选项的作用1.4网页文件头设置操作目的操作步骤相关工具1.4.1操作目的通过刷新命令,熟练掌握如何使用该命令制作网页自动刷新效果。12341.4.2操作步骤1.4.3相关工具1.插入搜索关键字在万维网上通过搜索引擎查找资料时,搜索引擎自动读取网页中meta标签的内容,所以网页中的搜索关键字非常重要,它可以间接地宣传网站,提高访问量。但搜索关键字并不是字数越多越好,因为有些搜索引擎限制索引的关键字或字符的数目,当超过了限制的数目时,它将忽略所有的关键字,所以最好只使用几个精选的关键字。一般情况下,关键字是对网页的主题、内容、风格或作者等内容的概括。2.插入作者和版权信息要设置网页的作者和版权信息,可选择“插入记录HTML文件头标签Meta”命令,启用“META”对话框。“META”对话框3.设置刷新时间要指定载入页面刷新或者转到其他页面的时间,可设置文件头部的刷新时间项,具体操作步骤如下。(1)选中文档窗口中的“代码”视图,将鼠标指针放在head标签中,选择“插入记录HTML文件头标签刷新”命令,启用“刷新”对话框。(2)在“刷新”对话框中设置刷新时间。4.设置描述信息搜索引擎也可通过读取meta标签的说明内容来查找信息,但说明信息主要是设计者对网页内容的详细说明,而关键字可以让搜索引擎尽快搜索到网页。设置网页说明信息的具体操作步骤如下。(1)选中文档窗口中的“代码”视图,将鼠标指针放在head标签中,选择“插入记录HTML文件头标签说明”命令,启用“说明”对话框。(2)在“说明”对话框中设置说明信息。5.设置页面中所有链接的基准链接准链接类似于相对路径,若要设置网页文档中所有链接都以某个链接为基准,可添加一个基准链接,但其他网页的链接与此页的基准链接无关。设置基准链接的具体操作步骤如下。(1)选中文档窗口中的“代码”视图,将鼠标指针放在head标签中,选择“插入记录HTML文件头标签基础”命令,弹出“基础”对话框。(2)在“基础”对话框中设置“Href”和“目标”两个选项。6.设置当前文件与其他文件的关联性head部分的link标签可以定义当前文档与其他文件之间的关系,它与body部分中的文档之间的HTML链接是不一样的,其具体操作步骤如下。(1)选中文档窗口中的“代码”视图,将光标放在head标签中,选择“插入记录HTML文件头标签链接”命令,弹出“链接”对话框。(2)在“链接”对话框中设置相应的选项。