您好,欢迎来到素彩网!

Dreamweaver技巧十二招

来源:sc115.com | 67 次浏览 | 2011-07-09

标签: Dreamweaver Dreamweaver技巧十二招 Dreamweaver综合教程

  对想要在可视化的环境下制作复杂网页的专业网页制作者来说,Dreamweaver已经渐渐在网页编辑工具市场中展露头角,成为专业人士编写网页的最佳选择。以目前的情况来说,Dreamweaver内建的功能可说是越作越多、越作越丰富、齐备。在这里我要向大家介绍的4.0版本中的一些应用小技巧。

  1.让网页页面更有弹性
  有些网页开发者称以下要介绍的这种技巧为liquid,我在这儿则把这种技巧叫做是stretchy(弹性延伸的技巧)。这是一种技巧,可在访客浏览器窗口大小改变时也随之调整网页页面大小,因此若是窗口过大就不会有空白处、窗口过小边缘就不会跑出上下移动的拉Bar。其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小,但是若是网页里用到很多不同的框框及表格,网页页面大小就很难自动弹性地调整。通常网页设计者会用混合运用固定栏宽的框框,和GIF图档作为间隔,来设计网页页面,这样一来不论是用InternetExplorer或是用,页面大小都会固定而不会跑掉。用Dreamweaver4.0可以轻而易举的设计出会自动弹性调整的网页。要怎么做呢?
  用工具面版(Objectpalette)上的按钮开启网页,并且转换到格式检视(Layoutview)。这时可以看到文字方块的列宽,每一列的方框上方中间还有一个小小的下拉式箭头,选择想要设定弹性显示的列上方的小箭头,接着选择「将列设为弹性显示」(MakeColumnAutostretch)。(设定自动调整列宽以一列为限)这时该列方框上方就会出现一条波浪形的线,而不是原本表示列宽的数字。Dreamweaver会自动制作出固定版面的空格图文件,这个空白图文件是以列上方的两个长条形的空白表格表示,如此版面会自动被填充,才会完成弹性版面设定。(在第一次增加空白图文件时会跳出一个对话框问你是否要使用内建图档,为求效果,我建议你让Dreamweaver自动产生一个,不然就不用使用空白图文件来填充版面。)

  2.创造个性化调色
  Dreamweaver4.0新的Assetspanel(属性控制面板)是一种可以在编辑网站时根据档案型态,例如图片、样板等来管理档案的新工具,当你定义新站台时(选择Site·NewSite),所有类型的组件会自动增加到Assetpanel里的适当表框中。这个加入新的Assetspanel属性控制面版里也有颜色框,储存你网站里所用到的所有色彩,包含文字的颜色、背景的颜色,以及连结的颜色等。这是一个为使用者量身定做的网站导向颜色盘。只要激活Assetspanel(先选择Window·再选择Assets),接着选择左方那个小小的色彩滚动条,就可以看到你网站里各式各样的颜色选项。当然你可以将这些颜色拉到某些特定选取的文字中。甚至当你选择某种颜色时,画面上会出现这种颜色的十六进制值的色彩浓淡度,和三色对应码(RGB)。如果想将调色盘工具列缩小一点,甚至可以仅加入某些颜色到调色盘的收藏夹里。只需将选取的颜色反白、选择窗口里一个叫做「添加到我的收藏夹」按钮(最下方靠右的按钮),就完成了。

  3.制作弹出式选单导览系统
  原本要制作弹出式选单导览系统(Pop-upMenuNavigationSystem)要用到好一些JavaScript的语法技巧,但是若你装了Dreamweaver/FireworksStudio,轻轻松松即可快速办到。首先在Fireworks里开始,选择某个图片,然后在SetPop-UpMenu的对话框里选择Insert·Pop-UpMenu,你可以输入项目(items)的名称并选择Plus(加入)按钮,来新增该项目。你可以继续在跳出来的讯息框里进行细项设定,例如设定该项目所要用的文字及连结,当然也可以新增子选单、并重新安排下一层的设定。完成时,选择Next(下一步),继续设定偏好值,例如颜色、字体等等。这时选单完成后,可以预览HTML语法,也可预览影像。再选择Finish(完成)。这时当鼠标移动到原来的图案时,会出现选单系统的内容一览。接着将制作好的档案汇出时,Fireworks会自动生产出所有Dreamweaver需要用到的HTML、JavaScript,以及影像档案。

  4.让图档动起来!
  如果你同时安装有Dreamweaver/FireworksStudio,这两种产品搭配的完美程度将使你赞不绝口。即使你不是专业的图档设计者,在设计网页时也多多少少想把一些GIF图片文件修改得活灵活现。Dreamweaver可以让你制作动画不求人喔!在标准窗口里选择要进行修改的图片,然后在PropertyInspector里选择编辑钮(Edit)。如果你安装的Dreamweaver里附有Fireworks,Fireworks就是Dreamweaver预设图片编辑器,这时图片就会自动加载到Fireworks。(若仔细看,各位会发现Fireworks的画面会出现EditingFromDreamweaver这样的文字和图样,指示你可以由Dreamweaver里进行图片编辑。)好了,现在在Fireworks里选择要编辑的图片,选择Modify·Animate·AnimateSelection。接下来完成Animatedialogbox里的设定,选定动画的框架数,动画移动的方向、透明度等等设定。你也可以选择Frames工具列设定移动速度,选择Object面版来改变设定。要汇出档案时,只要选择Optimize工具列,在档案类型的地方选择AnimatedGIF。完成以后,Fireworks就会自动将图片以最佳化设定汇出,并且自动将GIF图档更新,还会在Dreamweaver里将更新过的图档秀出来。选择File·PreviewinBrowser,这样就可以在浏览器里预览刚刚制作完成的可爱图档!

  5.让按钮有闪动效果
  在Dreamweaver中,不用有Flash程序,也可以制作有闪动效果的Flash按钮对象。4.0版内建有好几个Flash按钮对象,可以制作好几个不同形式的按钮。选择Insert·InteractiveImages·FlashButton就可看到有哪些内建按钮。在对话框内甚至可以用鼠标指到想要使用的按钮形式,然后看看在浏览器里的效果如何。用鼠标光标把要用的按钮形式选起来,再依序输入参数,例如按钮上的文字、字形、颜色、连结等,或是自定文件名称。按下OK。接下来就会有一个SWF档产生,档案并会自动置入你的网页中。按一下这个做好的档案,会看到PropertyInspector(属性明细)中会秀出档案的属性。将档案属性秀出来时,如果扩展档案属性明细表,会出现Play(播放)钮,选择之后可以不用开启浏览器来预视按钮的闪动效果。

  6.制作流动文字
  在网页中增加流动文字就像增加我刚刚介绍的Flash按钮一样简单。相同地,不用安装Flash,用Dreamweaver4.0提供的新功能就可以轻松办到。常用HTML语法写网页、没有交互式媒体经验的网页制作者也可以轻松制作出小巧的Flash形式的流动文字。根据Macromedia表示,有97%的网络使用者可以观看有Flash效果的网页,因此这项新功能可以在不添加兼容性麻烦的情况下为网页增添一些浏览上与读者的互动性。选择Insert·InteractiveImages·FlashText,再将偏好设定一一填入(例如要变更效果的文字、字形、字体颜色及字体大小等等)。

  7.更改键盘快速键
  Dreamweaver可让使用者自定使用接口,这项设计十分有弹性。举例来说,使用者可以通过撰写程序(programming)或自行增加对象(object)的方式来更改选单。不必功力高深,你就可以更改键盘快速键,因为Dreamweaver有一项叫做KeyboardShortcutEditor的图形接口,只要选择Edit·KeyboardShortcuts,对话框将加载并列出可以更动的快速键一览表,让你把快速键改成自己习惯用的设定值。要更动快速键,只要使用现行设定(CurrentSet)和指令列(Command)的下拉选单,在现有的指令中找到想要更改的指令,接着选取目前的快速键,就会出现在快速键的列表中。另外,若要增加快速键设定,可以选择Plus钮、在键盘上敲入你想使用的新快速代表键,选择变更(Change)即可。同时你也可以选取某快速键、选择移除键(Minus),就可以移除某个快速键。

  8.重新设定网站窗口(Sitewindow)列宽
  只要从Sitewindow中选择View·FileViewColumns,就可以自定检视网站(Siteview)时列宽的大小及呈现方式。选取一列宽的名称,使用上下箭头重新调整,或不要勾选显示字段(Showfield)以隐藏该列。另外,选择Plus钮也可以新增列,并自创列名。此外,你也可以借着在下拉式选单中选择现有的note来将列和DesignNote产生关连。

  9.阅读网页原始档
  当你开启O'ReillyCodeReference(Window·Reference)来检查属性或是浏览器的兼容性时,预设的窗口会以细小的字型显示出参考设定值。但是若你按下窗口右上方的右键钮(就在关闭按钮的下方),就会出现一排下拉式选单,可以在这边选择原始文件字体的大小(小型字,到中型字体以及大型字体)。选择大型字体比较不会虐待眼睛,因为这样你看HTML原始档时就不用拿着放大镜看屏幕了!

  10.新增Flash按钮
  在上面我已经教你如何用20种预设的按钮类型,来制作Dreamweaver里的Flash按钮。这是不用另外安装任何档案或程序的方法。底下有另一种方法,就是安装Fireworksbuttons,这种扩充功能和技巧五有相同效果。到ExchangeforDreamweaver(Dreamweaver扩充功能交换中心),输入"InstaGraphicsExtensionsforDreamweaver"的关键词搜寻,然后再下载这个577K的档案。转换到Dreamweaver,选择Commands·ManageExtensions,再选择File·InstallExtension,就可以开始安装。一旦重新激活Dreamweaver,就有六个新奇有趣的按钮型态,包括Surfboard及Bulletbar在内,这时只要使用Insert·InteractiveImages·FireworksButton指令,就可以制作出一个酷炫的按钮。你也可以用commands·ConvertBulletsToImages及Commands·ConvertTextToImages,上述两种方法都可以自动执行Fireworks。

  11.在网页中加入「设定成收藏夹」功能
  在Exchange里搜寻,你就可以发现AddToFavorites的扩充功能。这个小小的档案才占3K,下载时间不会等太久,接着循相同步骤,由ExtensionManager加载(Commands·ManageExtensions,File·InstallExtension)。接着重新激活Dreamweaver,这个新加载的扩充档案会在Dreamweaver里新增一项功能。如果你的中网页加入这个「加入收藏夹」的功能,这样一来网络使用者逛到你的网站时,轻轻一按,就可以轻易地将你的网站加入他使用浏览器的收藏夹(或是个人书签)。此外,你也可以自定收藏夹快捷方式名称,以及收藏夹快捷方式名称前中会出现的小图标(一般IE中收藏夹的快捷方式前面的小图标都是IE的默认值,若你有自己设计的小图标,那就酷多了。注意啦,这项功能只支持用IE4.0以及更高版本的浏览器。只要选择Windows选单里的Behavior面版,再到IE功能下拉选单那儿选择此项功能,即可轻松激活此酷炫功能。

  12.超酷的图表
  如果你想制作表格,还要自己花时间再逐字敲打网页原始码吗?不需要了,已经有现成的啦!到Exchange下载FormBuilderextension,就有现成的表格,可让你马上复制包含像国家、性别、婚姻状况、年龄层及其它目录等的字段表格。到Exchange下载这个小巧(只有11K)的档案,然后经由ExtensionManager安装进来(Commands·ManageExtensions,File·InstallExtension)。然接着只要重新激活Dreamweaver,选择Insert·FormBuilder,就会在(Insert·FormBuilder)中发现扩充档。选择了之后这时会有一个对话框出现,会秀出所有可以套用的格式选单。

搜索: Dreamweaver Dreamweaver技巧十二招 Dreamweaver综合教程 

最热-Dreamweaver综合教程

用Dreamweaver打造活动菜单条

如何批量消除网页连接上的“虚线框”

用Dreamweaver MX打造文字特效

使用Dreamweaver便捷技巧方法十六则

Dreamweaver MX技巧之超链接

网页编辑常用表现的实现方法

Dreamweaver构建Blog全程实录(4):首页的实现(上)

Dreamweaver构建Blog全程实录(4):首页的实现(下)

Dreamweaver构建Blog全程实录(12):上传安装

Dreamweaver构建Blog全程实录(11):站内搜索

DreamweaverMX打造留言本二

DreamweaverMX打造留言本三

DreamweaverMX打造留言本(五)

素材
古典书画艺术PPT模板古典书画艺术PPT模板
金鱼动态PPT模板金鱼动态PPT模板
个人简历PPT模板免费下载个人简历PPT模板免费下载
竹石古典文化PPT模板竹石古典文化PPT模板
静物物语PPT模板静物物语PPT模板
幽雅之夜黑色背景PPT模板幽雅之夜黑色背景PPT模板
清风蓝韵背景PPT模板清风蓝韵背景PPT模板
网络人物与博客PPT模板网络人物与博客PPT模板
工作汇报PPT模板免费下载工作汇报PPT模板免费下载