《第三章-使用表格规划网页布局(共6页).doc》由会员分享，可在线阅读，更多相关《第三章-使用表格规划网页布局(共6页).doc（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、精选优质文档-倾情为你奉上第三章 使用表格规划网页布局一、相关概念1、表格功能：显示数据，定位网页元素（布局）2、表格的组成：表格由行和列组成，行和列的交叉形成的矩形形状称之为单元格。单元格中的内容和边框之间的距离叫边距cellpadding。单元格和单元格之间的距离叫间距cellspacing。表格的边线叫做边框border。tr ：代表一行。td：代表一个单元格。3、占位符：当我们插入表格后，每个单元格的默认的高度是12像素的，但这些单元格中什么也没有，它是用什么撑起高度的？这都是“占位符”的功劳。因为一个单元格在没有设置高度值的时候，代表着此单元格的高度值为0，但如果这样就没法对单元格进
2、行操作了，所以，Dreamweaver会在每个单元格中插入代码“ ”，用以撑起单元格的高度。 当我们在单元格插入内容，或是设定了单元格的高度数值，这个代码就会消失。如果想要设置低于12像素的单元格的高度时，也必须先将这个占位代码给删除掉才行。二、插入表格两种方法： “插入”“表格”命令 单击“插入”面板的 “常用”类别中的“表格”按钮上，打开“表格”对话框。 1、宽度（百分比，像素）：相对显示，绝对显示2、边距/填充：文本内容与边框之间距离3、间距：单元格与单元格之间距离4、标题：设置表格标题位置【例4-1】：新建一个网页文档，在文档中插入表格（9行2列）并插入表格内容【练习1】：制
3、作下面表格【练习2】：如何让文本与表格边框有一定空白区间，如下：5、插入嵌套表格：嵌套表格就是在已经存在的表格中插入的表格。插入嵌套表格的方法与插入表格的方法相同。 【练习3】：利用表格制作下图样式：说明：由于大表格控制的是网页整体的布局，为使之在不同分辨率的显示器下能保持统一的外观，大表格的宽度一般使用像素值，而为了使嵌套表格的宽高不和总表格发生冲突，嵌套表格一般使用百分比来设置宽和高。 【思考】：利用嵌套表格留空白操作方法：插入一个1行1列的表格，再在此表格中插入一表格，此时新插入的表格设置时宽度要小一些，另外最好不要设置边框。要么将里面表格的宽度以“百分比”的形式设置，此值要小于100%
4、，具体多少适情况而定。三、编辑表格（一）选择表格1、选择整个表格：左上角或底部边缘；任意单元格+标签2、选择表格中的行或列：上边缘，左边缘；拖动鼠标3、选择单个单元格：单元格+标签；单元格+Ctrl+A4、选择单行或矩形单元格块： 鼠标拖动；首单元格+shift+尾单元格5、选择不相邻的单元格 Ctrl+欲选单元格（再次单击则从选集中删除）（二）编辑表格和单元格1、调整表格大小：三个控制点（水平、垂直、水平+垂直方向）2、更改列宽和行高：左右指针或上下指针位置拖动鼠标3、添加和删除行、列： 当前单元格上面插入一行（修改-表格-插入行） 当前单元格左边插入一列 插入-布局： 插入多行多列（修改-
5、表格-插入行或列） 删除行或列（选择，修改-表格-删除行/列；Del键）4、拆分和合并单元格： 选择表格，修改-表格-合并/拆分单元格；属性面板中的按钮【例4-2】：打开例3-1网页文档，编辑表格（边框1，背景灰，边框颜色深灰，合并第一行）5、复制、粘贴单元格【练习4】：如何制作下图的细线边框表格？ 【练习5】：制作简单导航栏【练习6】：如何制作下图圆角表格？四、使用表格规划网页布局（一）在“布局模式”下规划网页布局表格的三种布局模式：标准、扩展、布局Dreamweaver CS3在“插入”栏的“布局”类别中提供了“标准”、“扩展”两种表格视图模式，注意在“查看-表格模式-布局模式”中切换：l
6、 “标准”模式：标准模式是表格默认的视图模式，对于表格及其内容的绝大部分操作适合在该模式下进行。l “扩展”模式：在标准模式中，当图像填满整个单元格时，很难直接将光标定位在单元格中，为了解决这个问题，可以切换到“扩展表格”模式。在“扩展”模式下，Dreamweaver临时向文档中的所有表格添加单元格边距和间距，并且增加表格的边框以使编辑操作更加容易。利用这种模式，可以方便地选择表格中的内容或者精确地定位插入点。l “布局”模式：专门为方便网页布局而设计的模式，这种模式下的单元格边框是没有宽度的。“布局”模式的主要功能是绘制或编辑复杂的表格。文档窗口的顶部显示“布局模式”，指示当前正处于“布局”
7、模式中，原来页面上的每个表格都显示为布局表格。1、认识布局单元格和布局表格l 创建布局表格，在布局表格中添加布局单元格l 直接创建布局单元格时，自动创建布局表格2、绘制布局单元格和布局表格 “布局单元格”不能存在于布局表格之外，可以在“布局表格”中任意位置绘制“布局单元格”；按住Ctrl键拖拽鼠标，实现连续绘制多个“布局表格”或“布局单元格”。3、选择布局单元格和表格 单元格：点击单元格边框，8个控制点 表格：单击灰色区域4、移动和调整布局单元格和布局表格：在布局表格内，布局单元格可以任意移动。 鼠标拖动；方向键微调（Shift每次调10像素）注意： 布局单元格不能在布局表格之外，同一个布局表
8、格中可以放置多个布局单元格，在布局表格中还可以嵌套多个布局表格。（二）布局的过程1.设定页面尺寸l 分辨率800x600像素，页面显示尺寸为780x428像素；l 分辨率1024x768像素，页面显示尺寸为1007x600像素。2.放置功能模块3.布局细化与调整（选择、调整、移动、修改）例4-3：在布局模式下规划“游戏网站”主页布局并设置单元格样式1、新建文档，切换到【布局模式】2、打开布局插入栏，绘制布局表格（800*600像素）3、绘制布局单元格（若干）4、选中布局单元格，属性面板中设置背景色表格的应用技巧： 强调：如果要将某网页元素（例如一幅图像）放到特定位置，首先应想到使用表格！ 1.
9、使用表格还是单元格 2.使用百分比还是像素 3.使用一个大表格还是多个横向表格练习1方法：在弹出的“表格”属性中设置2行3列，边框为1，单元格间距及边距为0，页眉中选择“Top”，将页眉标题设置为“联系方式”。表格制作完成后，在第一栏中输入“姓名”、“电话”和“邮件地址”。练习2方法：在弹出的“表格”属性中设置1行1列，边框为1，单元格间距及边距为0，无页眉。此时文本和表格边框紧密地贴在一起，在“属性”面板将表格单元格填充值改为5或者更大，这时内容就会和表格分离开来。练习3制作方法：首先插入一表格，然后将光标置于要插入嵌套表格的单元格中，再插入一表格即可 练习4方法1：利用单元格间距插入1行1
10、列表格，宽度为300像素，高度为100像素，选中表格：设置表格背景色为所要的边框线颜色，将表格单元格间距设为1，边框及单元格填充设为0；选中单元格：设置单元格背景颜色为网页的背景颜色；方法2：利用单元格边距插入1行1列表格，宽度为300像素，高度为100像素，选中表格：设置表格背景颜色为所要的边框线颜色，边框为0，单元格填充设为1，间距为0；在这个表格的单元格内再插入一个新表格，将新表格的背景颜色设为白色，宽度设为100%，单元格填充和单元格间距均高为0 二者区别是什么？利用第1种方法制作的细线表格拆分成上下两行，此时可以发现表格中间又多了一条细线，而将第2种方法内部嵌套表格拆分成上下现行，表
11、格中间不会出现细线。 练习5方法：插入1行6列的表格，表格宽度为700像素，边框和单元格边距为0，单元格间距为1，背景色设置为橙色（#FF9900），而每个单元格的背景色设置为淡黄色（#FFFFCC）。在每个单元格中输入文字，观察下效果。如果觉得字体过大，与表格边框太近，可修改字体大小 。练习6方法：插入一个一行三列的表格，CellPad、CellSpace和Border属性值都为0，在第一列插入图片1.gif，第三列插入图片2.gif，并设置单元格的高度和宽度与图片一致。设置第二列的背景颜色为与圆角图片一致的颜色，设置宽度为整个表格的宽度减去两个图片的宽度，并打开源代码察看器，删除这列中的字符” ”（Dreamweaver会自动在每个单元格中插入此字符，若不删除会撑大表格）。依葫芦画瓢，做好下半部分的圆角。在已插入的两个表格中间再插入一个一行三列同宽的表格，CellPad、CellSpace和Border属性值都为0，宽度为100%。设置第一列和第三列背景颜色为与圆角图片一致的颜色，宽度为1像素，并打开源代码察看器，删除这两列中的字符” ”。到这，一个圆角表格就做好了。专心-专注-专业