一個合格網頁前端工程師必須要熟悉的流程和指標

來源:互聯網
上載者:User

一,設計稿的分析

設計稿的分析是指對設計稿如何製作成頁面的分析,即哪一塊的內容可以做為公用的部分、哪一塊的內容結構可以如何?等。對設計稿的分析能力可以劃分成下面的幾個階段:

  1. 能分清設計稿中的公用與私人的部分
  2. 在1的基礎上對各部分的實現方式有一個初步的方案(包括如何切圖、寫結構、寫樣式)
  3. 在1的基礎上,準確的給出各部分的實現方案(包括如何切圖、寫結構、寫樣式)
  4. 在3的基礎上,能同時考慮方案的擴充性、複用性及頁面效能(包括如何切圖、寫結構、寫樣式)
  5. 在4的基礎上,考慮整站的結構分布(包括檔案分布、目錄結構)

上面這些都是在還沒開始動手製作之前所要做的。

二,切圖

切圖是指將設計稿切成便於製作成頁面的圖片。都有個誤區,覺得切圖就是把圖片切出來,其實並不完全是這樣,還包括把切出來的圖片合并到一起,怎麼切、從哪切才能將效能最大化,說“切圖是一門藝術”完全不為過。切圖也可以劃分成幾個階段:

  1. 切成所需要的圖片(如何將需要的部分切出來)
  2. 在1的基礎上,對切出來的圖片進行一些最佳化(包括壓縮檔大小、選擇圖片類型)
  3. 在2的基礎上,規劃切出來的圖片(包括檔案分布)
  4. 在3的基礎上,考慮整體的效能(包括合并圖片、壓縮檔大小)

HTML和CSS的編寫

HTML和CSS的編寫是指將上面完成的內容,通過HTML和CSS的編寫,將設計稿轉換成WEB頁面最重要的一塊,也是我們所要重點掌握的內容,把它們放在一起,是因為它們相互的關聯性太強,HTML的寫法會影響到CSS的寫法,它又可以劃分成下面幾個階段:

  1. 還原設計稿視覺效果,並通過標準驗證(HTML)
  2. 在1的基礎上,實現多瀏覽器的相容(HTML)
  3. 在2的基礎上,標籤語義化(HTML)
  4. 在3的基礎上,選擇較優的實現方式(包括模組化結構,方便程式指令碼使用,HTML和CSS)
  5. 在4的基礎上,考慮到擴充性、複用性和可維護性(HTML和CSS)
  6. 在5的基礎上,考慮到整站的樣式分布(包括如何?分布)
  7. 在6的基礎上,樣式寫法的最佳化(包括技巧的應用)

是對所遇到問題的解決能力,這一點在不同的階段都可能會遇到,所以沒有寫到上面。

如果你已經達到或超過3、4、5,恭喜你,你已經是一個職業的“頁面重構工作者”了。為了我們自身的發展,關注新技術、技術創新、提高使用者體驗、審美觀、程式指令碼的實現方式等,也是十分必要的。大家一起進步吧。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。