Change History

JinJin 老師：

講義寫得很棒講義寫得很棒哦！希望同學能學習得很好。這麼專業又詳細的可是很少見呢！


另外，有關網頁最後 #footer 的部份，我有幾點 CSS 語法與設計上的建議。

首先，我看了<a href=http://mepopedia.com/group/comparative/>全國比較文學會議</a>的網站，我發現 #footer 的部份裡面還有一層 #footer_text 的 DIV。這個部份我建議可以先拿掉並與上層的 #footer 合併，這樣同學在「臨摩」的時候，比較不會覺得太複雜或看不懂。

再者，合併後的 #footer 與原來的主要差別是在內距 (padding)，因此我建議在 #footer 的 CSS 設定裡加上 padding: 20px; (上下左右四邊的內距皆設為 20px) 或者 padding: 15px 20px; (上下內距設為 15px，左右內距設為 20px) 應該就可以了。

最後，因為已設定了「上下內距」整個 #footer 區塊的畫面在視覺上可以維持一定的平衡，所以我認為其實 #footer 的高度其實也可以不用設定 (目前是設 82px)。也因為不設定高度的話，背景圖片的高度可能會不夠用 (不夠的部份可能會變成白色)，所以可以再設定背景圖片在垂直方向 (y 方向) 重複 (repeat-y)。總結以上建議，新的 CSS 可以設定如下：

<pre>#footer {
/* 因已設定 padding，建議可不設定高度 */
font-size: 12px;
line-height: 1.5em;
color: #FFF;
<b>background: url(images/footer.jpg) repeat-y; /*背景圖片設定為「在垂直方向重複」*/</b>
<b>padding: 15px 20px; /*這是CSS簡寫語法，意思是「上下」內距共用 15px 這個設定，「左右」共用 20px 這個設定*/</b>
}
</pre>網頁設計議義真的很需要呢！

JinJin 老師：

講義寫得很棒講義寫得很棒哦！希望同學能學習得很好。這麼專業又詳細的可是很少見呢！


另外，有關網頁最後 #footer 的部份，我有幾點 CSS 語法與設計上的建議。

首先，我看了全國比較文學會議的網站，我發現 #footer 的部份裡面還有一層 #footer_text 的 DIV。這個部份我建議可以先拿掉並與上層的 #footer 合併，這樣同學在「臨摩」的時候，比較不會覺得太複雜或看不懂。

再者，合併後的 #footer 與原來的主要差別是在內距 (padding)，因此我建議在 #footer 的 CSS 設定裡加上 padding: 20px; (上下左右四邊的內距皆設為 20px) 或者 padding: 15px 20px; (上下內距設為 15px，左右內距設為 20px) 應該就可以了。

最後，因為已設定了「上下內距」整個 #footer 區塊的畫面在視覺上可以維持一定的平衡，所以我認為其實 #footer 的高度其實也可以不用設定 (目前是設 82px)。也因為不設定高度的話，背景圖片的高度可能會不夠用 (不夠的部份可能會變成白色)，所以可以再設定背景圖片在垂直方向 (y 方向) 重複 (repeat-y)。總結以上建議，新的 CSS 可以設定如下：

#footer {

        /* 因已設定 padding，建議可不設定高度 */

        font-size: 12px;

        line-height: 1.5em;

        color: #FFF;

        background: url(images/footer.jpg) repeat-y; /*背景圖片設定為「在垂直方向重複」*/

        padding: 15px 20px; /*這是CSS簡寫語法，意思是「上下」內距共用 15px 這個設定，「左右」共用 20px 這個設定*/

        }

網頁設計議義真的很需要呢！