Dreamweaver技巧12条

时间:2016.09.08频道:Dreamweaver

一、背景分析 对想要在视觉化环境下制作复杂网页的专业网页制作者来说,Dreamweaver已渐渐在网页编辑工具中展露头角,成为专业人士编写网页的最好选择。根据Macromedia公司的调查,Dreamweaver现在已累积有超过七十万名的使用者,占有率在网页编辑工具中居冠

  一、背景分析

  对想要在视觉化环境下制作复杂网页的专业网页制作者来说,Dreamweaver已渐渐在网页编辑工具中展露头角,成为专业人士编写网页的最好选择。根据Macromedia公司的调查,Dreamweaver现在已累积有超过七十万名的使用者,占有率在网页编辑工具中居冠,像“AdobeGoLive”和“NetObjects Fusion”等竞争者都被遥遥抛在后头。因此一般地预估Dreamweaver的使用群体将会持续的增加。

  在这种势不可挡的普及率席卷之下,可想而知Dreamweaver内置的功能可说是越来越多、越来越丰富、齐全。在这次我们的介绍中,就有新增一些功能提供网页制作者一些更快速的设计、更容易地编码及整合性更强的功能。事不宜迟,以下我们介绍如何善用Dreamweaver里的一些功能。以下密技共有十二项,可分成四个主题。分别是:设计网页页面(Dreamweaver里具备弹性的页面设计功能)、搭配Macromedia其他产品一起使用Dreamweaver(制作动画和图片不求人)、自订使用界面(享受个性化的使用经验)和最后的加入Dreamweaver扩充程式(在网页中载入扩充高级功能)。

  二、设计网页页面的秘诀

  1:让网页页面大小更有弹性

  有些网页研发者称以下要介绍的这种技巧为“liquid”,在这儿则把这种技巧叫做是“弹性延伸的技巧”。这是一种技巧,可在访客浏览器窗口大小改变时也随之调整网页页面大小,因此假如窗口过大就不会有空白处;窗口过小边缘就不会跑出上下移动的拉条。其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小,但是假如是网页里用到很多不同的框架及表格,网页页面大小就很难自动弹性地调整。通常网页设计者会用混合运用固定宽度的框架,和GIF图片作为间隔来设计网页页面,这样一来不论是用InternetExplorer或是用Netscape Navigator,页面大小都会固定而不会跑掉。用Dreamweaver4.0能够轻而易举的设计出会自动弹性调整的网页。要怎么做呢?

  2:创造个人调色板

  Dreamweaver新的“Assetspanel”(属性控制面板)是一种能够在编辑网站时根据文档格式,例如图片、样式等来管理文档的新工具。 ★具体做法:当您定义新站点时(点选Site NewSite),任何类型的物体会自动增加到“Asset panel” 里的适当表框中。这个新加入的“Assetspanel”属性控制面板里也有颜色框,储存您网站里所用到的任何色彩,包含文字的颜色、背景的颜色,连同超链接的颜色等。这是个为使用者量身定做的网站导航颜色盘。只要启动“Assetspanel”(先选“Window”再点“Assets”),接着点左方那个小小的色彩卷轴,就能够看到您网站里各式各样的颜色选项。当然您能够将这些颜色拉到某些特定选取的文字中。甚至当您选择某种颜色时,画面上会出现这种颜色的十六进位值的色彩淡浓度,和三原色对照码(RGB)。假如想将调色板工具栏缩小一点,甚至能够仅加入某些颜色到调色板的“我的最爱”里。只需将选取的颜色反白、点选窗口里一个叫做“新增到我的最爱的”按钮(最下方靠右的按钮),就能够完成了。

  3:制作弹出式菜单导航系统

  原本要制作弹出式菜单导航系统(Pop-up Menu NavigationSystem)要用到很多的一些JavaScript的语法和技巧,但是假如您有Dreamweaver、Fireworks Studio,即可轻轻松松快速办到。具体做法:首先在“Fireworks”里开始,选择某个图片,然后在“SetPop-Up Menu”的对话框里点选“ 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的画面会出现“EditingFrom Dreamweaver”这样的文字和图样,指示您能够在Dreamweaver里进行图片编辑。)好了,现在在“Fireworks”里点选要编辑的图片,选择“Modify Animate Animate Selection”。 接下来完成“Animate dialogbox”里的配置,选定动画的帧数,动画移动的方向、透明度等等配置。您也能够点选“Frames”工具配置移动速度,选择“Object”面板来改变配置。要导出文档时,只要点选“Optimize ”工具栏,在文档类型的地方选择“Animated GIF”。完成以后,“Fireworks”就会自动将图片以最好化配置导出,并且自动将 GIF图片更新,还会在Dreamweaver里将更新过的图片显示出来。点选“File Preview inBrowser”,这样就能够在浏览器里预览刚刚制作完成的可爱图片。

  5:让按钮有闪动效果

  在Dreamweaver中,不用有Flashs,也能够制作有闪动效果的Flash按钮物体。Dreamweaver内置有好几个Flash按钮物体,能够制作好几个不同形式的按钮。具体做法:点选“InsertInteractive Images FlashButton”就可看到有那些内置按钮。在对话框内甚至能够用鼠标指到想要使用的按钮形式,然后看看在浏览器里的效果如何。用鼠标指针把要用的按钮形式选定,再依顺序输入参数,例如按钮上的文字、字形、颜色、超链接等,或是自设文档名字。按下OK。接下来就会有一个“SWF”格式的文档产生,文档并会自动导入您的网页中。按一下这个做好的文档,会看到“PropertyInspector”(属性明细)中会显示出文档的属性。将文档属性显示出来时,假如扩展文档属性明细表,会出现“Play”(播放),点选之后能够不用打开浏览器来预览按钮的闪动效果。

  6:制作流动文字

  在网页中增加流动文字就像增加我们刚刚介绍的Flash按钮相同简单。相同地,不用安装Flash,用 Dreamweaver提供的新功能就能够轻松办到。常用HTML语法写网页、没有互动式媒体经验的网页制作者也能够轻松制作出小巧的Flash形式的流动文字。这项新功能能够在不添加相兼容性麻烦的情况下为网页增添一些浏览上和访客的互动性。具体做法:点选"InsertInteractive Images Flash Text”,再将参数配置一一填入(例如要更改效果的文字、字形、字体颜色及字体大小等等)。

  7:更改键盘快捷键

  Dreamweaver可让使用者自订使用界面,这项设计十分有弹性。举例来说,使用者能够通过编写程式或自行增加物体(object)的方式来更改菜单。不必功力高深,您就能够更改键盘快捷键,因为Dreamweaver有一项叫做“KeyboardShortcut Editor”的图像界面。

  具体做法:只要点选“Edit KeyboardShortcuts”,对话框将载入并栏出能够改变的快捷键一览表,让您把快捷键改成自己习惯用的配置值。要改变快捷键,只要使用现行配置(CurrentSet)和命令栏(Command)的下拉菜单,在现有的命令中找到想要更改的命令,接着选取现在的快捷键,就会出现在快捷键的列表中。另外,假如要增加快捷键配置,能够点选“Plus”、在键盘上敲入您想使用的新快捷代表键,点选“改变”(Change)即可。同时您也能够选取某快捷键、点选“移除”(Minus),就能够移除某个快捷键。

  8:重新配置网站窗口(Site window)栏

  只要从“Sitewindow”中点选“View File View Columns”,就能够自字查看网站(Siteview)栏的大小及出现方式。选取某一栏的名称,使用上下箭头重新调整,或不要勾选显示栏(Showfield)以隐藏该栏。另外,点选“Plus”钮也能够新增栏,并自创栏名。此外,您也能够在下拉式菜单中选择现有的“note”来将栏和“DesignNote”产生关联。

  9:查看网页原代码

  当您打开“Reilly CodeReference”(WindowReference)来检查属性或是浏览器的兼容性时,预设的窗口会以细小的字型显示出“参考配置值”。但是假如您按下窗口右上方的右键(就在关闭按钮的下方),就会出现一排下拉式菜单,能够在这边选择原始代码字体的大小(小型字到中型字体连同大型字体)。选择大型字体比较不会“虐待”眼睛,因为这样您看HTML原代码时就不用拿着放大镜看屏幕了。

  10:新增Flash按钮

  在5中,我们介绍如何用20种预设的按钮类型,来制作Dreamweaver里的Flash按钮。这是不用另外安装任何文档或程式的方法。下面有另一种方法,就是安装“Fireworksbuttons”,这种扩充功能和秘诀5有相同的效果。具体做法:到 “Exchange forDreamweaver”(Dreamweaver 扩充功能交换中央) ,输入“InstaGraphics Extensions forDreamweaver”的关键字搜寻,然后再下载这个大约577K 的文档。转换到Dreamweaver,选择“Commands ManageExtensions”,再选择“File Install Extension”,就能够开始安装。一旦重新启动“Dreamweaver”,就有六个新奇有趣的按钮格式,包括“Surfboard”及“Bulletbar”在内, 这时只要使用“InsertInteractive Images Fireworks Button”命令,就能够制作出一个酷炫的按钮。您也能够用“commands ConvertBullets To Images”及 “Commands Convert Text To Images”,上述两种方法都能够自动执行“Fireworks”。

  11:在网页中加入“配置成我的最爱”功能★具体做法:在“Exchange”里搜寻,您就能够发现“AddTo Favorites”的扩充功能。这个小小的文档才占3K,下载时间不会等太久,接着循相同步骤,由“Extension Manager”载入(CommandsManage Extensions、File Install Extension)。接着重新启动 Dreamweaver,这个新载入的扩充文档会在Dreamweaver里新增一项功能。假如您的网页中加入这个“加入我的收藏集”的功能,这样一来使用者看到您的网站时,轻轻一按,就能够轻易地将您的网站加入他使用浏览器的“我的最爱”(或是个人书签)。此外,最炫的是也能够自订“我的最爱”名称,连同“我的最爱”名称前会出现的小图示(一般IE中“我的最爱”前面的小图示都是IE的预设值,假如您有自己设计的小图示,那就炫多了)。注意,这项功能只支持用IE 4.0连同更高版本的浏览器。只要选择“Windows”菜单里的“Behavior”面板,再到IE功能下拉菜单点选此项功能,即可轻松启动此酷炫功能。

  12:超酷的图表假如您想制作表格,还要自己花时间再逐字编写网页原代码吗?无需了,已有现成的了!具体做法:到Exchange下载“FormBuilderextension”,就有现成的表格,可让您马上复制包含像:国家、性别、婚姻状况、年龄层及其他目录等的表格。到Exchange下载这个小巧(只有11K)的文档,然后由“ExtensionManager”安装进来(Commands Manage Extensions, File Install Extension)。接着只要重新启动Dreamweaver,点选“Insert FormBuilder”,就会在(InsertFormBuilder)中发现扩充功能。点选了之后这时会有一个对话框出现,会显示出任何能够套用的格式菜单,实在很方便。
 

相关阅读Readings
留言评论Comment
精彩推荐Recommend
Copyright © 2010-2017 XPlaySoft.com 软件玩家 All Rights Reserved 粤ICP备12021207号