close
logo_2.gif

對經營部落格沒興趣的請逕自跳過這篇文章,這是為了回應部分廢迷的疑惑:廢棄公主部落格的版面是怎麼來的呢?

基本上,是阿尼背後靈將樂多市場提供的版型,再用CSS編碼方式改成的喔(o⌒∇⌒o)

以下是阿尼辛辛苦苦為廢編及龍編寫的簡易教學,需要的人如果要轉載請說一聲喔!

基本概念

 

Html碼會使用<>把一些功能框住(都是半形),所以,在修改時要注意,當發現打完功能碼之後,卻沒有顯示,有可能是誤刪了<>,舉例來說:

 

阿尼是大美女,啦啦啦~

 

顯示出來應為:

 

阿尼是大美女,啦啦啦~

 

但若未正確顯示,就可能出現以下狀況:

 

阿尼是大美女,啦啦啦~

 

看到了嗎?少了右邊的>,將之加上去,就正常囉。

 

★把要指定的效果框住的是(都是半形)

例如,我想指定一段字的顏色,那麼就要這樣寫:

 

” #FFCC00”>這段字要紅色喔

 

顯示出來的結果會是:

 

這段字要紅色喔

 

★下了指令要記得「結尾」。

多數指令都是把一段文字或圖片做效果,如果沒有做結尾,就變成指令以下「全部」都呈現該效果,有時候會使網頁亂掉。所以最好都要做。

 

例如:

 

” #FFCC00”>這段字要紅色喔這是為了加強那句話。

 

顯示出來的結果會是:

 

這段字要紅色喔這是為了加強那句話。

 

若是沒有結尾的情況下:

 

” #FFCC00”>這段字要紅色喔這是為了加強那句話。

 

會變成這樣:

 

這段字要紅色喔這是為了加強那句話。

 

差不多就是這樣,現在要說明各項指令的用途。

 

■想要斷行


這是斷一行,若是

就是斷兩行。以此類推。斷行指令「不需要結尾」。

例如:

 

我想測試斷行的指令
要怎麼用才對呢

 

會顯示:

 

我想測試斷行的指令

要怎麼用才對呢

 

如果這樣用:

 

我想測試斷行的指令

要怎麼用才對呢

 

會顯示:

 

我想測試斷行的指令

 

要怎麼用才對呢

 

 

■想要把文字上色,要怎麼做呢?

想要的顏色碼”>想要上色的文字

這種指令「要結尾」。

顏色碼的表述方式為:#XXXXXX

井字後面的「XXXXXX」,是數字跟英文字母組成的,不一樣字母就是不一樣的顏色喔。

 

例如:#000000是黑色,#999999是深灰,#CCCCCC是淺灰……

 

示範一個:

 

00”>這段字要變顏色

 

會變成:

 

這段字要變顏色

 

■想要讓人按某段文字連結到某個網頁,要怎麼做呢?

網址”>欲設連結的文字

這種指令「要結尾」。

網址的表述方式為:http://..............也就是正常的網址

這邊延伸幾種指令。

當你想要讓網友點那段文字後,「跳出另一個該網址的畫面」,那麼要這樣做:

 

網址” target=”_blank”>欲設連結的文字

 

注意到加了「半形空格」與「target=”_blank”」了吧?

_blank代表跳出另一個視窗。

如果沒有下「target=”_blank”」,就是預設在原視窗囉。

 

■想要插入一張圖,要怎麼做呢?

圖所在的位置(網址)”>

這種指令「不需要結尾」。

圖所在的位置必須「在網路上」,而非在自己電腦裡唷。

所以如果是部落格,若是放在別人站上的圖片(如奇幻基地網站),就在該圖片上按右鍵,將圖片所在的網址copy下來,貼上去即可。

但若是還在自己電腦裡,就要先上傳圖片到部落格上,然後再點該圖片將網址copy下來囉。

例如:

 

這樣會插入基地締造者的小封面圖檔。

 

28f7ab48_s.jpg”>

這樣會插入部落格中的圖。

 

這邊延伸幾種指令。

當你想要讓圖位於文字的右方,而且是「文繞圖」,那就請這樣寫:

 

圖所在的位置(網址)” align=”right”>

 

注意到加了「半形空格」與「align=”right”」了吧?

代表圖片在右邊,而且是文繞圖形式。

如果你想要圖在左邊,就把right改成left,中間則是center

但如果是沒有寫algin=”這種語法,圖片預設在左邊,文字則從圖片下緣開始,而非文繞圖。

 

如果你想指定圖的大小,那就這樣做:

 

圖所在的位置(網址)” width=”多少像素” height=”多少像素”>

 

Width代表圖的寬度,height是高度,都以像素來定義,例入一般我們液晶螢幕都是1024x768像素寬,所以若你指定圖片width=”1024” height=”768”那圖片會跟螢幕一樣大。

如果你只指定寬度,那麼寬度會依你指定的大小改變,但高度會維持圖片原本的大小,所以呢,這樣圖片是會變形的。

 

■想要讓人按某張圖片連結到某個網頁,要怎麼做呢?

網址” >圖所在的位置(網址)”>

 

這種指令「要結尾」。

其實簡單講,就是把文字的連結,改成用圖片連結。

例如:

 

 

這樣的指令就是點1hs012_s.jpg這張圖,會連到1hs012_l.jpg張圖。

 

這邊延伸幾種指令。

在預設狀況下,單純用網址” >圖所在的位置(網址)”>的指令,那張設定的圖片會出現藍色邊框(就像是當文字被設了連結時,會出現底線且變成藍色字一樣)。

因為有時候看起來還挺醜的,所以可以指定將邊框消除。

可以這樣寫:

 

網址” >圖所在的位置(網址)” border=”0”>

 

我們加了「半形空格」與「border=”0”」的指令,直接把邊框消光光。

相反的如果你想要圖的邊框粗一點,那就把0改成123……數字越大,邊框越粗囉。

 

■想要把某段(個)字加粗,要怎麼做呢?

要加粗的文字

 

這種指令「要結尾」。

 

舉例來說,

 

這些字要加粗喔

 

會變成:

 

這些字要加粗喔

 

 

■想要把某段(個)字加大,要怎麼做呢?

數字>要加大的文字

這種指令「要結尾」。

 

Size之後的+符號後面的數字,從~10不等,不過很少用到6以上,會很大一個^^a

那麼所謂+1是多大呢?+2又多大呢?

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 fflightnovel 的頭像
    fflightnovel

    奇幻基地‧輕小說!

    fflightnovel 發表在 痞客邦 留言(5) 人氣()