Видео уроки, создаём сайт.

К учебнику по Adobe GoLive 6

"Все Технические Моменты Сайтостроения в Видеоформате". Коллекция видеокурсов, которая за 36 часов и 45 минут сделает из Вас профессионала во всех технических моментах создания сайта.



Реклама:


ADOBE GOLIVE 6 ПЕРЕД ВАМИ: КАК НЕ ЗАБЛУДИТЬСЯ

Панели инструментов: шаг за шагом

Панель инструментов Adobe Golive содержит кнопки и выпадающие меню, набop которых зависит от того, какой из объектов рабочей области выбрали. Вы можете использовать панель инструментов для изменения выделенного текста или объектов в окне документа, таких, как выбор формата параграфа для выделенного текста или изменения размеров текстового поля макета. Также, с помощью панели инструментов, можно выполнять общие задачи, относящиеся к вашему документу или всему Web-сайту, такие, как включение предупрежде-ий о ссылках (link warnings) или просмотр вашего документа прямо в браузере.
Чтобы показать или спрятать панель инструментов, следует выполнить ко-анду меню Window | Toolbar (Окно | Панель инструментов). Также можно спрятать панель инструментов, щелкнув мышкой на закрывающей кнопке в верхнем правом (Windows) или верхнем левом (Mac OS) углу. Чтобы пере-двинуть панель инструментов, достаточно потянуть ее за верхнюю панель Windows) или нижний левый угол (Mac OS).

Возможности окна документа

Окно документа предоставляет множество режимов редактирования, так что вы можете проектировать свой сайт так, как необходимо, в зависимости от своих предпочтении. Предпочитаете ли вы работать с палитрами или с редактором HTML-текста напрямую — Adobe GoLive позволит вам работать так, как вы привыкли. По умолчанию, окно отображается в режиме Layout (Макет). Вы можете перейти в другой режим редактирования или предварительно просмотреть результаты своей работы.
Следует обратить внимание на некоторые кнопки, доступные в режиме Layout (Макет). Они отмечены буквами на рис. 2.1.

Рис. 2.1. Окно документа в режиме Layout: A — кнопка в виде треугольника показывает или прячет панель заголовочной секции окна документа;
В — кнопка для активации редактора JavaScript;
С — кнопка для вызова редактора эффектов DHTML;
D — кнопка активации редактора применяемых стилей CSS;
Е — выпадаюищий список для установки размеров окна документа

Чтобы открыть новое окно документа, следует выполнить команду меню File | New (Файл | Создать).
Легко увидеть, что открытое окно документа состоит из нескольких вкладок. Давайте разберемся для чего используется каждая из них.

  • Вкладка Layout Editor (Редактор макета) — — используется для того, чтобы вставлять текст и объекты на вашу страницу, а также, чтобы устанавливать их атрибуты, используя множество инструментальных панелей.
  • Вкладка Frame Editor (Редактор фреймов) — — используется для разделения вашего документа на фреймы 'так, что? разработчик может размещать в каждом фрейме разные HTML-документы.
  • Вкладка HTML Source Editor (Редактор HTML- кода) —— используется для проектирования страницы, напрямую изменяя ее HTML-код.
  • Вкладка Outline Editor (Редактор эскиза) — — используется для просмотра структуры вашей страницы в иерархическом формате и установки атрибутов для вашей страницы с использованием этого формата.
  • Вкладка Preview (Предварительный просмотр макета) — — в среде Windows используется для просмотра всех страниц, которые вы создали.
  • В операционной системе Mac OS, используется для просмотра тех страниц, которые были созданы в режиме Layout (Макета), HTML Source Editor (Редактор HTML-кода) иди Ouffine Editor (Редактор эскиза).
  • В случае, если установлен модуль Web-объектов, вкладка WebObjects Editor (Редактор Web-объектов) - — используется для редактирования свойств динамических объектов, встраиваемых в разрабатываемые Web-страницы.

Чтобы изменить размер окна браузера, в котором будет потом отображаться разрабатываемая Web-страница, либо потяните мышкой нижний правый угол окна (для Windows), либо потяните за панель размера в правом нижнем углу окна документа (для Mac OS). Существует и другой путь. Просто выберите размер окна в контекстном меню Window Size (Размер окна) в правом нижнем углу окна документа.
Когда вы создаете новый Web-сайт при помощи команды File| New Site Blank (Файл | Создать сайт | Пустой), Adobe GoLive создает файл с расширением site, который содержит информацию о структуре нового сайта. Если открыть этот файл, на экране будет отображено первичное окно разработки сайта. Это окно содержит некоторое количество вкладок, которые можно использовать для управления различными ресурсами вашего сайта, включая файлы, адреса электронной почты, URL, привычную палитру цветов и многое другое (рис, 2.2).

