第六屆 優選

other
快寫HTML靜態網頁
逮丸逮丸

系列文章

DAY 11

塞假資料測試版面:Lorem Ipsum 假文的使用

要弄個網站跑的時候, 常要自己來做簡單的頁面規畫, 沒有資料的時候就亂貼一通來測試; 但可以用更方便的方法。 為何常見Lorem ipsum? 為什麼好多的De...

DAY 12

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

隨機假文有了,但也需要有點變化的假圖, 好讓版面不會那麼單調。 圖形常是版面的需要 頁面的設計裡常需要有圖形的位置, 臨時的圖片且符合所要的大小, 成為常常的必...

DAY 13

stasis 的即時更新功能

使用 stasis 產生靜態網頁, 除了每更新HAML檔後, 再執行編譯的方式之外, 也提供了即時監測更新的方式。 靜態網頁即時更新 靜態網頁與動態網頁的區別,...

DAY 14

適用於個人blog到大企業網站的靜態網站產生器:nanoc

不同於stasis只是單純的轉換, nanoc 有較多的功能快速建立管理網頁。 可執行的指令 nanoc 是 ruby 環境下的工具,只要執行 gem inst...

DAY 15

使 nanoc 支援 HAML, Markdown 格式

既然用 nanoc 可以有效維護網頁, 也試試怎樣讓 nanoc 支援 HAML 的格式。 把layouts/ 裡面改副檔名而成為 default.ham, 且...

DAY 16

快速建立靜態網頁blog的工具:Jekyll

如果希望在自己的機器裡,建立靜態網頁的blog,Jekyll是快速又功能強大的選擇。 安裝及最簡單的使用 相較於前幾篇所介紹的, 因為功能強大,安裝時所要的套...

DAY 17

為何及如何選擇靜態網頁產生器

前幾篇簡介了靜態網頁產生器的使用, 事實上不限於這幾種, 而有更多的產生器可選擇。 為何用靜態網頁產生器 怎麼架個自己的站, 一開始只是有個web 網站, 提供...

DAY 18

利用 CSS 框架加速HTML的佈局及美化

前2/3的篇幅是介紹快寫HTML的語法、工具, 以及能夠像動態網頁似地快速更新網頁的靜態網頁產生器。 接下來介紹如何快速安排網頁元素的佈局及美化。 一片空白的...

DAY 19

用 ez-css 輕量框架快速佈局

如果只需要大區塊的網頁佈局, EZ-CSS是既輕量, 又提供一些常用的例子可立即使用。 早期的網頁佈局常是用 table 的HTML元件來進行, 而用 tab...

DAY 20

選用 Bootstrap 框架協助加速前端開發

在眾多 CSS 框架裡, Bootstrap 在網頁程式開發的環境裡, 可能是簡潔又易用的前端框架工具。 此框架最早是以 Twitter Bootstrap 為...