Dreamweaver的操作诀窍点滴(1)

社区服务
高级搜索
猴岛论坛电脑百科Dreamweaver的操作诀窍点滴(1)
发帖 回复
倒序阅读 最近浏览的帖子最近浏览的版块
2个回复

Dreamweaver的操作诀窍点滴(1)

楼层直达
Search_tuzi

ZxID:54305353

等级: 新兵
举报 只看楼主 使用道具 楼主   发表于: 2012-10-20 0
[p=25, null, left] 1、巧妙调用Style
  熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠 标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表 上单击右键来调用Style。虽然不同的方法达到的效果看似一样,但实际上 产生的HTML代码则完全不同。比如用Custon Style来调用Style标准,在网 页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿 而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来 调用Style。
[/p]
[p=25, null, left]2、使字体适应不同的分辨率我们在制作网页的时候,经常有这种体会, 那就是制作好的网页在本地计算机上浏览时很正常,但在另外一台计算机 上浏览时发现原本漂亮的网页变得歪歪扭扭了,这是为什么呢?原来各个 计算机的分辨率要使你的主页在不同的分辨率下都能正常显示,在 Dreamweaver中得到了较好的解决。在文档窗口的右下角,Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字,在弹出式菜单中可 以为当前的页面指定显示分辨率,通过修改可以使你的主页更具灵活性。 使不同分辨率的显示器都能较好地显示。[/p]
[p=25, null, left]3、善用拖放技术我们在使用Dreamweaver编辑网页的时候,经常需要 插入一些图象什么的,假设要插入的图象很多,按照常规方法来操作就显 得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把 Dreamweaver的操作窗口变成活动窗口,以腾出空间来显示Explorer窗口, 找到要插入的图象文件后,把它们一一用鼠标拖动到网页的适当部位, Dreamweaver将自动把这些图象的url添加到文件的HTML代码中,当然这里 要求被拖动的图象文件必须是gif、jpg等web图象格式的文件。对于已经在 网页中的图象也是一样,直接拖过来就可以了。但如果被拖动的图象上有 超级链接,就不可以再使用拖动技术了,因为那时拖过来的仅仅是超级链 接地址。[/p]
[p=25, null, left]4、善于为对象取名我们在用Dreamweaver来制作非常复杂的效果时, 有可能需要经常重复地使用某一个或者多个对象,例如我们经常需要定位 某个特定的表格、图象等,如果我们没有给某一个网页中的多个对象取名 的话,那么在重复应用这些对象的时候,可能很麻烦或者容易出错。为了 能够方便调用这些对象,我们应该在每创建一个新的对象时,都记得给它 取一个有代表性而且比较容易记忆的名称。在给这些对象命名时,我们可 以通过对象的“属性”面板来操作就行了。[/p]
[p=25, null, left]5、多用快捷键来提高效率为了提高操作的效率,我们可以在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[/p]
[p=25, null, left]6、一次链接到两个网页我们都知道超级链接一次只能连到一个页面。 如果我们要想一次在不同的框架页中打开文档,可以使用“Go To URL” JavaScript行为。打开一个有框架的网页,选择文字或图象,然后从行为 面板中选择“Go To URL”。我们会注意到Dreamweaver会在 “Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接 的框架并输入相应的URL后再选择另一个框架并输入另一个URL。[/p]
[p=25, null, left]7、利用“Format Table”命令来修饰网页在复杂的网页设计中,表格 的应用是最多的,因为利用表格可以自由地控制文本和图象在网页上出现 的具体位置,从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不 甘落后,我们可以使用其中的“Format Table”(格式化表格)命令来快 速地对表格应用预先设计好的样式。要使用预先设计好的样式,先将光标 置于表格的任意一个单元格内,再选择“Command”→“Format Table”命 令,在随后出现的对话框中,从左边的列表中选择一个设计方案。按 “Apply”键来查看效果,如果不满意的话,还可以重新设置或者修改部分 参数的值,如边界粗细,背景颜色等等。[/p]
[p=25, null, left]8、尽量不要给文件起中文名称大家在制作好了网页后,通常会给网页 起一个具有代表性的中文名称,一来能使人一看文件名就能大概了解文件 所包含的内容,二来能够方便各个超级链接之间的相互调用。但如果你在 Dreamweaver中这样做,就会发现Dreamweaver对中文文件名支持得不是 太好,经常会有页面调用不正确的现象发生,所以我们以后在Dreamweaver 中保存网页的时候,尽量用英文或者数字作为文件名称,这样就可以避免上 面的出错现象。[/p]
[p=25, null, left]9、经常保存当前被编辑的文件有网友说经常保存文件是不是怕突然死 机呀?这话当然没错,但我们在Dreamweaver中要经常保存文件还有它特别 的意义。因为我们在设计主页的时候,Dreamweaver会跟踪我们对文件作出 的任何改动,也就是说即使我们在主页中简单地移动了一下某个对象, Dreamweaver也能生成大量的临时源代码,想象一下,如果在主页中作了 很多改变,那么生成的这些大量代码就变得很难管理,从而会影响系统的 性能。因此我们发现如果Dreamweaver的性能开始降低,这可能是由于驻 留在内存中的大量代码变得太庞大的缘故,只要保存一下文件,就会使这 些临时代码消失,从而提高性能,所以以后我们在使用Dreamweaver时, 要有经常保存文件的习惯。[/p]
[p=25, null, left]10、自动在网页中加入更新时间我们知道一个网页要想获得更多的回 头率,一个很重要的一条就是要不断更新。但对于我们这些个人网页来说, 要天天及时更新恐怕不是很容易的事情。因此,我们希望网页能自动更新, 下面笔者就提供一个能自动更新修改时间的源代码,我们只要把这段源代 码添加到<BODY>…</BODY>之间就能实现更新时间的目的了:
  <Script Language="JavaScript"> <!-- document.write("Last Updated:"+document.lastModified); --></Script>
