Все о создании сайтов, блогов, форумов, интернет-магазинов, их продвижении в поисковых системах и заработке на сайте

Здравствуйте уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня в эфире очередной, пятый по счету, выпуск Веб-обзоров. В этот раз разговор пойдет про удобный и наглядный сервис Da Button Factory для создания и детальной настройки внешнего вида кнопок для своего сайта, а так же сервис Texster, позволяющий подобрать нужные параметры для текста на вашем сайте.

Da Button Factory - сервис для создания и тонкой настройки красивых кнопок для вашего сайта

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

Сервис называется Da Button Factory. На главной странице в ваше распоряжение предоставляется набор инструментов для того, чтобы вы смогли ввести текст кнопки, задать тип и размер шрифта этого текста, выбрать форму для кнопки, задать ее цвет или даже два цвета, для создания градиента. Так же вы сможете создать рамку для кнопки, включить отбрасывание кнопкой тени, задать точный размер для создаваемой кнопки и, наконец, выбрать формат, в котором будет сохранена созданная вами кнопка (png, gif, jpeg или ico).

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

Создание кнопки для своего сайта с помощью инструментов сервиса Da Button Factory

Теперь давайте поподробнее рассмотрим возможности по редактированию создаваемых кнопок сервиса Da Button Factory. Для начала в поле "Text" можно вписать текст, который будет отображаться на кнопке, а в поле "Font" выбрать из выпадающего списка тип шрифта (не все имеющиеся там шрифты поддерживают русский язык). Для текста кнопки можно будет также задать жирное или курсивное начертание, просто оставив галочки в полях "Bold" и "Italic".

Размер шрифта можете выбрать из выпадающего списка в поле "Size", а щелкнув по квадратику с текущим цветом рядом с надписью "Color", у вас появится возможность выбрать из открывшейся палитры нужный цвет текста на создаваемой вами кнопке.

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

В области "Output type" вы можете выбрать, в каком именно виде будет сохраняться создаваемая вами кнопка. Можно выбрать из выпадающего списка либо вариант сохранения кнопки в виде графического файла, либо в виде правил для вашего файла каскадных таблиц стилей CSS. В случае выбора сохранения кнопки в графический файл, у вас еще появится возможность выбрать формат для сохранения созданной вами кнопки (png, gif, jpeg или ico).

В области "Style" вы можете выбрать из выпадающего списка один из трех возможных вариантов стилевого оформления углов создаваемой кнопки:

• rectangular box - кнопка с прямыми углами (квадратными)
• rounded box - кнопка со скругленными углами, причем радиус скругления можно задать в поле "Corners radius"
• round box - кнопка с полукругами по бокам

В области "Background" вы можете задать фоновую заливку создаваемой кнопки одним или несколькими цветами. Из выпадающего списка вы можете выбрать варианты заливки:

• unicolored - заливка кнопки одним цветом, который можно выбрать в области "Color"
• two colors - заливка кнопки двумя цветами, которые можно выбрать в области "Color". Цвета будут заливать ровно по половине кнопки. Поменять расположение цветов на кнопке можно при помощи кнопки "swap"
• gradient - градиентная заливка двумя цветами. В этом случае, цвета будут плавно перетекать один в другой. Направление перетекания цветов можно задать при помощи кнопки "swap"
• pyramid - вариант градиентной заливки двумя цветами, но при этом один цвет перетекает в другой, а затем опять осуществляется плавный переход к первому цвету. Кнопка "swap" позволяет менять последовательность цветов

В области "Border" вы можете задать рамку для кнопки, указав ее толщину и цвет в соответствующих полях. В области "Size" вы можете задать размер создаваемой кнопки по высоте и ширине. После окончания всех настроек вы можете загрузить файл созданной кнопки к себе на компьютер, нажав на ссылку "download" в середине страницы. Кнопка будет сохранена в том графическом формате, который вы выбрали в области "Output type".

Как вставить созданную на сервисе Da Button Factory кнопку в шаблон своего сайта

Для того, чтобы вставить скачанный графический файл с изображением кнопки в нужное место вашего сайта и сделать ее активной (чтобы осуществлялся переход по данной кнопке при щелчке по ней мышью), вам нужно будет сначала загрузить файл картинки с кнопкой на свой сайт, а затем вставить в нужное место шаблона вашего сайта тег картинки IMG, заключив его в тег ссылки A. Ссылка будет вести на ту страницу, которая должна будет открыться по нажатию на созданную кнопку. Например, так:

<a title="Подписаться на обновления KtoNaNovenkogo.ru по RSS" target="_blank" href="http://feeds.feedburner.com/Ktonanovenkogoru"><img src="http://ktonanovenkogo.ru/image/button.png" title="Da Button Factory - пример вставки созданной кнопки в нужное место сайта" alt="Da Button Factory - пример вставки созданной кнопки в нужное место сайта" /></a>

