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

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

  • автор:

Как правильно создать многостраничный сайт на чистом HTML CSS JS?

Мне нужно создать многостраничный сайт, сначала делал по-простому, то-есть много HTML доков в проекте и по нажатию на кнопку открывался тот или иной документ. Но были перезагрузки. Вот ссылка на сайт, в хедере наглядно видно. https://famous-dango-326bce.netlify.app

  • Вопрос задан более года назад
  • 882 просмотра

Комментировать
Решения вопроса 1

Acrilo

Немного не понимаю вашего вопроса, вы всё правильно делаете. Можно для каждой страницы создавать директорию, а в ней считывать index.html, но это немного не правильно. Хотя решит проблему, если у вас сотня страниц и разделов сайта, тогда будет логично разделить разделы на директории. Не совсем понял проблемы с первзагрузкой, страницы на вашем сайте и должны перезагружается, у вас ведь не SPA приложение, а HTML сайт.

Ответ написан более года назад
vittallyyaaa @vittallyyaaa Автор вопроса
я бы и не спрашивал, не видел проблемы, мне просто сказали что так не должно быть. Спасибо!
vittallyyaaa @vittallyyaaa Автор вопроса
Может у вас есть какие-то рекомендации, это мой первый сверстаный сайт, был бы рад услышать

Kiriniy

vittallyyaaa, у вас два пути (на самом деле больше, но это на любителя) — либо много папок и в каждой файл index.html или много html файлов с разными именами в корне (как сейчас). Оба имеют права на жизнь, но мне вот например больше нравится когда адреса site.ru/page вместо site.ru/page.html

Но в целом, если вы не планируете продвижение сайта (не продукта) в печатном формате, то всем по большому счёту плевать что там в адресной строке.

Ещё вам наверно стоит почитать про сборщики и/или шаблонизаторы. Вот у вас допустим 15 страниц, но на всех есть одинаковые блоки (подвал, навигация и тд). Если через полгода вам понадобится что-то там убрать, добавить или поменять, то нужно будет это сделать 15 раз или 1, если используете сборщик.

Верстка много-
страничного сайта

Но это не значит, что этот курс нельзя пройти, как самостоятельное обучение, потому что тут Вы сможете отточить свои навыки верстки и пополнить портфолио новой работой. Однако, на этом курсе мы не раз будем упоминать про особенности вёрстки под WordPress, потому что на следующем курсе мы будем переносить эту работу на WordPress.

Что будет на курсе?

Выдаем
макет для верстки

Мы предоставим макет Figma, который будем вместе верстать. Будет только практика и ничего, кроме практики. Если Вы хотели бы получить еще теоретические знания, то рекомендуем начать с базового курса по верстке

Много-много
практикуемся

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

Пополняем
ваше портфолио

То, что мы сверстаем можно будет опубликовать в портфолио. Работа объемная, поэтому это будет отлично дополнять ваши навыки.

Расписание

Создаём структуру проекта
Верстаем шапку и подвал сайта
Верстаем панель поиска
Верстаем блоки главной страницы (ч.1)
Верстаем блоки главной страницы (ч.2)
Верстаем форму обратной связи
Верстаем шапку остальных страниц
Верстаем страницу блога
Верстаем сайдбар
Верстаем статью
Верстаем страницу портфолио
Верстаем страницу контактов
Верстаем страницу ошибки 404
Адаптив страниц (ч.1)
Адаптив страниц (ч.2)

Обучение проходит на авторской платформе

Предпросмотр учебной платформы Frontend Blok

Как проходит обучение?

Получаете доступ на учебную платформу 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

Спасибо большое за курс! Материал преподносится чётко, постепенно и закономерно. На появляющиеся вопросы сразу же получала ответ в видео-уроках. Обучаться было одно удовольствие. Ни грамма скуки, одна мотивация 🙂

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

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

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

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

Author24 — интернет-сервис помощи студентам

Долго искал информацию в интернете, нашёл мало чего, в основном все гайды написаны под 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 страничек,но удовлетворяющий требованиям. самой разобраться.

1261 / 959 / 224
Регистрация: 01.10.2018
Сообщений: 3,713

Есть очень простые динамические каркасы. Специальную 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,837

ЦитатаСообщение от David_G Посмотреть сообщение

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *