Учимся верстать макет

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

rudenko0

Дата: Вторник, 31.05.2011, 18:13 | Сообщение # 1

Логин: rudenko0
Имя: vlad
Сообщений: 61
Награды: 0
Репутация: 83
Замечания:
ID вашей групы: 4

Offline

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

Учимся верстать макет

Страница 1 из 1
1