2009年4月28日

CSS(Cascading Style Sheets)教學連結整理


 
無論是 HTML4.01 或是結合了XML的 XHTML1.0
大多都包含了 HTML、SCRIPT和CSS三大技術以形成動態網頁
而其中CSS(Cascading Style Sheets)便是在現今網頁中用來呈現外觀
除了使外觀設定脫離 HTML 的原始碼
也讓外觀的設定能更快速方便地共用以形成網站風格

關於CSS(Cascading Style Sheets)的教學連結
第一個先要看的是 w3c 的介紹:
Cascading Style Sheets Homepage
"Cascading Style Sheets Homepage" 的中文譯文

接著首先推薦的連結當然是 w3cschools的CSS教學
因為這個連結就是制定網頁相關標準的 w3c 所建立的
所以在正確度和語法的標準都是最新的
(唯一的缺點就是介面是英文的 XD)

其餘的教學網站都可以在 google 上快速搜尋到
大致看過 http://www.pcnet.idv.tw/pcnet/css/css.htm 覺得很不錯
觀念語法例子都很詳細
但因為年代久遠,所以在語法的標準可能就有些落伍了

在寫出 CSS 後 w3c 一樣提供了驗證的網站 The W3C CSS Validation Service
(和HTML的版本 The W3C Markup Validation Service 類似)
可以讓我們知道哪些語法有錯誤並修正

最後是我自己的一些筆記:

