Стандартные HTML элементы и структура сайта
Общие требования
Существуют базовае требования (стандарты), и специальные требования или пояснения, которые должен предоставить («собрать» при общении с клиентом или на основе аналогичных проектав — на основе полученного ранее собственного опыта) Project Manager (PM) при постановке задачи.
По следам статьи Чистота и порядок — превыше всего. Рекомендации к коду.
- Верстка должна быть блочной, таблицы можно использовать только для предоставления табличных данных в контенте. Все значки типа копирайта, умляутов (немецкие буквы с точечками), уголки, должны быть добавлены через спецсимволы (мнемоники).
- Соответствие макету — самый главный пункт, в противном случае, нельзя будет принять работу. Еще называют PixelPerfect, допускается сдвиг на 1-2 пикселя. При сдвиге больше, отличия могут буть заничительным, так как количество пикселей суммуирется по странице, и элемент снизу может съехать на достаточно большое расстояние. Отличия являются обоснованным отказом от предоставляемой работы. Работа считается невыполненной.
- Заявленные требования к задаче, обычно это:
— кроссбраузерность (список браузеров с версией «от». К примеру, указывается Internet Explorer 12+, Mozilla Firefox, Google Chrome, Apple Safari последних версий. Иногда, к этому добавляется Opera)
— использование doctype (в 99% случаев это html5)
— прохождение валидации на validator.w3.org
— использование css framework (bootstrap, skeleton, grid960 или еще что) или нет
— препроцессоров (less, sass), если используется
Пункты, касательно css фреймворка и препроцессоров — это специальные параметры, без которых легко обходиться большинство проектов, и за их использование платят отдельные деньги. Если требования не предъявляються — спросите, чтобы не было сюрпризов и фраз в конце что-то вроде — «а я думал(а), что вы профессионалы». Может, и профессионалы, но не телепаты 🙂.
Также делаем только то, что в параметрах и заказали. Любая бесплатно выполненная работа может повлечь другие бесплатные работы.
Структура папок, файлов и их наименование
Никакой кириллицы, ни в названиях файлов, ни в папках, ни в комментариях в коде.
Обычнй набор файлов и папок выглядит так:
- Файлы в корне
index.html — главная страница (всегда index)
catogory.html — страница категории
blog.html — страница блога
item.html — страница товара
contact.html — страница контактов
about.html — страница о компании
и дальше по смыслу - Папки и файлы в них
img — для картинок
Картинки .png и .svg — для элементов дизайна, у них битрейт лучше, jpg — для фото, продуктов, например.
js — для скриптов
Размещаем скрипт для инициализаций, обычно называется main.js — в нем инициализируем все слайдеры и прочие скрипты.
Библиотеки скриптов как ибибилиотеку jquery подключаем через cdn — то есть, с сервера (при возможности).
Обязательно проверяем версии библиотек и скриптов, подключаем только последние.
css — для стилей
styles.css — общий файл стилей
media.css — файл с медиа запросами
reset.css — файл с обнулением стандартных свойств тегов
Пример базового набора (заготовки — HTML шаблон) файлов/папок находиться тут. Если нет отдельных требований — используем свое.
Наименование изображений
logо — название для лого, только так.
Для фоновых изображений добавляем bg- , для иконок ico-
Например, bg-top.png или ico-fb.png
Если есть возможность, то лучше давать тематические названия, если это сделать нельзя, то именуем ico-01.png, ico-02.png, bg-box.png и в таком стиле.
Основная структура страницы
- Шапка (верхний колонтитул, он же хедер, header)
<header class="header">header</header>
Класс header добавляем всегда, никогда нельзя вешать класс просто на тег <header>, он может использоваться в контенте, и примениться для всего сразу - Контент (контентная часть, та часть, где размещаються основной текст или элементы, формы)
пример страницы блога
<div class="content">
<section class="blog">
<article class="item">article 1</article>
<article class="item">article 2</article>
<article class="item">article 3</article>
</section>
</div>
То есть, <div> это структурный тег, используется для построения структуры, как и прочих элементов. Для контента можно использовать <section>, - Футер (он же нижний колонтитул, footer)
<footer class="footer">footer</footer>
Наименование классов
- header — название для хедера и только так
- logo — название для логотипа
- login, login-block, auth-block, user-block так может называться блок с авторизацией
- menu, nav название класса навигационного меню
- content — название класса для общего контенера, в котором находиться вся контентная часть
- container — название контенера, который может использоваться для органичения ширины, выравнивания
- block — общий класс, второстепенного элемента
- box — класс для контейнера, часто для однотипных повторяющихся элементов внутри одного блога, как родительского
- footer — класс для футера, только так
- socials — класс для блока или списка, который содержит социальные иконки
Все классы могут повторяться на странице множество раз, если указывать стили относительно непосредственного родителя. К примеру, если меню находиться в хедере и футере, и укажем стили для меню относительно хедера и футера, то этот стиль применться только в одном месте, а название класса будет несколько раз на странице. Так и нужно поступать везде, чтобы не ломать голову над уникальным названием класса.
Основные элементы
Навигационное меню / многоуровненове. Это самый важный и сложный элемент любого сайта.
<ul class="menu">
<li class="active"><a href="#">Home</a></li>
<li>
<a href="#">Products</a>
<ul>
<li class="active"><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Только чистый список. Никаких классов ни на <li>, ни на <a>, и также нельзя добавлять классы на вложенные <ul>, все классы добавляются относительно родителського <ul>. Иногда лучше (гибче) расположить меню в блоке с классом menu, и не вешать его на родительский <ul>, так как в зависимости от CMS название может отличаться и так будет универсальней. Единственный класс можно добавлять только на <li> — это класс активного состояния — active, вот в таком виде <li class="active">. Обычно у пункта автивного состояние такое же поведение, как у ссылки меню по наведению, поэтому, если дизайнер этого не показал, то необходимо прописать активный пукнт такой же, как и по наведению.
Пример реализации выпадающего навигационного меню на HTML/CSS.
Списки
Так как у нас используется и должен использоваться reset.css, который обнуляет все стандартные отступы и прочие свойства, то все списки <ul>, <ol> будут обнулены, не будет ни буллетов, ни цифр. Их нужно будет отдельно прописывать относительно контентной области (текстовой) и только там, так как списки у нас есть в хедере как минимум, а часто есть еще отдельное навигационное меню в футере.
Кнопки
Обычно, это тег с class="btn". При этом, различаем кнопки для форм и кнопки вообще. Для форм используют <input> и <button>, для всего остального — тег <a>. Вот в таком виде <a href="#" class="btn">Button</a>. Если несколько разных кнопок и они схожи между собой, то нужно делать гибко, чтобы можно было добавля дополнительный класс менять размер и/или цвет кнопки <a href="#" class="btn small orange">Button</a> — в таком виде.
Картинки
Картинки, которые используются в контенте, оборачиваются в тег <figure>, если у картинки есть подпись, то оборачивается в figcaprion
<figure>
<img src="/images/img-01.jpg" alt="">
<figcaption>title</figcaption>
</figure>
Пагинация (разбивка на страницы)
<ul class="pagin">
<li class="prev"><a href="#"><</a></li>
<li><a href="#">1</a></li>
<li><span>2</span></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="next"><a href="#">></a></li>
</ul>
Для текущей страницы нет ссылки, что логично, ее кликнуть нельзя. Для остальных есть ссылка, первая и последняя ссылка — вперед и назад, уголки вставляем только как спецсимволы
Вас также может заинтересовать