Базовый шаблон для верстки сайта html, CSS JavaScript, со всем необходимым, сэкономит время для создания сайта, подробный разбор.
Базовый шаблон для верстки сайта
За уже не малое время, которое я занимаюсь разработкой сайтов, нарабатываются определенные наработки в плане кода, появляются какие-то шаблоны и т.д. Конечно, есть достаточно большое уже готовых вариантов, которые я ни раз встречал в интернете, но они как правило были от зарубежных разработчиков, и в основном переполнены лишним кодом, который практически не используется.
В этом уроке я хотел бы поделится своими личными наработками в этой области и показать и рассказать вам о своем шаблоне, который я использую практически всегда и объяснить вам те преимущества, которые как мне кажется будут полезны всем.
Давайте перейдем непосредственно к шаблону
Первым делом давайте разберем структуру, я постарался вложить в него все те необходимые файлы, которые должны минимум присутствовать, на любом сайте, и которые в первую очередь проверяются и важны для настройки самого сайта.
Здесь все достаточно просто в паке CSS лежат все таблицы стилей которые будут использоваться на сайте, там уже лежит несколько таблиц, о которых я расскажу позже. Папка fonts хранит в себе все шрифты, которые вы будете применять на своем сайте, одни шрифт как-бы стандартный я туда положил. И последняя папка, это js в которой как я думаю многие догадались будут лежать все скрипты, которые будут применяться. Идем дальше, файл .htaccess это у нас файл конфигурации web сервера, который я настраиваю на любом сайте, да и не только я. Обязательным файлом у нас идет иконка для сайта favicon.ico её я ложу чтобы не забыть переделать ее под конкретный проект. В файле index.html находится основной скелет сайта, о чем я расскажу подробно позже. И последний файл который есть это robots.txt этот файл предназначен для поисковых роботов я уже писал статью о нем «Как сделать файл robots.txt» и он так же обязателен.
Теперь пора заглянуть внутрь и посмотреть html файл index который, собственно, здесь все собирает и объединяет в единый механизм:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/default-style.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media-style.css">
<meta name="keywords" content="">
<meta name="description" content="">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<header>
</header>
<main>
</main>
<footer>
</footer>
</div>
<script async src="js/script.js"></script>
</body>
</html>
Давайте теперь разбираться последовательно в разметке шаблона
<!DOCTYPE html>
Этот шаблон соответствует стандарту HTML5, а данной строкой кода именно это мы и объявляем, на момент написания этой статьи этот стандарт является самым актуальным и поддерживается всеми современными браузерами.
<html lang="en">
Тег html говорит браузеру о начале и конце документа, так же ему присвоен не обязательный атрибут lang, который сообщает о языке, который будет использоваться, но его можно и не писать на валидность документа это не повлияет.
Теперь один из самых важных тегов это head он содержит основные метатеги, название документа и в нем мы подключаем все основные таблицы стилей.
<meta charset="UTF-8">
Обязательно задаем правильную кодировку шаблону, практически всегда это UTF-8, почему именно она я объяснять не буду, так как это тема для отельной дискуссии, а кому интересно можете почитать о кодировках на W3C или WHATWG, в интернете не проблема найти подобную информацию.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Данный мета тег отвечает за браузеры от Microsoft а именно здесь у казан браузер Edge, вам не нужно здесь ни чего менять просто, оставьте все как есть и все будет нормально работать.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Этот метатег отвечает за корректное отображение сайта в браузерах с разным разрешением экрана, указывая на то, что нужна ширина области просмотра такая же, как и ширина экрана, initial-scale=1.0 - устанавливает начальный масштаб страницы в данном случае это 100%. Я так же не рекомендую вам здесь, что-либо менять.
<link rel="stylesheet" href="css/normalize.css">
Здесь подключается первая таблица стилей, я разбил стили на 5 разных файлов для удобства работы с ними, ну и соответственно по логическому содержанию этих файлов. Они так же подключены в нужной последовательности, для того чтобы если вы хотите переопределить стандартные настройки какого-либо класса или тега, у вас не возникло проблем с этим. Таблица стилей normalize написана Nicolas Gallagher и используется достаточно многими разработчиками, это такой мини-фреймворк направленный на качественное отображение сайта на различных платформах и браузерах.
Если вы посмотрите в код этой таблицы стилей, то увидите, что все описанные классы и теги, так или иначе направленны на нормализацию отображения сайта, делая сайт кроссбраузерным, и подключаю я её в первую очередь, чтобы в дальнейшем если я захочу внести изменения в какой либо тег или класс, я просто переопределю его уже в своей таблице стилей, или просто доработаю. В общем вещ достаточно необходимая, я не стал чистить комментарии внутри, чтобы вам было проще разобраться и понять, так же там есть ссылка на страницу автора в Github
<link rel="stylesheet" href="css/fonts.css">
Следующим действием я по логике подключаю шрифты, я вынес их специально отдельно, так как порой при правке и доработке уже готового проекта, они просто мешаются и усложняют просмотр, таблицы стилей, а правки там как правила не происходят. В шаблоне я оставил один шрифт, и подключил его, для наглядности.
<link rel="stylesheet" href="css/default-style.css">
А это уже моя наработка, в которую я положил те классы, которыми пользуюсь постоянно и те правила, которые мне нужны по умолчанию. Таблица стилей разбита комментариями на логические блоки в которых сгруппированы классы по определенным признакам, например Margins я собрал основные внешние отступы и прописал их как удобно мне, вообще суть всех этих коротких классов в том, что очень часто при написании кода к определенному блоку необходимо применить всего одно правило, а прописывать в тегах style считается плохим тоном или же уже к существующему классу необходимо добавить какое либо свойство не меня основной код таблицы стилей, чтобы не изменить другие блоки привязанные к этому классу, так вот именно для этого написаны все эти классы.
Тут некоторые заметят схожесть с классами фреймворка bootsrap но я изменил синтаксис так чтобы эти классы не конфликтовали при одновременном подключении, например у меня .mt10 а в bootstrap .mt-10 и у меня другие значения этого свойства, тем самым они не пересекаются и при этом похожи и можно использовать и то и другое одновременно.
Еще интересным разделом в этой таблице являются классы Helpers тут немного классов, но они очень помогают, в частности класс .img делает изображение адаптивным, а класс .test дает возможность обвести границы блока ели вы где-то запутались, очень удобен при тестировании и разработке. Конечно, тут можно дописать ещё очень много всего, но я пытался сделать шаблон, не забитый всеми возможными комбинациями в котором без инструкции не разберешься, а просто, понятно и удобно, ну а уж под себя дописать его некогда не поздно.
<link rel="stylesheet" href="css/style.css">
Далее у нас идет основная таблица стилей, где мы уже и будем верстать дизайны, писать свои классы и т.д. И уже потом, когда вы сверстаете свой сайт все основные правки будут здесь, ну а сейчас она естественно пустая и просто подключена к шаблону.
<link rel="stylesheet" href="css/media-style.css">
И последний момент относительно стилей это таблица стилей с медиа-запросами, то есть здесь мы уже выносим отдельно адаптивность сайта, чтобы не мешать все в одну кучу, я для образца оставил в ней пару запросов, но это не абсолютные величины, и вы уже можете писать те контрольные точки, которые нужны конкретно вам.
<meta name="keywords" content="">
<meta name="description" content="">
Метатеги keywords и description это тэги ключевых слов и тег описания страницы, это SEO инструменты и они нужны для поисковых систем, ну естественно обязательно их прописывать.
<title>Document</title>
Заголовок страницы, который должен отображать коротко и понятно суть вашей страницы. Теперь переходим непосредственно к телу шаблона в тег body
<div class="wrapper">
<header>
</header>
<main>
</main>
<footer>
</footer>
</div>
Класс wrapper, вы легко найдете в таблице стилей default-style он позволяет сделать контейнер, внутри которого будет писаться весь дизайн. Теги header, main, footer это теги логического формирования, и они как таковых особенностей не имеют только лишь сообщая браузеру, где шапка, основное содержание, подвал.
<script async src="js/script.js"></script>
И в самом конце документа перед тегом body мы подключаем JavaScript код и подключаем его асинхронно чтобы при загрузке страницы не было задержек. Вот, собственно, и все, данный шаблон для верстки сайтов я применяю постоянно, что-то конечно дорабатываю в нем, что-то оставляю, но как база для написания любого проекта он меня вполне устраивает, надеюсь и вам будет полезен, и вы подчерпнете что-то для себя.
Видеокурс по фреймворку Laravel
Профессиональный видеокурс с примером создания сайта на Laravel
Разрешается републикация материалов сайта с обязательным указанием ссылки на автора
материала (указание автора, его сайта), ссылки следующего содержания:
https://for-net.ru - Как сделать сайт самому
