w047

          ☆申請辦法:請telnet到「無名小站BBS 0Album版」，申請帳號，過幾分鐘之後到「相簿首頁」， 登入之後就可以連結自己的相簿囉!!        

 預先說明:

色碼表選擇 色碼表1 色碼表2 色碼表3 色碼表4                                         最新公告:<請隨時注意本內容> 01.凡申請無名帳號.即日起將擁有100MB相簿空間 02.進無名BBS站超過720小時者.升級成VIP會員. 將擁有500MB相簿空間 03.留言版版主回覆新增了一個class.詳請請看教學14點

  1.CSS(Cascading Style Sheets)意義:串接樣式表                                                     

  DHTML(動態語言）=Html+Script+CSS

  觀念釐清:CSS只跟style的東西有關.也就是跟"版面"相關的東西才適用CSS

            之前在TaipeiLink教的「音樂.鎖右鍵.JAVA....etc」那些語法皆不適用

            而是主要可以改「捲軸變色.超連結按鈕圖或變色.連結跳動無底線.加外框.字型及大小...etc」

  2.基本原理:css語法是被加在大括號{....}裡面.大括號前面的英文代表著「樣式屬性標籤」。

    比如說你要改原始碼裡面body的部分.css寫法就是:body{所要更改的語法....}

  3.樣式標籤用大括號{...}包起來。樣式性質用分號;區隔。

    多重標籤同一設定以逗號,分隔，例子:h1,h2,td{.....}

    空格跟空行不影響CSS語法(跟TaipeiLink不同)。

   「重覆設定」以後者為主(ex:加了兩次的背景語法.顯示出來的結果會以後者為主)。

  4.以下語法紅色字代表你可以更改的部分.其他的請照貼到相簿編輯的樣式屬性裡面。

     ex:語法是body{....}.就把大括號裡面的語法貼進去相簿編輯裡面body後面的大括號裡面。

快速書籤:

(語法難度:★  重要性:★★★★★)

<語法>

body{
background-image : url('背景網址');
background-repeat : repeat;
background-attachment: fixed;

}

<說明>

1.進入「樣式管理」之後.把綠色跟紅色部分的語法加入body後面的大括號{...}裡面    (以下教學的語法都照這種方式貼入語法)

2.背景網址應為http://......開頭(.jpg或.bmp或.gif格式)

3.fixed表示固定背景(即所謂的浮水印效果).圖不會隨捲軸移動而移動

4.背景不重覆:no-repeat

  背景在X軸方向重覆:repeat-x

  背景在Y軸方向重覆:repeat-y

  背景圖片在平面的座標位置上出現(ex:在右下角.數字可以自己設定):90% 90%

(語法難度:★★  重要性:★★★)

<語法>

body{
SCROLLBAR-FACE-COLOR: 色碼;
SCROLLBAR-HIGHLIGHT-COLOR:色碼;
SCROLLBAR-SHADOW-COLOR: 色碼;
SCROLLBAR-3DLIGHT-COLOR: 色碼;
SCROLLBAR-DARKSHADOW-COLOR: 色碼;
SCROLLBAR-ARROW-COLOR: 色碼;
SCROLLBAR-TRACK-COLOR: 色碼;
}

<說明>

1.各色碼代表的位置

設定您喜歡的顏色	捲軸位置解說
SCROLLBAR-FACE-COLOR: #00D760            軸面顏色 SCROLLBAR-HIGHLIGHT-COLOR: #6699FF     軸面三角左邊顏色 SCROLLBAR-SHADOW-COLOR: #FF99FF       軸面三角右邊顏色 SCROLLBAR-3DLIGHT-COLOR: #FFFFCC       左立體邊顏色(軸面的旁左邊) SCROLLBAR-ARROW-COLOR: #0000FF         箭頭的顏色 SCROLLBAR-TRACK-COLOR: #CCCC99          軸軌顏色 SCROLLBAR-DARKSHADOW-COLOR: #FF0000 右立體邊顏色(軸面的旁右邊)	■ #00D760 ■ #6699FF ■ #FF99FF ■ #FFFFCC ■ #0000FF ■ #CCCC99 ■ #FF0000

2.快速方法:使用"捲軸產生器"再複製其CSS語法.連結網址如下

http://dob.tnc.edu.tw/themes/old/showPage.php?s=289&t=2&at=

3.色碼如何表示:<按此進入色碼表>

色碼都是以#號開頭.後接三組16進位數值.第一組代表紅色數量.第二組代表綠色數量.第三組代表藍色數量.。

色碼亦可以直接用英文表示.EX:black.blue.yellow....

4.網誌的捲軸設定:(直接複製以下語法貼入)

html{
SCROLLBAR-FACE-COLOR: 色碼;
SCROLLBAR-HIGHLIGHT-COLOR:色碼;
SCROLLBAR-SHADOW-COLOR: 色碼;
SCROLLBAR-3DLIGHT-COLOR: 色碼;
SCROLLBAR-DARKSHADOW-COLOR: 色碼;
SCROLLBAR-ARROW-COLOR: 色碼;
SCROLLBAR-TRACK-COLOR: 色碼;
}

<只有網誌的捲軸可以得放在html裡面;相簿留言板根個人資料的都放在body裡面>

(語法難度:★  重要性:★★★)

<語法>

BODY {border: 15px solid 色碼;}

<說明>

1.15代表「外框厚度」.請自行更改

(語法難度:★  重要性:★★★)

<語法>

input, select {
color : 色碼;                      
font-size : 10pt ;                 
background-color :色碼;

}

<說明>

1.無名的好友連結在"相簿"裡面.登入之後.在右上方有一個「連結編輯」.點進去即可增加好友。

2.第一個色碼代表「好友連結裡面的字顏色」.第二個色碼代表「好友連結的背景顏色」。

3.此語法如果用在網誌的話.則可以改"別人回覆你的文章時.填寫的那個表格".當然也一併改了"登入時輸入帳號密碼的格子"

<其他用法>將表格加入背景圖片及框框

input, select, textarea{
border:1px double 框框色碼; color : 字色碼;
font-size : 10pt;
background: 色碼 url('背景圖片網址');
font-family: "Comic Sans MS"
}

(語法難度:★★★  重要性:★★★★★)

<語法>

td { font-family: "Comic Sans MS"; font-size: 10pt; color:色碼; font-weight: bold}
a:select { font-family: "Comic Sans MS"; color:色碼}
a:active { font-family: "Comic Sans MS"; font-size: 10pt; color:色碼;cursor:crosshair}
a:link { font-family: "Comic Sans MS"; font-size: 10pt; color: 色碼; text-decoration: none}
a:visited { font-family: "Comic Sans MS"; font-size:10pt; color:色碼; text-decoration: none}
a:hover { font-family: "Comic Sans MS"; font-size: 10pt; color:色碼;position:relative;top:2px;left:2px;}

<說明>

1.這些語法不用全部貼上.因為無名預設的CSS樣式本身就有加入這些語法.請自行加入自己想更改的地方。

  最常見的改法是a:hover的部分.請詳看以下說明第八點。

2.第一段td所代表的是「整個網頁的字型.大小.顏色」

3.a:                                  「代表所有的超連結」

  a:active                            「執行中的連結」

  a:link                               「正常的連結」

  a:visited                            「參觀過的連結」

  a:hover                             「當滑鼠移到連結上的時候」

4.text-decoration: none             「連結無底線」

  position:relative;top:2px;left:2px 「滑鼠移到上面時會指向"左上".px是移動距離可以自行調整」

  (這個語法就是大家常常問的"連結跳動".就是"相片會跳動"的語法.通常加在a:hover裡面)  註:left(左) right(右) top(上) bottom(下)

5.字型屬性:

6.文字性質:

PS:5.6點的用法就是把紅色的部分改為你想改的東西(ex:改字型--> font-family:"arial";)

    或者自己加入屬性跟性質(ex:加入文字轉換--> text-transform:uppercase;)

7.※微軟預設的滑鼠游標※

cursor:crosshair                      「滑鼠游標變成"手狀游標"」

<可將crosshair改為以下游標>

8.※a:hover的改法範例※<在此提供3個範例.大家可以按照自己的想法加入語法去更改>

<語法1>當滑鼠按到超連結的時候產生「背景按鈕圖」

a:hover { background-image: url('背景網址');border: thin outset 色碼 }

註:色碼是背景按鈕外框的顏色.thin outset代表向外浮動凸出來的效果

<語法2>按到超連結時浮現dash外框並加入連結跳動

a:hover {border:2px 色碼 dashed;position:relative;top:2px;left:2px}

註:border改框的厚度.色碼是dash的顏色

<語法3>按到超連結時有"背景顏色"並向外凸出的效果

a:hover {background-color:色碼;border: thin outset}

9.<重要提醒>很重要喔!!^^真的很重要啦!!要看!!

(1)改滑鼠只要在body跟a:hover這兩項裡面放入不同的cursor語法.即可突顯出滑鼠的變化.其他超連結的相關設定不用加入滑鼠語法

(2)在你的css樣式表裡面可能沒td{...}或a{...}這些語法.但是你可以自己把整個語法都加進去

   如果你的css樣式表裡面有a:hover這些語法.在他後面的大括號內直接做修改即可

(3)你的css樣式表可能長這樣a, a:link, a:visited {......}

   這代表著對a及對a:link及對a:visited做相同的設定.跟以上語法的用法都是相同的

(4)5.6.7項的語法怎麼加??就直接加在你要更改項目的大括號裡面.記的與前面的語法要用分號;隔開

   比如說我要把#banner裡面的文字置中.則加入語法為紅色部分#banner{..........;text-align:center}

(語法難度:★★★★  重要性:★★)

<語法>僅加入在body跟a:hover即可呈現變化

body{cursor:url("cur檔圖片網址1")}

a:hover {cursor:url("cur檔圖片網址2")}

<說明>

1.body裡面放游標代表著一般時候的游標

2.hover裡面放游標代表當滑鼠移到超連結時候的游標(這兩個可以選一個也可以同時選兩個來使用)

範例1:

a:hover{cursor:url("http://benz.nchu.edu.tw/~s9163030/cssmouse5.ani")}

範例2:

body{cursor:url("http://benz.nchu.edu.tw/~s9163030/cssmouse1.ico")}

a:hover{cursor:url("http://benz.nchu.edu.tw/~s9163030/cssmouse2.ico")}

範例3:

body{cursor:url("http://benz.nchu.edu.tw/~s9163030/cssmouse3.cur")}

a:hover{cursor:url("http://benz.nchu.edu.tw/~s9163030/cssmouse4.cur")}

範例4:

body{cursor:url("http://benz.nchu.edu.tw/~s9163030/frontmouse1.ani")}

a:hover{cursor:url("http://benz.nchu.edu.tw/~s9163030/frontmouse2.ani")}

<說明>

1.圖片不可以用jpg跟gif等一般圖片.在css裡面是使用cursor檔(.cur是靜態游標，.ani是動態游標)

※製作cur游標檔※   請按此下載製作軟體

(1)先做一個gif檔(如果不是gif檔請另存新檔成GIF檔案)

(2)用這個程式開啟gif檔

(3)按另存新檔.如果是動畫就選ani.如果不是就選cur.這樣就可以轉成游標檔

<常見問題>

1.pchome跟yahoo的免費空間都不支援這種檔案.所以你上傳這種檔案上去並沒有用

  因此你要找到可以支援cur檔的網路空間或者直接連別的網站的游標檔

<NEW>自製滑鼠游標教學

http://www.wretch.twbbs.org/blog/ppkeigo&article_id=519816

(語法難度:★★★★★  重要性:★★★★★)<非常重要請仔細看>

1.先進入「CSS樣式表」(就是你要編輯CSS的地方啦..留言版.個人資料.網誌.相簿的樣式管理裡面)

2.找到#banner{....} .description(....}  .side{....}  .sidetitle{....}  .powered{....}

   先要知道這四個樣式屬性所代表的位置意義!!

範例:(留言版改法.個人資料以及相簿的改法都一樣如下)