网页制作快速入门汇编

1、 层是在制作网页中经常用到的对象，元素的定位层是在制作网页中经常用到的对象，元素的定位 就是一个简单的应用。用表格来对网页进行排版非常就是一个简单的应用。用表格来对网页进行排版非常 方便，但有时需要在文字上放一些图片之类的元素，方便，但有时需要在文字上放一些图片之类的元素， 表格就不能胜任了，这时就可以利用图层来排版。表格就不能胜任了，这时就可以利用图层来排版。 图层可以重叠地放置，制作出层叠的效果。也图层可以重叠地放置，制作出层叠的效果。也 可以控制层的显示或隐藏，实现交互技术。配合时间可以控制层的显示或隐藏，实现交互技术。配合时间 显的使用，还可以同时移动一个或多个图层，轻松制显的使用，还

2、可以同时移动一个或多个图层，轻松制 作出动态效果。作出动态效果。 7.2 图层的基本操作图层的基本操作 7.2.1 创建图层创建图层 1插入图层插入图层 DreamweaverDreamweaver创建图层，可执行以下操作之一：创建图层，可执行以下操作之一： （1 1）将光标放置在文档窗口中需要插入层的位置，然）将光标放置在文档窗口中需要插入层的位置，然 后选择后选择“插入插入”“布局对象布局对象”“层层”命令。命令。 （2 2）打开插入）打开插入“常用常用”面板，单击该面板上的插入层面板，单击该面板上的插入层 图标图标 ，然后释放鼠标，鼠标会变成十字形状，用，然后释放鼠标，鼠标会变成十字形状

3、，用 鼠标在页面中绘制一个矩形来创建层。鼠标在页面中绘制一个矩形来创建层。 （3 3）如果需要画多个层，在单击插入层图标）如果需要画多个层，在单击插入层图标 的同的同 时，按住时，按住CtrlCtrl键，在文档窗口中画一个层，只要不键，在文档窗口中画一个层，只要不 释放释放CtrlCtrl键，就可以连续化多个层。键，就可以连续化多个层。 创建完层之后，在页面中会出现一个层的标志，创建完层之后，在页面中会出现一个层的标志， 并且有一个矩形的层出现。并且有一个矩形的层出现。 单击层标志，其属性面板显示如图所示，在属性面单击层标志，其属性面板显示如图所示，在属性面 板上可以设定层的属性。板上可以设定

4、层的属性。 2创建嵌套图层创建嵌套图层 图层嵌套指的是在一个图层的内部创建另一个图层，图层嵌套指的是在一个图层的内部创建另一个图层， 可以用嵌套的方法将多个图层组合在一起。使用嵌套可以用嵌套的方法将多个图层组合在一起。使用嵌套 层的目的通常是为了将多个图层组成群组，这样一来，层的目的通常是为了将多个图层组成群组，这样一来， 只要移动父层，其中的子层也会一起移动，而且子层只要移动父层，其中的子层也会一起移动，而且子层 还会继承父层的显示隐藏状态，其可见性与父层保持还会继承父层的显示隐藏状态，其可见性与父层保持 一致。这在制作动态网页是十分有用。一致。这在制作动态网页是十分有用。 创建嵌套层通常有

5、两种方法：创建嵌套层通常有两种方法： （1）直接创建嵌套层）直接创建嵌套层 先创建一个层为父层，后在父层内创建的层成为子先创建一个层为父层，后在父层内创建的层成为子 层，在图层面板中也可以看出层层，在图层面板中也可以看出层2是层是层1的子层。的子层。 （2）将已有的多个层变为嵌套层）将已有的多个层变为嵌套层 打开图层面板，在层列表中将需要作为子层的层选打开图层面板，在层列表中将需要作为子层的层选 中，按住中，按住Ctrl键将该层拖动到父层上，释放鼠标即可。键将该层拖动到父层上，释放鼠标即可。 7.2.2 选择图层选择图层 1选择一个图层选择一个图层 选择图层的目的是便于层的对齐、重定位和缩放，

6、选择图层的目的是便于层的对齐、重定位和缩放， 还 可 以 为 图 层 添 加 背 景 图 像 和 背 景 颜 色 。 在还 可 以 为 图 层 添 加 背 景 图 像 和 背 景 颜 色 。 在 Dreamweaver中要选择一个层，可使用如下方法之一：中要选择一个层，可使用如下方法之一： （1）用鼠标单击层标志）用鼠标单击层标志 。 （2）用鼠标单击层的任意边框线。）用鼠标单击层的任意边框线。 （3）选择）选择“窗口窗口”|“其它其它”|“层层”命令，打开图层面命令，打开图层面 板，单击该面板中需要选择的层的名称。板，单击该面板中需要选择的层的名称。 2选择多个图层选择多个图层 如果要同时选

