第三章　内容篇

　　良好的结构需要与充实的内容相结合，才能表达出一个网站所需的各种信息。Web媒体的不断变化发展让每个人兴奋异常，但同时也让许多人对它的发展感到迷惑和手足无措，作为设计师的我们需要集中精力将所有信息转化为合理的页面内容。而良好的页面不应是简单的内容罗列，它需要合理的将信息组织的富有韵律和节奏，才能表达出我们希望传达给浏览者的信息。本篇将介绍Dreamweaver在内容组织方面的作用和需要遵循的规则，但并不仅仅是简单的教你如何将内容添加入页面中。我希望能传达给大家一些制作中重要的思想，希望朋友们能更多的考虑在内容方面应更多的关注什么？如何以简洁但又富有吸引力的内容来充实你的网站。

一、 内容制作主要工具。Dreamweaver提供了清晰、有效、功能强大的工具，只有熟练的掌握了这些高效工具，才能使你将更多的注意力集中到Web页面内容上。

1、 使用状态栏工作。在进行内容的添加和组织过程中，养成时刻关注状态栏的变化是非常好的习惯。状态栏位于文档窗口的底部，如图一，包括如下四个工具：

1） Tag Select(标示选择器)：可以准确快速的选定文档中的任何内容，当你的页面结构变得复杂和多样时，它可以帮助你快速找到需要编辑的内容，你选定的标签内容会相应的在属性面板反映出来。

2） Window Size(窗口尺寸)：这个弹出菜单中包含了常见的浏览器分辨率大小，从中选择一种屏幕分辨率可以快速观察你的页面在相应的屏幕中的状况。

3） 下载时间指示器：很多朋友在添加内容时常常会把尽可能多的内容放在页面中，例如大量的图片、声音和其他多媒体文件，也许看起来非常的漂亮，但作为一个Web设计者应更多的从访问者的角度来考虑问题。下载时间指示器提供了页面累计大小和通过特定的Modem访问页面所需的时间，过大得页面尺寸和太长的下载时间会使浏览者离开你的页面。一般来说，超过50K的页面对普通浏览者来说会难以忍受，当然这还要和你的页面具体内容相关。

4） Launcher(快速启动栏)：这个区域包含了常用的工具窗口的启动按钮，在制作过程中可以快速的将需要用到的工具窗口快速的打开和关闭，这不仅方便，而且使工作窗口保持简洁。

2、 Object面板简介。介绍完我们的工作状态栏，我们再来看看最重要的内容制作工具，Object面板。可以说网页中的绝大多数内容的添加都可以通过Object面板实现。

1) Common(通用对象)：这个面板包含了除文本以外最常用的HTML元素，例如图片、表格、水平标尺、E-mail链接、导航条、Flash文字、Flash按钮等等，从简单单一元素到复杂交互式元素都可以从这里插入，但对于初学者来说，最好先将其中的表格和图片两个元素掌握精通了，基本上可以应对网页中的绝大多数内容，贪多并不是一个好的学习方法。

2) Character对象：在这个面板中可以插入一些复杂特殊的字符，前面的11种是常用的一些字符，最后一种其实包含了99种不常用的更多字符。

3) Forms对象。这里是插入交互式页面元素的主要手段，如果不接触一些程序方面的交互式程序，这部分可以暂且放置到以后学习。

4) Frames(框架元素)：这是我们在上一讲介绍过的生成框架页面的工具。

5) Head(文件头元素)：插入Web页面头中常见的一些元素，这些元素有助于你的网页能被更多的人了解和发现。

6) Invisible(隐藏对象)：这里可以将一些不可见的页面代码插入你的文件中。包括命名锚、备注、脚本。

7) Special(特殊元素)：对一些浏览器扩充支持的元素我们可以在这里插入，一般我们用到的时候比较少。

3、 Property Inspector属性检查器。对于每个插入页面中的元素来说，都有不同的细节和参数需要我们设定，选择前面我们插入的不同元素对象，属性面板会有相应的变化，对于初学者来说，精通属性面板的每个参数设置至关重要，特别是关于文字、图像、链接和表格的属性面板参数。可以说成为高手往往从属性面板开始，进而深入每个属性参数的细节，直至源代码。

二、 如何抓住浏览者的注意力。网页制作人员不仅仅是简单的输入、编辑、格式化网页内容，更重要的是如何使你的内容更有吸引力，使浏览者可以享受你的内容，而不仅仅是得到你的内容。

1、 文字内容组织要点。文字在网页中出现已经很久了，与其它文本处理相比网页文本处理有许多相似的部分，例如标题、段落、列表、对齐方式等等，但网页文本有它独特的要求，即必须努力的精简代码，必须尽可能使样式和内容分离，必须尽可能使样式保持一定的规律。看看文本的属性面板，相信大多数参数对朋友们来说都不陌生，因为在其他的文本处理软件中也会遇到相似的这些设置参数。

　　在各个页面之间进行文本的格式化时，保持前后的一致性非常重要，一个站点的各个页面标题、子标题、主题内容都应有着统一的格式。但我想提醒大家的是：尽可能的忘记属性面板最上方的<font>属性和它的参数，在可能的情况下不要使用这部分参数，因为反复的使用font定义文本不仅会使代码复杂，而且缺乏有效的控制手段。我们推荐使用样式表来对文本进行全面的控制，后面我们将详细介绍样式表的功能。

2、 网页中图像的使用。 图像是使网页充满吸引力的最早的非文本元素，插入图像虽然简单，但使图像和其他页面内容能布局合理却并不简单。

