voliuf.narod.ru

1.Введение в Newland Tours

Внимание! Для работы с этим курсом необходимы учебные файлы, которые Вы можете загрузить

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

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

Рис. 1.1. Главная страница сайта Newland Tours смотрится совсем неплохо, но для обновления некоторых ее разделов, в частности, еженедельной колонки "Traveler’s Journal", находящейся справа, потребуется немало усилий
различия между веб-браузерами, теперь включающими вспомогательные технологии для миллионов пользователей, сталкивающихся с ограничениями, которые предъявляются к аппаратным средствам, стали настолько явными, что простой проверки страницы в веб-браузерах Netscape и Internet Explorer зачастую оказывается недостаточно;
современные веб-узлы должны соответствовать нуждам пользователей и, в частности, в реальном времени реагировать на их действия;
сегодня дизайнеры и разработчики часто вынуждены создавать системы управления контентом, которые упрощают работу по обновлению данных на сайтах не слишком продвинутым в техническом плане сотрудникам компаний. Для поддержания работы веб-узлов сотрудники фирм используют готовые веб-формы.

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

Решением этих проблем стал целый ряд технологических разработок в области веб-дизайна, к числу которых, безусловно, можно отнести каскадные таблицы стилей (CSS), ColdFusion, ASP, SQL, серверы баз данных, XHTML, DHTML, XML, веб-сервисы, ADO, CDO, JavaScript, Flash, PHP, Java, .NET, XSLT и многое другое. Программное обеспечение, подобное программе Dreamweaver MX 2004 компании Macromedia, разрабатывалось таким образом, чтобы позволить создавать веб-сайты с использованием указанных технологий. Но для профессионала, блестяще владеющего языком разметки HTML, натиск технических наработок может оказаться таким же проблематичным, как и сами проблемы, на решение которых направлены эти новшества.

Уже сегодня владение многими из этих технологий считается частью базового набора навыков веб-разработчика. Целью книги является оказание помощи в приобретении этих навыков. В процессе реализации основного проекта книги статичный веб-сайт преобразуется в интерактивный, соответствующий специальным стандартам. При этом сайт довольно просто поддерживать в актуализированном состоянии. Сайт принадлежит виртуальному туристическому агентству Newland Tours. Ко времени завершения проекта посетители сайта смогут легко и быстро находить нужные ресурсы. Более того, при желании любой владелец сайта сможет обновлять его без знания HTML. Это претенциозные, но вполне достижимые задачи; а благодаря инструментам и среде разработки Dreamweaver их гораздо проще решить, чем может показаться на первый взгляд.

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

Регистрация статичного сайта

Изначально статичный сайт Newland Tours построен на основе HTML-документов. По этой причине несложно открыть сайт в Dreamweaver и сразу начать с ним работу.

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

Регистрация сайта дает ряд преимуществ, многие из которых несложно заметить. Она помогает предотвращать появление нерабочих ссылок, автоматически обновлять на сайте все файлы, если тот или иной файл был перемещен или переименован. Панель Site Manager (Управление сайтом) позволяет проводить разнообразные операции с сайтами, такими как Find and Replace (Найти и заменить), которая приводит к заметному увеличению производительности. Другое ключевое преимущество панели Site Manager (Управление сайтом) заключается в том, что она содержит встроенные средства для загрузки файлов на сервер (в том числе и FTP), и это дает возможность размещать файлы в сети в любое время одним щелчком мыши. Существует даже возможность синхронизации локальных и удаленных файлов (расположенных соответственно на жестком диске и на промежуточном сервере [staging server]), чтобы убедиться, что последние версии файлов расположены в нужном месте.

В этом упражнении в диалоговом окне Site Definition (Определение сайта) будет зарегистрирован постоянный статичный сайт. Этот процесс потребует немного больше усилий, чем присвоение сайту имени и указание его расположения на локальном диске. Через несколько уроков, после ряда необходимых приготовлений, в этом же диалоговом окне будет зарегистрирован динамичный сайт. Зарегистрировать динамичный сайт несколько сложнее, и на начальном этапе лишние сложности могут привести к негативному результату. К счастью, данные, заданные при регистрации сайта, никогда не поздно изменить. Поэтому регистрация статичного сайта и работа с ним не принесут никакого вреда

Создайте на жестком диске новую папку и назовите ее dw_dynapps.
В ней будет храниться локальная версия сайта.
Поместите внутри dw_dynapps папку newland (со всем содержимым) расположенную на компакт-диске в папке Lesson01/Start.
Довольно часто в реальной жизни заказчик просит провести модернизацию уже существующего сайта. При каждом радикальном или существенном изменении рекомендуется создать резервную копию сайта и работать с ней. Нельзя напрямую вносить правки в готовый сайт, к которому открыт публичный доступ.
Откройте Dreamweaver MX 2004.
После того, как файлы станут видимыми в Dreamweaver, следует редактировать их только в этой программе. HTML-файл может быть открыт в любом текстовом редакторе, а в каждой операционной системе есть свой менеджер файлов, позволяющий перемещать или удалять файлы. Но следует избегать использования этих инструментов, поскольку любые изменения нарушат корректную работу панели Site Manager (Менеджер сайтов), что может привести к появлению неработоспособных ссылок. Поэтому после размещения файлов на сайте следует запускать Dreamweaver и не пытаться изменять их при помощи других средств.
После запуска программы Dreamweaver на появившейся изначально странице в разделе Create New (Создать новый) щелкните на ссылке Dreamweaver Site.
Вы вправе воспользоваться альтернативным вариантом – выполните в меню Site (Сайт) команду Manage Site (Управление сайтом) и нажмите кнопку New (Создать).

