第五章 网页中布局

网页设计Webnetdesign

第五章网页中的布局一、表格的创建和应用（1）表格的设置●表格——是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。光标在页面上，之后单击常用工具栏上“表格”，在弹出的对话框里进行设置：网页设计Webnetdesign行数：确定表格具有的行的数目，也就是横着的几行。列数：确定表格具有的列的数目，也就是竖着的几列。表格宽度：以象素为单位或按所占浏览器窗口宽度的百分比来指定表格的宽度。边框粗细：指定表格边框的宽度（以象素为单位）。默认为“1”象素，若要确保浏览器显示的表格没有无边框，必将边框粗细设置为“0”。单元格边距：确定单元格边框和单元格内容之间的象素数。默认是“1”象素，如果确定想完全没有则设置为“0”。单元格间距：确定相邻的表格单元格之间的象素数。默认是“2”象素，如果想要完全没有，则设置为“0”。页眉:设置表格中显示的文字的属性.网页设计Webnetdesign表格插入到页面上之后，我们可以看见下面的属性面板，显示的就是当前表格的属性：行和列是表格中行和列的数目。宽和高是以象素为单位或按所占浏览器窗口宽度的百分比计算的表格宽度和高度。在这里表格的高度一般不需要做设置。填充：确定单元格边框和单元格内容之间的象素数。默认是“1”象素，如果确定想完全没有则设置为“0”。间距：确定相邻的表格单元格之间的象素数。默认是“2”象素，如果想要完全没有，则设置为“0”。边距：设置表格边框显示的粗细。默认为“1”，完全没有则设置为“0”背景颜色：设置整个表格的背景颜色。边框颜色：设置表格边框的颜色，默认是灰色的而且有立体的效果。背景图像：设置整个表格的背景图像，如果图片小，可以自动重复；如果图片大，那么只显示局部。网页设计Webnetdesign2）单元格的设置●单元格——表格中的每一个小格子都叫单元格，是表格中的最小单位。把光标放在表格的某一个单元格中，属性面板则显示该单元格的属性,可以进行设置。水平：设置单元格中的内容水平的对齐方式，可以将内容对齐到单元格的左侧、右侧或使之居中对齐。垂直：指定单元格中内容的垂直对齐方式，可以将内容对齐到单元格的顶端、中间、底部或基线。宽和高：以象素为单位或按占整个表格宽度或高度百分比计算的所选单元格的宽度和高度。如果要指定百分比，则在值后面使用百分比符号(%)。背景：设置该单元格的背景图像，如果图片小，可以自动重复；如果图片大，那么只显示局部。网页设计Webnetdesign背景颜色：设置该单元格的背景颜色。边框：设置该单元格的边框颜色。不换行：可以防止换行，从而该单元格中的所有文本都在一行上。如果启用了“不换行”，则当您键入数据或将数据粘贴到单元格时单元格会加宽来容纳所有数据。标题：可以该的单元格格式设置为表格标题单元格。默认情况下，表格标题单元格的内容为粗体并且居中。合并单元格：可以将所选的单元格合并为一个单元格。只有当单元格形成矩形或直线的块时才可以合并这些单元格。选择连续行中形状为矩形的单元格才可以执行此操作。拆分单元格：可以将所选的单元格分成两个或更多单元格。一次只能拆分一个单元格；如果选择的单元格多于一个，则此按钮将禁用。在弹出的对话框中，可以选择把该单元格拆分成几行或者几列。网页设计Webnetdesign（3）添加或删除表格的行和列添加表格行或者列：将光标放到表格或者表格中的某一单元格里面，“鼠标右键：表格：插入行或列”,在弹出的对话框里面，可以进行插入表格的设置。插入行或者列，插入行或者列数值，以及在当前行或者列的上下还是前后。删除表格的行或者列：将光标放到表格或者表格中的某一单元格里面，“鼠标右键：表格：删除行”，“鼠标右键：表格：删除列”，这样就可以删除当前表格的行或者列。网页设计Webnetdesign（4）单元格的拆分与合并●方法一：可以选择属性面板上的单元格拆分、合并来设置。●方法二：单元格的拆分，可以将光标表格中，“鼠标右键：表格：拆分单元格”；单元格的合并，可以用光标选中要合并的单元格，“鼠标右键→表格→合并单元格”。（5）嵌套表格图

