网页设计表格
网页设计之表格应用
跨行合并
在复杂的表格结构中，有的单元格在垂直方向上是跨多个单元格的，这就需要 在<td>或<th>标记中使用跨列属性rowspan，该属性可以设置跨行的数目。
下面的示例说明了跨行表格的设置过程，其源代码如下： <html> <head><title>设定跨行的表格</title> </head> <body> <table border="3" width="400" height="100" bordercolor="#336699"> <tr align="center"> <td><b>软件分类</b></td><td><b>软件名称<b></td> </tr> <tr> <td rowspan="3" align="center">网页制作软件</td> <td>Fireworks</td> </tr> <tr bordercolor="green"> <td>Dreamweaver</td> </tr> <tr> <td>Flash</td> </tr> </table> …….
行标记属性
在定义表格行之后，如果需要对行的背景、边框样式及对齐方式进行设置，可 以通过<tr>标记的相关属性设置来实现，下表给出了其常用属性的说明。 <tr>标记的常用属性 属性 height bordercolor bgcolor align valign 说 明 设置表格行的高度，其取值为数值，可缺省 设置表格内边框的颜色，可以使用英文颜色名称或十六进制颜色值 设置表格行的背景颜色，其取值与属性bordercolor相同 设置表格行文字水平对齐方式，其取值有：left（缺省），center 及right 设置表格行文字垂直对齐方式，其取值有：middle（缺省），top及 bottom
网页的版面设计使用表格布局
任务二（结合自己的网站主题设计页面）
❖ 1.新建一个网页，标题为“*****”； ❖ 2.插入表格布局版面，行数、列数
根据自己的需要来设定； ❖ 3.写上网站名称、制作导航栏； ❖ 4.给“导航栏”填充颜色； ❖ 5.在表格里插入图像。 ❖ 6.保存。
自我评价，梳理小结
❖ 本节课主要内容： ❖ 网页版面设计的步骤是：首先确定大概的页
教学目标
❖ 知识与技能：
❖ 1、认识到网页版面设计的重要性。 ❖ 2、掌握在网页中用表格来布局页面的方法。
❖ 过程与方法：
❖ 能根据
❖ 通过实践创作的过程，形成主动学习和利用信息技术、参与 信息作品创作的态度。
欣赏作品
❖ 比一比 ❖ 设问：哪个页面你更喜欢？
面布局，接着根据需求用单元格在里面细分， 最后进行图文编排。
课后拓展：搜一搜
❖ 搜索自己感兴趣的素材，以丰富自己网页的 内容。
想一想，动一动
❖ Word里是怎样插入表格的呢？
使用表格布局
❖ 插入表格： ❖ 菜单栏上的“插入” →“表格” ❖ 工具栏上的“表格”的图标
任务一
❖ 1、打开dreamweaver 新建一个网页，标题 改为“一起听音乐”；
❖ 2、插入表格：行数为4，列数为5，边框为1； ❖ 3、将第一列的第三、四行合并单元格； ❖ 4、在第五列的后面插入一列。
中职《网页设计》表格的基本属性教案
4.4.2 表格的基本属性教案一、教学课时：1课时二、教学目标：1.学生能够理解HTML5表格的基本属性。
2.学生能够正确使用表格属性，如border、cellpadding、cellspacing等，来增强表格的可读性和美观性。
3.学生能够通过实践操作加深对表格属性的理解。
三、教学重难点：1.重点：掌握表格的基本属性，如border、cellpadding、cellspacing等。
2.难点：理解不同属性对表格外观的影响，以及如何合理使用这些属性。
四、教学材料：1.电脑或平板，预装有网页浏览器和文本编辑器。
2.投影仪和屏幕，用于展示教学内容。
3.打印出来的HTML5表格属性示例代码。
五、教学过程：（一）引入（3分钟）1.开场提问：询问学生是否见过网页上的表格，它们的外观如何？2.简要介绍表格属性在网页设计中的作用，如改善表格的视觉效果等。
（二）理论讲解（10分钟）1.HTML5表格属性（5分钟）1.1 展示一个简单的表格示例，并解释表格的基本属性。
1.2 强调border属性用于设置表格边框的厚度。
1.3 介绍cellpadding属性，解释其用于设置单元格内容与边框之间的距离。
1.4 讲解cellspacing属性，解释其用于设置单元格之间的距离。
2.表格属性的实际应用（5分钟）2.1 解释如何结合使用这些属性来创建具有良好视觉效果的表格。
2.2 讨论不同属性值对表格外观的影响。
（三）示例演示（7分钟）1.通过投影仪展示一个实际的HTML5表格代码示例，并逐步解释每个属性的作用。
2.演示如何通过改变属性值来改变表格的外观。
（四）实践操作（15分钟）1.学生使用文本编辑器和浏览器，按照提供的示例代码创建自己的表格，并尝试修改表格属性。
2.教师巡回指导，解答学生在操作过程中遇到的问题。
（五）课堂互动（3分钟）1.学生展示自己的表格作品，教师提供反馈。
2.讨论学生在调整表格属性时遇到的问题和解决方案。
网页设计中表格的应用
我们在使用Dreamweaver编辑网页的时候，经常需要插入一些图象什么的，假设要插入的图象很多，按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把Dreamweaver的操作窗口变成活动窗口，以腾出空间来显示Explorer窗口，找到要插入的图象文件后，把它们一一用鼠标拖动到网页的适当部位，Dreamweaver将自动把这些图象的url添加到文件的HTML代码中，当然这里要求被拖动的图象文件必须是gif、jpg等web图象格式的文件。对于已经在网页中的图象也是一样，直接拖过来就可以了。但如果被拖动的图象上有超级链接，就不可以再使用拖动技术了，因为那时拖过来的仅仅是超级链接地址。
2、活用Format Table命令
在复杂的网页设计中，表格的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现的具体位置，从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后，我们可以使用其中的“Format Table”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标置于表格的任意一个单元格内，再选择“Command”→“Format Table”命令， 在随后出现的对话框中，从左边的列表中选择一个设计方案。按“Apply” 键来查看效果，如果不满意的话，还可以重新设置或者修改部分参数的值，如边界粗细，背景颜色等等。
10、善用快捷键
为了提高操作的效率，我们可以在Dreamweaver中使用快捷键，例如使用Ctrl-B或Ctrl-I来为文字应用黑体或斜体格式，也可以使用以下一些键盘快捷键来为选中的文本应用HTML格式:Ctrl-0: 无格式 Ctrl-T: 段落 Ctrl-1: 标题 1 Ctrl-2: 标题 2 Ctrl-3: 标题 3 Ctrl-4: 标题 4 Ctrl-5: 标题 5 Ctrl-6: 标题 6
网页制作第6单元-表格、图层、行为、时间轴
第6单元表格、图层、行为、时间轴课程目标：●掌握在网页中插入表格方法●掌握网页中细线表格、立体表格等制作方法●掌握层的使用建议学时：理论3学时，实践3学时。
6.1 表格表格在网页中是一种用途非常广泛的工具，这不仅表现在它可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素，使这些元素的水平位置、垂直位置发生细小变化，这在网页版面布局方面是非常重要的。
对于网页的排版布局来说，表格是不可或缺的工具。
作为一名网页设计人员，表格运用得熟练与否直接影响作品外观的好坏，因上掌握网页表格是十分重要的。
6.1.1 表格的插入要在页面中插入表格，可按以下步骤操作。
（1）使用菜单【插入】|【表格】，或常用工具栏的【表格】工具。
（2）弹出【表格】对话框，如图6-1所示。
图6-1 表格对话框行数：设置表格的行数。
列数：设置表格的列数表格宽度：设置表格的宽度，可使用“像素值”为单位，也可以使用“百分比”作为单位，在嵌套表格中常使用百分比。
边框粗细：设置表格线宽度，单位是像素。
单元格边距：设置表格单元格内部和表格线的距离。
单元格间距：设置单元格之间的距离。
其它可使用默认设置，按下确定后，在页面出现插入的表格，表格下方的淡绿色线条及数据为表格的宽度数据。
图6-2 插入表格示例6.1.2 设置表格属性选中表格后，属性面板变为了表格的属性面板，可以在属性面板中直接设置表格的各项属性。
图6-3 表格属性面板①表格Id：设置表格的ID号，一般可不输入。
②行、列：设置表格行数、列数。
③宽、高：设置表格的宽度、高度，有百分比和像素值两种单位可选。
④填充、间距：填充栏用于设置单元格内部和表格线的距离，间距栏用于设置单元格之间的距离，单位是像素。
⑤对齐：设置表格的对齐方式，有左对齐、居中对齐、右对齐、默认方式为左对齐。
⑥边框：设置边框的宽度，单位是像素。
⑦类：使用CSS中定义的类（见有关CSS章节）⑧列宽控制、行高控制按钮组：上行包含有清除表格宽度、将宽度转换为像素值、将宽度转换为百分比三个按钮。
利用表格制作网页
数学系09级（3）班杜强海20091022129利用表格制作网页实验目标该网页将利用设计页面的布局，制楚雄师院的页面简介。
通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。
实验过程《1》在dreamweaver中执行《文件》中的《新建》命令，创建一个HTML文档。
然后在《文件》中保存该文档。
然后在《文档》工具栏的《标题》中输入“师院首页”。
然后单击《常用》工具栏的表格按钮，插入一个3行3列的表格，图1如图1所示。
<2>选中第2行表格的第2单元格。
单击属性面板中的合并所选单元格按钮，将其合并。
然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200，<高》设为30，如右图2所示。
《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片，单击《确定》按钮，为单元的插入一幅图片，如右图3所示《4》将鼠标指针移到第1行1列单元格内，在属性面板中将《宽》设为50，《高》设为30，单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框，如图4所示。
图3 《5》在打开的< 插入鼠标经过图像>对话框中，单击《原始图像》后面的《浏览》按钮.。
在打开的对话框中选中一幅图片，单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片，如图5所示《6》设置完成后，单击《确定》按钮，然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。
然后将鼠标指针置于第一行第三列的单元格内，在《属性》面板中，为《宽》设为100，《高》。
设为50。
为《背景颜色》设为#333cc，如图6所示《7》将鼠标指针置于表格的第3行，按前面的方法，为第3行单元格也插入一幅图片。
然后将鼠标指针置图4 图2于表格的下一行，单击《常用》工具栏表格图标按钮，为文档在插入一个3行3列的表格，如图7所示。
表格布局网页课程设计
表格布局网页课程设计一、课程目标知识目标：1. 让学生掌握网页设计中的表格布局基础知识，理解表格布局的原理和用途；2. 学会运用HTML标签创建表格，设置表格的行、列和单元格属性；3. 掌握CSS样式表中与表格布局相关的属性，如边框、间距、填充等。
技能目标：1. 培养学生运用表格布局设计网页的能力，能独立完成简单的网页布局；2. 提高学生在网页设计中的问题解决能力，能够调整表格布局以适应不同设备和屏幕尺寸；3. 培养学生团队协作和沟通能力，能在小组合作中共同完成网页设计任务。
情感态度价值观目标：1. 培养学生对网页设计的兴趣和热情，激发学生的创造力和创新精神；2. 培养学生关注用户体验，注重网页布局的美观性和易用性；3. 增强学生的信息素养，使学生认识到网络技术在信息传播中的重要作用。
课程性质：本课程为信息技术课程，以实践操作为主，结合理论知识，培养学生的实际操作能力和创新思维。
学生特点：学生处于初中阶段，对新鲜事物充满好奇，具备一定的计算机操作基础，喜欢动手实践。
教学要求：教师应注重理论与实践相结合，以学生为主体，引导学生主动探究，培养其独立思考和解决问题的能力。
同时，关注学生个体差异，因材施教，确保每个学生都能在课程中取得进步。
通过课程学习，使学生能够达到上述具体的学习成果，为后续的网页设计学习打下坚实基础。
二、教学内容1. 理解表格布局的概念与作用- 表格布局的定义与分类- 表格布局在网页设计中的应用场景2. HTML表格标签的使用- <table>、<tr>、<td>、<th>等基本标签的用法- 表格行、列、单元格的属性设置3. CSS样式表中与表格布局相关的属性- 边框样式：border、border-collapse、border-spacing等- 单元格样式：padding、margin、text-align、vertical-align等- 表格背景与颜色：background-color、background-image等4. 表格布局实例分析与操作- 分析经典表格布局案例，了解其设计思路和实现方法- 学生实践操作，完成一个简单的表格布局网页5. 响应式表格布局- 介绍响应式网页设计的基本概念- 学习使用CSS媒体查询调整表格布局以适应不同屏幕尺寸6. 表格布局在实际项目中的应用- 分析实际项目需求，确定表格布局设计方案- 学生团队合作，完成一个具有实际意义的网页设计项目教学内容安排与进度：第1课时：理解表格布局的概念与作用，学习HTML表格标签的使用第2课时：CSS样式表中与表格布局相关的属性，分析表格布局实例第3课时：实践操作，完成一个简单的表格布局网页第4课时：学习响应式表格布局，调整表格布局以适应不同屏幕尺寸第5课时：团队合作，完成实际项目中的表格布局设计教学内容与教材关联性：本教学内容与教材中关于网页设计、HTML和CSS的知识点紧密相关，涵盖了表格布局的基本概念、用法和实际应用，确保了教学内容的科学性和系统性。
网页设计与制作项目四 布局表格
3.在“分类”列表框中选择“标题\编码”选项，在其右侧的“标题” 文本框中输入“幽幽博客”。
单击“属性”面板中“背景图像”选择右侧的“浏览文件”按钮，弹出 “选择图像选文件”对话框，找到要插入的图片，单击“确定”按钮 4.选择“跟踪图像”分类，在其右侧的“跟踪图像”文本框中输入 “yyou.png”，在“透明度”栏中调整透明度为“41%”，单击“确定按 钮”，如图所示。
5.选择【查看】\【表格模式】\【布局模式】命令或按“A1t+F6”组合键 切换到表格布局模式。
6.在“插入”栏的“布局”选项卡中单击“绘制布局单元格” 按钮。 7.将鼠标光标移动到如图所示的图像的左上角，按住鼠标左键 不放并向右下角拖动。
8.拖动到图像右下角时释放鼠标右键，完成布局单元格的绘制， 鼠标光标自动定位在该布局单元格中。
返回
（二）项目分析
项目活动目标：学会设置跟踪图像的方法和布局表格的 方法。
重点：在网页中设置跟踪图像的方法。 难点：布局表格的方法。
返回
（三）任务实施
为幽幽博客设置跟踪图像
【操作步骤】 1.新建网页文档并保存为“yyou.html”，按“Ctrl+j”组合键打开“页面属 性”对话框。，如下图
2.选择“外观”分类，在其右侧的“大小”下拉列表框中选择 “像素”选项，在“背景图像”文本框中输入“12”，在其后的下 拉列表框中选择“像素”选项，在“背景图像”文本框中输入 “3.jpg”， ，如图 所示
3） 再在图像透明度中设定跟踪图像的透明度。如图所示：
知识大串联：
4）在当前网页中定位各个网页元素的位置。
使用了跟踪图像的网页在用Dreamweaver编辑时不 会再显示背景图案，但当使用浏览器浏览时正好相反，跟 踪图像不见了，所见的就是经过编辑的网页（当然能够显 示背景图案）。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
插入行或列
1. 要在表格中插入新行，只要在新行要出现的地 方插入 <TR> 和 <TD>标记即可。 2. 要在表格中插入新列，需要在每行相应的位置 添加单元格<TD>。
插入行
<HTML> <HEAD> <TITLE>使用表</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <TR> <TD>数据单元格1</TD> <TD>数据单元格2</TD> <TD>数据单元格3</TD> </TR> <TR> <TD>数据单元格4</TD> <TD>数据单元格5</TD> <TD>数据单元格6</TD> </TR> <TR> <TD>新行1</TD> <TD>新行2</TD> <TD>新行3</TD> </TR> </TABLE> </BODY> </HTML>
删除行或列
1. 要删除行，需要删除相应的 <TR> 标记及该 <TR> 标记内的所有 <TD> 标记。 2. 要删除列，应将定义该列的所有 <TD> 标记 都删除。
合并单元格
1. 在 <TH> 或 <TD> 标记中使用 COLSPAN 属性，可以设置单元格所跨的列数，例如 COLSPAN=3表示跨3列。 2. 在 <TH> 或 <TD> 标记中使用 ROWSPAN 属性，可以设置单元格所跨的行数，例如 ROWSPAN=3表示跨3行。
合并单元格示例
<HTML> <HEAD> <TITLE>使用表</TITLE> </HEAD> <BODY> <TABLE BORDER = 2 BGCOLOR = lavender CELLSPACING = 2 CELLPADDING = 6> <CAPTION>创建表</CAPTION> <TH ALIGN = CENTER COLSPAN = 3>第一季度</TH> <TH ALIGN = CENTER COLSPAN = 3>第二季度</TH> <TR> <TD>一月</TD> <TD>二月</TD> <TD>三月</TD> <TD>四月</TD> <TD>五月</TD> <TD>六月</TD> </TR> <TR> <TD>1000</TD> <TD>550</TD> <TD>240</TD> <TD>1500</TD> <TD>2765</TD> <TD>1240</TD> </TR> <TR> <TD>3000</TD> <TD>2430</TD> <TD>2500</TD> <TD>1250</TD> <TD>900</TD> <TD>3400</TD> </TR> </TABLE> </BODY> </HTML>
单元格中数据的对齐方式
• Align = left • Align = center • Align =ign = middle Valign = bottom
<TD ALIGN ="right" VALIGN = "bottom"> 数据单元格 1</TD>
与表相关的标记
<TABLE> … /TABLE> <TR> … </TR> 表标记 行标记
<TD> … </TD>
<CAPTION> …<CAPTION>
单元格标记
标题标记 列标记
<TH> … </TH>
使用表的相关标记创建表
<HTML> <HEAD> <TITLE>使用表</TITLE> </HEAD> <BODY> <TABLE BORDER = 2> <CAPTION>创建表</CAPTION> <TH ALIGN = CENTER>一月</TH> <TH ALIGN = CENTER>二月</TH> <TH ALIGN = CENTER>三月</TH> <TH ALIGN = CENTER>四月</TH> <TH ALIGN = CENTER>五月</TH> <TH ALIGN = CENTER>六月</TH> <TR> <TD>1000</TD> <TD>550</TD> <TD>240</TD> <TD>1500</TD> <TD>2765</TD> <TD>1240</TD> </TR> <TR> <TD>3000</TD> <TD>2430</TD> <TD>2500</TD> <TD>1250</TD> <TD>900</TD> <TD>3400</TD> </TR> </TABLE> </BODY> </HTML>
表格与框架
---Table And Frame
Version 3.0
表格
• 用于表示多维数据
– 比如成绩单、比分表等
• 传统的网页设计中，也使用格式来进行布局 和定位
表格的结构
列
列标题 行
创建表
<TABLE>
<TR>
<TD>数据单元格1</TD> <TD>数据单元格2</TD> <TD>数据单元格3</TD> </TR> <TR> <TD>数据单元格4</TD> <TD>数据单元格5</TD> <TD>数据单元格6</TD> </TR> </TABLE>
请大家分析课本列实例
增加单元间隔和单元填充
1. CELLSPACING 属性定义单元格之间的间距 （以像素为单位）。CELLPADDING 属性定义 表的单元格边界与单元格内容之间的间距 （以 像素为单位） 。 2. <TABLE BORDER = 2 CELLSPACING = 2 CELLPADDING = 6>