你应该如何在不使用表格的情况下在 VS2010 中布局页面？答案

【问题标题】：How are you supposed to layout a page in VS2010 without using tables?你应该如何在不使用表格的情况下在 VS2010 中布局页面？
【发布时间】：2011-06-01 21:09:40
【问题描述】：

我从 beta 版开始使用 .NET，从 HotDog 专业版和记事本时代开始使用 HTML，当然使用的是表格布局。我终于准备好只使用 div、li、CSS 进行布局，但我的问题是，在 VS2010 中布局页面的正确方法是什么？

当我使用表格布局时，它很简单，我可以直观地看到我在创建什么以及元素在哪里，例如下面的示例 - 我应该如何在 VS2010 中使用 div 等来做到这一点？

<table width="300" border="0" cellpadding="5">
  <tr>
    <td><img src="http://assets.devx.com/MS_Azure/azuremcau.jpg" alt="blah" width="70" height="70" /></td>
    <td><h2>This is some text to the right of the picture...</h2></td>
  </tr>
  <tr>
    <td colspan="2">Here some text underneath</td>
  </tr>
</table>

【问题讨论】：

你想学的是CSS float和盒子模型。我不是 CSS 专家，所以不知道该告诉你什么。
我希望不要回到在记事本中编码的时代，而是利用工具（如 VS、Dreamweaver）快速布局页面，无需为每个元素指定顶部和左侧（如果这是可能的）
我认为 Dreamweaver 在不插入大量垃圾 HTML 方面是更好的所见即所得工具之一。我们有几个“HTML 程序员”在我的工作中使用它。

标签： html css asp.net-mvc model-view-controller layout

【解决方案1】：

我会说你应该学习 Css 并使用 div 等来布局页面。在我看来，您不应该使用任何所见即所得的方法并从头开始编写标记，如果您知道如何操作，它也一样快。或者，如果您想要一个良好的基本 CSS 框架来以类似网格的方式处理布局，请尝试 960 Grid System。

至于看你在做什么，我会说使用最简单的。在网络浏览器中打开网站并点击刷新。

【讨论】：

【解决方案2】：

这是一个在 ASP.NET MVC 中使用 Blueprint CSS framework 的母版页示例。

它有两列并排，下面有一个页脚。

 <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

    <head runat="server">
        <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>

        <asp:ContentPlaceHolder ID="MetaDescription" runat="server" >
        </asp:ContentPlaceHolder>

        <asp:ContentPlaceHolder ID="MetaKeywords" runat="server">
        </asp:ContentPlaceHolder>

        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 


         <asp:ContentPlaceHolder ID="HeadContent" runat="server"/>

    </head>

    <%=Html.Flash() %>

    <body>
        <div id="flash" style="display:none"></div>

        <div class="container">

            <div id="main" class="span-24 last">

                <div class="span-5">

                    <div id="logo">

                    </div>

                    <% Html.RenderAction("MainMenu", "Cms"); %>

                </div>


                 <div class="span-19 last">

                    <div id="headerTekst">
                        <div class="padding-30">
                            <h1 class="right uppercase">Some text</h1>
                        </div>
                    </div>

                    <div class="padding-10">
                        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
                     </div>
                 </div>

                <div class="clear"></div>  
            </div>



            <div id="footer" class="span-24 last">

            </div>
    </div>  


    </body>

    </html>

【讨论】：

【解决方案3】：

要编写 html 代码，您绝对不应该使用 Visual Studio。请改用 Dreamweaver。

设计页面布局时，使用设计视图的 Adobe Dreamweaver 会比使用 Visual Studio 获得更好的工具。

只有需要对页面进行编程以使其动态化时才应该打开 IDE 并编写代码。

【讨论】：

在编写 HTML/CSS 代码时没有理由不使用 Visual Studio，它做得很好。

【解决方案4】：

对于布局，我使用 Firefox 和 FireBug 插件。它为您提供实时反馈。它并没有好转。拨入更改后，我会将更改复制到项目中的 html 或 css 中。

所见即所得的程序很好。我就是这样学习的。像其他所有事情一样，最终你会想知道引擎盖下发生了什么。

【讨论】：

【解决方案5】：

如果您需要使用支持 HTML 4.01 的浏览器，那么请使用 div，但如果您的布局变得过于复杂，您最终会被 div soup 俘虏，并且理解您的标记和进行更改将变得很麻烦。

如果您可以使用支持 HTML 5 的现代浏览器（或添加各种 hacks 使其工作），我会走这条路，因为您的标记将具有更多的语义含义并且更容易理解。而不是像这样制作导航：

<div class="nav">
   <ul>
       <li>Home</li>
       <li>About</li>
   </ul>
</div>

您可以使用 HTML5：

<nav>
    <ul>
       <li>Home</li>
       <li>About</li>
   </ul>
</nav>

或者，如果您发布博客而不是这样做：

<div class="post">
<h1>Example Blog Post</h1>
   <div class="entry">
      <p>Blog text goes here...</p>
   </div>
   <div class="entryFooter">
      <p> Posted in example category.</p>
   </div>
</div>

你可以这样写：

<article>
   <header>
      <h1>Example Blog Post</h1>
   </header>
   <p>Blog text goes here...</p>
   <footer>
      <p>Posted in example category.</p>
   </footer>
</article>

如您所见，它更容易理解，并且仍然提供了您在表格中寻找的结构。

要按照您想要的方式定位所有内容，我会使用 CSS3，但如果您需要支持旧版浏览器，请再次使用 CSS2。

要在 VS2010 中执行此操作，只需打开 .aspx 或 .ascx 页面并开始编写标记。我发现 Dreamweaver 之类的产品在使用设计器界面时会产生垃圾标记，因此最好自己手写。

另外，如果您确实走 HTML5 路线并希望在 VS2010 中使用智能感知，这里有一个 addon 。

【讨论】：