Несмотря на то, что файлы находятся на жестком диске, Dreamweaver их еще не видит. Регистрация сайта позволяет Dreamweaver увидеть файлы, а после этого управлять ими. Регистрация производится в диалоговом окне Site Definition (Определение сайта). Если диалоговое окно выглядит не так, как на представленном ниже рисунке, то, скорей всего, выбран расширенный режим регистрации. Чтобы активировать обычный режим, следует щелкнуть на вкладке Basic (Базовое).
В единственное текстовое поле на экране введите слова Newland Tours и нажмите Next (Далее).
В обычном режиме диалогового окна Site Definition (Определение сайта) применяется Мастер, предлагающий ответить на ряд вопросов с вариантами ответов. В предыдущих версиях Dreamweaver использовалось более сложное диалоговое окно.

Для работы с прежним вариантом диалогового окна Site Definition (Определение сайта) следует щелкнуть на вкладке Advanced (Дополнительно).
На экране Editing Files, Part 2 (Редактирование файлов, часть 2) выберите вариант "No, I do not want to use a server technology." ("Нет, я не хочу использовать серверную технологию"). Нажмите Next (Далее).
Серверные технологии будут задействованы в этой книге позднее. Но выбранный на данный момент вариант No позволяет пропустить несколько сложных шагов.
На следующем экране выберите первый вариант "Edit local copies on my machine, then upload to server when ready (recommended)" ("Отредактируйте локальные копии и по завершении отправьте их на сервер (рекомендуемый)").
После выполнения этой операции на сайте всегда будет два набора файлов: локальный (обычно расположенный на жестком диске, хотя при желании его можно поместить и в сетевую папку) и удаленный (как правило, находящийся на сервере). Выбранный вариант обеспечивает безопасность, поскольку всегда имеется, как минимум, одна резервная копия файла. Более того, это значит, что файлы, с которыми ведется работа, будут храниться на жестком диске локального компьютера, к которому нет общего доступа.

При создании большинства сайтов, выполненных на высоком профессиональном уровне, применяется трехуровневая схема. Все рабочие файлы локального сайта содержатся на жестком диске разработчика. На промежуточном сервере есть зеркальный сайт (так называемое "зеркало"), используемое только для тестирования и разработки. Посетители никогда не видят содержимого промежуточного сервера, и в то же время он является реально действующим веб-сервером, почти по всем параметрам совпадающим с рабочим сервером (production server). На рабочем сервере размещена общедоступная версия сайта. Здесь следует размещать только прошедшие тестирование, отредактированные, отлаженные и апробированные файлы.
Щелкните на значке папки, расположенной справа от поля "Where on your computer do you want to store your files" ("Где на вашем компьютере вы предполагаете хранить файлы?"). Внутри папки dw_dynapps найдите вложенную папку newland и нажмите Select (Выбрать), чтобы вернуться в диалоговое окно Site Definition (Определение сайта).
На этом шаге определяется место для локального сайта, где и будут происходить все дальнейшие действия. Все изменения после работы с файлами будут сохраняться на локальном сайте. Локальный сайт обычно недоступен для посетителей. Это означает, что если во время работы на сайте временно возникнут какие-либо неполадки, никакого вреда не будет.
На следующем экране в раскрывающемся списке выберите вариант None.
Обычно в качестве удаленного сайта выбирается либо промежуточный сервер, либо рабочий сервер. При работе с динамическим контентом, управляемым базой данных, промежуточный сервер абсолютно необходим.

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

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

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

Очевидно, что такое состояние файлов не требуется, поскольку суть работы Dreamweaver заключается в изменении файлов. Файлы доступны только для чтения, поскольку они были скопированы с компакт-диска, который, в свою очередь, также является доступным только для чтения (в действительности, именно это обозначает часть RO (read-only) в аббревиатуре CD-ROM). Если развернуть папки Fireworks или images, что рядом со всеми файлами в них тоже существует значок замка.

Прежде чем приступить к работе с файлами, следует отключить состояние "только для чтения".
Поместите указатель мыши на значке папки верхнего уровня (обозначенной надписью Site – Newland Tours) и щелкните правой кнопкой мыши (Windows) или кнопкой мыши с одновременным нажатием клавиши (Control) (Macintosh), чтобы открыть контекстное меню. В этом меню выберите пункт Turn off Read Only (Отключить опцию "Только для чтения").
Значки в виде замка рядом с файлами сайта будут удалены. Теперь сайт зарегистрирован, и его можно изменять.

