下载文档原格式
实验五：制作包含列表和表格的网页一、实验任务：1、掌握正确的在网页中添加项目列表和表格，合理设置表格属性，能够根据网页版面布局的需要，合理运用表格进行布局。
2、完成【任务5-4】。
3、根据任务5-4的制作，观察和说明表格边框、单元格边距、单元格间距之间的差别。
二、实验步骤：1.创建站点单元5，并创建文件夹“task05-4”在该文件夹中创建子文件夹“CSS”。
在文件夹“task05-4”中创建网页文档0504.html。
2.通过表格对话框插入表格1，在表格对话框设置行数、列数、表格宽度、宽度的像素、边框粗细的大小等。
代码示图3.设置表格1的属性。
4.设置表格1单元格的背景图片。
5.设置表格1单元格的水平对齐方式为“居中对齐”和垂直方式为“居中”，并选不换行复选框。
在设置高和像素。
6.在表格1的第一行和第二行输入所需的文本。
7.将第二行的文字设置为滚动效果。
8.插入一个两行三列表格2，并设置宽、边框、间距、边距等属性。
9.将表格二的对齐方式设置为居中对齐。
10.将表格二的第一列宽度设置为“405像素”、第二列宽度设置为“360像素”、第三列宽度设置为“115像素”。
11.将表格二第一行的高设置为“28像素”。
12.将表格二的第一列的两个表格合并，将表格二第三列的两个表格合并。
13.在表格二的第一列的单元格中插入图像“001.jpg”。
14.设置所插入的图像的属性：“宽”为“405”、“高”为“300”、“替换”文本为“千岛湖全貌”。
15.设置表格二第二列上方单元格的背景图像、水平对齐方式、垂直对齐方式、输入文本及文字大小、颜色、字形、样式。
16.在第二列下方单元格中设置属性，输入文本并设置其属性。
17.在表格二的第三列单元格插入一个二行一列的嵌套表格并设置其属性。
18.在嵌套表格中插入两幅图像，并设置其属性。
19插入一个一行一列的表格三。
20.拆分单元格。
21.设置单元格属性。
22.输入文本。
23.插入版权字符。
项目4 使用表格布局制作页面一、教学建议该项目主要介绍表格布局在网页中的应用，学生除了掌握利用表格进行简单的网页布局，还需要学会使用嵌套表格制作复杂的网页布局。
该项目理论知识详尽，要求结合上机实践操作，巩固学生的理论知识，提高学生的学习兴趣，以“项目总结”的形式小结所学知识，加深学生的印象，增强学习效果。
以掌握实际应用能力为导向，建议教师在教学的过程中辅导好项目后面“技能巩固”的操作题，让学生在实际操作的过程中提高专业技能，达到理论实践一体化的效果，以便学生更好更牢固的掌握知识点，学以致用。
二、教学简案【组织教学】检查学生出勤情况，做好学生考勤记录。
强调上课课堂纪律，活跃互动教学气氛。
【课题导入】制作一个页面清晰，层级分明的静态网页，首先需要进行网页布局。
使用表格可以给网页搭建布局框架，然后我们就可以往里面填内容了。
这样做出来的成品才有整体感，不会杂乱无章。
所以，一个网页只有在布局好页面的基础上，添加各种网页元素才会得心应手，事半功倍。
Dreamweaver提供了多种网页页面布局的方式，其中表格布局是应用最为广泛并最为简单易学的。
表格既可以作为网页元素使用，又可以用来布局网页，功能十分全面。
【技能训练】（上机实训：4课时）一、目标任务任务一：使用表格布局制作简单的页面。
任务二：使用嵌套表格制作比较复杂的页面。
二、项目实训1.学生根据该项目的任务要求进行上机操作，教师在机房巡回指导。
2.完成一个任务后，教师引导学生进行总结，然后进行下一个任务。
3.在完成该项目所有任务的基础上，教师结合项目后“技能巩固”的操作题及光盘中的实例题，布置课后上机题。
【布置作业】1.教材项目4后面的“自我测评”。
div嵌套table例子【原创版】目录1.嵌套表格的定义与作用2.div 嵌套 table 的实现方法3.div 嵌套 table 的实际应用4.嵌套表格的美化与优化5.总结正文一、嵌套表格的定义与作用嵌套表格是指在一个表格（table）元素内部，包含有另一个表格元素。
这种结构在网页设计中十分常见，主要用于展示复杂的数据和信息，便于用户理解和阅读。
通过嵌套表格，我们可以将数据分组，提高页面的布局和视觉效果。
二、div 嵌套 table 的实现方法在 HTML 中，我们可以使用 div 元素包裹 table 元素来实现嵌套表格。
具体做法如下：```html<div><table><!-- 表头 --><thead><tr><th>表头 1</th><th>表头 2</th></tr></thead><!-- 表格主体 --><tbody><tr><td>数据 1</td><td>数据 2</td></tr><!-- 更多数据行 --></tbody></table></div>```三、div 嵌套 table 的实际应用div 嵌套 table 在实际应用中可以呈现多种形式。
例如，在电子商务网站中，我们可以使用嵌套表格展示商品的详细信息，包括商品名称、价格、库存等。
在数据分析报告中，嵌套表格可以帮助我们清晰地展示数据，便于读者对比和分析。
四、嵌套表格的美化与优化为了提高用户体验，我们可以对嵌套表格进行美化和优化。
首先，可以为表格添加合适的边框和背景色，使表格看起来更加美观。
其次，可以使用 CSS 样式对表格内的文字进行调整，如更改字体、字号和颜色等。
dw中表格套表格真么更形象的表达
摘要：
1.DW 中表格套表格的概念
2.表格套表格的实际应用场景
3.如何更形象地表达表格套表格
正文：
在DW（Dreamweaver）中，表格套表格是一种常见的网页布局方式。
简单来说，表格套表格就是将一个表格嵌套在另一个表格中，从而实现更复杂的页面布局。
这种布局方式在实际应用中十分灵活，可以满足各种设计需求。
表格套表格的实际应用场景有很多，例如，在设计一个网页时，我们需要在一个大的容器内放置多个独立的内容区域，这时候就可以使用表格套表格的方式来实现。
这样做不仅可以让页面结构更清晰，还可以使页面的视觉效果更加美观。
然而，在实际操作中，如何更形象地表达表格套表格呢？我们可以将表格套表格比喻为“俄罗斯套娃”。
就像俄罗斯套娃一样，表格套表格是由一个表格“容器”和多个表格“子容器”组成的。
这些子容器可以依次放入容器中，形成一个具有层次感的布局。
在DW 中，我们可以通过以下步骤来创建表格套表格：
1.创建一个表格作为容器，设置好宽度和高度；
2.在容器表格内添加新的表格，作为子容器；
3.根据需要，可以继续在子容器内添加更多的表格；
4.通过调整各个表格的宽度和高度，来实现套表格的布局效果。
![DW网页布局[表格_布局表格]](https://uimg.taocdn.com/bdd8e244eef9aef8941ea76e58fafab068dc4460.webp)
嵌套表格是指在一个表格中嵌套另一个表格，这种表格结构可以帮助我们更清晰地呈现复杂的数据信息。
在实际工作和学习中，嵌套表格常常被用来展示多个维度的数据，或者呈现数据的层次结构。
本文将介绍element表格中如何嵌套表格，并探讨其使用方法和注意事项。
一、element表格简介1. element表格是一种常用的前端UI框架，提供了丰富的表格组件和功能，适用于各种数据展示的场景。
2. element表格具有灵活的配置选项和丰富的表格功能，可以满足不同数据展示需求。
二、element表格嵌套表格的使用方法1. 在element表格中嵌套表格，需要使用element表格组件提供的嵌套表格功能。
2. 在表格的某一列中，使用嵌套表格的方式，可以将子表格嵌套在父表格中，形成一种层级关系。
三、element表格嵌套表格的代码实现1. 在表格的columns配置中，需要为需要嵌套表格的列配置scopedSlots属性，并在对应的slot中使用嵌套表格组件。
2. 在嵌套表格组件中，需要传入子表格的数据和子表格的列配置。
四、element表格嵌套表格的注意事项1. 在使用嵌套表格时，需要注意父表格和子表格的数据关联问题，确保子表格的数据与父表格的数据对应。
2. 在配置嵌套表格时，需要考虑表格的层级结构和展示效果，避免嵌套过深或嵌套过多导致页面混乱。
五、element表格嵌套表格的实际应用场景1. 嵌套表格适合用于展示具有层级关系的数据，比如组织架构、商品分类等。
2. 嵌套表格也适合用于展示具有多维度关联的数据，比如订单信息和订单明细等。
六、总结在实际的数据展示和分析中，嵌套表格是一种常用且有效的数据展示方式。
通过element表格提供的嵌套表格功能，我们可以灵活地配置和展示复杂的数据信息，帮助用户更好地理解和分析数据。
在使用嵌套表格时，我们需要注意配置和展示效果，并根据实际场景合理地使用嵌套表格。
希望本文可以帮助大家更好地理解和应用element表格中的嵌套表格功能。
Element Table嵌套表格介绍在HTML中，我们经常使用表格来展示数据。
而嵌套表格则是指可以在表格的单元格中再嵌套另一个表格。
这种嵌套结构可以帮助我们更加灵活地组织和展示数据，提高网页的可读性和美观度。
本文将详细介绍如何使用嵌套表格，并提供一些实用的示例。
使用嵌套表格的场景嵌套表格通常用于以下几种场景： 1. 展示复杂的数据关系：当数据存在多层次的关系时，使用嵌套表格可以更好地将各个层级的数据展示出来，并帮助读者更好地理解数据之间的关联。
2. 组织详细的信息：当需要展示一些详细的信息时，使用嵌套表格可以将信息细分并逐级展开，提供更多的细节内容。
3. 嵌入其他表格：有时候，我们可能需要在一个表格中插入另一个表格，以展示更多的信息。
嵌套表格可以帮助我们实现这一需求。
嵌套表格的使用方法要创建嵌套表格，我们可以使用HTML中的<table>标签。
首先，我们需要创建一个外层的表格，用于容纳内层的表格。
然后，在外层表格的单元格中创建另一个表格。
以下是一个简单的示例：<table border="1"><tr><td>外层表格</td><td><table><tr><td>内层表格</td></tr></table></td></tr></table>在这个示例中，我们创建了一个外层表格，其中包含两个单元格。
第二个单元格中又嵌套了一个内层表格，内层表格只有一个单元格。
通过这种方式，我们就创建了一个嵌套表格的结构。
嵌套表格示例下面是一个示例，展示了如何使用嵌套表格来展示学生的成绩表：<table border="1"><tr><th>学生姓名</th><th>语文</th><th>数学</th><th>英语</th></tr><tr><td>张三</td><td>90</td><td>95</td><td>85</td></tr><tr><td>李四</td><td>95</td><td>92</td><td>87</td></tr><tr><td>王五</td><td>85</td><td>90</td><td>92</td></tr><tr><td rowspan="3">班级平均分</td><td>90</td><td>92.3</td><td>88</td></tr><tr><td colspan="3"><table><tr><th>科目</th><th>平均分</th></tr><tr><td>语文</td><td>90</td></tr><tr><td>数学</td><td>94</td></tr><tr><td>英语</td><td>89</td></tr></table></td></tr></table>在这个示例中，我们首先创建了一个外层表格，用于展示学生的成绩。
用表格为网页布局教材分析：本节内容为八年级上册第三单元《网上安家》中的第五课，学生在前面学过了网站内容设计、配色方案等，制定了建站计划，有了明确的分工，并为网站建设搜集了部分素材。
教材通过页面布局来引入本课的主要任务，通过表格的建立、单元格的合并与拆分来达到网页布局的目的。
学生分析：学生通过前四节课的学习，初步了解网站建设的一般流程，并对网页的构成有了一个大致的了解。
七年级时已学过利用Word进行排版，对于本节FrontPage使用表格布局具有一定的知识迁移性。
设计思路：为什么要用表格来布局？FrontPage中的表格与Word中的表格操作有什么联系？整个教学过程围绕这二个问题展开，把表格知识点从Word中迁移过来。
教学目标：知识与技能：了解用表格排版网页的作用；掌握网页中表格的制作方法、表格属性的设置以及单元格的修饰与编辑；能够根据网页设计内容较为合理地布局表格结构。
过程与方法：通过网页结构拆分这一活动，让学生在学习中发现问题、探究问题，培养学生学会学习、驾驭学习的能力，能够用表格布局网页，进一步理解表格的作用。
情感态度与价值观：通过运用表格布局网页解决网页版面杂乱的问题，培养学生遇到困难时灵活运用各种方法解决，促进其建站信心，同时意识到事前规划的重要性。
教学重点：利用表格规划网页结构。
教学难点：利用表格进行不规则布局。
教学过程：引入情景创设：展示新浪、淘宝、126邮箱等优秀网站，并提问这些网站漂不漂亮？想不想知道怎么做的啊？通过学生的回答来提升学生学习积极性，同时在课堂中利用这些网页通过化繁为简的方法来进行教学。
新课一、规划主页页面布局页面版块分解，展示四个页面，让学生分析整个页面的结构，参照书本P58图一图二图三图四来划分。
教师提问：每个页面的各个版块是怎样分布的？通过机房学生座位分成四个小组，每个小组拆分一个网页，版块的划分以明显的分界线为依据，要求简单、清晰。
通过学生划分之后，老师以淘宝页面为例来进行网页版块分解演示。
用表格布局网页教案第一章：表格布局网页概述1.1 教学目标了解表格布局网页的概念和作用掌握表格布局网页的基本方法1.2 教学内容表格布局网页的定义表格布局网页的优势表格布局网页的基本方法1.3 教学步骤引入表格布局网页的概念讲解表格布局网页的优势演示表格布局网页的基本方法1.4 课后作业学生自行设计一个简单的表格布局网页第二章：表格布局网页的基本操作2.1 教学目标掌握表格布局网页的基本操作2.2 教学内容插入表格调整表格大小合并单元格2.3 教学步骤插入表格并调整大小合并单元格和拆分单元格2.4 课后作业学生自行设计一个包含表格布局的网页第三章：表格布局网页的样式设置3.1 教学目标掌握表格布局网页的样式设置3.2 教学内容表格样式设置单元格样式设置3.3 教学步骤讲解表格样式设置的方法讲解单元格样式设置的方法3.4 课后作业学生自行设计一个包含表格布局和样式设置的网页第四章：表格布局网页的高级应用4.1 教学目标掌握表格布局网页的高级应用4.2 教学内容跨列单元格嵌套表格4.3 教学步骤讲解跨列单元格和跨行单元格的应用方法讲解嵌套表格的应用方法4.4 课后作业学生自行设计一个包含跨列单元格、跨行单元格和嵌套表格的网页第五章：表格布局网页的优化与调试5.1 教学目标掌握表格布局网页的优化与调试方法5.2 教学内容优化表格布局网页的性能调试表格布局网页的问题5.3 教学步骤讲解优化表格布局网页性能的方法讲解调试表格布局网页问题的方法5.4 课后作业学生自行设计一个包含优化与调试的表格布局网页第六章：响应式表格布局网页6.1 教学目标理解响应式网页设计的基本概念掌握使用表格进行响应式布局的方法6.2 教学内容响应式网页设计的基本原则使用CSS媒体查询调整表格布局实现表格的响应式布局6.3 教学步骤介绍响应式网页设计的基本原则演示如何使用CSS媒体查询调整表格布局示例实现一个表格的响应式布局6.4 课后作业学生完成一个表格布局的响应式网页设计，并在不同设备上测试其表现。
⽤CSS_DIV画表格（table）进⾏⽹页排版【转】以往传统⽹页设计都喜欢使⽤table(表格)來建构⽹页，這樣的建构⽅式对于⽹页整体排版來讲并沒有太⼤的问题，可以完美相容于各个浏览器。
但是時代在进步，还在⽤table排⽹页感觉就有点过时了。
会这样说并不是想引起table和div之战，⽽是想要说对于⽹页的维护，table表格是⽐较⿇烦⼀点的，再加上程式码不太⼲净、过多的巢状，对于搜索引擎来讲，也⽐较难发现其中重要的部分。
那如果⽤CSS+DIV进⾏⽹页排版，就会⽐较好吗？基本上是可以这样讲，但是⼤家⼜会遇到⽹页校正的问题，⼀⼝⽓要调整四、五种版本的浏览器，这样很可能让⽹页设计者⼜跑回去⽤table表格排版。
但其实在CSS中，已经有语法是⽀援表格的了，并不是对表格进⾏样简单的样式定义，⽽是透过CSS的表格属性，完美画出表格，排除浏览器相容的问题，让传统的table排版的设计师，也可以快速转换。
本來想说使⽤table來产⽣清单排版，免除浏览器校正问题，但碍于搜索引擎对表格式的⽹页不好解析其內容，所以还是使⽤DIV排版，并默默的校正⼀堆浏览器。
但是这回因为⽹页化，因此所有的CSS与DIV⼏乎是重构的状态，所以在本來的分类⽂章清单中，样式也順便进⾏重构，可是问题來了？「重构=花时间」，因为要⽤CSS+DIV模拟成table的样式，如果⼀直使⽤float來排版，校正上其实很⿇烦，当然在浏览器的校正上，更是头⼤。
后來找了⼀下发现有不错的好东西，在diplay的属性上，有table相关的属性值可以使⽤！传统的table排版的问题⼀般來讲，table打好语法就可以呈现效果了，⽽且语法很简单，就单纯的table、tr、td，这三个语法就可以画出表格，在各个浏览器下也都可以正常的显⽰。
如果觉得排版不漂亮，就直接在语法內加上width、color等等的属性值，效果很容易就达到了，可是这样会让程式码杂乱。
对于搜寻引擎來讲，他们抓⽹站內容通常不会⼀次抓完，会先抓到⼀定的⽹页⼤⼩，之后再來，如果你把样式调整的程式码都放进去，很快的，搜寻引擎可能光收录你的表格样式，还沒抓到重点就已经达到抓取額度了，重要的资料沒被收录，倒是收录了⼀些不重要的样式设定。
ant design react form嵌套表格
Ant Design React是一个流行的React UI组件库，提供了许多实用的组件和工具来开发Web应用程序。
在Ant Design React中，嵌套表格可以使用Ant Design的Table和Form组件实现。
下面是一些基本步骤：
1. 首先，我们需要使用Ant Design的Form组件为表单创建一个响应式的数据模型，并使用Ant Design的Table组件显示列数据。
2. 接下来，我们可以在表格中添加一个按钮或链接，以便触发新行的添加操作。
3. 当用户点击添加按钮时，我们可以使用Ant Design的Modal 组件显示一个对话框，以便收集新行的数据。
4. 为了支持嵌套表格，我们需要在对话框中嵌入一个新的表格组件，并将其绑定到表单上。
5. 当用户提交新行数据时，我们可以将数据合并到父表格的数据模型中，并刷新表格以显示新行。
6. 如果需要编辑或删除行，则可以在行中添加相应的按钮或链接，并在单击时触发编辑或删除操作。
编辑或删除操作可以通过修改或删除相应的数据行来实现。
7. 最后，如果我们需要保存表格数据到后端服务器，则可以使用Ant Design的Button组件添加一个提交按钮，并在单击时将表格数据发送到服务器。
以上是基本步骤，具体实现可能需要根据具体需求进行调整。
XXXX中等职业学校《网页制作》的课程标准一、课程的性质与任务（一）课程性质《网页制作》是我校计算机应用专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。
本课程的主要内容为系统介绍网页编辑与制作软件AdobeDreamweaverCS3,通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。
（二）课程任务本门课程在专业教学计划中起着十分重要的作用，通过这门课程,学生可以掌握以下技能和知识：1.掌握网站的开发流程，如建站规划、效果图制作、建立站点、发布网站等相关知识。
2.掌握各种网页元素在DremweaverCS3中的使用。
例如，文本、表格、图像、超级链接、层、框架和表单等。
3.掌握HTML,理解各种标记的功能和用法。
4.掌握在DrenIWeaVerCS3中使用CSS控制网页元素的方法。
5.掌握在DrenIWeaVerCS3中使用JavaScript制作网页特效的基本方法。
6.能够解决一些网页设计中的常见问题。
（三）本课程的特点1.课程注重实际应用，即实践性强。
2.涉及的DremweaverCS3软件是目前网页制作工作中较为流行的软件，是“网页三剑客”之一，具有较强的实践性，学习难度不大。
3.突出理论联系实际，实作课时占总课时的50%以上，实际应用知识占课程总知识量的80%以上。
（四）与相关课程的衔接、配合、分工先修课程：“计算机应用基础”、“图形图像处理（FireWorkS或PhotoShop）"、"Flash动画制作”等。
二、课程目标本课程的基本目标是：使学生通过本课程的学习，掌握DreanIWeaVerCS3的使用方法，学会使用DreamweaverCS3制作Web网页的技术。
本课程学习结束后，学生应能根据实际需要自行设计静态网页，建立网站。
⼋：HTML之表格嵌套和⽤表格实现⽹页布局⼀：表格嵌套嵌⼊表格说明 1.完整表格结构 2.放到td标签中⼆：⽤表格实现⽹页布局，⽤表格做⼀个页⾯框架页⾯结构实现布局<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><!-- width="100%"充满屏幕 --><table width="100%" bgcolor="#f2f2f2"><!-- 页头start --><tr height="80px" bgcolor="14191e"><td>11111111111</td></tr><!-- 页头end --><!-- 上空⾏start --><tr height="10px"><td></td></tr><!-- 上空⾏end --><!-- 主体内容start --><tr><td><table align="center" width="1024px"><tr><!-- 左内容start --><td width="240px" valign="top"><table width="100%" bgcolor="#ffffff" ><tr><td align="center" height="60px">关于我们</td></tr><tr><td align="center" height="60px">团队介绍</td></tr><tr><td align="center" height="60px">⼈才招聘</td></tr><tr><td align="center" height="60px">联系我们</td></tr><tr><td align="center" height="60px">常见问题</td></tr><tr><td align="center" height="60px">意见反馈</td></tr><tr><td align="center" height="60px">友情链接</td></tr></table></td><!-- 左内容end --><!-- 空隙start --><td width="20px"></td><!-- 空隙end --><!-- 右内容start --><td width="764px" bgcolor="#ffffff"><pre>HTML称为超⽂本标记语⾔，是⼀种标识性的语⾔。
文员一般要做的表格用表格制作网页利用表格制作网页实验目标该网页将利用设计页面的布局，制楚雄师院的页面简介。
通过该种制作，我们可以体会到表格在布局设计中的实际运用，体会如何使用表格来控制页面中的元素对象，已达到自然，生动的配置构成元素的目的。
实验过程《1》在dreamweaver中执行《文件》中的《新建》命令，创建一个HTML文档。
然后在《文件》中保存该文档。
然后在《文档》工具栏的《标题》中输入“师院首页”。
然后单击《常用》工具栏的表格按钮，插入一个3行3列的表格。
<2>选中第2行表格的第2单元格。
单击属性面板中的合并所选单元格按钮，将其合并。
然后将指针置于第1行第1列单元格内在属性面板中将《宽》设为200，<高》设为30。
《3》单击《常用》工具栏中的常用图像按钮，再打开的《选择图像源文件》对话框中选中一幅图片，单击《确定》按钮，为单元的插入一幅图片。
《4》将鼠标指针移到第1行1列单元格内，在属性面板中将《宽》设为50，《高》设为30，单击《常用》工具栏中的图像按钮，打开《插入鼠标经过图像》对话框。
《5》在打开的< 插入鼠标经过图像>对话框中，单击《原始图像》后面的《浏览》按钮.。
在打开的对话框中选中一幅图片，单击确定按钮，在单击《鼠标经过图像》后面的《浏览》按钮，用同样的方法选定一幅图片。
《6》设置完成后，单击《确定》按钮，然后同同第4,5步一样为第1行的第1,2列也分别设置鼠标经过图像。
然后将鼠标指针置于第一行第三列的单元格内，在《属性》面板中，为《宽》设为100，《高》。
设为50。
为《背景颜色》设为#333cc。
《7》将鼠标指针置于表格的第3行，按前面的方法，为第3行单元格也插入一幅图片。
然后将鼠标指针置于表格的下一行，单击《常用》工具栏表格图标按钮，为文档在插入一个3行3列的表格。
《8》将鼠标指针置于插入表格的第1行第1列中，在属性面板中将《宽》。
设为120，然后将鼠标指针置于第1行第1列单元格内，按下Ctrl+Alt+t组合键，打开《表格》对话框。
第3章实践与练习3：
嵌套表格制作一个简单的网页
本例着重练习在Dreamweaver中创建表格，并通过嵌套表格来实现对网页的布局，制作一个有导航栏的简单的网页，并使代码高度和可视高度一致。
本例最终效果如下图所示。
⑴首先运行程序Dreameaver8，选择菜单栏“文件→新建”命令，创建新文档。
⑵选择菜单栏“插入→表格”命令，创建一个1行1列宽度为100%的表格，选中表格，在属性面板中设该表格的“高”为“100%”，“间距”为“0”、“边距”为“0”。
⑶在表格的单元格内单击鼠标左键，在属性面板中，设单元格的“水平”为“居中对齐”、“垂直”为“居中”，此时光标就在单元格的正中闪烁。
⑷选择菜单栏“插入→表格”命令，插入一个3行3列的表格。
选中表格，在属性面板中设该表格的“宽”为“600”，“高”为“300”，“填充”为“0”，“间距”为“0”，“边框”为“0”。
插入表格后，就在第一个表格中嵌套了一个表格，嵌套进来的表格居于第一个表格的中心。
如图所示。
⑸第一个表格就是帮助网页定位的，嵌套进来的表格是网页部分，接下来就在嵌套表格里进行操作。
分别选中第一行的各个单元格，然后单击属性面板上“背景”右边的“单元格背景URL”按钮，准备为各个单元格添加背景。
⑹单击“单元格背景URL”按钮后，会弹出“选择图像源文件”对话框，在对话框的“查找范围”列表里找到背景图片（/images/bg1.jpg），单击“确定”按钮，这就为第一行各个单元格添加了背景图。
添加背景图后的效果
⑺为第一行添加背景图后可以看到背景图片超出了第一行的单元格，所以需要设置单元格的相关属性。
单击第一行第一列单元格，在属性面板中设置单元格的属性，“宽”为“240”，“高”为“59”。
⑻在第一行第一列单元格内单击鼠标左键，在属性面板中设置“水平”为“居中对齐”，“垂直”为“底部”。
输入文本“名香艺馆”，设置字体为“黑体”、大小为“36”并加粗，字体颜色为“#999900”。
这样网页的顶部就制作完成了。
⑼选取第三行的所有单元格，单击属性面板上的“行”下方的“合并所有单元格，使用跨度”按钮，合并这一行。
在这一行的单元格内单击鼠标左键，在属性面板上设“高”为“40”、“背景色”为黑色。
在单元格中输入文本“梦之坊工作室电话：0555─2315040”，然后在属性面板中设置文本在单元格中“居中对齐”。
设置字体大小为“12”，颜色为白色。
这样网页的底部就制作完成了。
网页底部
⑽选取第二行的所有单元格并合并。
单击合并后的单元格，选择菜单栏“插入→表格“命令，在第二行的单元格中插入一个1行2列的表格。
选中该表格，在属性面板中设“宽”、“高”都为“100%”，“间距”为“0”。
这是网页的中间主体部分。
在第二行的单元格中嵌套表格
⑾单击在第10步中插入的表格左列的单元格，在属性面板中输入“宽”为“20%”、“背景色”为浅灰色（#CCCCCC），设置“垂直”为“顶端”。
然后选择菜单栏“插入→表格”命令插入一个8行1列，宽度为100%的表格作为导航栏。
⑿选中导航栏表格，“间距”设为“0”，各行的“高”分别交替地设为“6”、“20”。
行高为“20”的单元格的背景色设为橘黄色。
⒀此时发现行高为“6”的单元格的高度与可视高度不一致。
此时单击行高为“6”的单元格，然后单击“代码”按钮，进入代码视图。
代码的高度与可视高度不一致输入导航栏文本⒁在光标闪烁处有“ ；”代码，删除此代码。
同样的方法把其他行高为“6”的单元格在代码视图中“ ；”也删除。
这样，行高的代码高度就和可视高度就一致了。
⒂在行高为“20”的单元格中输入文本，设置并应用样式，导航栏就制作完成了。
⒃单击第10步操作中嵌入的表格的右列单元格，选择菜单栏“插入→图像”命令，插入一张图片（/images/ 8.2.10.jpg），按住鼠标左键调整图片的大小到304×261。
⒄在图片右侧的单元格内单击，然后选择菜单栏“插入→表格”命令插入一个5行2列，宽度为100%的表格。
合并第二列并设置其宽度为47，均分第一列各行都高度，在第四行里输入文本：“熏香有着悠久的历史，最早的书香世家之说中的香，即为熏香。
”
⒅在第一行第二列单元格中单击，设置其“宽度”为“260”，“水平”为“居中对齐”、“垂直”为“底部”。
输入文本：“名香香艺”，并进行大小与颜色的设置。
⒆按菜单栏“文件→保存”命令，保存文档，预览网页效果。
