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

 

 

У нас имеются следующие селекторы:

 

Свойства и возможные значения CSS:

 

Фон (background) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.).

Свойство color используется для определения цвета текста.


font-family

— это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).

font-size — размер текста, задается в различных системах измерения, здесь мы будем использовать пиксели.


 

margin — определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх — право- низ — лево. Поскольку верх — низ, право — лево у нас совпадают, то дублировать их нет потребности.

 

width — ширина блока.

 

height — высота.

 

float — свойство, которое позволяет нам позиционировать элементы селектора, главным образом по левую или по правую сторону.

 

Теперь добавим код в наш файл стилей style.css (ведь вы его уже создали, да?):

 

body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}

#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}

#header {
background: #838283;
height: 200px;
width: 900px;
}

#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}

#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}

#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}

#footer {
background: #838283;
height: 180px;
width: 900px;
}

www.web-lesson.ru


Почему вам повезло больше, чем верстальщикам, начавшим работу уже давно

Существует два типа верстки: блочная и табличная. На заре времен верстка строилась в виде таблиц. Сперва создавалась всего одна, большая.

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

В нее встраивался head – голова, основная часть. Та, в которую входит логотип, какая-то основная информация типа телефонов и так далее.

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

Далее сайтбар. Это боковая панель. В нее можно запихнуть навигационное меню, ссылки, списки, рекламу.

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

Далее врисовывалось основное меню для перехода по категориям.


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

Основная контентная часть. Текст статьи, вводное приветствие или что-то иное.

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

Внизу размещается футер. Его используют и сейчас. Сюда, как правило, вставляют небольшие ссылочки на контакты, вакансии, информацию «О нас». Могут прилепить даты существования ресурса или просто магическое слово «copyright», которым разработчики надеются указать или защитить свое авторское право. Пользы от него как от подковы, висящей над дверью, может отпугнуть только вурдалаков, хотя они, как правило, в футер и не заглядывают.

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

Чуть позже появились новые стандарты. Табличную верстку заменила блочная. Тег «div» — это и есть блочная верстка. Можете посмотреть код любого сайта. Кликните правой кнопкой мыши и выберите «Просмотр кода элемента». Взгляните на мой скриншот. Тут есть блок главной страницы, футера, левой и правой колонки. Все они подписаны.

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

Современные сайты строятся из блоков, покажу схематично пример, чтобы вы понимали. Разница тут скорее в коде страницы. Видите, никакой основной таблички нет. Блоки, размещенные в той или иной части. Иногда они могут заходить друг на друга или сочетать в себе несколько элементов, но один лишний элемент (большая таблица) исчез.


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

Оформление блоков осуществляется при помощи CSS, это особый язык программирования. В нем сложно запутаться, он менее громоздкий нежели получается при использовании табличной верстки, все довольно логично, четко и удобно для верстальщика. Благодаря блокам можно решить больше задач, гораздо проще редактировать документы, да и странички загружаются значительно быстрее.

Пошаговая инструкция: как делаются сайты

Давайте по шагам разберем как вообще портал превращается в электронный ресурс. В этом нет ничего сложного. Да, придется приложить какие-то усилия для изучения, но это принесет не только моральное удовлетворение, но и стабильный доход. Верстка – это такое дело, в которое ввязываются не многие.

Более 80% людей просто смотрят на непонятный набор символов, вспоминают школьную программу по математике: логарифмы, дифференциалы – сходят с ума, пугаются и забывают об этой теме: «Пойду лучше китайский выучу, оно-то проще будет».


Вы же уже увидели кое-какой алгоритм и убедились, что в наборе символов есть повторяющиеся элементы. Это отлично и, согласитесь, стало не так страшно.

Давайте теперь посмотрим как происходит сотворение сайта. Сначала дизайнеры работают в Photoshop. У них получается примерно такая вот картинка. Пока это всего лишь фотография, однако, у нее есть свои отличия.

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

Она изготавливается в особом фотошоповском формате, типа блокнотного txt или вордовского doc. Из psd, так называется этот формат, раскраиваются блоки. Для этого есть специальная кнопка в меню слева.

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

После того как документ раскроен. Его можно «Экспортировать для web» и в результате на компьютере появляется папка images, которую верстальщик использует для распределения картинок по сайту.

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

Я сделал этот вариант за минуту, он не правильный. Просто хотелось вам показать примерный результат. Вы можете скачать электронную версию моего psd-макета (скачать) и попробовать сделать свою, правильную версию, посмотрите, какие картинки пригодятся для размещения и как вы их будете вырезать. Заодно попробуете поработать самостоятельно над шаблоном в photoshop.


