Блочная вёрстка сайта или табличная? что лучше?

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

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

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

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

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

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

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

Создадим простую страницу с блочным элементом:

Это просто HTML-документ с текстом внутри контейнера . В браузере он выглядит так:

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

Давайте внесём несколько изменений.

Изменяем ширину

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

Для него можно установить разные значения. Мы можем использовать фиксированную ширину вроде пикселей или пропорциональное значение вроде процентов. Последний вариант особенно важен для штук вроде адаптивного дизайна. Однако для простоты обойдёмся пикселями.

Добавляем новое свойство в стили:

После перезагрузки страницы вы должны увидеть следующее:

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

Увеличиваем высоту элемента через CSS

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

С высотой мы можем делать всё то же самое, что и с шириной: устанавливать фиксированное или пропорциональное значение. Добавляем в стили:

В итоге страница выглядит так:

Как видите, элемент принял нужную нам форму, так как мы установили одинаковые значения для высоты и ширины.

Знакомимся с границами

Теперь изменим границы. Как упоминалось, границы уже есть, просто мы их не видим. Изменим это с помощью свойства .

Важно знать, что это свойство принимает три значения: , и. отвечает за толщину границы (обычно в пикселях), может принимать значения , , и т.д., а в можно прописать цвет как словом вроде «red», так и hex-значением цвета

В принципе, достаточно просто определить толщину границ. Тем не менее, в большинстве случаев результат будет лучше при определении всех трёх значений. Меняем CSS:

И получаем результат:

Выглядит здорово, не так ли

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

Добавляем отступы

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

Вот как это отразится на результате:

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

Можно не прописывать отдельно все эти свойства, а описать все отступы одной строкой вроде . Здесь значения соответствуют отступам сверху, справа, снизу и слева соответственно.

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

Добавляем поля

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

Добавим в стили:

Выглядит это так:

Как видите, в результате элементы отодвинулись от краёв страницы. Однако поля для элемента определены со всех сторон, а не только сбоку и сверху. Скопируем , чтобы это можно было увидеть:

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

Поля частично применимы к строчным элементам, но только к боковым сторонам.

Немного о размерах элементов

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

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

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

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

3 правила адаптивной верстки

1. Задавайте метатег viewport
   Вёрстка простого макета

   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

   , таблица возможных параметры мета-тега viewport:

2. CSS Media Queries: стили для мобильного устройства с разрешением указанным в свойствах @media

   @media only screen
   and (min-device-width 320px)
   and (max-device-width 568px) {
       .header {
           background-color #257965;
       }
   }

3. Задавайте свойства CSS в процентах, например:

   .reviews {
       width 22%;
       font-size 140%;
       padding-top 2%;
       margin-top 2%;
       margin-bottom 4%;
   }

Табличная верстка

Метод табличной верстки устарел. Основными причинами отхода от такого способа считается огромное количества кода, которое возникает вследствие описания каждой ячейки отдельными тегами. Также стоить заметить, что каждая ячейка обладает стенками, которые необходимо также описать. Код обычной веб-страницы, которая верставется табличным способом, больше в 4-5 раз кода страницы, которая создается блочным методом.

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

Блочная верстка или верстка с помощью слоев.

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

Характерным для блочной верстки является то, что блоки, как правило, должны располагаться по очереди — один за другим и четко разделяться между собой. Расположение в одной строке возможно, но оно используется только в некоторых случаях, когда возникает потребность добиться особого эффекта.

Под понятием блок(слой) в общем случае имеют в виду элементарную прямоугольную область(тег div), к которому применяется стилевое оформление. Для указания атрибутов этой области существует ряд качеств, среди которых выделяют рамку (border), поля (контуры) (margin) и отступы (padding). Наполнением блока может служить любая информация – изображение, текстовый фрагмент или что-либо другое.

DIV верстка сайта

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

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

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

Как вы видите на картинке, для верстки макета у нас используются следующие основные блоки:

• MAIN
• header
• nav
• content
• footer

Блок Main используется как контейнер для всего содержимого. Header — шапка сайта. Nav — блок навигации. Content — основная информация и контент. Footer — подвал сайта.

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

• MAIN
  • header
  • nav
  • content
  • footer

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

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

Советы, как не попасться на обман брачного афериста

1. Пользоваться услугами надежных сайтов знакомств, где все проходят серьезную проверку. В статье «Самые популярные сайты знакомств с иностранцами — ТОП-10 рейтинга лучших международных ресурсов» вы найдете актуальный список сайтов. В нем на первом месте находится приложение LOFT. Это надежный ресурс для знакомства с американскими и европейскими женихами. Здесь только серьезные мужчины и красивые девушки, и каждый сразу открыто говорит о целях и ожиданиях. Скачайте приложение для iOS или Android и познакомьтесь с иностранцем для брака! 

2. Не переводить жениху деньги, даже если повод достойный, а сам избранник кажется надежным. Жители Америки и Европы никогда не будут просить в долг у своей новой подруги. 
3. Не давать реквизиты своих карт и не принимать финансовые подарки от жениха. Даже если молодого человека пока нет в черном списке мошенников, это не показатель — нормальный мужчина вряд ли будет просто так отправлять деньги незнакомке.
4. Не стоит оплачивать с телефона какие-либо платные сервисы, например, индивидуальный гороскоп совместимости или контактные данные избранника, так как это может оказаться обманом, и мошенник просто опустошит телефонный счет и даже привязанные к нему карты.
5. Лучше не называть свои личные данные — адрес, место работы и прочее, пока не будет полной уверенности в том, что американский жених по ту сторону экрана — не брачный аферист.

