网页设计教程第3章.ppt

第3章 框架、层、表格与网页局,本章要点 3.1 在网页中创建框架 3.2 层 3.3 在网页中创建表格 3.4 网页布局 3.5 应用实例 习题3,3.1.1 创建框架与编辑框架1创建框架创建框架有以下几种方法。（1）方法一：单击“文件”“新建”命令，调出“新建文档”对话框，如图3-1-1所示。单击该对话框左边“类别”栏中的“框架集”选项，再单击选中该对话框右边“框架集”栏内的一种框架选项，然后单击“创建”按钮，即可创建有框架的网页。（2）方法二：单击“插入”（布局）面板的“框架”快捷菜单中的一个按钮，即可在页面内设置出相应的框架，如图3-1-2所示。（3）方法三：利用“修改”“框架集”下相应的命令或利用“插入”“HTML”“框架”下相应的命令，也可以创建框架。建立了框架后，要增加框架的个数，可采用如下方法：单击框架内部，再单击“查看”“可视化助理”“框架边框”命令，使该命令左边有勾。然后，将鼠标指针移到框架的边缘处，当鼠标指针为“”或“”形状时，向鼠标指针箭头指示的方向拖曳鼠标，即可在水平或垂直方向增加一个框架。,3.1 在网页中创建框架,3.1 在网页中创建框架,图3-1-2“框架”快捷菜单,图3-1-1 在页面内创建上下两个框架,2简单编辑框架（1）调整框架的大小：用鼠标拖曳框架线，即可调整框架的大小。（2）删除框架：用鼠标拖曳框架线，一直拖曳到另一条框架线或边框处，即可删除框架。3设置框架集属性单击框架的外边框后，可使“属性”栏变为框架集“属性”栏，如图3-1-3所示。改变总框架属性需要通过框架集“属性”栏来完成。,3.1 在网页中创建框架,图3-1-3 框架集“属性”栏,4设置分栏框架属性按住Alt键，单击分栏框架的内部后，可使“属性”栏变为分栏框架“属性”栏，如图3-1-4所示。分栏框架的框架“属性”栏中几个选项的作用如下。,3.1 在网页中创建框架,图3-1-4 分栏框架“属性”栏,3.1.2 框架观察器单击“窗口”“框架”命令，调出“框架”面板，也叫框架观察器，如图3-1-5所示。如果光标在框架内，则框架观察器中对应框架内的文字变为黑色，如图3-1-5所示。框架观察器的作用是显示出框架网页的框架结构（也叫分栏结构）。单击某一个分栏框架（选中的框架边框呈黑色），即可选中该分栏框架，同时“属性”栏变为该分栏框架“属性”栏。如果单击框架的外框线，可以选中整个框架，如图3-1-6所示，同时“属性”栏变为框架集“属性”栏。,3.1 在网页中创建框架,图3-1-5 框架观察器 图3-1-6 选中整个框架后的观察器,3.1.3 在框架内插入HTML文件内容与保存框架文件1在框架内插入HTML文件内容在框架内插入HTML文件内容的步骤如下。（1）单击网页框架的某一个区域内部，使光标在该区域内出现。（2）可以像在没有框架的网页页面内输入文字和导入对象那样，在选中的框架区域内输入文字和导入对象。也可以单击“文件”“在框架中打开”命令，调出“选择HTML文件”对话框。利用它可将外部的HTML文件加载到选定的框架区域内。,3.1 在网页中创建框架,2保存框架文件保存框架文件的方法为：单击“文件”“框架集另存为”命令，调出“另存为”对话框。利用该对话框可输入文件名，再单击“保存”按钮，完成框架文件的存储。如果网页中的框架进行了修改，而且框架网页已经保存过，则单击“文件”“保存框架页”命令即可再保存。如果框架网页内各个框架区域内的内容是输入和导入对象产生的，而且没有存储为文件，可按下述方法将不同框架区域中的内容分别保存为HTML文件。操作方法如下。（1）单击一个框架窗口内部，使光标出现在该框架窗口内，单击“文件”“框架另存为”命令，调出“另存为”对话框。输入网页的名字，单击“保存”按钮，即可将该框架窗口中的内容存储。再按照上述方法存储各个窗口中的内容和整个框架文件。（2）修改后再存储，可单击“文件”“保存全部”命令。先保存框架，再依次保存各个框架内的HTML文件。（3）修改后单击“文件”“关闭”命令关闭框架文件时，会弹出一个提示框，提示是否存储各个HTML文件。单击“是”按钮即可依次保存各框架（先保存整个框架，再保存光标所在的框架）。,3.1 在网页中创建框架,3.2.1 设置层的默认属性和创建层1设置层的默认属性单击“编辑”“首选参数”命令，调出“首选参数”对话框，如图3-2-1所示。再单击选中该对话框内“分类”列表框中的“层”列表项。“首选参数”（层）对话框内各个选项的作用如下。,3.2 层,图3-2-1“首选参数”对话框,2在页面中创建层图3-2-2 在页面内创建一个层在页面中创建层的步骤如下。（1）单击“插入”（布局）栏中的“描绘层”按钮，将鼠标指针移到文档窗口之中，这时鼠标指针变为十字线状态。再在页面内拖曳鼠标来创建层，如图3-2-2所示。用鼠标将“描绘层”按钮拖曳到网页页面中，也可在页面光标处插入一个默认属性的层。（2）将光标移到要插入层的位置。单击“插入”“布局对象”“层”命令。,3.2 层,图3-2-2 在页面内创建一个层,3.2.2 层的基本操作1选定层在改变层的属性前应先选定层，选中的层会在层的左上角产生一个双矩形状控制柄图标，同时在层矩形的四周产生8个黑色的方形控制柄。选中一个层的情况如图3-2-3所示。选定层的方法可以有多种。,3.2 层,图3-2-3 选定一个层 图3-2-4 选定多个层,2调整一个层或多个层的位置 3改变一个层的大小 4同时调整多个层的大小 5对齐多个层 3.2.3 利用“层”面板设置层的属性利用“层”面板可以对层的可视性、嵌套关系、显示顺序和相互覆盖性等属性进行设置。单击“窗口”“层”命令，即可调出“层”面板，即层监视器，如图3-2-7所示。,3.2 层,图3-2-7“层”面板 图3-2-8 更改层的名称,3改变层之间的嵌套关系与层的显示顺序在层中插入层叫做层的嵌套。在层的嵌套中，子层的属性决定于其父层属性。在选定父层后，子层也会被选定；在移动或复制父层时，子层也会随之被移动或复制。4设置层的可视性 3.2.4 利用层“属性”栏设置层的属性层“属性”栏有两种，一种是单层“属性”栏，这是在选中一个层时出现的；另一个是多层“属性”栏，这是在选中多个层时出现的。单层“属性”栏如图3-2-13所示，多层“属性”栏如图3-2-14所示。可以看出，多层“属性”栏内除了基本的属性设置选项外，增加了关于文本属性的设置选项。,3.2 层,3.2 层,图3-2-14 多层“属性”栏,图3-2-13 单层“属性”栏,3.2.5 在层中插入对象在层内部可以插入能够在页面内插入的所有对象。在层中插入对象的方法如下所述。（1）单击要插入对象的层的内部，使该层中出现光标。（2）就像在页面内插入对象的方法那样，在选中的层内插入网页对象。,3.2 层,图3-2-15 选择“Visible”图3-2-16 选择“Hidden”图3-2-17 选择“Scroll”,3.3.1 制作简单的表格与调整表格大小图3-3-1“表格”对话框将光标移到需要插入表格的位置，单击“插入”（常用）面板内的“表格”按钮，调出“表格”对话框，如图3-3-1所示。1“表格”对话框内各选项的作用,3.3 在网页中创建表格,图3-3-1“表格”对话框,通过上述设置后，单击“确定”按钮，即可插入符合要求的表格，如图3-3-2所示。,3.3 在网页中创建表格,2调整表格大小3表格和单元格标签,图3-3-2 制作的第一个表格,3.3.2 选择表格和设置表格的属性 1选择表格 2设置整个表格的属性单击表格的外边框，选中整个表格，此时表格的“属性”栏如图3-3-3所示。表格“属性”栏内各选项的作用如下。,3.3 在网页中创建表格,3设置表格单元格的属性按住Ctrl键，单击表格中的单元格，选中几个单元格。此时“属性”栏变为表格单元格“属性”栏，如图3-3-4所示。表格单元格“属性”栏中，上半部分用来设置单元格内文本的属性，它与文本“属性”栏的选项基本一样。下半部分用来设置单元格的属性，各选项的作用如下。,图3-3-3 表格的“属性”,3.3 在网页中创建表格,图3-3-4 表格单元格“属性”栏,图3-3-5 合并单元格后的效果 图3-3-6“拆分单元格”对话框,图3-3-7 拆分单元格,3.3.3 编辑表格和在表格中插入对象图3-3-8 表格的快捷菜单将鼠标指针移到表格内，单击鼠标右键，调出其快捷菜单，再单击快捷菜单内的“表格”菜单命令，调出它的下一级菜单，如图3-3-8所示。利用该快捷菜单，可对表格进行许多编辑操作。1在表格中插入行或列,3.3 在网页中创建表格,图3-3-8 表格的快捷菜单,2删除表格中的行或列删除表格中的行或列可采用以下几种方法。,3.3 在网页中创建表格,图3-3-9“插入行或列”对话框 图3-3-10 删除图3-3-7所示表格右边1列后的效果,3复制和移动表格的单元格 4在表格中插入对象,3.3 在网页中创建表格,图3-3-12 在表格单元格内插入文字和图像,图3-3-11 在表格单元格内插入表格,3.3.4 表格与层的相互转换1表格转换为层由于层的功能比表格的功能要强得多，所以将表格转换为层以后，可以利用层的操作，使网页更丰富多彩。将表格转换成层的方法如下。单击“修改”“转换”“表格到层”命令，调出“转换表格为层”对话框，如图3-3-13所示。2层转换为表格单击“修改”“转换”“层到表格”命令，调出“转换层为表格”对话框，如图3-3-14所示。,3.3 在网页中创建表格,图3-3-13“转换表格为层”对话框 图3-3-14“转换层为表格”对话框,Dreamweaver MX 2004的“插入”（布局）面板如图3-4-1所示。利用它可以完成网页的布局操作，这对于网页设计来说是非常重要的。“插入”（布局）面板中布局部分从左到右分别是：“表格”、“插入Div标签”、“描绘层”、“标准模式”、“扩展表格模式”、“布局模式”、“布局表格”和“绘制布局单元格”按钮。,3.4 网页布局,图3-4-1“插入”（布局）面板,3.4.1“布局”栏中按钮的作用 1“绘制布局表格”按钮的作用 如图3-4-2所示。2“绘制布局单元格”按钮的作用（最终效果）如图3-4-3所示,3.4 网页布局,图3-4-2 单击选中按钮后绘制的布局表格 图3-4-3 单击选中按钮后绘制的布局单元格,3.4.2 网页布局的调整与设置 1网页布局的调整 2布局表格的“属性”栏单击选中布局表格后，即可调出布局表格的“属性”栏，它与表格的“属性”栏不一样，如图3-4-4所示。布局表格“属性”栏内各选项的作用如下。,3.4 网页布局,图3-4-4 网页布局表格“属性”栏,3布局表格和布局单元格菜单单击选中布局表格，再单击总宽度标注右边的箭头，可调出布局表格菜单，如图3-4-8所示。单击单元格宽度标注右边的箭头，可调出单元格菜单，如图3-4-9所示。4布局单元格的“属性”栏单击选中布局单元格后，调出布局单元格的“属性”栏，如图3-4-10所示。,3.4 网页布局,图3-4-9 单元格菜单,图3-4-8 布局表格菜单,图3-4-10 布局单元格的“属性”栏,5自动伸展 布局视图给网页设计者提供了两种表的宽度，即指定宽度和自动伸展。每个表的宽度都会显示在表顶部的页眉显示区中。指定宽度是一个明确的数字（如160像素），设置指定宽度会影响同一列的其他单元格或表。自动伸展是根据窗口的大小调整宽度。如果使用自动伸展，则不论浏览器的窗口设置为多大，设计的版面都会充满整个浏览器的窗口。在一个页面中只有一列可以自动伸展。（1）设置自动伸展宽度：单击需要设置自动伸展的表顶部的下三角箭头，再单击布局表格菜单中的“列设置为自动伸展”。另外，也可以选择要操作的列，再选中“属性”面板中的“自动伸展”单选项。当某一列被设置为自动伸展后，Dreamweaver会插入间隔图到指定宽度的列以控制版面。在浏览器里是看不到间隔图的，但它可以用来控制间距。（2）设置指定宽度：并不是所有的列都适合于自动伸展宽度，有时需要精确指定列的宽度，可单击“属性”面板的“固定”单选框，然后在后面的文本框中输入数值。如果输入的数值小于内容的宽度，Dreamweaver会自动设置宽度到正确的大小,3.4 网页布局,3.4.3 跟踪图像（描图）1制作描图的样图在制作网页时，常常希望网页页面精美漂亮、布局合理、内容紧凑。为此，可先在绘图软件中绘制一个网页外观图，也可以复制一份别人做好的网页图像，并按照自己的要求进行修改，然后将图像存成JPG、GIF或PNG图像格式文件。以后，就可以在Dreamweaver MX 2004下，将设计的网页外观图像按描图调入，再按照描图的结构样子进行网页的设计。2载入描图（1）单击“查看”“跟踪图像”“载入”命令，调出“选择图像源文件”对话框，利用该对话框可以选择作为描图的图像。（2）选择图像后，单击“选择图像源文件”对话框内的“确定”按钮，即可加载图像，同时调出“页面属性”对话框。这时，“页面属性”对话框内的“跟踪图像”文本框内已经填入了加载图像的路径与文件名。用鼠标拖曳“图像透明度”滑块，来调整描图的透明度。通常透明度调成为50%左右，有利于区分描图和网页的图像。如图3-4-11所示。（3）单击“应用”按钮，即可将图像导入网页中。单击“确定”按钮退出该对话框。,3.4 网页布局,3.4 网页布局,图3-4-11“页面属性”对话框,图3-4-12“调整跟踪图像位置”对话框,3显示/隐藏描图和调整描图（1）显示/隐藏描图：在网页中调入描图后，单击“查看”“跟踪图像”“显示”命令，可以在显示描图和隐藏描图之间切换。（2）将描图与其他对象对齐：在网页页面内单击选中一个对象，如图像或文字。单击“查看”“跟踪图像”“对齐所选范围”命令，即可将描图的左上角与选中对象的左上角对齐。图3-4-12“调整跟踪图像位置”对话框（3）改变描图的位置：单击“查看”“跟踪图像”“调整位置”命令，调出“调整跟踪图像位置”对话框，如图3-4-12所示。利用它可以改变描图的位置。在该对话框的“X”和“Y”文本框内分别输入坐标值（单位为像素），即可将描图的左上角以指定的坐标值定位。单击“确定”按钮即可完成重定位。另外，在打开“调整跟踪图像位置”对话框的情况下，也可以通过按键盘中的方向键来移动描图，每按一次键即可移动一个像素。按住Shift键的同时，按键盘中的方向键也可以移动描图，每按一次键即可移动5个像素。（4）恢复调整：单击“查看”“跟踪图像”“重设位置”命令，即可将描图的位置恢复到调整前的位置。,3.4 网页布局,