iT邦幫忙

DAY 12
11

快寫HTML靜態網頁系列 第 12

除了假文,也要有假圖來快速充版面

  • 分享至 

  • xImage
  •  

隨機假文有了,但也需要有點變化的假圖,
好讓版面不會那麼單調。
圖形常是版面的需要
頁面的設計裡常需要有圖形的位置,
臨時的圖片且符合所要的大小,
成為常常的必需品,
前一篇 裡提到的 lorem.js,
其中的語法可以用:

<img class="lorem_i300x200" />

透過 javascript 就畫出了:

<img src="http://placehold.it/${w}x${h}" />

的HTML碼,而有假圖。

如果覺得那樣的圖太無趣,
好像最早的時候出現了 placekitten 的貓圖網站,

依著不同的大小參數產生不同的貓圖,
這種看起來比較有趣的貓圖,
後繼者更提供不同主題的圖片,
做類似的網站 place{某主題}.com 的圖形網站,
差不多的參數大小為網址。

當然也可以去改 lorem.js 裡產生圖形的網址,
指到自己想要的圖形網站。

更多的相關資源
前年有這篇文:
The Top 8 Placeholder Services for Web Designers
蒐集介紹了幾個有用而有特色的產生隨機圖的網站,
而在今年有類似的文章,
例出更多的類似的網站簡介:
The Internet's Best Placeholder Image Sites for Web Development
如果還要更多,
用關鍵字 placeholder image 慢慢去瀏覽符合你品味的假圖。

想產生更多的隨機的磚塊圖形頁面,
此javascript的程式碼是很不錯的參考:
http://jsfiddle.net/Ma2Vm

善用隨機產生的圖形網站,
也是快寫網頁時,
快快產生內容的好方法。

系列文章列表


上一篇
塞假資料測試版面:Lorem Ipsum 假文的使用
下一篇
stasis 的即時更新功能
系列文
快寫HTML靜態網頁27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言