1） 插入：对象面板中点击 图标插入图像后，在属性面板我们可以看到此时图像只有最基本的宽和高尺寸参数以及图片路径，其他参数并未设置。

2） 设定边框：改变Border的数值可以使图片添加指定数值的边框，而边框的颜色将与当前文档的文本默认颜色一致。有时为图片添加链接时，会突然出现一个蓝色的边框，这时只要将Border值设为0级可消除这个边框。

3） 设置边距：V Space和H Space的值可以使图片与周围的元素保持一定的数值。

4） 命名标识：在属性面板图像缩略图旁边可以给图片一个标识文字，这个标识名可以使页面中的其他交互式程序能够调用这个图片进行交互动作。

5） 图像说明：Alt名称可以使鼠标移到图像上方时显示这个名称。

6） 指定低分辨率替代图片Low Src：在这个栏里可以为当前图片指定一个低分辨率版本的替代图片。在正式图片文件下载之前会先显示这个图片，所以我们常制作一个图片的灰度、低分辨率版本来使浏览者尽早看到图片外观。

7） 对齐方式：与普通文字的左中右对齐方士相比，图片还增加了更多的对齐选择，这个选项主要是指定图片与周围的文本的排版方式。其中设定此参数为Left和Right可以使图片与周围的文本混合起来排列，如图：

　　同使会在文本中出现一个标示图片实际位置的浮动图像锚，移动它可以改变图片和文本的实际排列位置。

8） Reset Size：有时我们常常不小心改变了图片的原始尺寸，使用这个恢复尺寸按钮可以使图片以原始尺寸显示。

3、 创建链接。Web最重要的特点就是不同的文件和资源之间的相互链接，也就是说网络上的任何资源都可以通过链接的方法得到。链接不仅可以指向外部的一个文件，同时也可以指向当前文档中的一个部分。

1) 添加链接。选定一个文本或图片，通过在链接地址中添入链接文件或地址，或者从打开文件按钮定位外部的一个文件，我们都可以为指定的对象添加链接。链接格式可能是标准的http://www.bitgenius.com/绝对地址，也可能是../lesson/lessons.htm相对地址格式。需要注意的事，通常中文路径和文件名不能得到很好的支持，所以最好避免这种现象的发生。

2) 添加锚点链接。如果想准确的定位到当前文档的特定位置，可以先在目标位置插入一个命名锚符号，这可以通过Object面板的 符号插入。然后点击属性面板链结旁边的指向锚点符号，指向此位置即可。如图：

3) 目标窗口。我们还可以指定链接的目标文件打开的方式，_blank将使文件在一个新窗口中打开;_parent使文件在当前窗口的父级窗口中打开；_self使目标文件替代当前文件在同一窗口中打开；_top使目标文件在窗口组的最外级窗口中打开，这常用在框架结构的页面组中。

4、 创建列表内容。列表可以清晰的创建可识别的大纲和目录结构，常用的列表有无需列表和有序列表两种形式。

1) 无序列表。在属性面板点击无序列表按钮，可以在当前位置插入一个无序列表符号，输入你的列表文字后回车，会自动添加下一个列表项。在添加了多个列表项后。

2) 有序列表。有序列表的优点是可以自动产生项目的编号。

3) 嵌套列表。我们也可以改变某个列表项的层次，选中一个列表项点击缩进按钮，当前列表项会自动成为上一个列表项的子内容列表，即多级列表，而前面的列表符号也自动与它的父级不同。

4) 改变列表符号。将光标定位在一个列表项中，打开属性面板的List Item对话框，我们可以修改列表符号的默认外观，对于无序列表，有矩形和圆形两种符号。对于有序列表有多种编号形式可选择。但需要注意的是，当列表内容包含在表格中时，这个选项并不会出现。这也许是一个小小的Bug。

以上我们简单的介绍了网页制作中添加常规内容需要注意的事项，实际工作中我们还会面对更多种类型的内容，如多媒体音频和视频文件等等，但只要你牢牢地掌握他们各自相对应得属性面板，你就会运用自如的操作这些内容。

本期技巧提示：

1、 快速标签编辑。对于熟悉手写代码的朋友来说，经常需要切换到代码窗口手工添加一些代码。其实利用Dreamweaver的Quick Tag Editor可以快速插入各种HTML标签，一个是点击属性面板的 图标插入，另一种快捷方式是Ctrl+T，这两种方法都会打开快速标签编辑，可以直接从列表中选择需要的源代码标签，如下图：

2、 快速添加图片边框。虽然我们可以通过定以图片的Border属性为图片添加1px边框。但当需要对整个站点中的图片都添加一个像素边框时，就比较麻烦了。我们可以在样式表中重定义img标签，直接定义为四边都为1px的样式，则网页中所有插入的图片都会带有相同色彩和宽度类型的边框。如图：

3、 如何加入背景声音。在Dreamweaver中对于一些多媒体声音文件的插入，很多朋友都感到有些困惑，其实很简单，点击Dreamweaver 工作窗口最左下角的 <body> 标签，打开Behavior面板，在弹出的behavior窗口点+号，选择Play Sound，选择你需要的声音文件即可加入。在文档窗口中选中声音文件标识，在属性面板点击Parameters就可以自行设定背景音乐的循环次数、是否自动播放等属性了。

4、 显示和编辑Web文件的头信息。执行下拉菜单View下的Head Content命令可以在文档窗口的顶端显示头内容窗口。

　　再切换到Object面板的Head选项板，我们可以方便的加入多种Head标识对象，例如Keywords可以是搜索引擎更快的搜索到你定义的关键字；设定Base对象的Target属性值为Blank，可以使当前文档中的所有未定义链接目标窗口的连接都在空的新窗口中打开。