Многостраничный сайт на чистых 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.
Ну или как начало нулевых — всё на фреймах делать
451 / 417 / 115
Регистрация: 15.02.2012
Сообщений: 1,833
Сообщение от David_G
Мне нужен базовый принцип создания многостраничных сайтов на html+css+js, без бека вообще. То есть есть у нас допустим фиксированный хедер, футер, навигация, а дальше основной контент меняется от страницы к странице.
Базовый принцип без сервера — это все элементы html дублируются на каждой странице. Можно конечно поизвращаться с js, но вам в этом понадобятся хорошие знания.
Есть конечно варианты:
1. frame — соответсвенно вы на странице указываете где подключается какой фрейм, в этих фреймах размещаете блоки
2. использовать локально программы которые позволяют сделать из вашей верстки шаблон, тогда применяя к любой странице данный шаблон на выходе получаете готовый набор html страниц где все постоянные блоки за вас размещает программа(минус такого подхода вы можете редактировать страницы только через свою программу и заменять файлы придется все за раз), на той неделе уже кто-то поднимал похожий вопрос, я знаю только о подобных штуках в программе dreamviewer, может и в других есть не в курсе.
еще в свое время всеми так не любимый IE вводил работу с любым файлом через тег object — можно было через него указывать страницы подключения, такой а-ля include в html, но этот способ не прижился, и честно не знаю как сейчас он отрабатывает, хотя вроде все браузеры должны поддерживать функционал его атрибутов.
Как сделать многостраничный сайт?
Делаю небольшой сайт-визитку. Использую Bootstrap+HTML+CSS. Доделал почти лэндинг и тут встал вопрос, как делать остальные 3-4 странички? Небольшой каталог, прайс, контакты. Контент статичный, но как это дело лучше реализовать? Верстать так же, скопировав header и footer например, в меню дать ссылки на .html, а остальное заменив на нужное? Уверен, что это самое затратное и тупое решение. В какую сторону курить? В PHP не умею.
- Вопрос задан более трёх лет назад
- 10328 просмотров
многостраничный сайт, как правильно организовать?
Делаю многостраничный сайт. 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 или что-то подобное.
Верстка много-
страничного сайта
Но это не значит, что этот курс нельзя пройти, как самостоятельное обучение, потому что тут Вы сможете отточить свои навыки верстки и пополнить портфолио новой работой. Однако, на этом курсе мы не раз будем упоминать про особенности вёрстки под WordPress, потому что на следующем курсе мы будем переносить эту работу на WordPress.
Что будет на курсе?
Выдаем
макет для верстки
Мы предоставим макет Figma, который будем вместе верстать. Будет только практика и ничего, кроме практики. Если Вы хотели бы получить еще теоретические знания, то рекомендуем начать с базового курса по верстке
Много-много
практикуемся
Учебный процесс строится по новому методу. Его цель — дать направление мысли, подсказки, а после предоставить возможность самостоятельно сверстать блоки, сверяясь с моим кодом после. Следующий урок будет начинаться с разбора, почему был выбран именно такой метод вёрстки.
Пополняем
ваше портфолио
То, что мы сверстаем можно будет опубликовать в портфолио. Работа объемная, поэтому это будет отлично дополнять ваши навыки.
Расписание
Создаём структуру проекта
Верстаем шапку и подвал сайта
Верстаем панель поиска
Верстаем блоки главной страницы (ч.1)
Верстаем блоки главной страницы (ч.2)
Верстаем форму обратной связи
Верстаем шапку остальных страниц
Верстаем страницу блога
Верстаем сайдбар
Верстаем статью
Верстаем страницу портфолио
Верстаем страницу контактов
Верстаем страницу ошибки 404
Адаптив страниц (ч.1)
Адаптив страниц (ч.2)
Обучение проходит на авторской платформе
Как проходит обучение?
Получаете доступ на учебную платформу Frontend Blok
Каждый день в 6 утра по мск открывается доступ к новому уроку
Просматриваете урок длительностью 30 минут, где есть теория и практика
Выполняете домашнее задание для закрепления пройденного материала
Отправляете ДЗ куратору и выполняете его рекомендации
Получаете сертификат об окончании обучения: на русском и английском
Общая информация по курсу
Формат уроков
Уроки заранее записаны и смонтированы так, чтобы не тратить ваше драгоценное время и получать только качественную информацию без воды.
Длительность уроков
В среднем уроки длятся 10-30 минут, в зависимости от темы. Мы не разбираем теорию, но можем разобрать сложные моменты, чтобы у вас осталось понимание верной последовательности в работе.
Домашние задания
Домашнее задание дается после каждого урока. Выполнение обязательно, потому что оно тесно связано с версткой учебного макета. Каждый урок мы будем выдавать Вам подсказки по блокам, которые необходимо будет сверстать самостоятельно. Также к каждому уроку мы приложим итоговый код, чтобы в любой момент вы могли подглядеть решение или сравнить его со своим результатом.
Время открытия уроков
Уроки открываются каждый день в 06:00 по мск каждый будний день. Они доступны месяц, но на учебной платформе можно приобрести опцию «Вечный Доступ» по символической цене.
Что верстаем?
Во время курса Вы сверстаете 6 странц сайта: главную, блог, статью, портфолио, контакты и страницу ошибки.
Вместе подготовим вёрстку на HTML и CSS. Именно эту работу после будем переносить на WordPress, но делать это будем на отдельном курсе. На этом курсе занимаемся только вёрсткой.
Сколько стоит
Тариф «Самостоятельный»
Доступ к видео и материалам курса на 1 месяц
Доступ к учебному чату Discord
Эту работу можно использовать в портфолио
При покупке курса по WordPress, у вас будет возможность снизить стоимость обучения на стоимость этого курса напишите нам в чат, чтобы получить счет на оплату
Часто задаваемые вопросы
Сколько по времени длятся уроки?
Развернуть
В среднем уроки длятся 10-30 минут, в зависимости от темы. Мы не разбираем теорию, но можем разобрать сложные моменты, чтобы у вас осталось понимание верной последовательности в работе.
Должен ли я знать что-то заранее?
Развернуть
Рекомендуем понимать основы HTML и CSS. Не страшно, если у вас мало практики, главное теоретическое понимание. На интенсиве только практика и из теории разбираем только то, что встретится нам во время верстки макета. Это интенсив, где вы сверстаете с нуля сайт из 6 страниц. Если для вас это первый проект, то рекомендуем начать с «Базового курса по вёрстке», чтобы более углебленно понять теорию и сверстать 2 проекта в рамках обучения.
Нужно ли мне заранее установить какие-нибудь программы?
Развернуть
Нет, заранее ничего устанавливать не нужно. На курсе мы расскажем подробно, какими приложениями будем пользоваться и покажем, как устанавливать. Спойлер: это делается очень просто.
Могу ли я посмотреть уроки в другой день?
Развернуть
Да, уроки не обязательно смотреть строго каждый день. Вы можете просмотреть и выполнить практику в любое удобное время. На учебной платформе будет указан срок закрытия курса. Не переживайте, вы всегда можете докупить опцию «Вечный Доступ», чтобы курс не закрылся и остался у вас навсегда.
Получу ли я сертификат в конце обучения?
Развернуть
Да, мы выдаём сертификаты. Это происходит после того, как вы просмотрите и выполните задания всех уроков.
Проблемы с вёрсткой
или фронтенд разработкой?
Задать вопрос
® frontendblok 2019 — ∞,
Все права защищены Политика конфиденциальности Публичная оферта
ИНН 663005760277 ОГРНИП 319665800052422
Павел Демьянов Павел Демьянов
10 мая 2020
Все отлично, вижу путь для дальнейшего своего роста. Главное ваш курс помог увидеть картину, что создание верстки не сложное, есть свои особенности конечно с адаптивом, к ним нужно привыкнуть, а так в целом все достаточно просто, нужно нарабатывать себе опыт и все будет. У меня получился макет, потому что все наглядно на видеоуроке разобрано.
Рекомендую начинать верстать с этого курса. Это даст Вам понимание нравится ли Вам этим заниматься. Пускай в курсе и не дают базовых знаний по используемым фишкам, это не важно, важно то, что при желании вы можете всю информацию найти в интернете, Вас это сильнее прокачает, а если хотите сразу получить все знания по верстке в большем объеме, не отходя от кассы идите на курсы по Верстке к Анне, там Вам все разжуют!
Anastasia Tsepeleva Anastasia Tsepeleva
3 апреля 2020
Спасибо большое за курс! Материал преподносится чётко, постепенно и закономерно. На появляющиеся вопросы сразу же получала ответ в видео-уроках. Обучаться было одно удовольствие. Ни грамма скуки, одна мотивация 🙂