3 天動手寫網頁實戰系列
設計 程式 網頁設計 網頁設計

3 天動手寫網頁實戰系列

0 (0)
Taker Wu
Taker Wu
講師介紹

這堂課我會學到

  • 理解切版流程看到設計圖就能規劃架構並且做出真實的網頁
  • 設計師可以做出符合網頁架構的設計
  • 釐清常用的 CSS 概念及運作方式讓你恍然大悟 —「喔喔,原來是這樣子!」

課前資訊

學員上課前需具備哪些軟、硬體設備或常識

一台可以上網的電腦
一顆誠摯的心

課程適合對象

新手:從 HTML、CSS 基本的介紹、架構說明、網頁分析、工具使用、到實戰練習,一步步帶領你快速,並不慌不忙的學會網頁的製作
想轉職的朋友:如果你沒做過相關工作,遇到的問題跟新手一樣,放心去學吧 :)
設計師:能了解什麼是網頁設計,富有網頁架構的思考,做出適合網頁的設計,不需要再跟工程師打架

課程大綱

49
09:00:53
  • 課程介紹
     
     
    • 課程介紹短片
       
  • 網站的骨架 HTML 基礎
    5
    33:37
    • intro
      01:03
    • HTML structure + what is tag
      04:03
    • common tags
      11:24
    • id _ class
      11:30
    • DOM tree
      05:37
  • CSS 選擇器 (selector) 選擇要改變【誰】的長相
    2
    19:36
    • what is CSS + CSS selector
      14:19
    • CSS selector practice
      05:17
  • CSS layout 排版工程學
    3
    26:50
    • display
      03:24
    • position
      18:50
    • float
      04:36
  • CSS 細節設定
    3
    27:38
    • box model
      10:04
    • background
      08:20
    • font + others
      09:14
  • CSS 權重
    1
    07:38
    • CSS specificity
      07:38
  • 【實戰練習】「設計圖」大解析
    2
    44:57
    • IDE
      22:26
    • wireframe
      22:31
  • 【實戰練習】使用 HTML 製作網站架構
    8
    01:00:18
    • init
      05:04
    • header _ nav
      14:07
    • content _ slider _ category
      08:17
    • content _ recent-product _ event
      07:21
    • content _ event _ feature
      07:01
    • content _ outlets
      07:52
    • footer
      05:26
    • result + homework
      05:10
  • 【實戰練習】CSS 魔法替架構披上美麗外皮
    10
    01:48:17
    • init
      11:59
    • container _ header
      11:13
    • nav details + clearfix
      17:51
    • #header review
      03:40
    • slider _ category
      08:25
    • category + review
      14:52
    • recent product + Grid alignment
      14:48
    • product details
      07:22
    • product cover info structure + hover
      15:23
    • recent product review + homework
      02:44
  • 【實戰練習】CSS 魔法 #2 將簡陋架構轉變為美麗網頁
    8
    01:34:06
    • CSS Units
      23:31
    • event
      14:24
    • feature
      11:23
    • buttons + margin collapse
      10:12
    • feature _ outlets
      11:30
    • footer
      16:03
    • go top + review
      06:44
    • after practice
      00:19
  • 外傳【切版秘笈】
    7
    01:57:56
    • layout center
      16:49
    • grid cols
      18:04
    • nav
      30:15
    • positioning
      12:39
    • img
      12:47
    • cover info
      25:30
    • after course
      01:52

課程介紹

本課程將手把手帶你 3 天學會網頁基礎。

為什麼要選本課程

3 天學會網頁基礎,許多人覺得不可能也包含我自己,因為我自己是過來人花了好多年時間才有比較紮實的基礎,學很久基礎很差的人也比比皆是;為什麼會需要那麼久?因為網頁的東西是零散的,沒有人把基礎整理好給你真正常用的東西、這些東西的用法、觀念等等一次把它們說清楚。

在整理自己的知識並不斷修正之後,發現學生在學習後的第二天、第三天都能夠自己把一個完整網頁做出來,不一定很完美、可能很多小缺陷,但它們已經知道該怎麼做了,3 天學會網頁基礎,嗯,還真的可以!

滿滿實戰練習

實戰練習前的準備安裝好軟體以及最重要的【分析網站的架構】。

透過分析逐一把它轉化成 HTML 建構網站的架構。

HTML 只有架構與內容,看起來就像不起眼的文章,透過 CSS 慢慢把畫面變成我們想要的樣子。

做 CSS 設定是很花時間的,上半場休息過後,讓我們繼續把剩下的網頁完成。

經過實戰的練習與紮實的架構分析、建構,並且把畫面做出來,我們會經歷到許多真實世界才會遇到的問題與作法。

  • 【實戰練習】「設計圖」大解析
  • 【實戰練習】使用 HTML 製作網站架構
  • 【實戰練習】CSS 魔法-替架構披上美麗外皮
  • 【實戰練習】CSS 魔法-將簡陋架構轉變為美麗網頁

誰適合本課程

Taker 老師把常見的排版方式與製作方法整理出來,再一次的進行討論與練習,讓你可以更熟悉如何對平面設計圖做網頁的版面規劃,讓新手可以快速上手實際應用。如果你是設計師,學完切版秘笈,應該再也不會跟工程師雞同鴨講,從此溝通一路順暢!Junior 網頁工程師們更應該好好學習這個章節,因為你終於可以回家吃晚餐了。

課程討論與問答

  • 要先登入才能做留言

課程評語


0 ()
觀看期限 終身

授課講師Taker Wu
課程時數9小時
更新日期2017-08-14


NT$3,600
NT$2,990

購買課程
我們的退費政策

其他人也看了

更多熱門課程