靈活Web設(shè)計(jì)

前言

現(xiàn)在,拿起你手中正在閱讀的這本書,調(diào)整它的大小,以便更易于閱讀。非常抱歉,我提出了一個(gè)不切實(shí)際的要求。但是,我保證,本書所包含的練習(xí)都是非常實(shí)用的,而非荒謬可笑的。因?yàn)槲覀兘酉聛?lái)將要探討的是Web設(shè)計(jì),這不受紙張的物理限制。盡管Web頁(yè)面和紙張都可以呈現(xiàn)美觀和令人印象深刻的設(shè)計(jì),但是這兩種方式各有利弊。成功的Web設(shè)計(jì)需要結(jié)合呈現(xiàn)介質(zhì)的優(yōu)勢(shì),其中的一個(gè)優(yōu)勢(shì)就是靈活性。這里所指的靈活性是廣義上的,適用于各種查看情況。用戶控制Web站點(diǎn)的經(jīng)驗(yàn)將達(dá)到一定水平,最終會(huì)超過(guò)使用其他介質(zhì)。他們開始選擇（無(wú)論是自覺的還是自愿的）,不考慮瀏覽Web頁(yè)面的設(shè)備類型。屏幕和窗口的尺寸。文字以及字體的大小,也不考慮是瀏覽靜態(tài)圖像還是Flash動(dòng)畫。真正精明的用戶甚至可以創(chuàng)建起自己的樣式表對(duì)所瀏覽站點(diǎn)的視覺效果進(jìn)行或大或小的調(diào)整。有些用戶甚至不是“瀏覽”Web站點(diǎn),取而代之的是,他們會(huì)去聆聽或感受這些站點(diǎn)。從狹義的角度來(lái)講,Web媒介也是靈活的,即Web頁(yè)面和內(nèi)容的大小并不固定。默認(rèn)情況下,可以調(diào)整Web頁(yè)面的寬度和高度,以適應(yīng)用戶不同的文本大小和窗口寬度。這對(duì)使用div和CSS構(gòu)建的Web頁(yè)面和使用表格構(gòu)建的Web頁(yè)面而言都是一樣的。固定寬度的Web頁(yè)面（由設(shè)計(jì)者設(shè)定了像素的頁(yè)面）使得Web天生的靈活性無(wú)法發(fā)揮其作用。創(chuàng)建固定寬度的設(shè)計(jì)有一定的好處,這將在第1章介紹。但是固定寬度的替代選擇會(huì)帶來(lái)很多好處,而且其所適用的站點(diǎn)類型要遠(yuǎn)比你想象的多。可變（或不固定）的站點(diǎn)是一種替代選擇,該站點(diǎn)會(huì)根據(jù)用戶窗口的大小進(jìn)行調(diào)整,根據(jù)用戶文本大小進(jìn)行調(diào)整的彈性站點(diǎn)則又是另外一種替代選擇。這兩種設(shè)計(jì)類型都利用了Web天生的靈活性,并且,如果利用得當(dāng),將可以極大地改善用戶體驗(yàn)-用戶看到的所有頁(yè)面都將與固定寬度的站點(diǎn)一樣吸引人。這就是本書的主要內(nèi)容：為什么靈活設(shè)計(jì)是一個(gè)好東西,以及如何做好它。你或許會(huì)想,只要將這一靈活性融入Web中,那么設(shè)計(jì)靈活的或具有彈性的Web站點(diǎn)就是小菜一碟了。遺憾的是,事實(shí)并非如此。盡管Web中融入了靈活性并且?guī)?lái)了很多好處,但是靈活的和具有彈性的Web站點(diǎn)依然很少。或許是因?yàn)檫@些網(wǎng)站在設(shè)計(jì)和開發(fā)階段都有一些挑戰(zhàn),大多數(shù)Web設(shè)計(jì)師還不習(xí)慣。目前還沒有太多直面這些挑戰(zhàn)的通用方法,但是本書做到了。你將學(xué)到的和不會(huì)學(xué)到的本書旨在告訴你：?每一種類型的靈活布局的好處。?如何為特定的內(nèi)容。設(shè)計(jì)或用戶選擇合適的布局類型。?哪些視覺元素適合靈活設(shè)計(jì),哪些應(yīng)該避免。?如何在靈活性思維的指引下構(gòu)建并切割圖形設(shè)計(jì)版式。?靈活。彈性和混合布局中的（X）HTML和CSS?如何讓背景和內(nèi)容在靈活布局容器中工作而你不會(huì)學(xué)到的內(nèi)容是：固定寬度布局是“魔鬼”,如果你創(chuàng)建了一個(gè)固定寬度的布局,那么你就是一個(gè)可怕的人或是黑客-并不是因?yàn)槲业木庉嬜屛野岩绯龅膬?nèi)容給剪切掉了,而只是因?yàn)檫@不是真的?！肮潭▽挾炔季峙c靈活布局”的爭(zhēng)論在Web設(shè)計(jì)社區(qū)里非常激烈,本書不會(huì)明確回答何者“更好”。我和很多設(shè)計(jì)師都認(rèn)為,固定寬度布局和靈活布局擁有各自的優(yōu)勢(shì),并各自適合于不同類型的網(wǎng)站。我的網(wǎng)站就使用了各種類型的布局,其中包括固定寬度布局。本書僅為該爭(zhēng)論中未過(guò)多涉及的一方-靈活布局-提供了更多詳細(xì)的信息。如果你認(rèn)為靈活布局適合你的站點(diǎn)（我希望本書能讓你更明白靈活布局何時(shí)更有效）,那么本書會(huì)教你如何做好它,并且不會(huì)很麻煩。

