<< 最強的程式編輯軟體--記事本 | 回blog首頁 | 內置框架的背景透明 >>

2005年08月4日

頁籤教學

你的blog版面是不是太長呀?是不是文章都還沒到那麼長旁邊的欄位已經長的不得了了呢?

以前貓的版面也是那樣，不信你算算版面上欄位有幾個?(要加頁籤中的哦!有十三個哦)
那為啥我的版面，可以把三個三個欄位合成一個??

對啦，那就是因為有頁籤。


因為我不是原作者，看不習慣貓的教學的話，可以去原作者的網站哦!!按這

好啦，首先先將這個css放到你先準備好的資料夾中
另存下載：按我

接下來開一個開白的網頁(可以直接用記事本寫，Frontpage也可以)

將下面的程式碼複製貼上

<HTML><TITLE>page1</TITLE>
<META http-equiv=Content-Type content="text/html; charset=big5">
<LINK href="tab.css" type=text/css rel=STYLESHEET>
<BODY id=page1>
<UL id=tab>
<LI class=page1><A href="網址">頁籤一</A> </LI>
<LI class=page2><A href="網址">頁籤二</A> </LI>
<LI class=page3><A href="網址">頁籤三</A> </LI>
</UL>
<DIV id=content>
內容哦
</DIV></BODY></HTML>

接下來修改網頁吧!!

因為貓用的頁籤大多是三頁就ok的，所以就先三頁吧(三頁以上等下再改)

<TITLE>page1</TITLE>是你網頁上面的標題(不過因為要用在內置框架內所以也可以不用改)

<BODY id=page1>是說你目前頁籤要定在哪一個上(如第二頁呀、第三頁)

<A href="網址">頁籤一</A>接下來就直接將你網頁的預定名稱和網址寫上吧(一共有三頁可以是01.html、02.html、03.html)

<DIV id=content>內容哦</DIV>就是你這頁要出現的內容

好了，就存檔吧，記得要存成Unicode格式哦(要連存三個，網址要和上面設的一樣哦哦)

下面是三個網頁的個自的原始碼

檔名01.html02.html03.html
原始碼<HTML><TITLE>page1</TITLE>
<META http-equiv=Content-Type content="text/html; charset=big5">
<LINK href="tab.css" type=text/css rel=STYLESHEET>
<BODY id=page1>
<UL id=tab>
<LI class=page1><A href="01.html">頁籤一</A> </LI>
<LI class=page2><A href="02.html">頁籤二</A> </LI>
<LI class=page3><A href="03.html">頁籤三</A> </LI>
</UL>
<DIV id=content>
內容哦
</DIV></BODY></HTML>		<HTML><TITLE>page2</TITLE>
<META http-equiv=Content-Type content="text/html; charset=big5">
<LINK href="tab.css" type=text/css rel=STYLESHEET>
<BODY id=page2>
<UL id=tab>
<LI class=page2><A href="01.html">頁籤一</A> </LI>
<LI class=page2><A href="02.html">頁籤二</A> </LI>
<LI class=page3><A href="03.html">頁籤三</A> </LI>
</UL>
<DIV id=content>
內容哦
</DIV></BODY></HTML>		<HTML><TITLE>page3</TITLE>
<META http-equiv=Content-Type content="text/html; charset=big5">
<LINK href="tab.css" type=text/css rel=STYLESHEET>
<BODY id=page3>
<UL id=tab>
<LI class=page3><A href="01.html">頁籤一</A> </LI>
<LI class=page2><A href="02.html">頁籤二</A> </LI>
<LI class=page3><A href="03.html">頁籤三</A> </LI>
</UL>
<DIV id=content>
內容哦
</DIV></BODY></HTML>

如果你想多加幾個頁籤的話，請向下看

先將你所有的網頁打開，找到這裡

…………
<LI class=page1><A href="網址">頁籤一</A> </LI>
<LI class=page2><A href="網址">頁籤二</A> </LI>
<LI class=page3><A href="網址">頁籤三</A> </LI>

……………

就一樣，你有幾頁就加上幾頁吧(如你有五頁)(每個都要加哦)

…………
<LI class=page1><A href="網址">頁籤一</A> </LI>
<LI class=page2><A href="網址">頁籤二</A> </LI>
<LI class=page3><A href="網址">頁籤三</A> </LI>
<LI class=page4><A href="網址">頁籤 四</A> </LI>
<LI class=page5><A href="網址">頁籤五</A> </LI>
……………

每多一頁就多一行"<LI class=page*><A href="網址"></A> </LI>"(這得哦，每的網頁都要，如增加到五個就五個網頁都要這樣改)，這樣就好了

接下來就是要改css了，打開tab.css檔，找到下面

