随笔 - 53&
文章 - 0&评论 - 370&trackbacks - 25
&&&& 在每个项目的开始，我们最先做的事情一般就是页面布局（高风险实验除外），因为一个好的页面不仅仅能最大限度的吸引用户的眼球。还能帮助我们对自己的产品有一个直观的认识，帮助我们发现需求。
&&&&设计之初不妨用笔在纸上先勾勒一个草图，这可以尽量节约我们的时间。
&&&&我们要实现的布局主要为4部分。
&&&&&&&&页头：页面logo、广告、菜单及用户登录信息。
&&&&&&&&页尾：版权说明及其它描述信息
&&&&&&&&左边栏：用户定义信息、网站推荐等
&&&&&&&&主题：分类查询、热门商品、热门商户等
&&&&比较明显的，页头及页尾是各个页面的公有部分，我们通过模板来实现。
&&&&打开visual studio 2008使用快捷键Ctrl+Shift+N打开新建项目窗口如图2，选择web，选择Asp.Net Web Application。选择Framework版本，visual studio 2008 将为我们筛选出适用与该版本的项目类型，这里我们选择3.5。输入Name、Location、Solution信息点击确认。&
&&&&将项目中自动添加的Default.aspx删除。
&&&&创建模板：
&&&&&&&&选中项目名称使用快捷键Ctrl+Shift+A添加新的文件。选择Master Page,输入名称Main.Master确定。&
生成代码如下：
&%@&Master&Language="C#"&AutoEventWireup="true"&CodeBehind="Site2.master.cs"&Inherits="WebApplication2.Site2"&%&
&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&html&xmlns="http://www.w3.org/1999/xhtml"&&
&head&runat="server"&
&&&&&title&Untitled&Page&/title&
&&&&&asp:ContentPlaceHolder&ID="head"&runat="server"&
&&&&&/asp:ContentPlaceHolder&
&&&&&form&id="form1"&runat="server"&
&&&&&&&&&asp:ContentPlaceHolder&ID="ContentPlaceHolder1"&runat="server"&
&&&&&&&&&/asp:ContentPlaceHolder&
&&&&&/div&
&&&&&/form&
&&&&IDE为我们生成了两个ContentPlaceHolder控件。应用该模板的页面将仅能在ContentPlaceHolder内操作。
&&&&（小提示：使用菜单可以在设计器上显示标尺帮助我们设计，如图4.）
&&&&将&title&Untitled Page&/title&移动到id为head的ContentPlaceHolder内
&&&&&asp:ContentPlaceHolder&ID="head"&runat="server"&
&&&&&&&&&title&Untitled&Page&/title&
&&&&&/asp:ContentPlaceHolder&
&&&&这将使我们应用该模板的页面可以定义页面title.
&&&&在ContentPlaceHolder1上面添加一个div"&div id="pageHeader"&&/div&"。
&&&&在ContentPlaceHolder1下面添加一个div"&div id="pageFooter"&&/div&"。
&&&&Ctrl+Shift+A 选择Web Content From 输入Name:MainForm.aspx确定,选择Main.Master模板。
生成代码：
&&&%@&Page&Language="C#"&MasterPageFile="~/Main.Master"&AutoEventWireup="true"&CodeBehind="MainForm.aspx.cs"&Inherits="WebApplication2.WebForm1"&Title="Untitled&Page"&%&
&&&asp:Content&ID="Content1"&ContentPlaceHolderID="head"&runat="server"&&&&&
&&&/asp:Content&
&&&asp:Content&ID="Content2"&ContentPlaceHolderID="ContentPlaceHolder1"&runat="server"&
&&&/asp:Content&
&&&&在Content2中添加两个div
&&&&&div&id="sideleft"&
&&&&&&&&&div&
&&&&&&&&&&&p&left&side&/p&
&&&&&&&&&/div&
&&&&&/div&
&&&&&div&id="sideright"&
&&&&&&&&&p&right&side&/p&
&&&&&/div&
&&&&右键点击MainForm.aspx，选择“View in Browser”预览界面。很明显，现在并未达到我们的要求。因为我们并为向页面添加样式。
&&&&Ctrl+Shift+A 选择Web选择Style Sheet输入Name"Main.css"确定。
&&&&使用菜单打开Manage Stytles面板。
&&&&打开Main.Master
&&&&在Manage Stytles面板上点击"Attach Style Sheet"选择Main.css。
&&&&在Manage Stytles面板上右键点击Main.css&New Styles创建新样式,生成如下代码
&bottom:&0
&position:&fixed;
&&&&点击设计器下方的Split按钮将设计器改为拆分窗口，如图6。在代码窗口内将光标定位在form段，在Manage Stytles中右键点击page&Apply Style.应用样式
代码：&form id="form1" runat="server" class="page"&（Apply Styles面板同样具有此功能，并可预览Style），另外也可以手写应用Style，Visual Studio 2008已经对CSS有了很好的智能感知。
&&&&将模板最外面的DIV 的id设置为“wrap”，为ID为wrap的div定义样式
&BORDER-RIGHT:&black&0px&solid;&BORDER-TOP:&black&0px&solid;&MARGIN:&0px&auto;&OVERFLOW:&hidden;&BORDER-LEFT:&black&0px&solid;&WIDTH:&1000px;&BORDER-BOTTOM:&black&0px&solid
&&&&以#开头的样式将根据页面元素的ID，自动应用。
&&&&对header应用样式
.header_div&{}{
&CLEAR:&both;&MARGIN:&auto;&WIDTH:&1000px;&HEIGHT:&90px
&&&&对footer应用样式
&FLOAT:&left;
&WIDTH:&100%;
&text-align:&right;
&PADDING-RIGHT:&2px;
&PADDING-LEFT:&2px;
&FONT-SIZE:&14px;
&PADDING-BOTTOM:&1px!&important;
&PADDING-TOP:&3px!&important;
&border-top:&#px&solid;
&border-top-color:&#CCFFCC;
&&&&对于CSS的定义网上已经有大量的资料，这就不多说了。&&
完整示例代码：
Main.Master
&1&%@&Master&Language="C#"&AutoEventWireup="true"&CodeBehind="Main.master.cs"&Inherits="AroundMeWeb.Main"&%&
&3&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
&4&html&xmlns="http://www.w3.org/1999/xhtml"&
&5&head&runat="server"&
&6&&&&&title&周边&/title&
&7&&&&&asp:ContentPlaceHolder&ID="head"&runat="server"&
&8&&&&&/asp:ContentPlaceHolder&
&9&&&&&link&href="Main.css"&rel="stylesheet"&type="text/css"&/&
<span style="color: #&/head&
<span style="color: #&body&
<span style="color: #&&&&&form&id="form1"&runat="server"&class="page"&
<span style="color: #&&&&&div&id="wrap"&
<span style="color: #&&&&&&&&&div&
<span style="color: #&&&&&&&&&&&&&div&class="header_div"&
<span style="color: #&&&&&&&&&&&&&&&&&p&
<span style="color: #&&&&&&&&&&&&&&&&&&&&墙上的腊肉&/p&
<span style="color: #&&&&&&&&&&&&&/div&
<span style="color: #&&&&&&&&&&&&&div&class="mainmenu"&
<span style="color: #&&&&&&&&&&&&&&&&&ul&id="navlist_main"&
<span style="color: #&&&&&&&&&&&&&&&&&&&&&&&&&li&&a&id="clubHeader_lkHome"&href="#"&社区首页&/a&&/li&&
<span style="color: #&&&&&&&&&&&&&&&&&&&&&&&&&&&&&li&&a&class="current"&id="clubHeader_lkGroupMenu"&href="#"&小&组&/a&&/li&&
<span style="color: #&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&li&&a&id="clubHeader_lkQuestionMenu"&href="#"&博&问&/a&&/li&&
<span style="color: #&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&li&&a&id="clubHeader_lkIngMenu"&href="#"&闪&存&/a&&/li&&
<span style="color: #&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&li&&a&id="clubHeader_lkMyMenu"&href="#"&我的空间&/a&&/li&&
<span style="color: #&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&li&&a&id="clubHeader_lkMyFriends"&href="#"&我的好友&/a&&/li&&
<span style="color: #&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&li&&a&href="#"&网站首页&/a&&&/li&
<span style="color: #&&&&&&&&&&&&&&&&&/ul&
<span style="color: #&&&&&&&&&&&&&/div&
<span style="color: #&&&&&&&&&/div&
<span style="color: #&&&&&&&&&div&class="pagebody"&
<span style="color: #&&&&&&&&&&&&&asp:ContentPlaceHolder&ID="ContentPlaceHolder1"&runat="server"&&&&&&&&&&&&&&&&
<span style="color: #&&&&&&&&&&&&&/asp:ContentPlaceHolder&
<span style="color: #&&&&&&&&&/div&
<span style="color: #&&&&&&&&&div&class="footer"&
<span style="color: #&&&&&&&&&div&
<span style="color: #&&&&&&&&&p&&&#169;2008&墙上的腊肉&&&&&&&&&&&/p&
<span style="color: #&&&&&&&&&/div&
<span style="color: #&&&&&&&&&&&
<span style="color: #&&&&&&&&&/div&
<span style="color: #&&&&&/div&
<span style="color: #&&&&&/form&
<span style="color: #&/body&
<span style="color: #&/html&
<span style="color: #
<span style="color: #
<span style="color: #
&1&%@&Page&Language="C#"&MasterPageFile="~/Main.Master"&AutoEventWireup="true"&CodeBehind="Main.aspx.cs"
&2&&&&Inherits="AroundMeWeb.WebForm1"&Title="Untitled&Page"&%&
&4&asp:Content&ID="Content1"&ContentPlaceHolderID="head"&runat="server"&
&5&/asp:Content&
&6&asp:Content&ID="Content2"&ContentPlaceHolderID="ContentPlaceHolder1"&runat="server"&
&7&&&&&div&id="sideleft"&
&8&&&&&&&&&div&
&9&p&left&side&/p&
<span style="color: #&&&&&&&&&/div&
<span style="color: #&&&&&/div&
<span style="color: #&&&&&div&id="sideright"&
<span style="color: #&&&&&&&&&p&right&side&/p&
<span style="color: #&&&&&/div&
<span style="color: #&/asp:Content&
<span style="color: #
&&6&top:&0px;
&&7&right:&0px;
&&8&bottom:&0px;
&&9&left:&0px;
&10&position:&fixed;
&12.header_div&{}{
&13&CLEAR:&both;&MARGIN:&auto;&WIDTH:&1000px;&HEIGHT:&90px
&15.footer
&17&FLOAT:&left;
&18&WIDTH:&100%;
&19&text-align:&right;
&20&PADDING-RIGHT:&2px;
&21&PADDING-LEFT:&2px;
&22&FONT-SIZE:&14px;
&23&PADDING-BOTTOM:&1px!&important;
&24&PADDING-TOP:&3px!&important;
&25&border-top:&#px&solid;
&26&border-top-color:&#CCFFCC;
&28.footerdiv
&30&width:980px;
&32&padding-right:10px;
&34.mainbody
&37.pagebody
&40/**//*menu*/
&41.mainmenu
&43&BACKGROUND:&#e5ecf9;&MARGIN:&auto&auto&20px;&WIDTH:&975px;&BORDER-BOTTOM:&#px&solid;&HEIGHT:&26px
&46.menu_select_box&{}{
&47&BORDER-RIGHT:&red&0px&solid;&BORDER-TOP:&red&0px&solid;&BACKGROUND:&none&transparent&scroll&repeat&0%&0%;&BORDER-LEFT:&red&0px&solid;&WIDTH:&180px;&BORDER-BOTTOM:&red&0px&solid
&49.menu_select&{}{
&50&BORDER-RIGHT:&#px&solid;&BORDER-TOP:&#px&solid;&PADDING-LEFT:&0px!&important;&FONT-SIZE:&14px;&BACKGROUND:&white;&LEFT:&100px;&BORDER-LEFT:&#px&solid;&WIDTH:&70px!&important;&COLOR:&#2652a4;&LINE-HEIGHT:&25px;&BORDER-BOTTOM:&white&0px&solid;&POSITION:&relative;&TOP:&1px;&HEIGHT:&25px;&TEXT-ALIGN:&center
&52.menu_link&{}{
&53&FONT-SIZE:&14px;&BACKGROUND:&none&transparent&scroll&repeat&0%&0%;&FLOAT:&right;&WIDTH:&780px;&COLOR:&#9bc9df;&LINE-HEIGHT:&25px;&HEIGHT:&25px
&55#wrap&{}{
&56&BORDER-RIGHT:&black&0px&solid;&BORDER-TOP:&black&0px&solid;&MARGIN:&0px&auto;&OVERFLOW:&hidden;&BORDER-LEFT:&black&0px&solid;&WIDTH:&1000px;&BORDER-BOTTOM:&black&0px&solid
&58#main&{}{
&59&MARGIN:&0px&auto;&WIDTH:&1000px
&61#header&{}{
&62&TEXT-ALIGN:&left
&64#sideleft&{}{
&65&BACKGROUND:&#fff;&FLOAT:&left;&OVERFLOW:&hidden;&WIDTH:&30%;&padding-left:&10px;
&66TEXT-ALIGN:&left
&68#sideright&{}{
&69&FLOAT:&right;&WIDTH:&68%;&TEXT-ALIGN:&left;padding-right:&10px
&71#sideleft&{}{
&72&MARGIN-BOTTOM:&-32767px!&important;&PADDING-BOTTOM:&32767px!&important
&74#sideright&{}{
&75&MARGIN-BOTTOM:&-32767px!&important;&PADDING-BOTTOM:&32767px!&important
&78#navlist_main&{}{
&79&PADDING-RIGHT:&2px;&PADDING-LEFT:&2px;&FONT-SIZE:&14px;&PADDING-BOTTOM:&1px!&important;&PADDING-TOP:&3px!&important;&BORDER-BOTTOM:&#px&solid
&81#navlist_main&LI&{}{
&82&DISPLAY:&inline;&MARGIN:&0px;&LIST-STYLE-TYPE:&none
&84#navlist_main&LI&A&{}{
&85&PADDING-RIGHT:&9px;&PADDING-LEFT:&9px;&FONT-SIZE:&14px;&PADDING-BOTTOM:&3px;&MARGIN-LEFT:&1px;&PADDING-TOP:&5px;&LETTER-SPACING:&1px;&TEXT-DECORATION:&none;&BORDER-BOTTOM-STYLE:&none
&87#navlist_main&LI&A:link&{}{
&88&COLOR:&#075db3
&90#navlist_main&LI&A:visited&{}{
&91&COLOR:&#075db3
&93#navlist_main&LI&A:hover&{}{
&94&COLOR:&#ff6600
&96#navlist_main&LI&A.current&{}{
&97&BORDER-RIGHT:&#px&solid;&BORDER-TOP:&#px&solid;&FONT-WEIGHT:&bold;&BACKGROUND:&#ffffff;&MARGIN-LEFT:&6px;&BORDER-LEFT:&#px&solid;&COLOR:&#666677;&MARGIN-RIGHT:&10px;&BORDER-BOTTOM:&white&1px&solid;&LETTER-SPACING:&0px
&99/**//*endmenu*/
<span style="color: #0
<span style="color: #1
阅读(...) 评论()microsoft visual studio2010制作登录窗口等登录代码_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
microsoft visual studio2010制作登录窗口等登录代码
上传于|0|0|暂无简介
你可能喜欢