Level UP 網站前端設計
HTML5 + CSS3 + JavaScript 實務進階班
審視網頁架構，釐清網頁設計概念
基本的「前端」就夠了？網頁的呈現是品牌與閱讀者重要的溝通管道，隨著行動裝置的普及，大多數的消費者會利用零碎的時間瀏覽各式網站，因此不論是哪種產業，滾動式的調整頁面設計，讓使用者進入網站後可以產生好的體驗經驗。簡單的前端設計無法使閱讀者有為之一亮的驚喜。大多數的人著重在單一次的程式碼撰寫，忽略未來可以再度被使用的可能性，往往花費許多時間在撰寫類似的code。隨著經驗的累積、能力的提升，可以創造出未來可持續使用的程式碼，大大增加撰寫程式的速度，因為前端設計能力也成為決定生產力的重要關鍵。
品牌網站所呈現的樣貌，有助於加深消費者對於企業形象的建立
網站頁面成為與消費者溝通的第一管道，當顧客點進網站的第一眼，網頁呈現乾淨舒適，可以快速獲得自己想要的資訊，對於品牌將會大大加分。反之，雜亂的資訊、不和諧的設計、難以理解的路徑規劃，都會使品牌價值在消費者心中留下不好的印象。除了實用性，美感對於觀看者整體的體驗非常重要，也可以讓消費者塑造不同的企業形象，甚至進一步進行分享。因此，具備基本CSS可以讓頁面有一個簡單的呈現樣貌，但提升CSS能力，增加頁面美化技巧，讓網頁呈現可以提升到另一個層次。
好，還可以更好！提升設計技巧，讓頁面與閱讀者產生動態互動
理解基本網頁前端設計後，透過學習讓你加深網站架購能力、提升美感呈現，以及增加與閱讀者間的動態互動。除了可以優化頁面整體呈現外，也可以讓消費者停留時間拉長，增加溝通時間、機會。有鑑於此，天地人規劃出「Level UP 網站前端設計：HTML5 + CSS3 + JavaScript 實務進階班」。課程涵蓋八大章節：（1）課程簡介；（2）進階HTML；（3）進階CSS；（4）JavaScript－基本語法；（5）JavaScript－型別、變數與運算子；（6）JavaScript－物件與函數；（7）JavaScript－事件處理與運用實例；（8）JavaScript－檢驗知名的框架與資料庫。本課程，協助你更深入理解網頁前端的設計技能，有效提升企業網站頁面的整體呈現效果。
天地人學堂 LINE官方帳號
線上諮詢
課程的三大重點
掌握進階HTML技巧，加速網站建構能力
簡易的HTML技巧可以讓你快速建立起一個網站，但如何具備更強大的功能來支撐未來會使用到的資源。業師將從網站建立的進階知識與觀念介紹，其中包含：標籤屬性的應用、建立超連結、進階的表格設定與影音多媒體的解碼和嵌入。
學會進階CSS使用，有效提升網頁整體視覺呈現
想要展現不同其他頁面的呈現樣貌嗎？課程中，業師將帶你學會更進階的CSS3專業技巧，除了進階設定外，你還可以瞭解各式不同的選擇器類型，以及2D與3D不同的動態呈現效果，大大提升頁面的豐富度。
深入瞭解JavaScript，全面優化網頁動態呈現效果
游標點選時的放大、縮小，卷軸滾動時所產生的動態效果，都能夠讓消費者產生不一樣的感受。課程中，你將學會JavaScript的使用操作，透過基本語法、函數物件的設定、事件處理的實際範例展示，讓你更快掌握JavaScript的關鍵能力。
課程大綱
初探 JavaScript
01-01 回顧 HTML 和 CSS
01-01-01 定義內容的 HTML
01-01-02 定義樣式的 CSS
01-02 你家牛排品項變多了，需要一個品項類別選單
01-02-01 建立類別選單
01-02-01-01 加上共用的 class name
01-02-01-02 window.onload
01-02-01-03 用 JavaScript 存取 DOM element
01-02-01-03-01 方法一、document.getElementsByClassName
01-02-01-03-02 方法二、document.querySelectorAll
01-02-02 控制品項內容的函式
01-02-02-01 方法一、利用 style.display
01-02-02-02 方法二、建立 class name 並利用 className
01-02-03 綁定事件與函式
01-02-03-01 選擇事件
01-02-03-01-01 方法一、採用 mouseover 事件
01-02-03-01-02 方法二、採用 click 事件
01-02-03-02 決定綁定方式
01-02-03-02-01 方法一、加入 element attribute
01-02-03-02-02 方法二、onclick
01-02-03-02-03 方法三、addEventListener
01-02-04 利用迴圈減少重複的程式碼
01-02-04-01 方法一、利用 while
01-02-04-02 方法二、利用 for
JavaScript 的基礎知識
02-01 開發者工具
02-02 語法錯誤
02-02-01 TypeError: menuItem.addEventListener is not a function
02-02-02 如何看懂錯誤訊息
02-03 變數、常數與資料型態
02-03-01 宣告與更新變數
02-03-01-01 var 與 let
02-03-01-02 更新變數
02-03-02 宣告常數 const
02-03-03 資料型態
02-03-03-01 數字 Number
02-03-03-02 字串 String
02-03-03-03 布林值 Boolean
02-03-03-04 陣列 Array
02-03-03-05 物件 Object
02-04 數學與其運算子
02-04-01 算術運算子
02-04-02 遞增與遞減運算子
02-04-03 賦值運算子
02-04-04 比較運算子
02-05 處理文字
02-05-01 單引號與雙引號
02-05-02 串接字串與模板字串
02-05-03 常用的字串屬性與函式
02-05-03-01 String.prototype.length 屬性
02-05-03-02 提取特定字元與索引
02-05-03-02-01 String.prototype[index]
02-05-03-02-02 String.prototype.charAt()
02-05-03-02-03 String.prototype.at()
02-05-03-03 搜尋字串中是否涵蓋子字串
02-05-03-03-01 必學函式
02-05-03-03-01-01 String.prototype.indexOf()
02-05-03-03-01-02 String.prototype.includes()
02-05-03-03-02 進階函式
02-05-03-03-02-01 String.prototype.search()
02-05-03-03-02-02 RegExp.prototype.test()
02-05-03-03-02-03 String.prototype.match()
02-05-03-03-02-04 RegExp.prototype.exec()
02-05-03-04 轉換成大小寫
02-05-03-04-01 String.prototoype.toLowerCase()
02-05-03-04-02 String.prototoype.toUpperCase()
02-05-03-05 操作部分字串內容
02-05-03-05-01 替換內容
02-05-03-05-01-01 String.prototype.replace()
02-05-03-05-01-02 String.prototype.replaceAll()
02-05-03-05-01-03 String.prototype.replace() + Regex =
String.prototype.replaceAll()
02-05-03-05-02 合併內容
02-05-03-05-02-01 String.prototype.concat()
02-05-03-05-02-02 String.prototype.join()
02-05-03-05-03 擷取子字串
02-05-03-05-03-01 String.prototype.slice()
02-05-03-05-03-02 String.prototype.substring()
02-06 運用陣列
02-06-01 建立陣列
02-06-02 替換陣列的內容
02-06-03 常用的陣列屬性與函式
02-06-03-01 Array.prototype.length
02-06-03-02 搜尋陣列中是否包含某一物件
02-06-03-02-01 必學函式
02-06-03-02-01-01 Array.prototype.indexOf()
02-06-03-02-01-02 Array.prototype.includes()
02-06-03-02-01-03 Array.prototype.find()
02-06-03-02-02進階函式
02-06-03-02-02-01 Array.prototype.some()
02-06-03-02-02-02 Array.prototype.every()
02-06-03-02-02-03 Array.prototype.forEach()
02-06-03-03字串與字串陣列互相轉換
02-06-03-03-01 Array.prototype.join()
02-06-03-03-02 String.prototype.split()
02-06-03-04操作尾部內容
02-06-03-04-01 Array.prototype.push()
02-06-03-04-02 Array.prototype.pop()
02-06-03-05操作頭部內容
02-06-03-05-01 Array.prototype.unshift()
02-06-03-05-02 Array.prototype.shift()
02-06-03-06操作陣列
02-06-03-06-01 Array.prototype.reserse()
02-06-03-06-02 Array.prototype.sort()
02-06-03-06-03 Array.prototype.filter()
02-06-03-06-04 Array.prototype.concat()
02-06-03-06-05 Array.prototype.map()
02-06-03-06-06 Array.prototype.reduce()
02-06-03-06-07 Array.prototype.slice()
02-06-03-06-08 Array.prototype.splice()
02-07常用的撰寫要素
02-07-01判斷式
02-07-01-01 if/else if/else
02-07-01-02 switch/case/default
02-07-02迴圈
02-07-02-01 for
02-07-02-02 while 和 do/while
02-07-03函式
02-07-03-01 自定義函式
02-07-03-02 調用函式
02-07-03-03 匿名函式
02-07-03-04 參數
02-07-03-05 作用域與變數
02-07-03-06 回傳值
菜單的新功能
03-01 獨立管理的產品資料
03-01-01 建立設定資料
03-01-02 動態繪製品項
03-01-03 建立 function render(items) 函式
03-02 動態品項價格排序
03-02-01 建立排序設定資料
03-02-02 建立 function sort() 函式
03-02-03 結合 sort() 與 render() 函式
03-02-04 綁定事件與函式
03-03 全品項名稱搜尋
03-03-01 建立 function filter() 函式
03-03-02 結合 filter(), sort(), 與 render() 函式
03-03-03 綁定事件與函式
課程學習前須知
- 實際授課內容、順序、師資或有調整，依課程現場為準。
加入我們一起學習 網站前端設計！
授課業師
天地人文創特約講師
課程資訊
#線上課程
。上課模式：課程的錄製回放影片
。觀看方式：完成購課訂單後，於2023/02/01統一寄送觀看通知以Email寄送觀看通知信件，信件內附上影片專屬連結、觀看密碼。如未收到觀看通知信件，請務必與我們聯繫。
。觀看時間：觀看期14天起算日，為觀看通知信件寄送日隔日起算，為期14日觀看權。
課程售票
一般推廣票：每人 4,650 元（原價 7,200 元）
雙人票：每人 3,800 元（原價 超優惠 5.3折）
VIP票券兌換：每人扣 1 張VIP票券
課程參與注意事項
報名前敬請詳閱 天地人活動報名延／轉／退規則，報名者視為已確認並同意規則。
Q1：【14天隨選方案】是什麼？
A1：本方案為專業師資，過去特定期別之「線上直播課程」同步錄製影片，因收到廣大學員建議，對特定課題或特定業師教學有學習需求，但受限上課時間無法配合，而錯失學習機會，故特別將特定「線上直播課程」同步錄製，成為【14天隨選方案】。本方案購買後提供14天內（不限時間、次數、載具）隨時於有效期內點選觀看。
Q2：請問觀看課程對電腦配備、網路的要求？
A2：【14天隨選方案】需要穩定的網路環境，建議使用室內WIFI連線會比手機網路穩定；最佳使用環境為桌上型電腦或平板，搭配手機互動，學習效果更好。使用筆電時，請確認筆電為「最佳性能模式」。
Q3：請問【14天隨選方案】報名付款後，該如何觀看課程影片？
A3：
完成購課後，我們將於 2023/02/01統一以Email寄送觀看通知信件，信件內會說明課程登入方式，並附上影片專屬連結、觀看密碼。如未收到觀看通知信件，請務必與我們聯繫。
觀看期14天起算日，為觀看通知信件寄送日隔日起算，為期14日觀看權。
備註：線上課程期間，受智慧財產權之保護，禁止側錄，以及與其他人共享帳戶觀看，為提高您的觀課品質，線上課程建議於不被打擾的環境中觀看
Q4：購買【14天隨選方案】發票該如何索取？
A4：我們將在觀看通知同日，以Email寄送發票電子檔，如需索取紙本發票，請來訊提供收件地址；若需統編，請務必於報名訂單特別備註「公司統一編號」
Q5：【14天隨選方案】是否有提供講義？
A5：【14天隨選方案】不提供講義電子檔或紙本講義。
Q6：【14天隨選方案】和【線上直播課程】有什麼不同？
A6：【14天隨選方案】不受固定開課日期約束，可隨時購買課程，並於購課完成日的下個工作日開始觀看課程。
Q7：【14天隨選方案】和預錄課程有什麼不同？
A7：【14天隨選方案】為過去特定期別之「線上直播課程」同步錄製影片，非獨立安排腳本錄製之預錄課程，課程影片內將包含「線上直播課程」當期課程中，師資與學員互動之內容。
Q8：【14天隨選方案】如果需求變更，可以取消購買嗎？
Ａ8：本方案購買後，如已寄發觀看通知信件，將無法取消購買及申請退費。
Q9：我是第一次購買者，擔心無法順利觀看影片，可以提前登入或測試嗎？
A9：建議購買前，請先利用Vimeo測試，以確保影片及音訊皆無問題，另外建議利用網路連線品質進行網路連線品質測試。
相關提醒：
• 下載速度（Download）須高於8Mbps，上傳速度（Upload）須高於1Mbps。
• 觀看時，如畫面出現待轉之圈圈，請自行重整更新頁面後，即可觀看。
【聯繫我們】
• 線上諮詢：Line ID：@tiandiren / FB：天地人學堂 / 官網：右下角客服專員
• 電話諮詢：02-2396-0514（週一至週五09:00 ~ 18:00）
• 合作方案請洽：service@tiandiren.tw
• 若您是企業用戶，推薦您更具吸引力的【企業VIP會員專案】，讓培訓預算使用更具彈性有效率
• 歡迎您加入【天地人學堂專屬line@】，輸入課程編碼，24HRS自動查詢每月課程資訊
天地人文創
天地人學堂
