第一階段樣版更新完畢!有問題請回報

樣板剛修改完成,不知道這樣改會不會出現版面問題(希望一切顯示正常),這次改了背景及聯結,還順便改了blockquote語法,而這次我盡量按照作者的寫法略為顏色代碼及其他的設定,但作者的語法有的時候會跟我習慣的CSS寫法不太一樣,所以我這次還用了其他工具對照功能,並Google一下可疑的程式碼,對照並修改了程式碼,現在告訴大家我到底修改了哪些地方,這樣大家也許可以參考我的作法修改版面,同時我也會提供一些工具幫助大家修改原始碼的過程可以順利一點


更新部分展示


首先是上面充當標題的blockquote,原本我想直接套用我在這篇文章 (網址已失效) 所示範過的blockquote語法,但是實線的部分出不來,結果我在套用這個樣板之後將網站的樣板做一次改版,直接修改作者的CSS語法,以下是我參考作者的CSS之後做出來的修正版本blockquote語法,但如果你想直接複製我的語法時請注意一點,如果你的CSS已經含有blockquote的語法時,請將{ }裡面的東西去掉,這樣語法執行起來才不會出問題


blockquote{
padding:10px;
margin:0 10 0 10px;
background:#d2ebff;
border:1px solid #000000;
color:#000000;
margin:0;
padding:0;
}


不過因為我修改了以上語法卻沒有辦法達到我想要的效果,邊框顏色還是沒變黑,所以我用了Firefox的Firebug檢視整個網頁的原始碼加以修改,將邊界的顏色設定成黑色,色碼是#000000,將四個邊界的色碼都改成黑色之後才成功達到我指定的效果,不過現在還有一個問題,我想將blockquote裏頭的文字設定成垂直置中,文字放在表格中間而不是靠上或靠下,但我找了半天還不知道該怎麼改,最後只好放棄,不過在這篇文章編輯完畢之後,網友 Junedie 傳了樣式網址給我,找者修改之後終於知道要動哪個語法把blockquote改好,以下是我修正之後的CSS語法


blockquote{
background: none repeat scroll 0 0 #D2EBFF;
border: 1px solid #000000;
color:#000000;
margin:0;
padding-top:20px;
padding-bottom:1px;
}


同時我也改了連結的顏色,因為作者的寫作方法跟傳統填寫連結顏色的方法不太一樣,所以我就採用關鍵字尋找,一旦找到我指定的關鍵字,那段語法的顏色就會被我修改掉,連結的顏色被我統一成灰色(#464646)或黑色(#000000),將滑鼠移動過去之後網址連結會變成紅色(#FF0000),這樣大家將游標移到連結上之後就會知道這是連結而不只是單純設定顏色而已

這是我尋找連結色碼的關鍵字:
a:hover


至於網頁的背景呢?作者將網頁的背景定義到BASIC區域裡,所以我直接改BASIC區域的Body其中背景background的色碼,深灰色一律設定成#464646,被我修改過的色碼通常都是#後面六位數(十六進位色碼),這樣大家利用網頁設計軟體或繪圖軟體會比較找的到我指定的顏色,作者在定義色碼的時候為了簡寫可能會用到#000這種簡略寫法,還好我將這色碼輸入繪圖軟體之後它能正常顯示顏色,不然我可能就不知道這色碼代表什麼顏色,這樣改起來會更麻煩


修改語法的小工具


最後介紹幾個修改語法的工具,如果你已經使用wordpress或其他架站程式架設網站時,相信一定會常常修改網頁的程式,不管是PHP或CSS甚至於HTML等等都算,有改過程式的應該知道修改語法是很累人的一件事情,因為你不知道要從哪裡修改程式,所以我會給大家兩個小工具

首先是台灣人開發的Notepad++ (維基百科及程式版權頁中顯示此程式最早由侯今吾先生獨立開發此程式),它是自由軟體,這程式跟Windows的記事本不同,功能比傳統記事本強大,除了能充當傳統記事本使用以外,還能當成程式語言的編輯工具,能載入java、C/C++、HTML、SQL、PHP、CSS等程式文件,但實際上我只拿它來修改CSS及PHP而已,將程式檔案載入到這工具之後,它會以不同顏色顯示不同程式碼,同時它也可以將檔案轉換成UTF-8後按照原本的程式副檔名直接存檔,這樣存檔之後中文字就不會變成亂碼,造成程式執行上的錯誤


Notepad++

Notepad++

軟體小檔案

軟體名稱:Notepad++
目前版本:5.68
軟體語言:多國語言(系統自動偵測為繁體中文)
適用範圍:純文字編輯、修改程式碼輔助工具
授權方式:自由軟體(採GPL授權,可自由修改並發布程式,不過修改程式時必須公佈原始程式碼)
官方網站:NOTEPAD++

官方下載頁面 本地下載頁面mediafire空間)


