Лучшие ссылки

Создание красивого раздвижного меню для сайта.

bandjuk — Mon, 28 May 2012 09:11:09 GMT

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

Пример меню

Вот код красивого раздвижного меню для сайта.
Этот код состоит из трёх пунктов меню.
1 пункт - содержит в себе 7 подпунктов;
2 пункт - 2 подпункта;
3 пункт - 1 подпункт;

Code

Итак, начнём разбираться что к чему!
Разделим этот код на две части.

1. Оформление.

Code

Разберём этот код меню по частям
1.1. Этот код задаёт внешний вид пункту меню.

Code

- отвечает за ширину основного меню.

.menu {height:10px;width: 175px;font: normal 10px Arial, Helvetica, sans-serif;text-align: left; margin-top:1px;}
height:10px; - ширина основного меню;
width: 175px; - длина основного меню;
font: normal 10px Arial, Helvetica, sans-serif; - стили текста;
text-align: left; - выравнивание текста основного меню (слева, справа, по ширине)
margin-top:1px; - Устанавливает величину отступа от верхнего края элемента.

1.2. Этот код задаёт внешний вид подпункту меню.

Code

Всё то же самое как и пункте 1.1.

2. Код отвечающий за количество пунктов и подпунктов меню

1.1 Код пункта меню:

Каждое новый пункт меню следует создавать по такому шаблону

Code

каждый следующий подпункт (подменю) создаётся кодом:
Подменю 1

таких подпунктов может быть сколько угодно!

Вот и всё! По-моему ничего сложного тут нет!

Для создания нескольких блоков меню на сайте просто переименуйте названия стилей меню .menu и .menu1
напирер на .m и .m1.

Материалы на эту же тему:

Создание абзаца в тексте
Специальные символы
Создание бегущей строки
Основные атрибуты и свойства фона - background
Оформление ссылок в таблице стилей (CSS)
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу

Создание абзаца в тексте.

bandjuk — Mon, 05 Dec 2011 14:02:08 GMT

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

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

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др.
При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок.

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

Code

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др.

Любой текст

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

Для создания отступов по всей статье каждый новый блок текста должен быть помещён между:

Code

Материалы на эту же тему:

Создание красивого раздвижного меню для сайта
Специальные символы
Создание бегущей строки
Основные атрибуты и свойства фона - background
Оформление ссылок в таблице стилей (CSS)
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу

Специальные символы

bandjuk — Wed, 23 Nov 2011 20:23:06 GMT

Иногда возникает необходимость в использовании символа, которого нет на клавиатуре. Как быть в этом случае? Для этого существуют специальные символы, состоящие из знаков амперсанда (&), фунта (#), числового кода и точки с запятой (;). Либо из амперсанда, наименования символа и точки с запятой (;).

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

Таблица часто используемых специальных символов html

Таблица специальных символов html

Материалы на эту же тему:

Создание красивого раздвижного меню для сайта
Создание абзаца в тексте.
Создание бегущей строки
Основные атрибуты и свойства фона - background
Оформление ссылок в таблице стилей (CSS)
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу

Создание бегущей строки

bandjuk — Tue, 22 Nov 2011 17:41:11 GMT

Для создания бегущей строки, используется дескриптор .

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

scroll - заставляет строку появляться с одной стороны экрана и исчезать за противоположной стороной.

slide - строка появляется из-за одной стороны экрана и останавливается у другой.
alternate - заставляет строку бегать взад-вперед.

Атрибут DIRECTION задает направление перемещения строки, может принимать следующие значения:

left - движение строки влево;
right - движение строки вправо:

Пример:
строка появляется в правой части экрана, движется влево и исчезает.

Code

Текст

Атрибут LOOP - определяет количество циклов перемещения.

Пример:
строка появляется в правой части экрана, движется влево и исчезает 30 циклов.

Code

Текст

Атрибут BGCOLOR - позволяет изменять цвет фона бегущей строки.

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

Code

Текст

Атрибут SCROLLAMOUNT - служит для задания шага перемещения строки в экранных пикселях.

Пример:

Code

Текст

Атрибут SCROLLDELAY - служит для указания времени задержки в миллисекундах между отдельными тактами перемещения строки.

Пример:

Code

Текст

Материалы на эту же тему:

Создание красивого раздвижного меню для сайта
Создание абзаца в тексте
Специальные символы
Создание бегущей строки
Основные атрибуты и свойства фона - background
Оформление ссылок в таблице стилей (CSS)
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу

Основные атрибуты и свойства фона - background

bandjuk — Thu, 17 Nov 2011 12:11:28 GMT

Свойство background позволяет снабдить графическим фоном любой элемент Вэб-страницы.

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

Разберём код:

Code

background:url('http://ssilki.at.ua/image/3.gif') - указывает на адрес фонового изображения;
#000000- задаёт цвет фона;

Атрибут repeat определяет степень повторяемости фонового изображения и может иметь следующие значения:

repeat - изображение бесконечно повторяется по горизонтали и вертикали, заполняя собой все фоновое пространство браузера;

repeat-x - изображение повторяется по горизонтали;

repeat-y - изображение повторяется по вертикали;

no-repeat- изображение не повторяется.

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

Свойство background-attachment определяет, фиксируется ли фоновый рисунок, или прокручивается вместе с содержимым страницы.

Атрибут scroll - определяет подвижность/статичность фона.

Background-attachment: scroll - фон перемещается вместе с содержимым страницы;

Background-attachment: fixed- фоновая графика статична.

По умолчанию фоновый рисунок позиционируется в левом верхнем углу экрана.

Свойство background -position - определяет положение картинки в окне браузера (top, middle, bottom, left, center, right)().
При копировании изображения с целью заполнения площади элемента браузер воспринимает значение этого свойства в качестве отправной точки.

Координаты начального положения изображения можно задавать:

1) в виде процентных отношений (20%);

