Учимся верстать макет - Форум общения - Logical-portal - Сообщество игроков майнкрафт

Время:

Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 216.73.216.137

Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.

Страница 1 из 1 1
Модератор форума: Hawk

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

Stеn	Сообщение оставлено 27.02.2011 в 22:04:40 \| Сообщение #1

2001

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

Я не флудер , просто мне есть что сказать :)
Дополнительные забавные смайлики

Stеn	Сообщение оставлено 27.02.2011 в 22:04:40 \| Сообщение #1
Пользователь Сообщения: 1420 2001	Решил начать цикл постов о верстке. Для тех, кто этим занимается в достаточной степени — тому это совершенно не пригодится. Так же я не советую читать это тем, кто абсолютно не знает такие вещи, как 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 Показать выделенный код в новом окне Подпись пользователя:* Я не флудер , просто мне есть что сказать :) Дополнительные забавные смайлики
	Профиль ICQ Цитата Вверх

NELEGAL_UA

Сообщение оставлено 27.02.2011 в 23:51:02 | Сообщение #2

1490

Спасибо ,думаю всем пригодиться.

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

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