Рис. 2.2. Внешний вид диалогового окна управления разработкой сайта

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

Рис. 2.3. Расширенный режим диалогового окна управления сайтом

Переключение между окнами

Adobe GoLive позволяет открывать одновременно несколько документов, сайтов и окон дизайна сайта. Переключаться между ними можно разными способами. Например, прросто щелкните мышкой по нужному окну, и оно отобразится на переднем плане. Этот вариант сработает в том случае, если вы видите хотя бы край нужного вам окна. Если же нет, то можно выбрать нужное окно в меню Window (Окно). Но посредством данного меню, вы не сможете переключиться на .вторичное окно дизайна сайта. Чтобы переключаться между окном документа на первом плане и первичным окном сайта, воспользуйтесь кнопкой Select Window (Выбрать окно) — — на панели инструментов.

Применение палитр

Adobe GoLive предоставляет разработчику несколько палитр и дополнительных панелей, облегчающих решение основных задач, таких как, добавление объектов к содержимому Web-страницы, установка атрибутов для этих объектов, изменение цвета и т. п. При запуске Adobe GoLive, на вашем рабочем столе отображаются несколько палитр. Чтобы сделать палитру видимой в вашей рабочей области, достаточно выбрать ее имя в меню Window (Окно). Чтобы спрятать цалитру, либо щелкните мышкой на закрывающую панель в правом верхнем (Windows) или в левом верхнем (Mac OS) углах окна группы, либо щелчком мышкой по палитре выведите ее на первый план в окне и потом закройте.
Более близкое знакомство с описанными выше возможностями начнем с палитры Objects Palette (Палитра объектов). Данная палитра позволяет вам быстро и легко вставлять в Web-страницы различные объекты, включая плавающие поля (floating boxes), таблицы, рисунки, кнопки прокрутки, элементы форм и многое другое. Obgects Palette (Палитра объектов) содержит не-сколько кнопок, с каждой из которых связана группа значков представляющих теги HTML, структурные элементы страницы или характерные объекты сайта. Количество групп значков варьируются в зависимости от состава модулей, которые вы установили или активировали в диалоговом окне Modules Рreferences (Свойства модуля). Более подробно об этом окне будет рассказано в разделе «Настройки» данной главы. Чтобы вызвать палитру объектов, меню Window (Окно) выберите команду Objects (Объекты).

Objects Palette (Палитра объектов) содержит следующие кнопки.

  • Кнопка Basic (Основной) — - служит для просмотра значков, представляющих основной набор тегов HTML, которые вы можете добавлять в секцию body.
  • Кнопка Smart (Разумный)— — позволяет npocмотреть значки, представляющие теги HTML, код JavaScript и "разумные" объекты, которые вы можете добавлять в секции head или body вашей страницы.
  • Кнопка Forms (Формы)— позволяет просматривать значки, представляющие теги HTML отвечающие за создание форм ввода, которые вы можете добавлять в секцию bоdу
  • Кнопка Head (Заголовок) — — представляет значки тегов HTML для секции head.
  • Кнопка Frames (фреймы) — — вызывает набор значков, представляющих теги HTML для установок фреймов, которые вы можете добавлять в режиме Фреймы (Frames) окна документа.
  • Кнопка Site (Сайт) — — позволяет просмотреть значки, представляющие групповые объекты сайта, которые вы можете вставлять в сайт или окно дизайна сайта.
  • Кнопка Site Extras (Расширения сайта) — — показывает значки, представляющие закрейленные страницы, компоненты или их фрагменты.
  • Кнопка Library (Библиотека) — позволяет пользователю собрать библиотеку наиболее часто используемых компонентов.

