Решил я начать цикл постов о верстке. Для тех, кто этим занимается в достаточной степени — тому это совершенно не пригодится. Так же я не советую читать это тем, кто абсолютно не знает такие вещи, как HTML и CSS. Банальнейшие вещи я тут описывать не хочу и не буду. Лень, так сказать, да и в интернете это все можно найти. Чему можно будет научиться? Блочной кроссбраузерной верстке и написанию валидного кода. Но, опять же, какие-то сложные задачи я рассматривать не буду, ибо нет толку. К каждой задаче свой индивидуальный подход и всего не разобрать. Кроме того я ни слова не скажу о том, как нужно нарезать макет. Базовыми знаниями фотошопа, думаю, овладеете вы сами. Ну да ладно. Теперь качаем макет (я нашел на одном из сайтов с бесплатными макетами) и приступаем !
Перед началом верстки нужно визуально разбить весь дизайн на блоки, дабы иметь представление, как все это верстать. Выразить мыслями это сложно, поэтому вот вам картинка:
Будет что-то примерно вроде этого. Ну, т.к. мы знаем что будет и где, то можем подготовить место под содержимое, т.е. сначала сверстаем каркас всего этого. Значит создаем папочку «City Portal», в ней создаем папку «img», файл «index.html» и «style.css». И начинаем заполнять файл «index.html»
Code
:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>
Подсветка кода от StudioAD - http://studioad.ru/
Показать выделенный код в новом окне
Сделали мы вот такую разметку и получилась у нас следующая вещь - http://shugich.ru/lesson/1/index.html . Не густо, верно, просто набор надписей в столбик. Теперь мы будем задавать всему этому делу стили, дабы все располагалось так, как мы хотим. Кстати, хочу заметить, что шабон у нас фиксированный с шириной 780 пикселей. Поэтому я засунул код в див (с id="all"), дабы все выровнять по центру и задать ширину. Для наглядности я задам цвет фона серым, а блока с дизайном белым.
Code
/* Сброс */
* {margin: 0px; padding: 0px;} /* Убираем абсолютно все отступы. */
img {border: 0px} /* Теперь у картинки по умолчанию нет рамки. */
/* Основые стили */
html, body {background: #ccc;}
#all {width: 780px; margin: 0px auto; background: #fff;}
Подсветка кода от StudioAD
Показать выделенный код в новом окне
Теперь обработаем верх. Зададим пока что высоту в 50 пикселей, расположим часы по левому краю, а меню справа при помощи float. А так же зададим отступы от краев.
Code
/* Верх */
#top {height: 50px;}
#watch {float: left; padding: 10px 0px 0px 10px;}
#top_menu {float: right; padding: 10px 10px 0px 0px;}
Подсветка кода от StudioAD
Показать выделенный код в новом окне
Теперь горизонтальное меню. Там зададим высоту и отступы.
Code
/* Горизонтальное меню */
#h_menu {height: 30px; padding: 5px 0px 0px 5px;}
Подсветка кода от StudioAD
Показать выделенный код в новом окне
Далее шака. Ее, я думаю, мы вырежем сразу и поставим на место. Шапку обзываем «header.png».
Code
/* Шапка */
#header {width: 780px; height: 117px; background: url('./img/header.png') no-repeat;}
Подсветка кода от StudioAD
Показать выделенный код в новом окне
Левый блок и контентую часть мы раскидаем направо и налево не так как верхнее меню. Делаю я это сейчас резиново. Никак не агрументирую это. Просто привычка. Можно делать точно так же, как и верхнее меню, но нужно не забывать тогда задавать ширину левого блока и контента.
Code
/*** Основная часть***/
#container {overflow: hidden;} /* Это нужно для того, чтобы контейнер не схлопывался. */
/* Левый блок */
#sidebar {float: left; width: 233px;}
/* Контент */
#content {margin-left: 233px;}
Подсветка кода от StudioAD
Показать выделенный код в новом окне
Нижнему меню и подвалу зададим ширину и выроняем по центру.
Code
/* Нижее меню */
#b_menu {height: 20px; text-align: center;}
/* Подвал */
#footer {height: 25px; text-align: center;}
Подсветка кода от StudioAD
Показать выделенный код в новом окне
Ну вот и все. Теперь у нас есть основная структура. Сейчас нужно будет нужно резать, подгонять по размеру и так далее и тому подобное. Но это будет в следующей части.
Теперь будет некое добавление. Во-первых, прошу оценить полезность этого цикла ответив на банальный вопрос Нужно ли это вам?. Во-вторых, задаем вопросы-получаем ответы. В-третьих, объявляю конкурс на создание дизайна. Тот дизайн, который к концу описания верстки этого макет, будет содержать максимум трудностей для верстальщика будет сверстан мной бесплатно (а так же еще один любой дизайн), но все тут тоже не просто так. Описание верстки будет выложено у меня в блоге, как урок для других.
