Решил начать цикл постов о верстке. Для тех, кто этим занимается в достаточной степени — тому это совершенно не пригодится. Так же я не советую читать это тем, кто абсолютно не знает такие вещи, как 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
Показать выделенный код в новом окне
