专题 表格布局页面

第三章表格布局页面3.1表格的基本操作3.2使用表格的其他视图3.3应用实例13.4应用实例23.5应用实例3第一节表格基本操作主要内容：（1）理解单元格，表格，间距，填充，边框。（2）调整行和列的宽度、高度。（3）拆分和合并单元格。（4）嵌套表格（5）制作细线表格。（1）理解单元格，表格，间距，填充，边框。居中｜插入一行一列表格，各项值如图：插入表格：插入表格：插入表格：为了便于观看填充的效果，在属性面板中，填充输入为30。◇填充：单元格边框和内容之间的距离就是填充。（2）调整行和列的宽度鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。在属性面板中可以设置所选列的宽和高。为列设置宽度和高度（2）调整行和列的宽度鼠标放在一行的左边，出现横向的箭头时，单击，就可以选中一行。在属性面板中可以设置所选行的宽和高。为行设置宽度和高度（3）拆分和合并单元格合并单元格：按Ctrl，点单元格，选中表格，在属性面板中点“合并所选单元格，使用跨度”。拆分单元格：在单元格中单击，选中单元格。点击属性面板中的“拆分单元格为行或列”，设置拆分方式。拆分后的效果（4）嵌套表格嵌套表是在表格中的一个表格。在一个单元格中，插入一个表格，就是嵌套表。实例制作：基本表格的制作（5）制作流行表格1.制作细线框表格：实质上是设置间距的大小和颜色。实例为便于观看效果，把间距设置为10。单元格填充和边框设置为0。单元格填充和边框不输入数值效果类似。选中表格，设置表格的背景颜色为黑色。一个10象素宽的表格就做好了。实际上是把间距的颜色设置成了黑色。单元格背景为白色将表格间距改为1后即做成细线表格3.制作间隔表格所谓间隔表格，就是单元格之间存在一定的距离，看上去，每个单元格自成一体。此时要用到前面所讲的嵌套表格。操作方法如下：1)插入2×2表格，边框粗细为0，单元格边距为1，单元格间距为4。2)选择所有单元格，设置其背景色为“#0000ff”(此为间隔表格的边框色）3)在每个单元格内插入1×1表格，宽高皆为100%，边框粗细为0，间距为0。4)设置内嵌套表格背景色为白色“#FFFFFF”实战演练流行表格制作技巧第二节版式设计主要内容：1.几种常用的版式（分栏结构），2.LOGO（标志）尺寸，3.Banner（横幅）尺寸，4.导航栏类型，5.导航菜单位置，6.网页内容，7.版权声明。网页结构分析这是一个主页的简单结构，由三个表格组成。第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。典型的二分栏结构。下面一个表格，一行一列，放版权声明。表格3表格1表格2常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构：一、页眉区设计几种国际尺寸的Banner：468×60(全尺寸Banner)，392×72（全尺寸带导航条Banner），234×60（半尺寸按钮）。LOGO:167×71导航栏形式导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。导航栏有横排的竖排的也有两种都有的。例如:V6艺术精英这个站点页面采用的是百分比，在任何电脑上显示都是全屏幕的。横排的如：三星电子另外这个站点LOGO在右上角。竖排的有：横排坚排均有的：联想联想的菜单栏还使用了弹出式菜单。表格初始设置1.做一个在800×600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。2.用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。完全下载一个表格的内容，才能在IE中显示出来。如果页面文件小，可以只有一个表格放内容。如果页面文件很大，则从上到下放几个宽度相同的表格，分别放不同的内容，如图所示第三节布局视图的使用在DreamweaverMX中，可以在表格中添加内容，但是内容只是在表格的中间出现。这时需要从标准视图切换到布局视图，精确定位网页内容。点“布局”切换到布局视图一、创建布局表格和布局单元格在页上绘制布局单元格和布局表格。当您不在布局表格中绘制布局单元格时，Dreamweaver会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。1.单击插入栏“布局”分类中的“绘制布局单元格”按钮，拖动指针以创建布局单元格。Ctrl＋“绘制布局单元格”连续创建布局单元格。2.单击插入栏“布局”分类中的“绘制布局表格”按钮,拖动指针以创建布局单元格。Ctrl＋“绘制布局表格”绘制多个布局表格。3.绘制嵌套布局表格：将一个布局表格绘制在另一个布局表格中，创建嵌套表格。二、在布局单元格中添加内容绘制好布局之后，可以在布局单元格中插入文本、图像等内容。在布局表格的空白区域中不能插入内容。当插入的内容较大时，布局单元格会自动延展以容纳这些内容，但是，周围单元格的大小会受到影响。三、移动布局单元格和表格及调整它们的大小调整布局单元格的大小：:选择一个单元格，按住Ctrl键的同时单击该单元格中的任何位置，该单元格周围出现选择控制点。拖动选择控制点来调整单元格的大小。三、移动布局单元格和表格及调整它们的大小移动布局单元格:按住Ctrl键的同时单击该单元格中的任何位置,将该单元格拖到其布局表格中的另一个位置。按箭头键每次移动1个像素。Shift＋箭头键每次移动10个像素。三、移动布局单元格和表格及调整它们的大小调整布局表格的大小:通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。拖动选择控制点来调整表格的大小。三、移动布局单元格和表格及调整它们的大小移动布局表格:通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。将表格拖到页上的另一个位置。(只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格)。四、设置列宽如果在单元格中插入了一个大于单元格宽度的图像，在布局标题上就有两种大小四、设置列宽选择使单元格宽度一致四、设置列宽设置列宽度为自动伸展：在一行中，最好只选择最右边的一列为自动伸展。选中一列的标题区域，选择“列设置为自动伸展”如果是第一次设置自动伸展，就会出现“选择间隔图像”对话框，选择“创建间隔图像文件”。第四节表格制作实例信息区为三个嵌套的表格其他区均为宽度一致的独立表格页眉区导航栏区左信息区中信息区右信息区版权区网页结构分析一、设计页眉区T1：3×3表宽778页面属性：左、上边距均为0可插入固定大小占位符，以方便排版。网站Logo图标网页广告图像设为首页联系我们加入收藏167×71499×71默认二、设计导航栏区T2：2×17表宽778栏目间的分隔符用｜，也可用其他特殊符号。第二行用于间隔。|主站首页|站长简介|音乐古堡|BEYOND|星爷专辑|友情链接|给我留言|疯狂下载|三、设计信息区T3：1×3表宽7781.设置左右内容区T31：2×1表，宽100%，表格边框为1，白色。第1格高15，第2格高163，单元格边框为1，绿色。第1格：背景图像，输入栏目名第2格：输入栏目的具体内容复制T31表至左、右内容区。181411156三、设计信息区2.设计主内容区T32：2×3表，宽100%，边框为0，边距为0，间距为0第一行：设置各单元格背景图像，输入栏目名称第二行：合并第二行T321：在第二行插入1×1表，宽100%，边框为1，白色，单元格边框为1，绿色。拆分T321为2列，第一列输入具体内容，第二列设置132×145的图像占位符。复制和T32表，更名，并添加内容181411156四、设计版权区T4：2×1表，宽778，边框为0，边距为0，间距为0第一行：插入水平线第二行：输入相关版本信息版权所有：Copyright?2003-2005Allrightsreserved网页制作：青岛大学软件学院E-mail:qdgzy@163.com邮编：266061建议使用800×600分辨率