Файловая структура сайта – «Файловая структура сайта-портфолио» — Домашняя работа «Как спроектировать сайт-портфолио» — Курс «Знакомство с HTML и CSS» — HTML Academy

Структура сайта. что, где и как должно работать? — Хабр Q&A

Добрый вечер! Помогите, пожалуйста, разобраться как павильно сделать структуру сайта. Не судите строго, я только недавно начала изучать и многого не знаю.
Сейчас он выглядит так(верстка будет дорабатываться), на данный момент он делает все то, что я хотел.

Можно посмотреть новости по категориям, прочитать полностью, зарегистрироваться и оставить комментарий, администратор может добавлять новости и категории которые сразу появятся на сайте. Но, происходит это с достаточно большой задержкой(как для такой верстки). Я понимаю, что это из за сплошного ХАОСА в файлах. Что у меня происходит можете лицезреть ниже. Это все файлы нужны для работы сайта в данном виде.

Макет содержит 3 страницы, 1 - это главная index.php, 2 - это новость полностью и 3 - это страница для админа с добавлением новостей и тп.

Работает это так. Есть некий index.php который с помощью require_once покдлючает header и тп. Если с страници есть какойто запрос он отправляеться в соответсвующий файл в папке scripts где в свою очередь файл(скрипт) снова require_once файл класса и что то там делает, и возвращается обратно на страницу.
Пример "скрипта".

Вопрос состоит в том как правильно должна виглядеть структура сайта, что и !!!КАК!!! должно между собой работать?
Как пхп должен отображать(как я сейчас делаю на скрине ниже) html код, сколько php должен содержать html код?
Если использую php в html, то как лучше, подгружать файл с кодом php или писать непосредственно в html?
Как правильно загружать разные части сайта типу header или footer?
и т.д.
Читал, видел паттерн MVC, но на данный момент не особо разобрался в нем. И так же интересно есть ли какие-то гласные/негласные правила проектирования сайтов, другие варианты кроме CMS и MVC?
P.S. Если ваш аргумент за MVC, будьте так любезны, оставьте ссылку на хороший туториал о нем.(уже читал habrahabr.ru/post/150267 )
И еще 1 вопрос, данную часть кода я использую для проверки авторизации и соотвественно для вывода нужных блоков html. Находиться он в html-файле с версткой. Как правильней сделать такую проверку, что б от результата зависело отображение нужных блоков?
<?php if (isset($_SESSION['user_id'])) {
       echo  "<div class=exit>
                <form name=logout method=POST action=/php/scripts/destroy.php>
                    <button type=submit>Log out</button>
                </form>
            </div>";
            if ($_SESSION['role'] == 1) {
                echo "<button class=admin><a href=admin.php>Админка</a></button>";
            }
    } else {
       
             echo "<div class=vxod>
            <form name=authentication method=POST action=/php/scripts/authentication.php>
                <input type=text name=login placeholder=LOGIN>
                <input type=password name=password>
                <!--<p><input type=checkbox name=remember>Remember me</p>-->
                <input type=submit value=Войти>
            </form>
            </div>        
            <div class=reg>
            <button><a href=html/registration.html>Регистрация</a>
            </button></div>";
    }
?>

Извините за такое количество текста. И огромное спасибо тем, кто откликнется.

Понятие файловой структуры сайта

В ходе изучения языка гипертекстовой разметки HTML мы узнали, что представляют из себя веб-страницы и научились логически размечать их структуру. Далее, когда мы научимся оформлять внешний вид страниц при помощи каскадных таблиц стилей, мы сможем начать верстать наши первые простейшие сайты и размещать их на локальном сервере или в Интернете. Однако прежде, чем двигаться дальше, давайте все-таки дадим определение понятию 'сайт', а также рассмотрим, как устроена его файловая структура, в которую помимо html-страниц входит достаточно большое количество других файлов и папок: js-скрипты, php-скрипты, различные служебные и вспомогательные файлы (например, .htaccess, favicon.ico, robots.txt, sitemap.xml и др.), а также обычные изображения, медиафайлы и некоторые другие файлы.

Сайт (от англ. site) – это совокупность логически связанных между собой веб-страниц, находящихся в одном месте и воспринимаемых пользователями как одно целое. В Интернете сайт обычно идентифицируется по его уникальному доменному имени или IP-адресу и располагается на сервере в специально отведенной для него папке, которую называют корневой папкой

данного сайта.

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

Конечно, никто не запрещает поместить все файлы сайта напрямую в корневую папку сайта, но когда количество файлов сайта начнет исчисляться сотнями или тысячами, разобраться в них при последующем редактировании содержимого и структуры сайта будет весьма проблематично. Поэтому все файлы нужно помещать в упорядочненную систему папок. Так индексный файл, который обычно является стартовой страницей сайта, принято помещать непосредственно в корневую папку сайта (см. рис. №1). Именно его по умолчанию ищут браузеры при указании доменного имени сайта в адресной строке. Вместе с индексным файлом в корневой папке сайта располагают различные служебные файлы, например, favicon.ico (иконка сайта), sitemap.xml (карта сайта), robots.txt (служебный файл для поисковых роботов), .htaccess (конфигурационный файл), а также файлы подтверждения прав собственности сайта для поисковых машин и некоторые другие дополнительные файлы. Все эти служебные файлы мы рассмотрим более подробно в последующих пунктах данного параграфа.

Рис. №1. Пример содержимого корневой папки сайта

Что касается различных подключаемых к веб-страничкам скриптов и таблиц стилей, то для них можно создать отдельную папку, например, site_files, а уже в ней создать ряд вложенных папок, например, папку images для изображений, папку js для скриптов JavaScript, папку php_files для php-скриптов, папку site_styles для внешних таблиц стилей CSS и т.д. Отдельную папку логично завести и для различных расширений и модулей для сайта, назвав ее, например, modules. Соответственно для каждого подключаемого к сайту модуля нужно будет создать в ней отдельные подкаталоги. Чтобы было легко искать файлы, которые относятся к разным разделам сайта, также целесообразно предусмотреть отдельные каталоги. Главное, чтобы в итоге в корневой папке сайта было сформировано четко структурированное дерево каталогов, в котором будет удобно, быстро и легко искать необходимые для редактирования файлы и страницы.

Также хотелось бы отметить, что имена файлов и папок сайта желательно писать латинскими буквами в нижнем регистре и без пробелов. Если же имя файла или папки состоит из двух слов, то следует писать его через знак нижнего подчеркивания, например, site_files, а не site files. Эти два простых правила помогут избежать на ранних этапах освоения сайтостроения досадных ошибок, связанных с несовпадением регистра символов при обращении к файлу и возможно неправильным восприятием имени файла сервером при наличии в имени пробелов или русских символов.

Файловая структура сайта и структура HTML

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

Итак, создадим простейшую структуру для нового сайта. Она будет выглядеть так:

Простейшая файловая структура сайта

Создайте на компьютере (только не на рабочем столе) папку, назовите ее store (переводится "магазин"). В ней создайте файл index.html — для этого создайте текстовый документ и просто полностью переименуйте его в index.html. Теперь в папке store создайте папку css, а в ней создайте файл style.css.

Сразу скажу, что файл index.html здесь главный. Именно его нужно будет потом открыть в браузере. В файле style.css будут находиться CSS-стили, с помощью которых будут заданы цвет для шрифта, размер шрифта, цвет фона, размеры картинок и другие параметры для внешнего оформления сайта. Для того, чтобы эти стили сработали для данного сайта, в index.html будет ссылка на style.css. Таким образом, когда вы откроете index.html в браузере, когда браузер "встретит" ссылку на style.css, он "возьмет" из style.css все стили и применит их к данному сайту. Надеюсь, что здесь всё понятно.

