《Dreamweaver创建、编辑表格和单元格剖析.docx》由会员分享，可在线阅读，更多相关《Dreamweaver创建、编辑表格和单元格剖析.docx（15页珍藏版）》请在三一文库上搜索。
1、实验5创建、编辑表格和单元格实验要求表格是用于在页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。通过本 试验的学习，需要熟悉掌握表格的使用方法，编辑表格和单元格的基本操作。说明表格是页面布局中极为有用的设计工具。在使用 Dreamweaver MX 2004设计网页的 过程中，大多数的情况也是使用表格来定位页面中的基本元素，以使页面中的各元素能够达到 有序排列的目的。对应知识点插入表格和牵套表格表格和单元格的属性添加单元格内容实验素材普通说明文档和表格形式文档各一份。实验步骤1 .启动 Dreamweaver MX 2004程序，按 Cral+N键创建 HTML网页，并保存网页为
2、page05.htm。2 .在文档“面板标题”栏输入网页名称 时尚生活如图5-1所示。图5-1输入网页标题说明 在文档面板中的标题设置与在页面属性”对话框 标题/编码”区域的标题设置，是两种设置网页标题的方法。可以达到同样的效果。常用”项，切换到常 用面板。单击 表 格”按钮按钮，或选择菜单 插入”表“格”命令，弹出如图5-2所示的 表格”对 话框。说明如果 表格”按钮不可用，则说明当前网页编辑窗口处于模式状态，用户可单击查看表格模式标准模式”，这样 表格”按钮即可用。在行数”和列数”编辑框内分别输输入1 ”；在 表格宽度”编辑框内输入100,选择 百分比”选项；在 边框粗细”编辑框中输入 b
3、”，其他为默认设置。说明 在 单元格边距”编辑框中设置单元格图5-2表格”对话框图内容与单元格边界之间的像素数，默认值为2像素；在单元格间距”编辑框中设置为每个单元格之间的像素数，默认值为2像素；在页眉”选项框下有四种样式，表格设置表格内标题的四种形式，分别为：无页眉、左页眉、顶部页眉和左侧、顶部都有页眉；在标题”编辑框内输入所插入表格的标题；在对齐标题”下拉列表中选择标题对其的方式，分别为：默认、顶部、底部、左和右；在 摘要”编辑框内输入所建表格的说明，会自动以代码形式加入中，在编 辑界面、浏览界面都不显示。4.单击确定按钮，创建表格显示在 Dreamweaver MX 2004文档窗口 中
4、，如图5-3所示。5 .鼠标移动到表格外边框处，出现了|标记，单击鼠标即可选中表格。选 中菜单窗口“属性”命令，然后在属性面板中设置表格样式。6 .在属性面板中显示了在创建表格时设置的行、歹h宽等项。我们在 高编辑框内输入“60；在后面的单位列表图5-3在文档窗口中显示的表格中选择像素”；在对齐”下拉列表中选择 居中对齐”；单击背景颜色”按钮，在调色板中选择 背景颜色为绿色（色标值为 #A3D900 ）,此时表格中的属性面板显示如图5-4所示。完成的表格样式如图5-5所示。图5-4表格属性面板图5-5在属性面板中设置后表格样式7 .在表格内单击鼠标，光标定位在表格内。输入文字时尚生活”，拖动鼠
5、标选项中文字，在属性面板中设置大小为 “3朦素”，颜色为蓝色（色标值为# 0033FF）,单击居中对齐”按钮 按钮和 粗体”按钮B,设置字体为 隶属”（关于 字体”的设置请参考试 验4中的介绍），完成后网页文字和属性面板如图5-6所示。图5-6编辑文字样式说明以上是对单元格属性面板的设置，它包括了单元格内元素的设置。单元格属性面板的上半部分和文本属性面板相似，在此不再赘述。下面介绍该面板上主要按钮的功能。按钮用于合并两个或多个单元格；按钮用于拆分一个单元格；在 水平”列表中有四种对其方式：默认、做对齐、居中对齐、右对齐、一般的单元格内容居左，标题型内容居中； 在 里直”列表中有5种对其方式：
6、默认、顶端、居中、底部、基线、默认单元格内的文字在垂 直居中显示；在 宽“和高”编辑框内设置单元格的尺寸；勾选 不换行”选项，在输入单元格内 容的时候，单元格会自动扩展使得输入的文本在一条直线上显示；在背景”区域，单击后面的文件夹图标，查找需要插入的背景背景图片，文本框中会显示图片的路径；在背景颜色 区域可以从颜色选择器中选择单元格的背景色；在边框”中设置单元格边框颜色，当边框设置不为。时，用户即可看到显示效果。8 .在表格外侧空白处单击鼠标，选择菜单插入“表格”命令，在表 表格”对话框中，输 入行数为1 ”，列数“5,表格宽度为“100%；边框粗细为“1像素”，单击 确定”按钮，在 标 题”
7、表格下方插入一表格。9.选中此表格，在属性面板中设置边框颜色”为绿色（色标值为# 009900）,如图5-7所示。10 .拖动鼠标选中5个单元格，在下方的单元格属性面板中宽”编辑框内输入“20%；在背景颜色”调色板上选择草绿色（色标值为#CCFF66）,完成后单元格效果如图5-8所示。图5-7插入1行5列表格，设置边框颜色为绿色图5-8设置单元格宽度和背景颜色说明图5-8为单元格被选中状态，在每个单元格上方显示了单元格的宽度。在表格外任 意谓之单击，即刻取消选择。11 .分别在单元格内输入网页栏目标题。再次拖动鼠标或按住Ctrl键单击每个单元格，使单元格处于被选中状态。在属性面板中设置大小为1
8、4像素，颜色为蓝色（色标值为#0033FF）,并单击 居中对齐”按钮，取消选择，网页效果如图5-9所示。12 .在栏目标题”下方插入2行2歹U,宽度为 100%,边框粗细、单元格边距、单元格间距均为。的表格。选中表格，在属性面板中设置表格居中对齐，高为200像素。13 .拖动鼠标选项中左侧两个单元格，单击属性面板管并所选单元格”按钮按钮。合并左侧单元格，设置其背景夜色为桔黄色（色标值为#FFCC00）。14 .设置右侧两个单元格告诉分别为20、180,设置第1行单元格背景颜色为桔黄色（色标值为#FFCC00）,完成效果如图 5-10所示。图5-10设置表格布局和背景颜色15 .在左侧单元格内单
9、击，选择菜单 插入“ 表格”命令，插入3行1歹U,宽度为 90%, 单元格边距为1 ,边框粗细和单元格间距为0的嵌套表格。选中表格，在属性面板中对齐”下拉列表中选择居中对齐”命令。说明 所谓嵌套表格就是在表格中插入表格。当用户需要在一个单元格内完成比较复杂的布局时，可以设置嵌套表格。嵌套表格的宽度会受到它外层的单元格限制。16 .选中等2行单元格，在属性面板中设置高为“20；背景颜色为 黄色”（色标值为#FFFF99）,大小为“1株素”，并单击 居中对齐”按钮，在单元格内输入栏目标题时尚家具”，如图5-11所示。17 .选中第3行单元格，设置其背景颜色为黄色（色标值为#FFFF999）。在单元
10、格内插入1行1歹U,宽度为100%,单元格边距为 8,边框粗细和单元格间距为9的嵌套表格。选中表格，在属性面板中设置其背景颜色为桔黄色（色标值为#FFCC00）,如图5-12所示。图5-11设置栏目标题样式图5-12在第3个单元格内插入嵌套表格说明 在这里使用嵌套单元格是为了使此单元格产生细线边框的效果。而单元格边距的设置，会使单元格内容与边线产生一定的间距。18 .在单元格内输入若干条时尚家具栏目小标题”，把光标定位在每个小标题前，右击中文输入图标右侧的键盘按钮，弹出选项菜单，选择特殊符号”命令，如图5-13所示，在弹出 的键盘上选择 菱形”图标。如图5-14所示。图5-13选择特殊符号”按
11、钮图5-14特殊符号键盘19 .设置文字大小为12像素，菱形”图标颜色为白色。完成后如图5-15所示。20 .在 时尚家具”栏目列表右侧的第1行单元格内输入当前位置导航当前位置：首页时尚家具阳台上的妙用”，便于浏览者清楚自己所在位置，随时返回上级菜单。拖动鼠标，选中文字，在属性面板中设置大小为“1藻素”，如图5-16所示。图5-15栏目小标题制作效果图5-16输入当前位置导航21.在下面的单元格内单击，在属性面板中设置此单元格的背景颜色为浅黄色（色标值为 #FFFFCC）。然后插入2行1歹U,宽度为 90%,边框粗细、单元格边距和单元格间距均为。的 嵌套表格。选中此表格，在属性面板中选择对齐”
12、下拉列表中的 居中对齐”选项。在第2个单元格内输入文章内容，或直接将本书配套光盘exp4-5sucai05中的电子文档粘贴到此单元格内。22 .拍板文字内容，并设置其小标题颜色为红色（色标值为#FF0000）、粗体，完成效果如图5-17所示。23 .在具体内容表格右侧单击鼠标，按Enter键换行。选择菜单 文件”导入”表格式数据”命令，打开 导入表格数据”对话框。24.单击 数据文件”编辑框右侧的览”按钮，选择光盘素材 表格.txt文件夹。在 定界符”下拉列表中选择 逗点”选项。在 表格宽度”区选择 指定宽度”单选钮，在显示的编辑框中输入 “90；单位为 白分比”。在 单元格边距”和 单元格间
13、距”编辑框内输入在边框”编辑框内输入“1”对话框如图5-18所示。25 .单击 确定”按钮，表格导入到网图5-17制作具体内容页中，如图5-19所示。图5-18导入表格式数据”对话框喘学掰港至李毋意案廊津i/铺呜糖TH.?酎尸匕gr j i u. r图5-19导入表格式数据26 .选中比表格，在属性面板中设置表格居中对齐，在填充”编辑框内输入2 ，在 大小”下拉列表种选择 “12：拖动鼠标选择第1行的4列单元格，在属性面板中设置背景颜色为 居行色（色标值为#FFCC00）,并单击 居中对齐”按钮。完成后表格效果如图 5-20所示。27 .选择菜单 文件“ 保存命令，保存网页。按 F12在浏览器
14、中查看网页效果。如图5-21所示。iMEirmFTTU中加温门利依湍谢亡堡鹏 i- C wcfe *1*r4 lAjrtf-Liifc|.Pn，）-it t. .rtr.图5-20设置导入表格属性图5-21网页完成效果实验报告模仿1 .创建名为page05.htm的网页。2 .在网页中插入表格，在属性面板中设置网页背景颜色、对齐方式等属性。3 .在单元格内输入 时尚生活”标题，设置文字的字体、大小、颜色等属性。4 .制作栏目导航表格。5 .制作作侧 时尚家具”栏目标题列表。6 .制作网页具体内容，并设置相关属性。7 .导入表格数据，并设置相关属性。创作1 .使用表格设计一个网页的布局结构。2 .通过设置表格和单元格属性，设置网页背景颜色。3 .在单元格内添加文字内容，并在属性面板中设置大小、字体、颜色等。4 .导入Excel表格，并改变其风格于制作的网页统一。5 .参考光盘exp4, 5site05文件夹内的网页，练习表格布局设计方法，并使用表格制作出复杂的网页。具体效果如图5-22图5-25所示。图5-22表格在网页中的运用图5-23表格在网页中的运用图5-24表格在网页中的运用图5-25表格在网页中的运用