А какой правильный принцип построения html страницы?

Question

[Тимофей Михайлов]

Собственно у меня вопрос вот какого рода ...
Я делаю сайт, и на нём есть вертикальное меню. Как я реализовал свою страницу:
на главной странице index.html имеется только вертикальное меню и iframe, в котором отображаются другие страницы.
Я тут покопался по сайтам, и пришёл к такому выводу, что таким методом сайты вообще не делаются ...
Подскажите пожалуйста, каким образом мне лучше всего реализовывать переход между html-страницами?
p.s.
У меня была идея, чтобы сайт состоял из одного index.html файла. А остальные страницы загружались бы в div при помощи JavaScript. Но как мне кажется, в этом случае будет не очень удобно править ошибки ...

Comments

[Saboteur]

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

[wiyod]

Ты был заморожен 20 лет и только вышел из спячки, дедушка?

Answer 1

[Степан Крапивин]

Сделай одну страницу со вкладками "Об авторе", "Прайс" и "Связаться", понадобится какой-то js-плагин для вкладок.

Или даже без js можно сделать якорями.
Текст всех разделов будет идти подряд, просто при клике на пункт "Прайс" страница будет прокручиваться до этого раздела.

Answer 2

[FeNUMe]

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

• самый простой - на уровне вебсервера с использованием SSI(Server Side Includes), но используется сравнительно редко;
  
• самый распространенный - когда бекэнд на лету собирает страницу перед отдачей клиенту, но это не ваш вариант;
  
• для статических же сайтов обычно используют либо "генераторы статических сайтов", либо настроенную систему сборки типа webpack/gulp, которая собирает css/js/html "блоки" в единое целое.
  

Так же сейчас популярны SPA(Single Page Application) сайты, в случае визиток инфа сразу же загружается со страницей, а там уже "разбивается" на разделы с помощью верстки/js/css, в случае чего-то более динамического инфа подгружаться на лету с помощью js.

Answer 3

[Егор Живагин]

Ты шаблонизатор изобретаешь? Гугли про них и layout в шаблонизаторах
Меню обычно вставляется в layout (это обёртка для всех страниц) , туда же header и footer

Comments

[Тимофей Михайлов]

Ну вот представьте себе сайт-визитку, с тремя вкладками "Об авторе", "Прайс" и "Связаться".
По сути, это весь сайт, по факту с 3-мя страничками.
Как я пока что понял, "шаблонизатор" - это немного перебор, для такого сайта как у меня.
Или я ошибаюсь?

[Дмитрий Энтелис]

Тимофей Михайлов,
а) шаблонизатор никогда не перебор
b) то что Вы хотите называется SPA ( single page application ), их нынче модно на js фреймворках собирать типа angular

[Иван]

Егор,как вы освоили ноду?

[Егор Живагин]

Тимофей Михайлов, нет, не перебор) Шаблонизатор ставится за 10 минут

[Егор Живагин]

Иван, ну, ради шаблонизатора её можно не осваивать, достаточно NPM + GULP

А вообще, довольно легко освоил, на первой работе встретилась. Можно просто создать в webStorm проект на Node + Express, открыть мануал в гугле и довольно быстро понять, как с этим жить

Answer 4

[tyzberd]

ваш вариант gulp + gulp-nunjucks-render
https://zellwk.com/blog/nunjucks-with-gulp/

Answer 5

[xmoonlight]

У меня была идея, чтобы сайт состоял из одного index.html файла. А остальные страницы загружались бы в div при помощи JavaScript. Но как мне кажется, в этом случае будет не очень удобно править ошибки ...

Пробуйте моё творение: includeHTML (я использую для SPA)