→ Инструкция по созданию Интернет-магазина. Часть 2. Верстка

Инструкция по созданию Интернет-магазина. Часть 2. Верстка

В этой статье мы рассмотрим основы верстки вашего сайта. Вы узнаете из чего состоят страницы вашего сайта и как правильно использовать теги HTML5.

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

Основной и наиболее профессиональный способ сверстать страницу – сформировать её в текстовом редакторе. При этом, ваши возможности практически не ограничены. Вы можете писать код сами, подключать различные сторонние библиотеки и создать оригинальный сайт, но это потребует от вас изучения html, css и, вероятнее всего, javascript.

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

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

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

1
Табличная верстка. При табличной верстке страницы, создается одна большая таблица, внутри которой, путем указания параметров отдельным ячейкам таблицы, верстальщик создает структуру, внутри которой и располагаются соответствующие элементы сайта. Новичку такой подход может показаться интуитивно понятным, но он принесет вам множество неудобств как при дальнейшем оформлении страницы, так и в случае, если вам понадобиться «оживить» её с помощью javascript-функций и готовых библиотек.
2
Чисто визуальная верстка с использованием div. Этот подход успел устареть совсем недавно. div является универсальным тегом, внутрь которого можно вложить любой другой элемент, например, еще несколько div (само вложение производится путем расположения элементов между открывающим тегом div и закрывающим /div). При таком подходе практически никаких ограничений в оформлении сайта испытывать вы не будете, но такой подход ухудшит логическое распознавание вашей верстки как человеком, так и браузером. В настоящее время, браузеры и поисковики используют немного разный подход к элементам расположенным внутри разных тегов.

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

Итак, разберем назначение тегов:

1
header (или «шапка») либо всего сайта, либо отдельного элемента. На первой схеме продемонстрировано, что шапку можно добавить, например, к статье или новости на сайте. Этот блок обозначает не просто заголовок чего-либо, а оформленную верхнюю часть элемента. Суть всего подхода еще и в том, что некоторые стилевые элементы оформления вы можете применить ко всем тегам header одновременно, что даст возможность, например, изменять шрифт сразу во всех шапках.
2
footer (подвал) сайта или раздела. В нем чаще всего отображают некие информационные элементы, которые вам таки необходимо где-то разместить, но портить внешнее оформление сайта не хочется. В нем могут быть ваши контактные данные, некая правовая информация, дополнительные ссылки и т.д. Внутри другого элемента footer можно использовать, например, для указания имя автора или даты.
3
nav (навигация) по сайту. Это меню вашего сайта, содержащее ссылки на другие его разделы. Как вы видите из схем, навигация может располагаться на странице как вертикально, так и горизонтально. Вполне допускается размещать на странице несколько nav, в случае, если вам необходимо более, чем одно меню.
4
aside (боковая панель). Боковую панель можно использовать абсолютно по-разному. В интернет-магазинах в таких панелях часто размещают списки товаров, которые могут вам приглянуться. На новостных сайтах – краткие анонсы последних новостей. Очень часто они также используются для размещения рекламных баннеров.
5
article (статья). Разумеется, информация, содержащаяся в теге не обязана являться статьей. Она определяет элементы, которые будут являться основным наполнением вашего сайта, например, новости, отзывы и т.д. Если ничего похожего на новости или статьи на вашем сайте не предвидится, вы можете не использовать этот элемент.
6
section (секция). Обычно, секция используется для обрамления блока из нескольких однородных элементов, например, блока article, что продемонстрировано на левой схеме. Но, вполне допускается использовать section, чтобы выделить секцию из какого-либо другого блока.
7
main (основное). Используется для основного содержимого страницы. В
лучше не включать такие блоки, как header, footer, nav или aside (даже несмотря на то, что это изображено на правой схеме). Если элемент вашей страницы является большим по объему текстом – то можете смело вставлять его в main. Используйте его, если ваша страница содержит не много небольших article, а некий единый и логически неразделимый фрагмент.
8
figure (рисунок). Этот элемент вы можете видеть на правой схеме в левом верхнем углу. Там чаще всего размещается логотип сайта. Тег figure может использоваться для группировки любых нескольких визуальных элементов, например, для объединения картинки и подписи к ней или рамки вокруг изображения.

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

На этом подготовку к созданию интернет-магазина (или любого другого сайта) можно считать завершенной. Как было сказано в самом начале, для разработки сайта можно разные средства, но самое простое из них – это конструктор сайтов. Даже если вам в дельнейшем не понравится работать с конструктором, попробовать поработать с ним не займет у вас много времени. Основы разработки сайта в конструкторе разобраны в нашем цикле статей «Создать интернет-магазин с нуля».

В комментариях оставляйте вопросы и пишите, о чем еще связанным с разработкой сайтов вы бы хотели узнать.

Devicehit.ru


Теги: создать интернет-магазин создание сайтов

Читайте также по теме статьи «Инструкция по созданию Интернет-магазина. Часть 2. Верстка»:


Вам будет интересно