Dreamweaver制作网页13种技巧详解

  1、灵活运用样式

  熟悉网页设计的网友就知道,调用Style的方法很多,我们可以单击鼠标右键选择Custon Style来调用Style标准,也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样,但实际上产生的HTML代码则完全不同。比如用Custon Style来调用Style标准,在网页代码中就生成一个〈span〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来调用Style。

  2、活用Format Table命令

  在复杂的网页设计中,表格的应用是最多的,因为利用表格可以自由地控制文本和图象在网页上出现的具体位置,从而使整个网页看上去紧凑统一。 Dreamweaver在这方面也不甘落后,我们可以使用其中的“Format Table”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式,先将光标置于表格的任意一个单元格内,再选择 “Command”→“Format Table”命令, 在随后出现的对话框中,从左边的列表中选择一个设计方案。按“Apply” 键来查看效果,如果不满意的话,还可以重新设置或者修改部分参数的值,如边界粗细,背景颜色等等。

  3、同时链接到两个网页

  我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档,可以使用“Go To URL”javascript 行为。打开一个有框架的网页,选择文字或图象,然后从行为面板中选择“Go To URL”。我们会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。

  4、不给文件起中文名称

  大家在制作好了网页后,通常会给网页起一个具有代表性的中文名称,一来能使人一看文件名就能大概了解文件所包含的内容,二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做,就会发现Dreamweaver对中文文件名支持得不是太好,经常会有页面调用不正确的现象发生,所以我们以后在Dreamweaver中保存网页的时候,尽量用英文或者数字作为文件名称,这样就可以避免上面的出错现象。

  5、巧妙设置字体分辨率

  我们在制作网页的时候,经常有这种体会,那就是制作好的网页在本地计算机上浏览时很正常,但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了,这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示,在 Dreamweaver中得到了较好的解决。在文档窗口的右下角,Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字,在弹出式菜单中可以为当前的页面指定显示分辨率,通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。

  6、巧妙隐藏标签

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

  7、善用拖放技巧

  我们在使用Dreamweaver编辑网页的时候,经常需要插入一些图象什么的,假设要插入的图象很多,按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把Dreamweaver的操作窗口变成活动窗口,以腾出空间来显示Explorer窗口,找到要插入的图象文件后,把它们一一用鼠标拖动到网页的适当部位,Dreamweaver将自动把这些图象的url添加到文件的HTML代码中,当然这里要求被拖动的图象文件必须是gif、jpg等web图象格式的文件。对于已经在网页中的图象也是一样,直接拖过来就可以了。但如果被拖动的图象上有超级链接,就不可以再使用拖动技术了,因为那时拖过来的仅仅是超级链接地址。

  8、自动设置更新时间

  我们知道一个网页要想获得更多的回头率,一个很重要的一条就是要不断更新。但对于我们这些个人网页来说,要天天及时更新恐怕不是很容易的事情。因此,我们希望网页能自动更新,下面就提供一个能自动更新修改时间的源代码,我们只要把这段源代码添加到…之间就能实现更新时间的目的了:

  以下是引用片段:

   ;二是用鼠标依次单击Dreamweaver中的Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag,并从中选择a,然后在decoration中选中none,最后单击确定就成功了。

  9、巧妙复制文字

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

  10、善用快捷键

  为了提高操作的效率,我们可以在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

  11、自动关闭网页

  如果我们希望自己的网页在指定的时间内能自动关闭,不妨在网页源代码中的标签后面加入如下代码:

  以下是引用片段:

  

  12、巧妙设置对象名称

  我们在用Dreamweaver来制作非常复杂的效果时,有可能需要经常重复地使用某一个或者多个对象,例如我们经常需要定位某个特定的表格、图象等,如果我们没有给某一个网页中的多个对象取名的话,那么在重复应用这些对象的时候,可能很麻烦或者容易出错。为了能够方便调用这些对象,我们应该在每创建一个新的对象时,都记得给它取一个有代表性而且比较容易记忆的名称。在给这些对象命名时,我们可以通过对象的“属性”面板来操作就行了。

  13、为图象链接增加动态效果

  有时我们为了要达到一种逼真的效果,希望鼠标移动到某个链接上时能有动感产生。使用Dreamweaver可以很容易实现这种效果。设计时,我们首先需要准备两幅图象,第一幅是原始图象,第二幅是鼠标移动上去后的图象。接着用鼠标单击第一幅图,在属性面板中的链接栏中填上要链接的文件,然后单击键盘上的F8键,在弹出的Behaviors窗口中单击“+”号,随后选择“swap image”,在接着出现的窗口中选择第二幅图象,最后单击确定就可以了。

