DreamWeaver超级技巧(中)
11. 制作背景音乐
在Dreamweaver中插入背景音乐是非常容易实现的,这里介绍两种方法,由大家选择。
(1)在页面不显眼的地方插入一空层 ,并在层内放入一个ActivX对象 ,双击该对象,在打开的对话框中选择一个MIDI音乐文件,然后在层对象属性面板中设定其可视性为“Hidden”,保存变动后按F12预览网页,听听是否有音乐声。
(2)另一种方法是利用Dreamweaver的“Behaviors”行为编辑器 ,单击“+”按钮,选择其中“Play Sound”选项,在弹出的对话框中选择一个音乐文件即可。自己动手试一试吧!
12. 让背景图不滚动
与FrontPage不同,Dreamweaver中插入的背景图是会随文字滚动的。有的时候我们需要制作固定的背景图,怎么办呢?先定义一张背景图,按“F10”打开HTML源文件,找到定义背景图片的语句,例如background=″images/background.JPG″,在它的后面空一格加上一句bgproperties=″fixed″。预览一下,是不是有点小小的成就感。
13. 定义大小不变的文字
为什么别人网页上的文字那么漂亮,不管你怎么按浏览器字体按钮上的大小,他们的字体尺寸都不会发生变化。其实他们使用了网页中的“CSS”样式表技术,在Dreamweaver中要实现这一功能是非常简单的。首先按“F7”或者选择“窗口”菜单中的“样式表”选项打开样式表编辑器,在窗口中单击鼠标右键选择“新建”,在弹出的对话框中输入需要定义的样式表名称,按“确定”,然后在列表中选择第一项“类型”,并给具体的文字属性定义参数(一般来说文字的大小在800×600的屏幕中选择10.5较为适宜),按“确定”后,定义好的样式表就出现了。选择网页编辑窗中的文本,单击新的样式表名,可以看到选中的文本发生的变化。预览一下,试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。
14. 插入Flash动画
Macromedia公司的Flash动画因其具有交互性、传送速度快等特点,已逐渐成为网页制作的一项新武器,如果你的网页上能插入一段Flash动画,那么一定会使你的作品增色不少。在Dreamweaver中插入Flash制作的SWF格式动画十分容易,单击对象工具栏上的Flash徽标或单击的“媒体”下的“Flash”,就可以打开选择SWF动画文件的对话框了,选好文件后可在其属性面板中设定播放的参数,即大功告成。
15. 让表格给网页留白
在Dreamweaver的新网页上输入文字时,默认格式是顶天立地的,十分不美观。要避免这一缺憾其实很简单,只要大家用好表格工具就行了。具体做法是:在新页面上插入一张居中对齐的表格,为了能够使表格方便控制,最好设定奇数列,并且数值不要太大。这样在单元格内输入的文字就被限制在一个可以随意调整宽度的区域内,就不愁文字不听使唤了。
16. 改变状态栏提示文字
一般情况下,当浏览器装入一个页面时,在其状态栏上显示的是该页面的地址名称,十分呆板。你有没有想过给浏览器的状态栏增加一点个性呢?如果有的话,那么请按照以下的步骤,定制自己喜欢的文字吧!首先打开“Behaviors”行为编辑窗,单击“+”按钮,选择“Set Text Set”下的“Text Of Status Bar”选项,然后在方框中输入自己的文字,例如“欢迎来到我的主页”等,单击“确定”即可。
17. 整合的文本代码编辑器
可视化网页编辑软件的最大不便之处就是很难对源代码进行编辑,更别说JavaScript了;不过Dreamweaver?将使你处理代码变得异常轻松。这个内建的文本代码编辑器主要的新功能是:自动缩排(可以一次选取多行进行缩排),?还可以进行符号的检测,如果在编写代码忘了一个“”,它将给出提示。在工具表中的下拉菜单会列出当前网页中所有自定义JavaScript函数,可让你在网页原代码中自由跳转,“原始码导航工具”可以让专业人士方便地处理JavaScript函数,在文本代码编辑器中输入JavaScript代码,系统将用不同的颜色来显示。
18. 在Dreamweaver中输入多个空格
我们平时输入的空格是半角字符,在Dreamweaver中只能输入一个,要想输入多个空格只要输入全角空格就可以了。输入全角空格的方法是:打开中文输入法,按Shift+Space切换到全角状态。这时你输入的空格就是全角空格了。
19. 解决Dreamweaver的BUG之一
在Dreamweaver 3.0中行为面板(Behavior inspector)中,“Events for”下拉菜单项无法打开。这样一来,很多特技效果形同虚设,根本没法制作。其实这应该算Dreamweaver 3.0和中文Windows98不兼容的一个地方吧,在英文Windows98中就没有这个问题。而实际上这个菜单还是可以打开的,只不过是不能正确显示罢了。在选中下拉菜单后,我们可以用上下键来选择我们想要用的浏览器。
20. 用Dreamweaver 3.0的模版制作网页,设置行为(Behavior)
在使用模板(Template)做出來的网页中不能新增行为。这是因为新增行为需要在HTML文件的Head部分之中插入JavaScript,而使用了Template后,HTML文件的Head部分会被“封锁”住。如果要在使用模板生成的网页中应用行为,你就需要事先在模板中定义好行为,然后把它定义为模板的可编辑区域。随后,你就可以在网页中更改这个行为了。但这也只限于更改行为的触发事件(events)和动作(actions)的具体内容,而不能更改动作的类型。
21. 给文字施加行为(Behavior),制作动态文字特效
在Dreamweaver中普通的文字是以字符为单位的,不能作为对象,即一些非常有用的JavaScript事件不能赋予文字。因为文字不像图片和其他控件有具体的“标记”,所以文字与很多特效失之交臂。为了给文字添加特效,只有把文字做成超链接来处理。这样文字就成为了对象,可以施加行为了。但是这样又带来了一些不需要的超链接属性,比如下划线,以及hover、visited等颜色变化。 要想单纯为文字添加特效,可以先把所想设置的文字做成超链接,然后再在它的上面添加行为,最后我们再把超链接转变为普通文字。具体的步骤如下:
选中你想编辑的文字,在链接目标框里随便填入几个字符。选中这个链接,单击窗口(Windows)→行为(Behaviors),弹出行为面板。按下“+”添加你想要的行为,如play sound等。打开Dreamweaver的超文本编辑器,找到这个链接,把改为,把改为。最后把“href=...”删掉。保存此页。按F12预览一下。效果还不错吧!
22. 精确定位网页中各个元素的位置
精确定位网页中各个元素的位置有两种方法:使用表格或层。使用表格是目前比较通用的做法,具体方法是:先在网页中建立一个表格,注意表格的边框宽度应为0。然后再把各个元素按照你的要求放在各个表格单元之中。仔细调整表格单元的大小以及表格边框的位置,这时在表格单元中的元素也会随之移动位置。这样你就可以比较精确地定位网页中各个元素的位置了。使用表格的优点是通用,几乎各个版本的浏览器可以致支持表格。它的缺点是使用起来比较麻烦,需要仔细进行调整,而且定位不十分精确。层在网页中可以随意放置,因此我们可以使用层来进行精确定位。使用方法是,在网页中插入一个层,然后把你想要定位的元素放在层里,接着我们就可以把层放到所想要任何位置了。此外,你还可以借助标尺和网格进行精确的定位。因为层只在最新的浏览器中被支持,所以为了兼容旧的浏览器,我们可以把层转变为表格。方法是选择“修改(Modify)→版面布局模式(Layout Mode) →把层转化成表格(convert layers to table)”即可。注意这时的层不能有重叠,我们可以在插入层之前选择“查看(view) →防止层交错(prevent layer overlaps)”来避免层的重叠。一般来说转换后的页面可能会有一些变化,还需要我们手工进行调整。最后有一点要注意,在进行表格和层的相互转换时,最好不要在一个页面中同时使用层与表格,那样可能会把你的页面弄得一团糟。
23. 改变浏览者的鼠标形状
这是通过编辑样式表来实现的。具体方法是:选择“文字(text)→定制样式(CSS Style)→编辑样式表(Edit Style Sheet)”,弹出编辑样式表窗口,在其中选择“新建(new)”。接着选择“建立一个定制的样式(Make custom style)”,给这个样式表起名,单击确定。编辑该样式表,选择扩展项(extension),在右边的光标项(Cursor)中选择要出现的指针效果即可。
24. 去掉超链接文字之下的下划线
这一效果是通过编辑样式表来实现的。具体方法是:“点击文字(text)→定制样式(CSS Style)→编辑样式表(Edit Style Sheet)”,出现编辑样式表窗口,选择“新建(new)”。接着选择重定义HTML标记(Redefine HTML Tag),并在下面的标记(Tag)选单中选择a。编辑该样式表,选择类型(type),在右边的装饰(decoration)中选中无(none )即可。
25. 制作一个跟着页面走的图像
这一效果是通过JavaScript实现的。一般来说完成这样一个效果需要一定的编程能力,但现在我们可以通过Dreamweaver的插件轻易地实现。你可以到http://www.computerinfo.com.cn/classroom/chajian/chajian2.zip下载这个插件。插件的安装方法:解压缩后拷贝到Dreamweaver下的文件夹Configuration/Objects内的一个新建文件夹里面即可。重新启动Dreamweaver之后,我们就可以在对象面板之中找到新安装的插件了。点击插件的图标,在弹出的对话框中填入图像的存放地址以及图像的显示位置就可以了。
热门专业排行榜