网页元素与布局教案（11篇）
1.网页元素与布局教案 篇一
《应用表格布局网页结构》教案
一、教学目标
1、知识与技能：
（1）了解表格网页的作用；
（2）掌握网页中表格的制作方法，表格属性的属性设置方法；（3）能根据网页设计内容，正确布局表格的结构；（4）尝试根据内容需要设计表格布局网页页面。
2、过程与方法：
（1）利用对比，加深学生对表格布局网页的认识；
（2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法；（3）通过自主探究，使学生掌握软件的使用规则，培养学生自主学习的能力。
3、情感态度与价值观：
（1）通过实践创作的过程，形成主动学习和利用信息技术、参与信息作品创作的态度；（2）培养学生注重吸取成功的经验，提高本身的信息素养。
二、教学重点
1、表格的制作及设置方法；
2、根据实际情况设计并应用表格布局网页。
三、教学难点
1、应用表格布局网页页面的意识；
2、合理制作表格，实现页面布局。
四、教学方法
教师讲解、演示、与学生任务驱动、合作学习相结合。
五、教学过程 教学过程
教师活动
学生活动
课前准备
将“学习素材”文件夹发送到学生机桌面；
打开并预习本课内容。
一、对比，引入新课
1、明确表格在网页制作时的作用：页面规划
（1）展示两个页面（1.htm和2.htm）并进行比较： 提问：①这2个网页，你喜欢哪个？为什么？ ②网页中的文字、图像对象如何插入？
③在Frontpage中打开2张网页，观察有什么不一样。
总结：这些线就是表格线，在做网页时，可以利用表格布局网页结构。（2）引出本课内容：探索用表格来布局网页的页面。（3）明确本课的任务：使用表格制作网页。
学生小组交流、讨论，对比加深印象，感受表格布局网页的作用 发现表格可以布局页面 明确本课内容
二、小组合作，体会用表格布局网页
2、模仿用表格布局网页页面结构（1）引导学生回忆Word中学过的表格内容，提示学生表格操作跟Word中具有很大的相通之处；
提问：还记得哪些表格的编辑方法？
（2）展示效果页，引导学生分析页面的结构，探索需要制作表格的结构；（3）讲解演示表格的制作及调整；（4）布置学生完成任务一：“心憩空间”网页
（5）展示成功学生的作品，引出表格属性的设置；
如：行列的插入、删除、单元格的合并、拆分、调整大小等。
根据网页内容来规划所需表格结构，了解网页中表格制作及设置的方法。学生小组合作，完成网页“chushi.htm”
三、小组合作，尝试用表格布局网页
3、小组交流并独立制作表格布局网页
（1）刚才我们一起体会用表格布局网页的网面结构：先分析确定所需表格的结构，然后根据实际制作设置表格布局网页页面结构。接下来我们就来尝试用表格布局我们的网页了；引入用表格布局“多彩的生物”网页；
（2）引导学生分析确定网页的表格结构；
（3）布置学生完成任务二：制作“多彩的生物”网页；可以根据自己的设计对网页进行适当的调整；
掌握根据网页确定所需表格的结构 能根据网页规划表格
小组合作讨论，根据学案提供的参考表格确定“多彩的生物”网页的表格结构，再独立完成图片、文字的插入。
四、作品展示交流与课堂总结
1、展示成功学生的作品并点评；
2、总结本课内容：为了制作的网页内容工整、美观，所以我们选择使用表格布局。本课我们尝试并使用了表格来规划布局网页，尝试设计个人网站的首页，自主设计版面，灵活使用表格进行网页制作。
掌握表格布局网页的常见技巧，加强表格布局网页的意识。
2.网页元素与布局教案 篇二
1 相关概念
DIV:DIV是层叠样式表中的定位技术,全称DIVision,即为划分。DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
CSS:CSS是英文Cascading Style Sheets的缩写。CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。DIV+CSS:DIV+CSS WEB
DIV+CSS:DIV+CSS是WEB设计标准,它是一种网页的布局方法。与传统中通过表格(table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。
2“国字形”网页框架布局实例
“国字形”网页布局在企业或页面信息量较大网站首页设计上经常使用。如图2所示。
“国字型”网页页面设计时基于 1024*768 的分辨率。因此所设计的网页背景图宽和高分别为950px,700px。
根据“国字形”网页设计图将网页页面分为顶部、中间左侧、中间内容区、中间右侧、底部五部分,中间左侧mid_left,中间内容区mid,中间右侧mid_right,底部定义为bottom。
2.1基于“国字形”网页框架的DIV代码
根据“三字型”网页设计框架,写出DIV代码为,构建网页基本框架。
2.2基于“国字形”网页框架的CSS样式表代码
根据“国字型”网页设计框架的DIV代码,写出相应的CSS样式表。
background-image 属性是指的是背景图片,可以通过这个属性设置相应DIV的背景图片。
3 结束语
本文介绍的二个使用DIV+CSS网页框架布局实例是现今网络中网站页面常用的布局形式。通过使用DIV+CSS技术在网页中的应用,真正实现了网页页面、表现和行为的分离,提高了网站更新维护的效率,提高了网页的浏览速度。
参考文献
[1]梁静琳.DIV+CSS布局技术在网页设计中的应用[J].武汉工程职业技术学院学报,2009(1).
[2]车元媛.基于DIV+CSS的网页布局技术应用[J].电脑知识与技术,2011(9).
[3]夏曼.用DIV_CSS布局技术实现网页设计[J].软件导刊,2010(10).
3.网页布局类型及布局技术的分析 篇三
关键词 网页布局；表格；框架；div+css
中图分类号 TP393 文献标识码 A 文章编号 1673-9671-(2012)051-0178-02
网页是网站构成的基本要素，而网页元素在网页中的组合决定了整个网站的最终效果，因此选择合适的网页布局类型及技术是关键。本文围绕网页布局的类型及布局技术进行了分析，并结合《三农服务网》实例进行了简单的说明。
1 网页布局类型分析
1.1 网页布局的类型
大致分为标题正文型、T字型、国字型、框架型、封面型、Flash型6大类。
1.2 布局类型的分析
1）标题正文型：页面分为上下结构，上面部分是标题、广告、导航等，下面部分是正文。
优点：结构清晰、简单，一目了然。
缺点：页面显得比较单调、枯燥。
2）T字型：页面顶部为网站标志、广告，下面部分的左列为主菜单，右列为主要内容。
优点：结构清晰，主次分明，容易上手。
缺点：页面显得呆板，变化较少，在页面停留时间久会感觉看之无味。
3）国字型：也可以称为“口”、“回”或“同”字型，页面分为上中下三部分，顶部是标题、广告，底部是网站的链接区、联系方式、版权声明等，中间部分分为左中右三列，左右分别列出一些小条，中间部分是主要内容。
优点：充分利用页面空间、增大信息量。
缺点：内容过多，显得页面拥挤。
4）框架型：一般分为左右框架型、上下框架型、综合框架型。左右框架型是一种左右分为两页的框架结构，一般左面是导航链接，右面是正文。上下框架型：与左右框架类似，区别仅仅在于它是把页面分为上下两页的框架。综合框架型：上面两种结构的组合，相对复杂的一种框架结构。框架型适合于聊天室、论坛、软件下载等网站的版面布局，
优点：框架型页面分割合理、布局结构清晰。
缺点：兼容性差、页面加载速度慢。
5）封面型：页面布局是一张精美的平面设计宣传海报，常用于网站首页。
优点：页面显得美观、大方、轻松，给人时尚优雅、自由的感觉。
缺点：文字信息量少，页面打开速度缓慢，浏览者不能直奔主题浏览信息。
6）Flash型：与封面型类似，只是其添加了动画效果与音频效果，表达的信息更丰富。
优点：灵活、表现力强，很直观的展现了网站的理念等，适用于网站的首页。
缺点：速度慢，浏览者需要漫长的过程才能浏览到所需的
信息。
2 网页布局技术分析
2.1 表格技术
表格用于在网页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。表格、行、单元格的标签分别为
页面一般由嵌套表格的技术实现。嵌套表格是在一个表格的单元格中的另一个表格。可以像其他任何表格一样对嵌套表格进行格式设置。但是其宽度受它所在单元格的宽度的限制。引入嵌套表格，由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中。
使用表格布局时，浏览器一般是等整个表格的内容都接收到以后才显示表格里的内容，因此尽量把一个表格拆分为若干个表格，加快打开页面的速度，优化页面。
优点：使用表格布局网页，可以精确地控制各网页元素在网页中的位置组织整个网页的外观，通过在表格中放置相应的图片或其他内容，即可有效地组合成符合设计效果的页面。
缺点：使用过多的表格，特别是嵌套表格，会造成页面垃圾代码过多且可读性非常差，影响页面下载速度，不符合W3C网页标准，网站不便于维护。
2.2 框架技术
框架把浏览器窗口划分为若干个区域，每个区域可以显示不同的网页。框架主要包括两个部分，一个是框架集，另一个就是框架。框架集是在一个文档内定义一组框架结构的网页。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。框架集文档本身不在浏览器中显示，它只是向浏览器提供如何显示框架以及在框架中显示哪些文档的信息，是一个用于存储框架的容器。框架则指在网页上定义的一个显示区域，每个框架都有自己独立的滚动条，方便访问者独立浏览这些框架。
优点：使用框架可以非常方便的完成导航工作，各个框架之间不存在干扰。框架还有个很大的优点就是网站的风格能保持统一，它把相同的部分单独制作成一个页面，作为框架结构一个子框架的内容给整个站点公用。
缺点：框架是有边框的，占用空间。采用过多的框架会增加下载网页所需的时间，影响网页的浏览速度，对于内容多、布局复杂的网站不宜采用框架布局，且框架结构的页面兼容性不好。
2.3 div+css
div+css是网站标准中常用的术语，是一种网页的布局方法，有别于传统的html网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。
xhtml是一种在html基础上优化和改进的新语言，在xhtml网站设计标准中，要求用div+css的方式来实现各对象的定位，即div定义网站结构（即布局网页）、css创建网站表现（即格式化网页元素），从而实现更加丰富的网页效果，提高网页的传输速度和维护更新效率。在xhtml网站设计标准中，不再使用表格定位技术，而是采用div+css的方式实现各种定位。
4.古老的网页设计布局 篇四
下图演示了九宫格的基本布局：
从上图可以看出，每一行包括三列，其中蓝色方块是顶角，这四个块是宽高固定的区域，而黄色的四个区域分别是四条边，这些都是要水平或垂直平铺的，而中间的橙色区域是装载内容的主要区域。
这样的结构是最有利于内容区域随屏幕分辩率不同而自动伸展宽高，这种结构也是网页设计师是最想要的一种布局结构，它灵动而从容。
下面我们就来实现它：
结构层：
因为它要适应八个方向的伸展，所以每个方向都用一个div来实现，少一个则灵活性就不足，
那么根据这个原理，我们可以得到如下的结构：
样式层：
根据结构，我们可以写出基本的样式。基本实现原理，是利用将总容器.box设置为相对定位并设置overflow:hidden;让超出它的地方全部被切除，并将其里面的八个方向的div设为绝对定位，并将它们的z-index设置为2，然后将四个角容器分别设置到四个角落上。
.box{overflow:hidden;position:relative;}
.t_l,.t_m,.t_r,.b_l,.b_m,.b_r,.m_l,.m_r {position:absolute;z-index:2;}
5.网页元素与布局教案 篇五
浮动 float
负边距 negative margin
相对定位 relative position
这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。
尝试之路
考虑以下DOM结构：
利用浮动元素的负边距来定位：
.main { float: left; width: 100%; } .sub { float: left; width: 190px; margin-left: -100%; } .extra { float: left; width: 190px; margin-left: -190px; }
这样我们得到了第一个尝试页面 pe_layout_example1.html.
可以看出，通过简单的负边距，已经让sub和extra定位到正确的位置。剩下的问题是如何让main也定位到正确的位置。
一个自然的想法是，给main的容器#bd添加padding:
#bd { padding: 0 230px 0 190px; }
效果请看： pe_layout_example2.html.
这样能让main定位到正确的位置，但sub和extra的位置不对了。这是一个思考的关卡。既然sub和extra的位置不对，那就想办法调整到正确的位置。相对定位隆重登场：
.sub { float: left; width: 190px; margin-left: -100%;position: relative; left: -190px;} .extra { float: left; width: 230px; margin-left: -230px;position: relative; right: -230px;}
demo页面： pe_layout_example3.html. 很明显，这就是圣杯布局！
组合这三种基本技术，我们可以继续尝试各种想法。比如伪绝对定位布局（这个布局不难想到，难的是第一个想到），类似的还有逆伪绝对定位布局（先都移动到最左边，然后再margin-right一个个移过来）等等。
在不增加任何额外标签的假设上，我尝试了各种想法，但始终都没找到完美的布局实现（圣杯布局是我觉得所有想法中最接近完美的）。
既然不添加额外标签时，完美布局的实现如此困难，那如果允许添加一个额外标签呢？在淘宝UED内部的探讨中，给main增加了一层包裹：
#main
里层main-content的作用就是将main定位到合适的位置，并方便设置padding等属性。想到此处，就像牛顿被苹果砸傻了一样，原来的main定位问题迎刃而解：
CSS仅需增加一行：
.main-wrap { margin: 0 230px 0 190px;}
demo页面： pe_layout_example4.html.
一切如此简单！除了添加了一个额外标签，其它各方面，表现都很完美（试了下IE5.5, 也没任何问题），
目前只用到了浮动和负边距，如果再引入相对定位，还可以实现三栏布局的各种组合：
.extra { float: left; width: 230px; margin-left: -100%;position: relative; left: 190px;} .main-wrap {margin-left: 430px;}
demo页面： pe_layout_example5.html.
仔细查看example5和example4的源代码，可以发现DOM结构是完全一样的，仅仅CSS稍有不同。这意味着HTML结构和CSS布局在一定程度上解耦了，我们开发HTML代码时，从内容出发即可，无需过多的考虑布局。这正是渐进增强在前端工作流程上的体现。
如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。因此请容许我给这个布局实现取名为双飞翼布局（Flying Swing Layout）.
就如上图中的鸟有各种姿势一样，利用双飞翼布局，我们也可以实现各种布局。这里有个尝试页面，利用双飞翼，实现了一套栅格化布局系统。
优点
实现了内容与布局的分离，即Eric提到的Any-Order Columns.
main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。
任何一栏都可以是最高栏，不会出问题。
需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;）
在浏览器上的兼容性非常好，IE5.5以上都支持。
不足
main需要添加一个额外的包裹层。
等待你的发现与反馈。
补充
双飞翼布局的想法与实现受了圣杯布局和UED内部讨论的PPT的启发。尝试后发现一切如此简单，都有点奇怪为什么网络上一直没有文章来阐述。
前些日子主要精力都放在了阅读ALA上的文章，没怎么注意其它信息。昨天才仔细阅读Eric的Any-Order Columns和Alex的One True Layout, 发现这种思路和想法早就有人尝试过了。比如Eric原文中的例子是定宽的，但稍微修改，就可以演化为双飞翼布局。Alex的One True Layout, 给的例子被墙了，就一直没细看，今天才找代理过去瞄了一眼，一瞄不要紧，原来One True Layout就是双飞翼，不过Alex只用到了浮动和负边距，因此没有提及main - sub - extra这种排列的实现。
此外，中午还有一个非常震惊的发现：Alessandro早做了一个很详细的页面Layout Gala, 列举了40种布局，用的就是双飞翼！
巧合让人有点沮丧，但更让我高兴。因为Alex和Alessandro的工作，证明了这种布局的普适性。因此不用像采用伪绝对定位布局时一样，得担心新技术带来的风险！可以说，双飞翼布局已经是一个成熟的布局，但因为Alex的被墙，以及Alessandro的宣传力度不够，导致这个布局被我重新“发现”了一次。特撰此文，并取名为“双飞翼布局”，希望这个布局能让更多的人知道，并应用于实践中。
6.网页元素与布局教案 篇六
《用表格为网页布局》是浙江教育出版社信息技术教材八年级上册第三单元第十五课的内容。本课是在学生学习建立网站站点后，开始尝试做第一张网页。通过本课的学习，是对表格知识的巩固和深入，更重要的是为后面的网页制作打下基础，所以本课是本单元的重点，起到承上启下的作用。前阶段学生已经学习了文本编辑、图片插入、网络基本知识、文件操作等内容，很多知识都可以迁移到本课来。八年级学生对电脑基本操作已经不再陌生，已经能够独立完成一定要求的学习任务，但是学生对于特定任务进行分析，整体规划能力相对还是比较欠缺的。本节课教学的作业设计中，我将注重培养学生这个方面的能力。根据课程标准和教材内容，我将本课的教学目标设计成三个方面：
知识与技能目标：
1、了解主页布局的常见布局图，并明确主页设计的基本要素；
2、理解用表格排版主页的作用；
3、掌握在网页中插入表格进行排版的技能；
4、学会设置表格属性，对表格进行编辑修改。过程与方法目标：
通过欣赏、借鉴他人的主页布局，取长补短，为自己的主页布局做铺垫。情感、态度与价值观目标：
1、通过作品欣赏，让学生意识到取长补短的可贵性，及在借鉴基础上的创新的重要性；
2、用表格排版网页解决网页版面杂乱问题，培养在遇到困难时灵活运用各种方法解决，强化建站信心。
为了实现这个教学目标，我将教学重点确定尾插入表格进行排版和更改表格属性。根据学生的思维障碍和学习情况的分析，我将难点定位于灵活掌握排列表格和设置表格属性。只有正确设置了表格的属性，才能美化和完善网页的布局。为了更好的突出教学重点，突破教学难点，圆满的完成教学任务，我在课前截取了典型的旅游网页图片素材并设置成框架形式让学生一目了然地看到表格所起的作用，并设置了几个学生需要突破的任务。
信息技术课是培养学生对信息技术的兴趣和意识，使学生养成良好的信息素养为宗旨，强调学生的自主学习和研究学习。上新课前，我要求学生两两合作，通过传统手工绘制草图的学习方式，设计你需要建立网页的框架布局，同时学会和与他人合作。为了让学生主动的参与学习，我在设计教学流程时，准备以学生“任务驱动”为主线，以教师为主导，以学生为主体，通过学生自主探究，合作交流完成教学任务。根据教学内容和学情的分析，本课我采用的教学方法有：讲解、练习、任务驱动、小组合作，学生可以通过小组合作、给定的任务等将本课学习用于实际操作。我将结合教学过程来具体分析。整个教学过程我分为以下四个部分来完成：
一、通过旅游网站的解析，直接引入新知，通过删除网页的背景、文字、图片后，呈现出一张网页的背后其实是表格起到重大的作用。所以学生心中就有个概念，原来做网页的前提是用表格固定框架。并结合书本p58页，了解网页常见的布局图。直觉、兴趣成为学生产生学习动力最直接的因素。
二、本节课的任务是让学生设计有关龙泉旅游的网页布局，我先让学生利用草图形式设计宣传龙泉旅游网页的框架，做这个的目的是为了学生能更顺畅、不会盲目的在电脑上操作，这为学生完成任务2提供基础。
三、巩固旧知，学习新知，解决问题。建立网页的前提是建站，学生对站点的认识已经不会陌生，根据教师提供的站点，再将网页布局呈现在主页上（学习新知）。通过例子的演示，学生将草图转移到网页上来。在操作过程中学生可能会遇到一些解决不了的问题，我会引导学生勇敢地提出问题，并告诉学生解决问题的方法：（1）自己思考（2）向同学和老师寻求帮助。（3）通过教材操作步骤P59，进行知识迁移。针对学生中普遍存在的问题，我将利用广播讲解演示，解决问题（学生应该会碰到在单元格内插入过大的图片后，影响相邻单元格位置变化，这里所要涉及的是表格的嵌套）；针对个别学生的问题，我将个别指导。设计意图：这个环节充分体现了学生的自主性，让学生不断尝试中发现问题，师生合作解决问题。体现了学生是学习的主体，学生把教材、同学、教师、电脑都作为 学习的帮助者。
四、作品展示及评价。根据课前设定好评价量化表，抽取部分学生作品展示给同学们，通过学生对自己作品的评价打分（自评），再让别的同学进行评价打分（他评）。但是课堂时间毕竟有限，让每位学生对自己设计的作品进行评价，然后同组之间进行互评，取长补短，学生可以从中找到自己的缺点和不足之处，也能学习到别人的长处。相互评价，也是获得最佳学习效果的重要途径之一。（问题补充：参考诸多网页，一般网页的边框是不显示的，如何将表格的边框线从页面中赶走，这里需要利用表格的属性进行隐藏边线，从而使网页页面更加美化。）
五、课堂小结。强调页面布局在网页设计中的重要性，肯定同学操作过程中好的方面，并及时鼓励学生。要求同学课后多浏览有关网页，设计出更好的作品。
7.网页设计中布局方式之比较 篇七
关键词：表格 DIV+CSS 布局
1 概述
在网页设计过程中，色彩的搭配、文字的变化、图片的处理等，这些都是不可忽略的因素，但除此之外，还有一个非常重要的因素——网页的布局。不同类型的网站采用不同的布局，不但能使网站结构合理化，也可以使访问者一看就明白：这个网站是做什么的。
目前网页常见的布局结构类型主要有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、标题文本型布局、框架型布局和变化型布局等。无论是哪一种布局結构，我们在布局时都应遵循以下三个基本原则：①主题鲜明：视觉设计表达的是一定的意图和要求，这就要求视觉设计不但要单纯、简练、清晰和精确，还要注意通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。②形式与内容统一：内容决定形式，形式反作用于内容，一个优秀的设计必定是形式对内容的完美表现。③强调整体性：注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页形式与整体内容的统一。
2 常见布局方式
在网页设计中，常见的布局方式一般有三种，第一种是使用表格（table），第二种是使用框架，另一种是使用DIV+CSS。下面我们将具体的对这三种布局方式进行说明与分析。
2.1 表格布局方式
表格是一种简明扼要而内容丰富的组织和显示信息的方式，在文档处理中占有十分重要的位置。使用表格既可以在页面上显示表格式数据，也可以进行文本和图形的布局。由于表格使用简单而且灵活，是最早也是使用最广泛的网页布局技术。通过使用相关的一系列表格标签，如table、th、tr、td、caption、thread、tfoot、tbody、col等，并对表格单元格进行合并或拆分以及在表格中嵌套表格等操作，从而得到需要的布局。
表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响，而且在定位图片和文本时非常方便。但当使用过多表格时，页面下载速度将会受到影响。并且灵活性较差，不易修改和扩展。
2.2 框架布局方式
框架也是网页设计中对页面布局控制的一种重要手段。使用框架可以将一个浏览器窗口划分为多个区域，每个区域可以分别显示不同的网页。访问者浏览站点时，可以使某个区域的内容永远不更改，但可通过导航条的链接更改主要框架的内容。框架结构常被用在具有多个分类导航或多项复杂功能的网页上。框架结构的实现主要是利用…标签。
框架布局能有效地实现页面导航，方便用户浏览网页，并在框架窗口中支持滚动条，从而能显示更多内容。由于框架集中相同的内容只用下载一次，所以能减少页面下载时间。但兼容性略差。
2.3 DIV+CSS布局方式
DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。
DIV是指HTML标记集中的标记
①表现和内容相分离
将涉及部分剥离出来放在一个独立样式文件中，HTML文件只存放文本信息，符合W3C标准。
②提高搜索引擎对网页的索引效率
用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容。
③代码简洁，提高页面浏览速度
对于同一个页面视觉效果，采用DIV+CSS重构的页面容量要比TABLE编码的页面文件容量小得多，代码更加简洁，前者一般只有后者的1/2大小。对于一个大型网站来说，可以节省大量带宽。
④易于维护和改版
由于内容和样式的分离，使页面和样式的调整变得更加方便。只需简单的修改几个CSS文件就可以重新设计整个网站的页面。
3 三种方式比较
3.1 应用的灵活性
表格方式是最常用的网页布局技术，它使用简单而且灵活，通过表格的嵌套，可以进行比较复杂的网页布局；框架方式由于其提供了固定的布局样式，所以适合布局一些特殊格式的网页，例如论坛的布局常使用这一方式。而DIV+CSS方式使用也比较简单，可以进行复杂的布局。
3.2 布局的重构性
无论是表格还是框架，最终生成的网页布局文件是布局格式控制和网页内容混在一起，这样对网页布局进行较大改动甚至重新布局时，就会显得非常困难和麻烦，有可能需要重新制作页面。而DIV+CSS方式布局和内容表现是一个分离体，使用属性就可以轻松改变布局结构和风格。
3.3 网页浏览
利用表格布局的网页在下载的时候必须等整个表格内容都下载完毕之后才会一次性显示出来，而利用DIV块的CSS布局的页面就科学得多，各个子块可以分别下载显示，从而提高了页面下载速度，搜索引擎的排名也会因此而提高。但从兼容性的角度来说，框架方式和DIV+CSS方式都表现差强人意，有待进一步提高。
参考文献：
[1]梁斌，柯华坤.《网页布局技术比较与应用优化》，中国教育技术装备，2009，11.
[2]马东.《网页与网站设计》，东方出版社，2008年.
[3]王俭敏.《CSS+DIV网页样式与布局》，电子工业出版社，2008.
[4]郑宁宁.《浅析DIV+CSS网页设计技术》，山东省农业管理干部学院学报，2008.
[5]扬森香，聂志勇.《网页设计与制作案例教程》，北京大学出版社，2009.
[6]严加琼.《浅析网页设计中的网页布局》，电脑学习，2010，1.
8.网页设计中视觉元素的使用 篇八
一、网页设计中存在的问题
1.视觉元素的`堆砌和内容的缺乏
网页中除了包括平面视觉构成的各个元素和布局机制之外，还包括了动态、多媒体、交互元素等网页特有的视觉元素。目前市场上，有很多网页在设计上缺乏审美意识，在布局规划上也有欠考虑，只是以简单的堆砌进行设计从而浪费了这些资源。网页中的文字、图像、动画、色块、广告窗口等杂乱无章的罗列着，这些都在挑战用户在浏览网页时的忍耐极限。而某些网页设计精美，在浏览者对其美观的界面进行赞叹后，却发现其内容空洞，收效甚微。
2.网页设计的利益性影响
在网页设计制作时，由于受到利益性的影响，大多数网页的设计者故意诱使用户不断刷新网页或点击广告，将真正的资源链接发在不被注意的位置，从而使浏览者将目光放在广告区域。我国国内的某些网站，经常存在悬浮的广告图片，挡住了下层页面的真正内容。这些蓄意干扰，是网页设计中的大忌。
3.模仿让网页设计失去创造性
我国网页设计中的一大软肋便是缺乏独立创造性，很多网页设计都是模仿和照搬，千篇 一律的网页不能给用户带来欣赏的愉悦感，只有与人内心深处情感共鸣的设计才是好的艺术设计。
4.技术因素带来的视觉困扰
网页设计中经常利用到的图片、影像、文字等内容需要通过专门的软件才能在计算机的屏幕上显示出来。所以网页的观赏效果不仅受到设计者和出版单位的影响，还受到用户电脑配置的制约。因为机器的不同有可能会导致网页内容面目皆非。而在观看flash动画的媒体形式时，必须下载特定的插件才能播放，否则将显示空白框和提示文字给浏览者。
二、网页设计中视觉元素的使用原则
1.主题明确、鲜明突出
网站的题材，也就是主题的定位是网站设计中首先要解决的问题。在网站主题的定位问题上，我们首先要明确建立网站的目的，这是从网站建设者的角度来考虑的。另一方面，则是网站受众人群的基本情况，明确他们的需求，以确定网站为使用者所提供的信息或经验。确定主题之后，网站在建设过程中，提供的全部信息必须根据主题进行选择、鉴别和整理。信息传达的目的性越明确，针对性越强，传达的成功率就会越高。在明确网站的主题后，设计的全过程都要围绕这一主题展开。主题必须要做到鲜明突出、力求简洁、要点明确，尽量以简单明确的语言和画面告诉所有人网站的主题，从而吸引对本网站有需求的人。
2.设计目的明确、形式鲜明
我们在进行网页设计时，要铭记网页形式的核心是要为内容服务的，但是我们不能忽略了其所具有的独立性和艺术规律。明确的设计目的和清晰的设计形式是我们设计网页时必须要明确的，因为网页设计的根本目的便是为了更好的体现和传达信息，为浏览者提供其所需要的信息或经验。在网页设计中我们要用不同形式的设计来体现不同的内容，如政府机构的网页必须要简洁、庄重，而商业网页必须根据自己商品的特征采取不同的表现形式。
三、网页设计中视觉元素的使用方法
1.文字
在网页的设计过程中，文字是设计者必须要用到的视觉元素之一，包括静态文字、动态文字、图像和色彩文字等。文字的选用包括文字的大小、样式、颜色、行距等等，必须要根据不同的版式、不同的含义来选择不同的文字。文字的使用须要简洁、明了、清晰，使浏览者产生愉悦感，从而更好的传达信息的目的。
2.图形
在网页设计中，图形的合理运用能够丰富浏览效果，更加生动、具体的表达所要传达的信息。在网页设计中采用图形，可以为浏览者带来全新的视觉感受。图形的使用不仅增加了网页提供的信息类型，也在更大程度上类化了网页界面，不仅使信息的传达多样化，也丰富了网页界面的视觉。
3.色彩
人的视觉最为敏感的元素就包括色彩，事物的色彩是我们的第一印象。在网页界面的设计中，根据不同的主题、不同的内容来选取色彩，是优秀的网页设计人员的能力。在网页中利用不同的色彩来传达不同的信息的内容，可以使所要传达的内容更加丰富和真实。
4.多媒体
多媒体是由包括声音、视频、动画等一系列元素的组合而成的，突破了传统媒体以视觉为主要传播信息的方式，增加了听觉、运动视觉的感知能力，使人们在接收信息的途径更加的多元化。网页界面最大的优势便在于增加了多媒体元素，这是网页界面独有的信息传达载体，它可以满足不同的浏览者的不同需求，丰富了视觉和听觉效果。
参考文献
[1] 黄海燕 张辉.网页设计与平面设计[J].包装教程，第25卷.
[2] 南波飞.网络媒体的视觉传达设计研究[D].湖大大学硕士学位论文，.
[3] 王绍强.版式设计风格化[M].广西：广西美术出版社，.
9.《网站建设与网页设计》教案 篇九
教案
学期：2014-2015-1 班级：2012软件工程
2012计算机科学与技术
课时：44学时 教师：李念
第1讲 HTML基础
1.1 教学目的和要求
1.了解HTML的发展历史和HTML5的特性；
2.掌握HTML的文档结构、代码规范和网页文件的创建过程； 3.掌握搭建支持HTML5浏览器环境的方法。
1.2 教学重点和难点
1.HTML5的新特点； 2.HTML5的新元素；
1.3 教学方法及手段
实例教学，讲授与演示结合。
1.4 教学内容
1.4.1 HTML简介
HTML是HyperText Markup Language（超文本置标语言）的缩写，是一种为普通文件中某些字句加上标签的语言，其目的在于运用标签（tag）对文件达到预期的效果。
HTML5的特性及元素：
(1)实现Web应用程序：绘画的Canvas元素，该元素就像在浏览器中嵌入一块画布，程序可以在画布上绘画；更好的用户交互操作，包括拖放、内容可编辑等；扩展的HTMLDOM API（Application Programming Interface，应用程序编程接口）。
(2)更好地呈现内容：基于Web表现的需要，HTML5引入了更好地呈现内容的元素；用于视频、音频播放的video元素和audio元素；用于文档结构的article、footer、header、nav、section等元素。
1.4.2 HTML编写规范
HTML文档由标签和被标签的内容组成。标签能产生所需要的各种效果。其功能类似于一
个排版软件，将网页的内容排成理想的效果。其格式为：
<标签> 受标签影响的内容 每个标签都有一系列的属性。标签通过属性来制作出各种效果，格式为： <标签
属性1=“属性值1” 属性2=“属性值2” „> 受标签影响的内容 。不推荐使用的标签：在HTML中，某些标签不推荐使用，例如，、、、、、、、、、等标签。
代码的缩进：在编写HTML代码时要注意使用代码缩进来提高程序的结构性和层次性。
1.4.3 网页文件的创建过程
用记事本创建网页 用DW软件创建网页
1.4.4 搭建支持HTML5的浏览器环境
目前，Microsoft的IE系列（仅有IE9及其以上版本）浏览器，以及Opera Software的Opera与Google的Chrome浏览器。
1.4.5 小结
本次课主要讲述了网页设计的步骤和要点以及HTML5的新特征。
第2讲 HTML标签
2.1 教学目的和要求
1.掌握基本的文字与段落标签的使用；
2.掌握超链接、图像、表格和列表标签的使用方法和基本属性； 3.能够进行基本的网页排版。
2.2 教学重点和难点
1.各类标签的使用方法和属性设置； 2.嵌套列表的使用。
2.3 教学方法及手段
实例教学，讲授与演示结合。
2.4 教学内容
2.4.1 文字与段落排版
注释标签 强制换行标签
段落标签
10.网页版面布局设计教学之我见 篇十
[关键词]确立主题 布局形式 色彩搭配 版面布局
[中图分类号] G71 [文献标识码] A [文章编号] 16746058（2016）210123
网页设计与制作课程中，网页的版面布局设计是至关重要的一个方面，它关系到一个网页在欣赏者第一眼看到时，能否合“眼缘”，能否留下深刻的印象和驻足的欲望。针对页面的版面布局设计，结合实践应用，笔者有了一些自己的心得和见解，从以下几个方面做一个简单的总结。
一、网站主题的确立是设计之本
一个网站最终要设计成什么样子，主要还是由网站的主题来决定的，主题就是网站的灵魂，也是网站设计的第一步，只有主题明确了，设计者才能围绕这个主题去打开思路，寻找设计灵感。
二、版面布局的形式
在确立了网站主题之后，网站的设计也就有了大概的风格和方向了，接下来要做的就是设计网页的版面。从理论上来说，版面布局的方法不拘一格，没有固定的方式和方法，即使同样的主题同样的素材，不同的人根据各自的理解和解读可以设计制作出不同风格的页面效果来。但不管是哪种布局方法，大概不外乎以下几类。
一种是按頁面的区域分布划分，可以分为“T”形、“口”型、“三”型等几种形式。从这几个形象的字面表达上，我们不难想象出分别是一种什么样的布局形式。
一种常见的是对称样式的，当然所谓的对称并不是一对一的绝对对称，那样看起来会比较呆板，可以通过上下或左右结构划分以及色彩的合理搭配形成一种对称的效果。
还有一种是现在比较常用的所谓“豪华”型版面形式，首页设计成一个比较漂亮的海报或者是制作成优美的flash影片。这样的版型设计在广告及宣传类型的网页中比较常见，突出特点是制作比较新颖，画面漂亮，视觉冲击比较强。
当然，要做出一个完整漂亮的网页，靠单一的版面布局样式是不够的，往往是几种样式的综合运用。在实践教学过程中，学生大多比较喜欢第三种样式的网页，但也只是作为欣赏之用，要做出这么有冲击力的效果，不光需要时间还需要有一定的专业功底，经常是几种工具软件齐上阵做出来的。
三、网页版面的色彩搭配
协调，是网页版面色彩搭配的基本原则，既不能太单一，也不要搞得太花哨，把整个页面弄得像个调色板一样，要合理搭配，达到“总体协调，局部对比”的效果。在色彩的运用和搭配上，学生得具备一定的审美观，懂得色彩的一些基础知识。对于色彩在设计中的搭配技巧，则需要通过不断的实践以及经验的积累慢慢悟出来。这种领悟不是靠讲解理论就能够懂得的，很多来源于生活。笔者在讲课过程中曾经举过这样一个例子：假设我们要分别制作一个清明节、一个中秋节、一个国庆节的网页，让学生自己选择以上三个节日网站的主色调。学生通过讨论之后最终制定了几种方案，清明节的主色调选用灰色，通过有点哀伤的灰色而不是太沉重的黑色，来表达这个节日人们对先人的怀念和哀悼之情；用金黄色来烘托中秋节家人团聚时和和美美的温暖氛围；而国庆节他们选择用热烈的大红色调来表达全国人民举国同庆的壮观和庄严。像这些不能单纯地靠理论知识去灌输，而是要通过日常生活中所见所得的引导，让学生自己去领悟和体会。
四、网页版面布局表格嵌套的问题
页面的版面设计方法比较常用的有表格层、框架、模板等。最简单也是最基本的方法就是表格布局法。在实践教学中，这种方法因为简单，界面清晰，学生接受起来比较容易，也多数用这种方法做页面。但就是这种简单的方法在设计过程中也会遇到一些小问题。
1.插入表格及表格的嵌套。在页面总体布局的时候，我们一般用的是直接插入固定宽度的一个表格，当然宽度由页面的宽度来决定。而页面内部的一些小的分区域，一般用嵌套表格，也就是在表格内再套表格的方式，且是用百分比的形式，这样嵌套的表格会自动去适应外部表格的变化。
2.表格嵌套中的小问题。开始的时候学生不理解为什么要用百分比的形式嵌套表格，笔者结合“青岛西海岸旅游网站”的主页设计进行了讲解。在制作页面的导航条时，直接用插入固定宽度的表格，而不是嵌套表格。因为导航项目并不一定都是字数一样的，在输入的过程中，由于宽度不统一，表格会自动变宽，而且调整其中的一个单元格的宽度时，会影响到其他的单元格，所以控制起来比较麻烦，很难统一导航内容的宽度，做出来的导航条很不整齐，影响整体美观。而利用百分比的形式再嵌套一个表格之后，这个嵌套的表格会自动适应原来上一层表格的宽度，明显的效果是制作出来的导航条宽度是平均分配的，看起来比较规整，比原来直接插入一个表格的效果好很多。
通过以上几个方面的设计及实现，一个基本的网页版面的框架已经出来雏形了，接下来主要的工作就是往这个框架里面添加网页元素，逐步丰富网页内容。那将会涉及更深更广的内容，还需要学生不断去学习和探索。
11.网页元素与布局教案 篇十一
引用上一篇：Jquery的Interface elements for jQuery里面的拖拽布局存在一些bug，效率也比较低，GoogleUI google_drag.js有些乱，不是很容易理解，Discuz!NT Space代码满天飞，所以自己参考GoogleUI的思想，简化和优化了一些操作代码，实现了博客系统基本的拖拽布局的效果，暂时未考虑其他浏览器的兼容性问题。下一步准备改造成Jquery的插件形式，并增加一些渐隐渐现和动画效果，并逐步实现一些ajax的添加删除操作，嵌入基于JQuery的音乐播放器，图片浏览器，文本编辑器。
预览体验：
html代码：
下面的可拖拽模块的mid为其在数据库中的id号;
每td列最后都有一个，并隐藏起来，用来可以推拽元素到此隐藏元素的前面，或者某td列本来没有元素，
也可以拖拽到此列上面：
1
2
3
4
5博客推拽布局示例
6
7
55
56
57
58
59
60
61
62
63title1
64+expend×delete
65content1
66
67
68title4
69+expend×delete
70content4
71
72
73
74
75
76title2
77+expend×delete
78content2
79
80
81
82
83
84title3
85+expend×delete
86content3
87
88
89
90
91
92
93
94
95
96
97neworderis：
98
99
100
101
102
js代码：
主要是两个对象，dragLayout对象(table元素) 包含 dragModule对象(可拖拽的元素)
1(function($){
2
3$.fn.DragLayout=function(obj){
4//得到所有可拖拽的模块
5this.getModules=function{
6returnthis.find(“div[@mid]”);
7};
8//得到所有可推拽的模块的位置offset，在后面判断最近元素时候起作用
9this.getModulesPostion=function(){
10vari=0;
11varmodulesPostion={};
12this.modules.each(function(){
13modulesPostion[i]=$(this).offset();
14i++;
15
16});
17
18returnmodulesPostion;
19};
20//初始化模块和模块位置
21this.init=function(){
22this.modules=this.getModules();
23this.modulesPostion=this.getModulesPostion();
24};
25//回调函数，完成事件
26this.onEnd=obj.onEnd;
27//初始化
28this.init();
29var_self=this;
30//循环创建dragModule对象
31returnthis.modules.each(function(){
32newdragModule(this,_self);
33});
34
35}
36
37
38vardragModule=function(ele,parent){
39//对应的div拖拽元素
40this.ele=$(ele);
41//父对象，即dragLayout对象
42this.parent=parent;
43//标题栏，用于鼠标拖拽
44this.title=$(this.ele.children()[0]);
45
46//记录原先的邻居节点，用来对比是否被移动到新的位置
47this.origNextSibling=this.ele.next();
48this.init.apply(this);
49
50};
51
52dragModule.prototype={
53
54init:function(){with(this){
55var_self=this;
56//获取移动的时候那个灰色的虚线框
57ghostLayer=$(“#ghost”);
58//鼠标按下时推拽开始
59title.mousedown(function(event){
60_self.dragStart(event);
61});
62
63title.hover(function(){
64title.fadeIn(“slow”);
65},
66function(){
67
68}
69);
70
71title.css(“cursor”,“move”);
72
73}
74},
75
76//开始拖拽设定一些位置信息
77dragStart:function(evt){with(this){
78var_self=this;
79evt=evt?evt:window.event;
80
81//鼠标相对于浏览器的位置减去元素的位置
82//得出鼠标相对于元素的相对位置，便于拖拽时计算元素的新位置
83x=evt.clientX-ele.offset().left;
84y=evt.clientY-ele.offset().top;
85
86//绝对位置，top和left就起作用了,就可以推拽了
87ele.css(“position”,“absolute”).css(“zIndex”,“100”).css(“top”,ele.offset().top).css(“left”,ele.offset().left);
88
89//将那个灰框设定得与正在拖动的对象一样高
90ghostLayer.css(“position”,“relative”).css(“display”,“block”).css(“height”,ele.innerHeight()).css(“width”,ele.innerWidth());
91
92//把灰框放到这个对象原先的位置上
93ghostLayer.insertBefore(ele.next());
94
95//鼠标按下再移动的事件，鼠标移动，元素也跟着走
96$(document).mousemove(function(event){_self.drag(event);});
97//释放鼠标的事件
98$(document).mouseup(function(event){_self.dragEnd(event);});
99}
100},
101
102//拖拽时实现元素跟鼠标走
103drag:function(evt){with(this){
104
105var_self=this;
106evt=evt?evt:window.event;
107//计算元素的新的位置
108ele.css(“filter”,“alpha(opacity=70)”).css(“opacity”,“0.7”).css(“left”,evt.clientX-x).css(“top”,evt.clientY-y);
109
110//被拖拽到的新的元素(当然也可以是原来那个)
111varfound=null;
112//最大的距离
113varmax_distance=10000;
114//遍历所有的可拖拽的element，寻找离当前鼠标坐标最近的那个可拖拽元素，以便前面插入
115vardistance=null;
116
117vari=0;
118
119parent.modules.each(function(){
120//利用勾股定理计算鼠标到遍历到的这个元素的距离
121distance=Math.sqrt(Math.pow(evt.clientX-parent.modulesPostion[i].left,2)+Math.pow(evt.clientY-parent.modulesPostion[i].top,2));
122i++;
123//如果更小，记录下这个距离，并将它作为found
124if(distance
125max_distance=distance;
126found=$(this);
127}
128});
129
130
131//找到落脚点就先把灰框插进去，我们看到的那个灰框停靠的特效
132if(found!=null&&ghostLayer.next()!=found){
133
134ghostLayer.insertBefore(found);
135}
136}
137},
138
139//鼠标释放时推拽完成
140dragEnd:function(evt){with(this){
141var_self=this;
142evt=evt?evt:window.event;
143//卸载事件
144$(document).unbind(“mousemove”);
145$(document).unbind(“mouseup”);
146
147
148//把拖拽时的position=absolute和相关的那些style都消除
149
150ele.css(“position”,“relative”).css(“filter”,“alpha(opacity=100)”).css(“opacity”,“1”).css(“zIndex”,“”).css(“left”,“”).css(“top”,“”);
151
152//将灰框隐藏起来
153ghostLayer.css(“display”,“none”);
154
155
156//如果现在的邻居不是原来的邻居了后者邻居就是它本身
157if(ghostLayer.next()!=origNextSibling&&ghostLayer.next()!=this.ele){
158//把被拖拽的这个节点插到灰框的前面
159ele.insertBefore(ghostLayer.next());
160
161//从新初始化可推拽元素对象，可以设定它们的新位置，为下面的拖拽操作做准备
162parent.init();
163
164//回调函数，拖拽完成可对dragArray进行处理
165parent.onEnd.call(this,parent.modules);
166
167}
168
169ghostLayer.insertAfter(parent);
170}
171}
172}
173
174
175
176})(jQuery);
css代码：
Code
1body{}{
2font-size:12px;
3}
4
5input{}{
6border:1pxsolid#ccc;
7background:#f5f5f5;
8}
9
10#main{}{
11TABLE-LAYOUT:fixed;border:1pxsolid#ccc;
12}
13
14#maintd{}{
15VERTICAL-ALIGN:top;WIDTH:32%
16}
17
18
19#other{}{
20margin:20px;
21}
22
23.module{}{
24width:100%;
25position:relative;
26border:1pxsolid#ccc;
27margin-bottom:10px;
28padding:0px;
29}
30
31.module.title{}{
32float:left;
33border-top:5pxsolid#ccc;
34background-color:#f5f5f5;
35font-size:13px;
36color:#990000;
37width:40%;
38}
39
40.module.control{}{
41float:left;
42color:#999;
43border-top:5pxsolid#ccc;
44background-color:#f5f5f5;
45width:60%;
46margin:0px;
47text-align:right;
48cursor:pointer;
49}
50
51.module.content{}{
52float:left;
53padding:5px;
54border:1pxsolid#f5f5f5;
55width:96%;
56}
57
58.block{}{
59width:1px;height:1px;position:relative;overflow:hidden;
60}
61
62#ghost{}{
63border:2pxdashed#990000;
64position:absolute;
65display:none;
66top:0px;
67left:0px;
68margin-bottom:10px;
69}
【网页元素与布局教案】推荐阅读：
化学元素与人体健康教案09-07
组成细胞的元素教案06-16
网页的美化教案10-13
网络游戏与网页游戏策划案格式08-08
网页设计与制作实训报告要求09-11
网页首页设计与安卓音乐播放器制作实习报告08-23
大学元素化学09-01
元素分析方法探讨08-25
动画表演的人体元素06-22