Создание страницы контактов

Как часто случается с сетевыми проектами, прежде чем вплотную заняться улучшением сайта Newland Tours, требуется уделить внимание более срочному делу: поскольку на сайте отсутствует страница контактов, ее нужно создать заново.

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

Цель этого небольшого упражнения – показать основные способы работы в среде Dreamweaver. Оно не служит исчерпывающим руководством по разработке статичных веб-страниц. Для этого, в значительной мере, предназначены книги "Macromedia Dreamweaver MX 2004: Учебный курс из первых рук" (Macromedia Press) или "Macromedia Dreamweaver MX 2004: быстрый старт в среде визуальной разработки" (Macromedia Press/Peachpit).

На панели Files (Файлы) дважды щелкните на файле contact_text.txt, чтобы открыть его в Dreamweaver. Если панель Files не отображается, необходимо в меню Window (Окно) выполнить команду Files (Файлы).

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

Файл не является HTML-документом и содержит открытый текст (plain text). В нем нет HTML-тегов, и хотя в программе Dreamweaver текст выглядит отформатированным (если открыть его в веб-браузере) форматирование будет отменено, и он будет преобразован в один большой абзац. Причина этого в том, что браузеры игнорируют пустую (свободную) область: переходы на новую строку, пробелы (свыше одного пробела, предназначенного для отделения слов друг от друга), и символы табуляции. Чтобы пустое пространство, обозначенное на странице, отображалось в браузере, применяются HTML-теги, такие как тег абзаца (). В последующих шагах будет создана копия существующей страницы сайта (about.htm), – ее содержимое будет заменено на содержимое текстового файла, которое затем будет отформатировано при помощи HTML, после чего страница будет сохранена под именем contact.htm.

На панели инструментов View (Вид) выбрана кнопка Code (Код), а кнопки Split (Режим разделения) и Design (Дизайн), расположенные рядом, недоступны. Поскольку в документе отсутствует HTML-разметка, Dreamweaver не может открыть его в режиме дизайна. В этой книге придется часто переключаться между режимами кода Code (Код) и дизайна Design (Дизайн).
Щелкните в любом месте текста и в меню Edit (Правка) выполните команду Select All (Выделить все). Затем в меню Edit (Правка) воспользуйтесь командой Copy (Копировать), чтобы поместить весь текст в буфер обмена.
Теперь текст готов к размещению в целевом документе, однако целевого документа пока не существует.
На панели Files (Файлы) дважды щелкните на документе about.htm, чтобы открыть его. Чтобы увидеть, как отображается страница, следует щелкнуть на кнопке Design (Дизайн).
Эта страница будет использоваться в качестве основы для создания нового документа.
В меню File (Файл) выполните команду Save As (Сохранить как) и присвойте файлу имя contact.htm.
Эту копию файла about.htm необходимо изменить. Чтобы не переписать исходную версию файла, для создания копии и присвоения ей нового имени применяется команда Save As (Сохранить как).

На навигационной панели каждой страницы присутствует кнопка Contact An Agent (Контакт с агентом). При щелчке на этой кнопке загружается страница contact.htm, которой до этого момента не существовало.
Перемещая указатель мыши, выделите все содержимое страницы About Newland Tours, включая надпись к изображению. Нажмите клавишу (Del).

Это содержимое относится к странице about.htm. Его следует заменить содержимым из буфера обмена.

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

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

В режиме кода курсор расположен внутри тега <h1>. Браузер форматирует содержимое тега <h1> как заголовок 1 (первого) уровня. На панели Property Inspector (Инспектор свойств), расположенной ниже диалогового окна, в меню Format (Формат) выбран пункт Heading 1 (Заголовок 1). Другими словами, панель инспектора свойств отображает то же, что и в режиме кода: место, в котором расположен курсор, отформатировано в виде заголовка первого уровня. Если теперь вставить на страницу содержимое буфера обмена, оно будет отформатировано в виде заголовка 1 уровня.

В данном случае корректнее форматировать текст при помощи абзацев, задаваемых тегом .
В раскрывающемся списке Format (Формат) на панели Property Inspector (Инспектор свойств) выберите команду Paragraph (Абзац).
В режиме кода теги <h1></h1> будут заменены тегами . Теперь, если вставить содержимое буфера обмена, оно будет отформатировано в виде обычного абзаца.
Если между тегами в режиме кода появится тег , следует выделить и удалить его.

Этот тег может остаться от документа about.htm, – в зависимости от того, каким образом было выделено и удалено содержимое исходной страницы.
Не перемещайте курсор, оставив его между тегами и в области режима кода, и выполните в меню Edit (Правка) команду Paste (Вставить).
Текст из файла contact_text.txt будет вставлен в документ и отформатирован тем же образом, что и исходный файл. Если сравнить текст и код страницы в режимах дизайна и кода, то можно заметить, что программа Dreamweaver автоматически вставила символы для принудительного перехода на следующую строку ( ), чтобы отобразить содержимое по абзацам.

Теперь можно приступить к форматированию содержимого.

Форматирование страницы контактов

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

