Browsing articles in "製網筆記"
四月
8
2011

15 個實用的 HTML5 與 CSS 教學和速查表

html5_tutorials_3

HTML5的是給網頁設計師和開發新的功能,是事物的幻想與以前的版本的HTML。網頁現在將使用更多的語義與結構的特定標記。視覺元素如圓角現在 內置的,因此是能夠創造拖放互動。即使是不完全支持HTML5的主要瀏覽器中,有那些是推進和試驗的新功能。為了鼓勵你做同樣的和準備你的未來,我們』 VE的圍捕 15個有用的HTML5的教程和速查表. 教學 如何使一個 HTML5的iPhone應用程序 代碼向後兼容,第一頁與 HTML5的投資組合和CSS3 設計與應用程序代碼酷iPhone在HTML5網站 5編碼的HTML佈局便條 的HTML 5和CSS 3:技術說不定你們很快就會出院的使用 有1場日,HTML5的形式 設計一個用HTML5的博客 觸摸未來:創建一個優雅的網站在HTML 5和CSS3 在HTML5的結構標籤 編碼一對 CSS3和HTML5的單頁網站模板 如何使所有的瀏覽器渲染HTML5的標誌,正確 – 偶的IE6 備忘單 HTML 5的小抄 HTML 5的視覺小抄 HTML5的帆布小抄 HTML 5的袖珍手冊 相關文章 下面是一些其他文章,你一定會找到有用的。 13純 CSS技術創建的JavaScript類的相互作用 12個優秀的技術對 CSS3按鈕和菜單 最常見的HTML和CSS的誤區,以避免 14個有用的速查表的前端Web開發 11個有用的在線工具更好的CSS發展

三月
3
2011

測試網頁相容性:Internet Explorer Collection 、 IETester 同時運行不同版本 IE

