Dreamweaver创建、编辑表格和单元格.doc

《Dreamweaver创建、编辑表格和单元格.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、实验5创建、编辑表格和单元格实验要求表格是用于在页面上显示表格式数据以及对文本和图形进行布局的强有力的工具。通过本试验的学习，需要熟悉掌握表格的使用方法，编辑表格和单元格的基本操作。说明表格是页面布局中极为有用的设计工具。在使用DreamweaverMX2004设计网页的过程中，大多数的情况也是使用表格来定位页面中的基本元素，以使页面中的各元素能够达到有序排列的目的。对应知识点插入表格和牵套表格表格和单元格的属性添加单元格内容实验素材普通说明文档和表格形式文档各一份。实验步骤1．启动DreamweaverMX2004程序，按

2、Cral+N键创建HTML网页，并保存网页为page05.htm。2．在“文档”面板“标题”栏输入网页名称“时尚生活”。如图5-1所示。图5-1输入网页标题　　　　说明　在文档面板中的标题设置与在“页面属性”对话框“标题/编码”区域的标题设置，是两种设置网页标题的方法。可以达到同样的效果。3．在插入面板中选“常用”项，切换到“常　　用“面板。单击“表　格”按钮按钮，或选择菜单“插入”“表　格”命令，弹出如图5-2所示的“表格”对话框。　说明如果“表格”按钮不可用，则说明当前网页编辑窗口处于模式状态，用户可单击“查看”“表格模

3、式”“标准模式”，这样“表格”按钮即可用。在“行数”和“列数”编辑框内分别输输入“１”；在“表格宽度”编辑框内输入100，选择“百分比”选项；在“边框粗细”编辑框中输入“０”，其他为默认设置。　　　　说明　在“单元格边距”编辑框中设置单元格图5-2“表格”对话框图内容与单元格边界之间的像素数，默认值为２像素；在“单元格间距”编辑框中设置为每个单元格之间的像素数，默认值为２像素；在“页眉”选项框下有四种样式，表格设置表格内标题的四种形式，分别为：无页眉、左页眉、顶部页眉和左侧、顶部都有页眉；在“标题”编辑框内输入所插入表格的标

4、题；在“对齐标题”下拉列表中选择标题对其的方式，分别为：默认、顶部、底部、左和右；在“摘要”编辑框内输入所建表格的说明，会自动以代码形式加入中，在编辑界面、浏览界面都不显示。4．单击“确定”按钮，创建表格显示在DreamweaverMX2004文档窗口中，如图5-3所示。　　5．鼠标移动到表格外边框处，出现了　

5、

6、标记，单击鼠标即可选中表格。选中菜单“窗口”“属性”命令，然后在属性面板中设置表格样式。6．在属性面板中显示了在创建表格时设置的行、列、宽等项。我们在“高”编辑框内输入“60”，在后面的单位列表图5

7、-3在文档窗口中显示的表格中选择“像素”；在“对齐”下拉列表中选择“居中对齐”；单击“背景颜色”按钮，在调色板中选择背景颜色为绿色（色标值为#A3D900），此时表格中的属性面板显示如图5-4所示。完成的表格样式如图5-5所示。图5-4表格属性面板图5-5在属性面板中设置后表格样式7．在表格内单击鼠标，光标定位在表格内。输入文字“时尚生活”，拖动鼠标选项中文字，在属性面板中设置大小为“36像素”，颜色为蓝色（色标值为＃0033FF），单击“居中对齐”按钮按钮和“粗体”按钮B，设置字体为“隶属”（关于“字体”的设置请参考试验4

8、中的介绍），完成后网页文字和属性面板如图5-6所示。图5-6编辑文字样式　说明以上是对单元格属性面板的设置，它包括了单元格内元素的设置。单元格属性面板的上半部分和文本属性面板相似，在此不再赘述。下面介绍该面板上主要按钮的功能。按钮用于合并两个或多个单元格；按钮用于拆分一个单元格；在“水平”列表中有四种对其方式：默认、、做对齐、居中对齐、右对齐、一般的单元格内容居左，标题型内容居中；在“垂直”列表中有5种对其方式：默认、顶端、居中、底部、基线、默认单元格内的文字在垂直居中显示；在“宽”和“高”编辑框内设置单元格的尺寸；勾选“不

9、换行”选项，在输入单元格内容的时候，单元格会自动扩展使得输入的文本在一条直线上显示；在“背景”区域，单击后面的文件夹图标，查找需要插入的背景背景图片，文本框中会显示图片的路径；在“背景颜色“区域可以从颜色选择器中选择单元格的背景色；在“边框”中设置单元格边框颜色，当边框设置不为０时，用户即可看到显示效果。８．在表格外侧空白处单击鼠标，选择菜单“插入”“表格”命令，在表“表格”对话框中，输入行数为“１”，列数“5‘，表格宽度为”100%“，边框粗细为“1像素”，单击“确定”按钮，在“标题”表格下方插入一表格。9．选中此表格，在

10、属性面板中设置“边框颜色”为绿色（色标值为＃009900），如图5-7所示。10．拖动鼠标选中５个单元格，在下方的单元格属性面板中“宽”编辑框内输入“20%”，在“背景颜色”调色板上选择草绿色（色标值为#CCFF66），完成后单元格效果如图5-8所示。图5-7插入1行5列表格，设置边框颜色