Dreamweaver技巧50问

2422至3030

2422至3030

2016-02-19 19:15

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐Dreamweaver技巧50问,赶紧看过来吧!

    一直是不少网友钟情的网页设计工具,除了它强大的动态效果制作能力外,方便简洁的操作界面更是独具特色,下面我们将以最新版本Dreamweaver4为例,并以提问的方式系统的介绍下,在设计过程中经常遇到的一些问题和技巧性的东西。
注意:为了方便,以下我们将Dreamweaver全部减缩为DW表示。
1 在DW中,如何输入一个空格呢?

  输入空格的问题,在DW似乎已成了一个老生常谈的问题,我们可能在许多介绍DW使用方面的书籍或文章中看到过N次。

  DW中对空格输入的限制是针对“半角”文字状态而言的,因此通过将输入法调整到全角模式就可以避免了,方法是:打开中文输入法(以人工智能ABC为例),按Shift+Space切换到全角状态,现在应该没问题了。

  此外,你还可以通过许多“变通”的方法达到录入空格的目的,比如常用的是:

  直接在源代码中加入代表空格的HTML代码“ ”;输入一定长度的文字对象后,然后调整文字的颜色与当前的背景颜色相同等等,不过注意的是后者在一些浏览器中可能显示上有点问题。(呵呵,当时俺用的那个就是让王晨昀给看出来的!)

2 如何在浏览器地址栏前添加自定义的小图标?

  你是不是记得有时在浏览网易网站的首页时,在地WWW.163.COM前会显示一个“易”字样的小图标。而默认情况下,这个图标是一个浏览器的指定图片。如图:

  其实这也不是什么高深技术,只不过在网站目录下添加了一个特定文件而已。

  这时,我们需要预先制作一个图标文件,大小为16*16像素。文件扩展名为ico,然后上传到相应目录中。在HTML源文件“head/head”之间添加如下代码:

Link Rel="SHORTCUT ICON" href="http://图片的地址(注意与刚才的目录对应)"

  其中的“SHORTCUT ICON”即为该图标的名称。当然如果用户使用IE5或以上版本浏览时,就更简单了,只需将图片上传到网站根目录下,即可自动识别!

3 为什么,我本来设计很好的网页,在浏览器窗口最小化时会变的丑陋难堪?

  这应该是个很值得大家注意的问题,也就是说,在全屏状态下浏览网页内容时,一点问题也没有。当我们使用窗口的最小化命令或手动的调整窗口的大小时,问题就慢慢出现了。网页内容会把当前窗口作为显示范围,依次下挫。举个例子,和在记事本中有“自动换行”和“没换行”的差别是完全一样的。

  解决这个问题,我们必须从网页的布局说起,一般情况下,网页内容的定位大多是通过表格来实现的。因此问题的“毛病”也就出在表格上。

请看下面一个表格的属性面板显示:

你可能已经注意到了,在表格的高宽设定选择上提供了两种不同的类型,百分比和像素。其中百分比的使用将会产生前面说到的那个毛病,将其全部更正为Pixels单位的实际大小就可以了。

4 如何改变网页显示时,最顶部的提示信息?

  浏览网页时,顶部的提示信息往往代表了网页内容的关键所在,有助于访问者提前了解网页内容。在DW4前,没有在功能上直接提供该操作,我们往往通过在源代码中应用“Title”属性来完成。进入DW4就简单多了。

  直接在编辑窗口最上方的“Title”输入框内键入所需要的文字信息即可。

5 怎么样,才能为图片添加指定颜色的边框?

  对于没有边框的图片而言,直接插入到网页中,在显示效果上是相当差的。记得在微软的FP中要给图片添加满意的边框还是相当麻烦的。

  不过在DW中就显得容易多了,因为这里有一个“Border”属性,可以让你直接设置边框的宽度。如图:

  宽度设好了,你一定会问,颜色呢?面板上并没有提供颜色的选择呀!呵呵,其实这里有一个技巧问题,用鼠标选择图片对象,注意不是点击选中,而是拖动选择。象设定文字颜色一样进行就可以了。

6 如何添加图片及链接文字的提示信息?

  在我们浏览网页时,当鼠标停留在图片对象或链接上时,在鼠标的右下有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合,它的作用是很重要的。

  下面先看看图片提示信息的添加,选中图片对象,在属性面板里你会发现有个“Alt”输入框。默认情况下,该输入框是空白的。在这里录入需要的提示内容就可以了。

  那么链接提示的制作就没这么简单了。因为DW中没有直接提供该功能,因此我们需要通过添加HTML代码来实现。

  在a href=“” 中添加“Title”属性。Title=提示内容即可。

