Почему все файлы веб-страниц должны находиться в одной папке

Обновлено: 04.07.2024

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

Оглавление

Структура каталогов

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

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

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

Структура для небольших веб-сайтов

  • корневая
    папка
    • изображения
      Папка
      • image1.jpg
        Изображение JPEG
      • image2.jpg
        Изображение JPEG
      • image3.jpg
        Изображение JPEG
      • image4.jpg
        Изображение JPEG
      • image5.jpg
        Изображение JPEG

      Как видите, каталог strcuture состоит из корневого каталога, который содержит подкаталог с именем "images". В этой организационной модели вы помещаете все свои изображения в каталог «images», а все документы — в корень.

      Разделение на категории

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

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

      • корневая
        папка
        • изображения
          Папка
          • животные
            Папка
          • фэнтези
            Папка
          • цветы
            Папка
          • люди
            Папка
          • сюрреализм
            Папка

          Теперь вы можете поместить каждое изображение в соответствующий каталог, получив в среднем 20 изображений в каждом каталоге. И тем не менее, эти каталоги могут быть разделены: например, каталог «животные» может содержать подкаталоги, такие как «птицы», «лошади» или «кошачьи».

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

          Разделение на подсайты

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

          • корневая
            папка
            • исполнители
              Папка
              • isaac
                Папка
                • изображения
                  Папка
                • bio.html
                  HTML-документ
                • contact.html
                  HTML-документ
                • images.html
                  HTML-документ
                • изображения
                  Папка
                • bio.html
                  HTML-документ
                • contact.html
                  HTML-документ
                • images.html
                  HTML-документ

                Теперь обратите внимание на папку "artists". Это плюс, который позволяет как организовывать, так и расширять структуру, делая структуру более гибкой для добавления новых исполнителей. А файл "index.html" в папке "artists" содержит документ, показывающий всех исполнителей, присутствующих на сайте.Размещение этого файла здесь кажется уместным в смысле принадлежности: это список исполнителей; он должен находиться в каталоге "artists".

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

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

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

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

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

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

                Отступление от регистра и пробелов

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

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

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

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

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

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

                Примечание. На компьютерах с Windows у вас могут возникнуть проблемы с просмотром имен файлов, поскольку в Windows по умолчанию включен параметр Скрыть расширения для известных типов файлов. Как правило, вы можете отключить это, перейдя в проводник Windows, выбрав параметры папки. вариант, сняв флажок «Скрывать расширения для известных типов файлов» и нажав «ОК». Более подробную информацию о вашей версии Windows можно найти в Интернете.

                Пути к файлам

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

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

                Скриншот нашего простой веб-сайт, показывающий только логотип firefox — пылающую лису, окутывающую мир» width=

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

                • Чтобы создать ссылку на целевой файл в том же каталоге, что и вызывающий HTML-файл, просто используйте имя файла, например мое-изображение.jpg .
                • Чтобы сослаться на файл в подкаталоге, напишите имя каталога перед путем и косую черту, например подкаталог/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 чаще всего используется обратная косая черта, а не прямая, т.е. С:\Виндовс. В HTML это не имеет значения — даже если вы разрабатываете свой веб-сайт для Windows, вы все равно должны использовать косую черту в своем коде.

                Что еще нужно сделать?

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

                Привет всем. Моя работа связана с несколькими веб-сайтами, все они размещены на собственном хостинге. Каждый сайт находится в своей собственной папке непосредственно под wwwroot на веб-сервере. Вот мой вопрос: что может привести к тому, что файлы HTML будут отображаться по-разному в разных папках?

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

                Я не понимаю, почему страница отлично отображается в одной папке и разваливается в другой. Наши технические специалисты тоже в тупике. Я проверил HTML, поэтому не думаю, что это виновато. Это происходит как в IE, так и в Firefox, поэтому проблема не в браузере. Единственное, что я могу придумать, так это то, что это какая-то настройка сервера/папки, но я ничего не знаю о "вещах сервера".

                Надеюсь, я ясно объяснил. Большое спасибо за любую помощь.

                ОБНОВЛЕНИЕ: Пути к стилям, файлам .js и т. д. являются относительными, но я перемещаю всю структуру папок — все изображения, все файлы css, все скрипты, все. Спасибо за ответы.

                Чтобы вы не подумали, что я сумасшедший, я провел эксперимент:

                Я создал простой HTML-документ и поместил его в обе папки, на которые я ссылался ранее. Вот код:

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

                На снимке экрана показано сравнение того, как он отображается в папке A и в папке B:

                http://farm7.static.flickr.com/6204/6060649566_0b7fd45c3a_z. jpg

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

                Файл HTML представляет собой не что иное, как обычный текст ASCII, но все файлы HTML должны иметь специальное расширение файла, чтобы веб-браузеры могли их распознавать. Это расширение либо .htm, либо .html. Причина, по которой существует два возможных расширения, восходит к ранним дням Интернета. Тогда люди все еще использовали Windows 3.1 и DOS, а расширения файлов Windows 3.1 и DOS могли состоять только из трех букв, следовательно, .htm. Теперь .html является более распространенным расширением. В этом курсе мы будем использовать расширение .html.

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

                1. Откройте Проводник Windows (обычно его можно найти, щелкнув правой кнопкой мыши кнопку "Пуск" и выбрав "Проводник").
                2. Нажмите один раз левой кнопкой мыши на диске C: (или любом другом диске, на который вы будете сохранять файлы), затем перейдите в меню «Файл» проводника Windows и выберите «Создать/Папка». В поле Имя файла введите имя для этого нового каталога. Я называю свою папку xyzlibrary.

                Теперь вы готовы сохранить файл:

                1. Убедитесь, что вы находитесь в окне Блокнота и что созданная вами скелетная веб-страница видна.
                2. Откройте меню "Файл" в Блокноте и выберите "Сохранить".
                3. В появившемся диалоговом окне убедитесь, что поле Искать в: указывает на папку, которую вы создали на предыдущем шаге.
                4. Введите имя файла в поле «Имя файла». Первая страница веб-сайта всегда должна называться index.html, поэтому мы будем называть этот первый файл именно так.
                5. После того, как вы проверите правильность расположения для сохранения и введете index.html в качестве имени файла, нажмите кнопку "Сохранить", чтобы завершить процесс.

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

                Предварительный просмотр файла в Internet Explorer:

                1. Откройте меню "Файл" и выберите "Открыть".
                2. Нажмите кнопку «Обзор» в появившемся диалоговом окне «Открыть» и перейдите в каталог, в котором вы сохранили файл index.html.
                3. Дважды щелкните файл index.html, затем нажмите кнопку "ОК" в диалоговом окне "Открыть".
                4. Ваш файл index.html теперь отображается в Internet Explorer.

                (Большинство браузеров используют аналогичные команды для открытия файла — начните с меню «Файл» и найдите «Открыть страницу» или «Открыть файл».)

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