通過代碼實例跟我學CSS樣式單技術的應用實例（第5部分）——應用XHTML+DIV+CSS構建網站的實例_第1頁
通過代碼實例跟我學CSS樣式單技術的應用實例（第5部分）——應用XHTML+DIV+CSS構建網站的實例_第2頁
通過代碼實例跟我學CSS樣式單技術的應用實例（第5部分）——應用XHTML+DIV+CSS構建網站的實例_第3頁
通過代碼實例跟我學CSS樣式單技術的應用實例（第5部分）——應用XHTML+DIV+CSS構建網站的實例_第4頁
通過代碼實例跟我學CSS樣式單技術的應用實例（第5部分）——應用XHTML+DIV+CSS構建網站的實例_第5頁
已閱讀5頁，還剩13頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

1、目 錄1.1應用XHTML+DIV+CSS構建網站的實例21.1.1遵守采用HTML（XHTML）+ DIV + CSS構建網站的一般原則21.1.2了解常見的網站布局及結構設計模式31.1.3設計符合XHTML規(guī)范的頁面結構示例61.1.4利用Dreamweaver 工具創(chuàng)建頁面和實現布局的原理性示例81.1.5優(yōu)秀的登錄框設計示例101.1.6頁面導航條的設計實例121.1.7區(qū)分W3C盒子模型和IE瀏覽器的盒子模型131.1 應用XHTML+DIV+CSS構建網站的實例1.1.1 遵守采用HTML（XHTML）+ DIV + CSS構建網站的一般原則1、首先對整個頁面進行布局劃分明確在網

2、站頁面的什么位置應該要放什么東西（內容），網頁內容在頁面上所處位置的設計即為布局。l 遵守先“粗”再“細”的原則；首先劃分出大的區(qū)域（容器寬度為網站寬度的這類容器）比如，先劃分出網站頂部、欄目導航區(qū)、主體區(qū)、底部工具欄區(qū)、版權信息區(qū)幾個大區(qū)；然后在各個大區(qū)中再劃出各自的小容器，小容器包含于各自的上級大容器中。l 再畫一個體現設計結果的“草圖”（可以在Word中或者Excel中畫出）。2、明確布局的內容主要是決定頁面尺寸、整體造型、頁眉、文本、頁腳、圖片、多媒體（如聲音、動畫、視頻）等信息的擺放位置。3、命名每個容器（每個區(qū)域）標簽的名稱（都應該要有唯一的名稱）在具體進行網站實現時首先畫出網站布

3、局的示圖這可以采用PhotoShop或FireWorks等圖片處理軟件將需要制作的界面布局簡單的構畫出來，然后把網站的各個區(qū)域劃分成不同的容器，以一定的規(guī)律進行命名、并標記在示圖上面。然后按這個圖紙上的容器名在模板中用“div id="容器名”來布局，例如： <div id="webLogoImage"></div>根據這個容器要表現出的效果在CSS樣式文件中用“#容器名參數”定義這個容器的樣式參數，例如：# webLogoImage當然，需要合理地劃分出容器并給容器定義有意義和規(guī)律的名稱。4、網站的總體風格要一致，以達到協調統(tǒng)一l 網站結

4、構的一致性：這包括網站布局、文字排版、裝飾性元素出現的位置、導航的統(tǒng)一、圖片的位置等等；l 網站標志性元素的一致性：這包括網站或公司名稱、網站或企業(yè)標志、導航及輔助導航的形式及位置、公司聯系信息等。5、遵守“內容”與“表現”相互分離得原則進行設計和實現在內容描述的標簽中不能再出現表現控制的標簽如<font>、<color>或者屬性“height”、“width”和“align”等。但并不是在HTML頁面中只能有<div>標簽，也可以應用<p>（它也是塊級元素）、<table>和<form>等沒有表現屬性的標簽。1.1.2

5、了解常見的網站布局及結構設計模式網站網頁布局大致可分為“國”字型、拐角型、標題正文型、左右框架型、上下框架型、綜合框架型、封面型、Flash型、變化型等。1、“國”字型網站網頁布局也可以稱為“同”、“口”字型，是一些大型網站常采用的布局最上面是網站的標題以及橫幅廣告條，接下來就是網站的主要內容，左右分列一些條幅形式的內容，中間是主要的信息，與左右一起并列到頁面底部，最下面是網站的一些基本信息、聯系方式、版權聲明等信息。下面的 :/ xunlei /網站就是采用這樣的結構設計，請見下面的示圖。2、拐角型網頁布局又稱“T“字型布局，這種布局結構與上一種的國”字型布局其實只是形式上的區(qū)別，上面是標題

6、及廣告橫幅，接下來的左側是一窄列鏈接等，右列是很寬的正文，下面也是一些網站的輔助信息。在這種類型中，一種很常見的類型是最上面是標題及廣告，左側是導航鏈接。下面為 :/emd.jxbsu /的結構示圖，它體現了拐角型網頁布局的基本特性。3、標題正文型網頁布局這種類型的網頁布局的最上面是標題，下面是正文信息和導航條等。 :/bbs.hangzhou /系統(tǒng)采用了該形式的布局。4、左右框架型網頁布局這是一種左右隔離的框架形式的布局結構，一般左面是導航鏈接，有時最上面會有一個小的標題或標志，右面是正文。這在BBS論壇系統(tǒng)很普遍，因為這種類型的布局結構非常清晰，一目了然。某個論壇系統(tǒng) :/bbs.px1

7、987 /就采用了布局方案。 5、封面型網頁布局這種類型的網頁布局基本上是出現在一些網站的首頁，大部分為一些精美的平面設計的動畫，放上幾個簡單的超鏈接或者僅是一個“進入”的鏈接。請參考 :/ 網站設計方案。6、Flash型網頁布局其實該網頁布局結構與上面的封面布局型結構是類似的，只是它采用了Flash動畫，因此能夠表達更豐富的信息，其視覺效果及聽覺效果如果處理得當，絕不差于傳統(tǒng)的多媒體的效果。 :/ pdpharm 采用了該方案。1.1.3 設計符合XHTML規(guī)范的頁面結構示例1、頁面結構中分區(qū)塊的主要目的是希望達到“信息分類”顯示，并提高“頁面的可讀性”2、在頁面頂部一般放“網站標志”和“站

8、點名稱” 3、在其下放站點導航主菜單（導航條） 4、而在導航條的下面一般為“頁面內容”區(qū)5、在狀態(tài)信息顯示區(qū)或者廣告條信息中顯示各種狀態(tài)信息和圖像、廣告條 6、最下面為版權和有關法律聲明區(qū)或者對瀏覽器的版本要求等信息最后采用<div>等標簽將這些結構定義出，一般推薦采用相對長度單位。1) em：元素的字體高度2) ex：字母x的高度3) px：象素Pixels4) %：百分比Percentage1.1.4 利用Dreamweaver 工具創(chuàng)建頁面和實現布局的原理性示例1、設計和創(chuàng)建出表示內容的XHTML頁面（1）選中其中的“使文檔與XHTML兼容”選項下面為在Macromedia

9、Dreamweaver 工具中創(chuàng)建出一個XHTML頁面（也可以在Eclipse工具中創(chuàng)建），但要注意選中其中的“使文檔與XHTML兼容”選項。（2）最后的頁面內容如下<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" " :/ /TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" :/ /1999/xhtml"><head><meta -equiv=

10、"Content-Type" content="text/html; charset=gb2312" /><title>無標題文檔</title></head><body><div id="weblogo"></div><div id="webmenubar"> <ul><li><a href="#"> 返回首頁 </a></li><li&g

11、t;<a href="#"> 登陸系統(tǒng) </a></li><li><a href="#"> 系統(tǒng)注冊 </a></li><li><a href="#"> 找回密碼 </a></li><li><a href="#"> 在線幫助 </a></li></ul></div><div id="webpagec

12、ontent"></div> <div id="webstateinfo"></div> <div id="webauthorarea"></div></body></html>2、在CSS樣式布局中定義各個標簽的顯示風格對于普通的導航條，一般是將<ul>和<li>標簽相互配合應用，并結合<div>與CSS樣式定義，可以創(chuàng)建出無表格的布局。3、可以應用下面的CSS樣式定義導航條的最終顯示風格（1）取消列表顯示效果ul l

13、i list-style-type:none; （2）如果需要將列表符換成圖像ul li list-style-type:none; list-style-image: url(images/icon.gif); （3）采用下面的方式實現左對齊ul list-style-type:none; margin:0px; 4、設計師需要了解的幾個基本原理（1）人類閱讀的一般眼動習慣都是從左至右 從上至下的順序優(yōu)秀的頁面設計需要考慮人類閱讀的習慣，所以一個頁面的左下角和右上角都會被認為是盲點區(qū)域。（2）費茨法則(Fitts Law，1954)它是一則人機交互法則，闡述了：快速移動到目標的時間是離目標距

14、離與目標大小的函數。目標距離愈遠，目標面積愈小，則移動到目標的耗時愈久。費茨法則適用于手或手指進行實體觸摸或顯示器上用指針虛擬指向。 微軟 Office 2007(Word2007、Power Point2007、Excel2007)有一處改良設計很好地應用了費茨法則。選中文本的右上角會浮出相應最常用的富文本編輯工具面板，且工具面板透明度隨鼠標離目標的距離的增大而增大。1.1.5 優(yōu)秀的登錄框設計示例1、新浪微博郵箱密碼等提示文字直接嵌套在輸入框內 十分簡潔和符合從上往下的視覺習慣同時重點突出了“立即注冊微博”等來吸引用戶注冊。2、騰訊微博除了“立即開通微博”這個大按鈕十分搶眼之外 登陸按鈕右

15、邊還有一個注冊的連接同時騰訊登陸都采用自身的產品 QQ號郵箱和微博等 并不支持外部社區(qū)如msn等方式登入(大家都懂的)。3、網易微博注冊按鈕文字和樣式都跟新浪的基本一樣不過輸入框并沒有提示用戶該 “輸入什么”同時“下次自動登陸”并沒有默認選中產品細節(jié)設計上需要多花點功夫。4、淘寶淘寶網這個logo和登陸按鈕 都是橙色的設計用戶的瀏覽習慣會完全符合而且你的眼球會在這兩個橙色物體之間跳躍。1.1.6 頁面導航條的設計實例1、導航條模式（1）對于信息統(tǒng)一歸納性強的站點通常會使用簡單模式（2）對于有豐富次級信息的通常會使用以下兩種模式其中第1種導航方便快捷預覽，而第2種導航直接展開次級信息。當然，也有

16、站點把兩種模式合并。1）鼠標hover下拉2）tab展開2、導航操作性一個完美的導航最基本最重要的是隨時隨地快速引導用戶去相關頁面而且能及時返回方便跳轉到其他頁面。比如用戶很可能是從首頁任何一個興趣點誤入了詳情頁面去的容易步到！但從詳情頁面返回到其他模塊或想去其他分支類別頁面就要仰賴導航了。1.1.7 區(qū)分W3C盒子模型和IE瀏覽器的盒子模型1、理解CSS盒子（箱子）模型（1）什么是CSS的盒子模式（Box Model）傳統(tǒng)的表格排版是通過大小不一的表格和表格嵌套來定位排版網頁中的內容，而改用CSS排版后，就是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網頁。也就是說應用“DIV+CSS”

17、布局頁面的結構其實就是通過由CSS定義的大小不一的各個“盒子”和“盒子之間的相互嵌套”來編排網頁中的各個內容的布局。（2）CSS“盒子”模型的組成元素每個CSS “盒子”都有內容（Content）、內邊距（Padding）、邊框（Border）和外邊距（Margin）等屬性描述。而日常生活中所見的盒子或者箱子也具有這些屬性特征，所以稱它為CSS盒子模式。2、理解CSS盒子模式中的內容、內邊距、邊框和外邊距等屬性的含義（1）所謂的“內容”其實也就是在盒子里裝的東西如段落、文字、圖片等元素或者也可以是另一個小盒子（此時也就是<div>標簽進行了嵌套）。但與現實生活中盒子不同的是，現實生

18、活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS的盒子具有彈性，里面的東西大過盒子本身時，可以把盒子（父標簽）撐大。（2）填充只有寬度屬性，可以理解為生活中盒子里的抗震輔料厚度填充就是怕盒子里裝的東西（珍貴的）損壞而添加的泡沫或者其它抗震的輔料。（3）邊框就是盒子本身了，并且邊框有大小和顏色之分我們可以理解為生活中所見盒子的厚度以及這個盒子是用什么顏色材料做成的。（4）邊界就是該盒子與其它盒子要保留多大距離至于為什么要提供邊界，主要是盒子在擺放的時候的不能全部堆在一起，要留一定空隙保持通風，同時也為了方便取出。3、為什么稱其為CSS盒子模型由于頁面內容的各個構成標簽元素不外乎為<

