Сайт визитка - страницы "О компании" и "Контакты"

Займемся разметкой страницы "О компании". Открываем в Notepad++ файл index.html, в верхнем меню выбираем Файл/Сохранить как..., в появившемся диалоговом окне, в поле Имя файла пишем company и жмем кнопку Сохранить. В блокноте имя файла на закладке должно измениться, а в папке synchronous/html/ должен появиться новый файл с именем company.html - открываем его в браузере.

Внесем необходимые изменения в разметку company.html. В разделе head находим строку вида:

<title>Главная</title>

и вместо слова "Главная" пишем О компании. В разделе body находим строку

<header class="header_wrap home_header">

и удаляем класс home_header. Строка теперь будет выглядеть так:

<header class="header_wrap">

В блоке content_wrap находим и удаляем разметку для блока с картинкой:

<div class="slider_wrap">
	<div class="slider_pic">
		<img alt="" src="/images/home_pic.jpg" />
	</div>
</div>

Сохраняем изменения, обновляем страницу в браузере - картинка исчезла, страница выглядит как в PSD и различается только текстом в центральной колонке. Поменять его, думаю не составит труда - вырезаем фото для текста и сохраняем в папке synchronous/html/images/pic с именем pic_3.jpg. В company.html меняем текст в абзацах и выводим картинку в соответствии с дизайном.

<section class="center_colum">
	<h1>О КОМПАНИИ</h1>
	<p>Для большинства компаний наличие своего интернет-представительства – это не просто выход на новые выгодные рынки сбыта, это ещё и показатель надежности и основательности организации. Именно поэтому разработке сайта стоит уделять особое внимание, а лучше всего доверить его создание специалистам, которые профессионально занимаются этим уже не первый год.</p>
	<p>Студия интернет-проектов SYNCHRONOUS – это команда профессионалов, оказывающих комплекс услуг по разработке бизнес решений под ключ – дизайн, поисковое продвижение, поддержка сайта и многое другое, что нужно для успешного развития компании в глобальной Сети.</p>
	<p>Акцентируя свое внимание на каждом клиенте, мы оказываем консультативную помощь, а также освобождаем заказчиков от решения множества проблем, с которыми им приходится сталкиваться при создании сайта и его дальнейшем продвижении.</p>
	<p><img alt="banner" src="/images/pic/pic_3.jpg" /></p>
	<p>Позиционируясь как “студия”, а не просто как еще одна компания по разработке и продвижению сайтов, мы предоставляем весь комплекс технических, маркетинговых и аналитических работ, что позволяет рассматривать сайт клиента не как дань моде и престижу, а как средство конкурентной борьбы сегодня и перспективный источник дохода завтра.</p>
	<p>Мы рады каждому новому клиенту, который ценит профессионализм в разработке сайта, творческий подход и качество работы. Мы предоставляем перечень скидок на услуги для наших постоянных клиентов.Коллектив студии интернет-проектов «SYNCHRONOUS» готов поддержать Вас на всех этапах становления вашего бизнеса в сети Интернет. Мы всегда приветствуем предложения наших заказчиков и будем рады обсудить с Вами Ваши идеи. Для того чтобы оценить стоимость разработки вашего будущего проекта, вы можете использовать наш калькулятор стоимости.</p>
</section>

Это все, что потребуется изменить - если нигде не было допущено ошибок, то страница примет требуемый вид.

По аналогии разметим страницу "Контакты". Открываем в Notepad++ файл company.html (если он по каким то причинам не открыт там), в верхнем меню выбираем Файл/Сохранить как..., в появившемся диалоговом окне, в поле Имя файла пишем contact и жмем кнопку Сохранить. В блокноте имя файла на закладке должно измениться, а в папке synchronous/html/ должен появиться новый файл с именем contact.html - открываем этот файл в браузере.

В тэгах title вместо О компании пишем Контакты

<title>Контакты</title>

В блоке left_colum находим и удаляем разметку для блока с номерами телефонов:

<div class="modules">
	<h3>Связь с нами</h3>
	<p class="sity">+375 (017) 333 22 22</p>
	<p class="velcom">+375 (029) 333 22 22</p>
</div>

Вырезаем фото карты и сохраняем в папке synchronous/html/images/pic с именем map.jpg. В файле contact.html удаляем всю разметку между тэгами <section> </section> и вместо нее пишем следующий код:

<section class="center_colum">
	<h1>ТЕЛЕФОНЫ ДЛЯ СВЯЗИ</h1>
	<p class="sity">+375 (017) 333 22 22</p>
	<p class="velcom">+375 (029) 333 22 22</p>
	<div class="map">
		<h3>КАРТА ПРОЕЗДА</h3>
		<p><img alt="banner" src="/images/pic/map.jpg" /></p>
	</div>
</section>

Открываем в блокноте файл style.css перед комментированной строкой для раздела content прописываем следующие правила:

.center_colum p.velcom {
border:0;
}
.map {
margin:25px 0;
}
.map h3 {
font-weight:bold;
color:#000;
}
/****************end content************/

Сохраняем внесенные изменения, обновляем страницу в браузере и любуемся полученным результатом.

В заключении выполним еще один маленький штрих - в дизайне активные пункты верхнего меню подсвечиваются таким же фоном, как и при наведении. Что бы добиться аналогичного результата в сверстанных страницах мы добавим для тэга li активного пункта навигации класс active. Соответственно, код меню для страницы "Контакты примет такой вид:"

<nav class="top_nav">
	<ul>
		<li><a href="#">Главная</a></li>
		<li><a href="#">О компании</a></li>
		<li><a href="#">Новости</a></li>
		<li class="active"><a href="#">Контакты</a></li>
	</ul>
</nav>

Думаю, понятно, что для главной страницы этот класс следует переместить в тэг li для пункта меню "Главная". Далее в css ищем строку:

.top_nav li a:hover {

и изменяем ее на

.top_nav li a:hover, .top_nav li.active a {

В результате активный пункт меню подсветится.

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

В следующей статье сверстаем последнюю страницу для desktop версии - "Новости"