CSS tools: Difference between revisions
Jump to navigation
Jump to search
(→挑選顏色) |
(→挑選顏色) |
||
Line 134: | Line 134: | ||
* [http://gradient.quasi.ink/ Unique gradient generator] 教學: [https://free.com.tw/unique-gradient-generator/ Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器] | * [http://gradient.quasi.ink/ Unique gradient generator] 教學: [https://free.com.tw/unique-gradient-generator/ Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器] | ||
* [https://www.google.com/design/spec/style/color.html Color - Style - Google design guidelines] "Color in material design" | * [https://www.google.com/design/spec/style/color.html Color - Style - Google design guidelines] "Color in material design" | ||
* [https://coolors.co/ Coolors - The super fast color schemes generator!] {{access | date = 2016-02-29}} | |||
=== 量尺工具 === | === 量尺工具 === |
Revision as of 22:59, 29 February 2016
網頁設計樣式表(CSS)工具
網頁設計樣式表(CSS)工具
- Firebug v1.5.4 for Firefox (How To Install Firebug In Browsers Other Than Firefox | MakeUseOf.com)
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 可追蹤網頁各元素下載所需的時間
- 其他: 可觀察網頁間傳送的標頭(header)、POST 等變數 (Firebug選單 -> 網路 -> 選取正在瀏覽的網址)
- Internet Explorer Developer Toolbar(開發者工具) v.1.00.2188.0 for Windows IE
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(validator)
- 可結合IE6 ~ IE8模擬應用程式($),並均可使用該開發者工具
- Firebug Lite bookmarklet for IE , Firefox , Chrome (Firebug Lite for Google Chrome), Opera or Safari
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 無法 追蹤網頁各元素下載所需的時間
- csscan for Chrome
- 將滑鼠移動到要顯示的網頁元素,就會顯示CSS屬性
- 無法針對遠端網頁預覽CSS修改的效果
- 無法 追蹤網頁各元素下載所需的時間
- Google chrome瀏覽器 v.13.x 內建工具: 滑鼠點右鍵,選擇「檢查元素」
- 將滑鼠移動到要顯示的網頁元素,就會顯示CSS屬性
- 無法針對遠端網頁預覽CSS修改的效果
- 可追蹤網頁各元素下載所需的時間 (切換到 Network 標籤)
- Opera Dragonfly (Opera選單 --> 頁面 --> 研發工具: Opera Dragonfly) Opera
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 可追蹤網頁各元素下載所需的時間
- Web Developer extension v1.1.4 for Firefox
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 可針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(Validator)
- DebugBar - IE extension for web developer : DOM inspector, Javascript debugger, HTTP headers viewer, Cookies viewer for IE
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ok
- 無法針對遠端網頁預覽CSS修改的效果
- 提供驗證工具(validator)
- TopStyle Lite 3.5 for Windows (trial)
- 按滑鼠一下,選取網頁元素,即可顯示網頁元素屬性: ?
- 無法針對遠端網頁預覽CSS修改的效果?
- 提供驗證工具(validator)
- 相關文章: 排序 CSS 的利器 - TopStyle | 走過的、學過的、看過的
- discontinued CSSVista for Windows XP/Vista v0.15 (freeware; 須安裝 .Net Framework v2.0+)
- 按滑鼠一下,選取網頁元素(DOM inspector),即可顯示網頁元素屬性: ?
- 可針對遠端網頁預覽CSS修改的效果
- 可預覽螢幕解析度800x600 & 1024x768 不同效果
- 分割視窗同時顯示 Firefox v1.7 (Firefox ) 與 Internet explorer(IE ) v6 瀏覽畫面
CSS 線上編輯 即時預覽
- CSSDesk [Last visited: 2013-02-11]
- dabblet.com [Last visited: 2012-08-22]
- more online sandboxes on Testing#browser_issue
網頁製作相關工具
開發人員工具
- 網頁主控台 for Firefox v.10 內建工具
- 選單位置位於: 工具 -> 網頁開發者 -> 網頁主控台 、 或者直接按快速鍵 Control+Shift+K
- Using the Web Console - MDN
- 開發人員工具 for Chrome 內建工具
- 選單位置位於: 工具 -> 開發人員工具、 或者直接按快速鍵 Control+Shift+I
- 教學: 使用Chrome的Web Developer Tool偵錯 - In 91- 點部落
- Console² Firefox "可依據類型 (Errors, Warnings, Messages)、程式語言 (JavaScript, CSS, XML)、與使用情境 (context,意指 Chrome, Content) 來篩選要顯示的錯誤訊息"
view source codes of html
- Quick source viewer for Chrome
- Dafizilla ViewSourceWith for Firefox - "(a)to view page source with external applications (b)open CSS and JS files present on page" Quoted from official website [Last visited: 2011-02-28]
- View Source Chart bookmarklet for Chrome , Opera , Safari
- alternative: View Source Chart for Firefox ; View Rendered Source for IE
不同螢幕解析度檢視網頁
- Screenfly by QuirkTools — Test Your Website at Different Screen Resolutions Not work for HTTPS e.g. Facebook or Yahoo奇摩 [Last visited: 2015-07-16]
- Window Resizer for Chrome
- Responsive design testing tool – Viewport Resizer – Device simulation tool 提供瀏覽器按鈕(bookmarklet). It follows Content Security Policy. That's means it's not wok on facebook & gmail. [Last visited: 2015-07-16]
- Internet Explorer Developer Toolbar(開發者工具) for Windows IE
- 選單位置: 工具 -> 重新調整大小
- resizeMyBrowser
- Resolution Test for Chrome
- Responsive Design Testing Not work for HTTPS e.g. Facebook or Yahoo奇摩 [Last visited: 2015-07-16]
- ViewLike.Us ViewLikeUs - Check Sites in Various Resolutions! 教學
相關頁面:
- 全球瀏覽器、作業系統、螢幕解析度、搜尋引擎市占率統計表、
- Chcek Browser Compatibility
- 從手錶到桌電,各種數位裝置尺寸一覽表。Device Metrics - Google Design [Last visited: 2015-05-30]
分析網頁連線下載速度
觀察網頁回應標頭(HTTP Headers)
- Firebug for Firefox : Menu -> Net
- LiveHTTPHeaders for Firefox
相關頁面: User agent、HTTP request and response data tool
字型/字體工具
自動辨識字型 automatic identification
- Fontface Ninja for Chrome
- What's the font? for Chrome 選擇網頁一段文字,檢視使用的字型
- Type Sample 提供瀏覽器按鈕 (bookmarklet) 和 Chrome 擴充套件,顯示選取文字的字型和大小。教學:Type Sample 輕鬆查詢、辨識網頁使用的字體名稱和大小(Chrome 擴充功能) [Last visited: 2014-12-27]
- WhatTheFont! « MyFonts 上傳包含文字的圖檔,提供最接近的字型的建議。文字個數 (100 component limit) 不能超過 100 個。 不支援中文字形的辨識。 [Last visited: 2015-02-27]
群眾智慧
- WhatTheFont Forum 張貼圖片到論壇,詢問字型是什麼 英文為主
- 字嗨 上傳照片到這個群組,讓大家一起幫你看是哪一套字型
問題精靈
- Identifont - Identify fonts by appearance, find fonts by name 透過逐步詢問字型的特徵,例如有無襯線(serif) 等問題,篩選出是哪一套字型 [Last visited: 2015-02-27]
線上預覽
- 字体-找字网,您的字体管家! 輸入中文或英文字,再點選「演示效果」按鈕。 [Last visited: 2015-03-08]
挑選顏色
取色器
- ColorPick Eyedropper for Chrome
- ColorZilla Extension for Firefox and Mozilla Firefox or Chrome Web Store - ColorZilla Chrome
- MAC OSX 已內建取色器DigitalColor Meter APP for Mac
色票
- 漸層參考色票 uiGradients
- Unique gradient generator 教學: Unique Gradient Generator 美麗的網頁毛玻璃模糊背景產生器
- Color - Style - Google design guidelines "Color in material design"
- Coolors - The super fast color schemes generator! [Last visited: 2016-02-29]
量尺工具
- Page Ruler for Chrome
- MeasureIt: "Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels." Quoted from official website. Firefox or Chrome Web Store - MeasureIt for Chrome
其他工具
- Aardvark Firefox Extension Firefox
- Running Aardvark as a bookmarklet in Firefox , IE or Safari
- User Agent RG for Firefox
- Mozill firefox 網站開發的相關套件 Web Developer's Toolbox :: 收藏集 for Firefox
- Google chrome 網站開發的相關套件 擴充功能 › 開發人員工具 - Chrome 線上應用程式商店
- Javascript debug
- 填充版面工具: The Top 8 Placeholder Services for Web Designers | Nettuts+
further reading
- CSS2 Reference
- Google Chrome Extensions for Web Design Students for Chrome
- 15 Great Chrome Extensions for Web Designers and Developers for Chrome [Last visited: 2013-02-04]
Web site design and development process
- Information gathering: Research surveys
- Planning: Before you start to build a website, Content development strategy | Register domain name, Choose web hosting | Information architecture | Data model: Data type, Data flow | Documentation: Request For Proposal | Licensing
- Design: CSS tools, Free fonts, Free photos, Emoji & icons
- Testing & delivery: Usability test, check browser compatibility | Web testing | Speed up websites: Web Ping, Software acceptance test plan | Promote your web
- Maintenance: Site backup & restore test, Software update (OS patch or CMS security update)
- Need help? Community, I need inspiration, Web design glossary