Dreamweaver超级技巧二！！

d3047

小江

版主

认证草根

Rank: 7 Rank: 7 Rank: 7

帖子: 216
积分: 173
威望: 268
金币: 10 元

楼主大中小发表于 2007-10-5 18:34 只看该作者 ( 看帖回帖是一种美德，您的回帖是对楼主最大的支持。)

Dreamweaver超级技巧二！！

<IMG alt="" src="http://www.236z.com/images/smilies/default/smile.gif" border=0 smilieid="40969"> 21. 给文字施加行为（Behavior），制作动态文字特效 在Dreamweaver中普通的文字是以字符为单位的，不能作为对象，即一些非常有用的javascript事件不能赋予文字。因为文字不像图片和其他控件有具体的“标记”，所以文字与很多特效失之交臂。为了给文字添加特效，只有把文字做成超链接来处理。这样文字就成为了对象，可以施加行为了。但是这样又带来了一些不需要的超链接属性，比如下划线，以及hover、visited等颜色变化。 要想单纯为文字添加特效，可以先把所想设置的文字做成超链接，然后再在它的上面添加行为，最后我们再把超链接转变为普通文字。具体的步骤如下： 选中你想编辑的文字，在链接目标框里随便填入几个字符。选中这个链接，单击窗口（Windows）→行为（Behaviors），弹出行为面板。按下“+”添加你想要的行为，如play sound等。打开Dreamweaver的超文本编辑器，找到这个链接，把<a>改为，把</a>改为。最后把“href=...”删掉。保存此页。按F12预览一下。效果还不错吧！ 22. 精确定位网页中各个元素的位置 精确定位网页中各个元素的位置有两种方法：使用表格或层。使用表格是目前比较通用的做法，具体方法是：先在网页中建立一个表格，注意表格的边框宽度应为０。然后再把各个元素按照你的要求放在各个表格单元之中。仔细调整表格单元的大小以及表格边框的位置，这时在表格单元中的元素也会随之移动位置。这样你就可以比较精确地定位网页中各个元素的位置了。使用表格的优点是通用，几乎各个版本的浏览器可以致支持表格。它的缺点是使用起来比较麻烦，需要仔细进行调整，而且定位不十分精确。层在网页中可以随意放置，因此我们可以使用层来进行精确定位。使用方法是，在网页中插入一个层，然后把你想要定位的元素放在层里，接着我们就可以把层放到所想要任何位置了。此外，你还可以借助标尺和网格进行精确的定位。因为层只在最新的浏览器中被支持，所以为了兼容旧的浏览器，我们可以把层转变为表格。方法是选择“修改(Modify)→版面布局模式(Layout Mode) →把层转化成表格(convert layers to table)”即可。注意这时的层不能有重叠，我们可以在插入层之前选择“查看(view) →防止层交错(prevent layer overlaps)”来避免层的重叠。一般来说转换后的页面可能会有一些变化，还需要我们手工进行调整。最后有一点要注意，在进行表格和层的相互转换时，最好不要在一个页面中同时使用层与表格，那样可能会把你的页面弄得一团糟。 23. 改变浏览者的鼠标形状 这是通过编辑样式表来实现的。具体方法是：选择“文字（text）→定制样式（CSS Style）→编辑样式表（Edit Style Sheet）”，弹出编辑样式表窗口，在其中选择“新建（new）”。接着选择“建立一个定制的样式（Make custom style）”，给这个样式表起名，单击确定。编辑该样式表，选择扩展项(extension)，在右边的光标项（Cursor）中选择要出现的指针效果即可。 24. 去掉超链接文字之下的下划线 这一效果是通过编辑样式表来实现的。具体方法是：“点击文字（text）→定制样式（CSS Style）→编辑样式表（Edit Style Sheet）”，出现编辑样式表窗口，选择“新建（new）”。接着选择重定义HTML标记（Redefine HTML Tag），并在下面的标记(Tag)选单中选择a。编辑该样式表，选择类型(type)，在右边的装饰（decoration）中选中无（none ）即可。 25. 制作一个跟着页面走的图像 这一效果是通过javascript实现的。一般来说完成这样一个效果需要一定的编程能力，但现在我们可以通过Dreamweaver的插件轻易地实现。你可以到http://www.computerinfo.com.cn/classroom/chajian/chajian2.zip下载这个插件。插件的安装方法：解压缩后拷贝到Dreamweaver下的文件夹Configuration\Objects内的一个新建文件夹里面即可。重新启动Dreamweaver之后，我们就可以在对象面板之中找到新安装的插件了。点击插件的图标，在弹出的对话框中填入图像的存放地址以及图像的显示位置就可以了。 26. 制作鼠标移上去后有变化的动态菜单 所谓动态菜单其实是两幅图，一幅是鼠标不放在上面所显示的，另一副是鼠标移上去所显示的。我们可以利用Dreamweaver提供的行为之中的swap image来实现这个效果。首先插入一副图片，用鼠标单击它，在属性面版的连接栏内输入要连接的网页。然后打开行为面板添，点击“+”号，选择swap image。接着出现一个窗口，要你选择鼠标移上去后所显示的图片，在此选择第二副图片，点击“确定”。好了，效果完成了，多简单。 27. 用Dreamweaver制作出一个类似于下拉菜单的效果 制作一个类似于下拉菜单的效果需要用到层的隐藏和显示特性。具体的方法是：在页面中插入一个单行多列的表格，作为你的菜单条。表格的列数由菜单选项的多少决定。插入一个层，在层中输入第一个下拉菜单的内容，并把这个层移动到表格第一列的下面。同理，对其他菜单项也作如上的操作，插入相应的层。把所有层的显示属性(vis)改为隐藏（Hidden）。 选择表格的第一个单元，单击窗口（Windows）→行为（Behaviors），弹出行为面板。按下“+”添加行为Show-Hide layers，并将第一个层（Layer1）属性改为显示(Show)，其他层的属性改为隐藏(Hide)。接着在行为面板中编辑这个行为，将它的触发事件(events)改为onMouseover。这样，当鼠标移动到第一个表格单元之上时，第一个下拉菜单就会显示出来。接着再添加一个行为Show-Hide layers，并将所有层的属性改为隐藏。接着在行为面板中编辑这个行为，将它的触发事件(events)改为onMouseout。这样当鼠标从第一个表格单元之上移开时，第一个下拉菜单就会隐藏起来。对其他的菜单项重复上述操作。但要注意设置“菜单二”时，第二层显示，其他层隐藏；设置“菜单三”时，第三层显示，其他层隐藏；依此类推下去。好了，做好了，按F12看看吧。 28. 轻松制作下载文件 用Dreamweaver其实很简单，把要让浏览者下载的文件名写上，然后拖动鼠标选取这段文字，在文本的属性面板上“Link”的属性输入框中写上文件名就行了。注意：若被下载的文件与该网页不在同一目录下，则文件名必须包含相对路径，否则在下载时将提示找不到文件。 29. 利用Dreamweaver的书签制作跳转链接 利用Dreamweaver的书签我们可以实现这个功能。具体方法是：将光标移到你想跳转到的地方，选择菜单中的“插入（Insert）→书签（Name Anchor）”，输入书签的名称。接下来，在你想调用链接的链接目标框中填入“#书签名称”，这样一个页面内的跳转链接就做好了。在这里，如果我们在书签名称前填入网页的名称，就会跳转到其他页面中的书签处。 比如说我们在Link处填入“index.htm#top”，当浏览者点击这个链接时就会跳转到index页面中的top书签处。 30. 去掉图片和表格接触地方的空隙 要使图片和表格接触的地方不留空隙，仅在表格属性面板上把外框线（border）设为0是不行的，还需要在表格的属性面板上把单元格的两个属性设为0（即cellspacing="0"和cellpadding="0"）。 31. 用TracingImage帮助定位网页中各元素的位置 TracingImage是Dreamweaver一个非常有效的功能，它允许用户在网页中将原来的图案设计作为辅助的背景。这么一来，用户就可以非常方便地定位文字、图像、表格、层等网页元素在该页面中的位置了。TracingImage的具体使用是这样的：首先使用各种绘图软件作出一个想象中的网页排版格局图，然后将此图保存为网络图像格式（包括gif、jpg、jpeg和png）。用Dreamweaver打开你所编辑的网页，在页面的空白区单击右键，选择“Page Properties...”，然后在弹出的对话框中的Tracing Image项中输入刚才创建的网页排版格局图所在位置。再在Image Transparen中设定TracingImage的透明度，OK。这样你就可以在当前网页中方便地定位各个网页元素的位置了。使用了TracingImage的网页在用Dreamweaver编辑时不会再显示背景图案，但当使用浏览器浏览时正好相反，TracingImage不见了，所见的就是经过编辑的网页（当然能够显示背景图案）。 32. 关于“Convert Table widths to Pixels”和“Convert Table widths to Percent” “Convert Table widths to Pixels”和“Convert Table widths to Percent”是Dreamweaver两个设置表格宽度的重要功能。当你打开一个带有表格的网页时，在状态栏中点中〈table〉标签，在随后显示出的表格属性工具面板中就能看到这两个按钮了。顾名思义“Convert Table widths to Pixels”就是将表格中所有单元的宽度以像素表示，而“Convert Table widths to Percent”是将表格中所有单元的宽度以百分比表示。仔细想想他们的作用，如果将一个表格的宽度全以像素表示，但浏览窗口被放大时，表格就不会随之放大单元格的宽度。而使用了“Convert Table widths to Percent”后能够使你在640×480分辨率下建立的100%宽的表格在更高的分辨率下依旧保持100%的宽度。所以活用这两个功能可以使网页排版事半功倍。 33. 调用Style而不致使网页原代码混乱不堪 调用Style的方法很多，你可以单击右键选择Custon Style来调用Style规范，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。比如用Custon Style来调用Style规范，在网页代码中就生成一个〈span〉标签，这样标签一多就会使文件十分臃肿而且影响浏览器的解析速度，所以我建议尽量使用状态栏中的元素列表来调用Style。还有一个小技巧，如果你要使用一个Style定义某表格单元中的所有文字，只要在〈td〉标签中调用Style就行了，而不需要在一个个定义〈p〉标签。注意这个方法不适用于〈table〉标签，因为在〈table〉标签中用Style定义的文字格式会被Netscape忽略。 34. 使用定制窗口功能测试网页在不同分辨率下的效果 谁都不希望看见自己辛辛苦苦做的网页在不同的分辨率下面目全非，所以测试网页在不同分辨率下的浏览效果是网页制作中很重要的一步。我们可以在Dreamweaver的操作界面中的状态栏中间，选择需要的分辨率来调节窗口大小，从而实现在不同分辨率下测试网页效果。 35. 上传网站时无需使用第三方FTP软件 Dreamweaver中融入了FTP功能，而且为网站上传作了优化。我们可以做一个简单的比较，当你使用一般的FTP软件上传网站时，是不是都按本地机上的网站目录在服务器中新建目录，然后再一个个文件上传。这种做法实在没错，但由于本地机中的网站目录中并不是每个文件都被网页调用（比如在建网页时留下的备份文件），所以筛选文件的繁重工作量只有用户自己知道。但使用Dreamweaver上传网页就可以方便得多，由于FTP功能在幕后为用户进行了许多必要的工作，所以用户只要将网站地图内相关的HTML文件上传，Dreamweaver就会自动将与此HTML文件相关的所有其他本地文件一并上传（如图像、ZIP文件、FLASH文件甚至是各种REAL文件）。使用Dreamweaver内带的FTP功能的具体做法是：编辑已经定义过的SITE，在“Site Definition for...”面板中选择“Web Server Info”。如果网页是通过FTP方式上传的话，将“Server Access”设为FTP，在FTP Host中添入FTP服务器的地址，在Host Directory中添入远程登入目录，在Login中添入用户名，再填好Password。经过了以上的设定，就可以在Site面板中按Connect按钮，当Dreamweaver成功连入服务器后，Connect按钮会自动变为Disconnect，并且在一旁亮起一个小绿灯。接着要做的事就是在要上传的HTML文件上单击右键，选择“Put”即可。当此HTML文件上传成功后，状态条中将显示Put Depanding File，说明Dreamweaver正在上传这个HTML文件所调用的其他本地文件。不仅如此，Dreamweaver还可以直接下载服务器上的文件进行修改，方法么，只要使试试Put旁的Get按钮就明白了。 36. 实现用鼠标指向链接时出现下划线的效果 有些网页的链接，原先没有下划线，你把鼠标指向链接处，才会出现下划线，鼠标移掉下划线就又没有了。这种效果其实可以用层叠样式表（CSS）来实现，在Dreamweaver中编辑层叠样式表不用编写代码，具体操作方法如下： （1）在快速启动栏中点击层叠样式表按钮（就是把鼠标放上去显示“show css styles”的那个按钮），在弹出的CSS Styles面板上双击（none）； （2）此时，可看到弹出的Edit Style Sheet 面板，在该面板上按New按钮； （3）再在弹出的New Style 面板上点取Redefine HTML Tag（重新定义HTML标记）再在Tag中选择“a”（超级链接标记）标记后按OK按钮；（4）这时可看到弹出的Style dehinition for a 的对话框，在此对话框中可以设置超级链接的许多属性，你可以按你的意愿设置，但我们这里主要是要去掉那讨厌的下划线，所以我们在decoration 属性中选择“none”，这样就把下划线去掉了；然后我们再选择颜色为：#339966。按ＯＫ按钮返回到Edit Style Sheet 面板； （5）在Edit Style Sheet 面板上再按New按钮； （6）在弹出的New Style 面板上点取Use CSS Selector ，再在该面板上的selector选择框中选择“a:hover”（定义当鼠标在超级链接上时链接的属性），按OK按钮； （7）在弹出的Style dehinition for a:hover 的对话框中，我们在decoration 属性中选择“underline”，这样就把下划线又加上了；然后我们再选择颜色为：#FF3300。按OK按钮返回到Edit Style Sheet 面板； （8）在Edit Style Sheet 面板上再按Don按钮，至此所有设置结束，你在Dreamweaver的源代码检视窗中将看到在<head>与</head>之间如下所示的代码： <style type="text/css"> <!-- a { color: #339966; text-decoration: none} a:hover { color: #FF3300; text-decoration: underline} -→ </style> 　　 37. 实现定义的超级链接文字颜色 文字超级链接的颜色（包括未被访问的链接颜色、鼠标的链接上的颜色、已被访问过的链接颜色等等）可以用层叠样式表（CSS）定义，下面就介绍如何能随心所欲地设置文字链接的颜色。 （1）超级链接的默认颜色是：未被访问的超级链接是蓝色、被访问过的超级链接是紫色； （2）要想使CSS定义的颜色起作用，在超级链接的文本的颜色属性中什么都不要填； （3）若你已定义了文本的颜色，发现CSS中定义的超级链接颜色不起作用，你可以取消文本的颜色定义，或取消超级链接再重新定义一次，CSS定义的颜色就起作用了； （4）超级链接上各种状态下文本颜色的关系：一旦定义了被访问过的链接的颜色（A: visited），则当链接被访问过后，该链接的颜色不再改变，即定义鼠标在超级链接上的颜色（a: hover）将不起作用了。若不定义被访问过的链接的颜色（A: visited），则当鼠标在超级链接上显示a: hover 中定义的颜色，当鼠标移开时显示a 中定义的颜色。 从上述可以看出，文本链接的颜色实际上只能在两种颜色之间变换，并没有像有些文章中讲的那样可以在多种颜色之间变换，但由于用那两种颜色可以任意，所以应该讲颜色的选择范围还是比较大的。 38.在Dreamweaver中把图形放在最中间 点击选取图形，在图形的属性面板的右上角Align（对齐属性）边上有个下拉框，在下拉框中选取，则文字在图片四周绕排。若是单独图片在中间，则在图像面板上点取居中属性即可。 39.如何使用Behaviors 功能，而又不链接到任何地方去 选取要作为超级链接的元素（一幅图片或一段文字），在属性面板上的地址栏（Link）中不填写任何链接地址，只加上一个“#”号，（引号不包括在内）。这样即可以使用Behaviors 功能，而又不链接到任何地方去了。 40.实现在一张（较大）图片上做出几个不同的链接 在Dreamweaver中，这就是使用所谓的设置“图像热区域”。先选中图像，然后在图像属性面板上有一个“Map”工具栏，在其下方有三个淡蓝色的工具图标，即“矩形”、“圆形”或“多边形”，你可以根据需要选取一个（用鼠标点一下就行），再把鼠标移图像上，按下鼠标左键，拖动鼠标就画出了一块淡蓝色的区域（不用担心这块淡蓝色区域会破坏你的图像，在浏览器中是不显示的），这时你在属性面板上把需链接的网页地址添上就行了。你需要几个链接就画几块区域，随你的便。

100M企业空间20元。cn1元。com45元。qq 853282696

TOP