考取 70-480 Programming in HTML5 with JavaScript and CSS3 證照

微軟的這張 70-480 證照，考得正是前端工程師的必備技能，也就是 HTML, CSS, JavaScript 三種科目的混合考。因為證照在今年 (2016) 七月中過後要漲價，我也是不經意地看到這個消息，就想說去考考看了。

關於買樣板來製作網頁這一件事情

穎（@look_me08）張貼的相片 於 2015 年 9月 月 23 4:38上午 PDT 張貼

(因為不放圖顯得很空洞，所以放一張今天晚上在左道咖啡的照片)

今天買了一套 Admin 介面的樣板，我想起這件事情，還滿值得研究研究談一下想法。事實上我很常買樣板，甚至有些我根本也沒有用到，不過買回去第一件事情，想想別人為什麼可以做樣板做到可以拿來賣錢，一定有它方便於我的地方。

首先，完整性不用講，常常我們腦袋裡想的天馬行空，後台想要多牛B就多牛B，但就是不想動!? 對吧，於是幻想就停留在那一刻，然後刻出來的東西照樣平庸。

接下來是樣板有時候是『學習的樣本』，你可以買到用 Angular 製作的樣板，bootstrap 一樣，很多很多，你可以透過套過樣板知道別人怎麼把這一堆前端的 library, plugins 『兜』在一起，就算手法不是很高明，但也是一種解決方案，千萬不要覺得這些事情很簡單... 前端是很苦工的...。

可以學但不要照單全收，有些樣板不一定是很有組織的程式碼，這樣也是挺合理的... 因為畢竟他可能只是在 demo 某一件事情，通常你買來可能還需要再整理過。

再來是學習使用現有的樣板套用在自己的系統上，不論你的 template engine 是什麼，趁機組織一下頁面可以共用的地方，分出哪些是東西是 layout, partial, widget, 或是 bla~bla~bla~，有助於一點點習慣程式喜歡『re use』的概念。


當然也有人會認為，買樣板沒有樂趣，很有可能撞板或是什麼的... ，我個人是覺得只限於後台或是內部系統會買。前台的話，我還是喜歡有設計過的網頁 :P

只是想起，有一次在做手機版網站，當時還菜，一直不懂為什麼手機上看我的網站，那顆 menu 的按鈕按下去之後，感應很緩慢，不知道有 fastclick 可以幫我解決手機上 click delay 的問題，這點，從樣板學來，所以我知道了有這個工具。

第二個經驗是，樣板使用的 plugin 有時候會讓我驚訝，『原來有這種工具!』的心情。

前端是一個做久了有時候會很沉悶的工作，但偶爾發現一些驚喜，內心還是會很澎湃的，也許有這樣的心情的時候，才發現自己已經是個有點懶散的老鳥了...，因為懶，所以我寧可刷個幾百塊錢買樣板，企圖得到一個系統看起來很完整，能 work，眼睛順眼的結果。

私塾小調查

最近有一些想要週末出來聚聚的想法 。當然不一定會發生...，通常我週末也很忙 (拭淚...)，可是如果真的想辦，還是擠得出時間的，先讓我觀望先，謝謝!。  有些問題是我過去辦讀書會跟交朋友寫前端而衍生出來會遇過的狀況，希望大家可以幫忙作答。

不過要先說的事情是，這份問卷只針對有心想學的人，如果你只是想出來聽聽，或是工作用不到, 沒什麼機會用到，或是想說反正有人教，要不要來都無所謂的心態，還是只是來交朋友而已，那就比較不適合在我想了解的族群之類，謝謝啦

Hack inline-block Element Spacing

今天在教我朋友寫前端的時後發現我們在 <ul> 底下所有的 <li> 做 inline-block 的時候會有奇怪的間距 (因為也不知道問題是 margin 還是 padding 還是 font-size 之類的...，但清掉還是一樣)。

問題是都已經 inline-block 而且寬度也除到剛好的百分比了，怎麼會有這種怪事...。

