dreamweaver第八章 表格.docx
- 文档编号:17130945
- 上传时间:2023-07-22
- 格式:DOCX
- 页数:16
- 大小:24.46KB
dreamweaver第八章 表格.docx
《dreamweaver第八章 表格.docx》由会员分享,可在线阅读,更多相关《dreamweaver第八章 表格.docx(16页珍藏版)》请在冰点文库上搜索。
dreamweaver第八章表格
使用表格可以清晰地显示列成表的数据,例如股票行情的数据列表。
实际上表格的作用不只是显示数据,它还在网页定位上起着重要的作用。
8.1 使用HTML建立表格
表格的建立将利用3个最基本的HTML标签来完成,它们分别是
标签。 建立一个最基本的表格,必须包含一组 | |
标签,这也是最简单的单元格表格。 |
8.1.1 一个最简单的表格
观察下面的代码。
注意代码中以粗体显示的语句。
这就是一个最基本的表格,它只有3行2列,下面就详细讲解一下这3个标签。
标签: 它用于标识表格的一列,也就是建立一个单元格,它必须放在 | ||||||
就表示这行里有多少列或是说有多少个单元格。
8.1.2 各种表格样式 在上一节中介绍了表格的建立方法,但这样一个表格样式比较单一,在实际应用中还可以利用相关的HTML标签来设置表格的各种样式。 下面就一一进行介绍。 1.表格边框的设置 现在来了解一下
注意代码中以粗体显示的语句。 控制表格的边框共有3个属性,分别是border、cellspacing和cellpadding属性。 2.表格高宽的控制 对于表格的高、宽度也是通过height和width两个属性来控制的。
课程 |
教室 |
语文 |
东楼1-1 |
|
注意代码中以粗体显示的语句。
两者的语法结构为
注意,这里的高宽设置是整个表格的高宽设置。
3.表格相关颜色的设置
下面介绍表格的边框和背景颜色的设置。
注意代码中以粗体显示的语句。
表格的边框颜色是通过bordercolor属性来设置的,
而表格的背景颜色是通过bgcolor属性来设置的,
8.2 在Dreamweaver中创建和操纵表格
有了上面的基础,再学习使用Dreamweaver制作表格就很容易了。
选择“插入”菜单的“表格”命令,在出现的对话框中指定表格的行数、列数、列宽和边线宽度,这时文档窗口的文本光标处会出现一个空白表格。
如果开始时不能确定这些参数,那么也可以使用默认值,后面还可以用属性面板来修改表格的外观。
8.2.1 在属性面板中控制表格
Dreamweaver对表格的控制非常灵活。
属性面板可以分别控制整个表格、表格的一行、表格的一列或一个单元格。
属性面板的控制对象由选中的对象决定。
当把鼠标移到表格的四周时,鼠标指针的形状变为十字形,这时单击鼠标左键,表格四周出现一个框,表示选中整个表格。
这时控制面板各项参数的作用如下。
·行和列:
设定表格的行数和列数。
·宽和高:
设定表格宽度和高度。
可以通过浏览器窗口百分比或使用绝对像素数来定义。
例如设定宽度为60%,即表格的宽度为浏览器窗口宽度的60%,如果访问者使用640像素宽的浏览器窗口,则表格宽度为384像素。
当浏览器窗口大小变化时,表格的宽度也随之变化。
如果设置表格宽度为400像素,那么无论浏览器窗口的大小为多少,表格的宽度都不会变。
·填充:
设定单元格中的内容与单元格边线之间的距离,缺省值为1。
·间距:
设定单元格之间的距离,缺省值为2。
·对齐:
设定表格的对齐方式,居左、居中或居右。
·和:
清除行高和列宽。
·:
根据当前值,把列宽转换为绝对像素数。
·:
根据当前值,把列宽转换为窗口宽度的百分比。
·:
根据当前值,把行高转换为绝对像素数。
·:
根据当前值,把行高转换为窗口高度的百分比。
·边框:
设定表格外框的宽度。
如果设置为0,就可以选择菜单“查看//可视化助理→表格边框”命令观察表格的外框。
·背景颜色:
设定表格的背景色。
·边框颜色:
设定表格框线的颜色。
·背景图像:
设定表格的背景图片。
选取整个表格最方便的方法是把鼠标移到表格右边界的外侧,按下鼠标并向左拖拽,可以快速地选中整个表格。
当把鼠标移到上边框附近,鼠标指针的形状变为向下的箭头时,单击鼠标左键,可以选中表格的一列。
当把鼠标移到左边框附近,鼠标指针的形状变为向右的箭头时,单击鼠标左键,可以选中表格的一行,这时的属性面板与列属性面板基本相同。
这里介绍一个很有用的按钮,它可以把一列或一行单元格合并成一个。
实际上,只要按住鼠标,划过几个相连的单元格,再释放鼠标,就可以选中这几个单元格,然后单击按钮,就可以把选中的单元格合并成一个单元格。
当选中一个单元格时,可以拆分单元格。
单击按钮,在出现的对话框中选择是沿横向还是沿纵向拆分单元格,并输入拆分出的单元格数。
经过调整各个属性,把表格调整为我们需要的样子。
在单元格中可以放置文字或图片,并且可以设置文本和图片的格式。
8.2.2 实践与练习:
制作“成绩单”表格
本例着重练习在Dreamweaver中创建一个基本表格,其中会讲解创建表格时对行数、列数以及宽度等表格属性的设置,以及向表格里添加文本内容。
(1)首先运行程序Dreamweaver8,选择菜单栏“文件→新建”命令,创建新文档。
(2)创建好新文档之后,在文档窗口内输入表格的标题,这里输入“成绩单”,在属性面板中将其字体设为粗体并居中对齐,然后在文本的后面按键盘上“Enter”键以便插入表格。
提示:
在新建的文档中输入文字后,在属性面板中将文本设为居中对齐时,文本行会出现虚线,这些虚线是DIV标签。
如果多输入一些段落文本后再进行居中对齐,就不会出现DIV标签。
(3)选择菜单栏“插入→表格”命令,弹出“表格”对话框。
(4)在“表格大小”里设置行数和列数及表格宽度。
这里设置为“行数”5,“列数”6,“表格宽度”为300,单位设为“像素”。
单击“确定”接钮,一个5行6列的表格就生成了。
(5)表格创建好以后,开始对这表格输出数据。
在第一行的第一个单元格内单击鼠标左键,确认文本光标在单元格内闪烁,从键盘输入“姓名”。
在第一行的第二个单元格内单击鼠标左键或直接按键盘上的“→”键,在第二个单元格内输入“数学”。
(6)依次在各个单元格里输入数据。
输入时,按键盘上“↓”键文本光标会下移到下一行的同一列单元格,按“←”键文本光标会左移一个单元格,按“↑”键会上移到上一行的同一列单元格。
(7)输入完成后,可以根据需要对在属性面板中对单元格进行排列,在“水平”后面的下拉菜单中设置为“居中对齐”,然后按“Ctrl+S”保存文档,预览网页效果。
8.2.3 实践与练习:
制作“旅游行程表”立体表格
本例着重练习在Dreamweaver中创建一个“旅游行程表”,通过对表格边框的属性设置来创建一个有立体感的表格。
(1)首先运行程序Dreamweaver8,选择菜单栏“文件→新建”命令,创建新文档。
(2)创建好新文档之后,在文档窗口输入表格标题,这里输入“旅游行程表”,在属性面板中将文本的字体设为粗体并居中对齐。
提示:
在新建的文档中输入文字后,在属性面板中将文设为居中对齐时,文本行会出现显线,如图8.17所示,这虚线是DIV标签。
如果多输入些段落文后再进行居中对齐,就不会出现DIV标签。
(3)选择菜单栏“插入→表格”命令,或按键盘组合键“Ctrl+Alt+T”,或单击“常规”工具面板上的“表格”按钮,弹出“表格”对话框。
(4)在“表格”对话框的“表格大小”里设置行数和列数及表格宽度。
这里设置“行数为”4,“列数”为3,“表格宽度”为300,单位设为“像素”,“边框粗细”1。
单击“确定”接钮,一个4行3列的有立体感表格就生成了。
(5)鼠标在表格左边单击,并按住鼠标左键向右拖动,选中表格。
此时属性面板就显示出该表格的属性。
(6)修改属性面板上的“填充”、“间距”、“边框”的数值,就可以改变表格的立体程度效果,如将“填充”、“间距”、“边框”的数值都设为8。
(7)通过第(6)步的操作修改表格属性后立体效果过于强烈,需要再次修改相关数值,得到适当的立体效果后,开始对这表格输出数据。
(8)在第一行的第一个单元格内单击鼠标左键,确认文本光标在单元格内闪烁,从键盘输入“日期”。
按键盘上的“→”键,在第二个单元格内输入“上午”,第三单元格输入“下午”。
(9)输入完后,可以根据需要对文本进行一些编辑,如颜色设置、居中等。
然后按菜单“文件→保存”命令,保存文档,预览网页效果。
8.2.4 实践与练习:
制作“旅游行程表”双线表格
本例着重练习在Dreamweaver中创建一个“旅游行程表”,通过对表格的边框及边框颜色的设置来创建双线表格。
(1)首先运行程序Dreamweaver8,选择菜单栏“文件→新建”命令,创建新文档。
(2)创建好新文档之后,在文档窗口内单击鼠标左键,确认文本光标在文档区域内闪烁。
接着就可以直接在文档区域内输入相关的文字信息。
这里输入“旅游行程表”作为表头,设字体为粗体、颜色为红色。
(3)选择菜单栏“插入→表格”命令,插入一个“行数”为4、“列数”为3、“表格宽度”为300,单位设为“像素”、“边框粗细”为1,单击“确定”接钮。
(4)此时鼠标在表格右边闪烁,按鼠标向左拖动,选中表格。
此时属性面板显示出该表格的属性。
(5)单击属性面板中“间距”后的小方框,输入数字“2”,“边框”保持默认的“1”,此时“边框颜色”未设置。
(6)单击属性面板中“边框颜色”后的小色块,弹出颜色编辑器,吸取边框颜色,如图8.30所示。
吸取颜色后边框背景色被设为桔黄色。
(7)完成(5)(6)步操作后,表格效果就成了双线表格效果。
至此双线表格制作完了。
(8)在第一行的第一个单元格内单击鼠标左键,确认文本光标在单元格内闪烁,输入“日期”。
按键盘上的“Tab”键,文本光标就会跳到下一个单元格,依次在各单元格中输入数据。
(9)输入完后,可以根据需要对输入文字的相关属性进行一些编辑。
然后选择菜单“文件→保存”命令,保存文档,预览网页效果。
8.2.5 实践与练习:
制作“图书信息表”单线表格
本例着重练习在Dreamweaver中创建一个“图书信息表”,通过对表格的间距、表格背景色及单元格背景色的设置来创建单线表格。
(1)首先运行程序Dreamweaver8,选择菜单栏“文件→新建”命令,创建新文档。
(2)创建好新文档之后,输入“图书信息表”作为表头,在属性面板中设字体颜色为桔黄色并居中对齐,单击键盘上的“Enter”键,以便插入表格。
(3)选择菜单栏“插入→表格”命令,插入一个“行数”4、“列数”4、“表格宽度”为300,单位设为“像素”,单击“确定”接钮,创建一表格。
(4)此时鼠标在表格右边闪烁,按鼠标左键拖动,选中表格。
单击属性面板中“间距”右边的小方框,输入数字“1”,“边框”右边的小方框内输入数字“0”。
(5)单击属性面板中“背景颜色”右边的小色块,此时会弹出颜色编辑器,在颜色编辑器中选取颜色。
(6)选取颜色后表格的背景色被设为桔黄色。
(7)在第一行的第一个单元格内单击鼠标左键,确认文本光标在单元格内闪烁,按住鼠标向表格的右下角拖动,直到所有的单元格被选中。
(8)选中所有单元格后松开鼠标,在属性面板上单击“背景颜色”后的小方块。
在颜色编辑器中选取白色,将单元格的背景颜色设为白色。
(9)单元格的背景颜色设为白色后,表格就成了单线表格了。
单线的宽度由属性面板中“间距”右边的小方框内输入的数字决定。
(10)在第一行的第一个单元格内单击鼠标左键,从键盘输入“书名”。
按键盘上的“Tab”键,在第二个单元格里输入“编号”,依次输入各单元格的数据。
(11)输入完后,可以根据需要对输入文字进行一些编辑。
然后按菜单“文件→保存”命令,保存文档,预览网页效果。
8.2.6实践与练习:
制作“会议议程表”无线表格
本例着重练习在Dreamweaver中创建一个“会议议程表”,通过对表格的行列的选取、列的选取、单元格的选取,对单元格内的文本进行属性设置。
(1)首先运行程序Dreamweaver8,选择菜单栏“文件→新建”命令,创建新文档。
(2)创建好新文档之后,输入“会议议程表”作为表头,在属性面板中设字体颜色为红色、粗体并居中对齐。
(3)选择菜单栏“插入→表格”命令,插入一个“行数”3、“列数”5、“表格宽度”为580、单位设为“像素”,单击“确定”接钮,创建一表格。
(4)此时鼠标在表格右边闪烁,按住鼠标向左拖动选取整个表格,查看表格的属性。
此时属性面板中“填充”、“间距”、“边框”右边的小方框内都是空白无任何数字。
如果有数字,选中后按键盘上的“Delete”键将其删除,这样的表格就是无线表格。
(5)无线表格创建后,在第一行的第一个单元格内单击鼠标左键,输入“时间”。
按键盘上的“Tab”键,依次输入各单元格的文本。
(6)将鼠标移到表格第一行的左边,使鼠标变成向右指示的箭头形状,并且第一行的所有单元格都变成红线格。
(7)然后单击鼠标左键,整个表格的第一行就被选中了,这一行的所有单元格变成了黑线格。
(8)选中第一行后,在属性面板中设置字体为粗体、居中对齐、字体颜色为桔红色,参考值是“#FF6600”。
提示:
对表格第一行设置字体属性后,单元格带虚线了,这是DIV标签。
(9)单击第二行第二列的单元格,按住鼠标向表格的右下角拖动鼠标,选中表格的第二行第二列开始的所有单元格。
(10)在属性面板中设置居中对齐。
然后按菜单“文件→保存”命令,保存文档,预览网页效果。
8.2.7实践与练习:
套用设计方案制作“会议议程表”
本例着重练习在Dreamweaver中创建一个“会议议程表”,通过对表格执行“格式化表格”命令,套用设计方案。
(1)首先运行程序Dreamweaver8,选择菜单栏“文件→新建”命令,创建新文档。
(2)创建好新文档之后,输入“会议议程表”作为表头,在属性面板中设字体颜色为深蓝色并居中对齐。
(3)选择菜单栏“插入→表格”命令,插入一个“行数”为4,“列数”为5,“表格宽度”为580,单位设为“像素”,单击“确定”接钮,创建一个表格。
(4)在第一行的第一个单元格内单击鼠标左键,输入“时间”。
按键盘上的“Tab”键,依次输入各单元格的文本。
(5)将鼠标移到表格的外边线上,鼠标箭头变成向左向右指示形,表格外边线变成红线。
此时单击鼠标左键选中表格。
(6)选择菜单栏“命令→格式化表格”命令,弹出格式化表格对话框。
(7)在格式列表里选择已存在的设计方案,点击“确定”按钮,套用设计方案,从而格式化被选中的表格。
(8)如果对设计方案不满意,可以在格式化对话框中进行修改。
在这里修改“行颜色”,“第一种”设为桔黄色,第二种设为浅黄色;修改“第一行”,“对齐”为居中对齐,“文字样式”为粗体,“背景色”设为深紫色;“最左列”的“对齐”设为居中对齐,点击“确定”按钮应用新设计的方案。
(9)然后选择菜单栏“文件→保存”命令,保存文档,预览网页效果。
8.2.8 实践与练习:
用表格制作“绿叶乡舟”网页顶部
本例着重练习在Dreamweaver中创建复杂的表格。
主要通过拆分单元格,合并单元格,插入行,插入列等操作,制作一个复杂的表格。
(1)首先运行程序Dreamweaver8,选择菜单栏“文件→新建”命令,创建新文档。
(2))选择菜单栏“插入→表格”命令,创建一个3行3列,表格宽度为775的表格。
(3)选中表格,在属性面板上的“填充”、“间距”、“边框”右边方框内都输入“0”,“对齐”设为“居中对齐”。
(4)先选中表格第一行的所有单元格,单击属性面板上的“行”下方的“合并所有单元格,使用跨度”按钮,合并被选中的单元格。
(5选中合并后的单元格,在属性面面中将单元格背景色设为黄绿色。
(6)在第二行第一列单元格中单击鼠标左键,选择菜单栏“插入→图像”命令,插入一张图片,读者可以打开光盘文件:
CD-Rom\CH08\8.2.8\logotran.gif。
插入图片后,第一列变得很宽了,此时将鼠标放到第一列的右边线上,鼠标变成了双向箭头。
按住鼠标向左拉边线,直到拉不动为止。
(7)单击第二行的第三列单元格,在属性面板中设“宽”为100、“背景色”为绿色。
然后单击属性面板上的“拆分单元格为行或列”按钮。
(8)此时弹出“拆分单元格”对话框,点击“行”前的小圆,“行数”为“5”,点击“确定”按扭。
(9)通过上一步的操作,就将该单元格拆成五行了,将拆分后的第1行和第5行的行高设为“5”,在中间三行中输入文字,并设置CSS样式。
CSS样式的具体设置方法在实例“在‘计算机发展史’文档中设置使用CSS”中详细讲解了,这里就不具体讲解了。
(10)选中“返回首页”文本,在属性面板中,单击“浏览文件”按钮,在弹出的“选择文件”对话框中选择链接文件。
同样的方法为“联系我们”、“加入收藏”文本创建链接。
(11)单击第二行的第二列单元格,选中该单元格,单击属性面板上“背景”右边的“单元格背景URL”按钮。
(12)此时弹出“选择图像源文件”对话框,在对话框的“查找范围”列表里找到背景图片,读者可以打开光盘文件:
CD-Rom\CH08\8.2.8\bg.jpg。
点击“确定”按钮。
这就为单元格添加了背景图。
(13)添加背景图后,在第二行的第二列单元格输入文本“绿叶乡舟”。
分别对“绿叶乡舟”和“”设置并应用CSS样式。
(14)现在感觉这个表格的第三行没什么意义,选中第三行所有单元格,按键盘上“Delete”键,删除该行。
(15)然后选择菜单栏"文件→保存"命令,保存文档,预览网页效果。
8.2.9 实践与练习:
制作自动伸缩表格页面
本例着重练习在Dreamweaver中创建自动伸缩表格,使表格能随页面窗口的拉大而放大,能随页面窗口的缩小而缩小,从而使页面能适配窗口,并使用这个自动伸缩表格布局制作一个简单的网页。
(1)首先运行程序Dreamweaver8,选择菜单栏“文件→新建”命令,创建新文档。
(2))选择菜单栏“插入→表格”命令,创建一个3行3列、表格宽度为100%的表格。
(3)选中表格,在属性面板的“间距”右边方框内输入“0”。
选中第一行第一列单元格,在属性面板上“高”右边的方框内输入“60”。
(4)选中第二行,在属性面板上“高”右边的方框为输入“400”。
同样的选中第三行,在属性面板上“高”右边的方框内输入“30”。
(5)表格的行高都设置好了,为了查看效果,分别选中第一行和第三行,在属性面板上“背景颜色”的后设背景色为“#996633”;选中,在属性面板上“背景色”后设背景色“#996633”。
(6)按菜单"文件→保存"命令,保存文档,预览网页效果,向左右拉动窗口就能看了表格的自动伸缩效果了。
(7)再回到Dreamweaver8的编辑环境中来,继续对文档的操作,制作一个简单的网页。
选中第一行的所有单元格,单击属性面板上的“行”下方的“合并所有单元格,使用跨度”按钮,合并被选中的单元格。
(8)单击第一行合并后的单元格,在属性面板上单击“垂直”右边的下拉菜单,在垂直列表中选“居中”。
使单元格中的内容在垂直方向居中。
(9)从键盘上输入文字作为网页头,这里输入“京剧名角”,选中输入的文本,在属性面板上设置“字体”、“大小”、“文本颜色”、“文本缩进”等,这些都根据需要来设定。
(10)单击第二行第二列的单元格,选择菜单栏“插入→图像”命令,插入一张图片,读者可以打开光盘文件:
CD-Rom\CH08\8.2.9\ibbdd.jpg,插入一张“京剧名角”
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- dreamweaver第八章 表格 dreamweaver 第八