原文章:
Customizable Home Pages
现在似乎每个主要的网站都可以个性化的定制,“my”(我的),主页(my.yahoo.com,my.msn.com,my.ebay.com …). 这实际上很容易实现,只要你舍弃了以Table为基本框架的网页设计。看看下面的设计:
你可能会花费一整天来设置你的页面布局,但最后却一团糟,难以更新,编码。或者你可以使用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 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标签里面,当用户点击 hide按钮的时候就可以隐藏相应的内容。
Sub Page_Load()
Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
'Put user code to initialize the page here
End Sub
Sub HideStocks_Click() Sub HideStocks_Click(sender As Object, e As EventArgs)
hdStocks.Visible = False
Stocks.Visible = False
End Sub
Sub hideDates_Click() Sub hideDates_Click(sender As Object, e As EventArgs)
hdDates.Visible = False
Dates.Visible = False
End Sub
Sub hideWeather_Click() Sub hideWeather_Click(sender As Object, e As EventArgs)
hdWeather.Visible = False
Weather.Visible = False
End Sub
Sub hideTopStories_Click() Sub hideTopStories_Click(sender As Object, e As EventArgs)
hdTopStories.Visible = False
TopStories.Visible = False
End Sub
Sub hideWord_Click() Sub hideWord_Click(sender As Object, e As EventArgs)
hdWord.Visible = False
Word.Visible = False
End Sub
'Put user code to initialize the page here
End Sub
Sub HideStocks_Click() Sub HideStocks_Click(sender As Object, e As EventArgs)
hdStocks.Visible = False
Stocks.Visible = False
End Sub
Sub hideDates_Click() Sub hideDates_Click(sender As Object, e As EventArgs)
hdDates.Visible = False
Dates.Visible = False
End Sub
Sub hideWeather_Click() Sub hideWeather_Click(sender As Object, e As EventArgs)
hdWeather.Visible = False
Weather.Visible = False
End Sub
Sub hideTopStories_Click() Sub hideTopStories_Click(sender As Object, e As EventArgs)
hdTopStories.Visible = False
TopStories.Visible = False
End Sub
Sub hideWord_Click() Sub hideWord_Click(sender As Object, e As EventArgs)
hdWord.Visible = False
Word.Visible = False
End Sub
在实际的情况下,你很可能有一个注册/登录系统,把用户的参数信息存储在数据库里面。你可以载入参数信息并在Page Load事件里面隐藏不需要显示的内容。显然你大概也想到要实现一个页面让用户能够使用checkbox来选择需要显示的内容。你也可以简单的使用javascript和每个内容模块中的链接来“最小化”该内容模块。这个代码与本页面左边的导航菜单上用的是相似的。