表格代码.pptVIP

表格 表格代码 table tr td单元格1/td td单元格2/td /tr tr td单元格3/td td单元格4/td /tr /table 要求：大家从现在开始就先掌握表格的XHTML代码。 表格 表格代码 table tr td单元格1/td td单元格2/td /tr tr td单元格3/td td单元格4/td /tr /table 在表格代码中，有几组tr表示表格有几行；每行有几组td就表示有几个单元格。 如上的表格代码中，在每个单元格中需要输入内容，需要给表格添加其他属性。 表格 在代码模式下给表格添加行和列 演示… 表格 表格的行的属性 表格本身具有一定的属性外，表格的行同样也具有一些属性。 height：行的高度。 bgcolor：该行的背景颜色。 align：该行中的单元格中的内容的水平对齐方式。 valign：该行中的单元格中的内容的垂直对齐方式。 表格 表格的单元格的属性 表格本身(table)和行（tr）具有一定的属性外，表格的单元格同样也具有一些属性。 width：单元格的宽度。 height：单元格的高度。 bgcolor：该单元格的背景颜色。 align：该单元格中的内容的水平对齐方式。 valign：该单元格中的内容的垂直对齐方式。 表格 练习一 时间限制：10~15分钟 表格 练习二 时间限制：10~15分钟 制作格式相同的单元格 基本操作步骤： A、插入1X1的表格 B、设置单元格格式 C、选定表格后，编辑表格行数、列数及其它属性 制作指定背景图像的导航栏 A、插入1X1的无宽度表格 B、通过代码视图或设计视图编辑单元格宽度和高度属性 宽度 = 图像宽度 – 2 * 单元格边距 高度 = 图像高度 – 2 * 单元格边距 C、编辑单元格背景图像属性 D、选定表格，通过属性面板编辑表格列数属性 E、单击表格属性面板用像素表示表格宽度按钮 练习 制作指定背景图像的导航栏 表格 练习三 时间限制：10~15分钟 表格 显示/隐藏表格框线 菜单：View--Visual Aids[可视元素]--Table Borders 表格 选定表格 □ 单击表格框线 □拖拽 □右键菜单 □表格宽度旁小箭头 □ 将光标置于任意单元格，然后单击标记选择器内table标记 表格 单元格的合并与拆分 合并单元格：选中要合并的多个单元格，按Ctrl + Alt + M，或点属性面板的 注意代码的变化。（colspan与rowspan） 拆分单元格：选中要拆分的单元格，按Ctrl + Alt + S，或点属性面板的 表格 单元格的合并练习 要求尽量能手写代码，制作如图所示的表格，仔细理解代码。 练习 根据给定素材实现如下效果： 表格的嵌套 表格的嵌套经常用来作为页面的排版 实现如图示例图片所示的页面效果。 作业 1、运用所学知识，快速设计一个简单的页面，页面设计成如图“按此图设计网页.jpg”所示。 2、页面中的文字自己随便添加，页面的宽为778px。 3、页面中要用到的图片素材在images中。 4、记录所遇到的问题，向同学或老师请教。 5、时间：20分钟。 网站制作中经常遇到的问题 清理表格/单元格存在的不合理空白 □ 清理表格宽度/高度[通过表格属性面板实现] □ 清除行/单元格的宽度/高度 □ 查看源代码中是否存在p、br/等标记 □ 查看源代码的标记是否连续 网页元素的标题在设计视图中以黄色显示的原因 ——标记属性重复 网页元素在设计视图不能正确显示 ——标记不完整 综合练习 1、清华大学校园概括页面设计。 课堂演示 学生练习 2、课后作业：苍南新闻网内页设计 路径 类型 □ 绝对路径 □ 相对路径 □ 根相对路径 相对路径 相对路径：从当前文档开始的路径； 如果当前文档和目标文档位置平行，则直接书写目标文档全称即可； 如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称； 如果当前文档所在文件夹和目标文档位置平行，则书写为 ../目标文档全称； 提示： ..表示返回上一级对象 根据地址栏中的地栏及文档的相对路径推算文档网络绝对路径 如果目标文档的路径表现形式为“目标文档全称”，则直接用目标文档全称代替地址栏中当前文档的全称即可 如果目标文档的路径表现形式为“文件夹名称/目标文档全称” ，则用“文件夹名称/目标文档全称”代替地址栏中当前文档的全称即可 如果目标文档