В режиме Design (Дизайн) поместите курсор между надписями Contact a Newland Tours Agent (Установите связь с агентом Newland Tours) и If you are interested (Если вы заинтересованы), трижды нажмите клавишу (Del), чтобы удалить разрывы строк , а затем – (Enter) (Windows) или (Return) (Macintosh).
Dreamweaver разделит текст на два абзаца и поместит каждый из них между тегами и .
Повторите шаг 1, чтобы вставить разрыв абзаца перед каждым из следующих слов: By Mail, Newland Tours, 123 Wharton, New York, By Email, info@newlandtours.com, (555) и Image.
По завершении этого шага содержимое основной области окна будет разбито на десять абзацев. Может быть, пока текст выглядит не слишком эффектно, но, по крайней мере, он уже определенным образом отформатирован.
В режиме Design (Дизайн) поместите курсор внутри первого абзаца Contact a Newland Tours Agent (Установите контакт с агентом Newland Tours). В меню Format (Формат) на панели Inspector Property (Инспектор свойств) выберите пункт Heading 1 (Заголовок 1).
Заголовок страницы примет соответствующий внешний вид. В режиме Code (Код) тег для этого абзаца окажется заменен на тег <h1>, который отмечает заголовок первого уровня.

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

.
В режиме Code (Код) между открывающим тегом <h1> и словом Contact введите , чтобы создать разрыв строки.
Чтобы увидеть результаты разметки в режиме Design (Дизайн), следует щелкнуть в соответствующей области окна документа.
В режиме Design (Дизайн) поместите курсор перед текстом If you are interested (Если вы заинтересованы) и щелкните на кнопке Images (Изображения) в категории Common (Общий) на панели Insert (Вставка).
В результате, изображения встроены в веб-документ вместе с HTML-кодом и текстом, – так что следует аккуратно выбирать место для вставки изображения.

Следует обратить внимание, что справа от кнопки Images есть маленькая треугольная стрелка, с помощью которой можно раскрыть раскрывающийся список. При щелчке на стрелке обнаружится множество других связанных с изображениями элементов, которые можно вставить из этого списка, включая заполнители изображений, интерактивные и переключающиеся изображения, так называемые активные точки (hotsports), предназначенные для активации функций или объектов и т. д. В книге эти элементы использоваться не будут, но важно знать об их существовании. Остальные кнопки на панели Insert (Вставка) скрывают сходные команды.
В диалоговом окне Select Image Source (Выбор источника изображений) выберите файл fountain_versailles.jpg, расположенный в папке сайта images. Нажмите OK.
Помимо того, что это диалоговое окно позволяет выбрать изображение, так, чтобы Dreamweaver мог сгенерировать к нему корректный путь от страницы contact.htm, оно содержит несколько других возможностей и настроек. К ним относятся предварительный просмотр изображений, информация об объеме и размерах изображения, а также опции, позволяющие выбрать тип ссылки: относительно документа или корня сайта (по умолчанию выбран тип, задаваемый относительно документа, который и нужен в данный момент).

В верхней части диалогового окна есть опция Select File Name From (Выберите имя файла из). Для нее существует два варианта выбора: File system (Файловая система) (указание файла, расположенного на компьютере) или Data sources (Источники данных) (динамический запрос адреса из базы данных). В книге будут задействованы оба варианта. На этом шаге нужно выбрать вариант File system.
Не снимая выделения с добавленного на веб-страницу изображения, на панели инспектора свойств измените тип выравнивания для изображения в меню Align (Выравнивание) на Left (По левому краю).
По умолчанию страница обычно выравнивается по левому краю одной строки текста, в то время как остальной текст располагается ниже изображения. В результате, на странице остается много свободного места. Если выбран вариант Left (По левому краю) (или, наоборот, Right [По правому краю]), то будет происходить обтекание текстом изображения.

Поместите курсор перед словами By Mail (Почтой) и нажмите кнопку Table (Таблица) на панели Insert (Вставка).
Выполненные выше действия являются подготовительными перед добавлением таблицы, содержащей информацию о том, как связаться с компанией Newland Tours. Таблицы применяются для отображения табличных данных. Кроме того, таблицы можно использовать для разметки страницы. В последующих шагах будет создана простая таблица из двух столбцов, содержащая почтовый адрес, адрес электронной почты и телефон.
В диалоговом окне Insert Table (Вставка таблицы) задайте две строки, 2 столбца, установите ширину таблицы (Table width) равной 400 пикселам, толщину границы, равной 1. Укажите расстояние между границами ячеек и их содержимым (Cell padding) равным 3, а расстояние между ячейками (Cell spacing) – 0. В текстовом поле Summary (Итоги) раздела Accessibility (Доступность) введите контактную информацию для связи с Newland Tours. Нажмите OK.
В результате, появится таблица, состоящая из 4 ячеек шириной 400 пикселов. Итак, параметр Cell padding указывает на расстояние между границей ячейки и ее содержимым, а параметр Cell spacing – на расстояние между ячейками. При вводе информации в текстовое поле Summary (Итоги), Dreamweaver добавит к тегу <table> атрибут summary, который позволяет синтезаторам речи дать людям с ослабленным зрением краткую справку о содержимом таблицы.
Трижды щелкните на словах By Mail (Почтой), чтобы выделить весь абзац (состоящий из этих двух слов). Перетащите выделенный абзац в верхнюю левую ячейку таблицы. Таким же образом трижды щелкните, чтобы выделить слова By Email or Phone (По электронной почте или по телефону), а затем перетащите их в верхнюю правую ячейку. Выделите и переместите три абзаца с почтовым адресом в нижнюю левую ячейку, а электронный адрес и телефон в – нижнюю правую ячейку.
Dreamweaver переместит оба текстовых блока и все окружающие их теги в соответствующие ячейки.