demo Source:
http://jsbin.com/juloyekinu/1/watch?html,css,output
http://jsbin.com/juloyekinu/1/

但我又不想用 float 解決，這樣還要用 clearfix 也不是方便哪裡去。後來找到了這篇
Fighting the Space Between Inline Block Elements Published April 21, 2012 by Chris Coyier ，當作解法，解法有幾種，我都不很喜歡... 最後還是挑了 Negative margin，當做最後的方法。

不知道大家有沒有什麼好建議，歡迎留言給我~ 謝謝!

更新:
後來找到一篇討論:
How to get rid of space between divs when display inline-block and stacked horizontally?
除了子層加 margin-left: -4px; 之外，可以用把父層的 font-size 設為 0 也可以。
哦.. 好不科學哦... css你... ><

做 Mobile Web 的兩三事...

是說編編擔任前端一職至今也兩年了，也有做過幾次 Mobile Web，(雖然稱不上專業...，但是我沒有放棄要努力好好學的意思...)，之前一直想要記錄一下心路歷程，但是一直停留在我那點好幾次分頁的 google 草稿，再加上今年年中有一段懶散，一直沒有寫文章 。

對了，我喜歡片段式的記錄自己學的東西，然後再一次集結起來。

(此圖僅是示意圖而已)

我見過兩種手機版網站的開發的方法

1. 一種是真的當作另一個網站在開發

mobile web 的 scroll 行為調整

最近研究起 Mobile Web，發現某區塊在上下滑動的時候沒有那種很滑的感覺(不好意思... 真的不知道怎麼形容這種感覺)，想要這種感覺的話，可以試試 overflow-scrolling 的屬性:

-webkit-overflow-scrolling: touch;
overflow-y: scroll

畢竟 mobile web 不是 native App，如果想要 scroll 很順的話，可以參考看看。不過要很抱歉的說我並沒有細心的研究這個 CSS 的用法，不過上網查到的都是介紹使用 overflow-scrolling 。有機會我會再詳細補上。

參考:
Native Scrolling on Touch Devices & Polyfilling
Momentum Scrolling on iOS Overflow Elements

AngularJS and jQuery 近期專案開發心得

最近好久沒寫文章了，因為這陣子遇到的事情太多太雜...，但是學到很多...，可是我沒有辦法一一記錄下來，...一時也提不起勁啊，這篇只好用一種當作日記的心情來寫寫了，請大家看看就好，不用太認真 xd，真的。

還有我不想跟大家筆戰，我只是分享一個專案同時使用 AngularJS 跟 jQuery 的感覺是什麼，是『AngularJS and jQuery』，而不是『AngularJS v.s jQuery』，更何況每個專案的體質本來就不同。

AngularJS  (logo來源)
前陣子社群非常活躍的一套 JavaScript Framework，我一直很想嘗試看看使用 AngularJS 是什麼感覺，但是我想一路走來的人都能理解，有時候寫玩具跟真正用在專案上是真的不太一樣的感覺 (當然自己的玩具也叫做專案xd)，只是有客戶的苛求，比較能夠往更多地方鑽研，如果什麼事情都照著工程師的想法做，那當然做什麼都比較順，因為我們都知道，『怎麼做對自己比較方便，而且可以達到一樣的功能』，恩...有點離題了。

所以這次用在工作的專案上，因為專案的需求，會使用到較多的 Ajax 的 Request，來替換頁面上的內容，因為 AngularJS 順暢的 Data Binding 的特性，以及 View Template，因此感覺蠻適合使用 AngularJS 作為這次專案想用的 Framework，從學習怎麼用 $http 到串到專案的功能，大約不會超過4天。 （我必須說明這次真的有太多的時間花在學習 AngularJS 的架構)。

