Файловая структура сайта что это
Сайт состоит из папок и файлов. Как правило, главный файл называется index.html. Расширение .html означает, что в этом файле находится HTML-код. В дальнейшем Вы будете открывать файл index.html в браузере, и браузер по расширению .html будет понимать, что ему нужно обработать именно HTML-код.
Давайте создадим простейшую структуру для нового сайта. Она будет выглядеть так:
Создайте на компьютере (только не на рабочем столе) папку, назовите ее store (переводится "магазин"). В ней создайте файл index.html — для этого создайте текстовый документ и просто полностью переименуйте его в index.html. Теперь в папке store создайте папку css, а в ней создайте файл style.css.
Сразу скажу, что файл index.html здесь главный. Именно его нужно будет потом открыть в браузере. В файле style.css будут находиться CSS-стили, с помощью которых будут заданы цвет для шрифта, размер шрифта, цвет фона, размеры картинок и другие параметры для внешнего оформления сайта. Для того, чтобы эти стили сработали для данного сайта, в index.html будет ссылка на style.css. Таким образом, когда Вы откроете index.html в браузере, Ваш браузер начнет обрабатывать HTML-код и, когда браузер встретит ссылку на style.css, он возьмет из этого style.css все CSS-стили и применит их к сайту.
На данный момент можно сказать, что в index.html будет находиться содержимое: текст, картинки. А в style.css будет находиться всё внешнее оформление: в какой цвет покрасить, какой размер задать и т.д.
Откройте Ваш index.html в редакторе SublimeText и вставьте следующий код:
Посмотрите на этот код. В строке как раз указывается ссылка на style.css (link переводится как "ссылка"). Здесь путь до style.css указывается в атрибуте href . В данном случае "css/style.css" это относительный путь, то есть путь относительно главного файла index.html (по этому пути браузер перейдет из index.html в папку css, а потом благодаря слеш перейдет в сам файл style.css).
То есть еще раз. Когда Вы открываете файл index.html в браузере, браузер начинает обрабатывать HTML-код сверху вниз. Когда он встречает строку , он (браузер) благодаря кусочку кода href="css/style.css" переходит в папку css и находит в ней файл style.css.
Давайте разберем весь вышеприведенный HTML-код. Данный код — это основа основ HTML. То есть весь этот код в обязательном порядке должен содержать любой HTML-файл. Итак, что здесь есть.
Первая строка просто сообщает браузеру, что это HTML-код.
Во второй строке открывается тег . Обратите внимание, что закрывается он в самой последней строке кода — . Именно между тегом и находится ВЕСЬ HTML-код. У тега указан атрибут lang , он равен en . Это сделано для того, чтобы браузер сразу понял, что данная страница сайта на английском языке. Когда вы будете делать русскоязычные сайты, то нужно будет указывать lang="ru".
Где ваш веб-сайт должен располагаться на вашем компьютере?
Когда вы работаете на веб-сайте локально на вашем компьютере, вы должны держать все связанные файлы в одной папке, которая отражает файловую структуру опубликованного веб-сайта на сервере. Эта папка может располагаться где угодно, но вы должны положить её туда, где вы сможете легко её найти, может быть, на ваш рабочий стол, в домашнюю папку или в корень вашего жёсткого диска.
- Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем web-projects (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
- Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её test-site (или как-то более творчески).
Какую структуру должен иметь ваш веб-сайт?
Далее, давайте взглянем на то, какую структуру должен иметь наш тестовый сайт. Наиболее распространённые вещи, присутствующие в любом проекте сайта, которые мы создаём: индексный файл HTML и папки, содержащие изображения, файлы стилей и файлы скриптов. Давайте создадим их сейчас:
- index.html : Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем index.html и сохраните его прямо внутри вашей папки test-site .
- Папка images : Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем images внутри вашей папки test-site .
- Папка styles : Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем styles внутри вашей папки test-site .
- Папка scripts : Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем scripts внутри вашей папки test-site .
Какую базу данных следует использовать?
Сгенерированный код не использует и не содержит в себе какой-либо базы данных. Express может использовать любой движок базы данных, который поддерживается Node (Express не предъявляет каких-либо особых требований к базе данных).
Мы обсудим взаимодействие с базой данных в следующей статье.
Что должно быть сделано?
К настоящему моменту структура вашей папки должна выглядеть примерно так:
В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), HTML также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.
Необходимые знания: | Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок. |
---|---|
Задача: | Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта. |
Запускаем каркас сайта
Сейчас у нас есть готовый каркас проекта. Сайт пока ничего не делает, но его стоит запустить, чтобы убедиться в его работоспособности.
-
Прежде всего установим зависимости (команда install запросит все пакеты зависимостей, указанные в файле package.json).
У нас получилось веб-приложение на базе Express, работающее по адресу localhost:3000.
Примечание: Можно также запустить приложение командой npm start . Переменная DEBUG, указанная в примере, включает логирование в консоль для дальнейшей отладки. Так, при посещении страницы веб-приложения, вы увидите похожий вывод в консоль:
Мини-тест
Планирование простого веб-сайта
Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется Information architecture. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!
- Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц .
- Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?
- Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.
- Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод Card sorting.
- Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.
HTML для структурирования содержимого
Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным CSS вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и использовать правильный элемент для правильной работы.
Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?
Примечание: Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).
В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их функциональности — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как "найти основную навигацию" или "найти основное содержимое". Как мы упоминали ранее в ходе курса, существует ряд последствий неиспользования правильной структуры элементов и семантики для правильной работы.
Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:
Какой движок представлений следует использовать?
Express-generator даёт возможность сконфигурировать несколько популярных движков, включая EJS, Hbs, Pug (Jade), Twig, и Vash, но по умолчанию выбран Jade. Экспресс сразу после установки может поддерживать большое количество и других шаблонизаторов.
Примечание: При желании использовать шаблонизатор, который не поддерживается генератором, просмотрите документацию Using template engines with Express и документацию для нужного шаблонизатора.
Как правило, следует выбрать шаблонизатор, который имеет всю необходимую вам функциональность и обеспечивает вам высокую производительность - так же, как вы выбираете любой другой компонент! Некоторые критерии для сравнения шаблонизаторов:
- Время до получения результата — если ваша команда уже имела дело с шаблонизатором, то, скорее всего, продуктивнее будет использовать этот шаблонизатор. Если нет, тогда следует учесть все относительные сложности изучения кандидатов в шаблонизаторы.
- Популярность и активность — проверьте популярность движка, возможно, у него есть активное сообщество. Очень важно иметь поддержку для движка, если у вас возникнут проблемы в течении жизни веб-сайта.
- Стиль — некоторые шаблонизаторы используют особую разметку для отображения вставленного контента внутри "обычного" HTML, а другие строят HTML, используя специальный синтаксис (например, используя отступы или блочные имена).
- Производительность и время интерпретации.
- Особенности — следует выбирать движок с учётом таких особенностей:
- Наследование макета: позволяет определить базовый шаблон и затем наследовать только те части, которые отличаются для конкретной страницы. Это, как правило, лучший подход, чем создание шаблонов путём включения нескольких необходимых компонентов или создания шаблона с нуля каждый раз.
- Поддержка «Include»: позволяет создавать шаблоны, включая другие шаблоны.
- Краткий синтаксис управления переменными и циклами.
- Возможность фильтровать значения переменных на уровне шаблона (например, делать переменные в верхнем регистре или форматировать значение даты).
- Возможность создавать выходные форматы, отличные от HTML (например, JSON или XML).
- Поддержка асинхронных операций и потоковой передачи.
- Возможность использования как на клиенте, так и на сервере. Возможность применения движка шаблона на клиенте позволяет обслуживать данные и выполнять все действия или их большую часть на стороне клиента.
Совет: В интернете множество ресурсов, которые помогут сравнить различные варианты!
Для этого проекта мы используем шаблонизатор Pug (в прошлом назывался Jade) -- один из популярнейших Express/JavaScript шаблонизаторов, который поддерживается в Express-generator "из коробки".
Самостоятельная работа: создайте свою собственную карту сайта
Применить наш метод к своему сайту. О чем он будет?
Примечание: Сохраните свой код, он вам ещё понадобится.
Созданный проект
Давайте посмотрим на созданный проект.
Перенос строки и горизонтальный разделитель
Два элемента, которые вы будете периодически использовать или захотите узнать о них: и :
создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:Без элемента
абзац разместится в одну длинную линию (как было сказано ранее, HTML игнорирует переносы строк), а с ним в коде — разметка будет выглядеть следующим образом:Жила-была девчушка Нелл,
Любившая писать HTML:
Её семантика ужасна была —
Она и сама прочитать ничего не могла.
создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:Будет выглядеть примерно так:
Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.
Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".
Активное обучение: исследование кода для нашего примера
Наш пример, представленный выше, содержит следующий код (Вы также можете найти пример в нашем репозитории Github). Мы хотели бы, чтобы вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.
Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут вам в этом. Мы не просим вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождём, пока вы не начнёте изучать CSS-макет как часть темы CSS.
Что такое тег в HTML
Название тега — это только первое слово после открывающей скобки < . То есть в случае с тег называется html , а lang — это атрибут тега, en — это значение данного атрибута. Посмотрите внимательно на картинку:
package.json
Файл package.json указывает зависимости приложения и содержит другие данные:
Зависимости включают пакет express и пакет для выбранного движка представления (pug). Кроме того, указаны пакеты, полезные во многих веб-приложениях:
Раздел "scripts" определяет скрипт" start", выполняемый при запуске сервера командой npm start . Можно видеть, что самом деле выполняется команда node ./bin/www. Кроме того, определяется script "devstart", который вызывается командой npm run devstart . Запускается тот же файл ./bin/www ,но командой nodemon вместо node.
В данном уроке вы узнали
.html — расширение, по которому браузер "понимает", что в файле находится HTML-код.
head — тег для служебной информации сайта.
body — тег для всего содержимого сайта.
title — тег для заголовка страницы сайта.
href — это атрибут, в котором указывается ссылка на файл или другой сайт. Расшифровывается как hyper-reference, что с английского переводится ка "гипер-ссылка". Атрибут href может быть не только у тега link.
Это был последний бесплатный урок. Чтобы получить доступ ко всем урокам зарегистрируйтесь и оплатите курс в личном кабинете. Успевайте сегодня приобрести по предновогодней скидке.
Этот урок является завершающим (для удобства все ранее опубликованные уроки практикума размещены на CD, прилагаемом к журналу. — Прим. ред.).
- На этом уроке мы с вами на конкретном примере создадим тестовый сайт, взяв за основу страницу, которая была приведена в качестве примера в уроке 5 (см. "Мир ПК", №5/04) при изучении CSS (рис. 1).
- Разработаем для него файловую структуру.
- Оформим все страницы в едином стиле: единая навигация, расположение элементов на экране, заголовок страницы, содержимое страницы. Для этого создадим шаблон страницы.
- Используем для оформления сайта единую стилевую таблицу (см. урок "Мир ПК", № 5/04).
- Научимся подключать навигацию и все повторяющиеся элементы страниц, используя технологию SSI и директиву include.
- Настроим веб-сервер.
Основы проектирования сайта
При создании сайта уже на первом этапе перед вами встанет сразу несколько задач. Перечислим некоторые из них:
1. Продумать логическую структуру сайта — его содержимое, разделы, систему навигации. Не делайте лишних — «проходных» — страниц.
Грамотная структура, понятная система навигации позволят посетителям быстро получить представленную информацию.
На практике это как раз и оказывается одной из самых сложных задач, особенно в случае достаточно больших сайтов. Как правило, пользователю Всемирной паутины нужна именно информация, а не красивые картинки, и чем скорее, тем лучше. Время — деньги! И в прямом, и в переносном смысле. Ведь многие за пользование Интернетом платят из своего кармана.
Если вам удалось это сделать, то посетитель станет вашим. Он вернется к вам на сайт еще не один раз и, возможно, порекомендует ресурс кому-нибудь из своих знакомых или коллег.
2. Создать интересный дизайн. Хороший дизайн — это отнюдь не красивые картинки. Сайт может быть сделан почти без графических изображений.
Это, во-первых, удобное расположение информации и навигации на странице. Во-вторых, подбор цветов при оформлении сайта. Не выбирайте яркие цвета — смотреть на подобные страницы долго невозможно. По той же причине не используйте много анимированных изображений. В-третьих, подберите удобный для чтения с экрана шрифт, не используйте много различных шрифтов на странице, один-два — вполне достаточно. Избегайте экзотических шрифтов, скорее всего, у пользователя на компьютере их нет. В-четвертых, не перегружайте страницы картинками, ваша задача создать страницы, которые максимально быстро увидит пользователь. Следуйте девизу: чем страница легче, тем лучше! (Не рекомендуется делать странички более 50 Кбайт вместе с графикой. Конечно, для отдельных страниц возможны исключения.) Как известно, наибольший «вес» страницам придают именно картинки. Вспомните, как вы посещали те или иные ресурсы. Щелкнули по ссылке и. долго ждете, когда появится содержимое страницы или картинка. И какова была ваша реакция? Скорее всего раздражение.
3. Конечно, технически все это реализовать.
4. По возможности минимизировать затраты времени на создание и дальнейшую поддержку сайта. Очень важно, чтобы впоследствии легко было добавлять новые разделы и пополнять имеющиеся. Уже на начальном этапе необходимо разработать технологию по созданию и дальнейшей поддержке сайта. Конечно, все моменты сразу не предусмотришь, как правило, это приходит с опытом. Но некоторые из них мы рассмотрим на этом уроке.
На рис.1 представлена веб-страница. Предположим, что это «набросок» сайта какой-либо фирмы. Как видно из рис. 1, изменяется только правая часть, где будет размещаться содержимое страницы. Остальные — верхняя часть, левая (навигация) и нижняя — остаются неизменными, они одинаковы для всех страниц сайта.
Такая компоновка удобна для посетителей. Используя левую, навигационную часть, можно перемещаться по страницам, при этом навигация всегда будет оставаться в одном и том же месте — слева.
Из этой страницы мы создадим шаблон и из него будем формировать все остальные страницы сайта: изменяя правую часть (размещая там содержимое страницы), будем сохранять файл с разными именами и в разных каталогах. Но сначала разработаем для нашего сайта файловую структуру.
Файловая структура сайта
Грамотная и продуманная организация файловой структуры сайта позволит сэкономить время на его дальнейшей поддержке и сопровождении. Кроме того, она поможет легко ориентироваться в большом количестве файлов, из которых состоит веб-сайт. Особенно это важно при больших по объему сайтах или в тех случаях, когда сайт не очень большой (как в нашем примере), но вы планируете его дальнейшее развитие и добавление новых разделов.
- Первая (стартовая) страница сайта получает, как правило, имя: index.html (для веб-сервера Apache); default.htm (для Microsoft IIS).
- Остальные файлы именуются произвольным образом, но рекомендуется делать это в соответствии с назначением документа или его содержимым, например aboutme. html и mycat.html. Давайте папкам и файлам осмысленные названия (не следует давать имена типа 12345.html).
- Именование каталогов и файлов допускается только в основной английской кодировке.
- Картинки лучше размещать в отдельный каталог (/pictures/ или /images/). Если графики много, то внутри этого каталога создайте подкаталоги.
Рекомендуемая для нашего случая файловая структура сайта представлена на рис. 2.
Давайте подробнее его рассмотрим:
И еще несколько рекомендаций по именованию каталогов и файлов.
- Именовать файлы и каталоги рекомендуется в нижнем регистре.
Имеются в виду отличия в именовании файлов в разных операционных системах. Они, например Unix, чувствительны к регистру букв в именах файлов и каталогов. В Windows регистр не имеет значения (About. html и about.html — для Windows один и тот же файл. Для ОС Unix это два разных файла).
На практике ошибки часто возникают при переносе файлов с локальной машины, где установлена ОС Windows, на сервер, где установлена Unix.
Предположим, сайт компании, в которой вы работаете, находится у провайдера. Как правило (наиболее частый вариант), там установлены ОС Unix и веб-сервер Apache.
На своем персональном компьютере вы имеете копию сайта. Вероятнее всего, у вас установлена ОС Windows. Сделав нужные изменения и дополнения на локальной версии, вы переносите файлы на рабочий веб-сайт — к провайдеру. Тут вас и подстерегает опасность. Казалось бы, все работает. Вы все проверили и протестировали. Почему же после переноса файлов на сайте не видны некоторые картинки, не работают ссылки?
Совет. Внимательно следите за тем, чтобы регистр в названиях файлов и в ссылках, которые идут на эти файлы, совпадал. Например, если файл называется About.html, то ссылка на него О компании. Это касается и картинок, и всех случаев, когда указывается путь к файлу.
- Продумать единый стиль в именовании файлов. Пример: pic_s.jpg - картинка небольшого размера (small) и pic_b.jpg. - это же изображение большего размера (big). Обычно с маленького изображения делается гипертекстовая ссылка на большое для более детального просмотра.
Теперь, если понадобится добавить новый раздел, создаете отдельный каталог с названием этого раздела на английском языке (или в транслитерации — русские слова латинскими буквами), открываете шаблон страниц, размещаете в него ее содержимое и сохраняете файл на диске в заранее созданном каталоге.
Понятие корня сервера и стартовой страницы
Перед изучением технологии SSI познакомимся с двумя очень важными понятиями: корень сервера и стартовая страница.
Корневой каталог или корень сервера. Обозначается / (косая черта, прямой слэш). Это каталог на диске компьютера, внутри которого находится все содержимое вашего сайта — файловая структура.
Получив такой запрос, сервер в корневом каталоге ищет каталог webschool и в нем файл webschool.htm.
Корневой каталог определяется в настройках сервера. По умолчанию в IIS это C:Inetpubwwwroot, в Apache, если вы устанавливали по умолчанию, — C:Program FilesApache GroupApachehtdocs (под управлением ОС Windows).
Вы можете настроить корень сервера на любой каталог на диске, конечно, при условии, что имеете на это полномочия администратора.
Какая именно страница — определяется в настройках сервера?
По умолчанию в IIS это default.htm, в Apache — index.html. Этот файл часто называют индексным.
Исходя из вышесказанного, я рекомендую вам входной файл в каталоге называть именем индексного файла. Например, если на сайте есть раздел о компании, то логично назвать каталог /aboutcompany/ и стартовую страницу этого раздела — index.html в случае Apache и default.htm в случае IIS.
Включения на стороне сервера. Директива include и создание шаблона страницы
Начинаем изучать технологию Server Side Includes (SSI). SSI — одна из первых серверных технологий. На уроке 1 мы познакомились с понятиями статичной и динамичной страницы. Статичная страница состоит из «чистых» html-кодов. Мы с вами уже научились создавать такие страницы.
Директивы могут располагаться в любых местах страницы. И внутри ячейки таблицы, и в разделе
, и в других. Соответственно именно в месте, где стоит директива, сервер вставит результат ее выполнения.
Перед тем как начинать рассматривать синтаксис технологии SSI, настроим наш веб-сервер:
1) корень сервера;
2) поддержку SSI для файлов с расширениями .html и .htm. То есть файлы с этими расширениями перед отправкой клиенту будут проверяться сервером на наличие указаний (директив), которые сервер должен выполнять.Настройка Apache-сервера
Совет. При изменениях конфигурационного файла всегда сначала комментируйте строку, которую нужно изменить, и ниже добавляйте свою. Это позволит вам вернуться назад в случае неверных изменений.
Hастройка корневого каталога узла (/)
Обратите внимание на прямые слэши (в отличие от обратных в ОС Windows).
Внутри каталога, который указывается в настройках сервера, вы и будете создавать файловую структуру своего сайта.
Настройка поддержки SSI
Поддержка SSI установлена для файлов с расширениями
.html и .htm. Добавлен тип документа AddType text/html .html (htm). Директива AddHandler активизирует обработчик серверных включений server-parsed.
И еще одна настройка. Найдите строку:
Options Indexes FollowSymLinks MultiViews
В Options добавляем через пробел Includes. Итоговая строка должна выглядеть следующим образом:
Options Indexes FollowSymLinks MultiViews Includes
Важно! Чтобы изменения вступили в силу, сервер нужно перестартовать.
Если вы все сделали корректно, то сервер успешно перестартует. В случае ошибок проверьте синтаксис, убедитесь, что верно указан корневой каталог. Возможно, забыли его предварительно создать на диске.
Теперь наш сервер готов к работе с серверными включениями.
Если же вы в качестве рабочего сервера выбираете IIS, то с процессом его установки и настройки можете познакомиться в Приложении 1 в конце статьи.
Синтаксис SSI
Правда, немного напоминает комментарии в языке HTML?
Несколько замечаний по поводу синтаксиса:
. Это важно именно для сервера Apache (например, сервер IIS работает и с пробелом, и без него).
Базовые директивы SSI: директива include
Самой распространенной директивой является include — она вставляет содержимое одного документа в другой.
Здесь include — название директивы; virtual — название атрибута; /ssi/top.html — путь к файлу от корня сервера, содержимое которого вставляется в html-страницу.
Директива include может иметь атрибуты file или virtual. В данном примере в документ, где находится директива include, будет вставлено содержимое файла top.html, который находится в папке SSI. Если вы используете атрибут virtual, то его значением является путь к файлу от корня сервера. Указание путей от корня сервера зачастую является более предпочтительным (см. врезку «Определение пути. »).
Директив include может быть несколько в одном документе.
На практике в подключаемые файлы размещают HTML-фрагменты, которые повторяются на нескольких или на всех страницах сайта. Например, навигацию по сайту, шапку, нижнюю часть, рекламные вставки.
На рис. 7 приведен пример использования директивы include для создания шаблона документа. Исходная страница показана на рис. 1.
Как говорилось выше, все страницы сайта имеют единое оформление. Соответственно для того, чтобы создать шаблон страницы, мы оставляем на ней только уникальные для нее элементы: название страницы
Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге загрузите их на сервер. В статье Работа с файлами обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.
Файл app.js
Этот файл создаёт объект приложения express (с именем app , по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведённом ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:
Рассмотрим детали файла app.js. Сначала при помощи require(. ) выполняется импорт некоторых полезных библиотек node: express, serve-favicon, morgan, cookie-parse, body-parser (они ранее были загружены для нашего приложения командой npm install), а также path из основной библиотеки node (применяется для разбора путей каталогов и файлов).
Затем require запрашивает модули из каталога путей route. Эти модули и файлы содержат код для обработки конкретного набора соответствующих путей (URL маршрутов). Если мы расширим каркас приложения, например, чтобы получить список книг библиотеки, нам следует добавить новый файл для обработки пути, связанного с книгами.
Примечание: Здесь мы только импортируем модули. В действительности эти пути ещё не используются — это произойдёт в файле несколько позже.
Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаём значение 'view', указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаём значение движка 'view engine', указывая на библиотеку шаблона (у нас — "pug").
Теперь, когда промежуточные библиотеки настроены, мы добавляем (импортированный ранее) код обработки путей в цепочку обработки запросов. Импортированный код будет задавать отдельные пути для разных частей сайта:
Примечание: . пути, указанные выше ('/' и ' /users' ) рассматриваются как префиксы путей, определённых в импортированных файлах. Так, например, если импортированный модуль users определяет путь для /profile, для доступа следует указать /users/profile. Мы поговорим подробнее о путях в последующей статье.
Объект app приложения Express теперь полностью настроен. Остался последний шаг - добавить его к экспортируемым элементам модуля (это позволит импортировать его в файле /bin/www).
Итоги
Сейчас создан каркас проекта Local Library. Мы проверили, что он запускается с использованием Node. Но главное, что вы поняли структуру проекта, и знаете, где и как добавить пути и представления для нашей локальной библиотеки.
Пути (Routes)
Файл путей /routes/users.js приведён ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задаётся путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.
Стоит отметить, что колбэк-функция имеет третий аргумент - ' next ', т. е. является не простой колбэк-функцией, а колбэк-функцией промежуточного модуля. Пока третий аргумент не используется, но будет полезен в дальнейшем, если мы захотим создать несколько обработчиков пути '/' .
Какие шаблонизаторы CSS следует использовать?
Express Application Generator позволяет создавать проекты, настроенные для применения шаблонизаторов CSS: LESS, SASS, Compass, Stylus.
Примечание: простой CSS имеет некоторые ограничения, затрудняющие выполнение задач. Шаблонизаторы CSS позволяют использовать более эффективный подход для создании таблиц стилей CSS, но требуют компиляции файлов таблиц стилей в стандартный CSS для применения в браузере.
Как и в случае с шаблонизаторами сайта, следует применять шаблонизатор, обеспечивающий высокую производительность работы. В этом проекте мы используем обычный CSS (по умолчанию), поскольку простота наших требований к CSS не оправдает применение чего-то более сложного.
Заключение
Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.
Эта вторая статья в нашем учебнике Express показывает, как создать каркас проекта веб-сайта, который позже можно будет заполнить с помощью путей сайта, шаблонов представлений и обращений к базе данных.
Необходимые знания: Установить среду разработки Node. Просмотреть учебник Express. Задача: Научиться запускать свои проекты используя Express Application Generator. Создание проекта
Разрабатывая пример - приложение Local Library, мы построим проект с именем express-locallibrary-tutorial. Используем библиотеку шаблонов Pug, а движок CSS применять не будем.
Выберем место для нового проекта — каталог express-locallibrary-tutorial - и выполним команду:
Будет создан каталог express-locallibrary-tutorial и выведен список созданных внутри каталога проектных файлов .
После списка файлов генератор выведет инструкции для установки зависимостей (указанных в файле package.json) и запуска приложения (инструкции предназначены для Windows; для Linux/Mac OS X они могут слегка отличаться).
Файловые пути
Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного 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, вы всё равно должны использовать обычные слеши в вашем коде.
Применение генератора приложений
Вы уже должны были установить express-generator , читая статью установка среды разработки Node. Напомним, что генератор установлен с помощью менеджера пакетов NPM, при выполнении команды:
E xpress-generator имеет ряд параметров, которые можно увидеть, выполнив команду express --help (или express -h):
Команда express создаст проект в текущем каталоге с использованием (устаревшего) движка представления Jade и обычного CSS. Если указать express name , проект будет создан в подкаталоге name текущего каталога.
Можно выбрать движок представления (шаблон), используя -- view; параметр -- css позволяет выбрать движок для создания CSS.
Примечание: Другие опции ( --hogan , --ejs , --hbs и пр.) для выбора шаблонизатора устарели. Используйте --view (или -v )!
Представления (шаблоны)
Файлы преставлений (шаблонов) хранятся в каталоге /views (это указано в app.js ) и имеют расширение .pug. Метод Response.render() выполняет указанный шаблон, передавая объекту значение именованной переменной, и затем посылает результат как ответ. В коде из /routes/index.js (приводится ниже) можно увидеть, что роут отвечает, используя шаблон "index" с переданным значением переменной "title" из шаблона.
Шаблон для пути '/' приведён ниже (файл index.pug). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением 'Express' помещена в определённое место шаблона.
Обеспечиваем
перезапуск сервера при изменении файловЛюбые изменения, внесённые на веб-сайт Express, не будут отображаться до перезапуска сервера. Остановка (Ctrl-C) и перезапуск сервера каждый раз после внесения изменений быстро становится раздражающей, поэтому стоит автоматизировать перезапуск.
Одно из самых простых средств для этого --
nodemon. Его обычно устанавливают глобально (так как это "инструмент"), но сейчас мы установим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):Если вы предпочитаете установить nodemon глобально, не только для этого проекта, надо выполнить команду
В файле package.json проекта появится новый раздел с этой зависимостью (на вашей машине номер версии nodemon может быть другим) :
Поскольку nodemon не установлен глобально, его нельзя запустить из командной строки (пока мы не добавим его в путь), но его можно вызвать из сценария NPM, так как NPM знает все об установленных пакетах. Раздел scripts в файле package.json исходно будет содержать одну строку, которая начинается с "start" . Обновите его, поставив запятую в конце строки, и добавьте строку "devstart", показанную ниже:
Теперь можно запустить сервер почти так же, как и ранее, но командой npm run devstart:
Примечание: Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя rs в командной строке). Вам всё равно придётся обновить страницу в браузере .
Теперь мы должны выполнять команду " npm run " а не просто npm start , поскольку "start", это, по сути, команда NPM, сопоставленная сценарию в файле package.json. Можно заменить команду в сценарии "start", но, так как мы хотим использовать nodemon только во время разработки, разумно создать новую команду сценария.
Структура каталогов
Далее файлы описаны более подробно.
Теги html, head и body
Непосредственно внутри могут быть только 2 тега — это head и body . Все остальные теги должны находится уже либо внутри head, либо внутри body.
В head находится только служебная информация, которая никак не отобразится на самом сайте. В head есть только 2 тега, которые отобразятся в браузере, но не на самом сайте, а на вкладке:
Эти 2 тега — это картинка, которая называется favicon (фавикон), и заголовок страницы. Про фавикон я расскажу позже. А заголовок страницы в нашем коде указан в теге title . В нашем случае этот заголовок — Store.
Еще в есть тег . Он указывает, что кодировка сайта — utf-8. Об этом можете не задумываться, а просто указывать именно эту кодировку в каждой новой верстке. Раньше были различные кодировки, теперь всегда нужно указывать utf-8.
Также, в head есть тег link со ссылкой на style.css, про который Вы уже знаете.
Тег body служит для того, чтобы помещать в него всё, что нужно отобразить на сайте (тексты, картинки и т.д.).
Теперь, находясь в Sublime Text, нажмите на клавиатуре Ctrl+S, чтобы сохранить изменения в index.html.
На этом про структуру сайта и структуру HTML всё. Переходите к следующему уроку, где Вы уже начнете верстать и познакомитесь с CSS. Следующий урок —"Верстка шапки".
Обзор
В этой статье показано, как создать каркас сайта с помощью средства Express Application Generator. Каркас затем можно будет заполнить с помощью путей сайта, шаблонов/представлений и обращений к базе данных. Мы используем это средство для создания основы нашего сайта Local Library. К основе будет добавлен код, необходимый сайту. Создание каркаса чрезвычайно просто -- требуется только вызвать генератор в командной строке, указав имя нового проекта, дополнительно можно указать также движок шаблона сайта и генератор CSS.
Далее показано, как вызвать генератор приложений, и даётся небольшое пояснение различных вариантов представлений и CSS. Мы поясним структуру каркаса веб-сайта. В конце мы покажем, как запустить веб-сайт, чтобы убедиться, что он работает.
Замечание: Express Application Generator — не единственный генератор Express-приложений, и созданный проект --не единственный жизнеспособный способ организации ваших файлов и каталогов. Однако созданный сайт имеет модульную структуру, которую легко понять и расширить. О минимальном Express приложении смотрите Hello world example в документации Express.
Несемантические обёртки
Иногда вы будете сталкиваться с ситуацией, когда вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, CSS или JavaScript. Для таких случаев в HTML есть элементы и . Вам следует использовать их с подходящим значением атрибута class или id , чтобы можно было легко получить к ним доступ.
В этом примере примечание редактора просто сообщает дополнительные пожелания режиссёру пьесы. В нем нет особого семантического значения. Для слабовидящих пользователей, возможно, примечание будет отделено от основного содержимого с помощью CSS.
Ему не подходит , поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и , т. к. это не часть основного содержимого страницы. Поэтому подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.
Внимание: div настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе вам будет трудно обновлять и поддерживать ваши документы.
Файл www
Файл /bin/www – это входная точка приложения. Сначала в файле создаётся объект основного приложения, расположенного в app.js — выполняется app= require(./ app ).
Примечание: require() -- это глобальная функция node для импорта модулей в текущий файл. Для модуля app.js указан относительный путь, а расширение файла по умолчанию (.js) опущено.
Подробнее об элементах HTML макета
Полезно понять общий смысл всех структурных элементов HTML — это то, над чем вы будете работать постепенно, когда начнёте получать больше опыта с веб-разработкой. Вы можете ознакомиться с деталями, прочитав статью HTML-элементы. Пока что это основные определения, которые вы должны попытаться понять:
-
предназначен для содержимого, уникального для этой страницы. Используйте только один раз на странице и размещайте прямо внутри . В идеале он не должен быть вложен в другие элементы. окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге). подобен , но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить на несколько или, наоборот, на несколько . содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.). представляет собой группу вводного содержимого. Если он дочерний элемент , то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент или , то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings). содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию. представляет собой группу конечного контента для страницы.
Небольшое отступление о регистре и пробелах
Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:
- Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в test-site/MyImage.jpg , а затем в другом файле вы пытаетесь вызвать изображение как test-site/myimage.jpg , это может не сработать.
- Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: my-file.html лучше чем my_file.html .
Говоря простым языком, вы должны использовать дефис для имён файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчёркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймёте, что вы делаете. Так в будущем вы столкнётесь с меньшим количеством проблем.
Основные составляющие документа
Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:
Заголовок (колонтитул) Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице. Навигационное меню Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана. Основное содержимое Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице! Боковая панель Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему. Нижний колонтитул (футер) Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.
"Типичный веб-сайт" может быть структурирован примерно так:
Читайте также: