Предыдущий ролик Следующий ролик  

Видео урок: Анатомия веб-сайта

Основы веб-дизайна

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

Как видите, на моем рабочем столе есть папка под названием "Explore" (Исследование), а в ней находятся файлы небольшого веб-сайта. Кстати сказать, я не храню свои рабочие файлы на рабочем столе. Просто отчасти это самый лучший способ для демонстрации вам примера разработки сайта. Если открыть эту папку, то в ней можно увидеть файлы и папки, и, да, это действительно веб-сайт. Не очень сложный, но все же сайт. Мне хотелось бы обратить ваше внимание на парочку деталей. Во-первых, на самом деле то, что вы видите, - это всего навсего набор файлов и папок. Например, прямо в этой папке расположен файл index.htm. Index.htm - это своего рода домашняя страница любого сайта.

Обычно используется один из файлов: index.htm или default.htm. Я знаю, что многие до сих пор используют файл default.htm, но, наверняка, наиболее популярный из этих двух файлов - index.htm. Если вы разместите index.htm или .php, или .cfm, все зависит от того, какой веб-сервер вы используете... Если вы разместите этот файл в той папке, которая считается корневой... Корневая папка - это папка, в которой размещаются файлы вашего сайта... то этот файл будет домашней страницей этого сайта. Это та страница, которая открывается при переходе на сайт. Хорошо. Обратите внимание, что в этой папке есть и другие файлы, которые мы называем "файлами верхнего уровня".

В нашем случае это файлы mission.htm, tour.htm, resources.htm. А это означает, что они находятся в той же папке, что и файл index.htm. Однако некоторые файлы находятся в подкаталогах. Например, есть папка под названием "resources". Если открыть эту папку, то можно увидеть в ней файлы faq.htm и links.htm. Итак, что же нужно делать со структурой реального сайта? Давайте это выясним. Переместим это окно вправо и рассмотрим сайт explorecalifornia.org. Это сайт, который я несколько лет назад создал для одного из курсов по Dreamweaver.

Это просто симпатичный тестовый сайт. Он все еще доступен онлайн и используется в рамках этого курса в качестве примера. Итак, как я уже упоминал ранее, в нашей папке есть подкаталог с названием "resources", верно? Если щелкнуть на сайте по ссылке "Resources" (Ресурсы), то откроется файл "resources.htm". А этот файл находится прямо в нашей папке. Отлично. Тем не менее, если щелкнуть по ссылке "FAQ" (Часто задаваемые вопросы), то можно заметить, что выполняется переход в каталог "resources", а в нем уже ищется файл faq.htm. Таким образом, если раскрыть эту папку, то можно увидеть взаимосвязь между элементами этого сайта и панелью адреса вверху. То есть здесь отражается структура этого сайта. Опять же, это всего навсего набор файлов и папок. Возможно, вы заметили, что названия некоторых каталогов немного отличаются от остальных. К примеру, названия всех расположенных сверху каталогов начинаются с символа подчеркивания, и располагаются в них CSS-файлы, изображения, видеофайлы и скрипты. Все эти файлы относятся к ресурсам, а это означает, что это не сами веб-сайты, а ресурсы, которые используют эти сайты. Например, в каталоге _css находятся CSS-файлы сайта, в папке _images, как вы уже догадались, - все изображения, отображаемые на страницах сайта.

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

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

Обратите внимание, что здесь есть несколько каталогов и файлов, которые отсутствовали в обсуждаемой нами ранее папке. В этой папке находится своего рода "разобранная по частям" версия сайта. Кроме того, я не единственный преподаватель, вносивший в этот сайт какие-то изменения. Поэтому в этой папке много всякого хлама, от которого, скорее всего, можно просто избавиться. Тем не менее, мне бы очень хотелось, чтобы именно сейчас вы обратили внимание на... прокрутим страницу вниз... вот эти файлы. В этой папке есть файл .htaccess. Есть файлы 400, 401, 403, 404 с расширением .shtml.

Есть вероятность, что при создании совершенно нового сайта с помощью хостинговой компании в этой папке будет находиться страница index.htm, которую впоследствии можно либо удалить, либо переписать, а также целая куча таких файлов, как 400.shtml, 500.shtml, 403.shtml, файл .htaccess и тому подобное. Файл .htaccess - это конфигурационный файл, предназначенный для настройки параметров сервера, например, кэширования или тому подобных вещей. Обычно изменять этот файл не приходится. Но если все же вам нужно внести в него какие-то изменения, то, скорее всего, для этого нужно будет более подробно изучить эту область разработки веб-сайтов.

А если вы не обладаете необходимыми знаниями, то можете просто проанализировать, что представляет собой файл .htaccess, что нужно сделать для того, чтобы его изменить, и какую пользу он может вам принести. Не бойтесь вносить в него изменения. Правда, с другой стороны, изменение этого файла может оказать значительное влияние на производительность вашего сайта. Поэтому вы должны убедиться в том, что все делаете правильно. Хочу обратить ваше внимание вот на эти страницы ошибок. Да, это именно страницы с ошибками. Если я, например, вернусь на страницу с информацией о турах, и попытаюсь просмотреть каталог _images, как мы делали это в предыдущем видео, то мы увидим, что в этот раз индексация отключена, отсутствует. Т.е. по сути, я получил ошибку "403 permission denied" (отказ в доступе). Если вернуться к диспетчеру файлов, то можно увидеть, что в каталоге сайта есть этот файл. То, что мы видим на этой странице, - это содержимое файла, которое используется по умолчанию. Если не вносить изменения в этот файл, то именно это и будут видеть пользователи. Скорее всего, обычно вы видите именно это, поскольку разработчики большинства сайтов не меняют содержимое этих файлов. Но при желании их всегда можно изменить. Можно скачать эти файлы и изменить их таким образом, чтобы они лучше интегрировались в ваш сайт. К примеру, перейдем в раздел "Resources" (Ресурсы) и нажмем на ссылку "Privacy policy" (Политика конфиденциальности).

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

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