7 如何把自己的ZIP或类型的文件供别人下载?

  在不少初级网页制作者看来,好象通过鼠标单击完成下载是件很"神秘"的事,实际上远非如此.在DW中凡是不被浏览器识别的格式文件(HTM,HTML,ASP,PHP.PERL,SHTML等以外的)作为链接目标时,默认的操作都是下载.

  这时你只需要,把要浏览者下载的文件名写好,然后制作一个到目标文件的链接.注意目录一定不要搞错.

8 怎样才能够保证网页中文字不跟随浏览器字体大小设置而变动?

  大家都知道,在IE浏览器的功能设置中,有一个可以自由设置窗口内容字体大小的功能,这样由于不同访问者的习惯问题,呈现在他们面前的网页有时也会不同。

  比如你可能本来设计时用的是2号字体,结果由于用户对浏览器的额外设定,变的更大了,这时显示效果上就出问题了。

  那么解决的办法就是将网页内容定性的强制在某个合适的大小上。即不容许他变化。通过CSS样式表对字体进行强制性控制就可以实现这个要求了。

9 以新窗口的形式打开目标链接?

  以新窗口打开,顾名思义,也就是在不覆盖当前窗口的前提下,另外打开一个浏览器窗口。你可以直接在连接代码中a href="" 加入“Target=_blank”。

  如果你的HTML比较差的话,在DW属性面板上同样提供了这个设置,当你在Link输入框中键入WWW网址时,后面的Target下拉框同时也被激活了。如图

  选择最上的“blank”就可以了。

10 如何让网页载入时,象许多商业网站那样,弹出一个广告窗口

  这在不少大型商业网站中,是时常见到的。在DW中可以轻松通过Behavior行为实现。

  既然是载入时,我们可以把整个网页内容视为事件对象。在DW编辑窗口中鼠标点击左下角的“body”标签,这时你能注意到全部网页内容已经选中了。

  单击“快速启动板”中的“Behavior”按钮,进入行为面板,如图:

  选择“Open Browse Window”项,这时你还可以对窗口样式进行自定义,比如大小,工具按钮的保留等等。另外还有一点就是别忘了对应的事件是“Onload”.

11 我的快速启动板中没有"Timelines",怎么办?

  DW从升级到4版本后,在快速启动板中增添了几个新的项目,比如Assets等等。这时原来在上面的Timelins(时间线)按钮被挤了下去。

  当然如果你急于现在就使用它的话,仍然可以通过菜单“Windows”-“Timelines”找到。不过毕竟不如放在启动板中方便,这时我们能通过设置把它添加进来!

  “Edit”-“Preference”进入窗口,在左边的项目列表中选择“panels”(面板),如图

单击上面的“+”号按钮,从下拉列表中选择“Timelines”。这时时间线已经自动添加到当前的“Show in Launcher”列表内容里,OK。更改后的“Launcher”面板如图。

  同时你还可以根据自己的需要自由的选择面板中出现的按钮选项,以提高工作效率。

12 作一个网页让它可以每隔5分钟自动刷新一次,如何实现?

  上网浏览时,我们经常会遇到一些网页。在隔一段时间没有响应时,它会自动刷新一次。除了可以起到提醒访问者的目的外,当新的刷新地址不是当前URL时,实现的就是自动跳转的功能。

  无论是重复刷新,还是自动跳转。在网页设计中,都是相当实用的操作。下面我们来介绍下它们的制作方法。

  选择DW“Object”面板的“Head”部分,注意默认情况下,显示的是Common的“内容”。如图

  单击上面的“Refresh”按钮,弹出窗口如下:

  其中“Delay”输入框中键入刷新延迟的时间(单位:秒),“Action”为刷新指定的目标URL。因为现在是刷新当前页面,直接选单选项“Refresh This Document”即可。

13 如何定义网页的关键字(Keyname)?

  当用户使用搜索引擎search合适内容的网页时,关键字起着一个不容忽视的作用。大多的搜索会每隔一段时间自动探测网络中是否有新网页产生,并把他们按关键字进行记录,以方便用户查询。

  你当然想让你的网页出现在搜索引擎的查询返回列表中了,这时关键字的定义就尤为重要了。

  同样在“Head”面板部分,单击“Keywords”按钮,录入需要逐个定义的关键字即可,注意每个关键字以“;”号隔开,数目没有限制。

