Lab 35 Create Image using DOM

Lab 34 Hand code a form

1.CGI 是 Common Gateway Interface 的縮寫，它可以連結網路主機端與瀏覽器端，能夠作檔案存取等動作的一種介面，CGI 程式可以使用多種電腦語言來撰寫，最常見的有 C、C++、Perl、PHP、TCL、JAVA、VB...等，有就是說CGI 就是提供給外部程式的一種介面，只要符合此一介面標準，程式設計師便可以輕鬆地使用該平台上支援的任何一種程式語言來撰寫外部程式，於是我們說：凡是符合 CGI 介面標準的外部程式，就稱之為 CGI 程式。

2.

Lab 33 Lab Form and Action

before

IE無法搜尋

after

1.GET

2.POST

Lab 32 Mash-Up 4 (Calendars)

Lab 31 Mash-up 3 (Blogs)

Lab 30 Mash-Up, Part 2 (Maps)

	HousingMaps	永慶房仲網
美感	頁面簡單，但可清楚知道地理位置(方向)	頁面富有色彩，較不清楚地理位置(方向)
直覺性	連結少，容易找到自己想要的	連結多，需要花點時間尋找
流暢	篩選過程簡單	篩選過程複雜
預期反應	篩選後結果範圍太大，可能需要再細找一下	篩選後結果較會是自己想要的

Lab 29 Mash-up 1 (Publish)

Lab 28 navigation bar

Lab 27 Making images accessible

before

after

Lab 26 使用HTML 4 和HTML 5的影音播放

1.HTML4

HTML4需加裝Active X使得網頁透過指令碼和控制項的互動產生更好的效果，因此如果需要觀看影片的話，則需安裝Flash。


2.HTML5

HTML5擺脫外掛程式的束縛，它支援多媒體Audio和Video的標籤，透過這兩個標籤就可以滿足影音的需求，而且透過CSS和JavaScri來樣式化影音的控制軸和控制影音事件。並且利用<source>方式加載影音格式，可以讓各瀏覽器看到。

Lab 25 模擬色盲的效果

Lab 24 Firefox Accessibility Extension

1.中原大學

2.Yahoo奇摩

 3.Facebook

Lab 23 Making web pages accessible

1.

List of Accessibility Issues Summary

FAE Rule	Violations	Message	Class
Check	1	Heading content should be concise (usually 65 or fewer characters in length).	Headings
Fail	1	Every frame element must have a title attribute with content that describes the purpose of the frame.	Frames
Fail	1	The b element must not be used to bold text content, instead use heading (h1-h6) elements for heading text or the strong element for emphasizing words, phrases or sentences.	Text Styling
Fail	1	Two or more levels of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings.	Tables
Fail	2	The font and center elements must not be used for text styling, instead use structural markup should be used with CSS for styling.	Text Styling
Fail	5	Each page must have a lang attribute on its html element whose value or initial subtag is a valid two-character language code.	Language Changes
Warn	1	The words contained in each h1 element should match a subset of the words contained in the title element. Words (%1) in h1 elements should also be in the title element.	Title
Warn	1	Hidden or empty frames should not be used.	Frames
Warn	1	Every onClick event handler should be on a focusable element.	Events
Warn	1	One level of nesting. Use CSS properties instead of tables and nested tables to visually layout blocks of related content for graphical renderings.	Tables
Warn	1	The character encoding was not specified.	W3C Specifications
Warn	2	Each map, ul or ol element that precedes the last h1 element and appears to be a navigation bar should be immediately preceded by a heading element, preferably an h2.	Menu and Navigation Bars
Warn	2	Ensure that links that point to the same HREF use the same link text.	Links
Warn	16	Avoid using text links that are shorter than four 4 characters in length.	Links

2.

Lab 22 More on HTML

1.

2.