2.2. Реализация сайта в Macromedia Dreamweaver 8

1. В программе Macromedia Dreamweaver 8 создадим новую HTML страницу. Для этого в правом столбце меню открываем вкладку File и, используя правую кнопку мыши, выбираем New Folder (создаем папку) и New File, задавая файлу имя index.html. Открывается пустой лист, предлагается указать адрес хостинга и название сайта. Позже изменить название можно дважды нажав на имя сайта в выпадающем меню. Используем режим Конструктора (Design).

Рисунок 4 – Создание корневого каталога сайта

Рисунок 5 – Создание имени сайта

Рисунок 6 – Создание главной страницы

2. В программе Adobe Photoshop создаем пустой документ размером 800*200 пикселей. На белом фоне создаем текстовый слой и пишем название заголовка «#panda music». Применяем форматирование, шрифт и эффект градиента. Ниже создаем еще один текстовый слой и черным шрифтом пишем «МАГАЗИН МУЗЫКАЛЬНОЙ И СВЕТОВОЙ АППАРАТУРЫ». Объединяем слои и сохраняем как “panda1.jpg” Рисунок 7 – Создание шапки сайта

Шапка сайта готова. Далее, подобным образом создаем кнопки для сайта, задавая для каждой кнопки размер 140*30 пикселей. По одинаковым параметрам делаем 6 кнопок с надписями: Главная, Свет, Звук, О нас, Аренда и отдельно делаем кнопку Sale другим шрифтом, для привлечения внимания.

3. Методом перетаскивания помещаем картинки в нашу открытую страницу. После перемещения каждой картинки будет предложено задать ей имя Alternate Name (которое будет отображаться, если картинка не откроется) и ссылку Long Description. На начальном этапе каждой картинке имя кнопки на английском (Главная-index, Свет-light и т.д.), поле ссылка оставляем пустым.

Рисунок 8 – Создание имени картинки

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

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

Рисунок 9 – Готовая шапка сайта

4. Следующим шагом внутри папки с сайтом создаем еще несколько страниц html, задавая им соответствующие имена (light, sound и другие)

Главная страница храниться в файле с именем index.html. В именах файлов остальных страниц использовать только латинские символы, отражая смысловое содержание страницы.

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

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

Теперь мы можем проверить работоспособность ссылок при помощи браузера.

Для сохранения большого количества страниц одновременно используем File => Save All.

6. Заполнение страниц. На главной странице размещаем приветствие и краткую информацию о магазине. На вкладке Свет (light.html), Звук (sound.html) и Аренда (rent.html) размещаем таблицы, в ячейках заполняем информацию о соответствующем товаре. Таблицы в Dreamweaver редактируются подобно процессору MS Word.

В меню Insert выбираем Table. Появляется окно, в котором задаем количество строк (rows) и колонок (column), чуть ниже – автоматическое положение заголовка. В созданном сайте был реализован заголовок сверху (top). Добавлять столбцы и строки можно в меню Insert => Table Objects.

Рисунок 10 – Создание таблиц

Теперь, когда оформили список товаров магазина нужно оформить вкладки О НАС и SALE.

Во вкладке О НАС размещаем информацию о предприятии и сферу деятельности, а так же адрес, схему проезда и контактный телефон.

Во вкладке SALE располагаем информацию об актуальных акциях магазина. Мы выбираем две акции, делаем для них баннеры и размещаем на других страницах.

Рисунок 11 – Добавление баннеров

Поместить баннер так, чтобы он был «в тексте» можно кнопкой на нижней панели Align. Выставляем значение Right для правого и Left для левого баннера. Центральный располагается автоматически согласно форматированию впереди идущего текста. Его положение так же редактируется на нижней панели.

7. Баннер можно изготовить несколькими способами. Например, можно использовать Macromedia Flash. Этот пакет довольно громоздкий, но дает огромное пространство для работы.

Для создания анимации существует множество программных средств. К ним можно отнести и «облачные» средства работы. «Облачными» называют средства, доступ к которым осуществляется через веб-интерфейс и вычислительные процессы происходят на удаленных серверах под контролем пользователя. Основными преимуществами таких приложений является их быстродействие и бесплатность. Требуется сборка gif-анимации в единый файл из отдельных изображений, для этого существует такое приложение, как gifovina.ru.

Рисунок 12 – Страница приложения Gifovina

В Adobe Photoshop, создается документ требуемых размеров, на белом фоне располагаем интересующий нас текст. Суть анимации будет состоять в подсветке текста. Применяем различные эффекты к тексту и сохраняем его в исходном виде под названием 1.jpg, не закрывая кадр в программе. Далее применяем эффект подсветки текста. Можно выбрать любой доступный цвет, например зеленый. Выставляем уровень подсветки на 20%. Сохраняем как 2.jpg. Повторяем действия, прибавив к уровню подсветки еще 20%. Цикл повторяется до тех пор, пока уровень подсветки не достигнет 100%. Далее в браузере открываем сайт http://gifovina.ru/ и, следуя инструкциям собираем покадрово требуемую анимацию. Сначала в прямом порядке (от 1 до 6), а потом в обратном (от 6 до 1). Создастся эффект зажигания и затухания картинки. Время каждого кадра примерно 0.3 секунды. Теперь можно сохранить файл. Форматирование автоматически будет gif. Копируем его в папку с сайтом и так же как обычную картинку вставляем в сайт.

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