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 綁定事件與函式
課程學習前須知
- 實際授課內容、順序、師資或有調整,依課程現場為準。
加入我們一起學習 網站前端設計!
授課業師
高嘉祥|緯創軟體 Wistron ITS 高級軟體開發工程師
業師多年深耕,具有 10 年的網頁軟體開發經驗,現任緯創軟體資深軟體工程師。專精於網頁前端基礎技術,如HTML、CSS、JavaScript、TypeScript;以及熱門前端開framework ,ReactJS、SASS、Material UI 等。除專業技術外,在 Google Tag Manager 也有相當的實戰經驗。
上課模式
課程名稱
Level UP 網站前端設計:HTML5 + CSS3 + JavaScript 實務進階班(C1398)
課程各期時間與上課模式
#線上課程
。上課模式:第01期課程的錄製影片
。觀看方式:訂單隔日工作日寄送觀看Email(信內附上影片連結,未收到Email,請務必與我們聯繫)
。觀看時間:依購買天數方案,自「觀看通知Email」寄送日起算第一天。
課程售票
VIP票券兌換:每人扣1張VIP票券 ( VIP申購方案 )