Mozilla Введение в веб программирование [Сергей Леонидович Куринный] (pdf) читать постранично, страница - 3

Книга в формате pdf! Изображения и текст могут не отображаться!


 [Настройки текста]  [Cбросить фильтры]

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

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

12

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

Какую структуру должен иметь ваш веб-сайт?
Далее давайте взглянем на то, какую структуру должен иметь наш
тестовый сайт. Наиболее распространенные вещи, которые есть в
любом сайте, создаваемом вами: индексный файл HTML, папки,
содержащие изображения, файлы стилей и файлы скриптов. Давайте
создадим их сейчас:
1. index.html​
: Этот файл обычно содержит контент домашней
страницы, то есть текст и изображения, которые люди видят,
13

когда они впервые попадают на ваш сайт. Используя ваш
текстовый редактор, создайте новый файл с именем 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 и научим его отображать изображение, которое
вы выбрали ранее.

14

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




My test page





- Строка - это HTML код, который
вставляет изображение на страницу. Мы должны сказать HTML, где
находится изображение. Изображение находится внутри папки
images, которая находится в той же директории что и index.html.
Пройдя вниз по файловой структуре от index.html до нашего
изображения, получим путь к файлу, который нам нужен. Он
выглядит как images/your-image-filename.