网页制作基础课件

第5章网页制作基础第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础2主要内容概述设计站点编辑网页页面布局建立超链接使用CSS样式层、行为和时间轴模板管理和发布站点《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础35.4页面布局表格式页面布局绘制布局表格编辑布局表格格式化布局表格设置布局模式参数使用辅助定位工具框架式页面布局创建框架调整和编辑框架页设置框架和框架集的属性网页布局

布局模式《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础45.4.1表格式页面布局一般来讲，网页总体上是从上到下进行布局的。可分为三个区域：栏目导航区、主内容区和版权区。栏目导航区又可以细分为栏目区和导航区，主内容区可以根据实际情况分为若干个区域，版权区比较简单，一般不再细分。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础55.4.1表格式页面布局左图是一个主页的页面，在制作网页之前，先在布局模式下把网页设计成如右图的布局，然后在每个区域中插入网页的内容。返回《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础65.4.1表格式页面布局布局模式是一种特殊的表格模式，它与标准表格绘制方法的不同之处在于：在布局模式中，用户可以在页面上绘制任意数目和大小的布局表格，在布局表格的任意位置可以绘制任意数量和大小的布局单元格。布局单元格必须放在布局表格之中，如果在布局表格以外绘制布局单元格，系统会自动创建一个布局表格，以容纳这个布局单元格。另外，布局表格中还能绘制另一个布局表格。布局表格布局单元格《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础75.4.1表格式页面布局进入布局模式的方法选择“查看”/“表格模式”/“布局模式”命令；在“插入”工具栏的“布局”选项卡中单击“布局”按钮。返回标准模式的方法选择“查看”/“表格模式”/“标准模式”命令；单击“插入”工具栏的“布局”选项卡中的“标准”按钮。返回插入工具栏→布局→“布局”按钮插入工具栏→布局→“标准”按钮《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础85.4.1表格式页面布局绘制布局表格

单击“插入”工具栏的“布局”选项卡中的“布局表格”按钮后，拖动鼠标绘制出布局表格。布局表格的底色为灰色、边框为浅绿色，带有布局表格标签和宽度值。单击“插入”工具栏的“布局”选项卡中的“绘制布局单元格”按钮，在布局表格中拖动鼠标绘制布局单元格。布局单元格的底色为白色、外加蓝色的边框。“布局表格”“绘制布局单元格”拖曳拖曳布局表格布局单元格“布局表格”按钮“绘制布局单元格”按钮《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础95.4.1表格式页面布局布局单元格不能够重叠，因此不能在布局单元格上再绘制布局表格。而布局表格中却可以再绘制布局表格，使得新的布局表格包含在原来的布局表格之中。在绘制表格和单元格时，Dreamweaver会自动激活绘制区的对齐特性，因此很容易绘制出整齐的表格。在绘制时按住Alt键同时拖动鼠标，可以精确到1像素为单位。一般由上往下绘制布局表格布局表格中可以再绘制布局表格《大学计算机信息科技教程（第二版）》——第5章网页制作基础何时绘制嵌套的“布局表格”？在以下情况之一时绘制嵌套的“布局表格”而不是“布局单元格”：1.布局需要再细分时2.需要给模块加边框时不论布局表格是否嵌套，页面内容只能置于“布局单元格”内。《大学计算机信息科技教程（第二版）》——第5章网页制作基础10何时绘制嵌套的“布局表格”？在以下情况之一时绘制嵌套的“布局《大学计算机信息科技教程（第二版）》——第5章网页制作基础115.4.1表格式页面布局布局单元格中能够插入任何类型的数据，如文本、图像甚至是多媒体对象。建立布局表格后，将插入点定位于要添加内容的布局单元格中，然后直接输入数据。在输入数据时，布局单元格的宽度会随着输入数据的多少而变化。隐藏布局表格上的标签和宽度值：

选中“查看”/“可视化助理”/“隐藏所有”命令。返回输入完数据再单击其他单元格，

