ONE PLUS 咖啡網
完成檔如下
那在這個範例呢~
首先我們要開個index.html的檔案!!
那標題名稱我們就打” OnePlus_咖啡網”。
那CSS就打layout.css(就是布局的意思)。
這樣前置作業就算打好了。
設定DIV標籤
先包一層DIV id=wrapper【包覆(google翻譯是包皮)】然後內部再建5個DIV
分別為
“header"(標題區)、
"sidebar1"(左側選單區)、
"content"(內容區)、
"sidebar2"(右側選單區)、
"footer"(版權宣告區)
這樣方便辨認。
DIV id=” header”
那首先我們先把上面的按鈕>關於我們、菜單、線上預約、咖啡藝廊、聯絡我們。
加上「項目清單
，就是ul，然後那幾個選單就是li。」
OnePlus Coffee>要選標題1就是h1。
共享悠閒生活的好時光•來杯濃醇香的好咖啡／The best coffee.Let´s take a coffee break.>標題2>h2。
不論白天或是夜晚，不論出外還是在家，或許眾多好友熱鬧相聚，或許獨自一人享受寧靜，任何時刻及任何地方，都有說服自己好好享受一杯咖啡的時間。>段落>p。
DIV id=”sidebar1”
將左攔區>”回憶美好時光”設為標題4>h4。
DIV id=”content”
最新訊息│News&Notjce>標題2
然後在”常用”那邊插入”表格”
然後分別把內容置入
DIV id=”sidebar2”
來電可享預約折扣15%>標題4(h4)
折價券
會員獨享
免費宅配
這3個則是項目清單。
DIV id="footer"
版權內容的文字
OnePlus Coffee>標題2(h2)
台北市中山北路八段888號 TEL：(02) 8866-8621 ／ FAX：(02) 8866-8622>標題4(h4)。
copyright (c) 2008 ONEPLUS. all rights reserved>標題4(h4)。
超連結設定
首先我們要做aboutus.html、menu.html、reservation.html、gallery.html、contact.html五個檔案。
再將
菜單連結→menu.html
線上預約連結→reservation.html
咖啡藝廊連結→gallery.html
聯絡我們→contact.html
設定CSS
首先先將所有標籤的內距(padding)跟邊界(margin)都設0。
*{
padding:0;
margin:0;
}
再來就是替整張網頁設定背景色、上下內距、文字顏色。
body{
background-color:#333; ← 背景色：深灰色。
padding:30px 0 30px 0; ← 內距：上30像素、右0像素、下30像素、左0像素。
color:#FFF; ← 文字顏色：白色。
}
還要替wrapper的<DIV>標籤，設定寬度、邊界、背景圖。
#wrapper{
width:980px; ← 寬度：980像素。
margin:0 auto; ← 邊界：上下為0像素、左右為自動(整個DIV置中)。
background-image:url(images/wrapper_bg.jpg); ← 背景圖。
}
完成圖
標題區(header)
首先先替<div>為header設定背景圖、高度及內距。
#header { ← ID名稱為header的<div>樣式說明。
background-image:url(images/header_bg.jpg); ← 背景圖設定。
height:450px; ← 高度：450像素(與背景圖同高)。
padding-left:200px; ← 左內距：200像素(將div內所有文字內容像內推200像素)。
}
設定項目子清單為橫向排列，而且沒有項目符號。
#header li { ← header內的項目子清單樣式說明。
float:left; ← 浮動：靠左(每個子清單都呈現浮動狀態後，靠左排列成一排)。
list-style-type:none; ← 項目符號類型：無。
}
替項目子清單設定超連結樣式。
#header li a { ← header項目子清單的超連結。
display:block; ← 顯示：區塊。
background-image:url(images/header_icon1_1.jpg); ← 背景圖。
width:110px; ← 寬度：110像素。
height:90px; ← 高度：90像素。
text-indent:-9999px; ← 文字縮排：負數則向螢幕外推至9999像素(就是將文字隱藏)。
}
替項目子清單設定滑鼠移過時的超連結樣式。
#header li a:hover {
background-image:url(images/header_icon1_2.jpg); ← 背景圖。
}
F12預覽滑鼠移過去確定會更換影像就代表沒問題了。
替header內的標題1(h1)設定樣式。
#header h1 { ← header內的標題1樣式說明。
float:left; ← 浮動：靠左(浮動後，排列到橫向選單後面)。
background-image:url(images/header_logo.png); ← 背景圖。
width:220px; ← 寬度：220像素。
height:90px; ← 高度：90像素。
text-indent:-9999px; ← 文字縮排：負數則向螢幕外推至9999像素(就是將文字隱藏)。
}
替header內的標題2(h2)設定樣式。
#header h2 { ← header內的標題2設定樣式。
background-image:url(images/header_title.png); ← 背景圖。
width:510px; ← 寬度：510像素。
height:90px; ← 高度：90像素。
text-indent:-9999px; ← 文字縮排：-9999像素(將文字外推至硬木外9999像素(隱藏))。
position:absolute; ← 位置：絕對座標(將整條標題2轉換成圖層狀態)。
}
那點選到設計模式，選取整條”標題2(h2)”，直接拖曳到適當的位置。
這裡是上337px 左434px 調整好後他就會在中央咖啡杯那裏了。
那預覽器預覽絕對會移位，那是因為標題2所設定的是『絕對座標』。
所以要在header新增position:relative;。
#header { ← ID名稱為header的<div>樣式說明。
background-image:url(images/header_bg.jpg); ← 背景圖設定。
height:450px; ← 高度：450像素(與背景圖同高)。
padding-left:200px; ← 左內距：200像素(將div內所有文字內容像內推200像素)。
position:relative; ← 位置：相對座標。
}
那由於h2設定position:absolute;後，即變成AP元素，只需將h2上層元件(就是header)，
新增position:relative;就好啦~
然後我們要替header的段落(p)設定樣式。
#header p { ← header內的段落(p)樣式。
font-size:12px; ← 字體大小：12像素。
width:510px; ← 寬度：510像素(與標題2同寬)。
position:absolute; ← 位置：絕對座標(將整廷段落轉為圖層狀態)。
}
再把它拖曳到標題2的下方，這裡是「上426、左430」
拖曳玩了之後看起來會很擠!!所以我會在手動排一下位置。
標題2>上305、左430。
段落>上410、430。
存檔之後瀏覽一下吧!!
然後是替header li a設定，因為所有項目子清單都被設為同一張圖片；請重新替各個項目子清單。
以便單獨設定。
那首先我們就要切回程式碼，替5個項目子清單分別命名Class名稱。
再點選到CSS。
#header li a {
display:block;
background-image:url(images/header_icon1_1.jpg);
width:110px;
height:90px;
text-indent:-9999px;
}
在這裡按照li的class所命名的樣式分別輸入。
#header li.aboutus a{
background-image:url(images/header_icon1_1.jpg);
}
#header li.aboutus a:hover{
background-image:url(images/header_icon1_2.jpg);
}
這邊可以直接複製4次，然後再更改名子就好了。
#header li.menu a{
background-image:url(images/header_icon2_1.jpg);
}
#header li.menu a:hover{
background-image:url(images/header_icon2_2.jpg);
}
#header li.reservation a{
background-image:url(images/header_icon3_1.jpg);
}
#header li.reservation a:hover{
background-image:url(images/header_icon3_2.jpg);
}
#header li.gallery a{
background-image:url(images/header_icon4_1.jpg);
}
#header li.gallery a:hover{
background-image:url(images/header_icon4_2.jpg);
}
#header li.contact a{
background-image:url(images/header_icon5_1.jpg);
}
#header li.contact a:hover{
background-image:url(images/header_icon5_2.jpg);
}
到此
#header li a:hover {
background-image:url(images/header_icon1_2.jpg);
}
三欄式版型設定
前置作業。
/* ======= 左欄區 ======= */
#sidebar1 { ← ID名稱為sidebar1的DIV樣式。
width:350px; ← 寬度：350像素。
float:left; ← 浮動：靠左。
}
/* ======= 內容區 ======= */
#content { ← ID名稱為content的DIV樣式。
width:280px; ← 寬度：280像素。
float:left; ← 浮動：靠左。
}
/* ======= 右欄區 ======= */
#sidebar2 { ← ID名稱為sidebar2的DIV樣式。
width:350px; ← 寬度：350像素。
float:left; ← 浮動：靠左。
}
/* ======= 版權宣告區 ======= */
#footer { ← ID名稱為footer的DIV樣式。
clear:both; ← 清除：兩者。
}
左攔區(sidebar1)的設定
先替左攔區設定左內距20像素，使全區內部的所有內容的左方產生20像素的內距，所以要將原本350去掉20像素。
#sidebar1 { ← ID名稱為sidebar1的DIV樣式。
width:330px; ← 寬度：330像素。
float:left; ← 浮動：靠左。
padding-left:20px; ← 左內距：20像素。
}
#sidebar1 h4 { ← sidebar1內標題4(h4)的超連結樣式。
background-image:url(images/sidebar1_notebook.png); ← 背景圖。
width:315px; ← 寬度：315像素。
height:230px; ← 高度：230像素。
text-indent:-9999px; ← 文字縮排：-9999像素；(將文字外推至螢幕外9999像素(隱藏))
}
多了那本書…
內容區(content)的設定
#content { ← ID名稱為content的DIV樣式。
width:280px; ← 寬度：280像素。
float:left; ← 浮動：靠左。
}
#content h2 { ← content內的標題2樣式。
background-image:url(images/content_news.png); ← 背景圖。
width:240px; ← 寬度：240像素。
height:36px; ← 高度：36像素。
text-indent:-9999px; ← 文字縮排：-9999像素(將文字外推至螢幕外9999像素)。
}
這樣”最新訊息”文字就變成圖片。
然後下面的表格設定
#content table { ← content內的表格(tabe)樣式。
width:100%; ← 寬度：100%。
}
#content table th { ← 表格內的列標題樣式。
background-image:url(images/content_arrow.gif); ← 背景圖。
background-repeat:no-repeat; ← 背景圖重複：不重複。
background-position:5px center; ← 背景圖位置：水平座標5像素、垂直置中。
padding-left:20px; ← 左內距：20像素。
font-size:14px; ← 字體大小：14像素。
line-height:25px; ← 行高：25像素。
text-align:left; ← 文字對齊：靠左(列標題文字預設為水平置中)。
font-weight:normal; 文字粗細：正常。
color:#ffff99; ← 文字顏色：淺黃色。
border-bottom:#FFF 1px dashed; ← 下邊框：白色、1像素、虛線。
}
#content table td { ← 表格內的儲存格樣式。
color:#FFF; ← 文字顏色：白色。
font-size:12px; ← 字體大小：12像素。
border-bottom:#FFF 1px dashed; ← 下邊框：白色、1像素、虛線。
}
這樣子中央的內容區就算好了
F12預覽看看。
右欄區(sidebar2)的設定
替右欄區設定左內距10像素，使全區內部所有內容的左方產生10像素的間距，所以原先的350像素，必須減去10像素，也就是340像素。
#sidebar2 { ← ID名稱為sidebar2的DIV樣式。
width:340px; ← 寬度：340像素。
float:right; ← 浮動：靠右。
padding-left:10px; ← 左內距：10像素。
}
設定標題4的背景圖、寬度、高度及文字縮排。
#sidebar2 h4{ ← sidebar2內的標題4樣式。
background-image:url(images/sidebar2_sale.png); ← 背景圖。
width:320px; ← 寬度：320像素。
height:110px; ← 高度：110像素。
text-indent:-9999px; ← 文字縮排：-9999像素(將文字推向螢幕外9999像素(隱藏))。
}
將項目子清單設定為”橫向排列”，並設定樣式。
#sidebar2 li { ← sidebar2內的項目子清單樣式。
float:left; ← 浮動：靠左(橫向選單)。
list-style-type:none; ← 項目符號類型：無。
background-image:url(images/sidebar2_coupon.png); ← 背景圖。
width:90px; ← 寬度：90像素。
height:90px; ← 高度：90像素。
text-indent:-9999px; ← 文字縮排；-9999像素(將文字推向螢幕外9999像素(隱藏))。 background-right:#600 1px solid; ← 右邊框：深咖啡色、1像素、實線。
}
替項目清單設定整體樣式。
#sidebar2 ul { ← sidebar2內的項目子清單樣式。
overflow:auto; ← 溢位：自動。
border-left:#600 1px solid; ← 左邊框：深咖啡色、1像素、實線。
margin-left:20px; ←左邊界：20像素。
}
解說：至所以設定overflow:auto;的原因，是因為子清單<li>設定浮動後，項目清單<ul>高度會自動閉合，所以設定邊界及邊框將會無法產生效果，設定此項可以自動抓取高度；也可以自行設定<ul>的高度。
好了就按F12瀏覽一下。
然後再折價劵那邊都一樣，所以要仿照<header li a>設定法。
一樣先替3個li做class。
然後再到CSS輸入…
#sidebar2 li.coupon{
background-image:url(images/sidebar2_coupon.png);
}
#sidebar2 li.member{
background-image:url(images/sidebar2_membership.png);
}
#sidebar2 li.free{
background-image:url(images/sidebar2_freedelivery.png);
}
Ps.#sidebar2 li 的 background-image:url(images/sidebar2_coupon.png); 可以刪掉也可以不用刪。
我是把它刪掉啦~因為字元也會增加一些檔案空間大小，雖然只有一點點你可能會覺得無所謂，但是一旦資料多時，就很大了。
F12在瀏覽一次…
版權宣告區(footer)的設定
此區的設定跟原來的不太一樣，那我就依我的來做說明。
#footer{← ID名稱為footer的DIV樣式。
clear:both; ← 清除：兩者。
height:50px; ← 高度：50像素。
}
#footer h2{ ← footer內的標題2樣式。
background-image:url(images/footer_logo.png); ← 背景圖。
width:140px; ← 寬度：140像素。
height:40px; ← 高度：40像素。
text-indent:-9999px; ← 文字縮排：-9999像素(將文字推至螢幕外9999像素)。
float:right; ← 浮動：靠右。
}
#footer h4{
font-size:12px; ← 字體大小：12像素。
color:#FFF; ← 文字顏色：白色。
text-align:center; ← 文字對齊：中央(水平置中)。
font-weight:normal; ← 字體粗細：正常。
line-height:50px; ← 行高：50像素(文字垂直置中)。
}
瀏覽器的破解方式(CSS Hank)
IE是個問題多且又多人使用的瀏覽器，所以當IE6的預覽效果，原本透明的PNG檔案會全部產生灰色的背景，那解決的方法如下。
輸入網址:http://www.twinhelix.com/css/iepngfix/、下載iepngfix.zip。
把blank.gif、iepngfix.htc、iepngfix_tilebg.js移到網站所在的資料夾中。
開啟iepngfix.html，將How To Use下方第2點內容中的原始碼：
img, div, a, input { behavior:
url(/css/resources/iepngfix.htc) }
複製到layout.css檔內
CSS樣式設定說明：
h1,h2,h3,h4,li{behavior:url(iepngfix.htc)} → 就是有使用到PNG的標籤皆需設定。
blank.gif、iepngfix.htc、iepngfix_tilebg.js檔案如果放在資料夾裡面的話只需再檔名前輸入資料夾名稱即可，就是「相對路徑」。
再將<script type="text/javascript"
src="iepngfix_tilebg.js"></script>複製。
貼到原始碼<head>與</head>。
然後由於右欄區的項目清單<ul>並沒有設定寬高，當項目子選單<li>浮動後，在IE6也會造成<ul>閉合現象(overflow:auto;無法解決IE6的問題)，如此也看不到<ul>設定的左邊框。
#sidebar2 ul { ← sidebar2內的項目子清單樣式。
overflow:auto; ← 溢位：自動。
border-left:#600 1px solid; ← 左邊框：深咖啡色、1像素、實線。
margin-left:20px; ←左邊界：20像素。
/* -----IE6 Hank----- */(方便辨識)
_height:1%; ← IE6對於沒有設定寬度或高度的<ul>的破解。
}
由於我這台電腦沒有IE6所以就不拍照給大家參考了
∼終わり∼