阿飙专线Dreamweaver直通车──内容篇 梦觉 2001年 44期 编者按:“将已有的知识条理化、系统化”，本系列教程以此为切入点，刊出两期后，在众多网页制作爱好者中引起了强烈反响。大家可以看到，我们在文章策划表达时，尽量避免了同类技术连载文章的枯燥性，同时融入了作者的大量宝贵经验，教给大家更多的是一种创作的思路和学习方法。 　　每期的“本期技巧提示”文章，希望初学者认真研究、实践（这些技巧可是只此一家，别无分号哦），可以省事不少。同时小编在此非常希望大家能对本栏多提一些意见，为栏目的建设添砖加瓦。 　　良好的结构需要与充实的内容相结合，才能表达出一个网站所需的各种信息。 　　它不应是简单的内容罗列，它需要合理信息组织得富有韵律和节奏，才能表达出我们希望传达给浏览者的信息。大家还可以参考《电脑报》第25期网页作坊的《个性化网页──内容艺术》一文，掌握网页内容设计主要的理论知识。 　　本篇将介绍Dreamweaver在内容组织方面的作用和需要遵循的规则，但并不仅仅是简单的教你如何将内容添加入页面中。我希望能传达给大家一些制作中重要的思想，希望朋友们能更多的考虑在内容方面应更多的关注什么？如何以简洁但又富有吸引力的内容来充实你的网站。 　　#1一、内容制作主要工具 　　Dreamweaver提供了清晰、有效、功能强大的工具，只有熟练掌握了这些高效工具，才能使你将更多的注意力集中到Web页面内容上。 　　#21.使用状态栏工作 　　状态栏位于文档窗口的底部，如^44040702a^1所示，包括如下4个工具: 　　（1）Tag Select（标示选择器）:可以准确快速的选定文档中的任何内容，选定的标签内容会相应的在属性面板中反映出来。 　　（2）Window Size（窗口尺寸）:这个弹出菜单中包含了常见的浏览器分辨率大小，从中选择一种屏幕分辨率可以快速观察你的页面在相应的屏幕中的状况。 　　（3）下载时间指示器:很多朋友在添加内容时常常会把尽可能多的内容元素放在页面中，也许看起来非常的漂亮，但还应更多的从访问者的角度来考虑。下载时间指示器提供了页面累计大小和通过特定的Modem访问页面所需的时间，过大的页面尺寸或太长的下载时间都会使浏览者离开你的“家”。 　　（4）Launcher（快速启动栏）:这个区域包含了常用的工具窗口的启动按钮，在制作过程中可以将需要用到的工具窗口快速的打开或关闭。 　　#22.Object面板简介 　　现在我们再来看看最重要的内容制作工具，Object面板（点击工具面板上方的“向下三角形”，即可看到弹出的Object面板，如^44040702b^2所示）。网页中的绝大多数内容的添加都可以通过Object面板实现。 　　（1）Common（通用对象）:这个面板包含了除文本以外最常用的HTML元素，例如图片、表格、水平标尺、E-mail链接、导航条、Flash文字、Flash按钮等等，从简单单一元素到复杂交互式元素都可以从这里插入（但对于初学者来说，最好先将其中的表格和图片两个元素掌握精通了，基本上可以应对网页中的绝大多数内容，贪多并不是一个好的学习方法）。 　　（2）Character对象:在这个面板中可以插入一些复杂特殊的字符，前面的11种是常用的一些字符，最后一种其实包含了99种更多不常用的字符。 　　（3）Forms对象。这里是插入交互式页面元素，如果不接触一些程序方面的交互式程序，这部分可以暂且放置到以后学习。 　　（4）Frames（框架元素）:这是我们在上一篇介绍过的生成框架页面的工具。 　　（5）Head（文件头元素）:插入Web页面头中常见的一些元素，这些元素有助于你的网页能被更多的人了解和发现。 　　（6）Invisible（隐藏对象）:这里可以将一些不可见的页面代码插入你的文件中。包括命名锚、备注、脚本。 　　（7）Special（特殊元素）:对一些浏览器扩充支持的元素我们可以在这里插入，一般我们用到的时候比较少。 　　#23.Property Inspector属性检查器 　　对于每个插入页面中的元素来说，都有不同的细节和参数需要我们设定，选择前面我们插入的不同元素对象，属性面板会有相应的变化，对于初学者来说，精通属性面板的每个参数设置至关重要，特别是关于文字、图像、链接和表格的属性面板参数。可以说成为高手往往从属性面板开始，进而深入每个属性参数的细节，直至源代码。 　　#1二、内容制作方法及要点 　　网页制作人员不仅仅是简单的输入、编辑、格式化网页内容，更重要的是如何使你的内容更有吸引力，使浏览者可以享受你的内容，而不仅仅是得到你的内容。 　　#21.文字内容组织方法 　　文字在网页中出现已经很久了，与其它文本处理相比，网页文本处理有许多相似的部分，但网页文本有它独特的要求，即必须努力精简代码，必须尽可能使样式和内容分离，必须尽可能使样式保持一定的规律。看看文本的属性面板，如^44040702c^3所示，相信大多数参数对朋友们来说都不陌生。 　　在各个页面之间进行文本的格式化时，保持前后的一致性非常重要，一个站点的各个页面标题、子标题、主题内容都应有统一的格式（我想提醒大家的是:属性面板最上方的属性和它的参数，在可能的情况下不要使用这部分参数，因为反复的使用font定义文本不仅会使代码复杂，而且缺乏有效的控制手段。我们推荐使用样式表来对文本进行全面的控制，后面我们将详细介绍样式表的功能）。 　　#22.网页中图像的使用 　　图像是使网页充满吸引力的主要元素，插入图像虽然简单，但使图像和其他页面内容能布局合理却并不简单。 　　（1）图像属性面板:对象面板中点击“插入图像”图标，插入并选中图像后，在如^44040702d^4所示属性面板中，我们可以看到此时图像只有最基本的宽和高参数以及图片路径，其他参数并未设置。 　　（2）设定边框:改变Border的数值可以使图片添加指定数值的边框，而边框的颜色将与当前文档的文本默认颜色一致。有时为图片添加链接时，会突然出现一个蓝色的边框，这时只要将Border值设为0即可消除这个边框。 　　（3）设置边距:V Space和H Space的值可以使图片与周围的元素保持一定的数值。 　　（4）命名标识:在属性面板图像缩略图旁边可以给图片一个标识文字，这个标识名可以使页面中的其他交互式程序能够调用这个图片进行交互动作。 　　（5）图像说明:Alt名称可以使鼠标移到图像上方时显示这个名称。 　　（6）指定低分辨率替代图片Low Src:在这个栏里可以为当前图片指定一个低分辨率版本的替代图片。在正式图片文件下载之前会先显示这个图片，所以我们常制作一个图片的灰度、低分辨率版本来使浏览者尽早看到图片外观。 　　（7）对齐方式:与普通文字的左、中、右对齐方式相比，图片还增加了更多的对齐选择，这个选项主要是指定图片与周围的文本的排版方式。其中设定此参数为Left和Right可以使图片与周围的文本混合起来排列，如^44040702e^5所示。 　　同时会在文本中出现一个标示图片实际位置的浮动图像锚（见图5中的标注），移动它可以改变图片和文本的实际排列位置。 　　（8）Reset Size:有时我们常常不小心改变了图片的原始尺寸，使用这个恢复尺寸按钮可以使图片以原始尺寸显示。 　　#23.创建链接 　　Web最重要的特点就是不同的文件和资源之间的相互链接，网络上的任何资源都可以通过链接的方法得到。链接不仅可以指向外部的一个文件，同时也可以指向当前文档中的一个部分。我们先认识属性面板，如^44040702f^6所示。 　　（1）添加链接:选定一个文本或图片，通过在链接地址中添入链接文件或地址，或者打开文件按钮定位外部的一个文件，我们都可以为指定的对象添加链接。链接格式可能是标准的http://www.bitgenius.com绝对地址，也可能是../lesson/lessons.htm相对地址格式。需要注意的是，通常中文路径和文件名不能得到很好的支持，所以最好避免这种现象的发生。 　　（2）添加锚点链接。如果想准确定位到当前文档的特定位置，可以先在目标位置插入一个命名锚符号，这可以通过Object面板的“Insert named anchor”符号插入（点击Object面板上方的“向下三角形”，在弹出的选项菜单中选择“Invisibles”选项，再点击“Insert named anchor”工具）。然后点击属性面板链结旁边的指向锚点符号，指向此位置即可，如^44040702g^7所示。 　　（3）目标窗口:我们还可以指定链接的目标文件打开的方式，_blank将使文件在一个新窗口中打开；_parent使文件在当前窗口的父级窗口中打开；_self使目标文件替代当前文件在同一窗口中打开；_top使目标文件在窗口组的最外级窗口中打开，这常用在框架结构的页面组中。 　　#24.创建列表内容 　　列表可以层次清晰地创建可识别的大纲和目录结构，常用的列表有无序列表和有序列表两种形式，如^44040702h^8所示。 　　列表跟其它文字处理工具使用方法基本相同，这里不再多作说明。 　　以上我们介绍了网页制作中添加常规内容需要注意的事项，实际工作中我们还会面对更多种类型的内容，如多媒体音频和视频文件等等，但只要你牢牢地掌握它们各自相对应的属性面板，你就会运用自如地操作这些内容。朋友们有什么意见和建议可以给我来信:mengjue@bitgenius.com。 　　#1 本期技巧提示： 　　#21.快速标签编辑 　　对于熟悉手写代码的朋友来说，经常需要切换到代码窗口手工添加一些代码。其实利用Dreamweaver的Quick Tag Editor可以快速插入各种HTML标签，一是点击属性面板的“Quick Tag Editor”图标插入（^44040702i^9）。另一种快捷方式是“Ctrl+T”，这两种方法都会打开快速标签编辑，可以直接从列表中选择需要的源代码标签。 　　#22.快速添加图片边框 　　虽然我们可以通过定义图片的Border属性为图片添加1px边框。但当需要对整个站点中的图片都添加一个像素边框时，就比较麻烦了。我们可以在样式表中重定义img标签，直接定义为四边都为1px的样式，则网页中所有插入的图片都会带有相同色彩和宽度类型的边框，具体方法我们会在后面的文章中进行讲解。 　　#23.如何加入背景声音 　　在Dreamweaver中对于一些多媒体声音文件的插入，很多朋友都感到有些困惑，其实很简单，点击Dreamweaver工作窗口最左下角的标签，打开Behavior面板，在弹出的behavior窗口点+号，选择Play Sound，选择你需要的声音文件即可加入。在文档窗口中选中声音文件标识，在属性面板点击Parameters就可以自行设定背景音乐的循环次数、是否自动播放等属性了。 　　#24.显示和编辑Web文件的头信息 　　执行下拉菜单View下的Head Content命令可以在文档窗口的顶端显示头内容窗口（^44040702j^10）。 　　再切换到Object面板的Head选项板，我们可以方便地加入多种Head标识对象，例如Keywords可以使搜索引擎更快地搜索到你定义的关键字；设定Base对象的Target属性值为Blank，可以使当前文档中的所有未定义链接目标窗口的连接都在空的新窗口中打开。