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

1. Образец слайда (Вид >> Образец слайдов) . Эта функция нужна, чтобы на каждом создаваемом слайде был нужный фон, поля для заголовка и для текста находилось в нужных местах, текст в них печатался нужной гарнитурой, размером, цветом, с нужными межстрочными и межабзацными интервалами, буллиты были нужного типа, логотип не менял свое положение от слайда к слайду и пр. Чтобы реализовать все эти замечательные вещи, нужно зайти в образец слайда и отредактировать нужные параметры.

2. Подгонка клавишами курсора. Выделенный объект (автофигуру, фотографию, текстовое поле) можно передвигать клавишами курсора. Это намного быстрее и точнее, чем пытаться точно его разместить мышкой. Чтобы шаг перемещения был больше, нужно удерживать Shift, чтобы шаг был меньше (для точной подгонки), нужно удерживать Ctrl.

3. Направляющие (контекстное меню на слайде или Alt + F9). С их помощью можно наметить модульную сетку или просто выставить ориентир, чтобы ровно что-нибудь расставить. Объекты «липнут» к направляющим. По умолчанию выводится одна вертикальная и одна горизонтальная направляющая ― чтобы скопировать направляющую, нужно зажать и перетащить ее в нужное место, удерживая Ctrl.

4. Горячие клавиши при работе мышкой.

* Если перемещать объект мышкой, удерживая Ctrl, то исходный объект останется на месте, он скопируется и копию можно сразу поставить в нужное место. Если изменять размеры объекта, удерживая Ctrl, то размер будет меняться симметрично ― центр объекта останется на месте.
* Если перемещать объект мышкой, удерживая Shift, то объект будет двигаться только строго вертикально или горизонтально. Если изменять размеры объекта, удерживая Shift, то будут сохраняться пропорции. Если удерживать Shift при рисовании автофигуры то ее ширина и высота получатся равными (например, получится круг или квадрат).
* Если перемещать, удерживая Alt, то объект не будет привязываться к сетке и липнуть к направляющим ― его можно расположить точнее. С Alt можно точнее масштабировать объект.

Все эти клавиши работают и вместе: если я хочу скопировать объект, поставить его копию строго по горизонтали, и при этом точно в какой-то точке, то при движении мышкой я буду удерживаться Ctrl, Shift и Alt.

5. Функции выровнять/ распределить (меню «Действие» в левом нижнем углу, в PP2007 ― «Упорядочить» справа вверху ). Можно выделить несколько объектов и выровнять их по вертикали или горизонтали; можно расставить их так, что координаты центров будут равноудалены по вертикали или горизонтали. Незаменимая вещь при создании блок-схем.

***

Даже если вам нужно верстать всего по несколько слайдов в месяц, 15 минут на освоение этих нехитрых приемов с лихвой окупятся в первый же час работы в PowerPoint.

Великолепные зимние пейзажи фотографа Paivi Valkonen

CSS:


.test {
background-color: #008B00;
color: #ffffff;
width: 100%;
}

.opaque {
opacity: .5;
filter: alpha(opacity=50);
}

Safari, Mozilla, Opera 9

Эти браузеры поддерживают opacity. Для указания прозрачности (opacity) используются числа от 0.0 (не прозрачный) до 1.0 (прозрачный), нельзя указывать единицы в процентах.

Explorer Windows

Для Explorer Windows нужно:


filter: alpha(opacity=50);

Замечание: чтобы filter работал, его нужно применять к элементам разметки (block level).

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

Описанное выше не будет работать в Explorer 5.0 Windows, Explorer Mac, и iCab.

Еще замечание: так как opacity будет определено в CSS3, таблица стилей этой страницы в настоящее время не проходит валидацию.

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


Виды счетчиков

Счетчики делятся на две категории: элементарные цифровые и счетчики со статистикой и рейтингом. К первой категории относятся счетчики, показывающие только данные относительно посещаемости сайта. Получить такой вид счетчика можно у провайдера, чьими услугами вы пользовались при размещении сайта в Интернете.

С помощью второго вида счетчиков можно получить доступ к информации о статистических данных посещений и определить рейтинг ресурса в каталоге или поисковой системе (в зависимости от того, кому он принадлежит). Наиболее востребованными среди веб-мастеров считаются счетчики поисковых систем и каталогов Rambler, KMindex, Mail.ru, SoftList и Bigmir.