…………
BODY#page1 LI.page1 {
BORDER-BOTTOM: 1px solid #2b5695;
BACKGROUND-COLOR: #2b5695;
font-size: 13px;
color: #7CC5EA;
height: 25px;
}
BODY#page2 LI.page2 {
BORDER-BOTTOM: 1px solid #2b5695;
BACKGROUND-COLOR: #2b5695;
font-size: 13px;
height: 25px;
}
BODY#page3 LI.page3 {
BORDER-BOTTOM: 1px solid #2b5695;
BACKGROUND-COLOR: #2b5695;
font-size: 13px;
height: 25px;
}
…………

你有幾頁就把PAGE給加上(如你有五頁)

…………
BODY#page1 LI.page1 {
BORDER-BOTTOM: 1px solid #2b5695;
BACKGROUND-COLOR: #2b5695;
font-size: 13px;
color: #7CC5EA;
height: 25px;
}
BODY#page2 LI.page2 {
BORDER-BOTTOM: 1px solid #2b5695;
BACKGROUND-COLOR: #2b5695;
font-size: 13px;
height: 25px;
}
BODY#page3 LI.page3 {
BORDER-BOTTOM: 1px solid #2b5695;
BACKGROUND-COLOR: #2b5695;
font-size: 13px;
height: 25px;
}
BODY#page4 LI.page4 {
BORDER-BOTTOM: 1px solid #2b5695;
BACKGROUND-COLOR: #2b5695;
font-size: 13px;
height: 25px;
}
BODY#page5 LI.page5 {
BORDER-BOTTOM: 1px solid #2b5695;
BACKGROUND-COLOR: #2b5695;
font-size: 13px;
height: 25px;
}
…………

也就是說每多一頁就要多如

BODY#page* LI.page* {
BORDER-BOTTOM: 1px solid #2b5695;
BACKGROUND-COLOR: #2b5695;
font-size: 13px;
height: 25px;
}

因為呀，每加一頁，就要讓每一頁都有各自的css對照

改成這樣就行了，傳上你的網頁空間吧(如學校提供的空間呀、isp提供的空間呀，反正就是那種不會改檔名的就行了，樂多不行哦)(要在同一資料夾哦)

再來是開一個自由欄位，用內置框架的方法加上去(記得，內置框架的大小不可以太寬哦，不然你的欄位會被拉大)

語法如下(貓用的內置框架語法)

<iframe name="I1" width="186" height="355" border="0" frameborder="0"
src="http://你存的網址" allowTransparency = "true" scrolling="no">
</iframe>

把紅色的地方改成你自己傳上去的第一頁就好了


Posted by f85122 at 樂多Roodo! │16:33 │回應(9) │引用(0) │教學……
樂多分類：網路/3C 共同主題：讓Blog更有自己的風格 工具：編輯本文
Ads by Roodo! 

引用URL

http://cgi.blog.roodo.com/trackback/338417
回應文章
看完了...還是有點霧煞煞滴...不過..最晴天霹靂的是..“樂多”不能弄頁籤喔..〈淚〉
Posted by 火星人 at 2005年08月5日 11:24
原來我真的不會教東西(蹲在角落畫圈圈)
只要有空間就行了啦(不傳在樂多是因為樂多的檔名會改變，這樣就抓不到css和其他網頁了)
Posted by 焦貓 at 2005年08月5日 15:05
（拍拍）我是看得懂啦，不用縮角落了。
剛才在玩，把網頁丟到奇摩的空間去，
結果大概因為奇摩會加一串javascript，
我的火狐跑得出來，結果IE跑不出來= =a真是的（倒）
有哪家的網頁空間不會跑出奇怪的東西呀(滾滾滾）（思考中）
Posted by 濰泉 at 2005年08月5日 17:58
是很有用的東西，但很複雜啊！
Posted by 黛 at 2005年08月5日 22:53
會很複雜嗎???
我覺得還好……
Posted by 焦貓 at 2005年08月6日 00:26
你好，我想做的是"三種顏色水滴的連結"
像這樣的http://wendy-house.biz/sb/
想請問你說的＜A href="網址"＞
我的水滴網址會是在哪啊??(對不起喔，我很笨啦)
內容喔又是什麼??(是我的水滴語法嗎)
最後的"內置框架語法"的網址又是什麼??
麻煩你指導一下，謝謝!!
Posted by bibi at 2005年08月11日 20:12
就好像你的第一個網頁
01.htm存在http://blog.roodo.com/f85122/
那就改成
＜iframe name="I1" width="186" height="355" border="0" frameborder="0"
src= "http://blogyam.com/f85122/01.htm" allowTransparency = "true" scrolling="no"＞
＜/iframe＞
註：三個頁籤都要存在同一個網頁空間
你的小水滴的語法要打在
每個頁籤的內容
Posted by 焦貓 at 2005年08月11日 22:01
都失敗了="=
繼續努力試試看
謝謝!!
Posted by bibi at 2005年08月12日 16:11

請問大大是否可以將上面的tag用成圓角呢？
還請指教
謝謝:)
Posted by Lez at 2008年12月17日 15:14
  


回最上方