Следует обратить внимание, что между строками адреса телефона и электронного адреса много свободного места.
Поместите курсор перед словами "123 Wharton Street", и нажмите клавишу (Backspace) (Windows) или (Del) (Macintosh), чтобы удалить разрыв абзаца, отделяющий слова "123 Wharton Street" от "Newland Tours", – они должны находиться в одной строке. Оставьте курсор в месте объединения строк и, удерживая нажатой клавишу (Shift), нажмите (Enter) (Windows) или (Return) (Macintosh).
В то время как нажатие (Enter) или (Return) приводит к возникновению нового абзаца (), нажатие (Shift)+(Enter)/(Return) приводит к вставке символа разрыва строки ( ).
Повторите шаг 11, чтобы удалить лишние пробелы между строками с названиями улицы, города и штата, а также почтовым индексом в левой ячейке. После этого таким же способом удалите пустое пространство между строками с указанием телефона и адреса электронной почты в правой ячейке.
Создание таблицы завершено. Осталось удалить лишние пробелы под таблицей (если это нужно) и отформатировать заголовок с помощью курсивного начертания.
Поместите курсор перед словами "Image: This photo…" ("Изображение: эта фотография…") и нажмите (Backspace) (Windows) или (Delete) (Macintosh) нужное количество раз до тех пор, пока подпись к изображению не окажется точно под таблицей.
После удаления исходных абзацев с адресом и перемещения их внутрь таблицы осталось свободное место. В коде эти пустые области получены при помощи блоков . Таким образом Dream-weaver создает пустые абзацы. Однако вспомним, что в HTML запрещено создавать открывающие и закрывающие теги , не помещая ничего между ними. Поэтому Dreamweaver использует символ неразрывного пробела в качестве заполнителя абзаца. Так как HTML игнорирует пустые пространства в коде, то в качестве символа пробела применяется символьный объект , который обозначает неразрывный пробел.
Трижды щелкните в любом месте подписи, чтобы выделить ее. Затем на панели Property Inspector (Инспектор свойств) выделите ее курсивом.

При форматировании текста с помощью курсивного начертания Dreamweaver использует тег , а не тег . Значение этой замены будет раскрыто позже.
Сохраните contact.htm.
Итак, создание новой страницы закончено. Теперь желательно опубликовать страницу на веб-сервере, но в данный момент не следует об этом беспокоиться. Проблема с отсутствующей страницей контактов решена, теперь можно обратить внимание на более претенциозную задачу по изменению сайта.

Оценка сайта: код

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

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

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

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

Дважды щелкните на файле index.htm, чтобы открыть его.
В зависимости от того, выполнялось ли упражнение по созданию страницы контактов, документ будет отображаться либо в режиме Design (Дизайн) (если упражнение не выполнялось), либо в режиме Split (Режим разделения) (если упражнение выполнялось).

Прежде, в конце 1990-х, когда рынок HTML-редакторов был переполнен редакторами, которые превосходно работали в режиме Code (Код), но плохо в режиме Design (Дизайн), появление Dreamweaver, отлично работающего в обоих режимах, привело к кардинальным переменам. Сейчас, годы спустя, Dreamweaver остается единственным подходящим редактором в тех случаях, когда требуется использовать оба указанных режима. Многие дизайнеры, знающие, что Dreamweaver генерирует корректный HTML-код самостоятельно, ограничивались созданием сайтов в режиме Design (Дизайн) и никогда не беспокоились о коде.

Но роскошь работы только в режиме Design (Дизайн) осталась в прошлом.

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

Комбинированный режим Split необходим для работы с динамичными сайтами. Несмотря на то, что многие задачи Dreamweaver позволяет выполнять при помощи моделей поведения серверов, управляемых через визуальный интерфейс и встроенный визуальный SQL-построитель, все равно остается необходимость редактировать код вручную. Помимо этого, некоторые изменения намного быстрее вносить в режиме кода, чем в режиме дизайна. Другое преимущество заключается в том, что подобный способ позволяет довольно глубоко изучить код. Хотя в этой книге, безусловно, предусмотрено знакомство с HTML, некоторые детали, например, параметры того или иного тега, нередко забываются. Применение режима разделения Split помогает овладеть HTML. С этого момента (и для всех будущих проектов) следует сделать режим разделения режимом по умолчанию. Рекомендуется избегать использования режима кода или режима дизайна по отдельности, если только не будет особой причины сделать так. После того, как нужные действия будут выполнены, следует переключиться обратно в режим разделения.

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

