可自定义的主页

原文：Customizable Home Pages   翻译：YuL

最近这些天好象每个主流的站点都有了可自定义的“我的”主页（my.yahoo.com, my.msn.com, my.ebay.com……）。其实一旦你能从基于表格的网页设计思想里走出来，那这实现起来并不难。（原文有个例子，这里省略）

你可能会花费一整天的时间来尝试建立表格布局，但是左边还是很杂乱而且难以更新。或者你可以使用div标签和大概一半的HTML代码，并且用CSS来处理所有的设计块。

<div class="main">
    <div class="left">
        <div class="leftSubheadDark" runat="server" id="hdStocks">Stocks</div>
        <div class="leftSubDark" runat="server" id="Stocks">
            DJIA 10087.51 -191.24
            <br>
            NASDAQ 1908.15 -38.56
            <br>
            YHOO 32.46 -1.00
            <br>
            <asp:LinkButton Runat="server" ID="HideStocks">Hide</asp:LinkButton>
        </div>
        <div class="leftSubheadLight" runat="server" id="hdDates">Events</div>
        <div class="leftSubLight" runat="server" id="Dates"><b>July 4:</b> Independence Day
            <br>
            <b>December 25:</b> Christmas<br>
            <b>January 1:</b> New Years Day<br>
            <asp:LinkButton Runat="server" ID="hideDates">Hide</asp:LinkButton></div>
        <div class="leftSubheadDark" runat="server" id="hdWeather">Weather</div>
        <div class="leftSubDark" runat="server" id="Weather">Lincoln, NE : 53/72 F
            <br>
            <asp:LinkButton Runat="server" ID="hideWeather">Hide</asp:LinkButton></div>
    </div>
    <div class="right">
        <div class="rightSubheadYellow" runat="server" id="hdTopStories">Top Stories</div>
        <div class="rightSubYellow" runat="server" id="TopStories">The Sky Is Falling<br>
            Governer Alberts Re-Elected to 22nd term<br>
            Scientist Predict Next Earthquake<br>
            <asp:LinkButton Runat="server" ID="hideTopStories">Hide</asp:LinkButton></div>
        <div class="rightSubheadYellow" runat="server" id="hdWord">Word of the Day</div>
        <div class="rightSubYellow" runat="server" id="Word"><b>hero</b><br>
            n. pl. he·roes<br>
            <br>
            1. In mythology and legend, a man, often of divine ancestry, who is endowed 
            with great courage and strength, celebrated for his bold exploits, and favored 
            by the gods.<br>
            2. A person noted for feats of courage or nobility of purpose, especially one 
            who has risked or sacrificed his or her life: soldiers and nurses who were 
            heroes in an unpopular war.
            <br>
            <asp:LinkButton Runat="server" ID="hideWord">Hide</asp:LinkButton>
        </div>
    </div>
</div>

<style>
</style>

现在你自己的选项都整洁地包含在div标签里了，当你点链接按钮时便可以隐藏它们了：

End Sub

在现实应用中可能包含一个注册/登录系统和存储用户选择参数的数据库。你能够通过page_load事件读取这些参数并且隐藏选项；显然你还想实现一个二级页面，在那个页面中用户可以选择他希望显示的选项。你可能还想简单地在每个盒子（box）里融合javascript和其它链接来“最小化”盒子。这个代码可能与左侧导航菜单的脚本很相似。