Web Design 105
0. Introduction
1. HTML & CSS
1.1. HTML 設定版面、定義內文結構到設計內容
1.1.0. Preparing
1.1.1. HTML Document
1.1.2. 版面（區塊）標籤 div
1.1.3. 內容的結構標籤 h1 ~ h6, p
1.1.4. 結構化資料的標籤 li, ul, ol, table, tr,...
1.1.5. 超鏈結 Hyperlink
1.1.6. 字樣標籤 b, i, u
1.1.7. 注意事項
1.2. CSS 選取 HTML 元素並賦予 Style
1.2.1 CSS-1 Layout
1.2.1.1 Link to CSS in HTML
1.2.1.2 依據 class 或 id 編輯 CSS
1.2.1.3 利用 float 屬性，先當他是 word 來排
1.2.1.4 利用 Clear 避免 float 在視窗大小變化上的問題
1.2.1.5 Fixed banner: 讓 banner 不管怎麼捲動都不會離開視窗
1.2.1.6 如何把整個版面置中
1.2.2 CSS-2 Layout vs. Content: Box model
1.2.2.1 Practice-1: Box model
1.2.2.2 Padding: space between content and border 增加內容和框線（border）
1.2.2.3 Hierarchical div
1.2.2.4 Practice-2 如何做到以下效果？
1.2.2.5 超鏈結捲動修正
1.2.2.6 Box model 注意事項
1.2.3 CSS-3 Content Decoration
1.2.3.1 建置瀏覽列Building navigation bar
1.2.3.2 Practice-3 Decoration
1.2.3.3 Links in banner
1.2.3.4 hover 改變前景色和背景色
1.2.3.5 Practice 4. 表格或列表樣式化（搭配HTML表格或列表）
1.2.3.6 CSS Gallery
1.2.3.7 CSS combinator and pseudo class
1.2.3.8 Circular potraits
1.2.3.9 字型設定
2. Bootstrap
3. Data presentation
4. Scroll and jQuery
4.1 Fixed background
4.2 jQuery
4.3 Scroll to move
4.3.1 Horizontal scrolling
4.3.2 Scrollsply
4.3.3 Our scrollspy by specifying div positions
4.4 Scroll to display
4.4.1 Scroll to control video
4.4.2 Scroll to change pics
4.4.3 Play video when scroll to
4.4.4 Zoomin and Zoomout
4.4.5 by Waypoints
5. Map
5.1 Google function table
5.2 Mapbox
5.3 Leaflet
5.4 D3.js
6. Data visualization by D3.js
Powered by
GitBook
1.2.1 CSS-1 Layout
1.2.1 CSS-1 Layout
此小節主要在介紹利用 CSS 來排整個網頁的 Layout
results matching "
"
No results matching "
"