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

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

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

…..
<div id=»id5″ style=»height:128px;left:103px;position:absolute;top:1586px;width:128px;z-index:1;» class=»style_SkipStroke_1 shape-with-text»>
<div class=»text-content graphic_textbox_layout_style_default_External_128_128″ style=»padding: 0px;»>
<div class=»graphic_textbox_layout_style_default»>

<p style=»padding-bottom:0pt;padding-top:0pt;» class=»Body»>twitter</p>
</div>
</div>

</div>

…..

 

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

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

<style type=»text/css»>
ul#tweet {position:relative;display:block;width:128px;height:128px;margin:0;padding:0;}
ul#tweet li {display:inline;}

ul#tweet li a {margin:0;padding:0;height:128px;float:left;overflow:hidden;

background:url(/img/tweet_me.png) no-repeat;width:128px;background-position:100% 0;

outline:none;}
ul#tweet li a:link {cursor:pointer;}
ul#tweet li a {background-position:0 0;}
ul#tweet li a.before {background-position:0 0;}
ul#tweet li a:hover,ul#tweet li a:focus {background-position:0 -128px;}
ul#tweet li a:active {background-position:0 -256px;}
</style>

<div><ul id=»tweet»><li><a title=»Tweet» href=»https://twitter.com/share» data-count=»none» data-lang=»ru» target=»_blank»></a></li></ul></div>

 

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

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

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

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

 

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

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