当前位置:主页 > 平面设计

最新发布

用Dreamweaver测试主页
用Dreamweaver测试主页

每一位夜以继日地织网的“网虫”都希望能营造出一个舒适、温馨的“家”,更希望“家”中时常高朋满座,一起来分享自己的快乐。自己的“家”到底建的怎样呢?最好的办法是到一些专业测试网站去做一次测试了,但上传主页、申请测试、下载修改、再上传……太麻烦了吧。其实,用Dreamweaver,不用上传主页,我们就可以轻轻松松地对自己的主页进行测试。它能对网页下载时间、浏览器兼容性、网页链接、文本拼写等方面进行测试,如此强大的测试功能,你没听说过吧?我们根据测试结果对主页进行相应的修改,然后再上传,岂不更省事?    图1无论是用什么网页工具制作出来的网页,我们都可以用Dreamweaver来对它进行测试。网页文件一般比较多,为了使测试工作更简便,我们先在Dreamweaver里为其建一个本地站点:启动Dreamweaver,进入“Site→New Site”,弹击如图1的对话框,选中“Local Info”项,在“Site Name”处为站点起一个名字,在“Local Root”处指定站点存放的文件夹(可直接输入路径或单击右边的文件夹图标选择),其他的可以不填。点击“OK”按钮,弹出一个是否为新站点建立缓存文件的对话框,确定后我们就可在站点管理器右边的本地文件夹(Local Folder)中看到这个站点的所有网页文件、文件夹了(如图2)。因Dreamweaver的默认首页为index.html(或index.htm),如果你的首页为其他文件名,应在站点管理器的“Local Folder”中将其选定,然后在“Site”菜单中选“Set as Home Page”,设定其为首页,这样我们在站点地图中就可以清楚地看到各网页的层次关系了。下载时间 测试:     图2同一主页在不同速率的Modem下其下载速度是不同的,在Dreamweaver中我们可以选择不同速率的Modem对主页进行测试。先在“Edit”菜单中选“Preferences”,进入参数选择对话框(如图3)。在类别栏(Category)选中“Status Bar”项,在其右边“Connection”的下拉选项*有14.4、28.8、33.6、56、64、128、1500七个参数供选择,如果我们想测试网页在56K“猫”下的下载时间,参数选56就行了(1500这个参数做Intranet测试用),然后按OK完成设置。双击站点管理器的任一个网页文件,我们都可以在Dreamweaver的编辑窗口打开它,同时在编辑窗口下方的状态栏就会显示出这个网页文件的大小及下载时间(见图4)。如:51K/8sec,这就表明这一网页大小为51K(包括与其链接的图片和Shockware电影等),用56K“猫”下载到浏览器中打开所需的时间大约为8秒钟。如果你的网页文件很大,那么其下载时间就相应长些,你可要为它减减肥了。Dreamweaver里也有“减肥茶”,大家可以看今年第7期的《中国电脑教育报》。浏览器兼容性 测试:    图3我们编写的网页当然希望在各种不同的浏览器下都有同样的效果,但由于浏览器的兼容性问题,一些在IE下非常漂亮的网页有可能在其他浏览器下却显得一团糟。为了使自己的网页至少在目前主流浏览器下获得兼容,我们可以用Dreamweaver来对网页兼容性进行测试:在站点管理器的“Local Folder”中,右键单击选定整个网页文件夹(对全部网页进行测试)或选单个网页文件(测试单个文件),然后在右键菜单中选“Check Target Browsers”,则弹出如图5所示的选择对话框,在这里我们可以选择不同的目标浏览器来对它进行测试,一般选Microsoft Internet EXPlorer4和Netscape Navigator4这两个目前使用较广的浏览器即可,按“Check”按钮即可进行测试。其测试结果如图6所示,测试报告包括了此次测试的时间、所使用的浏览器、兼容性有问题的网页文件、不兼容原因及具体语句等信息。我们根据这些信息,只需对兼容性有问题的部分作适当的修改就行了。网页链接 测试:   图4如果我们编写的网页较多,就难以避免网页文件之间一些链接的出错。若要我们对各个链接一一进行检查,工作量之大,确实并非易事,况且有些隐藏链接我们也不易发现。Dreamweaver不但能快速测试出网页中的错误、损坏的链接(Broken Links)、外部链接(External Links)和单独文件(Orphaned Files),还能帮我们对错误链接做快速轻松的修改。在站点管理器中的“Local Folder”中,右键单击里面任一个文件或文件夹,在右键菜单中选“Check Links→Entire Site”,即可对整个网站链接进行测试,测试报告如图7。在“Show”下拉选项中,我们还可以看到外部链接和单独文件。对于错误链接,我们单击右边“Broken Links” 列表中的任一个,其右边都会出现一个文件夹图标,点击这一文件夹图标,选择正确的链接文件就可使它“复活”了。也可以直接输入正确的路径、文件名。拼写校验 测试:    图5拼写校验能对你主页中的英文文档进行校对。在站点管理器中双击要校对的网页文件将其打开,然后在“Text”菜单中选“Check Spelling”,即可对你网页中的英文文档进行拼写校验。如果发现有单词拼写错误,就提示你是“忽略”还是“改正”,其用法与我们常用的办公软件WPS 2000中的“文字校对”相似。如果你的主页没有英文文档,这项测试可以省略。   图6经过以上的测试,你主页存在的问题基本上都找出来了,下一步就是上传你的主页了,到时可别忘了邀我到你“家”中作客哦。       图7 

