Доброго времени суток, дорогие друзья! Судя по количеству поисковых запросов, по которым посетители приходят на мой сайт, редактор Apple iWeb «по прежнему» пользуется заслуженной популярностью. Поэтому, сегодня я решил рассказать еще об одном трюке, с помощью которого Вы сможете сделать свой сайт на iWeb более привлекательным и дружелюбным 
.
.Использовано фото: Yay_pt
Из названия материала Вы, наверное, уже догадались, что речь сегодня пойдет о том, как правильно разместить на своем сайте смайлики, а точнее одну из их разновидностей - анимированные смайлы. Кстати, если Вы не знаете: смайлики, составленные из типографских знаков, а именно их мы используем в SMS сообщениях, по другому еще называют эмотиконами.
Предчувствуя Ваш вопрос, объясню немного подробнее. На самом деле, добавить анимированный смайлик на свою веб-страницу в редакторе Apple iWeb довольно легко: смайлик просто вставляется в нужное место текста. Но есть и небольшая проблема: если не предпринять ни каких дополнительных действий, результаты такого добавления Вас наверняка разочаруют. Опубликовав свою интернет страницу и открыв ее, например, в Safari или любом другом веб-браузере, Вы обнаружите следующую картину (левая часть изображения): строка, в которой разместился смайлик, немного сместилась вниз. Можете попробовать провести такой же опыт: результат, полученный Вами, будет аналогичным. Для сравнения, взгляните на изображение справа: так должен выглядеть текст со смайликом в идеале: к этому и будем стремиться .
Пока Вы экспериментируете, объясню, как добиться такого «идеального» результата
Для начала, необходимо определиться с вертикальным размером, добавляемого смайлика. Тут опираемся на высоту шрифта, который используется на веб-странице и размер межстрочного интервала (пункт «расстояние между строками» в Инспекторе редактора iWeb). При перемножении этих двух параметров, мы и получим максимальную высоту анимированного смайла. Например, на странице которую Вы сейчас читаете, текст набран шрифтом размера 14px при межстрочном интервале 1.4. Умножив 14 на 1.4 получаем 19.6, соответственно, высоту смайла следует выбирать не более 20px, а еще лучше 18 или 19 пикселов. На всякий случай, я использую смайлики высотой 18px: они нормально «вписываются» в текст, даже если уменьшить размер шрифта на один-два пиксела, оставив высоту строки без изменений. «Анимашку» любого необходимого размера можно легко найти на просторах интернета, уверен, для Вас это не составит большого труда.
Далее, в нужное место текста на макете страницы вставляем смайлик необходимой эмоциональной окраски (меню «Вставить» яблочного редактора), при этом под смайлом появится, так называемый, «контроллер фильма» - не забываем отключить его в Инспекторе.
Небольшое смещение строк на макете, появившееся после добавления смайлика , не должно Вас беспокоить: на данном этапе работы это совершенно нормально. Публикуем сайт в локальную папку на компьютере, если на этом этапе возникают трудности, освежаем в памяти данный материал
. Открываем страницу с анимированным смайлом в любимом веб-браузере и наблюдаем....все то же смещение строк, как на левой части первого изображения: еще минуту внимания, сейчас мы это исправим.
Теперь необходимо немного подредактировать исходный код нашей страницы, собственно в этом и заключается суть трюка. Эту операцию можно выполнить в текстовом редакторе, например, хорошо подойдет TextWrangler. О нем я уже несколько раз упоминал в материалах рубрики, посвященной Apple iWeb. Открываем страницу в TextWrangler и ищем код, отвечающий за вывод смайла на странице. Лучше всего воспользоваться поиском по названию файла смайлика, этим Вы сильно сэкономите свое время и нервы (далее по тексту предполагается, что анимированный смайлик имеет название smile.gif). В итоге, должен обнаружиться такой вот участок исходного кода, его мы и будем редактировать:
Заменяем атрибут class="inline-block" на align="top". Участок кода принимает следующий вид:
Сохраняем изменения, обновляем страницу в браузере и видим, что у нас все получилось . Осталось загрузить страницу на хостинг и насладиться выполненной работой. Но перед этим небольшое замечание.
. Осталось загрузить страницу на хостинг и насладиться выполненной работой. Но перед этим небольшое замечание.Вы должны понимать, что вносить такие изменения в html-код придётся каждый раз после публикации страницы в редакторе iWeb. Естественно, делать это вручную довольно утомительное занятие, особенно если страниц много и они часто обновляются. Логичнее, доверить поиск и замену кода специально предназначенной для этого программе. Об одной из таких программ я уже рассказывал в статье MassReplaceIt: жизнь на территории iWeb: она очень удобна в использовании и позволяет легко и быстро вносить изменения в исходный код Ваших веб-страниц.
| На сегодня все. Всегда рад Вашим комментариям и письмам. Буду благодарен, если поделитесь ссылкой на этот материал в социальных сервисах, подпишитесь на RSS-фид или . |
-
Похожие материалы:
-
Также рекомендую заглянуть в Архив или Карту сайта и ознакомиться с другими материалами
Created by Apple iWeb • Library for Me