Кроме поисковиков и каталогов, счетчики также создаются сторонними компаниями, например, SpyLog и HotLog.

Размещение счетчика на веб-сайте

Стандартный счетчик, к какой бы из вышеперечисленных категорий он не относился, представляет собой баннер, в большинстве случаев размером 88х31 (реже 88х63), с html-кодом, который необходимо вставить в документ. Задача вроде бы простая, однако и здесь имеются подводные камни. Во-первых, следует знать, что устанавливать счетчики со статистикой и рейтингом лучше всего на главной странице ресурса, так как именно на ней наблюдается большое количество посетителей.

Во-вторых, если у вас на сайте присутствуют так называемые «всплывающие окна», реализованные при помощи метода window.open( ) языка JavaScript, на них также следует разместить счетчики. Для того чтобы информация о подобных страницах учитывалась в общей статистике посещаемости, счетчики необходимо сделать невидимыми, уменьшив до размеров 1х1. В качестве практического примера рассмотрим счетчик каталога KMindex. Он имеет следующий html-код:

<script type="text/javascript">
document.write('<a href="http://click.kmindex.ru/?uid=22546" target="_blank"><img '+
'src="http://counting.kmindex.ru/8.gif?uid=22546&r='+escape(document.referrer)+
'&'+Math.random()+'" width="88" height="31" border="0"></a>')
</script>

Обратите внимание, что изображение счетчика находится в предпоследней строке кода, а именно '&'+Math.random()+'" width="88" height="31" border="0"></a>'. Сам код оставляем прежним, меняем только ширину и высоту счетчика width="88" height="31" на width="1" height="1". В итоге получаем:

<script type="text/javascript">
document.write('<a href="http://click.kmindex.ru/?uid=22546" target="_blank"><img '+
'src="http://counting.kmindex.ru/8.gif?uid=22546&r='+escape(document.referrer)+
'&'+Math.random()+'" width="1" height="1" border="0"></a>')
</script>

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

Вместо заключения

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

Проект MTV Switch выпустил рекламные принты в защиту окружающей
среды с лозунгом: «наша планета теряет терпение» («our planet is losing patience»).
Автор – рекламное агентство Ogilvy (Вена, Австралия)







Творческая группа:
Advertised brand: MTV SWITCH
Advertising Agency (Name, City, Country): Ogilvy, Vienna, Austria
Creative Director: Ivo Kobald, Alexander Rudan
Art Director: Christian Bircher
Copywriter: Marco Kalchbrenner, Marcus Zbonek
Published/Released (Month, Year): March 2009

С развитием Интернета разработчики веб-сайтов все чаще стали использовать анимацию. Несомненно, анимация на страницах сайта способна внести элемент движения, живости. Особенно это касается ресурсов, содержащих громоздкие тексты и публицистические материалы. Но когда анимация (GIF и Flash) бездумно и, самое главное, в огромных количествах размещается на сайте, невольно создается впечатление, что сделано это лишь затем, чтобы продемонстрировать уровень мастерства дизайнера или веб-студии. При этом об удобстве пользователей, по большому счету, никто и не задумывается. А ведь зачастую, из-за обилия флэш-роликов и gif-анимации на сайте, невозможно не то что запомнить информацию, ее и прочитать то трудно.

Так как использование анимации имеет ограничения и довольно серьезные, разберемся в каких случаях оправданы анимационные эффекты, а в каких нет.

Анимацию НЕ следует применять:

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

b) При разработке логотипа. Логотип - это фирменный знак, часть бренда, и поэтому он не должен содержать сложных для зрительного восприятия объектов, тем более недопустимым считается включение в него анимационных изображений.

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

Использование анимации НЕОБХОДИМО, когда:

а) Требуется наглядно продемонстрировать возможности того или иного рекламируемого товара. При этом с помощью программы 3d max можно разработать объемные объекты или, применяя флэш-технологию, создать элемент "слайд-шоу", снабженный кнопкой управления. Флэш-анимация обладает несравнимо большими возможностями и богатым набором инструментов для их реализации по сравнению с gif-анимацией. Однако, не стоит увлекаться этой технологией, поскольку во-первых, основная часть пользователей до сих пор "сидит" на низкоскоростных модемах, и поэтому не сможет оценить привлекательный дизайн, выполненный с применением флэш-анимации. Во-вторых, несовершенство российских поисковых систем делает содержание флэш-сайтов недоступным для поиска, а значит и для оценки уровня релевантности. Другими словами, флэш-сайт не сможет рассчитывать на место в рейтинге поисковых систем, так как они его просто-напросто не обнаружат.

