渐进增强式布局探讨（下）网页设计
【简介】感谢网友“TCGLOBALWORK”参与投稿，今天小编就给大家整理了渐进增强式布局探讨（下）网页设计（共5篇），希望对大家的工作和学习有所帮助，欢迎阅读!
篇1：渐进增强式布局探讨（下）网页设计
上篇《渐进增强式布局探讨（上）》中讨论了各种已有的布局实现，仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：
浮动 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的宣传力度不够，导致这个布局被我重新“发现”了一次。特撰此文，并取名为“双飞翼布局”，希望这个布局能让更多的人知道，并应用于实践中。
本文来自：lifesinger.org/blog/?p=659
篇2：渐进增强式布局探讨（上）网页设计
来看一个经典的三栏布局：
从内容出发（渐进增强的核心思想），一份合理的HTML结构如下：
main是主要内容，sub是辅助内容，比如导航、相关文章等，extra是额外信息，比如广告等，具体含义根据实际情况来定，书写HTML文档有个非常重要的原则是：重要的内容放前面。这能让文档更富语义，能提高可访问性，对SEO也更友善。
写好上面的代码后，我们再来看看如何实现三栏布局。（书写HTML时，尽量以内容为向导，避免一上来就考虑布局，这是渐进增强在工作流程中的体现）
Table布局
经典得一塌糊涂的表格布局，在渐进增强面前落花流水——表格布局要求书写HTML代码时，首先考虑布局，而不是内容。不嗦，直接枪毙。
Float布局
浮动布局满天飞：
优点是简单，缺点呢？我觉得最主要的一个缺点是对HTML结构有要求，比如上图中的三栏布局，要求sub, main, extra在DOM树中也是依次排列的。也就是说，布局会影响HTML文档流的顺序，需要一开始就考虑，这和渐进增强提倡的工作流程冲突。
在渐进增强的领导下，只好将浮动布局关禁闭了。
绝对定位布局
绝对定位非常简单，非常精准。但面对不可预料的高度时，绝对定位就死翘翘了。
废话少说，直接关禁闭。
负边距布局
Ryan Brill在写了一篇文章：Creating Liquid Layouts with Negative Margins. 文中的“发现”立刻让布局世界迎来了“负来负去”的新时代。对于上面的三栏布局，需要先调整DOM结构：
xxxxxBxxxxx
最终的CSS实现请看这里。请仔细阅读Ryan的原文，可以发现负边距能解决两栏布局中文档结构的问题（main可以放在sub前面），
但对于三栏布局，Ryan给出的解决方案需要添加额外的包裹层，对DOM结构也依旧存在依赖关系。
这个方法的最大价值是：开启了负边距的神奇大门，让布局的实现思路立刻活跃了起来。
圣杯布局
，Matthew Levine开始寻找布局圣杯：In Search of the Holy Grail. 这是一篇让人赞叹振奋的文章。Matthew灵活运用容器的内边距、浮动元素的负边距和相对定位，接近完美的实现了三栏布局。DOM结构也很好，无需额外标签。但是，我们来看看多达27页的评论吧。圣杯布局最令人头疼的是：在IE6下，左栏经常会神奇消失！！！（比如将IE6的窗口高度拖小点）评论中还反馈在IE7下也存在不少问题（我测试后，发现在IE7正式版下没问题，评论中的IE7可能是beta版）。另外在Chrome下表现也有点诡异，需要小小hack. 还有那繁琐的padding, margin, left, right计算，时刻需要一颗清晰的大脑，喝点小酒就彻底晕了……
这里还有篇文章专门分析了圣杯布局在IE6下的Bug: Jump on hover in Ala’s Holy Grail layout.（万恶的IE6啊，浪费了我们多少宝贵的时间）
总之：这是一个很美妙的布局，但在IE6尚未退出历史舞台的当今，圣杯布局可能并不是我们真正要找的圣杯。
伪绝对定位布局
聪明的同行们对完美布局的追求孜孜不倦。我们迎来了奥运。Eric Sol 给奥运的献礼是一个聪明的布局尝试：Faux Absolute Positioning.
这个布局思路很简单：先相对定位到最右边，再用margin-left移过来。关于这个布局，曾经引发了淘宝UED内部的热烈讨论。若干月后，我和明城在不同的项目中采用了这一方法，结果发现在ie下，某些页面会闪屏（页面加载时能看见左移）。当时项目紧，没细究，上周想重现却怎么也重现不了（明城说页面非常复杂的时候会闪屏，但具体原因没找出来）。今天看原文的评论，有人指出在IE6下，设置背景图会导致这个布局彻底完蛋。
仔细想来，这个布局最让人担心的是：为什么一开始要将所有item都left: 100%? 这个太邪恶了，让人不放心。
“借尸还魂”的Table布局
乍一看，这个布局很雷人：基于display:table的CSS布局。作者作了解释：在css里使用table-cell之类的声明，仅是声明渲染方式，并不影响HTML文档中的语义。从这个角度讲，这种布局方式的确不错，而且很容易就可以做到等高，也不用考虑清除浮动等扰人的问题。
但是，又是IE成了绊脚石。在IE中，这个布局需要IE8才支持。不过，即便所有浏览器都支持了，我为什么老觉得有点“借尸还魂”的感觉？
小结
可以看出，圣杯布局和伪绝对定位布局比较符合渐进增强的工作流程。圣杯布局里，把margin发挥到了极致（让我对浮动元素的负边距有了彻底的了解），但在IE6下的Bug让人很恼火。伪绝对定位布局则让人很不放心left: 100%，用来解决原文中的问题感觉不错，但如果用来作为整个页面的布局，则有点邪恶。
布局中究竟有没有圣杯呢？下一篇中将尝试给出一个“最佳”答案。
本文出自：lifesinger.org/blog/?p=631
篇3：常见的网页布局设计模式
1、“国”字型
也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
2、拐角型
这种结构与上一种其实只是形式上的区别，其实是很相近的，上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类型是最上面是标题及广告，左侧是导航链接。
3、标题正文型
这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些文章页面或注册页面等就是这种类。
4、封面型
这种类型基本上是出一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分是企业网站和个人主页，如果说处理的好，会给人带来赏心悦目的感觉。
5、“T”结构布局
所谓“T”结构布局，就是指网页上边和左边相结合，页面顶部为横条网站标志和广告条，左下方为主菜单，右面显示内容，这是网页设计中用得最广泛的一种布局方式。在实际设计中还可以改变“T”结构布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图片、导航。或正文不等两栏式布置，通过背景色的区分，分别放置图片和文字等。
这样的布局有其固有的优点，因为人的注意力主要在右下角，所以企业想要发布给用户的信，大都能被用户以最大可能性获取，而且很方便，其次是页面结构清晰，主次分明、易于使用。缺点是规矩呆板，如果细节色彩上不注意，很容易让人“看之无味”。
6、“口”型布局
这是一个形象的说法，指页面上下各有一个广告条，左边是主菜单，右边是友情链接等，中间是主要内容。
这种布局的优点是页面充实、内容丰富、信息量大，是综合性网站常用的版式，特别之处是顶部中央的一排小图标起到了活跃气氛的作用。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站使用多帧形式，只有页面中央部分可以滚动，界面类似游戏界面。使用此类版式的有多维游戏娱乐性网站。
7、“三”型布局
这种布局多用于国外网站，国内用得不多。其特点是页面上横向两条色块，将页面整体分割为4个部分，色块中大多放广告条。
8、对称对比布局
顾名思义，它指采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型网站。其优点是视觉冲击力强，缺点是将两部分有机地结合比较困难。
9、POP布局
POP源自广告术语，指页面布局像一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类网站，优点显而易见：漂亮吸引人，缺点是速度慢。
篇4：标准化设计解决方案 Part 2：简短精悍的样式 Chapter 12 CSS布局网页设计
系列文章索引：《标准化设计解决方案》
标准化设计解决方案 - 标记语言和样式手册
Web Standards Solutions The Markup and Style. Handbook
Part 2: Simplebits Of Style 简短精悍的样式
Chapter 12 CSS布局
本书到此为止,讨论的主要是页面内部元素,也就是内容,但是大结构怎么办?长久以来,设计者都依赖表格进行分栏布局,常常在表格之内嵌套其他表格以便达成恰巧正确的间隔,视觉效果.这些庞大的排版内容不仅下载很慢,维护起来也很费心力,更别提文字浏览器,屏幕阅读器,小屏幕设备根本无法正确读取了.
在这一章内,将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局.
稍后在“技巧延伸”中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密.
要如何以CSS作出两栏版面布局?
答案是有好几种方法,为了带领你起步,同时帮助你了解两种常见方法的差异(浮动与定位),因此先把焦点放在四种不同的方法上,在此每一种方法都能做出两栏布局,同时具备页首和页尾.
我的愿望是:你能以本章作为指引开始构建一个网站,并发挥本书其他章节之内的方法制作内容.
我们将讨论的四种方法都应用在文档的与标签之间,同时我会在开始讨论每种方法之前介绍将会使用的标记语法结构.
为了让你了解围绕着每种方法的页面结构,让我们大致看一下还需要加入些什么:
“www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
CSS Layouts
...方法示范...
为了让你可以了解要达成的版面配置,请看图12-1:这就是我们想要完成的分栏版面布局.
图12-1 两栏布局的框线图
方法A:浮动侧边栏
...页头部分...
...侧边栏部分...
...主体部分...
...页脚部分...
上面就是我们要以CSS的float属性制作成分栏布局的标记源代码,使用标签把页面元素分成几个逻辑段落,每个都设定了唯一的id:
#header: 包含标题图片,导航栏等
#sidebar: 包含额外的内容链接与相关资讯
#content: 包含主要的文字内容,也是页面的焦点所在.
#footer: 包含版权信息,作者,辅助链接等
把这些页面段落拆开,能让我们能完全控制版面布局,只要指定几条CSS规则,就可以马上完成两栏布局.
为页首与页尾指定样式
要把内容结构转化成分栏布局的第一步,是为页首,页尾加上一点背景颜色以及一点内补丁,这样能使内容更容易凸显出来.
#header {
padding: 20px;
background: #ccc;
}
#footer {
padding: 20px;
background: #eee;
}
为方法A的结构加上前面这段CSS会使它显示成图12-2这样,我为各个段落加了一些假象的内容.
图12-2 为页首,页尾指定样式
当然,在#header与#footer里,可以继续为这些段落指定适当的样式,像是font-family,color,链接色彩等等.现在让我们把两栏版面制造出来.
浮动侧边栏
方法A的精华,在于它以float属性把#sidebar放到主要内容的任一边去.以这个例子来说,将它放到内容的右侧,但是放到另一侧当然也行.
浮动#sidebar的关键在于,在标记源代码中,必须出现在主内容之前,这样一来,侧边栏的顶部就会与主内容的顶部排齐.
接着,为#sidebar加上float属性,同时把它的宽度设为30%,指定背景颜色:
#header {
padding: 20px;
background: #ccc;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#footer {
padding: 20px;
background: #eee;
}
图12-3是加上这段CSS之后的显示效果,能看到侧边栏跑到右边去了,而主要内容在侧边栏范围之内流动.
图12-3 把#sidebar浮动到主要内容的右侧
真正的栏位
看看图12-3,我们还没有真正完成两栏布局,为了完成这个效果还必须取#content这个,指定与忧侧边栏宽度相同的右外补丁,因此产生放置#sidebar的空间.
需要加上的CSS就是这么简单:
#header {
padding: 20px;
background: #ccc;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#content {
margin-right: 34%;
}
#footer {
clear: right;
padding: 20px;
background: #eee;
}
我们会发现,我们给content设定的右外补丁大小比#sidebar还大4%,如此能在两栏之间留下一点空位.图12-4是以浏览器查看的效果,你可以发现只要为设定右外补丁,就能造出第二栏的假象.
图12-4 两栏布局
同时要留意的是对#footer所加上的clear:right规则,这个规则很重要,能确保页尾一定会出现在侧边栏和内容区之后,而不受两栏的长度变动影响,页尾会避开任何先前出现的float内容.
现在有了能使用的两栏布局,可以继续为现在的CSS声明加上更多边界,背景,边框与其他元素,使外观更吸引人.
至今为止我们都以百分比设定宽度,以便造出灵活的布局(栏宽会自动随着使用者的视窗宽度缩放).我们也能以像素单位造出定宽布局,但是以像素指定内外补丁大小时,必须注意IE for Windows错误解析CSS盒模型的问题,你能在本章的“盒模型问题”找到更多信息以及能用的解决方法.
方法B:双重浮动
...header content here...
...main content here...
...sidebar content here...
...footer content here...
方法A的缺点之一是:为了浮动侧边栏,则必须在标记源代码之内把侧边栏放到主内容的前面,关闭CSS的浏览器,文字浏览器,屏幕阅读器与其他不支持CSS的设备将会在页面主要内容之前显示(或念出)侧边栏的内容.这样实在不严谨.
我们可以利用float做法,并避开这个问题,只要交换标记源代码里的主内容,侧边栏的位置(如上所示),然后以CSS将两者浮动到不同边即可.
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#footer {
clear: both;
padding: 20px;
background: #eee;
}
通过把两个浮动到不同方向,就能以最恰当的方式排列源代码(主内容放在侧边栏前面),同时仍能得到图12-4这样的效果.
避开两边
同样重要的是,你必须将#footerdeclear属性设为both,如此一来不管两栏的长度多长,页尾总是显示在最后,而标签源代码的内容顺序也改善了.
方法C:浮动主内容
...页头内容...
...主内容...
...侧边栏...
...页尾内容...
还有个值得一提的方法,只需要用一个float属性,同时标记源代码仍然可以将主内容的放在侧边栏之前.
只要将主内容的浮动到左侧,并且为它设定小于100%的宽度,如此一来就能在右侧留下足够空间摆放侧边栏.
CSS内容
方法C需要的CSS内容再简单不过了,“一个float属性”,内容区希望使用的宽度,以及两栏之间留下的小边界.
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
}
#sidebar {
background: #999;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
请注意我们并不需要定义侧边栏的宽度,因为它会自动填满主内容用剩下的空间(在这个例子中是34%).
悲惨的背景
图12-5就是以浏览器查看的成果,哦喔!在某些常用浏览器里,侧边栏的背景颜色会出现在主内容区底下,由于侧边栏并未制定宽度,因此它想扩到与浏览器视窗一样宽.
图12-5 浮动内容,但是侧边栏的背景颜色透了出来
这个部分只要我们能在侧边栏左边加上宽度与内容区相同的外边界便可以避开这个问题.实际上我们会把外补丁设的稍微大一点,以便在两栏之间留下一点空白.
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
}
#sidebar {
margin-left: 70%;
background: #999;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
简单朴素
或者是,如果涉及不需要用到背景色的话,那就不必设定边界了,图12-6是去掉整个#sidebar声明,在为主内容加上一点右外补丁之后的结果.此时两栏会共用页面预设的背景色.
图12-6 不使用背景色的浮动内容
CSS则能缩减成:
#header {
padding: 20px;
background: #ccc;
}
#content {
float: left;
width: 66%;
margin-right: 6%;
}
#footer {
clear: left;
padding: 20px;
background: #eee;
}
除了加上左外补丁(或是省去背景色)之外,还有个使用背景图片的替代做法能让分栏具备背景色彩,我稍后会在本章的“ 技巧延伸 ”单元里提示这个小秘密.
方法D:定位
...页首内容...
...主内容...
...侧边栏...
...页脚内容...
方法D是使用相同的标记源代码结构,然后以最有效率的方式排列:把主内容放在侧边栏之前,关闭样式的浏览器,屏幕阅读器会先收到主内容部分,再收到侧边栏,在定位时,标记源代码内的顺序与页面元素出现的位置没有关系.
能够预测的高度
CSS内容与前三个方法有点类似,第一个差异是对页首指定的像素高度,我们需要能够预测的高度以便稍后为侧边栏定位.
在这里随机选了一个数字,而这需要根据页首使用的内容调整,像是标志,导航栏,搜索表单等.
#header {
height: 40px;
background: #ccc;
}
#footer {
padding: 20px;
background: #eee;
}
为各栏留下空间
接着,要为#content这个设定右外补丁,就像前几个方法一样,这能为右侧边栏留下空间,稍后会使用绝对定位法(不是浮动)把右侧边栏放进去.
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34%;
}
#footer {
padding: 20px;
background: #eee;
}
放进侧边栏
最后,要使用绝对定位法把#sidebar这个放到#content的边界里,也必须去掉浏览器在页面周围加上的预设边界,如此一来定位座标在所有浏览器之内就会一致了.
body {
margin: 0;
padding: 0;
}
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34%;
}
#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 30%;
background: #999;
}
#footer {
padding: 20px;
background: #eee;
}
在指定position:absolute之后,就能以top与right坐标把#sidebar准确的放到所想的位置(图12-7).
图12-7 以定位做出的两栏布局效果
我们叙述了 “把 #sidebar这个放到距离浏览器视窗上边缘40像素,右边缘0像素的位置”,除此之外,也能用bottom和left指定坐标.
页尾问题
以先前的方法浮动分栏时,可以用clear属性确保页尾横跨整个浏览器视窗的宽度,而不受主内容,侧边栏的长度影响.
在定位时,侧边栏的文档流独立于整个页面之外,所以只要侧边栏比内容还长,它就会盖住页尾部分.(图12-8)
图12-8 侧边栏与页尾重叠
面对这个问题我常用的解决方法之一,是为页尾指定与主内容一样的右外补丁,让侧边栏能够延伸超过页尾.
使用这个方法的话,CSS需要调整成这样:
body {
margin: 0;
padding: 0;
}
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 34%;
}
#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 30%;
background: #999;
}
#footer {
margin-right: 34%;
padding: 20px;
background: #eee;
}
这个解决方案在内容很短,侧边栏很长的页面上看起来有点怪,但是它的确有效,结果可参照图12-9,示范了侧边栏避开页尾的情况.
图12-9 外补丁和主内容相同的页尾
除了使用float属性之外,也能用定位制造出分栏布局,让我们看看最后一个选择,方法D.
三人行
如果想做三栏布局的话该怎么办?没问题,而且在使用绝对定位时很容易加入.只需要为主内容,也为加上左外补丁,大小足够容纳第三栏即可.
另一个侧边栏能够放在标记源代码之内任何地方,因为会需要再度使用绝对定位进行布局.
假设加了第二个侧栏,并将它取名# sidecolumn,接着以下面这段CSS为它空出位置,再把它放进去.
body {
margin: 0;
padding: 0;
}
#header {
height: 40px;
background: #ccc;
}
#content {
margin-right: 24%;
margin-left: 24%;
}
#sidecolumn {
position: absolute;
top: 40px;
left: 0;
width: 20%;
background: #999;
}
#sidebar {
position: absolute;
top: 40px;
right: 0;
width: 20%;
background: #999;
}
#footer {
margin-right: 24%;
margin-left: 24%;
padding: 20px;
background: #eee;
}
刚才完成的部分是在主内容,页尾区空出左外补丁(避免重叠),与之前做右侧边栏一样,接着以绝对定位法放进新的#sidecolumn ,将它放在距离上边缘40像素,距离左边缘0像素的位置.
你有留意我们稍微修正了宽度以容纳第三栏吗?由于我们使用百分比,因此这个布局会随着浏览器的宽度缩放,或者也可以为任何一栏指定像素宽度,以便使布局宽度固定下来.
图12-10是用浏览器查看这个示例的效果,一份以CSS绝对定位完成的灵活三栏布局.
图12-10 以定位法作出的灵活三栏布局
归纳
我们在这章稍微研究了以CSS规划版面布局是能够达成的效果.本章的目的是提供你发挥的基础,因此示范了两种主要的做法: 浮动和定位.
我希望你能继续深入尝试CSS布局技巧,去掉页面内的嵌套表格,并且换上更多浏览器与设备能读取的灵活的结构化的标记语法.
如果你想知道更多关于CSS版面布局的资讯,那么一定要看看这些资源:
“The Layout Reservoir” (www.bluerobot.com/web/layouts):这是个使用绝对定位制作多栏排版的绝佳示例.
“From Table Hacks to CSS Layout: A Web Designer”s Journey“ (www.alistapart.com/articles/journey/): Jeffrey Zeldman撰写的绝佳教学,记录了建立双栏布局所需的步骤.
”CSS Layout Technoques: For Fun and Profit“(www.glish.com/css/): Eric Costello的各种CSS布局资源.
”Little Boxes“ (www.thenoodleincident.com/tutorials/box_lesson/boxes/html): Owen Briggs编写的许多CSS布局示例的漂亮界面.
”CSS Zen Garden“(www.csszengarden.com/): ”示范以CSS为基础的设计能达成什么视觉效果“. Dave Shea培养的”花园“以单一XHTML文档展示读者投稿的最新CSS设计(当然也包含布局).这是个能看到CSS布局能力极致的神奇网站.
技巧延伸
现在我们经过了建立基本CSS布局的基础,该是讨论Windows版Internet Explorer 5与5.5版,以及它们错误解析CSS盒模型这个不幸问题的时候了.稍后也会分享一个通过平铺背景图片达成等高栏位布局的秘密技巧.
盒模型问题
本章开始的时候我们讨论了建立多栏CSS布局的方法,只用width属性定义每栏的宽度,当你开始为这些栏位加上补丁,边框的时候,事情就变得有些复杂了.为什么?
不幸的是,Internet Explorer 5 for Windows在加上内外补丁,边框的时候,无法正确计算外包元素的宽度.
举例来说,除了IE5 for Windows之外,所有支持CSS1的浏览器都会将外包元素的宽度计算为宽度,内补丁,边框三者相加,这是W3C希望所有浏览器处理CSS盒模型的方式.
但是IE5 for Windows会将边框和内补丁算在指定的宽度之内,搞混淆了?不用担心,直接看看问题会对你有所帮助.
眼见为实
比较一下图12-11和12-12,图12-11是个200像素宽的元素,两侧各有10像素的内补丁,以及5像素的边框,把水平部分的数值全加起来,就能知道实际宽度为230像素.
图12-11 盒模型的正确计算结果
图12-12 IE5 for Windows 错误的内补丁,边框,宽度计算结果
这是符合设计的盒模型:width属性总是定义元素的内容范围,而内补丁,边框则会加到这个数值上.
因此,如果将侧边栏的宽度定义成200像素然后加上内补丁和边框,CSS的声明如下:
#sidebar {
width: 200px;
padding: 10px;
border: 5px solid black;
}
把宽度设定为200像素,但是侧边栏实际需要230像素的空间,除了IE5 for Windows以外. IE5 for Windows 里侧边栏总共会占用200像素,把内补丁和边框都算在里面.
图12-12 显示的是当width属性指定为200像素时,边框和内补丁会占用内容空间,而不是内容空间之外.
摇摆不定的宽度
我们反对为元素指定边框,内补丁的理由就是实际宽度会随着使用者浏览器的不同而不同,就算在今天,几百万使用IE5.x的用户还是会看到明显偏差的设计结果.同时有个重点必须记住:在这段文字撰写的时候,仍然有太多人在使用IE5以致我们不能忽视这个问题.
所以该怎么办?恩,幸运的是,有个能修复这个问题的技巧,这个技巧可以提供两种不同的宽度,一种给IE5 for Windows,另一种给其他浏览器以便得到正确的盒模型.
盒模型Hack
亲切的Tantek Celik写了盒模型Hack (www.tantek.com/CSS/Examples/boxmodelhack.html) 让我们能提供两种不同宽度:一种调整过,只会被Window Internet Explorer 5使用,另一种则给其他所有浏览器使用.
通过IE5和IE5.5才有的CSS解析Bugs,可以指定一个略大的宽度(容纳边框和内补丁),然后以实际的宽度覆盖这个数值,让其他浏览器能显示出正确的结果.
源代码示例
举例来说,如果希望把侧边栏的内容区域宽度设为200像素宽,加上10像素内补丁和5像素边框,那么我们的CSS看起来就像:
#sidebar {
width: 200px;
padding: 10px;
border: 5px solid black;
}
对IE5 for Windows来说,则需要把宽度指定为230像素(加上两侧内补丁和边框的宽度),接着再以200像素覆盖回来,让符合标准的浏览器得到正确的宽度.
#sidebar {
padding: 10px;
border: 5px solid black;
width: 230px; /* for IE5/Win */
voice-family: ”“}”“;
voice-family: inherit;
width: 200px; /* actual value */
}
留意IE5 for Windows的值先出现,接着几条让IE5 for Windows认为声明已经结束的规则,在此我们使用voice-family属性,原因单纯只是浏览器认得它的话也不会改变视觉效果,最后指定实际的宽度,覆盖最初的width规则,第二个width规则会被IE5 for Windows忽略.
结果在IE5 for Windows以及其他所有兼容CSS2的浏览器上看起来应该完全相同.没有使用这个hack的话,IE5 for Windows的使用者就会看到比设计还瘦的栏宽.
对Opera友好
对于同样拥有IE5 for Windows解析错误的CSS2兼容浏览器来说,我们必须在每次使用盒模型补丁之后加上一段额外的声明,这个称为”对Opera友好“的规则会让所有符合标准的浏览器不被解析Bug卡住,确保他们能显示出期望中的宽度.
#sidebar {
padding: 10px;
border: 5px solid black;
width: 230px; /* for IE5/Win */
voice-family: ”“}”“;
voice-family: inherit;
width: 200px; /* actual value */
}
html>body #sidebar {
width: 200px;
}
有了这段规则,就可以完全绕过IE5 for Windows错误解析CSS盒模型的问题,让所有人都能看到正确的效果.
不止宽度
在这里以”盒模型Hack“达成显示相同宽度,但是这个Hack其实能在任何想为IE5 for Windows提供不同CSS内容时派上用场.任何Hack都必须小心使用,同时只有在真正需要的时候才使用,记住 ”盒模型Hack“的使用地点是个好主意,这样才能在未来轻易拿掉它.
本文撰写时仍有上百万网络使用者仍然使用IE5 for Windows,因此这个补丁不可或缺.
下面这段”伪装的栏位“原始出自一月份的A List Apart杂志(www.alistapart.com/articles/fauxcolumns/).
伪装的栏位
关于我个人网站的设计,我最常被问到的问题是:
”你是如何让右栏的背景色一路延伸到整页底部的?“
其实这只是个简单的概念,真的.而且这个概念能应用到本章开始所述的每种布局方法上.
垂直伸展
CSS最容易让人感到挫折的性质之一,是元素只会垂直伸展到真正需要的长度.这代表如果在里放一张200像素高的图片,那么就只会在页面上延伸200像素.
当你以切割页面段落,接着用本章开始时的方法用CSS完成多栏布局时,这就会成为有趣的困境,某一栏可能比其他栏都长(图12-13),当你想为每栏选用独特的背景色彩时,视内容多寡而定,做出两个一样长的栏位可能十分困难.
图12-13 长度不一样的栏位
有几个做法能让阑尾看起来一样长,不受栏位包含的内容的影响.我准备分享我的解决方法(适用于绝对定位布局法),而这个方法实在是莫名其妙的...简单.
作弊
这个难以启齿的简单秘诀,是用一个垂直排列的背景图片作出彩色栏位的错觉.在SimpleBits(www.simplebits.com/),我用了类似图12-14的背景图片(为了示范而修改了比例):左边有装饰用条纹,中间留下宽阔的空白空间安放主要内容,接着是一条1像素的边框,然后是右侧边栏的浅棕色区域,跟着是反向的装饰用条纹.
图12-14 tile.gif 2像素高的背景图片,预先分配好栏宽.
整个图片没有几像素高,但是垂直平铺之后,他就能造成一路到底的彩色栏位,不管栏位内容多长都无所谓.
CSS内容
我为标签加上这条CSS规则:
background: #ccc url(tile.gif) repeat-y 50% 0;
这会使整个页面的背景色设为灰色,并且只垂直平铺图片(repeat-y),后面的50% 0代表背景图片的定位:在这个例子里,是从浏览器视窗左边缘算起50%(使图片居中),并且紧贴上边缘.
栏位定位
放好背景图之后,在把我的定位布局放到上面,为左栏,右栏指定内外补丁以确保它们会对齐正确位置:也就是背景图创造出来的虚假栏位里(图12-15).
图12-15平铺背景图创造出的彩色栏位
有个重点必须要注意:如果哪一栏指定了边框,内外补丁的话,就仍然用Tantek Celik的盒模型Hack为IE5 for Windows修正盒模型问题(参照本章稍早的”盒模型问题\").
或者是,如果能够只使用外补丁,避免边框与内补丁的话,就不需要加上盒模型Hack了,同时,如果栏位的内容只单纯放在平铺背景图之上(透明显示),那么要避免使用Hack也应该很简单.
只要有用就好
虽然我以绝对定位法在自己的网站上做了两栏布局,但是你也能用本章开始时提过的其他方法达成一样好的效果.同样的想法仍然适用:平铺背景图,接着再浮动某个栏位,使其覆盖在模拟的栏位背景上.
这是个简单的概念,但是能够解决设计者在构建CSS布局时经常遇到的挫折之一.
结论
我希望本章能带给你开始探索CSS布局的刺激世界,本章开始时我们看到了四种构建版面布局的方式,其中三种用了float属性,还有一种用了绝对定位.一定要去看看我列出的额外资源,里面有更多布局的技巧和示范.
我们也讨论了盒模型Hack在建立具备边框,内补丁的栏位时有何重要性,让这些效果在IE5 for Windows以及其他浏览器上表现一致.
最后,我分享了一个有用的技巧,让你在设计CSS布局时能做出等高栏位,这是某些人认为十分基本,但实现上经常让人感到挫折的设计目标.只要小小一个平铺背景图就能搞定,让你得到能够抵达页面底部(不管内容多长)的栏位.
来自：bbs.blueidea.com/thread-2824472-1-1.html
篇5：慕课视角下网页设计课程教学生态模式的构建策略论文
慕课视角下网页设计课程教学生态模式的构建策略论文
在信息时代，各种各样的新技术和新理念对课程资源和教学模式产生巨大的冲击。在混合学习和移动学习的大背景下，多种样式的新课程形式在这一大环境下应运而生，其中也包括规模大的、在线的、低门槛的课程形式——慕课，慕课的出现对传统的知识传输形式产生一定的影响。本文从慕课这一课程形式出发，以教学生态为理论基点，结合社会对网页设计人员的实际要求，来探讨网页设计课程的教学生态模式的构建策略。
1.慕课与网页设计课程的教学生态的相关性分析
慕课与网页设计课程教学生态的相关性分析可大致划分为以下几个方面：慕课与教学生态理念相互影响的大背景、学习辅助环境分析和网页设计课程的教学与市场需求之间的矛盾等三个方面。
1.1 教学生态的理念与慕课结合的大背景
目前，生态化的诉求不仅针对于自然环境，同时已经渗透到社会生活的方方面面，生态化已经成为很多领域的共同诉求，教育领域也不例外，生态化的趋势也将成为教育领域发展的重要方向。教学活动中重要组成部分之一的教学模式，其生态化的发展势必会影响整个教育生态化的发展。
慕课作为信息技术发展下的新的课程形式，带着其自身鲜明的个性特点冲击着我们传统的教学形式。认识和理解慕课，将其有效与正确地应用于相应的课程知识和操作技能的学习过程中，这种形式对相关的教学内容的教学产生一定影响。这些新影响不仅指的是一种新课程形式的使用，可能更多的是关于教学理论支点、教学组织形式和课程考核等相关方面的调整。在相关的课程体系下，如何高效使用慕课这一课程形式来合理组织学习资源，如何更加有效地与具体课程相结合来促进教学生态模式的形成，成为教学生态理念与慕课结合的过程中关注的重要方向。
1.2 学习辅助环境分析
随着信息技术在校园内的发展，可以使每个在校的学生通过各种各样的通讯设备获取海量的信息，比如：笔记本、台式计算机、手机等设备。据有关研究发现：目前大部分的学生从很小开始就已经接触网络，其自身的信息素养和网络的敏感性是比较高的，对网络中所出现的新技术具有很强的接受力。而目前的教学组织形式主要是指课堂教学这一模式，众所周知，这种模式是固定时间和地点的，具有比较大的约束性。而目前90 后的大学生其对自由、个性的渴望比较强烈，学习领域也不例外。学习者对学习方式改变的需求与传统的课堂教学之间矛盾越来越明显。学习方式的单一性和学习资源固定性这些特征，势必会影响学习者的自由性，最终可能会导致学习者的学习方式和学习能力趋向于单一性和泛化式发展。在网络时代的大背景下，如何更好将新课程形式与常见的课程形式相结合，提高学生者的主体意识和能动性，丰富传统的课堂教学模式，成为教学过程中需要解决的技术支点。
1.3 网页设计课程的教学与市场需求之间的矛盾
2015 年3 月底，发布的《中国互联网站发展状况及其安全报告(2015)》指出：截至2014 年底，我国网站总数已达到364.7 万个以上，比2014 年度同比增长约14.1 万多个，主办网站者达285 万个，其中为单位的网站主办者约212 万个，其余为个人主办者。据上面的数据分析：现在或将来社会对网页美工、页面制作、网站维护与管理人员的需求数量还是相当大的。其次，作为专业基础课程和必修课程的网页设计课程兼具知识面广和与时俱进的特性，随着页面制作新技术的使用， 为了适应社会的需求， 其相关的教学内容需要做出一定的调整。而目前其课时安排是每周4 学时，对于操作技能要求比较高的，以案例教学为引导的课程体系而言， 如此的课时安排是难以满足学习需求的。
综上所述：学习辅助环境分析，结合教学生态的理念与慕课这一新课程形式，基于调和市场需求与网页设计课程之间的矛盾等方面因素，提出慕课视角下研究与探讨其教学生态模式的构建策略。
2.慕课视角下分析构建网页设计课程教学生态模式的策略
主要分为以下六个方面来分析慕课视角下网页设计课程教学生态模式的构建策略：
2.1 从市场需求的角度来设计课程内容
从网页制作、网站开发和管理人员的市场需求的角度进行分析，挖掘社会对网页设计的工作人员的深层要求，并与计算机网络技术专业的人才培养方案进行具体比较研究，理清培养方案与人才需求之间的差异。从市场需求的角度来设计网页设计课程的教学内容，做到学以致用、学能所用，使学生在学校学习的知识和技能能与实际应用相结合，使其在毕业后能很好融入到具体工作中。
2.2 以模块来划分课程内容
根据网页设计课程的特点和人才市场对网页工作人员的具体要求，来确定网页设计课程的具体内容，根据各课程内容的特点，将其进行教学内容的模块化设计，利用各个模块之间的联系，并从各自特点的角度出发，来规划与安排相对应的教学形式，并在具体教学模式的`指导下，将慕课应用其中，来处理其中的课程资源、教师与学生各自的地位与作用、教学过程管理与课程考核等相关方面内容，用以形成具有一定指导与借鉴的网页设计课程教学生态模式。
2.3 多种慕课方式应用
根据具体教学内容具体分析的思路，将多种慕课方式应用到具体的课程教学模式中，来构建多种不同的教学模式，以此来实现教学生态模式的目的。笔者认为可以对模块化的内容进行资源分析，将各种不同的慕课方式进行最优化的设计应。可采用借鉴的方式，将网页设计相关的优秀的、成熟慕课应用其中，也可根据具体的情况来自主设计相关的慕课视频资源，将各种不同的慕课方式应用到具体的教学模式中，动态观察各个要素之间的作用和地位，实时调整过程监控和教学评价。
2.4 选择线上与线下相结合的教学模式
依据上述的分析：将市场确定课程内容、课程内容模块化划分、教学模式多样性与慕课进行结合应用， 以此来构建课程的教学生态模式。慕课为传统的网页设计课程的课堂教学提供优质的资源和相应的在线交互平台，同时网页设计中的相关内容还需要教师采用传统的课堂教学，比如在用CSS+DIV 布局的教学过程中，教师的面对面讲授，手把手的上机实训指导的效果会更好，应将线上与线下的教学模式结合起来加以应用。
2.5 教师应对教学过程进行监控
在将慕课应用于相应的课程内容教学过程中，应加强对学生学习指导。让学生感觉到现在的学习模式并没有完全脱离了教师，师生还是一个紧密的联系体。学生在线上的学习过程中，教师可根据不同的教学内容提出相应的思考问题和课外作业， 引导学生不断头脑风暴，从而更好掌握此内容的学习。
2.6 对慕课在网页设计课程的教学生态模式中的定位
将慕课引入到网页设计课程的教学生态模式中，出发点是为了调和人才市场对网页设计工作人员的具体要求、网页设计课程的传统课堂教学模式与网页设计课程特征三者之间的矛盾，目的是为了提高课程的教学效果，不能让慕课牵着课程走，而是要采用合理的分析，结合慕课的在线、开放和视频传输等特点，合理地加以运用。
3.结语
总之，在新技术的不断涌现的大背景下，慕课作为一种新的教学形式，对传统的课堂教学模式带来冲击，我们是全盘接收还是有条件的筛选使用，是每个教学工作者需要思考的问题。而具体到网页设计这门课程中，要根据课程自身的特点与社会需求来合理确定教学相关模块， 并依据各教学模块的特点及相关性来设计相应的教学模式，同时可根据教学模式与课时安排之间的矛盾，将慕课应用相关的教学内容中，以慕课视角下的教学生态模式的构建策略进行指导，最终目的是为了更好地提高网页设计课程的教学效果， 而并非为了技术而应用。
