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

Создание ссылок

• Виды ссылок
• Переходы внутри документа
• Переходы внутри сайта
• Переходы за пределы сайта
• Висячие ссылки

Виды ссылок

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

• Внутридокументные ссылки. Если документ достаточно длинный, вы можете сделать небольшое оглавление в начале документа, при клике мышкой на любой пункт которого вы тут же перейдете к соответствующему разделу документа. Именно так построено оглавление к этой статье. Эти переходы исключительно быстры, поскольку не требуют перезагрузки документа.
• Ссылки внутри сайта. Разумеется вы не можете разместить весь свой сайт в одном документе и организовать навигацию по нему в виде внутридокументных ссылок. Обычно организуется дерево документов сайта и они связываются между собой. Клик на ссылку вызывает загрузку нового документа в броузер.
• Внешние ссылки. Этот клик уведет пользователя с вашего сайта в совершенно другое место Сети.
• Висячие или сломанные ссылки. Один из самых неприятных моментов в построении сайта, когда пользователь щелкает на ссылку, а она никуда не ведет и пользователь получает сообщение об ошибке. Если таких ссылок много, пользователь очень скоро покинет ваш сайт.

Рассмотрим теперь каждую из этих категорий отдельно.

Переходы внутри документа

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

Для создания перехода внутри документа необходимо последовательно выполнить два шага.

Первый - установить якорь - метку внутри текста, которая будет обозначать начало блока, к которому нужно будет перейти. Для этого установите курсор в нужную позицию текста и выберите в меню Insert- Invisible Tags -Named Anchor. Можно просто нажать Ctrl-Alt-A. В появившемсе окне в поле Anchor Name введите имя якоря. Имя должно начинаться с буквы и не содержать символов пунктуации, специальных символов или пробелов. Лучше вводите имена английскими буквами и цифрами - меньше будет проблем с совместимостью различнных броузеров. Нажмите ОК. В том месте, где был курсор, появится золотистая пиктограммка с изображением якоря. Щелкните на ней курсором и вызовите панель свойств объекта (как это сделать см предыдущие выпуски курса). На панели будет один-единственный параметр - имя якоря. Вы всегда можете изменить это имя пользуясь этой панелью. Настройте теперь окно так, что бы вы могли видеть и изображение документа, и его код. Если вы в нижней части окна щелкните на якорь, то в верхней будет выделен html-тег, который описывает этот якорь. Это будет что-то вроде <a name="types"></a>, где types - имя якоря, который я ввел для раздела "Виды ссылок" в этой статье. У вас будет то имя, которое вы ввели сами. (Я рекомендую вам завести для себя небольшой справочник, в котором вы будете отмечать значение тех тегов, которые вы встречаете у себя в работе. Это здорово поможет вам позже.)

Теперь мы можем создать переход на наш якорь. Предположим ваша страничка имеет структуру, сходную с этой статьей: вверху идет оглавление, ниже текст, разбитый на блоки. Начало каждого блока отмечено якорем. Выделите пункт оглавления (в моем примере я выделил пункт Виды ссылок). Теперь вызовите панель свойств объекта и в поле Link введите знак #, а после него без пробела имя вашей ссылки. В моем случае я ввел #types. Этот метод прост, но заставит вас запоминать или записывать все якоря в документе. Можно использовать визуальный подход к этому делу. Выделите мышкой другой пункт оглавления документа. Теперь внимательно взгляните на панель свойств. Рядом с полем Link там есть значек в виде прицела. Захватите его мышкой и тащите острие появившейся стрелки на якорь блока, соответствующего пункту вашего оглавления. Отпустите кнопку мышки. В поле Link появится имя вашего якоря. Ничего страшного, если документ большой - этот указатель будет прокручивать документ в нужном направлении.

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