На данный момент можно сказать, что в index.html находится содержимое: текст, картинки. А в style.css находится всё внешнее оформление: в какой цвет покрасить, какой размер задать и т.д.

Для разработки вам необходим редактор SublimeText. Скачайте его за считанные секунды на официальном сайте sublimetext.com и установите. Это займет меньше 1 минуты.

Откройте ваш index.html в редакторе SublimeText и вставьте следующий код:

<!DOCTYPE html>
<html lang="en">
   <head>
	<meta charset="utf-8">
	<title>Store</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
   </head>
   <body>		
   </body>
</html>

Посмотрите на этот код. В строке <link rel="stylesheet" type="text/css" href="css/style.css"> как раз указывается ссылка на style.css (link переводится как "ссылка"). Путь до файла стилей указывается в атрибуте href. В данном случае это относительный путь, то есть путь относительно главного файла index.html (браузер сперва перейдет в папку css, а потом через слеш перейдет в сам файл style.css). В этом уроке style.css разбираться не будет, я разберу только index.html.

Сразу разберем весь HTML-код. Данный код — это основа основ HTML. То есть все эти теги в обязательном порядке должен содержать любой HTML-файл. Итак, что здесь есть. 

Первая строка <!DOCTYPE html> просто сообщает браузеру, что это HTML-код.

Во второй строке открывается тег <html>. Обратите внимание, что закрывается он в самой последней строке кода — </html>. Именно между тегом <html> и </html> находится ВЕСЬ HTML-код. У тега <html> указан атрибут lang, он равен en. Это сделано для того, чтобы браузер сразу понял, что данная страница сайта на английском языке. Когда вы будете делать русскоязычные сайты, то нужно будет указывать lang="ru".

Что такое тег в HTML

Название тега — это только первое слово после открывающей скобки <. То есть в случае с <html lang="en"> тег называется html, а lang - это атрибут тега, en - это значение данного атрибута. Посмотрите внимательно на картинку:

Схема тега HTML

Теги html, head и body

Внутри <html></html> могут быть только 2 тега - это head и body. Все остальные теги должны находится уже либо в head, либо в body.

В head находится только служебная информация, которая никак не отобразится на самом сайте. Есть только 2 элемента, которые отобразятся в браузере, но не на самом сайте, а на вкладке: 

favicon и title на сайте

Эти 2 элемента — это картинка, которая называется favicon (фавикон), и заголовок страницы. Про фавикон я расскажу позже. А заголовок в нашем коде указан в теге title. В нашем случае этот заголовок — Store.

Еще в <head></head> есть тег <meta charset="utf-8">. Он указывает, что кодировка сайта — utf-8. Об этом можете не задумываться, а просто указывать именно эту кодировку в каждой новой верстке. Раньше были различные кодировки, теперь всегда нужно указывать utf-8.

Также, в head есть тег link со ссылкой на style.css, про который вы уже знаете.

Тег body служит для того, чтобы помещать в него всё, что нужно отобразить на сайте.

Теперь, находясь в Sublime Text, нажмите на клавиатуре Ctrl+S, чтобы сохранить изменения в index.html.

В данном уроке вы узнали

.html — расширение, по которому браузер "понимает", что в файле находится HTML-код.

head — тег для служебной информации сайта.

body — тег для всего содержимого сайта.

title — тег для заголовка страницы сайта.

href — это атрибут, в котором указывается ссылка на файл или другой сайт. Расшифровывается как hyper-reference, что с английского переводится ка "гипер-ссылка". Атрибут href может быть не только у тега link.

Материал был полезен? Поделитесь в соц. сетях:

Из каких частей состоит сайт полностью? — сайт на PHP своими руками

Из чего состоит сайт, где находится главная директория сайта, общая структура веб-сайта, файловая система.

