iT邦幫忙

DAY 1
11

快寫HTML靜態網頁系列 第 1

快寫HTML靜態網頁的緣起

  • 分享至 

  • xImage
  •  

疑問
HTML?這麼簡單而平常的東西,
等於是網路的ABC的基礎,
要講就該講HTML5或其他較新較有花樣的議題,

靜態網頁?聽起來就很遜,
動態網頁,或者說由網頁應用程式產生網頁的方式,
才應是有亮點有看頭。
聚焦靜態網頁的動機
有別於前幾屆寫有關rails或sinatra的動態網頁產生的議題,
是因為從接觸rails驚豔於快速就建立好網頁應用程式,
方便是方便,強大是強大,
但有時只要一些較簡單的功能時,
就會覺得用rails像是殺雞用牛刀;
再挑剔一點的話,也會覺得不夠輕巧,
於是轉而採用sinatra 這個 framework,
的確能達到輕巧而機動。

這些 framework 當然都是動態產生網頁的方式,
但再細究自己要完成的網頁內容,
基本上都是小小規模,分量不多也不複雜,
要隨時變動的機會又不大,
就不見得需要動態網頁的方式來跑。

雖然動態網頁也有以產生 cache 的方式來加速,
但我也不像弄得這麼複雜,
這是試著暫時把動態的網頁程式暫放一邊,
看看還有什麼較好的方案。

動態網頁裡常會呈獻各網頁都有一致的template,
這是靜態網頁要維護很多頁面時碰到麻煩的地方,
解決的方式可能有二種,
一是用javascript的 Single-page application 的類似概念,
只要去 render 那不同的內容,就可解決。
二是借助 靜態網頁產生器,藉由新增修改主要內容部份後,
再下指令重新編譯網頁,也不會需要貼貼寫寫重覆的內容。

這一系列裡將會介紹靜態網頁產生器的使用,
作為解決需要 template layout 的問題。

什麼是快寫HTML?
HTML的語法一個一個敲出來,非常慢也效率不彰,
而在一些HTML或其他程式編輯器的IDE環境,
可以在敲出一些字時,就跑出可選用的標籤語法,
或者說是可以auto complete的功能。
這種整合的編輯器,如果覺得分量太重,
希望從較長用而輕巧些的工具也能達到類似功能的話,
zen coding 是個蠻妙的寫 HTML 的方式,
另外快寫 HTML 的方式是,
利用「輕量級」的標示語言,
這種較 friendly 的語法來寫出想要的 HTML 的樣貌,
然後再編譯出完整的 HTML。

該再加個快用HTML
上述的快寫HTML,也只是怎麼減少去寫麻煩的標籤括號的方便而已,
到頭來網頁上的各個元件要怎麼安排,
卻又是從頭造車輪從零開始。
就會希望有「現成的成套零件」來組裝一個頁面,
這時候現成的前端框架,能快速拼出很有樣子的頁面,
讓整體的網頁不致單調卻又有一致的風格。

之前寫網頁程式時,寫出功能是一回事,
但寫出來看起來怎樣,
卻常常是醜醜的就覺得不專業,
這時前端框架助我一臂之力,
看起來就比較有說服力。

另外,當要安排網頁的內容位置時,
不見得有現成的資料來塞到網頁裡,
這時候需要有一些假的資料來做頁面的充數,
怎樣使用假文,也是可參考的作法。

結語
其實整個系列只是講,
如何快寫原始HTML的工具、
利用輕量級的標籤快速產生HTML、
善用現有的框架去組合一些常見的元件,
這樣,不只是快,而且看起來不寒酸;
然後會介紹靜態網頁生成器,
來快速地維護整個網站網頁。
在這動態網頁為主流,
或者常以網頁程式做為主要的建置方式,
可以考量所要處理的網頁議題,
是否可以就單靠靜態網頁生成器就可搞定,
成為新的選項。

快寫HTML靜態網頁列表


下一篇
用 zen coding 快寫 HTML 標籤
系列文
快寫HTML靜態網頁27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
zuyan
iT邦好手 1 級 ‧ 2013-09-18 12:41:46

快.....還要更快....
是我的終極目標

我要留言

立即登入留言