以恢复输入数据的单元格的宽度《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础125.4.1表格式页面布局编辑布局表格修改布局表格和布局单元格的大小单击选定布局表格

单击边框线选定布局单元格改变位置单击布局表格或布局单元格的边框线，

选中后拖动或使用键盘上的方向键移动。

每按一次方向键，移动1个像素的位置。

同时按住Alt键，每次移动10个像素。改变大小选中后，拖动边框上的控制点单元格的高度随着内容的变化而

变化单击布局表格宽度值旁的箭头，

选择“清除所有高度”命令；单击属性检查器中的

“清除行高”按钮。用方向键移动或拖曳（注意属性检查器的显示）《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础135.4.1表格式页面布局设置宽度类型和间隔图像布局表格和布局单元格的宽度类型有两种：固定宽度类型和自动伸展宽度类型。默认情况下，布局表格和布局单元格为固定宽度类型，其宽度是固定的，不会随着内容的增减而自动改变宽度。输入完数据再单击其他单元格，

以恢复输入数据的单元格的宽度《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础145.4.1表格式页面布局将布局表格设置为自动伸展宽度类型的方法是：选中布局表格后，单击属性检查器中的“自动伸展”单选按钮，打开“选择占位图像”对话框。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础155.4.1表格式页面布局布局表格设置为自动伸展宽度类型后，表格的宽度自动调整与文档窗口的大小相符，表格最右边一列的宽度自动伸展，同时该列变为自动伸展类型。自动伸展类型的布局表格的宽度为100%，一个布局表格只能有一列可以被设置为自动伸展宽度类型。如果要设置其他列为自动伸展宽度类型单击列标题旁的下拉箭头，选择“列设置为自动伸展”命令；选中布局单元格后单击属性检查器中的“自动伸展”单选按钮。当一列被设置为自动伸展类型后，原来的自动伸展宽度类型列变为固定宽度类型。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础165.4.1表格式页面布局间隔图像是一幅1×1像素的透明的GIF图像，用来控制自动伸展表格中的间距。当设置某列自动伸展时，Dreamweaver将自动添加间隔图像，除非选择了“对于自动伸展表格不要使用间隔图像”单选按钮。包含间隔图像的列的列宽的区域中显示双线。单击固定宽度类型的列的标题栏上的箭头按钮，选择“删除间隔图像”或“添加间隔图像”命令，便可以在该列中删除或添加间隔图像了。在布局表格的标题栏中选择“移除所有分隔符图像”命令，或者单击布局表格的属性检查器中的“删除所有间隔图像”按钮，表格中各列的间隔图像都将被删除。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础175.4.1表格式页面布局删除布局表格的嵌套在布局表格中可以插入另一个布局表格，这样就形成了布局表格的嵌套。在子表格的标题栏中选择“删除嵌套”命令，或者单击属性检查器中的“删除嵌套”按钮，子表格中的内容被融入到父表格中，子表格中的布局单元格作为父表格中的布局单元格，放置在原来的位置，子表格被删除。返回《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础185.4.1表格式页面布局格式化布局表格设置布局表格的格式《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础195.4.1表格式页面布局设置布局单元格的格式返回《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础205.4.1表格式页面布局设置布局模式的参数选择“编辑”/“首选参数”命令，在打开的“首选参数”对话框的分类框中单击“布局模式”选项。返回“编辑”/“首选参数”《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础215.4.1表格式页面布局使用辅助定位工具标尺显示标尺选中“查看”/“标尺”/“显示”命令。指定标尺度量单位选择“查看”/“标尺”/“像素”、“英寸”或“厘米”命令。改变原点的位置拖动水平标尺和垂直标尺的交界位置。恢复原点的位置选择“查看”/“标尺”/“重设原点”命令。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础225.4.1表格式页面布局网格显示和隐藏网格选择“查看”/“网格”/“显示网格”命令边框自动靠齐到网格线选中“查看”/“网格”/“靠齐到网格”命令网格设置选择“查看”/“网格”/“网格设置”命令《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础235.4.1表格式页面布局草稿图草稿图也叫跟踪图像，它的作用是帮助用户正确地设计网页的版面，浏览网页时不会显示出草稿图。首先要使用外部的图像编辑软件创建用于表示版面的图像，并保存图像文件。选择“查看”/“跟踪图像”/“载入”命令。在“页面属性”对话框的“分类”列表中选择“跟踪图像”选项。返回《大学计算机信息科技教程（第二版）》——第5章网页制作基础作业效果图参见elearning网站《大学计算机信息科技教程（第二版）》——第5章网页制作基础24作业效果图参见elearning网站《大学计算机信息科技教程第5章网页制作基础第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础26主要内容概述设计站点编辑网页页面布局建立超链接使用CSS样式层、行为和时间轴模板管理和发布站点《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础275.4页面布局表格式页面布局绘制布局表格编辑布局表格格式化布局表格设置布局模式参数使用辅助定位工具框架式页面布局创建框架调整和编辑框架页设置框架和框架集的属性网页布局

