Как создать структуру папок и файлов для сайта

Обновлено: 17.05.2024

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

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

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

Правильно построенная структура папок

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

Давайте рассмотрим одну из таких структур в качестве примера, вы сможете отредактировать под себя и свои проекты.

Теперь немного поговорим о некоторых папках этой структуры.

Project Name

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

В некоторых проектах вам, возможно, придется работать не только над созданием веб-дизайна. Тогда было бы здорово все это разместить в одном месте и дать таким папкам подходящие имена: Logo Design, Print Design и т.д.

Assets

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

Web Design.

Так как мы в этой статье ведем речь именно о веб-дизайне, то обратить наше внимание стоит именно на эту папку. Если мы посмотрим на рисунок выше, то увидем, что эта папка имеет четыре подпапки:

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

PSD — здесь, можно хранить все файлы веб-дизайна, к примеру шаблоны, каркасы и т.д.

Preview — эта папка обычно содержит файлы, которые вы показываете своим клиентам. Зачастую они хранятся в формате PNG, PDF и JPG.

Sketches — здесь вы будете хранить сделанные вами фотографии зарисовок идей. Может такое случится, что нужно будет через некоторое время вернуться к этим файлам. Вот именно эта папка и поможет вам без труда найти все нужное.

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

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

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

Где ваш веб-сайт должен располагаться на вашем компьютере?

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

Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем web-projects (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её test-site (или как-то более творчески).

Небольшое отступление о регистре и пробелах

Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:

Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в test-site/MyImage.jpg , а затем в другом файле вы пытаетесь вызвать изображение как test-site/myimage.jpg , это может не сработать.
Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: my-file.html лучше чем my_file.html .

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

Какую структуру должен иметь ваш веб-сайт?

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

index.html : Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем index.html и сохраните его прямо внутри вашей папки test-site .
Папка images : Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем images внутри вашей папки test-site .
Папка styles : Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем styles внутри вашей папки test-site .
Папка scripts : Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем scripts внутри вашей папки test-site .

Файловые пути

Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл index.html и научим его отображать изображение, которое вы выбрали в статье "Каким должен быть ваш веб-сайт?"

Скопируйте изображение, которое вы выбрали ранее, в папку images .
Откройте ваш файл index.html и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.

Некоторые общие правила о путях к файлам:

Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, my-image.jpg .
Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: subdirectory/my-image.jpg .
Для ссылки на целевой файл в директории выше вызывающего HTML файла, напишите две точки. Например, если index.html находится внутри подпапки test-site , а my-image.jpg - внутри test-site , вы можете обратиться к my-image.jpg из index.html , используя ../my-image.jpg .
Вы можете комбинировать их так, как вам нравится, например ../subdirectory/another-subdirectory/my-image.jpg .

На данный момент это все, что вам нужно знать

Примечание: Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например C:\windows . Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.

Что должно быть сделано?

К настоящему моменту структура вашей папки должна выглядеть примерно так:

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

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

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

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

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

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

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

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

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

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

У вас должна быть папка для каждого клиента, не связанная с проектом, который вы сейчас для него делаете. Внутри этой папки должна быть папка для каждого проекта. Изначально у вас будет только папка под названием website/, но в скором времени у вас появятся еще такие папки, как logo/, reports/, competitive analysis/ и пр. Также имеет смысл сложить в эту папку файлы дизайна, вероятно, создав для них подпапку design/ или graphics/.

Не открывайте доступ к этой папке для Apache. В ней будет храниться чувствительная информация. В зависимости от используемого средства разработки, вы можете выбрать либо хранить код в этой папке, либо вынести его за рамки папки сайта. Можно назвать ее code/ или, если вы считаете, что для других проектов будет отдельный код — website-code/. Если большинство других ваших проектов связаны с дизайном или бизнесом, тогда, вероятно, в них вообще не будет кода, кроме случайного скрипта, для которого вообще не нужна отдельная папка.

В общем, вот пример структуры, которую мы только что построили:

А теперь поговорим о папках “code/” и “website/”, описанных выше

Существует два типа изображений (практически всегда): те, которые являются частью дизайна, и те, которые являются частью контента, представленного на сайте. Последние должны находиться в папке ресурсов (или загрузок, или мультимедиа), например, в подпапке pictures/. Картинки дизайна, которые вряд ли придется часто искать, можно положить в папку images/.

Если ваш дизайн немного более сложный, у вас должны быть изображения для кнопок, значков, навигации, фона страницы и пр. В таком случае, в этой папке у вас скоро появится от 10 до 20 изображений, поэтому стоит разбить ее на подпапки. Все равно неплохо бы иметь изображения общего назначения в папке верхнего уровня, но при этом подпапки помогут контролировать огромное количество ваших мелких файлов. Давайте файлам чувствительные и легко запоминаемые имена, например form-warning-icon.jpg.

Для большинства сайтов таблицы стилей не должны быть очень большими. Для небольшого сайта или даже для более крупного сайта без большого количества различных разделов (у каждого из которых свой дизайн), вам обычно достаточно одного файла для CSS. В таком случае его можно просто назвать main.css или styles.css.

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

Я считаю, что лучше разделить стили для «разметки» и «контента». «Разметка» будет включать такие элементы, как навигация, колонтитулы, боковые панели, поля, разделы. «Контент» будет включать такие элементы, как абзацы, заголовки, цитаты, списки, плавающие изображения, ссылки. Двигаясь дальше, имеет смысл создать файл стилей «формы». Однако, так как контент в сети становится все более интерактивным, черта между формами и контентом довольно быстро стирается.
Опять же, называйте вещи своими именами, а потому эти файлы лучше назвать layout.css, content.css и forms.css. Если вы решите дать им более неточные названия, вроде presentation.css, model.css,page.css, вам каждый раз придется думать, прежде чем решить, какой файл нужно открыть.

Иногда полезно иметь отдельные CSS-файлы для отдельных страниц, у которых есть собственные требования к дизайну. Но это может оказаться себе дороже, в зависимости от сложности такой страницы. Если вам приходится щелкать по вкладкам в редакторе в поиске нужного CSS-файла для определенного элемента, наверное, лучше все же упростить CSS. Также не помешает подумать об использовании Sass или LESS, чтобы сделать CSS более привлекательным и чистым. Возможно, у вас также будут отдельные таблицы стилей для различных мультимедиа-файлов, и они уж точно должны быть отдельным файлом. Ну и, как обычно, им следует дать чувствительное название, например, print.css.
Если у вас несколько файлов CSS – это прекрасно, но, прежде чем их преподнести, объедините их в один с помощью автоматизированного инструмента, иначе скорость загрузки вашего сайта будет очень печальной. Не объединяйте свои превосходно разложенные CSS вручную. Компьютер сам это легко сделает с помощью шахматного автомата. Для этого можно использовать Minify (PHP) или Juicer(Ruby).

Между организацией файлов JavaScript и CSS для большинства сайтов много общего. У них похожие (но разные) функции, они оба преподносятся браузеру для интерпретации, они оба взаимодействуют с DOM (если правильно используются), а также они часто взаимодействуют между собой. JavaScript часто используется для добавления функциональности тому же набору элементов, которые используются в CSS для создания стиля.

Обычно вы приходите к тому, что у вас есть файл библиотеки JavaScript (jquery.js, mootools.js и пр.), несколько виджетов (скажем, datepicker.js и dropdown.js) и несколько файлов кода для каждого сайта (например, my-image-slider.js). Определенно имеет смысл хранить всю эту информацию в отдельных файлах, однако у вас зачастую есть немного JavaScriptа для сайтов, что имеет смысл создать для него всего один файл.

Положите все эти файлы в папку под названием javascript/. Если вы используете стороннюю библиотеку вроде jQuery, вы крайне редко будете создавать настолько сложные сайты, чтобы была необходимость разделять эту папку.

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

Читайте также: