|
三、 流動(dòng)布局中的圖像
在流動(dòng)布局中開發(fā)者最關(guān)心的是處理圖像和內(nèi)容，它們需要一定的寬度。大多數(shù)情況下，我們希望我們的圖像盡可能的大，至少在太小時(shí)應(yīng)防止任何令人尷尬的空白，在固定寬度的布局中，可手動(dòng)調(diào)整，客服這些問題很容易。但是，在流動(dòng)布局中，圖像區(qū)域的寬度是不斷變化的，這些問題就在此出現(xiàn)了。
自動(dòng)雜志版面設(shè)計(jì)
這個(gè)解決方案需要一些聰明的數(shù)學(xué)知識(shí)和PHP，在Harvey Kane 的 Automatic Magazine Layout 文章中有全面的解釋（包括數(shù)學(xué)）和可下載的源代碼。標(biāo)題由圖像在雜志中如何呈現(xiàn)來(lái)決定：有條理且總是完美對(duì)齊。當(dāng)然，一本雜志版面的設(shè)計(jì)師都必須經(jīng)過一定的過程來(lái)實(shí)現(xiàn)這種效果，包括調(diào)整和手動(dòng)放置。
對(duì)我們來(lái)說，這一技巧可以實(shí)現(xiàn)我們的效果，下面是腳本實(shí)現(xiàn)這一效果的第一個(gè)例子。
正如你所看到的那樣，非常漂亮。但是，如何使用流動(dòng)布局使其更具可用性？Harvey Kane 給了我們必須使用的腳本。
# include the class file
require_once('magazinelayout.class.php');
# Define the width for the output area (pixels)
$width = 600;
# Define padding around each image; this *must* be included
#in your style sheet (pixels)
$padding = 3;
# Define your template for outputting images
# (Don't forget to escape the &)
$template = '<img src="image.php?size=[size]&file=[image]" alt="" />';
# create a new instance of the class
$mag = new magazinelayout($width,$padding,$template);
# Add the images in any order
$mag->addImage( 'landscape1.jpg' );
$mag->addImage( 'portrait1.jpg' );
$mag->addImage( 'landscape2.jpg' );
# display the output
echo $mag->getHtml();
我們可以事先定義我們所希望的圖像雜志的寬度。因此，如果我們找到瀏覽器的寬度，我們就可以決定我們布局圖像的寬度，這很容易。因?yàn)槲覀円呀?jīng)學(xué)會(huì)了第二種技巧：自適應(yīng)內(nèi)容的流動(dòng)布局。在他的腳本中，Kevin Hale使用了一個(gè)稱之為getBrowserWidth() 的方法，你可以在他的文章中更深入的了解該方法的代碼。
如果我們用這種方法取代瀏覽器的寬度值，然后用這個(gè)值去尋找我們內(nèi)容區(qū)域的像素寬度（不論圖像放在那個(gè)區(qū)域）。比方說，我們希望將圖像放到70%的內(nèi)容區(qū)域中，利用簡(jiǎn)單的數(shù)學(xué)知識(shí)，我們只需要找到瀏覽器寬度值的70%就行。
Pixel width = 內(nèi)容區(qū)域百分比 x 瀏覽器寬度
$width = 0.70 x getBrowserWidth();
這是很基本的數(shù)學(xué)知識(shí)，是流動(dòng)布局中處理圖像最基本的方法，調(diào)整PHP腳本自動(dòng)尋找圖像的像素值。這樣，在一個(gè)流動(dòng)布局中，你就能很好的處理圖像或其余已經(jīng)設(shè)置寬度的內(nèi)容。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 自適應(yīng)css布局——流動(dòng)布局新時(shí)代 [4] 下一頁(yè) 自適應(yīng)css布局——流動(dòng)布局新時(shí)代 [6]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 5 頁(yè) 自適應(yīng)css布局——流動(dòng)布局新時(shí)代 [5]
