Tuesday, February 01, 2005

<小技巧>blog sidebar捲軸輕鬆加

這兩天在試著弄生活與哲學讀書會的blog,用的主要是blogspot裡的免費blog,它使用的是CSS語言,因此,下面的分享也是以CSS語言為主.在弄的過程中,發現有一些輕鬆簡單的小技巧,我覺得很實用,就先在此作個小分享:

1.blog sidebar捲軸:之前沒學過任何程式語言,也一直喜歡撿人便宜來做,雖然這樣的方式有些投機,也有人不齒這樣的行為.不過對於很多人來說,網頁設計,並不是你的本行,而後來發展了blog的形式,強調的就是要讓一般人也能上手.當然人總不容易滿足,有了網頁提供的blog格式後,也開始會想東想西,希望它能有自己的"個性",那這對於我們没學過任何編寫網頁技巧,但也想要玩玩的人,有沒有比較容易的方式進入呢?我是不是有時間,花大把的精神重新學起網頁設計語言,我有這樣的動力嗎?我想,這個問題很多人也常問自己. ..

就blog修改來說,網路實在是個有用的工具,你若知道你的疑惑,需求何在,上google去很容易找到些奇奇怪怪的資源,當然這不是說你一定可找到完全符合你疑惑的答案,但在經過篩選後,還是可以發現一點點對你有幫助的東西.這小技巧也是這兩天簡單搜尋的結果.

在講小技巧前,有幾個網站有關於CSS語言的教學,我覺得是可以先對CSS語言有一些大的觀念,你並不一定要懂所有語言要怎麼操作,但至少,先知道它的語言大概在講些什麼,而這對我們自己日後要作修改,有一些幫助.(要去偷看別人的原始碼,也比較知道要抄襲要抄哪,是吧?)用我目前非常非常粗淺的理解來看,CSS語言分成兩大部分,定義,跟內容設定,它在你開始正式編寫內容前,會先有個定義區,去把一些適用於整個網頁(or blog)大架構的語法做個"定義".下面兩個網站,可以先去把它一些談CSS大概念的文章略看一下.
網頁建置百寶箱
css技術文章

a.讓blog sidebar也有捲軸效果: blog一直有個困擾我的問題,我不喜歡整個blog因為sidebar要放很多連結與資料,而讓整個版面變得落落長,剛好看到羊男實驗的咖啡館,他在sidebar部分做了捲軸設定,這讓整個版面變得較容易整理與簡單.不過看到他在他網頁上的"聲明"後,還是得自己搜索一番..經過google搜尋後,發現幾個好用的連結:
網頁唯美派
摩尼網頁教學中心

可先連上網頁唯美派這網頁,它用圖示將捲軸的各個部位拆解,並解說,算是非常清楚.接著可到摩尼的連結,有個修改卷軸顏色的線上程式,連到裡頭後,你可以在那邊的面板上直接修改卷軸的顏色,而你可在你的網頁右邊的捲軸,直接看到你修改後的效果. 做完後,就可以依照它裡面的指示,直接複製,貼到你blog裡的設定,讓你的網頁捲軸顏色改變.

這邊問題來了,做好捲軸後,要怎麼能夠讓blog的sidebar也能有捲軸的功能?在css語法中,有一種DIV語法,它可直接在版面中產生有自動捲軸的表格,只需依照程式,就可有捲軸效果.

上面這個是一種設定,簡單來說,它就是設定好捲軸的格式,height指的是你希望你的捲軸,在內容長度超過多少後就產生,而width也是如此,你希望你的內容寬度超過多少後,就自動產生.而後面的overflow:是設定捲軸是否出現的語言,若你選auto,它會自動偵測,當你內容長度超過你前面height,width的設定後,就會自動產生捲軸,而你若填scroll;指的是不管你內容多長多寬,一定都會出現捲軸;如果你在overflow後面,填no,那它就不會出現有捲軸效果.height跟width是可由你自己設定的,單位則可以有pt,cm,inch,px,%等,由你自己的需求決定. 要怎麼簡單的作呢?通常我們blog裡都會有sidebar設定,把上面的div那行字複製後,去編寫template的地方,在你編寫你sidebar內文的地方,你可以在任何地方,貼上剛剛那個語言,在你希望捲軸出現的內容之後 打上/div(記得要在這串字前後加上 <>喔),簡單說就是結束目前的設定的意思,這樣一來,你可以任意控制sidebar中哪些部分要出現捲軸,哪些不需要.

這樣的方式可套用在其他地方. 搭配著摩尼網頁教學中心的連結設定,你除了在sidebar加入卷軸外,你也可以修改那個sidebar裡了顏色與設定,非常輕鬆簡單,就跟喝水一樣,希望這對大家在修改blog上有一點點的幫忙.以上所講的都是一種投機取巧的方式,也是目前我所會的簡單方式,這樣的方式可能也只適用於CSS語言系統,如果其他人有想到更好更簡便的方式,也謝謝你能一起分享囉.
下面是一個簡單的圖說例子:




3 Comments:

At 10:22 PM, Blogger 唐朝 said...

哈,幹得好,有空的話,順便分享放入底圖的技巧,還有啦,如果你學會改標題欄,也順便分享一下啦。

一直想說好好讀一下Help,但是我大概有英文恐懼症,一直在抵抗,哈!

不過我覺得有些東西加了捲軸就有點失去味道哩,比如留言板。

 
At 11:16 AM, Blogger Muser said...

自己搜尋一番,不就有一篇美美的教學文章出來了?
也更熟悉CSS技巧與各項設定,這不就是學習的趣味嗎?
這才是本意啊~
:D

 
At 10:35 PM, Anonymous Anonymous said...

thanks for sharing....

 

Post a Comment

<< Home