淺談網絡科技 與 網頁製作

清明時節雨紛紛 今天拜山後跟表弟討論過Google 記得6-7年前Yahoo仍是主流...但轉眼間 Google每月的搜尋率突破"31億" 除此之外,還有其他很強大的Proprietary Tools Google Map Google Calendar Google 翻譯 ... 現在還自製Nexus One力撼iPhone 真感慨這短短10年內的網絡科技發展一日千里 亦令我想起這就是一個活生生Globalization的例子 網頁製作紀事錄(1) 說起設計網頁, 我並不是這方面的專家 不過都略知有關HTML5 vs Flash, Firefox vs IE等等的資訊 回正題, 今日想介紹有關做"靜態"網頁layout的方法 1) 利用Photoshop直接輸出網頁格式, 再用dreamweaver直接更改 2) 利用Photoshop局部製作網頁配件, 再用dreamweaver改原始檔 (要知道div及css的用法) 經過多次做網頁的經驗, 現在多數人傾向用<div> 跟css這兩個東西來做網頁的layout的! 1) Photoshop slices tool      做網頁一定離不開繪圖, 在Photoshop設計好後, 利用slices tool就可以根據你自訂的規劃分割出按鈕, 文字框架等等. 當轉換成html檔後import入dreamweaver就可以更改了!  例子 : 任天堂Game Boy advance每個遊戲網頁正正是用這個方法做layout的! 其實用Photoshop轉換成html是有跡可尋的, 當打開網頁的原始檔, 就不難發現有"spacer.gif"的縱影了!     Reference     PSD to HTML Slicing Tutorials   2) <div> & CSS 另一個方法是用div, div實際上是DHTML的一個標籤, 用來打包網頁任何的物件 ( 文字, 圖片...), 你亦可以想像為Photoshop的Group功能. 最強大的是 : div可以任你放置你的物件到任何地方, 不用怕傳統html的td, tr所限制 e.g. <div style="position:absolute; top:200px; left:100px;"><img src="images/pic.jpg" /></div> 在這個div中, 我固定了這個image檔的位置為左上方, 跟網頁的邊界有少許距離. 如果以座標方式去想, 其實 left是x-coordinates, top則是y-coordinates, 而圖的座標為(100, 200) 開始貼上 至於什麼是CSS? 它其實是一個超方便的樣式表, 可以改變文字,格式,顏色等. 用法就是給一個樣式名稱再定義特性 用上述的例子, 今次把原始碼改成<div id="mystyle"><img src="images/pic.jpg" /></div> 再到css檔或中間加入 #mystyle {     position:absolute;     top:200px;     left:100px; } 心水清的朋友就會明白這個名為"mystyle"的東西, 內容其實跟之前style= "...."沒有分別, 那這個東西就是所謂的CSS了!! 看穿只不過是把一些屬性包起來給一個名稱而已, 那為什麼要這樣做呢? (大家想一想吧!) 順便提供以下simple的html製作