芋宅出菜

在設計 ViewPage 的呈現時，雖然頁面的視覺設計是要丟給專人做處理， 不過身為程式人員多少還是得懂一點

，趁機學習一下 CSS 也不失為一個好處。

我舉一個常被拿來做實驗的例子－－留言版來說明，當然我不是媒體相關人員，樣式的設計就請各位看倌多包涵。

如標題所言，我要針對主要留言的區塊來樣式上的設定，在不設定任何樣式的情形如下圖所示

圖A.1 未套樣式頁面

圖A.2 頁面原式碼

以上兩圖顯示，TextArea 未套用任何樣式下的原始設定。接下來實驗兩種套樣式的方法：

方法一：指定 CSS Class 名稱

我在 Site.Master 頁面新增一個 CSS Class 的名稱為 " TextAreaStyle" ，如下所示

<style type="text/css">
        .TextAreaStyle
        {
            width:500px;
            height:300px;
            }
    </style>

在 TextAreaFor 的參數依序為資料繫結項、列數、欄數、及 HTML 屬性，其中 HTML 屬性可以使用隱含型別陣列來表示

，不過麻煩的是沒有任何 HTML 屬性的提示，所以要自己一個字一個字慢慢刻，於是我在陣列內設定一個 @class 的元素

，再給它一個叫 " TextAreaStyle " 的值，來對應 Site.Master 的 TextAreaStyle 樣式。設定完之後，結果如下圖 :

你看，留言區塊變大了，對不對 ? 來檢視一下頁面的原始碼

如此一來，看到了在 TextArea 的屬性多了一個 class ，而 class 的屬性值正是所指定的名稱，也看到了 cols 及 rows 從原先的 ( 20 , 10 ) 變成了 ( 10 , 10) 。接下來看第二種方法

方法二：直接給 Style

這下子，我把陣列原本 @class 的元素直接改為 Style，並且填入寬及高的值，填入完畢後存檔、重新建置來看看頁面有什麼改變，請看下圖

咦 ?? 沒什麼改變啊 ?? 這樣是不準的，看一下頁面的原始碼內容較實在

一眼就看到了方法一所出現的 @class 屬性被 Style 取代了。

藉由上面兩個方法來簡略說明 TextArea 設定樣式的方法，希望能幫助各位看倌一點小小忙。

不過，在前面所說的，樣式還是交由專人來設計並充分利用 CSS 來做樣式的控管，才不會讓

整個 ViewPage 看起來亂糟糟的，拿兩個方法的原始碼做個比較，方法一比方法二看起來簡潔

，再說如果真要程式人員套樣式，那程式人員也只要知道 @class 的名稱就好了，你說是不是啊?

以上若有不足或錯誤的地方，請各位看倌不吝指教

===================

大家好  , 我叫芋宅宅

我很菜 , 請各位前輩指教