|
Тема
выпуска: Применение текстовых
фильтров в оформлении сайта.
Здравствуйте, Уважаемые Подписчики!
Что-то Вы не очень
откликнулись на мой призыв относительно тем нашей с
Вами рассылки. По-моему это означает, что Вы все
знаете и мне Вам нечего рассказать, или, наоборот,
Вы не знаете с чего начать.
Ну что ж придется мне самому без Вашей помощи (а
жаль, в противном случае рассылка была бы более
результативной для Вас), на основе своего опыта
освоения интернет-технологий составлять список тем,
освещаемых в рассылке.
Как я понял, и из моего опыта это тоже следует, все
мы делимся, примерно, на две категории. Ну вот как
автомобилисты, например,
одни покупают автомобиль и
ездят на нем, решают свои проблемы, абсолютно не
задумываясь над тем как он устроен, как все в нем
работает. Такой автомобилист просто знает где, что
нажать и, что нужно повернуть, чтобы получить от
машины то, что он хочет, а как это происходит его
мало волнует. Сломалась, в автосервис.
Другая категория. Эти автомобилисты покупают
автомобиль и обязательно стараются изучить его до
последнего винтика, до последней гаечки. Перевернут
кучу литературы, переслушают море советов от таких
же как они, но более опытных, убьют массу времени в
гараже под своим железным конем, но в руки мастеров
из автосервиса его отдадут только в самом крайнем
случае. И, что интересно, они от этого получают
удовольствие. Это они нам помогают на трассе, когда
у нас, что-то ломается в машине. Это к ним мы идем
за советом, когда они оказываются нашими соседями по
гаражу.
К чему это я все горожу в рассылке для будущих
вебмастеров?
А к тому, что мы, вебмастера, похожи на описанных
выше автомобилистов и так же как и они делимся на
две категории.
Одним сайт нужен для решения своих проблем, для
построения бизнеса, как инструмент и им не интересно
как там все устроено, да и времени нет на изучение
всего этого. Другие не могут, я уверен, сказать
четко, что им больше доставляет удовлетворение -
создание и обслуживание сайта или бизнес в сети.
Обе эти категории правы и заслуживают уважения и
понимания. И поэтому я постараюсь в своей рассылке
помочь обоим.
Сегодняшний выпуск будет посвящен тем кто
предпочитает все делать своими ручками.
Итак начнем.
Когда мы загружаем вебстраничку в свой браузер, что
первым появляется?
Правильно!
Заголовок. Логотип. Хедер.
Вот с этого и начнем.
Надеюсь Вы уже покопались в сети или в ближайших
магазинах и нашли какие-либо учебники по HTML или
воспользовались тем, который я Вам предоставлял в
предыдущих рассылках и потихоньку начали изучать
этот язык гипертекстовой разметки веб-страниц.
Надеюсь, что это так потому, как я Вас этому учить
не буду. Если, конечно, кто обратится ко мне
письменно из рассылки или по e-mail всем чем могу
помогу.
Как делается хедер? Как правило в программе Adobe
Photoshop и в ей подобных. В
ближайших выпусках рассылки я Вам это покажу.
Попробуем рассмотреть плюсы и минусы такого варианта
создания хедера.
Первый и, наверное, самый главный плюс - это
красота, привлекательность такого хедера. Здесь все
ограничено только Вашей фантазией, умением
пользоваться Фотошопом и..... скоростью загрузки
данных у посетителя Вашего сайта.
Минусы.
Кроме относительно большого
времени загрузки страницы, полное отсутствие
информации для поисковых ботов и как следствие
увеличение Ваших усилий на раскрутку сайта и вывод
его на первые позиции в поисковых запросах.
Как же можно сделать так, чтобы и волки были сыты и
овцы целы?
Ответ. Начало странички можно сделать
комбинированным, т.е. содержать и картинку и
надпись. При этом в надписи, желательно, должны
присутствовать ключевые слова.
Но и надпись тоже хочется оформить красиво.
Нет проблем - скажете Вы - Имеется море шрифтов, от
простых до самых замысловатых.
Все верно. Но......
Вы уверены, что у любого пользователя, зашедшего на
Ваш сайт, все эти шрифты установлены на компьютере?
Если требуемого шрифта нет, то на том месте где у
Вас должна быть надпись будет пустое место, кроме
того из-за этого может перекосить всю Вашу
страничку.
И что же делать?
Выполнять надписи самыми распространенными шрифтами.
А как быть с оформлением? Просто надпись - это же не
всегда к месту и не всегда красиво.
Совершенно верно! Для решения этой проблемы
воспользуемся CSS.
CSS - это таблицы каскадных стилей. Что это такое
более подробно, Вы, при
желании, можете найти в сети, мы же сейчас с Вами
рассмотрим примеры применения CSS в оформлении
текста.
Возмем, к примеру, название нашей рассылки - Создать
сайт в Интернете своими руками - это просто? и
применим к этой надписи текстовые фильтры.
Создаем веб-файл так, как было описано в
рассылке №4.
Открываем созданный файл, Меню - Вид - Просмотр HTML
кода, или щелчок правой кнопкой мыши и в контекстном
меню щелчок левой кнопкой мыши на Просмотр HTML
кода. Откроется любимый всеми вебмастерами Блокнот.
Между тегами <body> и </body> поместим следующий
код:
<p style="filter:mask(color='red'); width: 400;
height: 60; font-size: 30pt; font-weight: bold;
text-align: center">Создать сайт в Интернете своими
руками - это просто?</p>
Можете
код выделить мышкой - контекстное меню - Копировать
и затем вставить в Блокнот. Это для того, чтобы Вы
не мучались переписывая его.
Получим вот такую картинку:
Тут, кстати, надо заметить, что те подписчики,
которые подписались только на текстовую версию
рассылки никаких картинок наблюдать не смогут,
поэтому им лучше подписаться на HTML-версию или
просматривать выпуски рассылок в
архиве рассылки на
сайте, в частности этот выпуск можно посмотреть
здесь.
Что же еще можно сотворить с помощью текстовых
фильтров с нашей надписью? Продолжаем наш
эксперимент и далее помещаем следующий код:
<p style="filter:shadow(color='#000000', direction='130');
width: 400; height: 60; font-size: 30pt; font-weight:
bold; text-align: center; color: red">Создать сайт в
Интернете своими руками - это просто?</p>
Получим вот эту картинку:
Мы получили с Вами эффект тени.
Надеюсь, что Вы сможете разобраться какой параметр
за что отвечает. Если нет, поэксперементируйте, если
и это не поможет, а очень будет надо - пишите.
Есть еще один вариант отбрасываемой текстом тени.
Если первый вариант мы с Вами получили при помощи
фильтра Shadow, то второй вариант мы получим при
помощи фильтра DropShadow. Вставляем код:
<p style="filter:dropshadow(color='#7FFF00', offx='3',
offy='3', positive='1'); width: 400; height: 60;
font-size: 30pt; font-weight: bold; text-align:
center; color: green">Создать сайт в Интернете
своими руками - это просто?</p>
Получили:
А вот с помощью фильтра Glow мы можем заставить
текст "сиять". Код:
<p style="filter:glow(strength='6', color='#00FF00');
width: 400; height: 60; font-size: 30pt; font-weight:
bold; text-align: center; color: darkgeen">Создать
сайт в Интернете своими руками - это просто?</p>
Вот наш текст и засиял.
Параметр Strength здесь
отвечает за силу сияния текста, поэксперементируйте,
меняя его значения.
Текст можно сделать волнообразным с помощью фильтра
Wave. Параметр Freq задает количество волн, параметр
Add устанавливает режим отображения, Phase - задает
начальную фазу волны, а параметр Strength -
интенсивность волн.
Код:
<p style="filter:wave(freq='5', add='0',
lightstrength='4', phase='4', strength='4'); width:
400; height: 60; font-size: 30pt; text-align: center;
color: geen">Создать сайт в Интернете своими руками
- это просто?</p>
Смотрим:
Экспериментируйте!
А теперь попробуем получить эффект размытия текста
при помощи фильтра Blur.
Код:
<p style="filter:blur(add='1', direction='30',
strength='10'); width: 400; height: 60; font-size:
30pt; font-weight: bold; text-align: center; color:
red">Создать сайт в Интернете своими руками - это
просто?</p>
Смотрим:
Обратите внимание: цвет размытия не задается, фильтр
определяет его сам, позтому в данном примере описан
только исходный цвет текста. И еще, говорят, что все
вышеприведенные текстовые фильтры работают только в
Internet Explorer.
На сегодня это все.
Любители все делать своими ручками могут продолжать
изучать Великий и Могучий язык гипертекстовой
разметки веб-страниц и текстовые фильтры приведенные
в этой рассылке, ну, а те кому нужно создать свой
сайт быстро и начать делать свой бизнес могут
бесплатно опробовать конструктор сайтов e-Gloryon.
Удачи Вам в жизни и на просторах Интернета!
С
уважением, Ивашутенко Юрий.
Консультант по вопросам создания собственного
сайта в Интернет.
Конструктор
сайтов e-Gloryon
Связь с автором из
рассылки
e-mail:
ivashutenko@bizforpeople.ru
телефон: 89138711725
Архив рассылки на сайте
|
