Как сделать веб контент

Как сверстать веб-страницу. Часть 1

Уважаемый читатель, этой статьей я открываю цикл статей, посвященных вёрстке.
В первой части будет описано, как это сделать с помощью стандартных средств на чистом HTML и CSS. В последующих частях рассмотрим как сделать тоже самое, но с помощью современных фреймворков и CMS.

Часть 1. Верстка стандартными средствами

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

Итак, давайте приступим. В качестве нашего подопытного мы возьмем бесплатный psd шаблон Corporate Blue от студии Pcklaboratory.

Структура файлов

Первым шагом давайте создадим простую структуру файлов для наших файлов.

  • Создаем папку с названием нашего проекта, например Whitesquare.
  • В ней создаем пустой файл index.html.
  • В папке проекта создаем папку css с пустым файлом styles.css.
  • В папке проекта создаем пустую папку images.

Предварительный осмотр

После создания структуры файлов открываем psd файл в Photoshop. Важно внимательно осмотреть шаблон и оценить его. Нам нужно понять следующие вещи:

  • Как будут нарезаться изображения?
  • Какими будут основные стили?
  • Какой макет у нас получится?

Только после того, как вы мысленно себе ответите на эти вопросы, можно переходить к нарезке изображений и написанию кода. Давайте рассмотрим эти вопросы по-порядку.

Общие изображения

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

Сохраним логотипы следующим образом:
/images/logo.png
/images/footer-logo.png

В качестве пустых картинок из макета будем использовать однопиксельное серое изображение, которое будем растягивать по необходимости
/images/ sample.png

Повторяющиеся фоновые изображения необходимо вырезать минимальным кусочком достаточным для образования полного изображения повторением по вертикали и горизонтали.
/images/bg.png
/images/h1-bg.png

Иконки социальных сетей с одинаковыми размерами удобно сохранить в один файл и использовать как спрайты для более быстрой загрузки. Для этого можно склеить картинки вручную в Photoshop, а можно сначала нарезать по одной, а затем склеить с помощью специально сервиса, например http://ru.spritegen.website-performance.org. В итоге получится два файла:
/images/social.png
/images/social-small.png

Общее правило при именовании изображений заключается в том, что мелкие и простые картинки, такие, как иконки, логотипы и т.д. сохраняются в формате png, а фотографии в формате jpg.

Основные стили

И только теперь можно начинать писать код. Но начнем мы это делать не с привычного HTML, а с переноса правил в CSS.

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

Основной цвет фона примерно соответствует цвету #f8f8f8. Он будет показан в случае, если фоновая картинка не загрузится. Наверху страницы находится серая дизайнерская полоска. Применим ее через свойство border для body.

Основным шрифтом является тот шрифт, которым написан текст в области контента. Чтобы узнать его стили нужно выделить его в Photoshop’е и посмотреть свойства шрифта. В данном случае это Tahoma 12px с цветом #8f8f8f. Так же в этом макете параграфы имеют увеличенные отступы.

Читайте также:  Как быстро сделать лазер

Прописываем все эти стили в styles.css:

В дальнейшем мы все стили будем писать в этот же файл, поэтому будем называть его просто «стили».

Каркас HTML

И вот, наконец, мы можем попрактиковаться в написании HTML кода. Запишем в index.html следующее:

Здесь мы указываем, что используем разметку HTML5, кодировку utf-8, страница называется Whitesquare. Также подключаем наш файл стилей и внешний файл со стилями шрифтов.
В последнем блоке в секции head мы подключаем специальный скрипт, который позволяет поддерживать Html5 теги в браузерах Internet Explorer меньше 9 версии. Мета-тег X-UA-Compatible сообщает, что в случае использования браузера Internet Explorer, он должен отразить сайт самым современным способом.

Весь html код в дальнейшем будет относиться к этому же файлу, поэтому специально указывать куда прописывать html код автор больше не будет.

Макет

В данном случае, мы видим, что сайт состоит из двух колонок: основного контента и сайдбара. Над ними находится шапка (header), в которой располагаются три горизонтальных блока: логотип с поиском, меню и название страницы. В самом низу под колонками располагается серый горизонтальный блок футера (footer).

Опишем это в теге body:

Wrapper используется для объединения блоков и их выравнивания по центру страницы.

Затем укажем стили блоков:

Логотип

Вставляем логотип в тег header:

Дополнительных стилей не требуется.

Поиск

Вставляем форму поиска в тег header:

И стили выравнивания по правому краю для нее:

Для отображения меню необходимо создать список со ссылками внутри тега nav:

CSS стили для него будут следующие:

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

Заголовок страницы

Заголовок страницы помещается в div с идентификатором heading

Заголовок имеет следующие стили:

Рисуем серую полоску фоном на div’e, и в нее вкладываем инлайновый h1 с нужным шрифтом и фоном цвета страницы, чтобы создалось впечатление прозрачного фона для h1.

Колонки

Для того, чтобы создать колонки страницы нужно прописать следующие стили:

Здесь мы задали фиксированную ширину 250 пикселей для сайдбара, прибили его к левому краю и отодвинули колонку с контентом вправо на 280 пикселей от левого края. Также добавили отступ у контента снизу.

Подменю

Подменю создаем аналогично главному меню. Для этого в теге aside прописываем следующее:

И применяем к подменю следующие стили:

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

Контент сайдбара

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

В html это выглядит так:

В стилях укажем шрифты, цвета и отступы:

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

Цитата

Вёрстку контента начнём с добавления цитаты.

Добавим код цитаты в раздел section

И применим для него стили:

Здесь нет ничего нового, так же — шрифты, фоны и отступы.

Контент

Все стили для текста контента мы уже добавили. Поэтому остается добавить только три параграфа с самим текстом после

Следующим шагом нужно добавить два изображения, которые находятся в конце текста контента. Делается это с помощью тега :

, которому зададим следующие стили:

Читайте также:  G major как сделать

Здесь мы убрали стандартные отсупы у figure, отобразили его как инлайновый блок и применили нужный шрифт. Изображение отображаем как блочный элемент с белой рамкой. Вторую серую рамку можно сделать через css-свойство outline. Самое интересное находится в последнем правиле, которое задает левый отступ у всех figure кроме первого внутри тега section.

Блок «Our team»

При верстке этого блока добавим сначала заголовок:

А затем два блока-строки с карточками сотрудников

Таким образом, карточка (figure) состоит из фотографии (img), подписи (figcaption) с именем сотрудника и его должностью (div). Карточки будут иметь следующие стили:

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

Футер

Футер состоит из четырёх больших блоков: ленты Твиттера, карты сайта, социальных ссылок и логотипа с копирайтом.

Для начала создадим контейнер футера с этим блоками:

И применим к нему оформление:

Контейнер с находится внутри тега footer, это даёт нам возможность через тег footer задать серую область по всей ширине экрана, а через внутренний div отцентрировать с максимальной шириной 960 пикселей. Также этот div задает обоим блокам высоту 90 пикселей.

Лента Твиттера

Верстаем содержимое ленты Твиттера:

Из интересных моментов здесь следующее: подчеркивание у заголовка мы сделали через нижнюю границу, а сам блок твиттера, как и последующие блоки выровняем по левому краю и задаём ширину.

Карта сайта

Карта сайта представляет собой два блока со ссылками:

Ссылкам задаем цвет и оставляем подчеркивание только для наведённых.
Колонки со ссылками делаем через инлайновые блоки и затем свойством #sitemap div + div отодвигаем вторую колонку от первой.

Социальные ссылки

Вставляем набор ссылок в контейнер

Здесь мы применили технику спрайтов – когда один файл с изображением применяется для разных картинок. Все ссылки разделились на большие иконки (.social-icon) и маленькие (.social-icon-small). Мы задали этим классом отображение в виде инлайнового блока с фиксированными размерами и одинаковым фоном. А затем с помощью css сдвинули этот фон так, чтобы на каждой ссылке отобразилось соответствующее изображение.

Копирайт

Блок с копирайтом и логотипом – это картинка со ссылкой и параграф с текстом под ним.

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

На этом наши работы закончены. Готовый проект можно скачать здесь.

Источник

10 советов по созданию контента, который люди будут расшаривать

