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-檢驗知名的框架與資料庫。本課程,協助你更深入理解網頁前端的設計技能,有效提升企業網站頁面的整體呈現效果。
課程的三大重點
掌握進階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天隨選方案】如果需求變更,可以取消購買嗎?
A8:本方案購買後,如已寄發觀看通知信件,將無法取消購買及申請退費。
Q9:我是第一次購買者,擔心無法順利觀看影片,可以提前登入或測試嗎?
A9:建議購買前,請先利用Vimeo測試,以確保影片及音訊皆無問題,另外建議利用網路連線品質進行網路連線品質測試。
相關提醒:
• 下載速度(Download)須高於8Mbps,上傳速度(Upload)須高於1Mbps。
• 觀看時,如畫面出現待轉之圈圈,請自行重整更新頁面後,即可觀看。
【聯繫我們】
• 線上諮詢:Line ID:@tiandiren / FB:天地人學堂 / 官網:右下角客服專員
• 電話諮詢:02-2396-0514(週一至週五09:00 ~ 18:00)
• 合作方案請洽:service@tiandiren.tw
• 若您是企業用戶,推薦您更具吸引力的【企業VIP會員專案】,讓培訓預算使用更具彈性有效率
• 歡迎您加入【天地人學堂專屬line@】,輸入課程編碼,24HRS自動查詢每月課程資訊
天地人文創
天地人學堂