CSS語法放置位置:
1. 置於 html 檔的 <head> 和 </head> 之間 (Internal Style Sheet)
<head>
<style type="text/css">
hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
2. 另外寫CSS檔再於 html 檔中引入使用(External Style Sheet)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
CSS語法的類別選擇:
.classname     /* . 用於 class 屬性,同一頁面可多個*/
{
font-family: "lucida calligraphy", arial, 'sans serif';
}
#idname     /* #用於 id 屬性,同一頁面只能一個,如footer之類的區塊*/
{
font-family: "lucida calligraphy", arial, 'sans serif';
}
還有連結的虛擬類別:
a:link    {color:#FF0000}  /* unvisited link  */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */
關鍵字:CSS, Cascading Style Sheets, 檔頭, 格式, 語法
參考資料:
1. Cascading Style Sheets Homepage"Cascading Style Sheets Homepage" 的中文譯文
2. w3cschools的CSS教學
3. http://www.pcnet.idv.tw/pcnet/css/css.htm
4. The W3C CSS Validation Service

推薦閱讀:

2009年4月23日

HTML4.01、XHTML1.0文件類型定義


 
在HTML4以前HTML的檔頭並不用特殊宣告
但在HTML4.01及XHTML1.0中為了使瀏覽器能更快速且正確地顯示
我們會在檔頭的地方加上一些描述使瀏覽器明白我們的寫法是符合何種規範
這也能使網頁在各種顯示器顯示時更加一致!

首先先提供一個驗證的網頁:
The W3C Markup Validation Service
透過這個網頁我們就可以清楚我們所撰寫的頁面是不是符合規範

以下是HTML4.01的格式示範:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
...
</head>
<body>
...
</body>
</html>
紅色部分就是在識別這份html文件所使用的HTML版本
版本共有以下三種:

嚴格標準(Strict)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

過渡標準(Transitional)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

框架標準(Frameset)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

其中新建立的html文件都建議使用嚴格標準(Strict)來撰寫
這樣在往後轉換到 XHTML1.0 時才不會太痛苦
(其實新建立的頁面已經可以直接使用 XHTML1.0 的標準了,
他們的差異並沒有很多,只要加個一兩行和一些簡單屬性設定好就好)

過渡標準(Transitional)版本支援了所有嚴格標準(Strict)的語法
並且加入 HTML4 之前的語法支援
例如 html 中的字型顏色設定的語法(這在 HTML4.01及XHTML1.0中應交由CSS來設定)
如其名稱 過渡標準(Transitional)
這是用來支援舊有的不再修改的 html 使他們也能在 HTML4.01下運作
故新建立的頁面並不建議使用這個版本

了解了過渡標準(Transitional)版本後框架標準(Frameset)也很直覺了
除了過渡標準(Transitional)的語法外框架標準(Frameset)更支援了框架的支援
同樣地這也是用來支援舊有的檔案

關於更詳細的 HTML4.01 的結構及介紹請看:The global structure of an HTML document
HTML的各種版本演進請見:HTML 4.01 Specification

介紹完了 HTML 的版本,接著我們要看的是 XHTML
關於為何要從 HTML 轉換到 XHTML 和他們之間的比較
請直接看:HTML and XHTML Frequently Answered Questions

要設定XHTML的檔頭和上面很類似
我直接把code貼上來,相信大家可以馬上一目了然
這也分別對應了上面的三個版本,很清楚的。

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

那麼 XHTML 實際上看起來會是什麼樣子呢?
以下就有個實際的例子:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" lang="en">
<head>
<title>Virtual Library</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>
看起來是不是很簡單呢?
要了解更多 XHTML1.0 的話請到:XHTML 1.0 Specification
在設定這些資訊後記得把自己寫好的檔案傳到The W3C Markup Validation Service驗證看看
因為除了檔頭的設定外每個版本都會有些更嚴格的規定

例如 :
HTML4.01 中的 <img> 中現在一定要有 alt 屬性
以及區塊元素和行內元素的擺放位置也更嚴格
XHTML1.0 中因為是結合了 HTML 及 XML
故現在每個元素都必須符合 XML 的型式
因此單一的空元素後面都要加上 / ,如:<br> 必須換成 <br />

以上便是HTML4.01、XHTML1.0文件類型定義的簡短介紹
更深入的內容可以在 W3C 中找到
大家也要記得多使用 The W3C Markup Validation Service 來使自己的網頁符合標準喔

關鍵字:HTML4, XHTML1.0, 檔頭, 格式, 版本, 比較
參考資料:
1. W3C
2. The global structure of an HTML document
3. HTML 4.01 Specification
4. XHTML 1.0 Specification
5. The W3C Markup Validation Service


2009年4月19日

SCJP (OCPJP) 證照入手!!


 
(2011.11.25更新)
許多沒回來看這篇了,Java 被 Oracle 買走後證照的名字都改了,
有關 Java 的部份如下:
Oracle Certified Associate, Java SE 5/SE 6
Oracle Certified Professional, Java SE 6/SE 5 Programmer (OCPJP,原SCJP)
Oracle Certified Master, Java SE 6 Developer
Oracle Certified Professional, Java EE 5 Web Component Developer (OCPJWCD,原SCWCD)
Oracle Certified Professional, Java EE 5 Business Component Developer
Oracle Certified Professional, Java EE 5 Web Services Developer
Oracle Certified Professional, Java ME 1 Mobile Application Developer
Oracle Certified Master, Java EE 5 Enterprise Architect

另外也更新一下書的資訊,猛虎出閘已經有了新版本:
猛虎出閘制霸版:最新OCP Java SE 6 Programmer專業認證(附原始程式碼及範例檔)
--以下為原始內容--
喔其實也還沒入手啦
大概還要等個6~8週才會收到

這大概是所有考過的試裡報名費最貴的一個
之前公告是200鎂,網路上的考試券大概都在5000~6000元
然後我這次報名時看到已經變成300鎂了 orz 幸好我是用考試券....

今天考的是 310-065 SCJP 6.0
(Sun Certified Programmer for Java 2 Platform, SE 6.0)
算是Java最基礎的認證證照,也是往後考其他張證照前必備的
因為工作期間都是在用Java所以大概的東西都還蠻了解的
只花了一週看專為這個證照寫的書「Java認證 SCJP6.0/5.0 猛虎出閘」

準備時間很短 但也在書裡學到一些平常寫程式不會注意到的東西
結果成績還好啦 有抖抖地通過 XD 72題中對了54題答對率75% 通過標準是65%
順利拿了人生第一張證照 :p 還是國際間都承認的SUN的證照 真開心 XD
接下來就是看什麼時候來考 SCWCD 了吧

(2009.8.31更新)
後來也順利拿到 SCWCD 證照了!
心得在 SCWCD (OCPJWCD) 證照入手!! 大家也可以參考看看喔!

關鍵字:Java, SCWCD, Oracle, OCPJWCD, OCPJP

2009年4月1日

警政署「免費電腦健康檢查程式NPASCAN」


 
網災來襲資安不影響治安 -
警政署為民眾電腦安全把關開發特效「免費電腦健康檢查程式NPASCAN」

  • 098/01/21 15:29:00

  警政署資訊室長期觀察發現,在科技及網路發達的時代裡,傳統犯罪已與電腦網路有相當程度的結合,例如當年警方偵破張錫銘案件時, 就已發現其於逃亡期間,由於必須躲避警方追緝,故改以MSN等方式與同夥聯繫及上網玩線上遊戲排遣時間。這種現象顯示不管是一般民眾亦或是犯罪者皆脫離不 了使用電腦、網路,尤其年齡層較低之青年朋友多數皆為網路重度使用者,但民眾對於電腦中之惡意程式(病毒、木馬程式、鍵盤記憶程式等)常無法察覺,並認為 有安裝了防毒軟體安全就滴水不漏,殊不知現今病毒變形之快速防毒公司未能即時偵測與回應,使用者一旦中毒後,從電腦所洩漏之個人資料常被犯罪集團蒐集轉而 利用於其他犯罪,如近年來層出不窮之詐騙案件,即以入侵個人電腦或資料庫竊取個資,藉由資訊拼圖掌握被害人資料一旦夠多,可降低被害人警覺心而誘使其進行 轉帳匯款等動作;甚者,藉由掌握個資透過線上遊戲中金錢與寶物交易進行洗錢行為,亦是常見案例。臺北地檢署主任檢察官張紹斌表示由於近來發現「資安與治 安」息息相關,許多犯罪發生皆與電腦網路有關,除自己使用電腦不慎外,即使不使用電腦之民眾、他人或商業,亦會將其〝生活〞輸入電腦,其中電腦資料包含交 易行為(如網路購物),旅行行程(如網路購票),監視錄影光碟(如汽車旅館電腦),都可用來詐騙、闖空門或隱私恐嚇之犯罪行為,更可植入木馬程式操控電腦 開啟攝影機竊人隱私,或截取MSN內容進行詐騙,科技時代幾乎所有人生活及工作習慣皆紀錄於電腦之中,犯罪集團已結合駭客組織,大量入侵竊取電腦資料、偽 冒詐騙、恐嚇被害人;當犯罪集團掌控被害人相關資訊,如有訴訟案件偽冒檢察官、法院、如購物冒充商家、久未聯繫朋友,更有駭入孩童電腦熟知習性,恐嚇父母 假綁架真詐財…等。
  為使一般民眾能對於自己日常生活皆須使用之個人電腦能掌握其健康狀態,避免因電腦中毒後造成個人資料外洩情事發生,進而衍 生治安事件。近期警政署分析多起駭客入侵案件及惡意程式,發現民間企業與個人電腦中毒非常嚴重,幾乎百分之60以上電腦皆含有病毒,資料早被竊取殆盡,警 政署資訊室特別研發迥異於市售防毒軟體掃毒模式之最新〝健檢程式〞,此「個人電腦健康檢查程式NPASCAN」可有效偵測目前市面上防毒軟體無法清除之病 毒,提供民眾免費下載使用。本項程式經警政署推廣於警察及其他機關使用效果十分良好,其功能是市售防毒軟體無法達到,另外由於它是採用行為分析模式進行偵 測與防毒軟體之特徵碼比對模式不盡相同,因此沒有更新病毒碼之困擾,亦不需常駐於系統中。
  建議民眾於年終大掃除期間,亦須下載本署提供之免費 健檢程式進行電腦大掃除,本署將定期發佈惡意程式分析及防制方法供民眾下載。建議民眾除於個人電腦上安裝防毒軟體外,同時亦可下載本程式搭配使用,於電腦 經常異常或開機後手動執行掃瞄一次即可,操作簡單且並不佔系統資源,與防毒軟體搭配使用可達相輔相成之效果,詳細使用說明與程式可至警政署全球資訊網網站 最新消息中下載(http://www.npa.gov.tw),如有任何問題與建議歡迎e-mail至npascan@npa.gov.tw

免費電腦健康檢查程式NPASCAN v1.7 附件下載:
下載處1.http://www.police.org.tw/NPASCAN_1.7.zip
下載處2.http://www.npa.gov.tw/NPAGip/wSite/public/Attachment/f1234227146655.zip