Создание сайта на основе шаблона

Создание шаблона, каркас сайта

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

Первый вариант построения и вложенности файлов.

Собственно в первом варианте нет никакой структуры и вложенности файлов. Когда планируется небольшой сайт из 10-20 страниц, например сайт визитка, или небольшой блог, то нет смысла разделять страницы на отдельные папки и разделы. В этом случае можно все html страницы расположить в корневой папке, их мало и не запутаешься. Корневая папка, это папка на сервере, в которую должны выкладываться файлы сайта, на хостинге у разных хостеров по разному, но обычно это папка www или public_html.

Когда вы создали шаблонную страницу, то у вас будет собственно два файла, это сама страница index.php или index.html и файл стилей stile.css. После того как вы разделите страницу на части и вынесете в отдельные файлы шапку, боковой блок, подвал, и вставку в тег <head>, то у вас получится 6 файлов. Седьмой будет папка для картинок images, в которую для удобства нужно скопировать главную страницу index.php, и переименовать ее в chablon.php. Теперь когда нужна новая страница, то идем в папку images, копирум файл chablon.php, возвращаемся в корень сайта и вставляем его. Далее переименовываем chablon.php например в novaia_stranica_saita.php, в ней заполняем ключевые слова и описание, заголовок, и вставляем статью, все новая страница готова, осталось сделать на нее ссылку с главной страницы или из радела. Структура файлов будет примерно такой.

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

Пути до файлов в ссылка и вставках

Все пути, например для вызова шапки сайта на страницах <? include ("hider.txt"); ?> или вставки картинки в статью <img src="images/izobrazhenie.jpg" alt="..." ></> будут простые. Фаил hider.txt лежит в той же папке что и страницы, поэтому в пути пишем просто его название. Картинка с названием izobrazhenie.jpg лежит в папке images, поэтому путь начинается с этой папки, а разделение идет с помощью символа / , это слеш для разделения путей до файлов. Путь можен быть бесконечно длинным, тогда указываем все папки разделяя символом / , например content/razdel/foto/images/izobrazhenie.jpg. Понятно что картинка izobrazhenie.jpg лежит в папке images, которая в папке foto, а папка foto лежит в папке под названием razdel, а папка razdel вложена в папку content, а папка content лежит там же где и страница в которую нужно вставить эту картинку.

Если например страница у вас лежит не в корне сайта, а в отдельной папке. К примеру вы создали на сайте папки с разделами и решили все страницы распределить по разделам, а папка images у вас в корне сайта. Тогда путь до картинки в этой папке будет начинаться с двух точек и слеша ../ , это сочетание указывает что путь до файла начинается с верхнего уровня, а не с того где лежит страница. Уровней вложенности может буть несколько, тогда чтобы вернуться на один уровень то пишем в начале пути ../ , если на два уровня, то ../../ , если на три уровня выше то ../../../images/izobrazhenie.jpg

Более сложная структура для большого сайта из нескольких сотен страниц

Когда страниц становится много, то не удобно каждый раз искать страницы, когда они все в одной куче. Удобнее когда в корне сайта всего лишь несколько папок со страницами, страницы размещены в своих папках по названию разделов. Например когда на сайте планируется несколько разделов, то можно создать папки с названием разделов, в них вложить главную страницу index.php, на нее обычно ссылаются с шапки сайта и в ней делают ссылки с кратким описанием на страницы со статьями.

Подобное можно видеть на этом сайте. Если перейти в раздел "Делаем сайт" или любой другой, то вы видите список с кратким описанием и ссылками на статьи, а адрес в строке браузера http://domen.ru/delaem_sait/ говорит что вы на главной странице в разделе delaem_sait, это папка раздела, которую я назвал delaem_sait. Так как на момент написания этих статей я еще не покупал домен и хостинг, то вместо реального домена я для примера вписал в названии сайта domen.ru.

Как вы наверное догадались когда набираешь адрес сайта, то страница index.php загружается сама, если страница с таким названием в корне сайта, то это главная страница сайта. Так же если в разделах будет такая страница, то ее адрес не надо дописывать в ссылках, она сама загрузится, и является главной в разделе, а другие страницы должны быть с другими названиями и их уже надо вписывать в путь ссылки delaem_sait/page1.php, это путь до страницы page1.php в разделе delaem_sait. Со ссылками и путями я думаю понятно, просто много одних и тех же вопросов по путям, поэтому на этом делаю акцент.

Скриншот содержимого этого сайта на момент написания статей. В папке sait_sistem лежат вставки (шапка подвал и пр.) так же файл stile.css. Слелующие четыре папки содержат разделы, то есть в них с раницы и папки images с картинками к статьям. Так же index.php это главная страница сайта, а chablon.php это шаблонная страница, которую я беру чтобы написать новую статью.

структура файлов и папок на сайте шаблон
Содержимое корневой папки сайта
Как вы помните шапка сайта, подвал, боковой блок, и другое у нас в отдельных файлах и вставляется в страницы с помощью php кода include. Эти файлы вставки, а так же файл stile.css можно убрать из корня в отдельную папку. Далее создать папки с названием разделов сайта и в них вкладывать страницы, а так же свои папки images. Если изображений слишком много, то в папках images можно делать подпапки для каждой страницы из разделов. Если на сайте планируется выкладывать видеоролики, или архивы для скачивания, то для них тоже лучше создать свои папки.

В общем так в структуре большого сайта будет все понятно и ни чего не придется искать, написал статью кинул в раздел, сделал ссылку с разлела, опубликовал и готово. Если нужно быстро вставить код счетчика, то идем в папку со вставками (шапка, подва, и пр.) берем текстовый файл подвала footer.txt и вставляем код счетчика, и все публикуем и счетчик теперь на всех страницах сайта. Это разделение страниц на отдельные файлы очень удобно, теперь чтобы тот же счетчик повесть не надо его код вставлять в каждую страницу, а всего один раз в один файл.

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

Заказать сайт 5900.ru как заказать сайт. Этот домен продается здесь: telderi.ru, и еще много других