因為沒時間加上懶,所以暫時不想設計自己的BLOG
不過套用固有的版型又無法滿意,所以使用最接近需求的版型來做微調
順便,簡介一下CSS語法修改的方法,我這裡要借助DW,dreamweaver 網頁編輯程式
基本上,CSS就是網頁穿的衣服
像我這樣不是要重做一件的話,要改是很快的
唯一的麻煩在於衣櫃不是你指定的,要找出放衣服的衣櫃很麻煩,所以分享一個簡單的CSS分析方法
學會怎麼分析BLOG 的CSS結構,以後不管是無名、痞客或是BLOGER就都可以輕髮的修改啦
CSS的語法架構大約是長這樣
由一個樣式名(.title)+一組包含框 {}
中間有許多項目屬性的參數指定用;來分隔
.title {
font-size:12px;
font-family:arial, Century Gothic;
line-height: 160%;
background:#e9faff url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dacf25b7d67.png) left top repeat-x;
}
上面那段語法翻譯成中文就是
樣式衣櫃叫做 title 包括以下的衣服
字級是12。
字型是arial, Century Gothic。
行高是160%。
背景是顏色e9faff 圖片網址(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dacf25b7d67.png) 靠左 靠上 橫向重複。
以上
所以最簡單的修改方式就是,先把整個網頁抓下來XD
在要改的網頁按最上方的檔案>另存新檔>完整
再來打開dreamweaver,切換到分割,也就是程式碼和網頁檢視各一半的地方
在下方的設計畫面中,移到想改的位置,就可以在程式碼的部分看到該段的語法
接下來,在想修改的地方往前找,尋找class=”000000″
也就是樣式衣櫃=.0000,找出這個樣式
比如我要改,回覆的地方的圖,我在視窗裡點了之後,往回看程式的語法,就看到
<li class=”reply-text”> ,這個 reply-text 就是這一段的CSS屬性衣櫃名
有可能是被<li>或是<div>之類的標籤包圍著,像<li class=”000″>或是<div class=”000″>
找到了之後就能開始下一步,正式的修改了
確定好要改的樣式叫什麼名字之後,回到BLOG的樣式設計後台
選擇樣式設計精靈,再用ctrl+f 找到CSS中那個樣式的名字
看到熟悉的 .reply-text了吧~
下面被{}包圍的部分就是整個區塊的指定樣式了
接下來就看你想改什麼囉~
CSS中屬性的指定方法是
項目 : 參數質值;
比如 color : #000000 ;
就等於,顏色 是 黑色 。結束
樣式衣櫃的名字可能有無限多(在設計網頁時是可以自己隨便取名的,在BLOG裡則是BLOG設計師已經取好名字了)
但是項目和參數值都是固定的(就像衣服的種類固定一樣 XD)
網路上有很多提供表可以查詢對照的地方
只要對照表上的項目,再參考這個項目可以附加的屬性,就能依自己的想法來設定BLOG的衣服囉~
比如你要改字的顏色、大小,你就去查設定字有哪幾種項目,他們有什麼屬性可以使用
你大概會找到font、text-align….之類的項目
然後會發現有幾種屬性可以使用,如:
font : 字型的名字; 翻成中文
字型是新細明體。
text-align: left; 翻成中文
字型對齊是靠左。
或是
border: red;,翻成中文就是
表格框線是紅色。
以此類推,就能設計屬於自己的BLOG囉~
我竟然沒想到可以由dreamweaver來找。。
之前對照架構圖,找個半死。
它中文每個字都認得,卻一點也不懂它在說什麼。。
用dreamweaver來找,就簡單多了。。。
果然是專家!!
版主回覆:(06/06/2009 01:09:43 AM)
我是覺得換一個BSP就要重新研究他的CSS架構,實在太累了
才想到可以用DW來幫忙找的,不然誰知道他網頁裡面的區塊取了什麼名字啊 XD
其實我最想幹的是把側邊欄弄到網頁兩側。
但聽說假如不是用原本就分兩行的去改的話。
會調到死….
因此就放棄了QQ
版主回覆:(06/06/2009 01:52:35 PM)
當然啦…原本沒有手的地方,要把另一隻手折過去…
肯定要花很多工的= =
所以有的後台是會設計幾個大版型讓人切換,沒有的話,就不太好改了
不過你這麼提,我倒是想挑戰看看 XD
對我來說好難喔!直接投降~
版主回覆:(06/06/2009 03:32:16 PM)
不會很難啦,一開始我自己也搞不懂
但是冷靜下來觀察就發現也沒那麼難理解的~
雖然沒有語法基礎是很容易嚇到 XD
嗯….點我的頭像連結到我的網誌後。
按下右鍵選擇檢視原始碼,複製貼上後就可以了www
期待你幫我改成兩行喔XDD
改完後就算我不滿意我還是會說一聲辛苦的(光速逃)
ps.你回覆真快@@
版主回覆:(06/07/2009 06:06:27 AM)
可能因為我剛好還在從巴哈搬文章,所以一直在站上
不用太期待比較好,我很容易分心滴….
如果有試出來會和你說的 ^^
CSS教學-給初心者的BLOG微調
因為沒時間加上懶,所以暫時不想設計自己的BLOG
不過套用固有的版型又無
剛打了一堆,結果留言失敗。。註定我要長話短說了。
我想請教一個問題
不是部落格,而是單純網頁製作上的問題。
假設 做出左右兩個區塊Div , 左是menu 右是內容區。
若是不使用下面這兩種方法
1.使用 隱藏、顯示圖層, 讓連結的內容出現在 右邊區塊的位置。(這樣只用掉一個page完成全部內容,但內容一多好像挺麻煩。)
2.在右邊內容區放入內置框架(頁框),讓連結目標出現在頁框。(這樣子有多少連結就用掉多少page )
假設不使用上面兩種方法,有沒有比較建議的好方式? (不考慮美觀 版型 和內容多寡,只考慮呈現的效果達成就可)
版主回覆:(06/07/2009 06:08:14 AM)
我覺得用2的方法就好了
因為page多就網站而言反而是好事啊~
所有的東西都擠在同一個page,不管是對顯示還是網站規模來說都不是什麼好選擇
感謝你喔
其實、我就是在想
除了這兩個方法,還有沒有更好的方式。。呵呵
【轉貼】CSS教學-給初心者的BLOG微調
因為沒時間加上懶,所以暫時不想設計自己的BLOG
不過套用固有的版型
其實有^^
小妹路過剛好看到^^"
所以就順道回復一下了^^
使用css之中的這個語法
position:absolute;(此語法稱為絕對定位)
然後在使用
top left right bottom下去控制
可以完美的控制到你的定位而不需要使用任何的框架來填滿^^
謝謝~
(尚未設定標題)