<div id="bodywrap">
эти блоки. Вот, что у меня получилось:
<div id="header">
</div>
<div id="greeting">
</div>
<div id="content">
</div>
<div id="advantages" class="autowrap">
</div>
<div id="footer">
</div>
Теперь можно переходить к более детальной разметке. Так как макет простой, я опишу только те моменты, на которые стоит обратить внимание:
- Не стоит лепить везде одни дивы. Старайтесь использовать теги по назначению: заголовки для заголовков, ссылки - для ссылок, списки – для списков. Это поспособствует не только лучшей индексации сайта поисковиками, но и удобству пользования сайтом при отключенных стилях или на нестандартных устройствах для людей с ограниченными способностями.
- Следите за валидностью документа (http://validator.w3.org/), это позволит минимизировать вероятность того, что в какой-нибудь очередной версии браузера ваш сайт развалится на куски.
- Используйте «правильный» редактор. С поддержкой фолдинга, автоотступов и дополнения. Это значительно ускорит вашу работу и сэкономит кучу нервов. Например, Notepad++, Scite или Vim(Warning! Этот редактор расчитан больше на маньков вроде вакера, к нему нелегко будет привыкнуть, но потом вы вряд ли захотите на что-то его менять :)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script src="js/DD_belatedPNG.min.js"></script>
<script>
DD_belatedPNG.fix('#greeting img');
</script>
<![endif]-->
</head>
<body>
<div id="bodywrap">
<div id="header">
<h1><a href="/"><img src="img/logo.gif" alt="Orange" /></a></h1>
<ul class="menu">
<li class="current"><a href="#"><img src="img/home.gif" alt="Home" /></a></li>
<li><a href="#"><img src="img/services.gif" alt="Services" /></a></li>
<li><a href="#"><img src="img/about.gif" alt="About" /></a></li>
<li><a href="#"><img src="img/Contact.gif" alt="Contact" /></a></li>
</ul>
</div>
<div id="greeting">
<div class="img">
<img src="img/greeting_img.png" alt="" />
</div>
<div class="text">
<h2><img src="img/greeting_title.png" alt="your title goes here. amet, consectetur, condimentum purus nec" /></h2>
<i>Cras diam nibh, placerat sit amet, dictum eget, varius a, nisi. Suspendisse ac tellus. Sed nisi leo, commodo non, pharetra sit amet, consequat ut, nunc.<br/>Sed nisi leo, commodo non, pharetra sit amet, consequat ut, nunc.</i>
</div>
</div>
<div id="content">
<h3>Welcome to our website!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc. Sed mattis, erat sit amet vehicula consectetur, purus pede consectetur quam, non tempor orci ligula ac mauris. Vestibulum lacus erat, egestas vel, posuere sit amet, molestie eget, ipsum. Cras diam nibh, placerat sit amet, dictum eget, varius a, nisi. Suspendisse ac tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc. Sed mattis, erat sit amet vehicula consectetur, purus pede consectetur quam, non tempor orci ligula ac mauris. Vestibulum lacus erat, egestas vel, posuere sit amet, molestie eget, ipsum. Cras diam nibh, placerat sit amet, dictum eget, varius a, nisi. Suspendisse ac tellus.</p>
</div>
<div id="advantages" class="autowrap">
<div class="reviews">
<h2>Customer Review</h2>
<ul>
<li>
<b>Alex</b> says:
<q>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc."</q>
</li>
<li>
<b>John</b> says:
<q>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus. Donec pharetra molestie nunc."</q>
</li>
</ul>
</div>
<div class="features">
<h2>Features</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
</ul>
</div>
<div class="prices">
<h2>Prices</h2>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>
</ul>
</div>
</div>
<div id="footer">
<div class="copyright">
<img src="img/logo_footer.gif" alt="Orange" /> © 2009 - PSDTemplate.com. All rights reserved.
</div>
<div class="rss"><a href="#"><img src="img/rss.gif" alt="" /> RSS</a></div>
</div>
</div>
</body>
</html>
Следующий пост появится завтра и будет посвящен нарезке графики и немного о CSS.
P. S.: Чето я уже начинаю жалеть, что затеял эту серию постов... Хреновый из меня учитель :) Лень разжевывать все. А кто-то ж целые книги пишет...
С нетерпением жду завтрашнего дня, аффтор, пишы исчо, подписался на рсс, кликнул на адсенс, гражданский долг выполнил:)
ОтветитьУдалитьВ общем не плохо, я вот только не понял, а что такое дивы?
ROFL. http://htmlbook.ru/html/div.html Держи, юнный подаван ;)
ОтветитьУдалить"Этот редактор расчитан больше на людей которым не лень потратить несколько часов на обучение, чтобы сэкономить еще больше часов времени и нервов впоследствии"
ОтветитьУдалитьfxd that 4 u
Этот комментарий был удален автором.
ОтветитьУдалитьp.s. ждем продолжение: "верстка сложного макета с видео и звуком"
ОтветитьУдалить:) Лучше "верстка сложного макета с матами и проклинанием дизайнера"
ОтветитьУдалитьСпасибо, друг, я нашел много нового. Знаешь, очень часто меня удивляет, как на форумах и блогах пишут - "баян", "юзай поиск", "куча инфы по теме". А мне вот понравился этот пост. Исключительно аффторский, я бы даже сказал, Чеховский стиль изложения материала. Ничего лишнего и все понятно.
ОтветитьУдалитьБольшое спасибо за ссылку. Надеюсь ты каждому новичку будешь удилять столько драгоценного времени.
А еще, мне, как читателю твоего безусловно информативного блога, хотелось бы заглянуть за кулисы твоей жизни. Напиши о себе, выложи пару фотографий, поведай свою историю.
Я с радостью проникнусь.
Мне не терпится узнать, что ты подразумеваешь под "кулисами". Здесь порнография вроде запрещена ))) Лучше дам тебе ссылку на учебник русскава языка, чтоб знал, как пишется слово "уделять" :)
ОтветитьУдалитьотвечу коротко и непонятно - не гони, грамотей :)
ОтветитьУдалить