Посадочная страница
Посадочная страница

Кроме того, каждый из них мы хотим снабдить наглядной иконкой. Если нет возможности нарисовать иконки своими силами, можно воспользоваться набором совершенно бесплатных иконок, которые легко найти в Интернете, если задать поиск по фразе "бесплатный набор иконок" в Google или Яндекс. Для нашего сайта-примера мы тоже находим такой набор, скачиваем иконки в формате .png, а затем используем любой графический редактор, чтобы придать иконкам нужный нам размер и цвет.

6. Для того, чтобы выстроить в ряд различные объекты (в нашем случае — иконки и блоки текста), лучше всего использовать модуль "Колонки". Чтобы структуризировать внешний вид страницы, мы вставляем этот модуль и создаем в нем шесть колонок. В первую, третью и пятую мы ставим нужные нам иконки (модуль "Изображение"), а во вторую, четвертую и шестую — текстовую информацию к ним (модуль "Текст").

7. Для создания хорошего визуального восприятия информации на странице, мы хотим разделить каждый информационный блок модулем "Интервал". Так, мы сделаем текст более читаемым.

 

Кроме того, сейчас он светло-серый на белом фоне, а для нас было бы предпочтительнее, чтобы он стал темнее. Для этого мы заходим в режим редактирования сайта и далее – во вкладку "Стиль". Во вкладке "Формат шрифта" мы выбираем стиль под номером "3", сохраняем сделанное и наблюдаем гораздо более приглядный результат.

8. Теперь нам хотелось бы изменить фотографию рядом с иконками на подходящую нам по теме. Это достаточно легко – мы просто находим подходящее изображение, открываем его в графическом редакторе, придаем ему нужную нам ширину и высоту, яркость и контраст, после чего вставляем его на место старого изображения.

9. Приступая к оформлению основного контента страницы, не стоит забывать о модуле "Интервал" – обязательно вставляйте его между различными информационными элементами вашего сайта. Для целостного и органичного восприятия информации рекомендуем разделять ее одинаковыми интервалами: в нашем случае – 20 пикселов по высоте. Это сделает знакомство с вашим сайтом намного более приятным для посетителей.

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

 

 

10. Начинаем оформление информации на сайте. Наш первый блок будет называться "Ярмарка", и в нем мы бы хотели разместить небольшой вводный текст и фотографию здания, в котором наша ярмарка будет проходить.

 

Оформление всех блоков мы начинаем с заголовка и, конечно же, интервала.

11. Сам блок мы оформляем с помощью модуля "Колонки": в правую колонку мы вставляет приветственный текст (модуль "Текст"), а в правую — фотографию (модуль "Изображение"). 

12. В качестве завершающего штриха мы также можем отделить разделы страницы друг от друга тонкими и изящными пунктирными разделительными полосами, воспользовавшись для этого модулем "Разделитель".

13. Следующий блок, который мы бы хотели оформить, будет представлять из себя примерное описание программы ярмарки. Чтобы обеспечить наглядность и компактность расположения информации, мы поставим расписания двух дней один напротив другого. Для этого снова используем наш незаменимый модуль "Колонки". В каждой из двух колонок мы пишем номер дня и дату (модуль "Заголовок", размер H2), затем вставляем интервал. Саму программу ярмарки размещаем с помощью модуля "Текст" и воспользуемся маркированным списком.

14. Наш следующий блок должен демонстрировать список специальных гостей ярмарки. Простой список имен тут бы не подошел, так как знаменитые писатели способны привлечь посетителей одним своим присутствием на мероприятии — давайте же оформим этот блок по-особенному. Для начала, как и в предыдущих случаях, мы вставляем заголовок (модуль "Заголовок"), а после него — интервал (модуль "Интервал"). Затем, размещаем фотографии наших гостей. В нашем случае мы используем просто силуэты-заглушки, но на настоящих сайтах, как правило, ставят реальные фотографии гостей.

15. Для размещения фотографий именитых гостей и краткой информации о них, используем три колонки. В каждую из колонок вставляем по модулю "Изображение" и загружаем фотографии приглашенных гостей. 

 

Чтобы подписать каждую фотографию, мы можем вставить модуль "Текст" под каждой из них. В нашем случае мы пишем как имя с инициалами, так и род занятий ("писатель"). Причем, имя и инициалы мы выделяем жирным шрифтом, название профессии переносим на вторую строку и обе строки центрируем, чтобы они хорошо смотрелись под фотографиями.

Оставить комментарий

Комментарии: 0