b) Проследить изменение какого-либо объекта.

с) Привлечь внимание пользователей к определенной области веб-страницы. В этом случае допустимо применение "всплывающих" названий и прочих эффектов.

Заключение.

Если вы сомневаетесь применять или не применять анимацию на сайте, задайте себе вопрос: а можно ли в данном случае обойтись без нее? При положительном ответе не теряйте время и приступайте к разработке анимации или же отдайте сайт в руки специалистов по веб-дизайну, договорившись о том, где вы желаете видеть анимационные объекты, а где нет.

Поговорим на тему заработка в интернете ...
Зарабатывать в интернете можно по-разному, но однозначно только если есть сайт или блог. Можно конечно писать платные сообщения на форумах, но цена за постинг на форумах очень низкая.
Так вот, как уже всем известно, один из самых популярных и эффективных способов заработка в интернете является заработок на собственном блоге, путем постинга в нём платных статей. По сути та же реклама, только более эффективная с точки зрения seo. Так как контекстная реклама и баннерная по большому счёту это код (HTML,PHP или java-sсript), который совсем не индексируется поисковиками, а рассчитан только на то, что его увидит человек и кликнет по ней(рекламе).
А сервис Blogun.ru — это крупнейший в рунете организатор рекламных кампаний в блогосфере.
Зарабатывайте на своем блоге, делая обзоры товаров и услуг рекламодателей. Платные записи — это, на сегодня, самый быстрый и доступный способ монетизации блогов. Легальный и вполне этичный. Вот по этой ссылке можно почитать о работе сервиса: улучшениях, нововведениях, полезных и исправленных функциях, которые задействованы в панелях управления (как блоггера, так и рекламодателя).

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

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

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

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

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

За уменьшение или увеличение точечного изображения отвечает специальный параметр – масштаб. Подобные изменения никоим образом не влияют на объем файла векторного изображения.

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

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

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

Если на сайте весь текст будет выполнен одним шрифтом, чтобы прочитать его посетителю придется изрядно помучиться. Именно поэтому основной текст принято разбивать на абзацы, а весь документ оформлять в едином стиле. В понятие «стиль» входят специальные элементы, применяемые для форматирования абзаца. Основными элементами стиля являются:

1. Гарнитура шрифта
2. Размер шрифта
3. Начертание шрифта
4. Метод выравнивания

А теперь, каждый элемент рассмотрим подробнее и выявим основные требования к оформлению текста.

* Гарнитура шрифта. Выбирается исходя из соображений комфортного чтения. Так как заголовки должны выделяться, допустимо применение отдельного вида шрифта большего размера, чем в основном тексте. Кроме того, характер шрифта «подстраивается» под тематику текста. К заголовкам серьезных материалов (экономика, политика, различные исследования) применяют строгий, аскетический шрифт без насечек, например Arial или Helvetica.

* Размер шрифта. Размер шрифта согласуется с общим видом веб-страницы. Если для меню использовался шрифт размером 8 пунктов, для основного текста веб-страницы используется размер 10-12 пунктов, не более того. Для дополнительного текста (примечания, подрисуночные надписи) размер шрифта может колебаться в диапазоне от 8 до 9 пунктов, а вот оформление заголовков потребует увеличения размера шрифта.

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

* Метод выравнивания. Существует четыре метода выравнивания: по левому краю, по правому краю, по центру и по ширине. Выравнивание по центру актуально для заголовков, по правому краю – для примечаний и дополнений, а по ширине выравнивается основной текст.

Форматирование текста в html-редакторе занимает слишком много времени, поэтому чтобы разместить на странице текст в том виде, в котором он был создан в текстовом процессоре, воспользуйтесь тегом <pre>.

Работать с текстом удобнее всего в "визуальных" html-редакторах, так как в них предусмотрены наборы инструментов для форматирования, благодаря чему веб-мастер избавлен от необходимости ввода тегов вручную. Достаточно выбрать вид и цвет шрифта, или указать отступ, как программа самостоятельно внесет нужные изменения в код страницы.

