手機網頁示範說明
index.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>app首頁</title>
<style>
</style>
</head>
<body >
<table border="0" width="300" >
<tr>
<td colspan="3">
<img border="0" src="images/title.jpg" width="300" height="60"><br> <br>
座號:005 姓名:王大明<br><br>
<b><font size="4" color="#0000FF">手機網頁設計應用(架構範例)</b><br>
</td>
</tr>
<tr>
<td width="100">
<p align="center">
<a href="app_news.htm">
<img border="0" src="images/share.jpg" width="48" height="48"></a></b><br>
最新消息</td>
<td width="100" height="86">
<p align="center">
<a href="map.htm">
<img border="0" src="images/map_01.jpg" width="48" height="48"></a></b><br>
美廣地圖</td>
<td width="100" height="86">
<p align="center">
<a href="health.htm">
<img border="0" src="images/dance.gif" width="48" height="48"></a></b><br>
健康教室</td>
</tr>
<tr>
td width="100">
<p align="center">
<a href="lowc.htm">
<img border="0" src="images/image_09.jpg" width="48"
height="48"></a></b><br>
低碳便當</td>
<td width="100" height="86">
<p align="center">
<a href="voice.htm">
<img border="0" src="images/playing.png" width="48"
height="48"></a></b><br>
傾聽 </td>
<td width="100" height="86">
<p align="center">
<a href="wang.htm">
<img border="0" src="images/logo_wang.jpg" width="48"
height="48"></a></b><br>
營養顧問</td>
</tr>
<tr>
<td width="100" height="86">
<p align="center">
<a href="tel.htm">
<img border="0" src="images/tel.jpg" width="48" height="48"></a></b><br>
常用電話</td>
<td width="100" height="86">
<p align="center" >
<a target="_blank" href="app_share.htm">
<img border="0" src="images/carton.gif" width="48" height="48"></a></b><br>
分享專區</td>
<td width="100" height="86">
<p align="center">
<a href="about.htm">
<img border="0" src="images/flower1.gif" width="48" height="48"></a></b><br>
學習心得</td>
</tr>
<tr>
<td width="100" height="86">
<p align="center">
<a href="http://agms.tku.edu.tw/pc/work/Link_show_app.aspx">
<img border="0" src="images/dance.gif" width="48" height="48"></a></b><br>
全班網站</td>
<td width="100" height="86">
<p align="center" >
</td>
<td width="100" height="86">
<p align="center">
<br>
</td>
</tr>
</table>
</body>
</html>
app_news.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>健康教室最新消息</title>
<style>
</style>
</head>
<body >
<input onclick="history.go( -1 );return true;" type="button" value="上頁back"
style="background-color: #C0E3B5"><br>
<img border="0" src="images/leave.gif" width="300" height="37"><br>
<b><font size="5" color="#0000FF"> </font></b><b><font size="5"
color="#0000FF">
<font face="標楷體">健康教室最新消息</font></font></b>
<b><font size="5" color="#0000FF"> </font></b><table border="1"
width="300">
<tr>
<td bgcolor="#FFCCFF" width="14%">
日期</td>
<td bgcolor="#FFCCFF" width="71%">
<p align="center">消 息 內
容</td>
<td bgcolor="#FFCCFF" width="11%" align="center">
</td>
</tr>
<tr>
<td width="14%" bgcolor="#FFFFFF" valign="middle" height="26">
<font size="2">2017.04.07</font></td>
<td width="71%" bgcolor="#FFFFFF" valign="middle" height="26">
認識餐具內的潛藏毒素。<img border="0" src="images/new_01.gif" width="30"
height="15"></td>
<td width="11%" bgcolor="#FFFFFF" valign="middle" height="26"
align="center">
<a href="news_01.htm">
<img border="0" src="images/open.gif" width="24" height="22"></a></td>
</tr>
<tr>
<td width="14%" bgcolor="#CCCCFF" valign="middle" height="26">
<font size="2">2017.04.06</font></td>
<td width="71%" bgcolor="#CCCCFF" valign="middle" height="26">
台灣水果介紹。<img border="0" src="images/new_01.gif" width="30"
height="15"></td>
<td width="11%" bgcolor="#CCCCFF" valign="middle" height="26"
align="center">
<a href="http://mays4.weebly.com/9679-21488287712770026524-2017132057--taiwan-fruits.html"
target=_blank>
<img border="0" src="images/open.gif" width="24" height="22"></a></td>
</tr>
</table>
<p><img border="0" src="images/leave.gif" width="300" height="37">
</body>
</html>
map.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>淡江大學美食廣場地圖</title>
</head>
<body >
<input onclick="history.go( -1 );return true;" type="button" value="上頁back"
style="background-color: #CCFF99"><br> <table border="0" width="300"
id="table1">
<tr>
<td width="845"><b><font size="5"
color="#0000FF">淡江大學美食廣場地圖</font></b></td>
</tr>
<tr>
<td width="300">
<img border="0" src="images/map.jpg" width="288" height="211"><br>
在寒冬中，松濤館地下1樓的美食廣場人潮卻絡繹不絕，每到用餐時段總是一位難求，各間攤位前擠滿著等待點餐客人。看著老闆們忙碌的身影、學生用餐時露出的滿足表情，交織成一幕幕溫馨的畫面。美食廣場提供乾淨、衛生又便宜的餐點，默默地陪伴著每位淡江人，多年來，這裡有許多故事、許多記憶和改變隱伏在不變的人聚人散中......<br>
<font size="2"><font color="#0000FF">(</font></font><br>
<img border="0" src="images/image_02.jpg" width="300" height="225"><br> </td>
</tr>
</table>
<input onclick="history.go( -1 );return true;" type="button" value="上頁back"
style="background-color: #CCFF99"><br>
</body>
</html>
health.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>營養學數位教材</title>
</head>
<body >
<input onclick="history.go( -1 );return true;" type="button" value="上頁back"
style="background-color: #C0E3B5"><br><br>
<b><font size="4" color="#0000FF"> 營養學數位教材 (王鳳英老師主講)</font></b><br><br>
<table border="0" width="300">
<tr>
<td width="41" bgcolor="#C0E3B5" align="center" height="20"><b>
<font size="4">編號</font></b></td>
<td width="234" bgcolor="#C0E3B5" align="center" height="20"><b>
<font size="4">講題</font></b></td>
</tr>
<tr>
<td width="41" bgcolor="#CCCCCC" align="center">
<b><font size="4">00</font></b></td>
<td width="234" bgcolor="#CCCCCC">
<b>
<a href="http://wang.health999.net/course3/voice_00.htm">
<font size="4">教師及課程簡介</font></a></b></td>
</tr>
<tr>
<td width="41" bgcolor="#FFFFFF" align="center" height="22">
<b><font size="4">01</font></b></td>
<td width="234" bgcolor="#FFFFFF" height="22">
<b>
<a href="http://wang.health999.net/course3/voice_01.htm">
<font size="4">常見的營養健康問題</font></a></b></td>
</tr>
</table>
</body>
</html>
lowc.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>低碳便當 </title>
</head>
<body >
<input onclick="history.go( -1 );return true;" type="button" value="上頁back"
style="background-color: #CCFF99"><br>
<table border="0" width="300">
<tr>
<td width="300">
<font color="#0000FF"><b>淡江大學「低碳便當」簡介 <br></b></font><br>
<img border="0" src="images/image_09.jpg" width="122" height="122">
<img border="0" src="images/image_09.jpg" width="122" height="122"><br><br>
使用一個紙便當盒到底多不環保？ <br> <br>
拿它來跟一般水洗之後重複使用的便當盒相比，得到的答案是驚人的：紙便當盒的耗碳量是一般便當盒的7.7倍！<br><br>
高雄餐旅大學教授蕭登元與台大教授於幼華的研究顯示，以每個紙餐盒15公克計算，進口處女漿紙板裁製成紙餐盒耗損率約15%至23%，百萬個紙餐盒要用掉17.25噸的紙板，換算1棵高8公尺、直徑16公分、20至40年才能長成的喬木，必須砍345棵才夠用。<br>
<br>
紙餐盒的製造過程還會產生二氧化碳、氮氧化物、硫氧化物、甲烷及碳氫化物等空氣污染源，其回收成本不但高，再處理、再利用的排碳量也相當可觀。<br>
<br>
<img border="0" src="images/image_11.jpg" width="300" height="199"></td>
</tr>
<tr>
<td width="300"> </td>
</tr>
</table>
<input onclick="history.go( -1 );return true;" type="button" value="上頁back"
style="background-color: #CCFF99"><br>
</body>
</html>
voice.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>有聲雜誌_2018年07月01</title>
</head>
<body >
<input onclick="history.go( -1 );return true;" type="button" value="上頁back"
style="background-color: #C0E3B5">
<p><b><font size="5" color="#0000FF">有聲雜誌_2018年07月01<br><br>
<img border="0" src="images/first_01.jpg" width="260" height="56"><br><br>
<table border="1" width="300">
<tr><td>
<font size="5"><b>01 傾聽 02:28</b></font><font size="4"><br>
<audio src="mp3/1807-01.mp3" controls > </audio><br><br><br>
</font><br>
</tr>
</table>
</body>
</html>
wang.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>營養顧問</title>
</head>
<body >
<input onclick="history.go( -1 );return true;" type="button" value="上頁back"
style="background-color: #C0E3B5"><br>
<table border="0" width="300">
<tr>
<td width="751"><b><font size="5" color="#0000FF">
健康食堂營養顧問</font></b></td>
</tr>
<tr>
<td width="220"bgcolor="#CCFF99">
<img border="0" src="images/image_03.jpg" width="300" height="200"><br>
<br>
<b> <font size="4"><br>
</font></b></td>
</tr>
<tr>
<td width="751">
<br>
<img border="0" src="images/logo_wang.jpg" width="89" height="84"><p>
<font face="標楷體" size="4"><font color="#0000FF"><b>王博士健康食堂</b></font><br>
<br>
中華電信園區<br>
台北市仁愛路一段42號B1美食街<br>
<br>
提供健康美味，符合現代人飲食<br>
標準的地中海餐飲。</font>
</td>
</tr>
</table>
</body>
</html>
tel.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>常用電話</title>
</head>
<body >
<input onclick="history.go( -1 );return true;" type="button" value="上頁back"
style="background-color: #C0E3B5"><br>
<table border="0" width="300">
<tr>
<td width="300">
<img border="0" src="images/tel.jpg" width="60" height="60"><b><font
size="5" color="#0000FF">常用電話</font></b></td>
</tr>
<tr>
<td width="220"bgcolor="#CCFF99">
<br><br>
常用電話如下:..........<br>
<br>
<b> <font size="4"><br>
</font></b></td>
</tr>
</table>
</body>
</html>
app_share.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>app分享區</title>
<style>
</style>
</head>
<body >
<table border="0" width="300" >
<tr>
<td colspan="3">
<img border="0" src="images/title2.jpg" width="300" height="70"><br>
</td>
</tr>
<tr>
<td>
<p align="center">
<a href="http://home.health999.net/app_news2.htm">
<img border="0" src="images/icon_06.bmp" width="48"
height="48"></a></font></b><br>
鶯歌菜園</td>
<td>
<p align="center">
<a href="food.htm">
<img border="0" src="images/food_05.jpg" width="53"
height="48"></a></font></b><br>
地中海餐</td>
<td>
<p align="center">
<a href="http://agms.tku.edu.tw/stream/bible/show_now.aspx">
<img border="0" src="images/hand.jpg" width="48"
height="48"></a></font></b><br>
今日靈修</td>
</tr>
<tr>
<td>
<p align="center">
<a href="http://twmc.health999.net/app_light.htm">
<img border="0" src="images/voice.jpg" width="60" height="60"></a><br>
有聲雜誌</td>
<td>
<p align="center">
<a href="http://twmc.health999.net/app_life.htm">
<img border="0" src="images/life_song.jpg" width="60" height="60"></a><br>
生命與歌</td>
</td>
<td>
<p align="center">
<a href="http://twmc.health999.net/app_water.htm">
<img border="0" src="images/water3.jpg" width="60" height="60"></a><br>
荒漠甘泉</td>
</tr>
<tr>
<td>
<p align="center">
<br>
<a href="http://twmc.health999.net/good/good_menu.htm">
<img border="0" src="images/cup.bmp" width="47" height="38"></a><br>
心靈小憩</td>
<td>
<p align="center">
<a href="http://twmc.health999.net/app_share.htm">
<img border="0" src="images/tree.gif" width="60" height="60"></a><br>
詩歌故事</td>
<td>
<p align="center">
<a href="index.htm">
<img border="0" src="images/home.jpg" width="60" height="60"></a><br>
回首頁</td>
</tr>
<tr>
<td>
<p align="center">
<br>
<a href="https://www.youtube.com/watch?v=NlkNcrVIo2k" Target="_blank">
<img border="0" src="images/work.gif" width="60" height="60"></a><br>
手機發展</td>
<td>
<p align="center">
<br>
</td>
<td>
<p align="center">
<br>
</td>
</tr>
</table>
</body>
</html>
about.htm
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>學習心得</title>
</head>
<body >
<input onclick="history.go( -1 );return true;" type="button" value="上頁back"
style="background-color: #C0E3B5"><br>
<table border="0" width="300">
<tr>
<td width="300"><b><font size="5" color="#0000FF">
學習心得</font></b></td>
</tr>
<tr>
<td width="220"bgcolor="#CCFF99">
<img border="0" src="images/work.gif" width="49" height="48"><br>
<br>
我的學習心得:..........<br>
<br>
<b> <font size="4"><br>
</font></b></td>
</tr>
</table>
</body>
</html>
images 資料夾內容
(一般圖片寬度300點為宜，小圖示60x60為宜，如原始圖片過大，
請以FreeImageRsizer 軟體修正後存檔)
