[awei研究室]主題式分隔網頁版型

有時候接稿時會發現同一個網站,會有不同主題的入口頁面…要如何整合在一起呢?
利用色塊的表現可以輕鬆達成,主題式說明文字,外加生動的滑鼠切換動畫更可以讓人感到煥然一新的感受!!

空間規畫
Head——-網站LOGO /MENU主選單 / 網站特別功能(線上諮詢或是其他客服功能)
content——-主題頁面切換
Footer——–FB連結/DM活動擺放/網站版權宣告

製作完成大概會是底下這樣~~
範例網頁

應用解析
主要是利用JAVA與CSS做搭配

包含一個index.css檔與JS檔

在滑鼠位於第一個區塊DIV時顯示Photo-1 並隱藏其他Photo
在滑鼠位於第二個區塊DIV時顯示Photo-2 並隱藏其他Photo
在滑鼠位於第三個區塊DIV時顯示Photo-3 並隱藏其他Photo
在滑鼠位於第四個區塊DIV時顯示Photo-4 並隱藏其他Photo

<script>
function Show(ID){
document.all(ID).style.display=””;
}
function Display(ID){
document.all(ID).style.display=”none”;
}
</script>

完整檔案下載