Интернет сайт жасау

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

• Где?
• Что?
• Зачем?

Мы рассмотрим  основные принципы создания сайтов (используемая литература: Якоб Нильсен, Михаил Круг). 
Обычно основное внимание уделяют дизайну страницы. В браузерах мы видим только одну страницу за один раз. Сам сайт явно не представлен на экране.  
Разработка архитектуры сайта сложная задача и имеет значение более важное, чем разработка дизайна страницы. 
Обычно попадая на страницу, пользователь уже спустя короткое время понимает, что там можно сделать. Но перенести пользователя на нужную страницу не так просто.

Главная страница сайта

Главная страница  это флагман сайта, и ее дизайн должен отличаться от дизайна всех остальных страниц. Конечно, первая и остальные страницы должны быть выдержаны в одном стиле, но есть и различия.  
Например:

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

Первая непосредственная цель любой  главной страницы  ответить на вопросы: “Где я нахожусь?” и “Что делает этот сайт?”  
Оба они требуют прямого указания полного имени. Лучше, если и по дизайну будет понятно, какой цели может служить этот сайт для нового пользователя. Для нового пользователя, вероятно, самая важная функция первой страницы  это ответ на вопрос “Что же этот сайт делает?”, а для большинства остальных первая страница  отправная точка для навигации по сайту.  
Первая страница это также место для представления новостей или специальных предложений, которыми вы хотите привлечь внимание всех посетителей.  
Возможность поиска необходима на первых страницах, так как многие пользователи не хотят бесконечно ходить по ссылкам, чтобы попасть туда, куда им нужно.  
Итак, главная страница должна предоставлять три следующие возможности:

• каталог основных содержательных разделов сайта (возможность навигации),
• краткую сводку основных новостей или специальных предложений,
• возможность поиска.

Если все это хорошо сделано, то каталог и новости помогут  пользователю, пришедшему на сайт в первый раз, понять, о чем же, собственно говоря, этот сайт рассказывает. Всегда смотрите на главную страницу именно под таким углом: она должна отвечать на вопрос: “Что этот сайт может для меня сделать?”. И не забудьте о названии компании и логотипе.

Элементы web-страницы

Основные элементы web-страницы

1. Заголовок/Логотип (Шапка)
2. Поиск
3. Рекламный Баннер
4. Контент /Содержание (Текстовое поле)
5. Элементы навигации
6. Информация о разработчиках сайта
7. Счетчик посещаемости

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

Первым элементом web-страницы, который нам предстоит рассмотреть, является ее Заголовок. Он может быть выполнен как в текстовом, так и в графическом варианте, однако и в том и в другом случае он должен располагаться в верхней части документа.

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

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

Иногда с заголовком совмещают  меню выбора кодировки кириллицы  и кнопки для перехода с русскоязычной  на англоязычную версию сайта, если данный web-ресурс представлен на двух языках и Навигацию.

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

Основную часть документа занимает так называемое Текстовое поле - участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации.  
Перечисленные элементы еще называют "Контент" (от англ, content - Содержание).  
Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа.

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

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

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

Итак, мы разобрали все основные компоненты web-страницы. Пример компоновки сайта, содержащего набор описанных  выше составляющих, показан на Рис. 1 и Рис. 2

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

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

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

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

Логическая и физическая структура сайта  

 Каждый ресурс Интернета,  от домашней странички до большого  информационного портала, содержит  несколько тематических рубрик, соединенных между собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Если тематические рубрики содержат собственные подразделы, каждая из них также имеет свою стартовую страницу, называющуюся index.htm.

ПРИМЕЧАНИЕ!

