Сайт визитка - верстаем центральную часть

Центральная часть главной страницы для desktop версии состоит из трех колонок. В левой колонке расположены блок (или модуль) с номерами телефонов и блок с краткими новостями. Справа размещаются рекламные баннеры. Центральная часть содержит основной текст и иллюстрации к статьям.

Открываем index.html и под блоком slider_pic напишем следующую разметку:

<div class="center_wrap">
	<aside class="right_colum">
	</aside>
	<aside class="left_colum">
	</aside>
	<section class="center_colum">
	</section>
</div>

Для позиционирования информационной части страницы по центру экрана создаем обертывающий блок center_wrap, внутри которого содержаться контейнеры для правой (<aside class="right_colum"> <aside>), левой (<aside class="left_colum"> <aside>) и центральной (<section class="center_colum"> <section>) колонок. В разметке использованы специальные тэги из арсенала html 5.

Если заметили, код для правой колонки расположен первым в потоке. Это сделано для того, что бы в ИЕ 7 не возникало проблем с позиционированием, когда колонке будет присвоено свойство float:right;, позволяющее сдвинуть ее вправо.

Займемся содержимым контейнеров. Если присмотреться к макету, то можно увидеть, что блоки в правой и левой колонках имеют одну и ту же ширину, одинаковый стиль для заголовка - различаются они исключительно содержимым. Это дает нам возможность использовать для всех модулей, выводящихся в этих колонках, одни и те же стили. Для центральной части разметка вообще предельно проста - текст и картинки разместим в абзацах, заголовок выведем в h1.

Подготовим графику. Для телефонов вырезаем из макета пиктограммы, сохраняем их в папке images с именами sity.png для городского номера и velcom.png для оператора сотовой связи. Картинки в тексте статьи и баннеры лучше сохранить в отдельную папку. В отличии от пиктограмм эти изображения не являются элементами стилевого оформления страницы. Создаем в папке images новую директорию с именем pic и складываем туда два фото для баннеров (banner_1.jpg, banner_2.jpg) и два изображения для текста (pic_1.jpg, pic_2.jpg).

Теперь напишем необходимую разметку:

<div class="center_wrap">
	<aside class="right_colum">
		<div class="modules">
			<h3>Реклама</h3>
			<div class="banners">
				<img alt="banner" src="/images/pic/banner_1.jpg" />
				<img alt="banner" src="/images/pic/banner_2.jpg" />
			</div>
		</div>
	</aside>
	<aside class="left_colum">
		<div class="modules">
			<h3>Связь с нами</h3>
			<p>+375 (017) 333 22 22</p>
			<p>+375 (029) 333 22 22</p>
		</div>
		<div class="modules">
			<h3>Новости</h3>
			<ul>
				<li>
					<h4>DELL могут продать частным инвесторам</h4>
					<span>14.01.2013</span>
					<p>По неподтвержденной информации, компания Dell может быть продана частным инвесторам. На волне слухов акции американского производителя подорожали на 13%. Среди заинтересованных в покупке Dell сторон называются инвест фонды TPG Capital и Silver Lake. Впрочем, эксперты не исключают, что у обоих может не хватить средств на столь крупное приобретение.</p>
					<a href="#">Читать полностью</a>
				</li>
				<li>
					<h4>Доступно обновление JOOMLA 3.0.2</h4>
					<span>30.12.2012</span>
					<p>Доступна Joomla! 3.0.2. Об этом 8 ноября 2012 года сообщили Joomla Project. В процессе подготовки текущей версии разработчики устранили уязвимость, а также решили 50 задач, намеченных в системе отслеживания ошибок, с безопасностью не связанных. Но это не самое интересное…</p>
					<a href="#">Читать полностью</a>
				</li>
				<li>
					<h4>Создание промо-сайта</h4>
					<span>30.12.2012</span>
					<p>В наше время ни одна уважающая себя компания может работать без собственного сайта. При этом сам ресурс в Сети должен быть выполнен профессионально и красиво. Ведь именно его качество работы и внешний облик будут привлекать огромное количество посетителей, о которых мечтает каждая компания.</p>
					<a href="#">Читать полностью</a>
				</li>
			</ul>
		</div>
	</aside>
	<section class="center_colum">
		<h1>СТУДИЯ SYNCHRONOUS</h1>
		<p>Современное развитие технологий движется со скоростью, немыслимой еще полвека назад, открывая при этом перед Вами целый спектр возможностей. Интернет-представительство компании - одна из таких возможностей, не воспользовавшись которой, сложно добиться коммерческого успеха.</p>
		<p>Разработка сайта - это не просто изготовление своеобразной визитной карточки вашей компании, это создание особого мира с комфортным для бизнеса микроклиматом, который будет способствовать продвижению вашего бренда и, как следствие, увеличению количества лояльных клиентов.</p>
		<p><img alt="banner" src="/images/pic/pic_1.jpg" /></p>
		<p>Студия интернет-проектов SYNCHRONOUS предлагает вам нестандартные бизнес-решения, включая создание и продвижение интернет сайтов. Мы осуществляем комплексную работу по всем направлениям: формирование бизнес-концепции, проектирование и изготовление сайтов, их раскрутка и поддержка в глобальной cети.</p>
		<p>Заказать сайт в студии интернет-проектов SYNCHRONOUS - значит получить готовое бизнес-решение под ключ от опытных специалистов, преданных своему делу. Создание и профессиональное продвижение сайтов - это то, чем мы успешно занимаемся более 7 лет, накапливая бесценный опыт на благо наших клиентов.</p>
		<p>Цены на разработку сайтов не идут ни в какое сравнение с выгодой, которую вы получите. Не упускайте возможности сделать свой бизнес ещё успешнее.</p>
		<p><img alt="banner" src="/images/pic/pic_2.jpg" /></p>
	</section>
</div>

Если вы все же запутались и не поняли, куда и что вставлять, то скачайте по ссылке ниже версию того, что должно получиться на данный момент. Так же дана ссылка на итоговый вариант сайта.

Следующий шаг, который станет заключительным в верстке главной страницы, это стилизация центральной части.