布局模式《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础285.4.1表格式页面布局一般来讲，网页总体上是从上到下进行布局的。可分为三个区域：栏目导航区、主内容区和版权区。栏目导航区又可以细分为栏目区和导航区，主内容区可以根据实际情况分为若干个区域，版权区比较简单，一般不再细分。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础295.4.1表格式页面布局左图是一个主页的页面，在制作网页之前，先在布局模式下把网页设计成如右图的布局，然后在每个区域中插入网页的内容。返回《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础305.4.1表格式页面布局布局模式是一种特殊的表格模式，它与标准表格绘制方法的不同之处在于：在布局模式中，用户可以在页面上绘制任意数目和大小的布局表格，在布局表格的任意位置可以绘制任意数量和大小的布局单元格。布局单元格必须放在布局表格之中，如果在布局表格以外绘制布局单元格，系统会自动创建一个布局表格，以容纳这个布局单元格。另外，布局表格中还能绘制另一个布局表格。布局表格布局单元格《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础315.4.1表格式页面布局进入布局模式的方法选择“查看”/“表格模式”/“布局模式”命令；在“插入”工具栏的“布局”选项卡中单击“布局”按钮。返回标准模式的方法选择“查看”/“表格模式”/“标准模式”命令；单击“插入”工具栏的“布局”选项卡中的“标准”按钮。返回插入工具栏→布局→“布局”按钮插入工具栏→布局→“标准”按钮《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础325.4.1表格式页面布局绘制布局表格

单击“插入”工具栏的“布局”选项卡中的“布局表格”按钮后，拖动鼠标绘制出布局表格。布局表格的底色为灰色、边框为浅绿色，带有布局表格标签和宽度值。单击“插入”工具栏的“布局”选项卡中的“绘制布局单元格”按钮，在布局表格中拖动鼠标绘制布局单元格。布局单元格的底色为白色、外加蓝色的边框。“布局表格”“绘制布局单元格”拖曳拖曳布局表格布局单元格“布局表格”按钮“绘制布局单元格”按钮《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础335.4.1表格式页面布局布局单元格不能够重叠，因此不能在布局单元格上再绘制布局表格。而布局表格中却可以再绘制布局表格，使得新的布局表格包含在原来的布局表格之中。在绘制表格和单元格时，Dreamweaver会自动激活绘制区的对齐特性，因此很容易绘制出整齐的表格。在绘制时按住Alt键同时拖动鼠标，可以精确到1像素为单位。一般由上往下绘制布局表格布局表格中可以再绘制布局表格《大学计算机信息科技教程（第二版）》——第5章网页制作基础何时绘制嵌套的“布局表格”？在以下情况之一时绘制嵌套的“布局表格”而不是“布局单元格”：1.布局需要再细分时2.需要给模块加边框时不论布局表格是否嵌套，页面内容只能置于“布局单元格”内。《大学计算机信息科技教程（第二版）》——第5章网页制作基础34何时绘制嵌套的“布局表格”？在以下情况之一时绘制嵌套的“布局《大学计算机信息科技教程（第二版）》——第5章网页制作基础355.4.1表格式页面布局布局单元格中能够插入任何类型的数据，如文本、图像甚至是多媒体对象。建立布局表格后，将插入点定位于要添加内容的布局单元格中，然后直接输入数据。在输入数据时，布局单元格的宽度会随着输入数据的多少而变化。隐藏布局表格上的标签和宽度值：

