第2章初识Dreamweaver8熟悉Dreamweaver8操作环境网站规划与管理设置页面属性上机实践——编辑“墨攻”页面并保存2.1熟悉Dreamweaver操作环境安装Dreamweaver8后,单击“开始”按钮,选择“所有程序”“Macromedia”“MacromediaDreamweaver8”菜单,就可以启动Dreamweaver8了。进入Dreamweaver8后,首先映入眼帘的是起始页。打开最近打开过的文件创建不同类型的新文件在系统内置文件的基础上创建新文件在起始页的“创建新项目”列中选择“HTML”后,将会进入Dreamweaver8的工作界面。菜单栏标题栏插入栏文档标签文档工具栏收缩与展开下方面板组状态栏属性面板收缩与展开右方面板组面板组2.1.1“插入”栏“插入”栏包含用于将各种类型的对象(如图像、表格和层)插入到文档中的按钮。单击“插入”栏左侧的“常用”按钮可以打开一个下拉列表,从中选择其他选项可以改变“插入”栏的内容。单击“常用”按钮,在下拉列表中选择“显示为制表符”命令,“插入”栏的外观将发生变化。某些按钮的右侧带有一个小三角符号“”,单击该三角符号将弹出该按钮的一组同位按钮。2.1.2文档标签与文档工具栏文档标签显示了当前打开的网页文档的名称。只显示代码视图显示代码视图和设计视图只显示设计视图刷新设计视图在浏览器中预览/调试文档工具栏用于切换网页视图,管理文件,以及预览网页等。文档标题2.1.3文档窗口中的状态栏状态栏位于文档窗口底部,它提供了与当前文档相关的一些信息。标签选择器手形工具缩放工具文档大小与预计下载时间标签选择器显示了光标所在位置的标签的层次结构。选取、手形和缩放工具是Dreamweaver8新增的功能,分别用于选取、移动和缩放对象。选取工具2.1.4属性面板与面板组属性面板用于查看或编辑所选对象的属性。属性面板会随着所选对象的不同而变化。选中图像后的属性面板选中文字后的属性面板Dreamweaver8为用户提供了众多面板,如属性面板、文件面板、历史记录面板等。为便于管理,Dreamweaver8将这些面板归入到不同的面板组中。“文件”面板组包括三个面板“CSS”面板组包括两个面板2.2网站规划、创建与管理2.2.1确定网站结构所谓网站结构,就是网站中各个分支之间以及分支与主页之间的关系。通常情况下,一个网站的结构往往与该网站的导航菜单相对应。确定好网站结构后,接下来应根据网站结构创建本地站点,实际上就是确定本地站点以及文件的存放位置。2.2.2确定站点目录结构2.2.3定义站点站点信息新站点为便于管理和编辑站点,在创建网页之前,首先要在Dreamweaver中定义站点。定义站点可以将本地磁盘中的站点同Dreamweaver建立一定的关联。2.2.4新建、打开和关闭网页文件1.新建网页文件Dreamweaver中的文件也就是网页,可以通过“文件”“新建”菜单来创建新网页。2.打开网页文件如果要打开某站点中现有的网页文件,可以选择“文件”“打开”菜单,在“打开”对话框中进行选择。3.关闭网页文件要关闭网页文件,只需单击相应文件右上角的“关闭”按钮,或者按【Ctrl+W】组合键。2.2.5保存和预览网页文件新建或编辑网页文件后,需要保存文件,才能使所做的设置生效。选择“文件”“保存”菜单或按【Ctrl+S】组合键,即可保存文件。对网页进行编辑或修改后,按【F12】键可以在浏览器中预览其效果。2.2.6“文件”面板的应用在Dreamweaver中,利用“文件”面板可以非常方便地管理站点中的网页文件和文件夹。显示站点名称连接到远程主机或与远程主机断开刷新站点获取文件上传文件取出文件存回文件选择视图展开以同时显示本地和远程站点站点内容列表1.新建文件和文件夹利用“文件”面板可以方便地新建文件(实际上就是网页)和文件夹。如要新建文件夹,可在弹出的菜单中选择“新建文件夹”选项,其他操作同上。2.重命名文件和文件夹在“文件”面板中可以方便地重命名文件和文件夹,在右键快捷菜单中选择“编辑”“重命名”菜单即可。3.文件与文件夹的命名规则为便于日后的维护和管理,网站中所有文件和文件夹的命名都是有一定规则的。最好不要使用中文命名文件。文件名中不要使用大写英文字母。运算符符号不能用在文件名的开头。比较长的文件名可使用下划线“_”来隔开多个单词或关键字。在大型网站中,分支页面的文件应存放在单独的文件夹中存放网页图像的文件夹一般命名为“images”或者“img”。在动态网站中,用来存放数据库的文件夹一般被命名为“data”或者“database”。4.在“文件”面板中打开和删除文件要打开文件,可以直接在文件列表区双击文件名。如果是网页文件,该文件会自动在网页编辑区打开;如果是图像文件,系统会自动启动Fireworks并打开文件。要删除文件或文件夹,可以右击文件或文件夹,然后在弹出的菜单中选择“编辑”“删除”,也可在选中文件后,直接按【Delete】键删除。2.3设置页面属性2.3.1外观选项单击属性面板上的“页面属性”按钮,或者选择“修改”菜单下的“页面属性”命令,将打开“页面属性”对话框,默认显示为“外观”选项。设置页面字体设置页面字号设置页面文本颜色设置页面背景颜色设置页面背景图像设置背景图像重复方式设置页面与浏览器左、右、上、下边界的距离2.3.2链接选项在“页面属性”对话框中,单击左侧“分类”列表中的“链接”选项,其参数设置将显示在对话框右侧。设置链接文本的字体设置链接文本的字号设置链接文本在不同状态下的颜色设置链接对象的下划线情况2.3.3标题选项单击左侧“分类”列表中的“标题”选项,其参数设置将显示在对话框右侧。设置页面标题的字体样式设置各级标题的字号以及颜色2.3.4标题/编码选项单击左侧“分类”列表中的“标题/编码”选项,其参数设置将显示在对话框右侧。设置网页标题指定文档类型定义指定文档中字符所用的编码类型2.3.5跟踪图像选项单击左侧“分类”列表中的“跟踪图像”选项,其参数设置将显示在对话框右侧。设置跟踪图像设置跟踪图像的透明度2.4上机实践——编辑“墨攻”页面并保存本节通过编辑“墨攻”页面,来使读者进一步领略Dreamweaver的独特魅力(具体操作见视频2-1)。