表格布局论文

表格布局论文（通用4篇）

表格布局论文 篇1

一、CSS+DIV布局简介

DIV元素是html语言中的一个元素,是标签,用来为HTML文档的内容提供结构和背景的元素。css是英语Cascading Style Sheets的缩写,中文名称为层叠样式表,它是用来表现网页外观样式的计算机语言。CSS提供了丰富的样式表现功能,如字体、段落、颜色、背景、布局等。每个HTML标签都含有style属性。利用style属性可以将CSS样式直接写入HTML文档的某个标签内。DIV+CSS的布局方法简单来说就是使用div标签作为容器,使用CSS技术来排布div标签的布局方法。

二、表格布局网页的问题

表格曾经是网页制作中应用最频繁的元素,起主要作用是定位和排版网页,便于初学者掌握和使用。但是使用表格技术制作的网页,由于嵌套了大量的表格,不仅容易产生页面内容错位,使网页维护和更新的工作量非常繁重,更重要的是产生了大量的冗余代码,从而使网页容量剧增,浏览器加载缓慢。

三、两种方式布局页面的代码对比

下面通过制作一个歌曲专辑列表页面为例,来比较两种方法布局网页的区别。效果图如下图所示:

(1)使用CSS+DIV布局代码如下:

至此,通过以上两种方式制作网页的代码比较,很明显得出以下结论:利用CSS+DIV技术制作的网页,相对于表格嵌套的方式,修改设计时更有效率。由于使用了CSS+DIV制作方法,使内容和结构分离,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式;使得网页更加容易扩展,并且更加规整;使得网页中代码更加简洁,页面体积变小,使页面载入得更快。

四、结语

使用CSS+DIV的布局方式改变了传统html+table的布局方式。CSS+DIV尽管不是高不可及,但至少要比表格定位要复杂,如何更有效、更合理地运用DIV+CSS,需要通过不断的实践和积累丰富的实操经验,才能很好的掌握这门技术。

参考文献

[1]曾静娜.新手学CSS+DIV[M].北京希望电子出版社,2010.

[2]金峰.变幻之美CSS+DIV网页布局揭秘[M].北京:人民邮电出版社,2009.

[3]郑燕琦.CSS+DIV网页布局应用[J].科技文汇,2013,5(下).

表格布局论文 篇2

一、教学目标：

1、知识与技能：

（1）、了解表格在网页设计中的作用。

（2）、掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。

（3）、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。

2、过程与方法：

（1）、利用对比学习，培养学生知识迁移的能力。

（2）、通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多样性，培养学生的发散思维能力。

（3）、通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。

3、情感态度与价值观：

（1）、通过对比学习使学生体验软件学习的一般方法及规律，提高学生自主学习的能力。

（2）、通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，体验创造的快乐。

（3）、通过“动物——人类的朋友”网站的设计与制作，激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。

二、教学重点难点：

1、教学重点：

（1）、了解表格在网页设计中的重要作用。

（2）、掌握插入、编辑表格的方法及表格的属性设置。（3）、掌握单元格的修饰与属性的设置。

2、教学难点：

（1）、表格的嵌套在网页设计中的应用。

三、教学过程：

1、创设情境、导入新课

（1）、展示两个页面并进行比较：一个使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定的规律；另一个页面凌乱，图文混杂，摆放杂乱。

（2）、提问：你喜欢那个页面的布局？学生回答。

（3）、提出问题：有什么方法可以达到第一个页面的效果。观察第三个页面，内容与第一个页面相同，显现页面中表格的边框。

（4）、学生讨论、交流，回顾Word中学习过的表格，领悟表格在FrontPage中的作用。

设计意图：通过对比学习，培养学生知识迁移的能力。

2、任务驱动、自主学习

（1）、展示一些由表格布局的网页，引导学生分析其表格结构，自然过渡到分析教材中的例子，得出表格的布局。

（2）出示任务一：规划网页表格的布局。分层完成该任务，基础相对薄弱的学生仅要求读懂教材中的网页表格布局，知道规则，根据表格的行数与列数，调整至最终样式；基础扎实、操作能力较强的学生可以跳出教材，自行设计表格网页布局，并将自己的表格设计绘制在教材上。

