introduction to 網頁排版web.mcut.edu.tw/~clin/materials/web_layout.pdf · introduction to...
TRANSCRIPT
-
Introduction to
網頁排版With Cascading Style Sheets
視傳一 網頁設計/林金祥
Webpage Design/ by Chin-Hsiang Lin 1
-
網頁版面概念 (800x600)
Webpage Design/ by Chin-Hsiang Lin 2
-
網頁版面概念(1024x768)
Webpage Design/ by Chin-Hsiang Lin 3
-
網頁版面概念(1600x1050)
4Webpage Design/ by Chin-Hsiang Lin
-
黃金比例
Webpage Design/ by Chin-Hsiang Lin 5
ba
a
a:b = (a+b):a
-
黃金比例欄寬 (1024x768)
Webpage Design/ by Chin-Hsiang Lin 6
810
500
例用黃金比例求得主要欄寬與次要欄寬的寬度
總寬÷ 1.62 = 主要欄寬
810 ÷ 1.62 = 500
-
網格版面設計
7Webpage Design/ by Chin-Hsiang Lin
-
加強「頭版」區域的資訊
8Webpage Design/ by Chin-Hsiang Lin
摺線
﹁頭版﹂區域
-
善用延伸資訊區
9Webpage Design/ by Chin-Hsiang Lin
摺線
延伸資訊區
-
開發網頁的好工具
安裝 FireFoxhttp://moztw.org/
安裝 Plugin: Web Develophttps://addons.mozilla.org/zh-TW/firefox/search?q=web+developer&cat=all
10Webpage Design/ by Chin-Hsiang Lin
http://moztw.org/https://addons.mozilla.org/zh-TW/firefox/search?q=web+developer&cat=allhttps://addons.mozilla.org/zh-TW/firefox/search?q=web+developer&cat=all
-
版型的設計範例 (1)
Webpage Design/ by Chin-Hsiang Lin 11
-
版型的設計範例 (2)
Webpage Design/ by Chin-Hsiang Lin 12
-
Keep Learning!多練習就會熟悉,加油!
© 2009, 視傳/祥子
Webpage Design/ by Chin-Hsiang Lin
Introduction to �網頁排版�With Cascading Style Sheets網頁版面概念 (800x600)網頁版面概念(1024x768)網頁版面概念(1600x1050)黃金比例黃金比例欄寬 (1024x768)網格版面設計加強「頭版」區域的資訊善用延伸資訊區開發網頁的好工具版型的設計範例 (1)版型的設計範例 (2)Keep Learning!�多練習就會熟悉,加油!