小诀窍让你快速上手DreamweaverWord格式.docx
《小诀窍让你快速上手DreamweaverWord格式.docx》由会员分享,可在线阅读,更多相关《小诀窍让你快速上手DreamweaverWord格式.docx(15页珍藏版)》请在冰点文库上搜索。
使不同分辨率的显示器都能较好地显示。
4、多用快捷键来提高效率
为了提高操作的效率,我们可以在Dreamweaver中使用快捷键,例如使用Ctrl-B或Ctrl-I来为文字应用黑体或斜体格式,也可以使用以下一些键盘快捷键来为选中的文本应用HTML格式:
Ctrl-0:
无格式 Ctrl-T:
段落 Ctrl-1:
标题1 Ctrl-2:
标题2
Ctrl-3:
标题3 Ctrl-4:
标题4 Ctrl-5:
标题5 Ctrl-6:
标题6
5、善于为对象取名
我们在用Dreamweaver来制作非常复杂的效果时,有可能需要经常重复地使用某一个或者多个对象,例如我们经常需要定位某个特定的表格、图象等,如果我们没有给某一个网页中的多个对象取名的话,那么在重复应用这些对象的时候,可能很麻烦或者容易出错。
为了能够方便调用这些对象,我们应该在每创建一个新的对象时,都记得给它取一个有代表性而且比较容易记忆的名称。
在给这些对象命名时,我们可以通过对象的“属性”面板来操作就行了。
6、一次链接到两个网页
我们都知道超级链接一次只能连到一个页面。
如果我们要想一次在不同的框架页中打开文档,可以使用“GoToURL”JavaScript行为。
打开一个有框架的网页,选择文字或图象,然后从行为面板中选择“GoToURL”。
我们会注意到Dreamweaver会在“GoToURL”对话框中显示所有可用的框架。
选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。
7、尽量不要给文件起中文名称
大家在制作好了网页后,通常会给网页起一个具有代表性的中文名称,一来能使人一看文件名就能大概了解文件所包含的内容,二来能够方便各个超级链接之间的相互调用。
但如果你在Dreamweaver中这样做,就会发现Dreamweaver对中文文件名支持得不是太好,经常会有页面调用不正确的现象发生,所以我们以后在Dreamweaver中保存网页的时候,尽量用英文或者数字作为文件名称,这样就可以避免上面的出错现象。
8、利用“FormatTable”命令来修饰网页
在复杂的网页设计中,表格的应用是最多的,因为利用表格可以自由地控制文本和图象在网页上出现的具体位置,从而使整个网页看上去紧凑统一。
Dreamweaver在这方面也不甘落后,我们可以使用其中的“FormatTable”(格式化表格)命令来快速地对表格应用预先设计好的样式。
要使用预先设计好的样式,先将光标置于表格的任意一个单元格内,再选择“Command”→“FormatTable”命令,在随后出现的对话框中,从左边的列表中选择一个设计方案。
按“Apply”键来查看效果,如果不满意的话,还可以重新设置或者修改部分参数的值,如边界粗细,背景颜色等等。
9、经常保存当前被编辑的文件
有网友说经常保存文件是不是怕突然死机呀?
这话当然没错,但我们在Dreamweaver中要经常保存文件还有它特别的意义。
因为我们在设计主页的时候,Dreamweaver会跟踪我们对文件作出的任何改动,也就是说即使我们在主页中简单地移动了一下某个对象,Dreamweaver也能生成大量的临时源代码,想象一下,如果在主页中作了很多改变,那么生成的这些大量代码就变得很难管理,从而会影响系统的性能。
因此我们发现如果Dreamweaver的性能开始降低,这可能是由于驻留在内存中的大量代码变得太庞大的缘故,只要保存一下文件,就会使这些临时代码消失,从而提高性能,所以以后我们在使用Dreamweaver时,要有经常保存文件的习惯。
10、隐藏不必要的标签
如果在网页中插入了不可见的元素时,Dreamweaver会自动在页面上添加一个与之相应的元素标签,以便于我们选择不可见元素。
但这并不全是件好事,比如我们在一个有很多层的页面中的第一行便插入一个表格,就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行,虽然在浏览时并不影响效果,但这确确实实会阻碍我们的工作。
所以当我们觉得某个元素标签碍手碍脚时,就索性将之屏蔽掉。
方法是按Ctrl+U打开Preferences面板,在Category中选中InvisibelElements,在面板的右边将会出现所有的元素标签。
只要将不需要的元素标签前的勾去掉,以后它就保证不会再出现了。
11、自动在网页中加入更新时间
我们知道一个网页要想获得更多的回头率,一个很重要的一条就是要不断更新。
但对于我们这些个人网页来说,要天天及时更新恐怕不是很容易的事情。
因此,我们希望网页能自动更新,下面笔者就提供一个能自动更新修改时间的源代码,我们只要把这段源代码添加到…<
/BODY>
之间就能实现更新时间的目的了:
<
ScriptLanguage="
JavaScript"
>
/Script>
12、让鼠标移到图象链接上有动态变化
有时我们为了要达到一种逼真的效果,希望鼠标移动到某个链接上时能有动感产生。
使用Dreamweaver可以很容易实现这种效果。
设计时,我们首先需要准备两幅图象,第一幅是原始图象,第二幅是鼠标移动上去后的图象。
接着用鼠标单击第一幅图,在属性面板中的链接栏中填上要链接的文件,然后单击键盘上的F8键,在弹出的Behaviors窗口中单击“+”号,随后选择“swapimage”,在接着出现的窗口中选择第二幅图象,最后单击确定就可以了。
Dreamweaver使用疑难解答七则
2001-6-616:
11:
30
如何解决切割图片的间隙
问:
我有一张大图片,把它切割后在Dreamweaver中进行拼接,可是总是有间隙,不知为什么?
答:
不知你是否把表格的边距、间距和边框设置为零,只要注意在分割图片时切片之间的距离和表格的设置就行了。
如何出现新窗口
请问当点击链接时,如何让链接的窗口“跳”出来,而不是让原来的页面转到那个链接的窗口呢?
你可以选中该链接,然后把属性面板上的“Target(目标)”改为“_blank”便可以了。
如何输入空格
我在编辑网页时经常要输入空格,但是总是不让输入!
请问如何输入?
这个问题经常有人提起。
其实在Dreamweaver中是不能直接输入空格的,你可以单击“Insert(插入)”——“Non-BreakingSpace(插入空格)”(快捷键:
Ctrl+Shift+空格键)来实现输入空格的目的,但是要注意在编辑状态下是看不到效果的,只有在浏览器上才能看到!
另外一种非常简单的方法是:
将你的输入法设置为全角状态(如图2)。
如果你想在编辑状态下看到的话,告诉你个最原始的办法:
在一些文字编辑软件中(比如记事本)复制空格,然后在Dreamweaver中进行粘贴。
关于页面的靠边
我做的网页四周总是留一点距离,我想让它靠边该如何操作呢?
选择Modify(修改)——PageProperties(页面属性),在出现的对话框中把LeftMargin(左边界)、TopMargin(上边界)、MarginWidth(边界宽)和MarginHeight(边界高)都设置为“0”便可以了。
关于层的转换
为了方便,我的主页有很多地方用了层,但是在朋友的电脑上不能正确显示(注:
朋友的浏览器是IE3.0版本的)!
不知为何?
IE3.0并不能对所有的层都正确识别,考虑到有的网友还在使用较早的浏览器,你可以把层转化为表格。
具体方法是单击“File(文件)”菜单,选择“Convert(转化)”,然后选择“3.0BrowserCompatible(3.0版浏览兼容)”,在出现的对话框中选中“LayerstoTable(将层转为表格)”,最后点OK便是。
为什么会出现黄颜色的标识符
我在用Dreamweaver编辑网页时,出现了黄色标识符,不知为什么?
这是由于网页代码中标识符不匹配或非法标识符引起的,解决方法就是删除掉非法标识符或改正不正确的代码。
插件是什么
我在网上经常看到一些关于Dreamweaver插件的介绍和下载,不知是什么意思?
插件是Dreamweaver的一个独特功能,使用它可以扩充Dreamweaver的功能,比如说你在网上下载了个可以制作动态下拉菜单的插件,那么以后你只要轻点几下鼠标设置一下就会制作出个动态下拉菜单来,不会再像以前那样费事了。
用Dreamweaver进行网页优化
2001-7-2510:
24:
04
在网页编织过程中如能充分利用编辑工具,也可以在网页制作中达到优化目的。
下面是Dreamweaver中的一些优化技法:
合理调用CSS
进行网页设计时,运用样式表单CSS来对页面元素进行布置,可以大大地减少HTML代码
,这点我们已经很清楚。
Dreamweaver中样式表的加入方法有多种,一是选定对象,从右键菜单中选择定义好的样式加入;
二是从样式面板中为对象选择样式;
三是在标签选择器上的某标签上单击右键选择样式。
这三种方法虽然获得的页面效果一样,但由于第一种方法会在HTML代码中产生一个“span”标签,如果过多地使用必定会使网页源文件大大增肥,影响下载速度。
因此调用CSS时,应采用第二、第三种方法。
为服务器减负
在交互网页中,用户常用表单向服务器提交数据,等待服务器的数据处理、返回浏览器……等待的过程是很令人心烦的。
为此,我们在进行网页编辑时,也有必要为服务器作个考虑。
Dreamweaver中制作网页,能为服务器减负的工作有一项做得较出色,就是对用户所提交的表单的合法性进行验证,只需在浏览器端进行,不必返回到服务器验证,既减轻了服务器的负担,又让浏览者少一份伤心的等待。
方法:
选中表单,打开“Behaviors”面板,点击“+”号选“ValidateForm”,然后进行设置即可。
顺便提醒,这个验证过程实际上是使用JavaScript在浏览器端作验证。
在Dreamweaver里进行上述操作时,它会把这段JavaScript代码放在网页头部与之中,这样必定会使页面的完全显示时间变长,因为浏览器要先下载这段代码才下载其他页面元素。
因此,最好在Dreamweaver中打开代码编辑器,把这段脚本程序剪贴到源代码的最后边,让其在最后下载。
另外,我们在为网页加入JavaScript脚本特效时,你如果不希望页面出现时马上生效,也不妨这样设置。
合理应用表格
我们不但要为服务器减负,对使用的浏览器我们更需要减负,也就是要尽可能地缩短浏览器对页面的解析时间,上面提及的JavaScript脚本加入就是一个例子。
影响浏览器对页面解析的还有表格,因为浏览器对表格的解析时间与表格的大小、复杂程度成正比,而我们在Dreamweaver中为了版式的安排,都是通过加入大量的表格来进行定位的,有些人甚至在大表格中套入多重的小表格,这实质上也是在加大浏览器的负担,使页面呈现时间大大加长。
为此在使用表格时,应尽量将表格打散,并要尽可能地避免表格的层层相套。
自我“减肥”
目前网页“减肥茶”很多,我们随处都可找到,而在Dreamweaver中,我们不必四处找“减肥茶”,利用其自身的“减肥”功能足可以使网页“苗条怡人”。
方法:
在“Commands”菜单下选择“CleanupHTML”,即可进行设置对网页冗余代码进行清除。
怎么样,经过这样一番清理,你的网页是不是清爽了许多?
!
欢迎各位与我交流。
设计网页页面
2001-3-2710:
57:
39
不管你是要运用HTML原始语法逐字逐字敲,来编写网页,或是运用标准化窗口来进行网页的视觉设计,以下的小秘诀都可以派得上用场。
1.让网页页面大小更有弹性
有些网页开发者称以下要介绍的这种技巧为liquid;
CNET在这儿则把这种技巧叫做是stretchy(弹性延伸的技巧)。
这是一种技巧,可在访客浏览器窗口大小改变时也随之调整网页页面大小,因此若是窗口过大就不会有空白处、窗口过小边缘就不会跑出上下移动的拉Bar。
其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小,但是若是网页里用到很多不同的框框及表格,网页页面大小就很难自动弹性地调整。
通常网页设计者会用混合运用固定栏宽的框框,和GIF图档作为间隔,来设计网页页面,这样一来不论是用InternetExplorer或是用NetscapeNavigator,页面大小都会固定而不会跑掉。
用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,以及影像档案。
底下我们要介绍更多将Dreamweaver与Macromedia家族产品搭配使用的方法。
搭配其它工具Macromedia产品
59:
02
Dreamweaver最炫的功能之一就是可以和Macromedia其它家族产品搭配使用。
与Fireworks搭配使用,Dreamweaver可以提供全功能、双向的图片编辑功能,你也可以轻易地在Dreamweaver内创造出Flash的文件及Flash按钮。
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·
FlashText,再将偏好设定一一填入(例如要变更效果的文字、字形、字体颜色及字体大小等等)。
自订使用接口
2001-3-2711:
00:
06
Dreamweaver是为了专业网页建构人士所设计的,因而对初学者来说,通常窗口画面功能稍嫌复杂,即使是对Dreamweaver网页制作老手来说,也会有常用的几项功能。
所以当然啦,你也可以自订Dreamweaver使用接口,只留下你最喜欢或常用的内容选项。
以下的三项小秘诀会教你如何设定。
7.更改键盘快速键
Dreamweaver可让使用者自订使用接口,这项设计十分有弹性。
举例来说,使用者可以透过撰写程序(programming)或自行增加对象(object)的方式来更改选单。
不必功力高深,你就可以更改键盘快速键,因为Dreamweaver有一项叫做KeyboardShortcutEditor的图形接口,只要点选Edit·
KeyboardShortcuts,对话框将加载并列出可以更动的快速键一览表,让你把快速键改成自己习惯用的设定值。
要更动快速键,只要使用现行设定(CurrentSet)和指令列(Command)的下拉选单,在现有的指令中找到想要更改的指令,接着选取目前的快速键,就会出现在快速键的列表中。
另外,若要增加快速键设