3 次浏览
UltraDev4.0使用中一些常见
UltraDev4.0使用中一些常见

在使用UltraDev4.0制作asp的网络应用程序时,经常会遇到“……javascript error……”、软件自行退出等错误。其实这个问题与UltraDev4的稳定性和兼容性有关,出现这个现象的原因有很多种:  1.数据库的原因:  在设计数据库时对于数据表、数据表中的字段都要避免使用中文,并且不要使用一些ABScript中的保留字,最好的方法是在名字前加上一个前缀或后缀。还有建立后的数据库使用也会出现错误,一般重新建立数据表或库可以解决(我曾就遇见过这样的事,看看蛮对的数据库就是出错,照样重建就好了);  2.当页面多次编辑后,光是在服务器行为视窗中删除的行为有时会留下许多Asp残留码,这会导致你页面编辑失败或者测试出错等等。所以有时在编辑后最好多关心源码;  3.过多的安装了插件有时也会引起UltraDev执行错误。这个错误严重会导致UltraDev崩溃,其实是由于插件作者对于代码没有考虑周全造成的,我曾经遇见过一使用update数据操作就出现将当前页代码增加五倍,最后还是卸除了部分插件解决。所以对于不太使用的插件最好卸除;  4.在进行UltraDev数据库链接时不要将Access数据库处于设计状态,否则不光会链接出错,当你预览Asp页面也会出错,而要是不太注意,这问题够你忙活的了;  5.UltraDev4跟几种内存驻留程序会不定时出现冲突,如早期的金山毒霸开着连UltraDev4都打不开了,所以只有尽量少开后台程序了。  6.在利用UltraDev4制作登录系统中有个用户等级设置,这里的等级名称也千万不要使用中文,否则必定会出错的。  7.“……JavaScript error……”最多出现在数据源建立时,通常出现一次错误后,即使你再次正确设置数据源也会报错,最好是重启UltraDev,再不行就重启操作系统,那个用户等级问题我就是这样才解决(对于解决js错误,重装UltraDev甚至重装操作系统也并不鲜见)。  8.操作系统对于UltraDev使用也会有或多或少的影响。通常使用Windows2000 server版比用Windows 98 +Personal Web SerVer来得好,一来稳定,二来自带IIS5.0不必费心找服务器软件了,而且我发现出错的概率也小很多。  使用UltraDev4.0的网友最好去升级到4.01,它是Macromedia公司四月份发布的,修改了一些错误,避免了一些常见问题的出现,我网站有下载和升级包的简单说明。  9.千万不要使用任何UltraDev汉化包。我在UltraDev1.0使用时曾用过汉化包,结果始终出现不明错误,后来就一直不敢用了。在论坛上听说很多网友也有类似情形,所以建议UltraDev用户不使用汉化包。  以上这些是我在使用Dreamweaver UltraDev半年多时间中的对于出错原因的一些体会和解决方法,希望对于你使用UltraDev有帮助。对于2000年6月才推出的软件,存在些Bug也属于正常,关键是如何中使用中积累经验去对付它。其实有很多人对于Dreamweaver UltraDev不屑一顾,认为是个鸡肋产品……不过我倒认为他是学习Asp的很好途径,因为它可以让你在最短的时间内做出令自己满意的WEB程序从而获得继续学习的信心。

8 次浏览
关于“层”定位的问题的解答
关于“层”定位的问题的解答

一. 常出现的问题 当你的表格选居中的时候又插入了层(插入层方法1:object->draw layer)的时候(800*600),分辨率一旦变大、窗口最大化之后,层就错位了,而如果使用菜单(插入层方法2:Insert->Layer)插入层的时候,这个层就会与它的上级元素相对定位,但是一旦在Dreamweaver中用移动工具动了它,它就会马上变成绝对定位,不会再与上级元素相对定位了。 二. 思想: 通过object面板置入的层是绝对定位的层,这个绝对定位指的是层的左上角与浏览器窗口内部的左部、顶部距离,代码中的写法是left与top。 通过菜单置入的层是相对定位的层,这个相对定位指的是层与它的上级元素的距离(它的上级元素的左上角),由于这个div中不再有left与top的属性,所以浏览器把它的位置定为与它的上级元素相同 (总结一:只要去掉层的left与top属性就可以相对定位!) 例图: 三. 深入思想: 现在层已经相对定位了,可是只是这样还完全不能满足要求,因为很多时候不能把表格设定得那样准确,否则会把表格搞得很麻烦,把代码搞得很大很大。 如果在上面说做出的相对定位的层的基础上再做一个层对它相对定位,不就解决问题了吗? 这就涉及到了父层与子层的问题(由于它是层的基础,在书与网上教程中就可以看到,这里不再阐述),父层相对于某点定位,而子层相对于父层定位,就可以达到层的相对定位这个目标了 四. 具*作(只介绍最简单的方法,对代码熟的朋友可以手敲的): 先在页面内插入表格(可以设居中,表格就居中了,否则几乎无意义),鼠标在某单元格内点一下,让光标在此闪动,然后通过菜单插入一个层,这个层就相对与这个单元格定位了。插入一个层之后,不要动它,而且也永远不要动,但是可以更改它的大小,比如把它的高与宽都改成"0",让它不再影响你对其他内容的编辑,否则,这个层的left与top属性出现之后就成了绝对定位了,变成绝对定位后你可以把它的left与top属性去掉,就恢复成相对定位了。变成"0"之后,有时子层会看不见,可以按[f11]键点它恢复编辑。 现在光标在这个层内闪动,再通过菜单插入子层,这时子层与父层重叠,你可以随意移动它,不管怎么动,它都是相对与父层定位。 好了,一个相对定位的层(子层)做好了,你可以在里面随意添加内容了,也可以改变它的尺寸、位置、背景等所有属性,但是不要动left与top属性,因为它是相对于父层的左上角定位的。 下面给出父层与子层在Dreamweaver中的属性面板: 父层: 子层: 五. 技巧: 先插入一个表格,在其中一个单元格中插入父层,可以把它定得小一点,比如说20象素宽、10象素高,这样它就不会盖住下面的链接,也不影响子层的相对定位。 如果要用778象素宽定义表格,可以把父层插入到表格的第一行第一个单元格中,这样就可以在所有层制作完后插入父层了!对代码熟的朋友就可以手敲父层而不必再去调整子层的位置了。 

9 次浏览
DW编主页的一个小问题
DW编主页的一个小问题

- 事情是这样的: 我用Css主要是改变一下我的超级连接的颜色和下划线的有无。正是由于他的简单,而使他带来了一个小问题……   Dreamweaver编主页的一个小问题   Dreamweaver应该大家都知道吧(以下简称DW),这是著名美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器。由于DW的功能之强大,所以可以在他里面直接定义css(样式表),而就是这css给我出了个小难题。   事情是这样的, 我用css主要是改变一下我的超级连接的颜色和下划线的有无。在DW里定义css的确很方便,里面的参数他都为你设置好了,只要你点鼠标就行了。正是由于他的简单,而使他带来了一个小问题(就我自己认为):   < style type="text/css">   < !--   a:hover { color: #FF3333; text-decoration: underline}   a:link { color: #3333FF; text-decoration: none}   a:visited { color: #3333FF; text-decoration: none}   -->   < /style>   以上就是DW生成的css源码,这段源码的意思就是去掉超级连接的下划线,鼠标移上去的进候改变颜色并添加下划线,连接后的颜色不变为蓝色。我本意也是如此,可是在IE里浏览的结果告诉你,不是这样的。而是有一点点小改变,就是连接了之后,当鼠标再次移上去的时候,本来是有下划线的,变成没有了。这是什么原因呢,一般来说是有的呀!那是为什么了,接着我从别的网站找了一个和我定义的差不多的css,分析一下他们的css源码,差不多呀(就颜色不同和多了一些其它参数),其它多的参数很快被我排除,因为那些参数我用不着,就停在颜色上,刚开始我还以为我是色盲呢!但是还是很快就又否定了,我把找到的css放到我的主页上很正常,并把颜色改成我的颜色,还是很正常。这也不是,那也不是,那为什么了。为什么一样的代码会有两种效果?为什么…   就在我准备上网求助的时候,突然我的眼睛一亮,该不会是这个原因吧!原来那个我找来的代码和我自己的代码,只有一点点不同就是---顺序不同,因为我想顺序不是很重要吧!就没有注意。接下来就是改了,再一试,哇,成功!唉看来以后定义css只有手写的或在DW里定义了再改。真麻烦,我还以为有DW就变简单呢,没想到还是要手定代码。如果那位高手还有好办法请来信告之!以下是改了的代码:(是不是不容易注意啊!)   < style type="text/css">   < !--   a:link { color: #3333FF; text-decoration: none}   a:visited { color: #3333FF; text-decoration: none}   a:hover { color: #FF3333; text-decoration: underline}   -->   < /style>   唉!这小问题真是害我不浅,为了不让他再去害人,我把他写出来供大家看看,不要在犯我这样的错!

5 次浏览
DreamWeaver表格妙用-线框制作详解(二)
DreamWeaver表格妙用-线框制作详解(二)

2> 细线边框的制作 细线边框是网页中定位区分内容常用的一种方法,配合特定图片的使用,往往能够达到不错的效果,那么如何制作细线边框呢? 大家都知道,所谓细线边框,大体外观上就是一个简单的1行1列表格,那么我们直接把表格对象的Border值设定为1不就可以了吗?请看下面的制作效果: 同样在网页中指定位置插入一个单行单列的表格,用鼠标单击表格外框的任何一个部位以选中它,在属性板中将“Border”值设定为1,也可以同时将另外的“CellPad”和“CellSpace”置零,如图: 预览状态下的不同效果图示: 从上面的图示中,不难看出简单的边框置1达不到效果,下面我们看下,如何通过对表格的“巧妙”设置来实现要求的细度。 同样在上面的表格中,将属性板中,“border”、“cellpad”设置为“0”,“cellspace”设置为“1”,注意“Cellspace”指的是单元格与单元格之间的距离大小。如图 将表格的“Bgcolor”设定为“红色”,同时将单元格的“Bgcolor”设定为同网页背景色-“白色”,预览效果如图: 为了便于大家理解,这里笔者再稍微解释下。其中我们将“CellSpace”设定为1,在设定表格的背景颜色时,无疑已经包括了这一部分。而后面的单元格设定则恰好把它“甩”下了。这样就促成了显示上的效果,那么改变表格背景色也就是改变边框的颜色了。

4 次浏览
层的应用及其定位(三)
层的应用及其定位(三)

3、绝对定位和相对定位  层的随意定位的特性给网页设计者带来的很大的方便,但同时也带来了一定的麻烦。为什么这样说呢?  大家都知道,为了让网页能够自动地适应用户设置的分辨率,在网页制作过程中人们采用了百分比的设置方式,从而页面的所有元素从新排版,保证原来的格式。但如果你在页面上使用了层,你会发现当浏览器大小改变时,层的位置却没有改变,结果它和其他的元素之间的配合出现了错位现象,页面变得杂乱无章了。而我们是不能够强制用户使用特定的分辨率的,那么就只有想办法让层的位置也能够象表格一样根据浏览器大小的改变而重新定位,这就需要合理地使用相对定位和绝对定位了。   绝对定位(position:absolute):即层默认的定位方式,绝对于浏览器左上角的边缘开始计算定位数值。  相对定位(position:relative):层的位置相对于某个元素设置,该元素位置改变,则层的位置相应改变。  对比两种定位方式,不难发现,使用相对定位的层才是真正实现设计者思想的方式,从而完全掌握层的排版。   那么,绝对定位有没有用呢?当然有用了,当你的网页全部使用层来排版,而且页面是使用默认的居左放置的,那么使用默认的绝对定位方式可以方便的排版,提高设计的工作效率。   在Dreamweaver中,插入的层虽然都是使用的绝对(absolute)定位方式,但是插入的方式不同,带来的效果是不同的。前面我们已经知道,使用菜单插入的层是没有定位的坐标的,只有当你使用鼠标拖动该层改变其位置后,才会写入坐标值。而拖拉出来的层的初始位置坐标就是鼠标开始动作时的坐标。  请明确一个概念:由Dreanweaver赋予坐标值的层是绝对于浏览器边缘定位的层。不带坐标值的层则是相对于某元素定位的层!  所以,最简单的设置相对定位层的的方式就是:选定插入层的位置(例如某个单元格或者页面中某处)将光标停留在该位置,然后选择Insert-->Layer,即可在该位置创建一个固定大小的层,这个层就是相对于该位置定位的了。需要注意,采用这种方式创建的层,你只可以使用鼠标调整它的大小,绝对不可以移动它的位置!也就是说,在属性面板上,层的位置栏中(Left Top)绝对不可以有数值。  很多情况下,插入的层的位置并不一定准确,特别是Dreamweaver并非真正的所见即所得的软件,网页的排版只有到浏览器中显示才可以真正看到排版的表现,所以上面所说的方法就显的过于简单而容易出问题了。这个时候,你需要给层一个定位的参照物,让它真正地做到相对的定位。  简单的参照物可以是一个父层,即先插入一个相对定位的空白的层,在此层中插入你真正需要的层,而这个层是可以随意拖拉改变位置的。但这样毕竟在网页中多插入了一个空白的层,我想它一定不是专业的网页设计师所希望的。下面我们介绍使用Css来实现真正的相对定位的层。    我们需要先设置一个CSS Class,来定义定位的方式为相对:  .ceng { position: relative; }  然后,赋予你所需要的参照物(可以是 table,tr,td... )一个 CSS属性为这个类。这样浏览器就会以它的左上角为原点,建立新的坐标系。再在这个参照物的下级插入层,则层绝对于该参照物定位,如果你需要改变层的位置,你可以直接在层的属性面板上输入Left Top的数值(不可以使用鼠标拖拉),切记此数值的坐标原点是你所指定的参照物,而不是浏览器的边缘(在Dreamweaver中编辑时,该层看起来象是绝对于页面边缘定位的,但在浏览器中,它是绝对于你所指定的参照物的)。   很多朋友使用层是为了等到动态的效果,例如使用时间线让某个物体运动起来,增加网页的动感,那么相对定位后的层还可以运动吗?回答当然是肯定的。由于定义对象的两个位置需要拖动该对象改变位置,所以使用简单的层定位的方法是不行的,但如果你使用CSS来设置相对定位的效果的话,那么就完全可以实现了。只是需要注意,定义运动的初始位置和结束位置时,你仍然不可以使用鼠标拖拉,而只能自行输入Left和Top的数值。  本来层的使用并不是很复杂的,但我却把它单独作为一个章节,原因就是层的定位有一定难度,希望朋友们看过以上的介绍后,在Dreamweaver中多实验几次,否则还是容易出现问题的。  OK!关于层的使用就说这么多.

7 次浏览
接触Dreamweaver 4的Flash按钮制作
接触Dreamweaver 4的Flash按钮制作

Dreamweaver 4在对象面板的“Common”组中增加了一个“Flash Button”对象图标,点击这个图标,就可以利用这个对象的功能制作出各种各样的按钮,并自动插入到网页中。至于你是否懂“Flash”则无关紧要,因为在整个过程中你只是点点鼠标而已。请看下面这个Flash按钮:  上面这个按钮当鼠移到按钮上面时,那个五角星会转动,单击按钮可链接到一个网页,另外,由于采用了矢量图形和文字,任意放大或缩小均不失真。下面我们就以上面这个按钮的制作为例来说明Dreamweaver4 的“Flash Button”对象的使用方法:  1、在需插入按钮的地方用鼠标点一下,然后点击对象面板上那个“Flash Button”图标,就是下图用红线圈起来的那个:  Dreamweaver4 对象面板  当你点击对象面板上那个“Flash Button”图标后,立即弹出一个“Insert Flash Button”对话框,如下图所示:  Insert Flash Button对话框  2、我们来仔细看看这个对话框,看懂了它,Flash按钮也就会做了。Sample:示例,就是当你在下面的按钮类型中选择一种按钮类型时,在这个窗口中显示出来,鼠标在上面移动可以看到Flash效果;style :按钮类型选择,你可在它右面那个选择窗口中选择一种你喜欢的按钮;Button Text:输入按钮上的文字,也就是把按钮上的“Button Text”文字换掉;Font :按钮上文字的字体;Size :按钮上文字的大小;Link :按钮对应的链接文件。就像超级链接一样可以使用相对地址也可以使用绝对地址。Target:和超级链接的Target相同,即指定链接的网页在那个窗口中打开。BgColor:设置按钮的背景颜色。这点很重要。按钮默认的是白色背景,必须把按钮的背景色设置成与插入按钮地方的背景色相同,才可以使你的按钮无缝嵌入页面。Save As:按钮的Flash文件保存的文件名,输出为Swf格式,你也要以按“Browse...”按钮打开文件夹选择保存按钮文件的路径。Apply按钮:它与OK按钮不同的是,按下它后,将按对话框的设置形成按钮文件并插入到网页指定的位置,但并不退出对话框,你可以继续插入按钮;Get More Styles...按钮,若你感到对话框的“Style”选择框中没有你合适的按钮,则可以上网通过按钮GetMore Styles查找更多的样式。  3、全部按钮插入结束,按OK返回网页编辑窗口。  Dreamweaver4的“Flash Button”对象,简单易用,但有一点非常遗憾:它现在不支持中文。我想在不久应该会解决,否则就太令人失望了。  

9 次浏览
Dreamweaver快速编辑网页标签
Dreamweaver快速编辑网页标签

不知各位是否有手写代码的习惯。例如:要在一个单元格插入一段CSS代码,或者一段Javascript代码,怎么做才比较快捷方便呢?  虽然Dreamweaver已经为我们提供了代码视图,可是必竟还要手工去查找,还要来回地切换。虽然也可以用代码视图与编辑视图并存的方式,但还要占用一半的屏幕空间,使本来便不大的编辑区域更显得拥挤。有没有更好的办法呢?答案是肯定的。  下面我们以Dreamweaver MX为例,假设大家Dreamweaver面板布局都为默认的布局方式。查看一下属性面板的上方是否有一行小标签。(如果您用的不是MX,标签在状态栏中)例如:你新建一个空白的HTML文档,上面的小标签应该为<body>。请看下图:  图上画红框的地方,就是我们今天的主角了。我们先看一下“环绕标签”。在页面上随便打入几个字,选中它们,在右键菜单中选择“环绕标签”,在弹出的环绕标签对话框中输入“<strong>”(不包括引号),然后回车。之前被选中的文字是不是已经变成粗体了,到源代码看一下,我们所选中的文字是不是已经被<strong>标签包围了?大家可以试着再加入其它的一些标签,如:<a>,<p>。这里也可以直接输入属性。如:<p style="color:#CC0000">。这里仅大概说明一下,如有疑问,请查看Dreamweaver的帮助。  下面说一下标签选择器的应用方法。  我们将光标移动到刚才加粗的文字里,会发现在<body>的后面多了个<strong>。这就是说光标所在处的这些文字的外面有<strong>的标签,在<strong>标签外有<body>标签。下面大家再添加一个表格,把光标移动到表格内,看看标签的结构。相信对HTML有些基础的朋友都应该很容易理解的。  假设我们现在要插入一个表格,并将这个表格用CSS来将它下移10个象素。先插入一个表格,然后交光标移动到表格内。这时在标签选择器上应该可以看到这样的字样<body><table><tr><td>。然后在table标签上点鼠标右键,会看到有四个选项。删除标签、编辑标签、设置类、设置ID。  在这里,我们选择编辑标签,然后在后面加上属性style="margin-top:10px"和正常书写源代码的方式是一样的。然后按下回车。就完成了编辑。如果在Dreamweaver里看不到效果,请用浏览器预览。  还有另外一种方法,也许你会喜欢。选择窗口→标签检查器当你选择某一个标签后,这里会显示出当前选择标签的所有属性。也可以很快地在这里进行编辑。在这里输入的属性不用包括引号,编辑后按回车确定。  这里我们只将方法告诉大家,希望大家能够从中受益

6 次浏览
Dreamweaver处理word文档有妙招
Dreamweaver处理word文档有妙招

作为一个网页设计师,不知道各位是否有这样的经历:客户给你的网站材料很多都是Word文档,虽然阅读起来很方便,可要添加到网页中就不是很方便了。尤其是那种含有表格的Word文档,如果要一项一项地去添加,实在是费时又费力。虽然Word可以将文档存为Web页,但生成的废代码太多,文件体积实在太大。  不过还好,Dreamweaver已经为我们提供了很方便的命令,可以将word生成的html文件体积大幅度地减少,只是大家也许没有注意到它的应用。   下面大家先打开Dreamweaver,点击命令菜单,仔细查看一下。会发现其中有这样的两项:清理HTML,清理Word的HTML,看来Dreamweaver已经为我们提供了处理word文档的命令。下面我们通过一个实例来让大家理解这个命令。  这里为大家提供了一个用word做的课程表,大家可以下载下来试用。下面我们将利用这个表格为实例一步一步地去将这个含表格的word文档转换成代码清晰的html文件。  step1:  Dreamweaver是处理不了doc文档的,因此,我们需要先利用word把这个文档另存为html的格式,这一步比较简单,在word里面选择“文件-另存为”,保存类型选择html即可。  step2:  观察一下另存出来的html文档,文档竟然有50多K!这仅仅是一个课程表!  用Dreamweaver打开这个html文件,选择代码视图,大家可以看到这里的代码简直糟糕透了!先用我们刚才提及的Dreamweaver的菜单“命令→清理word的HTML”,对文档处理一下。  这时候再看一下代码,比原来好得多了,但是还是有很多垃圾代码。再查看一下文档的大小,从原来的50多K迅速降到了不到20K。  step3:  仔细看一下代码,有很多标签我们都不需要,比如 <P>,<SPAN>,<DIV>。其实我们完全可以删除它们。下面便用另外的一个菜单“命令→清理HTML”来对文档进行一番清理。选择菜单的“命令→清理HTML”,点选指定标签,把我们刚才看到的没有用的标签都填上。  格式是这样的:标签名,标签名。比如这里,我们就应该填上p,span,div(注意:中间用半角逗号“,”隔开)。然后点击确定。稍等一会,会发现我们的文档已经相当干净了。仔细看一下TD标签,会发现它的class属性已经没有意义了。下面我们将它删除。手工一个一个地删?当然不用!我们可以利用查找与替换的命令来把它们全部删除。好,开始行动。  step4:  打开查找与替换菜单(编辑→查找与替换,快捷键Ctrl+F)在查找内容前面的下拉框中,提供了四种方式。源代码、文本、文本高级、以及指定标签。在这里,可以用源代码的方式,或者是指定标签的方式来清理。这里我们用指定标签的方法来清理class属性,让大家了解一下它的用法。源代码的方式大家应该都比较了解,这里就不多罗嗦了。

6 次浏览
驯服不听话的网页表格
驯服不听话的网页表格

在使用Dreamweaver制作主页的时候往往需要改变表格的高度。然而有时当我们拖动表格的边框,无论怎样拖动,等到放下鼠标,表格却又恢复到原来的样子。   出现这种情况的原因在于我们已经为表格提供了一个固定的高度,当我们要改变表格的高度,尤其是压缩表格的时候,表格的高度仍然保持原来的设定值,其直观表象就是无论你怎样拖动表格的边框,表格的高度都不会变化。   在这种情况下,我们只需要去除掉表格高度的设定,然后拖动表格的边框就可以了。那么应该如何去除表格的高度设置呢?   首先需要选定表格。比较简单的方法是,将光标移动到表格内,然后按“Ctrl+A”组合键,看看,这样不是就选中了光标所在位置的最小的表格了吗?   选定了表格以后,在属性框中点击一下“清除行高”图标(图中加框处的按钮),表格的高度设定值就被取消了。这时表格的高度会按照表格的内容自动匹配高度。   当然删除表格高度的方法不只上述一种方法,我们也可以选中表格,在表格的属性框中直接删除掉表格的高度值。   同样,该方法也适用于改变表格的宽度的情况,只不过,选定了表格以后,删除的不是行的高度,而是列的宽度。   这样,就可以轻松进行调整表格的高度了。

1 次浏览
共计26043条记录 上一页 1.. 626 627 628 629 630 631 632 ..2605 下一页