DW使用十二技巧
使用Dreamweaver进行网页设计的实用技巧

使用Dreamweaver进行网页设计的实用技巧第一章:简介Dreamweaver是一款非常流行的网页设计工具,广泛应用于网页开发行业。
它提供了丰富的功能和工具,使得网页设计变得更加高效和便捷。
本章将介绍Dreamweaver的基本功能和使用方法。
第二章:创建新网页Dreamweaver可以轻松地创建新的网页。
首先,点击“文件”菜单,然后选择“新建”。
在弹出的对话框中,选择网页的类型和所需的模板。
输入网页的名称和保存位置。
接下来,可以通过拖放方式添加文本、图像和其他元素。
第三章:编辑网页内容Dreamweaver提供了强大的编辑工具,可以轻松编辑网页的内容。
通过双击网页中的文本或图像,可以直接进行编辑。
还可以使用“视图”菜单中的“代码视图”查看和编辑HTML和CSS代码。
此外,Dreamweaver还提供了智能提示和自动完成功能,帮助用户更快速地编辑网页内容。
第四章:样式和布局设计Dreamweaver提供了丰富的样式和布局设计工具,帮助用户创建美观的网页。
可以使用“CSS样式”面板添加样式,并对文本、图像等元素进行格式化。
还可以使用网格系统和定位工具来设计网页布局。
通过拖放元素和调整属性,可以实现更具吸引力的页面设计。
第五章:导航设计一个好的导航设计可以提升用户体验,并使网站更易于导航。
Dreamweaver提供了多种导航设计工具,如导航栏、下拉菜单等。
可以使用这些工具轻松地创建导航栏,并将其链接到其他页面。
还可以设置导航栏的样式和交互效果,使得导航更加直观和易用。
第六章:响应式设计随着移动设备的普及,响应式设计已成为网页设计中的重要方面。
Dreamweaver提供了一些有用的工具和功能,用于创建响应式网页。
可以使用媒体查询和自适应布局来适应不同屏幕大小和分辨率。
此外,Dreamweaver还提供了移动设备模拟器,可以在不同设备上测试和预览网页的展示效果。
第七章:网页优化网页加载速度是用户体验和搜索引擎优化的关键因素。
DW软件操作的小技巧

DW软件操作小技巧1.如何选中一段文字或一个标签,给他外面包一层DW中有个东西叫环绕标签,快捷键是CTRL +T,正里面可以打你想要的标签,另外里面还可以加上class和id什么的一起打出来.2. 如何快速切换文档如果想快速切换文档的话,可以打开两个文件,平时有些朋友开发的时候视图是这样的:(如图):很多朋友点这个切换HTML和CSS,这样太麻烦了,其实我是这样的,把HTML 和CSS文件都打开。
然后这边写HTML的文件,想写css了直接按CTRL+TAB切换到另外文档而另外文档我打开的是CSS,这样做起来免得我们去用鼠标来回来去的切换了这样做的好处是既方便,而且光标在每个文档中的位置也不会改变。
3.如何让dw里面的光标在中间,防止忘记闭合标签。
当然这个也很简单,dw是可以更改代码提示的。
在DW中找到编辑-首选参数(dw cc中叫首选项) 快捷键CTRL+Udw默认的是红框部分,我们把它改成箭头部分就可以了。
这样可以防止标签忘记闭合的问题。
4 如何快速定位到CSS在HTML里面的class身上,按住ALT 点击class名字,会看到5 快速找到css方法2要善用搜索功能,比如我在HTML里面选择了一个class,然后复制按CTRL+TAB切换到了css文件里面,按CTRL+F 查找和替换,把class粘贴到查找框(默认就是查找框,可以直接ctrl+f完了后,ctrl+v)然后回车就可以找到这个class了。
6 光标移动技巧当代码在某一处的时候,想把光标移动的话,移动几个字符,可以用←→ 箭头,如果想移动到行尾直接按 END如果想移动到整个文档的底部的话,需要按住CTRL+END当代码在某一处的时候,想把光标移动的话,移动几个字符,可以用←→ 箭头,如果想移动到行尾直接按 END如果想移动到整个文档的底部的话,需要按住CTRL+END7. 如何设定新建的HTML文档的默认编码。
CTRL+U打开首选项。
DW使用技巧

