豪情-CSS解構系列之-新浪頁面解構-02

時間  2019-11-06
標籤 豪情 css 解構 系列 新浪 頁面 欄目 CSS 简体版
原文   原文鏈接
 

前言

這是來自內部線下交流會PPT的完整文字版，初衷跟上一篇文章中所述一致，爲了讓更多的人看到，對在交流會上沒有完善的內容作一補充，同時缺乏現場互動環節，那份記憶或感動怎麼也找不回來。另外因爲我的能力有限，歡迎指正。css

 

一.開發工具 - 前端四大利器

1. WebStorm

1). 豈今爲止，業界公認的前端開發利器。優勢：
  • 用戶體驗作到極致，基本經常使用的功能都有集成。有幾點是創新的：編輯即保存(代替Ctrl+s)，本地歷史版本，插件的整合開發，推出多個語言的通用版，好比以WebStorm爲核心，周邊有IntellIDEA，PhpStorm, Pycharm, RubyMine等等，都有操做可類似性，有統一公司的基因，能夠無縫切換，學習成本很低。
  • 插件豐富且質量較優 CoffeeScript, EJS, GitHub,vim
  • 版本開發的支持 svn,git,csv,github,p4，集成以圖形化方式可操做git。
  • 友好的ftp管理
  • 超強的模板支持
  • 開源中國每一年有打折活動，這是2014年的，2015年的活動可能還沒開始。
  • 版本升級夠快，新技術支持給力 html5, TypeScript, CoffeeScript,Dart,Sass,Less,Stylus,Nodejs
2). 缺點
  • 英文版本，對有些深度中文用戶來講，這個確實是個障礙。
  • 因爲提供的功能比較強大，因此內存開銷很大，對硬件的配置有必定要求。
  • 版本更新太快，誘使用戶不斷的去升級。而對通常用戶，開發的真正核心是語言，開發真正的價值是解決核心的需求。因此，在這方面不用過於糾結。
  • 入門須要配置，對中文用戶來講，對英文的不熟悉形成了配置的障礙。其實也不是很複雜的過程，基礎的配置看看入門教程，基本都能搞得定。
 
3). 相關資源
4). 後續展望

若是時間容許後面分享會介紹其它幾款輕量級的開發工具，以彌補WebStrom偏重的缺點：好比SublimeText, VIM等。 html

 

2. Photoshop

PS是Web設計的首選軟件，他着重側重於對圖形的二次處理，主要在顏色方面，經過分圖層處理來達到各類其異的夢幻效果。而PS的神奇在於，每一個參數的不一致，致使的結果不一致，這樣也讓不少非專業人士自認爲有設計藝術的細胞或假象，覺得本身是一個設計奇才，從而選錯行業，因此設計這行有風險，入門要謹慎。像AI, CorelDraw着重於對造型的創造或編輯，像CAD則是點線面關係，3DMax則是空間物理關係，Flash是空間與時間的關係等等。並且這些設計軟件中也只有PS可以完整真實的模擬Web頁面上的真實場景，雖然字體有時候也會在表現上出現稍爲的誤差。FireWorks也因爲市場份額或PS重合功能太多，已經中止新版本開發或更新了。這是一個公司戰略或市場競爭下必然致使的結果，個體用戶不能左右。前端

1).基本信息：
  • 以圖層爲主要的編輯對象，經過不一樣層細節的編輯，使總體效果更爲絢麗或多變。
  • 以工具爲主要的編輯手段，經過多個工具的結合，知足大部分編輯要求。
  • 經過濾鏡的組合，呈現不少不錯的效果，達到平民人士也能參與互聯網炒做的大軍中不能自撥，在當下PS已經由有一個名詞轉爲一個動詞了。
  • 對前端來講切圖時注意：優化切圖流程，提高切圖效率，增長崗位競爭優點
    具體經驗分享：修改PS的快捷鍵，使其符合前端操做的習慣，側面提高工做效率。從而擴展，能夠修改其它軟件的快捷鍵，總體提高工做效率，增長就業資本或信心。
  • 圖片格式那些事兒
    通常新手不太注意頁面的性能問題，而性能容易出如今圖片上面，如何在一個大頁面中處理好圖片是一個前端必備的技能之一。
    通常應用比較多的格式有：gif,png-8,png-24,jpg。而新手常常混淆png-8,png-24的區別。
    按我經驗4k如下gif,png-8差異不大，4k-100k: png-8,gif佔優點，大於100k果斷是jpg。
    png-8不支持alpha透明，在IE6下須要一個JS或透明濾鏡來處理。
    圖片格式與設計那點事兒
    Web性能優化：圖片優化
2). 提升切圖效率思路之擴展：

