Сайт визитка - страница "Новости"

Делаем копию файла company.html и сохраняем ее в папке synchronous/html/ с именем news.html.

Открываем news.html в редакторе, изменяем заголовок страницы на "Новости"

Делаем пункт меню Новости активным (перемещаем сласс active на соответствующий пункт навигации).

В левой колонке удаляем код модуля с новостями

<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>

В центральной колонке удаляем весь код между тэгами <section class="center_colum"> </section>. Вместо удаленного кода пишем следующее:

<div class="news_line">
	<h2>DELL МОГУТ ПРОДАТЬ ЧАСТНЫМ ИНВЕСТОРАМ</h2>
	<span class="author">Автор: Администратор</span>
	<span class="date">14.01.2013</span>
	<p>По неподтвержденной информации, компания Dell может быть продана частным инвесторам. На волне слухов акции американского производителя подорожали на 13%. Среди заинтересованных в покупке Dell сторон называются инвестфонды TPG Capital и Silver Lake. Впрочем, эксперты не исключают, что у обоих может не хватить средств на столь крупное приобретение.</p>
	<a class="more" href="#">Читать полностью</a>
</div>

Сохраняем изменения и обновляем страницу "Новости" в браузере. В соответствии с дизайном мы убрали модуль новостей из левой колонки, подсветили активный пункт меню и вывели первый блок с превью одной из новостей. Оформим этот блок как задумывал дизайнер. Сначала напишем стиль для заголовка h2 и сделаем его универсальным для всех h2 на сайте. Ищем в файле со стилями правила для заголовков h1:

h1 {
font-size:24px;
font-weight:bold;
color:#000;
}

и сразу же под ними пишем правила для h2

h2 {
font-size:20px;
line-height:24px;
font-weight:bold;
color:#000;
text-transform:uppercase;
}

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

С заголовком закончили, посмотрим в макет. Второй блок с превью имеет в наличии картинку - вырежем ее и сохраним в папке synchronous/html/images/pic с именем pic_4.jpg.

Выведем на страницу вторую новость и добавим в нее только что подготовленное изображение. Копируем участок кода с новостью и вставляем скопированный фрагмент сразу же перед закрывающим тэгом </section>. Прописываем в абзаце путь к картинке и менаяем текстовое содержимое там, где это требуется.

<div class="news_line">
	<h2>ДОСТУПНО ОБНОВЛЕНИЕ JOOMLA 3.0.2</h2>
	<span class="author">Автор: Администратор</span>
	<span class="date">14.01.2013</span>
	<p><img alt="banner" src="/images/pic/pic_4.jpg" />Доступна Joomla! 3.0.2. Об этом 8 ноября 2012 года сообщили Joomla Project. В процессе подготовки текущей  версии разработчики устранили уязвимость, а также решили 50 задач, намеченных в системе отслеживания ошибок, с безопасностью не связанных. Но это не самое интересное…</p>
	<a class="more" href="#">Читать полностью</a>
</div>

В css файле находим блок со стилями:

.map h3 {
font-weight:bold;
color:#000;
}

и прямо под ним пишем код для остальных элементов блока с превью новостей.

.news_line {
padding-bottom:40px;
width:100%;
overflow:hidden;
}
.news_line span {
font-size:10px;
font-style:italic;
color:#999;
}
.news_line span.author {
float:right;
}
.news_line p {
margin-bottom:5px;
}
.news_line p img {
margin:3px 10px 0 0;
width:114px;
float:left;
}
.news_line a.more {
width:100%;
display:block;
text-align:right;
color:#616161;
font-size:11px;
font-style:italic;
text-decoration:none;
}
.news_line a.more:hover {
color:#cc0000;
}

Остальные два контейнера добавляются по аналогии с предыдущими.

Как обычно - код с проделанной работой и ссылка на демо расположены по ссылкам ниже.

Следующий материал будет посвящен пагинации для страницы новостей.