dw网页设计小技巧
当前位置:贝知网>知识分享>设计开发>dw网页设计小技巧
dw网页设计小技巧
时间:2022-12-05 设计开发

dw网页设计小技巧

dw网页设计小技巧

以下就是dw网页设计小技巧等等的介绍,希望为您带来帮助。

一、建立站点

建立一个规范整洁的站点文件夹是一个网站以后能够顺利运行的根本,也是开始制作网页的第一步。在建立站点时,我们通常会用到三个文件夹,一个是files,用来存放除首页之外的其它网页文件,另一个是images,用来存放我们网页制作中用到的图片文件。最后一个是others,用来存放视频、音频、文本和动画等网页元素。之所以这样做的原因是一个清晰的站点结构决定了以后这个站点的管理方便与否。另外注意文件夹和文件的命名要以英文命名,这样可以避免页面调用不正确的现象发生。

二、巧妙复制文字

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

三、巧妙设置字体分辨率

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

四、善用快捷键

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

五、灵活运用样式

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

利用Dreamweaver制作网页的常用小技巧

1、输入输入连续空格

网页编辑时经常需要输入一些空格,例如在每段的开头,一般都要空两个格,而Dreamweaver与Word等常用办公软件不同,直接按空格键无法达到预期目的,但可以通过下面三个方法来实现空格的输入:1)切换到中文输入状态,把标点状态设置为全角中文,就可以随心所欲地输入任意多个空格了。2)光标定位需要输入空格的位置,转换到代码视图中,在HTML源文档中输入“ ;”,一个“ ;”相当于一个空格,要添加多少个空格,只需要添加相应的多少个“ ;”即可。3)在“插入”栏中选择“文本”选项卡,在插入“字符”里选择空格,这种方法可行,但不好用。

2、善用拖放技巧

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

3、巧妙设置对象名称

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

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

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

5、灵活使用网页表格

在使用Dreamweaver制作主页的时候往往需要改变表格的高度。然而有时当我们拖动表格的边框,无论怎样拖动,等到放下鼠标,表格却又恢复到原来的样子。出现这种情况的原因在于我们已经为表格提供了一个固定的高度,当我们要改变表格的高度,尤其是压缩表格的时候,表格的高度仍然保持原来的设定值,其直观表象就是无论你怎样拖动表格的边框,表格的高度都不会变化。在这种情况下,我们只需要去除掉表格高度的设定,然后拖动表格的边框就可以了。那么应该如何去除表格的高度设置呢?首先需要选定表格,选定了表格以后,在属性框中点击一下“清除行高”图标(图中加框处的按钮),表格的高度设定值就被取消了。这时表格的高度会按照表格的内容自动匹配高度。

当然删除表格高度的方法不只上述一种方法,我们也可以选中表格,在表格的属性框中直接删除掉表格的高度值。同样,该方法也适用于改变表格的宽度的情况,只不过,选定了表格以后,删除的不是行的高度,而是列的宽度。这样,就可以轻松进行调整表格的高度了。