嵌套表格是在一个表格的单元格中插入新的表格。可以像对任何其他表格一样对嵌套表格进行格式设置；但是，其长度和宽度受它所在单元格的长度、宽度的限制。其中表格所具有的属性，嵌套的表格都具有。网页设计Webnetdesign（6）导入表格数据图光标在页面中，选择“文件菜单：导入：表格式数据”；或者“插入菜单：表格对象：导入表格式数据”，这样在弹出的对话框里面进行设置：数据文件：单击“浏览”按钮，选择要导入的文件。定界符：正在导入的文件中所使用的分隔符。一般是Tab，如果未能指定定界符，则无法正确地导入文件，也无法在表格中对您的数据进行正确的格式设置。表格宽度：⊙匹配内容：使每个列足够宽以适应该列中最长的文本字符串。⊙设置为：创建以象素为单位指定固定的表格宽度，或按占浏览器窗口宽度的百分比指定表格宽度。单元格边距：单元格内容和单元格边框之间的象素数，默认为“1”，完全没有则输入“0”。单元格间距：确定相邻的表格单元格之间的象素数，默认为“2”，完全没有则输入“0”。格式化首行：是用来确定应用于表格首行的格式设置（如果存在）。可选项为：无格式、粗体、斜体或加粗斜体。边框：指定表格边框的宽度（以象素为单位），默认为“1”，完全没有边框则为“0”。网页设计Webnetdesign（7）导出表格数据

选中页面中要导出的表格，选择“文件菜单：导出：表格”，进行设置。定界符：指定应该使用哪个分隔符字符在导出的文件中隔开各项。换行符：指定将在哪个操作系统中打开导出的文件：Windows、Macintosh还是UNIX。（不同的操作系统具有不同的指示文本行结尾的方式。）网页设计Webnetdesign（8）表格绘制圆角矩形①在文档中插入表格，3行3列的表格，边框、边距、间距都为“0”。②在photoshop中建立一个为宽：30px,长：30px，背景白色的文档。用椭圆选框工具，同时按住Alt键和Shift键在文档的一个角进行托拽，填充颜色，绘制如图5-13所示，显示的是将来的矩形的右下角。这样翻转，分别保存四个不同方向的角文件为JPEG格式.

③在Dreamweaver的表格里面，上下左右四个单元格里面分别插入在photoshop里面制作的四个图片.。④表格中的其它单元格里面设置为填充单元格背景颜色，颜色吸取插入角上的红色，这样就绘制完成了圆角矩形。⑤在圆角矩形的中间单元格里面，嵌套表格制作公告栏，添加内容包括图片和文字资料.网页设计Webnetdesign（9）创建网站相册①相册的所有图像放置在一个文件夹中，确保图像文件名包含以下任意一个扩展名：.gif、.jpg、.jpeg、.png、.psd、.tif或.tiff。带有无法识别的文件扩展名的图像不会包含在相册中。②选择“命令菜单：创建网站相册”，弹出对话框，进行设置：网页设计Webnetdesign相册标题：文本框中输入的标题将显示在包含缩略图的页面的顶部的灰色矩形中。副标信息和其他信息：这两个文本框中输入最多两行附加文本，该文本将直接在标题下显示。源图像文件夹：选择包含源图像的文件夹。目标文件夹：选择（或创建）一个目标文件夹，用以放置所有导出的图像和HTML文件。缩略图大小：图像将按比例缩放，以创建适合具有指定象素尺寸的方框的缩略图，同时可以设置是否显示图片名称。缩略图格式：选择缩略图图像的格式。GIFWebSnap128：创建GIF缩略图，包含多达128色的Web适应性调色板。GIFWebSnap256：创建GIF缩略图，包含多达256色的Web适应性调色板。JPEG—品质较高：创建品质较高且文件较大的JPEG缩略图。JPEG—文件较小：创建品质较低且文件较小的JPEG缩略图。网页设计Webnetdesign相片格式：对于每个原始图像，将创建一个具有指定格式的大尺寸图像。可以为大尺寸图像指定格式，这个格式可以与上面设置的缩略图格式不同。√为每张相片建立导览页面：每个缩略图像创建一个Web页，该Web页包含标为“后图5-19退”、“主页”、“前进”的导航链接；如果不选择此选项，缩略图链接将直接链接到大尺寸图像。③单击“确定”，Fireworks启动（如果它尚未运行）并创建缩略图和大尺寸图像。如果所包含的图像文件数目较多，这可能会需要几分钟的时间。当处理完成后，Dreamweaver将再次处于活动状态并创建包含缩略图的页。再次单击“确定”，Dreamweaver相册页面建立，网页设计Webnetdesign二、图层的创建和应用（1）创建层

