Верстка сайта

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

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

Это наиболее простой и зачастую более кроссбраузерный способ верстки. Однако он считается устаревшим и почти не применяется. Суть его в том, что мы не создаем блоки тегами <div>, а вставляем таблицу.
В данном случае в таблице три строки по две колонки. В первой строке 2-е колонки объединены в одну, а вторая и третья строки - две колонки разной ширины (первую я задал шириной в 20%, вторая сама станет=80%).

В виде кода это будет иметь следующий вид.


Открываем в Блокноте нашу html-заготовку (index.htm), удаляем все, что находится между тегами body (это <h1>Заголовок ... Вторая строка <br>) и вставляем туда текст, который выше.
После сохранения и обновления страницы на экране получим:

текст-1
текст-2	текст-3
текст-4	текст-5

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

Теперь наводим красоту

• убираем толщину рамки таблицы: вместо border="1" ставим
  style="border-collapse: collapse"
• вставим картинку с прозрачным фоном в первую ячейку: перед словом текст-1 ставим
  <img src="images/kartinka_0.png" alt="картинка" style="float:left;">
  (можете скопировать мою картинку, клацнув по ней правой кнопкой)
  
• изменяем размер и стиль заголовка: перед словом текст-1 ставим
  <p style="color:#371604; font: 50px 'Tahoma'; margin-left:15%;
  text-shadow: -1px -1px 1px #bbbb99, 1px 1px 1px #bbbb99, 5px 5px 5px #bf4e17;">
  и после слова текст-1 закрываем тег </p>


Здесь новый для вас стиль text-shadow. Именно он делает заголовок таким красивым. Синтаксис такой: указывается смещение по Хpx смещение по Ypx ширина_тени_px и цвет тени. Через запятую можно указать еще несколько теней


• вставляем фото Мистера Бина в последнюю ячейку перед словом текст-5:
  <img src="images/Mr_Bin.jpg" alt="Bin" style="float:right; margin: 5px;">
  
• добавляем длиннй текст: вместо слова текст-5 вставляем большой фрагмент текста
(можно скопировать прямо тут)

• для того, чтобы текст отступил от края своего окна его нужно поместить в тег
  <p style="margin:10px;"> длинный текст </p>

В результате получим

текст-1
текст-2	текст-3
текст-4	Грамотная разработка сайта - это сложный многоэтапный процесс. Верстка сайтов является неотъемлемой частью процесса изготовления сайтов. Что такое верстка сайта - это процесс формирования веб-страницы по готовому макету. Этот процесс заключает в себе создание кода страницы при помощи понятного браузерам языка размётки гипертекста html, и оформление её с помощью каскадных таблиц стилей (CSS). Не нужно самому пытаться сверстать сайт, целесообразнее заказать услуги верстальщика. Ведь профессиональная верстка сайтов должна учитывать многочисленные особенности, как правил верстки, так и параметров отображения документов в различных браузерах.

На созданной Вами странице текст будет иметь черный цвет, т.к. мы не задавали ему стиль. Как это сделать я покажу ниже в блочной верстке.
Для того, чтобы верхняя картинка имела отступ от края нужно в тег img добавить style="margin:10px;".
Для того, чтобы слово текст-4 начиналось от верхнего края нужно в тег, отвечающий за данную строку добавить valign="top". Получится <tr valign="top">.
В таблице я задавал ширину в процентах, а можно задавать и в пикселях (как к самой таблице, так и к отдельным ячейкам).
Внутрь ячеек можно добавлять блоки div, все как обычно.

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

При блочной верстке мы использует блоки div. Нам также нужно описать четыре блока. Первый блок назовем b_1, второй b_2 т.д. Описание блоков (я описываю так, как вы должны вставить в файл стилей): Чтобы в последующем не играться со стилями текста также добавим их в файл стилей (назовем t_1 - стиль заголовка и t_2 - стиль длинного текста): Выделите этот текст и вставьте в файл style.css

Снова открываем в Блокноте нашу html-заготовку (index.htm), удаляем все, что находится между тегами body (здесь мы вставляли таблицу... удалим ее) и вставляем туда следующий текст: Вместо слов "длинный текст" вставьте какой-нибудь длинный текст.

После сохранения и обновления страницы на экране получим (без фиолетовой рамки):
Обратите внимание на описание блока #b_1. Там кроме ширины и цвета фона добавлен стиль overflow: hidden;. Если его убрать, то картинка в верхнем блоке вылезет за его размеры. В табличной верстке этой проблемы нет, т.к. там ячейки сами растягиваются на высоту большего содержимого, в нашем случае - картинки.

Здесь в фиолетовую рамку я выделил два последних блока. У каждого из этих блоков есть очень важное для блочной верстки свойство (стиль) float:left;. Это свойство заставляет блок придвинуться к левому краю окна. Поскольку ширина блока_3 всего 20%, то блок_4, имея это же свойство тоже придвинется влево, но уже к блоку_3.
Как видите блок со словом текст-4 не закрасился до конца (т.е. закрасился только сам текст). Это - та же проблема, что и с картинкой, но вставка стиля overflow: hidden - не решает проблему. Все дело в том, что когда браузер отображал блок b_3 со словом "текст-4" он еще не знал, что в блоке b_4 будет длинный текст или фотография. Как же быть? Придется хитрить.
Вставка дополнительного блока решает еще одну проблему, когда Вам нужно разместить что-то ниже последнего блока.

Что здесь нового

В описании текста #t_2 задан стиль:
font: 14px/22px "Trebuchet MS", Arial, Tahoma; - здесь сразу заложен и размер и гарнитура шрифта. Обратите внимание, что размер задан двумя параметрами через косую черту.
Текст "текст-3" обрамлен новым тегом <span>

Подведем итоги

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


Этот урок закончен, можете переходить в раздел Меню

Мысли вслух

• Программист - это не тот, кто пишет программы, а тот, чьи программы работают
• Для программиста монитор - это реальный рабочий стол, системный блок - журнальный, а клавиатура - обеденный
• Конфеты программиста: 'Мишка на сервере'
• А знаете ли Вы, что в 1 килобайте не 1000 байт, а 1024 (2 в степени 10)