Translate

兩年來的願望終於成真

兩年前的一二月期間,我忽發奇想希望修改一下自己的網頁,但當時試過幾日之後發覺總是做不到自己想要的效果。最後祇改了一些無關痛癢的地方後就不了了之。昨天在公司時沒有事忙,突然記起了這件事,於是乎在網上找了一些資料後就重新嘗試一下。昨天成功地把網頁的內容與外觀排位分了家,今日就成功地把最難的轉頁部份做到了。


下圖:舊有的版面。基本上它是中文和英文並存,而且內容與外觀排版全是放在同一個 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 最理想。新網頁的地址:新網頁

11 則留言:

  1. 雖然都係Cut&paste的工序,但工程真的費時和巨大呀!佩服
    [版主回覆03/25/2011 06:44:00]今天在公司寫了一個 MATLAB 程式,已經自動把 61 個舊網頁中的內容抽了出來放入 XML 檔內了。如此這般就省去很多時間了

    回覆刪除
  2. 恭喜你完成心願, 為網頁化妝成功..
    [版主回覆03/25/2011 06:41:00]謝,不過現在距離成功還有一大段路

    回覆刪除
  3. 能夠願望成真,要開香檳....
    [版主回覆03/26/2011 22:57:00]現在開香檳都無時間,要搞其他 60 個網頁 

    回覆刪除
  4. Congratulations!
    玩網頁....似乎很繁雜喔. 8年前我也想試一下. 是入門者, 那時剛安裝了MS Office 2003版, 也去買了一本FrontPage書打算照著做一下. ~~~~結果仍然是我買書的老毛病, 揭幾頁開心一下就把它放在藏經閣變成了珍藏.
    [版主回覆03/26/2011 22:56:00]我們砌模型的人不是也有同一個遭遇嗎 

    回覆刪除
  5. 做到諗左好耐而又成功的事, 真係令人開心~
    不過地理蛇原來有寫homepage, 呢下真係唔知
    [版主回覆03/26/2011 22:54:00]好多時都係咁,你夾硬做就做不到,放低一輪讓腦袋有機會用另一個角度去想同一個問題就會想到另一個解決方法。

    回覆刪除
  6. 我只會將人地既script抄過來用, 當中係點運作既我一D都唔知. 因為果時老世都唔識, 呃到佢就得了. 青頭領. 你有冇搞錯...
    [版主回覆03/26/2011 22:51:00]其實我都係抄書中的 examples 

    回覆刪除
  7. 係喎,用Matlab方法將佢抽出嚟真係會快的,咁編寫時係咪Set個Common key/word來抽選呢 ?
    [版主回覆03/26/2011 22:50:00]差不多是用這方法,不過不祇是一個 Common key/word。好在 HTML 本身已經是 script language,很容易找得到。

    回覆刪除
  8. 我用firefox就完全睇唔到新排版呢~~ (IE我仲係6, 因好少用, 連upgrade都費事...)
    [版主回覆03/26/2011 22:48:00]多謝,遲下再搞搞佢!不過昨天我發覺 Safari 看得到,而我部 Blackberry 也看得到。看來祇有新 browser 才比較有機會看得到。

    回覆刪除
  9. 給你加加油.
    [版主回覆03/29/2011 09:27:00]謝!—下次介紹個靚女我識會更加有效。

    回覆刪除
  10. 嘩!恭喜哂!
    [版主回覆03/29/2011 09:28:00]謝謝,不過那不是甚麼需要恭喜的事,現在我就因此好忙碌了。

    回覆刪除
  11. 同我做Design一樣,份稿做來做去都唔啱,我就索性唔做佢住,找個藉口上一上網或走入廁所坐一坐,之後做返又好似真係好啲咁喎.....
    [版主回覆04/04/2011 11:41:00]通常我們都是如此,做到一個時候要休息一下讓腦部可以從另一個角度思考問題。

    回覆刪除