2012年5月28日 星期一

Lab36 Programming in DOM


Lab35 Create Image using DOM

使用 KompoZerexe.應用程式

點選下方的 Soure 將圖中的程式碼輸入  the sample code 

再製作一個按鈕

點選下方的 Normal

依照圖示 完成步驟 即可使用頁面開啟 點擊按鈕 就可看到圖片







 

Lab34 Hand code a form

開啟  KompoZer exe. 應用程式


https://www.google.com/  存成頁面 利用 KompoZer exe. 應用程式 開啟


再點選 Form 將URL中填寫 https://maps.google.com/maps?hl=zh-TW 


再用瀏覽器開啟  其搜尋頁面即可變成 地圖模式











2012年5月21日 星期一

Lab33 Lab Form and Action

1.存取  search page  此網頁

2.下載  KompoZer 並開啟 其應用程式

3.在應用程式中 開啟 步驟一存取的網頁

4. 對圖中橘色框框 點兩下

5.會跳出框框 分填上 Form name  as "f"     set Action="http://google.com/search"     
                                                            method as "get" 

6.其中 get 和 post 分別為  能搜尋網頁 與 不能搜尋網頁

7.開啟存取的頁面 並測試



Lab32 Mash-Up 4 (Calendars)

進入後按右下角+Google日曆即可訂閱-html版本





Lab31 Mash-up 3 (Blogs)

登入Google相簿,點選相簿→點選"內嵌投影撥放"→複製黃色的部分貼上 "修改HTML"即可。

2012年5月14日 星期一

Lab29 Mash-up 1 (Publish)





 a sample ppt   下載下來 放上Google文件
開啟此ppt 點選檔案→發布網路→複製以上語法→貼上bloger(修改HTML)→記得修改W=560 H=420

Lab28 navigation bar

利用以下語法
<a href="http://yourblog/your-article.html">Your name and this homework</a>

點選小工具→Jave
貼上語法
修改
"http://s9826353.blogspot.com/">首頁
"http://www.cycu.edu.tw/">就讀大學
"https://www.facebook.com/profile.php?id=100000189237051">Facebook連結

Lab30 Mash-Up, Part 2 (Maps)

1.http://www.housingmaps.com/

2.http://yungching.housefun.com.tw/

以上兩個網頁的比較

 第一個網站
1.可以直接看到地圖
2.可以直接比較各地區的賣房子與租房子的價格
3.用mail的方式聯絡屋主
4. 可以知道屋主對於房子的評價與相關的訊息,例如:附近店家、房間裝潢
5.是一個想要買賣出租的屋主需自行放置訊息在網頁上


第二個網站
1.可以知道房子的地址,如果要看到地圖須點入房子內頁才能觀看
2.可以知道房子的相關近況,例如:房子的大小、詳細的房間數量
3.可以聯絡道買房子相關的房仲業者
4.由某一房仲業者整理出的相關資料

Lab27 Making images accessible

安裝 KompoZer  

在開啟其中的 kompozer.exe 應用程式 

使用應用程式 開啟 指定的網頁 http://bloggercamp.blogspot.com/2007/01/2007.html
 

(網頁已存在桌面上,以供應用程式開啟)

對於圖片點右鍵→Image and Link Propertiesn→點選Alternate tex並在框框中描述圖片的內容

存好更改過的網頁,在使用火狐開啟,點選Text Equivalents→Show Text Equivalents

就可以看到盲人使用電腦讀聲器所讀到的文字

 

2012年5月7日 星期一

Lab23 Making web pages accessible

發現google的錯誤

修改其錯誤方式
存取 google的首頁在桌面上
再用 Edit with Notepad++ 開啟此檔案
 並修正程式碼

1.其中一個fail 缺少 title
在 <ifarme>中 加入 title

2.刪除所有的 <center>
3.搜尋<b> </b> 改成  <h3> </h3> (h1~h6都可以)

4.找尋<body     在其中加入 lang="en"
5.找尋<input     在其中加入 lang="en"

6.點選最後一個warm 會出現下圖,在程式碼中把Link Test中的字改成8個字數即可解決
 

最後解決這些fail



Lab24 Firefox Accessibility Extension

安裝  Firefox Accessibility Extension  的附加元件


並工具列上按下Reports→ Accessibility Issues


http://www.cwb.gov.tw/V7/index.htm 中央氣象局

 http://www.cbc.gov.tw/mp1.html  中央銀行

 http://www.nhi.gov.tw/ 中央健保局

Lab22 More on HTML

製作方法請參見Lab 21HTML
進入

HTML Tables
製作出表格


HTML Lists
製作出列表

Lab26 使用HTML 4 和HTML 5的影音播放

測試以下HTML 4 和HTML 5的影音播放功能



比較兩者有何差異。
此題目及文章來自於 中原大學的耀仁教授的部落格網站

紅色框框代表兩者程式碼的不同
HTML5 Video具有HTML4 Video 更多電腦可撥放影片的功能,使得瀏覽器本身可直接撥放影片,不需要像 HTML4 Video 電腦必須支援Flash才能夠撥放影片。
HTML4 Video

HTML5 Video

Lab25 模擬色盲的效果

進入  VisCheck   點選 Run Images

選擇
Select the type of color vision to simulate:

deutan hats Deuteranope (a form of red/green color deficit)
protan hats Protanope (another form of red/green color deficit)
tritan hats Tritanope (a blue/yellow deficit- very rare)


在瀏覽照片 便可看到以下結果