19、span>、<div>、<table>、<form>、<input>和<img>等標簽。但不管這些標簽元素在頁面中怎么放置，每個標簽元素的形狀都是矩形的。嚴格地說，標簽元素形成了一個矩形的區(qū)域，這個區(qū)域，被稱作Box（盒子）。而且這些矩形肯定都是規(guī)規(guī)矩矩的水平的放置的，沒有斜放的。4、margin、background-color、background-image、padding、content和border之間的層次、關系和相互影響圖在W3C的平面盒模型中，CSS中的width和height屬性項目定義的是內容部分的寬度和高度

20、，而不是整個盒子的高度。padding、border和margin屬性的寬度依次加在外面。背景會填充padding和內容部分。但是由于瀏覽器設計上的問題，不同瀏覽器在顯示的效果方面會有些不同。5、W3C標準的平面盒模型和IE瀏覽器的平面盒模型之間的不同（1）W3C定義的平面盒模式（也稱為內容盒子）下圖中的大框代表一個標簽元素所生成的矩形區(qū)域，也就是盒子（Box），而每一個Box都包括有一個內容（Content）區(qū)域以及環(huán)繞其四周的 padding、border和 margin區(qū)域。而padding、border 和 margin 區(qū)域都包括 top、right、bottom、left 四部分。

21、如圖所示（“LM”代表left margin，“RP”代表right padding，“TB”代表top border）。（2）除IE以外的大多數瀏覽器只支持W3C平面盒模型，如下的CSS示例：#someOneBox width:180px; height:72px; padding:10px; bording-width:5px; 在W3C的嚴格平面盒模式下，該標簽元素的內容顯示的范圍是180*72px，內邊距和邊框在180*72像素的范圍之外。所以整個標簽元素的實際覆蓋的面積中的寬度應該是：width:180 + 10*2 + 5*2 = 210px，而高度為：height:72 +10*

22、2 + 5*2 =102px。而在IE6的兼容模式下整個標簽元素的覆蓋面積為180*72像素，內容的實際大小減小到寬度180 - 10*2 - 5*2=150px，高度則為72 - 10*2 - 5*2 =32px。（3）IE瀏覽器提供有兼容W3C的內容盒子的標準模式和怪癖模式盒模型的Bug（錯誤）問題在IE6以前的版本和IE6及以后版本的兼容模式中，盒子模型跟其它瀏覽器存在不同，在CSS中聲明的寬度和高度是包含 padding和border在內。因此標簽元素實際顯示出來后要比在其他的瀏覽器中小。IE瀏覽器能夠根據頁面的呈現模式的定義而是用對應的平面盒模型（W3C和IE自己的兼容方案），至于采

23、用哪種呈現的方式取決于頁面上的DOCTYPE的聲明。如果頁面包含有效的DOCTYPE聲明，則以標準的模式（遵守W3C的盒子模型）呈現；而如果頁面沒有DOCTYPE聲明或沒有有效的DOCTYPE聲明，則以怪癖的模式呈現。6、測試各個不同版本的瀏覽器在CSS盒模式下的差別（1）在IE瀏覽器的標準模式呈現中是與其它瀏覽器保持一致性<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" " :/ /TR/xhtml1/DTD/xhtml1-transitional.dtd">

24、<html xmlns=" :/ /1999/xhtml"><head><meta -equiv="Content-Type" content="text/html; charset=gb18030" /><title>測試不同版本的瀏覽器在CSS平面盒模式下的兼容性</title></head><body><div style="border:20px solid red; padding:20px; background

25、-color: green; width: 100px; height:100px;"> <div style="width:100%;height:100%; background-color:yellow;"></div></div></body></html>（2）在IE瀏覽器的怪癖模式呈現中是與其它瀏覽器有差別的（比在其他的瀏覽器中?。?lt;html xmlns=" :/ /1999/xhtml"><head><meta -equiv="Content-Type" content="text/html; charset=gb18030" /><title>測試不同版本的瀏覽器在CSS平面盒模式下的兼容性</title></head><body><div style="bor

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論