Когда вы подводите стрелку мыши к значку, то ее имя появляется внизу Окна палитры. Чтобы вставить объект в разрабатываемую Web-страницу, Просто перетащите его при помощи мыши, удерживая нажатой ее правую кнопку, в нужное место страницы и отпустите кнопку.
Следующая палитра на которой мы остановимся — Colors Palette (Палитра цветов). Она позволяет вам быстро и легко раскрасить текст и объекты ваших Web-страниц. Colors Palette (Палитра цветов) содержит несколько отдельных палитр, призванных помочь найти цвет, идеально подходящий для реализации вашей задачи. Подобно Objects Palette (Палитра объектов), Colors Palette (Палитра цветов) содержит несколько кнопок, по которым
следует произвести щелчок мышью, чтобы открыть нужную палитру. Colors Palette (Палитра цветов) также содержит объектное меню выбора групп кнопок активизации опций отображения значений цвета в процентах или по шкале в 256 цветов.
Для отображения Colors Palette (Палитра цветов) или любой палитры этой группы в меню Window (Окно) выберите команды Color (Цвет) или просто щелкните мышкой на любом цветовом поле в Inspector "(Инспектор). Подробнее об Inspector (Инспектор) смотри ниже. Цветовые значения Colors Palette (Палитра цветов) могут указываться по процентной или цифровой (256 цветов) шкале. Щелкните мышкой на треугольнике в правом, верхнем углу Colors Palette (Палитра цветов), чтобы отобразить ее меню, и выберите там команду Percent Values (Процентные значения).
В правом нижнем углу рабочей облаем располагается чувствительный к контексту Inspector (Инспектор), дозволяющий устанавливать атрибуты для текста и объектов в окне документа. Содержание Inspector (Инспектор) изменяется в зависимости от того, с каким объектом сейчас работает пользователь. Он может содержать кнопки, текстовые поля, выпадающие списки, поля выбора цвета.
Если вы производите какие-либо изменения в окне документа или окне сайта, имя Inspector (Инспектор) меняется и отображается в нижней части его окна. Например, если вы активируете некое изображение в окне документа, на нижней панели Inspector (Инспектор) появляется слово Image (Изображение), указывающее, что Inspector (Инспектор) преобразовался в Image Inspector (Инспектор изображения). Теперь он содержит все необходимое для работы с графикой.

Настройки

Большинство настроек Adobe GoLive доступны в диалоговом окне вызываемом из основного меню Edit | Preferences (ПравкаI Свойства). Здесь находятся установки, регулирующие свойства дисплея, опции для перемещения изображений, опции для активации .тех или иных модулей, опции для выбора Web-браузеров, которые вы можете запустить из Adobe GoLive, опции проверки правописания и многое другое. Остановимся более подробно на возможности управления модулями. Диалоговое окно Modules Preferences (Свойства модуля) позволяет вам рационализировать Adobe GoLive, чтобы уменьшить время его загрузки, улучшить его чувствительность и уменьшить предельные требования памяти. При помощи отключения ненужных модулей вы можете уменьшить требования программной памяти до рекомендуемого минимума в 24 Мбайт.
Для того чтобы активировать или деактивировать программные, модули, выполните команду меню Edit | Preferences (Правка | Свойства). Затем щелкните мышкой на значок Modules (Модули) на левой панели диалогового, окна Рreferences (Свойства). Программные модули, которые установлены в дан-ный момент, отмечены флажками. Щелкните мышкой на нужный модуль, чтобы активировать или деактивировать его, и нажмите кнопку ОК рис. 2.4). Потом перезагрузите Adobe GoLive.
Для получения дополнительной информации о каждом из модулей, вос-пользуйтесь пиктограммой Show Item Monnation (Показать информацию об объекте) в правом нижнем углу окна Preferences (Свойства).

Рис. 2.4, Диалоговое окно Preferences, раздел Modules

Cоздание гиперссылок

В процессе проектирования Web-страницы вам придется создавать ссылки для вставки изображений или других медиа-средств, навигационные ссылку и многие другие. Лучше всего для создания ссылок использовать Inspector Инспектор).Чтобы создать ссылку, сначала нужно создать текст или изо-бражение, которые и будут отображаться в браузере в качестве ссылки.
Затем необходимо выделить этот текст или изображение и нажать на кнопку New Link (Новая бсылка) — - в Inspector (Инспектор) или на панели инструментов. Останется только выбрать файл, на который будет указывать создаваемая ссылка.

Работа с кириллическими символами

