外行人如何瞭解網站前端設計?
HTML5 + CSS3 新手入門攻略班
如何做好「網站前端設計」,維護企業品牌門戶?
何謂「前端」?網站前端代表著品牌頁面與瀏覽者打交道的重要樞紐,隨著網路發展與普及,消費者大多數的資訊都是透過網站頁面接觸到的,也因此不論哪種行業,呈現一個好的網站頁面能為品牌形象大大加分。網站的前端設計不僅要掌握基本的Web技術,同時要能夠瞭解如何優化搜尋引擎(SEO)、改善網站性能等基礎架構,並學習如何活用各種工具進行輔助開發。作為非工程體系出身的你,或許聽說過HTML、CSS、JavaScript,但你真的瞭解它們的特性與存在原因嗎?
網站作為品牌資產,全面解析HTML與CSS的製作架構
網站開發主要分為前端(客戶端)與後端(伺服器端)兩個部分,網站後端主要是與資料庫進行交互的方式,需考量如何實現功能、平台的性能與穩定性、數據的存取等。而網站前端則是在頁面應用中瀏覽者看得到、碰得到的功能皆屬,其中囊括頁面結構、網站外觀視覺、互動設計、用戶研究,以及和伺服器通信等。前端設計的核心價值在於實現用戶體驗,此課程將幫助新手學習如何自行建立網站,並從瞭解專業用語、環境架設、網頁結構說明、排版技巧到實務操作,逐步帶領你從無到有,製作一個簡易網頁。
專家帶你從頭開始架設專屬網站,優化頁面呈現質感
網站前端設計的市場需求廣泛,透過學習此網站前端設計可以幫助你釐清網站整體架構、優化搜尋引擎(SEO)、網站加載時間、用戶體驗等面向。有鑑於此,天地人文創旗下天地人學堂特地規劃出「外行人如何瞭解網站前端設計?HTML5 + CSS3 新手入門攻略班」,邀請到允諾整合行銷執行長親授課程,以多年扎實的實務經驗由淺入深帶領學員釐清網站架設技巧,全面剖析網站前端設計的四大核心技能:(1)前端初體驗:認識網頁設計與資源;(2)解析基本語法:HTML5與CSS3;(3)CSS多欄排版實務技巧;(4)實務操作演練&案例說明。透過這門課程,協助你瞭解建置網站的實戰技巧與Know-how。
天地人學堂
LINE官方帳號
課程諮詢
課程評價
點選瞭解此課程授課實況、學員反應與推薦理由等
HTML5 + CSS3 新手入門
評價內容|作為非工程體系出身的你,對於「 網站前端 」或許有聽過HTML、CSS、JavaScript,但你真的瞭解它們的特性與存在原因嗎?網站前端,代表著品牌頁面與瀏覽者打交道的重要樞紐,隨著網路發展與普及,消費者大多數的資訊都是透過網站頁面接觸到的,也因此不論哪種行業,呈現一個好的網站頁面能為品牌形象大大加分。(see more…)
課程的三大重點
從零到一,全面剖析網站前端設計架構
業師將從建立網站的基本知識與觀念介紹,其中包含–瞭解何謂「前端」、網站架設基礎與開發工具、前端網站起手式、認識HTML、網路教學資源等。協助零基礎的新手完整瞭解網頁設計的緣由與架構。
掌握前端技術HTML5+CSS3,建置專業專屬網站
網站前端設計主要包含HTML、CSS、JavaScript,此課程將以HTML5和CSS3為主要教學範圍,並透過邊教學邊實作的形式進行,其中囊括–HTML5語意化標籤與網頁結構、CSS簡介與盒子模型、CSS常用指令、float與多欄排版、導覽列設計等。
由淺入深紮穩前端設計基本功,業師手把手教你架設網站
課堂中將帶領學員瞭解前端程式的應用面,讓學員寫出一個簡易網頁(起手式、HTML架構規劃、CSS排版),教學流程仿照業界案例進行,學習後可快速與業界接軌。
課程大綱
全球資訊網(World Wide Web) 的語言:認識 HTML
01-01 想一想,你到維基百科查資料的時候
01-01-01 瀏覽器幫你做了什麼?
01-01-02 伺服器又能做些什麼?
01-01-03 HTML 的樣貌
01-01-04 <!DOCTYPE html>、<html…>、<head>、<body>這些標記說明
01-02 實例操作:從無開始,建立「你家牛排」網頁
01-02-01 「你家牛排」背景介紹,瞭解網站內容需求
01-02-02 開啟文字編輯器(VSCode),建立一個HTML檔案
01-02-03 檔案命名儲存
01-02-04 操作:輸入指令
01-02-05 Demo:用你喜歡的瀏覽器打開檔案
01-03 幫「你家牛排」網頁上點裝飾
01-03-01 認識樣式標記
01-03-02 加入樣式標記
01-03-03 樣式調整
01-03-04 樣品Demo
比 Text 更豐富的 HyperText
02-01 在網站中加入圖片
02-01-01 圖片檔案重新命名
02-01-02 把圖片檔案路徑
02-01-03 用編輯器打開網頁檔案
02-01-04 使用 <img> 加入這些圖片
02-02加入更多資訊,建立額外的連結葉面
02-02-01 建立店家介紹的網頁檔案 about.html
02-02-02 放置在和網頁一樣的資料夾
02-02-03 編輯 about.html
02-02-04 樣品Demo
02-03 怎麼讓看到菜單的客人也能看到店家介紹?
02-03-01 再次編輯 index.html
02-03-02 加入超連結元素 <a>
02-03-03 樣品Demo
02-03-04 試一下,怎麼將 about-us.html 的「菜單」按鈕也加上連結
02-04 規劃這些路徑 (連結)
02-04-01 圖片太多了,放進新的資料夾吧
02-04-02 修改這些圖片在 menu.html 裡面的位置
02-04-03 .和 ..
02-04-04 相對性的小小測驗
建構區塊
03-01 餐廳的餐點品項越來越多
03-01-01 把每一項餐點的距離都分開一點
03-01-02 加入介紹的文字
03-01-03 調整標題、圖片、價格的位置與距離
03-01-04 認識區塊元素與行內元素
03-02 越來越複雜的 menu.html
03-02-01 基本原則:標記名稱必須合法
03-02-02 原則一:檢查是否有結束標記
03-02-03 原則二:檢查標記是否成對
03-02-04 原則三:區塊元素內可以有區塊元素、行內元素或文字
03-02-05 原則四:行內元素只可包含行內元素或文字
網頁上看不見、藏在 head 中,卻很有用的標記
04-01 <title>04-02 <link>
04-02-01 <link rel=”icon” href=”…”>
04-02-02 <link rel=”stylesheet” href=”…”>
04-02-03 <link rel=”alternate” hreflang=”zh” href=”…”>
04-02-04 <link rel=”canonical” href=”…”>
04-03<meta> 基礎標記
04-03-01 <meta charset=”UTF-8”>
04-03-02 <meta name=”description” content=”…”>
04-03-03 <meta name=”keywords” content”…, …”>
04-03-04 <meta name=”viewport” content=”…”>
04-04 <meta property=”og:xxx”>
04-04-01 <meta property=”og:title” content=”…”>
04-04-02 <meta property=”og:description” content=”…”>
04-04-03 <meta property=”og:type” content=”…”>
04-04-04 <meta property=”og:image” content=”…”>
和 SEO 有關的細節
05-01 告訴 Google 怎麼檢索你的網站
05-01-01 robots.txt
05-01-02 sitemap.xml
05-01-03 google search console
05-02 <body> 中的標記
05-02-01 各種標題配置
05-02-02 圖片的替代文字
05-02-03 有意義的連結
05-03 <head> 中的標記
05-03-01 <title>
05-03-02 <meta name=”description” content=”…”>
05-03-03 <link rel=”alternate” hreflang=”zh” href=”…”>
05-03-04 <link rel=”canonical” href=”…”>
與前端工程師溝通的小技巧
06-01 如果你想要加入一些套件
06-02 如果文案需要修改
06-03 如果想要修改一些版面的設計
06-04 如果要討論用戶行為
課程學習前須知
- 此課程建議學員自行攜帶電腦於課程中一同操作、學習,現場無提供。
- 實際授課內容、順序、師資或有調整,依課程現場為準。
- 因響應環保,現場不提供紙杯,請自備環保杯
加入我們一起學習網站前端設計要領!
業師資訊
高嘉祥|緯創軟體 Wistron ITS 資深軟體工程師
業師多年深耕,具有 10 年的網頁軟體開發經驗,現任緯創軟體資深軟體工程師。專精於網頁前端基礎技術,如HTML、CSS、JavaScript、TypeScript;以及熱門前端開framework ,ReactJS、SASS、Material UI 等。除專業技術外,在 Google Tag Manager 也有相當的實戰經驗。
課程資訊
課程名稱
外行人如何瞭解網站前端設計?HTML5 + CSS3 新手入門攻略班(C1295)
課程各期時間與上課模式
#隨選方案
。上課模式:第03期課程的錄製回放影片(詳閱下方說明)
。觀看方式:完成購課訂單後,於2023/02/01統一寄送觀看通知以Email寄送觀看通知信件,信件內附上影片專屬連結、觀看密碼。如未收到觀看通知信件,請務必與我們聯繫。
。觀看時間:觀看通知Email寄送隔日為起算第一天,依購買天數,計算觀看起迄日。
課程售票
一般推廣票:每人 4,650 元(原價 7,200 元)
雙人票:每人 3,800 元(原價 超優惠 5.3折)
VIP票券兌換:每人扣 1 張VIP票券 ( VIP申購方案 )
報名前敬請詳閱 天地人活動報名延/轉/退規則,報名者視為已確認並同意規則。
Q1:【隨選方案】是什麼?
A1:本方案為專業師資,過去特定期別之「線上直播課程」同步錄製影片,因收到廣大學員建議,對特定課題或特定業師教學有學習需求,但受限上課時間無法配合,而錯失學習機會,故特別將特定「線上直播課程」同步錄製,成為【隨選方案】。本方案購買後,依購買天數,提供(不限時間、次數、載具)隨時於有效期內點選觀看。
Q2:請問觀看課程對電腦配備、網路的要求?
A2:【隨選方案】需要穩定的網路環境,建議使用室內WIFI連線會比手機網路穩定;最佳使用環境為桌上型電腦或平板,搭配手機互動,學習效果更好。使用筆電時,請確認筆電為「最佳性能模式」。
Q3:請問【隨選方案】報名付款後,該如何觀看課程影片?
A3:
完成購課後,我們將於 2023/02/01統一以Email寄送觀看通知信件,信件內會說明課程登入方式,並附上影片專屬連結、觀看密碼。如未收到觀看通知信件,請務必與我們聯繫。
觀看期起算日,為觀看通知信件寄送日隔日起算第一天。
備註:線上課程期間,受智慧財產權之保護,禁止側錄,以及與其他人共享帳戶觀看,為提高您的觀課品質,線上課程建議於不被打擾的環境中觀看
Q4:購買【隨選方案】發票該如何索取?
A4:我們將在觀看通知同日,以Email寄送發票電子檔,如需索取紙本發票,請來訊提供收件地址;若需統編,請務必於報名訂單特別備註「公司統一編號」
Q5:【隨選方案】是否有提供講義?
A5:【隨選方案】不提供講義電子檔或紙本講義。
Q6:【隨選方案】和【線上直播課程】有什麼不同?
A6:【隨選方案】不受固定開課日期約束,可隨時購買課程,並於購課完成日的下個工作日開始觀看課程。
Q7:【隨選方案】和預錄課程有什麼不同?
A7:【隨選方案】為過去特定期別之「線上直播課程」同步錄製影片,非獨立安排腳本錄製之預錄課程,課程影片內將包含「線上直播課程」當期課程中,師資與學員互動之內容。
Q8:【隨選方案】如果需求變更,可以取消購買嗎?
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自動查詢每月課程資訊
天地人文創
天地人學堂