1. HTML5入門 1-1 「範例」index.html 2. HTML5 與 CSS3 2-1 index.html(背景整合設定) 2-2 index.html(多背景) 2-3 index.html(標題文字外觀設定) 2-4 index.html(頁內樣式) 2-5 index.html(版面布局) 2-6 index.html(完整版面布局) 2-7 index.html(導覽列) 2-8 index.html(完整導覽列) 3. CSS3與版面布局 3-1 index.html(標題加上左邊框) 3-2 index2.html(position練習空檔) 3-3 index2.html(position:relative) 3-4 index2.html(position:relative+z-index 上下層) 3-5 index2.html(position:absolute) 3-6 index2.html(position:fixed) 3-7 index.html(兩欄式) 3-8 index3.html(用position來做三欄式) 3-9 index4.html(利用float做三欄式) 3-10 index.html(float兩欄式) 3-11 index.html(側邊作者欄+花邊) 4. 認識 BootStrap 4-1 bootstrap1.html 固定版面布局練習 4-2 bootstrap2.html 固定版面XOOPS布局練習 4-3 bootstrap2.html 流動版面XOOPS布局練習 4-4 bootstrap3.html 流動版面網頁排版練習 5. XOOPS佈景開發(上) 5-1 theme2014/index.html 基本頁面 5-2 theme2014/index.html 基本頁面+架構+justfont字型 5-3 css/style.css 主樣式表 5-4 theme2014/index.html 導覽列+XOOPS八區域+頁尾 5-5 theme2014/theme.html 樣板檔(大架構初步完成) 5-6 theme2014/xotpl/block.html (區塊樣板檔) 5-7 theme2014/css/xoops.css (XOOPS內容樣式表) 5-8 theme2014/xotpl/block_center.html (中間區塊樣板檔) 6. XOOPS佈景開發(下) 6-1 theme2014/theme.html 樣板檔(加入管理工具) 6-2 theme2014/xotpl/block.html (強化區塊樣板檔) 6-3 theme2014/xotpl/block_center.html (強化中間區塊樣板檔) 6-4 theme2014/css/xoops.css (XOOPS內容樣式表) 6-5 theme2014/css/style.css (主樣式表) 6-6 theme2014/modules/system/system_redirect.html 轉頁畫面 6-7 theme2014/language/tchinese_utf8/main.php 7. 打造可控制佈景 7-1 佈景結構參考 7-2 theme2014/theme.html (主佈景架構) 7-3 theme2014/theme.ini (佈景資訊檔) 7-4 theme2014/css/style.css 7-4 theme2014/config.php (佈景主設定檔) 7-5 theme2014/config2.php 額外設定 8. 進階佈景設計 8-1 theme2014/theme.html 主佈景架構 8-2 theme2014/language/tchinese_utf8/main.php 語系檔 9. 快速做出XOOPS佈景 9-1 themes/sailing_demo/theme.html 9-2 themes/sailing_demo/theme.ini 9-3 themes/sailing_demo/README 9-4 themes/sailing_demo/config.php 9-5 themes/sailing_demo/config2.php 9-6 themes/sailing_demo/templatemo_style.css (僅列修改部份)
9-4
themes/sailing_demo/config.php
016
$config_enable
[
'theme_type'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'theme_type_2'
);
018
$config_enable
[
'theme_width'
]=
array
(
'enable'
=>0,
'min'
=>
'1'
,
'max'
=>
'12'
,
'require'
=>1 ,
'default'
=>
'940'
);
020
$config_enable
[
'base_color'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#FFFFFF'
);
022
$config_enable
[
'lb_color'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#F2F4FF'
);
024
$config_enable
[
'cb_color'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#FFFFFF'
);
026
$config_enable
[
'rb_color'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#F4F4F4'
);
028
$config_enable
[
'lb_width'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'220'
);
030
$config_enable
[
'rb_width'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'220'
);
032
$config_enable
[
'clb_width'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'49%'
);
034
$config_enable
[
'crb_width'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'49%'
);
036
$config_enable
[
'margin_top'
]=
array
(
'enable'
=>0,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'0'
);
038
$config_enable
[
'font_size'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'11pt'
);
040
$config_enable
[
'margin_bottom'
]=
array
(
'enable'
=>0,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'0'
);
042
$config_enable
[
'font_color'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#202020'
);
044
$config_enable
[
'link_color'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#005ca8'
);
046
$config_enable
[
'hover_color'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#a40019'
);
055
$config_enable
[
'bg_img'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'templatemo_body.jpg'
);
057
$config_enable
[
'bg_color'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#CDEEFF'
);
059
$config_enable
[
'bg_repeat'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'repeat-x'
);
061
$config_enable
[
'bg_attachment'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'scroll'
);
063
$config_enable
[
'bg_position'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'center top'
);
073
$config_enable
[
'slide_width'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'940'
);
075
$config_enable
[
'slide_height'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'0'
);
077
$config_enable
[
'use_slide'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'1'
);
087
$config_enable
[
'logo_img'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
''
);
089
$config_enable
[
'logo_position'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'page'
);
091
$config_enable
[
'logo_top'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
''
);
093
$config_enable
[
'logo_right'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
''
);
095
$config_enable
[
'logo_bottom'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
''
);
097
$config_enable
[
'logo_left'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
''
);
107
$config_enable
[
'bt_text_size'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'1.5em'
);
109
$config_enable
[
'bt_text_padding'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'0'
);
111
$config_enable
[
'bt_text'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#6bbdff'
);
113
$config_enable
[
'bt_bg_color'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'transparent'
);
115
$config_enable
[
'bt_radius'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'1'
);
117
$config_enable
[
'block_config'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'right'
);
119
$config_enable
[
'bt_bg_img'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'transparent'
);
121
$config_enable
[
'bt_bg_repeat'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'1'
);
123
$config_enable
[
'block_style'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
''
);
125
$config_enable
[
'block_title_style'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'border:none;height:40px;line-height:40px;margin-bottom:10px;'
);
127
$config_enable
[
'block_content_style'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
''
);
137
$config_enable
[
'navbar_pos'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'default'
);
139
$config_enable
[
'navbar_bg_top'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#54b4eb'
);
141
$config_enable
[
'navbar_bg_bottom'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#2fa4e7'
);
143
$config_enable
[
'navbar_hover'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#1684c2'
);
145
$config_enable
[
'navbar_img'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
''
);
147
$config_enable
[
'navbar_color'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#FFFFFF'
);
149
$config_enable
[
'navbar_color_hover'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'#FFFF00'
);
151
$config_enable
[
'navbar_icon'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
'icon-white'
);
153
$config_enable
[
'navlogo_img'
]=
array
(
'enable'
=>1,
'min'
=>
''
,
'max'
=>
''
,
'require'
=>0 ,
'default'
=>
''
);
1. HTML5入門 1-1 「範例」index.html 2. HTML5 與 CSS3 2-1 index.html(背景整合設定) 2-2 index.html(多背景) 2-3 index.html(標題文字外觀設定) 2-4 index.html(頁內樣式) 2-5 index.html(版面布局) 2-6 index.html(完整版面布局) 2-7 index.html(導覽列) 2-8 index.html(完整導覽列) 3. CSS3與版面布局 3-1 index.html(標題加上左邊框) 3-2 index2.html(position練習空檔) 3-3 index2.html(position:relative) 3-4 index2.html(position:relative+z-index 上下層) 3-5 index2.html(position:absolute) 3-6 index2.html(position:fixed) 3-7 index.html(兩欄式) 3-8 index3.html(用position來做三欄式) 3-9 index4.html(利用float做三欄式) 3-10 index.html(float兩欄式) 3-11 index.html(側邊作者欄+花邊) 4. 認識 BootStrap 4-1 bootstrap1.html 固定版面布局練習 4-2 bootstrap2.html 固定版面XOOPS布局練習 4-3 bootstrap2.html 流動版面XOOPS布局練習 4-4 bootstrap3.html 流動版面網頁排版練習 5. XOOPS佈景開發(上) 5-1 theme2014/index.html 基本頁面 5-2 theme2014/index.html 基本頁面+架構+justfont字型 5-3 css/style.css 主樣式表 5-4 theme2014/index.html 導覽列+XOOPS八區域+頁尾 5-5 theme2014/theme.html 樣板檔(大架構初步完成) 5-6 theme2014/xotpl/block.html (區塊樣板檔) 5-7 theme2014/css/xoops.css (XOOPS內容樣式表) 5-8 theme2014/xotpl/block_center.html (中間區塊樣板檔) 6. XOOPS佈景開發(下) 6-1 theme2014/theme.html 樣板檔(加入管理工具) 6-2 theme2014/xotpl/block.html (強化區塊樣板檔) 6-3 theme2014/xotpl/block_center.html (強化中間區塊樣板檔) 6-4 theme2014/css/xoops.css (XOOPS內容樣式表) 6-5 theme2014/css/style.css (主樣式表) 6-6 theme2014/modules/system/system_redirect.html 轉頁畫面 6-7 theme2014/language/tchinese_utf8/main.php 7. 打造可控制佈景 7-1 佈景結構參考 7-2 theme2014/theme.html (主佈景架構) 7-3 theme2014/theme.ini (佈景資訊檔) 7-4 theme2014/css/style.css 7-4 theme2014/config.php (佈景主設定檔) 7-5 theme2014/config2.php 額外設定 8. 進階佈景設計 8-1 theme2014/theme.html 主佈景架構 8-2 theme2014/language/tchinese_utf8/main.php 語系檔 9. 快速做出XOOPS佈景 9-1 themes/sailing_demo/theme.html 9-2 themes/sailing_demo/theme.ini 9-3 themes/sailing_demo/README 9-4 themes/sailing_demo/config.php 9-5 themes/sailing_demo/config2.php 9-6 themes/sailing_demo/templatemo_style.css (僅列修改部份)