說實在的，如果我今天很熟練 AngularJS，我想時間開支不會超過4天，以開發速度來說，AngualarJS 真的是不錯的選擇，再加上我第一次認真用過MV* 架構的 Framework，寫起來程式碼真的有架構許多，說實在的，如果還有機會，我是一定會再使用 AngularJS，或是學習其他 Framework，工具雖然學不完，但是這些架構跟 Framework 的設計真的蠻值得學習。

不過從 jQuery 寫到 Angular，一定要完全忘記 DOM 這件事情，剛開始用 Angular 有點不習慣，動不動我就想要用 selector，但是... 真的，要學會『綁手綁腳』的使用 Angular，我現在也正在努力適應這件事。:)



jQuery
jQuery 算是我比較熟的，從大學在程式設計公司打工時就是寫 jQuery，中間從來沒換過，至於他的優，我就不再多介紹了，但是就以這次專案遇到的功能，我真的是蠻想捨棄 jQuery 的...，(因為覺得 AngularJS 的 Temlate 太好用了...)，可是最後我還是把整個 AngularJS 改成 jQuery code 了，原因詳見下方轉折點。




轉折點
因為整個專案並不是公司自己開發的產品，因此要考慮到客戶想支援的瀏覽器程度，最後還是改用 jQuery 了，說實話心裡覺得有點杯具，3天內把整個之前用 Angular 寫好的功能改成用 jQuery 寫，還包含要不斷的測試。

• 最大的問題是 IE 瀏覽器版本的支援

為了符合客戶的 IE 瀏覽器的支援性，我自己測試是 AngularJS 在 IE7 完全沒辦法(我怎麼找都沒找到解法，如果有歡迎告訴我，謝謝～)，所有的表達式 {{expression }} 都會暴露在畫面上，並且也抓不到 Ajax 吐回來的資料，IE8 是有解法，就像官方網站上寫的那幾招。

還有一些 Angular 本來就很方便的功能，像是 $filter, $watch ...，使用 jQuery 全部要自己來，而且瀏覽器反應的速度真的有差。

遺憾的是，因為趕時程的關係，好像留下不少程式負債，總覺得不知道 jQuery 到底要怎麼寫，才會比較有架構，比較好讓人維護，這次很汗顏沒有寫的很好，而且我覺得我的 code 真的有夠『得體』(Dirty)。

好玩的是，平常沒有這麼多閒功夫，因為這次的教訓，一樣的功能用 jQuery 跟 AngularJS 各寫一次，真的很有感覺...。也算是長知識了。能夠靠專案學到這些，感覺也是挺過癮的。

Pure CSS 實作練習：homepage

又到了練習的時間了...，其實這昨天就弄好了只是沒力寫文。
這篇是延續好久好久以前寫的兩篇筆記，只是看看文章而已會讓我覺得學習中斷，感覺不是很好，後來我還是覺得想弄點什麼東西出來。
之前的兩篇是這個：

• 認識 Pure CSS 之筆記一：了解Base, Grids, Forms
• 認識 Pure CSS 之筆記二：了解Buttons, Tables, Menus
• Demo頁面：http://winwu.github.io/pureCSS-practice/homepage/

先來看看練習的結果：
主要是要練習 pureCSS 的 Grid，然後整格排版設計是參考某家搜尋網站的首頁做改造：P，icon 部分搭配的是 Font-Awesome ，Font-Awesome 的使用方式跟在用 bootstrap 的時候一樣，所以非常順手。至於配色就別跟我這個前端挑了（><），這個練習的重點是在做前端不是Art (Orz)。

[小嘗試] 畫組織圖..

最近我看到一些網站，很多地方都是字，唯獨組織圖是用"圖"，然後就在放大/縮小頁面之間，顯得很不協調，因為字太清楚，而圖卻模糊了，而且這代表著，如果人事有改變，就要有人負責去maintain那張圖，重繪，然後上傳到網站嗎?，然後我心裡就想說，試試看用html去畫組織圖，於是就做了這件事情xd

