第2章 与Dreamweaver8初次见面

《Dreamweaver网页设计》电子版教科书第2章1第2章与Dreamweaver8初次见面Dreamweaver8集网页制作和网站管理于一身，利用它不仅可以轻而易举地制作出各种精彩的网页，还可以非常方便地管理网站中的文件和文件夹。本章将首先简要介绍Dreamweaver8的工作界面，然后依次介绍站点规划与创建、文档基本操作和页面总体设置等内容。2.1熟悉Dreamweaver8工作界面：安装Dreamweaver8后，单击桌面左下角的“开始”按钮，选择“所有程序”→“Macromedia”→“MacromediaDreamweaver8”菜单，就可以启动Dreamweaver8了，如图2-1上图所示。图2-1启动Dreamweaver8启动Dreamweaver8后，首先显示其起始页。通过起始页可以打开最近使用过的文档或其它文档，也可以创建新文档，如图2-1下图所示。这里我们单击“创建新项目”中的《Dreamweaver网页设计》电子版教科书第2章2“HTML”项，创建一个.html文档并进入Dreamweaver8工作界面，如图2-2所示。图2-2Dreamweaver8工作界面Dreamweaver8的工作界面由标题栏、菜单栏、插入栏、文档工具栏、文档窗口、状态栏、“属性”面板和面板组等组成，下面首先介绍各组成部分的特点，然后介绍调整Dreamweaver8工作界面的方法。经验之谈：双击桌面上的快捷方式图标也可以启动Dreamweaver8。创建桌面快捷方式图标的方法是：右击图2-1中的“MacromediaDreamweaver8”，在弹出的快捷菜单中选择“发送到”→“桌面快捷方式”项即可。2.1.1标题栏和菜单栏：标题栏位于界面顶部，左侧显示软件名称和文档标题，右侧显示程序窗口的控制按钮，包括“最小化窗口”按钮、“最大化窗口”按钮和“关闭窗口”按钮。菜单栏位于标题栏下方，它几乎集中了Dreamweaver8的全部操作命令，利用这些命令可以编辑网页、管理站点以及设置操作界面等。要执行某些命令，可首先单击主菜单名打开其下拉菜单，然后用鼠标单击相应的菜单项。2.1.2插入栏：插入栏包括各种类型的对象按钮（如图像、表格和Flash动画等），通过单击这些按钮，可将相应的对象插入到文档中。默认状态下，插入栏中显示的是网页中最常用的对象按钮组，即“常用”插入栏。单击插入栏左侧的“常用”按钮可以打开一个下拉列表，从中选择其它选项可切换至其他类型的插入栏，如布局、表单、文本等，如图2-3所示。图2-3改变插入栏类型《Dreamweaver网页设计》电子版教科书第2章3默认状态下，插入栏的显示方式被称为菜单方式。当在“常用”按钮的下拉列表中选择“显示为制表符”项后，插入栏将显示为制表符形式，如图2-4所示。图2-4以制表符形式显示的插入栏如果要使插入栏重新显示为菜单方式，可以右键单击插入栏名，在弹出的快捷菜单中选择“显示为菜单”，如图2-5所示。图2-5改变插入栏类型另外，插入栏中某些按钮右侧带有一个小三角符号“”，这表示该按钮具有同位按钮组，单击该三角符号“”将弹出其同位按钮组。选择某个按钮后，所选按钮将为该按钮组的当前按钮，如图2-6所示。图2-6打开同位按钮组2.1.3文档标签与文档工具栏：1.文档标签文档标签位于插入栏下方，左侧显示当前打开的所有网页文档的名称，右侧显示当前文档对应的最小化，向下还原和关闭按钮。当用户打开多个网页时，通过单击文档标签可在各网页之间切换，如图2-7所示。《Dreamweaver网页设计》电子版教科书第2章4图2-7文档标签温馨提示：如果文档名后带一个“*”号，表示网页已修改但未保存。2.文档工具栏文档工具栏位于文档标签下方，使用它可以切换网页视图、设置网页标题、检查浏览器支持、管理文件等。各按钮名称如图2-8所示。图2-8文档工具栏下面简单介绍一下各种按钮意义。显示代码视图：仅在文档窗口中显示代码视图，代码视图以不同的颜色显示HTML代码，方便用户区分各种标签并对代码进行编辑。显示代码视图和设计视图：在文档窗口的一部分中显示代码视图，另一部分中显示设计视图。这样当用户在代码视图中编辑HTML源代码后，单击设计视图中的任意位置，会立刻看到相应的编辑结果。显示设计视图：仅在文档窗口中显示设计视图。在设计视图中可以直接编辑网页中的各个对象。文档标题：可为文档设置标题。浏览网页时，该标题将显示在浏览器的标题栏中。检查浏览器支持：检查跨浏览器兼容性，以减少或避免由于浏览器不同而造成网页版式、链接的混乱。验证标记：验证当前文档或整个当前站点中是否存在错误或警告。文件管理：单击该按钮将打开一个列表，选择其中的选项可以从远程站点取回文件，或者将文件由本地站点上传至远程站点。在浏览器中预览／调试：在浏览器中预览或调试文档，单击后可在弹出菜单中选择一个浏览器版本。刷新设计视图：用于在代码视图中进行更改后刷新文档的设计视图。在执行某些操作（如保存文档或单击“刷新设计视图”按钮）之前，用户在“代码”视图中所做得更改不会自动显示在“设计”视图中。视图选项：允许为代码视图和设计视图设置显示方式。例如，是否显示网格和标尺，哪个视图显示在上面等。温馨提示：如果当前视图为代码视图，则“视图选项”列表中只出现针对代码视图的选项；如果当前视图为设计视图，则“视图选项”列表中只出现针对设计视图的选项。可视化助理：设置在编辑网页时显示或隐藏某个可视化助理以便于操作，如显示表格边框、表格宽度等。2.1.4状态栏：状态栏位于文档窗口下方，它提供了与当前文档相关的一些信息，如图2-9所示。《Dreamweaver网页设计》电子版教科书第2章5图2-9状态栏标签选择器：针对HTML语言中的标签，其中显示了插入点所在位置的标签层次结构。单击某个标签可以选中网页中该标签所代表的内容，如单击“table”标签，可选中网页中与之对应的表格。知识库：标签选择器中显示对象层次结构的方式为自左向右，也就是说，在标签选择器中的位置越靠左，对象覆盖的范围就越大，如图2-9中最左边的“body”表示整个网页。选择工具：为默认选择工具，用于在页面中选取对象。手形工具：如果页面内容超出当前窗口，要平移页面，可选择“手形”工具，然后在页面中单击并拖动。缩放工具：可以放大或缩小文档。如要放大文档，可在选择该工具后，在页面上需要放大的位置上单击；如要缩小文档，可在按住【Alt】键的同时，在页面上单击。窗口大小：该数值仅在设计视图可见，它显示了文档窗口的当前尺寸。2.1.5属性面板与面板组：在Dreamweaver中，大多数操作都是通过面板实现的。下面讲解与面板相关的知识。“属性”面板位于文档窗口下方，主要用于查看或编辑所选对象的属性。例如，单击选中网页中的图像时，可以利用“属性”面板设置图像的路径、链接网页等，如图2-10上图所示；在表格单元格中单击时，“属性”面板如图2-10下图所示，此时可利用“属性”面板设置单元格中文字的格式，以及单元格的对齐方式和背景图像等。图2-10随操作对象变化而变化的属性面板除“属性”面板外，Dreamweaver8还提供了众多面板，如“文件”面板、“历史记录”《Dreamweaver网页设计》电子版教科书第2章6面板等。为便于管理，Dreamweaver8将这些面板归入到不同的面板组中。例如，“文件”面板组包含了“文件”面板、“资源”面板和“代码片段”面板，如图2-11左图所示：“CSS”面板组包含了“CSS样式”面板和“层”面板，如图2-11右图所示。不过，并非所有面板组都包含了多个面板。例如，“框架”面板组就只包含了一个面板。2.1.6调整Dreamweaver8工作界面：在Dreamweaver中制作网页时，经常需要对其工作界面进行各种调整。为方便后面的操作，下面我们简单介绍一下Dreamweaver8中面板的基本操作。Step01默认状态下，面板组位于文档窗口的右侧和下方。要关闭所有面板和面板组，可按【F4】键；再次按【F4】键，可恢复原来的状态。Step02要打开或关闭某个面板，可选择“窗口”菜单下的相应菜单项，如图2-12所示。例如，可选择“窗口”→“文件”菜单，打开或关闭“文件”面板。图2-11“文件”面板与“CSS样式”面板图2-12“窗口”菜单《Dreamweaver网页设计》电子版教科书第2章7Step03单击某个面板组的名称或名称左侧的按钮，可以展开面板组，此时按钮变为按钮；再次单击该按钮或面板组名称可以收缩面板组，如图2-13所示。图2-13收缩面板组Step04如要隐藏窗口右侧的所有面板，可单击该面板区域左侧的按钮，此时按钮将变成按钮，单击可重新显示面板；如果要隐藏窗口下方的面板，则单击按钮，如图2-14所示。图2-14隐藏面板区域Step05如果面板组包含了多个面板，可以在展开面板组后，通过单击面板标签在各面板之间切换。例如，展开“文件”面板组后，可以通过单击“文件”、“资源”标签在两个面板之间切换。Step06单击面板组标题栏左侧的按钮并拖动，可将面板组变为浮动状态。此时可拖动面板组标题栏，将其置于屏幕上任意位置，如图2-15所示。要还原面板组到文档窗口右侧的面板区域，可将其重新拖动至面板区域。Step07单击面板组右上角的符号，在弹出的菜单中选择“关闭面板组”，可关闭面板组，如图2-6所示。《Dreamweaver网页设计》电子版教科书第2章8Step08如果用户在更改面板组布局后又想恢复其原始布局，可选择“窗口”→“工作区布局”→“设计器”菜单。图2-15将面板组变为浮动状态图2-16关闭面板组2.2网站创建与管理：创建网站的第一步是根据所要创建网站的内容和性质确定网站栏目，然后在此基础上确定本地网站的目录结构，并在Dreamweaver中定义站点，下面就来看看这方面的内容。2.2.1确定网站结构：关于规划网站结构的相关知识，请参考本书1.3.1节内容。下面以规划博客网站为例，学习确定网站栏目和本地目录结构的方法。Step01本例规划的是一个小型播客网站，其栏目结构如图2-17所示。图2-17网站栏目结构Step02接下来确定网站的目录结构。首先在本地磁盘上创建用来保存网站内容（包括网页文件和图像、动画等）的文件夹，该文件夹被称为站点根文件夹，这里我们在本地磁盘中创建一个“lemon”文件夹。Step03为便于管理站点中的内容，还要在站点文件夹中创建若干子文件夹，以存放不同类型的文件。这里我们在“lemon”文件夹中创建一个“images”文件夹，用来保存网页中用到的图片、动画和视频素材，如图2-18所示。温馨提示：本例规划的是小型网站，可将网页保存在网站根目录下。对于大中型网站，最好根据网站栏目，创建若干子文件夹来分类保存网页和相关素材。Step04在开始网页制作之前，最好将网站中用到的所有素材文件都分类放置在站点文件夹中。这里我们将本书提供的素材“素材与实例”→“素材”→“lemon”→“images”文件夹中的文件复制到创建的站点文件夹中的“images”文件夹中。《Dreamweaver网页设计》电子版教科书第2章9图2-18规划站点目录结构温馨提示：关于网站中的文件夹和网页文档命名规则，请参考2.3.1节内容。2.2.2定义站点：规划好站点目录结构后，接下来需要在Dreamweaver中定义站点，即把在本地磁盘中创建的站点文件夹同Dreamweaver建立一定的关联，从而方便使用Dreamweaver管理站点和编辑站点内的网页文档，以及上传或下载站点内容等。下面是定义站点的具体操作步骤。Step01启动Dreamweaver8，选择“站点”→“新建站点”菜单，打开“未命名站点1的站点定义为”对话框，单击“基本”选项卡，在“您打算为您的站点起什么名字”编辑框中输入站点名（此处为“lemon”），然后单击“下一步”按钮，如图2-19上图所示。将素材中“images”文件夹中的文件复制到对应的文件夹中《Dreamweaver网页设计》电子版教科书第2