:::
確定開課
未開放線上報名
課程資訊
授課老師
關於這一門課
各週課程規劃
網站設計-前端技術入門 ---HTML5+CSS3+Bootstrap4+Smarty前端開發
人氣：2229 人
課綱
確定開課
未開放線上報名
課程資訊
- 上課時間：
- 每週 六 早上9:00-12:00 下午13:30~16:30（第一次上課日期：09 月 12 日）
- 開課地點：
- 成功國中（台南市北區和緯路1 段2 號）
- 招生人數：
- 25 人
- 課程收費：
-
- 總學分費：2 學分 2000 元（6 週課程 / 一次上課 6 小時）
- 學期報名費：新生：200 元； 舊生：150 元
- 保證金：對於免收學費者（低收入或身心障礙）收取 1000 元
- 教材費：0 元（使用教材：講師自製教材講義）
- 上機費：500 元
- 旁聽費： 本課程不開放旁聽
- 其他資訊：
- <b>講義網站：</b>http://www.tad0616.net
<b>HTML手冊：</b>http://www.w3schools.com/html/default.asp 或 http://www.w3school.com.cn/html/index.asp
<b>CSS手冊：</b>http://www.w3schools.com/css/default.asp 或 http://css.doyoe.com
<b>BootStrap手冊：</b>https://bootstrap.hexschool.com/docs/4.2/getting-started/introduction/
授課老師
關於這一門課
1.為什麼想開這門課？希望帶領學員共同學習甚麼
若將一個現代化的網站想像成一間房子的話，HTML就是房子的隔間架構，CSS則是房子的裝潢，BootStrap則是系統家具，Smarty則是設計藍圖，JavaScript則是裡面的各種自動設施，PHP則是用來建立各種有專業功能的房間。
HTML是建構一個網站骨架最基本的語法，要建立網站或者想要開發網站程式系統，都必須會使用HTML，目前HTML5已是網頁正式標準，我們會利用這門課來了解HTML的演變以及其用法。
CSS（串接樣式表）是設計網站外觀必備的技術，利用它可以控制整個網站外觀，因此，不管您是要設計一般網頁、或者是要開發各種佈景甚至是撰寫程式，您都一定會用到CSS。新一代CSS3擁有強大的能力，我們可以透過這門課來學習如何運用CSS3來打造美觀的網站前端。
BootStrap是一個自適應的CSS框架，在眾多的自適應框架中，佔有極高的使用率，相關的套件也非常豐富，可以讓我們的網站不管是在桌機、平板、手機都能自動調整成最適合的觀看模式，讓使用者的觀看體驗更加愉快。
Smarty是一個PHP官方的樣板機制，讓開發者可以將程式和外觀樣板分開，以利分工合作，或者程式語法的再利用，達到MVC的架構。為了下一學期的PHP開發，我們會先在這學期學習Smarty的用法，並利用他整合上述所有技術，做成XOOPS的佈景，一來學習前端的整合運用，二來學習XOOPS的佈景開發，三來也是PHP入門的一環。
XOOPS是一個專業的架站機，可以在短時間內架出一個功能強大齊全的網站，我們這次課程將運用以上所有技術，為XOOPS產出一個完全可以套用的自製佈景。
HTML是建構一個網站骨架最基本的語法，要建立網站或者想要開發網站程式系統，都必須會使用HTML，目前HTML5已是網頁正式標準，我們會利用這門課來了解HTML的演變以及其用法。
CSS（串接樣式表）是設計網站外觀必備的技術，利用它可以控制整個網站外觀，因此，不管您是要設計一般網頁、或者是要開發各種佈景甚至是撰寫程式，您都一定會用到CSS。新一代CSS3擁有強大的能力，我們可以透過這門課來學習如何運用CSS3來打造美觀的網站前端。
BootStrap是一個自適應的CSS框架，在眾多的自適應框架中，佔有極高的使用率，相關的套件也非常豐富，可以讓我們的網站不管是在桌機、平板、手機都能自動調整成最適合的觀看模式，讓使用者的觀看體驗更加愉快。
Smarty是一個PHP官方的樣板機制，讓開發者可以將程式和外觀樣板分開，以利分工合作，或者程式語法的再利用，達到MVC的架構。為了下一學期的PHP開發，我們會先在這學期學習Smarty的用法，並利用他整合上述所有技術，做成XOOPS的佈景，一來學習前端的整合運用，二來學習XOOPS的佈景開發，三來也是PHP入門的一環。
XOOPS是一個專業的架站機，可以在短時間內架出一個功能強大齊全的網站，我們這次課程將運用以上所有技術，為XOOPS產出一個完全可以套用的自製佈景。
2.修此門課需具備什麼條件？
需架設過網站（最好有使用XOOPS網站的經驗）。
對於不排斥撰寫語法（本班不使用所見即所得編輯器）。
做出的佈景作品願意釋出提供他人下載。
對於不排斥撰寫語法（本班不使用所見即所得編輯器）。
做出的佈景作品願意釋出提供他人下載。
3.上課的方式是怎麼進行的？學生可以有什麼收穫？
上課方式：說明、示範、練習、發問、示範、練習…練習…練習
學期末將選出優秀佈景公開於網路提供下載。
學生可以從這門課學會HTML語法、CSS用法、基本影像處理能力、XOOPS網站佈景設計方法。
學期末將選出優秀佈景公開於網路提供下載。
學生可以從這門課學會HTML語法、CSS用法、基本影像處理能力、XOOPS網站佈景設計方法。
4.如何取得學分？（評量方式）
作品實做（40%）、出席率（30%）、上課態度（30%）
5.備註&推薦書目
各週課程規劃
- 日期
- 課程主題
- 課程內容
- 授課講師
- 第 1 次課程
-
第 1 次
2020-09-12
（六）早上9:00-12:00 下午13:30~16:30成功國中
- HTML5的開發環境與基礎
- 工欲善其事，必先利其器，故本節課會先分享建立基本的開發環境以及安裝各種主流的開發工具。接著介紹HTML5的概念及用法，熟悉每一種HTML常用標籤，並建立出網頁或者基本佈景的架構。
- 吳弘凱
- 第 2 次課程
-
第 2 次
2020-09-19
（六）早上9:00-12:00 下午13:30~16:30成功國中
- 用CSS3妝點網站外觀
- CSS是美化網站最重要的工具，網站的第一印象甚至是友善性、易用性，CSS都佔有舉足輕重的地位。這節課我們會先了解套用CSS的幾種方法，以及其優先順序，接著按照需求，開始認識CSS常用的屬性以及其設定值之用法及效果。此外，也會深入了解CSS挑選器的概念（未來也是jquery也會用到），讓我們可以精準、輕鬆的管理網站上任何一個元件。在這一門課，我們會將網站的布局及外觀初步的建立出一個雛型。
- 吳弘凱
- 第 3 次課程
-
第 3 次
2020-09-26
（六）早上9:00-12:00 下午13:30~16:30成功國中
- CSS3進階用法
- 這階段，我們除了延續上星期課程，來了解更多各種CSS屬性外，也可以開始深入的使用一些CSS3較為進階的觀念技巧，例如各種position位置概念、如何做背景或文字漸層，或者利用CSS加入一些簡單的動態效果等。
- 吳弘凱
- 第 4 次課程
-
第 4 次
2020-10-17
（六）早上9:00-12:00 下午13:30~16:30成功國中
- 套用BootStrap4自適應框架
- 到此階段算是進入重頭戲，我們要將網站套用BootStrap4，讓網站可以擁有可以在各種不同載具觀看的自適應功能。了解BootStrap4的基本概念，並開始使用其各種常用元件，例如導覽選單或者提示工具等，以及各種常用的小技巧。至此，我們的網站基本版面算是完成。
- 吳弘凱