課程名稱
Course Title |
(中文) 網路首頁設計
(英文) Web Homepage Design |
開課單位
Departments |
事業經營學系 |
課程代碼
Course No. |
B4660 |
授課教師
Instructor |
王光正 |
學分數
Credit |
2.0 |
必/選修
core required/optional |
選修 |
開課年級
Level |
大二 |
| 先修科目或先備能力(Course Pre-requisites)： |
課程概述與目標(Course Overview and Goals)：近幾年因為HTML5、CSS3的流行普及，JavaScript、jQuery的歷久不衰，讓許多知名的網路服務平台如Google、Facebook、YouTube... 等爭相採用相關的技術開發出互動性極佳的網站。而人手一台的智慧型手機、平板電腦，宣告了跨平台的世代來臨，網頁的應用首當其衝：讓一個網站能正確適當的展現在不同作業系統、不同螢幕大小的設備上，就成為現代網頁開發者最新的挑戰。
而這些技術是相互關聯的，在學習的連結上似乎無法完整切割，也無從逃避，但也因此讓許多人徘徊在入門的關口外，不知所措。在本課程中針對這個問題，我們精心規劃了學習新一代網頁設計時必修的課程。
由HTML、CSS開始，再進入HTML5/CSS3的新領域，讓學習者能對於網頁的建構與設定有全面性的認識與熟悉。接著再由基本的JavaScript學習網頁互動，進而利用jQuery深入應用的層面。
最後的重點是二個近年來討論度高的跨平台框架：jQuery Mobile及Bootstrap。jQuery Mobile是基於jQuery技術發展出來的行動裝置使用者介面框架，能在簡易的設定與操作下快速打造出行動裝置的使用介面。
Bootstrap更是新一代RWD 網站開發中的熱門焦點，能讓網頁因應不同大小的螢幕自動改變內容的配置，確保每個平台的使用者都能得到最好的操作體驗。
|
| 教科書(Textbook) |
學好跨平台網頁設計：HTML5、CSS3、JavaScript、jQuery與Bootstrap 4超完美特訓班 (第二版) |
| 參考教材(Reference) |
|
|
| 課程大綱 Syllabus |
學生學習目標
Learning Objectives |
單元學習活動
Learning Activities |
學習成效評量
Evaluation |
備註
Notes |
序
No. | 單元主題
Unit topic |
內容綱要
Content summary |
| 1 | 網頁設計簡介 |
網頁設計簡介
教學評量說明 |
了解HTML、CSS、Javascript |
|
|
|
| 2 | 網頁設計的工具 |
安裝Intellij IDEA
Github Desktop安裝說明 |
安裝Intellij IDEA
Github Desktop安裝
第一次的網頁上傳練習
並模仿練習設計「我最喜歡的水果」上傳 |
|
|
|
| 3 | 項目符號與編號的設定 |
項目符號與編號的設定 |
學習項目符號與編號的設定，並改業網頁上傳 |
|
|
|
| 4 | 表格的設定 |
網頁表格的設定 |
學習網頁表格的設定 |
|
|
|
| 5 | 盒子模型與外部字型 |
盒子模型與外部字型 |
了解盒子模型
學習外部字型的匯入 |
|
|
|
| 6 | Javascript入門 |
Javascript程式語言設計入門 |
Javascript程式語言設計入門 |
|
|
|
| 7 | Javascript應用練習 |
九九乘法表加上表格 |
學習九九乘法表加上表格 |
|
|
|
| 8 | Javascript流程控制01 |
Javascript流程控制if與switch |
Javascript流程控制if與switch |
|
|
|
| 9 | Javascript流程控制02 |
javascript流程控制+ 表格 |
javascript流程控制+ 表格 |
|
|
|
| 10 | 輸入數值計算統計量 |
輸入數值計算統計量 |
輸入數值計算統計量 |
|
|
|
| 11 | Javascript物件應用 |
Javascript物件應用 |
Javascript物件應用 |
|
|
|
| 12 | Javascript物件應用加上表格 |
Javascript物件應用加上表格 |
Javascript物件應用 |
|
|
|
| 13 | Javascript函式庫─jQuery應用01 |
jQuery應用01 |
jQuery應用01 |
|
|
|
| 14 | Javascript函式庫─jQuery應用02 |
jQuery應用02 |
jQuery應用02 |
|
|
|
| 15 | CSS3動畫應用01 |
CSS3動畫應用01 |
CSS3動畫應用01 |
|
|
|
| 16 | CSS3動畫應用01 |
CSS3動畫應用02 |
CSS3動畫應用02 |
|
|
|
|
彈性教學週活動規劃
序
No. | 實施期間
Period |
實施方式
Content |
教學說明
Teaching instructions |
彈性教學評量方式
Evaluation |
備註
Notes |
| 1 |
起:2024-02-19 迄:2024-06-07 |
3.實作 Practical class |
彈性教學包括在課後練習動畫 |
彈性教學合計至所有上課作業的評量之中 |
|
|
教學要點概述：
1.自編教材 Handout by Instructor：
■ 1-1.簡報 Slids
■ 1-2.影音教材 Videos
□ 1-3.教具 Teaching Aids
□ 1-4.教科書 Textbook
□ 1-5.其他 Other
□ 2.自編評量工具/量表 Educational Assessment
□ 3.教科書作者提供 Textbook
成績考核 Performance Evaluation：
彈性教學：10% 作業：90%
教學資源(Teaching Resources)：
□
教材電子檔(Soft Copy of the Handout or the Textbook)
□
課程網站(Website)
課程網站(Website)：http://elearn.ttu.edu.tw/
扣考規定：http://eboard.ttu.edu.tw/ttuwebpost/showcontent-news.php?id=504
|
|
|