DW网页设计技巧，怎么学网站构架设计

时间：2023-10-05 01:18:01 | 来源：网站运营

时间：2023-10-05 01:18:01 来源：网站运营

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

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

dreamweaver的操作技巧

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

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

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

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

5、一次链接到两个网页我们都知道超级链接一次只能连到一个页面。 如果我们要想一次在不同的框架页中打开文档，可以使用“GO TO URL” JAVASCRIPT行为。打开一个有框架的网页，选择文字或图象，然后从行为 面板中选择“GO TO URL”。我们会注意到DREAMWEAVER会在 “GO TO URL”对话框中显示所有可用的框架。选择其中一个我们想链接 的框架并输入相应的URL后再选择另一个框架并输入另一个URL。

6、利用“FORMAT TABLE”命令来修饰网页在复杂的网页设计中，表格 的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现 的具体位置，从而使整个网页看上去紧凑。DREAMWEAVER在这方面也不 甘落后，我们可以使用其中的“FORMAT TABLE”(格式化表格)命令来快 速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标 置于表格的任意一个单元格内，再选择“COMMAND”→“FORMAT TABLE”命 令，在随后出现的对话框中，从左边的列表中选择一个设计方案。按 “APPLY”键来查看效果，如果不满意的话，还可以重新设置或者修改部分 参数的值，如边界粗细，背景颜色等等。

7、尽量不要给文件起中文名称大家在制作好了网页后，通常会给网页 起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件 所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在 DREAMWEAVER中这样做，就会发现DREAMWEAVER对中文文件名支持得不是 太好，经常会有页面调用不正确的现象发生，所以我们以后在DREAMWEAVER 中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上 面的出错现象。

8、经常保存当前被编辑的文件有网友说经常保存文件是不是怕突然死 机呀?这话当然没错，但我们在DREAMWEAVER中要经常保存文件还有它特别 的意义。因为我们在设计主页的时候，DREAMWEAVER会跟踪我们对文件作出 的任何改动，也就是说即使我们在主页中简单地移动了一下某个对象， DREAMWEAVER也能生成大量的临时源代码，想象一下，如果在主页中作了 很多改变，那么生成的这些大量代码就变得很难管理，从而会影响系统的 性能。因此我们发现如果DREAMWEAVER的性能开始降低，这可能是由于驻 留在内存中的大量代码变得太庞大的缘故，只要保存一下文件，就会使这 些临时代码消失，从而提高性能，所以以后我们在使用DREAMWEAVER时， 要有经常保存文件的习惯。

DW制作网页的基本步骤

1、在Dreamveaver中“文件—新建—常规—基本页—HTML”，这就建好了一个页面，英文版的默认为文件名untitled.htm。中文版的默认为文件名“无标题文档”。htm表示的是这个网页文件是一个静态的HTML文件。可以给它改名为index.htm。

2、在标题空格那里输入网页的名称，点击—页面属性，打开这个窗口后在这里可以设置网站标题、背景颜色还有背景图像，超级链接颜色，其他都保持默认值就可以了。

3.这个时候光标在左上角，你可以输入一句话，如“欢迎大家来到我的主页”，用文字，用菜单“窗口/属性”打开属性面板，取文字的大小，再把文字设置为居中，然后在文字的前面敲几下回车就位于页面中间了。

4.要选取字体，即选择字体中的最后一项：即编辑字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体，点击中间的按钮就可以加入了。

注：在网页上一般最常用的是就宋体字。切将特殊的字体加到列表中使用，因为可能别人的电脑上没有安装看不到。如果有需要用的话，一定要做成图片后再使用。

下面拿一个现成的例子来给大家说一下：

在开始做之前咱们先分析一下这个页面，看看这里这个页面用到了哪些东西。

网页最顶端的标题“我的主页”这四个字。

网页中间是一张图片。

最下端的是欢迎词。

网页背景是一白色。

构思好这个网页的结构，咱们就可以开始制作了。

首先启动Dreamweaver，确保你已经建好了一个网站。

为了制作方便，要事先打开资源管理器，把要用的图片放到网站目录images文件夹里。

【首先插入标题文字】进入到页面编辑中，设计视图状态。一般的情况下，编辑器的默认方式是左对齐，光标位于左上角，光标所在的位置就是插入点的位置。如果想让文字居中插入的话，点击属性按钮就可以了。中文状态下输入“我的主页”。字的大小没关系，我们对它进行设置就可以了。

【设置文字的格式】先选中文字，在属性面板中将字体格式设置成默认字体，大小随意更改。并选中“B”把字体加粗。

【设置文字的颜色】先选中文字，在属性面板中，单击颜色选择图标，在弹出的颜色选择器中用滴管选取颜色即可。

【设置网页的标题和背景颜色】点击“修改”菜单中的“页面属性”。系统自动弹出页面属性的对话框，请在文本标题输入框内填入标题“我的主页”。

【设置背景颜色】网页的背景可以是图片，当然也可以是颜色。这个例子是颜色。如上所诉打开背景颜色选择器进行选取。如果背景要设置为图片，则点击背景图象“浏览”按钮，系统自动弹出图片选择对话框，点击图片就可以了。

【插入图像】选择以下方法：

(1)插入菜单：在“插入”菜单选“图像”，弹出“选择图像源文件”对话框，选中该图像文件，单击确定即可。

一个图片就插入完毕了。

【输入文本文字】在图片右边空白处有单击，回车换行。仍然按照上面的方法，输入文字“欢迎大家来到我的主页”然后，对文字进行设置，保存页面。

一个简单的页面就完成了。

【预览网页】在页面编辑器中按F12预览网页效果。

网站的首页一般我们通常存盘取名时为index.htm。