Продолжаем публикацию курса "5 шагов к своему сайту". Шаг первый вы наверное уже освоили, переходим ко второму.Сразу хочу принести извинения за задержку публикации - впервые за несколько лет заболел, но заболел капитально. 10 дней не вставал с кровати, но сейчас оправился и продолжаю делиться своими публикациями о том, как сделать свой сайт. Структура курса претерпела некоторые изменения и немного будет отличаться от анонсированной.Основы блочной верстки.Блок —прямоугольная область, имеющая рамку и отступы. Содержимым блока может быть любая информация — текст, рисунок, список, форма для заполнения, меню навигации и т.п., т.е. то, что мы называем контентом.Блоки, как и таблицы — это элементы всегда располагающиеся на странице вертикально. То есть, если в коде страницы записаны подряд два блока, то отобразятся они в браузере один под другим. Для того чтобы расположить блоки горизонтально, задаётся параметр “обтекание” (float), который мы рассмотрим далее. Блоки могут не только следовать один за другим, но и вкладываться друг в друга.Тег DIV.Тег DIV, по своей сути, задает блок. (Еще раз оговорюсь, что здесь я упрощенно излагаю суть верстки, поэтому не даю точных определений некоторых понятий).id — атрибут, позволяющий придать тегу уникальное значение, то есть такое, которое на странице используется только один раз. Например “header” (про кавычки не забываем), или “footer“. Таким образом мы сможем задать затем в листе стилей для тэга div с атрибутом id и значением “header” (шапка) одни настройки, а для подвала “footer” совсем другие.class — атрибут, позволяющий одно и то же значение придать нескольким элементам. Например, всем изображениям на странице добавить рамку одинаковой толщины и цвета.Макет сайта
Переходим непосредственно к верстке шаблона. Обычно, я для себя делаю рисунок - эскиз сайта.
Как видно из рисунка, мы сверстаем простой сайт-визитку (или не визитку) с шапкой, подвалом и правым сайтбаром (я обратил внимание, что в последнее время очень популярен именно правый сайтбар).
В шапке сайта расположим логотип, название сайта и рекламный банер (для примера).
В сайтбаре будет находиться меню сайта, контактная информация.
В разделе контент - основное содержание. Это может быть текст, таблицы, рисунки или иллюстрации и т.д.
В подвале расположим горизонтальное меню, знаки авторских прав. Здесь же можно установить счетчики статистики. Однако, не следует увлекаться ими и делать из сайта новогоднюю ёлку.
Таблицу стилей размещаем в папке CSS, а рисунки - в IMAGES.
Файл НТМL
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
/*Указывается DOCTYPE документа и путь к файлу с DТD- определением версии НТМL*/
<html xmlns="http://www.w3.org/1999/xhtml">/*Начало НТМL-документа*/
<head> /*"Шапка" - открывающий тег*/
<title>Первый сайт-визитка</title>/*Название НТМL-документа*/
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> /*мета-тег, указывает тип документа и используемую кодировку - charset=utf-8*/
<meta name="description" content="Краткая аннотация содержимого НТМL-документа" /> /*мета-тег, задает переменную description и её значение*/
<meta name="keywords" content="Список ключевых слов, используется поисковыми машинами" /> /*мета-тег, задает переменную keywords и её значение*/
<link href="css/style.css" rel="stylesheet" type="text/css" />
/*Указывается путь к таблице стилей CSS*/
</head> /*Закрывающий тег - конец "шапки" документа*/
<body> /*Открывающий тег - тело документа - то, что мы увидим в браузере*/
ЗДЕСЬ БУДУТ РАСПОЛАГАТЬСЯ НАШИ БЛОКИ
</body> /*Закрывающий тег - конец тела документа*/
</html> /*Закрывающий тег - конец HTML- документа*/
Файл style.css
@charset "utf-8" (справочно указываем кодировку, но можно и не указывать)
* {margin: 0; padding: 0; border: 0; } /* Задаём общие правила для страниц, отменяющие все установленные по умолчанию отступы*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}/*Сбрасываем все настройки по умолчанию в браузерах*/
Советую в обязательном порядке проделывать такую вещь, а при верстке прописывать все необходимые параметры заново.
На этом заканчиваю, все теоретически-практические вступления окончены. В следующей публикации начнем верстку.