接下來要介紹的是協助我修改程式碼的第二個程式,只是這次是Firefox套件,這是協助我完成blockquote這段落CSS語法的工具,套件名稱是Firebug,這套件可以追蹤特定區域的語法(但實驗過好像只支援HTML,不知道如何比對物件與CSS語法段落),因為我當初在後台修改blockquote語法的邊界時遇到了一些問題,將border色碼改成#00000結果沒有變成黑色,最後透過這個程式找出邊界的色碼,上下左右的邊框都設定成黑色才解決這個問題,因此推薦這套件給大家使用


Firebug

軟體小檔案

軟體名稱:Firebug
目前版本:1.5.4
軟體語言:繁體中文
適用範圍及授權方式:限Firefox瀏覽器使用此程式(這本來就是Firefox套件)

套件下載


但這套件可能會有安全的問題,你能在不登入的情況下修改CSS語法,那表示其他人也能透過這種方式偷走你的CSS,如果你真的擔心這問題,也許你可以改一 下.htaccess,限制這些檔案只能被自己的IP存取,其他的IP將無法利用這種方式存取或修改CSS或php,但改錯的話連自己的IP也會被擋掉, 所以建議研究過這個檔案的作用再更改此檔案會比較好

同時預告一下接下來的動作,接下來的網頁樣板更新就是更改樣板的Banner圖片,同時還要更改本站的Logo,網址欄旁片的文件符號會被換掉,但我沒還決定要用什麼圖片當Logo,也許會直接拿我簡介頁上的大頭貼當大頭貼吧!第二階段的樣板更改預計在6/15前後,更改之後可能馬上就期末考了,等期末考之後我會做一次網站的評估,如果評估過沒啥問題的話,也許七月初我會開始做痞客網站搬家的動作,到那個時候我會將我的痞客邦網站部分內容搬來這裡,然後那個網站將停止更新

7 Replies to “第一階段樣版更新完畢!有問題請回報”

      1. 這段效果其實是用padding和margin屬性去土法煉鋼慢慢定位而成的XD
        blockquote{
        background-color: #CCCCCC;
        border: solid 1px #000000;
        padding: 10px 10px;
        margin: 0;
        }

        1. 我剛才改了語法,這次我不從後台改,總覺得透過後臺改效果不大,從前台透過Flirbug改語法
          主要改了padding語法,但是因為我只需要指定上下的留白,所以定義了padding-top及padding-bottom
          按照原本的調法,下面的留白比上面留白還寬(上下寬度不對乘),所以我數字設小一點
          padding-top設定15px、padding-bottom設定為10px,看樣子這問題已經解決了

          blockquote{
          background: none repeat scroll 0 0 #D2EBFF;
          border: 1px solid #000000;
          color:#A184B0;
          margin:0;
          padding-top:15px;
          padding-bottom:10px;
          }

          同時謝謝你的幫忙

    1. 如果你有網頁設計的基礎然後又有花不完的時間,同時還能找到主機讓你建置網頁用的資料庫的話,隨時歡迎你用 WordPress 架設網站,你可以上Google搜尋香腸炒魷魚這個網站,裏頭的「超省錢架站法」系列文章,應該會對你很有幫助

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料