Dreamweaver使用技巧集锦11、在Dreamweaver 3中输入空格1)可以用中文的全角状态下按空格键,强烈推荐2)插入一个透明的图3)用pre标签里写你的内容4)object 里的invisiables 里的none-breaking space 点一下5)instert 菜单下的none-breaking space6)CTRL+SHIFT+空格键加入7)CTRL+T 去掉尖括号,键入 ;(注后面四个是的实质都是一样的)2、实现浏览器状态栏中的滚动字幕按下F8键,在Behaviors窗口中选取Behaviors,单击“+”号,再选取“Set Text→Set Text of Status Bar”,最后在弹出的对话框中写上你想在状态栏出现的文字就可以了。
3、制作鼠标移动上去会有变化的动态链接图像首先准备两幅图,第一幅是原始图像,另一幅是鼠标移动上去后的图像。
用鼠标单击第一幅图,在属性面板中的链接栏中填上要链接的文件,然后按F8,在Behaviors窗口中点击“+”号,选择“Swap Image”,在出现的窗口中选择第二幅图,点击确定,就成功了。
4、将 Dreamweaver 集成到 IE 浏览器Dreamweaver 安装程序会在上下文选单增加一个“Edit with Dreamweaver”命令。
还可以修改 Windows 的注册表,就象 MS Word 、Frontpage 和 Notepad 一样,通过 IE 工具栏的编辑按钮来调用 Dreamweaver 打开当前网页。
将下面文本的最后一行要改为你自己的 Dreamweaver 安装路径,把它们保存为一个*.reg 文件,双击它将信息添加到注册表即可。
REGEDIT4[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver][HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell][HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit][HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command]@="\"D:\\Macromedia\\Dreamweaver 3\\dreamweaver.exe\" \"%1\""如果要设置为 IE 缺省的编辑器,打开 IE 的“Internet 选项”,在程序标签指定。
dw教程-HTML知识

第一节、头部标记头部标记是用来设置标题、关键字等,不显示在网页上。
1.<title></title>标题标记:位于头部<head></head>之间,标题写在<title>与</title>之间,不用引号。
2.<base>基底网址标记:在”html”中选则基址,例如:<base href=”” target=”空白(_B)”>可用Dreamweaver中的html的文件头基础中设置。
当在该页面内做联接时,相对路径会附在基底网址中设置的绝对路径的后面;绝对路径不受基底网址设定的绝对路径控制。
3.<basefont>基底文字标记:将网页中遇到相关选项即用此设置。
Face=”隶书”用来设置字体;size=”6”用来设置字号;color=”red”设置颜色例如:<basefont face=”隶书” size=”7” color=”blue”>4.<meta>元信息标记:模拟http协议响应头报文,可在Dreamweaver中用meta标签插入。
其中“值”:信息类型,“内容”:实际信息1).Name属性:是描述网页的,name=”description”描述name=”beywords”关键字,为搜索引擎提供的。
Content=”内容”以便于搜索引擎机器在人查找分类(目前所有的搜索引擎都使用网上机器人自动查找meta值)copyright(版权):标记版权,用法:<meta name=”copyright” content=”版权说明”>generator (编辑器):用法:<meta mane=”generator”content=”编辑器名称”>revisit-after(重访):用法:<meta name=”revisit-after” content=”“> build(网站建设时间):用法:<meta name=”build” content=”日期”> reply-to(记载联系人邮箱):用法:<meta name=”reply-to”content=”网站联系人邮箱”>2).http-equiv:类似于http头部协议,它回应给游览碞一些有用的信息,以帮助正确和精确地显示网页内容。
DW复习要点

