▍留言區域大動工(含表單設計) [ Version 2.0 Power by Andy Liu . ]


版本說明:


Version 2.0

  有鑑於部分人士喜歡求新求變,在此推出2.0版的教學文件!這次新的版本主要是提供「回應區的表單」「每月文章彙集」這兩部分的語法修改補充教學!(請見文章最底下「補充說明」的部分)

  • 新增「回應區的表單」語法說明
  • 新增「每月文章彙集」語法說明
  • ★ 新增修改「邊框大小、樣式、顏色」CSS語法說明

Version 1.0

  很多人都喜歡在「留言區」加上背景圖片,但是卻不知道語法如何修改,故推出此教學文件!


事前準備:


  文章用色說明:紅字:語法的指令綠字:指令的參數 紫字:語法註解

  留言區域?這是哪阿?在BLOG首頁你不會發現到他的蹤影,但是在每一篇文章最底下都會有個「回應」的部分,這就是今天的主題囉!

  那這個部分到底有什麼好變化的呢?又能玩出什麼花樣呢?且先看看下面圖一的部分,這就是我在我的BLOG動的手腳!(★注意I Need You有看到嗎?以後看文章要多多回應喔!^^)

  想要和我一樣在留言區域裡面加上背景嗎?想讓留言區域更生動、更吸引人嗎?那就趕緊看下去囉!

[圖一]


觀念說明:


★注意:觀念說明此部分,如果你是CSS、HTML語法初學者可以先略過,直接跳到「語法說明」,這部分主要是進階,針對一些想要真的學習語法、瞭解語法的朋友,而不是只是Step by Step,將語法複製、貼上,能夠真的瞭解語法的原理,靈活運用!

  在正式進入文章之前,先必須有一個基本常識,CSS能夠讓我們自訂HTML標籤的樣式!觀念來囉!什麼是HTML標籤呢?所謂HTML標籤就是我們在寫HTML語法長常會看到的“<>“這個部分!為何要說到:CSS能夠讓我們自訂HTML標籤的樣式呢?舉個例子來說:我們在編寫HTML語法時,假如只打上

這個標籤,是代表要將文字大小變大!

範例:

變成

  這是我們單純使用

語法時是這樣,但是CSS提供了一個很方便我們編寫網頁管理的功能,讓我們能夠定義標籤的樣式,也就是你如果覺得

的語法只是單純讓字體變大,不夠好用,你可以自己定義

的功能,例如不僅僅變大,還能改變字體的顏色。但是你可能會問說,HTML語法不是就有的功能,可以直接調整顏色嗎?幹嘛多此一舉呢?沒錯!這麼方法的確可以,但是如果你的網頁有很多地方要用到

呢?那你是不是每次都要設定一次阿,這時候如果在CSS就定義好

的樣式,不就方便多了嗎?

  之所以要講到這個觀念是因為和接下來我們要作的動作有關,要在「留言區域」動手腳,當然要先知道它是什麼咚咚!在HTML語法裡面,稱呼「留言區域」為「文字區塊」,在語法中是使用:「textarea」!接下來我們就往下繼續看下去吧!


語法說明:


  在之前我們已經知道「文字區塊」的HTML語法是:「textarea」,因此我們就開始從這裡著手吧!

/* 語法開始 */

   textarea{

   background-image:url(圖片位址);     /* 圖片連結位置 */
   background-attachment:fixed;            /* 圖片位置是否要固定 */
   background-repeat:no-repeat;             /* 圖片是否要重複顯示 */
   background-position:right;                 /* 圖片對齊格式 */
   width:400px;                                      /* 文字區塊的寬度 */

   }

  1. /* XXX */(註解):註解幫助自己看懂,這部分程式不會執行!XXX可以自行填寫!

  2. textarea(文字區塊):這個部分稱作CSS樣式定義類別,一般來說可以自己定義名稱,但是由於這裡我們是要定義HTML語法的標籤,所以是不能更改的!必須使用textarea。當然如果要定義

    ,就改為h1!(★注意:不用“<>“)

  3. background-image(背景影像):看你的圖片位址在何處就怎麼寫!只要填在url()的()裡面即可!

  4. background-attachment(背景附著):在這裡你可以決定背景圖片的位置。
    屬性有:scroll:隨著捲軸捲動 inherit:繼承之前的設定 fixed:固定不動

  5. background-repeat(背景重複):看看背景圖片是不是要重複顯示。
    屬性有:repeat:重複顯示 no-repeat:不重複顯示 repeat-x:只在X軸重複顯示 repeat-y:只在Y軸重複顯示

  6. background-position(背景位置):決定背景要置中、靠左、靠右的設定。
    屬性有:left:靠左對齊 center:置中對齊 right:靠右對齊 top:向上對齊 bottom:向下對齊 inherit:傳統繼承(預設)

  7. width(寬):文字區塊的寬度 (可以不設定,系統會自動設定大小)

  8. height(高):文字區塊的高度 (可以不設定,系統會自動設定大小)

  PS1  其餘在「textarea」裡面還能夠加上許多設定。例如邊線、文字顏色等等!因為部屬於這部分的討論範圍!暫時就不列出來!

  PS2 如果你不使用背景影像的話,只想用純顏色當背景時,可以將background-image(背景影像)background-color(背景顏色)取代!但是盡量避免兩個語法同時使用!

     範例:background-color:#FF6600; 綠色的部分就是填上自己喜歡的顏色!