Такое имя файла рекомендуется  присваивать всем стартовым документам сайта, поскольку в противном  случае при обращении к какому-либо разделу посредством сокращенного URL без указания названия стартовой страницы (например, http://www.mysite.ru/photos/ вместо http://www.mysite.ru/photos/startpage.html) браузер отобразит не саму web-страницу, а перечень хранящихся в данной папке файлов или ошибку.  
Подобный набор тематических рубрик с распределенными по соответствующим разделам документами и заранее спроектированными гиперсвязями между всеми страницами ресурса и называется Логической структурой сайта.

Физическая структура подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован ваш сайт.  
Пример сравнения логической и физической структур одного и того же ресурса Интернета показан на рис. 5

 Очевидно, что логическая и  физическая структуры могут не  совпадать, поскольку в общем  случае физическая структура  ресурса разрабатывается, исходя  из удобства размещения файлов. Однако более или менее точное сохранение порядка следования логических разделов в физической структуре сайта позволит вам избежать путаницы при последующем дополнении и обновлении материалов.  
СОВЕТ! 
Рекомендуется размещать все графические изображения, являющиеся элементами проекта, в отдельной папке с названием "Images", “img” или “pic”, расположенной в корневой директории сайта. Такой подход позволит обновлять хранящиеся в других тематических разделах документы HTML без переноса графики, использовать одни и те же графические файлы во всех разделах сайта и при необходимости удалять целые директории.  
Для того чтобы все гиперссылки на вашей домашней страничке или web-сайте работали корректно, все документы открывались правильно и браузер не выдавал ошибок при обращении к каким-либо разделам ресурса, при создании его физической структуры следует соблюдать несколько простых правил.

1. Назначайте имена директорий, имена и расширения документов HTML и графических файлов с использованием символов только латинского алфавита и только в строчном регистре.
2. Старайтесь, чтобы имена созданных вами файлов и директорий не превышали по длине восьми символов.
3. При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти имена были "смысловыми": впоследствии вы легко можете забыть содержимое и назначение какой-либо web-страницы, если имена файлов будут выглядеть, например, как 1.htm, 2.htm, 3.htm и т. д.

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

1. Постановка целей и определение основных задач.
2. Создание списка будущих тематических разделов.
3. Разработка логической и физической структуры ресурса.
4. Подготовка эскиза дизайна, компоновки сайта, невидимой верстальной таблицы.
5. Подготовка текстовых материалов.
6. Подготовка графических материалов в векторной форме.
7. Экспорт векторных рисунков в растровый формат.
8. Оптимизация всех изображений.
9. Создание шаблонов web-страниц.
10. Сборка web-страниц и отладка кода.
11. Проверка идентичности отображения web-страниц с различным экранным разрешением и цветовой палитрой и различных браузерах.

Названия страниц

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

Во многих из перечисленных ситуаций названия web-страниц рассматриваются  в отрыве от основного контекста. Таким образом, необходимо, чтобы названия страниц были достаточно информативными и позволяли правильно судить о характере содержащихся на этих страницах материалов. С другой стороны, слишком длинные названия также неудобны. 
Название страницы также можно отнести к разряду информационного наполнения web-пространства. Каждое название должно представлять собой образец четкости формулировки. Автор должен объяснить потенциальному посетителю, какую информацию можно найти на соответствующей странице.  
Каждая из страниц должна иметь уникальное название. Представьте себе ситуацию, когда вы посетили, скажем, семь страниц с одинаковыми названиями, а затем пытаетесь вернуться к одной из них, используя список посещенных страниц. Кроме того, серьезные неудобства возникают при создании закладок на несколько различных страниц подобного узла, поскольку при этом меню закладок (избранных страниц) будет содержать несколько идентичных элементов. 
И наконец, названия должны быть приспособлены для беглого ознакомления. С этой целью следует помещать наиболее информативные фразы в начало названия, причем предпочтительнее всего начинать название со слова, которое с наибольшей вероятностью будет отражать потребности потенциального посетителя. Весьма часто встречается, когда в качестве названия используются такие фразы, как “Добро пожаловать на узел XXX”. Гораздо лучшим вариантом было бы использование в качестве названия просто “XXX”. Названия не обязательно должны представлять собой законченные грамматические структуры,  скорее они должны быть выдержаны в духе рекламных слоганов.  
При создании заголовков в Интернете необходимо руководствоваться приводимыми ниже принципами:

1. Заголовок должен четко описывать содержание соответствующей страницы.
2. Заголовок должен быть написан понятным языком.
3. Первое слово должно быть наиболее информативным, что будет способствовать оптимальному позиционированию в алфавитных списках и облегчит беглое ознакомление. Например, можно начинать заголовки с названия организации, имени автора или понятия, представляющего собой предмет обсуждения.
4. Названия страниц не должны начинаться с одного и того же слова. Такие названия будет сложно различать при беглом просмотре списка. Общие слова лучше всего помещать в конец названий.

Каждая страница должна иметь название и в дизайне

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

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

 Обратите внимание на пример  страницы сотовой компании ЕТК.  Вы без труда определите, в  каком разделе сайта вы находитесь, название страницы.

Удобочитаемость  

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

1. Фон и текст страницы должны быть оформлены контрастными цветами. Наилучшая разборчивость обеспечивается при использовании черных символов на белом фоне (так называемого позитивного текста). Также хорошо воспринимается белый текст на черном фоне (негативный текст). Несмотря на то, что уровень контрастности в последнем случае аналогичен позитивному тексту, негативная цветовая схема способствует некоторому рассеянию внимания читателя и очень замедляет чтение. Разборчивость еще больше страдает, если цвет текста несколько светлее черного, в особенности, если при этом фоновый цвет несколько темнее белого. Наиболее неудобны для чтения такие цветовые схемы, как розовый цвет на зеленом фоне: эта схема характеризуется слишком низкой контрастностью и, кроме того, не позволяет читать текст пользователям, страдающим нарушением восприятия красного и зеленого цветов.
2. В качестве фона страницы следует использовать либо однотонный цвет, либо узор, имеющий минимальную контрастность. Фоновые изображения затрудняют распознавание текста глазом человека.
3. Текст должен быть набран достаточно крупным шрифтом, чтобы его могли читать даже пользователи с ослабленным зрением.
4. Текст должен быть статичным. Движущийся, мерцающий или изменяющийся в размерах текст воспринимается значительно хуже, нежели статичный.
5. В большинстве случаев текст должен быть выровнен по левому краю или по ширине. Если начало всех строк находится на одном уровне по горизонтали, чтение текста значительно ускоряется в сравнении с текстом, выровненным по центру или по правому краю. Конечно, выравнивание по правому краю или по центру отдельных небольших фрагментов текста вполне допустимо, однако основной текст должен быть выровнен по левому краю или по ширине.
6. Аналогично, восприятие списков значительно облегчается при выравнивании первого слова каждого из элементов списка по левому краю вдоль одной линии.
7. Поскольку современные мониторы имеют сравнительно низкую разрешающую способность, текст, набранный мелким шрифтом, воспринимается значительно лучше при оформлении его с использованием рубленых шрифтов, таких как Verdana. Для четкого отображения засечек шрифта размером 10 пунктов попросту не хватает пикселов. В то же время, большинство людей предпочитает читать текст, набранный шрифтами с засечками, таким образом, мы оказываемся перед лицом своего рода парадокса. Разборчивость должна быть определяющим критерием в случае очень мелких шрифтов (9 пунктов и менее). Такой текст должен набираться с использованием рубленого шрифта.
8. Не следует набирать текст ПРОПИСНЫМИ БУКВАМИ. Чтение такого текста выполняется примерно на 10% медленнее, чем текста, набранного с использованием строчных букв, поскольку восприятие символов, имеющих одинаковую высоту, затруднено. Этого следует избегать.

Разработка информационного наполнения  

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

1. Следует соблюдать лаконичность. На странице: должно размещаться не более 50% текста, который может быть использован для передачи того же материала в печатном издании.
2. Текст должен быть удобным для беглого ознакомления. Не следует заставлять посетителя читать крупные абзацы текста. Вместо этого лучше использовать небольшие абзацы, подзаголовки и маркированные списки.
3. Информацию значительного объема следует разбивать на несколько страниц, связанных между собой гиперссылками.

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

Рисунки и фотографии

1. Количество графической информации на web-страницах необходимо максимально ограничивать, поскольку загрузка графики требует значительного времени. От излишней графики следует попросту отказаться. В разряд такой графики попадает любая текстовая информация, представленная в графическом формате, за исключением текста, тесно связанного с общей концепцией оформления сайта, включение которого в состав изображения обусловлено необходимостью.
2. Несмотря на это, пользователям нужно видеть фотографии образцов предлагаемой продукции, поскольку это является единственным способом познакомиться с ней воочию. На персональной странице целесообразно помещать фотографию или текст, говорящие о личности автора. Устранить противоречия между этими двумя требованиями помогают гипертекстовые возможности Сети. Количество графической информации на страницах верхних уровней следует сводить к минимуму. При просмотре этих страниц пользователь еще не успевает выбрать материалы, которые представляют для него интерес и нуждаются в иллюстрациях. На страницах, посвященных более узким вопросам, количество иллюстративного материала может быть увеличено.
3. На странице верхнего уровня, посвященной определенной продукции, можно поместить небольшую фотографию образца этой продукции, однако основной объем информации по-прежнему должен быть представлен текстом и табличными данными. Если пользователь действительно заинтересовался описываемым образцом, он может воспользоваться ссылками на странице описания для просмотра других фотографий этого образца. Эти фотографии должны быть достаточно крупными, чтобы давать потенциальному покупателю максимально полное представление о предлагаемой продукции.

Уменьшение размера изображения

Традиционным способом создания небольших  версий изображений является уменьшение исходного изображения в графическом  редакторе. К сожалению, при изменении  масштаба изображения уменьшаются  настолько, что становятся абсолютно неразборчивыми. Применение кадрирования (обрезки краев изображения) позволяет сохранить детализацию на исходном уровне, однако при этом утрачивается определенная часть содержащейся в изображении информации. Оптимальным выходом в данной ситуации может стать совместное использование обоих указанных методов. Например, для получения уменьшенного образца, размер которого составляет 10% от размера исходного изображения, вначале следует обрезать изображение до 32% относительно исходного текста, расположенного в центре страницы, если в верхнем углу помещен переливающийся логотип.  
Анимированные изображения имеют право на существование в web-дизайне, однако в общем случае использование анимации лучше всего ограничивать. Задайте себе вопрос: можно ли достичь той же цели без применения анимации? Если ответ на этот вопрос окажется положительным, избавляйтесь от анимации без малейшего сожаления.  
Кроме того, нельзя допускать воспроизведения анимации в бесконечном цикле  достаточно, чтобы она воспроизводилась всего несколько раз. Отдельные пользователи полагают, что анимированные изображения выглядят эффектно и являются показателем труда, вложенного в разработку сайта. Тем не менее, большинство пользователей отмечает, что анимация раздражает их. В частности, практически все не переносят движущийся текст и бегущие строки.  
Применение анимации имеет семь целей:

1. для передачи переходных процессов;
2. для указания направленности действия;
3. для передачи изменений, происходящих с течением времени;
4. для смены, отображаемой в отдельной области страницы информации;
5. для обогащения графического представления;
6. для визуализации объемных структур;
7. для привлечения внимания.

Описания ссылок

Ссылки  самая важная часть гипертекста. Они объединяют страницы и позволяют пользователям путешествовать по Сети. Существуют три основные формы ссылок:

• Структурные ссылки или ссылки на элементы навигации. Эти ссылки задают структуру информационного пространства, и по ним пользователь переходит к другим разделам сайта. Типичный пример  кнопка возврата на начальную страницу и ссылки на подчиненные страницы.
• Ассоциативные ссылки внутри страницы. Чаще всего это подчеркнутые слова в тексте (хотя это могут быть и изображения), указывающие на страницы, где можно найти подробную информацию о слове, играющем роль ссылки.
• Списки типа “смотрите также”. Эти ссылки нужны для того чтобы помочь пользователю найти то, что он хочет, но чего нет на данной странице. Учитывая сложность навигации в Интернете, хорошо составленные списки “смотрите также” могут сильно облегчить жизнь пользователю.

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

Заголовки ссылок

Начиная с броузера Internet Explorer 4.0 поддерживается возможность выводить всплывающие  подсказки с описанием ссылки. Это помогает узнать, куда приведет ссылка, и улучшает возможности навигации.  
Описание ссылки называется заголовкомссылкии его очень легко закодировать.  
Если вы поместите указатель мыши в вашем браузере над этой ссылкой, то примерно через секунду появится всплывающая подсказка. 
Цель заголовков  помочь пользователям предугадать, что произойдет, если они перейдут по ссылке. В качестве заголовка для ссылки можно включать следующую информацию:

• Название сайта, на который ведет ссылка (если это не текущий сайт).
• Название подраздела сайта, на который ведет ссылка (если она не выводит за пределы сайта).
• Дополнительные сведения об информации той страницы, на которую указывает ссылка, или о том, как она связана с текстом ссылки и содержимым текущей страницы.

Заголовки ссылок должны быть меньше 80 символов, но они редко превышают даже 60 символов. Чем короче заголовок, тем лучше.  
Кроме того, вы не должны придумывать заголовки для всех ссылок. Если из текста ссылки и контекста понятно, куда она ведет, то ее заголовок только уменьшит удобство использования сайта, так как это будет лишний элемент, на который должен будет посмотреть пользователь. Излишне просто повторять текст ссылки в заголовке.  
Не думайте, что заголовок ссылки будет выглядеть одинаково для всех пользователей. На самом деле браузеры с голосовым интерфейсом прочитают заголовок ссылки вслух, а не отобразят ее на экране. 
И наконец, имейте в виду, что использование заголовков ссылок не заменяет сами ссылки. Текст ссылки и контекст, в котором она приводится, должны быть понятны, даже если пользователь и не посмотрит на ее заголовок.

Сделайте ссылки цветными   

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

Ожидание от перехода по ссылке   

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

Структура сайта

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

Сайт из 10 страниц ("визитная карточка" базовый вариант)  

• 1 - Главная (домашняя) страница;
• 2 - Прайс-лист;
• 3 - Фото (каталог) товаров;
• 4 - Справочная информация;
• 5 - О фирме;
• 6 - Офис;
• 7 - Партнёры;
• 8 - Вакансии;
• 9 - Потребности;
• 10 - Сервисы.

Web-страницы и Web-сайты

Что такое Web-страница? Ответить на этот вопрос могут многие. Это интернет-документ, предназначенный для распространения  через Интернет посредством сервиса WWW. А если уж говорить по-простонародному, это то, что показывает в своем окне программа-клиент для просмотра Web-страниц — Web-обозреватель (браузер).

С технической точки зрения Web-страница - это обычный текстовый файл, который можно создать в любом текстовом редакторе, том же Блокноте, стандартно поставляемом в составе Windows. Этот файл содержит собственно текст Web-страницы и различные команды форматирования этого самого текста. Команды форматирования называются тегами, а описывает их особый язык HTML (HyperText Markup Language), язык гипертекстовой разметки.

Файлы, содержащие Web-страницы, должны иметь расширение htm[l]. Они сохраняются на жестких дисках серверного компьютера. Получив от Web-обозревателя запрос по протоколу HTTP, Web-сервер (серверная программа, обеспечивающая работу сервиса WWW) загружает эти файлы и отправляет Web-обозревателю.

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

Зачем нужны Web-редакторы?

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

Многие не знают HTML, более того —  не хотят его изучать или не имеют на это времени. Но создавать Web-страницы хотят. Поэтому специально для них программисты написали множество программ, предназначенных для создания Web-страниц.

Одна из таких программ написана разработчиками из фирмы Macromedia и называется Macromedia Dreamweaver. Первая ее версия вышла еще в далеком 1998 году; в настоящее же время доступна версия 8.

Именно с Dreamweaver мы и будем работать. 
Dreamweaver — типичнейший представитель визуальных Web-редакторов, работающих по принципу WYSIWYG (What You See Is What You Get, "что ты видишь, то ты и получишь"). При этом пользователь форматирует текст и в окне редактора сразу же видит результаты своих трудов.

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

Здесь нужно сказать, что практически  все серьезные Web-редакторы имеют  режим правки непосредственно самого кода HTML (т. е. фактически являются гибридными Web-редакторами). Поэтому сейчас практически всегда, когда говорят "визуальный Web-редактор", подразумевают как раз гибридные программы. Разумеется, к их числу относится и Dreamweaver, с которым нам пора познакомиться поближе.

Введение

При самом первом запуске программы, вам будет предложено выбрать рабочую среду. Давайте создадим новый документ  "File->New" (Файл-Новый)

На этой вкладке создайте новый  документ, выбрав Basic Page (Базовая страница) -> HTML. 
Перед вами откроется рабочее окно программы.

И на вновь созданной странице напишите какой-нибудь текст, состоящий из русско-английских слов. Для примера: "полезная информация по работе с программой DreamWeaver".  
После чего сохраните страницу командой "File - Save as", но саму страницу не закрывайте в редакторе, а теперь откройте вновь созданную страницу в браузере, - что у вас получилось? В моем случае отобразилась такая вот надпись

Поэтому первое с чего стоит начать - это обучить DreamWeaver кириллице. Главное  меню Edit (Редактировать) – Preferences (Настройки), в открывшемся диалоге выберите категорию New Document (Новый документ) и на этой вкладке в списке "Default Encoding", выберите "Cyrillic (Windows-1251)". Далее в левой части этого диалога выберите пункт "Fonts (Шрифты)" и в списке "Font Setting (Настройки Шрифта)" выберите пункт "Cyrillic (Кириллица)".

Здесь вы так же можете настроить  отображение текста (выбрать шрифты и установить размер букв), который  будет использоваться по умолчанию. Для завершения нажмите "ОК". После чего создайте еще одну страницу и впишите какой-либо текст, сохраните ее "File - Save" и откройте сохраненную страницу. Теперь все в порядке, НО! Любая веб - страница, где в теге Meta, явным образом не будет указана кодировка "charset = windows-1251" будет "перегоняться" в кодировку "Cyrillic (ISO-8859-5)"

Чтобы это не происходило, откройте файл: (Ваш диск \Program Files\ Macromedia\ Dreamweaver 8\ Configuration\ Encodings\ EncodingMenu.xml) и в списке кодировок найдите четыре кодировки  Кириллицы, идущие друг за другом  

Таблица 1

Отредактируйте этот файл в "Блокноте", поменяв местами кодировки "ISO-8859-5" и "Windows-1251", чтобы порядок следования кодировок Кириллицы принял следующий  вид 

 
Таблица 2

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

Интерфейс

Теперь давайте снова вернемся к рабочей среде программы.

Для переключения режима отображения рабочей среды (режимов всего три: Code (Код), Design (Дизайн) и Code and Design на панели инструментов или главное меню "View"(Вид).

Выберите из этих режимов тот, с  которым вы можете/умеете работать, хотя предпочтительно оставить "Code and Desig", тогда рабочее окно как бы разделится на две части и вы сможете видеть и сам HTML-код и страницу в режиме WYSIWYG.

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

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

Группы панелей всегда располагаются  над окном документа, даже если в  данный момент неактивны. Это сделано  для того, чтобы мы могли всегда получить к ним доступ, вне зависимости  от того, какое окно сейчас активно. 
Если же мы захотим убрать какую-либо из этих групп, мы можем "вынести" ее за пределы окна документа или вообще закрыть, раскрыв ее дополнительное меню и выбрав пункт Close panel group. Теперь обратим внимание на правый край главного окна, где находится множество всяческих групп панелей. Это так называемый док — область, специально для них предназначенная. Док отделен от остального пространства главного окна толстой серой полосой, которую мы можем перетаскивать мышью, изменяя размеры дока. Мы также можем щелкнуть мышью довольно приметную кнопку на доке,  чтобы быстро скрыть его со всеми.

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

• инструментарий объектов

• инструментарий документа 

• стандартный инструментарий, предоставляющий доступ к операциям с файлами (создание, открытие и сохранение Web-страницы), буфером обмена и пр., изначально скрыт.

Чтобы вывести эти панели на экран главное меню “Вид (View) – Панели инструментов (Toolbars )” (соответствующие панели (Insert, Document, Standard). 

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

Если же мы раскроем одно из окон документов на весь экран (точнее, на все  главное окно), то переключаться  между окнами станет просто. В этом случае в инструментарии документа  появятся вкладки, соответствующие открытым окнам документа.

Если нам необходимо держать  на виду сразу два окна или больше, стоит воспользоваться пунктами меню “Window - Cascade, Tile Horizontally или Tile Vertically”. Первый из них "выкладывает" все  открытые окна документов в виде "стопки" в главном окне так, что мы сможем видеть их заголовки и часть содержимого. Второй и третий пункты "выкладывают" в главном окне "мозаику" из окон документов так, чтобы они не перекрывались. Причем второй пункт выкладывает "мозаику" по горизонтали, а третий — по вертикали.

Определение сайта в Dreamweaver

Прежде  чем начать управлять сайтом, его необходимо зарегистрировать в Dreamweaver.

Для того чтобы создать новый  сайт, воспользуйтесь пунктом New site (Новый сайт) меню Site (Сайт). После выбора на экране появится диалоговое окно Site Definition (Определение сайта), состоящее из двух вкладок.

Если оно открыто на вкладке Basic (Основные), переключитесь на вкладку Advanced (Дополнительно) — она предоставляет больше возможностей по настройке вашего сайта. 
Как видите, в левой части этого окна находится список вкладок второго уровня. Переключитесь на вкладку Local Info (Локальная информация), где задается информация о файлах вашего сайта, находящихся на жестком диске вашего компьютера (локальной копии сайта).

В поле ввода Site Name (Имя сайта) вводится имя сайта. Оно служит только для того, чтобы вам самим было удобно с этим сайтом работать. Назовите сайт "proba".

В поле ввода Local Root Folder (Локальный корневой каталог) указывается путь к корневой папке локальной копии сайта. Вы также можете щелкнуть по значку папки, расположенному справа от этого поля ввода, и выбрать нужную папку в появившемся на экране диалоговом окне.

Флажок Refresh Local File List Automatically  (Обновить локальный список файлов автоматически) включает или отключает автоматическое обновление списка файлов локальной копии сайта. Если вы оставите его включенным, список файлов сайта всегда будет обновляться автомагически, как только Dreamweaver становится активным.  Если же вы выключите вышеназванный флажок, вам самим придется обновлять список файлов сайта, но Dreamweaver будет активизироваться быстрее.

В поле ввода Default Images Folder (Папка с картинками по умолчанию) вводится имя папки, в которой по умолчанию будут располагаться все графические изображения, помещаемые вами на Web-страницы сайта. Вы также можете щелкнуть по значку папки, расположенному справа от этого поля ввода и выбрать нужную папку в появившемся на экране диалоговом окне. Введите в это поле  “pic”.

В поле ввода HTTP Address вводится интернет-адрес вашего сайта. Не вводите в это поле ничего.

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

После нажатия кнопки “Готово” в панели Файлы отобразится список файлов сайта, изначально там нет файлов, но они появятся по мере Вашей работы.

Основа практически любой страницы - это текст. Создайте новую страницу (File - New) и наберите в ней любой  текст.

Текст набирается с помощью клавиатуры (а вы как думали?), при этом Dreamweaver самостоятельно разобьет текст на строки.

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

Далее необходимо будет заполнить  поле " Title (Заголовок)". Информация, записанная в этом поле, будет отображаться в заголовке браузера. Для примера, в поле "Title" я впишу " Работа с текстом"

И тогда в любом браузере, в  его заголовке можно будет  прочесть

Сохраните эту страницу, дав ей какое-либо имя. Главным страницам  сайтов или директорий дают название: index.htm , index.html , index.php  и так далее.

Для форматирования абзацев целиком удобнее пользоваться раскрывающемся списком "Format (Формат)" на панели "Properties (Параметры)".

Если эта панель у вас не открыта - кликните на треугольник рядом  со словом  "Properties (Параметры)".

В примере приведены примеры  форматирования абзацев, сам процесс  достаточно прост: кликаете мышкой по любому абзацу и в списке "Format (Формат)" выбираете один из шести пунктов. 
Если вы хотите форматировать не абзацы, а только выбранные слова, выражения или символы – то вам пригодятся остальные пиктограммы. 
Для задания размера символов воспользуйтесь пунктом "Size (Размер)". 
Вы можете выбрать шрифт текста - список "Default Font" . Причем для разных символов или слов вы можете установить разные шрифты.

Для выравнивания текста можно  воспользоваться этими 4 кнопками. Интересная деталь: если щелкнуть еще раз по нажатой кнопке-переключателю, она "отожмется". В этом случае для  абзаца будет установлено выравнивание по умолчанию, обычно — по левому краю.

• по левому краю;
• по центру;
• по правому краю;
• по ширине.

Для задания (увеличения/уменьшения) отступа абзацев можно воспользоваться  пунктами  
При каждом нажатии пункта "Indent" отступ будет увеличиваться, а при нажатии на "Outdent" наоборот уменьшаться.

Cделаем некоторые слова на  нашей Web-странице полужирными  и курсивными. И помогут нам  в этом две кнопки изменения начертания . А вот чтобы включить или отключить подчеркивание текста линией, нам все равно придется воспользоваться пунктом-выключателем Underline подменю Style (Стиль) меню Text (Текст) или контекстного меню. Ни кнопки, ни комбинации клавиш для этого действия не предусмотрено.

Текстовые редакторы поддерживают создание нумерованных и маркированных списков. Пункты нумерованных (упорядоченных) списков, как вы знаете, обозначаются порядковыми номерами, а пункты маркированных (неупорядоченных) списков — какими-либо значками. Давайте и мы создадим такой список. 
Для того чтобы преобразовать выделенные строки в список, воспользуемся кнопками-переключателями редактора свойств . 
Поставьте текстовый курсор на любом пункте списка, В контекстном меню выберите  пункт “Список – Свойства” и появится диалоговое окно List Properties, с помощью которого мы можем задать некоторые параметры списка. Изменить стили маркеров или нумерацию (например: использовать буквы вместо цифр - a b c d;), а так же, для нумерованных списков, задать число, с которого следует начинать нумерацию. Поля ввода "List Type" (три верхних) - - позволяют задать тип всего списка, в то время как поля ввода "List Item" (два нижних поля) - относятся только к той строке списка, на которой в настоящее время установлен курсор мыши.

Текст можно покрасить во все  цвета радуги-:) Для этого выделите какую-либо часть текста и нажмите на кнопку . 
В открывшемся диалоге представлена палитра цветов

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

Часто бывает нужно вставить дату создания или последнего редактирования документа, в этом вам поможет кнопка "Date (Дата)"  или (Insert (Вставить)- Date (Дата)). В открывшемся диалоге

Вы можете установить вариант отображения  даты, а так же при желании и  день недели и время. Если вы установите галочку в "Update Automatically on Save" - тогда после каждого обновления/редактирования страницы дата будет обновляться. 
Так же у вас есть возможность вставлять специальные символы воспользовавшись вкладкой  "Text".

Еще одна полезная функция - это чистильщик HTML-кода. Вызвать его можно командой "Command - Clean Up XHTML" и пред вами откроется окошко этого диалога.

Иногда необходимо разделить информацию и для этого ставят горизонтальную линию. На панели “Вставить” вкладка “HTML” кнопка . У горизонтальной линии есть свойства Ширина, Высота и Цвет. Для установки Ширины и Высоты в панели “Properties” необходимо указать требуемые значения в полях W и H.  
Для задания цвета линии выделите линию и в контекстном меню Редактировать тег (Edit Tag) … 
В диалоговом окне выберите требуемый цвет линии.

Связи и навигация

Существует несколько способов создания гипертекстовых ссылок на различные типы файлов. Начать следует с создания навигации по сайту. Для создания связи между файлами нужно точно указать путь, по которому можно добраться до нужного документа. 
Путь может быть как полный - начинаться с указания интернет адреса (например: http:// Dreamweaver/index.htm), так и корнезависимый ( ../index.htm ). Давайте рассмотрим, как процесс задания связей между документами реализован в DreamWeaver.  
Для того чтобы сделать  из любого слова или нескольких слов гиперссылку - достаточно "прицепить" к нему интернет адрес. Для наглядности сделаем так, - в тексте  "Macromedia DreamWeaver. Практикум" выделите словосочетание " Macromedia DreamWeaver." и в поле "Link" вкладки "Properties" введите начальный адрес этого руководства (http://Dreamweaver/) и нажмите "Enter".

Как вы смогли заметить - слова " Macromedia DreamWeaver. Практикум" изменили цвет и  стали гиперссылкой. Для удаления гиперссылки - просто удалите интернет адрес  в поле "Link" вкладки "Properties" и так же нажмите клавишу "Enter".  Теперь перейдем к корнезависимому пути.

Выделив  " Macromedia DreamWeaver" нажмите кнопку  с изображением папки

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

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

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

В том случае если вы даете ссылку на страницу лежащую во вложенной  папке ссылка примет следующий вид  
<a href="new_folder/new_page_00001.htm">

Если вы хотите вставить почтовый адрес, то для этого необходиом ввести в поле "Link" вкладки "Properties" адрес электронной почты (например:  mailto:vsh@dvpion.ru ), любая ссылка на почтовый адрес начинается с mailto: , хотя если вы в силу каких-то обстоятельств не хотите руками вписывать слово "mailto:", тогда можете на вкладке "Common" нажать кнопку , где в поле "Text" впишите текст ссылки, а в поле "E-Mail" - адрес электронной почты. И в том и другом случае эффект будет тот же.

Якоря

Еще один тип ссылок - "якоря". Использовать этот тип ссылок особенно полезно при большом количестве информации расположенной на одной  странице.  
Давайте установим переход вверх текущей страницы. Первое что нужно будет сделать - это установить сам якорь на странице.  
И нажать кнопку  на вкладке "Common". В открывшемся диалоге укажите имя якоря имя "new_page_11_top".  
Теперь осталось только установить здесь ссылку на этот якорь. Для этого нужно выделить текст,  и в поле "Link" вкладки "Properties" ввести адрес гиперссылки ссылающейся на этот якорь:  #new_page_11_top

Решетка (#) перед именем якоря - это  и есть команда браузеру "направиться" к отметке под именем new_page_11_top. 
Если вы хотите сослаться на якорь, расположенный на другой странице, тогда укажите путь до самой страницы с якорем. Для примера, я хочу направить посетителей на страницу с "примерами якорей". Так как имя страницы с примерами - examples.htm , а якорь, на который я хочу перенаправить, имеет имя 02 , то и ссылка будет иметь следующий вид: (examples.htm#02 ).

Работа с графикой

С чем мы имели дело ранее? С текстовыми элементами Web-страниц. Все текстовые  элементы создаются с помощью  соответствующих тегов языка HTML. 
Помимо всего прочего, вы сможете задать фон вашей страницы. Если в качестве фона вы просто хотите задать какой-либо цвет, - то воспользуйтесь для этого пунктом "Background (Фон)" (кликнув левой кнопкой мышки по относящемуся к этому пункту квадратику). И в раскрывшейся палитре выберите нужный вам цвет. Фоновую картинку можно задать выбрав файл в соответствующем поле этого же диалогового окна.

Вставка графического изображения

Поместим текстовый курсор в  нужное нам место и посмотрим  на вкладку “Common” инструментария объектов — там находится кнопка “Image (Изображение)”. Нажмем на нее и в появившемся на экране меню выберем пункт Image. Также можно воспользоваться пунктом Image меню Insert или нажать <Ctrl>+<Shift>+<I>. После этого на экране появится диалоговое окно Select Image Source.

Раскрывающийся список папок и  список файлов позволят нам выбрать  нужную папку и файл.  
В поле ввода Имя файла появится имя выбранного файла (или мы можем сами ввести его туда). А раскрывающийся список Тип файлов позволит нам выбрать, какой тип файлов нам нужно найти. Все это знакомо нам по стандартным диалоговым окнам открытия и сохранения файлов Windows. Единственное отличие — справа находится панель предваритель ного просмотра. А если мы желаем ее убрать отключим флажок Preview images. Итак, мы выбрали файл. Осталось нажать кнопку ОК. Но Dreamweaver потребует от нас еще кое-какую информацию, выведя диалоговое окно “Image Tag Accessibility Attributes (Атрибуты доступности тега изображения)”.

Комбинированный список “Alternate text (Альтернативный текст)” этого окна служит для задания, так называемого текста замены. Это придумано для пользователей медленных каналов связи. После того как Web-обозреватель загрузит HTML-файл с Web-страницей, он вместо изображения, помещенного на ней, отобразит пустую рамку соответствующих размеров. Когда пользователь поместит курсор мыши над пустой рамкой рисунка, Web-обозреватель выведет небольшую подсказку, содержащую этот самый текст замены. Поэтому рекомендуется всегда пользоваться этой возможностью.

Собственно в список Alternate text вводится краткий текст замены. Его ограничение — не более 50 символов. Если нам нужно выводить на экран более подробный текст замены, его можно сохранить в отдельный файл Web-страницы, а потом ввести его интернет-адрес в поле ввода Long description. Также можно щелкнуть кнопку в виде папки, расположенную правее этого поля, и выбрать нужный файл в диалоговом окне Select File. Закончив ввод данных, нажмем кнопку ОК. Dreamweaver поместит графическое изображение в то место, где на данный момент находится текстовый курсор.

Параметры графического изображения

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

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

Поля ввода V Space и Н Space задают, соответственно, вертикальное и горизонтальное расстояние от края изображения до обтекающего его текста. По умолчанию оба они равны нулю.

Поле ввода Src задает интернет-адрес файла, где хранится графическое изображение. Справа от него видны две кнопки. Нажав на правую из них (с изображением папки), мы откроем диалоговое окно Select Image Source.

Мы также можем изменить имя  файла изображения, щелкнув по изображению  правой кнопкой мыши и выбрав пункт Source File в контекстном меню, или просто дважды щелкнув мышью по изображению. После этого на экране появится диалоговое окно Select Image Source.

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

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

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

Комбинированный список Alt задает уже знакомый нам краткий текст замены.

А теперь обратимся к раскрывающемуся  списку Align. Он позволяет нам задать выравнивание изображения, фактически — относительное местоположение его и текста, в котором оно находится.  
Список Align содержит следующие пункты:

• Default— расположение по умолчанию, обычно аналогично пункту  Baseline;
• Baseline — низ изображения совпадает с базовой линией текста (воображаемой линией, на которой находится строка текста) строки, в которой оно находится;
• Тор — верх изображения совпадает с верхом текста строки, в которой оно находится;
• Middle — середина изображения совпадает с базовой линией текста;
• Bottom — низ изображения совпадает с низом текста (обычно не то же самое, что Baseline);
• TextTop — верх изображения совпадает с верхом самого высокого символа текста (обычно не то же самое, что Тор);
• Absolute Middle — середина изображения совпадает точно с центральной линией текста (линией, проходящей через центр строки);
• Absolute Bottom — низ изображения совпадает с низом самого нижнего символа текста;
• Left— изображение "прижимается" к левому краю страницы, а текст "обтекает" его справа;
• Right— изображение "прижимается" к правому краю страницы, а текст "обтекает" его слева.

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

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

Чтобы вернуть изначальные размеры  изображения, мы можем воспользоваться кнопкой отмены), расположенной между полями ввода W и Н редактора свойств и правее их, а также пунктом контекстного меню Reset Size. Это полезно, если мы сильно их исказили и хотим начать все сначала.

Специальные изображения

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

Любое изображение может использоваться в качестве гиперссылки, для этого лишь достаточно ввести интернет адрес в поле "Link" панели  "Properties". 
Причем ссылку вы можете дать как на адрес электронной почты, так и на другую веб страницу. Во втором случае у вас станет доступным список "Target"

Изображение можно сделать активным, реагирующим на наведение на него курсором мышки - Rollover. Для этого вам нужно будет запастись двумя изображениями, которые будут сменять друг друга, и на вкладке "Common" нажмите соответствующую кнопку. 
В открывшемся окне вам нужно будет заполнить требуемые поля

В поле Image Name - укажите оригинальное имя активного изображения, причем в имени могут быть только латинские буквы (с буквы должно начинаться любое активное изображение) и цифры (пренепременно арабские!-:) 
В поле Original Image - введите путь до основного изображения, того, которое будет первым загружаться на странице.

В поле Rollover Image - введите путь до "изображения - эффекта", - это изображение будет появляться только при наводе курсора мыши на ваше активное изображение. 
Поставьте флажок в поле Preload Rollover - в этом случае оба рисунка сразу будут загружены броузером и выполнение эффекта начнется сразу же при наведении мышки. В противном случае (при отключенной галочке), при наведении на такое изображение мышки - браузер начнет загрузку второго изображения ... и медленный какой-то эффект получится. 
В поле Altemate Text - введите текстовый комментарий, всплывающий при наведении курсором мышки на изображение. 
Ну а в поле Go To URL - интернет адрес.

Изображения-карты

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

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

Выделенная вами фигура примет вид:

вам осталось только ввести интернет адрес в поле “Link” (ссылки могут быть на другие страницы  вашего сайта или на другие сайты, либо на почтовые адреса), выбрать один из пунктов поля Target и ввести альтернативный текст в поле Alt.

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

Таблицы

Для того чтобы создать новую  таблицу, перейдите на вкладку "Commons" панели "Insert" и нажмите кнопку . 
В появившемся диалоге заполните необходимые поля. 
Rows - количество строк в таблице  
Columns - количество столбцов в таблице 
Table width - ширина таблицы, причем в выпадающем меню вам нужно указать единицы измерения - проценты или пиксели. 
Border thickness - толщина рамки таблицы в пикселях, причем если вы поставите значение равным нулю, то сама таблица будет не видна на странице. 
Cell Padding - расстояние отступа внутри ячеек таблицы 
Cell Spacing - расстояние между границами ячеек таблицы 
Набор переключателей Header (Верхний колонтитул) позволит нам создать "шапку" и выделенный первый столбец таблицы. В этом наборе доступны переключатели None (нет ни "шапки", ни выделенного первого столбца), Left (выделенный первый столбец), Тор ("шапка") и Both (и "шапка", и выделенный первый столбец). 
Ячейки, составляющие "шапку" и выделенный столбец, будут оформлены как ячейки заголовка, а текст, который мы введем в них, будет автоматически выровнен по центру и выделен полужирным шрифтом. 
В поле ввода Caption (Заголовок) вводится название таблицы. Это название будет находиться над создаваемой таблицей. 
Раскрывающийся список Align caption (Выравнивание) позволит нам задать местоположение и выравнивание названия (если, конечно, мы его ввели). Здесь доступны следующие пункты: 
• default (по умолчанию)— выравнивание выполняет сам Web-обозреватель, обычно в этом случае название находится над таблицей и выравнивается по центру; 
• top — название находится над таблицей и выравнивается по центру; 
• bottom — название находится под таблицей и выравнивается по центру; 
• left — название находится над таблицей и выравнивается по левому краю; 
• right— название находится над таблицей и выравнивается по правому краю.

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

После того как таблица создана, вы можете изменять ее размеры перетаскиванием  границ при помощи мышки. Наведите курсор на один из трех квадратиков в выделении  таблицы.  
Теперь поставим текстовый курсор в любую ячейку таблицы и наберем какой-нибудь текст. Повторим то же самое с остальными ячейками таблицы. 
Ячейка таблицы обязательно должна иметь хоть какое-то содержимое, иначе Web-обозреватель может отобразить ее некорректно. Если же ячейка все-таки должна быть пустой, вставьте в нее неразрывный пробел (его код HTML — &nbsp;), как это делает в подобных случаях сам Dreamweaver. 
Чтобы определить свойства таблицы -  Выделите ее, кликнув для этого левой кнопкой мышки по границе таблицы. После этого, на вкладке "Properties".

Вы сможете изменить свойства таблицы  и настроить ее вид. 
Поле Table id - задайте имя таблицы (атрибут не обязательный)  
Поля Rows и Cols - количество строк и столбцов в таблице. 
Поля V и H - ширина и высота таблицы в пикселях или процентах. 
Поле Align - выравнивание таблицы по левому краю, центру или правому краю 
Поле CellPad - расстояние внутри ячейки (между содержимым и границей ячейки)  
Поле CellSpase - расстояние между ячейками таблицы 
Поле Bolder - ширина границы таблицы 
Bg Color - цвет фона таблицы 
Brdr Color - цвет границ для всей таблицы. 
Bg Image - задание фонового рисунка для таблицы. 
 
Там же находятся еще шесть дополнительных кнопок

• Кнопка Clear Column Widths - очистить значения ширины столбца
• Кнопка Clear Row Heights - очистить значения высоты строки
• Кнопки Convert Widths to Pixels и Convert Widths to Percent - преобразовать ширину ячеек в пиксели и преобразовать ширину ячеек в проценты
• Кнопки Convert Heights to Pixels и Convert Heights to Percent - преобразовать высоту ячеек в пиксели и преобразовать высоту ячеек в проценты

Кроме задания свойств таблицы  существует и задание свойств ячейки или группы ячеек. Для задания свойств ячейки - кликните в ней левой кнопкой мышки. Если же вы хотите задать свойства группе ячеек, то после того как кликните по полю первой ячейки, не отпуская левую кнопку мышки выделите требуемые ячейки (вы можете выделить таким способом хоть всю таблицу). При выделении - границы всех добавленных ячеек будут окрашиваться в другой цвет. 
После того как ячейки выделены - снова обратите внимание на панель "Properties"

Horz - горизонтальное выравнивание содержимого ячеек (по левому краю, по центру или по правому краю) 
Vert - вертикальное выравнивание содержимого ячеек (по верху, посередине, по низу или по базовой линии) 
В полях W и H - укажите ширину и высоту выбранных ячеек, если вам необходимо указать значения в процентах - добавте после числового значения символ %. 
Bg и Brdr -  установление фона ячеек и установление цвета границ ячеек. А с помощью верхнего поля Bg - вы сможете задать фоновое изображение для ячеек. 
Флажок No Wrap - запрет переноса строки 
Флажок Header - для форматирования выбранных ячеек как заголовок таблицы. 
Теперь кликните левой кнопкой мышки внутри любой ячейки и нажмите кнопку . 
При помощи этого диалога вы сможете разделить выбранную ячейку на несколько частей. Переключатели Rows и Columns - разделить на строки и столбцы соответственно. Number of... - на как