设计意图：分层教学，学生可以根据自己的实际情况选择任务难度，并动手分析和进行创意设计，培养学生的模仿以及创新能力。

（3）、出示任务二：新建一个页面，用表格布局该网页，并在该网页中放入相应内容。FrontPage中表格的插入于编辑与Word中的表格操作类似，教师着重引导学生进行知识迁移。

（4）、学生操作，教师安排操作熟练的学生进行演示。设计意图：培养学生知识迁移的能力和动手能力。

（5）、出示任务三：在表格中插入图片、输入文字。任务四：表格属性以及单元格属性的设置。

（6）、学生根据自己的实际情况选择任务难度，可按教师的具体要求操作，也可根据自己的意图进行设计。设计意图：确保达到教学目标的同时，给学生一定的自主空间，鼓励他们去创新，而不应让学生一成不变地生硬模仿。

（7）、出示任务五（提高内容）：表格的嵌套。学生动手制作网页。设计意图：更好的发挥优秀学生创作思维动手能力。

3、课堂小结、后续活动

（1）、教师引导学生回忆本节课学习的内容：在FrontPage中插入表格、编辑表格以及表格嵌套的基本方法等。

（2）、教师展示优秀作品，表扬完成任务的学习，对未完成任务的学生，应鼓励他们利用课余时间继续完成。

浅谈网页布局中的表格与框架 篇3

用户在浏览网页的时候问题容易被那些美观大方的网页所吸引。页面的布局是网页制作成败的一个很重要的因素, 因此用户在制作网页时要重视。而页面布局的一般设计原则和方法如下。

(1) 布局简洁大方清晰:这是W eb网页设计的最重要的原则。一般一个页面应有一个主体, 可以是文字块或图像。浏览者总是先看网页中大的和色彩鲜明的部分, 然后才是通常的从左到右和从上到下的模式, 不能给人的感觉是杂乱无章, 眼花缭乱的感觉。另外尽可能使任何信息都能在3次内点击找到。每个页面显示一层信息, 只显示用户当前选择的内容, 其它内容可用链接提示。

(2) 布局类型选择:布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、F lash型、变化型。

(3) 布局平衡:所谓布局平衡是指以页面为中心, 页面的上下左右在分量上应给人以匀称的感觉, 不会让人感到页面的某些地方特别拥挤, 而有些地方又特别空旷。为了让页面达到左右平衡, 应尽可能利用文本和图像的H T M L对齐方式标识。页面的上部应多留些空间, 不要太拥挤, 使用给每个页面加上页眉和页脚的方法来达到上下的平衡。

(4) 布局风格一致:依据网页设计界面设计的风格原则, 同一网页应用的每个页面应该拥有大体一致的页面布局, 这样可以有效地使用户感受到页面谐调一致。

(5) 布局文本、图片和多媒体方式:文本和图片是构成网页的两大元素, 目前的技术可以让文本和图片摆放在页面的任何位置。声音、动画、视频等可使更加页面丰富。

2 页面布局中的表格方法

在网页设计中表格具有非常重要的作用——定位, 也就是在网页中表格不只是数据统计和展示数据, 更重要的用途是利用表格来进行页面布局, 使用表格能够使网页看起来更加直观和有条理。页面布局中表格的内容主要有以下几点。

(1) 布局视图:在Dreamweaver中提供了3种布局视图:即标准视图、扩展视图和布局视图。绘制布局表格通常在布局视图下进行。

(2) 绘制布局表格和布局单元格:绘制布局表格需要切换到布局模式视图进行绘制, 而绘制布局单元格需要切换到布局视图模式进行绘制。

(3) 编辑布局表格和布局单元格:布局表格和布局单元格的编辑操作只有在“布局”视图中才可以进行, 基本操作有移动、删除、添加内容和调整大小、设置布局表格属性、利用表格制作垂直线或水平等操作。