測試網頁相容性:Internet Explorer Collection 、 IETester 同時運行不同版本 IE

  我自己慣用的預設瀏覽器當然是「Firefox」,不過當我在發表部落格新文章,或者改動部落格版型後,都會使用其它的瀏覽器(例如IE、Opera、Safari、Google Chrome)來打開我的部落格看看,這樣做是因為不同的網友會使用不同的瀏覽器來進入我的網頁,所以我必須試試看我的網頁是不是在幾種主流瀏覽器上都能正常觀看,要不然當訪客進入時出現網頁錯誤,對於瀏覽體驗來說可是大打折扣的。 一般來說我們可以在電腦中同時安裝各種不同的瀏覽器。其實多裝幾種瀏覽器是有很多好處的,例如我昨天也提到的「如何同時在電腦中開啟單一網站的多個不同帳戶(Google、Yahoo 各種網路服務全適用)?」這篇文章中的例子;而如果你是網站站長、部落格站長,多裝幾種瀏覽器也可以讓你去測試自己網頁的顯示效果;當然,多裝幾種瀏覽器可以「開闊你的眼界」,試試看不同的工具,找出對你來說最趁手的上網利器。 不過有個小問題就是,我們可以同時安裝IE、Firefox、Google Chrome都不會打架,但是卻無法同時安裝像IE6、IE7這種不同版本的同類瀏覽器,這在其它品牌瀏覽器中或許沒有什麼問題,但偏偏就是在IE中,有可能IE7可以打開的網頁在IE6中卻會出問題(或者相反),而又偏偏很多網友因為各種原因仍然繼續使用IE6,所以身為站長,我們可能就會想要分別去試試看自己網頁在IE6、IE7甚至IE8中是否正常,那這樣的需求要如何在「同一台電腦」中辦到呢?一台電腦中不是只能安裝一種IE嗎? 我不是在進行專業的網頁開發或設計工作,所以我的要求不多,我只要能夠讓我同時在單一台電腦中,測試我的網頁在IE6、IE7和IE8中的顯示效果即可,當然更重要的就是並存這些不同版本IE瀏覽器的同時,不會造成系統問題,也不會影響到我電腦中真正要用的IE(有時候有些網站確實還是要使用IE來開啟的)。而今天我就來介紹兩款可以滿足上述需求的好用工具:IETester 和 Internet Explorer Collection。 IETester:http://www.my-debugbar.com/wiki/IETester/HomePage Internet Explorer Collection:http://finalbuilds.edskes.net/iecollection.htm   前提:模擬測試專用,不要拿來當正常瀏覽器使用 使 用IETester 和 Internet Explorer Collection有個前提,就是這樣的工具看起來好像可以讓你同時運行多種不同版本的IE瀏覽器,但是千萬要記得它們都只是「模擬測試」的工具,模擬 的再好也和真正的IE有距離,即使像Internet Explorer Collection號稱讓你同時安裝IE 1.0到IE 8.0的獨立版本,但是你使用它的IE 8.0時,就會發現還是很多真正IE 8的功能是無法使用的!所以建議這兩種工具,都只要當做測試自己網頁相容性的用途即可。 另外就是IE(Internet Explorer)對於Windows作業系統來說不只是瀏覽器,也是很重要的一個系統元件,所以對於IE的變更是有造成系統問題的風險的。 當然,IETester 和 Internet Explorer Collection在我長期使用下是沒有什麼問題,它們都算是外部的工具而不會改動到你系統中原本真正的IE,這也是我推薦它們來做為網頁相容性測試工 具的原因;但還是有可能有風險存在,所以要特別在此強調說明。   我測試的系統環境: 因為IE是Windows的命脈之一,所以有必要說說我是在哪些環境下測試過沒有問題的:我分別在兩種電腦中測試過:第一種是Windows XP SP3、IE 6 的環境;第二種則是Windows XP SP3、IE 8 的環境。而這兩種工具的官方說明裡,是強調可以用在XP和Vista系統的,不過我自己還沒有在Vista用過它們(我的Vista大多拿來玩DirectX 10的遊戲XD)。   IETester 0.3.2:單純的網頁畫面模擬顯示 如果以模擬測試網頁的功能性來說,Internet Explorer Collection是比IETester強大的多,不過如果是以安裝使用時的簡易性、穩定性來說,IETester則是一個簡單又更不容易造成系統問題的IE模擬器。 下 載「IETester」,直接安裝執行,IETester本身是一個獨立的模擬程式,打開IETester,你可以在上方工具列看到啟動IE5、IE6、 IE7、IE8的按鈕,按下去就能在IETester裡面打開新分頁來模擬該版本的IE瀏覽器。對於要測試你的網頁在不同版本IE中的顯示效果,這是一個 極度簡單又好用的工具。 不過要注意的就是,你電腦的IE版本如果是6.0的話,那麼IETester可以幫你模擬到IE7,卻無法幫你模擬IE8。必需你電腦的IE版本是7.0以上,IETester才能完整的幫你模擬IE5到IE8的顯示狀態(當然我這裡講的是Windows XP系統中的狀態,因為Vista中預設就是安裝IE 7)。 另外我們也可以看到IETester就只是單純的模擬不同版本IE的網頁畫面顯示效果,對於不同版本IE的工具性功能則不會去模擬(例如你想看看IE 6、IE 8的瀏覽器工具列、設定有哪些不同,在IETester裡面是看不到的)。   Internet Explorer Collection 1.4.0.0:讓你看起來好像裝了多個IE IETester是單純的模擬不同版本IE的網頁畫面解析,所有的IE畫面都是在IETester主程式中用分頁來顯示,IETester是單一的測試平台中心。可是Internet Explorer Collection則是另外一種測試的思維,它「看起來」像是讓你可以同時在電腦中安裝IE [...]

三月
3
2011

16個最安全的網頁字型 – CSS

thumb.php