时间: 2024-10-18 22:30:04

Dreamweaver制作网页13种技巧详解的相关文章

用Dreamweaver制作网页中的表格详解

表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面的排版格式,如果用以前我

使用Dreamweaver制作网页时文字自动换行的小技巧

在使用Dreamweaver制作网页时,遇到制作表格的时候,内部的文字没有自动换行,我应该怎么做呢?下面提出两种解决方案,大家可以参考!在这里你如果知道该技巧,你可以略过!如果你不知道,不要说什么现在网页中已经没有表格了这样绝对的话啊?Web标准时代网页中照样应该是不能把表格完全抛弃的!呵呵. 解决表格中文字自动的换行的情况有两种可能: 第一种,你用CSS把表格内文字的字体设置成了英文字体,这样在Dreamweaver里表格内的文字不会自动换行,但这仅是Dreamweaver里的显示效果,在IE

Dreamweaver制作网页小技巧汇集

本文汇集了一些Dreamweaver制作网页时的可以用的一些小技巧.希望对您有所帮助. 1)怎样将 Dreamweaver 集成到 IE 浏览器? Dreamweaver 安装程序会在上下文选单增加一个" Edit with Dreamweaver "命令,我们还可以修改 Windows 的注册表使它与 IE 集成.就象 MS Word . Frontpage 和 Notepad 一样,通过 IE 工具栏的编辑按钮来调用 Dreamweaver 打开当前网页. 将下面文本的最后一行要改

JS生成某个范围的随机数【四种情况详解】_javascript技巧

前言: JS没有现成的函数,能够直接生成指定范围的随机数. 但是它有个函数:Math.random()  这个函数可以生成 [0,1) 的一个随机数. 利用它,我们就可以生成指定范围内的随机数. 而涉及范围的话,就有个边界值的问题.这样就包含四种情况: 1)min ≤ r ≤ max  (一般这种比较常见) 2)min ≤ r < max 3) min < r ≤ max 4)min < r < max 一.min ≤ r ≤ max function RandomNumBoth(

轻松快捷 Photoshop中的快捷键技巧详解

技巧|详解 Photoshop中的快捷键技巧虽已是老生常谈,但是网上通常都是简单讲述,本文将从应用功能出发详细讲解这些常用的快捷键的使用.相信对大家都会有帮助. ■ 你可以用以下的快捷键来快速浏览你的图像: Home卷动至图像的左上角:End卷动至图像的右下角:Page UP卷动至图像的上方:Page Down卷动至图像的下方:Ctrl+Page Up卷动至图像的左方:Ctrl+Page Down卷动至图像的右方. ■ 按Ctrl键+Alt键+0键即可使图像按1:1比例显示. ■ 当你想"紧排&

PS字体的层次感小技巧详解

  PS字体的层次感小技巧详解 效果图如下 具体的制作步骤如下: 步骤1:打开PS ,建立一个大小合适的图层. 步骤2:输入 A.B.C.D四个字母,分别打出来;并记得复制一层; 步骤3:画一个矩形,进行透视,分别调整字母的大小 步骤4:ABCD四个字母在按住Shift键进行水平移动,使四个字母进行叠加; 步骤5:新建图层,拉渐变,复制,渐变层分别对ABCD 四个字母进行剪贴蒙版.分别调整渐变层位置,使字母与字母之间相接处颜色有区别层次感; 步骤6:把刚才复制的4个字母填充黑色,向左边移动几个像

Java开发中的23种设计模式详解(转)

Java开发中的23种设计模式详解(转) 设计模式(Design Patterns)                                   --可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块块砖石一样.项目中合

Java开发中的23种设计模式详解(推荐)_java

设计模式(Design Patterns)                                   --可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. 毫无疑问,设计模式于己于他人于系统都是多赢的,设计模式使代码编制真正工程化,设计模式是软件工程的基石,如同大厦的一块块砖石一样.项目中合理的运用设计模式可以完美的解决很多问题,每

Illustrator不透明度蒙版的使用经验技巧详解

给各位Illustrator软件的使用者们来详细的解析分享一下不透明度蒙版的使用经验技巧. 解析分享: 1.按下M键,切换到矩形工具,在页面中绘制出一个矩形,填充为红色. 2.画一个单一闭合的无填充的路径(形状)将被处理的图形框起来,然后将其与被处理图形同时选择.(在本文,我们选中绘制好的红色矩形,按下CTRL+C复制,CTRL+F原位粘贴,并将填充色设置为无,使用选择工具框选同时选中这两个矩形) 3.单击"窗口--透明度"打开透明度调板,单击调板右上角的菜单,在弹出的选项中单击&qu