兩年前的一二月期間,我忽發奇想希望修改一下自己的網頁,但當時試過幾日之後發覺總是做不到自己想要的效果。最後祇改了一些無關痛癢的地方後就不了了之。昨天在公司時沒有事忙,突然記起了這件事,於是乎在網上找了一些資料後就重新嘗試一下。昨天成功地把網頁的內容與外觀排位分了家,今日就成功地把最難的轉頁部份做到了。
下圖:舊有的版面。基本上它是中文和英文並存,而且內容與外觀排版全是放在同一個 HTML 檔內。到現在為止,我的網址內共有 61 頁模型網頁,如果要修改所有的外觀排版
的話,就要開所有 61 個檔。明顯地這不是方便的做法。(圖中舊網頁的地址:舊網頁)
下兩圖:新的版面上中文與英文分了家,版面右上角加了一個按扭,按一按就能夠顯示中文或英文版。設計上如果還有第三種或以上的語文的話,都可以加入用類似的按扭來控制。
兩年前嘗試時失敗的主要原因是我能夠分開網頁的內容與外觀排版,但就不知道怎樣把兩者組合起來。如果看倌對網頁有點認識的話,應該知道我所謂的「分開網頁內容」是指把文字的描述和圖片的網址放了在一個 XML 檔內;而這個 XML 檔內也分開了中文和英文的描述。我的做法是在 index.html 檔內透過 JavaScript 去讀取 XML 檔內的內容,以同一個 JavaScript function 重寫 index.html 的 HTML 碼。這個 JavaScript 檔是一個 function 而不是 module 是因為它需要有「中文」或「英文」作 input 去選擇讀取 XML 檔內的中文或英文內容。其實用 JavaScript 去重寫 index.html 的 HTML 碼我在兩年前已經做得到,所以今天一個早上就已經寫好那部份了。現在這個安排之下,祇有 XML 檔是每一個模型網頁都會不同,但每一個模型網頁的 HTML 檔都是完全一樣,而 JavaScript 檔就是所有模型網頁共用一個。故此祇要改動 JS 檔關於排版的部份就可以改變所有模型網頁的排版。但當然,要做到這個階段的話就先要把 61-1=60 個模型網頁的內容放入 XML 檔內!這個巨大的工程自然不是一兩日就可以完成的。(作參考之用:我從 2006 年秋天開始在網頁中加上英文描述,估計今年夏天應該可以全部完成。所以這次改版可能要幾年時間才可以完成。)
下圖:兩年前以相同原理做出來的圖片專頁。(這頁的 HTML 碼就是用 JavaScript 自動編寫出來的。)
三月二十四日補註:剛才發現 IE8 看新網頁會有大問題,IE9 還算可以,不過暫時以用 Chrome 最理想。新網頁的地址:新網頁