Доброго времени суток, дорогие друзья!
Основной и самой главной проблемой iWeb (как впрочем и многих WYSIWYG подобных редакторов) является невозможность редактирования html-кода напрямую из окна редактора: сколько угодно можно использовать шаблоны страниц, различные виджеты, вставлять изображения, музыку, видео и т.д. – но вносить изменения в код страницы сайта непосредственно из окна редактора мы не можем.
В итоге приходится довольствоваться тем что есть – для создания небольшой домашней странички этого, возможно, и хватит, но при разработке профессионального веб-сайта невозможность изменять html-код своего проекта является большим препятствием. Конечно мы можем открыть программный код страницы в любом внешнем редакторе и изменить содержимое: этого нам ни кто запретить не может, но при следующей публикации сайта iWeb благополучно перепишет эти изменения и нам снова придется менять код. Но, к счастью, нет ничего невозможного: существует как минимум два способа обойти это препятствие, об одном из которых я сегодня хочу рассказать.
Способ заключается в использование html-сниппетов: это встроенная возможность iWeb и она позволяет вставить блок любого кода в определенный участок нашей веб страницы. С помощью сниппетов возможно добавить на страницы сайта различные меню, изображения, эффекты ну и, вообще все, что можно реализовать с помощью html или скриптов – все зависит только от фантазии и желания разработчика: на этом сайте, например, с помощью сниппетов сделаны главное и боковое меню, с их же помощью формируется и фон страниц. Пользоваться этим виджетом очень просто: добавляем его в нужную часть страницы, в открывшееся окно вставляем свой код – применяем и публикуем страницу.
Если, после публикации, зайти в папку сайта, мы увидим в ней файл имя_нашей_страницы.html и папку имя_нашей_страницы_files : именно в этой папке и будет находиться файл сниппета с названием widget0_markup.html: iWeb сгенерировал основную веб страницу и отдельно страницу с кодом, который мы добавляли в html-сниппет.
Теперь нашу основную страницу можно открыть в любом веб браузере, результаты работы сниппета загрузятся в тело этой страницы и мы получим то, что ожидали увидеть.
Пример: создаем кнопку «Tweet»
Чтобы продемонстрировать возможности применения html–сниппетов давайте попробуем создать незатейливую кнопку, которая даст возможность поделиться адресом любой страницы в Twitter ( «твитнуть» на сленге почитателей этого сервиса).
Вот что необходимо сделать:
Добавляем на страницу html-сниппет (размеры кнопки будут 128x128 px) и вставляем в его окно код, приведенный ниже (архив файла изображения можно скачать по ссылке tweet_me.zip : создайте в корневой папке вашего сайта папку img, распакуйте и поместите этот файл в нее):
- http%3A%2F%2Flib4me.ru%2F11120_html_snippet.html" target="_blank">
Опубликовав сайт, открываем страницу в веб браузере и видим такую вот кнопку (если вы не видите кнопку на опубликованной странице, проверьте путь к файлу изображения). Если захотите использовать эту кнопку на своем сайте, пожалуйста, не забудьте в конце кода изменить URL-адрес страницы на свой.
В заключении несколько замечаний по поводу применения html-сниппетов:
По сути html-сниппет это совершенно независимый файл, содержимое которого также индексируется поисковыми роботами: если не принять определенные меры, то ссылка на этот файл в конечном итоге появится в результатах поиска всех поисковых систем, соответственно, кроме основных страниц, в результатах поиска будут наблюдаться и ссылки на все файлы вида widget0_markup.html. В принципе, ничего страшного в этом нет: мы всего лишь получим загрязнение результатов поисковой выдачи для своего сайта. Поэтому, по возможности, необходимо закрывать содержимое сниппетов мета-тегами noindex и nofollow или применять меры по перенаправлению со страницы виджета на родительскую страницу сайта.
Для систем сбора веб статистики, различных сервисов и т.д. переходы по ссылкам, размещенным на странице сниппета, выглядят именно как переходы со страницы вида widget0_markup.html, а не как переходы с родительской страницы. Это накладывает определенные ограничения на ссылки размещаемые в сниппетах. Помните наш пример с кнопкой Twitter? Если бы в html-коде мы применили автоматическую подстановку URL- адреса страницы, мы бы “твитнули” не ссылку на основную страницу, а ссылку на страницу виджета: согласитесь, нам этого совершенно не нужно. Поэтому в некоторых случаях применение сниппетов невозможно или возможно с ограничениями: эта проблема решается путем внедрения нужного нам кода прямо в код родительской страницы. Этот способ ненамного сложнее, чем работа со сниппетами, о том как это делается с наименьшими усилиями я расскажу в одной из следующих статей.
На сегодня все: как всегда, буду рад вашим комментариям и письмам.
Буду благодарен, если поделитесь ссылкой на этот материал в социальных сервисах, подпишитесь на RSS-фид или почтовую рассылку.
-
Похожие материалы:
-
Также рекомендую заглянуть в Архив и ознакомиться с другими материалами сайта
Created by Apple iWeb • Library for Me