Создание дизайна сайта с нуля. Урок 2

Создание дизайна сайта с нуля. Урок 1

Доброго времени суток, дорогие читатели. Сегодня мы сделаем первые шаги в создании дизайна с нуля. А именно — создадим каркас нашего будущего сайта.Напомню, что на первом уроке мы выбрали в качестве образца страничку из журнала. Первое, что с ней надо сделать, это разделить ее на блоки вывода информации. Вот, что получилось у меня:Создание дизайна сайта с нуля. Урок 2
Итак, мы получили 5 блоков. Давайте сделаем каркас. Если Вы используете Ucoz, то зайдите в Управление дизайном (шаблоны) — Страницы сайта , все там удалите и вставьте ниже приведенный код. Если Вы хотите просто создать страничку у себя на домашнем компьютере, то создайте папку для нашего сайта и в ней, используя обычный блокнот сохраните 2 файла:my_page.html и my.css
Начинаем с кода HTML:
Код
<!DOCTYPE html>
<html>
<head>
<title>Создаем дизайн страницы</title>
<meta http-equiv=»Content-Language» content=»ru» />
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ />
<link rel=»stylesheet» type=»text/css» href=»./my.css» />
</head>
<body>
<div class=»container»>
<div class=»header»>Блок шириной 100%</div>
<div class=»left_block»>Левый блок</div>
<div class=»middle_block»>Средний блок блок</div>
<div class=»right_block»>Правый блок</div>
<div class=»footer»>Подвал</div>
</div>
</body>
</html>
Давайте разберем наш код по порядку.Любой каркас сайта ВСЕГДА!!!! будет содержать следующие элементы:<!DOCTYPE html> <html><head></head><body></body></html>Это нужно запомнить раз и навсегда. И создание любой странички начинать именно с написания этого кода. А потом уже заполнять его необходимым Вам содержимым.Идем дальше.В теге <head> мы прописали:<title>Создаем дизайн страницы</title> — название странички
<meta http-equiv=»Content-Language» content=»ru» /> — наша страничка на русском языке
<meta http-equiv=»Content-Type» content=»text/html; charset=UTF-8″ /> — кодировка страницы
<link rel=»stylesheet» type=»text/css» href=»/my.css» /> — ссылка на наш файл CSS, где будут храниться все настройки стилей. Если Вы создали учебный сайт на Ucoz, то ссылка на Ваш файл CSS будет иметь вид  <link type=»text/css» rel=»StyleSheet» href=»/_st/my.css»>В общем случае файл css может находиться где угодно.Если в этом месте, Вам не понятно про файл CSS, возвращаемся к первому уроку и читаем, предложенный там материал и только после этого задаем оставшиеся вопросы.Теперь о содержимом тега <body>Все содержимое мы поместили в блок container и каждому блоку задали определенный класс, дабы обеспечить возможность задания стилей в нашем CSS.Все, с html страничкой мы разобрались. Можете сохранить ее. Теперь давайте настроем ее стили.Если Вы создали свой сайт на Ucoz, то зайдите в Управление дизайном (шаблоны) — Таблица стилей и все, что там есть удалите. Мы же с Вами с нуля делаем дизайн. Если Вы создаете сайт на домашнем компьютере, то зайдите в файл my.cssКод CSS:
Код
body {
margin: 0px;
padding: 0px;
}
.container {
width:1000px;
margin:0 auto;
}
.left_block,.middle_block,.right_block,.footer {float:left;}
.header {
width:1000px;
height:200px; //высоту добавляем для наглядности, потом она будет выставляться автоматически
}
.left_block {width:260px; height:300px; margin: 0px 20px; }
.middle_block {width:360px; margin: 0px 20px; height:300px;}
.right_block {width:260px; height:300px;margin: 0px 20px;}
.footer {width:800px; height:300px;}

Давайте разберем этот код.

body {
margin: 0px;
padding: 0px;
}

Задаем для всей странички нулевые отступы в качестве первоначальных настроек. В дальнейшем для каждого элемента мы их уточним. Подробнее об этом можно прочитать в моей статье CSS советы (пункт 2).

.container { 
width:1000px; 
margin:0 auto; 

Задаем ширину нашей странички. margin:0 auto;  — позволяет вывести блок container посередине.

.left_block,.middle_block,.right_block,.footer {float:left;} 

Все блоки кроме верхнего располагаем слева направо друг за другом.

.header { 
width:1000px; 
height:200px; //высоту добавляем для наглядности, потом она будет выставляться автоматически 

Верхний блок делаем по ширине контейнера.

.left_block {width:260px; height:300px; margin: 0px 20px; } 
.middle_block {width:360px; margin: 0px 20px; height:300px;} 
.right_block {width:260px; height:300px;margin: 0px 20px;} 
.footer {width:800px; height:300px;} 

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

И сохраняем все это!!!

Вот какой результат Вы должны получить в итоге:

Результат урока 2.

Попробуйте все это повторить. И выложите в комментариях ссылки на Ваши работы. И не забывайте задавать вопросы. А завтра мы продолжим наши уроки.

Успехов Вам в Ваших начинаниях!!! 

Создание дизайна сайта с нуля. Урок 3