不支援 IE6 的時代來到了, 新的電腦都已經自行給電腦安裝好 IE 8 , 而 Firefox 又日漸受到大眾歡迎, IE6 真係十分多問題( bugs ), 在製作網站的時間都要看著它面色, 不過當我看到一件事之後, 我覺得有這大靠山就不用怕了, 早前 Google 說不支持 IE6 了, 以其下的 YouTube 都一樣, 就現在以 IE6 上 YouTube 時, 就可以看到” We will out support for your browser soon. ” 在上方, 所以我覺得真得可以不用時時做網都試IE6的必要了。
現開始, 新的網頁我個人都不會支持 IE6 了, 就當網友以 IE6 上來時就說一句 ” We are out support for your browser. ” , 最多加多句網址提醒他們, 可更快的更新自己的瀏覽器, 但其實有 YouTube 在說這句話, 我看應該都沒必要再在網頁提醒網友吧。
新的 ” SiuMan C Desing ” 完成大修改了, 新的板面都是以簡單為主, 但就比以前的版本多了圖案, 以個人作品為大前題, 沒有需要的可省的都省略了, 就連 ” menu ” 都是開關形式, 畫面上除了作為和 Logo 外, 都沒有了。
有簡潔得來清新的感覺, 我自己都十分喜歡這樣的網頁, 希望不會簡單到網友不懂用吧！
現在的網頁為求美觀, 又希望文字搜尋優化, 所以都以 HTML + PNG 將網頁做到最完美, PNG 的最大好處是可以由全透明漸變至實色的圖片, 很多透疊/細緻的視覺效果都可以以 HTML 況現, FF IE7/IE8 都沒有問題, 可以自由地運用的, 但可恐的 IE6 又是不支援了… …
但是有一個方法可以解決的,就是加入 iepngfix.htc 裡面一些類似加入一個全透明的 GIF 在所設定的標籤/圖片後面, 就可以解決 PNG 檔在 IE 6 中的透明位會變成淺藍色的問題( bug ), 先下載一個 iepngfix.htc 和 一個 全透明的 GIF 圖片
— CSS —
div#SiuManC, .forPng{_behavior: url(iepngfix.htc);} /*改CLASS / ID位*/
div#SiuManC{
background:url(images/bgImg.png);
}
— HTML —
<div id=”SiuManC“>
<img src=”img.png” class=”forPng” alt=”SiuManC Images” />
</div>
註:
要留意檔案 iepngfix.htc 中
if (typeof blankImg == ‘undefined’) var blankImg = ‘imge/spacer.gif‘;
的 spacer.gif 儲存的位置
今天有一件事讓我覺得要說說 id & class , 就因為公司一個同事, 他是 programer 但就連 padding / margin 怎樣配合都不清楚, 還以這不清不楚的情況下各我說教, 說什麼: [ 在兩個標籤之間應該用 padding 去將其分格開, 不可用 margin , 因為在 FF 看的話會出問題的! ] 聽到我真的火大, 怎可能會有問題?
當時情況是有個 id 設定 ( setting ) 好了某標籤的外形, 但我用 margin 設定好了位置, 但事情是要用一樣的標籤在同一畫面不同地方出現(月曆), 所以他就想找我做晒所有 setting , 之後我提意佢可以用 program 去改, 加多一個 class 在標籤中, 在 class 設定變數(位置), 在 id 保留外形的設定, 之後他改來改去都不成功, 說是應該用 padding , 但其實當時變數的只是上下的位置, 所以左右的位置設定保留在 id 以上下的就設定於 class 中。
如下:
— CSS —
#idName {
margin-left: -50px;
z-index:999;/*外形設定*/
XXX: xxxx;/*外形設定*/
}
.className {margin-left: -50px;}
— html —
<div id=”idName” class=”className”>Something Something</div>
就可以得到 id 和 class 的最佳配合了。
但上述只是例子, 有很多不同的情況都可以用上面方式配合出不同的效果, 將讓你的 css + div 用得更靈活更方便和更簡潔, 如有其實例子的問題, 可以回應分享一下！
有時在 html 即使用了 css+div , 有時都會好多好多語法( code ), 就好似你用div 裝置了3張圖片, 其中間各有距離( margin )而左右要貼著邊界, 但如果 div 中的 img 標籤都設定為 margin-left:10px; 的話,最左面(第一張)圖就會多出了 10px 的 margin 了… …
那麼豈不是要在第一張圖中加 style / class, 這就是最常見面又好難避免的多 code 問題了, 當然都不是做多什麼久的時候, 但總人有想更方便 code 排得更靚更易看的, 希望可以在 css 中就把這一切都完成, 這時候你就可以用到 :first-child , 用法也很簡單, 就只是在div 後加 > img:first-child{ xxx:xxx; } , 就可以自由地控制第一張的設定。
例:
in HTML
<div>
<img src=”??.jpg”>
<img src=”??.jpg”>
<img src=”??.jpg”>
</div>
in CSS
div {width:300px; … …}
div img{margin-left:10px; … …}
div > img:first-child{margin:0; … …}
這板不論 css / html 就簡單清潔了～！ 當然 ：first-child 不只針對 img 標籤, 其他都可以用得上(如 <a> <strong> 等等… …)
當然! 如果是文字, 你又想設定第一個字, 你不可能每一個字都用標籤套著, 所以只是打上套著的標籤後加上就可以了。
例:
in HTML
<div>
How are you?
</div>
in CSS
div {width:300px; font-size:12px; … …}
div:first-child{font-size:15px; … …}
就可以做到你想要的設定。 另外, 還有 :first-line 看字面應該都明白, 是只第一行, 用法跟上面都是大同小異。
如果還有些對本文章不明白 / 或其中有什麼有修正的地方, 請回應本文章。 謝！
又再說說CSS 的偉大功能了!
在 IE， FF， Safari 等等瀏覽器，大家都知到各懷鬼胎， 同一樣的標籤都可以有各有不同， 就好似 <a> 係 IE 可以設定它的 width (闊度) / height (高度) , 但去到 FF , 就一切都打回原形了。 這時候你可以放心, 不是你錯, 而是各瀏覽器對這標籤的要求和設定都不同, 所以有時在 IE 做到的事, 在 FF 就看不到想要的效果。
在css 的設定位置加入 display:block 就可以隨心所慾了, 想它padding (內距離) , margin (外距離) , width , height 怎樣都可以, 加上上一章的 hack , 就不會給瀏覽器戲弄了！
css + div 做網都有一段時間了, 這段日子來, 最令我頭痛的不是 div 怎設定(setting) 而是可恐的網頁瀏覽器有不同的版本會有不同的顯示結果, 就只是 IE 就有 IE6 IE7 , 還要應付 Firefox (FF) , 就在這說說一個方法吧！
有時看到 IE 出來的效果是正確時 FF 就有點不同, 當css改到 FF 好效果正確後, 又到 IE 出問題, 雙方就好像不斷戲弄你一樣, 害你大大減完成的速度? 這時候你就可以在css 的 setting 前多加一個* 就可以針對 IE 來設定你想要的了。 又或者 FF 的 setting 後加 !important, 就可以針對 FF 來設定了。
當然上面都有說到 IE 自己對自己都好像有內戰… 所以有時候都要再加一些東西針對 IE 6, 就是在css 的 setting 前多加一個_ 。
例:
_padding:5px; /*for IE 6 only*/
*padding:5px; /*for IE only*/
padding:5px!important; /*for Firefox only*/
例:
code:
<div style=”*background:#000000; color:#999; border:1px solid #ddd; width:300px; height:100px; padding:10px;”>
IE 的背景會是黑色, 而 FF 的背景會是沒有色
</div>
試試用 FF 和 IE 看看下面有什麼不同!
Display:
notes: 有時將設定放前或放後都會有影響！
近日聽到愈來愈多人講做網頁了, 在Graphic 方面, 香港每年都生產大量”人力資源”, 但就因為太多, 很多勁爭。自然又會有些人覺得自己要跳出框框, 走各新一頁。有不小由 offline 跳到 online , 所以都想以小弟緊餘的知識說一說要留言的地方和技巧。
在現時, 網頁設計都會以 div + css 來製作網頁, 以最易接觸到的問題就是可能有些人連 table 都唔識用的時候怎去一步踏上 div + css 這程度呢?
應該這樣說, 前後兩者有很大分別。
前者(div + css) 是以不同的標籤作一個類似記號的方法(如 “id” / ”class” 命名某一部分), 再在css中把指定的部分加以設定, 就會得出一些: ( <div id=”名”><img src=”圖片網頁” />test text</div> ) 的東西, 看上去好似簡單沒有什麼內容的 html 語法(code), 但在 css 中加入些小功夫, 就可讓出來的版面豐富。有一些整合html 的條例作用。
後者(table) 是以: ( <table><tr><td>test text</td></tr></table> ) 一個個架設出來, 可以說你在html中輸入多小code, 出來的頁面就會看到多小, 如果要畫面豐富, 入面就要輸入”水蛇春咁長”的code, 自己日後難以修改之外, 登入網頁的速度又慢, 多數都是獨立設定每一個部分, 所以容易會有不斷重複設定的問題, 但有關對齊資料, 讓內容清楚易見, 就可算是它最大的效用了。
div + css 的好處有很多, 我不在這文章提了, 在 div + css 我們可以把它說成一個方式, 在上面我有說話方式的會命名一些標籤, 再加入設定, 而方間最常見是div, div 是一個類似容器的標籤, 基本上只打上div 加入字, 是沒有任何效果, 所以我們只要在當中加入id / class 就可以加入設定(如大小, 文字顏色 等等… …), 而要加入id / class 就是因為要分辨要設定的泛圍, 因為一個html file 中可能不只一個div / 其他標籤, 所以我們就加入id / class 去把它們分別出來。
如果你網頁中, 所有 <a herf=”網頁連結”>test text</a> 都有一至的設定, 就自然不用分辨要設定的泛圍, 只要在css輸入: ( a{ /*css設定xxx*/ } )就可以令所有<a> 的標籤都有這個設定。 同樣, 在指定的id/class 中加入同樣的標籤設定都可以, 就例如: ( #SiuManc a{ /*css設定xxx*/ } ), 就會將所有在<?標籤 id=”SiuManc “>中的所有<a> 的標籤都有這個設定了。
notes: 在html中寫法: ( id=”自定名” ) 在css時會時: ( #自定名{/*css設定xxx*/} )
這就是div + css 這方式的使用方法。
SW.MS(SW. My STYLE)將再度現世,
網址會由 http://1230124.com 變為 http://siumanc.info/SWMS/
SW我的風格繼續會以教學/風格資源作主題。
開站日期17.10.2009(暫定)
SW.MS的新版面是以保藍色為主色調, 背景用了Photoshop / Adobe illustrator 後面的背景色, 係一個簡單的色, 顯得中間的板面更突出, 圖案方面我不太想太多, 所以只用了簡單的藍色正板圖案, 上面的標題和按鈕都同了黃綠色, 做一些對比。
主要風格(style) 都以簡單, 有排列的細文字為主, 希望不用太多圖案. 色塊或線條, 以最簡單的方法表達網頁內容, 給人一個規則而又有色彩的深刻印象。
所有網頁內容, 素材 都會重新製作, 比以前更仔細更有色彩。而且還新加入了E-Mail 新聞電報, 讓網友可以知道SW, MS 的新資訊, 更可以緊貼網頁的潮流。 還會新增網頁設計教學, 但都只是個人觀點和意見, 會講一些有關網頁設計要重視的部份, 和一些提高網頁瀏覽量(人氣)的小提示。
但要再講一次, 本網所提出的是個人觀點和意見, 大部份都不是官方認可或什麼大報告指出的資訊, 只是個人從熱愛網頁和工作的心得, 每個人都可能有一個自己的方法做同樣的效果。
今次的網頁可以說是鼓勵更多的人創作網頁的為主要方向吧, 我亦會盡力以這方向做好。
如有問題請以E-mail 聯絡我
SiuMan C
ry_1230124@hotmail.com