Теперь вернемся к окну документов в Dreaweaver-е. Поставьте курсор внутрь ссылки. Взгляните теперь на ту часть окна, где находится html-код вашей страницы. Если вы не форматировали оформление текста, то вы увидите строку вроде этой:
<a href="#types">Виды ссылок</a>
Здесь вы видите уже знакомый нам тег <a></a>, но в другой форме. Параметр href в нем означает куда должен быть выполнен переход по этой ссылке, в данном случае на якорь #types. Между <a> и </a> стоит текст ссылки - вот та самая синяя и подчеркнутая фраза, которая будет показана пользователю.

А теперь немного о пользе знания html-кода. Dreamweaver этого не делает, но вы можете чуть чуть подправить код вручную. Измените код тега но образцу:
<a href="#types" title="Раздел дает классификацию ссылок">Виды ссылок</a>
Теперь, если у вас основной броузер Internet Explorer, нажмите F12. Наведите курсор на мышку - и вы увидите краткое описание ссылки, которое вы дали в параметре title. К сожалению этот фокус не проходит в Netscape Navigator - он не понимает параметра title в теге <a>. Но этот параметр и не мешает. (По последним сообщениям Netscape проиграл холодную войну Internet Explorer-у, и теперь последним будет пользоваться все большее количество пользователей).

Переходы внури сайта

Все это хорошо, но ваш сайт состоит не из одного документа. Давайте попробуем спроектировать ваш сайт. Вернемся к окну дерева сайта. Как правило в корневом каталоге должен быть документ с именем index.html. Когда пользователь обращается к вашему сайту по имени, сервер пытается найти именно этот файл, и в случае успеха вернет его пользователю. Если такой файл отсутствует, сервер в большинстве случаев вернет пользователю страничку со списком всех ваших папок и документов. Таким образом - индексный файл - это то, с чего пользователь начнет обзор вашего сайта. На этой страничке располагаются ссылки на другие документы вашего сайта. Нажимая на них, пользователь может перемещаться по вашему сайту. Я сейчас не стану обсуждать с вами проблемы построения правильной навигации - это тема отдельного цикла статей. Вместо этого дам несколько рекомендаций по организации файлов на сайте. Во-первых, разделите свой сайт на лочические части, для каждой создайте отдельную директорию. Например, будет правильным форум выделить как отдельную часть. Все файлы, касающиеся данного раздела, храните в этой директории. Каждая директория должна иметь файл index.html - иначе пользователю будет выдан список файлов; не стоит показывать клиенту свою кухню. Кроме того, в каждом разделе стоит сделать директорию для ресурсов - картинок, анимаций, звуков и прочей мультимедии. Это позволит вам держать рабочее место в порядке, не загромождая множеством файлов структуру документов. Не стоит создавать слишком большую глубину вложенности папок - больше четырех ярусов совершенно вас запутает. Создавайте дерево скорее широкое, чем глубокое. Между прочим, Dreamweaver насоздает вам папок с именем _notes. Не стоит их удалять.

Итак, продумав структуру сайта мы можем продолжить работу. Если вы открыли тестовый проект, как я рекомендовал в одной из предыдущей статей, у вас в корневой директории есть папка text в которой есть по крайней мере один текстовый файл - тот над которым мы работали в начале статьи. В этом файле разбросано несколько якорей. Теперь перейдем в корневую директорию сайта и создадим в ней файл index.html. В этом файле укажем название нашего текста (в моем случае Создание ссылок), а ниже, используя к примеру форматированный список, оглавление документа. Быстро это можно сделать так - откройте оба файла - индексный и с текстом, в тексте выделите заголовок и скопируйте его (Ctrl-C). Перейдите в окно индексного файла и вставьте выделенный текст (Ctrl-V). То же сделайте и с оглавлением. В индексном файле выделите строки с оглавлением и на панели свойств объекта щелкните на кнопку списка. Это все.

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

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