從客觀上來說，提升效率的基礎在於豐富的實戰經驗或終年的填坑經歷，本質上軟件的操做差異不是特別大。一個五年經驗或一年經驗的開發人員，使用一樣的工具，主要差異仍是一個熟練度。這裏只分享我我的積累的一些經驗：
在上一點提到的修改快捷鍵，分享一下我修改的幾個快捷鍵： html5

  • 新建圖層: F1
    使用頻率比較強，因此放在一個容易的地方。
  • 新建文件：F2
    僅次於新建文件，也是使用使用頻率比較高的一個鍵。因爲切圖是會從原始圖層上屢次的分離圖層，因此這個快捷捷由原來的按兩鍵，變爲一鍵。而且有效的分離左右手操做的特色，儘可能讓使用頻率高的鍵從左側起步。如下的幾個快捷鍵，都是按照這個思路來進行優化或設置的。
  • 按屏幕大小：F3
  • 按畫布大小：F4
    這兩個鍵操做思路主要借鑑於CorelDraw，CorelDraw是一款優秀的平面廣告設計軟件，多用於名片，包裝設計。這是由加拿大Corel產品，他們公司另一個比較著名的繪畫類軟件是Painter。
  • 存儲爲web格式：F5
    由原來的5鍵優化爲一鍵，還有一個流程是經過Ctrl+Shift+S來存儲圖片，很明顯這個流程步驟過於繁多，很浪費時間。有興趣的能夠作一個對比。
  • 裁剪命令：F6
    由原來的3鍵優化爲一鍵，另一個是裁剪工具(C)，裁剪工具對整個畫面的破壞力比較大，且不易控制，尤爲在PS的版本升級中對這個工具進行了優化。而這個命令相對更爲輕量或方便。
  • F7,F8,F9保持不變
  • 轉換爲RGB模式：ctrl+=
    由於Gif是索引模式，顏色信息較少，若是要進行編輯，首先得轉換成RGB模式。
  • 從圖層創建組：ctrl+,
    因爲剛入行的設計師沒有經驗，一個設計稿是沒有分圖層組。其實合理的圖層組能夠有效的引導前端，因此這個快捷鍵主要是解決這個問題。
  • 自由變換：F10
    變換內容
    前端主要仍是對現有的PSD文件進行編輯，因此這兩個鍵是能夠單獨拿出來的。
  • 變換選區：F11
    變換邊框
  • 畫筆：F12
    由於前端不像設計師，對PSD只是一個切割，而設計師注重於創造的過程。因此對畫筆工具的依賴不是很大，由原來的F5移動到F12。
  • 複製圖層 Ctrl+ / 原有位置在菜單欄：圖層->複製圖層
    這個快捷鍵，能夠快速的把原始PSD中的一個或多個圖層複製到一個新文件當中。
 演示：
3). 切圖的幾個辦法：
  • 切片(k):
    優勢：可以一次切除多個圖片。
    缺點：須要後退一步，下降效率，容易產生多餘無用圖片
  • 選區(先用選區工具來畫一個範圍，而後裁剪):
    優勢：區域精確目標單一
    缺點：須要後退一步，容易誤操做
  • 拷貝(Ctrl+C):
    優勢：拷貝單層的內容到新文件，可以快速的切除圖片。
    缺點：不容易找到相應的圖層。
  • 合併拷貝(Ctrl+Shift+C):
    優勢：拷貝全部可見層的內容到新文件，可以快速的切除圖片。
    缺點：不容易找到相應的圖層。

3. Firefox

同類即時編輯即時顯示的插件有：node

Firefox其它優秀插件：python

  • Vimperator
    Vimperator 的操做思惟來源於Vim，簡單的幾個鍵便可以完成絕大部分工做，
    Chrome也有相似的插件Vimium，可是不支持本地靜態文件的刷新。
  • YSlow
    該插件能夠分析網站的頁面，並會提供一些優化建議。這部分功能已經慢慢的出如今Chrome的調試工具當中
  • FireQuery
    主要針對jQuery對Firebug進行一些用戶體驗方面的加強。
  • IE Tab 2
    可讓Firefox嵌入IE瀏覽器的標籤。
  • Html Validator
    HTML校驗器，主要能夠校驗頁面標籤是否對齊，或一些常規的語法問題
  • Validaty
    提供給你一個相似於validator.w3.org的校驗器按鈕
  • CSS validator
    一鍵檢查當前網頁是否符合W3C CSS 標準的驗證器插件
  • JSONView
    顯示瀏覽器中的JSON文檔。
  • User Agent Switcher
    模擬移動端User Agent
  • 鼠標手勢 firegestures
    提供一些常有的鼠標手勢，但手勢體驗略差於360極速.
  • Pixel Perfect
    變態的產品用這個插件來驗證設計稿與頁面的偏差。