Чтобы разобраться в том — из чего состоит сайт, нужно подробно разобраться в общей структуре сайта. Для этого можно всю информацию разбить на несколько частей, для более удобного рассмотрения. К одной части можно отнести внутреннее строение самой страницы — о чем будет написано в следующей статье, а во второй части можно разобраться в файловой системе сайта, что мы сейчас и сделаем.

Из каких файлов состоит сайт?

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

И так, все страницы сайта состоят из файлов, которые имеют свои уникальные названия. А самой важной страницей всегда будет ГЛАВНАЯ, имя которой может быть index.html для простых сайтов и index.php для динамических и более продвинутых ресурсов. Без данной страницы браузер покажет только структуру файлов и папок в окне. Поэтому она создается сразу и с нее будет ставиться ссылки на все остальные страницы.

Естественно, у каждого рессурса будет свой дизайн. Для более удобного управления которым, создается файл стилей — style.css. Можно его и другим именем назвать, главное правильно прописать адрес к нему с хедера. Данный файл будет содержать все стили шаблона сайта. И при желании изменить элементы дизайна, тогда в файле style.css вносим изменения, которые сразу отображаются во всем веб-сайте. Желательно данный файл поместить в отдельную папку.

Ну какой же интернет проект без картинок и фотографий? Для этой цели создается папка, в которой будут храниться все Ваши изображения. Можно создать несколько таких папок, в которых по отдельности будут изображения относящиеся к дизайну, пользовательские, аватары и т.д. При такой структуре папок намного легче будет все редактировать, когда веб-сайт сильно разрастется!

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

В процессе расширения ресурса, будут подключаться дополнительные программы. Например блоки комментариев, RSS — лента, облако тегов и другие. Их можно также разделить на отдельные категории и каждой присвоить отдельную папку со своим уникальным названием.

Еще существуют файлы, без которых веб-ресурс не в состоянии нормально существовать.

К данной категории относиться файл robots.txt без которого поисковая система Яндекс не сможет качественно, (точнее так — как Вам нужно) индексировать веб-ресурс. Этот файл нужно обязательно создавать и размещать на хостинге.

Естественно без файла sitemap.xml Google трудновато будет при сканировании находить новые страницы, что повлияет на быстроту попадания их в поиск. Этот файл создавать можно самому, или прибегнуть к услугам специализированных сервисов, что очень удобно. И заливать на свой хостинг его нужно обязательно!

В процессе развития своего ресурса, Вы будете отслеживать свое детище в результатах выдачи. Конечно же искать будет каждый ссылку на свой ресурс, но так очень не удобно. Вот для этого нужно создать иконку favicon.ico по изображению которой легко можно будет вычислить свой проект среди остальных, например в поиске Яндекса. Кстати очень удобно.

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

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

Где находится главная директория сайта?

Главное не забыть, что все основные файлы и папки нужно расположить в главной директории сайта.
Это там — где находится файл главной страницы — index.html или index.php, только тогда они смогут выполнять свои прямые функции. Кстати именно на этом моменте часто делают ошибки, что может привести к проблемам, которые потянут за собой проблемы с индексированием. Так что будьте внимательны и удачи в разработке своих веб-сайтов!

Структура папок и элементов | HTML самоучитель

В этой части самоучителя мы познакомимся с новыми для вас терминами, которые используются при описании папок и HTML-элементов.

Примечание: папку также часто называют директорией или каталогом.

Структура сайта

Не держите все файлы в одной папке. Даже небольшими сайтами намного проще управлять, если разложить HTML документы, изображения и другие ресурсы в разные папки, создав тем самым определенную структуру расположения различных файлов. Структурируя файлы как вам удобно, вы можете выбрать для себя достаточно гибкую систему организации файлов, учитывая то, что сайт может расти, система файлов при этом будет оставаться ясной и понятной. Структуру (иерархию) каталогов, в которых располагаются различные файлы, обычно можно увидеть в виде древа. Рассмотрим в качестве примера следующее изображение.

Иерархия каталогов (дерево папок)

Как вы видите, структура - это всего лишь схема, отображающая вложенность одних каталогов в другие. В примере мы использовали всего три каталога, однако этого будет достаточно для того, чтобы описать всю необходимую информацию. Часто каталоги описывают с помощью терминов наследственных (семейных) связей. У нас есть папка под названием "Бананы", она расположена внутри папки "Фрукты". Папка "Фрукты" - это родитель каталога "Бананы", а каталог "Бананы" - ребенок (дочерний каталог) папки "Фрукты". Также у нас есть еще папка "Киви", которая является тоже ребенком каталога "Фрукты".

Чтобы вам лучше запомнить, опишем термины отдельно:

  • Дочерний каталог - это папка, над которой в иерархическом древе есть родительский каталог.
  • Родительский каталог - это папка, содержащая другой каталог.
  • Есть еще такое понятие как "корневой каталог" - это основная (главная) папка, в которой расположены все прочие каталоги и файлы.

Структура элементов

Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим простой пример:


<html>
  <head>
    <title></title>
    <style></style>
  </head>
  <body>
    <p></p>
  </body>
</html>

Схему, показывающую вложенность элементов, можно представить следующим образом:

Иерархия (дерево) элементов в html-документе

  • Дочерний элемент - это элемент, над которым в иерархическом древе есть родительский элемент. Дочерний элемент также еще называют ребенком.
  • Родственный элемент - это другой дочерний элемент того же родительского элемента на том же уровне ответвления. Такие элементы также называют сестринскими, в примере такими элементами являются <head> и <body>, <title> и <style>.
  • Корневой элемент - самый верхний элемент в иерархии (<html>), все другие элементы являются его потомками.
  • Родительский элемент - это элемент, который содержит другой элемент. Иногда его называют просто родитель.
  • Потомок может являться непосредственно дочерним элементом, но обычно это общее название для всех элементов, которые вложены в другие элементы, независимо от того, как глубоко они вложены, например <head>, <title>, <body>, <p> и <style> являются потомками элемента <html>.

С этой темой смотрят:

Структура файлов > О том, как правильно делать сайты! > LILIA-WEB.NAROD.RU

Структура файлов

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

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

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

  • Главная страница
  • Форматы графических файлов
  • Разрешение изображений
  • Оптимизация в программе Photoshop
  • Оптимизация формата GIF
  • Оптимизация формата JPEG
  • Антиальясинг
  • Разрезание изображений
  • Список терминов

Каждый раздел представляет собой один HTML-документ, который следует создать и дать ему имя. Имена файлов лучше называть латинскими символами без пробелов в нижнем регистре. Такой подход гарантирует универсальность и работоспособность на разных платформах.

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

Какой файл загружать первым

Обычно просмотр сайта начинается с главной страницы. При обилии в корне сайта различных файлов, как веб-сервер узнает, что ему загружать автоматически? Конечно, если путь к файлу указан напрямую, никаких вопросов не возникает. Но в большинстве случаев, адрес сайта указывается коротко, без лишних файлов на конце. Вот тогда читаются настройки сервера, и определяется, файл с каким именем следует показать и есть ли он в наличии. Как правило, такой файл имеет имена index.html, index.htm, default.htm, в общем, список можно продолжить. Чтобы не усложнять себе жизнь вычислением, какой же файл главнее, это можно установить самому, используя для этого файл .htaccess, размещая его в корне сайта. Данный файл является конфигурационным для популярного веб-сервера Apache и представляет собой обычный текстовый документ. В нем следует прописать такую строку.

DirectoryIndex index.html index.htm