Impact [css].classname { color: #333333; font-family: Impact, Charcoal, sans-serif; }[/css] * * * * * Palatino Linotype [css].classname { color: #333333; font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif; }[/css] * * * * * Tahoma [css].classname { color: #333333; font-family: Tahoma, Geneva, sans-serif; }[/css] * * * * * Century Gothic [css].classname { color: #333333; font-family: Century Gothic, sans-serif; }[/css] * * * * * Lucida Sans Unicode [css].classname { color: #333333; font-family: ‘Lucida Sans [...]

三月
2
2011

用css控制cellspacing、cellpadding

CSS

在table 中控制單元格之間的間距要用到cellspacing,cellpadding,默認情況 cellspacing,cellpadding均不為 0,但經常的狀況為了不讓表單元格之間的間距影響到美觀,我們經常會把 cellspacing ,cellpadding設置為 0,因此經常看到“<table cellspacing = 0 cellpadding = 0>”這樣的代碼。這樣做無形中增加了代碼的體積,而且也極其不符合樣式與內容分離的網絡標準,對於我本人來說也是極其厭惡這樣的形式的,因此使用的CSS控制cellspacing / cellpadding顯的意義重大了!以下是控制方法: table{border:0;margin:0;border-collapse:collapse;} table td{padding:0;} 第一行控制cellspacing,關鍵是“border-collapse:collapse;”這一句,第二行控制cellpadding,很少人知道控制td吧?

三月
2
2011

Google Web Font API

google_font

Google 公開了其 Google Web Font API,開始提供在線字體 (Web font) 服務,而且理所當然是免費的。日後 web designer / developer 要用系統以外的字體的時候,再不需要動用到 Photoshop 把字轉成圖,只消在 加入一行 code 即可。 載入外部檔案後,只需一如往常在 CSS 指定所需字體、設定屬性,甚至可以加入陰影效果。 Google font api 目前可用的字體可在 Google font directory 上找到,目前共有十款英文字體,都是質量很高的字體。如果 font directory 上的字體不夠用,其實還可以用 Typekit 公司的字體,只不過需付費就是。(其實此 api 是 Google 和 Typekit 合作開發的。) 如果需要中文字體的話,目前只能考慮上線不久的 Monotype Fonts.com Web Fonts 服務,Fonts.com 提供數十種中文字體,唯此服務還在 beta 階段,在 IE 下還是有很大問題。大概短時間內網頁上的中文字體都沒有比較好的解決方案。

三月
1
2011

利用Css解決Chrome 12px字體大小限制

font

有沒有發現,當你係css 將字體設定小於12px,在chrome瀏覽器是沒有效果? 這是因為chrome瀏覽器有限制住最小字體為12px 解決方法如下 *{ -webkit-text-size-adjust:none; }

二月
22
2011

Internet Explorer 9

ie9rc

作業系統需求: Windows Vista / Windows 7 / Windows Server 2008 / Windows Server 2008 R2 ! 不支援Windows XP ! 硬件加速的HTML5. 現在, 在您瀏覽網站時, 您僅僅使用了計算機性能的10%. Internet Explorer 9 將這個比例提升到90%. 內置了專業級的HTML5支持, Internet Explorer 9 通過Windows 充分發揮了計算機硬件的優勢,讓開發人員能夠開發出下一代的體驗.新的硬件加速HTML5 功能包括支持video 和audio 元素, 開啟了平滑、內嵌的視頻,不需要插件. 此外, 支持HTML5 canvas 元素讓動態圖形的渲染更加的容易, 同時通過Windows 和圖形處理單元(GPU)獲得加速. 新增的對幾個CSS3模塊的支持大大增加了網頁設計師創作的手段,新的DOM支持意味著更靈活的Web開發. 支持現代的標準. 開發者和客戶期待著新的豐富的web應用程序,由web標準例如HTML5, CSS3 和ECMAScript5開啟. 我們一直和標準組織例如…… 以下連結是Microsoft官方連結, 請放心使用 Windows 7- Windows 7 香港中文版 64-bit – 按此下載 Windows 7 香港中文版 32-bit – 按此下載 Windows 7 臺灣繁體中文版 64-bit – 按此下載 Windows 7 臺灣繁體中文版 32-bit [...]

二月
22
2011

Flash Debugger Player令Firefox 3.6.6停頓的解決辦法

FirefoxCrash

大家有沒有發現,當firefox升級到的3.6.6以後,賞試用flash debugger工具,一遇到有問題的flash,會另到firefox 停頓及沒有回應,最後只有強行關閉firefox。 最近發現原來有方法解決的。 做法如下: 1. Firefox地址欄輸入about:config,打開高級設置,如果有警告直接忽略 2. 在Filter裡搜索dom.ipc.plugins 3. 雙擊dom.ipc.plugins.enabled.npswf32.dll設為false 4. 也可以把dom.ipc.plugins.timeoutSecs設為-1 5. 重啟Firefox 問題應該可以解決!

二月
22
2011

FireFox 4 BETA 版推出

FireFox4

Firefox 4 BETA 版,介面上與舊有的Firefox 不同,變成一個小控扭的操控介面,全面支援CSS3 及HTML5,大家快下載試試吧。 http://www.mozilla.com/en-US/firefox/all-beta.html

二月
21
2011

讓 IE 6-8 也用到 CSS3 中的圓角陰影功能

logo

CSS3 PIE 是一個可以令IE6 , 7 , 8 完美地做到 CSS3 的圓角、漸變、陰影等功能,用法也十分簡單,大家不妨試試! 目前 CSS3 PIE 的支援語法 ========================================== * border-radius: 圓角 * box-shadow: 區塊陰影 * border-image * multiple background images * linear-gradient as background image: 漸層顏色 ========================================== * 詳見: PIE * 註: CSS3 PIE 是使用 .htc 的 hack 方式