网页设计之如何插入表格

第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所示。

《网页中的表格》教学设计一、教学设计部分本课的主要内容与地位网页中，常用表格来对网页中其它元素定位，将复杂的元素有条理的分布到网页各个位置──网页布局。

另外，当我们把表格的宽度定为固定像素值后，还能保证网页布局不会随浏览器窗口的大小变化而变化，当我们在网页中输入文字的时候，就可以让文字顶满格后自动换行，方便我们对文字的编辑。

由此可见，网页中只有利用表格进行布局，才能称得上真正意义上的网页设计。

本课与前后内容的关系利用表格布局网页，将上一节设计的网站首页中的各种素材进行合理的分布，是对学生进行网页设计技能上的提升；利用表格布局网页也是整个网站设计中一个非常重要技术手段，应用非常广泛。

知识目标/技能目标知识目标理解表格在网页设计中的重要作用。

技能目标⑴掌握使用表格布局网页。

⑵灵活掌握表格调整的方法。

过程与方法目标能够合理利用表格对网页进行布局和规划。

情感态度与价值观目标了解学校概貌，发现校园之美，理解规矩与方圆的关系，养成良好的生活和学习习惯。

本课的重难点重点和难点：掌握利用表格对网页进行布局的方法本课的课时分配建议一课时教法建议由于关于表格的基本操作（插入表格、调整表格：调整行高或列宽、合并或拆分单元格、插入或删除行或列、平均分布行或列）在Word中已经有较详细的操作方法。

在本课教学过程中，教师教学的重点应放在由学生探究以上基本操作的基础上的表格的使用──如何利用表格布局网页，让网页中的素材合理的在网页上分布。

另外，网页模板是提高建站效率的有效手段，教师要注意引导学生对网页模板的使用。

学法建议注意观察和借鉴样板网站中表格的运用情况，刚开始使用表格设计网页时可将其边框粗细的值设为1，以观察调整表格的过程，从而掌握表格调整的技巧。

本课教学资源索引1．第二课的半成品网页：Index．htm、Parents．htm自评、互评、师评要注意的问题学生制作的网页是否通过表格的布局达到美化、整齐和排列有序的目的。

网页设计基本操作________________________________________ 1.把文件夹转换成站点：点击【文件】菜单——打开网站——选择需要转换的文件夹并打开——点击【打开】按钮——确认2.插入表格：点击【表格】菜单——插入——表格3.设置表格属性：在表格内右击鼠标，选择【表格属性】，进行表格属性设置（包括表格边框粗细、颜色、背景等）4.插入图片：点击【插入】菜单——图片——来自文件……——选择相应的文件（插入图片后，双击图片可以进行图片属性设置）5.设置单元格背景：在单元格内右击鼠标，在菜单内选择【单元格属性】——选择【使用背景图片】——浏览选择相应图片文件6.修改网页标题：点击【文件】菜单——属性——选择【常规】选项卡——标题（修改或设置网页标题）/背景音乐——浏览选择相应的声音文件7.插入滚动字幕：点击【插入】菜单——web组件……——动态效果——字幕——进行字幕属性设置8.插入水平线：点击【插入】菜单——水平线——双击水平线进行属性设置9.插入层：点击【插入】菜单——层——在层内进行相关操作10.插入flash动画：点击【插入】菜单——图片——flash影片——选择SWF格式的文件11.插入视频：点击【插入】菜单——图片——视频——选择A VI、MPG等格式的文件12.设置导航栏：点击【视图】菜单——导航——添加相应的导航页面——定位光标——点击【插入】菜单——导航——链接栏——基于导航结构的链接栏——选择一种导航样式——选择导航栏的方向——完成。

13.插入交互式按钮：点击【插入】菜单——交互式按钮——进行交互式按钮样式选择和按钮文本设置14.设置超链接：选择需要设置超链接的对象——点击【插入】菜单——超链接……——选择相应的链接位置。

用表格布局网页教案第一章：表格布局网页概述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 课后作业学生完成一个表格布局的响应式网页设计，并在不同设备上测试其表现。

竭诚为您提供优质文档/双击可除dw如何在div中插入表格篇一：dreamweaver8系列diV+css教程表格一列布局一列布局web标准(div+css)》的一列布局，包含以下几种形式：一列固定宽度一列固定宽度居中一列自适应宽度一列自适应宽度居中一列二至多块布局前一节我们回顾了xhtml基础和css基础部分，今天我们正式开始使用网页制作软件——adobe公司出品的dreamweaver来开始网页设计之旅。

相信之前您已经用过这个软件了，具体怎么使用我就不讲了。

为了照顾部分朋友，今天课程的css部分我们是以可视化生成方式，不过建议大家能手写的尽量还是手写，这样有助于提高效率。

一、一列固定宽度我们先看一下一列固定宽度，首先要新建一个页面：注意：这里的文档类型是过渡型，目前我们采用这种宽松验证方式。

接下来在页面中插入一个div标签，我们可以点击工具栏的“插入diV标签”按钮，在打开的对话框中id项给这个div命一下名，我们给它起个名叫layout（名称根据自己需要命名）。

插入div后，在右侧的css样式面板中，定义id为layout 的样式，确定后在打开的css编辑对话框的方框选项中设计宽度500，高度300。

为了看清楚起见，我们把这个div设置个背景色，这样就能预览出大小和位置了。

这里选择高级，然后在选择器中填写：#layout，如果是选中div后，再点击添加，它会自动添加上。

因为是定义id，所以前面需要加#，后面会有id和class的详细讲解的margin:auto;时，可以让这个盒模型居中。

我们下边在css样式表中加上这个属性看看效果：#layout{height:300px;width:400px;background:#99FFcc ;margin:auto;}在dreamweaver的设计视图中我们选中看看，是不是已经居中了，我们再在ie下预览一下，同样居中。

篇二：如何用dw创建表格一、创建基本的表格一个表由＜table＞开始，＜/table＞结束，表的内容由＜tr＞,＜th＞和＜td＞定义。