网页设计制作复习要点1. 在HTML中,为网页添加黄色背景可用的body属性:bgcolor=”yellow”,添加背景图案可用的body属性:background=”图片文件名”。
2. 为了保证网页在Internet上发布后用户能正常浏览图像,在页面中插入的图像文件应位于站点所在的目录中。
3. 在HTML中,制作电子邮件超链接的标签命令是:<a href=”mailto:tsxy@”>。
4. 在设置图像超链接时,可以在Alt文本框中填入注释的文字,在浏览器不支持图像显示或者关闭了图像显示功能时,用这些文字替换图像的显示,当鼠标移到图象上并停留一段时间后,也会显示出这些文字。
5. Dreamweaver中设置超级链接的属性,目标框架设置为_blank,表示在新开一个浏览窗口来打开链接内容;目标框架设置为_parent,表示在当前框架的父框架中打开链接;目标框架设置为_self,表示在当前框架打开链接,这也是默认方式;目标框架设置为_top,表示在当前浏览器的最外层打开链接。
6. 在IE中单击链接地址为一个“#”的文本,无论当前处于文档的什么位置,都会自动跳转到文档的开始位置。
7. 在Dreamweaver中,为图像建立热点,热点形状可以为矩形、椭圆形和多边形。
8. 要选中表格中的某行,可以将光标先定位在该行所在的单元格里,然后鼠标单击状态栏的<tr>标签即可。
9. 在HTML中,最常用的图象格式是 GIF、JPG和PNG三种。
10. 使用时间轴使一个对象具有动画效果,这个对象应该位于层(AP元素)中。
11. HTML的颜色属性值中,纯红色的代码是:#FF000;纯绿色的代码是#00FF00;纯蓝色的代码是:#0000FF;白色的代码是#FFFFFF;黑色的代码是 #000000。
12. 如果想设置页面上的某个AP元素为不可见,可在“属性”面板中选择可见性为hidden。
13. 在页面浏览时,当鼠标指向图片时产生图片交换效果,可以通过以下方法实现“插入记录”菜单下的“图像对象”中的“鼠标经过图像”命令,也可以用行为面板中的”交换图像”行为来实现。
dw粉底液的使用流程

