Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Добавляем "стрелку" перед ссылкой.

Автор: Андрей Краснокутский

Дата: 2009-03-17

Для придания сайту индивидуальности, а так же как "украшательство" (я бы это назвал так) многие web-мастера добавляют к пунктам меню или категориям меню различные стрелочки, кружочки, галочки и т.д. Действительно, с подобными вставочками сайты смотрятся гораздо симпатичнее я этим пользуюсь сам. Как это делается и что для этого надо?

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

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

В данном случае использовался файл arr.jpg , размером height="12" width="15" т.е. 12Х15 px с изображением треугольничка. Так как этот файлик лежит у меня в той же папке, что и все отстальные файлы - то путь указывать не нужно, если Вы положите его в какую-то другую папку, естественно необходимо прописать правильный путь.

Открываем код нашей web-странички index.html , находим там пункты меню, которые у нас оформлены в виде ссылок и заключены в теги <p> </p> вставляем как это принято в HTML графический файл <img src="arr.jpg" height="12" width="15" border="0">между тегом <p> и самой ссылкой <a href="index.php">Автомобили Mercedes</a></p> в результате код меню должен выглядеть так:

Листинг 1.

<p><img src="arr.jpg" height="12" width="15" border="0"><a href="index.php">Автомобили Mercedes</a></p>
<p><img src="arr.jpg" height="12" width="15" border="0"><a href="bmw.php">Автомобили БМВ</a></p>
<p><img src="arr.jpg" height="12" width="15" border="0"><a href="audi.php">Автомобили Ауди</a></p>
<p><img src="arr.jpg" height="12" width="15" border="0"><a href="toyota.php">Автомобили Тойота</a></p>
<p><img src="arr.jpg" height="12" width="15" border="0"><a href="reno.php">Автомобили Рено</a></p>

 

Обязательно: обратите внимание, что в коде необходимо указать обязательный тег border="0" со значением 0. Для чего это делается? Этим мы указаваем браузерам всех производителей, что рамки вокруг этого рисунка быть не должно, некоторые браузеры не найдя в коде такой записи могут "взять" этот файлик и обвесть в рамку, смотрится очень некрасиво.

Сохраняем, обновляем файл index.html и смотрим. Вот что у нас получилось.

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

 

Просмотров: 8765


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Сергей
Дата: 2010-02-16

На счет border=0 - по правилам валидности лучше не использовать в теге <img> , а прописать в CSS такое: img{border:0px;}

Комментарии добавил(а): Николай
Дата: 2012-10-24

Спасибо за урок, обязательно попробую внедрить на свой сайт

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT