DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 還原設計稿進行頁面制作的流程和注意事項
還原設計稿進行頁面制作的流程和注意事項
編輯:CSS詳解     

現在,對於頁面制作(估計每家公司的叫法都不大一樣)這個職位,職責已經逐漸清晰了,通常需要負責的環節就是“還原效果圖”,也就是將設計稿做成Html頁面。

  不過在這個還原的過程中應該也是需要一些基本的流程和注意一些東西的。

  1、我們在拿到設計圖後,通常會怎樣做呢?

   或許我們會在拿到圖後二話不說,直接對著效果圖,將代碼從頭敲到腳?

  請對這個做法say no!

  建議大家在拿到設計圖後,不要急於開始制作,先仔細的看一次(不是看有多漂亮^_^)。如同庖丁解牛般,他看到的不是單純的一頭牛,而是看到了牛本體的機理結構。而我們要看出來的也正是設計圖的骨架,只有順骨架,才能知道這個圖的結構應該怎麼寫。在把握好總體結構後才開始動手敲代碼,以此避免在敲代碼的時候,敲著敲著又要停下想想這塊區域該怎樣寫。

  2、對結構做到心中有數後,是否可以敲代碼了?

  不,我們似乎還有一些事情忘了做。比如說,設計稿上的某些效果,需要使用什麼技術來實現?又或者是某個部分,需要做成怎樣效果。我們只有對整個設計稿有了一個大致的了解,才會知道,要完成這個頁面,需要用到哪些東西,並且准備哪些東西。

  而在等我們將上述的一些事情都做好後,接下來敲代碼的工作將會順暢很多。因為你的思緒早已經運作開了,對於設計稿的每個部位都已經了然於胸,敲起代碼來,當然就會如有神助。 :)

  3、通常,我們都可以事先寫好一個固定的Html框架,以備在以後的工作中高頻次的使用。

假設以下是你寫好的Html固定框架:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHtml 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<html XMLns="http://www.w3.org/1999/xHtml" XML:lang="zh-cn" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/Html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title></title>
<meta http-equiv="imagetoolbar" content="no" />
<meta name="Robots" content="all" />
<meta name="Author" content="" />
<meta name="Copyright" content="" />
<meta name="KeyWords" content="" />
<meta name="Description" content="" />
<link type="text/css" rel="stylesheet" href="skin/layout.CSS" media="all" />
</head>
<body>
<!--從這裡敲你的代碼-->
</body>
</Html>

  這樣的話,你就可以省下每次都去其它頁面尋找並且copy這些東西的時間。當然,如果你是在使用一些IDE的話,可能會自動幫你生成,不過自動生成的東西或許不一定適合你。

  4、同樣,也會有一個類似的CSS框架

  說框架似乎有點不妥,這個所謂的CSS框架,其實只是一些公用的,復用性高的樣式集合,比如一些reset樣式或者其它。這樣就可以不必每次都去重復寫這些同樣的東西,減少你敲樣式的時間,提高工作效率。當然,這個集合應該是一個適合你工作需要的集合,而不是為了做一個集合而寫的,且無法給自己的工作帶來方便的集合,如果是這樣,倒不如不寫。

  對於Html和CSS樣式的好壞是否有一個可參照的標准?

  應該說是沒有的,

  但一個良好的Html結構,我覺得起碼需要具備以下幾個要素:
  對於時效性短,修改次數少且結構固定的頁面,需要做到簡潔,清晰;對於時效性長,修改頻繁且結構相對變動較多的頁面,也需要做到讓Html結構盡量簡潔,清晰,但更重要的是要有較強的可擴展性(在頁面有較大改動時,也不會傷筋動骨,可以比較輕松的搞定)。

  那麼一個好的CSS,又該是怎樣的呢?

  一個好的CSS文件,應該具備高復用,低耦合,當然,也需要注意簡潔,能夠縮寫的盡量縮寫,以減少字節。還有一個非常重要的,就是命名。好的命名,是可以共通的,比如說#header,只要是開發,不局限說前端,就是後端,也能夠一眼就知道這塊指的是“頭部”,這就增強了你的代碼可讀性。當然,由於每個人的風格不一樣,這或許就需要做成一個規范。其中的好處,不言而喻。另外還有就是hack,這個東東,雖然可以幫助我們解決很多難題,但可以不用盡量不要使用,因為它不僅會破壞代碼的可讀性,而且還會增加後期的維護成本,且不利於向後兼容。

  這以上所說的這些,對於團體作業來說都是極為重要的。因為一個團隊,難免有人員的更換,就免不了一個項目會換多個接手人。這時,一個規范,或者說一個良好的可讀性強的頁面結構和CSS,都能讓新接手的人快速進入到你當時做這個項目時的狀態,對提高效率有很大幫助;也對整個團隊的代碼風格的形成和編寫習慣有比較大的幫助。

  說了這些,其實還需要注意的是結構的語義化,當然還有一些微格式。現在是seo炒得火熱,但語義化與seo並不沖突,且做好的了結構的語義化,其實對seo也是有極大幫助的,況且現在的一個總體趨勢就是標准化,對於這個大環境,就是重量級的搜索引擎也不會輕視,蜘蛛對頁面的結構也是非常敏感的。真正的SEO並不僅僅是鑽空子而已,而是要回到根源。

  三言兩語還有很多細節方面是描述不到的,以後有時間再寫。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved