Регистрация сайта помогает предотвращать появление нерабочих ссылок, автоматически обновлять на сайте все файлы, если тот или иной файл был перемещен или переименован. Панель Site Manager позволяет проводить разнообразные операции с сайтами, такими как Find and Replace, которая приводит к заметному увеличению производительности. Другое ключевое преимущество панели Site Manager заключается в том, что она содержит встроенные средства для загрузки файлов на сервер. Существует даже возможность синхронизации локальных и удаленных файлов.

1. Создайте на жестком диске папку dw_2007. В ней будет храниться локальная версия сайта.

2. Поместите внутри dw_2007 папку enisey_1  (со всем содержимым) расположенную в папке doc_for_4/web. Затем переименуйте папку в enisey.

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

3. Запустите Dreamweaver: выберите Пуск, Программы, Macromedia, Dreamweaver MX 2004

4.  Выберите в меню Site, Manage Sites, нажмите New, Site, выберите вкладку Basic.

5. В единственное текстовое поле на экране введите Enisey Tours и нажмите Next.

6. На экране Editing Files, Part 2 выберите No, I do not want to use a server technology. (Нет, я не хочу использовать серверную технологию). Нажмите Next.

7. На следующем экране выберите первый вариант Edit local copies on my machine, then upload to server when ready (recommended) (Отредактируйте локальные копии и по завершении отправьте их на сервер).

8. Щелкните на значке папки, расположенной справа от поля Where on your computer do you want to store your files (Где на вашем компьютере вы предполагаете хранить файлы?). Внутри папки dw_2007 выберите папку enisey, откройте ее,  нажмите Сохранить, нажмите Next.

9. На следующем экране в раскрывающемся списке выберите вариант None, нажмите Next. Просмотрите итоги регистрации и нажмите Done.

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

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

10. Выберите надпись Site – Enisey Tours, МП, выберите Turn off Read Only. Значки в виде замка рядом с файлами сайта будут удалены. Теперь сайт можно изменять.

До улучшения сайта Enisey Tours, создадим страницу контактов.

11. На панели Files  выберите contact_text.txt, М2. Если панель не отображается, необходимо в меню Window выполнить команду Files.

Этот файл не является HTML-документом, в нем нет HTML-тегов. Если открыть его в браузере, форматирование будет отменено и он будет преобразован в один большой абзац. Причина этого в том, что браузеры игнорируют пустую область: переходы на новую строку, пробелы  и символы табуляции. Чтобы пустое пространство, обозначенное на странице, отображалось в браузере, применяется тег абзаца <p>.

12. Щелкните в любом месте текста и выберите Edit, Select All. Затем выберите Edit, Copy, чтобы поместить текст в буфер обмена.

13. На панели Files  выберите about.htm, М2. Чтобы увидеть, как отображается страница, выберите Design. Эта страница будет использоваться в качестве основы.

14. В меню File выполните команду Save As и присвойте файлу имя contact.htm.

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

16. Поместите мигающий курсор в теперь пустой области страницы и переключитесь в комбинированный режим, нажав кнопку Split.

17. В списке Format на панели Property Inspector выберите команду Paragraph. В режиме кода теги <h1></h1> будут заменены тегами <p></p> .

18. Если между тегами <p></p> в режиме кода появится тег <br>, следует удалить и его.

19. Не перемещайте курсор, оставив его между <p> и </p> в области режима кода, выберите Design, выполните Edit, Paste.

20. В режиме Design поместите курсор между Установите связь с агентом Enisey Tours и Если вы заинтересованы, нажмите клавишу Del, чтобы удалить разрывы строк, а затем Enter. Dreamweaver разделит текст на два абзаца и поместит каждый из них между тегами <p> и </p>.

21. Вставьте разрыв абзаца перед каждым из следующих слов: по почте, Enisey Tours, 3-09, Красноярск, по Email, pelmeni134@narod.ru, (3912), Image. По завершении этого шага содержимое основной области окна будет разбито на десять абзацев.

