Блочная верстка сайта

Блочная верстка сайта

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

Несколько определений

Верстка страниц сайта — это процесс создания веб-страницы из макета дизайна, как правило, в формате PSD, с помощью кода соответствующего языка разметки (HTML, WML), так же состоящий из подключенных к ней стилей оформления (CSS) и подгружаемых скриптов (например, JavaScript) и объектов (например, Flash-анимация).

Блочная верстка создается благодаря семантическим конструкциям разметки, например,

. Принято считать, что разновидностей верстки три:

  1. Табличная верстка — верстка, построенная на таблицах
    ;
  2. Блочная верстка — верстка в конструкции
    ;
  3. Смешанная — использование в верстке табличных и блочный конструкций в примерно равных пропорциях.
  4. Некоторые выделяют еще один вид — css-верстка, т.е. верстка страницы с использованием CSS.

    Различают верстку и по ширине страницы:

    Фиксированная верстка — означает, что сверстанная страница имеет одну заданную ширину, как правило, расположенную по центру при большем разрешении экрана.

    Резиновая верстка — когда сверстанная страница тянется по ширине окна браузера, либо в заданных приделах, например, от 1024px до 1600px, либо не имеющая конечной ширины.

    Кросс-браузерность — это корректное идентичное отображение сверстанной страницы сайта в различных браузерах: Internet Explorer, FireFox, Opera, Safari, Google Chrome и другие.

    HTML-верстка

    Итак, верстка страницы сайта начинается с оценки макета дизайна и выбора конструкции — модульной сетки, по которой будет верстаться страница. На модульных сетках останавливаться пока не будем, рассмотрим их позже, в новых статьях.

    Далее, начинаем «нарезать» макет дизайна и выносим максимальное количество слоев в спрайты.

    Готовим html-каркас или берем заранее приготовленный:

    HTML код: Заранее приготовленный html-каркас.
    
    
    
    
            Example
    
    
            
    ...
    ...
    ...
    ...

    Далее, там где стоит многоточие «...», верстаем необходимые элементы разметки в соответствии с дизайном. Например, шапка сайта — header у нас получится такая:

    HTML код: Шапка сайта.
    
            
    
    

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

    В контенте — content, понятное дело, располагается контент, текстовый, графический, какой угодно. Начинать следует с заголовка h1, текст желательно выделять в параграфы p, и т.д. в соответствии с семантикой.

    В нижней части сайта, так называемого подвала — footer, как правило, размещают копирайты, кнопки счетчиков, какие-либо ссылки на разделы.

    О стилях оформления CSS поговорим чуть позже, отмечу только что их необходимо выносить в отдельный файл и размещать между тегами и :

    HTML код: Вынос CSS в отдельный файл в спецификации xhtml.
    
    
    
    

    Гм.. что еще?

    Несколько преимуществ блочной верстки

    1. Блочная верстка имеет более логичный семантический код;
    2. Блочная верстка имеет сравнительно небольшой вес, что способствует быстрой загрузке страницы;
    3. Блочная верстка позволяет отделить структуру от представления.

    Ну и все, пожалуй, вкратце по азам пробежались. На этом спешу отклониться.

    Спасибо за внимание.

    Автор статьи: 
     

    Добавить комментарий






    Ваша оценка:

    Свежие статьи

    • 08 апреля 2012г. –  Кодинг

      Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев

      Всем привет.

      Сразу хочу отметить, что если мы говорим об иконках, их можно масштабировать двумя способами (других я просто не знаю): конвертировать иконки в шрифт и подключать их через @font-face, либо использовать SVG в качестве формата для этих иконок.

      Немного отойду от темы и расскажу предысторию.

      Предыстория

      Я было решил использовать у себя на сайте шрифтовые иконки, казалось бы все хорошо: и размер менять можно, и цвет задавать и запрос к серверу всего один (на подключение шрифта). Другими словами, подключаемый шрифт это и есть своеобразный «CSS спрайт», верно?

      Я давай проверять, везде ли все красиво выглядит. Оказалось, что не все так хорошо как хотелось бы, потому как в некоторых размерах иконки выглядели кособокими, а при отключенном сглаживании вообще противно смотреть на них стало. Что делать? Использовать второй вариант — SVG, о чем и пойдет речь.

      Читать далее →
    • 11 февраля 2012г. –  Кодинг

      Realtime xRTML — новый html-подобный язык разметки

      Речь пойдет о новом запатентованном HTML-подобном языке разметки — xRTML, который позволяет редактировать функции сайта в реальном времени без использования Ajax.

      Читать далее →
    • 10 марта 2011г. –  Интернет

      Рамблер Нихром. Коротко о главном

      В начале февраля 2011 года компания Rambler выпустила в свет свой собственный браузер — Нихром, созданный на базе движка Chromium от Google.

      На первый взгляд Rambler Нихром ничем не отличается от Google Chrome, разве что панелью закладок сервисов Рамблера, однако, при близком рассмотрении, можно увидеть кое-что еще.

      Читать далее →
    • 22 февраля 2011г. –  Кодинг

      Верстка сайта на HTML5 с примерами

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

      Читать далее →
    • 30 января 2011г. –  Кодинг

      Блочная верстка сайта

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

      Читать далее →
    • 30 января 2011г. –  Кодинг

      Ручная верстка: преимущества и недостатки

      В этой статье рассмотрим преимущества и недостатки ручной верстки страниц сайта, а так же узнаем как верстают профессионалы. Набор инструментов, помогающих быстро верстать «руками». В чем основные сложности ручной верстки. Стоит ли использовать фреймворк и какой он должен быть?

      Читать далее →

    Статьи по тегам