Для начинающих верстальщиков и дизайнеров это будет не только интересно, но и полезно. Поменяйте цвета, переставляйте элементы местами, дорабатывайте шаблон и смотрите что смотрится хорошо, а какие изменения вам не нравятся.

Ваш первый сайт. Верстка займет всего пять минут

Над самой версткой можно работать в программе Notepad++. Сегодня я не буду затрагивать программу Adobe Dreamweaver, т.к. это тема отдельной статьи, но отмечу, что она как раз создана для верстальщиков.

Работы над сайтом обычно не начинаются с создания файла style.css, но думаю что так вам будет интереснее. Это основной документ, в котором описывается как именно будет выглядеть ваш портал. Все просто. Даже английский учить не обязательно.

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

Background – это цвет фона.

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

Кликнув два раза в Photoshop по цветовой палитре вы можете узнать и другие цвета.


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

Вот так будет выглядеть html документ с текстовой составляющей. Уже знакомые меню, тела и контейнеры… тег h2 тоже должен быть вам знаком. Это заголовки. Впишите в них свои слова.

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

Скачайте эти два документа в одну папку и откройте с помощью Notepad ++, затем отредактируйте цвет и текст, а затем запустите index.html с любого браузера (скачать).

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

Получится примерно такой вариант.

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

Поздравляю. Это ваша первая страница в интернете! Вы сделали ее, у вас получилось. Естественно, что вместо цвета можно вставить и картинку, которая была вырезана из фотошопа в документ images. Для этого нужно просто прописать путь. Как вы видите, ничего супер сложного тут нет.

И напоследок… качаем видео уроки


Как я вам уже говорил, самое сложное в верстке – это найти хорошие обучающие материалы. Сам я начинал с книг и только через две недели смог сделать свой первый индекс-файл. Чтобы вы понимали, без таблицы стилей (css) она будет выглядеть вот так.

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

Согласитесь, вообще не впечатляет. Поэтому я рекомендую вам постигать основы при помощи видео курсов. Внизу я разместил ссылки, кликнув по ним, вы можете скачать бесплатные уроки html и css. Они позволяют быстрее достигнуть хороших результатов. Кроме того, чтение требует значительно большей силы воли, нежели просмотр интересных видео.

  1. Html — уроки для начинающих.
  2. Css — уроки для начинающих.
  3. Бесплатный мини-курс по вёрстке сайта.

Желаю вам успехов в ваших начинаниях. Уверен, что совсем скоро вы начнете не только учиться, но и работать онлайн, а также реализовывать невероятные проекты!

Если вам понравилась эта статья – подписывайтесь на рассылку и получайте больше полезных материалов для совершенствования собственных навыков!

start-luck.ru

Блочная верстка с <div>


С помощью разметки определяется расположение элементов на веб-странице. Например, мы создаем шапку сайта, внутри которой размещаем необходимый нам контент (логотип, номера телефонов, навигационное меню и т. п.). Точно так же мы поступаем с основным разделом веб-страницы, а также боковой панелью и футером. Все эти элементы, по сути, являются определенными HTML-тегами. И тегом номер один в блочной верстке является тег <div>.

Элемент <div> можно назвать своеобразным фундаментом для построения веб-страниц. Изначально он ничем не выделяется внешне, кроме разве что того факта, что это блочный элемент, который по умолчанию занимает всю ширину документа, а следующий за ним элемент начинается с новой строки.

Тег <div> универсален и часто служит контейнером для других HTML-элементов. Например, шапка сайта, футер либо сайдбар — это зачастую не что иное, как блок div, содержащий в себе такие же блоки и/или другие HTML-элементы.

Через различные классы и идентификаторы div-блокам задается соответствующее CSS-оформление. К примеру, чтобы было удобнее писать стили для шапки сайта, можно добавить к блоку класс .header, а для футера — класс .footer.

Использование тегов <div> в верстке не означает, что нужно отказаться от других тегов. Если для решения ситуации иной тег подходит лучше, используйте его. Яркий пример — тег длинной цитаты <blockquote>
. Согласитесь, нет смысла использовать вместо него <div>, ведь <blockquote> прекрасно справится со своей задачей. Кроме того, это решение будет более правильным с точки зрения семантики.

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

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

Например, шапка сайта может помещаться в HTML5-тег <header>, а подвал — в похожий тег <footer>. Кроме того, существует еще множество других семантических тегов — <nav>, <section>, <article> и т. д. Данными тегами можно заменять обычные теги <div> для объединения элементов.

