Как вы должны макетировать страницу в VS2010 без использования таблиц?

Question

Я использую .NET начиная с бета-версии и HTML со времен HotDog pro & notepad, конечно же, используя макет таблицы. Я НАКОНЕЦ готов использовать только div, li, CSS для макета, но мой вопрос в том, как правильно расположить страницы в VS2010?

Когда я использую макет таблицы, она проста, и я могу визуально увидеть, что я создаю и где находятся элементы, например, приведенный ниже пример - как мне это сделать, используя div и т. Д. В 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>

Answer 1

Я бы сказал, что вы должны узнать о Css и использовать div и т. Д. Для верстки страниц.На мой взгляд, вы не должны использовать WYSIWYG и писать разметку с нуля, это так же быстро, если вы знаете, как.Или, если вам нужна хорошая базовая среда CSS для работы с макетом в виде сетки, попробуйте 960 Grid System .

Что касается того, что вы делаете, я бы сказал, используйтепростейший.откройте сайт в браузере и нажмите обновить.

Answer 2

Если вам нужно использовать браузеры, поддерживающие HTML 4.01, переходите к divs, но если ваши макеты станут слишком сложными, вы в конечном итоге попадете в div soup , и понимание вашей разметки и внесение изменений станет громоздким.

Если вы можете использовать современные браузеры, которые поддерживают HTML 5 (или добавить различные хаки , чтобы заставить его работать), я бы пошел по этому пути, поскольку ваша разметка будет иметь более смысловое значение и ее будет легче понять. Вместо того, чтобы делать навигацию как это:

<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 и хотите использовать intellisense в VS2010, вот для него addon .

Answer 3

Для макета я использую Firefox с плагином FireBug . Это дает вам обратную связь в режиме реального времени. Это не становится лучше. Как только я наберу изменения, я скопирую это изменение в html или css в проекте.

Программы WYSIWYG в порядке. Это то, как я узнал. Как и все остальное, со временем вам захочется узнать, что происходит под капотом.

Answer 4

Для написания HTML-кода вам определенно не следует использовать Visual Studio.Вместо этого используйте Dreamweaver .

Когда разрабатывает макет страницы , вы получите намного лучший инструмент с Adobe Dreamweaver, используя представление дизайна, чем Visual Studio.

Только только когда пора запрограммировать страницу, чтобы она была динамичной, когда вам нужно открыть IDE и написать код.

Answer 5

Вот пример мастер-страницы в 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>