lib4me.ru
 

Использование iWeb: Замена html-кода

Главная » iWeb  / 25.11.2011


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

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

Зачем нам это нужно.

Если вы помните, в статье «Использование iWeb: Применение html-сниппетов», мы с помощью html-сниппета создали кнопку Twitter, которая позволила нам «твитнуть» адрес веб-страницы на которой находится эта кнопка, причем url этой страницы мы указывали явно. Если бы мы захотели разместить такую кнопку на всех страницах своего сайта, нам каждый раз пришлось бы указывать нужный адрес, и это при том, что сервис Twitter (как, впрочем,  и многие другие) позволяет автоматически подставлять адреса веб-страниц, на которых эта кнопка находится (делается это с помощью внешнего скрипта). Но, в случае применения html-сниппета, мы не сможем использовать этот скрипт, так как подставляться будет не адрес нашей страницы, а адрес страницы виджета. Точно такой же результат мы получим если, с помощью сниппетов,  захотим установить, например, код счётчика LiveInternet: статистика будет собираться для страниц виджетов и основные страницы вашего сайта в ней фигурировать не будут. Поэтому, для того чтобы адрес страницы передавался правильно, необходимо код кнопки (счётчика и т.д.) расположить непосредственно в теле кода нужной нам страницы. Но, к сожалению, используя «встроенные» возможности  Apple iWeb, добиться этого невозможно: именно поэтому и приходится использовать различные ухищрения. Теперь, после того как мы разобрались в каких случаях нам может потребоваться замена кода, давайте посмотрим как это сделать, а в качестве примера возьмём все ту же кнопку «Twitter».

Что мы будем заменять.

Для начала, как вы уже догадались, необходимо создать тот участок кода, который мы будем заменять: с этим не должно возникнуть никаких проблем. В нужном  месте страницы проекта iWeb создаём текстовое поле и пишем в нем любое слово - ну пусть это будет слово «twitter», размеры текстового поля задаём 128x128px (если помните, наша кнопка в примере была именно такого размера). Желательно не изменять параметры шрифта: оставляем его размер и цвет по умолчанию.


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

.....




twitter





.....


Чем мы будем заменять.

Раз уж мы договорились, что будем создавать кнопку «Twitter» с подстановкой адреса страницы при помощи скрипта, нам необходимо взять код кнопки из примера предыдущей статьи и немного видоизменить его (код смотрите ниже, он выделен зеленым; архив файла изображения можно скачать по ссылке  tweet_me.zip: создайте в корневой папке вашего сайта папку ‘img’, распакуйте  и поместите этот файл в неё).




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

Как мы будем заменять.

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

 

Небольшое замечание.

Эту кнопку вы можете поместить на любой странице вашего сайта, или даже на всех страницах: в коде самой кнопки при этом ничего менять не надо, просто проделайте описанное выше для всех страниц, на которых нужна эта кнопка. Единственное что надо учитывать: после перепубликации страниц вашего сайта в iWeb, все ваши изменения пропадут и вам снова придётся их вносить. Делать это, каждый раз, для большого количества веб-страниц в текстовом редакторе достаточно утомительное занятие, плюс ко всему, существует большая вероятность ошибиться. Чтобы облегчить себе жизнь, лучше всего пользоваться специально предназначенным для этого программным обеспечением. Об одной из таких программ я напишу в ближайшее время читайте в материале «MassReplaceIt: жизнь на территории iWeb», называется она MassReplaceIt и позволяет производить описанные выше процедуры практически мгновенно.


На сегодня все: как всегда, буду рад вашим комментариям и письмам.

Буду благодарен, если поделитесь ссылкой на этот материал в социальных сервисах, подпишитесь на RSS-фид или почтовую рассылку.

 

Открыв страницу в веб браузере, мы должны увидеть такую вот кнопку, которая, при нажатии на неё, позволит отправить адрес этой страницы в «Twitter».

Logo lib4me.ru