选择“布局”工具栏，单击描绘层按钮,这时光标变“十”字形状，在文档窗口中拖动鼠标，即可绘制出一个层，这样绘制的层可以再页面的任意位置。或者执行“插入菜单：布局对象：层”命令，也可绘制层，这样的层在光标所在的位置出现。（2）设置层参数使用“编辑菜单：首选参数”命令，打开“首选参数”对话框，在左侧的“分类”列表中选择“层”选项，可以设置层的参数：显示：确定层在默认情况下是否可见。default：“默认”不指定可见性属性。当未指定可见性时，大多数浏览器都会默认为“继承”。inherit：“继承”使用该层父级的可见性属性。visible:“可见”显示这些层的内容，而不管父级的值是什么。网页设计Webnetdesignhidden:“隐藏”隐藏这些层的内容，而不管父级的值是什么。宽和高：指定使用“插入工具栏：层”创建的层的默认宽度和高度（以象素为单位）。背景颜色：指定默认层的背景颜色，可以是默认透明的，或者吸取颜色自己设定。背景图像：指定默认的背景图像。单击“浏览”可在计算机上查找图像文件。嵌套：√如果在层中则使用嵌套：指定从现有层边界内的某点开始绘制的层是否应该是嵌套层。Netscape4兼容性：

插入层时固定大小：默认不做选择。网页设计Webnetdesign（3）层的属性图选中文档中的层，在下面的属性面板中，显示当前层的属性，可以进行设置：层编号：每个层都必须有它自己的唯一ID，以便在“层”面板和JavaScript代码中标识该层。这里默认就可以。左和上：指定当前层的左侧和顶端距离页面（如果嵌套，则为父层）左上角的位置。宽和高：指定当前层的宽度和高度Z轴：指的是当前层的堆叠顺序，Z轴数值越大，图层越在上面，Z轴为负数，则位于表格之后。网页设计Webnetdesign可见性：指定该图层最初是否是可见的。default为“默认”。背景图像：指定该层的背景图像。背景颜色：指定该层的背景颜色。溢出：控制当层的内容超过层的指定大小时如何在浏览器中显示层。visible:“可见”指定在层中显示额外的内容；实际上，该层会通过延伸来容纳额外的内容。hidden：“隐藏”指定不在浏览器中显示超出层额外的内容。scroll：“滚动”指定浏览器应在层上添加滚动条，而不论内容多少是否需要滚动条。auto:

“自动”使浏览器仅在需要时（即，当层的内容超过其边界时）才显示层的滚动条。剪辑：定义层的可见区域。指定左侧、顶部、右侧和底边坐标可在层的坐标空间中定义一个矩形（从层的左上角开始计算）。层经过“剪辑”后，只有指定的矩形区域才是可见的。网页设计Webnetdesign（4）层与表格间的转换层转化为表格：①先创建多个图层来布局整个页面，但是层与层之间不允许叠加，可以在绘制层前，在“窗口菜单：层”，在弹出的层面板上进行设置。②绘制完成后，选择“修改菜单：转换：层到表格”，在弹出窗口进行设置。布局表格：⊙最精确：为每个层创建一个单元格，并且层和层之间的空白也都转化为单元格。⊙最小:为每个层创建一个单元格，并且层和层之间的空白如果小于自己设置的象素，那么就合并单元格。√使用透明GIF：用透明的GIF填充表的最后一行。这将确保该表在所有浏览器中以相同的列宽显示。√至于页面中央：将结果表放置在页面的中央；不勾选这项，则表将在页面的左边缘开始。③选择所需的布局工具和网格选项，然后单击“确定”。网页设计Webnetdesign表格转化为层：①绘制好文档中的表格，选择“修改菜单：转换：表格到层”，在弹出对话框里面进行设置。防止层重叠:

