第一篇：网页设计中表格和层排版的使用技巧论文
摘要：文章指出，表格是网页设计中不可缺少的重要元素。使用表格排版可以规范整个页面，将页面中文字、图片、动画等众多元素有条理地统一组织起来。层是一种新的CSS定位技术，它具备许多表格所不具备的特点，比如可以重叠，移动方便，可以设为隐藏，还可以添加许多行为来丰富页面效果。所以，很多情况下，可以同时使用表格与层搭配进行排版，既可以使用到表格的整体规范性，又可以利用到层的灵活性与丰富功能，从而设计出更加精彩的页面。
关键词：Dreamweaver；表格；层；排版
作者简介：龙敏敏（1979-），女，湖南祁东，本科，讲师；研究方向：计算机教育教学
1Dreamweaver网页设计工具简介
浏览网页已经是现代社会人们生活中的一个重要组成部分，网页作为网络信息传播的主要载体，其设计也被大家所关注。网页设计的软件有多种，Dreamweaver是著名的“所见即所得”的可视化网站开发工具，是国内外普遍应用的专用网页设计软件。它被称为“织梦者”，即它的英文单词所表达的意思。Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制。它是一个集网页创作和站点管理两大利器于一身的超重量级创作工具。网页设计的重点是版面的设计，即如何将所有的素材按照设计要求精美地罗列在页面中。所以，如何排版成为网页设计中的关键。
2使用表格和层排版
在Dreamweaver网页设计中，排版的方法有很多种，其中使用表格和层排版是基本的方法，通过设计模式可以轻松完成，简单易学，是大家常用的方法，对网页排版起到了重要的作用。
2.1表格排版
在制作网页时，要想将文本、图片等组织得美观，有条理，就需要排版人员头脑里有一个整体布局的概念。在Dreamweaver中，安排页面内容布局主要是依靠表格来完成的。通过表格的相互嵌套和合并、拆分，可以将自己的构思完整地表现出来。表格是网页设计制作时不可缺少的重要元素，它以简洁明了和高效快捷的方式将数据、文本、图片、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。使用表格排版的页面，在不同平台、不同分辨率的浏览器里都能保持其原有的布局，且在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。表格排版比较规范，整体性强，一般的网页排版中都会使用表格进行整体的排版，但其表现比较中规中矩，不会有太多其他的丰富功能。
2.2层排版
层是CSS中的定位技术，在Dreamweaver中可对其可视化操作。文本、图像、表格等元素只能固定其位置，不能相互叠加在一起，使用层功能，可以将其放置在网页文档内的任何一个位置，还可以按顺序排放网页文档中的其他构成元素。层体现了网页技术从二维空间向三维空间的一种延伸。层具有很多表格所不具备的特点，比如可以重叠，便于移动，可设为隐藏，还能为层添加一些行为，使页面具有更丰富的变化等。这些特点有助于设计思维不受局限，从而发挥更多的想象力。由于它是一种新的CSS定位技术，层在具有上述优点的同时，也存在着一些不可避免的缺陷，比如兼容性、定位问题。所以，目前比较大型的网站不会单独使用层来排版。
2.3层转换成表格排版
前面提到，层与表格都可以用来在页面中定位其他对象，它们有时可以互相取代，但两者并不完全相同，有时就必须使用其中的一种。比如，当需要用到表格来排版页面，但又觉得表格的添加比较烦琐，而层比较灵活，这时候，排版者可以使用层到表格的转换来实现。具体的操作步骤是：（1）首先在层面板中勾选“防止重叠”选项，这样绘制层的时候就不会出现叠加和嵌套的现象；（2）在页面中绘制若干个层，把页面中的各元素添加到层里面；（3）把每个层自由地排列到页面中各个相应的位置；（4）使用层排版结束之后，要将层排版转化为表格排版，选择“修改”—“转换”—“层到表格”命令，在对话框中设置好相应的参数，确定之后层就会转换成对应的表格。这种排版方法在排列对象时比较灵活一点，但有时也会产生一些多余的单元格。当然，这种方法一般适用于不太复杂的页面的排版，对于比较复杂的图文混排页面，最好还是采用传统的表格排版方法。
3排版时容易出现的问题及解决方法
3.1整体表格排版出现的问题
有很多人在网页中用表格排版时习惯使用一个大表格，然后在大表格中嵌入一个个小表格，认为这保持了排版的整体性，其实这个习惯是不好的。一个大而长的表格在浏览器中打开时会加重浏览器的负担，浏览器一般是等待整个表格的内容都接收到以后才显示这个表格的内容，如果一个很长的页面使用一个大表格排版，那么这个网页显示速度就会比较慢，使得页面呈现的时间大大加长，很多时候有些网页的访问者会失去等待的耐心而放弃浏览这个网页。解决的方法是：拆分表格，将大表格化整为零，把表格打散，并要尽可能地避免表格的层层嵌套。注意，拆分后的表格的宽度要设置为相等，这样表格的排版效果和拆分前相比并没有改变，在浏览器中呈现时，页面会从上至下一个个表格呈现出来，明显加快了页面打开的速度。
3.2层排版出现位置偏差
在页面中使用表格和层混合排版时，先加入表格进行页面的整体布局，然后在局部加入层。通常情况下，层加入到页面中之后是游离在表格之上的，它虽然移动方便，但在页面中的位置是固定的，由于表格的宽度是固定像素，设置在窗口中居中显示，所以当窗口变大时，表格会产生一个相对位移，但是层却还在原位，没有跟着相对位移，因而出现层与表格中其他内容位置上的偏差。所以，层排版的灵活性同样也体现了一定的不稳定性。要想办法使层与页面中其他元素一样，能够随浏览器的变化而产生相对位置上的变化，排版者可以将层嵌入到表格的单元格中，使层成为单元格中的一个元素，就像插入到单元格中的文本、图片一样，层就是属于单元格中的对象，当浏览器窗口大小变化时，表格必然会产生相对的变化，层也就会随着单元格的位置变化而产生相应的变化，这样就不会出现页面中元素相对位置的偏差。整个排版会变得很规范，就相当于是利用表格整体排版，层只是嵌入到单元格中的一个元素，又可以使用到层的丰富功能，两全其美。解决的方法是：先使用表格对整个网页的整体进行规划，然后添加一个层到表格中的某个单元格中。添加的方法：直接将工具栏中的层拖动到单元格中，这样该层就成为该单元格的嵌入层，该层在单元格中默认是靠左对齐，垂直方向居中，而且在水平方向是不能移动的，只要移动便会脱离该单元格，即成为普通层，不会是单元格的嵌入对象，如果在水平方向一定要移动的话，可以将该单元格的位置进行调整，进而单元格中的嵌入层也会随之移动。而在垂直方向上的位置是可以调整的，不过不要用鼠标拖动，这样容易使层脱离单元格，可以选中层通过方向箭上下移动或将该单元格垂直方向上的位置由“居中”改为“顶端”或“底端”。采用这种方法设置层后，无论窗口大小怎么变化，层始终是跟着单元格位置变化而变化，因而不会出现之前那种位置上的偏差。这个问题解决之后，接下来就可以在页面中利用层的一些行为来丰富页面。
4结语
总之，网页设计中，内容虽然很重要，但是如果只有好的内容而没有精美的排版以及合理的布局，那么再好的内容也很难引起浏览者的阅读浏览兴趣。通过合理的、有新意的页面布局，特别是主页设计，才可以将网页的内容完美地呈现在浏览者面前。所以，排版者在平时要多参考他人优秀的网页排版作品，加强排版练习，这样才可能创造更漂亮的网页排版。
[参考文献]
[1]李爱军.网页的排版布局[J].办公自动化：综合版，2009（7）：29-30.[2]艺博，张明真.网页设计与制作——MacromediaDreamweaver8[M].北京：高等教育出版社，2007.[3]王锦.DreamweaverMX2004中文版基础教程[M].北京：机械工业出版社，2005.
第二篇：网页中表格教案
第三课 在网页中插入表格
一、教材分析
网页制作中用表格来规划整个网页的布局，是我们设计制作网页常用的手法。所以学会在网页中插入表格是网页制作中的一个重要的部分。本课的主要内容包括在网页中插入表格，表格的编辑和修饰，在表格中插入文字、图片等。通过对本课的学习，让学生了解用表格来规划网页会使网页结构显得清晰明快。在网页制作中，引导学生用表格来规划网页，为以后网页的开发设计打下一个良好的基础。
重点：学会使用多种方法在FrontPage中插入表格。难点： FrontPage表格的美化。
二、教学目标
知识与技能：学会在FrontPage中插入表格及美化表格的方法，培养学生运用表格设计来美化网页的能力。
过程与方法：采用研究体验式和协作式学习方法，培养学生对计算机知识的迁移能力和综合运用知识的能力。
情感态度、价值观：通过网页制作，培养学生良好的审美情趣。使学生逐步形成用表格来规划网页布局的网页制作习惯，为今后网页的开发设计打下一个良好的基础。
三、教学准备：
硬件环境：使用多媒体网络教室，配备宽带网络。软件环境：WinXP操作系统、FrontPage2000以上版本。素材资源：
1、在教师机或学生机上为学生建立相关的素材资源文件夹。
2、教师为学生准备上课演示用的教师制作的网页1。
我打算出示一组关于学生作文的中学生作文网。
3、为学生准备上课演示用的教师制作的网页2-----情感小屋网页，通过在情感小屋的首页内插入表格，通过进一步用表格规划情感小屋首页的网页布局来学习网页中表格的设计与制作。
五、教学流程
出示课前准备的含有表格的网页1中学生作文网，（一）创设情境，确定问题，布置任务
师：当你漫步在环境优雅的校园时，是否考虑过校园里的林荫道和绿化带的作用？ 生：起着绿化与方便交通的作用
师：其实还有着非常重要的作用，将行政区、办公区、生活区、活动区分成各自独立的区域，使整个校园错落有致，美丽如画，同样，如何将网页布置的美观整齐，结构清晰呢我们运用表格来布局与美化网页？
任务一：在FrontPage中有几种创建表格的方法？它们各有什么优点？
方法一：“常用”工具栏“插入表格”命令。
优点：操作速度快
方法二：“表格”菜单“插入”→“表格”命令。优点：能对表格预先进行设置。
方法三：“表格”菜单的“绘制表格”命令，手工绘制表格。优点：能做出特殊的表格，可以对表格进行修改。
任务二：
如何隐藏表格边框？-----推出表格属性的用法 任务三：
请同学们尝试着在FrontPage中制作如下表格：
（二）学生自主探究学习我 就 是 我姓名 年龄 学校 家庭住址 特长
姓别 QQ1、在FrontPage插入简单表格这一教学环节，考虑到学生已有Word知识的基础，故在此可放手让学生自主学习。通过让同学演示示范，得出插入表格的几种基本方法。并利用同Word相类似的编辑方法来体会FrontPage中表格的简单编辑。完成表格的简单制作。
2、为完成“表格的调整”这一教学任务，教师可提前演示制作好的表格，带着如下问题以小组为单位，研究和尝试对表格进一步美化：
（1）怎样进行行高与列宽的调整（2）怎样进行单元格的合并和拆分（3）怎样进行插入或删除表格中的行或列，（4）怎样进行平均分布行和列等基本操作（5）怎样进入表格属性对话框？
（6）表格属性对话框中相应选项的改变会给网页的效果带来哪些变化，起到什么修饰作用？
在此过程中，教师也可深入到各小组的研究讨论中去，和同学们共同寻找答案。然后，请完成表格美化的同学演示示范，以此突破本课利用表格属性来美化表格这一教学难点。
（四）创设任务，小组协作，巩固新知
在学生已基本学会插入表格和美化表格的基础上，再次创设学习任务，以小组为单位，打开站点“情感小屋”，并打开首页文件index.htm,分别插入四个表格，依次为：2╳3、2╳2、1╳4、2╳
1、宽度为780像素，水平居中。
最后展示各小组学生的作品，展开自评与互评。
六、评价建议：
本课的评价环节贯穿在学生学习活动的全过程，在学生每完成一个学习任务之后教师都要予以充分肯定，尤其在小组的作品展示阶段，教师要注意引导学生从多方面、多角度评
价每个小组的作品，如对各小组的网页作品，可在网页内容、网页规划及网页美化等方面进行自评和互评。注意培养学生良好的审美情趣。
第三篇：《网页设计中的表格排版》教案
《网页设计中的表格排版》教案
授课老师：陈清锋
总1课时
本周第5课时
备课时间:2010年11月30日
授课班级:高一（2）班
授课时间:2010年12月9日
教学目标
知识与技能
1、掌握网页设计中的格式化操作
2、掌握网页设计中表格底纹设置
3、掌握表格的属性设置
4、掌握网页设计中表格的排版 过程与方法
1、培养学习、比较、归纳等思想方法和自觉学习的方法。
2、培养学生动手操作的动手能力，形成比学赶帮的学习气氛。
3、培养学生基本的网页制作流程，培养学生任务驱动方法。情感态度与价值观
1、在操作过程中体会网页编辑的整体美感，培养学生基本审美的观点。
2、引导学生形成自主学习与合作学习等良好的学习方式。
3、培养学生正确的人生观和道德情感。教学重点
1、表格中单元格的美感排版
2、掌握表格中的底纹操作 教学难点
1、网页设计中的表格美感排版
2、网页设计中表格嵌套操作 教学用时 1课时 教学地点 三楼机房 教学过程
一、课堂准备及引入（2分钟）
师生问好。清点人数。安全教育：大家刚才来到机房是怎么来的？蹦过来的？！不要急冲冲地来，要做一个文明学生，有一个大将风范，从容地走进机房，如果你是跑来，容易撞到别人，自己也容易摔倒。
大家都知道，现在每个公司，每个学校，每个企业都有了自己的网站，他们的网站都是很漂亮，而且都是非常容易吸引人的，其实，你们也是有能力达到那种水平的，关键是看你要不要学的问题，如果你要学，你们完全有可能超越他们。那么，在制作网页之前我们应该做一个什么重要的步骤呢？建立网站站点，下面，让一个同学来建立一个网站。由学生上台操作完成。网站建好以后，我们就可以制作网页了。今天我们的主要内容是如何利用网页设计中的表格对网页进行排版。（展示课题和重难点）
接着，展示本次训练的网页效果。要求学生按要求完成本次作业效果。（发素材到学生机）
二、提出自学训练题目（5分钟）
学生自己建立一个以自己名字命名的站点，新建一个主页页面，同时再建3个页面作子页面。
1、建立主页，同时建立三个子页面，制作主页网页背景，字体大小和网页标题。
2、制作LOGO栏（一行3列）。
3、制作导航条（首页、湄州之旅、三字公约等8个导航）
4、制作主页面的排版。（注意各排版的关系和位置）。
5、制作页面底部的版权和与子页面的链接部分。
三、学生操作，教师巡视（5分钟）
四、学生演示操作结果，检查学生的自学效果（5分钟）学生操作结果。（分别由学生来完成题目）
五、教师讲解，指出学生的不足（板书）（8分钟）
1、建立主页，“文件”→“新建”→“基本页”→“HTML” →“确定”。保存存“index.html”，用同样的方法建立三个子页面，分别保存。a“属性”→“页面属性”→点击“背景图像”右边的“浏览”按钮，选择“pic/bggreen.gif”这个图像文件，作为网页的背景。
b在标题右边输入：欢迎进入充满朝气蓬勃的高一（2）班级网站。
2、制作LOGO：制作一行三列的表格，分别插入各自的图像和文件。
3、制作导航：a新建一个页面文件，然后在编辑区域中插入一个 2 × 1 的表格，并设置表格的基本属性参数。b将光标置于第一行的单元格中，再将单元格的背景颜色设置为 # 69A 538，并应用同样的方法将第二行单元格的背景颜色设置为 #8FCB 5A。设置完成后将光标至于第一行的单元格中，然后在此单元格中插入一个 1 × 8 的表格，并设置表格的基本属性参数.。c录入文字并设置单元格。在新插入的表格的所有单元格中输入文字，然后选中所有单元格，设置单元格的相关属性。d改变其中一个单元格的文字颜色和背景颜色，使其突出显示。e此时即可得到带有层次感的表格效果。
4、主页面的排版：（重点讲解，让学生明白为什么要这样操作）
a插入一个一行三列的表格（重点说明：大的外表格起到排版布局作用）b左边的一列：插入三行一列的表格，并输入必要的图像和文字。c中间的一列：插入三行一列的表格，并输入必要的图像和文字。d右边的一列：插入三行一列的表格，并输入必要的图像和文字。（查看结果与教师的效果有何不一样）
e左边的一列：插入三行三列的表格，并输入必要的图像和文字。f中间的一列：插入三行一列的表格，并输入必要的图像和文字。g右边的一列：插入三行三列的表格，并输入必要的图像和文字。
（整调排版使用网页整洁美观，关键利用网页设计中的空表格作用进行排版）
5、制作版权和子页面：一行一列表格，输入版权。制作部分超链接。
六、学生当堂训练（8分钟）
学生继续完善网页主页和子页面的设计及超链接制作。
七、学生提交作业（2分钟）
让学生把作业提交上来，检查学生的作业。
八、作业讲评，比较，推优（1分钟）
把学生作业进行讲评，学生之间对比在学习中形成一个比学赶帮的气氛。（做好学生作业情况记录）
九、小结（1分钟）
1、网页中的表格排版一定少用空格。
2、页面要整齐美观。
3、网页中排版要注意空隙的使用。
4、使用扩展布局。
5、只设宽度，不设高度。
十、作业（10秒）
制作一个关于个人的网站。
十一、思考题，指导下一节讲课内容（30秒）
1、网页设计中有否其他的页面排版？
2、预习层的使用？它与网页有什么不一样的地方？
十二、检查计算机硬件配件，师生问好，有秩序下课。（5秒）
十三、教学反思
第四篇：在网页中使用表格、文字和图片实训教案
在网页中使用表格、文本和图片
本节课案例效果图：
一、新建站点
在Dreamweaver中新建站点，站点名自定，在站点文件夹中新建文件夹images，用来存放网页需要的图片素材，新建文件index.html作为网站的首页，并开始编辑网页。（该步骤不熟悉这参考第一周实训教案）
二、index.html网页的编辑
1、添加网页的背景图片
单击【属性检查器】中的【页面属性】
在打开的窗口中，通过【浏览】设置网页的背景图像为images文件夹中的background.gif图片。如下图所示：
2、使用表格对网页进行布局 1）插入4行1列的表格
（1）在菜单【插入】中选择【表格】按钮，如下图所示：
（2）在下边的窗口上进行相应的设置，如下图：
注意：该表格是用来布局页面的，是控制页面中的内容在适当的位置显示的，不是我们用来填数据的表格，所以这里表格的边框粗细设置为0，这样的话表格看上去是隐藏的，不会影响页面的美观性。在这里我们为了编辑的方便可以先设置为1像素的边，最后完成网页后再修改为0。
运行浏览效果为：
我们会发现表格式默认居左的，接下来我们设置表格在整个网页中居中，将光标放在表格的边上单击一下选中整个表格，然后在【属性检查器】中将【对齐】方式设置为【居中对齐】方式。如下图所示：
接下来我们运行查看结果如下图：
2）增加单元格列的划分
（3）在第一行单元格中，再插入一个表格为1行2列，将光标定位在第一个单元格中，点击【插入】菜单，选择【表格】，并进行行列的设置，如下图：
运行效果如下图：
（4）使用同样的方法，在第3行的单元格中插入一个表格为1行3列，设置如下图所示：
运行效果如下：
接下来我们为了编辑过程中视觉比较清晰，我们通过拖拽的方式来拉高行高，如果是嵌套了表格的单元格，可以直接拖拉内部表格来进行高度的调整，结果如下图：
3、第1行内容的插入（1）在第1行内表格的单元格中分别输入Fashion时尚生活和服饰搭配和礼仪，结果如下图：
（2）文字内容的美化
首先，选中Fashion，如下图：
然后，在属性检查器中选中CSS，如下图：
接下来我们单击颜色选择器右下角的黑色小三角，在展开的颜色面板上选择一种橙色，选择是只要单击一下即可，如下图：
在单击的同时弹出CSS设置窗口，如下图：
在【选择器类型】中选择“类（可应用于任何HTML元素）”，然后给出类名为.fashion，注意前边必须有点，名称开始的符号必须为字母。然后确定即可。
接下来，还是保持选中该部分文字，在【属性检查器】中修改文字的大小为36，字体为Tahoma，并且加粗，这时就不会弹出CSS的命名窗口，因为该修改仍然是在.fashion类上进行的，如下图：
在此，如果想给dreamweaver添加新的字体，可以单击【编辑字体列表】进行添加，如下图：
譬如，将黑体添加进来，就可以在右边的【可用字体】中选择黑色，然后单击中间的箭头，则字体就添加到【选择的字体】部分，然后确定即可。
用同样的方法，将时尚生活设置为红色、大小16号、默认字体、加粗。（3）将“服饰搭配与礼仪”在单元格中居右
首先选中“服饰搭配与礼仪”，然后选择【属性检查器】的对齐方式为右对齐，如下图：
单击之后弹出如下窗口：
在【选择器类型】中选择“类（可应用于任何HTML元素）”，然后给出类名为.fsdp，注意前边必须有点，名称开始的符号必须为字母。然后单击确定即可。
运行结果如下：
4、第2行水平线的插入
将光标定位在外层表格的第2行，然后单击菜单【插入】，选择【HTML】-【水平线】，即可插入水平线。运行效果如下：
接下来将水平线的颜色修改为红色，单击选中水平线，将会在【属性检查器】中显示水平线的属性： 我们前边在修改“时尚生活”的颜色为红色的时候，曾经创建过一个.ssh的CSS类，现在我们只需要将该CSS类应用到水平线上就可以了，我们在属性“类”中单击下拉列表选择ssh即可将水平线设置为红色。如下图所示：
运行结果如下：
5、第3行第1个单元格内容插入
将光标定位在该单元格内，拷贝文字素材.doc文件中的第一段，粘贴过来即可。单击右键-粘贴。适当的调整该单元格中表格的列宽，运行结果如下：
接下来，在文字底部插入图片，注意这是需要另起一段或者换行，注意直接按Enter回车键是另起一段，按shift+Enter是另起一段，这两种方式都可以，只不过使用分段的方式图片和文字距离远一些，这里我们直接回车，然后在【插入】面板中选择【图像】进行插入。
在弹出的图片选择对话框中单击图片排列方式按钮，如下图所示，选择缩略图，就可以很直观的看到你要选择的图片了。
单击选择图片后确认即可。通过拖拉方式修改图片的大小和单元格的宽度进行适当调整后，运行效果如下：
接下来我们通过创建CSS的方式来美化该单元格中的文字，在CSS面板中，单击新建CSS规则按钮，打开新建CSS窗口，如下图：
在弹出的窗口中，输入CSS的类名，然后单击【确定】，如下图：
确定后，在弹出的窗口中，【分类】中选择【类型】，字体设置为“Tahoma”，字号设置为“14”。如下图：
然后在【分类】中选择【区块】，将首行缩进test-indent设置为25pixels像素，如下图：
最后按【确定】，我们可以在CSS面板中看到刚刚创建的CSS.zgwz。如下图：
但是这个时候，该CSS并没有起作用，我们必须把它应用到文字段落上才可以，现在我们选中整个文字，然后切换到代码视图，我们会看到如下图片：
我们看以看出来整段文字被嵌套在标签中，那么该标签就是表示一个段落的标签，我们只要将刚刚创建的CSS应用到该标签就可以对文字起作用，接下来我们将光标定位到
中的p后边，然后敲空格键，在弹出的下拉菜单中双击选择“class”即可，如下图：
双击选择class后，又弹出一个下拉列表，让你选择你使用哪个类来美化该段落，我们当然要选择我们刚刚创建的.zgwz这个类，只要双击该处即可。如下图：
这时，我们去运行网页，则效果如下：
其实，我们发现好像缩进的不够两个字符，那么我们可以继续在CSS面板中，双击.zgwz这个类，打开CSS设置窗口，在【区块】中去调整text-indent的的像素的多少，直到合适为止。
6、第3行第2个单元格中插入鼠标经过时图像
该效果是当我们的鼠标指针放到这个图片上的时候，这个图片就会变成另一幅图片，从而实现一种美轮美奂的效果。
首先把光标定位在第3行的第2个单元格中，然后单击【插入】面板的【图像】处的黑三角，选择弹出的列表中的【鼠标经过图像】，如下图：
在弹出的窗口中，选择【原始图像】为shishang_r3_c4.jpg，【鼠标经过图像】为shishang_r3_cquse.jpg，然后确定即可，如下图：
调整单元格和图片大小到适合程度后，运行网页后，将鼠标放在图片上，可以观察到图片的切换效果。
7、第3行第3个单元格中插入列表文字和图片
单击【插入】面板【常用】旁边的黑色箭头，展开列表后，选择【文本】，如图所示：
在【文本】面板中，选择编号列表，则插入点处就自动插入1.，如下图：
在插入点出插入文字素材中的“文明大方”后回车，则编号2会自动出现，依次按照文字素材将三个标题拷贝上去，如下图：
接下来我们，将光标定位在“文明大方”后边，敲击回车，如下图：
将光标定位在2.后边，选择【属性检查器】中的【HTML】，如下图：
单击上图红框处的向右缩进按钮，则2.变成1.的下一级列表，如下图：
然后我们再单击【属性检查器】中的项目符号按钮，则数字列表又可以转换成项目列表，如下图：
然后我们将文字素材中的文明大方的内容拷贝到该项目符号处，如下图：
用同样的方法，添加搭配得体和个性特征的内容，结果如下：
接下来，我们来进行列表项的美化，用图片来修饰，首先单击CSS面板的新建CSS规则的按钮，新建CSS规则.liebiao，如下图：
确定后，在弹出的窗口中【分类】中选列表，然后再list-style-image中选择图片point01.gif为列表用图片，单击【确定】。
然后切换到代码视图，如下：
在标签
- ol的后边敲空格，选择class，然后选择我们刚才创建的.liebiaoCSS类，这样我们就把.liebiao样式应用到了列表中，结果如下：
在文字的下方插入两幅图片，并适当调整大小，如下图：
8、在最后一行输入内容“Copyright © 2008 by Choice.Lee All Rights Reserved” 我们会发现© 在键盘上是无法直接输入的，需要打开【插入】面板的【文本】，选择特殊的版权字符©即可插入。如下图：
然后我们选中文字内容，并且在【属性检查器】的CSS中选择【居中】按钮，如下图：
在弹出的窗口中，输入类名.footer后确定，如下图：
预览效果如下：
9.去掉布局表格的边框
单击布局用的表格，在【属性检查器】中将【边框】设置为0，敲回车或tab键确认即可。如下图：
注意布局时用了三个表格，全部修改过来，网页会更美观。最终效果如下：
第五篇：第十四课 使用表格规划网页 教学设计
第十四课
使用表格规划网页
湖南省隆回县小沙江中学易黎宝
教学目标 1．知识目标
学会在网页中插入表格； 学会使用表格的嵌套功能；
学会使用表格的拆分和合并规划设计网页。2．能力目标
让学生学会在网页中插入表格、学会使用表格的嵌套功能、学会使用表格的拆分和合并规划设计网页。通过学生的操作和协作探讨，培养学生的自主学习、协作学习的能力；通过知识的再现培养学生的创新能力和创新意识。
3．情感目标
通过作品展示和评价，让学生体验成功的喜悦，激发学生的创造热情；通过小组的协作，培养学生的合作精神和集体主义精神。
教学重点
学会在网页中插入表格； 学会使用表格的嵌套功能；
学会使用表格的拆分和合并规划设计网页。教学难点
学会在网页中插入表格； 学会使用表格的嵌套功能； 学会使用表格的拆分和合并规划设计网页。教学方法
情景导入法、任务驱动法。所用课时
2课时。教学环境
多媒体机房。4人为一个小组，每个小组选出一名学生出任组长。教师针对学生的能力水平进行适当调整，以达到各个小组的力量均衡。本课教学应至少一人或两人一机，投数字电视一台，教师机一台（用于教师示示范，布置任务），整个机房以宽带的形式接入因特网，网速较快。
教学过程
一、创设教学情景，激发学生学习兴趣，出示学习任务。
师：同学们在FronPage 2000 中，要调整页面版式，文字、图片的位置不像我们在使用Word排版时那样可以自由灵活，要使用网页表格功能规划设计网页，让文字和图片放置在合理位置，让每一部分内容都有自己的“家”，页面显得整齐规范。这也是与Word相比最大的区别。今天的学习任务是：
１.学会在网页中插入表格； ２.学会使用表格的嵌套功能；
３．学会使用表格的拆分和合并规划设计网页．
下面请同学们跟老师一起操作，看看如何在网页中插入表格。（板书：插入表格。）
二、讲授新课
（一）插入表格 教师演示操作：
步骤1：使用FrontPage 2000打开“宝贝小猪的家”网页。
步骤2：选择菜单“表格” →“插入”→“表格”选项，打开“插入表格”对话框。
步骤3：设置行数、列数、宽度等参数。
步骤4：单击“确定”，表格就插入网页中。
（二）提供机会，学生实践探究 投影出示任务： 1．参考Word软件中调整表格大小的方法，将表格调整到合适的大小； 2．将文字、图片复制到合适的单元格中；
3．参考Word软件中调整表格大小的方法，根据需要将表格进行拆分与合并。
教师随堂检查并指导学生。
（三）表格的嵌套
师：有时为了方便调整网页内文本和图片的位置，通常需要在表格中再插入表格，这就是表格的嵌套。下面请同学们将光标移动到需要插入嵌套表格的位置，按照插入表格的方法，就可以形成表格的嵌套了。
（板书：表格的嵌套。）
（四）提供机会，学生实践探究
投影出示任务：在表格中嵌套一个表格。（教师随堂检查并指导学生。）展示学生优秀作品。设置表格属性
师：在插入表格后，同样我们可以设置表格的对齐方式、大小和背景颜色等参数。
教师演示操作： 步骤1：在表格中单击右键，选择“表格属性”后，我们可以在“表格属性”对话框中设置表格的属性。
步骤2：如果我们要单独设置一个单元格的属性，则选择“单元格属性”，如果选择“表格属性”，则设置整个表格的属性。
使用表格规划设计网页
师：今天我们学习了设置网页中的很多属性，但是在制作网页前，通常都先利用表格规划设计好网页，这样就使我们的网页制作更加方便和规范。那么如何规划设计网页，这需要靠同学们多浏览不同风格的网站，多积累经验。
三、授课完毕，课程总结
本节课主要讲了以下４ 个知识点： 表格布局是网页制作中最常见的布局方法。
选择“表格”菜单中的“插入／表格“命令，可以插入合适的表格。对插入的表进行属性设置和拆分全并等到操作即可实现表格布局。在运用表格进行布局的时候，学需要在表格中插入表格，即表格的嵌套。
４．常见的表格布局灯型有Ｌ回字型、同字型、匡字型、川字型等。
四、课堂作业
1．调整“宝贝小猪的家”网页，达到自己满意的效果； 2．使用表格重新设计规划自己的网页。小测验；
1． 小红想利用表格来规划自己的网页，她想在网页中插入一个表格，以下操作能实现的是：（）
A． 选择菜单“插入”→ “表单”
B． 选择菜单“插入”→ “组件”
C． 选择菜单“表格”→ “插入”
D． 选择菜单“插入” →“水平线”
正确答案：C
2． 插入表格以后，小明想在表格中放入一些内容，他可以在表格中放入：（）
A． 只能放文字
B． 只能放图片
C． 只能放文字和图片
D． 除了文字和图片之外，还能放很多内容，如字幕、动画、视频，等等
正确答案：D 3． 插入表格后，如果要对某一单元格进行设置，以下操作可以实现的是：（）
A． 在表格中单击右键，选择“表格属性”
B． 在表格中单击右键，选择“单元格属性”
C． 选择要修改的单元格，选择“单元格属性”
D． 选择要修改的单元格，选择“表格属性” 正确答案：C
4． 小明想将表格的背景颜色设置为红色，表格的第一个单元格背景设置为黄色，以下操作可以实现的是：（）
A． 在表格中单击右键，选择“表格属性”
B． 在表格中单击右键，选择“单元格属性”
C． 在表格中单击右键，选择“表格属性”设置表格背景色，然后选择要设置的单元格，选择“单元格属性”
D． 不能实现
正确答案：C
5． 插入表格以后，我们能对表格进行的操作是：（）
① 合并单元格； ② 拆分单元格； ③ 插入表格； ④ 插入行； ⑤ 插入列
A． ①②③④⑤
B． ①②④⑤
C． ③④⑤
D． ①②③ 正确答案：A
点击咨询 