一直是不少网友钟情的网页设计工具,除了它强大的动态效果制作能力外,方便简洁的操作界面更是独具特色,下面我们将以最新版本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)。在浏览器中预览效果如下