Создадим основную часть индексной страницы. Шаблон включает большую картинку, как в блогах, под которой расположены блоки со статьями.
Структура главной страницы
Начнём с блока (big-article). Для разделения его от нижней части используем класс big-article, так как таких блоков может быть несколько.
Для стиля big-article зададим следующие параметры: ширина 80%, высота 10%, фоновый цвет (коричневый). Положение изображения — 100% (cover), размер изображения — 78%.
Создание и стилизация блоков статей
Добавим заголовок (<h2>) — «Статья 1», и абзац текста. Можно добавить ссылку («Далее»).
Для изображения (<img>) не будем изменять стили. Загрузим изображение высокого разрешения, например, karta_kv-1.jpg, разместив его в папке images/articles.
Добавим отступ в 10 пикселей. Для заголовков (<h2>) установим шрифт font-family: normal, размер шрифта 1.3em, цвет — тёмно-коричневый, font-family: Comic Sans.
Для абзацев (<p>) установим ширину 90%, отступ 5%. Для блоков (<div>) зададим отступ 5px сверху и снизу, белый цвет текста, выравнивание по центру (text-align: center). Ширина блока будет настроена позже. Для выделения (highlight) используем более светлый цвет фона.
Дополнительные блоки статей
Создадим ещё несколько блоков с небольшими статьями. Ширина блока — около 40%, отступ — 5%. Стили будут частично повторять предыдущие.
Объединение и оптимизация стилей
Объединим стили для нескольких блоков через запятую, если стили одинаковые. Изменим изображения и тексты. Загрузим новые изображения, например, photo1.jpg, photo2.jpg, photo3.jpg. Убедимся, что размер изображений не превышает 2-4 Мб для быстрой загрузки.
Дальнейшие шаги
Созданная структура сайта проста. Дальнейшие работы включают добавление динамических функций: обратная связь (с использованием AJAX), вывод статей из базы данных, регистрация, авторизация и комментарии. Добавим стили для кнопок (ширина 20%).