DW粉底液的使用流程1. 简介DW粉底液是一款受到广大化妆爱好者喜爱的粉底产品。
它具有优秀的遮盖力和持久性,能够有效修饰肌肤瑕疵,使肤色均匀亮丽。
本文将为大家介绍DW粉底液的正确使用流程,帮助您获得完美妆容。
2. 肌肤准备在使用DW粉底液之前,首先要做好肌肤准备工作,确保肌肤清洁、滋润以及防晒。
•清洁:使用温和的洗面奶清洁脸部,确保脸部干净无污垢。
•滋润:涂抹适合肌肤类型的面霜,保持肌肤湿润。
•防晒:涂抹适合肌肤类型的防晒霜,提供肌肤防护。
3. DW粉底液选择选择适合自己肌肤类型和肤色的DW粉底液非常重要。
下面是一些选择的建议:•适合肌肤类型的选择:–干性肌肤:选择滋润型的DW粉底液,避免干燥问题。
–油性肌肤:选择控油型的DW粉底液,避免出油问题。
–混合型肌肤:选择多效型的DW粉底液,能够同时满足水油平衡的需求。
•肤色选择:–选择与肤色相近的DW粉底液,避免明显色差。
–若需要改变肤色,可选择稍暗或稍亮的色号,但必须要与原肤色相近。
4. 使用步骤正确的使用流程能够确保DW粉底液的充分发挥作用,以下是使用步骤的详细说明:1.打开粉底瓶,将适量DW粉底液挤在手背上。
注意,用量不宜过多,以免妆感过重。
2.使用化妆刷、海绵或指腹等工具将粉底液均匀涂抹在脸部。
从面部中央开始,由内向外轻轻推开,确保脸部每个角落都得到覆盖。
–推荐使用化妆刷:使用平头化妆刷能够更精确地涂抹粉底液,使妆容更加均匀。
–使用海绵:使用湿润的海绵能够更好地推开粉底液,使妆容更加贴合肌肤。
–使用指腹:将适量粉底液点在额头、鼻子、两颊和下巴等位置,然后用指腹轻轻拍打均匀。
3.注意避开眼唇区域,以免引起不必要的刺激和不适。
4.使用化妆海绵或化妆刷进行修饰,确保粉底液的均匀吸收,避免出现明显的痕迹。
5. 完成妆容完成DW粉底液的涂抹后,可以根据个人需求适当进行其他妆容步骤的补充,如腮红、眼部化妆和唇妆等。
最后,不要忘记定妆,保持妆容更持久。
6. 注意事项在使用DW粉底液的过程中,还需要注意以下事项:•避免使用过量的粉底液,以免堵塞毛孔和产生妆感过重的效果。
详细介绍Dreamweaver的行为使用
详细介绍Dreamweaver的行为使用详细介绍Dreamweaver的行为使用一、DreamWreaver自带的行为动作有不少,下面就分别介绍。
1.Call JavaScriptCall JavaScript(调用JavaScript)动作允许使用行为控制器指定当事件发生时将被执行的自定义函数或JavaScript代码行。
要使用Call JavaScript(调用JavaScript)动作:选择一对象并打开行为控制器,单击加号按钮,从动作弹出菜单中选择Call JavaScrip,在弹出的对话框中键入将要执行的JavaScript或函数名。
2.Change Property使用Change Property(改变属性)动作能够改变对象的属性值。
能改变的属性是由目标浏览器的类型决定的。
Internet Explorer(IE)4.0浏览器能够改变的属性比IE3.0或Netscape Navigator3.0或4.0浏览器多得多。
要使用改变属性动作,必须十分熟悉HTML 和JavaScript语言。
3.Check Browser使用Check Browser(检查浏览器)动作可以根据访问者浏览器的类型和版本发送不同的网页。
例如,如果访问者使用的是Netscape Navigator4.0或其后续版本的浏览器,你可以将其引导到一个网页;如果访问者使用的是Internet Explore4.0或其后续版本的浏览器,你可以将其引导到另一个网页;如果访问者使用的是其它类型的浏览器,你可以保留当前网页。
4.Check Plugin使用Check Plugin(检查插件)动作可以根据访问者是否安装特定插件决定是否给他发送不同网页。
例如,你可以让安装了Shockwave插件的访问者访问一网页,而未安装的访问者访问另一网页。
5.Control Shockwave or Flash使用Control Shockwave or Flash(控制Shockwave或Flash电影)动作可以播放、停止、回放或转到Shockwave或Flash电影中的某一帧。
dw技巧
1楼标记一般成对出现,一个表示特定代码部分的开始,另一个表示特定代码部分的结束(表示结束的前面带"/"符号),但也不是绝对的,比如,<br>标记。
基本的HTML标记:html、he ad和body必不可少。
1. <head>和</head>标记中仅包含网页标题(如<title>我的网页</title>)和程序脚本。
2. <body></body>标记中包含网页的全部内容。
是网页的主体部分。
3. <center>和</center>:是中间内容居中标记;4. <h2>和</h2>:从h1~h6,将文本标注为标题,通常要比正文粗大,h1最大;5. <p>和</p>:段落标记,在行与行之间添加额外的空白行;6. <br>:强行换行标记,插入单行,不需要封闭标记7. 图象标记:<img src="aaa\\bbb.gif" width="500" height="198" align="center">align水平对齐(left、right或center),valign垂直对齐(top,bottom或middle),border边框宽度alt="鼠标放在图片上时出现的提示文字"8. <p><font size="3"><b>本行字符将以粗体显示</b></font></p>9. <p><font size="3"><i>本行字符将以斜体显示</i></font></p> (<i>等效于<em>)10.<p><font size="3" face="宋体" color="#RRGGBB">本行字符将宋体显示</font></p>11. <a href="test.htm">点击此处文字打开链接的网页</a> :该处文字有下划线标示12. <HR>显示一长灰色细线,分割网页为上下两部分。
DW教程(1)
Dreamweaver3 上手指南定义网站在正式开始制作网页之前,最好先定义一个新网站,这是为了更好地对站点文件进行管理。
【定义的方法】① 在站点窗口的下拉菜单选择 Define Sites;② 选择命令菜单 Site 中的 New Site 选项。
进行基本设置,回到站点窗口。
新建页面方法一:选择菜单上的 File > New File方法二:在本地目录的任意区域单击右键,选择 New File新建一页面后, 可以即时修改文件名, 后缀是 htm或 html; 一般网络服务器默认的网站首页名字是 index.htm。
双击新建的 index.htm,进入编辑窗口,开始制作属于你的第一个网页。
设置页面属性选择命令菜单中的 Modify > Page Properties,对话框中显示:①Title(页面标题):就是我们在浏览网页时,在浏览器最左上角看到一行小字。
务必要养成为每一页都设 定一个标题的习惯,这既便于访问者的浏览,也有助于你在网页编辑的过程中区分不同的页面。
② Background(背景颜色):默认为白色,后面“#FFFFFF”是以 16 进制形式显示的 RGB 色值。
DW3 的 调色板比 Frontpage 的丰富得多,而且还可以在屏幕上直接取色。
③ Text(文字颜色):白底黑字是最常见的配色方案。
④ Left Margin 和 Top Margin:设置页边距,一般都设置为“0”以方便于网页的编辑。
一切设置完毕后,点击 OK 结束。
创建第一个网页“欢迎来到 ” , 此时光标处于编辑窗口的最最左上角,输入你喜欢的任何文字,例如:并且在文字的前方加空格及回车,使文字接近于屏幕的中央。
【Tips】是不是觉得很奇怪,怎么总是不能插入空格?其实这是 DW3 的“特色”之一——不能连续插入半 角空格。
解决的办法是用全角空格代替。
最好,选取菜单 File > Save 保存页面,然后用浏览器打开该页面查看效果。
DW第十二讲 CSS样式
在标签列表中选择要重新定义的标签 设置. 设置完成后自动应用。
背景图像平铺问题(重定义<body>标签) 表单元素样式(<input>) 表格<table>(<td>)、图像<img>等。
掌握:
创建
(3)使用CSS选择器
作用:
实现超级链接的样式重新定义 a:link -----------------没访问的超级链接的状态 a:visited------------- 访问过的超级链接的状态 a:hover-------------- 鼠标经过超级链接时的状态 a:active--------------正在单击超级链接时的状态 在名字输入框中选择状态 设置. 设置完成后自动应用。
调用外部样式表
意义 调用在其它页面中已经建好的样式表,使整个网站风格统一 (如每个页面都是一样的字体、链接效果等) 设置 1. 先建立外部样式表 建立新的样式时,选择“新建样式表文件”,并保存. 只在本文档中使用的样式表:右击/导出样式表,然后保存.
2. 调用 打开CSS面板,单击“附加”样式表按钮, 选择外部样式表 文件. 调用的样式表使用方法与本页面样式相同.
Dreamweaver课件
第十二讲
CSS样式*
主要内容(P107)
CSS简介 创建 应用
编辑
调用外部样式表
CSS简介
CSS: Cascading Style Sheets
层叠样式表/级联样式表
作用: 定义网页元素的样式.可以定义文本的字
体、字号、对齐等样式,还可定位一些特殊的 HTML的属性,如滤镜、特效等。
步骤:
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
对想要在可视化的环境下制作复杂网页的专业网页制作者来说,Dreamweaver 已经渐渐在网页编辑工具市场中展露头角,成为专业人士编写网页的最佳选择。
以目前的情况来说,Dreamweaver 内建的功能可说是越作越多、越作越丰富、齐备。
1. 让网页页面更有弹性有些网页开发者称以下要介绍的这种技巧为liquid,我在这儿则把这种技巧叫做是stretchy(弹性延伸的技巧)。
这是一种技巧,可在访客浏览器窗口大小改变时也随之调整网页页面大小,因此若是窗口过大就不会有空白处、窗口过小边缘就不会跑出上下移动的拉Bar。
其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小,但是若是网页里用到很多不同的框框及表格,网页页面大小就很难自动弹性地调整。
通常网页设计者会用混合运用固定栏宽的框框,和GIF 图档作为间隔,来设计网页页面,这样一来不论是用Internet Explorer 或是用,页面大小都会固定而不会跑掉。
用Dreamweaver 8.0 可以轻而易举的设计出会自动弹性调整的网页。
要怎么做呢?用工具面版(Object palette)上的按钮开启网页,并且转换到格式检视(Layout view)。
这时可以看到文字方块的列宽,每一列的方框上方中间还有一个小小的下拉式箭头,选择想要设定弹性显示的列上方的小箭头,接着选择「将列设为弹性显示」(Make Column Autostretch)。
(设定自动调整列宽以一列为限)这时该列方框上方就会出现一条波浪形的线,而不是原本表示列宽的数字。
Dreamweaver 会自动制作出固定版面的空格图文件,这个空白图文件是以列上方的两个长条形的空白表格表示,如此版面会自动被填充,才会完成弹性版面设定。
(在第一次增加空白图文件时会跳出一个对话框问你是否要使用内建图档,为求效果,我建议你让Dreamweaver 自动产生一个,不然就不用使用空白图文件来填充版面。
)2. 创造个性化调色盘Dreamweaver 8.0 新的Assets panel(属性控制面板)是一种可以在编辑网站时根据档案型态,例如图片、样板等来管理档案的新工具,当你定义新站台时(选择Site · New Site),所有类型的组件会自动增加到Asset panel 里的适当表框中。
这个加入新的Assets panel属性控制面版里也有颜色框,储存你网站里所用到的所有色彩,包含文字的颜色、背景的颜色,以及连结的颜色等。
这是一个为使用者量身定做的网站导向颜色盘。
只要激活Assets panel (先选择Window ·再选择Assets),接着选择左方那个小小的色彩滚动条,就可以看到你网站里各式各样的颜色选项。
当然你可以将这些颜色拉到某些特定选取的文字中。
甚至当你选择某种颜色时,画面上会出现这种颜色的十六进制值的色彩浓淡度,和三色对应码(RGB)。
如果想将调色盘工具列缩小一点,甚至可以仅加入某些颜色到调色盘的收藏夹里。
只需将选取的颜色反白、选择窗口里一个叫做「添加到我的收藏夹」按钮(最下方靠右的按钮),就完成了。
3. 制作弹出式选单导览系统原本要制作弹出式选单导览系统(Pop-up Menu Navigation System)要用到好一些JavaScript 的语法技巧,但是若你装了Dreamweaver/Fireworks Studio,轻轻松松即可快速办到。
首先在Fireworks 里开始,选择某个图片,然后在Set Pop-Up Menu的对话框里选择Insert· Pop-Up Menu,你可以输入项目(items)的名称并选择Plus (加入)按钮,来新增该项目。
你可以继续在跳出来的讯息框里进行细项设定,例如设定该项目所要用的文字及连结,当然也可以新增子选单、并重新安排下一层的设定。
完成时,选择Next (下一步),继续设定偏好值,例如颜色、字体等等。
这时选单完成后,可以预览HTML 语法,也可预览影像。
再选择Finish (完成)。
这时当鼠标移动到原来的图案时,会出现选单系统的内容一览。
接着将制作好的档案汇出时,Fireworks 会自动生产出所有Dreamweaver 需要用到的HTML、JavaScript,以及影像档案。
4. 让图档动起来!如果你同时安装有Dreamweaver/Fireworks Studio,这两种产品搭配的完美程度将使你赞不绝口。
即使你不是专业的图档设计者,在设计网页时也多多少少想把一些GIF 图片文件修改得活灵活现。
Dreamweaver 可以让你制作动画不求人喔!在标准窗口里选择要进行修改的图片,然后在Property Inspector 里选择编辑钮(Edit)。
如果你安装的Dreamweaver里附有Fireworks,Fireworks 就是Dreamweaver 预设图片编辑器,这时图片就会自动加载到Fireworks。
(若仔细看,各位会发现Fireworks 的画面会出现Editing From Dreamweaver 这样的文字和图样,指示你可以由Dreamweaver 里进行图片编辑。
)好了,现在在Fireworks 里选择要编辑的图片,选择Modify ·Animate ·Animate Selection。
接下来完成Animate dialog box 里的设定,选定动画的框架数,动画移动的方向、透明度等等设定。
你也可以选择Frames 工具列设定移动速度,选择Object 面版来改变设定。
要汇出档案时,只要选择Optimize 工具列,在档案类型的地方选择Animated GIF。
完成以后,Fireworks 就会自动将图片以最佳化设定汇出,并且自动将GIF 图档更新,还会在Dreamweaver 里将更新过的图档秀出来。
选择File ·Preview in Browser,这样就可以在浏览器里预览刚刚制作完成的可爱图档!5. 让按钮有闪动效果在Dreamweaver中,不用有Flash 程序,也可以制作有闪动效果的Flash 按钮对象。
8.0 版内建有好几个Flash 按钮对象,可以制作好几个不同形式的按钮。
选择Insert ·Interactive Images ·Flash Button 就可看到有哪些内建按钮。
在对话框内甚至可以用鼠标指到想要使用的按钮形式,然后看看在浏览器里的效果如何。
用鼠标光标把要用的按钮形式选起来,再依序输入参数,例如按钮上的文字、字形、颜色、连结等,或是自定文件名称。
按下OK。
接下来就会有一个SWF 档产生,档案并会自动置入你的网页中。
按一下这个做好的档案,会看到Property Inspector (属性明细)中会秀出档案的属性。
将档案属性秀出来时,如果扩展档案属性明细表,会出现Play (播放)钮,选择之后可以不用开启浏览器来预视按钮的闪动效果。
6. 制作流动文字在网页中增加流动文字就像增加我刚刚介绍的Flash 按钮一样简单。
相同地,不用安装Flash,用Dreamweaver 8.0 提供的新功能就可以轻松办到。
常用HTML 语法写网页、没有交互式媒体经验的网页制作者也可以轻松制作出小巧的Flash 形式的流动文字。
根据Macromedia 表示,有97%的网络使用者可以观看有Flash 效果的网页,因此这项新功能可以在不添加兼容性麻烦的情况下为网页增添一些浏览上与读者的互动性。
选择Insert ·Interactive Images ·Flash Text,再将偏好设定一一填入(例如要变更效果的文字、字形、字体颜色及字体大小等等)。
7. 更改键盘快速键Dreamweaver 可让使用者自定使用接口,这项设计十分有弹性。
举例来说,使用者可以通过撰写程序(programming)或自行增加对象(object)的方式来更改选单。
不必功力高深,你就可以更改键盘快速键,因为Dreamweaver 有一项叫做Keyboard Shortcut Editor的图形接口,只要选择Edit ·Keyboard Shortcuts,对话框将加载并列出可以更动的快速键一览表,让你把快速键改成自己习惯用的设定值。
要更动快速键,只要使用现行设定(Current Set)和指令列(Command)的下拉选单,在现有的指令中找到想要更改的指令,接着选取目前的快速键,就会出现在快速键的列表中。
另外,若要增加快速键设定,可以选择Plus 钮、在键盘上敲入你想使用的新快速代表键,选择变更(Change)即可。
同时你也可以选取某快速键、选择移除键(Minus ),就可以移除某个快速键。
8. 重新设定网站窗口(Site window)列宽只要从Site window 中选择View ·File View Columns ,就可以自定检视网站(Site view)时列宽的大小及呈现方式。
选取一列宽的名称,使用上下箭头重新调整,或不要勾选显示字段(Show field)以隐藏该列。
另外,选择Plus 钮也可以新增列,并自创列名。
此外,你也可以借着在下拉式选单中选择现有的note来将列和Design Note 产生关连。
9. 阅读网页原始档当你开启O’Reilly Code Reference(Window ·Reference)来检查属性或是浏览器的兼容性时,预设的窗口会以细小的字型显示出参考设定值。
但是若你按下窗口右上方的右键钮(就在关闭按钮的下方),就会出现一排下拉式选单,可以在这边选择原始文件字体的大小(小型字,到中型字体以及大型字体)。
选择大型字体比较不会虐待眼睛,因为这样你看HTML 原始档时就不用拿着放大镜看屏幕了!10. 新增Flash 按钮在上面我已经教你如何用20种预设的按钮类型,来制作Dreamweaver 里的Flash 按钮。
这是不用另外安装任何档案或程序的方法。
底下有另一种方法,就是安装Fireworks buttons,这种扩充功能和技巧五有相同效果。
到Exchange for Dreamweaver(Dreamweaver 扩充功能交换中心),输入"InstaGraphics Extensions for Dreamweaver" 的关键词搜寻,然后再下载这个577K 的档案。
转换到Dreamweaver,选择Commands ·Manage Extensions,再选择File ·Install Extension,就可以开始安装。
一旦重新激活Dreamweaver,就有六个新奇有趣的按钮型态,包括Surfboard 及Bulletbar 在内,这时只要使用Insert ·Interactive Images ·Fireworks Button 指令,就可以制作出一个酷炫的按钮。