[/p]
[ 此帖被在2014-10-11 15:43重新编辑 ]
Search_tuzi

ZxID:54305353

等级: 新兵
举报 只看该作者 沙发   发表于: 2012-10-20 0
11、让鼠标移到图象链接上有动态变化有时我们为了要达到一种逼真 的效果,希望鼠标移动到某个链接上时能有动感产生。使用Dreamweaver可 以很容易实现这种效果。设计时,我们首先需要准备两幅图象,第一幅是 原始图象,第二幅是鼠标移动上去后的图象。接着用鼠标单击第一幅图, 在属性面板中的链接栏中填上要链接的文件,然后单击键盘上的F8键,在 弹出的Behaviors窗口中单击“+”号,随后选择“swap image”,在接着 出现的窗口中选择第二幅图象,最后单击确定就可以了。

12、让网页自动关闭如果我们希望自己的网页在指定的时间内能自动 关闭,不妨在网页源代码中的<BODY>标签后面加入如下代码:<script LANGUAGE="JavaScript"><!-- setTimeout('window.close();', 3000);--></script> 其中代码中的3000表示3秒钟,它是以毫秒为单 位的。

13、在网页中加入单个或几个空格输入空格你会吗?有人说单击一下 空格键不就成啦!然而我们在Dreamweaver中单击空格键时,好象就不行。 那该怎么办呢?不急,下面有两种方法输入空格:其一、在源代码中输入, 每个之间请用空格分开;其二、单击键盘上的复合键Ctrl+Shift+Space。

14、隐藏不必要的标签
  如果在网页中插入了不可见的元素时,Dreamweaver会自动在页面上添 加一个与之相应的元素标签,以便于我们选择不可见元素。但这并不全是 件好事,比如我们在一个有很多层的页面中的第一行便插入一个表格,就 会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第 二行,虽然在浏览时并不影响效果,但这确确实实会阻碍我们的工作。所 以当我们觉得某个元素标签碍手碍脚时,就索性将之屏蔽掉。方法是按Ctrl+U 打开Preferences面板,在Category中选中Invisibel Elements,在面板的 右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉,以 后它就保证不会再出现了。

15、使用定制窗口功能测试网页
  前面,笔者曾说过,在不同分辨率下网页的显示效果会大不一样,谁 都不希望自己辛辛苦苦设计出来的网页在不同的分辨率下会面目全非,所 以测试网页在不同分辨率下的浏览效果是网页制作中很重要的一步。而 Dreamweaver让用户十分轻松地实现测试,我们可以在Dreamweaver的操 作界面中的状态栏中间,选择需要的分辨率来调节窗口大小,从而实现在 不同分辨率下测试网页了。

16、只复制编辑区中的文字在几个不同的应用程序中间相互复制文字, 是我们在实际工作中可能要常做的事情。但是,如果我们从Dreamweaver中 复制编辑区中的文字到另外一个应用程序的时候,HTML代码和文字将一起 被复制过去了,那么我们该如何才能只把编辑区中的文字复制下来呢?我 们知道,通常复制时都用快捷键Ctrl - C来操作,如果我们在复制的时候 多按一个C键,那么Dreamweaver将只会复制选中的文字了。

17、去掉链接的下划线有时为了达到某个外观上的特殊效果,我们希 望把超级链接下面的下划线屏蔽掉。同样我们也用两种方法来实现:一是 在源代码中的<HEAD>…</HEAD>之间输入如下代码:
  <style type="text/css"><!-- a { text-decoration: none}--> </style>;二是用鼠标依次单击Dreamweaver中的Text/Custom Style/Edit/Style Sheet/New/RedefineHTML Tag,并从中选择a,然 后在decoration中选中none,最后单击确定就成功了。