只是想嘗試一下而已，至於有沒有人這樣做過，我想應該是一定有..，只是我就想要自己來試一下:P，然後感覺起來還不錯，至少字很清晰的，我比較習慣於看的清楚的畫面xd

Check out this Pen!

不過一開始我沒有自己畫mock-up(很久沒碰photoshop..)， 就直接開notepad寫了><
這個Demo畫面，都是寫hard code，刻ul>ol的格式，
然後困難度的部分，我想要畫到很複雜的組織圖，會需要很多時間研究，

如果想要從後端接資料來顯示，
那個json的格式，很容易走到一個誇張的境界，應該沒有這麼簡單(我猜的

Demo圖:若有個人詳細資料時，hover時會出現

Demo圖:hover到整個department時，框線改變


其實是蠻有趣的，值得花時間研究更多方法，呵呵

alt與title標籤

其實我拿這兩個標籤來講本來就有點怪，
alt與title本質上就是不一樣的東西，
一個是替代文字，一個是tooltip，
只是前幾天在看ㄧ題HTML5考題的時候，
突然腦筋轉不過來有點忘記了，所以真是印象深刻。

先來看看這兩個題目的問法:

• A題: 問當圖片無法顯示的時候，要在圖片上顯示替代文字時，可使用哪種屬性?
• B題: 滑過滑過一個a標籤時要產生類似tooltip的提示文字可以使用哪種屬性?

要釐清的點是
1. title屬性是全域屬性，alt是給img標籤使用的
2. alt的作用是當圖片無法正常顯示的時候才會有

所以，搞清楚了嗎xd

20130613更新:
"An img element must have an alt attribute."使用img標籤時alt是必要的。

HTML的全域屬性

所謂的屬性就是attritube，我這裡所寫的就是我們在HTML標籤所下的屬性 :
像是...
<標籤名  屬性="值">Content</標籤名>
example : <a title="Hello!">你好!</a>
這裡的title就是一個全域屬性，可以用在所有的元素上面。

全域屬性的表:

屬性名稱	值	功能	備註:
accesskey	單 [A-Z] 字元	存取該元素的鍵盤快捷鍵	過去html4不支援，html5回復支援
class	類別的名稱	對該元素取個類別名
contenteditable	布林值(true/false)	該元素是否可以被使用者編輯
contextmenu	menu_id	定義元素的上下文功能表	主流瀏覽器大部分都沒有支援
dir	ltr/rtl	文字顯示的方向	很少聽到有人在用這個..
draggable	true/false/auto	是否可以對該元素進行拖曳
hidden	hidden	對該元素隱藏
id	id名	對該元素指定一個id名	他是唯一值，一個檔案不能有重複的id
lang	自然語言程式碼	存取該元素的鍵盤快捷鍵	lang="en"
spellcheck	布林值(true/false)	是否對該元素進行語法(拚寫)檢查	html5新增的屬性，大部分瀏覽器已經支援
style	該元素的樣式	定義該元素的行內樣式	style="font-sizt:12px;color:#fff"
tabindex	數字	用tab鍵可依序指到該元素的位子
title	文字/內容	該元素的相關描述

當然還有另外一種屬性叫做事件屬性(事件屬性也有全域的，常見的onClick就是)，主要是用來觸發執行javascript之類的屬性。

不過要注意一件事情是，雖然事件的全域屬性可以用在所有的元素，
但他不一定會作用。

(且基於安全性的問題，
若非罕見情況或是逼不得已的情況，我已經盡量不用事件屬性了(<--僅供參考))

HTML製作edm的技巧與問題

不管是系統通知信/電子報，還是會員註冊成功的信，總之只要是寄到他人信箱的信，
都要注意很多地方。之前UI曾經給我的畫面是，他希望使用者收到的edm之後，裡面還要有hover行為，真是嚇死我了(收信的mail system會有過濾的機制，機於郵件安全性的考量，所有JavaScript會被過濾掉，包含所有的監聽事件)

光是要兼容大部分的信箱可以看到幾乎一樣的畫面就已經不是ㄧ件簡單的事情了...
最後找出來的原則就是 :

• 以table排版

• Inline styles are still king with email=>任何CSS都要寫在行內

• margin如果沒有作用，高度用<br>替代，寬度用border-left:20px solid transparent(用透明顏色產生一個假的寬度)

• 圖檔勿過大

• 所有的文字或是有超連結的文字，要設定css的color，因為在某些信箱會把顏色跳成很一般的藍色跟紫色

這篇文章提供了非常仔細的描述 EDM郵件製作規範完整版 (2011-08-21 14:54:44)
我想我寫再多也不會超過他，如果我還有機會碰到製作EDM，有什麼怪異的點我會再把他記起來。

如果寫行內樣式還是無法解的問題，可以參考這個網站 :
裡面有哪些信箱系統支援/不支援哪些css，可以做個參考。

圖片來源(截圖自) : http://www.campaignmonitor.com/css/

其他連結 :

• Outlook 2007, inline styles, and links
• Outlook 2007 losing font-family declaration (如果你在Outlook有設定css字型的困難)

如何看到自己html的Outliner(大綱)

-有條不紊的網頁的大綱對於SEO是很有幫助的，像寫企劃書的目錄一樣，可以讓用戶對於這個網站有很清楚的概覽。
-過去編輯html應該常使用h1~h6來編輯自己的網頁大鋼，即便不是使用h1~h2，也會用一些比較有別於div或span或p的標籤來顯示大鋼，如dl,dt,dd等;ul,li...等等。但過去的我並不是這樣，但我也忘記我以前怎麼做的了，自從看了這篇HTML大綱算法對結構的影響(<-很推薦)，我覺得幫助很大。

工具在此請參考 :

---

0) HTML大綱算法對結構的影響

