如果不使用表格，如何在 VS2010 中布局页面？

发布于 2024-10-10 04:10:13 字数 651 浏览 3 评论 0原文

我从 Beta 版开始就一直使用 .NET，从 HotDog pro 和 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>

原文

I have been using .NET since beta and HTML since the days of HotDog pro & notepad, using table layout of course. I am FINALLY ready to use only div, li, CSS for the layout, but my question is, what is the proper way to layout pages in VS2010?

When i use table layout its simple and i can visually see what im creating and where the elements are, such as the sample below - how should I do this using div's, etc in VS2010?

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

追我者格杀勿论 2024-10-17 04:10:13

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

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

回复收藏 0 原文

雨后彩虹 2024-10-17 04:10:13

下面是 ASP.NET MVC 中使用 Blueprint CSS 框架的母版页示例。

它有两列彼此相邻，下面有一个页脚。

 <%@ 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>

Here is an example of a masterpage in ASP.NET MVC that uses the Blueprint CSS framework.

It has two columns next to each other with a footer underneath it.

 <%@ 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>

回复收藏 0 原文

晒暮凉 2024-10-17 04:10:13

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

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

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

回复收藏 0 原文

◇流星雨 2024-10-17 04:10:13

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

所见即所得的程序很好。我就是这样学习的。就像其他事情一样，最终您会想知道幕后发生了什么。

回复收藏 0 原文

千里故人稀 2024-10-17 04:10:13

如果您需要使用支持 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 中进行智能感知，这里有一个插件。

If you need to use browsers that support HTML 4.01 then go with divs, but if your layouts get too complex you will eventually fall captive to div soup and understanding your markup and making changes will become cumbersome.

If you can use modern browsers that support HTML 5 (or add various hacks to make it work) I would go this route since your markup will have more semantic meaning and be easier to understand. Instead of making a nav like this:

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

You could use HTML5 to have:

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

Or if you were posting blogs instead of doing this:

<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>

You would write it like this:

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

As you can see it is a lot easier to understand and still gives the structure you are looking for over tables.

To then position everything like you would want I would use CSS3, but again if you need to support older browsers use CSS2.

To do this in VS2010, simply open up the .aspx or .ascx pages and start writing the markup. I find products like Dreamweaver to produce garbage markup when using a designer interface, so the best bet is to write it yourself by hand.

Also, if you do go the HTML5 route and want intellisense in VS2010, here is an addon for it.

回复收藏 0 原文

~没有更多了~