用DREAMWAVER3.0制作网页的实例

断定你对 dreamwaver 憧憬已久，正如其名字一律， dreamwaver 被很多喜好者称为网页创造的"幻想东西"，此刻跟着 3.0 本子的推出，大师确定急于控制这门凶器，那么，此刻咱们就走一条进修 dreamwaver 的捷径：经过一个范例来演示一回。 （图一） 上头是一个大略的对于"情谊链接"的页面（即是本站的“情谊链接”栏目），看似大略，要满意网页"场面＋载入快"的诉求仍旧小有本领的。咱们固然不至于来个 800 ＊ 600 音素的大后台图，而是沿用了左下角的贵妇人图（ 201 ＊ 299 ，也可进一步举行无缝切割），"情谊链接"四个字形成的小图，归来按钮及由几条蓝色带子形成的后台图（此图沿用 4 色 gif 图像，巨细不会胜过 8k ）。好，此刻咱们在此普通上看看用 dreamwaver 来创造该页面包车型的士进程：页面元素定位。用层你会创造从来十足这么大略！创造层只需 insert ＞ layer （插入＞层）。大概从 objects( 物件）面板中式点心 按钮，这时候鼠标会形成十字形，你拖动鼠标就可插入一个层。而后对层不妨经过其上的八个小控点举行拖动，夸大减少等。其余不妨采用该层，在属性面板中对其举行设定。咱们在页面上插入四个层，并在每个层中顺序插入页面顶用到的元素（或空着），而后大概移到符合的场所并安排层到符合的巨细，如次图： （图二）订餐单 modify ＞ layout mode ＞ convert layers to table （窜改＞构造形式＞层变化为表格），随后展示的对话框： （图三）most accurate 最大透彻度 , smallest: （ collapse empty cells ）指的是各个层的边际由于是手动画的，大概对的不齐，比方你本想让图二右边的两个层右边线在同一笔直线上，但本质画的会有些缺点。即使选中该项，那么凡场所出入 4 个音素的层城市机动对齐。 use transparent gifs 将用通明 gif 图像来弥补表格结果一条龙。如许做不妨保护表格在一切的欣赏器里看上去都没有变革。也即是保护了表格定位与层定位的庄重普遍。即使不选该项，在各别的欣赏器里大概会有一些分别。 center on page 表格在页面中心。要不为左对齐。 设定好后，看看截止能否适合你的构想： （图四）看，由层变化的表格定位很精确吧。比起本人径直插入表格再兼并对齐之类的本领功效高了很多。 １、选中所有表格，将表格后台图设为预先做好的蓝带子后台这边要指示一下，即使你凑巧采用了大后台图，比方符合 800 ＊ 600 辨别率的大底图（普遍要为单色或 4 色以次，以减小图形文献巨细），那就不应在页面属性中将其设为后台图，而要设为相映巨细的表格的后台图。要不在 1024 ＊ 768 辨别率下功效就会大打扣头。 ２、用behaviors东西增添动静功效为了使页面更放荡些，构想加两个特出功效：一个是鼠标放到贵妇人图片上时页面空缺处表露出一首诗来，另一个是更罕见的图片变革的功效，即鼠标放到归来按钮上时按钮脸色变换（本来是两张图片做个调换）。这固然是 javascript 的擅长好戏，但咱们可不想用它源代码。由于那些工作在 dreamweaver 中很简单实行。先增添一个层，将该层的 vis 属性设为 hidden （即该层一发端是看不见的）。在层中输出诗句，你不会忘怀在有文本的场合用款式表吧？（ f7 调出款式表窗口，将 .unnamed 的 size 设置为 9 即可）。翻开 behavior 东西条（按 f8 ）。选中左下角的贵妇人图，按下 behavior 面板中的＋号，选 show-hide layers 项 ，随后对话框中，展示了方才设置的层，咱们选中该层，并按下" show "按钮即可。第二步是使归来按钮有点儿动静功效，有两种本领不妨实行，最大略的即是从 objects( 物件 ) 面板中式点心按钮 ，你在对话框市直接输出要替代的两个图片路途称呼就行了。为了使这个例子更具代办性，咱们仍旧用 behavior 来实行。同样的，先选中归来按钮的第一个图片，翻开 behavior 面板，按＋号选 swap image 项，展示对话框： （图五）只须点击 browse 按钮选中筹备替代的图片即可。dreamweaver 有很多 javascript 因变量 - 文书档案重定向、图像调换、翻开窗口再有变换 layer 可视性的办法。用法与上头并行不悖，你本人试试看吧。３、 dreamweaver另一个令人眩手段东西：timeline，让你的层震动起来，直觉地展现一下dhtml的动静功效。单击 windows ＞ timelines （或按Ｆ９）启用功夫线，即使您往日交战过 macromedia 公司的 flash, 就会创造 timeline 的运用与在 flash 中的用法墨守成规。咱们要实行的这个例子，是让一只小蝴蝶从屏幕左边飞到屏幕右边。开始咱们用在前方报告过的层来兴建一个层，在层中插入小蝴蝶的图片（你不妨用你的任何图片代替，不行太大）， f9 翻开 timelines 面板，拖动层至 timelines 中，松开鼠标，再用鼠标采用结果一个要害帧（咱们选为第 120 帧），将层拖放至屏幕右上角，选中 autoplay 和 loop 项。您会看到如次图的情景： （图六）好了，按 f12 看看功效，蝴蝶袅娜飞！给没用过 flash 的伙伴们略微证明一下功夫线的用法：表白您暂时编纂的功夫线，表白归来最前方的一帧，表白归来至前方的一帧，表白归来至反面的一帧， autoplay 表白暂时页面在欣赏器中翻开后能否机动实行这个功夫线， loop ：轮回实行。圈子代办要害帧，表白爆发在东西上的功夫。 layer １是层名，赤色的小块表白暂时操纵的帧。 ４、给 dreamweaver3.0 减少 objects 控件dreamweaver3.0 减少了十分多的 objects 控件及不少的 behaviors, 该当不妨满意咱们的大局部需要了，但就象 photoshop 有多数的 plug-in 一律， dreamweaver 也有不少的插件可供载入，以是为了触类旁通，咱们结果也来弥补一个减少 objects 的例子。这个例子是做出页面加入和摆脱时的特出功效。http://www.macromedia.com/software/dreamweaver/download/extensions/ 即是一个载入插件的好场合，海内及台湾的织梦等站点也有不少可供载入的好东东。 down 下来后用 winzip 等软硬件解压至你的 dreamweaver 地方目次：比方\ macromedia\dreamweaver 3\configuration\objects\my 目次下， 提防 : my 这个目次是兴建的。而后从新启用 dw3 ，在你的 objects 控件面板上点下箭镞采用 my, 就会展示方才安置的插件图标，如图七 :（图七） 采用运转后界面如图八所示： （图八）采用实行此后按决定，此刻咱们结果看一下所有页面加载时的功效：（中央园形图形为上一页面包车型的士局部）。（如图）好了，这即是一个用 dreamweaver3 来创造网页的范例，让咱们共通交谈运用 dw3 的体味。