Фев
9
2012
xhtml/css // Вёрстка

Вёрстка xhtml/css шаблона. Практика. Верстаем красивый шаблон

Автор Автор artanik    Комментарии 2 коммент. »

Здравствуйте. Этот урок имеет практический характер, так как в нём мы будем учиться верстать красивые, блочные, валидные, кроссбраузерные шаблоны. Так как это будет не один урок, а серия уроков, предоставлю план этого мини-курса:

  • Подготовка
  • Верстаем основу
  • Верстаем всё остальное
  • Кроссбраузерность, валидность, семантика
  • Смотрим глубже
  • Внедряем фичи

Что нам нужно для вёрстки шаблона? Так как мы не дизайнеры, то нам нужен PSD макет сайта для дальнейшей его вёрстки. Поискав в Google мне понравился вот такой вариант:

Макет сайта

Представим что этот макет дал нам дизайнер, и скажу лично, что этот макет верстается прекрасно, и ругаться на дизайнера мы не будем :) . Давайте взглянем на него и мысленно разобьём его на блоки, у меня получился вот такой вариант:

Разбитый на блоки макет

Ну что же, приступим? Для начала откройте Ваш редактор кода, для меня это Notepad++, и создайте новый файл с именем index.html, почему такое имя Вам должно быть известно, если нет, то Вы рано начали верстать, и Вам стоит ещё раз пройтись по ссылкам в первой статье об вёрстке.

После создания файла, нужно определиться какой DOCTYPE мы будем использовать. Я буду использовать:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

В итоге стандартная структура html кода будет такая:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr">
<head>
    <title>Первый xhtml шаблон</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
</head>
<body>
</body>
</html>

На этом этапе не мешало бы создать css файл, откройте ваш редактор и создайте файл style.css, советую сохранить его в какой-нибудь подкаталог, например css/style.css, и добавить в вашем index.html в разделе head строку для подключения стиля:

<link href="css/style.css" rel="stylesheet" type="text/css" />

Всё, подготовка окончена, дальше будем непосредственно верстать. Взглянем на макет, вспоминаем структуру блоков, и тут же пишем это всё в index.html между тегами body:

<div id="wrapper">
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

Коротко об теге div, что это за тег такой? Он предназначен для отделения контента на блоки, которыми легко манипулировать. Сейчас на шаблоне ничего не видно. Что бы увидеть допишите в css файл вот это:

/*Обнуление стилей, нужно делать это, так как во всех браузерах свои отступы для элементов html*/
* {
	margin: 0;
	padding: 0;
}
body {
}
/*wrapper будем использовать как бок, который содержит в себе весь сайт*/
#wrapper {
	width:1000px;/*задаём ширину 1000 пикселей*/
	margin:0 auto;/*ставим по центру*/
}
/* Header
---------------------*/
#header {
	border:1px solid #000;/*однопиксельна сплошная граница чёрного цвета*/
	padding:10px;/*внутрений отступ 10 пикселей*/
}
/* Content
---------------------*/
#content {
	border:1px solid #000;/*однопиксельна сплошная граница чёрного цвета*/
	padding:10px;/*внутрений отступ 10 пикселей*/
}
/* Footer
---------------------*/
#footer {
	border:1px solid #000;/*однопиксельна сплошная граница чёрного цвета*/
	padding:10px;/*внутрений отступ 10 пикселей*/
}

Фон и отступы я написал для наглядности, что бы было видно, что сейчас происходит с будущим шаблоном. Весь сайт находиться в общем теге div#wrapper, это нужно для центрирования сайта, если он фиксированной ширины. Остальное я думаю понятно, там шапка, контент и футер. Почему все эти div имеют id? Справедливый вопрос, ведь можно же использовать class например. Дело в том, что id имеет больший приоритет перед class, и на странице должен быть один, так как он идентифицирует элемент. Атрибут class фактически может применяться много раз, и это будет нормально, но если вы будете id использовать несколько раз, то не известно как себя поведёт брузер, или исполнит ваши правила, или проигнорирует все id, кроме первого.

На этом всё, остальное будет в следующих уроках, дабы не загромождать первый урок по вёрстке.

Подпишитесь на RSS, что бы не пропустить самое интересное. Если есть вопросы или предложения, пишите в комментарии, буду рад выслушать. Удачи!

Метки:

Похожие сообщения

Об авторе: Артём Аникеев

Люблю программирование, это больше чем хобби. Считаю это искусством. Ведь нужно проявить креативность при решении поставленной задачи. Программист в процессе создания программ или скриптов, должен получать удовольствие от написания кода. В этом случае конечный продукт будет успешным и профессиональным.

Есть 2 коммент. + Добавить

Оставить комментарий