7、择多个层，可以按住如果要同时选择多个层，可以按住ShiftShift键，再键，再 执行上述操作之一。执行上述操作之一。 注意：注意：当选择了多个图层后，最后选择的图层标记高当选择了多个图层后，最后选择的图层标记高 亮显示，同时调控点显示为黑色，其他图层的调控亮显示，同时调控点显示为黑色，其他图层的调控 点显示为白色。点显示为白色。 选择层后，层的四周出现选择层后，层的四周出现8 8个调控点，且层的标个调控点，且层的标 志反色显示志反色显示 。 7.2.3 激活图层激活图层 如果需要在图层中插入对象，必须激活图层。如果需要在图层中插入对象，必须激活图层。 把鼠标指针移动到层内任何地方单击，即可激

8、活该把鼠标指针移动到层内任何地方单击，即可激活该 层。此时，插入点位于图层内，被激活图层的边界层。此时，插入点位于图层内，被激活图层的边界 突出显示，选中手柄也同时显示出来。突出显示，选中手柄也同时显示出来。 注意：注意：激活图层的操作不同于选择图层。激活图层的操作不同于选择图层。 7.2.4 移动图层移动图层 在文档中要移动一个图层，可以执行以下操作之一：在文档中要移动一个图层，可以执行以下操作之一： （1 1）先选择层，然后在该层的选择手柄上按住鼠标左）先选择层，然后在该层的选择手柄上按住鼠标左 键并拖动鼠标，则可移动。键并拖动鼠标，则可移动。 （2 2）将鼠标指针移动到需要移动层的边框位

9、置，当鼠）将鼠标指针移动到需要移动层的边框位置，当鼠 标指针形状为四个箭头时，按住鼠标左键并拖动鼠标指针形状为四个箭头时，按住鼠标左键并拖动鼠 标，则可移动层。标，则可移动层。 （3 3）在属性面板中直接设置）在属性面板中直接设置“左左”、“上上”的数值，的数值， 也可以移动层。也可以移动层。 （4 4）利用键盘，每按一次方向键，则移动一个像素单）利用键盘，每按一次方向键，则移动一个像素单 位；若按位；若按ShiftShift键的同时按一次方向键，则移动一个键的同时按一次方向键，则移动一个 网格单位。网格单位。 7.2.5 复制图层复制图层 在在DreamweaverDreamweaver中要

10、复制一个层，可执行以下：中要复制一个层，可执行以下： （1 1）按住）按住CtrlCtrl键，将鼠标指针移到需要复制层的标键，将鼠标指针移到需要复制层的标 志志 上，按住鼠标左键拖动鼠标，移动一定距离后，上，按住鼠标左键拖动鼠标，移动一定距离后， 释放鼠标，则该层被复制。释放鼠标，则该层被复制。 （2 2）先选择一个层，执行）先选择一个层，执行“编辑编辑”|“|“复制复制”命令，命令， 取消被选层，执行取消被选层，执行“编辑编辑”|“|“粘贴粘贴”命令，则该命令，则该 层被复制。层被复制。 7.2.6 调整图层的大小调整图层的大小 要调整一个图层的大小，可执行如下操作之一：要调整一个图层的大小

11、，可执行如下操作之一： （1 1）拖曳法：选择层，拖曳图层的调控点。上）拖曳法：选择层，拖曳图层的调控点。上/ /下调下调 控点只能调整层的高度，左控点只能调整层的高度，左/ /右调控点只能调整层的右调控点只能调整层的 宽度，四角的调控点能同时调整层的高度和宽度。宽度，四角的调控点能同时调整层的高度和宽度。 （2 2）在层属性面板中设置）在层属性面板中设置“宽宽”和和“高高”的数值。的数值。 （3 3）利用键盘来调整图层的大）利用键盘来调整图层的大小：小：选择要调整的图层，选择要调整的图层， 按按Ctrl+Ctrl+方向键，每次调整一个像素单位。按方向键，每次调整一个像素单位。按 Ctrl+S

12、hift+Ctrl+Shift+方向键，每次调整一个网格单位。方向键，每次调整一个网格单位。 1调整单个图层的大小调整单个图层的大小 2调整多个图层的大小调整多个图层的大小 在文档中要调整多个图层的大小，可执行如下操作在文档中要调整多个图层的大小，可执行如下操作 之一：之一： （1）在设计视图中按）在设计视图中按Shift键选择多个图层，单击键选择多个图层，单击 “修改修改”|“对齐对齐”|“设成宽度相同设成宽度相同”或或“修修 改改”|“对齐对齐”|“设成高度相同设成高度相同” 。 （2）选择要调整的图层，打开其属性面板。在属性）选择要调整的图层，打开其属性面板。在属性 面板的多个层面板的多

13、个层“高高”和和“宽宽”文本框中修改所有文本框中修改所有 选中的层的宽度值和高度值。选中的层的宽度值和高度值。 7.2.7 对齐图层对齐图层 在文档窗口中有多个图层，可以选择这些图层，在文档窗口中有多个图层，可以选择这些图层， 然后使用图层对齐命令使被选择的多个图层与最后然后使用图层对齐命令使被选择的多个图层与最后 被选择的图层边框对齐。被选择的图层边框对齐。 对齐多个层的方法如下：对齐多个层的方法如下： 在文档窗口中选中需要对齐的图层，执行在文档窗口中选中需要对齐的图层，执行“修修 改改”| |“对齐对齐”命令，选择下列对齐方式中的一种：命令，选择下列对齐方式中的一种： 左对齐、右对齐、对齐