Операционная система Windows 2000 (или старше) с установленным браузером Microsoft Internet Explorer 6.0 позволяет просматривать и создавать Web-страницы, текстовое содержимое которых использует двухбайтовую кодировку Unicode .
Рассмотрим использование этой кодировки текста в Adobe OoLive, опираясь, естественно, на системы Windows 2000 и Mac OS. Если вы устанавливаете у себя английскую версию Adobe Golive, то любая страница, которую вы создаете, создается в кодировке Latin 1 (Western), которая содержит знаки западных языков, в системе Windows или в кодировке GL Western в системе Mac OS. Если ваша страница будет создана с использованием любого западного языка, например, английского, немецкого, французского, испанского или шведского, то не стоит изменять кодировку. Но для создания текста на языке, использующем иную систему знаков, необходимы соответствующие ресурсы и шрифты. Модуль кодировок (encodings) должен быть установлен и активирован. Также следует изменить общую настройку кодировок, чтобы использовать именно ту кодировку, которая вам нужна. Для этого надо выполнить команду меню File | Document Encoding (Файл | Кодировка документа) и установить там маркер напротив двухбайтовой (double-byte) кодировки. Поддерживаемые кодировки документа определены системным программным обеспечением.
Пару слов нужно также сказать об установке настроек для языков и шрифтов. Они позволяют вам выбирать и использовать отсутствующие в настройках языки, устанавливать подменю кодировки документа и отсутствующие шрифты.
Чтобы получить возможность указывать необходимую кодировку текстового содержимого документа, выполните команду меню Edit | Preferences (Правка | Свойства) и щелкните мышкой на значке Modules (Модули) на левой панели диалогового окна Preferences (Свойства). Проверьте, отмечен ли флажком модуль Encodings (Кодировки). Если нет, то поставьте флажок, чтобы отметить его, и перезагрузите Adobe Golive для вступления изменений в силу.
После перезагрузки Adobe GoLive следует выполнить команду меню Edit | Preferences (Правка | Свойства) и в появившемся диалоговом окне Preferences (Свойства) щелкнуть на значок Encodings (Кодировки). После этого в отображенном списке всех кодировок выбрать именно те, которые понадобятся при работе с создаваемым сайтом.
Для того чтобы какая-либо кодировка была назначена используемой по умолчанию, следует выделить ее наименование, а затем взвести флажок в независимом переключателе Default Encoding (Кодировка по умолчанию), или же просто дважды щелкнуть на наименовании кодировки.
Взведите флажок в переключателе Use Charset Info (Использовать информа-цию о кодировке), чтобы включить кодировку и информацию о наборе символов в атрибут conteftt тега <meta>. Если этот независимый переключатель включен, Adobe GoLive пытается распознать кодировку, базирующуюся на используемых символах.
Чтобы выбрать шрифты, используемые по умолчанию для системы кодировок, выполните команду меню Edit | Preferences (Правка | Свойства) и выбери-пиктограмму Foots (Шрифты) на левой панели диалогового окна Preferences (Свойства). Затем следует вьщелить кодировку, которая будет, использоваться в документе, и задать для нее шрифт и его размер из выпадающих списков Font (Шрифт) и Size (Размер), как это показано на рис. 2.5.
После установки параметров нажмите кнопку ОК и перезагрузите Adobe GoLive.

Рис. 2.5. Установка шрифтов

Среди используемых вами файлов могут быть и такие, которые содержат разные сценарии и кодировки. Прежде чем импортировать файлы на ино-. странном языке или текстовые файлы с других компьютерных платформ, вы должны проверить в какой кодировке они были написаны. Если текст был сохранен в кодировке, которая не распознается вашим компьютером, вероятно, он и не будет отображен. Чтобы вставить текст, написанный на таком "нестандартном" языке, вы должны отобразить ваш документ, создаваемый в GoLive, в режиме Source view (Обзор источника) и вставить текст напрямую в НТМL код.
Для импортирования файлов на иностранном языке откройте новое окно документа. Затем следует выполнить команду меню File | Document Encoding (Файл. | Кодировка документа) и выбрать кодировку языка файла предназначенного для импорта. После этого скопируйте, текст из данного файла, вернитесь в Adobe GoLive и отобразите ваш документ в режиме Source view (Обзор источника). Вставьте скопированный текст между тегами <body> и </body>.
Если ваш текст содержит знаки, которые используются в синтаксисе HTML, такие как <, > и &, вы должны использовать присущую HTML систему обозначения специальных знаков, такие как &lt;, &gt;, и samp;, иначе Adobe GoLive воспримет их как теги HTML при чтении файла, содержащего только текст. Впрочем, если вы внимательно читали первую главу, в которой рассказывалось о языке HTML, это не вызовет каких-либо затруднений.


Реклама: