-й шаг. Панель навигации

Для этого воспользуйтесь пунктом меню Вставка – Объекты изображения – Панель навигации (рис. 17.19).

В появившемся диалоговом окне нужно заполнить четыре ноля.

1. Первоначальное изображение (Up Image). Через Обзор (Browse) находим нужный файл, например, "выпуклую кнопку" indexl.png. По запросу обязательно сохраняем файл в папке сайта.

Рис. 17.19. Панель навигации

2. Изображение, которое появится при наведении мыши (Over Image). Через Обзор находим нужный файл, например, "нажатую кнопку" index2.png. По запросу обязательно сохраняем файл в папке сайта.

3. Замещающий текст (Alternative text) – название кнопки (желательно, включая ключевые слова) на русском языке.

4. При нажатии перейти на URL-адрес (When Clicked, Go to URL), написать имя странички, на которую будет осуществляться переход (например, index.html).

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

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

Теперь надо создать страницы, которые мы запланировали.

Для создания нового файла можно воспользоваться пунктом меню Файл – Новый (File – New). Однако в новом файле придется заново устанавливать все его свойства, в частности, кодировку, цветовую гамму, макет, навигацию. Для зрительного восприятия сайта лучше, чтобы все его файлы имели одинаковую цветовую гамму и структуру. Поэтому лучше скопировать уже существующий файл index.html нужное число раз, а затем переименовать его в uslugi.html, firmahtml, kontakty.html. Перед копированием убедитесь, что файл index.html сохранен – его ярлычок не должен содержать звездочку *. Имена файлов лучше записывать латинскими буквами без специальных символов и пробелов. Копирование, переименование, удаление файлов производится с помощью контекстного меню. Затем из новых файлов можно удалить ненужный текст, оставляя элементы макета, дизайна, навигации, и изменить титул.

Итак, размножаем файл index.html и получаем четыре пока одинаковых файла index.html, uslugi.html, firmahtml, kontakty.html. Открыв их, меняем в них ОГЛАВЛЕНИЕ, оставляя макет с элементами дизайна неизменным.

Проверяем работу сайта в браузере. Наш сайт готов!

Проверить правильность ссылок в файле можно с помощью пункта меню Файл – Проверка страницы (File – Check Page). При работе с большим количеством файлов не забывайте делать подобные проверки.

Проверить все ссылки на сайте можно в панели Файлы с помощью пункта контекстного меню Сайт – Проверка Ссылок (Site – Check Links).

Добавление flash-ролика

Заранее подготовив Flash-ролик в формате swf, добавьте его на любую страницу сайта с помощью пункта меню Вставка – Мультимедия – Flash. Выберите файл swf и обязательно сохраните его в папке сайта. В режиме редактирования ролик будем виден как серый прямоугольник. Сохраните файл. Проверьте работу файла и ролика в браузере.

Добавление Rollover

Ролловер может быть снабжен ссылкой и представляет собой изображение, которое меняется при наведении на него мыши на другое изображение. Добавьте ролловер с помощью пункта меню Вставка – Интерактивные рисунки – Перекатыш (Insert – Interactive Images – Rollover Image) или с помощью кнопки Далее задайте:

• произвольное латинское название (Image Name);

• изображение, которое будет отображаться в начале (Original Image) (например, index_off.gif);

• изображение, которое будет появляться при наведении мыши (Rollover Image) (например, index_on.gif);

• ссылку, на которую будет переход по щелчку мыши (например, index.htm).

Сохраните файл. Проверьте работу файла и ролловера в браузере.

Работа со стилями

Если мы хотим, чтобы определенные стили оформления сразу применялись к определенным фрагментам, можно создать новые стили или переопределить существующие. Работа со стилями организуется с помощью CSS (Cascading Style Sheets – каскадные таблицы стилей). Это формальный язык описания внешнего вида документа, написанного с использованием языка разметки. CSS преимущественно используются как средство описания, оформления внешнего вида веб-страниц, созданных с помощью языков разметки HTML и XHTML.

Работа со стилями осуществляется с помощью пункта меню панели CSS. Создадим новый стиль кнопкой "+" (рис. 17.20).

Рис. 17.20. Создание нового стиля

Если мы хотим, чтобы стиль переопределял тег, то надо включить переключатель Tag (Переопределить HTML-тег) и выбрать из списка нужный тег, например h3. Затем откроется окно определения стиля.

В окне определения стиля можно поменять различные параметры шрифта, фона, абзаца и др. В частности, в разделе Туре (Тип) установите цвет текста, а в разделе Block – выравнивание Text Align (Выравнивание текста) по центру. Завершите работу со стилем, проверьте, что теперь все Heading 3 будут автоматически центрироваться, при этом обычные кнопки выравнивания действовать не будут.

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

Самостоятельно отредактируйте (Edit) стиль тега, задав для него, например, отсутствие подчеркивания Тип Оформление – нет (Туре – Decoration– попе). Поэкспериментируйте с другими параметрами, например, с рамками (Граница – Стиль (Border – Style)). Помните, что изменение пунктов помеченных * будет видно только при просмотре в браузере.

Самостоятельно создайте новый стиль (Текст – Каскадные таблицы стилей – Новый (Text – CSS Styles – New)). Выберите переключатель Класс (Class), задайте параметры. Примените стиль на произвольных фрагментах текста.

Также с помощью стилей возможно изменение оформления ссылок, например, при наведении на них курсора мыши. Такие приемы используются для привлечения внимания. Для этого вызовите Текст – Каскадные таблицы стилей – Новый (Text – CSS Styles – New), выберите переключатель Advanced, поставьте, например, на a:hover (реакция на наведение). Задайте необходимые параметры. Проверьте в браузере.

Работа с библиотекой

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

Например, выделив строку (строки) с e-mail адресом, выберите пункт меню Изменить – Библиотека – Добавить объект в библиотеку (Modify – Library – Add Object To Library). Задайте этому элементу произвольное латинское имя (например, "email"). Возможно, появится предупреждение, так как мы применяли к ссылкам стили, которые, к сожалению, не будут копироваться в другие файлы. В таких случаях лучше делать наоборот – сначала записать элемент в библиотеку, а потом менять стили.

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

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

Работа с метатегами

Обязательно задайте метатеги Ключевые слова (Keywords) и Описание (Description). Метатеги послужат для лучшей индексации сайта поисковыми роботами. Для этого найдите на панели Объекты (Objects) вкладку Заголовок (Head) и воспользуйтесь кнопками – Ключевые слова (Keywords) и – Описание (Description). Задайте через запятую ключевые слова сайта и произвольное описание (Description). Эти же диалоговые окна можно открыть пунк-

том меню Вставка – HTML – Заголовочные Теги (Insert – HTML – Head Tags).

Работа с поведением объектов

Различное поведение объектов при возникновении так называемых событий (наведение или щелчок мыши, нажатие клавиши и т.д.) можно задавать с помощью Поведения (Behaviors). Вызвать соответствующую панель можно с помощью пункта меню Окно – Поведения (Window – Behaviors). Список того, что можно сделать, вызывается кнопкой "+". С помощью Поведения (Behaviors) можно по событию:

• Call Javascript (вызвать ява-скрипт);

• Change Property (изменить свойства объекта);

• Check Browser (определить браузер пользователя и перенаправить на подходящий ему вариант сайта);

• Check Plugin (проверить наличие плагина);

• Control ShockWave or Flash (управлять ShockWave и Flash);

• Drag Layer (переместить слой);

• Go To Url (перейти по ссылке);

• Jump Menu, Jump Menu Go (работать с меню);

• Open Browser Window (открыть новое окно браузера, например, с заданными размерами и без меню, кнопок и пр.);

• Play Sound (воспроизвести звук);

• Popup Message (вывести сообщение);

• Preload Images (загрузить картинки);

• Set Nav Bar Image (изменить картинки Navigation Bar);

• Set Text (вывести текст во фрейме, слое, строке состояния, поле);

• Show-Hide Layers (показать-спрятать слои);

• Swap Image, Swap Image Restore (сменить, восстановить картинку);

• TimeLine (запустить-остановить анимацию);

• Validate Form (проверить данные в форме).

В списке Показать События для (Show Events for) можно указать, на какой браузер вы ориентируетесь, так как разные браузеры поддерживают разный набор функций.

Итак, выделив картинку, добавим ("+" в панели Поведения (Behaviors)) текст для строки статуса (Установить Текст/ Установить Текст для Строки Статуса (Set Text/Set Text of Status Bar)), а также откроем новое окно Открыть окно браузера (Open Browser Window), задав в качестве URL новое (увеличенное) изображение, указав фиксированные размеры окна, не включив в него никакие панели управления (можно

включить, например, лишь возможность изменения размеров окна (Изменение размера вручную (Resize Handles)).

Обратите внимание, что панель Поведения (Behaviors) разделена на две части – События (Events) и Действия (Actions). К событиям относятся:

• наведение указателя мыши на объект (OnMouseOver);

• уход мыши с объекта (OnMouseOut);

• нажатие кнопки мыши (OnMouseDown);

• отпускание кнопки мыши (OnMouseUp);

• щелчок кнопкой мыши (OnClick);

• двойной щелчок (OnDblClick);

• нажатие и удерживание клавиши (On Key Down);

• отпускание клавиши (OnKeyUp);

• нажатие и отпускание клавиши (On KeyPress) и др.

Смена события производится стрелкой. Проверьте, что

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

Публикация сайта

Для публикации сайта на удаленный сервер сначала необходимо настроить параметры доступа к нему (Сайт – Определить Сайт – Редактировать – Информация (Site – Define Sites – Edit – Remote Info)). Установите доступ к серверу (Server Access) no FTP и настройте его параметры:

• FTP Host (FTP-хост) – адрес сервера;

• Host Directory (каталог хоста и каталог на сервере, если необходимо);

• Login (имя пользователя) и Password (пароль).

Теперь на панели Файлы будут доступны кнопки .

Соединиться с удаленным сервером (Connect to Remote Host) для подключения к удаленному серверу, – Получить файлы (Get File(s)) для копирования файлов на локальный диск и – Отправить файлы (Put File(s)) для копирования туда выделенных файлов. При копировании папок они автоматически создаются на сервере.

Также удобно пользоваться командой Сайт – Синхронизация (Site – Synchronize) для обновления информации, т.е. копировать только те файлы, которые были изменены. Синхронизацию можно производить в любом направлении – передавать (Отправить новые файлы (Put Newer Files to Remote)), получать (Получить новые файлы (Get Newer Files from Remote)) и обмениваться (Получить и отправить новые файлы (Get and Put Newer Files)) последними версиями файлов. При желании можно включить функцию удаления с сер-

вера файлов, которые были стерты на локальном диске (при выполнении операции Отправить (Put)), либо удаления с локального диска файлов, которые были стерты на сервере (при выполнении операции Получить (Get)). Чтобы увидеть, какие файлы нуждаются в обновлении, можно воспользоваться командами Правка – Выделить последние версии файлов локального проекта (Edit – Select Newer Local) или Правка – Выделить последние версии файлов удаленного проекта (Edit – Select Newer Remote).

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