做前端也有幾年時(shí)間了,不敢說(shuō)能把他看地多透,但是多多少少還是有些自己的東西。下面以 Tudou.com 的首頁(yè)為例,總結(jié)總結(jié)。
就制作而言,我將一張頁(yè)面分為四層:框架、布局、模塊、列表和數(shù)據(jù)塊。
一、框架
頁(yè)面的框架基本上都是:“頭”、“主體”、“尾”。但是對(duì)于一些頁(yè)面如Tudou.com,由于布局的需要,還應(yīng)在“頭”的下面還要加個(gè)“菜單”。
二、布局(以下用#ID表示頁(yè)面元素)
#Head和#Foot里的就不說(shuō)了,具體查看演示頁(yè)面源碼。
布局說(shuō)的是將#Main里的內(nèi)容分成幾大塊。我們看Tudou.com,#Main里典型的左右結(jié)構(gòu),我們用#Layout_1,#Layout_2表示。如圖
三、模塊
布局#Layout_1,#Layout_2里的塊就是模塊了,
按我的理解,模塊至少要有一個(gè)ID,Class則要視頁(yè)面設(shè)計(jì),給需要重用的加上。
關(guān)于模塊的ID名稱,要取個(gè)有意義的名字,當(dāng)然偷懶的可以用#Col_1,#Col_2,。。。
模塊的Class名稱用.cols_1,.cols_2,。。。
模塊內(nèi)部的如下圖:
出處:藍(lán)色理想
責(zé)任編輯:bluehearts
上一頁(yè) 下一頁(yè) 我的頁(yè)面制作方法 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|