阿飙专线Dreamweaver直通车──内容篇

Author: 梦觉 Date: 2001年 44期

?牐牨嗾甙?:“将已有的知识条理化、系统化”,本系列教程以此为切入点,刊出两期后,在众多网页制作爱好者中引起了强烈反响。大家可以看到,我们在文章策划表达时,尽量避免了同类技术连载文章的枯燥性,同时融入了作者的大量宝贵经验,教给大家更多的是一种创作的思路和学习方法。
  ?牐犆科诘摹氨酒诩记商崾尽蔽恼拢M跹д呷险嫜芯俊⑹导ㄕ庑┘记煽墒侵淮艘患遥鹞薹趾排叮?,可以省事不少。同时小编在此非常希望大家能对本栏多提一些意见,为栏目的建设添砖加瓦。
  ?牐犃己玫慕峁剐枰氤涫档哪谌菹嘟岷希拍鼙泶锍鲆桓鐾舅璧母髦中畔ⅰ?
  ?牐犓挥κ羌虻サ哪谌萋蘖校枰侠硇畔⒆橹酶挥性下珊徒谧啵拍鼙泶锍鑫颐窍M锔勒叩男畔ⅰ4蠹一箍梢圆慰肌兜缒员ā返?25期网页作坊的《个性化网页──内容艺术》一文,掌握网页内容设计主要的理论知识。
  ?牐牨酒樯蹹reamweaver在内容组织方面的作用和需要遵循的规则,但并不仅仅是简单的教你如何将内容添加入页面中。我希望能传达给大家一些制作中重要的思想,希望朋友们能更多的考虑在内容方面应更多的关注什么?如何以简洁但又富有吸引力的内容来充实你的网站。
  #1?牐犚弧⒛谌葜谱髦饕ぞ?
  ?牐燚reamweaver提供了清晰、有效、功能强大的工具,只有熟练掌握了这些高效工具,才能使你将更多的注意力集中到Web页面内容上。
  #2?牐?1.使用状态栏工作
  ?牐犠刺肝挥谖牡荡翱诘牡撞浚鏭44040702a^1所示,包括如下4个工具:
  ?牐牐?1)Tag Select(标示选择器):可以准确快速的选定文档中的任何内容,选定的标签内容会相应的在属性面板中反映出来。
  ?牐牐?2)Window Size(窗口尺寸):这个弹出菜单中包含了常见的浏览器分辨率大小,从中选择一种屏幕分辨率可以快速观察你的页面在相应的屏幕中的状况。
  ?牐牐?3)下载时间指示器:很多朋友在添加内容时常常会把尽可能多的内容元素放在页面中,也许看起来非常的漂亮,但还应更多的从访问者的角度来考虑。下载时间指示器提供了页面累计大小和通过特定的Modem访问页面所需的时间,过大的页面尺寸或太长的下载时间都会使浏览者离开你的“家”。
  ?牐牐?4)Launcher(快速启动栏):这个区域包含了常用的工具窗口的启动按钮,在制作过程中可以将需要用到的工具窗口快速的打开或关闭。
  #2?牐?2.Object面板简介
  ?牐犗衷谖颐窃倮纯纯醋钪匾哪谌葜谱鞴ぞ撸琌bject面板(点击工具面板上方的“向下三角形”,即可看到弹出的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所示,相信大多数参数对朋友们来说都不陌生。
  ?牐犜诟鞲鲆趁嬷浣形谋镜母袷交保3智昂蟮囊恢滦苑浅V匾桓稣镜愕母鞲鲆趁姹晏狻⒆颖晏狻⒅魈饽谌荻加τ型骋坏母袷剑ㄎ蚁胩嵝汛蠹业氖?:属性面板最上方的<font>属性和它的参数,在可能的情况下不要使用这部分参数,因为反复的使用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.创建链接
  ?牐燱eb最重要的特点就是不同的文件和资源之间的相互链接,网络上的任何资源都可以通过链接的方法得到。链接不仅可以指向外部的一个文件,同时也可以指向当前文档中的一个部分。我们先认识属性面板,如^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所示。
  ?牐犃斜砀渌淖执?理工具使用方法基本相同,这里不再多作说明。
  ?牐犚陨衔颐墙樯芰送持谱髦刑砑映9婺谌菪枰⒁獾氖孪睿导使ぷ髦形颐腔够崦娑愿嘀掷嘈偷哪谌荩缍嗝教逡羝岛褪悠滴募鹊龋灰憷卫蔚卣莆账歉髯韵喽杂Φ氖粜悦姘澹憔突嵩擞米匀绲夭僮髡庑┠谌荨E笥衙怯惺裁匆饧徒ㄒ榭梢愿依葱?:mengjue@bitgenius.com。
  #1    本期技巧提示:
  #2?牐?1.快速标签编辑
  ?牐牰杂谑煜な中创氲呐笥牙此担P枰谢坏酱氪翱谑止ぬ砑右恍┐搿F涫道肈reamweaver的Quick Tag Editor可以快速插入各种HTML标签,一是点击属性面板的“Quick Tag Editor”图标插入(^44040702i^9)。另一种快捷方式是“Ctrl+T”,这两种方法都会打开快速标签编辑,可以直接从列表中选择需要的源代码标签。
  #2?牐?2.快速添加图片边框
  ?牐犓淙晃颐强梢酝üㄒ逋计腂order属性为图片添加1px边框。但当需要对整个站点中的图片都添加一个像素边框时,就比较麻烦了。我们可以在样式表中重定义img标签,直接定义为四边都为1px的样式,则网页中所有插入的图片都会带有相同色彩和宽度类型的边框,具体方法我们会在后面的文章中进行讲解。
  #2?牐?3.如何加入背景声音
  ?牐犜贒reamweaver中对于一些多媒体声音文件的插入,很多朋友都感到有些困惑,其实很简单,点击Dreamweaver工作窗口最左下角的<body>标签,打开Behavior面板,在弹出的behavior窗口点+号,选择Play Sound,选择你需要的声音文件即可加入。在文档窗口中选中声音文件标识,在属性面板点击Parameters就可以自行设定背景音乐的循环次数、是否自动播放等属性了。
  #2?牐?4.显示和编辑Web文件的头信息
  ?牐犞葱邢吕说?View下的Head Content命令可以在文档窗口的顶端显示头内容窗口(^44040702j^10)。
  ?牐犜偾谢坏絆bject面板的Head选项板,我们可以方便地加入多种Head标识对象,例如Keywords可以使搜索引擎更快地搜索到你定义的关键字;设定Base对象的Target属性值为Blank,可以使当前文档中的所有未定义链接目标窗口的连接都在空的新窗口中打开。