1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
---
title: Работа с файлами
slug: Learn/Getting_started_with_the_web/Dealing_with_files
tags:
- Beginner
- CodingScripting
- Files
- Guide
- HTML
- theory
- website
- Новичку
- Руководство
- Файлы
- сайт
translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
<div class="summary">
<p>Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге <a href="/ru/Learn/Getting_started_with_the_web/Publishing_your_website">загрузите их на сервер</a>. В статье <em>Работа с файлами</em> обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.</p>
</div>
<h2 id="Где_ваш_веб-сайт_должен_располагаться_на_вашем_компьютере">Где ваш веб-сайт должен располагаться на вашем компьютере?</h2>
<p>Когда вы работаете на веб-сайте локально на вашем компьютере, вы должны держать все связанные файлы в одной папке, которая отражает файловую структуру опубликованного веб-сайта на сервере. Эта папка может располагаться где угодно, но вы должны положить её туда, где вы сможете легко её найти, может быть, на ваш рабочий стол, в домашнюю папку или в корень вашего жёсткого диска.</p>
<ol>
<li>Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем <code>web-projects</code> (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.</li>
<li>Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её <code>test-site</code> (или как-то более творчески).</li>
</ol>
<h2 id="Небольшое_отступление_о_регистре_и_пробелах">Небольшое отступление о регистре и пробелах</h2>
<p>Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:</p>
<ol>
<li>Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в <code>test-site/MyImage.jpg</code>, а затем в другом файле вы пытаетесь вызвать изображение как <code>test-site/myimage.jpg</code>, это может не сработать.</li>
<li>Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: <code>my-file.html</code> лучше чем <code>my_file.html</code>.</li>
</ol>
<p>Говоря простым языком, вы должны использовать дефис для имён файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчёркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймёте, что вы делаете. Так в будущем вы столкнётесь с меньшим количеством проблем.</p>
<h2 id="Какую_структуру_должен_иметь_ваш_веб-сайт">Какую структуру должен иметь ваш веб-сайт?</h2>
<p>Далее, давайте взглянем на то, какую структуру должен иметь наш тестовый сайт. Наиболее распространённые вещи, присутствующие в любом проекте сайта, которые мы создаём: индексный файл HTML и папки, содержащие изображения, файлы стилей и файлы скриптов. Давайте создадим их сейчас:</p>
<ol>
<li><code><strong>index.html</strong></code>: Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем <code>index.html</code> и сохраните его прямо внутри вашей папки <code>test-site</code>.</li>
<li><strong>Папка <code>images</code></strong>: Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем <code>images</code> внутри вашей папки <code>test-site</code>.</li>
<li><strong>Папка <code>styles</code></strong>: Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем <code>styles</code> внутри вашей папки <code>test-site</code>.</li>
<li><strong>Папка <code>scripts</code></strong>: Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем <code>scripts</code> внутри вашей папки <code>test-site</code>.</li>
</ol>
<div class="note">
<p><strong>Примечание</strong>: На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имён файлов, поскольку у Windows есть опция <strong>Скрывать расширения для известных типов файлов</strong>, включённая по умолчанию. Обычно вы можете отключить её, перейдя в проводник, выбрать вариант <strong>Свойства папки...</strong> и снять флажок <strong>Скрывать расширения для зарегистрированных типов файлов</strong>, затем щёлкнуть <strong>OK</strong>. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.</p>
</div>
<h2 id="Файловые_пути">Файловые пути</h2>
<p>Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл <code>index.html</code> и научим его отображать изображение, которое вы выбрали в статье <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">"Каким должен быть ваш веб-сайт?"</a></p>
<ol>
<li>Скопируйте изображение, которое вы выбрали ранее, в папку <code>images</code>.</li>
<li>Откройте ваш файл <code>index.html</code> и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Моя тестовая страница</title>
</head>
<body>
<img src="" alt="Моё тестовое изображение">
</body>
</html> </pre>
</li>
<li>Строка <code><img src="" alt="Моё тестовое изображение"></code> - это HTML код, который вставляет изображение на страницу. Мы должны сказать HTML, где находится изображение. Изображение находится внутри папки <em>images</em>, которая находится в той же директории что и <code>index.html</code>. Чтобы спуститься вниз по нашей файловой структуре от <code>index.html</code> до нашего изображения, путь к файлу должен выглядеть так <code>images/your-image-filename</code>. Например наше изображение, названное <code>firefox-icon.png</code>, имеет такой путь к файлу: <code>images/firefox-icon.png</code>.</li>
<li>Вставьте путь к файлу в ваш HTML код между двойными кавычками <code>src=""</code>.</li>
<li>Сохраните ваш HTML файл, а затем загрузите его в вашем браузере (двойной щелчок по файлу). Вы должны увидеть вашу новую веб-страницу, отображающую ваше изображение!</li>
</ol>
<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
<p>Некоторые общие правила о путях к файлам:</p>
<ul>
<li>Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, <code>my-image.jpg</code>.</li>
<li>Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: <code>subdirectory/my-image.jpg</code>.</li>
<li>Для ссылки на целевой файл в директории <strong>выше</strong> вызывающего HTML файла, напишите две точки. Например, если <code>index.html</code> находится внутри подпапки <code>test-site</code>, а <code>my-image.png</code> - внутри <code>test-site</code>, вы можете обратиться к <code>my-image.png</code> из <code>index.html</code>, используя <code>../my-image.png</code>.</li>
<li>Вы можете комбинировать их так, как вам нравится, например <code>../subdirectory/another-subdirectory/my-image.png</code>.</li>
</ul>
<p>На данный момент это все, что вам нужно знать</p>
<div class="note">
<p><strong>Примечание</strong>: Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например <code>C:\windows</code>. Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.</p>
</div>
<h2 id="Что_должно_быть_сделано">Что должно быть сделано?</h2>
<p>К настоящему моменту структура вашей папки должна выглядеть примерно так:</p>
<p><img alt="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" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
<p> </p>
<p> </p>
<h2 id="В_этом_модуле">В этом модуле</h2>
<ul>
<li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
<li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
<li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
<li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
<li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
<li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
<li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
<li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
</ul>
<p> </p>
|
