Air Social
從網站關閉後就沒寫過網頁設計相關的教學文,一直對 Parallax Scrolling 視差滾動的技術非常有興趣,來介紹幾篇程式原碼和幾個很酷的 Parallax Scrolling 網站。

Air Social
http://air-social.com/

Candy 發表在 痞客邦 留言(2) 人氣()

blog-3t


好久沒有設計部落格的新樣式,這次我不用 PhotoShop 排版,簡化設計直接用 CSS 邊寫邊配色,加一點 jQuery 元素,立體感還是我重視的小細節,不想處理的部分全部 Hide,現在的網站以內容取勝整體視覺都以清爽的白色為主,但我還是偏好這種框框內的布局。

反痞克邦幫 MIB 不斷延燒,許多人紛紛遷移,想移到 Blogger 的才發現原來版型不太好搞定,除了要有基本的 CSS 能力,還必須要會程式類的東西,才有辦法設計出自己的版型和增加功能,說實在的確沒有痞克邦後台方便,比較令人生氣的應該是累積經營要歸零重新來過的那種心情吧!雖然找到了方法可以除去置頂的廣告,但多人使用時還是可能被發現,延伸出另一種方式,遷移部落格還是遲早的事,本來想重新設計 Blogger 的版面,但因為還不熟悉所以就先為痞克邦這邊的進行改版,算是練習一下不讓 CSS 退步而已。

Candy 發表在 痞客邦 留言(4) 人氣()

oecspace


記得之前網站介紹過 Wayback Machine,只要輸入網址便可查詢過去幾年的網站畫面,上方有顯示存取的年月份,前幾個版本的網站內容除了架構和文字版面都有點零散,我想可能關係到網頁製作的方式,被存取時就比較沒那麼完整,尤其是 FLASH 製作的方式,當初很炫的東西現在卻是一個壞點。
最後的這個版本用 XHTML + CSS 也符合 W3C 標準模式,所以非常完整的呈現整個網站包括圖檔,需要我寫的教學內容可以用這個時光回溯的工具找到你要的資料,原來我的 OECSPACE

Candy 發表在 痞客邦 留言(18) 人氣()

flickshot-1.png
距離上次接案算年的吧?這次是一位住在紐西蘭的香港人,透過我的網站找到我,希望我幫他設計網站,因為是遊戲相關的主題,所以我選了比較暗的色系,加上對方有喜歡我網站上的一些細節,也偏好簡單的版面,所以多少能夠看到我網站的影子存在,進行的過程相當順利,有自由發揮的空間是我最開心的。

網站部分截圖

Candy 發表在 痞客邦 留言(12) 人氣()

shop


賀卡程式後又再練習寫了一套購物車系統,說系統好像不適合,因為只有基本功能算是陽春的程式,購物車主要是利用 session 記錄加入與刪除商品,計算價格與運費,寫入紀錄後再藉由程式自動發送訂單郵件,有訂單管理與查詢功能,商品編號與訂單編號用亂數來產生,確認訂購後的商品數量會從庫存量扣除,可自由選擇使用尺寸與顏色的功能,三個圖片上傳也能在說明中插入任何位置,增加顏色尺寸功能後我在想要讓編號不同或擁有不同的庫存量寫法複雜些,往這方面努力中。

Candy 發表在 痞客邦 留言(47) 人氣()

is_2.png
曾說並不是很喜歡接案,一來我沒有設計基礎,二來我會讓自己承受太大的壓力,可能是因為信心不足,所以需要特別努力,這次的案子是在主站剛做改版的時候,我是豪不猶豫的推掉,全心只想先把網站做好,推辭說沒有多餘的時間,經過兩個月完成自己的網站後,這位客戶又跟我聯絡,可能是因為當時剛做完網站還有 "滿腔熱血" ,於是我接了....
收到這位客戶檔案後,有幾個傻眼的地方,網站是運動投注站,而且是用一般框架,我主要用 css 做整體設計,幾乎不能動到 html ,重要的是我只需要以 IE6 為主寫樣式,
JS 程式為IE6 寫,只有 IE6 瀏覽器的會員才能登入,讓我這個推廣 w3c 的人不敢置信,現在 IE 版本已經到 IE8 了,剛開始我非常的不習慣,因為全部是表格和框架我無法改變排版,頂多只能做配色,我又不是學設計,也沒有設計概念,客戶只說就是要"我的感覺",而整體要乾淨大方。

Candy 發表在 痞客邦 留言(3) 人氣()

web.png

新版終於完成了,原本還想會花個 3-4 個月的時間,
預計要重寫程式結果程式寫的反而更簡單,完全沒有後台,
因為我只想方便用 EmEditor 記事本軟體編輯,
刪除好多單元,伺服器檔案一下子少了一半以上,好不習慣,

Candy 發表在 痞客邦 留言(9) 人氣()

