【分享】在使用vim在編輯HTML時，開啟自動完成的功能

在使用vim來編輯HTML檔案時，是可以使用「自動完成」功能的，但vim預設是未啟動該功能，要開啟該功能，先要切換到指令模式(command mode)下，在指令模式中輸入：

:set omnifunc=htmlcomplete#CompleteTags

指令輸入後，切換回編輯模式中，先打出<!，按下Ctrl + X後，再按Ctrl + O，就會出現自動完成的選項：

但這只是暫時間的設定，關閉vim後，再次開啟編輯HTML檔案時，原先開啟的自動完成功能就會關閉。

若要vim在編輯.html檔案時，就預設開啟自動完成的功能，就需要編輯vimrc這個檔案(以Ubuntu為例)：

$ sudo vi /etc/vim/vimrc

在檔案的最下方加入下列指令：

autocmd FileType html set omnifunc=htmlcomplete#CompleteTags

下面是在Mac設定的方式。

若是在Mac(以我的電腦為例)，要先去編輯/usr/share/vim/下的vimrc檔案：

sudo vi /usr/share/vim/vimrc

在檔案的最下方加入下列指令後儲存：

syntax on

再來新增或編輯，家目錄下的vimrc

vim ~/.vimrc

在檔案的最下方加入下列指令：

autocmd FileType html set omnifunc=htmlcomplete#CompleteTags

上面是在Mac設定的方式。 

儲存後，再以vim來編輯.html檔案時就能有自動完成的功能。

若想學好Vim，這本書不錯哦！

參考來源：

• How to auto-complete HTML code in Vim

【筆記】使用CSS製作網頁載入動畫效果(CSS for loading)

有時為了讓使用者有更好的使用經驗，在網頁載入時，需要顯示些什麼，讓使用者知道現在在載入中，今天同事介紹了一個網站cssload.net，讓人輸入一些簡單的設定後，就可以不用gif等圖檔，只使用CSS做出網頁載入時，等待的效果，像這樣：

進入該網站後，就會有幾個簡單的設定：

第一步在「Select your loader」 選擇好我們要的載入時顯示的圖形樣版：

再來選擇好要的顏色、大小，和動畫的速度後，點按【GET CODE】，就會跳出一個小視窗，顯示相對應的html和CSS：

上列的程式碼中包含了<style>和<div>兩個部份，分別把需要的style和html複製後放在適當的地方，就可以顯示出所需要的效果。

【筆記】使用GIMP做圖片地圖超連結 (image map)

拜歐很早之前就曉得在網頁中可以用圖像來做圖像地圖 (image map)，但真正有機會實作，最近真是生平第一次，而之前知道的工具有Dreamwaver，但這工具是需要版權的，所以就google找了一下，也可以使用GIMP (GNU Image Manipulation Program) 來做。

GIMP是一套免費的，但功能強大的圖像處理軟體，先到官網下載最新版本回來安裝，拜歐這裡是使用免安裝版本，版本是2.8.8。

安裝完成後，就直接點按【File】→【Open】開啟要製作地圖的圖像。

再來點按【Filters】→【Web】→【Image Map】開啟製作圖像地圖的視窗。開啟的選單路徑可能依版本不同，在不同的地方。

 視窗開啟後，可以看到在視窗的左邊，有三個常見於製作影像地圖軟體的圖示：

在這個範例中，拜歐使用最上方的「矩形」圖示，把ASK這個logo給標示出來，當開始標示時，滑鼠會變成如下列紅框中的十字圖示，表示框出矩形區域的起點：

當框好需要的區域後，再點按滑鼠左鍵一下，就會完成矩形區域的選取，在原梧的視窗會顯示出所選取的區域範圍：

 

此時也會同時跑出圖像地圖的設定對話窗：

上列中，「URL to activate when this area is clicked: (required)」是一個必填欄位，也就是當點按到這一個區域時，所要前往的網址，或者可以填入「#」，之後再使用JavaScript來動態設定。這裡拜歐填入ask.com的網址。

另外在「ALT Text」中，可以填入當使用者將滑鼠移到這塊區域時，所要顯示的提示。按下「OK」，即可完成第一設定。這時回到圖像地圖的視窗時，會發現右邊出現了剛才的第一個設定，這時可以點按中間的「紙筆」圖示來做編輯，或點按「垃圾桶」圖示來刪除圖像區域的設定：

做到這裡，其實已經很接近拜歐想要的東西： 包在map標籤中的area標籤的coords屬性的值，在Image Map的視窗中，點按【View】→【Source...】，就會跑出一個 View Source 的小視窗，其中就是上列所述的 html 字段。

其中html字段如下：

在上列的 html 中，area標籤的shape屬性就是表示剛才選取區域時，使用矩形的結果，若是使用圓形去選取，就會是circle，若使用多邊形去選取區域，值就是poly，而coords的四個數字，就是代表這個矩形的左上角的x、y座標與右下角的x、y座標。

使用圓形的步驟和矩形相同，若使用多邊形時，要注意的是，點滑鼠左鍵一下，就會連成一個邊，若要回覆，就點按滑鼠右鍵，若要完成選取，就點滑鼠左鍵兩下。

參考來源：

•  http://www.makeuseof.com/tag/create-image-map-gimp/