如图1所示, 整个页面分成了四个不同的区域:页面顶部的单元格内放置标题图形;顶部下方的单元格内放置局部导航条;页面左侧的单元格内放置图片;页面右侧的单元格内放置文字内容。利用Dreamweaver提供的“表格”可以很轻松地制作出这样的页面布局。

3 页面布局中的框架方法

框架是目前见面设计中最为常用的技术之一, 很多网站都有框架设计的身影。许多网站的论坛或邮件系统都是用框架都是用框架来完成的。用户可以根据网页设计的需要, 在某些区域中放置不需要改变的元素, 在另外一些区域中放置需要改变的内容。使用框架的最常见的情况是, 一个框架显示包含导航控件的文档, 而另一个框架显示含有内容的文档。页面布局中框架的主要内容有以下几点。

3.1 建立框架

在Dreamweaver 8中, 预定义了13种框架集结构供用户使用, 定位光标在要插入框架集的窗口中, 选择一种框架样式创建框架。

3.2 框架面板

建立完框架后, 要对框架和框架集进行编辑。在Dreamweaver 8中提供了“框架”面板, 在“框架”面板中可以直接选中框架或框架集并对其进行控制[3]。

3.3 设置框架的属性

通过框架集属性面板, 可以对框架集进行边框选项设置, 框架集中框架大小设置;通过框架属性面板, 可以对框架各项属性进行设置。

3.4 保存框架

框架页也是网页, 设计者在建立框架页后, 可以像在普通网页中一样, 添加文本、图像、背景图像和动画等各种网页元素以及各种编辑操作。框架集网页制作完毕后, 在预览和关闭前要对框架集和所有的框架文件进行保存。

3.5 框架中的超链接

在框架中设置超链接以打开另一个框架中的文档时, 必须设置链接的目标窗口。

如图2所示, 整个页面分成了三个不同的区域:可以采用顶部和嵌套左侧框架设计该页面, 顶部的框架内放置标题图形;顶部下方的左侧框架内放置局部导航条;顶部下方的右侧框架内放置图片文字内容。利用Dreamweaver提供的“框架”可以很轻松地制作出这样的页面布局。

4 结语

本文通过介绍了网页布局中的一般原则和方法, 并主要介绍了表格的几种布局视图、绘制布局表格和布局单元格、编辑布局表格和布局单元格, 并通过使用表格实现的一个具体实例网站 (如图1所示) 进行阐述说明;另外介绍了框架的创建方法、框架面板、设置框架属性、保存框架及框架的超链接, 并通过使用框架实现的一个具体实例网站 (如图2所示) 进行阐述说明。

摘要：本文简要介绍了页面布局的一般设计原则、设计方法, 并主要论述了表格及框架定位页面元素, 进行网页布局的方法。

关键词：Dreamweaver,表格,框架,布局

参考文献

[1]曾鸿.网页设计与制作[M].北京:高等教育出版社, 2009, 2:84-99.

[2]李显萍.网页设计与制作[M].北京:高等教育出版社, 2007, 7:86-99.

表格布局论文 篇4

《用表格为网页布局》是浙江教育出版社信息技术教材八年级上册第三单元第十五课的内容。本课是在学生学习建立网站站点后，开始尝试做第一张网页。通过本课的学习，是对表格知识的巩固和深入，更重要的是为后面的网页制作打下基础，所以本课是本单元的重点，起到承上启下的作用。前阶段学生已经学习了文本编辑、图片插入、网络基本知识、文件操作等内容，很多知识都可以迁移到本课来。八年级学生对电脑基本操作已经不再陌生，已经能够独立完成一定要求的学习任务，但是学生对于特定任务进行分析，整体规划能力相对还是比较欠缺的。本节课教学的作业设计中，我将注重培养学生这个方面的能力。根据课程标准和教材内容，我将本课的教学目标设计成三个方面：

知识与技能目标：

1、了解主页布局的常见布局图，并明确主页设计的基本要素；

2、理解用表格排版主页的作用；

3、掌握在网页中插入表格进行排版的技能；

4、学会设置表格属性，对表格进行编辑修改。过程与方法目标：

