網路城邦
上一篇 回創作列表 下一篇   字體:
不可不知道的秘密(模版語法教學 之一)
2011/12/01 06:24:07瀏覽2661|回應41|推薦152
引用文章文章裡改變山頭和背景語法

前徵詢了格友們要不要改版之事,謝謝格友們的熱烈回應,由各位的回應中探討出來,喜歡格子的底色是白色的佔了百分之九十以上。其中很多格友像john5438寬心老師,聯合國等格友都有提建議,謝謝您們。後來遠同老師一語道破了我心中的困惑。他說:『小姐,黑色與白色這之間還有百萬個顏色可以用啊!純黑和純白真的看來很傷眼力。我們學學做個體貼的格主,來設計出讓人舒適又喜愛的畫面,以回報格友來訪的心意!』我一直侷限在底色的黑與白之間,為什麼就沒想到來個變裝秀?問題出在哪呢?說穿了就是我不懂語法,也就是模版管理裡面那一長串似懂非懂的天兵文字。於是潛入遠同老師家裡,研究他日前的文章文章裡改變山頭和背景語法,正在摸不著頭緒又不好意思開口求援的當中,遠同老師捎來了好幾道魔法教學。後來我這天兵學生問了很多蠢問題之後,老師決定開設網路一對一的教學;過程很緊張喔,因為老師很嚴格,為了確定每個步驟都要真得懂了,可是會放回馬槍/抽考。我這名天兵也不是省油的燈,卯起勁來,挑燈夜戰,果然就做出了非黑非白的背景圖,還不是單一色的唷,也可以放進自己的照片當背景圖。您要不要也來試試看啊?我這不懂電腦的OBS都可以了,還有誰不行呢?容我先點名NJ過客 (遊ing),我做出來了,您的程度比我好太多,您一定也可以!

首先進入模版管理,以前我都是點選用各種主題瀏覽喜歡的版型,然後換上自己的照片當山頭圖。這次我還是先選自己喜歡的模版, 

這次我選了這個淡淡的紫色系列,然後按《讀取選用各種主題這個模版的所有語法複製下來(按右鍵)先存到Word檔裡,或是電腦裡的notepad,沒有這些軟體的也可先暫存在您email的草稿夾裡,再按編輯自定樣式把原先裡面的語法全部刪除,再將剛剛複製過的語法重新存回來模版管理的白色框框裡面。
/* ----------【背景大底圖】-------------- */
body {
    background: #EBD8FF url(http://dl.dropbox.com/u/36056521/cloud) no-repeat; /* 背景圖 */
    text-align: center !important;/* 居中 */
        background-attachment: fixed; /* scroll or fixed */
        background-position: 50% 50%;/* 背景位置 */
}
#container {
    MARGIN: auto !important;
    background-image: url()!important;/* 背景圖 */
    background-repeat: no-repeat;
   
}

這段語法就是可以更改整個格子背景的重要語法。

#EBD8FF 這是代表背景的底色,

 
Selected color:

您可以到這裡選擇您喜歡的顏色顏色的選擇和對應的數字代碼

先點選上面的彩圖顏色,右邊就會出現一串的家族色系(同色系但色差很些微)選按顏色後,旁邊就會出現6個由英文字母和數字組合的代碼,這就是您所選的底色了。將這代碼複製回來放入上面的background:#??????(這六碼就是您要放進去的代碼)

