Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Работа с файлами

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

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

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

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

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

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

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

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

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

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

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

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

Путь к файлам

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

  1. Скопируйте изображение, которое вы выбрали ранее в папку images.
  2. Откройте ваш файл index.html, и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит прямо сейчас - мы рассмотрим структуру более подробно позже в этом руководстве.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  3. Строка <img src="" alt="My test image"> - это HTML код, который вставляет изображение на страницу. Мы должны сказать HTML, где находится изображение. Изображение находится внутри папки images, которая находится в той же директории что и index.html. Пройдя вниз по файловой структуре от index.html до нашего изображения, путь к файлу, который нам нужен, выглядит как images/your-image-filename. Например, наше изображение, названное firefox-icon.png, имеет такой путь к файлу: images/firefox-icon.png.
  4. Вставьте путь к файлу в ваш HTML код между двойными кавычками src="".
  5. Сохраните ваш HTML файл, а затем загрузите его в вашем браузере (двойной щелчок по файлу). Вы должны увидеть вашу новую веб-страницу отображающую ваше изображение!

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

Несколько правил о путях к файлам:

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

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

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

Что еще необходимо сделать?

Вы должны узнать об этом сейчас. Структура вашей папки должна выглядеть примерно так:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

Метки документа и участники

 Внесли вклад в эту страницу: bychek.ru, Evgeny_Kurkin, Unregistered45, Stopy, Semegen
 Обновлялась последний раз: bychek.ru,