通过欣赏、借鉴他人的主页布局，取长补短，为自己的主页布局做铺垫。情感、态度与价值观目标：

1、通过作品欣赏，让学生意识到取长补短的可贵性，及在借鉴基础上的创新的重要性；

2、用表格排版网页解决网页版面杂乱问题，培养在遇到困难时灵活运用各种方法解决，强化建站信心。

为了实现这个教学目标，我将教学重点确定尾插入表格进行排版和更改表格属性。根据学生的思维障碍和学习情况的分析，我将难点定位于灵活掌握排列表格和设置表格属性。只有正确设置了表格的属性，才能美化和完善网页的布局。为了更好的突出教学重点，突破教学难点，圆满的完成教学任务，我在课前截取了典型的旅游网页图片素材并设置成框架形式让学生一目了然地看到表格所起的作用，并设置了几个学生需要突破的任务。

信息技术课是培养学生对信息技术的兴趣和意识，使学生养成良好的信息素养为宗旨，强调学生的自主学习和研究学习。上新课前，我要求学生两两合作，通过传统手工绘制草图的学习方式，设计你需要建立网页的框架布局，同时学会和与他人合作。为了让学生主动的参与学习，我在设计教学流程时，准备以学生“任务驱动”为主线，以教师为主导，以学生为主体，通过学生自主探究，合作交流完成教学任务。根据教学内容和学情的分析，本课我采用的教学方法有：讲解、练习、任务驱动、小组合作，学生可以通过小组合作、给定的任务等将本课学习用于实际操作。我将结合教学过程来具体分析。整个教学过程我分为以下四个部分来完成：

一、通过旅游网站的解析，直接引入新知，通过删除网页的背景、文字、图片后，呈现出一张网页的背后其实是表格起到重大的作用。所以学生心中就有个概念，原来做网页的前提是用表格固定框架。并结合书本p58页，了解网页常见的布局图。直觉、兴趣成为学生产生学习动力最直接的因素。

二、本节课的任务是让学生设计有关龙泉旅游的网页布局，我先让学生利用草图形式设计宣传龙泉旅游网页的框架，做这个的目的是为了学生能更顺畅、不会盲目的在电脑上操作，这为学生完成任务2提供基础。

三、巩固旧知，学习新知，解决问题。建立网页的前提是建站，学生对站点的认识已经不会陌生，根据教师提供的站点，再将网页布局呈现在主页上（学习新知）。通过例子的演示，学生将草图转移到网页上来。在操作过程中学生可能会遇到一些解决不了的问题，我会引导学生勇敢地提出问题，并告诉学生解决问题的方法：（1）自己思考（2）向同学和老师寻求帮助。（3）通过教材操作步骤P59，进行知识迁移。针对学生中普遍存在的问题，我将利用广播讲解演示，解决问题（学生应该会碰到在单元格内插入过大的图片后，影响相邻单元格位置变化，这里所要涉及的是表格的嵌套）；针对个别学生的问题，我将个别指导。设计意图：这个环节充分体现了学生的自主性，让学生不断尝试中发现问题，师生合作解决问题。体现了学生是学习的主体，学生把教材、同学、教师、电脑都作为 学习的帮助者。

四、作品展示及评价。根据课前设定好评价量化表，抽取部分学生作品展示给同学们，通过学生对自己作品的评价打分（自评），再让别的同学进行评价打分（他评）。但是课堂时间毕竟有限，让每位学生对自己设计的作品进行评价，然后同组之间进行互评，取长补短，学生可以从中找到自己的缺点和不足之处，也能学习到别人的长处。相互评价，也是获得最佳学习效果的重要途径之一。（问题补充：参考诸多网页，一般网页的边框是不显示的，如何将表格的边框线从页面中赶走，这里需要利用表格的属性进行隐藏边线，从而使网页页面更加美化。）

五、课堂小结。强调页面布局在网页设计中的重要性，肯定同学操作过程中好的方面，并及时鼓励学生。要求同学课后多浏览有关网页，设计出更好的作品。