從網站關閉後就沒寫過網頁設計相關的教學文，一直對 Parallax Scrolling 視差滾動的技術非常有興趣，來介紹幾篇程式原碼和幾個很酷的 Parallax Scrolling 網站。
Air Social
http://air-social.com/
Air Social
http://air-social.com/
目前分類：程式設計 (18)
- Jun 06 Fri 2014 20:40
Parallax Scrolling 視差滾動
- Jun 04 Tue 2013 07:34
部落格新樣式(三)
好久沒有設計部落格的新樣式，這次我不用 PhotoShop 排版，簡化設計直接用 CSS 邊寫邊配色，加一點 jQuery 元素，立體感還是我重視的小細節，不想處理的部分全部 Hide，現在的網站以內容取勝整體視覺都以清爽的白色為主,但我還是偏好這種框框內的布局。
反痞克邦幫 MIB 不斷延燒，許多人紛紛遷移，想移到 Blogger 的才發現原來版型不太好搞定，除了要有基本的 CSS 能力，還必須要會程式類的東西，才有辦法設計出自己的版型和增加功能，說實在的確沒有痞克邦後台方便，比較令人生氣的應該是累積經營要歸零重新來過的那種心情吧！雖然找到了方法可以除去置頂的廣告，但多人使用時還是可能被發現，延伸出另一種方式，遷移部落格還是遲早的事，本來想重新設計 Blogger 的版面，但因為還不熟悉所以就先為痞克邦這邊的進行改版，算是練習一下不讓 CSS 退步而已。
- May 06 Mon 2013 21:54
OECSPACE 時光回溯機
記得之前網站介紹過 Wayback Machine，只要輸入網址便可查詢過去幾年的網站畫面，上方有顯示存取的年月份，前幾個版本的網站內容除了架構和文字版面都有點零散，我想可能關係到網頁製作的方式，被存取時就比較沒那麼完整，尤其是 FLASH 製作的方式，當初很炫的東西現在卻是一個壞點。
最後的這個版本用 XHTML + CSS 也符合 W3C 標準模式，所以非常完整的呈現整個網站包括圖檔，需要我寫的教學內容可以用這個時光回溯的工具找到你要的資料，原來我的 OECSPACE 一直都在喔！！
- Jul 24 Sun 2011 10:51
多年後的網頁設計案
距離上次接案算年的吧?這次是一位住在紐西蘭的香港人，透過我的網站找到我，希望我幫他設計網站，因為是遊戲相關的主題，所以我選了比較暗的色系，加上對方有喜歡我網站上的一些細節，也偏好簡單的版面，所以多少能夠看到我網站的影子存在，進行的過程相當順利，有自由發揮的空間是我最開心的。
網站部分截圖
網站部分截圖
- Apr 08 Thu 2010 20:13
練習寫 PHP 購物車程式
賀卡程式後又再練習寫了一套購物車系統，說系統好像不適合，因為只有基本功能算是陽春的程式，購物車主要是利用 session 記錄加入與刪除商品，計算價格與運費，寫入紀錄後再藉由程式自動發送訂單郵件，有訂單管理與查詢功能，商品編號與訂單編號用亂數來產生，確認訂購後的商品數量會從庫存量扣除，可自由選擇使用尺寸與顏色的功能，三個圖片上傳也能在說明中插入任何位置，增加顏色尺寸功能後我在想要讓編號不同或擁有不同的庫存量寫法複雜些，往這方面努力中。
- Jul 19 Sun 2009 10:01
接下網頁設計案子
曾說並不是很喜歡接案，一來我沒有設計基礎，二來我會讓自己承受太大的壓力，可能是因為信心不足，所以需要特別努力，這次的案子是在主站剛做改版的時候，我是豪不猶豫的推掉，全心只想先把網站做好，推辭說沒有多餘的時間，經過兩個月完成自己的網站後，這位客戶又跟我聯絡，可能是因為當時剛做完網站還有 "滿腔熱血" ，於是我接了....
收到這位客戶檔案後，有幾個傻眼的地方，網站是運動投注站，而且是用一般框架，我主要用 css 做整體設計，幾乎不能動到 html ，重要的是我只需要以 IE6 為主寫樣式，
JS 程式為IE6 寫，只有 IE6 瀏覽器的會員才能登入，讓我這個推廣 w3c 的人不敢置信，現在 IE 版本已經到 IE8 了，剛開始我非常的不習慣，因為全部是表格和框架我無法改變排版，頂多只能做配色，我又不是學設計，也沒有設計概念，客戶只說就是要"我的感覺"，而整體要乾淨大方。
收到這位客戶檔案後，有幾個傻眼的地方，網站是運動投注站，而且是用一般框架，我主要用 css 做整體設計，幾乎不能動到 html ，重要的是我只需要以 IE6 為主寫樣式，
JS 程式為IE6 寫，只有 IE6 瀏覽器的會員才能登入，讓我這個推廣 w3c 的人不敢置信，現在 IE 版本已經到 IE8 了，剛開始我非常的不習慣，因為全部是表格和框架我無法改變排版，頂多只能做配色，我又不是學設計，也沒有設計概念，客戶只說就是要"我的感覺"，而整體要乾淨大方。
- Jun 03 Wed 2009 07:32
趕著完成的東西不太滿意
新版終於完成了，原本還想會花個 3-4 個月的時間，
預計要重寫程式結果程式寫的反而更簡單，完全沒有後台，
因為我只想方便用 EmEditor 記事本軟體編輯，
刪除好多單元，伺服器檔案一下子少了一半以上，好不習慣，
當初玩部落格主要是能夠練習 CSS 佈局，因為這樣累積了很多技巧，
好長一段時間完全沒有動到網站，就是因為沒有充實自己，
腦子裡沒有增加東西，教學就很難產生，也容易產生倦怠，
網站樣式做的不理想，，因為不喜歡暗色系，也容易看膩，
接下來的 Web design 圖文教學，做完之後再看看能不能改滿意一點啦！
- May 19 Tue 2009 23:12
網站目前的進度
經過1個多月的努力，每天 2-3 小時 ，進度比預期的時間快很多，
這次著重在 CSS ，新增至少 20 篇以上的新教學，
原本的文章也都重新編寫的更詳細，
算一算光是 CSS 教學就有 74 篇，範例頁 26 頁，加上範例圖片。
Javascript 和 技巧 比較少增加 8 篇左右，全部共 55 篇，
這AJAX 程式要解說做法實在太花時間，
其中有一篇還花了 4-5 天的時間，我真想乾脆教學別寫直接介紹連結就好了呢 = ="
比較頭痛的還是版面設計，把心思都投注在寫文章，
- Mar 29 Sun 2009 20:37
CSS 設計幫手 Firebug
Firefox 網頁設計擴充套件 Firebug (螢火蟲)，主要功能是即時監控 HTML、CSS、DOM 和 JavaScript 等的網站開發工具，對於網頁製作與 CSS 設計是極大的幫手，
在"觀察"的狀態，滑鼠隨意在網頁上移動，下方則會快速的找出 HTML 與 CSS，可隨時修改並即時預覽到效果，它擁有 CSS 與 JavaScript 除錯功能，並且可測試網頁載入的速度，找出拖慢網站的地方。
- Mar 11 Wed 2009 18:52
部落格新樣式(二)
終於完成新的部落格樣式，這次選用我最喜歡的暖色系，設計排版算很保守，沒有太過於花俏的東西，加強一些陰影效果讓整體更有立體感，經過上次的製作，這次順利了許多，每次開始我總會覺得css萬能，所以在 photoshop 排版時沒有顧慮太多，結果當然會遇上不順利的地方，例如：區塊圖層可以用 z-index 來改變順序，卻偏偏IE6以下的版本不支援，結果文章上層的 murmur 碎碎念，在IE6下就會跑到下層被覆蓋，當然有解決的方法，先讓新樣式啟用再來修正。
- Oct 28 Tue 2008 23:59
新後台 & 興起的部落格
看到非常多人對於痞客後台改版後的批評，改版的初期，發生許多小問題，也因為不適應，讓使用者非常不滿，甚至還有人連署要求痞客恢復舊後台，忍不住也想談談我的看法，當然我可以完全諒解，對於現在的後台是讚譽有加，現在後台模式十足有如專業的套裝程式，程式設計師們辛苦了！我想很多人應該是停留在不習慣的狀態，而並非不好，希望能多聽到一些支持，如果下次能夠完成全部功能後再開放，應該就可以減少使用者的報怨吧！
- Jul 02 Wed 2008 19:44
部落格新樣式(一)
這段時間看起來像消失了，其實我正在自修Photoshop影像處理技術，希望對Photoshop能更熟練，順勢就想到做新的版面，這是第一次嘗試深綠色，我很喜歡用整齊的方式排版，用了這麼久了痞客，第一次用心設計版面，要求自己每個細節都不能馬虎，在排版的時候我對痞客的標籤類別一點都不熟悉，直到切割好 PSD 檔進入CSS編寫的時候，才發現原來真不容易，因為我習慣用Firefox瀏覽器，第一次很快的排好版面後，打開IE...天ㄚ！
- Nov 18 Sun 2007 10:03
練習電子賀卡程式
練習寫了一個賀卡程式，寫賀卡程式其實並不難，為了考驗自己我做了一些更突破的方式，結合 Flash 來讓賀卡有動態效果，既然運用到 Flash 只好將程式改為 utf-8 編碼，顯示的文字才不會出現亂碼，也能使用各國語言，但沒想到在製作完成測試時，才驚覺 utf-8 編碼的 PHP 程式，郵件的「主題」無法顯示完整的中文，這個問題之前就困擾我很久，曾接過一個案子也需要用 utf-8，那時候沒解決問題就暫時擱著，這一擱置就將近了一年，這次查詢更多資料，總算找到方法。
- Jul 28 Sat 2007 00:38
對於使用iframe的看法
剛開始製作網站，iframe 內置框架正流行，台灣大部分的個人網站都非常喜愛這樣的排版，我也不例外，好多年中一連幾次改版都捨棄不了內置框架，直到我接觸了 php+css+xhtml，也開始逛起國外網站，加上螢幕解析度變大之後，開始覺得內置框架是多麼的不符合大眾需求，怎麼說呢？內置框架是固定的，製作者會依自己的解析度把網站調整到與螢幕一般寬高，盡量不要讓網站出現捲軸，問題來了，沒有想過高解析度瀏覽者的感受，網站變小了，視窗中空白處太多，看幾行內容就要去捲動捲軸，那種感覺我體會很深，像這樣的網站，若沒有豐富的內容，幾秒後會關閉視窗吧！
而目前流行的 BLOG，是非常棒也適合各瀏覽環境的排版，但是還是有非常多人用 CSS 中的 overflow 屬性，將某些 DIV 區塊製造出內置框架的形式，不過有些地方就用的很恰當，例如: 網站左右有過長的文章或一些插件過多，導致中央與左右內容長短差距太大，這樣的使用方式絕對合理，希望能看到他們對這方面的觀念有所改變。
而目前流行的 BLOG，是非常棒也適合各瀏覽環境的排版，但是還是有非常多人用 CSS 中的 overflow 屬性，將某些 DIV 區塊製造出內置框架的形式，不過有些地方就用的很恰當，例如: 網站左右有過長的文章或一些插件過多，導致中央與左右內容長短差距太大，這樣的使用方式絕對合理，希望能看到他們對這方面的觀念有所改變。
- Jun 24 Sun 2007 22:29
部落格專屬樣式
套用他人的樣式作品總是覺得不太實際，還是決定抽空設計自己的專屬樣式，運用之前做的風格在稍做改變，主題圖檔是拍我的咖啡奶泡器，欄位使用非常少，以文章為主更不使用任何插件，版面樣式重視簡潔，畢竟這裡並沒有任何人知道只要自己看的舒服就可以了。
電腦的東西我都是自學，雖是資訊科畢業，但學生時代電腦連 windows 都沒有都用 DOS，學的東西幾乎沒有任何用處，雖沒學任何美工基礎，但對這方面我到是非常有興趣，利用做網站經驗的累積，漸漸有一些概念，距離專業永遠都是遙遠的。
電腦的東西我都是自學，雖是資訊科畢業，但學生時代電腦連 windows 都沒有都用 DOS，學的東西幾乎沒有任何用處，雖沒學任何美工基礎，但對這方面我到是非常有興趣，利用做網站經驗的累積，漸漸有一些概念，距離專業永遠都是遙遠的。
- Jun 23 Sat 2007 21:47
開始學習Ajax運用
看著各大網站紛紛導入 Ajax 技術，讓我非常想學，對於 JavaScript 的函數和物件導向不精專，學起來應該會有困難，於是我總是覺得沒有基礎怎麼學進階而怯步。
趁著空閒跑了一趟書店，原本只是想看看有沒有更多的css技術書籍，忽然看到一本封面有 Ajax+php 的大字，讓我眼睛一亮，php我有一點基礎，也會做一些簡單的程式運用，拿起這本書從第一頁仔細的看內容，呼呼！決定了，就是它了，我要把它帶回家應該會花不少時間研究吧！
但希望未來我能夠將 Ajax 技術運用在我的 php 網站上，對自己說...加油！
忽然發現 pixnet 後台也有運用 Ajax 技術呢！
趁著空閒跑了一趟書店，原本只是想看看有沒有更多的css技術書籍，忽然看到一本封面有 Ajax+php 的大字，讓我眼睛一亮，php我有一點基礎，也會做一些簡單的程式運用，拿起這本書從第一頁仔細的看內容，呼呼！決定了，就是它了，我要把它帶回家應該會花不少時間研究吧！
但希望未來我能夠將 Ajax 技術運用在我的 php 網站上，對自己說...加油！
忽然發現 pixnet 後台也有運用 Ajax 技術呢！
- Jun 17 Sun 2007 20:47
w3c中文介面的css驗證
發現 W3C 的 CSS 驗證服務有中文介面，
不過沒有繁體到是有些失望，
你的 CSS 是否符合 W3C 國際標準，
就需要這個檢測器來幫你驗證，
有些只適用於 IE 的 CSS 無法通過檢測，
例如濾鏡和彩色捲軸，你也來測試看看吧！
http://jigsaw.w3.org/css-validator/validator.html.zh-cn
不過沒有繁體到是有些失望，
你的 CSS 是否符合 W3C 國際標準，
就需要這個檢測器來幫你驗證，
有些只適用於 IE 的 CSS 無法通過檢測，
例如濾鏡和彩色捲軸，你也來測試看看吧！
http://jigsaw.w3.org/css-validator/validator.html.zh-cn
- Jun 13 Wed 2007 22:55
玩Pixnet部落格
可能是架網站一段時間了，不太喜歡申請式部落格，看一些好友紛紛關閉個人網站開始使用 Pixnet，我想也來試試看吧！意外發現管理頁功能非常強，不過我生活太過於公式化，沒甚麼可以寫？就是寫無聊的給自己就好了。
當我在選擇一些分享的版模時，發現竟然有非常多人的 CSS 寫法錯誤，定位使用不當，導致整個版面變形的離譜，由於每個人的電腦環境不同，例如瀏覽器版本和解析度，就都會讓作者依自己的系統環境來設計，但這樣的版型分享出來，就會造就出非常大的問題，讓人感覺怎麼 Pixnet 部落格怪怪的，是不是 Pixnet 需要對這些分享的樣式做一番篩選呢？
電腦網路 (4)