Lab 37 製作一個報名網站

社團，學校，公司舉辦各種活動，少不了一個報名網站。利 用

免費的Google 文件加上Google 部落格，就可以製作一個乾淨

俐落的報名網站。

芳療部入口

Lab 36 Speed Test

測試中原大學與中央大學對外頻寬速度。

Tool: Speedtest

 google chrome→選項→變更代理伺服器→區域網路設定
 cycu proxy:  proxy.cycu.edu.tw:3128
 ncu proxy:   proxy.csie.ncu.edu.tw:3128
 no proxy

中原大學對外寬頻速度

中央大學對外寬頻速度

 no proxy

Lab 35 Blog Cloud

~雲兒飄呀飄~

Lab 34 Syndication with RSS 2.0

齁齁齁~這樣就可以看到老師發的文章囉!!!!!!

Lab 33 匯出部落格

1. 將你的部落格匯出為 XML，請使用blogspot 已經提供的匯出工具
2. 在blogspot 新建一個空白部落格。
3. 將剛才匯出部落格匯入到新的部落格

4. 檢查匯出情況，是否有出現異常，資料遺失或被變更?

 測試用網誌

 資料沒有遺失或受到變更，但是匯出的網誌並不會連同小工具ㄧ起匯出，所以新匯入的網誌需要重新設定小工具。

Lab 32 DOM

1. Open KompoZer
2. Based on the code as in

http://www.scottandrew.com/weblog/articles/dom_4 ,
write a code to generate the table of 9*9 products. (九九乘法表)

Hint: The javascript code should be enclosed by script tags.

 

 

Lab 31 Create Image using DOM

1. Open KompoZer
2. Hand code a javascript that loads an image from Internet based on
the DOM model.
3. Take a look at the sample code that shows how window.onload to load the image.
4. Use a button to load the image. Try how onclick works.

開啟網頁後會自動顯示圖片

開啟網頁後點擊按鈕

出現啦!!!

其實也不是很難，很興奮的給他按了很多下

Lab 30 navigation bar

1. 進入你的部落格，登入，選擇自訂
2. 新增小工具
3. 選取
HTML/JavaScript
4. 撰寫或貼上所需連結(範例)

Lab 29 Hand code a form

Hand code a HTML or use KompoZer to edit an HTML so that the webpage can send a request to Google like
http://maps.google.com/maps?q=24.9586,+121.24114

Use Form CGI that includes action, input, and submit.
Try a few different coordinates.

Lab 28 Lab Form and Action

"logic will get you from A to B - imagination will take you anywhere"

How to use Form to invoke a remote service through CGI.

1. Copy the search box of this search page,
inlcuding radio buttons, text input, and submit button.

2. Open your KompoZer HTML editor.

3. Open a new empty HTML file.

4. Paste the search box into this new file.

5. Use KompoZer to add a Form to this search box. Do not hand code the HTML. Just fill the blank in the Form dialog.

6. In the form dialog, set Action="http://google.com/search" and name of Form as "f" and method as "get"
(See Hint if it does not work.)

7. Save your file on your computer. Run your HTML by Firefox. What do you get?

• 當method設定為get時，按下google搜尋，會跳到搜尋頁面。

8. Set method as "post"

9. Run your HTML by Firefox. What do you get?

•  當method設定為post時，按下google搜尋，不會跳到搜尋頁面。

Lab 27 Mash-Up 4 (Calendars)

建立你的行事曆，並與學校行事曆合併
Google日曆-中原大學行事曆-html版本<http://www.google.com/calendar/embed?src=sth4g0ns7lj48crs0gsm3ekuns%4...>
進入後按右下角+Google日曆即可訂閱

Lab 26 Mash-up 3 (Blogs)

部落格與相本的結合運用。透過部落格分享你的照片集，省去傳送大量照片的缺點，自由書寫照片中的故事。

Create a slide show of your album. Embed the album in your blog.

Lab 25 Mash-up 2 (Maps)

For housing services, compare the following two websites
http://www.housingmaps.com

http://www.7house.com.tw

List the differences in the user interface design and usability. Make comments
by your use experiences.

Lab 24 Mash-up 1 (Publish)

1. Upload a sample ppt to Google Docs.
2. Publish the uploaded ppt.
3. Embed the online ppt to your blog.

The reason to do so is that the readers don't have to have ppt to view your presentation. For example, some users work with Linux or Unix, and others work with MacOS. They will appreciate you for doing so.

Lab 23 Making web pages accessible

1. Use Firefox Accessibility Extension to identify the accessibility failures and warnings in http://google.com
2. Fix the failures you found.

修改前

修改後

Lab 22 Firefox Accessibility Extension

巴哈姆特

PChome商店街

中央氣象局

Lab 21 Making images accessible

使用前

使用後(圖片變文字)

Lab 20 More on HTML

Headings:

 標題文字大小控制

<h1>~<h6>字體大小由大至小

Lists:

用<ul></ul>標籤可以得到用●作為清單選項

 用<ol></ol>標籤可以得到數字作為清單選項

Lab 19 HTML

1. Using Microsoft Notepad, Copy and paste the HTML example at Introduction to HTML
2. Save the file as myfile.html
3. Open the file using Firefox.

New editor
4. Enter http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic
5. Copy and paste the HTML example at Introduction to HTML
6. Verify your results on the screen.

Lab 18 Comparing browsers

Install Google Browser Google Chrome and Firefox 3.0, try a few websites and compare their performance. For example, youtube, blogspot, msn, and yahoo.

• google 瀏覽器跑網頁的速度比火狐快許多 
• 兩種瀏覽器皆有多種支援外掛擴充程式
• 網址列google 瀏覽器沒有顯示http://而火狐反之
• 畫面來說 google 瀏覽器較火狐精簡，火狐的版面與IE比較相近