<version:2 Update:2004/07/18>     ◎無名小站相簿語法教學◎    <by Keigo 凱哥>

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

 預先說明:

  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{....}

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

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

比較難改的是"網誌"部分.請參照  Tjun無名網誌教學 .或者參照下圖去更改標籤內的內容:

3.{....}裡面含有以下語法:

<說明>

紅色數字為框框的寬度

綠色代表框框的線條樣式

background裡面的色碼代表框框裡面的顏色(如果要改為透明=>background: none)

<超級好用>框框裡面加圖=>background-image: url("背景網址")

<補充1>凱哥英文教室:(知道這些英文之後.再去比較.就知道框框裡面還有什麼東西可以改了)

<補充2>padding(留白.設定填補空間)、margin(邊界.設定邊界距離)

這兩個用法大致相同.可以設定元素內容跟最外層邊框之間的距離。

單一設定: {padding-top: 20pt;}                 /*全部距離都是20pt*/

設定四邊: {padding: 10pt 20pt 30pt 40pt;}    /*分別為上、右、下、左四邊的空間距離*/

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

<語法>

.side {FILTER:Alpha(opacity=70);}

a:hover {position:relative;top:2px;left:2px;}

<說明>
1.在相簿的CSS樣式表裡面找到.side跟a:hover這兩個樣式屬性.貼紅色的語法進去(兩個語法都要加)

2.Opacity=70  為起始點透明度度.數字越高越透明(0~100)

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

1.XP上傳精靈:請點擊左邊會出現說明文件.上傳速度極快.再也不用使用瀏覽器上傳。

2.多種CSS樣式任你選:進入"樣式管理"之後.就會出現很多預設的樣式讓你選.最實際的改法就是選擇一個

   自己喜歡的樣式.然後再進去更改顏色.使之有自己的風格.這樣就很好看了.不需要做太多的更改.因為無

   名站長已經設計的很棒了!!

3.匯入台北林克相簿的照片及留言版功能:進入相簿或者進入留言版編輯就可以看到此項匯入功能。(有問題請去無名相簿版問吧)

4.相簿小幫手:進入相簿的樣式管理.左上方就有一個可以連入相簿小幫手的地方.所以只要照著他的指示更

  改自己想要的東西就可以了.相簿這邊的語法就可以不用動自己腦筋了。

5.相簿鎖右鍵功能及留言版僅限定會員可留言功能:進入相簿編輯以及留言版管理.就可以看到這些功能了。

   雖然鎖了右鍵.不過還是有很多方法可以破.所以請大家注意自己放到網上的照片。

6.支援部份的HTML語法:"em"  "p"  "hr"  "table"  "td"  "font"  "embed"  "center" .....(可以貼圖.音樂.flash)

   這些語法都支援.唯獨JavaScript語法因為考慮到安全性而尚未開放.詳細使用方法請看下一點說明。

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

<說明>

在TaipeiLink的相簿教學裡面所教的html語法可以應用在無名相簿上面(除了java語法外)。

當然不是貼在CSS裡面.html可以貼的位置如下:<注意注意:html語法不可以貼在css樣式表裡面.只可以貼在以下表格裡面描述的位置>

以下語法僅列出我覺得比較常用的(請更改綠色的部分即可使用).其他請參考 ∆Keigo凱哥台北林克教學∆

<語法1>音樂撥放語法

<說明>

1.◎ width改撥放器的寬度.height改撥放器的高度。

  ◎  hidden=false 是顯示撥放器.true是隱藏撥放器。

  ◎ loop=1 表示撥放一次即停止.loop=-1表示無限撥放。

  ◎ autostart=true 表示自動撥放.false則為不自動撥放。

  ◎ volume="0-100"          /*設定音量大小*/

  ◎ STARTTIME="分:秒"  /*從幾分幾秒開始撥放*/

  ◎ CONTROLS="console(一般大小) / smallconsole(小面板)/ playbutton(只顯示撥放按鈕) / pausecutton(只顯示暫停按鈕) /

     stopbutton(只顯示停止按鈕) / volumelever(只顯示音量調整鈕)"

2.網路空間要夠快(pchome免費空間太慢).否則音樂會連不上.可以去天馬音樂網之類的試聽網站連連看(也可以找midi檔或wmv檔)

3.可能會造成視窗關閉的結果.那是你電腦本身的問題.不是語法的問題(如果是rm檔要裝realone或realplayer)

  建議方法:更新realone.如果還是不行的話.那我也沒辦法了!!!

<語法2>貼文字與圖

(1)<FONT COLOR="色碼"><FONT SIZE="2">你想說的話</FONT>

貼文字部分:若是要隔行,就在兩個語法中間打上<center>（置中）或<br>（換行)。亦即"只要在下一個語法前面打上<center>或<br>.下一個語法的圖或文字就不會跟在前一個語法的圖或文字後面。

(2)<IMG SRC="網址">

貼圖片的方法補充:

文字html編排:

<語法3>超連結

<語法4>MTV及Flash撥放

<EMBED src="網址" WIDTH=600 HEIGHT=400></embed>

<語法5>計數器

<img src="http://counter.nsysu.edu.tw/Count.cgi?dd=14" >

<說明>

1.由中山大學http://www.enc.hlc.edu.tw/study/counter.htm免費提供(請自行進去選擇想要的計數器.更改數字14換成其他型式計數器)

