HTML的二三事(3)-三思而後行

所謂的三思而後行是指在寫之前要考慮一些小事,像是瀏覽器的支援度或是避免Html的錯誤。

先前文章提過要先確認支援瀏覽器的版本是有理由的,因為先不說CSS3,CSS2的某些功能IE就不支援。當然,要事先考慮還是事後補救決定於開發者,但先查好字典,確定瀏覽器支援的功能,也可避免向下相容的問題,修正一些大方向仍然可以減少後段抓蟲的時間。而好字典之一就是網路上多人大推的Can I use…!其它族繁不及備載,有興趣可以Google看看。

接著就是避免Html錯誤。
像是li是放在ul或是ol底下宣告清單項目的元素,不是直接放在div底下的:

一頁裡不能有兩個Id,但是Class可以有很多個:

別忘記結尾:

另外,W3C的驗證網頁(以及CSS的驗證服務)也是debug好幫手!把檔案丟上去就會知道問題囉,嘻嘻。

本文同步發表於

HTML的二三事(1)-Psd to HTML

時間邁入第七天,發現原來我也可以發文連續一個禮拜耶!
真是太感動了,希望可以這樣維持這個勢頭到活動結束。(笑)

不知道各位怎麼切版的呢?Ps跟AI都有切片工具,方式從製作電子報到整頁Html的形式都有,
看起來似乎是不難,但要切出靈活度高的網頁卻又是另外一回事兒。以下分享我的做法:
閱讀全文

開始動手前(5)-優雅降級與漸進增強

最近發現了“優雅降級”與“漸進增強”,認為是個很重要的觀念,當下決定也要把這段內容紀錄到這次主題中。
單純聊聊個人心得,因為自己不是程式出身,內容部份就請各位多擔待了^^;;也歡迎提出討論。
閱讀全文

開始動手前(4)-提案看不到的是…

今天想分享的是關於Mockup製作上的一些小事:之前的準備動作完成後就是開始作稿的時間,Just do it!目標是客戶滿意後就可以開始切版…咦?在這之前是不是還有什麼事情沒有確認呢?如果心中出現這個疑問,別懷疑,也是Just do it!,馬上回頭確認就是了(笑)。
閱讀全文

開始動手前(3)-作個不迷路的孩子

版面規劃中,清楚明白的連結絕對是重點中的重點。一個網站就算再怎麼好看,但使用者找不到正確路徑的話,網頁被關掉就會是必然的結果(哭哭)。閱聽網站少了觀眾,而電子商務網站少的可是訂單!這怎麼可以呢~(講到這裡客戶應該會挫著等了)
要怎麼解救迷途的孩子們呢?我認為有些事項必須要注意:
閱讀全文

開始動手前(2)-版面草圖

在確認客戶需求之後,我會先畫出架構確認有哪些頁面要做,利用x-mind拉一拉填一填,頂多換換格子顏色,裡面加上註解,很快就可以完成列印。但代誌不是這樣就給他結束溜~上呈老闆,對方卻只瞄了一眼說:「這格子跟漸層好醜再去畫一次!」只好摸著鼻子回坐位打開AI⋯只能說,選擇軟體得先從認識你的老闆做起(誤)
閱讀全文

作個網站吧!序(2013/10/30更新)

接觸網站開發的時間說長不長,說短也不短,
從原本的不務正業到最近才算得上是真正朝向網站開發前進。
從手刻html、css(還常常寫錯…現在好像也差不多:P)
到現在學習Sass等新技術的一步步走過來。
(甚麼?還有javascript!Orz)
日新月異的開發資訊與技術總是令我眼花繚亂,
在囫圇吞棗的當下也思考著是否該整理自己手邊的資訊,幫助自己不重蹈覆轍以及…蹲馬步!
閱讀全文