網頁排版_美化asp.net元件menu的方法

如果有高超的美術編輯，那麼我們在製作網頁的時候可能會有一個設計稿，當然在設計這些稿的時候通常不會考慮到版面製作的便利，對我這種沒有美術天份又不太專注網頁美化的人來說更是困難到了極點，所以往往利用Asp.Net撰寫網頁時，排版這個工作總是花掉我很多時間。

這次看了要製作的內頁畫面，「哇！真是好看耶！」，但是那個功能選單底下充滿了漸層色，還有一個有點立體的外框框著，先來看看整體架構：

由上圖可以看出來，版頭、內頁應該都不會有太大問題，最主要的問題可能會出現在功能表(Menu)上，如果是對於排版、切圖很有研究的人應該會覺得這也沒什麼了不起，只要切好放到適當的位子，設好滑鼠移過去時要變換的圖片，就可以製作出一個超有質感的Menu，但是我會嗎？當然不會呀！XD

既然我是一個很不會排版的人，而且我比較喜歡可以動態修改的程式，所以我的希望是直接使用Asp.net元件Menu放進Menu那塊區域。所以我要做的事情很簡單，就是用一個可以設底圖的東西把Menu放在那個東西裡面，然後把整個東西放到適當的地方。

雖然講很來很簡單，對於排版苦手的我還是搞了兩個小時，先來看成果：

Menu很順利的放到了有底圖的框架當中，YA！

我的方法是，利用兩個Table包住我要放的Menu，外框的Table負責將整個區塊放在MasterPage的適當位置，並且顯示我需要的底圖，而內框的Table則負責包住Menu，以調整margin-top、margin-left、margin-right和margin-bottom來撐開外框並將Menu移到應該到達的底圖位置。講起來非常抽象，把表格的框線顯示出來就可以很輕易的了解我做的蠢事。XD

最後，兩個Table的程式碼：

<table class="Meunborder_Out" border="0" cellpadding="0" cellspacing="0" width="100%"><tr>
<td style="background-color:White; background-image:url('../Images/ImageTest/menu0.JPG'); background-repeat:no-repeat;">

<table class="Meunborder_In"><tr><td>
<asp:Menu ID="MenuList" runat="server" DataSourceID="SM_DS" StaticDisplayLevels="2"
DynamicHorizontalOffset="10" Font-Names="Verdana" Font-Size="1.0em" ForeColor="#000044"
StaticSubMenuIndent="0px" DynamicVerticalOffset="0">
<StaticSelectedStyle BackColor="#1C5E55" />
<%--主項目被滑過的變色--%>
<StaticHoverStyle BackColor="#666666" ForeColor="White" />
<%--主項目的間距--%>
<StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />

<%--子項目被滑過的變色--%>
<DynamicHoverStyle BackColor="#1C5E55" ForeColor="White" />
<%--子項目的底色--%>
<DynamicMenuStyle BackColor="#E3EAEB"/>
<%--子項目的間距--%>
<DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
</asp:Menu>

</td></tr></table>

</td></tr></table>

對於我這種美編苦手，我覺得效果很不錯耶！XD