Такая вот красота.

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

Главный параметром, на который ориентируются при создании баннера – это CTR (показатель эффективности баннера), вычисляемый по формуле: отношение числа пользователей, перешедших по нему, к общему числу посетителей видевших страницу с данным баннером.

CTR зависит от нескольких факторов:

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

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

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

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

Форматы баннеров

Существует пять стандартных размеров (форматов) баннеров:

480х60 – Самый большой по размеру баннер. Чтобы не было проблем при его размещении на сайте и не пришлось в срочном порядке перекраивать структуру ресурса, еще на этапе верстки необходимо предусмотреть место для такого рода баннеров.

400х40 – Мини-баннер, обладающей значительной длиной. Как и в случае с предыдущим форматом, для баннера 400х40 требуется заранее предусмотреть площадь размещения.

234х60 – Для экономии места на сайте, веб-мастера располагают подобные баннеры парами.

120х60 - «Рекламный» кирпич». Размещается в вертикально расположенных элементах веб-страницы.

88х31 – Баннер – «кнопка», названный так из-за небольших размеров. Является самым распространенным в Интернете. Помещается на любом сайте.

Создание баннера

Сделать баннер просто, для этого достаточно уметь работать с графическими редакторами и знать основы языка HTML. А вот создать баннер с высоким показателем CTR задача довольно сложная, требующая знания определенных законов и правил веб-дизайна.

Итак, какие элементы должны присутствовать на баннере?

1. Краткое содержание рекламируемого сайта.
2. URL-сайта, контактные данные компании, логотип.
3. Запоминающийся текст или слоганы.

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

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

Опять коснемся темы меню, название статьи говорит само за себя о чем пойдет сегодня речь. Есть масса способов реализовать пункты меню с закругленными углами. Но в этой статье пойдет речь о том как это сделать без использования скриптов, но с использованием картинок (от них никуда не деться). Думаю следует в самом начале рассказать принцип, чтобы в дальнейшем было понятно что мы будем реализовывать. В данном примере будет рассмотрено горизонтальное меню при наведении на один из пунктов, которого будет появляться фон с закругленными краями. Вот пример. С первого взгляда кажется ничего сложно, просто подкладываем под пункт меню нужную картинку с помощью свойства background и все. В принципе да, но большинство верстальщиков впадают в ступор, когда количество символов в пунктах меню значительно отличаются. И как сделать так чтобы левый и правый отступы от краев подкладываемой картинки были одинаковы при различной длине. Сперва приходит мысль о том чтобы подкладывать под каждый пункт меню отдельную картинку, но это дополнительные картинки, дополнительный код и что очень печально совсем не динамическое решение. Решение есть и довольно простое. И что самое приятное, нам потребуется всего одна картинка. И так… Картинка должна иметь следующий вид:



Да, именно такая длинная, возможно вам и подлиннее потребуется.

Меню будет представлено горизонтальным списком (ul), и в пункты-ссылки нашего меню мы добавим один небольшой тег <span>

HTML код:

code:
<ul>

   <li><a href="#"><span>Псевдоэлементы и псевдоклассы</span></a></li>

   <li><a href="#"><span>CSS</span></a></li>

   <li><a href="#"><span>Выпадающее меню на css</span></a></li>

   <li><a href="#"><span>Введение в CSS</span></a></li>

</ul>

Хотя в XHTML тег <a> не допускает вложенных тегов, тег <span> является исключением. Вы можете смело его вставлять в тег <a>, результат окажется валидным и пройдет валидацию.

CSS код:

code:
ul li {

display: block;

font-size:15px;

margin-right: 30px;

float:left;

}

ul li a, ul li a span {

color: #000000;

display: block;

text-decoration: none;

background: url(over.gif) no-repeat 0 -30px;

padding:0px;

}

ul li a span {

margin:5px 0px 5px 15px;

padding:4px 15px 6px 0px;

}

ul li a:hover, ul li a:hover span {

background-color:#DBDBDB;

}

ul li a:hover {

background-position: top left;

cursor:pointer;

}

ul li a:hover span {

background-position: top right;

cursor:pointer;

}

over.gif является нашей длинной картинкой. Код является полностью валидным, соответствующие значки прилагаются. Вот так просто и без всяких JS решается проблема с закругленными углами у пунктов меню.

