知名線上課程 3天！動手寫網頁 (實戰系列)(含教材) 講師:taker.wu 影音教學 中文發音 繁體中文版(DVD版)
HTML&CSS不難，只要有心人人都可以寫網頁。Taker老師讓你只要花三天的時間就能學會網頁架構並且實作出一個接案等級的網頁！
網站的骨架：HTML 基礎
課前閒聊
【網頁架構】到底是什麼？
【HTML 標籤】(tag) 是什麼？
【常用標籤】與他們的用途
替【架構】取名字：如何使用【id】與【class】
HTML 其實是一種【樹狀結構】嗯？可以吃嗎？
CSS 選擇器 (selector)：選擇要改變【誰】的長相
CSS 的寫法
【CSS 選擇器】
練習：一起來選選看吧！
CSS layout：排版工程學
display：顯示的特性
position：相對位置屬性
float & clear：文繞圖與排版
CSS 細節設定
box model
background：背景設定
font 相關：文字相關設定
其他
CSS 權重
【權重】觀念與調整方法
【實戰練習】「設計圖」大解析
行前準備：IDE 工具
Wireframe：手繪分析稿，讓架構一清二楚
【實戰練習】使用 HTML 製作網站架構
初始設定
header > nav 與假資料們
content > slider / category / Grid 概念 / HTML 特殊字元
content > recent-product / event / 假字
content > event / feature / 假按鈕
content > outlets / email 連結 / 新分頁連結
footer > 內容 / go top
HTML 架構完成後的長相
額外練習
【實戰練習】CSS 魔法：替架構披上美麗外皮
初始設定：串連 HTML 與 CSS 檔案
container / header / 置中的辦法 / 用 float 來排版
nav 的諸多調整，與 UX 細節
關於 clearfix
#header 回顧
slider / category / Grid 的實作方法 / 圖片服貼容器 / 文字的設定
slider 與 category 回顧
recent product / 標題
Grid 左右邊界 對齊問題
product 的細節設定
大解析：滑鼠移上 product 後顯示資訊的架構
CSS 3：滑鼠移上 product 後的動態效果
recent product 回顧
額外練習
【實戰練習】CSS 魔法 #2：將簡陋架構，轉變為美麗網頁
休息一下：談談 CSS 的單位
繼續練習：event / 背景圖片設定 / 假按鈕外觀
feature
按鈕的多樣性
margin 崩塌 (margin collapse)
feature / outlets / 分割線
footer / logo 的出格 / 第三種置中 / 用 CSS 做出圓形
go top 回到頂端按鈕
整體回顧
訓練總結
外傳【切版秘笈】：常見的排版方式與製作方法
基礎切版架構：版面置中
兩欄式架構、三欄式架構
常見版面介紹：nav
破格設計
特殊版面介紹：圖片常見的問題與解法
cover info：覆蓋在圖片上的資訊
下一步？
|
|
專業知識教學
