Использование iWeb: Применение html-сниппетов | Интернет интересности и полезности

Использование iWeb: Применение html-сниппетов

Доброго времени суток, дорогие друзья!

Основной и самой главной проблемой iWeb (как впрочем и многих WYSIWYG подобных редакторов) является невозможность редактирования html-кода напрямую из окна редактора: сколько угодно можно использовать шаблоны страниц, различные виджеты, вставлять изображения, музыку, видео и т.д. – но вносить изменения в код страницы сайта непосредственно из окна редактора мы не можем.

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

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

Если после публикации, зайти в папку сайта, мы увидим в ней файл имя_нашей_страницы.html и папку имя_нашей_страницы_files : именно в этой папке и будет находиться файл сниппета с названием widget0_markup.html: iWeb сгенерировал основную веб страницу и отдельно страницу с кодом, который мы добавляли в html-сниппет.

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

Чтобы продемонстрировать возможности применения html–сниппетов давайте попробуем создать незатейливую кнопку, которая даст возможность поделиться адресом любой страницы в Twitter ( «твитнуть» на сленге почитателей этого сервиса

).

Вот что необходимо сделать:

Добавляем на страницу html-сниппет (размеры кнопки будут 128×128 px) и вставляем в его окно код, приведенный ниже (файл изображения можно скачать по ссылке tweet_me.zip : создайте в корневой папке вашего сайта папку img и поместите этот файл в нее):

 

Применив изменения и опубликовав сайт, открываем страницу в веб браузере и видим такую вот кнопку (если вы не видите кнопку на опубликованной странице, проверьте путь к файлу изображения). Если захотите использовать эту кнопку на своем сайте, пожалуйста, не забудьте в конце кода изменить URL-адрес страницы на свой.

В заключении несколько замечаний по поводу применения html-сниппетов:

  1. 1. По сути html-сниппет это совершенно независимый файл, содержимое которого также индексируется поисковыми роботами: если не принять определенные меры, то ссылка на этот файл в конечном итоге появится в результатах поиска всех поисковых систем, соответственно, кроме основных страниц, в результатах поиска будут наблюдаться и ссылки на все файлы вида widget0_markup.html. В принципе, ничего страшного в этом нет: мы всего лишь получим загрязнение результатов поисковой выдачи для своего сайта. Поэтому, по возможности, необходимо закрывать содержимое сниппетов мета-тегами noindex и nofollow или применять меры по перенаправлению со страницы виджета на родительскую страницу сайта.

  2. 2. Для систем сбора веб статистики, различных сервисов и т.д. переходы по ссылкам, размещенным на странице сниппета, выглядят именно как переходы со страницы вида widget0_markup.html, а не как переходы с родительской страницы. Это накладывает определенные ограничения на ссылки размещаемые в сниппетах. Помните наш пример с кнопкой Twitter? Если бы в html-коде мы применили автоматическую подстановку URL- адреса страницы, мы бы “твитнули” не ссылку на основную страницу, а ссылку на страницу виджета: согласитесь, нам этого совершенно не нужно. Поэтому в некоторых случаях применение сниппетов невозможно или возможно с ограничениями: эта проблема решается путем внедрения нужного нам кода прямо в код родительской страницы. Этот способ ненамного сложнее, чем работа со сниппетами, о том как это делается с наименьшими усилиями я расскажу в одной из следующих статей.