David Lo

2014年5月12日星期一

Lab 28 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.

=================================

<!DOCTYPE html>
<html>
<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #AAF72A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#FFF007"></div>

<h3>9926167 電子四甲羅世雄</h3>

<div style="letter-spacing:15px;">TV電玩遊戲熱愛者</div>

<div style="color:#40B3DF;">專長興趣
<span style="background-color:#B4009E;color:#ffffff;">打電動交友</span>
</div>

<div style="color:#DD0077;">Facebook: shongle lo</div>

</div>

</body>
</html>

Lab 27 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.
========================================
Tables:

Jill	Smith	50
Eve	Jackson	94
John	Doe	80

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td

{

border:1px solid black;

padding:5px;

}

table

{

border-spacing:10px;

}

</style>

</head>

<body>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

===============================

Lists:

An Unordered List:

Coffee
Tea
Milk
Water

An Ordered List:

Coffee
Tea
Milk
Water

<!DOCTYPE html>
<html>
<body>

<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
</ul>

<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
</ol>
</body>
</html>

Lab 26 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.輸出結果拍一張圖，共五張)
===========================================

2014年5月5日星期一

Lab 23 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
=================================================

文件連結(.docx)

文件連結(.pdf)

Lab 24 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 20
<html>
<title>Lab 20</title>
<body>
<form action="http://maps.google.com/maps" method="get" name="f" onsubmit="return check()">
<input name="q" type="text" />
<input name="send" type="submit" value="search" />
</form>
</body>
<script>
function check()
{ var floatReg =/^([+-]?)[1-9]\d*(\.\d*)?,([+-]?)[1-9]\d*(\.\d*)?$/;
if(!floatReg.test(f.q.value)){

alert("Incorrect format!!!");
f.q.value="";
document.f.q.focus();
return false;
}
}
</script>
</html>

Lab 22 共同編輯文件

閱讀[新聞報導] 美國商會結合微軟二手電腦供社福團體免費用，假設這個計畫是由你發起，你要擬定一張志工排班表，以及修復場地值班人員。

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

助教教學文件

===============================

志工值班時間表

志工值班時間及意願表

Lab 21 製作線上投影片

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

==================================

2014年5月12日 星期一

An Unordered List:

An Ordered List:

2014年5月5日 星期一

2014年5月12日星期一

2014年5月5日星期一