代碼後面的url(…)就是您可以放圖的地方,若要素色底就將()裡的文字全部刪除便可以了。若要放圖,您可以將圖上傳到您UDN的相簿裡,或是坊間有些讓您可以免費存取照片的網站,如dropbox.combox.net 請注意,得存放在公開的檔案裡,要不然只有自己得格子有圖別人看到的是沒圖的。確定您喜歡的照片出處後,複製整個出處(比如我的背景是雲,是存放在dropbox裡面,我要放進()內的就是這張圖http://dl.dropbox.com/u/36056521/cloud


↑這是我的原圖,將下半部切除,只留左上半邊的雲,再做過淡色處理(加強曝光或是柔焦都可以)

↑修改後的圖片。您可以直接上傳到UDN的相簿,也可存入外面的免費儲存空間。為了要求圖的品質好,並可以涵蓋整個大銀幕,因此遠同老師建議改為1920 X 1200的尺寸。接著將圖的出處url,複製到()裡面。

no-repeat; /* 背景圖 */

這句語法就是決定要不要讓背景重覆,因為已用了大圖,所以改為no-repeat;如果是用小小的圖,便可以用repeat,讓整個版面無限延伸。

text-align: center !important;/* 居中 */
這是決定文章要在中間還是要偏右偏左

background-attachment: fixed; /* scroll or fixed */

這個語法是要選擇背景圖是固定還是可以轉動的,
單張圖就用fixed固定圖的位置,小張的重覆圖形也不需要改,因為我們已經在上面那句語法repeat; /*背景圖 */將圖重覆了,所以這裡還是用固定fixed即可

background-position: 50% 50%;/* 背景位置 */
這個很重要,一般的模版都是0% 0%; 也就是從整個銀幕的左上角開始往右下方延伸,老師建議改成50% 50% ; 便是由電腦螢幕中心點往四面延伸。

}

#container {
    MARGIN: auto !important;
    background-image: url()!important;/* 背景圖 */
    background-repeat: no-repeat;
 
}

這組語法就照著抄,但url()裡面的圖形要去掉,
那就是擋在文章兩旁的框欄,刪除後,整個版面就沒有分區塊了。有一點非常重要:原來語法裡可能有background-color:#??????;/*背景色*/,這一行要整個刪掉,不然那文章區塊裡的背景顏色還會在,這樣就無法透視出整個背景圖,那限制版面的兩旁框欄還會顯示著。但是注意別刪了其後的大括號 } 了!

這些語法中間的符號如;號、{}號、()號等等一個都不能少喔。
要不然就功虧一簣了。最後別忘了按【確定】鍵,系統通知您成功時,您可以另開一個新視窗,再進入您的格子看看,是不是換了新裝潢啊?如果您沒成功,別慌,再進到模版管理,選一個您舊有的模版,回復重前的版面,或者重頭再來一遍。

另外依著老師文章所說得也將無聊的時候的山頭圖改成Diva小姐
的沙龍照,山頭圖配上文章內容,一氣呵成更有看頭。

感謝遠同
老師被我煩了好幾個小時,整段語法,一字一句不厭其煩的解釋,讓我不再害怕這些天文數字,最重要的解決了黑夜與白晝的問題,從此。(這是老師要我轉告給我的朋友。。。)

看倌,您瞧瞧我的新家,是不是更有個人的風格啊?我還從
遠同老師那學了很多招數喔。比如說如何在版面語法改山頭圖、如何移動山頭圖上連結/顏色,避免破壞山頭圖的美感,以及如何用寬的版面,還有在文章中改變適合文章的山頭圖或是大背景的設計等等。總歸一句話,更多的魔法,我還在學習當中,很快會再推出新花樣,您要不要也一起來玩玩啊?

( 知識學習其他 )
回應 推薦文章 列印 加入我的文摘
上一篇 回創作列表 下一篇

引用
引用網址:https://classic-blog.udn.com/article/trackback.jsp?uid=rachelkao&aid=5887743

 回應文章 頁/共 5 頁  回應文章第一頁 回應文章上一頁 回應文章下一頁 回應文章最後一頁

星際訪客
等級:8
留言加入好友
回應
2012/01/31 10:05
好說~
在網頁裡要呈現透明的方式有很多...各種網頁瀏覽器也提供許多對應的透明濾鏡...但基於方便達到跨瀏覽器的目的...通常會選以具有透明透通的 PNG 圖檔來建立網頁圖素......
divagirl (rachelkao) 於 2012-02-02 09:26 回覆:
呵呵
您說的簡單
我可聽得一頭霧水
等我空閒點時
再來跟您討教 討教


星際訪客
等級:8
留言加入好友
秘密
2012/01/30 10:32
除了黑與白...透明也是一種選擇喔~
divagirl (rachelkao) 於 2012-01-31 07:52 回覆:
哇!!
這個厲害
請教一下, 透明要如何呈現???
去參觀您的格子
真的是千變萬化


