2012年5月28日 星期一
Lab35 Create Image using DOM
使用 KompoZerexe.應用程式
點選下方的 Soure 將圖中的程式碼輸入 the sample code
再製作一個按鈕
點選下方的 Normal
依照圖示 完成步驟 即可使用頁面開啟 點擊按鈕 就可看到圖片
點選下方的 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
再用瀏覽器開啟 其搜尋頁面即可變成 地圖模式
將 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.開啟存取的頁面 並測試
2.下載 KompoZer 並開啟 其應用程式
3.在應用程式中 開啟 步驟一存取的網頁
4. 對圖中橘色框框 點兩下
5.會跳出框框 分填上 Form name as "f" set Action="http://google.com/search"
method as "get"
6.其中 get 和 post 分別為 能搜尋網頁 與 不能搜尋網頁
7.開啟存取的頁面 並測試
2012年5月14日 星期一
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連結
<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.由某一房仲業者整理出的相關資料
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
就可以看到盲人使用電腦讀聲器所讀到的文字
在開啟其中的 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
修改其錯誤方式
存取 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/ 中央健保局
並工具列上按下Reports→ Accessibility Issues
http://www.cwb.gov.tw/V7/index.htm 中央氣象局
http://www.cbc.gov.tw/mp1.html 中央銀行
http://www.nhi.gov.tw/ 中央健保局
Lab26 使用HTML 4 和HTML 5的影音播放
測試以下HTML 4 和HTML 5的影音播放功能
比較兩者有何差異。
此題目及文章來自於 中原大學的張耀仁教授的部落格網站
紅色框框代表兩者程式碼的不同
HTML5 Video具有HTML4 Video 更多電腦可撥放影片的功能,使得瀏覽器本身可直接撥放影片,不需要像 HTML4 Video 電腦必須支援Flash才能夠撥放影片。
比較兩者有何差異。
此題目及文章來自於 中原大學的張耀仁教授的部落格網站
紅色框框代表兩者程式碼的不同
HTML5 Video具有HTML4 Video 更多電腦可撥放影片的功能,使得瀏覽器本身可直接撥放影片,不需要像 HTML4 Video 電腦必須支援Flash才能夠撥放影片。
HTML4 Video |
HTML5 Video |
Lab25 模擬色盲的效果
進入 VisCheck 點選 Run Images
選擇
選擇
Select the type of color vision to simulate:
| ||||||
在瀏覽照片 便可看到以下結果 |
訂閱:
文章 (Atom)