4. Chrome

Chrome在慢慢吞噬着Firefox的市場，可是近年功能是強大了，但內存佔量也逐漸上去了。
不論怎樣，他是Firefox以外的有效補充。常常用到的插件：git

  • Vimium
    受vim的方式啓發，以vim的部分快捷鍵來操做chrome，不支持靜態文件的刷新
  • JSONView
    格式化JSON的一個插件，已經包含在Fehelper插件中，與Fehelper這部分功能重合。
  • Fehelper
    前端打包的一個集合插件
  • Visual Event
    主要用途是查看某個元素具體綁定了哪些事件

擴展閱讀
IE、Google Chrome 還有 360 極速瀏覽器，哪一個最好？github

 

二.文件目錄

  • 靜態資源結構
    統一放到static目錄中
  • 動態資源結構
    好比臨時文件目錄，備份或上傳目錄
  • 目錄越細越好
    細分的目錄容易局部升級時文件夾更新，也利於項目的進一步擴展。
 

三.Html、CSS結構

如下當中，Emmet成本最輕，實現最簡單，是目前比較經常使用的一種擴展方式。其它的幾種都須要依賴一種環境，另外還須要必定的入門成本，對團隊或項目的維護是一個不小的考驗。web

 

四.Reset.css

 

五.如何調試代碼

 

1. Firefox

Firebug是我的使用比較順手的CSS調試工具，多是先入爲主，或者是我的習慣的緣由面試

 

2. Chrome

Chrome的JavaScript調試工具當真是目前功能最爲強大的工具，沒有之一

  • 格式化代碼
  • 查看元素綁定了哪些事件
  • 快速的根據勾子找到核心代碼區域
  • 高效的利用工做區，進行遠程調試
  • 利用Profiles進行性能優化
  • 利用Audits能夠進行頁面無用CSS的監測或其它方面的建議等。

擴展閱讀
web前端開發分享-css,js工具篇

 

3. IE

IE11的debuger我的感受仍是有進步的，是想從細節處來吸引用戶。可是因爲自己技術基因的欠缺，易用性方面與Chrome仍是有很大的差異，即便這樣，目前仍是IE版本下調試者的惟一選擇。

 

4. IEtester

IeTester雖然有不少缺點，但就從目前的市場來看，他是惟一一款能夠方便測試Ie6的軟件。

5. 虛擬機

由於IETester並不能真實的模擬IE6，因此有些特殊的Bug只能到虛擬機真實的環境中調試，在直接的IE6上能夠安裝IETester的Debugger插件，能夠方便的解決一些Bug。

 

六.如何檢查代碼

  • 編輯器提示
    WebStorm可以提示通常常識性的拼寫或符號錯誤。
  • 調試工具控制檯
    Firebug,Chrome等調試工具的控制檯可以很好的顯示一些錯誤。
  • 源文件
    經過源文件摺疊代碼的思路
  • 插件
    經過Firefox插件，上文已經列出，再也不重複。
  • w3c驗證網站
 

七.如何總結

總結的目的是爲了抽取一些共用佈局類型的結構或樣式，以備之後屢次複用，另外也能夠應對面試，分享給其它小夥伴等等的做用。這是個人一點總結 - Jsfiddle。另外是積累各類業務類型的頁面展現形式，爲之後創業或職業提高打下基礎。

  • 總結網站業務類型，特色
    好比新聞門戶類，頁面比較整齊或規整，講究頁面的對齊或其它小細節的和諧統一。
    好比電商類，頁面跟新聞門戶類類似，但更講究交互，注重用戶體驗細節的雕琢。
    好比遊戲類，頁面風格依賴遊戲素材，講究背景圖片氣氛的渲染，注重對遊戲文化的傳遞。
  • 佈局特色
    通常新聞，電商類，佈局較爲中規中局，只有遊戲類，考慮兼容性，可能佈局稍爲麻煩。
  • 細節處理
    有些頁面設計師爲了強調內容的不一致，可能作了差別化設計，這時須要用不一樣的CSS來覆蓋差別化頁面設計。
  • 防錯處理
    當頁面佈局完成以後，爲了防止與原有設計稿有出入，必定要有再複查一遍，以避免出錯。
  • 防改處理
    因爲頁面上每一個元素都有可能會有增長刪的處理，因此在佈局時要有這方面的考慮。
  • 防版本升級處理
    展開也很多，看看葉小釵的這篇文章：關於前端框架升級與全站樣式替換的簡單建議

最後：這是在重構以前工具的介紹，下一篇着重介紹如何重構。。。敬請期待。

未完待續...，下期更精彩。

 

前端開發qq羣：389875212 ，禁止閒聊，非喜勿進~！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程