內(nèi)容概要

本書講述如何應(yīng)用可變或不固定布局及彈性布局來(lái)實(shí)現(xiàn)靈活設(shè)計(jì)，以滿足用戶的根據(jù)自己需求而調(diào)整瀏覽站點(diǎn)的窗口大小的要求?！　∪珪卜譃?章，內(nèi)容包括：理解靈活布局、可變布局和彈性布局存在的挑戰(zhàn)、設(shè)計(jì)靈活布局的方法、準(zhǔn)備網(wǎng)頁(yè)設(shè)計(jì)、創(chuàng)建可變布局結(jié)構(gòu)、創(chuàng)建彈性布局結(jié)構(gòu)、規(guī)范靈活性、設(shè)置文字間距、添加背景圖像和顏色、創(chuàng)建靈活的圖像?！　”緯m用于網(wǎng)頁(yè)設(shè)計(jì)人員、網(wǎng)頁(yè)設(shè)計(jì)愛好者。

作者簡(jiǎn)介

吉倫沃特，是一位經(jīng)驗(yàn)豐富的Web設(shè)計(jì)師、項(xiàng)目經(jīng)理以及技術(shù)類文章的撰稿人，Web標(biāo)準(zhǔn)社區(qū)頻頻出現(xiàn)她活躍的身影。在北卡羅來(lái)那州大學(xué)（UNC）公路安全研究中心任設(shè)計(jì)服務(wù)經(jīng)理期間，Zoe主持設(shè)計(jì)和開發(fā)了許多信息豐富的Web站點(diǎn)和應(yīng)用程序。她的工作主要是創(chuàng)建結(jié)合了美感以及標(biāo)準(zhǔn)兼容

書籍目錄

譯者序前言致謝第1章　理解靈活布局  1.1  布局類型    1.1.1　固定寬度：固定像素    1.1.2　可變布局或不固定布局：根據(jù)視口調(diào)整    1.1.3　彈性與文本大小相適    1.1.4　混合布局  1.2  可變布局和彈性布局帶來(lái)的挑戰(zhàn)    1.2.1　擺脫網(wǎng)格束縛：進(jìn)行設(shè)計(jì)非舒適區(qū)域    1.2.2　告別像素的完美性    1.2.3　讓設(shè)計(jì)看上去很大或是很小      1.2.4　處理文本溢出的問(wèn)題    1.2.5　處理水平滾動(dòng)條的問(wèn)題    1.2.6　在彈性框中適配固定寬度的內(nèi)容    1.2.7　更長(zhǎng)的設(shè)計(jì)時(shí)間和測(cè)試時(shí)間      1.2.8　瀏覽器缺陷  1.3  為頁(yè)面選擇合適的布局類型  　1.3.1　固定寬度布局　  1.3.2　可變布局  　1.3.3　彈性布局第2章　設(shè)計(jì)靈活布局的方法　2.1　靈活布局的設(shè)計(jì)原理  　2.1.1　避免：包含文本的內(nèi)容采用固定高度　  2.1.2　避免：不規(guī)則形狀  　2.1.3　避免：與不能擴(kuò)展的圖像相匹配的文字　  2.1.4　避免：固定寬度和全寬度內(nèi)容　  2.1.5　規(guī)劃：超出原始尺寸的圖像　  2.1.6　規(guī)劃：設(shè)計(jì)位于最大寬度之外的白色區(qū)域  　2.1.7　規(guī)劃：折成多行的并排放置的項(xiàng)  2.2　設(shè)計(jì)前和設(shè)計(jì)后：我們的非兼容設(shè)計(jì)和固定的設(shè)計(jì)第3章　準(zhǔn)備網(wǎng)頁(yè)設(shè)計(jì)　3.1　創(chuàng)建圖像版式  　3.1.1　設(shè)置畫布尺寸　  3.1.2　使用圖層和頁(yè)面來(lái)管理版式  　3.1.3　非破壞性編輯技術(shù)　3.2　針對(duì)靈活設(shè)計(jì)對(duì)圖形進(jìn)行切片處理　　3.2.1  為切片創(chuàng)建多個(gè)單獨(dú)的文件  　3.2.2　切分方框　3.3　站點(diǎn)創(chuàng)建練習(xí)：為構(gòu)建站點(diǎn)準(zhǔn)備 Beechwood Animal Shelter版式　  3.3.1　在版式中導(dǎo)航  　3.3.2　為頁(yè)眉創(chuàng)建切片　  3.3.3　為主頁(yè)創(chuàng)建切片　……第4章　創(chuàng)建可變布局結(jié)構(gòu)第5章　創(chuàng)建彈性布局結(jié)構(gòu)第6章　規(guī)范靈活性第7章　設(shè)置文字間距第8章　添加背景圖像和顏色第9章　創(chuàng)建靈活的圖像

