Как сделать многостраничный сайт html

многостраничный сайт, как правильно организовать?

Делаю многостраничный сайт. Footer и Header (по советам из сети), думаю сделать в отдельном файле(шаблон) и при загрузке страницы подгружать(через js ). Есть вопросы по поводу .sass файлов, получается мне придется делать отдельный syle.sass и media.sass файлы для каждой внутренней страницы? Я новичок в webe , есть неплохой опыт в верстке LP , многостраничный делаю впервые. Как все это грамотно организовать? Гуглил, почти везде описываются какие-то частные случаи. Буду рад любой ссылке или совету) P.S Во внутренних страницах наблюдается такая странность: при клике на любую ссылку происходит переход на index.html . Как исправить?(пользуюсь gulp )

Отслеживать
973 7 7 серебряных знаков 14 14 бронзовых знаков
задан 9 мар 2018 в 16:35
codecaramel codecaramel
31 1 1 серебряный знак 4 4 бронзовых знака
Зачем код? я спрашиваю как правильно организовать проект
9 мар 2018 в 16:55

Что значит на чистом JS? Многостраничный сайт можно сделать и на чистои HTML, о чем речь? Да и зачем подгружать страницы, они так много весят что нельзя сразу всех загрузить?

9 мар 2018 в 16:56

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

9 мар 2018 в 17:04
Лучше используйте MVC
– user245150
31 окт 2018 в 19:47

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Переношу/перевожу ответ с англоязычного SO.

По сути вы просто хотите подключать модули в виде обычных HTML конструкций, которые будут серией div а так же ID или CSS файлы, установите каждому display: none. Потом используйте jQuery .show() и .hide() что бы показыть или скрыть их.

Что бы быть точнее вы хотите организовать навигацию примерно так:

