Dreamweaver小技巧收集
2008-11-03 22:48
141 查看
一、超高速下载图像
有时在浏览网页时,常常因为网页中的图片文件过大而使下载时间较长,这样还没有下载完,就会有许多浏览者不耐烦地拂袖而去,从而损失了客户流。但要使图片文件变小,可能又要以牺牲图片质量为代价,这样势必使网页吸引力下降,同样不能使网页制作人员满意。
怎样才能做到既有精美的图片,又不使下载时间过长呢?这可以通过调用Dreamweaver中的Preload Images动作来实现,它可以把尺寸较大的图片预先载入到浏览器的高速缓冲存储器文件中,这可以防止下载图片延时。下面结合实例来介绍给朋友们:
1.运行Dreamweaver应用程序,并导入一张图片。
2.选中图片,单击行为标签,在此面板中,点击“增加事件”按钮,出现下拉菜单
3.在菜单中单击“预先载入图像”命令,在出现的对话框中,单击浏览按钮,选择刚载入的图片文件,然后单击“确定”。
这样就设置好了欲下载的图片,在浏览器中下载此图片时就会大大提高速度了。
Dreamweaver还包含了许多可以极大提高工作效率的命令,包括库项目的建立、模板的运用、历史面板的功能及查找替换功能。这里我介绍几个小的技巧来演示这些命令的强大。
1、清理Word文件技巧。我们经常需要将一些Word文件转换为HTML文件,但这种转换的结果是生成的HTML文件非常的大,里面包含了许多重复代码,综合利用Dreamweaver的几个功能可以方便的清理掉无用代码。首先打开Word生成的HTML文件,执行Commands菜单下Clean Up Word HTML命令,程序会自动识别原来Word的版本,并将无用的代码清除。但此时的文件仍就有许多重复代码,主要是包含了大量的和标签,我们可以再次执行Commands菜单下的Clean up HTML命令,在弹出的对话框中选定Specific Tag(s) 选项,并输入span 和p标签,中间用空格分开,执行命令后,所有的span和p标签都被清除掉。
但此时文件中的每个图片属性中还包含了类似v:shapes="_x0000_i1025"的属性,我们还需将这些属性清除。打开查找替换面板,按下图的设置设定替换规则,执行后即可清除所有图片的这些属性。如图;
2、快速替换文件标题。前面我介绍了可以在站点窗口替换文件标题,但是只能一次替换一个文件的标题,我们可以尝试着利用上一步介绍的查找替换命令一次替换多个文件的标题。通常我们新建的文件标题都是Untitled Document,可以打开Edit—Find And Replace命令,进行如下设置,将当前站点所有文件标题为Untitled Document的都替换为我们自己的标题。
3、设置默认文档格式。上面的方法虽然快捷,但是我们每次新建一个文件时,默认的文件标题仍旧是Untitled Document。因为新建文档时,Dreamweaver会调用一个默认的页面作为缺省格式,这个文件是Dreamweaver 4ConfigurationTemplatesDefault.html,这样我们就可以将我们站点中统一的一些格式设置好,如背景色、字体大小、文件标题等,然后将它保存覆盖上面的Default.html文件。在以后我们新建文件时,Dreamweaver会自动套用我们设定好的格式,这可以提高很大的工作效率。
DW9.0中的一些技巧
1,实现多个窗口的连接?
面板设计一直是DW的一大特色,到了DW4版本,所用到的面板已经相当多了,那么我们如何才能更高效的利用它呢?
“窗口连接”就是一种方便大家自定义的技术功能,简单的说,就是可以根据需要将两个或更多个面板放到一个窗口中来。
鼠标点击拖动一个面板的Tab栏到两一个面板上,当你看到一个黑色边框时,松开鼠标,这时两个面板已经合二为一了。
2,如何在网页中隐藏一些内容?
在网页设计中,有时我们需要在里面插入一些不要求显示出来的内容,比如流量统计系统,用户访问分析系统等等,这时就要考虑如何把他们隐藏起来,当然还有个前提就是,它们的存在不会影响其他网页元素的布局。
单击“Object”面板中的“Layers”按钮,鼠标拖动创建一个新的图层,将需要隐藏的内容全部放进去,单击图层左上的小方框,标定它为选中状态,同时切换到属性面板,将Vis值设定为“Hidden”,哇!所有的内容真的已经不见了。
3,怎样创建一个简单下拉菜单?
下拉菜单是网页中再常见不过的了,由于它可以极大的节省网页空间,因而主要应用在需要进行多对象罗列的场合,比如友情连接列表,合作网站地址等等。
DW中提供了一个再简单不过的制作方法,这样我们就不用写那些枯燥的代码啦!
进入“Object”面板的“Form”部分,
单击“Insert Jump Menu”按钮,弹出“下拉菜单”设置窗口,
在“Text”中输入菜单项的名称;“Go To URL”中键入网址或使用“浏览”按钮选择。单击最上的“+”号可进行新菜单项的录入,所有项目都将在“Menu Items”中显示出来。
4,如何制作一条宽度为1的细线?
在DW中,尽管水平线是以“Line”形式出现的,但在制作细线时,它表现的并不尽如人意,主要是过粗,没有需要的细腻感!
那么我们可以采取变通的方法以表格的应用来实现。
在网页中插入一个1行1列的表格,将表格的“cellpadding”“cellspacing”都设置为“0”,同时将单元格的“bgcolor”设定为红色,当然你也可以使用其他的颜色来代替,“Height”设定高度为1。
还有最关键的一步,查看源代码,将〈td〉〈/td〉中的“ ”去掉即可。
5,如何制作一个边框为1的方格?
很明显,我们现在还是要通过表格的设置来完成。
或许你会说,这还不简单嘛!建立一个1行1列的表格,然后将它的“Border”值设为1不就可以了。实际上,用这种方法制作的表格根本不是所说的边框为1的方格,而是要“粗”的多!
同样先插入一个1行1列的表格,将表格的“border”、“cellpadding”设置为“0”,“cellspacing”设置为“1”。设定表格的“bgcolor”为红色(即为边框的颜色),同时设定单元格的“bgcolor”为白色(即同背景色),OK了。
6,怎样设置根据不同的浏览器,返回不同的页面?
浏览器不同,它所支持的技术和效果也不同。因而我们所设计的网页并不是在所有的浏览器中都能正常显示或最佳显示。这时一个判断浏览器的跳转就很必要了。
当用户用不同类型或版本的浏览器打开时,可以返回不同的页面,以保证用户的正常浏览。
单击快速启动板中的“Behavior”按钮,点“+”号,在下拉列表中选择“Check Browse”,按照不同的类型依次设置即可。
7,网页中可以随便拖动的对象是怎么建立的?
访问网站时,经常能见到不少可以用鼠标拖动的元素,其中以图片居多,比如,一张广告图片挡住了你想浏览的内容,你完全可以用鼠标选中把它扔到一边去!
制作这种效果是通过图层的“Drag Layer”行为实现的,单击Behavior面板中“+”号,选择“Drag Layer”,当然之前你必要保证目标图层处于选中状态,进行简单设置后就OK了。
8,如何为网页添加一个外部的风格样式表(CSS)
风格样式表有内部,外部之分,前面我们对网页元素进行直接修饰的设定都属内部之列。外部CSS引用是通过〈LINK〉标签实现的。
〈LINK〉标签包括HREF;TYPE;REL属性设定。其中HREF:用来标定风格页文件的地址URL;REL:标示CSS的可选性:stylesheet/altermate;TYPE:用于标示风格语言类型:text/css。
9,设定网页的Base(基地址)有什么用途?
在“Object”面板的“Head”部分里有一个叫做“Base”的按钮,它就是用来设定网站基地址的,那么所谓的“基地址”究竟有什么作用呢?
大家都知道,在DW中我们使用的链接方式都是相对的,而不是绝对的,也就是说只要改变了根地址,所有的指向也将跟着自动变化,这样的好处就是可移植性强。
然而,有些时候我们恰恰需要它不变化,即强制它使用固定的地址,单击“Base”按钮,如图:
在“Href”中键入基地址的URL,单击“确定”有效。
有时在浏览网页时,常常因为网页中的图片文件过大而使下载时间较长,这样还没有下载完,就会有许多浏览者不耐烦地拂袖而去,从而损失了客户流。但要使图片文件变小,可能又要以牺牲图片质量为代价,这样势必使网页吸引力下降,同样不能使网页制作人员满意。
怎样才能做到既有精美的图片,又不使下载时间过长呢?这可以通过调用Dreamweaver中的Preload Images动作来实现,它可以把尺寸较大的图片预先载入到浏览器的高速缓冲存储器文件中,这可以防止下载图片延时。下面结合实例来介绍给朋友们:
1.运行Dreamweaver应用程序,并导入一张图片。
2.选中图片,单击行为标签,在此面板中,点击“增加事件”按钮,出现下拉菜单
3.在菜单中单击“预先载入图像”命令,在出现的对话框中,单击浏览按钮,选择刚载入的图片文件,然后单击“确定”。
这样就设置好了欲下载的图片,在浏览器中下载此图片时就会大大提高速度了。
Dreamweaver还包含了许多可以极大提高工作效率的命令,包括库项目的建立、模板的运用、历史面板的功能及查找替换功能。这里我介绍几个小的技巧来演示这些命令的强大。
1、清理Word文件技巧。我们经常需要将一些Word文件转换为HTML文件,但这种转换的结果是生成的HTML文件非常的大,里面包含了许多重复代码,综合利用Dreamweaver的几个功能可以方便的清理掉无用代码。首先打开Word生成的HTML文件,执行Commands菜单下Clean Up Word HTML命令,程序会自动识别原来Word的版本,并将无用的代码清除。但此时的文件仍就有许多重复代码,主要是包含了大量的和标签,我们可以再次执行Commands菜单下的Clean up HTML命令,在弹出的对话框中选定Specific Tag(s) 选项,并输入span 和p标签,中间用空格分开,执行命令后,所有的span和p标签都被清除掉。
但此时文件中的每个图片属性中还包含了类似v:shapes="_x0000_i1025"的属性,我们还需将这些属性清除。打开查找替换面板,按下图的设置设定替换规则,执行后即可清除所有图片的这些属性。如图;
2、快速替换文件标题。前面我介绍了可以在站点窗口替换文件标题,但是只能一次替换一个文件的标题,我们可以尝试着利用上一步介绍的查找替换命令一次替换多个文件的标题。通常我们新建的文件标题都是Untitled Document,可以打开Edit—Find And Replace命令,进行如下设置,将当前站点所有文件标题为Untitled Document的都替换为我们自己的标题。
3、设置默认文档格式。上面的方法虽然快捷,但是我们每次新建一个文件时,默认的文件标题仍旧是Untitled Document。因为新建文档时,Dreamweaver会调用一个默认的页面作为缺省格式,这个文件是Dreamweaver 4ConfigurationTemplatesDefault.html,这样我们就可以将我们站点中统一的一些格式设置好,如背景色、字体大小、文件标题等,然后将它保存覆盖上面的Default.html文件。在以后我们新建文件时,Dreamweaver会自动套用我们设定好的格式,这可以提高很大的工作效率。
DW9.0中的一些技巧
1,实现多个窗口的连接?
面板设计一直是DW的一大特色,到了DW4版本,所用到的面板已经相当多了,那么我们如何才能更高效的利用它呢?
“窗口连接”就是一种方便大家自定义的技术功能,简单的说,就是可以根据需要将两个或更多个面板放到一个窗口中来。
鼠标点击拖动一个面板的Tab栏到两一个面板上,当你看到一个黑色边框时,松开鼠标,这时两个面板已经合二为一了。
2,如何在网页中隐藏一些内容?
在网页设计中,有时我们需要在里面插入一些不要求显示出来的内容,比如流量统计系统,用户访问分析系统等等,这时就要考虑如何把他们隐藏起来,当然还有个前提就是,它们的存在不会影响其他网页元素的布局。
单击“Object”面板中的“Layers”按钮,鼠标拖动创建一个新的图层,将需要隐藏的内容全部放进去,单击图层左上的小方框,标定它为选中状态,同时切换到属性面板,将Vis值设定为“Hidden”,哇!所有的内容真的已经不见了。
3,怎样创建一个简单下拉菜单?
下拉菜单是网页中再常见不过的了,由于它可以极大的节省网页空间,因而主要应用在需要进行多对象罗列的场合,比如友情连接列表,合作网站地址等等。
DW中提供了一个再简单不过的制作方法,这样我们就不用写那些枯燥的代码啦!
进入“Object”面板的“Form”部分,
单击“Insert Jump Menu”按钮,弹出“下拉菜单”设置窗口,
在“Text”中输入菜单项的名称;“Go To URL”中键入网址或使用“浏览”按钮选择。单击最上的“+”号可进行新菜单项的录入,所有项目都将在“Menu Items”中显示出来。
4,如何制作一条宽度为1的细线?
在DW中,尽管水平线是以“Line”形式出现的,但在制作细线时,它表现的并不尽如人意,主要是过粗,没有需要的细腻感!
那么我们可以采取变通的方法以表格的应用来实现。
在网页中插入一个1行1列的表格,将表格的“cellpadding”“cellspacing”都设置为“0”,同时将单元格的“bgcolor”设定为红色,当然你也可以使用其他的颜色来代替,“Height”设定高度为1。
还有最关键的一步,查看源代码,将〈td〉〈/td〉中的“ ”去掉即可。
5,如何制作一个边框为1的方格?
很明显,我们现在还是要通过表格的设置来完成。
或许你会说,这还不简单嘛!建立一个1行1列的表格,然后将它的“Border”值设为1不就可以了。实际上,用这种方法制作的表格根本不是所说的边框为1的方格,而是要“粗”的多!
同样先插入一个1行1列的表格,将表格的“border”、“cellpadding”设置为“0”,“cellspacing”设置为“1”。设定表格的“bgcolor”为红色(即为边框的颜色),同时设定单元格的“bgcolor”为白色(即同背景色),OK了。
6,怎样设置根据不同的浏览器,返回不同的页面?
浏览器不同,它所支持的技术和效果也不同。因而我们所设计的网页并不是在所有的浏览器中都能正常显示或最佳显示。这时一个判断浏览器的跳转就很必要了。
当用户用不同类型或版本的浏览器打开时,可以返回不同的页面,以保证用户的正常浏览。
单击快速启动板中的“Behavior”按钮,点“+”号,在下拉列表中选择“Check Browse”,按照不同的类型依次设置即可。
7,网页中可以随便拖动的对象是怎么建立的?
访问网站时,经常能见到不少可以用鼠标拖动的元素,其中以图片居多,比如,一张广告图片挡住了你想浏览的内容,你完全可以用鼠标选中把它扔到一边去!
制作这种效果是通过图层的“Drag Layer”行为实现的,单击Behavior面板中“+”号,选择“Drag Layer”,当然之前你必要保证目标图层处于选中状态,进行简单设置后就OK了。
8,如何为网页添加一个外部的风格样式表(CSS)
风格样式表有内部,外部之分,前面我们对网页元素进行直接修饰的设定都属内部之列。外部CSS引用是通过〈LINK〉标签实现的。
〈LINK〉标签包括HREF;TYPE;REL属性设定。其中HREF:用来标定风格页文件的地址URL;REL:标示CSS的可选性:stylesheet/altermate;TYPE:用于标示风格语言类型:text/css。
9,设定网页的Base(基地址)有什么用途?
在“Object”面板的“Head”部分里有一个叫做“Base”的按钮,它就是用来设定网站基地址的,那么所谓的“基地址”究竟有什么作用呢?
大家都知道,在DW中我们使用的链接方式都是相对的,而不是绝对的,也就是说只要改变了根地址,所有的指向也将跟着自动变化,这样的好处就是可移植性强。
然而,有些时候我们恰恰需要它不变化,即强制它使用固定的地址,单击“Base”按钮,如图:
在“Href”中键入基地址的URL,单击“确定”有效。
相关文章推荐
- Linux小技巧收集
- android 系统定制的小技巧(网络收集)
- Linux以及Android开发中的小技巧和长繁命令记录收集
- Android小技巧收集
- Eclipse小技巧收集
- Linux小技巧收集_2
- Android中收集的一些小技巧
- javascript 的小技巧收集
- JS小技巧收集
- Android Studio小技巧收集(极慢更新)
- Linux Shell的一些使用小技巧收集
- Lync 小技巧-45-收集-TMG-日志和配置
- 收集的48个Shell脚本小技巧
- 收集的48个Shell脚本小技巧
- 小技巧收集2-JQuery.Ajax数据交互
- I9000小技巧收集
- javascript小技巧-js小技巧收集
- javascript小技巧-js小技巧收集
- 12条实用的 Windows7 小技巧总结收集
- Asp.net开发常用小技巧收集(转)