14、上缘、对齐下缘、设成宽度左对齐、右对齐、对齐上缘、对齐下缘、设成宽度 相同、设成高度相同。相同、设成高度相同。 注意：注意：在对齐图层时，没有选择的子图层会因为其父在对齐图层时，没有选择的子图层会因为其父 图层的移动而移动。图层的移动而移动。 如果启用吸附功能，在移动和调整图层的大小如果启用吸附功能，在移动和调整图层的大小 时，该图层被自动定位到最近的网格位置。不论时，该图层被自动定位到最近的网格位置。不论 网格是否可见，吸附功能都起作用。网格是否可见，吸附功能都起作用。 7.2.8 吸附图层到网格吸附图层到网格 要显示网格线，可选择要显示网格线，可选择“查看查看”|“网格网格”|“显显 示网

15、格示网格”菜单命令。菜单命令。 1显示网格显示网格 2吸附图层到网格吸附图层到网格 要吸附图层到网格，可选择要吸附图层到网格，可选择“查看查看”|“|“网网 格格”|“|“靠齐到网格靠齐到网格”菜单命令。菜单命令。 3改变网格和吸附设置改变网格和吸附设置 设置网格和吸附设置的步骤如下：设置网格和吸附设置的步骤如下： （1 1）选择）选择“查看查看”|“”|“网格网格”|“”|“网格设置网格设置”命令，命令， 打开打开“网格设置网格设置”对话框。对话框。 （2 2）在对话框中，用户可以根据需要进行选项设置。）在对话框中，用户可以根据需要进行选项设置。 （3 3）单击）单击“确定确定”按钮完成设置

16、。按钮完成设置。 7.3 图层的管理图层的管理 命名图层可以执行以下操作之一：命名图层可以执行以下操作之一： （1 1）选择图层，在其属性面板的）选择图层，在其属性面板的“层编号层编号”文本框文本框 中输入图层名称。中输入图层名称。 （2 2）选择）选择“窗口窗口”|“”|“其它其它”|“”|“层层”命令，打开图命令，打开图 层面板。双击要命名图层的层面板。双击要命名图层的“名称名称”栏，使之处于栏，使之处于 可编辑状态，输入图层名称。可编辑状态，输入图层名称。 7.3.1 图层的命名图层的命名 若要更改单个层的可见性，可执行以下操作之一：若要更改单个层的可见性，可执行以下操作之一： （1 1

17、）打开图层面板，单击图层面板中一个层的眼睛）打开图层面板，单击图层面板中一个层的眼睛 图标以更改其可见性。眼睛睁开表示该层是可见的。图标以更改其可见性。眼睛睁开表示该层是可见的。 眼睛闭合表示该层是不可见的。眼睛闭合表示该层是不可见的。 （2 2）选择图层，在其属性面板的）选择图层，在其属性面板的“显示显示”栏中设置栏中设置 图层的可见性。图层的可见性。 7.3.2 改变图层的可见性改变图层的可见性 1改变单个层的可见性改变单个层的可见性 2改变所有层的可见性改变所有层的可见性 若要同时更改所有层的可见性，单击图层面板标题栏若要同时更改所有层的可见性，单击图层面板标题栏 的眼睛图标，所有图层为

18、可见或不可见。的眼睛图标，所有图层为可见或不可见。 注意：注意： 1.改变所有层的可见性时，改变所有层的可见性时，可以将所有层设置为可以将所有层设置为“可可 见见(Visiable)”(Visiable)”或或“隐藏隐藏(hidden)”(hidden)”，但不能设置，但不能设置 为为“继承继承(inherit)”(inherit)”。 2.2.设置层为隐藏后，想对其编辑，这时候在设计状态设置层为隐藏后，想对其编辑，这时候在设计状态 下是看不到层的，需要在下是看不到层的，需要在“拆分拆分”视图下点击代码视图下点击代码 窗口的该层代码，在下面的设计窗口才会出现这层。窗口的该层代码，在下面的设计窗

19、口才会出现这层。 7.3.3 改变图层的叠放次序改变图层的叠放次序 1利用图层面板来调整图层的叠放次序利用图层面板来调整图层的叠放次序 利用图层面板来调整图层的叠放次序的操作步骤如利用图层面板来调整图层的叠放次序的操作步骤如 下：下： 打开图层面板。把光标放置到要改变位置的层打开图层面板。把光标放置到要改变位置的层 的名称上，拖动到的名称上，拖动到合适位置合适位置释放鼠标。释放鼠标。 2利用层属性面板来调整图层的叠放次序利用层属性面板来调整图层的叠放次序 在层属性面板中直接修改层的在层属性面板中直接修改层的“Z轴轴”值，可以值，可以 改变层的叠放次序。可以在文本框中输入数值，当改变层的叠放次序。可以在文本框中输入数值，当 输入的数值比当前值大时，表示图层的叠放次序提输入的数值比当前值大时，表示图层的叠放次序提 高；当输入的数值比当前值小时，表示图层的叠放高；当输入的数值比