Code

background-position: 20% 20%

2) в виде абсолютных значений в пикселях (15px);

Code

background-position: 15px 15px

3) в виде абсолютных значений в сантиметрах (5cm);

Code

background-position: 5cm 5cm

3) в виде констант (top left).

Code

background-position: top left

Для изменения цвета фона служит свойство background-color.

Цвет фона может задаваться:

1) название цвета (red, yellow);

Code

background-color: red

2) шестнадцатеричным значением (#FF00AA);

Code

background-color: #FF00AA

3) функцией RGB (25%,50%,0%), выражающей абсолютное или процентное содержание красной, зеленой и синей составляющих цвета.

Значение transparent указывает на то, что фон является прозрачным, т.е. отсутствует.

Code

background-color: transparent

Материалы на эту же тему:

Создание красивого раздвижного меню для сайта
Оформление ссылок в таблице стилей (CSS)
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу

Оформление ссылок в таблице стилей (CSS)

bandjuk — Sun, 13 Nov 2011 17:35:09 GMT

Хотите, чтобы ваши ссылки не выглядели уныло-подчёркнутыми?
Для этого Каскадные таблицы стилей (CSS) имеют ряд дополнений при использовании ссылок: их можно раскрасить в любые цвета, можно убрать подчёркивание, можно выделить ссылку двумя горизонтальными линиями, можно увеличить высоту шрифта при наведении на неё курсором и многое другое.
Всё зависит от Вас и Вашей фантазии!

Разберём кусочек кода из таблице стилей CSS сайта Ucoz.
Открываем: Панель Управления --->Управление дизайном ---> Таблица стилей (CSS), находим код:

Code

