11/25(一)課程: 系友分享

11/25(一) 邀了本屆電子所畢業生顏銘毅到課堂上分享國際志工經驗。一個愛探索的靈魂，趁著當兵前漫長等待的日子，自費到柬埔寨一個月，讓我們一起來聽聽，一個不擅包裝，平鋪直敘的電子人從過去這個月看到甚麼，做了甚麼，學到甚麼。
時間: 7:00 pm
地點: 電學 416 教室

Lab 26 Design your business card

1. Refer to the div example Try it yourself
2. Design your business card. You can choose your colors, fonts, styles.

CSS by examples

an introduction

Try it yourself

Using styles in HTML
How to add style information inside the section.

Link that is not underlined
How to make a link that is not underlined, with the style attribute.

Link to an external style sheet
How to use the tag to link to an external style sheet.

source

HTML by Examples

a simple start

HTML Page Structure

This a heading

This is a paragraph.

This is another paragraph.

source

HTML Versions

Version	Year
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

source

HTML Headings

Paragraphs

Links

An image as a link
How to use an image as a link.

Link to a location on the same page
How to link to a bookmark.

Break out of a frame
How to break out of a frame (if your site is locked in a frame).

Create a mailto link
How to link to a mail message (will only work if you have mail installed).

Create a mailto link 2
Another mailto link.

Images

Formatting

Text formatting
How to format text in an HTML document.

Preformatted text
How to control the line breaks and spaces with the pre tag.

"Computer output" tags
How different "computer output" tags will be displayed.

Address
How to define contact information for the author/owner of an HTML document.

Abbreviations and acronyms
How to handle abbreviations and acronyms.

Text direction
How to change the text direction.

Quotations
How to handle long and short quotations.

Deleted and inserted text
How to mark deleted and inserted text.

Marked/Highlighted text
How to mark/highlight text.

Headers

Tables

Tables without borders
How to create tables without borders.
Table headers
How to create table headers.
Table with a caption
How to add a caption to a table.
Table cells that span more than one row/column
How to define table cells that span more than one row or one column.
Tags inside a table
How to display elements inside other elements.
Cell padding
How to use cellpadding to create more white space between the cell content and its borders.
Cell spacing
How to use cellspacing to increase the distance between the cells.

List
Unordered list
How to create an unordered list in an HTML document.
Ordered list
How to create an ordered list in an HTML document.

Lab 25 More on HTML

Tables
1. Open Notepad++.
2. Copy and paste theTables example athttp://www.w3schools.com/html/html_tables.asp
3. Open browser for the result.

Lists
1. Open Notepad++.
2. Copy and paste the Lists example athttp://www.w3schools.com/html/html_lists.asp

3. Open browser for the result.

Lab 24 HTML

HTML 

• Tutorial

Preparation

1. Using Notepad++, Copy and paste the HTML example at Introduction to HTML
2. Save the file as myfile.html
3. Open the file using Browser. (請將3.輸出結果拍一張圖)

4. Repeat the work for 

• HTML Elements
• HTML Headings
• HTML Paragraphs
• HTML Links
• HTML Images 

(請將7.輸出結果拍一張圖，共五張)

Lab 23 Using PageRank

在Chrome上安裝 PageRank , 然後使用 PageRank 量測以下網站的 PageRank (0~10分)

紐約時報 http://www.nytimes.com
CNN http://www.cnn.com/
台灣雅虎 http://tw.yahoo.com
蕃薯藤 http://www.yam.com
PCHome 購物 http://shopping.pchome.com.tw/

接著，以PageRank量測你常用的三個網站，
並留下至少八張有做此LAB的紀錄。

參考資料:
PageRank-Google 決定搜尋排名的關鍵技術
PageRank 的論文

Homework 11-5-2013 (HW5)

Study the phone number example in JavaScript Regular Expressions Chapter. Enhance the program to achieve the following.
1. If the user gives an incorrect format of phone numbers, the input will be cleared.
2. The cursor will come back to the input text field after the input is cleared.

Due 11-12-2013

Lab 22 Google Maps II

Write a form to send a query to Google maps. If the input is not in the format of coordinates, display an error, clear the input, and ask the user to retry. For example, an incorrect input may look like 12.a2,21.22

1. You should define a function check() to check the query input.
2. You can call the function check as follows:form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()"

Lab 21 Google Docs

1. Go to Google Docs. Google Docs lets you write Word documents through an online web service.
2. Start writing.
3. Publish the Word document. Make sure your friends can view your document.
4. What's the URL of your document.
5. Save your document as .doc and .pdf, the two common formats for documents.

Hint: This is a sample Word document.

News coverage:
Google “Docs & Spreadsheets” Launches ,Oct 2006

Lab 20 共同編輯文件

閱讀莫拉克風災電腦教室再生計畫，假設這個計畫是由你發起，你要擬定一張志工排班表，以及修復場地值班人員。

• 請製作一張值班人員表，為了提升效率，你決定先擬好空白表格，再開放編輯權限給你的夥伴填寫，請夥伴上網登記輪值時間。
• 製作志工時間登記表，當志工們填寫資料，管理者可以得到一份excel清單，為了保障個人隱私，請不要將excel公開給所有人。

助教教學文件

Lab 19 製作線上投影片

參閱特教學校科技輔具應用工作坊議程表，將範例投影片轉為Google投影片，可以線上觀看。