Совет.Другое преимущество работы в режиме разделения заключается в том, что при щелчке на объекте в режиме дизайна, он позволяет с легкостью найти соответствующий фрагмент в режиме кода. Чтобы, скажем, увидеть код для изображения, следует щелкнуть на нем. Соответствующий HTML-код будет выделен в центре области режима кода. Особенно это полезно на страницах, состоящих из сотен строк кода.
При необходимости следует включить нумерацию строк в режиме Code (Код). Для этого следует выполнить команды View\Code View Options\Line Numbers (Вид\Параметры режима кода\Номера строк).

Эта настройка отображает номера строк в режиме кода. Нумерация строк облегчает передачу сообщений об определенных участках кода между несколькими разработчиками. (В этой книге нумерация строк применяется довольно часто.) Вдобавок, она заметно облегчает поиск ошибок, поскольку при обнаружении ошибок ASP и ColdFusion генерируют сообщения, в которых указана строка кода, являющаяся причиной возникновения проблемы.
Определите, какая версия HTML используется в документе (перейдите к строке 1).
В режиме дизайна это задание выполнить сложно, но разделенный режим позволяет сразу же увидеть, что код документа относится к версии HTML 4.01 transitional. Эта информация указана в объявлении, представленном в теге <DOCTYPE> в строке 1. Этот тег сообщает веб-браузеру, какая версия HTML используется в документе, чтобы браузер мог отобразить страницу должным образом. Все корректно сформированные HTML-документы должны включать тег <DOCTYPE> .

Модификация Transitional стандарта HTML 4.01 теперь является устаревшей версией HTML. Она до сих пор поддерживается во всех распространенных браузерах. Но, поскольку эта версия HTML была заменена стандартом XHTML, последующие версии браузеров могут перестать поддерживать документы, подготовленные с помощью этой версии. В уроке 2 сайт будет обновлен до XHTML.

Модернизация до XHTML, безусловно, приводит к более существенным изменениям, чем объявление типа документа с помощью тега <DOCTYPE>. XHTML кардинально преобразует HTML, изменяя некоторые правила кодирования. Одно такое изменение, например, заключается в том, что все элементы должны быть закрытыми. В HTML 4 и более ранних версиях допускалось использование пустых элементов. К пустым элементам относятся те, которые не имеют закрывающих тегов или не содержат ничего между открывающим и закрывающим тегами. К пустым тегам относятся теги , <hr>, <input> и <img>. В XHTML все теги должны быть закрыты. Для того, чтобы изменить пустые теги надлежащим образом, следует просто добавить перед закрывающей угловой скобкой пробел и косую черту (прямой слэш) (/), так что преобразуется в , а <img src="picture.jpg"> – в <img src="picture.jpg" />. В конце строки 32 расположен тег . Это один из сотен элементов на сайте, которые будут изменены позже.
Проверьте код на соответствие настройкам доступности (строки 11 и 12).
В течение нескольких лет многие разработчики пренебрегали потребностями людей с ограниченными возможностями, вследствие чего они не могли пользоваться сайтами. В частности, пользователи с нарушениями зрения не могли просматривать содержимое сайтов. Поскольку основная информация на сайтах представлена в текстах, был разработан специальный тип браузеров, зачитывающий текст содержимого вслух и называемый синтезатором речи. Единственная проблема состоит в том, что они не могут интерпретировать визуальное содержимое, главным образом, изображения. Если изображение несет важную смысловую нагрузку,– как и происходит на большинстве сайтов, пользователи не могут получить доступ к этому содержимому.

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

Для того чтобы выполнить эту задачу, следует добавить параметр к каждому элементу изображения, которое возможно описать строкой текста. Необходимый атрибут – alt. Его следует добавить в каждый тег <img> на странице в следующем виде: alt="Описание изображения". Так называемый экранный диктор зачитывает вслух содержимое атрибута alt, так что пользователь получит информацию об изображении.

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

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

Важнейшая цель при разработке средств доступа заключается в том, чтобы все пользователи имели равный доступ ко всему содержимому сайта. Детальное обсуждение проблем, связанных с расширением возможностей доступа, лежит за пределами рассмотрения этой книги, но подробнее об этом можно узнать на сайте компании Macromedia по адресу: http://www.macromedia.com/macromedia/accessibility/.
Проверьте устаревший или отмененный HTML-код (строка 21).
В строке 21 содержится следующий код:

Explore the Site

Несмотря на то, что эта строка отображается должным образом, и в Dreamweaver, и в браузере, код, тем не менее, является устаревшим и достаточно проблемным.

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

Тег , форматирующий текст с помощью полужирного начертания, является тегом, определяющим внешний вид. Для пользователей, пользующихся услугами экранного диктора, подобное форматирование бессмысленно. Иногда, выделяя что-то посредством полужирного начертания, мы пытаемся сообщить, что выделенные таким образом фрагменты являются наиболее важными по сравнению с остальным текстом. Однако в этом случае текст "Explore the Site" ("Изучите сайт") не представляет особого значения. Это просто заголовок раздела. Таким образом, применение тега позволяет выделить как ключевые фрагменты текста, так и отдельные элементы структуры (в частности, заголовки разных уровней).