14 如何在编辑窗口中,隐藏一些不必要的标签?

  当用户在网页中插入了太多的不可见元素时,在编辑窗口的最上面就会显示一排相应的标示标签,用来方便用户随时能找到它们。虽然这些标签本身并不影响浏览器里的显示效果,但多了以后,往往使网页内容不得不错位,从而一定程度上妨碍网页视觉上的调整,那么怎么样才能把这些东东去掉呢?

  进入“Preperence”面板,列表中选择“Invisibel Elements”,如图:

  勾掉你不想显示的项目前的“对号”即可,比如s cripts等

15安排不支持“框架”的浏览器的显示内容?

  我们知道,目前的浏览器类型很多,因此我们设计网页时最先考虑到的往往是“这个东西是不是在不同的浏览器中都能显示好呢?”。框架就是一个例子!

  不过避免开这点,很简单,你只需要在源代码中加入下面的内容就可以了。

   BODYnoframes ---本网页中包含有框架结构,如果您不能正常显示的话,请下载新的浏览器版本或更换主流浏览器--- /noframes/ BODY

16 如何避免别人把你的网页放在框架中?

  一些居心不良的人,经常偷着窃取别人的劳动成果,比如把别人精心制作的网页以子页的形式放到自己的框架中。

  那么怎样避免自己的网页内容被“盗用”呢?

  你只需要在网页源代码的head/head之间加入以下代码内容:

s cript language=“javas cript”!--
if (self!=top){top.location=self.location;}
-- /s cript

17 怎样加入注释内容?

  注释内容,顾名思义只是作为说明内容出现的,因此在浏览时不会出现在网页中。它的作用是对某些重要或复杂代码进行必要的标示,以更方便快捷的找到。

  进入“Object”面板的“Invisibel”部分(即不可见元素),选择插入“Comment”按钮,窗口如下:

  在“Comment”中键入必要的信息。这时如果你返回到源代码中,会看到这些操作添加的不过是下面格式的一段代码:

!--这是需要填写的注释内容--

18 水平线,为什么不能设置颜色?

  在DW中,当通过菜单“Insert”-“Horizonal Rule”插入水平线时,在属性面板中你会发现并没有提供关于水平线颜色的设置,因为最早NC中不支持标签hr(水平线的HTML代码)的COLOR属性,所以DW也没有关于它的设置。如图

  看来需要的话,我们只能直接进入源文件更改了。

hr color="对应颜色的代码"

19 如何设置可以关闭当前窗口的功能?

  这里我们可以先输入用来标示的文字“关闭窗口”,用鼠标拖动选中它,在“Link”输入框中键入“/”,同时切入源代码窗口,在链接代码中键入该事件-onclick=“javas cript:window.close(); return false;”。

  完整的代码为: a href=“/”onclick=“javas cript:window.close(); return false;”关闭窗口 /a

  当然你也可以将文字“关闭窗口”换成其他的对象,比如图片,按钮等等!

20 定时自动关闭的窗口又是怎样的呢?

  上面提到了个关闭窗口的功能,那么现在的自动关闭又是怎么实现的呢?

  在源代码body后加入下面的代码:

s cript LANGUAGE=“javas cript” !-- setTimeout('window.close();', 10000); -- /s cript

  其中的set Timeout是一个用来设定延迟时间的函数,这里10000表示10秒钟。

21 如何更改浏览器中鼠标的"形状"?

  一般情况下,鼠标在浏览器中以“箭头”的样式出现,那么我们能不能把它更改为自己喜欢的其他样式类型呢?

  改变鼠标形状在DW中是通过“CSS样式表”来实现的。

  菜单“文字(Text)”-“CSS样式表(CSS Style)”-“Edit style sheet”,弹出样式表的编辑窗口,也可以单击快速启动板中的CSS Style按钮找到,如下:

  单击“New”按钮,选择默认的“Make custom style”,同时在下面的Define中使该样式只应用到当前网页文档,“This document only”。

  在“样式定义”窗口的左边列表项中选择“Extensing”(扩展项),相应右边设置如图

  在“Cursor”(鼠标)中,下拉选择合适的形状即可,确定后返回,按F12在浏览器中观察效果,不满意的话,还可以对样式进行修改。

