Организация сайта

Организация Web- сайта.

Как организовать и хранить различные файлы, которые составляют сайт.

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

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

Ответ : используйте обычные папки, создаваемые с помощью операционной системы компьютера.

Определение:

Web-сайт (Web site) — это набор связанных HTML-документов плюс все изображения, клипы и другие файлы, которые отображаются на страницах сайта.

Определение:

Локальная папка (local folder), ИЛИ локальная корневая папка (local root folder), это папка на персональном компьютере, в которой содержатся все файлы Web-сайта.

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

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

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

Определение:

Структура (structure) Web-сайта — это способ организации файлов в категории и подкатегории.

Внутри локальной корневой папки выполняется дополнительное упорядочивание, которое создает структуру сайта. Будьте аккуратны здесь — в этом смысле структура сайта несколько отличается от структуры HTML-документа. Структура Web-сайта - это способ организации файлов в категории и подкатегории. Она не имеет ничего общего с HTML-тегами или разметкой текстовых файлов.

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

• My Hobbies (Мои увлечения)

• My Favorite Books (Мои любимые книги)

• My Favorite Jokes (Мои любимые шутки)

• About Me (Обо мне)

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

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

Определение:

Уровень (level) папки — это ее положение в иерархии структуры сайта. Папки основных категорий принадлежат верхнему уровню т.е.,находятся непосредственно внутри локальной корневой папки.

Как же называть папки?

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

Для структуры нашего домашнего сайта присивоим папкам следующие имена:

• MY_Hobbies (Увлечения)

• My_ Books (Книги)

• MY _Jokes (Шутки)

• About_ Me (Обо мне). Можно также назвать Aboutme, или просто About

Теперь посмотрим, что происходит. Начав создавать страницы для своего сайта, мы можем достаточно легко догадаться, чему они соответствуют. Мы помещаем страницы о своих увлечениях в папку hobbies (увлечения). Страницы о своих любимых шутках помещаются в папку jokes (шутки). Как видим, все достаточно просто. Если требуется разбить основную категорию на подкатегории, нет проблем.

Создадим подпапки:

• MY_ Hobbies (Увлечения)

• sports (Спорт)

• films (Фильмы)

• computers (Компьютеры)

• games (Игры)

• My_ Books (Книги)

• MY _Jokes (Шутки)

• About_ Me (Обо мне).

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

Для сайта нам необходима еще одна папка — папка изображений. Назовем ее images (изображения).

• MY_ Hobbies (Увлечения)

• sports (Спорт)

• films (Фильмы)

• computers (Компьютеры)

• games (Игры)

• My _Books (Книги)

• MY _Jokes (Шутки)

• About_ Me (Обо мне)

• images(изображения)

Как видите, эта папка находится на верхнем уровне структуры, непосредственно внутри локальной корневой папки. Мы будем использовать папку images (Изображения) для хранения всей нашей графической информации, которая будет присутствать на страницах нашего сайта.

Часто задают такие вопросы:

Папка изображений предназначена для хранения только изображений

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

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

Наконец, для сайта необходима домашняя страница, которая загружается при наборе посетителем в своем браузере вашего интернет-адреса. HTML-документ домашней страницы помещается внутрь локальной корневой папки, рядом с папками основных категорий. Не помещайте домашнюю страницу в свою собственную папку. Страница должна находиться на одном уровне с папкам категорий. Кроме того, убедитесь, что домашней странице присвоено имя index.htm. Если присвоить ей другое имя, браузер может не понять, что эта страничка должна быть домашней.

Суммируя сказанное, типовую структуру сайта можно представить следующим образом:

• Локальная корневая папка

• Документ домашней страницы (index.htm)

• Папка основной категории

• Документ основной категории

• Папка подкатегории

• Документ подкатегории

• Папка изображений

• Файлы изображений

• Файлы клипов

• Звуковые файлы

• Другие файлы

Инструментарий.

Шаблон стандартного HTML-документа:

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

<html>
<head>
<title>3десь располагается название страницы. </ title>
<!--Здесь располагаются теги <meta>-- >
<!--Здесь располагается код JavaScript между тегами <script> -- >
<!--Здесь располагаются таблицы стилей между тегами <style> -- >
</head>
<body>
<!--Здесь располагается тело страницы -- >
</body>
</html>

Распространенные ширины экрана и соответствующие им ширины таблицы при проектировании табличного дизайна.

 

Ширина экрана

Ширина таблицы

Комментарии 

544 пикселов

544 пикселов

Приложение WebTV/MSNTV

640 пикселов

600 пикселов

Абсолютный минимум для большинства приложений

800 пикселов

760 пикселов

Стандартный безопасный размер

1024 пикселов

955 пикселов

Выходящий за рамки стандартного размер

1280 пикселов

1210 пикселов

Не рекомендуется для универсальных сайтов

1600 пикселов

1530 пикселов

Не рекомендуется для универсальных сайтов

 

В меню быстрого доступа

Живая связь по всем вопросам тел. 8- 919- 633- 05-13  Телефон