1) Chrome Web Store - HTML5 Outliner   作者：Dominykas Blyžė

2) http://gsnedders.html5.org/outliner/

但這個使用後會出現亂碼，建議不要先不要用中文貼過去，而使用英文。

Input元素的file屬性之accept在各瀏覽器的表現結果

前言:

---

先來談談Input的file屬性，通常我們所知的file欄位的html語法是這樣:

<input type="file" name="myfile" id="myfile" />

但，還有一個不錯的功能，那就是能指定這個file欄位可接受的附檔名，這個功能就是accept。accept屬性可接受指定的文件類型，內容可以填入檔案類型，如 : image/*等同於選取所有圖片類型;text/*等於所有文字檔格式，若要指定單一檔案格式，必須參考MIME Type。

用法如:

<input type="file" name="myfile" id="myfile" accept="image/*"/><!--只接受影像檔-->

<input type="file" name="myfile" id="myfile" accept="audio/*,video/*,image/*"/>
<!--只接受影像檔，影音檔-->

這樣看起來好像很方便，沒錯，對於嚴謹的網站來說，這真的很方便，尤其限制只能使用圖片檔，可以大大減少使用者傳錯不屬於圖片檔的附檔名。
但也有另一個缺點是，並不是所有的瀏覽器都能支援。


瀏覽器的支援程度:

---

IE和Safari瀏覽器不支持Accept屬性(目前來講是這樣)，但其他瀏覽器雖然有支援，仍有弱點。



瀏覽器測試報告:

---

由於IE和Safari瀏覽器不支持Accept屬性，目前不做這兩種瀏覽器的測試，因為我做過測試了，好像真的not work。

accept內容	FireFox	chrome	opera
accept="audio/*,video/*,image/*"	無作用	無作用	成功只選取audio/video/image類型
accept="image/*"	成功只選取image類型	成功只選取image類型	成功只選取image類型
accept="video/*"	成功只選取video類型	成功只選取所有video類型	成功只選取video類型
accept="text/*"	無作用	無作用	成功只選取text類型
accept="application/*"	無作用	無作用	成功只選取application類型
accept="image/gif,image/png 針對MIME_type選取檔案格式	無作用	只要大於一種，只會顯示"自訂檔"	成功只選取gif與png類型
accept="image/gif" 針對MIME_type選取只選取gif檔案格式	無作用	成功只出現gif檔案格式	成功只選取gif類型
accept="application/pdf" 針對MIME_type選取只選取pdf檔案格式	無作用	成功只出現pdf檔案格式	成功只選取pdf類型
accept="application/pdf,image/gif" 針對MIME_type選取只選取pdf與gif檔案格式	無作用	無作用	成功只選取pdf與gif類型

用你現在的瀏覽器，可測試	accept內容
	accept="audio/*,video/*,image/*"
	accept="image/*"
	accept="video/*"
	accept="text/*"
	accept="application/*"
	accept="image/gif,image/png 針對MIME_type選取檔案格式
	accept="image/gif" 針對MIME_type選取只選取gif檔案格式
	accept="application/pdf" 針對MIME_type選取只選取pdf檔案格式
	accept="application/pdf,image/gif" 針對MIME_type選取只選取pdf與gif檔案格式

瀏覽器測試結論:

---

• accept屬性的表現結果在opera完全作用
• 同時設定只接受image/*(所有圖片格式)跟application/(所有文件格式)*=>瀏覽器只讀取image/*(只select圖片類型，忽略application)
• 只設定application/* =>除了opera有特地列出所有的application之外，在其他瀏覽器等同於所有檔案類型
• 針對MIME_type的選取方式，大於一種就只會出現自訂檔
• 限制檔案格式只有以下瀏覽器支援( supported by Opera 11+, Chrome 16+ and Firefox 9+ only.)

建議:

---

• 即使可以使用accpet屬性來限制上傳檔的檔案類型，但請勿使用這個方法來做為檔案的驗證，若要做驗證還是在server做比較好。
• 可使用javascript來檔副檔名，但若使用者關掉瀏覽器的javascript等同於無作用。

input欄位預設文字+點按後預設字(value值)消失

今天有個朋友問我這個問題，結果我還真的忘記這個功能怎麼做....。
所要的需求就是網頁上有個input欄位，類似那種搜尋框吧
然後希望點按到搜尋框時，預設的文字可以消失。

使用jQuery的方法:

---

優: 適用於不支援html5的瀏覽器(IE8以上).
缺: 必須先匯入jquery.
     在IE必須先允許執行ActiveX控制項.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜尋框預設文字+點按後預設字消失</title>
  <script src="http://code.jquery.com/jquery-latest.js"></script> <!--匯入jquery是必要項目-->
  <style>
  #target {color: #666;}
  button{background: #555;coloR: #fff;}
  </style>
  <script type="text/javascript">
    $(function(){
      $('#target').click(function() {
          //$(this).val("");  
          $('input[name="target"]').val("");
      });
    });
  </script>
</head>
<body>
<form>
  <input id="target" name="target" type="text" value="type something" />&nbsp;<button>search!</button>
</form>
</body>
</html>

使用HTML5方式 :

---

優: 不需額外匯入jquery.
缺: 只能在可以使用HTML5的瀏覽器.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜尋框預設文字+點按後預設字消失</title>
  <style>
  #target {color: #666;}
  button{background: #555;coloR: #fff;}
  </style>
</head>
<body>
<form>
  <input id="target" name="target" type="text" placeholder="type something" />&nbsp;<button>search!</button>
</form>
</body>
</html>

fancybox如何使用

fancybox如何使用
首先請先到官網下載fancybox的壓縮檔
http://fancybox.net/
下載rar壓縮檔到你的網站目錄底下，
比方說我的網站叫做myweb，而這個壓縮檔就要放在myweb裡面

然後呢，將他解壓縮，只留下文件檔就好

接著打開這個jquery.fancybox-1.3.4資料夾 :

可以看到裡面有很多檔案
index.html 就是示範檔，點開後可以看到很多範例

可以看到總共有12張小圖，然後還有下面的範例，我們只需要留一種範例就可以知道其他的原理了，首先先以notepad++開啟index.html編輯這個檔案，我們刪掉<body>與</body>之間其他語法，只留下

<a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>

另外<script type="javascript">與</script>之間只留下

<script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });
</script>

修改完後的html檔如:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>FancyBox 1.3.4 | Demonstration</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
     <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">
        $(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });
    </script>
</head>
<body>
        <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
</body>
</html>

修改完後按下存檔在瀏覽一次，這時候只會剩一張圖片跟一種特效，

所以，一張圖片之所以可以套用的facnybox的原因有很2種:

第一，在<head>標籤裡要嵌入fancybox的css檔案與javascript檔案
這幾個是必遷入的

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

第一個是jquery的套件
第二個是mouseweel效果的javascript套件
第三個是這個fancybox的效果套件
第四個是fancybox的css檔

第二，要套用效果的圖片要有<a id="一個名稱">
如這張圖是  <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>
他的id是example4，那麼相對應的<script></script>標籤裡面也一定要有jquery去選取這個$example4，然後設定他的效果。
像這個範例中就是example4

$(document).ready(function() {
            $("a#example4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });
        });

至於需要的甚麼樣的效果，或者是跳出來的長寬多少想要自己設定，網站上或是原本其他的example都多多少少可以看出他的設定方式，可以看他的api設定方式 http://fancybox.net/api

假超連結的作法

這是這禮拜上進階網頁設計做的筆記，
談到假超連結的做法，我覺得老師教的這個觀念，很不錯，我好喜歡這個小技巧。
假超連結就是<a href="#">項目一..</a>
通常是希望該文字具有超連結的效果，可是並不希望他真的連結出去
做假超連結有個好處，
他跟一般超連結有個優點都是會出現一個手型的圖案暗示使用者去點按它
假超連結的作法有兩種:
1. 使用#

<a href="#">超連結第一種</a>

2.使用javascript

<a href="javascript:;">超連結第二種</a>

兩者的差別在於，使用#號的方始，當使用者按下之後會使網頁跳到畫面的最上方
而javascript卻不會有跳動的情況 

自動產生CSS圓角語法網站

http://border-radius.com/
就是這個網址!
操作非常簡單，就是分別在四個角輸入要的角度，code會自動產生在中間的區塊，下方的三個選擇也可以分別選擇要不要-webkit 或是-moz的前置詞。

複雜的DOM檔案樹

DOM (document object model)物件檔案模型
是一種介面的定義，當一個.html檔被以瀏覽器開啟的時候，瀏覽器就會去解析該檔案的DOM
.由於瀏覽器可以處理html跟XML的DOM，所以也有人稱DOM檔案樹為html檔案樹或者XML檔案樹。
如果要用瀏覽器來檢視該html的檔案樹，可以使用firefox，工具-->DOM檢視器
每個DOM必須要有一個document的根節。
每個元素在DOM裡面就是一個節點。

另外 DOM也有分版本的
從level 1 --> level2 --> level3 
越後面的版本所支援的當然就比較多
但每個瀏覽器所支援的東西各不相同，所以網頁設計師跟程式設計師才要一直符合各個瀏覽器的執行結果去做調整。目前大部分的瀏覽器可以支援到level2。

先談談level1有甚麼好了，level1只有core DOM 跟DOM html (完全看不出來差在哪裡xdd)
看書本上的寫法，core DOM (核心DOM)好像非常重要，既然叫core，表示他是核心啊~!
也是W3C制定的規範。

我個人覺得對於DOM與Node的存取沒這麼簡單，看起來好複雜...
屬性名稱都很像
光是跟node有關的就一堆
還要一直反反覆覆的key一些getelement....
參考 :  http://school.stackdoc.com/xmldom/dom_htmldocument.html

表單 - radio 性別選擇

<input type="radio" name="sex" value="男" checked="男">男
<input type="radio" name="sex" value="女">女