Таким же образом можно выделять активные пункты меню. Присваиваете активной ссылке класс (например class=”active”) и этому классу соответствующие стили, пример приводить не буду, думаю разберетесь.

Знаете ли Вы, что такое favicon и как его использовать себе во благо? Если нет, то эта информация для Вас ;)

Favicon - это такой небольшой значок, 16х16 пикселей, который появляется в строке браузера, рядом с адресом сайта. Казалось бы, небольшой элемент, который служит простым украшением и не выполняет никакой практической функции. Но такое суждение ошибочно.

Favicon у сайта – это, как платок, торчащий из нагрудного кармана пиджака. Если его нет, навряд кто-то заметит, а если есть – это подчеркнет Вашу элегантность, выделит из толпы и заставит запомнить. Согласитесь, в платке нет ничего неординарного, обыденная вещь, но каков результат он производит на общественность! Нет-нет, если у Вас будут грязные туфли или помятый пиджак, то от платка не будет толку…

Точно так же обстоят дела на просторах Интернета, если у Вас корявый и неприятный сайт, то никакой favicon не спасет.

Изначально favicon’ы использовал Microsoft Internet Explorer для закладок. И таким образом можно было считать, какое количество посетителей отправляет страницы сайта в избранное. Сейчас он получил более широкое применение, например, его отображают поисковики. Для старых браузеров favicon’ы создавались в формате ico. Отсюда и название favicon - сокр. от англ. FAVorites ICON — «значок для избранного», от названия папки с закладками в MSIE. Как правило их и сейчас делают в этом формате, но новые браузеры поддерживают favicon’ы в форматах gif и png.

Favicon можно нарисовать самому или найти готовый в Сети. Но последнего я настоятельно не рекомендую делать. Представьте, что у Вас из кармана будет торчать носок или платок, но которым на протяжении недели пользовался весь отдел. Или другой вариант – платок никаким образом не сочетается по цвету и качеству ткани с остальной одеждой.

У каждого сайта favicon должен быть свой. Если Вы не умеете рисовать, закажите его профессионалу или зайдите на любой форум посвященный Photoshop и в разделе «помощь» попросите оказать такую услугу.

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

Для того, чтобы favicon отображался в строке браузера, его нужно закачать в корневую папку сайта, а в код, внутри тегов , вставить следующий код:

<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>

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

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

Такой «обогащенный» вид ссылок позволяет внести некоторое разнообразие, что, безусловно, может быть полезно. Этот прием так же может быть использован для разграничения различных типов ссылок внутри самого сайта.
Итак, начнем.

Начните с создания вашей собственной черты. Графика должна повторяться горизонтально, и если Вы хотите, чтобы сквозь нее был виден фон сайта, то создайте прозрачный .gif файл.

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

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

p { line-height: 1.5; }

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

a { text-decoration: none; }

Чтобы создать свой собственный вид подчеркивания ссылки, возьмем нарисованную нами картинку в качестве фона:

a { background-image: url(underline.gif); }

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

a { background-repeat: repeat-x; }

Чтобы быть уверенным в том, что наша графика отображается под текстом независимо от размера шрифта, мы будем использовать свойство «background-position», которое и «привяжет» изображение к нижней части строки. Для различных видов изображений — таких, например, как стрелки, — можно использовать другие варианты выравнивания. В нашем случае будет использоваться выравнивание по правому нижнему углу.

a { background-position: 100% 100%; }

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

a { padding-bottom: 4px; }

Так как картинка помещена внизу нашего элемента, нам следует позаботиться о том, чтобы ссылка не переходила на другую строку. (Если перенос будет разрешен, подчеркнутой будет только нижняя строка). Используем свойство CSS «white-space property», чтобы запретить перенос.

a { white-space: nowrap; }

Теперь все эти свойства можно объединить:

a {
text-decoration: none;
background: url(underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}

Если же вы хотите, чтобы этот эффект появлялся только при наведении курсора на ссылку, просто присвойте свойство "background" и его описание псевдо-классу ":hover".

a {
text-decoration: none;
padding-bottom: 4px;
white-space: nowrap;
}

a:hover {
background: url(underline.gif) repeat-x 100% 100%;
}

Хотела бы я работать в таком фотошопе. ^^

Вот я и на лиру, посмотрим что это за сервис)