И главное, что стоит помнить, отправляясь за иностранным счастьем в интернет, помимо проверки жениха в черном списке, — на сайте знакомств могут быть действительно стоящие мужчины из США и Европы, которые на самом деле ищут свою вторую половинку. И если повезет, то можно выйти замуж за американца или другого иностранца. В статье «Замуж за иностранца: выйти замуж за рубеж и не прогадать» вы найдете рекомендации о том, как создать крепкую интернациональную семью.

Связываем Флажок с ячейкой

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS стили

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

Float

Для начала, давайте познакомимся со свойством, которое позволяет расположить блок DIV справа или слева на странице или относительно родительского контейнера.

Свойство float имеет четыре значения: none, right, left, inherit.

Нас интересует значение «слева» и «справа».

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

В нашем случае, для блока навигации мы должны указать значение left, а для основного контента значение right. Вот как это будет выглядеть в файле стилей:

.nav {
float:left;
}

.content {
float:right;
}

Кстати, можно задать свойство только для блока навигации. Блок с контентом будет автоматически расположен справа от навигации. Это будет достигнуто, благодаря обтеканию, которое получается при задании свойства float.

Отступы в CSS: margin и padding

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

Давайте представим, что нам необходимо сделать таким образом, чтобы наш основной блок MAIN, имел небольшой отступ от шапки сайта. Это можно реализовать, если назначить для блока div с классом main, свойство margin. Оно отвечает за внешние отступы блока.

Свойство margin имеет следующие значения: {1,4} | inherit.

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

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

.main {
margin-top:10px;
}

Теперь наш блок main будет иметь верхний отступ в 10 пикселей.

Теперь давайте оформить блок с навигацией и контентом. Представьте, что у нас уже есть готовый сайт. Все ссылки в навигации вплотную прилегают к левому краю страницы. А текст в блоке контента наоборот, вплотную прилегает к правой стороне. Довольно не приятное оформление. Нам нужно сделать внутренние отступы.

За это отвечает свойство padding, имеющее следующие значения: {1, 4} | inherit

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

Давайте для начала отодвинем ссылки в навигации от левого края на 15 пикселей. Затем текст в блоке контента на 20 пикселей от правой стороны. В итоге наш CSS код немного дополнится:

.nav {
float:left;
padding-left: 15px;
}

.content {
float:right;
padding-right: 20px;
}

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

Видео к статье:

Резюме

Возьмите пирожок и погладьте себя по голове. Я подожду.

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

Вкратце, в этом уроке мы говорили о следующем:

• Как отображаются разные элементы.
• Что такое блочная модель и почему она так важна.
• Как изменить размер элементов с учётом высоты и ширины.
• Как добавить к элементам margin, padding и border.
• Как изменить размер элементов и влияние блочной модели.

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

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

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

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

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

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

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

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

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

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

Резиновая и жесткая блочная верстка с помощью css

<html>

<head>

<title>Пример
блочной
CSS верстки</title>

<style
type=»text/css»>

#block
{width:740px; height:420px; margin:0 auto; margin-bottom:-16px}

div.header
{background-color:#717dc9; min-width:600px; max-width:4000px;
height:100px}

div.left_col
{background-color:#dddddd; border-right:2px dashed #717dc9;
width:198px; height:400px; float:left; padding:10px}

div.right_col
{background-color:#dddddd; width:500px; height:400px; float:left;
padding:10px; }

div.footer
{background-color:#717dc9; min-width:600px; max-width:4000px;
height:60px; clear:left}

</style>

</head>

<body>

<div
class=»header»>

<h1
align=»center»>Верстка
сайта</h1>

</div>

<div
id=»block»>

<div
class=»left_col»>

<p
align=»center»>Меню</p>

</div>

<div
class=»right_col»>

<h2>CSS
верстка сайта</h2>

<h4>Резиновая
верстка блоками</h4>

</div>

</div>

<div
class=»footer»>

<p>
2013
СКФУ</p>

</div>

</body>

</html>

Рисунок
3.6 – Резиновая и жесткая блочная верстка
с помощью CSS

Сверстать
страницы, созданного в лабораторных
работах 1 и 2 сайта согласно вашему
варианту.

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

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

Варианты

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

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

3. Сайт
   должен состоять из трех колонок. Все
   три колонки должны быть резиновыми.
   Первая и третья колонки должны занимать
   по 20% от занимаемого пространства, а
   вторая должна занимать все оставшееся
   пространство. Контент текущей страницы
   должен находиться во второй колонке.
   Заполнение остальных колонок на
   усмотрение студента.

4. Сайт
   должен состоять из двух колонок. Вторая
   колонка должна быть резиновой и должна
   занимать 30% от свободного пространства.
   Первая колонка должна занимать все
   оставшееся пространство. В первой
   колонке должен располагаться контент
   текущей страницы, а во второй колонке
   список комплектующих.

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

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

7. Сайт
   должен содержать три колонки. Все три
   колонки должны быть резиновыми (занимать
   все свободное пространство). Размеры
   этих колонок должны быть следующие:
   20%, 30%, 50%. Наполнение колонок на усмотрение
   студента, в зависимости выбранного
   контента.

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

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

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