Шаблон html5 страницы: Шаблоны HTML5 | WEATHERLESS

Разное 

Содержание

Стандартная структура шаблона сайта. Пример построения документа на HTML5. Стартовая страница

Любой сайт начинается с создания или редактирования главной страницы. Она задаёт общую архитектуру будущему проекту.
Структура сайта определяется главной страницей, все дополнительно созданные варианты имеют аналогичное построение за исключением содержимого (контента) «Тела страницы».

Рассмотрим простую схему построения любого среднестатистического сайта

Все шаблоны состоят из

файлов.html

(страниц) и папок (директорий).
Главная страница

index.html

открывается по умолчанию при вызове сайта по адресу домена: http://вашДомен.ru/

Файлы стилей дизайна лежат в папке (директории) css/ (ниже приведены примеры часто используемых файлов).
Файлы сценариев находятся в папке js/ (ниже включены примеры часто применяемых скриптов).
Файлы изображений обычно помещают в директорию img/ (ниже указаны разные форматы картинок).

Пример структуры шаблона

Иерархия стандартного шаблона сайта

Жирным шрифтом обозначены — папки;

Синим цветом

выделены файлы;

Красным цветом

отмечены основные стандартные файлы.

Шаблон(домен)/
index.html — главная страница
page1.html — дополнительная страница
page2.html — дополнительная страница
page3.html — дополнительная страница
contact.html — страница контактов

└── папка css/
    ––– style.css
    ––– bootstrap.css
    ––– font-awesome.css
    ––– jquery.3.4.1.min.js
    ––– и т.д.

└── папка js/
    ––– js.js
    ––– jquery.min.js
    ––– responsive.js
    ––– и т.д.

└── папка img/
    ––– image1.jpg
    ––– image2.png
    ––– image3.gif
    ––– image4.jpg
    ––– и т.д.

Пример стандартной стартовой страницы построенной на HTML5 с комментариями

Скачать пример страницы вы можете ниже. В коде страницы присутствуют комментарии, поэтому остановлюсь лишь на некоторых пунктах:
— Атрибут lang=»en» можно заменить для русскоязычных сайтов на lang=»ru», хотя его присутствие является не обязательным.
— Как вы заметили, отсутствует атрибут Метатег Keywords — теперь поисковые системы обходятся без него и не нуждаются в нашем представлении для них ключевых слов.
— Мегатег Description остался в HTML5. Мы имеем возможность предложить поисковикам свою версию описания документа, но он в праве выбирать сам, какой фрагмент текста использовать для показа пользователям.

В структуре страницы желательно использовать семантические элементы HTML5 определяющие тематику блоков, например:
<header> — элементы навигации и заголовков;
<nav> — подразумевает навигацию;
<section> — группирует тематическое содержимое;
<article> — дочерний элемент <section>;

Это не обязательное требование, можно просто воспользоваться обычными элементами DIV, если вы в будущем не собираетесь структурировать страницу под семантическую разметку Schema.

Пример кода стартовой страницы HTML5

<!doctype html> <!-- Допускается любой регистр -->
<html lang="en"> <!-- Для русскоязычных сайтов lang="ru" -->
<head>
  <meta charset="utf-8"> <!-- Объявляет кодировку страницы -->
  <title>Стартовый шаблон HTML5</title>  <!-- Название страницы -->
  <meta name="description" content="Документ построен на HTML5"> <!-- Описание страницы -->
  <meta name="author" content="SiteY">
  <link rel="stylesheet" href="css/styles. css"> <!-- Путь к пользовательской папке с файлом -->
  <link rel="stylesheet" href="https://...../bootstrap.min.css"><!-- Абсолютный путь к внешнему файлу -->
  <!--[if lt IE 9]>
    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><!-- Для капризов IE 9 -->
  <![endif]-->
</head>
<body>
<!-- Шапка - заголовок страницы -->
<header>
<!-- Навигация -->
<nav>
<div>
Меню сайта
</div>
</nav>
<!-- Слайдер-->
<div>
Слайдер
</div>
</header>
<!-- Конец Шапка -->

<!-- Тело страницы -->
<main>
   <section>

      <section>
         <article>
            Часть секции 1 
         </article>
      </section>
	  
      <section>
         <article>
            Часть секции 2 
         </article>
      </section>

   </section>
</main>
<!-- Конец тела страницы -->

<div>
Дополнительная колонка SideBar
</div>
<!-- Footer -->
<footer>
<div>
<p> Copyright &copy;  2019</p>
</div>
</footer>
<script src="js/js.

  
 
 js"></script> <!-- Путь к папке со скриптом -->
<script>
Вставка для скрипта
</script>
</body>
</html>

Скачать пример стартовой страницы на HTML5: Standard-HTML5.rar [1,08 Kb] (cкачиваний: 254)

Сайт-визитка с Админкой

Галерея фото и видео, обратная связь

HTML5 шаблон сайта web-студии — Bayguzin.ru

  • Главная
    • >
  • Шаблоны сайтов
    • >
  • Шаблоны web-студий

Добро! Шаблон, который я Вам хочу представить — это современный дизайн и адаптированная верстка, куча страниц с разным контентом и огромным количеством двигающихся элементов.

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

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

Главная страница

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

Страница «About»

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

Страница «Contact Us»

Страница Контактной информации также иконками и деталями. Здесь расположена карта и форма обратной связи.

Страница «Blog»

Страница Блога представляет собой ленту новостей или постов с категориями, тегами, превью изображениями. Исполнено все изумительно и со вкусом

Страница «Single Blog»

Это текстовая страница блога. Тут есть блочные элементы текста, css цитаты, комментариев и так далее. И на этой и на предыдущей страницах есть левая колонка, где крутятся последние комментарии, популярные статьи.

Также здесь есть поиск.

Страница «Portfolio»

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

Вот такой шаблон сайта web-студии на HTML5. Обязательно посмотрите «Демо версию» сайта и скачивайте к себе в копилочку. Добро!

P.S. Я удалил из архива папку video, так как она весит 500 MB. Вам просто нужно будет вставить свои видео по тому пути, который указан в html.

Если вы не видите кнопку «Скачать»


отключите блокировщик рекламы Скачать (15.49 Mb) Demo