选中“查看”/“可视化助理”/“隐藏所有”命令。返回输入完数据再单击其他单元格，

以恢复输入数据的单元格的宽度《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础365.4.1表格式页面布局编辑布局表格修改布局表格和布局单元格的大小单击选定布局表格

单击边框线选定布局单元格改变位置单击布局表格或布局单元格的边框线，

选中后拖动或使用键盘上的方向键移动。

每按一次方向键，移动1个像素的位置。

同时按住Alt键，每次移动10个像素。改变大小选中后，拖动边框上的控制点单元格的高度随着内容的变化而

变化单击布局表格宽度值旁的箭头，

选择“清除所有高度”命令；单击属性检查器中的

“清除行高”按钮。用方向键移动或拖曳（注意属性检查器的显示）《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础375.4.1表格式页面布局设置宽度类型和间隔图像布局表格和布局单元格的宽度类型有两种：固定宽度类型和自动伸展宽度类型。默认情况下，布局表格和布局单元格为固定宽度类型，其宽度是固定的，不会随着内容的增减而自动改变宽度。输入完数据再单击其他单元格，

以恢复输入数据的单元格的宽度《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础385.4.1表格式页面布局将布局表格设置为自动伸展宽度类型的方法是：选中布局表格后，单击属性检查器中的“自动伸展”单选按钮，打开“选择占位图像”对话框。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础395.4.1表格式页面布局布局表格设置为自动伸展宽度类型后，表格的宽度自动调整与文档窗口的大小相符，表格最右边一列的宽度自动伸展，同时该列变为自动伸展类型。自动伸展类型的布局表格的宽度为100%，一个布局表格只能有一列可以被设置为自动伸展宽度类型。如果要设置其他列为自动伸展宽度类型单击列标题旁的下拉箭头，选择“列设置为自动伸展”命令；选中布局单元格后单击属性检查器中的“自动伸展”单选按钮。当一列被设置为自动伸展类型后，原来的自动伸展宽度类型列变为固定宽度类型。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础405.4.1表格式页面布局间隔图像是一幅1×1像素的透明的GIF图像，用来控制自动伸展表格中的间距。当设置某列自动伸展时，Dreamweaver将自动添加间隔图像，除非选择了“对于自动伸展表格不要使用间隔图像”单选按钮。包含间隔图像的列的列宽的区域中显示双线。单击固定宽度类型的列的标题栏上的箭头按钮，选择“删除间隔图像”或“添加间隔图像”命令，便可以在该列中删除或添加间隔图像了。在布局表格的标题栏中选择“移除所有分隔符图像”命令，或者单击布局表格的属性检查器中的“删除所有间隔图像”按钮，表格中各列的间隔图像都将被删除。《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础415.4.1表格式页面布局删除布局表格的嵌套在布局表格中可以插入另一个布局表格，这样就形成了布局表格的嵌套。在子表格的标题栏中选择“删除嵌套”命令，或者单击属性检查器中的“删除嵌套”按钮，子表格中的内容被融入到父表格中，子表格中的布局单元格作为父表格中的布局单元格，放置在原来的位置，子表格被删除。返回《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础425.4.1表格式页面布局格式化布局表格设置布局表格的格式《大学计算机信息科技教程（第二版）》——第5章网页制作基础《大学计算机信息科技教程（第二版）》——第5章网页制作基础435.4.1表格式页面布局设置布局单元格的格式返