在创建、移动层和调整层大小时约束层的位置，使层不会重叠。显示层面板：显示“层”面板。显示网格和靠齐到网格：能够使用网格来协助对层进行定位。②单击“确定”。表格即转换为层。空单元格不会转换为层（除非它们具有背景颜色）。同时，位于表格外的页面元素也会放入层中。网页设计Webnetdesign（5）嵌套层①在文档里面插入表格，设置成居中显示，在表格里插入图片.②让光标在图片的左面，表格的里面，选择“插入：布局对象：图层”，这样在表格的左上角显示一个图层，为图层1，这个图层是父层.③继续绘制子层，选择绘制图层工具，按住鼠标的Alt键从父层向外拖拽绘制一个新的图层，为图2，这个层是子层，之后继续调整图层2的位置和大小，图层1是不动的，图层2相对于图层1可以任意移动位置，他们之间的距离是绝对的，图层1和表格之间是相对的坐标，不管表格居中还是左对齐，图层1相对于表格是不动的，图层2相对于图层1是不动的，父层移动子层也跟着移动，父层不动子层可以随便在任何位置；父层删除了，子层也跟着没有了，子层移动，不影响父层的任何变化。网页设计Webnetdesign④在图层2里面插入一个flash动画，这个动画是一个透明FLASH动画，大小尺寸调整为和图层一样大，正好放在表格图片之上。⑤选中图层2中的FLASH动画，在它的属性面板上设置“参数”，在弹出的对话框里面进行设置“参数：wmode,值：transparent”。这样设置完成后，选择“预览”，在浏览器弹出的对话框里面，选择“确定”，之后在浏览器上面出现的文字，鼠标右键点击，选择“允许阻止的内容”，之后点击“是”，这样最终效果完成。网页设计Webnetdesign（6）图层制作浮动广告

①在页面上绘制图层1，在图层1里面，可以绘制表格，插入图片、插入文字等。②选择“窗口菜单：时间轴”鼠标选择时间轴的第一帧上。选中文档中的图层1，“鼠标右键：记录路径”，可以拖拽图层，图层拖拽所拽出的线，就是图层浮动的轨道。如果需要修改，可以在时间轴面板上修改关键帧，也就是时间轴面板上面蓝色的带圆圈的就是关键帧。③预览，设置出现浏览器阻拦，如上设置，就会看见图层漂浮在页面上网页设计Webnetdesign三、框架的创建和应用框架是一种特殊的网页排版技术，含有框架的网页是一种特殊的网页，一般称为框架网页。使用框架后，整个网页被分割成几个区域，每个区域称为一个框架窗口，整个页面时各框架集。任何一个框架窗口实际就是一个网页，任何一个框架窗口都可以作为超链接的窗口，当浏览者点击一个超链接时，该超链接的目标窗口便可以是某一框架窗口，而不是整个大的浏览器的窗口发生跳转。框架技术是有效架构网页结构和合理展示信息的工具，也为浏览者提供了方便和友好的界面。(1)创建框架集图方法一：①选择“查看菜单：可视化助理：框架边框”建立框架边框在文档的窗口中，可以拖拽来创建我们想要的框架集。这个框架是父框架。②要拆分光标所在的框架，从“修改菜单：框架页”子菜单选择拆分项。这样的新建的框架就是嵌套的框架了。网页设计Webnetdesign方法二：将光标在文档中，选择“插入工具栏：布局：框架”子菜单中选择预定义的框架集。框架集图标提供应用于当前文档的每个框架集的可视化表示形式。框架集图标的蓝色区域表示当前文档，而白色区域表示将显示其它文档的框架。当您应用框架集时，Dreamweaver会自动设置该框架集的标题，选择默认就可以了。(2)删除一个框架图不想要哪个框架，就把哪个框架拖拉到框架的边框上或者父框架的边框上。(3)保存框架集文档设置完框架集后，要保存的时候，选择“文件菜单：保存全部”，保存的时候会连续保存四个页面。网页设计Webnetdesign(4)选择框架和框架集“框架”面板提供框架集内各框架的可视化表示形式。它能够清晰的显示框架集的层次结构，而且这种层次结构在“文档”窗口中的显示可能不够直观。在“框架”面板中，环绕每个框架的是较细的灰线，并且每个框架由框架名称标识。我们可以在框架面板上选择某个框架，相应文档中的框架就同时也被选中了。网页设计Webnetdesign(5)框架集的属性①在“文档”窗口中单击框架集中两个框架之间的边框。把框架集选中。②在下面的“属性面板”上显示当前框架集的属性，可以进行设置：边框：设置文档中边框周围是否显示边框。“是”显示边框；“否”不显示边框；“默认”要允许浏览器确定如何显示边框。边框颜色：设置边框的颜色。边框宽度：指定选中框架集中所有边框的宽度。值和单位：设置分配给每个框架的空间大小，一般左面框架是设置数值以象素为单位显示，右侧框架大小设置为相对大小，这样在分配能够使右侧框架伸展以占据所有剩余空间。网页设计Webnetdesign(6)框架的属性①在文档窗口中光标点击某个框架里，同时按住Alt键，这样可以选中整个框架了。或者在框架面板上选择某个框架，这样文档中的框架就被选中了。这样在属性栏里面就显示了当前框架的属性。②可以通过框架属性来设置框架，了解当前框架的一些信息，框架名称：链接的target属性或脚本在引用该框架时所用的