2.參數設定說明:(上面說明網頁裡面的下方有提供其他參數)

  只要在數字後面加上"&".就可以加上其他參數設定了

  EX:設定起碼顯示6位數(md參數).如果前面沒數字會自動補0(pad參數)

  <img src="http://counter.nsysu.edu.tw/Count.cgi?dd=14&md=6&pad=Y">

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

(1)製作banner教學

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

(2)GIF動畫製作banner

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

(3)相片修改-皮膚美化去痘

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

(4)批次壓縮照片

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

(5)圖片遮罩+摟空文字

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

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

1.網頁當掉進不去??

ans:如果等待24小時.無名小站沒有自動幫你修復.請安裝mozilla這個軟體.用這個瀏灠器登入你的相簿.把你貼的html語法刪掉或者更正錯誤。

      通常會出現這種錯誤都是html語法亂貼.像是貼flash或音樂的語法錯誤造成的。

2.留言部分是否可以貼html語法?? ans:因為涉及到整個網路安全性，所以目前先不開放html語法在留言版那部份。

3.怎麼設定個人資料的圖片??

ans:先進入相簿設定每本相簿的封面.跳出來顯示各個相簿的封面那頁面之後.選擇你要的封面.按上面的"設為封面".

     就可以設定封面圖片。(個人資料封面的圖片可以為動畫檔.即GIF檔)

4.背景圖片顯示不出來??

ans:(1)檢查你的圖片是否正確.按下去妳的圖片網址看看是否有圖片可以出現

       注意如果要用無名相簿的照片當背景.圖片的網址絕對不昰上方瀏覽器列的網址

       正確的圖片網址是在妳的照片上面按右鍵選內容.所出現的那個才昰正確網址

       EX: http://www.wretch.twbbs.org/album/show.php?i=ppkeigo&b=10&f=1071108374.jpg(錯誤格式)

            http://p.pic.wretch.twbbs.org/./photos/p/ppkeigo/10/1071108374.jpg             (正確格式) 

     (2)如果網址沒錯.請檢查每個語法是不昰都有用分號;隔開。看看語法是不是有被大括號{...}包圍住.或者重複出現括號。

           如果還是沒錯.請按重新整理或者按ctrl+F5或者重新開網頁。個人經驗更改相簿的語法會比較慢才出來.所以如果確定

          自己語法沒問題的話.請等一下吧。

5.密碼確定沒有錯.可是不能登入??

ans:你必須至少3個月去過無名小站bbs.否則你的id會被刪掉.相簿雖然還在.可是因為沒有這個id所以進不去。

       因此請你重新去申請相同的id然後就可以登入了。但是如果你真的很倒楣.有人在這段時間申請這個id的話.

      那你的相簿就會變別人的。這個故事告訴我們要常常去無名小站bbs.畢竟它提供了我們這麼好的相簿。

6.怎麼修改密碼以及看自己掛站的時間??

ans:進去無名小站bbs-->(U)ser 【 個人設定區 】->(I)nfo 設定個人資料 -->修改密碼

7.改相簿標題的顏色.改"XX張照片"的顏色??

ans:相簿標題是採用"超連結" .a:在css就是代表對所有超連結。所以改:

      A:link {COLOR: 色碼} A:visited {COLOR: 色碼} A:active {COLOR: 色碼}

     改相簿標題下面的"XX張照片"的顏色就是跟BODY的顏色有關了-->BODY{COLOR: 色碼}

<語法>

.powered {visibility:hidden;}

<說明>

1.".power"上面已經說明過.就是改下面廣告的東西

2.當然不要每一個版面都去掉廣告.這樣自己怎麼登入啦^^(記的留ㄧ個版面可以登入)

  哈哈!!如果不是爲了版面的美化.就幫無名多打廣告吧~~~

<語法>

.replyside{語法}

<說明>

1.請自行貼入你設計的語法.就像重新設計一個新的side裡面的東西一樣

2.最快速而且不破壞版面的方法:

進入留言板管理的CSS樣式表-->複製.side{....}這一整項的語法-->貼入CSS樣式表最下方-->把.side改成.replyside即可

-->(自己把裡面的color換色或者換字型就不錯看了)

相關連結:

素材圖片:

css教學網站及相關BBS:

後記:(初發表:2004/04/23)

做老師的都會說"書是死的.人的腦筋是活的".

這句話也反應到了"語法"的世界."語法是死的.你的腦筋你的創意你的想法才是活的"

今天keigo教你語法.並不代表你對這些東西沒天份.也不代表你做的相簿會比keigo差

只要你肯用心學每一個重點.更重要的是加入自己的idea去設計屬於自己風格的相簿

很快的.你再也不用去羨慕別人有漂亮的相簿了!!^^

當然.更要感謝辛苦的無名站長們!!and不要濫用相簿喔~~~~         BY KEIGO 2004/07/09

更新說明:

2004-07-31 第11項教學改為相片修改與製作.新增三項教學內容

2004-08-12 第11項教學新增兩項教學

                         你是第 參觀凱哥的教學者!!謝謝你的支持喔~~~

還是那句老話!!包子..祝妳每天都開開心心的沒有煩惱..也要平平安安的喔..妳一定可以很幸福的~~~甲又~~^^