ONE PLUS 旅遊網
完成檔如下
在這個範例裡面!!
首先我們要先在”標題”輸入名稱，那我就打”ONE PLUS 旅遊網”
然後再製作出首頁跟CSS檔
首頁就index.html CSS這裡是打layout.css(就是布局的意思)
設定DIV標籤
先包一層DIV id=wrapper(包皮)然後內部再建5個DIV
分別為
“header"(標題區)、
"sidebar1"(左側選單區)、
"content"(內容區)、
"sidebar2"(右側選單區)、
"footer"(版權宣告區)
這樣方便辨認。
DIV id=” header”
再來我們需要置入網頁內容並且結構化
所以首先就是”標題區”嘍~
先把標題區的格式選為”標題1(h1)”然後把項目給打進去，
分別為”首頁”、”關於我們”、”最新公告”、”線上註冊”、”客服中心”、”聯絡我們”。
打好了以後按下”項目清單
”
再新增一個段落，內容：【ONE PLUS 旅遊網】：為您搭起通往世界的橋。格式選”標題3( h3)”
再新增段落把圖(header_bookmark.gif、header_search.gif)把它放入。
這樣我們”header”大致上已經OK了。
DIV id=”sidebar1”
在”左選單區中”我們先把內容置入
免費資源(標題2)、
本月出團(段落)、
美西八日遊,美東八日遊,加拿大十日遊,北海道五日遊,大阪五日遊,上海五日遊,昆大麗八日遊,帛琉五日遊(項目清單)、
美西八日遊年後特惠團(標題3)
線上註冊(標題4)
都打好~
這樣"sidebar1"的部分也算是好了
DIV id=”content”
再來是”內容區”，先把圖片content_photo.jpg拖曳近來，然後把內容打好來。內容如下：
為您開啟世界之窗 “標題2(h2)”
ONE PLUS 旅遊網秉持「顧客至上•服務最棒」的精神，為每位旅行者量身訂做 一個適合自己的「客製化」旅行團。由於本網集結全國所有旅行社的資源，針對您的需求找到您最適合的旅遊團”段落”
Welcome To ONE PLUS “標題3(h3)”
溫馨小叮嚀”標題4(h4)”
客製化的旅行團，可自行組團規劃行程，或將您的需求提出並由ONE PLUS全權規劃
尋找一家誠實信用的旅行社，確保旅遊品質的保證，才不會敗興而歸
海外旅遊注意人身安全，最好加保意外險，以確保旅遊的保障
旅遊隨身物及注意事項，可由免費資源區下載，請事先準備
請事先準備零錢，以便資付行程中的「小費」支出
歐洲電壓與台灣不同，如有需要，請自行攜帶變電器
請注意各地天氣變化，加減攜帶隨身衣物
7個”項目清單”
在【標題3】跟【標題4】內容插入一條水平線…
這樣content的部分也好了
DIV id="sidebar2"
緊接著是”右側選單區”，內容打好~
更多好康 ”標題2(h2)”
下月出團 ”段落”
美西八日遊
美東八日遊
江南風情五日遊
北海道五日遊
大阪五日遊
上海五日遊
峇里島五日遊
帛琉五日遊
共8個”項目清單”
國家區域 ”段落”
美國
日本
韓國
加拿大
中國大陸
歐洲各國
公6個”項目清單”
DIV id="footer"
再來就是版權宣告了~”sv5111練習用!!~沒有商業用途!!”把這裡是定為”標題4”
這樣就好!!~
超連結設定
在此我們要建9個網頁檔，分別為
Aboutus、news、register、appointment、service、contact、free、group。
header
然後我們把關於我們、最新公告、線上註冊、客服中心、聯絡我們，
依序連結Aboutus、news、register、appointment、service、contact
sidebar1
將”左側選單”免費資源連結free.html；再將「本月出團」下的8個項目全選起來，連到group.html；最後將線上註冊連至register.html
Sidebar2
將”右側選單”「下月出團」下方的8選項全選起來，連到gorup.html；再將「國家區域」下方的6個選項連結country.html
這樣就好啦~
設定CSS美化網頁
首先我們要先將layout.css根本頁面做關聯
先要讓内距(padding)、邊界(margin)設為0。
再來是body設定背景圖(body_bg.jpg)
接著替id=wrapper標籤設定背景圖、背景重覆、背景色、寬度及邊界。
#wrapper {
background-image:url(images/wrapper_bg.jpg); ← 背景圖
background-repeat:repeat-x; ← 背景重覆：水平重覆。
background-color:#587907; ← 背景色：深綠色
width:980px; ← 寬度：980像素
margin:0 auto; ← 邊界：上下為0，左右為自動(對其中央)
按F12瀏覽看看!!~
標題區(header)的設定
首先就先打出8個標籤名稱
#header {} ← 設定標籤名稱為此的div標籤。
#header h1 {} ← 設定header內的標題1<h1>標籤。
#herder ul {} ← 設定header內的項目清單<ul>標籤。
#header li {} ← 設定header內的項目子清單<li>標籤。
#header li a {} ← 設定header內的項目子清單<li>的超連結效果。
#header li a:hover {} ← 設定項目子清單<li>滑鼠滑過時的超連結效果。
#header h3 {} ← 設定header內的標題3<h3>標籤。
#header img {} ← 設定header圖片<img>標籤。
header h1 {}
原始是只有這幾個字~
#header h1 {
background-image:url(images/logo.jpg); ← 背景圖設定
width:200px; ← 寬度：200像素(與背景圖一樣)
height:120px; ← 高度：120像素(與背景圖一樣)
text-indent:-9999; ← 文字縮排：負數是向螢幕外推至9999像素(將文字隱藏)
}
經過上面的設定就會變成↓
原本的ONEPLUS文字也不見了。
#header li {}
項目變化前
#header li {
list-style:none; ← 符號類型：無。
float:left; ← 浮動：靠左。(就是清單通通呈現浮動狀態後，靠左排列成一排)
}
輸入後就變成
#header li a {}
替子清單設定超連結樣式
#header li a { (header內項目子清單的超連結)
display:block; ← 顯示：區塊(滑鼠感應的範圍)。
width:100px; ← 寬度：100像素。
height:36; ← 高度：36像素。
line-height:36px; ← 行高：36像素(文字垂直置中)。
text-decoration:none; ← 文字裝飾：無(去除底線)。
color:#666633; ← 文字顏色：深黃綠色
background-color:#cdcc34; ← 背景色：淺黃綠色。
text-align:center; ← 文字對齊：置中(文字水平置中)。
border-bottom:1px #663 solid; ← 下邊框：1像素、深黃綠色、實線。
border-top:1px #663 solid; ← 上邊框：1像素、深黃綠色、實線。
border-right:1px #663 solid; ← 右邊框：1像素、深黃綠色、實線。
}
#header ul {}
此時首頁的左邊其實還是沒有邊框的。
所以要在
#header ul { 加入
position:absolute; ← 位置：絕對座標。
border-left:1px #663 solid; ← 左邊框：1像素、深黃綠色、實線
}
這樣比較看看~是否有些微的差距~
其實整條「項目清單」扔處於標題1的下方，為了方便移動到標題1的右方，所以才做此設定的。
此時將他們用滑鼠移動到你要的位置
#header {}
這時候在按下F12預覽!!會發現選單框會依照畫面的大小而改變位置，此時再回到CSS樣式，在…
#header { 加入
position:relative; ← 位置：相對座標。
}
就沒問題啦~
#header li a:hover {}
然後在超連結的地方加上
#header li a:hover { ← 滑鼠移動過去的超連結
background-color:#eeeeaa; ← 背景色：淡黃色。
}
滑鼠移過去時就會變色。
#header h3 {}
在此我們替標題3設定一下樣式
#header h3 {
position:absolute; ← 位置：絕對座標(為的就是要先將h3轉為圖層狀態)
background-image:url(images/header_bar.gif); ← 背景圖設定。
width:660px; ← 寬度：660像素。
height:31px; ← 高度：31像素。
line-height:31px; ← 行高：31像素。
font-size:12px; ← 字體大小：12像素。
font-weight:normal; ← 字體粗細：正常。
}
那最後就是把它移到我們想要的位置。
left: 259px;
top: 73px;
再點選到原始碼~替”加入書籤”和”站內收尋”分別命名類別class名稱一樣bookmark及search。
此時圖案還是在原地
再到CSS裡去輸入
#header img.bookmark {
position:absolute; ← 位置：絕對位置(把圖片轉為圖層)
}
#header img.search {
position:absolute; ← 位置：絕對位置(把圖片轉為圖層)
}
然後兩者的線框先把他調大一點方便點取，
，然後移到所要的位置，再把它弄掉。
#header img.bookmark{
position:absolute;
left: 600px;
top: 75px;
}
#header img.search{
position:absolute;
left: 750px;
top: 75px;
}
#header {}
然後我還會再把欄位撐高一點。
所以#header就要在加
#header {
position:relative; ←位置：相對座標。
height:150px; ← 高度：150像素。
}
這樣header部分就算OK啦~
三攔式版型的設定
左側選單區(sidebar1)的設定
首先要先將sidebar1變成一個區塊。
#sidebar1 { ← ID名稱為sidebar1 的Div樣式的設定說明
width:180px; ← 寬度：180像素。
float:left; ← 浮動：靠左。
}
然後也順便替content還有sidebar2設定寬度還有浮動。
內容區(content)
#content { ← ID名稱為content的DIV。
width:620px; ← 寬度：620像素。
float:left; ← 浮動：靠左。
}
右側選單區(sidebar2)
#sidebar2 { ← ID名稱為sidebar2的DIV。
width:180px; ← 寬度：180像素。
float:right; ← 浮動：靠右。
}
版權宣告區(footer)
然後要解除版權宣告文繞圖效果
#footer { ← ID為footer的div 樣式說明。
clear:both; ← 清除：兩者。
}
那就開始做啦~
左側選單區(sidebar1)的設定
#sidebar1
要改成
#sidebar1 { ← ID為sidebar1的div樣式。
width:165px; ← 寬度：165像素；
float:left; ← 浮動：靠左；
padding-left:15px; ← 左內距：15像素；
}
因為加了內距15像素，為了維持實際寬度，所以要將180-15=165。
再來就是#sidebar2的超連結效果嘍~
#sidebar1
#sidebar1 h2 a { ← ID 為sidebar1的div樣式。
display:block; ← 顯示：區塊(滑鼠感應區範圍)
background-image:url(images/sidebar1_freedownload.gif); ← 背景圖設定
width:150px; ← 寬度：150像素(與背景圖同寬)。
height:115px; ← 高度：115像素(與背景圖同高)。
text-indent:-9999px; ← 文字縮排：-9999像素(將文字外推至螢幕外9999像素，就是隱藏)。
margin-bottom:10px; ← 下邊界：10像素(與下段內容的間距)。
}
注意一點:免費資源一定要設超連結才能夠顯示圖片。
由於標題2文字本身帶有超連結，所以必須設定在sidebar1 h2以上才有感應效果，像對的sidebar1 h2的設定可以省略。
sidebar1 p
替段落(就是本月出團)設定樣式
#sidebar1 p{ ← ID 為sidebar1 內的段落樣式。
background-image:url(images/list_top.gif); ← 背景圖
width:150px; ← 寬度：150像素(與背景圖同寬)。
height:29px; ← 高度：29像素(與背景圖同高)。
line-height:29px; ← 行高：29像素(文字垂直置中)。
color:#FFF; ← 文字顏色：白色。
font-weight:bold; ← 字體粗細：粗體。
text-align:center; ← 文字對齊：置中(文字水平置中)。
}
sidebar1 ul
再來就是項目清單的整體設定效果嘍~
#sidebar1 ul { ← ID 為sidebar1 內的項目清單。
width:150px; ← 寬度：150像素。
list-style-image:url(images/list_arrow.gif); ← 項目符號影像：自訂圖片。
background-color:#486108; ← 背景色：深黃綠色。
background-image:url(images/list_bottom.gif); ← 背景圖設定。
background-repeat:no-repeat; ← 背景圖重覆：不重覆。
background-position:left bottom; ← 背景圖位置：左下。
margin-bottom:10px; ← 下邊界：10像素。
}
sidebar1 ul a
替項目子清單做超連結效果
#sidebar1 li a { ← ID 為sidebar1的子清單超連結樣式
display:block; ← 顯示：區塊。
color:#FFF; ← 文字顏色：白色。
padding:10px 0 5px 0; ← 內距：上10、右0、下5、左0像素。
font-size:12px; ← 字體大小：12像素。
text-decoration:none; ← 文字裝飾：無(這樣就沒有超連結的底線了)
border-bottom:#91a06b 1px dashed; ← 下邊框：淡黃色、1像素、虛線。
}
sidebar1 ul
那因為!!項目子清單看起來會怪怪的~
所以要把
width:95px; ← 重設為95像素(因為paddimg的關係150減去左內距35像素和右內距20像素)。
再加上padding:10px 20px 15px 35px; ← 內距：上10、右20、下15、左35像素。
sidebar1 li a:hover
#sidebar1 li a:hover {
color:#F90; ← 文字顏色：橘色。
}
再來就把下面兩個圖案也一起做完~
sidebar1 h3
#sidebar1 h3 { ← sidebar1內的標題3。
background-image:url(images/sidebar1_sale.gif); ← 背景圖設定。
width:150px; ← 寬度：150像素。
height:140px; ← 高度：140像素。
text-indent:-9999px; ← 文字縮排：-9999像素(與背景圖同樣寬)。
margin-bottom:10px; ← 下邊界：10像素(與下段內容的間距)。
}
sidebar1 h4 a
#sidebar1 h4 a{ ← sidebar1內的標題4。
display:block; ← 顯示：區塊。
background-image:url(images/sidebar1_registration.gif); ← 背景圖設定。
width:150px; ← 寬度：150像素。
height:80px; ← 高度：80像素。
text-indent:-9999px; ← 文字縮排：-9999像素(與背景圖同樣寬)。
margin-bottom:10px; ← 下邊界：10像素(與下段內容的間距)。
這樣左邊選單區就算完成啦~
內容區(content)的設定
content
#content { ← ID名稱為content的div樣式設定。
width:620px; ← 寬度：620像素。
float:left; ← 浮動：靠左。
}
content h2
#content h2 { ← content內的標題2。
background-image:url(images/content_title.gif); ← 背景圖。
width:200px; ← 寬度：200像素。
height:30px; ← 高度：30像素。
text-indent:-9999px; ← 文字縮排：-9999像素(將文字外推至螢幕9999像素)。
margin-bottom:10px; ← 下邊界：10像素(與下段內容的間距)。
}
content p
#content p { ← content內的段落。
margin-bottom:10px; ← 下邊界：10像素(與下段內容的間距)。
}
content h3
#content h3 { ← content內的標題3。
background-image:url(images/content_welcome.gif);
width:400px; ← 寬度：400px。
height:35px; ← 高度：35px。
text-indent:-9999px; ← 文字縮排：-9999像素(將文字外推至螢幕9999像素)。
margin-bottom:10px; ← 下邊界：10像素(與下段內容的間距)。
}
content hr
#content hr { ← content內的水平線。
margin-bottom:10px; ← 下邊界：10像素(與下段內容的間距)。
}
content h4
#content h4 { ← content內的標題4。
background-image:url(images/content_notice.gif); ← 背景圖。
width:100px; 寬度：100像素。
height:30px; 高度：30像素。
text-indent:-9999px; ← 文字縮排：-9999像素(將文字外推至螢幕9999像素)。
margin-bottom:10px; ← 下邊界：10像素(與下段內容的間距)。
}
Content ul
#content ul { ← content內的項目清單。
list-style-image:url(images/content_list_img.gif); ← 背景圖。
padding-left:20px; ← 左內距：20像素。
}
Content li
#content li { ← content內的項目子選單。
font-size:12px; ← 字體大小：12像素。
line-height:16px; ← 行高：16像素。
}
完成了預覽確定
都沒問題了!!繼續下面。
重新再替content設定~
#content { ← ID名稱為content的DIV。
width:600px; ← 寬：600像素。
float:left; ← 浮動：靠左。
color:#FFF; ← 顏色：白色。
background-image:url(images/content_bg.jpg); ← 背景圖。
background-repeat:no-repeat; ← 背景圖重覆：不重覆。
background-position:center bottom; ← 背景圖位置：水平位置、垂直靠下。
padding:0 10px 60px 10px; ← 內距：上0像素、右10像素、下60像素、左10像素。
}
就會變成這樣
看起來感覺比較好~剩下右邊的了~
右側選單區(sidebar2)的設定
因為幾乎都跟左選單一樣，所以就不再一一的詳細解說了!!
sidebar2
#sidebar2{ ← ID為sidebar2的DIV標籤。
width:180px; ← 寬度：180像素。
float:right; ← 浮動：靠右。
}
sidebar2 h2
#sidebar2 h2{ ← ID為sidebar2內的標題2<h2>標籤。
background-image:url(images/sidebar1_viewmore.gif); ← 背景圖。
width:150px; ← 寬度：150像素。
height:120px; ← 高度：120像素。
text-indent:-9999px; ← 文字縮排：-9999像素(將文字外推至螢幕9999像素)。
}
sidebar2 p
#sidebar2 p{ ← ID為sidebar2內的段落<p>標籤。
background-image:url(images/list_top.gif); ← 背景圖。
width:150px; ← 寬度：150像素。
height:29; ← 高度：29像素。
line-height:29px; ← 行高：29像素。
color:#FFF; ← 顏色：白色。
font-weight:bold; ← 字體大小：粗體。
text-align:center; ← 文字對齊：置中。
}
sidebar2 ul
#sidebar2 ul{ ← ID sidebar2
width:95px; ← 寬度：95像素。
list-style-image:url(images/list_arrow.gif); ← 背景圖。
background-color:#486108; ← 背景色：深黃綠色。
background-image:url(images/list_bottom.gif);
background-repeat:no-repeat; ← 背景圖重複：不重複。
background-position:left bottom; ← 背景圖位置：左下。
margin-bottom:10px; ← 下邊界：10像素。
padding:10px 20px 15px 35px; ← 內距：上10、右20、下15、左35像素。
}
sidebar2 li
#sidebar2 li{ ← ID sidebar2 內的子清單<li>。
}
sidebar2 li a
#sidebar2 li a{ ← ID sidebar2 內的子清單超連結效果。
display:block; ← 顯示：區塊。
color:#FFF; ← 文字顏色：白色。
padding:10px 0 5px 0; ← 內距：上10、右0、下5、左0像素。
font-size:12px; ← 字體大小：12像素。
text-decoration:none; ← 文字裝飾：無(這樣就沒有超連結的底線了)
border-bottom:#91a06b 1px dashed; ← 下邊框：淡黃色、1像素、虛線。
}
sidebar2 li a:hover
#sidebar2 li a:hover{ ← ID sidebar2內滑鼠移過時的超連結。
color:#F90; ← 文字顏色：橘色。
}
完成後瀏覽一下
版權宣告區(footer)的設定
#footer{ ← ID名稱為footer的DIV標籤。
clear:both; ← 清除：兩者。
background-color:#314403; ← 背景色：深黃綠色。
}
#footer h4{ ← footer內的標題4<h4>樣式設定。
height:50px; ← 高度：50像素。
font-weight:normal; ← 字體粗細：正常。
font-size:12px; ← 字體大小：12像素。
text-align:center; ← 文字對齊：置中。(文字水平置中)
color:#FFF; ← 文字顏色：白色。
line-height:50px; ← 行高：50像素。(文字垂直置中)
}
瀏覽器的破解方法(CSS Hank)
每次設定CSS最頭痛的就是瀏覽器相容問題了，因為每個預覽緝對HTML解讀都不太一樣，Firefox和Google Chrome都算是比較規矩的，但是IE6的問題就比較大了!!這邊使用CSS Hank IE6來解決版面一位的問題。
#sidebar1 li a 與 #sidebar2li a樣式設定說明。
在CSS程式碼的後段輸入_display:inline-block; ← IE6對於垂直選單高度過大的破解。
再來就是由於footer的<DIV>標籤沒有設定寬高，所以在IE6會造成高度過大。
那在這邊就要輸入_height:1%; ← IE6對於沒有設定寬度高度的DIV破解。
都是寫在程式碼的最後一排~
一般來說只要替標籤元件設定寬度跟高度，幾乎就可以有效的解決問題了，如果不想設就用CSS Hank來做吧。
∼終わり∼