22. В режиме Design поместите курсор внутри первого абзаца Установите контакт с агентом Enisey Tours. В меню Format на панели Inspector Property выберите Heading 1. В режиме Code тег <p> для этого абзаца окажется заменен на тег <h1>, который отмечает заголовок первого уровня.

23. Заголовок страницы находится довольно близко к баннеру. В режиме Code между открывающим тегом <h1> и словом Установите  введите <br>, чтобы создать разрыв строки.

24. В режиме Design поместите курсор перед Если вы заинтересованы и на панели Insert в категории Common щелкните на кнопке Images  Следует обратить внимание, что справа от кнопки Images есть маленькая треугольная стрелка, с помощью которой можно раскрыть раскрывающийся список. При щелчке на стрелке обнаружится множество других связанных с изображениями элементов.

25. В диалоговом окне Select Image Source выберите файл fountain_versailles.jpg, расположенный в папке images. Нажмите OK.

26. Не снимая выделения с изображения, на панели инспектора свойств измените тип выравнивания для изображения в меню Align на Left.

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

28. В диалоговом окне Insert Table задайте 2 строки, 2 столбца, установите ширину таблицы (Table width) равной 400 пикселам, толщину границы, равной 1. Укажите расстояние между границами ячеек и их содержимым (Cell padding) равным 3, а расстояние между ячейками (Cell spacing) – 0. В текстовом поле Summary раздела Accessibility (Доступность) введите контактную информацию для связи с Enisey Tours. Нажмите OK.

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

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

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

32. Поместите курсор перед 3-09, и нажмите Backspace, чтобы удалить разрыв абзаца, отделяющий слова 3-09 от Enisey Tours, – они должны находиться в одной строке. Оставьте курсор в месте объединения строк и, удерживая нажатой клавишу Shift, нажмите Enter. В то время как нажатие Enter приводит к возникновению нового абзаца (<p>), нажатие Shift+Enter приводит к вставке символа разрыва строки (<br>).

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

35. Удалите пустое пространство между строками с указанием телефона и адреса электронной почты в правой ячейке. Создание таблицы завершено.

36. Поместите курсор перед словами Image и нажмите Backspace нужное количество раз до тех пор, пока подпись к изображению не окажется точно под таблицей.

37. Трижды щелкните в любом месте подписи к изображению, чтобы выделить ее. Затем на Property Inspector выделите ее курсивом. При форматировании используется  <em>, а не <i>.

38. Сохраните contact.htm. Итак, создание новой страницы закончено.

Изучим код для выявления возможных дефектов.

39. Дважды щелкните на файле index.htm, чтобы открыть его.

40. Включите нумерацию строк в режиме Code: выберите View, Code View Options. Line Numbers.

41. Определите, какая версия HTML используется в документе: перейдите к строке 1.

Код документа относится к версии HTML 4.01 transitional. Она до сих пор поддерживается во всех распространенных браузерах. Но, эта версия HTML была заменена стандартом XHTML, последующие версии браузеров могут перестать поддерживать документы, подготовленные с помощью этой версии.

42. Перейдите к строке 32. Расположен тег <br>. Это один из сотен элементов на сайте, которые будут изменены позже.

XHTML кардинально преобразует HTML, изменяя некоторые правила кодирования. Одно такое изменение заключается в том, что все элементы должны быть закрытыми. В HTML 4 допускалось использование пустых элементов. К пустым элементам относятся те, которые не имеют закрывающих тегов или не содержат ничего между открывающим и закрывающим тегами. К пустым тегам относятся теги <br>, <hr>, <input> и <img>. Для того, чтобы изменить пустые теги надлежащим образом, следует просто добавить перед закрывающей угловой скобкой пробел и косую черту, так что <br> преобразуется в <br />.

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

44. Проверьте устаревший HTML-код (строка 21). В строке содержится следующий код:

<p><b><font color="#505748" size="4">Изучите сайт</font></b></p>

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

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