奈米
等級:8
留言加入好友
先跟妳報備 請接收我這魯鈍的學生
2011/12/17 11:52
正在努力準備報稅服務的六個認證考試
等考過後 再來好好請教妳這改版的秘訣
divagirl (rachelkao) 於 2011-12-18 02:48 回覆:
沒問題
奈米姊
一切等您考完

祝您考試順利喔!!
別太累, 也要多休息喔!!


愛話畫的曼
等級:7
留言加入好友
快樂就是這麼簡單
2011/12/11 23:23

換個版面

換個山頭圖........等等

這種感覺就像女人換上新衣裳般的令人雀躍不已........

總之開心就好~~祝您玩得愉快ㄛ^^

divagirl (rachelkao) 於 2011-12-12 15:16 回覆:
對啊
就像阿曼
拿起色鉛筆
幫那些速寫的靜物
換上不同顏色
也是很好玩!


看雲
等級:8
留言加入好友
好學生
2011/12/11 12:22
學得這麼認真,難怪遠同老師極力推薦

我也試過隨文章換山頭
但換好後文章卻不見了
因此「救」回文章以後就不敢再試
以後再來討教吧

divagirl (rachelkao) 於 2011-12-12 15:03 回覆:
看雲姊
您先新增一文試試看
先進入文章創作/'創作發表那個畫面
您要打入文字的那個框欄最右邊有個 <>
按一下 < >
系統自會進入可以打語法的框欄裡
再將那些可以改山頭照的語法複製進去
將您要的山頭圖知放在語法中/* 山頭照 */ 前面有個url ( )
那 (  )就是讓您放照片的地方
放入後 記得按下方左鍵的存成草稿
系統再回來時 就是您平常打文章的畫面
您再開另外一個視窗 叫出這篇草稿文來看
山頭圖 應該就是您新改的山頭圖了


幸福的白開水
等級:7
留言加入好友
RE:
2011/12/06 17:20

喔喔~看得我眼花撩亂。

先存起來,等我有時間再來好好研究研究~

divagirl (rachelkao) 於 2011-12-08 06:26 回覆:
沒問題。
那些語法看起來很嚇人
不過
等您一步步實地演練後
就知道 沒那麼恐怖了。



Yeat
等級:8
留言加入好友
美耶!
2011/12/06 14:03
抬頭的圖片
看那光線在晨間射入林間 產生很美的光影變化
恭喜!妳已成為專業的攝影師了.
divagirl (rachelkao) 於 2011-12-08 06:28 回覆:
謝謝老師的稱讚
也謝謝老師領我進入攝影世界裡
不過 要成為專業
還是有很長的路要走啦
希望老師能繼續指導
謝謝



cwc
等級:8
留言加入好友
山頭圖美呀!
2011/12/05 19:31

你真是個認真的好學生,總算把工夫學起來了,還大方詳解給大家,大家一定受用無窮。

瞧!你那山頭圖像仙境一般,只能驚呼,美呀!
divagirl (rachelkao) 於 2011-12-08 06:29 回覆:
你要不要也來試試啊
你那麼多美麗的照片
還有動人的文字
重新編輯後
就是一本專業的旅遊雜誌喔!


珍妮曾在西雅圖
等級:8
留言加入好友
謝謝divagirl的分享
2011/12/05 14:39
讓大家都很受用。謝謝!
divagirl (rachelkao) 於 2011-12-08 06:31 回覆:
謝謝珍妮 百忙中來訪
下次帶著您的書和沙漠之花去拜訪您喔!

也祝您的新書 『西雅圖的20種在地玩法!』
一路長紅!


Jenny***
等級:8
留言加入好友
阿~~~~~
2011/12/05 10:55

偶在不可不知的秘密裡迷路了.........#@%&X......

divagirl (rachelkao) 於 2011-12-08 06:36 回覆:
別怕,
下次Jenny想要來祕密森林裡時
告訴我一聲
我在前頭幫你領路
保證不會迷路
頁/共 5 頁  回應文第一頁 回應文章上一頁 回應文章下一頁 回應文章最後一頁