预览加载中，请您耐心等待几秒...

网页制作与开发教程第6章表格.ppt

预览
1/10
2/10
3/10
4/10
5/10
6/10
7/10
8/10
9/10
10/10

亲，该文档总共130页，到这已经超出免费预览范围，如果喜欢就直接下载吧～

下载提示 文本预览

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

在Dreamweaver8中创建和操纵表格使用布局单元格和表格使用表格可以清晰地显示列成表的数据，例如图6-1所示的是股票行情的数据列表。实际上表格的作用不只是显示数据，它还在网页定位上起着重要的作用。图6-1使用表格显示数据6.1使用HTML建立表格“<table>”和“</table>”标签的作用是定义一个表格，“<tr>”和“</tr>”标签的作用是定义一行，而“<td>”和“</td>”标签的作用是定义一个单元格。 6.1.1一个最简单的表格<tableborder=1> <tr> <td>单元格1</td> <td>单元格2</td> </tr> <tr> <td>单元格3</td> <td>单元格4</td></tr> <tr> <td>单元格5</td> <td>单元格6</td> </tr> </table> </center> </body> </html>图6-2表格6.1.2各种表格样式【例6-2】表格边框设置示例 <html> <head> <title>表格的边框属性</title> </head> <body> <center> <tableborder=10cellspacing=20cellpadding=30>图6-3表格的边框属性 <tr><td>单元格1</td> <td>单元格2</td> </tr> </table> </center> </body> </html>图6-3表格的边框属性属性名2．表格高宽的控制【例6-3】高度和宽度设置示例 <html> <head> <title>表格的长宽</title> </head> <body> <center><tableborder=1width=200height=100> <tr> <td>课程</td> <td>教室</td> </tr> <tr> <td>语文</td><td>东楼1-1</td> </tr> </table> </center> </body> </html>3．表格相关颜色的设置【例6-4】表格边框和背景颜色设置示例 <html> <head> <title>表格的颜色设置</title> </head> <body> <center><tableborder=3bordercolor=redbgcolor=yellow> <tr> <td>课程</td> <td>教室</td> </tr> <tr><td>语文</td> <td>东楼1-1</td> </tr> <tr> <td>英语</td> <td>西楼1-1</td></tr> </table> </center> </body> </html>图6-4表格的长宽图6-5表格的颜色设置6.2在Dreamweaver8中创建和操纵表格图6-6控制整个表格的属性图6-7控制表格一列的属性6.3实践与练习：表格制作与使用图6-8“成绩单”基本表格效果图6-9输入表格标题文字图6-10“表格”对话框图6-11设置表格图6-12生成的表格图6-13在单元格内输入数据图6-14设置单元格为“居中对齐”图6-15“成绩单”基本表格效果6.3.2练习2：制作“旅游行程表”立体表格图6-16“旅游行程表”立体表格效果图6-17在新文档中输入表格标题图6-18“表格”对话框图6-19生成的立体表格图6-20选中表格图6-21属性面板图6-22修改属性图6-23生成的立体效果图6-24对表格输入数据图6-25“旅游行程表”立体表格效果6.3.3练习3：制作“旅游行程表”双线表格图6-26“旅游行程表”双线表格效果图6-27在新文档中输入表格标题图6-28创建的新表格图6-29选取表格图6-30设置属性面板“间距”图6-31表格效果图6-32设置边框背景色图6-33设置后的属性面板图6-34双线表格图6-35“旅游行程表”双线表格效果6.3.4练习4：套用设计方案制作“会议议程表”图6-36“会议议程表”套用设计方案效果图6-37在新文档中输入表格标题图6-38插入表格图6-39向表格的单元格中输入文本图6-40选取表格图6-41“格式化表格”对话框图6-42套用设计方案图6-43在格式化对话框中设计新方案图6-44“会议议程表”套用设计方案效果6.3.5练习5：用表格制作“绿叶乡舟”网页顶部图6-45“绿叶乡舟”网页顶部效果图6-46创建的表格图6-47设置表格属行图6-48合并单元格图6-49插入图像后调节列宽图6-50拆分单元格图6-51“拆分单元格”对话框图6-52拆分单元格后的效果图6-53单击单元格背景URL按钮图6-54添加背景图图6-55输入“绿叶乡舟”图6-56“绿叶乡舟”网页顶部效果6.4布局单元格和表格为了简化使用表格来创建页面布局的过程，Dreamw