22如何去除掉链接文字下面的下划线?

  在我们完成链接制作后,链接文字内容往往被自动在下面添加一条下划线,用来标示该内容包含超级链接。当一个网页中链接比较多时,就显得有些杂乱的感觉了,其实我们可以很方便的把它去掉。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  同样进入“Edit style sheet”窗口,单击“New”确立新样式,如下

  这里的Type(类型)中,需要选择的是“Redefine HTML Tag”,同时在具体的标记Tag中选中代表超级链接的“a”,单击OK。

  编辑该样式,左边列表中选“Type”,如下

  勾取“Decoration”(修饰)中的“None”复选框,这时所有网页中的链接文字下划线都被清除掉了。

23 怎样让鼠标在链接文字上方“悬停”时,产生变色,变形等效果?

  访问网站时,我们遇到的最平常不过的一种效果就是“鼠标悬停响应”了,所谓的“鼠标悬停响应”表现在链接文字上,就包括改变颜色,修饰效果(下划线,中划线)等多种选择。

  由于这种效果很好的起到了对目标内容的强调作用,因此无论是个人网站还是一些大的商业网站(如新浪,搜狐,网易等)都有应用。

  在上个问题中,你已经知道了去除掉链接下划线的方法,这里不再赘述。下面的问题将是如何添加鼠标响应事件的过程。

  同样进入“Edit style sheet”窗口,单击“New”确立新样式,不同的是现在的Type类型中选择最后的一项-“Use CSS selector”,“Selector”选单中选择“a:hover”如下

  OK,进入编辑样式窗口,设定“Type”项中的文字颜色为“红色”,当然你还可以添加鼠标悬停时出现下划线的效果。

24如何让网页的背景图片不跟随内容滚动?

  背景图片是很多网页设计者经常添加的东西,当网页内容超出一屏时,拉动滚动条背景图片会与内容相对静止的一起滚动,那么能否锁定背景不跟随滚动呢?当然可以进入“Edit style sheet”窗口,单击“New”确立新样式,在TYpe中选择“Redefine HTML Tag”,同时Tag选单选中“Body”,在左边列表中选择“Background”。如下

  设定“Attachment”(附件)为“fixed”。其中scroll代表默认使用的滚动显示。

25 背景音乐你一定知道吧,怎么添加呢?

  在微软的网页工具-Frontpage中,有关于背景音乐的设置功能,那么DW显然没有作到这点,因此要使用的话,只能在源代码中手动添加了。

  在使用前,提醒大家一点,使用背景音乐一定要注意网页文件的大小,不能顾此失彼。

代码如下:

EMBED src=“music.mid”autostart=“true”loop=“2”width=“80”height=“30”

  其中src指定音乐文件的位置,autostart为音乐文件上传后的动作,true表示自动开始播放,false不播放(默认值)。

26 如何利用水平线制作一条宽度为1的细线?

  请点击 这里 去看实现方法(编者增加)

27 如何自动加入网页更改后的日期?

  只需要在源文件body/body之间添加如下代码即可。

s cript Language=“javas cript”!--
document.write(“Last Updated:”+document.lastModified);
-- /s cript

  在浏览器中的显示样式为:“Last Updated:2001/8/19”

28 怎样控制弹出POPUP信息?

  有时,当我们点击链接时,会出现一些着重性说明的提示信息,也就是弹出信息。比如当某个链接还没有完成目标内容页的制作时,就可以应用POPUP信息解释一下。

  在网页中合适位置输入链接文字,选中,在属性面板中制作链接。在仍保持选中状态的前提下,单击快速启动板中的“Behavior”按钮,如:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  点击左上的“+”号,从列表中选中“Popun message”,在随后的窗口中输入需要提示的信息,如图

  设定该动作的鼠标事件(Events)为点击(onclick)。在浏览器中预览效果如下

展开更多 50%)
分享

猜你喜欢

Dreamweaver技巧50问

Web开发
Dreamweaver技巧50问

DreamWeaver,经典50问(二)

Web开发
DreamWeaver,经典50问(二)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

DreamWeaver,经典50问(三)

Web开发
DreamWeaver,经典50问(三)

DreamWeaver,经典50问(七)

Web开发
DreamWeaver,经典50问(七)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

DreamWeaver,经典50问(九)

Web开发
DreamWeaver,经典50问(九)

DreamWeaver,经典50问(十)

Web开发
DreamWeaver,经典50问(十)

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

WinXP装不上DirectX9.0c怎么办

WinXP装不上DirectX9.0c怎么办

C语言嵌入式系统编程修炼之背景篇

C语言嵌入式系统编程修炼之背景篇
下拉加载更多内容 ↓