可自定义的主页

原文：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>
div.main {} {
width:820px;
}         
        
div.left {} {
width :200px;
float:left;
background-color:#ffffff;}

div.leftSubDark {} {
margin:0px 1px 0px 1px;
border: 1px solid #0049A5;
padding: 4px 4px 4px 4px;
font-family: arial, sans-serif;
font-size:10pt;
}
div.leftSubheadDark {} {
background-color:#0049A5;
color:#ffffff;
padding: 0px 0px 0px 4px;
margin:2px 1px 0px 1px;
font-family: arial, sans-serif;
font-weight:bold;
font-size:10pt;}

div.right {} { 
width :600px;
float:left;
margin:0px 0px 0px 0px;
background-color:#ffffff }

div.rightSubheadYellow {} {
background-color:#ffcf00 ;
color:#black;
margin:2px 1px 0px 1px;
padding: 6px 6px 6px 6px;
font-family: arial, sans-serif;
font-weight:bold;
font-size:10pt;
}

div.rightSubYellow {} {
margin:0px 1px 0px 1px;
border: 1px solid #ffcf00;
padding: 4px 4px 4px 4px;
font-family: arial, sans-serif;
font-size:10pt;
}
</style>

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

     Private   Sub Page_Load() Sub Page_Load(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Load
        'Put user code to initialize the page here

    End Sub

     Private   Sub HideStocks_Click() Sub HideStocks_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles HideStocks.Click
        hdStocks.Visible = False
        Stocks.Visible = False
    End Sub

     Private   Sub hideDates_Click() Sub hideDates_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles hideDates.Click
        hdDates.Visible = False
        Dates.Visible = False
    End Sub

     Private   Sub hideWeather_Click() Sub hideWeather_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles hideWeather.Click
        hdWeather.Visible = False
        Weather.Visible = False
    End Sub

     Private   Sub hideTopStories_Click() Sub hideTopStories_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles hideTopStories.Click
        hdTopStories.Visible = False
        TopStories.Visible = False
    End Sub

     Private   Sub hideWord_Click() Sub hideWord_Click(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles hideWord.Click
        hdWord.Visible = False
        Word.Visible = False
    End Sub

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