Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

Создать сайт в интернете своими руками - это просто? Применение текстовых фильтров в оформлении сайта.



Выпуск  # 7

 

23 августа 2006

 

Тема выпуска: Применение текстовых фильтров в оформлении сайта.

Здравствуйте, Уважаемые Подписчики!

Что-то Вы не очень откликнулись на мой призыв относительно тем нашей с Вами рассылки. По-моему это означает, что Вы все знаете и мне Вам нечего рассказать, или, наоборот, Вы не знаете с чего начать.


Ну что ж придется мне самому без Вашей помощи (а жаль, в противном случае рассылка была бы более результативной для Вас), на основе своего опыта освоения интернет-технологий составлять список тем, освещаемых в рассылке.


Как я понял, и из моего опыта это тоже следует, все мы делимся, примерно, на две категории. Ну вот как автомобилисты, например, одни покупают автомобиль и ездят на нем, решают свои проблемы, абсолютно не задумываясь над тем как он устроен, как все в нем работает. Такой автомобилист просто знает где, что нажать и, что нужно повернуть, чтобы получить от машины то, что он хочет, а как это происходит его мало волнует. Сломалась, в автосервис.


Другая категория. Эти автомобилисты покупают автомобиль и обязательно стараются изучить его до последнего винтика, до последней гаечки. Перевернут кучу литературы, переслушают море советов от таких же как они, но более опытных, убьют массу времени в гараже под своим железным конем, но в руки мастеров из автосервиса его отдадут только в самом крайнем случае. И, что интересно, они от этого получают удовольствие. Это они нам помогают на трассе, когда у нас, что-то ломается в машине. Это к ним мы идем за советом, когда они оказываются нашими соседями по гаражу.


К чему это я все горожу в рассылке для будущих вебмастеров?


А к тому, что мы, вебмастера, похожи на описанных выше автомобилистов и так же как и они делимся на две категории.


Одним сайт нужен для решения своих проблем, для построения бизнеса, как инструмент и им не интересно как там все устроено, да и времени нет на изучение всего этого. Другие не могут, я уверен, сказать четко, что им больше доставляет удовлетворение - создание и обслуживание сайта или бизнес в сети.


Обе эти категории правы и заслуживают уважения и понимания. И поэтому я постараюсь в своей рассылке помочь обоим.
Сегодняшний выпуск будет посвящен тем кто предпочитает все делать своими ручками.


Итак начнем.

Когда мы загружаем вебстраничку в свой браузер, что первым появляется?


Правильно!


Заголовок. Логотип. Хедер.


Вот с этого и начнем.


Надеюсь Вы уже покопались в сети или в ближайших магазинах и нашли какие-либо учебники по 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

Архив рассылки на сайте

 

Видео-урок
"Как создать сайт при помощи Конструктора сайтов e-Gloryon"

Скачать

 

Демо-версия

Опробуйте наш продукт не "на бумаге", а в деле.

Получить

 

Создай свою прибыльную студию web-дизайна с минимальными навыками

Подробнее..

 

Статьи:

Создание сайта: мифы в интернете и практика пользователя или о пользе системы класс - бонус. Познать все возможности интернета мне довелось не так давно. Зато я успела изучить истории восхождения на бизнес-Олимп таких известных людей, как Александр Доценко и Павел Берестнев, Дмитрий Смакотин и Дмитрий Борисов, Азамат Ушанов.....

Как создать привлекательный сайт? Вы желаете сделать полезный, красивый и удобный сайт. Что же для этого нужно? Какие факторы влияют на популярность web-сайта? С чего лучше всего начать создание собственного сайта? И какие ошибки могут подстерегать на этом пути?
Я попробовал выделить основные причины, которые, по моему личному мнению, влияют на популярность сайта:...

Основные правила при создании текста для WWW. Характер текста веб-страницы определяет не только ее содержание, но и впечатление, производимое на пользователя. Отсутствие в тексте грамматических ошибок имеет большое значение, однако также немаловажно представлять информацию в форме, позволяющей акцентировать внимание посетителя на наиболее существенных моментах повествования.


 


В избранное