FLC手創坊
完成檔如下
在這個範例裡面!!
首先我們要先在”標題”輸入名稱，那我就打”FLC手創坊”
然後再製作出首頁跟CSS檔
首頁就index.html CSS這裡是打layout.css(就是布局的意思)
設定DIV標籤
先包一層DIV id=wrapper(包覆)然後內部再建4個DIV
分別為
"header”(標題區)
"mainNav”(選單區)
"content"(內容區)
"footer"(版權宣告區)
這樣方便辨認。
置入網頁內容並且結構化
Header
直接將標題區文字取代為FLC手創坊並將格式改為”標題1”。
mainNav
將選單項目設為”標題3”。
『關於我們、最新消息、手創小品、材料選購、團購訊息、聯絡我們』6個設”項目清單”。
再把images裡的圖片，移到下方。
content
將『生活小故事：八十八歲老阿嬤的溫馨迴響•帶您進入手創世界』設為”標題2”。
將『課程特色』設為”標題3”。
將『課程內容豐富•學員互動活潑』設為”標題4”。
接下來的內容不用設…
『FLC手創坊提供了「手工蠟燭」、「裁縫拼布」、「木作製品」及「手工香皂」四種課程，專門替生活忙碌卻又想忙裡偷閒的您所精心規劃的短期精修課程，這裡請到業界知名的權威老師來教授她們多年累積的寶貴經驗；再加上手創坊內也有許多學員課程中所製作的成品，提供給各期學員參考交流，讓FLC手創坊成為一個溫馨和樂的交流天堂。
您還在等什麼，還在為「沒時間」找藉口嗎？就從現在開始，為自己預約一個「生活的假期」吧！FLC手創坊歡迎您。』
將『創意的作品能夠豐富您的生活』設為”標題4”。
接下來的內容不用設…
『生活的目的在於認真的活出自我，生活的體驗則在於對於周遭的環境有更深切的認知，創意的生活就是讓自己用自己的想法對於周遭環境創造有趣的體驗。
FLC手創坊成立的宗旨，就是希望藉由自己的生活夢想，如何去實現，靠著自己動手、自己的巧思、自己的經驗，一步一步去實行。』
在下面空一格放入圖片。
將『課程內容』設為”標題3”。
將『手工蠟燭、裁縫拼布、木作製品、手工香皂』設為”項目清單”
。
再來新增一組ID名稱為contentTop的div標籤，包覆著生活小故事那段”標題2”。
然後再新增一組DIV ID=contentMain把”課程特色(標題3)”∼”手工香皂(子選單)”，整段文字包覆起來。
然後再新增DIV ID=content_info將”課程特色(標題3)”∼”課程特色(標題3)” 包覆起來。
再新增DIV ID=content_Nav把”課程內容(標題3)”和”項目清單(ul)”包覆起來。
footer
輸入”FLC手創坊 版權所有 門市地址：台北市中山北路8段888號 電話：02-8888-8888”，並且格式設為”標題4”。
超連結設定
新增檔案『關於我們aboutus.html』、『最新消息news.html』、『手創小品products.htnl』、『材料選購materiais.html』、『團購訊息groupbuy.html』、『聯絡我們contact.html』以拖曳方式連結。
好了之後再建4個檔案
『手工蠟燭candles.html』、『裁縫拼布patchwork.html』、『木作製品word.html』、『手工香皂soap.html』
以拖曳方式連結。
設定CSS美化網頁
先將內距和邊界設0。
*{
padding:0; → 內距：0像素。
margin:0; → 邊界：0像素。
}
body {
background-image:url(images/body_bg.gif); → 背景圖。
}
#wrapper { → ID名稱為wrapper的div樣式。
width:980px; → 寬度：980像素。
margin:0 auto; → 邊界：上下為0，左右為自動(對齊網頁中央)。
background-color:#fbde86; → 背景色：黃色。
}
標題區(header)
#header { → ID名稱為header的DIV樣式。
background-image:url(images/header_banner.jpg); → 背景圖。
height:250px; → 高度：250像素(與背景圖同高)。
}
#header h1 { → header內的標題1樣式。
background-image:url(images/flc_logo.gif); → 背景圖。
width:170px; → 寬度：170像素(與背景圖同寬)。
height:50px; → 高度：50像素(與背景圖同高)。
text-indent:-9999px; → 文字縮排：負數則是像螢幕外推至-9999像素(隱藏效果)。
}
替header設定padding-top(上內距)為80像素，使header h1向下移動，並且將高度重設為170px。
#header { → ID名稱為header的DIV樣式。
background-image:url(images/header_banner.jpg); → 背景圖。
height:170px; → 高度重設為170像素。
padding-top:80px; → 上內距：80像素。
}
選單區(mainNav)
#mainNav { → ID名稱為mainNav的DIV樣式。
width:200px; → 寬度：200像素。
float:left; → 浮動：靠左。
}
#mainNav h3 { → mainNav的標題3樣式。
background-image:url(images/mainNav_menu.gif); → 背景圖。
width:200px; → 寬度：200像素。
height:100px; → 高度：100像素。
text-indent:-9999px; → 文字縮排：-9999像素(將文字推至螢幕外9999像素)。
}
#mainNav ul {} → mainNav內的項目清單樣式。
#mainNav li { → mainNav內的項目子清單樣式。
list-style-type:none; → 項目符號類型：無。
}
#mainNav li a { → mainNav內項目子清單的超連結樣式。
display:block; → 顯示：區塊(滑鼠感應範圍)。
background-image:url(images/icon_aboutus.gif); → 背景圖。
width:160px; → 寬度：160像素(與背景圖同寬)。
height:50px; → 高度：50像素(與背景圖同高)。
text-indent:-9999px; → 文字縮排：-9999像素(將文字外推至螢幕外9999像素)。
margin:0 auto; → 邊界：上下0像素、左右為自動(每個子清單皆能水平置中)。
}
#mainNav p { → mainNav內的段落樣式。
text-align:center; → 文字對齊：置中(文字水平置中)。
}
#mainNav img {} → mainNav內的圖片樣式。
瀏覽一下吧!!~
由於6個項目子清單都被設為同一張圖，所以必須個別命名子清單名稱，以便個別設定。
點選到原始碼，替6個項目子清單命名類別(Class)名稱。
然後再切回CSS，在 ”#mainNav li a {}” 的下方新增 “#mainNav li.aboutus a{}”
將原本設定在”#mainNav li a”的背景圖移到” #mainNav li.aboutus a”裡。
然後將” #mainNav li.aboutus a”全選起來再複製5次，再把圖片檔字樣修改。
#mainNav li.aboutus a {
background-image:url(images/icon_aboutus.gif);
}
#mainNav li.news a {
background-image:url(images/icon_news.gif);
}
#mainNav li.products a {
background-image:url(images/icon_products.gif);
}
#mainNav li.materials a {
background-image:url(images/icon_materials.gif);
}
#mainNav li.groupbuy a {
background-image:url(images/icon_groupbuy.gif);
}
#mainNav li.contact a {
background-image:url(images/icon_contact.gif);
瀏覽最終結果~
內容區(content)
#content { → ID名稱為content的DIV樣式。
background-image:url(images/content_bg.gif); → 背景圖。
width:780px; → 寬度：780像素(wrapper寬度980減去mainNav寬度200)。
float:right; → 浮動：靠右。
}
#contentTop { → ID名稱為contentTop的DIV樣式。
background-image:url(images/contentTop_bg.gif); → 背景圖。
height:200px; → 高度：200像素(與背景圖同高)。
}
#contentTop h2 { → contenTop 內的標題2樣式。
background-image:url(images/contentTop_lifestory.jpg); → 背景圖。
width:720px; → 寬度：720像素(與背景圖同寬)。
height:125px; → 高度：125像素(與背景圖同高)。
text-indent:-9999px; → 文字縮排：-9999像素(將文字外推至螢幕外9999像素)。
}
PS.由於contentTop h2所設定的背景圖位於contentTop左上角，所以替contentTop設定內距，讓contentTop h2向右、下各推20像素；並將height重設。
#contentTop { → ID名稱為contentTop的DIV樣式。
background-image:url(images/contentTop_bg.gif); → 背景圖。
height:180px; → 高度：180像素；由於多了上內距設定，實際高度會增加20像素，必須回減才行。
padding:20px 0 0 20px; → 內距：20像素、右0、下0、左20像素。
}
#contentMain { → ID名稱為contentMain的div樣式。
background-image:url(images/contentMain_bg.gif); → 背景圖。
background-repeat:no-repeat; → 背景圖重複：不重複。
background-position:left bottom; → 背景圖位置：左、下。
padding:0 40px 20px 20px; → 內距：上0、右40像素、下20像素、左20像素。
}
#content_info{
width:570px;
float:left;
}
/* ==content_Nav== */
#content_Nav{
width:150px;
float:right;
}
PS.由於content的寬度為780像素，contentMain右設了右內距40像素和左內距20像素；所以contentMain內的content_info和content_Nav這兩個div左右並排後的總寬度必須小於或等於720像素。
當contentMain內content_info和content_Nav這兩個div設定浮動後，contentMain的高度會自動閉合(沒有內容，就是沒有高度，只剩下下內距20像素)，如此，先前替contentMain設定的背景圖會銜接到contentTop之下，在替contentMain加上
overflow:auto; → 溢位：自動(自動抓取高度)。
#content_info h3 { → content_info內的標題3樣式。
background-image:url(images/content_info_title.gif); → 背景圖。
width:550px; → 寬度：550像素(與背景圖同寬)。
height:35px; → 高度：35像素(與背景圖同高)。
text-indent:-9999px; → 文字縮排：-9999像素(將文字推向螢幕外9999像素，隱藏)。
margin-bottom:10px; → 下邊界：10像素(與下方的內容產生間距)。
}
#content_info h4 { → content_info內的標題4樣式。
background-image:url(images/content_info_subtitle1.gif); → 背景圖。
width:250px; → 寬度：250像素(與背景圖同寬)。
height:25px; → 高度：25像素(與背景圖同高)。
text-indent:-9999px; → 文字縮排：-9999像素(將文字推向螢幕外9999像素)。
margin-bottom:10px; → 下邊界：10像素(與下方的內容產生間距)。
}
由於2個content_info區內的”標題4”都被設為同一張圖片，所以必須個別命名”項目子清單”的(class)名稱，以便個別設定。
<h4 class="info_title1">
<h4 class="info_title2">
好了之後，回到CSS再輸入…
#content_info h4.info_title1{ }
然後把
再來把程式碼全選，在複製一次。
#content_info h4.info_title1 {
background-image:url(images/content_info_subtitle1.gif);
}
#content_info h4.info_title2 {
background-image:url(images/content_info_subtitle2.gif);
}
#content_info p { → content_info內的段落。
font-size:12px; → 字體大小：12像素。
line-height:16px; → 行高：16像素。
margin-bottom:10px; → 下邊界：10像素。
}
#content_Nav h3 { → content_Nav內的標題3樣式。
background-image:url(images/content_Nav_title.gif); → 背景圖。
width:130px; → 寬度：130像素。
height:40px; → 高度：40像素。
text-indent:-9999px; → 文字縮排：-9999像素(將文字外推至螢幕外9999像素，隱藏)。
}
#content_Nav { → ID名稱為content_Nav的div樣式。
width:135px; → 減去左內距15像素，就變成135像素了。
float:right; → 浮動：靠右。
padding-left:15px; → 左內距：15像素。
}
超連結的設定…
#content_Nav ul {} → content_Nav項目清單。
#content_Nav li { → content_Nav項目子清單樣式。
list-style-type:none; → 項目符號：無。
margin-bottom:5px; → 下邊界：5像素。
}
#content_Nav li a { → content_Nav項目子清單的超連結。
display:block; → 顯示：區塊。
background-image:url(images/content_Nav01.jpg); → 背景圖。
width:130px; → 寬度：130像素。
height:80px; → 高度：80像素。
text-indent:-9999px; → 文字縮排：-9999像素(將文字外推至螢幕外9999像素就是隱藏)
}
PS.由於4個項目子清單都被設定為同一張圖片，所以必須個別命名項目清單名稱，以便個別設定。
點選回原始碼，替4個項目清單分別命名類別(class)名稱。
回到CSS創
#content_Nav li.class1 a{
}
#content_Nav li.class1 a {
background-image:url(images/content_Nav01.jpg);
}
把它選起來再複製3次，便且更名。
#content_Nav li.class2 a {
background-image:url(images/content_Nav02.jpg);
}
#content_Nav li.class3 a {
background-image:url(images/content_Nav03.jpg);
}
#content_Nav li.class4 a {
background-image:url(images/content_Nav04.jpg);
}
版權宣告區(footer)
#footer { → ID名稱為footer的DIV樣式。
clear:both; → 清除：兩者。
background-image:url(images/foot_bg.gif); → 背景圖。
height:80px; → 高度：80像素。
line-height:80px; → 行高：80像素(文字垂直置中)。
text-align:center; → 文字對齊：置中(文字水平置中)。
color:#300; → 文字顏色：深咖啡色。
}
#footer h4 {} → footer的標題4樣式…無。
F12最終結果~
瀏覽器的破解方法(CSS Hank)
網頁在IE6預覽的結果，contentMain會有些移位。
由於<div>沒有設定寬高時，在IE6中就會消失，所以請替contentMain設定寬高，或使用IE6.0 Hankx來破解~
#contentMain { → ID名稱為contentMain的DIV樣式。
_height:1%; → IE6對於沒有設定寬度或高度的div的破解。
}
∼終わり∼