章節(jié)摘錄

插圖：第1章 理解靈活布局1.1 布局類型我們可以根據(jù)網(wǎng)頁(yè)布局的寬度設(shè)置將其分為3種類型：固定寬度、可變（或不固定）寬度和彈性寬度。還可以通過(guò)混合不同的度量單位將這些布局合并為混合布局，設(shè)計(jì)的每一個(gè)分欄都可以使用不同的單位。這4種布局類型中的任何一種都可以使用任意數(shù)量的分欄或者美化主題，布局類型直接地決定了瀏覽設(shè)備如何在用戶面前展現(xiàn)布局的寬度。1.1.1 固定寬度：固定像素固定寬度布局（fixed—width layout）是以前最常見和最常采用的設(shè)計(jì)，之所以說(shuō)是以前的，是因?yàn)楸緯鴮⒅v解幾種替代此布局的設(shè)計(jì)。固定寬度設(shè)計(jì)的整體布局寬度以像素為單位來(lái)設(shè)置，具體值由設(shè)計(jì)者決定。通常，設(shè)計(jì)者基于最常見的屏幕分辨率（例如，800×600和1024×768）來(lái)選擇寬度。固定寬度設(shè)計(jì)是固定不變的，它們的尺寸不會(huì)隨著用戶的設(shè)置而變化，這樣一來(lái)，即便是存在不同的用戶設(shè)置，你也可以創(chuàng)建一個(gè)包含豐富圖像的網(wǎng)頁(yè)，并且能讓它看上去緊湊一致。如果你對(duì)站點(diǎn)的目標(biāo)用戶進(jìn)行了調(diào)查.那么你就能設(shè)計(jì)出符合大多數(shù)用戶瀏覽器窗口的布局，并且可以確保將文本行之間的寬度設(shè)置為一個(gè)便于閱讀的理想值。

編輯推薦

《靈活Web設(shè)計(jì)》：可變或者不固定布局可以基于用戶設(shè)備的查看大小更改寬度。彈性布局則可以根據(jù)用戶設(shè)置的特定文字大小改變寬度。這兩種類型的靈活設(shè)計(jì)都為那些根據(jù)自己需求而調(diào)整瀏覽站點(diǎn)的窗口大小的用戶帶來(lái)顯而易見的好處，而對(duì)那些習(xí)慣于完美像素控制的Web設(shè)計(jì)師而言，它們則提出了挑戰(zhàn)。盡管如此，如果能正確規(guī)劃并構(gòu)建，靈活布局仍會(huì)是很有視覺吸引力且容易創(chuàng)建的。同時(shí)，靈活Web設(shè)計(jì)的概念和技巧也會(huì)使固定寬度的CSS設(shè)計(jì)受益，因?yàn)樵O(shè)計(jì)師學(xué)會(huì)了如何針對(duì)實(shí)現(xiàn)Web的內(nèi)在靈活性而進(jìn)行設(shè)計(jì)，而不再基于輸出媒介的剛性屬性或者基于網(wǎng)格的布局來(lái)展開設(shè)計(jì)。使用符合標(biāo)準(zhǔn)和跨瀏覽器兼容性的(X)HTML和CSS設(shè)計(jì)的設(shè)計(jì)師可以從《靈活Web設(shè)計(jì)》中學(xué)到如下知識(shí)：靈活布局的好處。何時(shí)選用可變?cè)O(shè)計(jì)、彈性設(shè)計(jì)或混合設(shè)計(jì)。如何設(shè)計(jì)圖形設(shè)計(jì)版式以及如何對(duì)該設(shè)計(jì)版式進(jìn)行切片處理才能達(dá)到靈活設(shè)計(jì)的效果。如何從頭創(chuàng)建可變布局和彈性布局。如何創(chuàng)建靈活背景圖形和可伸縮內(nèi)容圖像。何時(shí)以及如何限制Web頁(yè)面中的靈活性。

圖書封面

圖書標(biāo)簽Tags

無(wú)

評(píng)論、評(píng)分、閱讀與下載

---

    靈活Web設(shè)計(jì) PDF格式下載

---