Пошаговая инструкция создания сайта на html коде / Изменение внутренней структуры сайта

Изменение внутренней структуры сайта

После пройденных нами шагов, самое основное для создания сайта должно быть по меньшей мере понято, если не усвоено.

Теперь пришло время изменить внутреннюю структуру сайта, и вот почему. Когда мы в прошлом шаге делали ссылки в меню, то нам пришлось сделать их на двух страницах. Если бы у нас было 100 страниц, то пришлось бы проделать это сто раз и внести изменения на каждую страницу в отдельности. Представьте себе, что страниц уже 1000 и на всех надо, например, поменять год в подвале сайта.

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

Кроме того, перенос свойств стиля в отдельный файл, уменьшает количество записей в файлах html, что значительно облегчает общий объем сайта.

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

Приступим к воплощению изменений и начнем с создания новой папки на локальном хостинге, в папке нашего сайта "www", в которой будут лежать файлы шапки, боковой панели и подвала. Назовем эту папку "include" по названию команды с помощью которой будем делать подключение.

Файл шапки сайта

Скопируем в новую папку "include" один из файлов index.html или second.html и переименуем его в "header".

Открываем файл "header" в программе Notepad++ и оставляем в нем только записи шапки сайта и верхнего меню, остальное все удаляем.

Файл боковой панели сайта

Теперь сделаем файл для боковой панели сайта и поскольку мы еще ничего в ней не делали, то пока он будет у нас пустой. Для него можно скопировать файл шапки сайта и переименовать его в "sidebar":

Открываем файл "sidebar" в программе Notepad++ и все удаляем из него.

Файл подвала сайта

Для файла подвала сайта еще раз скопируем в папку "include" один из файлов index.html или second.html и переименуем его в "footer".

Открываем файл "footer" в программе Notepad++ и оставляем в нем только записи подвала сайта, остальное все удаляем.

Файл страниц сайта с контентом

Теперь переделаем файлы index.html и second.html, где вместо блоков шапки сайта, верхнего меню, боковой панели и подвала, подключим соответствующие файлы с помощью следующей команды:

<!-- #include virtual="название папки/название файла" --> <!-- Подключение файлов-->

На всякий случай, сделаем сначала копии этих файлов:

Открываем файл index.html в программе Notepad++ и вместо блоков с шапкой сайта и верхнего меню, вставляем запись подключения файла шапки:

<!--#include virtual="include/header.html"-->

Далее подключаем файл боковой панели во второй ячейке таблицы, вместо надписи "Вторая колонка":

<!--#include virtual="include/sidebar.html"-->

И внизу после таблицы подключаем файл подвала сайта:

<!--#include virtual="include/footer.html"-->

С подключениями закончили. И в связи с тем, что теперь в html коде нашего файла появились эти подключения, необходимо изменить расширение нашего файла index.html на .shtml. Поэтому, после редактирования, мы сохраняем его как index.shtml, добавив к расширению букву "s" в окошке "Имя файла".

Для файла second.html нужно проделать все тоже самое.

Поскольку изменились расширения наших файлов, то мы должны внести эти изменения в адреса уже существующих ссылок в верхнем меню сайта, которое теперь находится в файле header.html.

Открываем файл header.html. и добавляем к расширениям букву "s":

После проделанной работы сделаем проверку. Открываем наш сайт в окне браузера и переходим по всем ссылкам, их пока всего шесть. Если все работает нормально, то прежние файлы и их копии можно удалить, а можно сохранить где-нибудь в другом месте и потом использовать для создания других сайтов. Копии можно использовать для одностраничных сайтов, поскольку в них нет функций подключения, а есть все части полностью. Боковую колонку можно убрать, удалив вторую ячейку таблицы в коде html.


В папке сайта остаются следующие файлы:

Теперь, для создания последующих страниц сайта, мы будем делать копии этих файлов, и в них менять контент и описание страниц.

Следующий шаг - Перенос свойств стиля в отдельный файл CSS