html5教程之网页结构计划:弹性流体结构
HTML5TheMediaCaptureAPI提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签网页制造poluoluo文章简介：弹性结构最年夜的长处就是能充实使用屏幕空间。不管客户端分辨率多年夜，都能主动顺应宽度的变更。在我的另外一篇文章《弹性+固宽结构》中，我先容了弹性加最小流动宽度的一种结构计划，如今先容另外一种结构计划---弹性流体结构。
那种计划实在就是这类结构的变通使用。弹性结构最年夜的长处就是能充实使用屏幕空间。不管客户端分辨率多年夜，都能主动顺应宽度的变更。
图一
看看下面这幅图片，这是外洋的一个网站，它自己是流动宽度结构的，我们的结构就以这幅图为基本来说解的。固然，我不会周全先容怎样制造这个完全页面，我只针对重点做一下解说。
实在做一个弹性结构，绝对来讲是对照复杂的，可是这类结构虽复杂，但是关于细节上的掌控才是这类结构的精华。弹性结构虽然说有这么好的长处，但是却有对照致命的缺点：
[*]假如不合错误这类结构设置一个最小宽度，当用户减少窗口到充足小时，会对结构发生致命的影响。形成严峻影响结构错位。
[*]当一个页面弹性结构时，关于内里的图片会发生伟大的影响。由于到今朝为至，还没有办理图片随百分比缩放的成绩。
以是这篇文章关于结构的解说大概还绝对少些，而更多的是办理下面的两个成绩，我信任只需办理了下面的两个成绩，这类结构绝对来讲就简单多了。
1、办理最小宽度
一样平常弹性结构都是使用百分比来设置一个容器的宽度。如许就可以主动顺应屏幕的宽度了。可是宽度值不克不及完整由用户自在缩放，我们必需在这个百分比宽度限定其最小宽度，当用户减少窗口到必定值，就不让窗口再缩放了。
熟习CSS的伴侣都晓得，有如许四个属性：
[*]Min-width:最小宽度
[*]Max-width:最年夜宽度
[*]Min-height:最小高度
[*]Max-height:最年夜高度
这四个属性恰好能办理这个成绩，是否是对照欣喜，但是，别忙，虽然说它们能办理这个成绩，但是却有一个严峻的成绩，用户利用最多的扫瞄器IE6却不撑持这几个属性，这是一件十分糟的事变。我们总不克不及抛弃用户最多的扫瞄器吧！
今朝网上对照盛行的有四种办法来办理让IE6撑持这四种属性：
[*]在CSS中expression来设置最小宽度，对照费内存。
[*]用嵌套DIV,然后用margin偏移仿照完成，多冗余布局。
[*]用JQ框架完成，为一个属性加一个JS框架，有点不划算。
[*]用纯JS代码完成。
后面三种都有优势，请各自选择最符合的办法，我侧重于最初一种，这是外洋的一个牛人完成的，相干例子能够看这儿：http://www.doxdesk.com/software/js/minmax.html
有了这个JS文件，你只必要在头部挪用这个JS文件就能够了。
PS:在演示模子中为了便利，我将这个JS作为外部援用的体例挪用，你们在实践使用中将这个JS文件新建为一个JS内部文件，以下体例挪用：
<scripttype="text/javascript"src="minmax.js"></script>
我们在款式表中将min-width使用到#wrapper和#footer这两个容器就好了，并分离设置它们宽度为100%，OK，如今我们办理了最小宽度的成绩。
网页制造poluoluo文章简介：弹性结构最年夜的长处就是能充实使用屏幕空间。不管客户端分辨率多年夜，都能主动顺应宽度的变更。
2、办理弹性图片
我们看看下面哪张图片，要做成弹性结构，就要办理页头图片的静态缩放。而这是一张图片，我们都晓得图片是没有举措随比例缩放的，该怎样办呢？
我们能够换一个头脑体例，将这张图片在PS中做一点修改，我们能够将这张图片支解成摆布两部分，并将它们兼并成一张图片。以下图所示：
图二
第一图片在容器中以背景定位的体例左上定位，而第二张片则右下定位，用两个容器分装两张图片，内层的图片级别比外层图片级别高，它会浮动到第一张图片上挡住它，固然这第二张要做成通明底色的png或gif图片，由于png-24位通明图片在IE6下不受撑持，以是我们改成PNG-8位的通明图片，如许虽然说图片质量上有点影响，但能够包管在IE6中流通无阻。
以是页头的布局层应当是以下的模样：
<divid="header">
<divid="inhead">
<p>页头内容</p>
</div>
</div>
针对如许的布局我们能够写出以下的款式：
外层款式：
#header{
height:150px;
width:100%;
background:#000url(image/header-bg.png)no-repeatlefttop;
}
内层款式：
#inhead{
height:150px;
width:100%;
background:url(image/header-bg.png)no-repeatrightbottom;
text-align:center;
color:#fff;
}
经由如许的改善后，我们的页头就做成弹性的图片，它在扫瞄器中显现就应当以下：
图三
如许，一个弹性结构就算基础完成了。终极的效果以下图所示：
图四
网页制造poluoluo文章简介：弹性结构最年夜的长处就是能充实使用屏幕空间。不管客户端分辨率多年夜，都能主动顺应宽度的变更。
跋文：
最初不能不提的是，这类结构是有范围性的，并非每一个网页都能合适用这类体例来结构。由于流体弹性结构自己存在的缺点。它不克不及用于计划得太甚华美、图片丰厚的页面，由于有些图片是没有举措做到象上图哪样伸缩的。我想恰是由于这个缘故原由，它限定了这类结构的普遍传播。
演示：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>弹性结构计划（冰山顶颠峰原创）</title><scripttype="text/javascript">//JavaScriptDocument//minmax.js:makeIE5+/WinsupportCSSmin/max-width/height//version1.0,08-Aug-2003//writtenbyAndrewClover<and@doxdesk.com>,usefreely/*@cc_on@if(@_win32&&@_jscript_version>4)varminmax_elements;minmax_props=newArray(newArray(min-width,minWidth),newArray(max-width,maxWidth),newArray(min-height,minHeight),newArray(max-height,maxHeight));//Binding.Calledonallnewelements.If<body>,initialise;checkall//elementsforminmaxpropertiesfunctionminmax_bind(el){vari,em,ms;varst=el.style,cs=el.currentStyle;if(minmax_elements==window.undefined){//initialisewhenbodyelementhasturnedup,butonlyonIEif(!document.body||!document.body.currentStyle)return;minmax_elements=newArray();window.attachEvent(onresize,minmax_delayout);//makefontsizelistenerem=document.createElement(div);em.setAttribute(id,minmax_em);em.style.position=absolute;em.style.visibility=hidden;em.style.fontSize=xx-large;em.style.height=5em;em.style.top=-5em;em.style.left=0;if(em.style.setExpression){em.style.setExpression(width,minmax_checkFont());document.body.insertBefore(em,document.body.firstChild);}}//transformhyphenatedpropertiesthebrowserhasnotcaughttocamelCasefor(i=minmax_props.length;i-->0;)if(cs])st]=cs];//addelementwithpropertiestolist,storeoptimalsizevaluesfor(i=minmax_props.length;i-->0;){ms=cs];if(ms&&ms!=auto&&ms!=none&&ms!=0&&ms!=){st.minmaxWidth=cs.width;st.minmaxHeight=cs.height;minmax_elements=el;//willneedalayoutlaterminmax_delayout();break;}}}//checkforfontsizechangesvarminmax_fontsize=0;functionminmax_checkFont(){varfs=document.getElementById(minmax_em).offsetHeight;if(minmax_fontsize!=fs&&minmax_fontsize!=0)minmax_delayout();minmax_fontsize=fs;return5em;}//Layout.Calledafterwindowandfontsize-change.Gothroughelementswe//pickedoutearlierandsettheirsizetotheminimum,maximumandoptimum,//choosingwhicheverisappropriate//Requestre-layoutatnextavailablemomentvarminmax_delaying=false;functionminmax_delayout(){if(minmax_delaying)return;minmax_delaying=true;window.setTimeout(minmax_layout,0);}functionminmax_stopdelaying(){minmax_delaying=false;}functionminmax_layout(){window.setTimeout(minmax_stopdelaying,100);vari,el,st,cs,optimal,inrange;for(i=minmax_elements.length;i-->0;){el=minmax_elements;st=el.style;cs=el.currentStyle;//horizontalsizeboundingst.width=st.minmaxWidth;optimal=el.offsetWidth;inrange=true;if(inrange&&cs.minWidth&&cs.minWidth!=0&&cs.minWidth!=auto&&cs.minWidth!=){st.width=cs.minWidth;inrange=(el.offsetWidth<optimal);}if(inrange&&cs.maxWidth&&cs.maxWidth!=none&&cs.maxWidth!=auto&&cs.maxWidth!=){st.width=cs.maxWidth;inrange=(el.offsetWidth>optimal);}if(inrange)st.width=st.minmaxWidth;//verticalsizeboundingst.height=st.minmaxHeight;optimal=el.offsetHeight;inrange=true;if(inrange&&cs.minHeight&&cs.minHeight!=0&&cs.minHeight!=auto&&cs.minHeight!=){st.height=cs.minHeight;inrange=(el.offsetHeight<optimal);}if(inrange&&cs.maxHeight&&cs.maxHeight!=none&&cs.maxHeight!=auto&&cs.maxHeight!=){st.height=cs.maxHeight;inrange=(el.offsetHeight>optimal);}if(inrange)st.height=st.minmaxHeight;}}//Scanning.Checkdocumenteverysooftenuntilithasfinishedloading.Do//nothinguntil<body>arrives,thencallmaininit.Passanynewelements//foundoneachscantobeboundvarminmax_SCANDELAY=500;functionminmax_scan(){varel;for(vari=0;i<document.all.length;i++){el=document.all;if(!el.minmax_bound){el.minmax_bound=true;minmax_bind(el);}}}varminmax_scanner;functionminmax_stop(){window.clearInterval(minmax_scanner);minmax_scan();}minmax_scan();minmax_scanner=window.setInterval(minmax_scan,minmax_SCANDELAY);window.attachEvent(onload,minmax_stop);@end@*/</script><styletype="text/css">/*本例中使用到一个永久流动到页脚的footer容器,这个层是自力于主内容区的.*/*{margin:0;padding:0;}a:link,a:visited{color:orange;font-weight:bold;}html,body,#wrapper{height:100%;font-size:12px;}#wrapper{width:100%;background:#777;min-width:960px;}body>#wrapper{height:auto;min-height:100%;}#main{padding-bottom:54px;}/*必需利用和footer不异的高度,最小宽度ie6中加JS办理*/#header{height:148px;width:100%;text-align:center;color:#fff;background:#000url(http://images.cnblogs.com/cnblogs_com/binyong/tanxin/header-bg.png)no-repeatlefttop;}#inhead{height:148px;width:100%;text-align:center;color:#fff;background:url(http://www.blueidea.com/articleimg/2009/05/6692/header-bg.png)no-repeatrightbottom;}h3{font-size:14px;line-height:90px;}#headerp{font-size:12px;line-height:30px;}#footer{position:relative;margin-top:-54px;/*footer高度的负值*/height:54px;/*footer高度*/width:100%;clear:both;background:#000;text-align:center;color:#fff;min-width:960px;}#footerp{line-height:26px;}#content{background:#999;width:80%;margin:0auto;height:654px;}#contentp{line-height:30px;padding:030px;color:#fff;}/*申明:必要注重的就是#main的padding值、footer的高度和负margin值，必要坚持分歧。上面是出名的全能float闭合ClearfixHack*/.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-block;}/*HidesfromIE-mac*/*html.clearfix{height:1%;}.clearfix{display:block;}/*EndhidefromIE-mac*/</style></head><body><divid="wrapper"><divid="main"class="clearfix"><divid="header"><divid="inhead"><h3>弹性流体结构</h3><p>页头背景可平展全部扫瞄器宽度，而注释内容则一直居中显现，不论分辨率是多年夜。</p></div></div><divid="content"><p>本页面演示了两个对照主要的技能：最小宽度值和弹性图片.</p><p>弹性结构是用到min-width这个属性,但这个属性在IE6下不受撑持,因而到场了老外的一个JS剧本,这个剧本让IE6也能撑持最小,最年夜宽度(高度)四个属性.</p><p></p><p>弹性结构实在最难的还不是结构，而是内里的图片怎样做到自顺应，也就是说让图片也变得弹性起来。这是这类结构时要最优先思索的事变。</p><p>页头图片就是一个弹性图片的典范使用，你能够减少一下窗口看看。</p><p>相干文章链接：《<ahref="http://www.ckuyun.com/binyong/archive/2009/05/07/1451319.html">弹性+固宽结构</a>》</p></div></div></div><divid="footer"><p>我是浮动的一直流动在底部的DIV,不管两头的笔墨内容高度是不是不敷一屏，我仍是能居底显现，</p><p>傍边间内容凌驾一屏时，我又能够向下浮动哟</p></div></body></html>
</p>
但他也直言说，这就像写软件时，在添加改善的新功能时，难免遭遇稳定性的问题，必须先把问题清除干净，才能推出新产品。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
页:
[1]