Где через пробел указываются имена файлов, которые следует просматривать на предмет наличия и запускать автоматически. После этого, при указании пути к разным файлам и папками, в браузере будут открываться документы, как показано в таблице (указание протокола http:// для краткости опущено).

Путь Что запускается
www.mysite.ru www.mysite.ru/index.html
www.mysite.ru/16.html www.mysite.ru/16.html
www.mysite.ru/16/ www.mysite.ru/16/index.html
www.mysite.ru/1/6 www.mysite.ru/1/6/index.html

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

 

Замечания
  • файл .htaccess пишется без всякого расширения с обязательной точкой в начале имени;
  • .htaccess может не работать на некоторых серверах;
  • неполные пути, как показано в таблице, работают только под управлением веб-сервера, на локальном компьютере этот фокус не пройдет;
  • если файл index.html отсутствует в указанной папке, браузер покажет список файлов, которые в ней содержатся.

Запрет доступа к папкам

Чтобы запретить посетителям смотреть информацию в отдельных папках на сайте, что иногда бывает необходимо для ограничения доступа к служебной информации и повышения безопасности сайта, есть два основных способа. Первый — создать пустой файл index.html и поместить его в нужную папку. Как было указано выше, этот файл будет загружаться в первую очередь при выборе пути к папке. А раз он пустой, то и увидеть ничего лишнего не удастся. Второй способ — использование опять же файла .htaccess, который следует разместить в нужной папке. Не стоит удивляться, это универсальный файл и размещаться он может в любом количестве и в любом месте сайта.

В нем надо написать следующую информацию.

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

Изображения

Все изображения, применяемые на веб-страницах, принято хранить в папке с именем images или img. Такая традиция систематизирует материал, разбивая его на блоки. Получается, что для картинок предназначено одно место хранения, для скриптов — другое, для стилей — третье.

Отслеживание ошибок

При правильном создании всех ссылок никогда не возникают, так называемые, «битые ссылки», когда ссылка ведет на файл, путь к которому или его имя указано неверно. Однако данная ошибка с номером 404 может возникнуть и просто, когда неправильно пишут адрес страницы. В этом случае, хорошо бы подсунуть пользователю сообщение об ошибке, чтобы не беспокоился и верил, что все можно поправить. Для этого создают отдельную веб-страницу, которая будет показана как раз при возникновении подобной ошибки. Связать воедино процесс возникновения ошибки и наш файл можно опять же с помощью корневого .htaccess. В него добавляется следующая строка.

ErrorDocument 404 /err404.html

Имя файла называется err404.html и размещается в корне сайта, слэш (символ /) перед именем файла пишется обязательно.

Файловая структура сайта

Вернемся теперь к сайту, файловую структуру которого следует создать. Здесь существует два различных подхода. В первом случае, каждому разделу соответствует html-документ, находящийся в корне сайта. Путь к нему будет выглядеть как www.mysite.ru/optimize.html. Альтернативный вариант — создание папок, которые будут соответствовать определенным разделам. В каждой папке размещается файл index.html. Поскольку этот файл указывать в адресе не обязательно, то путь будет выглядеть как www.mysite.ru/optimize. На рис. 1 и рис. 2 показаны два набора организации файлов на сайте.

Рис. 1. Организация документов по файлам Рис. 2. Организация файлов по каталогам

Какую структуру предпочесть зависит лишь от воли создателей сайта.

Дополнительные файлы

На любом сайте не обойтись и без дополнительных файлов, обычно размещаемых в корне сайта. Сюда входят файлы, предназначенные для выполнения определенных задач и имеющих обязательное имя, а также файлы, имя которых определяется разработчиками.

 Обязательные имена

index.html — название главной страницы, а также веб-страниц размещаемых в папках, которые должны открываться при их указании в адресе. Это имя, как уже упоминалось, может меняться в зависимости от типа веб-сервера и его настроек. Но обычно оно именно такое.

.htaccess — конфигурационный файл веб-сервера Apache. Указанный сервер является наиболее популярным и распространенным в мире, поэтому и данный файл можно встретить повсеместно. Бывают, конечно, исключения.

robots.txt — файл, предназначенный для поисковых систем. При индексировании сайта, в первую очередь ищется он. Пример запрета для всех поисковых систем посещать папки сайта cgi-bin и images.

User-agent: *
Disallow: /cgi-bin/
Disallow: /images/

favicon.ico — иконка сайта, она появляется возле адреса сайта при занесении его в раздел «Избранное» браузера. Это рисунок размером 16 на 16 пикселов формата ICO.

Необязательные имена

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

Заключение

Хотя имена некоторых служебных файлов зависят от настроек сервера и могут меняться от сайта к сайту, приведенные принципы характерны для большинства из них. Для динамических сайтов, содержание которых формируется с помощью программы, так называемого «движка», структура будет несколько отличаться от приведенной. Однако и в этом случае, служебные файлы, такие как таблицы стилей, .htaccess, favicon.ico, robots.txt останутся на месте.

Структура сайта назначение файлов и папок. Гиперссылки

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

СТРУКТУРА
Не секрет, что сайт состоит из файлов и директорий (папок), в которых они лежат.
Папку, которая имеет имя Вашего сайта, допустим sitey.ru, принято называть корневой. Часто встречается выражение: положить в корень сайта.
Папки, находящиеся в корневой директории, называют в зависимости от вложенности: второго, третьего и т.д. уровня.

Соответственно файлам (страницам сайта), лежащим в них, присваивается такое же значение: страница второго уровня и т.д.

Обычно в корне сайта размещается папка images (можно дать любое название), в которой храняться картинки, изображения...

Для более быстрой индексации Вашего сайта поисковым роботом, Яндекс советует не прятать страницы глубоко. Страницы первого уровня проиндексируются (появятся в поисковой выдаче) при первом проходе робота (примерно 2-3 недели).

ФАЙЛ index.html
В любой папке необходимо наличие файла index.html (index.php, index.cgi...). Обычно этот файл является главной страницей сайта или раздела.
Каждый современный браузер настроен на открытие этого файла по умолчанию. Если в папке лежит файл index.html, то браузер откроет его без соответствующего набора.

Допустим сайт UseSite.ru откроется одинаково на главной странице при наборе: http://usesite.ru и http://usesite.ru/index.html
Аналогичная ситуация с папками других уровней. Допустим адрес http://usesite.ru/folder/ откроется, если в папке folder есть файл index.html . Все остальные файлы страницы открываются при наборе полного адреса: http://usesite.ru/folder/page.html

ФАЙЛ style.css
Сайт построенный с применением технологии CSS (каскадные таблицы стилей) имеет много преимуществ и обеспечивает быстроту открытия, переходов по страницам сайта. Это достигается за счет того, что любой браузер при открытии сайта в первую очередь ищет на нем и считывает информацию из файла style.css. Название может быть любым, но расширение .css обязательно.

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

Вторым преимуществом применения технологии CSS является возможность управлять дизайном всего сайта из одного файла. Нет необходимости вносить изменения в каждую страницу проекта.

В шаблонах представленных от SiteY.ru есть подробные комментарии внутри файлов style.css для облегчения задачи редактирования дизайна сайта. См. картинку:

Структура сайта назначение файлов и папок. Гиперссылки

ПРОПИСКА АДРЕСОВ (путей) СТРАНИЦ
Код который вызовет по ссылке "Страница 1" файл страницы page1.html выглядит так:
<a href="http://вашсайт.ru/page1.html">Страница 1</a>  

Чтобы эта страница открылась в новом окне браузера, необходимо добавить атрибут target="_blank":
<a href="http://вашсайт.ru/page1.html" target="_blank">Страница 1</a>

Прописка адресов для вывода картинок подробно описана в разделе Картинки. Работа с изображением.

Отправить ответ

avatar
  Подписаться  
Уведомление о