$("#my-home-nav").click(function()< $("#my-home-div").show(); // or .fadeIn(), etc. $("#my-about-div").hide(); $("#my-contact-div").hide(); >); 

Этот код может быть крайне неудобным если страниц будет очень много. Следующий код может упростить задачу:

var pageNames = ["home", "about", "contact"]; var namespace = "my"; var pages = pageNames.map(function(pageName) < return < nav: pageNameSelector(pageName, "nav"), div: pageNameSelector(pageName, "div") >; >); pages.forEach(function(page) < page.nav.click(function() < clearPages(pages); page.div.show(); >); >); function pageNameSelector(pageName, type) < return $(["#" + namespace, pageName, type].join("-")); >function clearPages(pages) < pages.forEach(function(page) < page.div.hide(); >); > 

Теперь все что нужно делать это следовать данной структуре, где id для nav/div даны в виде NAMESPACE-PAGENAME-TYPE и когда вы добавляете дополнительные страницы в pageNames функциональность показать/скрыть будет работать без пробелем.

Или можно просто использовать jQuery Tabs или что-то подобное.

Как сделать многостраничный сайт?

Делаю небольшой сайт-визитку. Использую Bootstrap+HTML+CSS. Доделал почти лэндинг и тут встал вопрос, как делать остальные 3-4 странички? Небольшой каталог, прайс, контакты. Контент статичный, но как это дело лучше реализовать? Верстать так же, скопировав header и footer например, в меню дать ссылки на .html, а остальное заменив на нужное? Уверен, что это самое затратное и тупое решение. В какую сторону курить? В PHP не умею.

• Вопрос задан более трёх лет назад
• 10134 просмотра

Многостраничный сайт на чистых html+css+js

Долго искал информацию в интернете, нашёл мало чего, в основном все гайды написаны под cms-ки и фреймворки, или с использованием php. Мне нужен базовый принцип создания многостраничных сайтов на html+css+js, без бека вообще. То есть есть у нас допустим фиксированный хедер, футер, навигация, а дальше основной контент меняется от страницы к странице. Что можно придумать? Разнести код по разным html-кам и импортировать друг друга? Буду благодарен подробному объяснению, или ссылке на гайд. Просто копипастить их как-то не комильфо.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Задание в HTML, CSS и сайт CSS.
Нет возможности скачать учебник по HTML, CSS помогите с заданием! В HTML как сделать вложенные.

Сайт на html и css
Всем привет. Я создал сайт с нуля на html и css. При добавлении бошьшой информации, она прячится.

Сайт на html и css
Всем привет. Пишу сайт на html/css, страница состоит из картинок и линий <hr>, по итогу картинками.

нужен простенький сайт на html,css
очень нужен сайтик,размером до 5 страничек,но удовлетворяющий требованиям. самой разобраться.

1260 / 958 / 224
Регистрация: 01.10.2018
Сообщений: 3,711

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

Добавлено через 4 минуты
_{удалено модератором}

Добавлено через 6 минут
Да, к Jekyll-у упомянутый каркас не имеет отношения. Хотя вам может подойти и Jekyll/Liquid, но это связка совсем другого плана (генератор статических сайтов).

Регистрация: 19.07.2021
Сообщений: 79

Сообщение от David_G

Разнести код по разным html-кам и импортировать друг друга

Вот такое не поддерживается на чистом html+css.

Тут как раз в PHP и помогает хотя бы самый простой include. Очень просто:

include "footer.html";

Или если на сервере включен IIS:

Можно конечно импортировать через JS, но внутренние скрипты на этой странице уже не будут работать:

1 2 3 4

var ajax = new XMLHttpRequest(); ajax.open("GET", "footer.html", false); ajax.send(); document.body.innerHTML += ajax.responseText;

565 / 464 / 183
Регистрация: 14.10.2017
Сообщений: 1,259
если совсем без бэка, каркас можно так

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

div id="app"> header>header/header> nav id="menu"> ul> li class="active">page 1/li> li>page 2/li> li>page 3/li> /ul> /nav> section> div>Контент 1/div> /section> section class="hidden"> div>Контент 2/div> div>Контент 2/div> /section> section class="hidden"> div>Контент 3/div> div>Контент 3/div> div>Контент 3/div> /section> /main> footer>footer/footer> /div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

#app { display: flex; flex-direction: column; height: 100vh; } footer, header, section { text-align: center; margin: 20px auto; font-size: 32px; } ul { display: flex; justify-content: space-around; } li { list-style-type: none; } li:hover { cursor: pointer; color: orangered; } main { flex: 1; } .hidden { display: none; } .active { color: aquamarine; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

let menuItems = document.getElementById('menu').querySelectorAll('li'); let pages = document.querySelector('main').querySelectorAll('section'); menuItems.forEach((el, i) => { el.addEventListener('click', () => { pages.forEach((elem, j) => { if(j == i) { elem.classList.remove('hidden'); menuItems[j].classList.add('active'); } else { elem.classList.add('hidden'); menuItems[j].classList.remove('active'); } }); }) })

но обязательно количество пунктов в меню должно совпадать с количеством страниц
Регистрация: 19.07.2021
Сообщений: 79

Сообщение от klopp

если совсем без бэка, каркас можно так
Не совсем «многостраничный» но в целом — да, визуально будет отрабатывать, как смена страниц.
565 / 464 / 183
Регистрация: 14.10.2017
Сообщений: 1,259

Сообщение от DimasCooleR

Не совсем «многостраничный»
ну дык ТС хочет

Сообщение от David_G

фиксированный хедер, футер, навигация
331 / 238 / 80
Регистрация: 15.11.2017
Сообщений: 453
Записей в блоге: 4

David_G, генерируйте на компе все html и загружайте на сервер.
Поставьте на компе xampp и php. С помощью php сохраняйте всё в обычные *.html файлы, собирая все шапки-футеры, используя include/require.

Ну или как начало нулевых — всё на фреймах делать

450 / 415 / 115
Регистрация: 15.02.2012
Сообщений: 1,831

Сообщение от David_G

Мне нужен базовый принцип создания многостраничных сайтов на html+css+js, без бека вообще. То есть есть у нас допустим фиксированный хедер, футер, навигация, а дальше основной контент меняется от страницы к странице.

Базовый принцип без сервера — это все элементы html дублируются на каждой странице. Можно конечно поизвращаться с js, но вам в этом понадобятся хорошие знания.

Есть конечно варианты:
1. frame — соответсвенно вы на странице указываете где подключается какой фрейм, в этих фреймах размещаете блоки
2. использовать локально программы которые позволяют сделать из вашей верстки шаблон, тогда применяя к любой странице данный шаблон на выходе получаете готовый набор html страниц где все постоянные блоки за вас размещает программа(минус такого подхода вы можете редактировать страницы только через свою программу и заменять файлы придется все за раз), на той неделе уже кто-то поднимал похожий вопрос, я знаю только о подобных штуках в программе dreamviewer, может и в других есть не в курсе.

еще в свое время всеми так не любимый IE вводил работу с любым файлом через тег object — можно было через него указывать страницы подключения, такой а-ля include в html, но этот способ не прижился, и честно не знаю как сейчас он отрабатывает, хотя вроде все браузеры должны поддерживать функционал его атрибутов.

Как сделать сайт многостраничным

Освойте создание многостраничного сайта с этой практической статьей, которая охватывает все основы от структуры до стилей CSS.

Алексей Кодов
Автор статьи
2 июня 2023 в 12:05

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

1. Определение структуры сайта

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

• Главная страница
• О нас
• Услуги
• Услуга 1
• Услуга 2
• Блог
• Контакты

2. Создание разметки HTML для каждой страницы

Создайте отдельный HTML-файл для каждой страницы сайта. Например, для главной страницы создайте файл index.html , для страницы «О нас» — about.html и т.д. В каждом файле добавьте базовую разметку HTML и добавьте контент, соответствующий этой странице.

Пример базовой разметки HTML:

3. Создание навигационного меню

Пример навигационного меню:

Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT

4. Оформление сайта с помощью CSS

После того, как все страницы созданы и связаны между собой, можно приступить к оформлению сайта с помощью CSS. Создайте отдельный файл стилей, например, styles.css , и подключите его к каждой странице сайта.

Пример подключения файла стилей:

В файле styles.css определите стили для различных элементов сайта, чтобы придать ему единый и современный вид.

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

Удачи в освоении веб-разработки! ��