課程簡介
網頁前端設計在現代越來越重要，是許多程式設計師的第一門課程、青壯年轉換職業跑道的門路、平面設計師的必修。此課程會一步一步帶者你走，讓你能夠從頭開始架設屬於你自己的網頁!你不需要有任何的程式設計經驗，也不需要有相關的背景知識。開始學習網頁前端技術，讓你學會一技之長，能夠開啟網頁技術的大門。
在這堂課程結束之後，你將能夠使用:
1 前端網頁技術開發
2 VS Code 操作技巧以及實用熱門Extension
3 HTML5 – HTML5 – 超文件標記語言
4 CSS3 – CSS3 – 階層式樣式表
5 JavaScript – 網頁前端後端程式語言
6 了解DOM, Hoisting, Scope, Closure, Prototype Inheritance, execution context, callbacks, this keyword, bind call apply functions等進階JS觀念與運用
7 Bootstrap
8 Git and GitHub, Source Tree 版本控制
9 Figma – UI/UX設計工具
10 打造有形網站，架構出自己的現代風格網頁
11 將網站架構到雲端主機，讓大家看到你的作品
12 Flexbox開發技術，讓你做RWD事半功倍
13 學習進階前端開發技術，解決你對前端網頁排版的諸多疑惑
https://softnshare.com/html5-css3-z/
css排版觀念 在 Re: [問題] div排版入門書? - 看板Web_Design - 批踢踢實業坊 的推薦與評價
※ 引述《snownow (雪紋)》之銘言：
: 我是做平面設計的....
: 最近在做公司網頁，我完全沒有css或html的經驗，頂多只會dw丟丟排排而已
: 基本上我html能大致看懂、css會一些基本的外部(大概就只有定body的文字色彩那類的)
: 比較難一點的css多半是先去找範例素材站看，複製過來修改，需要套用在整個網站的就
: 刪掉<style>標籤然後丟進外部檔，不用的就亂扔在<body>之間，所以最後網頁跟外部都
: 一團亂
: 原本我也想捨棄ps切圖跟table排版法，改用div試排
: 但是今天浪費一整天以後完全放棄Orz
: div的排法沒辦法在dw用直覺的圖像方式去做(例如說大小、位置)，造成我很大的障礙
: 尤其是做好背景底圖分塊以後，想在上面加上另外一個文字區塊的時候真的快搞死人了...
: 當然最後整個css外部都被我寫的亂七八糟...Orz
: 這次我做網站，因為時間的關係我大概還是會用table排法，
: 但是我很想學學怎麼寫完整的外部檔...
: 請問有沒有推薦的書或是網站是介紹新手入門div排版的呢？
其實，我本身就是從這裡過來的
甚至比您更誇張
我初學自frontpage 97，1997年
愚蠢的我一直想統一每台電腦的字體大小
於是每一行每一段都得按右鍵去裡面設定字體
雖然達成了目的，但也實在是無知的決定
Photoshop 5.5 第一次出現了針對網路的切割工具與 save for web，1999年
我連table要怎麼寫都不知道就做了一大堆edm
當時不懂事很自豪，可最佳化圖檔...就非常暢秋了
後來也經過泡沫.com時期，學會了DW，2000年
做過soho的人一定知道
一個禮拜要給客戶改完整個版
過一個禮拜，又要改版是很稀鬆平常的事
所以那時DW也算是我吃飯的主要工具
慢慢的，我發現DW可以改成一邊用編輯畫面做事，另一邊可以看html code的變化
終於開始了解table的寫法，以及其他html element的功用，那時2002年了
Phoenix也出了，我竟然才剛學會table排版，並且運用自如XDDD
(Phoenix就是firefox的前身，後來有很長一段時間都用firefox+firebug練css）
一直到2003年，開始blog之後，才大膽試著用css去編排自己的template
其中的痛苦，我最能體會，因為我也是一個完完全全的table排版人
光是要做兩欄版面，就已經非常頭痛...
但是在2009年的今天，我變成了跨平台 css optimization 顧問
我想整理一下身為設計師，在學習中，可能比較痛苦的點：
1. WYSIWYG
所見即所得，css layout 在於自己的環境裡可能沒問題
到別人的環境又不是那麼一回事，所以有人說：
WYSIWGK (https://hlb.yichi.org/blog/2008/04/25/207)
所見天曉得
不談技術優缺的話，WYSIWYG這一點其實用table排版比較容易做到
一下子要設計師拋棄這個武器，說實在，不容易！
另外一個點，是table比較容易做出視覺化的編輯器
然而css編輯器進展到目前為止，仍不夠容易上手
2. 知道工具但不知道原理
設計師不知道工具用了什麼原理，達成拼合的效果。
所以有許多設計師知道自己用的工具叫做Dreamweaver，不然就是photoshop
但並不知道什麼叫做table layout
要學css layout，還得先知道自己做了什麼，實在太要求
3. 一下子要學兩種標記式的語言：html & css
對於視覺生物是很大的負擔
不過幸好是標記語言，而且需要背的東西不多
只是很可能有些相近的東西會搞混在一起
這個就必須花一點時間去分清楚
甚至css與html都分不清楚，就很糟糕了
4. table與CSS排版觀念不同
這個癥結點我很晚才發現，不過也許是table排版跨越到css排版
又要能完整結合創意，最重要的一環：
* table排版，是架構在格子內，無論是設計成什麼樣子，
最後一定是切成一塊塊，最後再像是拼圖般貼起來成為一個版面。
(ok，我也知道有很多例外的狀況，不過似乎多半如此）
* css排版，比較像是photoshop layer的觀念，
設計完版面常常要把layer單獨存成一個個圖檔
最後在版面上，調整位置，與文字一起疊成一個版面。
(對，也是有很多用拼的，但很棒的版面幾乎都是用疊的..而且疊的神乎奇技）
所以一個是拼貼(table)，一個是疊(css) 這樣的差異。
以上幾點講的都是比較貼近設計師會先遇到的問題
我認為先能了解這些會比較好。
然而像是如何拼圖疊圖會比較省空間之類技術性的問題
等以後再去深入了解
到更進階可以研究跨平台的寫法，以及些許css hack
當然如果學的很慢，搞不好css大統一就不用學了（？）
===
以下是我認真想要做的一些事，就趁此機會寫出來，看看回應會有多少好了：
首先我認為自己摸是很苦的事，
但實作仍然是一個很重要的學習管道
雖然市面上的書不少
不過有時候犯了一個小錯，卻找不到問題而頭痛
因此放棄的人大有人在
是不是同樣身為視覺設計師
走過的冤枉路，不應該再重複呢？
是不是應該把這個進步的速度加快呢？
如果我來舉辦一個針對過渡 table 到 css 的聚會
其實也是我一直想做的事，不知道有多少人有興趣？
好處大概是這樣：
有人帶的情況之下，可以盡量先控制好環境
例如選擇對的doctype...比較好的css寫法，先給提示、範例
當場帶寫一些code
先讓大家體會到css與table不同的神奇之處
以及各種指令對應正確的狀況
大家回去練習應該也比較有個標準在
避免產生：「咦，我這樣到底對不對呢？好疑惑阿！」之類的感嘆～
寫了這麼多，不知道有沒有人對此有興趣？
專題：Switch to css design ?
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 210.64.16.123
※ 編輯: evenwu 來自: 210.64.16.123 (06/19 02:17)
... <看更多>