Насколько сложно в 2020 году регулярно создавать такой контент для онлайн-бизнеса, чтобы он самотиражировался в социальных сетях? Ответ на этот вопрос кроется в технологии создания материала для интернет-ресурсов: необходимо применять ТОП-10 работающих советов в данной области. Об этом читайте далее.

Зачем нужен качественный контент?

Контент — это строительный материал любого интернет-ресурса, будь то бизнес-сайт или личный блог. От его качества зависят основополагающие аспекты развития и метрики ресурса: узнаваемость, охват, трафик, конверсия и рентабельность коммерческого предприятия в целом. Это обусловлено единственным фактором: у онлайн-бизнеса нет иного ресурса, кроме внутреннего содержимого или контента, чтобы заинтересовать потребителя.

Если информация полезна, вызывает эмоции и побуждает к целевому действию (покупке, подписке, лайку, оценке) — значит, контент качественный. Если материал сайта/канала/блога заинтересовал огромное количество пользователей и получил потенциал саморепликации или самотиражирования, то этот контент является виральным (вирусным). При этом, пользователи самостоятельно и по собственному желанию активно используют кнопки шеринга (рассказать друзьям, поделиться, отправить).

Читайте также:  Как сделать гугл график

Смело можно сказать, что именно виральный контент является верхом маркетингового мастерства, что значит «расшарить» на профессиональном сленге маркетологов.

10 советов по созданию контента, который люди будут расшаривать

Материалы, используемые для создания вирусного/вирального контента, должны быть максимально полезными и увлекательными для пользователя. Технология создания расшариваемого контента включает в себя 10 практических советов, а именно:

1. Создание контента на основе интересов целевой аудитории. Для этого нужно определить:

  • категорию пользователей (домохозяйки, студенты, инженеры и др.);
  • место проживания, работы и досуга ЦА;
  • время выхода ЦА в Интернет;
  • способ выхода в сеть (ПК, смартфон, планшетное устройство);
  • потребности потребителей (развлечение, работа, отдых);
  • формат и содержание информации, которая нужна ЦА.

2. Захват внимания заголовком. Помните, что современный темп жизни требует ярких и цепляющих названий.

  • любопытство. К примеру, «Что вы давно хотели узнать про женское здоровье, но стеснялись спросить?»;
  • цифры, числа. 36% респондентов отметили, что обращают внимание исключительно на цифры в заголовке;
  • вопросительный тон. Например, «Какого цвета платья предпочитают блондинки?»;
  • ответ на вопрос «Как?». «Как обезопасить свой бизнес: причины финансово-экономического кризиса».

3. Отличие от конкурентов с помощью уникальности и/или оригинальности. Важно найти свои фишки (юмор, умение прогнозировать, сравнительные обзоры, характеристики и др).

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

5. Создание объемных статей/постов. Вопреки различным исследованиям, которые говорят в пользу коротких публикаций, онлайн-бизнесу не стоит бояться объемных статей. Люди по-прежнему с удовольствием читают такие статьи, если информация для них полезна или способна решить их проблему.

6. Правильное сочетание визуального и текстового материала. Добавьте на сайт видеоматериалы, яркую инфографику, наглядные графики, таблицы и диаграммы.

7. Грамотная подача информации, которая подразумевает, что ее удобно употреблять. Ведя онлайн-бизнес в информационном поле, нужно концентрироваться на следующей форме:

  • заголовок должен давать общее понятие о содержании;
  • текст должен быть разбит на блоки и короткие абзацы;
  • используйте списки для упорядочения информации;
  • разбавляйте текст визуальным материалом;
  • подавайте информацию простым, лаконичным языком.

8. Не бойтесь экспериментов и ошибок. Гениальные идеи, как правило, появляются в ходе рабочего процесса.

9. Отслеживание вашего сегмента рынка на основе аналитики. Следите за трендами, новинками и тенденциями. Регулярно мониторьте деятельность конкурентов.

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

ВАЖНО: способность контента к быстрому самотиражированю может иметь и негативный эффект. В зависимости от качества, полезности и уникальности материала, онлайн-ресурс может стать популярным, а может стать и провальным. Это обусловлено тем, что на вирусный эффект публикации не влияют никакие механизмы, кроме интереса читателей.

Заключение

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

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

Источник

Поделиться с друзьями
Ответ и точка