18、定义网页的关键字为了使自己的网页在搜索引擎中能很容易地被 检索到,准确定义网页中的关键字是一项很重要的工作。在Dreamweaver中, 我们可以用两种方法来定义网页中的关键字:一是在源代码中的<head>与 </head>标签中,添加如下代码:<meta name="keywords" content="yancheng,yancheng,yancheng">,其中content中的内容即为 关键字,为了提高检索的命中率,我们可以重复多次使用同一个关键字, 中间用逗号隔开;另外一种方法是在Dreamweaver中用鼠标依次单击 Insert/Head/KeyWords命令,在随后弹出的对话框中重复输入希望被检索 的关键字就可以了。
Search_tuzi

ZxID:54305353

等级: 新兵
举报 只看该作者 板凳   发表于: 2012-10-20 0
11、让鼠标移到图象链接上有动态变化有时我们为了要达到一种逼真 的效果,希望鼠标移动到某个链接上时能有动感产生。使用Dreamweaver可 以很容易实现这种效果。设计时,我们首先需要准备两幅图象,第一幅是 原始图象,第二幅是鼠标移动上去后的图象。接着用鼠标单击第一幅图, 在属性面板中的链接栏中填上要链接的文件,然后单击键盘上的F8键,在 弹出的Behaviors窗口中单击“+”号,随后选择“swap image”,在接着 出现的窗口中选择第二幅图象,最后单击确定就可以了。

12、让网页自动关闭如果我们希望自己的网页在指定的时间内能自动 关闭,不妨在网页源代码中的<BODY>标签后面加入如下代码:<script LANGUAGE="JavaScript"><!-- setTimeout('window.close();', 3000);--></script> 其中代码中的3000表示3秒钟,它是以毫秒为单 位的。

13、在网页中加入单个或几个空格输入空格你会吗?有人说单击一下 空格键不就成啦!然而我们在Dreamweaver中单击空格键时,好象就不行。 那该怎么办呢?不急,下面有两种方法输入空格:其一、在源代码中输入, 每个之间请用空格分开;其二、单击键盘上的复合键Ctrl+Shift+Space。

14、隐藏不必要的标签
  如果在网页中插入了不可见的元素时,Dreamweaver会自动在页面上添 加一个与之相应的元素标签,以便于我们选择不可见元素。但这并不全是 件好事,比如我们在一个有很多层的页面中的第一行便插入一个表格,就 会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第 二行,虽然在浏览时并不影响效果,但这确确实实会阻碍我们的工作。所 以当我们觉得某个元素标签碍手碍脚时,就索性将之屏蔽掉。方法是按Ctrl+U 打开Preferences面板,在Category中选中Invisibel Elements,在面板的 右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉,以 后它就保证不会再出现了。

15、使用定制窗口功能测试网页
  前面,笔者曾说过,在不同分辨率下网页的显示效果会大不一样,谁 都不希望自己辛辛苦苦设计出来的网页在不同的分辨率下会面目全非,所 以测试网页在不同分辨率下的浏览效果是网页制作中很重要的一步。而 Dreamweaver让用户十分轻松地实现测试,我们可以在Dreamweaver的操 作界面中的状态栏中间,选择需要的分辨率来调节窗口大小,从而实现在 不同分辨率下测试网页了。

16、只复制编辑区中的文字在几个不同的应用程序中间相互复制文字, 是我们在实际工作中可能要常做的事情。但是,如果我们从Dreamweaver中 复制编辑区中的文字到另外一个应用程序的时候,HTML代码和文字将一起 被复制过去了,那么我们该如何才能只把编辑区中的文字复制下来呢?我 们知道,通常复制时都用快捷键Ctrl - C来操作,如果我们在复制的时候 多按一个C键,那么Dreamweaver将只会复制选中的文字了。

17、去掉链接的下划线有时为了达到某个外观上的特殊效果,我们希 望把超级链接下面的下划线屏蔽掉。同样我们也用两种方法来实现:一是 在源代码中的<HEAD>…</HEAD>之间输入如下代码:
  <style type="text/css"><!-- a { text-decoration: none}--> </style>;二是用鼠标依次单击Dreamweaver中的Text/Custom Style/Edit/Style Sheet/New/RedefineHTML Tag,并从中选择a,然 后在decoration中选中none,最后单击确定就成功了。

18、定义网页的关键字为了使自己的网页在搜索引擎中能很容易地被 检索到,准确定义网页中的关键字是一项很重要的工作。在Dreamweaver中, 我们可以用两种方法来定义网页中的关键字:一是在源代码中的<head>与 </head>标签中,添加如下代码:<meta name="keywords" content="yancheng,yancheng,yancheng">,其中content中的内容即为 关键字,为了提高检索的命中率,我们可以重复多次使用同一个关键字, 中间用逗号隔开;另外一种方法是在Dreamweaver中用鼠标依次单击 Insert/Head/KeyWords命令,在随后弹出的对话框中重复输入希望被检索 的关键字就可以了。
« 返回列表
发帖 回复