- Учимся верстать — Часть 1: Каркас
- Учимся верстать — Часть 2: Верх
- Учимся верстать — Часть 3: Горизонтальное меню и шапка
- Учимся верстать — Часть 4: Левый блок
- Учимся верстать — Часть 5: Контент
Решил я начать цикл постов о верстке. Для тех, кто этим занимается в достаточной степени — тому это совершенно не пригодится. Так же я не советую читать это тем, кто абсолютно не знает такие вещи, как HTML и CSS. Банальнейшие вещи я тут описывать не хочу и не буду. Лень, так сказать, да и в интернете это все можно найти. Чему можно будет научиться? Блочной кроссбраузерной верстке и написанию валидного кода. Но, опять же, какие-то сложные задачи я рассматривать не буду, ибо нет толку. К каждой задаче свой индивидуальный подход и всего не разобрать. Кроме того я ни слова не скажу о том, как нужно нарезать макет. Базовыми знаниями фотошопа, думаю, овладеете вы сами. Ну да ладно.
Теперь качаем макет (я нашел на одном из сайтов с бесплатными макетами) и приступаем.
Перед началом верстки нужно визуально разбить весь дизайн на блоки, дабы иметь представление, как все это верстать. Выразить мыслями это сложно, поэтому вот вам картинка:
Будет что-то примерно вроде этого. Ну, т.к. мы знаем что будет и где, то можем подготовить место под содержимое, т.е. сначала сверстаем каркас всего этого. Значит создаем папочку «City Portal», в ней создаем папку «img», файл «index.html» и «style.css». И начинаем заполнять файл «index.html»
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>City Portal</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="StyleSheet" type="text/css" href="./style.css" />
</head>
<body>
<div id="all">
<div id="top">
<div id="watch">Время</div>
<div id="top_menu">Верхнее меню</div>
</div>
<div id="h_menu">Горизонтальное меню</div>
<div id="header">Шапка</div>
<div id="container">
<div id="sidebar">Левый блок</div>
<div id="content">Контент</div>
</div>
<div id="b_menu">Нижнее меню</div>
<div id="footer">Подвал</div>
</div>
</body>
</html>
Сделали мы вот такую разметку и получилась у нас следующая вещь. Не густо, верно, просто набор надписей в столбик. Теперь мы будем задавать всему этому делу стили, дабы все располагалось так, как мы хотим. Кстати, хочу заметить, что шабон у нас фиксированный с шириной 780 пикселей. Поэтому я засунул код в див (с id="all"), дабы все выровнять по центру и задать ширину. Для наглядности я задам цвет фона серым, а блока с дизайном белым.
* {margin: 0px; padding: 0px;} /* Убираем абсолютно все отступы. */
img {border: 0px} /* Теперь у картинки по умолчанию нет рамки. */
/* Основые стили */
html, body {background: #ccc;}
#all {width: 780px; margin: 0px auto; background: #fff;}
Теперь обработаем верх. Зададим пока что высоту в 50 пикселей, расположим часы по левому краю, а меню справа при помощи float. А так же зададим отступы от краев.
#top {height: 50px;}
#watch {float: left; padding: 10px 0px 0px 10px;}
#top_menu {float: right; padding: 10px 10px 0px 0px;}
Теперь горизонтальное меню. Там зададим высоту и отступы.
#h_menu {height: 30px; padding: 5px 0px 0px 5px;}
Далее шака. Ее, я думаю, мы вырежем сразу и поставим на место. Шапку обзываем «header.png».
#header {width: 780px; height: 117px; background: url('./img/header.png') no-repeat;}
Левый блок и контентую часть мы раскидаем направо и налево не так как верхнее меню. Делаю я это сейчас резиново. Никак не агрументирую это. Просто привычка. Можно делать точно так же, как и верхнее меню, но нужно не забывать тогда задавать ширину левого блока и контента.
#container {overflow: hidden;} /* Это нужно для того, чтобы контейнер не схлопывался. */
/* Левый блок */
#sidebar {float: left; width: 233px;}
/* Контент */
#content {margin-left: 233px;}
Нижнему меню и подвалу зададим ширину и выроняем по центру.
#b_menu {height: 20px; text-align: center;}
/* Подвал */
#footer {height: 25px; text-align: center;}
Ну вот и все. Теперь у нас есть основная структура. Сейчас нужно будет нужно резать, подгонять по размеру и так далее и тому подобное. Но это будет в следующей части.
Теперь будет некое добавление. Во-первых, прошу оценить полезность этого цикла ответив на банальный вопрос Нужно ли это вам?. Во-вторых, задаем вопросы-получаем ответы. В-третьих, объявляю конкурс на создание дизайна. Тот дизайн, который к концу описания верстки этого макет, будет содержать максимум трудностей для верстальщика будет сверстан мной бесплатно (а так же еще один любой дизайн), но все тут тоже не просто так. Описание верстки будет выложено у меня в блоге, как урок для других.
Ну вот и все, спасибо за внимание. С вами был DJ Псих на радио Шугич ФМ.