Другой не вполне корректный тег во фрагменте – это тег . Этот тег применялся в HTML 3 и более ранних версиях, чтобы разработчики могли определять, как должны выглядеть их документы. С тех пор он был заменен более мощными и эффективными каскадными таблицами стилей. Тег создает значительные проблемы для разработчиков, поскольку прикрепляется только к отдельным блокам текста. Например, чтобы при помощи тега определить внешний вид всех заголовков 2 уровня по всему сайту, следует добавить этот тег к каждому заголовку 2 уровня. Если допустить ошибку, сайт перестанет выглядеть однородным. Еще хуже дела будут обстоять при модификации сайта, когда нужно вручную изменить каждый экземпляр этого тега. Итак, поскольку применение тега приводит к возникновению проблем, все его экземпляры на сайте должны быть удалены.

Подводя итоги, можно сказать, что код устарел и не соответствует современным стандартам. Он не относится к XHTML (как выяснилось в объявлении с использованием тега <DOCTYPE>). Пустые теги в нем не закрыты. Изображения не имеют атрибута alt. Код загружается вместе с тегами, определяющими оформление сайта, такими как и , которые следует заменить. Это не все затруднения, связанные с кодом, но их вполне достаточно для того, чтобы наглядно продемонстрировать пример того, с чем следует бороться.

Может возникнуть и такой вопрос: "В браузере все выглядит замечательно, ну так зачем беспокоиться? Все это так трудно исправлять. Нельзя ли просто проигнорировать это и начать делать динамичный сайт?" На этот вопрос существует несколько ответов.

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

На самом деле, код отображается должным образом не во всех современных браузерах. Следует учитывать возможности пользователей, пользующихся экранным диктором, для которых восприятие изображений неосуществимо. Вдобавок, новые технологии, такие как XSLT (eXtensible Stylesheet Language Transformations), требуют для функционирования соответствия XHTML. Изучение XSLT не является задачей этой книги. Помимо этого, его также вряд ли необходимо применять при создании небольшого сайта, но он может широко использоваться в будущем. С того времени, как была опубликована первая редакция этой книги, на нескольких ведущих сайтах стали использоваться XHTML и XSLT.

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

Оценка сайта: бизнес-процессы

Многие заказчики не подозревают, насколько код их сайта соответствует действующим стандартам, и маловероятно получение большого количества заказов, в которых клиент готов оплатить модернизацию кода от HTML 4.0 до XHTML. В действительности, большинство работ по модернизации сайтов происходит, поскольку текущий сайт больше не соответствует запросам его владельца. Наиболее типичные примеры такого рассогласования устаревших сайтов и потребностями заказчиков могут быть следующими:

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

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

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

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

Продолжая просматривать страницу index.htm, нажмите клавишу (F12), чтобы загрузить сайт в браузере.
Клавиша (F12) автоматически открывает активный файл в браузере. То, что отображается в браузере, часто отличается от того, что отображается в Dreamweaver, особенно при работе над динамическим содержимым, которое нужно регулярно тестировать. Клавиша (F12) – одна из наиболее часто используемых клавиш в Dreamweaver.
Обратите внимание на основную домашнюю страницу.

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

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

Помимо дизайна, на странице существует и другая, довольно значимая проблема. Колонка под названием "Traveler’s Journal" должна обновляться примерно раз в неделю. Иногда обновление этой колонки проводит владелец бизнеса, но чаще это делают агенты по туризму. Не каждый знает, как работать с кодом и загружать файлы на сайт. Кроме того, владелец не желает выдавать пароль для доступа к сайту, позволяющий другим загружать новые страницы на сайт. На данный момент журнал набран в текстовом процессоре и передан одному из агентов по туризму, который знает, как исправлять и загружать на сайт страницы. Но поскольку весь процесс по модификации контента сайта привязан к одному человеку, это не позволяет производить актуализацию содержимого сайта по мере поступления новых данных, особенно, когда агент занят или отсутствует в офисе. Поэтому следует найти для заказчика достаточно простой способ производить регулярное, в частности, еженедельное обновление колонки "Traveler’s Journal" любым работником компании и не в ущерб безопасности сайта.
На панели навигации, расположенной на левой стороне экрана, щелкните на ссылке About Newland Tours.
Кроме мелких проблем со шрифтом, о которых шла речь выше, страница не нуждается в изменениях. Ее содержимое почти никогда не менялось, и клиента она устраивает в ее нынешнем виде. Не считая модернизации кода до XHTML (то есть изменений, которые не будут заметны в большинстве браузеров), это одна из тех страниц, которые не нужно менять.
На панели навигации, находящейся вверху экрана, щелкните на ссылке Find Tours. Прокрутите страницу вверх и вниз, или используйте внутренние навигационные ссылки вверху страницы, чтобы ознакомиться с предлагаемыми турами.
На этой странице можно отыскать множество проблем различного плана.

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

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

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

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

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

