CSS tools: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
Line 106: Line 106:
相關頁面: [[User agent]]、[[HTTP request and response data tool]]
相關頁面: [[User agent]]、[[HTTP request and response data tool]]


=== 網頁的字型工具 ===
=== 字型工具 ===
自動辨識字型 automatic identification
* {{Gd}} [https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh Fontface Ninja] for {{Chrome}}
* {{Gd}} [https://chrome.google.com/webstore/detail/fontface-ninja/eljapbgkmlngdpckoiiibecpemleclhh Fontface Ninja] for {{Chrome}}
* [https://chrome.google.com/webstore/detail/ipooogmmnpmfmhbhlahhjkjiiamjllal What's the font?] for {{Chrome}} 選擇網頁一段文字，檢視使用的字型
* [https://chrome.google.com/webstore/detail/ipooogmmnpmfmhbhlahhjkjiiamjllal What's the font?] for {{Chrome}} 選擇網頁一段文字，檢視使用的字型
* [http://www.typesample.com/ Type Sample] 提供瀏覽器按鈕 (bookmarklet) 和 {{Chrome}} 擴充套件，顯示選取文字的字型和大小。教學：[http://free.com.tw/type-sample/ Type Sample 輕鬆查詢、辨識網頁使用的字體名稱和大小（Chrome 擴充功能）] {{access | date = 2014-12-27}}
* [http://www.typesample.com/ Type Sample] 提供瀏覽器按鈕 (bookmarklet) 和 {{Chrome}} 擴充套件，顯示選取文字的字型和大小。教學：[http://free.com.tw/type-sample/ Type Sample 輕鬆查詢、辨識網頁使用的字體名稱和大小（Chrome 擴充功能）] {{access | date = 2014-12-27}}
* [https://www.myfonts.com/WhatTheFont/ WhatTheFont! « MyFonts]  上傳包含文字的圖檔，提供最接近的字型的建議。文字個數 (100 component limit) 不能超過 100 個。 {{exclaim}} 不支援中文字形的辨識。 {{access | date = 2015-02-27}}
群眾智慧
* [https://www.myfonts.com/WhatTheFont/forum/ WhatTheFont Forum] 張貼圖片到論壇，詢問字型是什麼  {{exclaim}} 英文為主
* [https://www.facebook.com/groups/enjoyfonts/ 字嗨] {{FB}} 上傳照片到這個群組，讓大家一起幫你看是哪一套字型
問題精靈
* [http://www.identifont.com/index.html Identifont - Identify fonts by appearance, find fonts by name] 透過逐步詢問字型的特徵，例如有無襯線(serif)等問題，篩選出是哪一套字型 {{access | date = 2015-02-27}}


=== 挑選顏色 ===
=== 挑選顏色 ===

Revision as of 09:37, 27 February 2015

網頁設計樣式表(CSS)工具


Web site design and development process


網頁設計樣式表(CSS)工具

  • Good.gif Firebug v1.5.4 for Firefox browser_firefox.png (How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com)
    • 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
    • 可針對遠端網頁預覽CSS修改的效果
    • 可追蹤網頁各元素下載所需的時間
    • 其他: 可觀察網頁間傳送的標頭(header)、POST 等變數 (Firebug選單 -> 網路 -> 選取正在瀏覽的網址)



  • Firebug Lite bookmarklet for IE Browser msie.png , Firefox browser_firefox.png , Chrome Browser chrome.png (Firebug Lite for Google Chrome), Opera Browser opera.png or Safari Browser safari.png
    • 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
    • 可針對遠端網頁預覽CSS修改的效果
    • 無法 追蹤網頁各元素下載所需的時間
  • csscan for Chrome Browser chrome.png
    • 將滑鼠移動到要顯示的網頁元素，就會顯示CSS屬性
    • 無法針對遠端網頁預覽CSS修改的效果
    • 無法 追蹤網頁各元素下載所需的時間
  • Google chrome瀏覽器 v.13.x 內建工具: 滑鼠點右鍵，選擇「檢查元素」
    • 將滑鼠移動到要顯示的網頁元素，就會顯示CSS屬性
    • 無法針對遠端網頁預覽CSS修改的效果
    • 可追蹤網頁各元素下載所需的時間 (切換到 Network 標籤)
  • Opera Dragonfly (Opera選單 --> 頁面 --> 研發工具: Opera Dragonfly) Opera Browser opera.png
    • 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
    • 可針對遠端網頁預覽CSS修改的效果
    • 可追蹤網頁各元素下載所需的時間
  • Web Developer extension v1.1.4 for Firefox browser_firefox.png
    • 按滑鼠一下，選取網頁元素，即可顯示網頁元素屬性: ok
    • 可針對遠端網頁預覽CSS修改的效果
    • 提供驗證工具(Validator)




  • discontinued CSSVista for Windows XP/Vista v0.15 (freeware; 須安裝 .Net Framework v2.0+)
    • 按滑鼠一下，選取網頁元素(DOM inspector)，即可顯示網頁元素屬性: ?
    • 可針對遠端網頁預覽CSS修改的效果
    • 可預覽螢幕解析度800x600 & 1024x768 不同效果
    • 分割視窗同時顯示 Firefox v1.7 (Firefox browser_firefox.png ) 與 Internet explorer(IE Browser msie.png ) v6 瀏覽畫面

CSS 線上編輯 即時預覽

網頁製作相關工具

開發人員工具

  • 網頁主控台 for Firefox browser_firefox.png v.10 內建工具
    • 選單位置位於: 工具 -> 網頁開發者 -> 網頁主控台 、 或者直接按快速鍵 Control+Shift+K
    • Using the Web Console - MDN
  • 開發人員工具 for Chrome Browser chrome.png 內建工具
  • Console² Firefox browser_firefox.png "可依據類型 (Errors, Warnings, Messages)、程式語言 (JavaScript, CSS, XML)、與使用情境 (context，意指 Chrome, Content) 來篩選要顯示的錯誤訊息"

view source codes of html

不同螢幕解析度檢視網頁

相關頁面: 全球瀏覽器、作業系統、螢幕解析度、搜尋引擎市占率統計表

分析網頁連線下載速度

分析網頁連線下載速度

觀察網頁回應標頭(HTTP Headers)

相關頁面: User agent、HTTP request and response data tool

字型工具

自動辨識字型 automatic identification

群眾智慧

  • WhatTheFont Forum 張貼圖片到論壇，詢問字型是什麼 Icon_exclaim.gif 英文為主
  • 字嗨 Social-balloon-facebook-icon.png 上傳照片到這個群組，讓大家一起幫你看是哪一套字型

問題精靈

挑選顏色

其他工具

further reading

Retrieved from "https://wiki.planetoid.info/index.php?title=CSS_tools&oldid=14645"