web.png

經過1個多月的努力,每天 2-3 小時 ,進度比預期的時間快很多,
這次著重在 CSS ,新增至少 20 篇以上的新教學,
原本的文章也都重新編寫的更詳細,
算一算光是 CSS 教學就有 74 篇,範例頁 26 頁,加上範例圖片。

Candy 發表在 痞客邦 留言(11) 人氣()

Firebug.png


Firefox 網頁設計擴充套件 Firebug (螢火蟲),主要功能是即時監控 HTML、CSS、DOM 和 JavaScript 等的網站開發工具,對於網頁製作與 CSS 設計是極大的幫手,
在"觀察"的狀態,滑鼠隨意在網頁上移動,下方則會快速的找出 HTML 與 CSS,可隨時修改並即時預覽到效果,它擁有 CSS 與 JavaScript 除錯功能,並且可測試網頁載入的速度,找出拖慢網站的地方。

Candy 發表在 痞客邦 留言(14) 人氣()

Design_2.png


終於完成新的部落格樣式,這次選用我最喜歡的暖色系,設計排版算很保守,沒有太過於花俏的東西,加強一些陰影效果讓整體更有立體感,經過上次的製作,這次順利了許多,每次開始我總會覺得css萬能,所以在 photoshop 排版時沒有顧慮太多,結果當然會遇上不順利的地方,例如:區塊圖層可以用 z-index 來改變順序,卻偏偏IE6以下的版本不支援,結果文章上層的 murmur 碎碎念,在IE6下就會跑到下層被覆蓋,當然有解決的方法,先讓新樣式啟用再來修正。

這次我發現出現問題的地方兩度使用 overflow: hidden 得到解決,明明區塊位置都是正確,背景填入位置也都沒有錯誤,但背景就是不在我設定的位置上,還有文章列表的欄位居然在IE6跑版,無法固定在上方,這些都是靠 overflow: hidden ,hidden 屬性是讓標籤元素不顯示超過尺寸的內容,也可以刪除捲軸。

Candy 發表在 痞客邦 留言(31) 人氣()


看到非常多人對於痞客後台改版後的批評,改版的初期,發生許多小問題,也因為不適應,讓使用者非常不滿,甚至還有人連署要求痞客恢復舊後台,忍不住也想談談我的看法,當然我可以完全諒解,對於現在的後台是讚譽有加,現在後台模式十足有如專業的套裝程式,程式設計師們辛苦了!我想很多人應該是停留在不習慣的狀態,而並非不好,希望能多聽到一些支持,如果下次能夠完成全部功能後再開放,應該就可以減少使用者的報怨吧!


幾年前部落格未興起,到至今使用部落格的人越來越多,而相對的製作HTML網站的人就越來越少,據我所知原本做個人網站而後重心轉為玩部落格的人,有 90% 的比率!台灣免費的網頁空間少,也是主因,以後大家可能不太有機會去學到 HTML,這樣沒有基礎玩部落格,又需要接觸到 CSS 時,運用起來就相對困難,所以我看到很少人能為自己的部落格寫樣式,常常見許多人因為套用了哪個樣式想修改某個地方,就不知如何著手,如果能多用點心看一下原始碼,找出那段的選擇器名稱,很快也就可以從百行的 CSS 中,找出修改的地方,說到這裡真的越來越感歎,個人網站真的就快消失了嗎?我的朋友們你們都是其中的一員 = ="

Candy 發表在 痞客邦 留言(23) 人氣()

blog - 1.png


這段時間看起來像消失了,其實我正在自修Photoshop影像處理技術,希望對Photoshop能更熟練,順勢就想到做新的版面,這是第一次嘗試深綠色,我很喜歡用整齊的方式排版,用了這麼久了痞客,第一次用心設計版面,要求自己每個細節都不能馬虎,在排版的時候我對痞客的標籤類別一點都不熟悉,直到切割好 PSD 檔進入CSS編寫的時候,才發現原來真不容易,因為我習慣用Firefox瀏覽器,第一次很快的排好版面後,打開IE...天ㄚ!居然所有區塊都是跑掉的,我發現CSS中標籤元素定位 position:relative; 和 position: absolute;要非常小心的使用,上層區塊定位使用錯誤也連帶影響下層區塊的位置,尤其是 #footer 真是難搞,位置老是往上跑,原本還預定在紅色主題圖的地方加上FLASH動畫,但又面臨一些連結會消失等..種種問題下,修改次數多到數不清,最後只好用個最簡單的方式來做。。

Candy 發表在 痞客邦 留言(28) 人氣()

1 2
Blog Stats
⚠️

成人內容提醒

本部落格內容僅限年滿十八歲者瀏覽。
若您未滿十八歲,請立即離開。

已滿十八歲者,亦請勿將內容提供給未成年人士。