• 第一篇:使用Visual Studio 2008布局页面


        目录
         在每个项目的开始,我们最先做的事情一般就是页面布局(高风险实验除外),因为一个好的页面不仅仅能最大限度的吸引用户的眼球。还能帮助我们对自己的产品有一个直观的认识,帮助我们发现需求。
        设计之初不妨用笔在纸上先勾勒一个草图,这可以尽量节约我们的时间。



    图1

     
        我们要实现的布局主要为4部分。
            页头:页面logo、广告、菜单及用户登录信息。
            页尾:版权说明及其它描述信息
            左边栏:用户定义信息、网站推荐等
            主题:分类查询、热门商品、热门商户等
        比较明显的,页头及页尾是各个页面的公有部分,我们通过模板来实现。

        打开visual studio 2008使用快捷键Ctrl+Shift+N打开新建项目窗口如图2,选择web,选择Asp.Net Web Application。选择Framework版本,visual studio 2008 将为我们筛选出适用与该版本的项目类型,这里我们选择3.5。输入Name、Location、Solution信息点击确认。 



    图2

        将项目中自动添加的Default.aspx删除。
        
    创建模板:
            选中项目名称使用快捷键Ctrl+Shift+A添加新的文件。选择Master Page,输入名称Main.Master确定。 

    图3

    生成代码如下:
    <%@ 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>
    </head>
    <body>
        
    <form id="form1" runat="server">
        
    <div>
            
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            
            
    </asp:ContentPlaceHolder>
        
    </div>
        
    </form>
    </body>
    </html>

        IDE为我们生成了两个ContentPlaceHolder控件。应用该模板的页面将仅能在ContentPlaceHolder内操作。
        (小提示:使用菜单可以在设计器上显示标尺帮助我们设计,如图4.)


    图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面板。

     图5

        打开Main.Master
        在Manage Stytles面板上点击"Attach Style Sheet"选择Main.css。
        在Manage Stytles面板上右键点击Main.css>New Styles创建新样式,生成如下代码

    .page
    {
     top: 0px;
     right: 0px;
     bottom: 0px;
     left: 0px;
     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有了很好的智能感知。

     
    图6


        将模板最外面的DIV 的id设置为“wrap”,为ID为wrap的div定义样式

    #wrap {
     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应用样式

    .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
    : #787888 1px solid;
     border-top-color
    : #CCFFCC;
    }


        对于CSS的定义网上已经有大量的资料,这就不多说了。  
    完整示例代码:
    Main.Master

    Code


    Main.aspx
    Code

    Main.css
    Code

  • 相关阅读:
    罗辑思维 140 认钱不认人(刚需是扯淡,一切都是稀缺,人生全是选择)——理性永远都是最珍贵的
    程序最多能new多少内存(2G内存里要放程序的5大区,HeapAlloc比new要快多了,而且超过2G的时候会告诉你)
    Qt中使用ActiveX(3篇)
    windows下的socket网络编程(入门级)
    网络数据包发送工具PacketSender中文源码
    avalon.js实现一个简易日历
    avalonJS入门(一)
    JS中的模块规范(CommonJS,AMD,CMD)
    程序员必看的书
    简单的语音聊天室
  • 原文地址:https://www.cnblogs.com/tianyamoon/p/1032695.html
Copyright © 2020-2023  润新知