網頁前端設計的一些建議

來源:互聯網
上載者:User
  不過在這個還原的過程中應該也是需要一些基本的流程和注意一些東西的。

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

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

  請對這個做法say no!

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

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

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

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

  3、通常,我們都可以事先寫好一個固定的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並不僅僅是鑽空子而已,而是要回到根源。


相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。