/* General Style */
a:link {text-decoration:underline; color:#FFFFFF;}
a:active {text-decoration:underline; color:#FFFFFF;}
a:visited {text-decoration:underline; color:#FFFFFF;}
a:hover {text-decoration:none; color:#FFFFFF;}

Этот кусочек кода отвечает за оформление практически всех ссылок а сайте!

Для начала давайте разберём этот код:

a:link- неактивированная ссылка;
a:active- ссылка активированная в данный момент;
a:visited- ссылка активированная ранее (посещённые ссылки);
a:hover- ссылка при наведении указателя мыши;

color:#FFFFFF; - отвечает за цвет соответствующей ссылки. В нашем примере все ссылки имеют белый цвет.

text-decoration: - этот параметр отвечает за стиль соответствующей ссылки, имеет следующие значенияч:

text-decoration:underline; - ссылка подчёркнута;
text-decoration:none; - ссылка не подчёркнута;
text-decoration: underline overline;} - ссылка подчёркнута вверху и внизу;
text-decoration:line-through;} - ссылка зачёркнута;

значение
border-bottom: 2px dashed; - пунктирное подчёркивание внизу с тощиной 2 пикселя;
где 2px dashed означает,что линия будет пунктирной с тощиной 2 пикселя, а border-bottom
проводит наш пунктирчик снизу.

Пример:

Code

a:hover {color:#ff0000; border-bottom: 2px dashed;}

Ну а сейчас сделаем так, чтобы ссылка при наведении на неё курсором выделялась другим цветом, например, синим. Допишем в свойстве a:hover следующее background:#0000ff

Code

a:hover {color:#ff0000; text-decoration:none;background:#0000ff;}

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

Code

ССЫЛКА

Материалы на эту же тему:

Создание красивого раздвижного меню для сайта
Основные атрибуты и свойства фона - background
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу

Основные Мета тэги

bandjuk — Sat, 05 Nov 2011 16:47:00 GMT

Тэги - располагаются в теле Html между тегами и , после заголовка . <br /><br /> Эти тэги содержат описание страницы, ключевые слова, информацию об авторе, команды для роботов и прочую полезную служебную информацию. <br /><br /> Тэги <META> выполняют роль своеобразной визитной карточки на странице вашего сайта. <br /><br /> Тут собраны наиболее важные основные мета тэги. <br /><br /> <div align="center"><span style="color:blue">Указание типа документа и его кодировки</span></div> <br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><META HTTP-EQUIV="Content-Type" content="text/html; charset=windows-1251"></div></div> <br /><br /> <div align="center"><span style="color:blue">Указание заголовка страницы</span></div> <br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><META NAME="Title" CONTENT="Заголовок страницы"></div></div> <br /><br /> <div align="center"><span style="color:blue">Описание вашей страницы</span></div> <br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><META NAME="Description" CONTENT="Описание вашей страницы."></div></div> <br /><br /> Это аннотация страницы. Если Вэбстраница не содержит этого тэга, то поисковая система в качестве аннотации возьмет начальный фрагмент текста страницы, что зачастую нежелательно, т.к. в верхней части страницы может располагаться баннер. <br /><br /> <div align="center"><span style="color:blue">Ключевые слова</span></div> <br /> <META NAME="Keywords" CONTENT="Ключевые слова."> <br /><br /> Список ключевых слов страницы. Зачастую используется поисковыми машинами. Ключевые слова должны быть простыми и обязаны описывать суть страницы. <br /><br /> Если содержание Вашей страницы часто меняется, то вставьте следующие два тега: <br /><br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><META NAME="Document-state" CONTENT="Dynamic"></div></div> <br /> Указывает, что страница динамичная, т.е. ее содержание периодически меняется. <br /><br /> <META NAME="Revizit-after" CONTENT="10 days"> <br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');">Указывает роботу периодичность смены информации.</div></div> <br /><br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><META NAME="Document-state" CONTENT="Static"></div></div> <br /> Указывает, что страница статичная, т.е. ее содержание не меняется. <br /><br /> <span style="color:blue"><div align="center">Автор</div></span> <br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><META NAME="author" content="Автор"></div></div> <br /><br /> Тег, в который вы можете вписать своё имя. <br /><br /> <span style="color:blue"><div align="center">Адреса электронной почты автора</div></span> <br /> <div class="bbQuoteBlock"><div class="bbQuoteName" style="padding-left:5px;font-size:7pt"><b>Quote</b></div><div class="quoteMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><META HTTP-EQUIV="Reply-to" content="mail@pochta.ru"></div></div> <br /><br /> Тег для указания адреса электронной почты автора. <br /><br /> <span style="color:blue"><div align="center">Авторские права</div></span> <br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><META NAME="Copyright" content="Авторские права"></div></div> <br /><br /> Описание авторских прав на документ. <br /><br /> <span style="color:red"><i>Материалы на эту же тему:</i></span> <br /><br /> <a class="link" href="http://ssilki.at.ua/forum/4-224-1" rel="nofollow" target="_blank">Создание красивого раздвижного меню для сайта</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-142-1" rel="nofollow" target="_blank">Основные атрибуты и свойства фона - background</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-138-1" rel="nofollow" target="_blank">Оформление ссылок в таблице стилей (CSS)</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-114-1" rel="nofollow" target="_blank">Создание рамки с помощью FIELDSET</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-113-1" rel="nofollow" target="_blank">Границы при помощи border</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-92-1" rel="nofollow" target="_blank">Коды для вставки изображения в страницу</a> </article> <article> <h1>Создание рамки с помощью FIELDSET</h1> <p>bandjuk — Mon, 17 Oct 2011 06:48:11 GMT</p> <span style="color:red"><div align="center">Создание рамки с помощью FIELDSET</div></span> <br /><br /> <br /><br /> Для создания такой рамки нужно воспользоваться следующим кодом: <br /><br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><fieldset><legend>Заголовок рамки</legend> Тут может быть любое содержимое (здесь может быть текст, код плеера с музыкой, фото, видео)</fieldset></div></div> <br /><br /> В заголовок также можно вставить все что угодно (фото, видео и др.). Достаточно прописать нужный код вместо фразы "Заголовок рамки". <br /><br /> <span style="color:red"><div align="center">Fieldset с цветной рамкой</div></span> <br /><br /> Используя следующие теги можно задать цвет рамки Fieldset: <br /><br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><fieldset style="border:1px #00BFFF solid;"><legend>Содержимое рамки</legend></fieldset></div></div> <br /><br /> <div align="center"><span style="color:red">Fieldset с цветной выпуклой рамкой</span></div> <br /><br /> Здесь изменен стиль рамки, цвет, размер, шрифт заголовка и сожержимого рамки. <br /><br /> <br /><br /> Код такой рамки: <br /><br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><fieldset style="border: #1874CD ridge thick;"> <br /> <legend> <b><span style="font-family:Monotype Corsiva;color:#104E8B;font-size:25px">Заголовок</b></span></legend><span style="font-family:Comic Sans MS;color:#8B795E;font-size:14px">Содержимое </span></fieldset></div></div> <br /><br /> <a class="link" href="http://ssilki.at.ua/forum/4-113-1" rel="nofollow" target="_blank">Вид</a> границы рамок border можете менять на свое усмотрение (пунктирная линия, двойная линия и т. д. ). <br /><br /> <span style="color:red"><i>Материалы на эту же тему:</i></span> <br /><br /> <a class="link" href="http://ssilki.at.ua/forum/4-224-1" rel="nofollow" target="_blank">Создание красивого раздвижного меню для сайта</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-142-1" rel="nofollow" target="_blank">Основные атрибуты и свойства фона - background</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-138-1" rel="nofollow" target="_blank">Оформление ссылок в таблице стилей (CSS)</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-127-1" rel="nofollow" target="_blank">Основные Мета тэги</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-113-1" rel="nofollow" target="_blank">Границы при помощи border</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-92-1" rel="nofollow" target="_blank">Коды для вставки изображения в страницу</a> </article> <article> <h1>Границы при помощи border</h1> <p>bandjuk — Mon, 17 Oct 2011 06:00:33 GMT</p> Границы при помощи border. <br /><br /> Атрибут <span style="color:red">border</span> задает границы элемента (рамочки, блока). Он может принимать следующие значения: <br /><br /> 1. <span style="color:blue">по ширине (border-width) - thin (тонкая), medium (средняя), thick (толстая);</span> <br /> 2. <span style="color:blue">по типу (border-style);</span> <br /><br /> - <span style="color:green">none</span> - запрет рисования границы; <br /> - <span style="color:green">dotted</span> - граница точками; <br /> - <span style="color:green">dashed</span> - граница штрихами; <br /> - <span style="color:green">solid</span> - сплошной линией; <br /> - <span style="color:green">double</span> - двойной линией; <br /> - <span style="color:green">groove</span> - трехмерная вдавленная; <br /> - <span style="color:green">ridge</span> - трехмерная выпуклая; <br /> - <span style="color:green">сinset</span> - трехмерная ступенька вверх; <br /> - <span style="color:green">outset</span> - трехмерная ступенька вниз. <br /><br /> 3. <span style="color:blue">border-color определяет цвет рамки. Может принимать значение transparent, что означает невидимую рамку;</span> <br /> 4. <span style="color:blue">border-top, border-bottom, border-left, border-right - задают расположение границы;</span> <br /><br /> Формула, которой необходимо воспользоваться для того, чтобы задать границу: <br /><br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"><# style="border-значения;border-width:значения:border-style:значения;border-color:значения"></#></div></div> <br /><br /> ,где вместо слов "значения" подставляем параметры, задающие расположение, ширину, стиль и цвет рамки. они могут располагаться в произвольном порядке. <br /> Вместо "#" подставляем атрибуты table, blockquote, span, fieldset, img, div или др. <br /><br /> <span style="color:red"><i>Материалы на эту же тему:</i></span> <br /><br /> <a class="link" href="http://ssilki.at.ua/forum/4-224-1" rel="nofollow" target="_blank">Создание красивого раздвижного меню для сайта</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-142-1" rel="nofollow" target="_blank">Основные атрибуты и свойства фона - background</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-138-1" rel="nofollow" target="_blank">Оформление ссылок в таблице стилей (CSS)</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-127-1" rel="nofollow" target="_blank">Основные Мета тэги</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-92-1" rel="nofollow" target="_blank">Коды для вставки изображения в страницу</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-114-1" rel="nofollow" target="_blank">Создание рамки с помощью FIELDSET</a> </article> <article> <h1>Коды для вставки изображения в страницу</h1> <p>bandjuk — Fri, 30 Sep 2011 12:41:06 GMT</p> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"></div></div> - самый простой код для вставки изображений. <br /><br /> <span style="color:red">Пример кода:</span> <br /><br /> <span style="color:green">Задание размеров изображения</span> <br /> Задание размеров графического изображения явно (с помощью атрибутов WIDTH, HEIGHT) позволяет браузеру загружать картинку с большей скоростью, т.к. он не тратит время на дополнительные вычисления. <br /><br /> Чтобы задать размер изображения, его, понятное дело, надо знать. Узнать размер можно, практически, в любом графическом редакторе. Если вы пользуетесь хорошим html-редактором, то он автоматически вставляет размер изображения в текст страницы при выборе соответствующего графического файла. <br /><br /> Еще одним существенным плюсом задания размеров "вручную" есть тот факт, что пользователи, отключившие в своих браузерах средства обработки графики, увидят ваше творение именно в том виде, в каком оно замышлялось, поскольку область Вэб-страницы, предусматривающие размещение в них графических изображений определенных размеров, останутся в неприкосновенности. <br /><br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"> </div></div> <br /><br /> <span style="color:red">Пример кода:</span> <br /><br /> <span style="color:green">Использование кодов alt="" Title=""</span>, позволяет Вам использовать комментарии к изображению, что даёт представление о его содержимом, до загрузки самого изображения. Так же эти теги необхрдимы для индексации ваших изображений поисковыми. <br /> роботами <br /><br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"> </div></div> <br /><br /> <span style="color:red">Пример кода:</span> <br /><br /> <span style="color:blue">Пример самого изображения можно увидить у меня на сайте. Наведите курсор мыши на любое изрбражение на главной странице сайта.</span> <br /><br /> <span style="color:green">Обтекание изображений текстом:</span> <br /><br /> Для этого используют атрибут <span style="color:red">ALIGN</span>, он может иметь 2 значения: <br /><br /> <span style="color:red">left</span> - заставляет браузер помещать изображение слева от текста; <br /> <span style="color:red">right</span> - заставляет браузер помещать изображение справа от текста; <br /><br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"> </div></div> <br /><br /> <span style="color:red">Пример кода:</span> <br /><br /> <span style="color:green">Отступы вокруг изображения</span> <br /><br /> Графические изображения в Вэб-браузере имеют, по умолчанию, пустую рамку в несколько пикселей, которая отделяет их от текста. Для увеличения пустой области вокруг изображения служат атрибуты HSPACE, VSPACE тэга . <br /><br /> Текст, отделенный от графики лучше усваивается, а пустая область между соседними изображениями предотвращает толкование их в виде единого целого. <br /><br /> Атрибут <span style="color:red">HSPACE</span> задает ширину чистой области СЛЕВА И СПРАВА от изображения. <br /><br /> Атрибут <span style="color:red">VSPACE</span> задает ширину чистой области СВЕРХУ И СНИЗУ от изображения. <br /><br /> <div class="bbCodeBlock"><div class="bbCodeName" style="padding-left:5px;font-weight:bold;font-size:7pt">Code</div><div class="codeMessage" style="border:1px inset;max-height:200px;overflow:auto;height:expression(this.scrollHeight<5?this.style.height:scrollHeight>200?'200px':''+(this.scrollHeight+5)+'px');"> </div></div> <br /><br /> Этот код задаёт отступы от изображения, равные 10 пикселям. <br /><br /> <span style="color:red">Пример кода:</span> <br /><br /> Вроде бы ничего не забыл! <br /> Если я что-то не написал можете меня дополнить! <br /><br /> <span style="color:red"><i>Материалы на эту же тему:</i></span> <br /><br /> <a class="link" href="http://ssilki.at.ua/forum/4-224-1" rel="nofollow" target="_blank">Создание красивого раздвижного меню для сайта</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-142-1" rel="nofollow" target="_blank">Основные атрибуты и свойства фона - background</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-138-1" rel="nofollow" target="_blank">Оформление ссылок в таблице стилей (CSS)</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-127-1" rel="nofollow" target="_blank">Основные Мета тэги</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-113-1" rel="nofollow" target="_blank">Границы при помощи border</a> <br /> <a class="link" href="http://ssilki.at.ua/forum/4-114-1" rel="nofollow" target="_blank">Создание рамки с помощью FIELDSET</a> </article> </main></body></html>