Способ второй. В индексном файле выделите текст ссылки и нажмите на маленькое изображение папки рядом с полем Link на панели свойств. В открывшемся диалоге выберите файл, на который должен быть выполнен переход. Обратите внимание на поле Relative To. Это поле показывает, относительно документа или относительно корня сайта будет создана ссылка. Сейчас я не буду объяснять тонкости различия этих двух вариантов. Для начала рекомендую простое правило - для документов в одном разделе сайта используйте ссылки относительно документа. Для ссылок в другой раздел сайта используйте ссылки относительно корня сайта.

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

А как быть в том случае, если вам нужно попасть не в начало текстового файла, а в какой-то его раздел? Очень просто. Откройте окна индекса и файла с текстом, расположив их рядом. В файле с текстом прокрутите содержимое окна так, что бы был виден якорь нужного раздела текста. Перейдите в окно индекса. Выделите нужный пункт оглавления и стрелочкой с панели свойств укажите на нужный якорь в текстовом окне. Ссылка будет создана и спозиционирована на выбранный вами якорь.

И в заключение одна тонкость. Когда вы кликаете на ссылку, которая ссылается на другой документ, то этот документ по умолчанию грузится в это же окно броузера. Можно сделать так, что при клике на ссылке будет создано новое окно и туда будет загружен документ. Сравните эту ссылку и эту. Открыть новое окно очень просто. Создайте ссылку на документ, как было указано выше. В поле Target на панели свойств объекта выберите _blank. Этого пока будет достаточно. Позже я покажу, как управлять создаваемым окном.

Переходы за пределы сайта

Что бы перейти на документ, который расположен не у вас на сайте, а где-нибудь в сети, вам придется вручную прописать адрес этого документа в сети. Давайте попробуем сделать такую ссылку.

Где-нибудь на индексной страничке тестового проекта напишите фразу: "Школа Веб". Выделите ее и в поле Link панели свойств пропишите: http://school.sourex.com/web/ Загрузите по F12 эту страничку в броузер и проверьте ссылку. Я, между прочим, буду польщен, если вы поставите эту ссылку на какой-нибудь страничке своего сайта ;). Только для подобных ссылок рекомендую применять вот тот самый фокус с новым окном - надеюсь понятно почему?

Проще всего такие ссылки создавать таким образом. Откройте броузером тот документ в интернете, ссылку на который вы хотите сделать. Когда документ загрузится, скопируйте адрес из броузера в поле Link вашей ссылки. Быстро и удобно.

Висячие ссылки.

Как бы вы не старались проверять ссылки на своем сайте, у вас время от времени будут появляться ссылки, которые никуда не ведут. Каюсь, и я грешен. Легко управлять сайтом из 10-20 страниц, а если их число перевалило за вторую - третью тысячу... Пользователь в этом случае получит уведомление об ошибке. Мне нет нужды цитировать содержание страницы с ошибкой 404 - каждый из вас с ней наверняка встречался. И наверняка помнит состояние глухого раздражения, когда эта страничка на сайте появляется регулярно. А такое бывает, если какая-то часть сайта была перемещенав другое место. Отслеживать такие сломанные ссылки в этом случае особенно трудно. Как же бороться с этой напастью?

В индексном файле измените одну из своих ссылок так, что бы она указывала на несуществующий файл. проверьте эту ссылку в броузере - получите сообщение об ошибке. Теперь перейдите в окно структуры сайта. В меню выберите Site - Check Links Sitewide. Программа задумается на некоторое время, а затем выдаст вам окошко с полным перечнем сломанных ссылок (кстати, только что проверил у себя - Бог ты мой !!!) Имейте ввиду, если вы делаете это не очень часто, список может ужасать. К счастью, ремонтируется все просто. Дважды щелкните записи с поломанной ссылкой - откроется нужный файл и будет выделена искомая ссылка. Просто поправьте ее. Единственный недостаток этого метода - он не проверяет ссылки, которые ведут за пределы сайта. Это вы должны проверять сами.

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