Как вы могли догадаться, HTML5-теги дают более точную информацию о том, что в них содержится. Это дает определенные преимущества в плане идентифицирования роли того или иного контента веб-страницы, однако со стороны стилизации ничего не меняется: вы можете точно так же применять CSS-стили к семантическим тегам, как применяете их к простым блокам <div>.

idg.net.ua

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

  • При работе со слоями или, иначе говоря, блоками и элементами div, основная нагрузка ложится на CSS, т.к. без свойств слои из себя практически ничего не представляют.
  • К сожалению до сих пор существует проблема с кроссбраузерностью при работе с блоками. Т.е. одни и те же свойства дают разный результат в разных браузерах. Для борьбы с такими проблемами существуют так называемые хаки. Хак — это набор приемов, когда отдельным браузерам подается код, который понимается только этим браузером, а остальными игнорируется.

Отличительные черты от табличной верстки

Допустим, необходимо создать шаблон страницы с «шапкой», «подвалом» и двумя колонками.
Отличия:

  1. Высота слоев div ограничена высотой контента:
  2. Табличная верстка Блочная верстка
    табличная верстка блочная верстка сайта css
  3. В случае, когда содержимое слоя превышает его установленную высоту, то браузеры по-разному ведут себя — одни увеличивают высоту слоя под новый контент, а другие, оставляя высоту первоначальной, накладывают контент поверх слоя.

Фиксированный дизайн или
жесткая блочная верстка (две колонки)

  • Фиксированный макет подразумевает использование слоев заданной ширины, которая определяется разрешением монитора пользователя.
  • Так как наиболее популярным среди пользователей сети является разрешение монитора 1024×768, то желательно ориентироваться именно на него. Общая ширина блоков в таком случае составляет 900–1000 пикселей (небольшая часть пикселей требуется на полосы прокрутки и границы окна браузера).
  • Основной блок с контентом размещается по центру, тогда «свободные» поля по краям неплохо смотрятся даже при большом разрешении монитора.
  • Общая ширина может выбираться дизайнером, что называется «на глаз», или после сбора каких-либо дополнительных сведений.
  • Выполнение:

    • «Разбиваем» все основные элементы страницы на блоки следующим образом:
      • блок 1 — слой первый (id="shapka"),
      • блок 2 и 3 заключаются в единый блок (id="container"),
      • блок 2 — слой с меню (id="menu"),
      • блок 3 — слой с контентом (id="content"),
      • блок 4 — слой с id="bottom".

    Схематично изобразим расположение блоков:
    фиксированное позиционирование пример

    • Выбираем общую ширину слоев «на глаз» — 750 пикселей.
    • Центрируем блок (значение auto для свойств margin-left и margin-right)
    • Задаем внутренние поля, чтобы текст не «приклеился» к краю слоя (свойство padding)
    • Высоту любого слоя, а в нашем случае высоту первого блока можно задать двумя способами:
    1. либо напрямую задав значение свойству height в пикселях, процентах или др. единицах;
    2. например, для верхнего слоя «шапки»:

    3. либо задать высоту при помощи отступа
    4. например:

    Весь код для шапки:

    • Задаем ширину контейнера: она должна быть 750px + 20px (общая ширина макета + внутренние отступы в общей ширине макета). Т.е. в контейнере нет внутренних отступов, поэтому увеличим его ширину на 10 пикселей слева и 10 пикселей справа
    • Если макет должен прилегать к левой части экрана, то браузер выполнит это автоматически. В нашем случае отцентрируем блок контейнера
    • Слой номер 2 шириной в 200 пикселей (width)
    • Для этого же слоя (меню) устанавливаем обтекание соседним блоком, т.е. свойство float: left
    • Задаем внутренние поля, чтобы текст не «приклеился» к краю слоя (свойство padding)
    • Задаем цвет текста и заднего фона (background, color)
    •  

    • Задаем ширину слоя из расчета 770px — 200px = 570px, Но! так как мы установили внутренние отступы в обоих блоках 2 и 3, то мы должны вычесть еще 40 пикселей: 20 — внутренние отступы блока с меню и 20 — внутренние отступы блока с контентом. Получим ширину слоя 770px — 200px — 40px = 530px
    • Задаем обтекание float: left, исключая баг браузера Internet Explorer: если не установить свойство, то между слоями будет зазор. Кроме того, если не установить это свойство, то блок окажется за блоком меню, и только лишь его контент (текст) будет обтекать блок меню справа.
    • Задаем цвет заднего фона (background) и внутренние поля (padding)
    • Ширину слоя устанавливаем в 750 пикселей
    • Для этого блока надо убрать обтекание, т.е. установить свойство clear
    • Устанавливаем внутренние поля padding
    • Задаем цвет для фона (background) и текста (color)
    • Центрируем блок (margin-right и margin-left)

    Результат:

    Фиксированный дизайн для трех колонок

    При фиксированном дизайне для макета из трех колонок можно выделить два основных подхода построения модульной сетки:

    1. Использование свойства float для расположения колонок рядом.
    2. Использование набора тех CSS свойств, которые предназначены для позиционирования слоев.

    Рассмотрим первый случай.

    Использование свойства float для макета в три колонки

    На рис. 3 — результат использования свойства float для трехколонного макета. На самом деле используется 6 слоев — отдельно для заголовков колонок и отдельно для самих колонок.

    Выполнение:

    • Определим для заголовков три слоя (#header...) и для колонок три слоя (#col...).
    • Так как колонки и их заголовки расположены на двух разных строках, то объеденим их в контейнеры (class="container").
    • Получим схематичное изображение расположения блоков:

    пример блочного макета

    Получим следующую html-структуру:

    • Ширину колонок и заголовков сделаем у всех одинаковой. Поскольку колонок 3, а средняя ширина страницы должна быть примерно 700-900 пикселей, то установим ширину колонок в 250 пикселей.
    • Добавим внутренние поля (отступы от содержимого текста) — padding и внешние отступы, чтобы обеспечить зазор между колонками. Поскольку свойства задаются сразу для все колонок одновременно, а сам весь макет не центрируется, а выравнивается по левому краю, то установим отступ только с одной стороны — левой — у всех колонок одновременно (margin-left).
    • Добавим также внешний отступ сверху, обеспечив зазор по вертикали между заголовками и колонками, а также отступ заголовков от верха страницы (margin-top).
    • Для того, чтобы блочные теги div, расположились рядом друг с другом, необходимо задать им обтекание — float.
    • Добавляем границу для блоков (border) и и задаем параметры шрифта (font-family, font-weight, font-size, color).
    • Получим код:

    • Установим задний фон отдельно для каждого селектора.

    Смотрим промежуточный результат:

    • Теперь необходимо объединить в отдельные слои-контейнеры заголовки и колонки и задать им соответствующий стиль — отмену обтекания (clear)
    • Теперь осталось доработать шрифт текста в колонках, изменив его размер, начертание и цвет.

    Результат:

    Использование позиционирования слоев для макета в три колонки

    Возьмем в качестве примера макет, состоящий из трех колонок разграниченных разделительной линией (рис. 6).

    Выполнение:

    • Для данного макета достаточно создать три слоя div для каждой колонки.

    Поэтому структура будет простой:

    • Установим одинаковую ширину колонок (width) и внутренние поля по вертикали и горизонтали (padding).
    • Для удаления блочности слоев, т.е. для того, чтобы расположить их рядом по горизонтали, необходимо задать свойство css float.
    • Так как разделительная граница должна присутствовать только с внутренних сторон слоев, то рамку необходимо добавить только у двух слоев с одной стороны (border).

    Дизайн в три колонки готов!

    labs.org.ru

    Что такое блочная верстка

    Блочная верстка — это верстка дивами (div блоками) или слоями.

    Термин «слой» довольно устойчиво употребляется в профессиональной среде, наравне с термином «див». Краткость и емкость!

    История слоев уходит далеко в 90-е, когда компания Netscape ввела тег <layer> (слой) в свой браузер. Это была настоящая инновация, ведь теперь можно было показывать и прятать содержимое слоя, накладывать слои прямо друг на друга, менять положение слоев. Это был настоящий прорыв по созданию и отображению динамического контента на странице. Но в спецификации HTML этот тег не включили, зато разработали синтаксис по работе со слоями при помощи CSS — каскадных таблиц стилей.

    Проблема заключалась в том, что требовалось поддерживать разные браузеры и писать сложный код для css-стилей, который бы учитывал особенности каждого браузера и управлял видом любого <div> элемента.

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

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

    Я предлагаю вам перейти непосредственно к обсуждению слоев. Объясняя «на пальцах», отмечу что использование слоев в тесной связке со стилями очень упрощает работу. Но не стоит принимать любой элемент кода за слой, все-таки слой (блок) это скорее объединение этих микроэлементов в одну макро-группу — для формирования цельного дизайна блока.

    Иными словами, мы берем тег <div>, применяем к нему стилевое оформление, а уже потом внутрь него помещаем несколько элементов веб-страницы, к которым, будучи «дочерними» элементами слоя (блока) тоже применяются стили.

    Вот что вам нужно знать о блочной верстке. Страница делится на блоки, внутрь блоков помещаются элементы, блокам задаются стили, элементам внутри блоков также задаются стили.

    Обратите внимание, одни и те же элементы, но помещенные в разные блоки, могут иметь разное стилевое оформление. Например ссылки в тексте статьи мы можем сделать менее выраженными, а ссылки в сайдбаре (или футере) — более яркими и заметными. О том как вставить ссылку в HTML читайте тут.

    Принципы блочной верстки

    Основных конструктивных принципов два:

    • Разделяйте содержимое блока и его оформление
    • Активно применяйте блоки (дивы) в верстке

    Давайте расскажу немного подробнее. Во-первых, ваш html-код должен включать в себя только два вида тегов — основные теги разметки и теги форматирования. Это значит любое оформление следует выносить в css-файлы. Объясняя по-простому, это значит что никаких <div style=»»></div>, <p style=»»></p> и других подобных вещей с использование <style> быть не должно. Почему?

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

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

    Оно и понятно, ведь теперь исключительная роль таблиц в сайтостроении — предоставление данных. Табличными данными может быть статистика, числа, метрики.

    Слой (блок, див, контейнер) — базовый элемент верстки вебсайтов, к которому применяются стили CSS.

    Кстати, в HTML5 для блочной верстки дивами добавили строгие типовые блоки страниц:

    • <header> — для шапки
    • <footer> — для подвала
    • <nav> — для навигации
    • <aside> — для боковой панели

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

    Верстаем дивами на практике — создаем макет сайта

    Давайте постепенно переходить к практике создания макетов сайтов. Для начала нам хватит двух файлов: index.html и файла стилей style.css. В первом мы сверстаем блоками макет сайта, во втором — применим к дивам стили, сделаем стильное оформление макета нашего сайта (как оформить сайт правильно?).

    Более того, для всех этих манипуляций вам даже не нужен свой сервер и хостинг — все можно сделать на домашнем ПК, понадобится только текстовый редактор и браузер. Я пользуюсь редакторами Notepad++, Brackets и Sublime — по настроению и в зависимости от задач.

    Для начала создайте пустую папку и положите в нее два пустых файла, как я уже говорил это index.html и style.css. Нам нужно написать обязательные для любого HTML документа элементы, подключить файл стилей и сделать блочную верстку. Я подготовил код для вашего index.html файла, не стал прописывать теги <description> и <title>, а лишь ограничился базовым необходимым кодом, вот он:

    Результат:

    блочная верстка дивами — скелет

    Для того чтобы увидеть такой же пример, откройте в браузере файл index или перетащите его на панель с другими вкладками (не закладками). Возвращаясь к коду — как видим, блоки идут по порядку друг за другом и у них нет оформления потому что мы не заполнили файл style.css. Пример кода:

    Результат:

    блочная верстка дивами при помощи html и css

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

    При этом, файлы в папке выглядят так:

    пример расположения файлов index и style

    Итак, у нас получился самый простой макет сайта. Он сверстан на дивах (имеет блочную верстку) и состоит из двух колонок и следующих блоков (контейнеров): шапка, навигация, меню, контент и футер. Каждому блоку присвоен соответствующий id: header, navigation, menu, content, footer — именно к этим уникальным id «цепляются» (прописываются) стили и свойства в файле style.css.

    Надеюсь мой пример получился хорошим наглядным пособием того, как на практике осуществляется блочная верстка. Кстати, я подготовил для вас архив с файлами index и style, которые содержат вышеобозначенный код. Скачать здесь:

    blogwork-blochnaya-verstka-html-div.zip

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

    Надеюсь, статья была полезна, готов ответить на ваши вопросы в комментариях.

    blogwork.ru

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

    От автора: приветствую вас на страницах блога webformyself. Блочная верстка – самый популярный сегодня способ создать шаблон сайта. И таковым он будет оставаться видимо еще долгое время. В связи с этим давайте разбираться, как осуществляется блочная верстка css-свойствами.

    Где создаются блоки

    Для начала нужно понять, что css не создает блоки – он оформляет их. Сами по себе они формируются в HTML – языке разметки гипертекста. По умолчанию блок по высоте будет занимать место, равное высоте его содержимого. По ширине же он займет все доступное пространство, которое есть в родителе.

    Для примера: если ширина родительского контейнера составляет 300 пикселей и в нем создан блок, то он тоже будет занимать такую ширину (только если у родителя не заданы отступы). Все остальные элементы, которые будут создаваться в контейнере, не могут стоять на одной линии с первым блоком и будут перенесены дальше.

    Обычный пустой блочный элемент записывается с помощью парного тега — div. Сам по себе он ничего не делает. Например, давайте вспомним, что многие теги имеют определенный смысл: абзац является частью какого-то текста, подзаголовки нужны для улучшения навигации и восприятия и т.д. А вот тег div выступает просто контейнером.

    Привычная блочная модель

    В своем обычном поведении несколько созданных блоков будут идти сверху вниз друг за другом. Здесь сразу же наблюдается серьезная проблема, не так ли? А как же сделать боковую колонку, как, в конце концов, делают сайты, на которых в одной строке идет 3-5 анонсов новостей, да еще и с картинками? Вот тут нам и приходит на помощь css, с помощью которого расставить элементы на странице можно абсолютно любым образом.

    Блочная верстка сайта с помощью css: основные свойства

    Как мы убедились выше, по умолчанию блоки очень упрямые. Не подпускают к себе других, да еще и занимают всю ширину. Конечно же, это нужно иногда исправлять, потому что структура многих сайтов требует этого.

    Давайте сначала разберемся с размерами. В css размеры элементам можно записывать с помощью свойств width и height. Зачастую значения задают в пикселях, хотя иногда в процентах или других относительных единицах.

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

    То абсолютно все блоки получат такую ширину, что нам явно не нужно. Значит, нужно добавить к блоку стилевой класс или идентификатор. Они добавляются с помощью атрибутов class и id, а значением выступает произвольное имя, но начинаться оно должно с английской буквы. Разрешается использовать также цифры, дефис и знак нижнего подчеркивания. Обычно самые важные элементы на странице получают идентификатор (шапка, контент, подвал), а менее важные (пункты меню, заголовки и т.д.) стилевые классы.

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

    Самое главное, это запомнить – идентификатор задается одному элементу, один раз и больше не может записываться ни для какого другого элемента. Это уникальная метка. Стилевой класс можно записывать хоть сотне элементов, а одному блоку можно через пробел задать сколько угодно классов. Вот так:

    И как вы думаете, что теперь с ним произойдет, когда мы запишем такие свойства?

    К блоку применятся все эти правила и теперь какому бы элементу вы не задали, например, класс border, он получит толстую зеленую рамку в 10 пикселей.

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

    Несколько блоков на одной линии

    Далее я коротко расскажу о двух важных свойствах, которые позволят блокам располагаться в одну линию. Сразу пример: есть контейнер шириной 1000 пикселей. Ваша задача – впихнуть в него 3 блока шириной по 300 пикселей, чтобы они располагались на одной горизонтальной линии. Как это сделать? Есть два способа.

    Во-первых, каждому блоку нужно задать класс. Вообще некоторые разработчики добавляют блочным элементам общие классы:

    Таким образом, каждый элемент может быть оформлен по-своему, но все они могут получить одинаковые указания, потому что все содержат класс inline. А в нем мы можем записать так:

    Либо так:

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

    Первое свойство преобразовывает элементы в строчно-блочные. Они не теряют своих свойств, но могут располагаться в линию, если им хватает ширины в родителе.

    Второе свойство прижимает каждый элемент к левому краю родительского контейнера. Но поскольку второй и третий элементы не могут прижаться к самому краю, они встанут за первым и тоже образуют линию.

    Относительные размеры

    Как делается в css блочная верстка резинового сайта? Такой шаблон имеет большое преимущество перед фиксированным, потому что может меняться в зависимости от ширины окна. Делается он в основном по такому принципу: общий элемент контейнер получает фиксированную ширину, а уже в нем помещаются структурные части, которым размер пишется в процентах.

    Вот так вот это все примерно реализовывается. Оставшиеся 8% ширины оставим на отступы, допустим. Наш шаблон уже получит определенную адаптивность – он будет сжиматься при уменьшении ширины окна в браузере.

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

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

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

    webformyself.com

    Отличия блочной вёрстки от табличной

    Если табличная вёрстка подразумевает, что содержимое страницы находятся внутри тега <table>, то концепция блочной вёрстки основана на активном использовании универсальных тегов <div>, внутрь которых помещается содержимое, включая другие теги.

    Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

    Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

    Суть блочной вёрстки

    В графическом редакторе создаётся макет сайта: размечается, где какая область страницы (шапка, низ, боковая панель, основной контент) будет находиться и сколько места занимать, готовятся картинки, фоны.

    Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

    Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

    Принципы блочной вёрстки

    Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.

    Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

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

    Пример блочной вёрстки

    Но, сколько не теоретизируй, а понимать всё проще на примере.

    Итак, у нас есть макет (рисунок ниже). Условный, конечно — просто разметка, ведь цель примера — как можно наглядней объяснить принцип создания блочной вёрстки. Зная базу, навести красоту и усложнить макет вы сможете и сами, а я лучше не буду перегружать пример.

    Согласно макету, страница сайта будет содержать пять блоков: «шапку», навигационное меню, боковую панель, основной блок с контентом и «ноги».

    Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

    Разберём некоторые моменты.

    <div id=»container»> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div id=»clear»>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.

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

    Теперь добавим файл CSS, код которого приведён ниже.

    С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.

    #clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

    CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

    Вот и весь смысл блочной структуры. Дальше можно только наполнять сайт содержимым и усложнять оформление, но делаться это будет всё равно по изложенному выше принципу. Также посмотрите статью про вёрстку сайта из PSD макета, там эти принципы показаны более наглядно.

    www.seostop.ru

    Как создать свой сайт? Уроки HTML и CSS

    Наиболее популярной является блочная верстка сайта или div верстка. Наш урок блочной верстки сайта поможет начинающим освоить основные приемы div верстки.

    1. Основные понятия

    Многие web-дизайнеры отдают предпочтение блочной верстке сайта, которая осуществляется с помощью тега <div>. Страницы, сверстанные с помощью блочной верстки, значительно меньше весят по сравнению с табличной версткой.

    Блок – это обычная прямоугольная область, обладающая рядом свойств, таких как: рамка, поля и отступы (рис. 1). Содержимым блока может быть что угодно – текст, картинки, списки, формы для заполнения, меню навигации и т.п.

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

    Рис. 1 

    Рамка (border) – это контур, для которого можно задать такие характеристики как толщина, цвет и тип (пунктирная, сплошная, точечная).

    Поля (padding) – отделяют содержимое блока от его рамки, чтобы текст, например, не был «впритык» к стенкам блока.

    Отступы (margin) – это пустое пространство между различными блоками, позволяющее на заданном расстоянии расположить два блока относительно друг друга.

    Блочная верстка сайта включает в себя блоки. Блоки, как и таблицы – это элементы, всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Если нам нужно расположить несколько блоков горизонтально, то в их свойствах задается такой параметр как «обтекание» (float). Но об этом чуть позже.

    В данной работе мы создадим web-страничку из блоков. Сначала создадим контейнер, в который, как в коробку сложим наши блоки. Для наглядности каждый блок будет иметь свой цвет. Конечный результат должен быть таким как на рис. 2.

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

    Рис. 2

    Контейнер будет содержать в себе пять блоков:

    TOP – шапка сайта, обычно содержит логотип компании, название, заголовки и слоганы, поиск, навигацию;

    LEFT и RIGHT – левая и правая колонки, обычно содержат рекламу, навигацию, рассылку, новости и т. д.:

    CENTER – содержит основной текст страницы;

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

    Для теста нашего сайта нам понадобятся как минимум три самых популярных браузера – Opera, Fire Fox, Internet Explorer.

    Описание web-страницы в основном делается в CSS документе.

    2. «Фиксированный» дизайн методом блочной верстки

    Задание 1

    1. Создайте в блокноте новый документ с расширением css и сохраните его под именем mystyle.css.

    2. Создайте HTML-документ и сохраните его в той же папке.

    3. В самом начале HTML-документа впишите следующую строку: <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

    DOCTYPE

    Определяет тип нашего документа. Любая грамотно сверстанная страница должна в самом начале содержать так называемый DOCTYPE. Нужен он для всевозможных устройств вывода информации и браузеров в том числе. Пока что все ныне существующие браузеры прекрасно обходятся и без указания DOCTYPE. Но уже грядут те времена, когда страница сайта, сразу начинающаяся с тэга <html>, просто не будет прочитана, потому как стандарты становятся жестче.

    Мы определили нашу страничку в соответствии с DOCTYPE под названием Strict 1.0.

    Требования здесь весьма строгие – все тэги, не имеющие закрывающей пары, должны заканчиваться пробелом со слэшем / перед закрывающей угловой скобкой. Но вот ведь сам DOCTYPE тоже выглядит как тэг! Почему же у него нет этого пробела со слэшем? А просто! Захотелось так разработчикам этих строгих правил. Но это единственный случай, где правило не работает. 

    4. Одной строкой между тегами <head> и </ head > присоедините документ mystyle.css к документу HTML (рисунок 3).

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

    Рисунок 3

    5. В таблице стилей наберите код как на рисунке 4.

    Код для блочной верстки сайта

    Рисунок 4

    # этот знак говорит, что элемент является уникальным атрибутом и используется в HTML документе в теге div один раз. 

    6. Добавьте в mystyle.css шапку сайта (рисунок 5).

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

    Рисунок 5

    7. Добавим HTML документ следующий код между тегами body (рисунок 6). 

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

    Рисунок 6

    И у Вас должно получиться следующее (рис. 7).

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

    Рисунок 7 

    Следующим этапом блочной верстки сайта является расположение трех блоков последовательно по горизонтали, для этого в блочной верстке, как правило, используется элемент float. Он позволит обтекать другим элементам наш блок справа или слева.

    8. Откройте css-документ и добавьте следующий код (рисунок 8). 

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

    Рисунок 8 

    Каждая строка кода имеет комментарий, заключенный в скобки /* комментарий */, который не отображается в браузере. Напомню, элементы со знаком # используются в теге div id=”main” HTML-документа один только раз! Элемент clear содержит точку, которая идентифицирует его как class, может использоваться многократно, что и является различием между этими элементами. Теперь отразим все это в нашем HTML-документе.

    9. Сразу после закрывающегося тега <div id=»TOP«></div> вставим следующий код (рисунок 9). 

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

    Рисунок 9 

    10. Откройте HTML-документ в браузере. Должно получиться такая div верстка (рисунок 10).

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

    Рисунок 10

    11. Теперь добавьте блок footer самостоятельно. Браузер должен показать такую блочную верстку сайта (рисунок 11).

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

    Рисунок 11

    Задание 2

    Рассмотрим атрибуты relative и absolute.

    Иногда бывает необходимо разместить какой-то блок в строго заданном положении относительно родительского.

    Рассмотрим простейший код.

    1. Создайте html-документ, в теле которого разместите код, как на рисунке 12.

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

    Рисунок 12

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

    Попробуем сделать так (т.е. абсолютно позиционируем дочерний блок относительно родительского).

    2. Создайте таблицу стилей, в которой наберите код из листинга на рисунке 13. 

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

    Рисунок 13

    3. Проверьте web-страничку в браузере. Вот что получилось (рисунок 14).  Это не то, что мы хотим, не так ли? Наш дочерний элемент ушел не к маме, а к дедушке (т.е. BODY)!

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

    Рисунок 14

     

    Проблема решается довольно просто: родителю дополнительно задаётся position: relative;

    4. Измените код своей таблицы стилей в соответствии с рисунком 15.

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

    Рисунок 15

    5. Проверьте web-страничку в браузере. Результат на рисунке 16. Оцените разницу.

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

    Рисунок 16

    Контрольное задание

    Создать web-страницу, внешний вид которой изображен ниже на рисунке 17

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

    Рисунок 17 

    3. «Резиновый» сайт методом блочной верстки

    В заданиях 1 и 2 мы рассмотрели «фиксированный» дизайн методом блочной верстки, т.к. все блоки имели точное значение по ширине и высоте в пикселах.

    В случае «резинового» дизайна размеры блоков задаются в процентах от ширины экрана. По высоте размер блока может определяться содержимым блока.

    Задание 3. Создадим «резиновый» блочный макет как на рисунке 18.

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

    Рисунок 18 

    1. Создайте HTML-документ с кодом, как на рисунке 19. Сохраните документ.

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

    Рисунок 19 

    2. Создайте таблицу стилей как на рисунке 20. Сохраните документ. Вы должны получить результат ка на рисунке 18.

    3. Изменяя размеры браузера, проанализируйте поведение макета.

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

    Рисунок 20 

    4. Комбинированная блочная верстка

    Комбинированная блочная верстка (div верстка) включает как блоки фиксированной ширины, так и блоки в процентном отношении к ширине экрана.

    Задание 4. Создадим комбинированный блочный макет как на рисунке 21.

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

    Рисунок 21

    1. Создайте HTML-документ с кодом, как на рисунке 22.

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

    Рисунок 22

    2. Создайте таблицу стилей как на рисунке 23. Сохраните документ.  Вы должны получить результат ка на рисунке 21.

    3. Изменяя размеры браузера, проанализируйте поведение макета.

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

    Рисунок 23 

    Контрольное задание

    Методом блочной верстки создайте web-страницу для сайта архитектурных проектов коттеджей так, как изображено на рис. 24.  Изображение для шапки сайта (shapka_div.jpg).

    Требования к макету:

    • В HTML-коде не должно быть локального форматирования элементов, все оформление должно быть сделано через внешнюю таблицу стилей;
    • При наведении на ссылку «Проекты таунхаусов и блокированных домов» гиперссылка должна менять цвет (рис. 24);
    • При нажатии на гиперссылку «Проекты таунхаусов и блокированных домов» должна загружаться страница о проектах, внешний вид которой изображен на рис. 25.
    • При нажатии на логотип должна загружаться главная страница сайта (рис. 24).

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

    Рис. 24

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

    Рис. 25

     

     

    web-grafika.pro


    You May Also Like

    About the Author: admind

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

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

    Adblock
    detector