Rambler's Top100
Максим Покровский

— Привет, меня зовут Максим Покровский. Вы находитесь в моем рабочем кабинете. Поскольку я фрилансер, будем считать, что именно так он и выглядит. Здесь я пишу много интересных вещей, и если вы почувствовали, что я именно тот человек, который вам нужен, то я всегда открыт для контакта.



Сейчас работаю над:


  • Техническая поддержка popsop.ru( url )

    Текущий статус - изменнение функционала шаблона.

  • Разработка интерфейса для Korv ( url, design )

    Текущий статус - мелкие доработки графического интерфейса.

 Заказать мне работу

Рубрики / Теги

Последние записи

25.02

Структурируем HTML. Версия Покровского.
Комментарии (16) HTML


Где-то далеко, в горах, стоит храм, тропу к которому не каждый знает. Над храмом гордо светится гламурным розовым цветом три буквы: CSS. Из прохладного помещения доносится рускоязычная речь, что заставляет бросить странный взгляд на вывеску. Обычно там где слышится русская речь, имеют место быть совсем другие три буквы.

Внутри расхаживал бородатый монах, и раздовал мудрость своим ученикам.
— …ать! Нагородили блин. Да в вашем коде, леший заблудится, — монах отвесил еще одну порцию мудрости, которая приняла форму увесистого подзатыльника.

— За что? Все верно,правильно, кроссбраузерно, — послыщалось робкие возражения.
— Ну и что. Код он как одежда на человеке. Человек может быть хороший, но если как бомж одевается, то вряд ли путного в жизни добьется. Верстать надо красиво и чисто. Про чистый код я уже рассказывал. Теперь о красоте будем говорить.

— Первое правило - это соблюдение иерархии отступов. Для этого, диво как хорош notepad++ Вот, например, как выглядит хорошо структированный код в нем.

notepad_printscreen.jpg

— Второе правило - это знать меру. Логика здесь такая. Мало оформления - пиши в строчку, много - блюди иерархию. Проиллюстирую:

Оформление контейнера

Нам нужно оформить контейнеру четыре уголка. Забьем пока болт на современные методы, благодаря которым можно оформить все в одном div

Красиво:

<div class="lt-bg"><div class="rt-bg"><div class="lb-bg"><div class="rb-bg"> <!-- оформление -->
   <!-- Содержимое -->
</div></div></div></div>

Некрасиво:

<div class="lt-bg">
   <div class="rt-bg">
      <div class="lb-bg">
         <div class="rb-bg">
            <!-- Содержимое -->
         </div>
      </div>
   </div>
</div>

Простой список

Красиво:

<ul>
   <li><a href="#">О нас</a></li>
   <li><a href="#">Услуги</a></li>
   <li><a href="#">Наши работы</a></li>
   <li><a href="#">Наши партнеры</a></li>
</ul>

Некрасиво:

<ul>
   <li>
      <a href="#">
         О нас
      </a>
   </li>
   <li>
      <a href="#">
         Услуги
      </a>
   </li>
   <li>
      <a href="#">
         Наши работы
      </a>
   </li>
   <li>
      <a href="#">
         Наши партнеры
      </a>
   </li>
</ul>

Сложный список:

Красиво:

<ul>
   <li>
      <div class="lt-bg"><div class="rt-bg"><div class="lb-bg"><div class="rb-bg"> <!-- оформление -->
         <a href="#">О нас</a>
      </div></div></div></div>
   </li>
   <li><a href="#">Услуги</a></li>
   <li><a href="#">Наши работы</a></li>
   <li><a href="#">Наши партнеры</a></li>
</ul>

Бррр…:

<ul>
   <li>
      <div class="lt-bg">
         <div class="rt-bg">
            <div class="lb-bg">
               <div class="rb-bg">
                  <a href="#">
                     О нас
                  </a>
               </div>
            </div>
         </div>
      </div>
   </li>
   <li>
      <a href="#">
         Услуги
      </a></li>
   <li>
      <a href="#">
         Наши работы
      </a>
   </li>
   <li>
      <a href="#">
         Наши партнеры
      </a>
   </li>
</ul>

Простая таблица:

По аналогии с простым списком

<table>
   <tr>
      <td><a href="#">О нас</a></td>
      <td><a href="#">Услуги</a></td>
      <td><a href="#">Наши партнеры</a></td>
   </tr>
</table>

Сложная таблица:

По аналогии со сложным списком

<table>
   <tr>
      <td>
         <ul>
            <li>
               <div class="lt-bg"><div class="rt-bg"><div class="lb-bg"><div class="rb-bg"> <!-- оформление -->
                  <a href="#">О нас</a>
               </div></div></div></div>
            </li>
            <li><a href="#">Услуги</a></li>
            <li><a href="#">Наши работы</a></li>
            <li><a href="#">Наши партнеры</a></li>
         </ul>
      </td>
   </tr>
</table>

Собственно вся наука.

Метки:, ,

Комментарии

  1. 1
    tapazukk (25.02.2008) #

    Вроде дримвэйвер со списками делает подобное, что приведено как красиво. Вот только большинство редакторов организуют вложенность именно некрасиво (хорошо если это настраивается),а так править руками нецелесообразно, едь документ будет притерпевать еще изменения, как-то прикрутка к к cms или какая-то доработка/исправление. Вообщем, аппаратная зависимость :(

  2. 2
    pepelsbey (25.02.2008) #

    В целом — согласен. Разве что TR не отбиваю от самой таблицы, потому как смысла особого нет — он и так там должен быть, как не крутись.

    «Некрасиво» пишется в одно слово ;)

  3. 3
    Максим Покровский (25.02.2008) #

    2tapazukk, я обычно все руками делаю. Никогда хотдоги не дорастут до уровня ручной верстки.

    …как-то прикрутка к к cms…

    Ну это смотря какая CMS. Основная проблема в том, что существуют уже готовые функции выводящий некрасивый код. Так это всегда можно поправить. Сейчас большинство CMS генерят валидный XHTML, а что было раньше? Может и красота современем наведется.

    В целом — согласен. Разве что TR не отбиваю от самой таблицы, потому как смысла особого нет — он и так там должен быть, как не крутись.

    Угу. Это у меня так исторически сложилось. Настолько привык отбивать

    , что табличка м неотбитой строкой мне кажется каким-то непонятным инопланетным страхом.

  4. 4
    SHAman (25.02.2008) #

    Совсем недавно написал пост на похожую тему. Может, заинтересует:
    http://dayte2.com/?u=shaman&act=state&num=125

  5. 5
    Максим Покровский (25.02.2008) #

    2SHAman, да тема похожа. Только я более расширил твой третий пункт.

  6. 6
    SHAman (25.02.2008) #

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

  7. 7
    Dimox (26.02.2008) #

    Все делаю также.

    Разве что TR не отбиваю от самой таблицы

    Имеется в виду отступ слева? Я вот его с самого начала верстальческой деятельности добавлял, поэтому по-другому для меня будет непривычно :)

  8. 8
    vashurin (26.02.2008) #

    Хорошая статья, но есть две вещи:
    Первая, часто верстальщик верстает (X)HTML, а после отдает код программисту и значит уже ни как не контролирует, то что получится конце концов.
    Вторая, ведь есть же тот же FireBug под Firefox, который и так (X)HTML - код разложит в читаемый вид, а значит в случае чего, будет проще вносить какие то правки.

  9. 9
    Максим Покровский (26.02.2008) #

    …часто верстальщик верстает (X)HTML, а после отдает код программисту и значит уже ни как не контролирует, то что получится конце концов…

    Я, например, работаю в команде с несколькими программистами. И тут у нас договоренность - программер не экспериментирует со структурой и css (или в крайнем случае со мной консультируется), а я если имею возможность максимально внимателен к их просьбам по организации структуры. В итого получается очень здорово. Ну а в том случае, если программист вам не знаком, тут уж “но пассаран”. В любом случае, тот факт что кто-то испоганит вашу работу, еще не повод самому ее поганить ;)

    ведь есть же тот же FireBug под Firefox, который и так (X)HTML - код разложит в читаемый вид, а значит в случае чего, будет проще вносить какие то правки.

    Э, нет. Одно дело просмотреть код через FireBug, поморщиться и свалить с сайта куда-нибудь, где обитает красивый код, и совсем другое дело сидеть и самому править этот “дремучий лес” заботливо взрощенный чьими то кривыми ручками.

  10. 10
    Sergej Doloto (27.02.2008) #

    Вы все-таки считаете, что игра стоит свеч?)

  11. 11
    Максим Покровский (27.02.2008) #

    Угу, мой горячо ненавистный сплогер :)

  12. 12
    Быстрые клавиши для Wordpress » PokrovBlog | Максим Покровский о правильном Веб-дизайне (28.02.2008) #

    [...] Жмем ALT+SHIIFT+u затем дважды ALT+SHIIFT+l и еще раз ALT+SHIIFT+u - получаем сносный ul-список, аналогично, но с буквой “o” создается ol-список (между прочим с отступами) [...]

  13. 13
    Картошка (01.03.2008) #

    Спасибо автору, применю обязательно. Хотя уже насобирал умняков кучу - когда бы их в дело применить? Где столько времени взять?

  14. 14
    fael (29.03.2008) #

    Спасибо. Полезно, наглядно и образно. Как воочию, увидела храм и гламурный цвет трех букв :)))

  15. 15
    Гость (06.05.2008) #

    Все это очень интересно и полезно, но есть один вопрос:
    А что делать если используешь оптимизаторы? Гляньте на коды Гугла, Яху и остальных гигантов? там нет никакой структуры и вы от этого меньше (читать как реже) заходите на их сайт?
    Да, несомненно верстать надо валидно и со всеми отступами, но далеко не обязательно чтобы это было уже в готовом продукте. IMHO.

  16. 16
    Максим Покровский (06.05.2008) #

    У гигантов своя политика. Они потому и гиганты, что могут ее грамотно менять от обстоятельств. Там каждый байт на счету, а уж проблема редизайна сторонними разработчиками их беспокоит меньше всего ;)

Оставить комментарий

Вы можете использовать простые теги форматирования HTML (вроде <a>, <ul> and others). Чтобы вставить пример код, используйте
<code lang="php">$a = "hello";</code> (поддерживаемые языки: ruby, php, yaml, html, css, csharp, javascript). Также Вы можете использовать <code>$a = "hello";</code>, синтаксис не будет подсвечен. Если вы не хотите использовать тег <code>, замените символ < на &lt;


!

Самое обсуждаемое

Они читают меня, я читаю их

— Люди делятся на заказчиков и тех, кто может ими стать.
(девиз успешного фрилансера)