RulersGuides.js:讓網頁顯示尺規,輔助版面設計的 JavaScript 工具

RulersGuides.js 是一個可以讓網頁顯示尺規,輔助版面設計的 JavaScript 工具,適用於各種常用的瀏覽器。


在設計網頁版面時,常常會需要量測網頁中各個組件的位置與大小,這裡我們介紹一個好用的網頁量測工具 RulersGuides.js,它可以在網頁中加入類似 Photoshop 的尺規,還可以拉出參考線,這個功能對於網頁設計者而言非常實用。

RulersGuides.js 這個工具是使用 JavaScript 寫成的,而安裝上非常簡單,只需要新增一個書籤就完成了。

首先依照您的瀏覽器複製連結網址,如果是使用微軟的 IE 瀏覽器,則複製 Rulers&Guides 這個網址,而若是使用非 IE 的瀏覽器(例如 Chrome 或 Firefox 等),則複製 Rulers&Guides 這個網址。

複製網址的時候,請使用滑鼠右鍵,選擇複製連結網址。這裡的所複製的連結網址其實是一段 JavaScript 程式碼,這段程式碼執行之後就會產生網頁上的尺規。如果想測試尺規的效果,也可以直接點選這個超連結,這樣就會執行這段程式碼,尺規也就會出現在目前這個網頁上,若要關閉尺規,則重新整理網頁即可。

接著在瀏覽器中把剛剛複製下來的連結網址加入書籤工具列中,名稱可以自己指定,這裡我們將它命名為「Rulers&Guides」。


因為這段複製下來的東西是 JavaScript 程式碼,所以它是以 javascript: 開頭的一長串程式,不過也不用在意這個,就把它當成一般的書籤加進去就行了。

把剛剛的複製下來的 JavaScript 加入書簽工具列之後就完成了,這時候你就可以開啟想要用尺規量測的網頁,然後再按下工具列中的這個連結,尺規就會顯示出來了。


如果想要關閉尺規功能,只要再按一下這個連結即可。

點選左上角的紅色尺規圖示,可以開啟功能選單,每個功能還有對應的快速鍵。


參考線的使用方式跟 Photoshop 一樣,從左邊的垂直尺規可以拖曳出垂直的參考線,上方水平的尺規則可以拖曳出水平的參考線。


除了用手直接拉參考線,他也可以讓你設定參考線位置的最小單位,這樣就可以很輕鬆拉出整齊的參考線。


再配合詳細的資訊顯示功能,整個版面配置就可以一目了然。


最後還有一個很好用的功能就是「Snap to DOM」,啟動這個功能之後,在拖曳參考線的時候,會自動對齊網頁中靠近的元素,例如對齊圖片或是某個 <div> 等等。


RulersGuides.js 目前已經測試過可以在下面這些瀏覽器使用,我想大部分後來新的瀏覽器應該都可以使用:
  • Chrome 24
  • Firefox 18
  • IE 7, 8 與 9(不支援 grid 儲存功能)
  • Safari Windows 版 5.1.7
如果是 Google Chrome 的使用者,除了以書籤的方式安裝之外,也可以從這裡下載擴充功能來安裝。
本站已經搬家了,欲查看最新的文章,請至 G. T. Wang 新網站