Dreamweaver小秘诀.docx
- 文档编号:27870337
- 上传时间:2023-07-05
- 格式:DOCX
- 页数:60
- 大小:56.99KB
Dreamweaver小秘诀.docx
《Dreamweaver小秘诀.docx》由会员分享,可在线阅读,更多相关《Dreamweaver小秘诀.docx(60页珍藏版)》请在冰豆网上搜索。
Dreamweaver小秘诀
十二个Dreamweaver鲜为人知的小秘诀
一、背景分析
对想要在视觉化环境下制作复杂网页的专业网页制作者来说,Dreamweaver已经渐渐在网页编辑工具中展露头角,成为专业人士编写网页的最佳选择。
根据Macromedia公司的调查,Dreamweaver目前已累积有超过七十万名的使用者,占有率在网页编辑工具中居冠,像“AdobeGoLive”和“NetObjectsFusion”等竞争者都被遥遥抛在后头。
因此一般地预估Dreamweaver的使用群体将会持续的增加。
在这种势不可挡的普及率席卷之下,可想而知Dreamweaver内置的功能可说是越来越多、越来越丰富、齐全。
在这次我们的介绍中,就有新增一些功能提供网页制作者一些更快速的设计、更容易地编码及整合性更强的功能。
事不宜迟,以下我们介绍如何善用Dreamweaver里的一些功能。
以下密技共有十二项,可分成四个主题。
分别是:
设计网页页面(Dreamweaver里具有弹性的页面设计功能)、搭配Macromedia其它产品一起使用Dreamweaver(制作动画和图片不求人)、自订使用界面(享受个性化的使用经验)和最后的加入Dreamweaver扩充程序(在网页中载入扩充高级功能)。
二、设计网页页面的秘诀
不管你是要运用HTML原始语法逐字逐字来编写网页,或是运用标准化窗口来进行网页的视觉设计,以下的小秘诀都可以派得上用场。
秘诀1:
让网页页面大小更有弹性
有些网页开发者称以下要介绍的这种技巧为“liquid”,在这儿则把这种技巧叫做是“弹性延伸的技巧”。
这是一种技巧,可在访客浏览器窗口大小改变时也随之调整网页页面大小,因此如果窗口过大就不会有空白处;窗口过小边缘就不会跑出上下移动的拉条。
其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小,但是如果是网页里用到很多不同的框架及表格,网页页面大小就很难自动弹性地调整。
通常网页设计者会用混合运用固定宽度的框架,和GIF图片作为间隔来设计网页页面,这样一来不论是用InternetExplorer或是用NetscapeNavigator,页面大小都会固定而不会跑掉。
用Dreamweaver4.0可以轻而易举的设计出会自动弹性调整的网页。
要怎么做呢?
★具体做法:
用工具面板(Objectpalette)上的按钮打开网页,并且转换到“格式查看”(Layoutview)。
这时可以看到文字方块的栏度,每一栏的方框上方中间还有一个小小的下拉式箭头,点选想要设置弹性显示的栏上方的小箭头,接着选择“将栏设为弹性显示”(MakeColumnAutostretch)。
(设置自动调整栏的宽度以一栏为限)这时该栏方框上方就会出现一条波浪形的线,而不是原本表示栏度的数字。
Dreamweaver会自动制作出固定版面的空格图片,这个空白图片是以栏上方的两个长条形的空白表格表示,如此版面会自动被填充,才会完成弹性版面设置。
(在第一次增加空白图片时会跳出一个对话框问你是否要使用内置图片,为求效果,我们建议你让Dreamweaver自动产生一个,不然就不用使用空白图片来填充版面。
)
秘诀2:
创造个人调色板
Dreamweaver新的“Assetspanel”(属性控制面板)是一种可以在编辑网站时根据文件格式,例如图片、样式等来管理文件的新工具。
★具体做法:
当你定义新站点时(点选SiteNewSite),所有类型的物体会自动增加到“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”里点选要编辑的图片,选择“ModifyAnimateAnimateSelection”。
接下来完成“Animatedialogbox”里的设置,选定动画的帧数,动画移动的方向、透明度等等设置。
你也可以点选“Frames”工具设置移动速度,选择“Object”面板来改变设置。
要导出文件时,只要点选“Optimize”工具栏,在文件类型的地方选择“AnimatedGIF”。
完成以后,“Fireworks”就会自动将图片以最佳化设置导出,并且自动将GIF图片更新,还会在Dreamweaver里将更新过的图片显示出来。
点选“FilePreviewinBrowser”,这样就可以在浏览器里预览刚刚制作完成的可爱图片。
秘诀5:
让按钮有闪动效果
在Dreamweaver中,不用有Flashs,也可以制作有闪动效果的Flash按钮物体。
Dreamweaver内置有好几个Flash按钮物体,可以制作好几个不同形式的按钮。
★具体做法:
点选“InsertInteractiveImagesFlashButton”就可看到有那些内置按钮。
在对话框内甚至可以用鼠标指到想要使用的按钮形式,然后看看在浏览器里的效果如何。
用鼠标指针把要用的按钮形式选定,再依顺序输入参数,例如按钮上的文字、字形、颜色、超链接等,或是自设文件名字。
按下OK。
接下来就会有一个“SWF”格式的文件产生,文件并会自动导入你的网页中。
按一下这个做好的文件,会看到“PropertyInspector”(属性明细)中会显示出文件的属性。
将文件属性显示出来时,如果扩展文件属性明细表,会出现“Play”(播放),点选之后可以不用打开浏览器来预览按钮的闪动效果。
秘诀6:
制作流动文字
在网页中增加流动文字就像增加我们刚刚介绍的Flash按钮一样简单。
相同地,不用安装Flash,用Dreamweaver提供的新功能就可以轻松办到。
常用HTML语法写网页、没有互动式媒体经验的网页制作者也可以轻松制作出小巧的Flash形式的流动文字。
这项新功能可以在不添加相兼容性麻烦的情况下为网页增添一些浏览上与访客的互动性。
★具体做法:
点选“InsertInteractiveImagesFlashText”,再将参数设置一一填入(例如要更改效果的文字、字形、字体颜色及字体大小等等)。
秘诀7:
更改键盘快捷键
Dreamweaver可让使用者自订使用界面,这项设计十分有弹性。
举例来说,使用者可以通过编写程序或自行增加物体(object)的方式来更改菜单。
不必功力高深,你就可以更改键盘快捷键,因为Dreamweaver有一项叫做“KeyboardShortcutEditor”的图形界面。
★具体做法:
只要点选“EditKeyboardShortcuts”,对话框将载入并栏出可以改动的快捷键一览表,让你把快捷键改成自己习惯用的设置值。
要改动快捷键,只要使用现行设置(CurrentSet)和命令栏(Command)的下拉菜单,在现有的命令中找到想要更改的命令,接着选取目前的快捷键,就会出现在快捷键的列表中。
另外,如果要增加快捷键设置,可以点选“Plus”、在键盘上敲入你想使用的新快捷代表键,点选“改变”(Change)即可。
同时你也可以选取某快捷键、点选“移除”(Minus),就可以移除某个快捷键。
秘诀8:
重新设置网站窗口(Sitewindow)栏
★具体做法:
只要从“Sitewindow”中点选“ViewFileViewColumns”,就可以自字查看网站(Siteview)栏的大小及出现方式。
选取某一栏的名称,使用上下箭头重新调整,或不要勾选显示栏(Showfield)以隐藏该栏。
另外,点选“Plus”钮也可以新增栏,并自创栏名。
此外,你也可以在下拉式菜单中选择现有的“note”来将栏和“DesignNote”产生关联。
秘诀9:
查看网页原代码
★具体做法:
当你打开“ReillyCodeReference”(WindowReference)来检查属性或是浏览器的兼容性时,预设的窗口会以细小的字型显示出“参考设置值”。
但是如果你按下窗口右上方的右键(就在关闭按钮的下方),就会出现一排下拉式菜单,可以在这边选择原始代码字体的大小(小型字到中型字体以及大型字体)。
选择大型字体比较不会“虐待”眼睛,因为这样你看HTML原代码时就不用拿着放大镜看屏幕了。
秘诀10:
新增Flash按钮
秘诀5中,我们介绍如何用20种预设的按钮类型,来制作Dreamweaver里的Flash按钮。
这是不用另外安装任何文件或程序的方法。
下面有另一种方法,就是安装“Fireworksbuttons”,这种扩充功能和秘诀5有相同的效果。
★具体做法:
到“ExchangeforDreamweaver”(Dreamweaver扩充功能交换中心),输入“InstaGraphicsExtensionsforDreamweaver”的关键字搜寻,然后再下载这个大约577K的文件。
转换到Dreamweaver,选择“CommandsManageExtensions”,再选择“FileInstallExtension”,就可以开始安装。
一旦重新启动“Dreamweaver”,就有六个新奇有趣的按钮格式,包括“Surfboard”及“Bulletbar”在内,这时只要使用“InsertInteractiveImagesFireworksButton”命令,就可以制作出一个酷炫的按钮。
你也可以用“commandsConvertBulletsToImages”及“CommandsConvertTextToImages”,上述两种方法都可以自动执行“Fireworks”。
秘诀11:
在网页中加入“设置成我的最爱”功能★具体做法:
在“Exchange”里搜寻,你就可以发现“AddToFavorites”的扩充功能。
这个小小的文件才占3K,下载时间不会等太久,接着循相同步骤,由“ExtensionManager”载入(CommandsManageExtensions、FileInstallExtension)。
接着重新启动Dreamweaver,这个新载入的扩充文件会在Dreamweaver里新增一项功能。
如果你的网页中加入这个“加入我的收藏集”的功能,这样一来使用者看到你的网站时,轻轻一按,就可以轻易地将你的网站加入他使用浏览器的“我的最爱”(或是个人书签)。
此外,最炫的是也可以自订“我的最爱”名称,以及“我的最爱”名称前会出现的小图示(一般IE中“我的最爱”前面的小图示都是IE的预设值,如果你有自己设计的小图示,那就炫多了)。
注意,这项功能只支持用IE4.0以及更高版本的浏览器。
只要选择“Windows”菜单里的“Behavior”面板,再到IE功能下拉菜单点选此项功能,即可轻松启动此酷炫功能。
秘诀12:
超酷的图表
如果你想制作表格,还要自己花时间再逐字编写网页原代码吗?
不需要了,已经有现成的了!
★具体做法:
到Exchange下载“Form.Builderextension”,就有现成的表格,可让你马上复制包含像:
国家、性别、婚姻状况、年龄层及其他目录等的表格。
到Exchange下载这个小巧(只有11K)的文件,然后由“ExtensionManager”安装进来(CommandsManageExtensions,FileInstallExtension)。
接着只要重新启动Dreamweaver,点选“InsertFormBuilder”,就会在(InsertFormBuilder)中发现扩充功能。
点选了之后这时会有一个对话框出现,会显示出所有可以套用的格式菜单,实在非常方便。
网页制作技巧
网页界面设计技巧
由于越来越多的企业开始建立自己的网站,网站除了具有传播信息的功能外,还往往代表企业的形象。
网站建设商业化和广告化的趋势,对网页设计的艺术性提出了更高的要求。
虽然HTML语言提供了对常用Windows标准控件的支持,但是,由于Windows标准控件的形状和颜色十分单一,网页的视觉效果可能会很差。
例如:
列表框和下拉列表框只能呈现凹陷边框,而且下拉列表的箭头的颜色不能改变,滚动条只能出现在窗口的下边和右边,当网页分成多个帧的时候,滚动条就不可避免的出现在网页的中间,破坏网页的整体性。
若在网页的设计中主动配合Windows标准控件的形状和颜色,网页的创作空间就会受到限制。
因此,有必要实现网页中的自定义控件,以满足网页设计艺术化的要求。
编程原理
用客户端的JavaScript脚本语言,对HTML语言的
标记定义了HTML文档中的一个行内间隔,可以给这个间隔赋一个id属性,给整个间隔一个统一的颜色、字体、边框、背景等属性,使整个间隔响应相同的事件,可以用这个标记制作菜单、树形结构目录、列表框及下拉列表框的某一项。
多个标记可以放在同一行内,组成下拉式菜单的菜单条。
标记定义了HTML文档中的一个矩形区域,可以给这个区域赋一个id,给整个区域一个统一的颜色、字体、边框、背景等属性,使整个区域响应相同的事件,通过设置标记的style.display属性为block或none可以在运行时动态的显示或隐藏这个区域,可以用这个标记制作树形结构目录的子目录、弹出式菜单、下拉式菜单的某一子菜单、列表框及下拉列表框。
通过程序代码设置
标记的style.posLeft、style.posTop、style.posWidth、style.posHeight属性,可以在运行时动态的改变区域的位置和大小,用来设计滚动条。列表框和下拉列表框
在一个
标记中放置一组标记,不同的标记间用标记换行,形成一个列表框。
给标记添加事件,使其能根据鼠标的位置改变颜色。
在标记的onclick事件中,完成指定的操作或将所选择的项目的innerText或id属性存放与隐藏控件或变量中,以便检索所选择的项目。
在网页中放置一个标记作为下拉列表框。
在下拉列表框的右边放置另外一个标记,设置这个标记的背景图片,形成下拉箭头。
在下拉列表框的下边放置一个
标记制作的列表框作为下拉列表,设置下拉列表的style.display属性为none,然后根据鼠标动作显示或隐藏列表。编写列表项目的onclick事件处理程序,将所选择的项目文本放在下拉列表框中。
弹出式菜单
由于网页不能响应鼠标右键,因此,在网页中只能用鼠标左键的click事件实现弹出式菜单。
按照列表框的设计方法设计弹出式菜单,将弹出式菜单
标记的style.display属性设置为none。在document的click事件中,通过设置
标记的style.posLeft和style.posTop属性,将弹出式菜单移动到光标所在的位置,将标记的style.display属性设置为block,显示菜单。当鼠标离开菜单时,隐藏菜单。
下拉式菜单
用一个标记制作菜单条,菜单条标记中嵌
套几个标记作为子菜单。
按照弹出式菜单的设计方法,分别为每一个子菜单设计下拉菜单。
通过响应子菜单的鼠标事件,显示或隐藏下拉式菜单。
为了方便程序移植,可以将菜单数据放在数组里,在程序中通过document对象的write方法动态生成菜单。
滚动条
在网页中放置一个
标记作为滚动条的背景,设置背景的颜色和图片,背景图片的重复属性设置为repeat-x。在背景区域的左右两端放置两个
标记作为滚动条的左右箭头,设置左右箭头的背景颜色和背景图片。在背景区域的中间放置一个
标记作为滚动条的滑块,设置滑块的背景颜色和背景图片,背景图片的重复属性设置为repeat-x。在滚动条的上面覆盖一个事件
标记用来响应鼠标事件,不设置这个标记的背景颜色和背景图片属性,使其透明。为了能正确的看到滚动条的各个部分并使事件
区域能截获鼠标事件,应使事件标记的Z-INDEX属性最大,背景标记的Z-INDEX属性最小。在事件
标记的鼠标事件中,通过比较鼠标window.event.clientX和滚动条各个部件的相对位置进行不同的滚动操作。在window对象的load事件和resize事件中根据窗口和网页的大小改变滚动条各个部件的大小和位置。
在网页中放置一个
标记,将网页中需要滚动的部分都放在这个区域中。在滚动条的滚动事件中通过改变这个标记的style.posLeft和style.posTop属性,实现网页的滚动。
用以上方法实现的滚动条,可以设计成任意的大小和颜色,放置在网页的任意位置,选择任意的图片作为箭头和滑块的背景,极大的满足艺术化设计网页的需求。
本文利用了HTML标记和
的风格属性,在网页中实现了菜单、树形结构目录和自定义的滚动条、列表框、下拉列表框。到目前为止,只有运行在Windows平台下的浏览器InternetExplore支持这种风格属性,实际应用中应当判断客户浏览器类型,以便提供不同的网页。
在浏览网页的时侯,常常可以看见一些“当前网站上的人数是XXX人”的在线人数同计。
如何用ASP来做一个呢?
首先,分析一下它的做法,一般来说,这些线上人数统计都是指一个时段内的访客人数统计。
比如(5分钟内,10分钟内)而这个时间的长短,是由设计者设定的。
在这个时段内同计各个不同IP的访客总数,就可以得出当前的线上人数了,但这里有一个精确问题需要解决,至于用什么办法来精确地统计,那就是各人不同的做法了,比如可以用自动提交的页面,隔一段时间读取COOKIES等等,而在ASP中,有一个更好的技巧,就是使用session对象来统计,这里介绍一下gobal.asa这个文件,这是一个很重要的一个文件,请看看它的结构。
SubSession_OnStart
EndSub
SubSession_OnEnd
EndSub
subApplication_OnStard
EndSub
subApplication_OnEnd
EndSub
当有一个会话发生时(用户浏览网页,向Web服务器发出请求)那么,如果自服务器启动后第一个用户的话,就会同时发生Application_OnStard和Session_OnStart这两个事件,之后,再有别的用户发出请求的话,就只发生Session_OnStart这个事件,而session的生存期是多长,是可以设定的,Session.timeout=X(分钟)
好了,有了这个很好用的方法,我们就能准确地统计出在线人数了,而人数总计是用一个application变量来保存,当在第一个会话开始时,在Application_OnStard事件中放置一条清空计数器的语句application("online")=0,然后,在Session_OnStart事件中,放置一条增加在线人数的语句application("online")=application("online")+1,而在Session_OnEnd事件相应地放一条减少在线人数的语句,令计数值减一。
这样,这个文件就改为如下
SubSession_OnStart
application("online")=application("online")+1
EndSub
SubSession_OnEnd
application("onli
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver 秘诀