Другая проблема, связанная с удобным использованием сайта, состоит в том, что для перемещения от раздела с описанием поездки по национальному парку в Etosha National Park в Намибии к разделу с информацией о путешествиям по Намибии (Namibia) пользователь должен вернуться к самому началу страницы, а потом щелкнуть на ссылке Country Profiles, и прокрутить весь список стран вниз до Намибии. Было бы замечательно создать ссылку в разделе Etosha National Park на раздел с информацией о стране Namibia. Но для этого требуется дополнительный код на статичном HTML.
Вернитесь к панели навигации и щелкните на ссылке Contact an Agent.

Это файл, разработанный прежде в этом уроке взамен утраченной версии (см. рис. вверху следующей страницы).

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

Другая проблема заключается в том, что у клиентов Newland Tours нет автоматически настроенных почтовых клиентов или они четко не представляют себе их работу.

Заказчик хотел бы предоставить посетителям Newland Tours возможность связаться с компанией вне зависимости от настроек почтового клиента. Помимо этого, заказчик стремится найти способ помешать спамерам заполнять почтовые ящики ненужными сообщениями.

Решение, конечно же, заключается в использовании веб-формы. Форма является идеальным вариантом, поскольку она требует от пользователя минимального числа операций и дает возможность скрыть электронный адрес, что помешает спам-роботам (автоматическим программам, которые сканируют сеть, собирая электронные адреса для спамеров) найти электронные адреса сотрудников Newland Tours. Формы также дают возможность отправлять электронный адрес на различные адреса в зависимости от содержимого формы. В частности, если форма позволяет пользователю выбрать конкретный регион, можно создать сценарий, который отправляет данные формы только тому агенту, который занимается этим регионом. Мы лишь артикулировали основные проблемы, так как их решение не является целью данной книги. Тем не менее, после прочтения всей книги у вас будет достаточно знаний и средств, чтобы сделать это.

Взгляд в будущее

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

обновление HTML-кода до XHTML;
упрощение доступа к сайту и создание более удобных условий при работе с ним;
хранение структурированного или часто обновляемого содержимого в базе данных;
предоставление механизмов поиска и фильтрации нужной информации, позволяющих пользователям более легко находить путешествия и регионы;
разработка эффективной веб-формы, с помощью которой пользователи могут связаться с сотрудниками Newland Tours без явного указания адреса электронной почты на странице;
разработка набора веб-форм, позволяющих сотрудникам Newland Tours добавлять, обновлять и удалять информацию, хранящуюся в базе данных (однако следует помнить, что записи, хранящиеся в базе данных, также являются источником материалов, представленных на веб-сайте).

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

В браузере введите адрес: http://www.allectomedia.com/newland_dynamic/
Главная страница должна выглядеть практически так же, как и та, что была открыта в Dreamweaver. Однако ее структура значительно отличается. Например, колонка "Traveler’s Journal" практически мгновенно формируется и форматируется из базы данных. Вдобавок отформатированный текст в этой версии страницы выглядит более привлекательным образом (см. рис. вверху следующей страницы).
Щелкните на ссылке Find Tours на панели навигации, находящейся на левой стороне страницы.

Вместо ожидаемой страницы Find Tours появится экран регистрации. Очевидно, что на предыдущем сайте такого не было. Эта возможность была реализована, поскольку клиенту потребовалось, чтобы пользователи регистрировались до того, как загрузят сайт, так чтобы клиент мог получить необходимые сведения о покупателях, а также имел возможность контактировать с ними по поводу коммерческих предложений и рекламы. Так, для загрузки сайта следует ввести следующие данные:
- адрес электронной почты (Email address), например, osiris@allec-tomedia.com;
- пароль (password) – такой, в частности, как "оsiris".
Примечание. Представленная в адресе электронной почты учетная запись osiris является виртуальной, созданной для того, чтобы пользователи могли получить доступ к сайту без регистрации. На самом деле, такой учетной записи не существует, поэтому просьба не посылать на этот адрес писем.

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

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

Раздел Admin не доступен для рядового пользователя, в частности, имеющего адрес электронной почты osiris@allectomedia.com с учетной записью osiris. Права привилегированного доступа указанного раздела позволяют пользователям изменять содержимое базы данных и управлять большей частью данных на сайте. Естественно, невозможно наглядно представить такой процесс в этой книге! Как будет показано позже, средства управления контентом, использующие веб-формы, позволяют сотрудникам компании Newland Tours обновлять содержимое сайта.

На рисунке вверху следующей страницы представлен пример одной из таких форм. При помощи этой формы сотрудники могут создать новый выпуск колонки "Traveler’s Journal", просто заполнив форму и следуя указаниям на экране. Как только сотрудник нажимает кнопку Submit, введенный текст будет добавлен в базу данных, и сотрудник переместится на главную страницу сайта, а в момент между нажатием кнопки Submit и загрузкой главной страницы он может увидеть обновленную колонку "Traveler’s Journal".

Резюме

В этом уроке вы узнали, как:

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

источник: http://www.INTUIT.ru