Embedded Files
教學目標：藉網頁程式設計(HTML+CSS+JavaScript)了解程式設計的原理以及實務應用。
教學進度：
Week 1-3: 【智慧財產權觀念宣導】【課程能力指標簡介】認識藉網頁程式架構及語法
Week 4-5: HTML網頁介面設計
Week 6-7: CSS網頁風格設計
Week 8-9: 靜態網頁設計；繳交期中報告
Week 10-12: JavaScript互動網頁程式設計
Week 13-15: 增加互動功能
Week 16-18: 互動網頁程式，期末專案製作及報告
第1-3週 認識藉網頁程式架構及語法
註冊CodePen可以進行網頁程式的編排，以及觀看即時結果。
- HTML指令：https://www.w3schools.com/html/default.asp
- CSS指令：https://www.w3schools.com/css/default.asp
- JavaScript指令：https://www.w3schools.com/js/default.asp
第4-5週 認識HTML網頁介面設計
第1章 網頁設計簡介 第2章 文件結構 第3章資料編輯與結構化 第4章 超連結與圖片 第5章 表格 第6章 影音多媒體 第7章 表單與後端處理
第6-7週 CSS網頁風格設計
第8章 CSS的基本語法 第9章 字型、文字與清單屬性 第10章 色彩、背景、漸層與表格屬性 第11章 Box Model與定位方式 第12章 特殊效果與媒體查詢
第7週 超連結與圖片
如何建置網站專案
第8-9週 靜態網頁設計；繳交期中報告
教學目標：靜態網頁設計
執行步驟：
- 設定網頁主題：放置於網頁標題(<title>)，如：個人網頁、班級網頁、網拍物件介紹、八卦網...等。
- 能使用第1 ~ 4章的網頁技術。
- 首頁必須有小組及製作人名字。
- 每人必須設計1頁，可進行小組2~3人整合。
- 網站必須放置於Codepen的Project中，若是小組網頁，每位同學的帳戶專案都必須有。
以上為第8週同學們所提出預計製作的網頁主題
期中報告繳交說明：
將Code Project輸出為zip檔，並將執行Code Project的網頁截圖加入zip檔中，再一併上傳。
例：
1. 將執行Code Project的網頁截圖加入zip檔，如下。
2. 將Codepen Project中專案程式碼打包(右下角Export選項)為zip檔
範例
主題：和春資工系網
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>和春資工系網</title>
<!-- Styles -->
<link rel="stylesheet" href="styles/index.processed.css">
</head>
<body>
<!-- Scripts -->
<script src="scripts/index.js"></script>
<table>
<tr>
<td>
<img src="https://i.postimg.cc/1XkfnpMH/IMG-1551.png" height="48">
</td>
<td>
<h1>和春技術學院 資訊工程系 首頁</h1>
</td>
</tr>
</table>
<p class="p1">
資訊工程系於民國九十年三月俸准成立，並於九十學年度開始招生日四技一班，九十一學年度招生日四技二班。目前共有日間部四技、五專，進修部二專、二技及四技。在師資方面，目前編制內專任教師共計7位〈1位教授、2位副教授、3位助理教授、1位講師〉，並擁有符合系「數位生活科技」與「資訊與多媒體應用」特色之教學功能實驗室、專題研究功能實驗室以及多項教學軟硬體設備。
</p>
<p class="p2">
勞動部在民國90至94年職類別薪資調查報告中指出，系統工程專業人員、軟體工程專業人員及網路工程專業人員的受雇員工需求人數，每年均成快數成長，且平均薪資均高於其他行業平均薪資。民國94年第一屆日四技大學部學生畢業，同時完成第一次本位課程設計，以系統性的方法進行課程規劃，並參照勞動部的調查報告，確立專業能力的培育涵蓋三個面向，分別以系統工程專業人員、軟體工程專業人員及網路工程專業人員作為代表性工作職稱，並訂定資訊技術的應用能力為人才培育目標。期間並完成各項制度之建立，建全師資結構，建置系計算機中心、教學實驗室及研究實驗室，課程規劃的實施及成果檢討與修訂，奠定系務發展的基礎。
</p>
<p class="p3">
民國98年本校為因應產業發展與國家政策演進，啟動系統性的中長程發展計畫編修機制，考量學生特質，修訂校、系教育目標以符合社會脈動。導入成果導向持續改善的雙迴圈課程規劃與管理機制，持續進行課程規劃及教學品保的工作，定訂畢業生所應具備的核心能力及檢核指標，建立持續改善的機制。在98年專案評鑑，本系獲得教育部評鑑一等。99年本校訂定「和春技術學院自我評鑑實施辦法」，將自我評鑑機制制度化，奠定永續發展的基石。並於99年技術學院評鑑本系再次獲得教育部評鑑一等。因行動裝置應用的嵌入式系統發展多朝向應用軟體設計，又由於行動裝置應用產業大多集中在中北部，所以為因應時代潮流、社會發展與地方產業人力需求，學校在101學年度起，將日四技「行動裝置應用組」改為「資訊多媒體應用組」。為了配合地區產業與學生進修需求，進修部二專在100學年度成立，進修部二技也在102學年度成立。在104年度通過IEET TAC2014春季認證，透過IEET認證規範的檢驗，更加確保本系教學品質的達成與改善機制的落實。
</p>
</body>
</html>
CSS：
body {
background: #f5f5f5;
}
h1 {
color: blue;
text-align: center;
font-family: DFKai-SB;
}
p {
color: DodgerBlue;
}
p.p1 {
font-family: Microsoft YaHei;
}
p.p2 {
color: Black;
}
p.p3 {
font-style: italic;
}
第10週
教學目標：能執行表格的設計
執行步驟：
1. 學習使用基本元素<table>、<tr>、<td>、<th>
2. 學習使用各基本元素的屬性
3. 學習使用進階元素標題<caption>，以及表格的表頭、主體與表尾，分別為<thead>、<tbody>、<tfoot>。
4. 學習使用各進階元素的屬性
5. 直欄式表格<colgroup>、<col>元素
空白表格
練習一
設定每一列不同的顏色
練習二
參考程式 圖片1 圖片2 圖片3
如何取得及保存圖片及圖檔
將圖片加入網頁：將圖片加入內頁中，可以採用HTML的<img>標籤，圖片可以你自己的或是網路上找到的，Wikimedia Commons (https://commons.wikimedia.org/wiki/Main_Page)及Pixabay (https://pixabay.com) 是兩個非常好的圖片資源網。
你可能需要線上保存圖片，以下列舉許多影像保存網站可以於本課程中使用，但是要注意Imgur (http://imgur.com/)無法再CodePen中被使用。
- http://postimage.org/
- https://www.flickr.com/
- http://photobucket.com/
- https://www.dropbox.com/
- https://www.base64-image.de/
- http://tinypic.com/
第11週 影音多媒體 下載 課程講義
教學目標：網頁中嵌入影音多媒體
操作步驟
1. 使用<video> <audio>元素
2. 認識<embed>元素
3. 嵌入物件的<object>元素
4. 嵌入浮動框架<iframe>元素
5. 網頁自動導向
進階操作
1. 嵌入(Java) Scripts使用<script>、<noscript>元素
2. 嵌入CSS樣式表使用<style>元素
第12~14週 表單規劃與設計 下載 課程講義
行動電話使用意見調查表
1. 參照第6章6-7完成表單設計
2. 請在第一行加入"作者:何慶祥"字樣(請更改為自己的名字)
無論完成度如何務必上傳！
範例
程式碼： 下載參考程式碼
第15-16週 CSS網頁風格設計
第8章 CSS的基本語法 第9章 字型、文字與清單屬性 第10章 色彩、背景、漸層與表格屬性 第11章 Box Model與定位方式 第12章 特殊效果與媒體查詢
第16週 作業
CSS中
1. 至少針對字型加入3種設定(1)字型設定；(2)字體大小設定；(3)對齊；
2. 至少針對色彩加入3種設定(1)文字或圖片的色彩或透明度設定；(2)加入背景圖片；(3)漸層效果。
第17週 JavaScript動態網頁設計
第12章(V4) 型別、變數與運算子 第13章(V4) 物件、DOM與事件處理
加入至少2個JavaScript副程式
第18週
1. 完成問卷填表設計及報告
2. 如上圖CodePen中，點選右下方Export按鈕(銀光標示處)，將此專案打包存入壓縮檔(檔案名稱請用學號)。
3. 將期末報告Word檔加入以學號為名的壓縮檔。
4. 將此以學號為名的壓縮檔案上傳Zuvio。
Page updated
Report abuse