實際操作:


  1. 首先你必須登入你的BLOG!(雖然是廢話,但是有的人還是會忘記!)
  2. 找到「樣式設定」(如圖二),點選進入!

[圖二]

  1. 找到「CSS樣式表」!然後在CSS樣式表的區塊當中,加入你的語法即可!

[圖三]

  ★注意:任意加在CSS樣式表當中都可以,但是請勿加入到其他的大括弧{ }當中,請獨立加到CSS樣式表的空白處!如果要避免錯誤,建議直接將語法加到你的CSS樣式表的最後面,就不會有問題了!


補充說明:


Q1:請問除了修改留言區域之外,在NAME、E-Mail、URL這幾個長條填寫欄的部分也可以修改嗎?

Ans:當然!答案是肯定的!你只要將「textarea」改為「input」

Q2:請問要修改「每月文章彙集」的部分,該如何修改呢?

Ans:同樣的!你只要將「textarea」改為「select」

Q3:除了在 { … }中修改背景之外,邊線、邊框該如何修改呢?

Ans:以下以「每月文章彙集」(select)為例:[有好幾種語法的撰寫方式,請多多練習!]

/* 語法開始:寫法一 — 分門別類,無微不至 */

/* 分成上下左右(4部分) 寬度樣式顏色(3部分) 總計12(4×3)行 */

select {

border-XXX-width: 1px;                  /* 邊框寬度 */
border-XXX-style:
dotted;              
/* 邊框樣式 */
border-XXX-color:
#0066FF;           
/* 邊框顏色 */

}

  1. XXX:請各位先注意XXX的部分,這裡XXX代表著是邊框的上下左右。
    屬性有:top:上方 bottom:下方 left:左邊 right:右邊
  2. Width(寬):邊框寬度。屬性有:N px:像素 Npt:點 N in:英吋 N%:百分比 (N為大小,必須為正整數)
  3. Style(樣式):邊框樣式。屬性有:dotted點狀線 dashed虛線 solid實線 double雙實線 groove溝道狀 ridge山脊狀inset凹陷狀 outset凸起狀
  4. Color(顏色):邊框顏色。屬性為:#XXXXXX (XXXXXX為顏色代碼)

/* 語法開始:寫法二 — 精簡寫法,功用一樣 */

/* 只分成上下左右(4部分) 寬度樣式顏色並列在同一行程式 */

select {

border-XXX: width  style color;    /* 邊框 寬度 樣式 顏色 */
}

★注意:相關的語法大致和第一種都像同,只是寫法不一樣!假設我要設定上方邊框為寬度一像素、虛線、紅色,就可以寫成:

         border-top: 1px dashed #FF0000;  /* 邊框 寬度 樣式 顏色 */

/* 語法開始:寫法三 — 最為精簡、但有限制 */

/* 使用時機:當上下左右、寬度、樣式、顏色都要設定一樣的時候 */

select {

border: width  style color;    /* 邊框 寬度 樣式 顏色 */
}

★注意:相關的語法大致和第二種都像同,只是這部分border-XXX 改為 border 。因為此時我們已經不用在設定上下左右了!

  至目前為止已經將CSS語法的「背景」「邊框」的設定語法講解完畢,現在就只等大家好好的去熟練了喔!

  PS3 有關於本篇教學文件所提到的「背景修改語法」、「邊框修改語法」,都是標準CSS語法,所以可以在任何地方使用!例如修改文章內容的背景、邊框等等,都可以用這樣語法喔!


|| 歡迎轉載 但請勿盜用|| http://andyliu.24cc.com
Copyright (C) 2004 Andyliu Design . All rights reserved .