Для того, чтобы у вас была возможность позиционировать созданную кнопку относительно соседних элементов дизайна сайта, вы можете заключить данный код в открывающий и закрывающий теги DIV (создать контейнер). В данном теге DIV вы можете прописать атрибут CLASS, а затем прописать нужные свойства для этого класса в файле CSS вашего шаблона. Например, так:

<div class="imgleft"><a title="Подписаться на обновления KtoNaNovenkogo.ru по RSS" target="_blank" href="http://feedburner.google.com/fb/a/mailverify?uri=Ktonanovenkogoru&loc=ru_RU"><img src="http://ktonanovenkogo.ru/image/button2.png" title="Da Button Factory - пример вставки созданной кнопки в нужное место сайта с использование классов" alt="Da Button Factory - пример вставки созданной кнопки в нужное место с использование классов сайта" /></a></div>

В файле CSS для этого класса imgleft прописать, например:

.imgleft {
	float:left;
	margin: 5px 15px 5px 40px;
}

В результате получим кнопку расположенную следующим образом:

Я еще на рассказывал на своем блоге о работе с таблицами каскадных стилей CSS, поэтому поясню строки свойства для класса imgleft:

• float:left; - заставляет данный блок с кнопкой прижаться к соседнему элементу дизайна сайта, расположенному слева
• margin: 5px 0px 5px 40px; - задает отступ в пикселях данного блока с кнопкой относительно соседних блоков. Отступы перечисляются в таком порядке: сверху, справа, снизу, слева

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

Texster - онлайн сервис для наглядного подбора шрифтов и создания CSS стилей для текста вашего сайта

Для того, чтобы посмотреть как будет выглядеть текст вашего сайта при изменении типа и размера шрифта, расстояния между буквами и словами, высоты строки и задании красной строки, вовсе не обязательно постоянно вносить изменения в CSS файл шаблона вашего сайта и смотреть результат манипуляций на своем сайте вживую. Ведь при этом все изменения будут видны и посетителям вашего сайта, да и утомительно это и очень долго.

Хорошо, что имеется такой сервис как Texster, который позволяет очень просто и наглядно увидеть, как будет выглядеть текст вашего сайт при внесении тех или иных изменений в CSS свойства. От вас требуется только вставить в область под названием сайта фрагмент текста. Просто прокрутив страницу вниз вы увидите как будет выглядеть данный текстовый фрагмент при использовании пятнадцати наиболее популярных у вебмастеров шрифтов.

Кроме этого вы можете в области "Начертание" сделать текст жирным, курсивным и т.д. А в области "Выравнивание (text-align)" задать разные варианты выравнивания текста. Обратите внимание, что в скобках написано название свойства CSS, которое отвечает за это. В области "Цвет" вы можете менять цвет текста и фона. В скобках опять же указаны правила CSS, описывающие данное свойство.

В правой верхней части окна Texster расположены пять движков, перемещая которые вы сможете изменять размер текста (font-size), высоту строки (line-height), расстояние между буквами (letter-spacing), расстояние между словами (word-spacing) и отступ красной строки (text-indent). Вы можете выбрать так же единицы измерения этих параметров (писксели, пункты и т.д.) поставив галочку в нужном месте.

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

Вам нужно будет найти в файле CSS используемого вами на сайте шаблона место, где прописаны свойства для текста материалов сайта. Для этого можете воспользоваться плагином FireBug для браузера FireFox:

• Установка Firebug
• Методы работы с Firebug
• Возможности и принципы работы плагина Firebug для браузера Firefox
  • Работа с HTML кодом страницы с помощью плагина Firebug
  • Работа с CSS свойствами нужного участка страницы с помощью плагина Firebug
  • Измерение скорости загрузки страниц сайта с помощью плагина Firebug
• Поиск по содержимому файлов сайта при помощи Total commander

Если нужное свойство уже имеется в области, где описываются свойства текста постов в вашем файле CSS, то вы просто прописываете в нем другое значение, а если такого свойства нет, то дописываете его с нужным значением. Например, для настроек, приведенных на последнем рисунке, свойства CSS будeт выглядеть так:

font-size: 0.85em;
line-height: 120%;
letter-spacing: 0.25em;
word-spacing: 0.5em;
text-indent: 2.1em;

Вы так же можете ознакомиться с другими обзорами полезных онлайн (online) сервисов для вебмастеров. На сегодня все. Если вы не хотите пропустить появление новых материалов на этом сайте, то можете подписаться на рассылку новостной ленты через форму, расположенную чуть ниже, или же выбрать удобный для вас способ подписки на странице Подписка. Если у вас остались нерешенные вопросы из области вебмастеринга, то вы можете поискать на них ответы, посетив страницу Вопросы и ответы.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Постовой (обмен постовыми): Здесь вы сможете узнать о 10 обязательных приемах работы партнерскими программами