活用XHTML/HTML＋CSS並不難 Chapter 1 LAYOUT 版面配置.

Presentation on theme: "活用XHTML/HTML＋CSS並不難 Chapter 1 LAYOUT 版面配置."— Presentation transcript:

1 活用XHTML/HTML＋CSS並不難 Chapter 1 LAYOUT 版面配置

2 LAYOUT 01 一欄版面 layout01.html

3 LAYOUT 01 一欄版面 base_layout01.html 最外面：container 裡面： 上：head 中：content
　下：foot

4 LAYOUT 01 一欄版面 base_layout01.html 等同

5 layout01.html

6 LAYOUT 02 固定式二欄版面 layout02.html

7 LAYOUT 02 固定式二欄版面 base_layout02.html 最外面：container 裡面： 上：head
　中：content sidebar 　下：foot

8 LAYOUT 02 固定式二欄版面 base_layout02.html 交換此二行， 側邊欄會靠左

9 layout02a.html

10 LAYOUT 03 固定三欄 layout03.html

11 LAYOUT 03 固定三欄 base_layout03.html 最外面：container 裡面： 上：head 中：sidebar01
content sidebar02 　下：foot main

12 LAYOUT 03 固定三欄 base_layout03.html main body裡

13 LAYOUT 04 變動二欄 layout04.html 可隨視窗調整寬度

14 LAYOUT 04 變動二欄 base_layout04.html 最外面：container 裡面： 上：head 中：content
sidebar 　下：foot

15 LAYOUT 04 變動二欄 base_layout04.html body裡

16 LAYOUT 05 變動三欄 layout05.html 可隨視窗調整寬度

17 LAYOUT 05 變動三欄 base_layout05.html 最外面：container 裡面： 上：head
　中：sidebar01 　　　content sidebar02 　下：foot main main

18 LAYOUT 05 變動三欄 base_layout05.html

19 LAYOUT 06 垂直側邊欄 layout06.html

20 LAYOUT 06 垂直側邊欄 layout06.html 最外面：container 裡面： 上：head 中：content
sidebar 　下：foot wrapper

21 LAYOUT 06 垂直側邊欄 base_layout06.html 不顯示超出邊界的部份

22 LAYOUT 07 方框圍繞 layout07.html

23 LAYOUT 07 方框圍繞 layout07.html 最外面：container 裡面： 上：head 中：content
sidebar 　下：foot wrapper

24 LAYOUT 07 方框圍繞 base_layout07.html

25 LAYOUT 08 邊框區隔 layout08.html

26 LAYOUT 08 邊框區隔 layout08.html 最外面：container 裡面： 上：head 中：content
sidebar 　下：foot wrapper

27 LAYOUT 08 邊框區隔 base_layout08.html