Изучаем iLife. Часть 16: iWeb ’11. Самостоятельное создание сайта и его публикация

Опубликовано

Вот уже на протяжении 16 выпусков мы рассказываем о популярном пакете приложений iLife ’11, который бесплатно поставляется со всеми новенькими Маками. Приложения, входящие в его состав, охватывают все основные области применения творческого потенциала  среднестатистического пользователя Mac OS X: тут и работа с изображениями (iPhoto), и работа с видео (iMovie), и создание собственных DVD-дисков (iDVD). Недавно мы начали обзор приложения iWeb, предназначенного для быстрого создания персональных веб-сайтов в режиме WISIWYG (режим визуального редактирования). В предыдущих выпусках мы рассмотрели устройство интерфейса программы, меню ее настроек и рассказали о некоторых функциях приложения, используемых при создании сайтов с использованием одного из готовых шаблонов. Сегодня мы расскажем о функциях, которые пригодятся пользователю при создании веб-сайта с чистого листа.

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

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

Вернемся к нашему текстовому блоку. Текст в него можно как набирать самому, так и вставить из буфера обмена. Цвет, шрифт и пр. можно изменить, воспользовавшись одноименными панелями Цвета и Шрифты, доступ к которым организован на панели инструментов.

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

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

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

Для добавления различных медиаобъектов (и не только) на страницу веб-сайта очень удобно использовать панель медиабраузера. Медиабраузер имеет четыре вкладки, о первых трех из которых (Аудио, Фото, Фильмы) мы уже рассказывали в первой части обзора iWeb. Напомним, что эти вкладки позволяют импортировать аудио-, фото- и видеоматериалы из библиотеков приложений, с которыми у iWeb налажена интеграция. В частности, это такие приложения, как iPhoto, iTunes, iMovie, Aperture, Photo Booth. При размещении на веб-странице видефайла, к нему автоматически добавляется небольшая панель с некоторыми элементами управления просмотром. Блок с видеороликом   также можно растягивать, но не рекомендуется превышать реальный размер кадра, иначе рискуете получить заведомо худшее качество изображения.

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

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

Давайте рассмотрим, что же может получить пользователь, используя каждый из виджетов.

  • Галерея MobileMe

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

  • YouTube

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

  • Фотография iSight

Простое решение для добавления на страницу сайта вашей собственной фотографии, снятой на веб-камеру iSight или на любую другую, совместимую с Mac OS X. После добавления виджета и нажатия кнопки Фотосъемка, пользователю будет дано 3 секунды на то, чтобы приготовиться, а потом, собственно, и будет сделан снимок, который автоматически будет размещен на странице.

  • Фильм iSight

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

  • Обратный отсчет

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

  • Канал RSS

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

  • Сниппет HTML

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

  • Google AdSense

Виджет позволяет размещать рекламу Goodle AdSense на своем сайте, тем самым позволяя владельцу сайта зарабатывать на ее показе. Разумеется, для работы виджета требуется наличие аккаунта Google AdSense, в противном случае он увидит то, что изображено на скриншоте. Если же учетной записи нет, то перед настройкой новой учетной записи Google AdSense необходимо будет сначала опубликовать сайт.

  • Goofle Maps

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

ПУБЛИКАЦИЯ САЙТА

После успешного создания сайта его необходимо опубликовать. Публикация возможно в трех вариантах: на MobileMe, на любом другом хостинге по FTP-протоколу, в локальной папке компьютера. Для самой публикации можно воспользоваться кнопкой Опубликовать сайт, расположенной на панели инструментов, либо одноименным пунктом меню программы (Файл -> Опубликовать весь сайт), но перед всем этим следует настроить параметры публикации. Чтобы перейти в окно настройки публикации сайта, в левой панели окна iWeb кликаем мышкой на название сайта.

  • MobileMe

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

  • Любой хостинг с доступом по FTP-протоколу

Как и в предыдущем варианте, указываем название сайта и адрес электронной почты для обратной связи. В разделе параметров FTP-сервера обязательно указываем его адрес, а также логин и пароль для доступа к хостингу. При необходимости можно задать путь до конкретного каталога и выбрать один из 4 вариантов FTP-протокола (FTP, FTP с неявным SSL-шифрованием, FTP с шифрованием TLS/SSL, SFTP).

  • Локальная папка

Здесь все просто: помимо названия сайта и адреса электронной почты выбираем папку на жестком диске, куда будет публиковаться веб-сайт и, как в предыдущем варианте, обязательно указываем URL-адрес веб-сайта.

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

Подводя итоги обзора приложения хотим сказать, что iWeb является достаточно неплохим решением в плане создания персонального веб-сайта, предоставляя пользователю все необходимые для этого дела, возможности и инструменты. Конечно, с помощью этого приложения нельзя создать сложный веб-сайт, портал и пр, и оно вряд ли заинтересует продвинутых веб-девелоперов, но для домашнего применения и пользователей, не обладающих познаниями в HTML, PHP, MySQL и  JavaScript, программа будет очень кстати (разумеется, если есть желание создать свой веб-сайт :).

Этим выпуском мы завершаем обзор приложения iWeb. Осталось последнее нерассмотренное нами приложение, входящее в состав пакета iLife ’11 — GarageBand, интереснейшая игрушка для тех, кто хотел бы заняться созданием музыки или обучиться премудростям игры на музыкальных инструментах.