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

а это - измененный вид

Как же это сделать?
Во-первых, рисунок аккаунта можно сделать самим, а во-вторых выбрать в интернете.
1. Выбор в интернете
1. Выбираем понравившийся рисунок и в свойствах этого рисунка копируем его адрес.
2. Открываем в админпанели "ДИЗАЙН" - "УПРАВЛЕНИЕ ДИЗАЙНОМ СТРАНИЦЫ"
Здесь мы видим открывшийся HTML код. В верхней строчке кода имеется описание стиля

вот сюда, в описание стиля, и вставляем адрес вашего рисунка, вместо того, что предлагается

Эта строчка будет выглядеть так:

<TABLE style="background-image: url(адрес рисунка);

2. Рисунок с компьютера
1. Выбираем или создаем рисунок.
2. Открываем "УПРАВЛЕНИЕ" - "ФАЙЛОВЫЙ МЕНЕДЖЕР. и добавляем свой рисунок .
3. Выполняем действия описанные выше - Открываем в админпанели "ДИЗАЙН" - "УПРАВЛЕНИЕ ДИЗАЙНОМ СТРАНИЦЫ" - вот сюда, в описание стиля, и вставляем адрес вашего рисунка, вместо того, что предлагается

Далее сохранить.. Надпись в аккаунте, я думаю Вы сами сделаете...

Добавил: (Irina) Рейтинг: 0.0/0

Сайт своими руками

Попробуем оформить свой сайт?

Сайт своими руками

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

А таким он стал теперь

Ну что ж.. начнем...

Добавил: (Irina) Рейтинг: 3.7/3

Азы HTML для новичков

Основы HTML для новичков

Азы HTML для новичков

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

Добавление элемента html
Элемент html считаеться корневым элементом любого HTML-документа.
Корневой элемент языка html
<html>
</html>

Достаточно просто не правда ли?

Элементы head и title

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

<html>

<head>
</head>

</html>
Элементы в разделе документа head
title - Этот элемент позволяет задать заголовок документа. Указанный заголовок будет отображаться в строке заголовка браузера. Элемент title являеться обязательным.
meta - Элемент meta используеться для множества целей, включая указание ключевых слов и описаний, кодировки символов и автора документа. Элемент meta не являеться обязательным и его использование может варьироваться в зависипости от поставленных задач.
script - Этот элемент позволяет вставлять скрипты непосредственно в документ, или, чот более предпочтительнго, с его помощью указываеться ссылка на необходимый для использования скрипт. Элемент используеться при необходимости.
style - Элемент style позволяет размещать информацию о стиле прямо на странице. Стиль, информация о котором размещена таким образом, называеться встроенным. Элемент используеться при необходимости.
link Элемент link наиболее часто используеться для выполнения связывания с внешней таблицей стилей, хотя он может приминятся и для других целей.

Элемент body
Это то место где происходят все действия. Это тото элемент, где будет размещено содержимое и произведена разметка страницы.
Элемент body размещен в элементе html, непосредственно за элементом head.

<html>
<head>
<title>Здесь размещаеться подходящий текст заголовка</title>
</head>
<body>
</body>
</html>
При просмотре страницы в браузере информация, размещенная внутри элемента body, отображаеться в окне браузера.

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

Синтаксис комментария языка html выглядит следующим образом:

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

<p>Это содержимое видно будет, поскольку оно находиться за пределами поля комментария</p>
</body>

Можно отмечать разделы документа

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

Добавил: (Irina) Рейтинг: 0.0/0

HTML. title

Подробнее о элементе title

Элемент title являеться единственным обязательным элементом раздела head. В строке заголовка браузера отображаеться любой текст, содержащийся в этом элементе, вместе с названием браузера, которое добавляется в конец текста.

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

Создание эффективного заголовка подразумевает выполнения этих трех положений.

Вот пример эффективного заголовка:
Форум Ucoz - Вопросы по сервисам - Общие вопросы - Основы HTML

<title> Форум Ucoz - Вопросы по сервисам - Общие вопросы - Основы HTML </title>

Ну как бы завершая основную часть, вот как все вместе должно выглядеть
<html>
<head>

<title>Сайт : расположение на сайте : заголовок темы</title>

<meta name="author" content="тут ваше имя">

</head>

<body>



</body>
</html>

Сайт : расположение на сайте : заголовок темы

Добавил: (Irina) Рейтинг: 0.0/0

О тексте

HTML. О тексте

Правильное использование заголовков

Заголовки в языках HTML & XHTML представляют собой теги. Существуют теги 6 уровней заголовков, начиная с

<h1>....</h1> и заканчивая <h6>....</h6>

Заголовок считают самым важным, а h2 подзаголовком и тд.
Пример добавления заголовка

<h1>Ucoz Web-Services</h1>
<h2>Новый взгляд на создание сайтов</h2>

Добавление абзацев

Управление абзацами выполняеться при помощи элемента абзаца, <p></p> <p>Система управления сайтом
Уникальная система управления сайтом, позволяющая создать как статический, так и динамический сайт.</p>

<p>Новое поколение веб-сервисов. Наконец-то создание сайта стало простой и увлекательной процедурой...</p>

Тег разрыв строки
Этот тег применяеться для разрыва строк абзаца. Он полезен для оформления, например текста стихотворения. В языке XHTML этот тег обозначаеться так <br />
<p>Мой дядя самых честных правил<br />
Когда не в шутку занемог,<br />
Он уважать себя заставил<br />
И лучше выдумать не мог</p>

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

Для создания упорядоченного списка необходимо два элемента.
<ol></ol> - (ordered list - упорядоченный список)

<li></li> - (list item - элемент списка)

Пример:

<ol>
<li>Зарегистрируйтесь в системе UCOZ</>
<li>Тщательно разберитесь с системой</li>
<li>Создайте свой сайт</li>
</ol>

Неупорядоченный список
Ну это где поряд размещения не важен. В основном такие списки называют маркированные. Структура почти такая же, только вместо элемента <ol></ol> используем элемент <ul></ul>

<p>Список сервисов в системе UCOZ</p>
<ul>
<li>Редактор сайта</li>
<li>Гостевая книга</li>
<li>Форум</li>
<li>Каталог статей</li>
<li>Дневник (блог)</li>
<li>Фотоальбомы</li>
<li>Новости сайта</li>
<li>Каталог файлов</li>
<li>FAQ (вопрос/ответ)</li>
<li>Опросы</li>
<li>Почтовые формы</li>
</ul>

Добавил: (Irina) Рейтинг: 0.0/0

HTML таблиц. Ширина, границы, добавление строк

HTML TABLE. Ширина, границы, добавление строк

HTML TABLE

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

Code

Ширина таблицы

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

Code

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

Code

Это пример таблицы с динамическим значением ширины в 90%

Границы таблицы и интервалы

Язык HTML позволяет включить отображение границ таблиц

Code

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

Для добавления интервала между ячейками используеться атрибут cellspacing.
Для добавления интервала между содержимым ячейки и самой ячейкой используеться атрибут cellpadding:

Code

Это пример таблицы с динамическим значением ширины в 90% , и использование атрибутов border cellspacing cellpadding

Добавление строк таблицы

Строка в таблице добавляется с помощью элемента tr

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
Данные
</tr>
</table>

Таблица может содержать любое необходимое колличество строк.

Добавил: (Irina) Рейтинг: 0.0/0

HTML таблиц. Ячейки, заголовки

Добавление ячеек таблицы

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

Code

Элементы table tr и td являються тремя неотъемлемыми состовляющими любой таблицы

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<td>Данные</td>
<td>Данные</td>
<td>Данные</td>
</tr>
</table>

Пример простой таблицы: три ячейки, одна строка, ширина 90%, интервал 5

данные
данные
данные

Добавление заголовков таблиц
Заголовок таблицы обозначает заголовок столбца или строки таблицы.

Code

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

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th>Местоположение</th>
<th>Погода</th>
<th>Часовой пояс</th>
</tr>
<tr>
<td>Россия, Москва</td>
<td>Жаркая</td>
<td>День долгий</td>
</tr>
</table>

местоположение
погода
часовой пояс
Россия,Москва
жаркая
день долгий

Заголовки также можно использовать и для описания заголовков строк.

местоположение
Россия,Москва
погода
жаркая
часовой пояс
день долгий

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th>Местоположение</th>
<td>Россия, Москва</td>
</tr>
<tr>
<th>Погода</th>
<td>Жаркая</td>
</tr>
<tr>
<th>Часовой пояс</th>
<td>День долгий</td>
</tr>
</table>

Добавил: (Irina) Рейтинг: 0.0/0

HTML таблицы. Объединение строк, заголовков

Объединение строк

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

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th rowspan="2">Заголовок (объдинены 2 строки)</th>
<td>Данные</td>
<td>Данные</td>
</tr>
<tr>
<td>Данные</td>
<td>Данные</td>
</tr>
<tr>
<th>Заголовок (слияния нет)</th>
<td>Данные</td>
<td>Данные</td>
</tr>
</table>

заголовок (объеденены 2 строки)
данные
данные
данные
данные
заголовок (слияния нет)
данные
данные

Можно объединять строки и внутри ячеек

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th rowspan="2">Заголовок (объдинены 2 строки)</th>
<td rowspan="3">Данные (объдинены 3 строки)</td>
<td>Данные</td>
</tr>
<tr>
<td>Данные</td>
</tr>
<tr>
<th>Заголовок (слияния нет)</th>
<td>Данные</td>
</tr>
</table>

заголовок (объеденены 2 строки)
данные (объедены 3 строки)
данные
данные
заголовок (слияния нет)
данные

Объединение столбцов

Точно также как объединене строк можно объеденить столбцы.

Для этого используем атрибут colspan.

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th colspan="2">Заголовок (объдинены 2 строки)</th>
<th>Заголовок (объединения нет)</th>
</tr>
<tr>
<td>Данные</td>
<td>Данные</td>
<td>Данные</td>
</tr>
<tr>
<td>Данные</td>
<td>Данные</td>
<td>Данные</td>
</tr>
</table>

заголовок(объеденены 2 столбца)
заголовок(объединения нет)
данные
данные
данные
данные
данные
данные

Подобным образом можно объединять ячейки таблицы.

Code

<table width="90%" border="1" cellspacing="10" cellpadding="10">
<tr>
<th colspan="2">Заголовок (объдинены 2 столбца)</th>
<th>Заголовок (объединения нет)</th>
</tr>
<tr>
<td>Данные</td>
<td>Данные</td>
<td>Данные</td>
</tr>
<tr>
<td colspan="3">Заголовок (объдинены 3 столбца)</td>
</tr>
</table>

заголовок(объеденены 2 столбца)		заголовок(объединения нет)
данные	данные	данные
заголовок(объеденены 3 столбца)

Будьте внимательны - различия между colspan и rowspan вас могут запутать. Помните, обьединение строк - это вертикальное объединение, объединение столбцов - горизонтальное объединение.

Добавил: (Irina) Рейтинг: 0.0/0

HTML вставки рисунка

HTML вставки рисунка

Элемент <IMG>

Используется для вставки в тело документа графического изображения. Под графическим изображением подразумевают: маленькие пиктограммы, рисунки, графические объекты и карты изображений, занимающие большую часть окна браузера. Кроме того, элемент <IMG>поддерживает различные атрибуты.
Пример:<IMG src="URL" атрибуты>

src

Этот атрибут указывает на файл графики, задавая его URL.
Пример:<img src="http://ucoz.ru/img/image.jpg">

alt

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

Пример:<img src="http://ucoz.ru/img/image.jpg" alt="Тут нарисован логотип Ucoz">

width

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

Пример:<img src="http://ucoz.ru/img/image.jpg" alt="Тут нарисован логотип Ucoz" width="100">

height

Этот атрибут задает высоту области в пикселях, отводимой в окне под изображение

Пример:<img src="http://ucoz.ru/img/image.jpg" alt="Тут нарисован логотип Ucoz" width="100" height="50">

Добавил: (Irina) Рейтинг: 0.0/0

Изменение дизайна шаблона таблицы

Изменение дизайна шаблона таблицы

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

Первоначальный вариант:

Вариант после нашего оформления:

Для того,чтобы изменить дизайн таблицы на админпанели нажимаем "ДИЗАЙН" - "УПРАВЛЕНИЕ ДИЗАЙНОМ СТРАНИЦЫ". Для упрощенного варианта входим в ВИЗУАЛЬНЫЙ РЕДАКТОР. Нажимаем на таблицу, которую хотим изменить, и на панели редактора - "редактировать таблицу, ячейку". Так как форма таблицы нас устраивает, то выбираем "редактировать ячейку". Если необходимо откорректировать ширину и высоту, то выбираем нужные элементы. Затем переходим в "свойства". Выбираем в интернете или файловом менеджере рисунок, который будет фоном нашей таблицы(можно просто выбрать цвет). Нажимаем на "изображение" и вводим адрес фона нашей таблицы, сохраняем. Затем отформатируем текст, выбираем рамку, указываем как будет расположен наш текст, рисунок(слева, справа, посередине) и сохраняем. Все.. дизайн таблицы изменен.

Добавил: (Irina) Рейтинг: 0.0/0

Изменение размеров материала

Изменение размеров материала

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

Изменение размеров рисунка

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

Code

Вид кода рисунка, в центре:

Code

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

Code

height="высота" width="ширина"

Код с указанными размерами выглядит так:

Code

Код с указанными размерами и расположением по центру:

Code

Таким же образом редактируется и видео.

Добавил: (Irina) Рейтинг: 0.0/0

Что такое RSS?

Что такое RSS?

RSS (Really Simple Syndication) - это специальный формат, в котором сайты могут поставлять свои новости до конечного потребителя. Разработанная в 1999 году специалистами компании Netscape Communications, технология RSS позволяет компьютерам автоматически распознавать и отбирать нужную пользователю информацию, группировать ее по темам, а также следить за изменением соответствующих веб-ресурсов.

Основные черты технологии RSS:

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

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

- получаемая через RSS информация значительно уменьшает входящий трафик, так как в ней практически полностью отсутствует реклама, потому что информация приходит исключительно в текстовом виде.

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

Что такое агрегатор?

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

Добавил: (Irina) Рейтинг: 0.0/0

Установка ленты RSS на сайт

Установка ленты RSS на сайт

Алгоритм подключения RSS-канала одинаков для всех агрегаторов:
- сначала нужно добавить в агрегатор ссылки на RSS-каналы.

Как это сделать? Заходим в админуправление в раздел RSS-ленты. В открывшемся меню вводим адрес RSS-ленты сайта, с которого хотим получать новости. Агрегатор сформирует код. Вы можете отредактировать его в визуальном или HTML редакторе(добавить фон, рамку и т.д.) и результат сохранить. Полученный код можете вставить в любое место сайта, в котором бы вы хотели увидеть новости этой ленты.
Выглядит этот код так $RSS1$

Преимущества RSS-ленты.

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

Где и как найти RSS-каналы?

Обычно ссылки на RSS-канал, размещаемые на веб-сайтах, выглядят в виде оранжевого или красного прямоугольника с надписью XML (RSS формат основан на XLM) или RSS. Увидев такую ссылку, ее можно просто скопировать из браузера и вставить в агрегатор, указав ее в качестве нового RSS-канала (RSS-колонки).

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

RSS-агрегаторов выпущено довольно много, причем как бесплатных, так и условно-бесплатных, поэтому перечислю лишь те, что размещены в каталоге Softodrom.ru: одним из наиболее популярных услово-бесплатных агрегаторов является FeedDemon, не менее удобны RSS Captor ии GetNews; интерес представляет и WebNews.TV с оригинальным интерфейсом в виде анимированного телевизора, озвучивающего новости голосом. Из бесплатных программ имеет смысл обратить внимание на Abilon - компактный RSS-агрегатор с многоязычным (включая русский) интерфейсом.

Наконец, не стоит забывать о том, что в некоторые браузеры, в том числе Maxthon, Opera и Mozilla FireFox, встроены RSS-агрегаторы. Правда, специализированные программы-агрегаторы обладают более широкими возможностями, но для начала - чтобы оценить всю прелесть RSS - вполне хватит и тех, что предоставляют агрегаторы браузеров...

Добавил: (Irina) Рейтинг: 3.5/2

Информер

Информер

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

Секрет популярности многих сайтов - в том, что они предоставляют посетителям именно ту информацию, которая их интересует. А что интересует практически всех, независимо от склонностей, увлечений и профессии? Да, наверное, прогноз погоды, курс доллара. Еще, разумеется, новости - как общемировые, так и связанные с профессией посетителя.

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

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

Как такое возможно? С помощью информеров.

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

В настоящее время в интернете есть немало сайтов, предоставляющих информеры. К примеру, информеры можно взять со следующих мест:

- Самый крупный ресурс в русской части интернета, посвященный информерам и только информерам - это созданный "Росбизнесконсалтингом" сайт http://www.informer.ru/ Выбор информеров здесь огромен - тут и новостные ленты, и сведения о погоде, и курсы валют, и многое другое...

- Знаете ли вы, кто из ваших знакомых сегодня именинник? А у кого из знаменитостей нынче день рождения? Если нет, то вам наверняка будет весьма приятно зайти на сайт, на котором есть информер от http/....k">http И вашим посетителям - тоже...

- На сайте www.finam.ru вы найдете информеры со сведениями о котировках акций крупных российских компаний.

- Сайт http://informer.hmn.ru предоставляет всем желающим информеры с прогнозом погоды на ближайшее время.

- "Кулинарный информер", получить код для установки которого можно на сайте http, выдает на каждый день свой рецепт какого-нибудь блюда.

- А не желаете ли вы на свой сайт лунный календарь для выращивания растений в согласии с ритмом звезд? Если желаете - зайдите на http://flowers.nm.ru/pick/index.html.

Добавил: (Irina) Рейтинг: 0.0/0

Информер нашего сайта

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

Вид информера:

код информера:

Code

Добавил: (Irina) Рейтинг: 0.0/0

CSS. Что это?

Обычный HTML позволяет задавать цвет и размер текста с помощью тегов форматирования. Если понадобится изменить параметры однотипных элементов на сайте, придется просматривать все страницы, чтобы найти и поменять теги.

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

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

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

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

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

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

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

Добавил: (Irina) Рейтинг: 0.0/0

Стилизация границ

Стилизация границ

Стилизация границ включает в себя стилизацию сторон, толщины, начертания и цвета. Для этого можно использовать
различные свойства границы: border-width (толщина) border-style (начертание) border-color (цвет).
Сторона границы указывается между двумя состовляющими названия стойств border-сторона-width.
Также все свойства можно указать в одной строке.
Например - border: 1px dashed red; 1px - Толщина, dashed - стиль, red - цвет (цвет можно указать и как - #ffffff).
В данном случае вся таблица будет с границей толщиной в один пиксель красной и в стиле dashed.

Если например надо следать границу только слева.
border-left: 1px dashed red;

Значения left и right понятны. Чтобы сделать границу только сверху следует написать border-top, с низу border-bottom

Это варианты записи стиля в одной строке. Конечно можно прописывать каждое свойство отдельно, но в одной проще.
Вот например 2 одинаковых варианта по разному написаны:

border-left: 1px dashed red;

border-left-width: 1px;
border-left-style: dashed;
border-left-color: red;

Выбирайте сами.

Теперь небольшая таблица начертания границ (типа - dashed и тд.)
dotted - ряд точек
dashed - ряд штрихов
solid - сплошная линия
double - две сплошных линии
groove - углубление на холсте
ridge - выступ на холсте
inset - врезанный вид
outset - Рельефный вид
none - граница никогда не будет видна (указывается без толщины и без цвета.)

Добавил: (Irina) Рейтинг: 0.0/0

Как найти и отредактировать класс в CSS?

Как найти и отредактировать класс в CSS?

Метод 1-й - от frozen

1) Открываете Вид-Просмотр ХТМЛ кода нужной страницы.
2) Находите в тексте объект, параметры которого требуется изменить, и смотрите какой у него класс.
3) Затем ищите этот класс в таблице стилей css.
4) И меняете как нужно параметры.

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

Метод 2-й - от booroondook

1) Открываете в браузере нужную страницу сайта.
2) Сохраняете в браузере эту страницу в виде HTML-файла. Например, в IE выполняем команду "Файл - Сохранить как..." и указываем в опциях вариант "Web-страница полностью" - это вызовет также сопутствующее сохранение CSS-файла и ссылку на него в сохраненном HTML-файле.
3) Открываем сохраненный HTML-файл в Frontpage, переходим в режим "Split" (т.е. отображение в нижней части окна дизайна страницы, а в верхнем - исходного кода).
4) В полуокне дизайна становимся мышкой на нужный нам элемент - при этом в полуокне исходного кода курсор автоматически встанет в соответствующее место кода, а на панели тегов высветится соответствующий класс. При желании можно нажать на этот высвеченный класс - тогда в обоих полуокнах выделятся соответствующие участки.
5) Класс нам известен - теперь можно найти его в локальном CSS-файле (см. п.2 - файл был сохранен) и изменить нужным образом.
6) Возвращаемся в Frontpage, нажимаем там клавишу F5 (обновить представление) и сразу же видим и оцениваем изменения.

Если утомительно искать нужный класс в CSS, то есть

Метод 3-й - от Кински

1. Копируем название класса (с точкой или без).
2. Открываем таблицу стилей CSS
3. Вызываем окно поиска сочетанием клавиш ctrl+F
4. Вставляемый нужный класс в строку поиска
5. Нажимаем поиск и смотрим результат

В 9.01 Опере просмотр кода сделан подсвечивающимся. Текст чёрный, код синий, комментарии зелёные и скрипты коричневые. Очень удобно.

Пример:
Очень часто хотят поменять размер шрифта в сообщениях на форуме. Для этого откроем любую тему на форуме и скопируем кусочек текста. Открываем Просмотр ХТМЛ-кода и ищем этот кусочек. Затем смотрим какой у него класс - у текста сообщений class="posttdmessage".

Открываем таблицу стилей форума и находим в разделе /* Posts View */ класс posttdmessage.

.posttdmessage {padding:5px;font-size:8pt;}

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

.posttdmessage {padding:5px;font-size:10pt;color:#CCCCCC;}

Цвет взят условно.

Добавил: (Irina) Рейтинг: 5.0/1

Таблица в HTML кодах

Таблица в HTML кодах

Определить таблицу <TABLE></TABLE>
Окантовка таблицы <table border=?></TABLE>
Расстояние между ячейками <TABLE CELLSPACING=?>
Дополнение ячеек <TABLE CELLPADDING=?>
Желаемая ширина <TABLE WIDTH=?> (в точках)
Ширина в процентах <TABLE WIDTH="%"> (проценты от ширины страницы)
Строка таблицы <TR></TR>
Выравнивание <TR ALIGN=LEFT|RIGHT| CENTER| MIDDLE|BOTTOM>
Ячейка таблицы <TD></TD> (должна быть внутри строки)
Выравнивание <TD ALIGN=LEFT|RIGHT|CENTER| MIDDLE|BOTTOM>
Без перевода строки <TD NOWRAP>
Растягивание по колонке <TD COLSPAN=?>
Растягивание по строке <TD ROWSPAN=?>
Желаемая ширина <TD WIDTH=?> (в точках)
Ширина в процентах <TD WIDTH="%"> (проценты от ширины страницы)
Цвет ячейки <TD BGCOLOR="#$$$$$$">
Заголовок таблицы <TH></TH> (как данные, но жирный шрифт и центровка)
Выравнивание <TH ALIGN=LEFT|RIGHT|CENTER| MIDDLE|BOTTOM>
Без перевода строки <TH NOWRAP>
Растягивание по колонке <TH COLSPAN=?>
Растягивание по строке <TH ROWSPAN=?>
Желаемая ширина <TH WIDTH=?> (в точках)
Ширина в процентах <TH WIDTH="%"> (проценты ширины таблицы)
Цвет ячейки <TH BGCOLOR="#$$$$$$">
Заглавие таблицы <CAPTION></CAPTION>
Выравнивание <CAPTION ALIGN=TOP|BOTTOM> (сверху/снизу таблицы)

Добавил: (Irina) Рейтинг: 0.0/0

Цвет и фон.

Цвет и фон.

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

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

Code

< BODY BGCOLOR="цвет"> (использовано название цвета "RED")
< BODY BGCOLOR="цвет"> (использован шестнадцатиричный вид цвета"#FF0000")

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

Параметру BACKGROUND присвоено значение images.gif - это имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Естественно оно может быть другим. Предпологаеться, что графический файл рассположен в одной папке с Вашим документом, иначе нужно указать к нему путь. Разберемся с путями на примере файла images.gif.

На два уровня вниз.
Параметр="Folder_1/Folder_2/images.gif"

На два уровня вверх.
Параметр="../../images.gif"

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

Тег может также иметь параметры отступов в документе (определяются числовым значение).

leftmargin - отступ слева
rightmargin - отступ справа
topmargin - отступ сверху
bottom margin - отступ снизу

Code

В данном теге могут присутствовать и другие параметры, например, какие-то функции JavaScript, задание цветов текста и ссылок.

Добавил: (Irina) Рейтинг: 5.0/1

Фон и цвета в HTML-коде

Фон и цвета в HTML-коде

Фоновая картинка
<BODY BACKGROUND="URL">

Цвет фона
<BODY BGCOLOR="#$$$$$$">
(порядок: красный/ зеленый/ синий)
Цвет текста
<BODY TEXT="#$$$$$$">

Цвет ссылки
<BODY LINK="#$$$$$$">

Пройденная ссылка
<BODY VLINK="#$$$$$$">

Активная ссылка
<BODY ALINK="#$$$$$$">

Добавил: (Irina) Рейтинг: 0.0/0

Обобщение вставки и редактирования изображения

Обобщение вставки и редактирования изображения

Для вставки изображений в HTML документ используется следующая конструкция (представлена полная):

<IMG SRC="Рисунок" BORDER="0" ALIGN="Выравнивание" WIDTH="Ширина" HEIGHT="Высота" HSPACE="Отступ_1" VSPACE="Отступ_2" ALT="Подсказка" NAME="Имя" LOWSRC="Рисунок_2">

В таблице находится описание каждого параметра данной конструкции:

SRC Имя графического файла с расширением (поддерживаются *.jpg, *.gif, *.png). Если файл находится в другом каталоге, укажите к нему путь. Вы можете перейти на закладку, в которой идет речь о путях.
ALIGN Выравнивание изображения в документе:
left - по левому краю.
right - по правому краю.
top или texttop - выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle - выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle - выравнивает центр текущей текстовой строки с центром изображения.
bottom или baseline - выравнивают нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom - выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

BORDER Рамка вокруг рисунка. Значение по умолчанию - 0 (без рамки).
WIDTH Ширина изображения в пикселях.
HEIGHT Высота изображения в пикселях.
HSPACE Горизонтальный отступ графического изображения в пикселях. Не обязательный параметр.
VSPACE Вертикальный отступ в пикселях. Не обязательный параметр.
ALT Это сообщение, которое выводится вместо картинки, если она не показывается (не найдена или пользователь настроил свой Обозреватель так, что тот не показывает картинки). Кроме того, вы увидите этот текст в виде подсказки, когда курсор мыши находится на рисунке.
NAME Определяет имя изображения. Для обычного изображения, не связанного ни с чем, этот параметр совсем не обязательный.
LOWSRC Имя графического файла с расширением с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Обозреватели, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, а затем заменят ее картинкой из SRC. Не обязательный параметр.

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

Добавил: (Irina) Рейтинг: 0.0/0

Изображения и ссылки в HTML-кодах

Изображения и ссылки в HTML-кодах

Ссылка

<A HREF="URL"></A>
Ссылка на закладку <A HREF="URL#***"></A> (в другом документе)
<A HREF="#***"></A> (в том же документе)
На другое окно <A HREF="URL" TARGET="***| |_blank|_self|_parent|_top"> </A>
Определить закладку <A NAME="***"></A>
Отношение <A REL="***"></A> (часто не поддерживается
Обратное отношение <A REV="***"></A> (часто не поддерживается
Графика <IMG SRC="URL">
Выравнивание <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT| RIGHT>
Выравнивание <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE| BASELINE|ABSBOTTOM>
Альтернатива <IMG SRC="URL" ALT="***"> (выводится если картинка не изображается
Карта <IMG SRC="URL" ISMAP> (нужна также программа
Локальная карта <IMG SRC="URL" USEMAP="URL">
Определение карты <MAP NAME="***"></MAP>
Области карты <AREA SHAPE="RECT" COORDS=",,," HREF="URL"|NOHREF>
Размеры <IMG SRC="URL" WIDTH=? HEIGHT=?> (в точках)
Окантовка <IMG SRC="URL" BORDER=?> (в точках)
Отступ <IMG SRC="URL" HSPACE=? VSPACE=?> (в точках)
Заменитель в низком разрешении <IMG SRC="URL" LOWSRC="URL">
Обновить <META HTTP-EQUIV="Refresh" CONTENT="?; URL=URL">
Включить об'ект <EMBED SRC="URL"> (вставить об'ект в страницу)
Размер об'екта <EMBED SRC="URL" WIDTH=? HEIGHT=?>

Добавил: (Irina) Рейтинг: 0.0/0

Ссылки

Создание обычной гипперссылки

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

<A HREF="URL" TARGET="Окно" TITLE="Подсказка">Название ссылки</A>

Параметры элемента <A> представлены в таблице:

HREF
URL (унифицированный локатор ресурсов) - адрес любого файла в Интернете. Может быть абсолютными, то есть указывается полный адрес странички (например, http://lenininc.narod.ru/index.html) и относительным, как видно из названия указывается файл относительно текущего (например, index.html).
TARGET
Oпределяет, в каком окне (фрейме) загрузить гиперссылку. Может иметь значения:
_top - загружает гиперссылку на всем пространстве окна браузера (если до этого существовало разбиение на фреймы, то оно исчезнет).
_blank - загружает гиперссылку в новом окне браузера.
_self – загружает содержимое страницы, в окно, которое содержит эту ссылку (и так используется по умолчанию, так что если вам надо именно так загрузить ссылку, то параметр target вообще можно не использовать).
_parent - загружает содержимое страницы, заданной ссылкой, в окно, являющееся непосредственным владельцем набора фреймов.

TITLE
Текст подсказки, который будет появляться при наведении мышки на гиперссылку. Параметр не обязательный.

пример ссылки:

Добавил: (Irina) Рейтинг: 0.0/0

Графический файл в роли ссылки.

Графический файл в роли ссылки.

Гиперссылкой можно сделать и любой графический файл, поддерживающийся Обозревателем (традиционно - *.gif, *.jpg.). Для этого вместо названия ссылки нужно прописать графический элемент (Параметр TITLE должен быть только у рисунка):

<a href="URL" target="Окно">
<img border="0" src="Рисунок" width="Ширина" height="Высота" TITLE="Подсказка>
</a>

Ссылка на e-mail.

Вы можете также создать ссылку на e-mail, в этом случае нужно в качестве URL’a прописать следующее:
mailto:адрес электронной почты
Например:
<a href="mailto:lenin@zeos.net">Мое мыло</a>

Почтовая гиперссылка имеет несколько параметров (не обязательных):
?subject - Тема пиcьма
&Body - Текст вашего сообщения
&cc - Копии письма через запятую
&bcc - Скрытые копии письма через запятую
title="Выпадающая подсказка" Ставиться по желанию и распологаеться отдельно от параметров почтовой ссылки (смотрите расположение кавычек на примере ниже).

<a href="mailto:lenin@zeos.net ?subject=Поздравление &Body=text &cc=copy@mail.ua.net &bcc=hidden_copy@mail.ua.net" title="Пример почтовой гиперссылки">Мое мыло</a>

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

Закладки.

Иногда возникает вопрос: как сделать ссылку на определенное место в том же или в другом документе? Чтобы нажав по какой-нибудь ссылке можно было попасть в определенное место данного документа. Вот в этом нам и помогут закладки.

Ссылка на закладку в том же документе имеет следующий вид:
<a href="#Имя закладки">Название раздела</a>

А так выглядит ссылка на закладку в другом документе:
<a href="Имя документа#Имя закладки">Название раздела</a>

Сама закладка будет такой:
<A NAME="Имя закладки"></a>

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

Ссылки и цвет.

Для того, чтобы при наведении на ссылку курсором и при клике она меняла свой цвет в тег <BODY> нужно добавить еще несколько параметров.

text - цвет текста.
link - цвет ссылки.
vlink - цвет пройденой ссылки.
alink - цвет активной ссылки, когда подводиться к ней курсор.

<BODY text="black" link="blue" vlink="purple" alink="red">

Данные атрибуты определяют свойства для всего документа. Поместив такой код в HTML страницу, уже не надо будет назначать каждый раз цвет шрифту, т.к везде он будет таким, каким определен в теге <BODY>.

Добавил: (Irina) Рейтинг: 0.0/0

Списки, определения

Пронумерованные списки:

В данном случае Обозреватель автоматически будет проставлять числа перед каждым элементом списка. Начинается пронумерованный список с тэга <OL> и завершается тэгом </OL>. Например:

<OL>
<LI> Один
<LI> Два
<LI> Три
<LI> Четыре
<LI> Пять
</OL>
один
два
три
четыре
пять

Тэг <OL> может иметь следующие параметры:

TYPE - вид счетчика:
A - большие латинские буквы
a - маленькие латинские буквы
I - большие римские цифры
i - маленькие римские цифры
1 - обычные цифры

START - устанавливает число, с которого будет начинатся отсчет.

Непронумерованные списки:

Для непронумерованных списков Обозреватель обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь Обозревателя.

Непронумерованный список начинается открывающимся тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Например:

<UL>
<LI> Один
<LI> Два
<LI> Три
<LI> Четыре
<LI> Пять
</UL>
один
два
три
четыре
пять

Тэг <UL> может включать параметр TYPE со значениями disc, circle, square.

<UL TYPE=disc><LI> disc </UL>
disc (точка)
<UL TYPE=circle><LI> circle </UL> circle (кружок)
<UL TYPE=square><LI> square </UL>
square (квадратик)

Данные значения - это внешний вид маркера, который по умолчанию ставится в виде диска, т.е. disc.

Списки определений:
Списки определений имеют следующий вид:
<DL>
<DT> Термин
<DD> Определение термина
<DD> Определение термина
<DD> Определение термина
<DD> Определение термина
</DL>

Термин
Определение термина
Определение термина
Определение термина
Определение термина

С элементом DL можно использовать атрибут COMPACT для установки более компактного размещения пунктов списка.

<DL COMPACT>

Именно так используется данный атрибут - никакие числовые значения ему не присваиваются.

Добавил: (Irina) Рейтинг: 0.0/0

Списки в HTML-коде

Списки в HTML-коде

Неупорядоченный <UL><LI></UL> (<LI> перед каждым элементом)
Компактный <UL COMPACT></UL>
Тип метки <UL TYPE=DISC|CIRCLE|SQUARE> (для всего списка)
<LI TYPE=DISC|CIRCLE|SQUARE> (этот и последующие)
Нумерованый <OL><LI></OL> (<LI> перед каждым элементом)
Компактный <OL COMPACT></OL>
Тип нумерации <OL TYPE=A|a|I|i|1> (для всего списка)
<LI TYPE=A|a|I|i|1> (этот и следующие)
Первый номер <OL START=?> (для всего списка)
<LI VALUE=?> (этот и следующие)
Список определений <DL><DT><DD></DL> (<DT>=термин, <DD>= определение)
Компактный <DL COMPACT></DL>
Меню <MENU><LI></MENU> (<LI> перед каждым элементом)
Компактное <MENU COMPACT></MENU>
Каталог <DIR><LI></DIR> (<LI> перед каждым элементом)
Компактный <DIR COMPACT></DIR>

Добавил: (Irina) Рейтинг: 0.0/0

Мета-теги

Мета-теги - информация для Обозревателя и поисковых машин. В HTML документе всегда размещаются между тегами <HEAD></HEAD>. Большинство мета-тегов являются не обязательными, поэтому решайте сами какие использовать. Приведены самые полезные.

Кодировка. (обязательный мета тег) Указав его, Обозреватель будет правильно отображать текст страницы.
<meta http-equiv="content-type" content="text/html; charset=Кодировка">

Пример: <meta http-equiv="content-type" content="text/html; charset=Windows-1251">

Показ дополнительного файла перед основным. Вы можете использовать этот мета-тег для переадресации, не прибегая к навороченным скриптам.
<Meta name="Refresh" Content="число (в секундах); Url=имя файла с расширением">
Пример: <Meta name="Refresh" Content="10; Url=INDEX.HTM">
Данный пример загружает документ INDEX.HTM через 10 секунд.

Указание имени автора. Впишите свое имя или Nickname.
<Meta name="Author" Content="имя автора">
Пример: <Meta name="Author" Content="IRINA">

Описание документа. Текст, который Вы укажите в этом теге, будет отображаться поисковиками. Длинна описания не должна превышать 200 символов.
<Meta name="Description" Content="описание">
Пример: <Meta name="Description" Content="Все про взлом программного обеспечения. Инструменты, вирусы, исходники.">

Ключевые слова для поисковиков. Укажите поисковикам, по каким словам им осуществлять поиск информации, содержащейся на Вашей странице. Не пишите в этом тэге одних и тех же слов. Длинна списка до 800 символов.
<Meta name="Keywords" Content="слова через запятую или пробел">
Пример: <Meta name="Keywords" Content="crack cracking взлом">

Указание E-Mail.
<Meta name="Reply-to" Content="адрес E-Mail">
Пример: <Meta name="Reply-to" Content="Lenin@INC.net">

Дата создания сайта.
<Meta Name="Date" Content="месяц, число, год и время через пробел">
Пример: <Meta Name="Data" Content="May 28 1999 15:34 Am">

Добавил: (Irina) Рейтинг: 0.0/0

Создание метатегов

Можете воспользоватся этим создателем МЕТА-тегов

LENIN INC Meta tegs creater v1.3

Название страницы:

Кодировка:

Имя автора:

E-Mail:

Описание документа:

Ключевые слова:
(через запятую)

Здесь будет выведен результат

© 2001 by Vladimir Drigalkin (LENIN INC)

Добавил: (Irina) Рейтинг: 0.0/0

Раскладка цветовой гаммы по RGB-составляющим.

Раскладка цветовой гаммы по RGB-составляющим

Раскладка цветовой гаммы по RGB-составляющим.

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

Color's name R G B Color

alicemblue F0 F8 FF

antiquewhite FA EB D7

aqua 00 FF FF

aquamarine 7F FF D4
azure F0 FF FF

beige F5 F5 DC
bisque FF E4 C4

black 00 00 00

blanchedalmond FF EB CD

blue 00 00 FF

blueviolet 8A 2B E2

brown A5 2A 2A

burlywood DE B8 87

cadetblue 5F 9E A0

chartreuse 7F FF 00

chocolate D2 69 1E

coral FF 7F 50

cornflowerblue 64 95 ED

cornsilk FF F8 DC

crimson DC 14 3C

cyan 00 FF FF

darkblue 00 00 8B

darkcyan 00 8B 8B

darkgoldenrod B8 86 0B

darkgray A9 A9 A9

darkgreen 00 64 00

darkkhaki BD B7 6B

darkmagenta 8B 00 8b

darkolivegreen 55 6B 2F

darkorange FF 8C 00

darkochid 99 32 CC

darkred 8B 00 00

darksalmon E9 96 7A

darkseagreen 8F BC 8F

darkslateblue 48 3D 8B

darkslategray 2F 4F 4F

darkturquoise 00 CE D1

darkviolet 94 00 D3

deeppink FF 14 93

deepskyblue 00 BF FF

dimgray 69 69 69

dodgerblue 1E 90 FF

firebrick B2 22 22

floralwhite FF FA F0

forestgreen 22 8B 22

fushsia FF 00 FF

gainsboro DC DC DC

ghostwhite F8 F8 FF

gold FF D7 00

goldenrod DA A5 20

gray 80 80 80

green 00 80 00

greenyellow AD FF 2F

honeydew F0 FF F0

hotpink FF 69 B4

indiandred CD 5C 5C

indigo 4B 00 82

ivory FF FF F0

khaki F0 E6 8C

lavender E6 E6 FA

lavenderblush FF F0 F5

lawngreen 7C FC 00

lemonchiffon FF FA CD

ligtblue AD D8 E6

lightcoral F0 80 80

lightcyan E0 FF FF

lightgoldenrodyellow FA FA D2

lightgreen 90 EE 90

lightgrey D3 D3 D3

lightpink FF B6 C1

Color's name R G B Color

lightsalmon FF A0 7A

lightseagreen 20 B2 AA

lightscyblue 87 CE FA

lightslategray 77 88 99

lightsteelblue B0 C4 DE

lightyellow FF FF E0

lime 00 FF 00

limegreen 32 CD 32

linen FA F0 E6

magenta FF 00 FF

maroon 80 00 00

mediumaquamarine 66 CD AA

mediumblue 00 00 CD

mediumorchid BA 55 D3

mediumpurple 93 70 DB

mediumseagreen 3C B3 71

mediumslateblue 7B 68 EE

mediumspringgreen 00 FA 9A

mediumturquoise 48 D1 CC

medium violetred C7 15 85

midnightblue 19 19 70

mintcream F5 FF FA

mistyrose FF E4 E1

moccasin FF E4 B5

navajowhite FF DE AD

navy 00 00 80

oldlace FD F5 E6

olive 80 80 00

olivedrab 6B 8E 23

orange FF A5 00

orengered FF 45 00

orchid DA 70 D6

palegoldenrod EE E8 AA

palegreen 98 FB 98

paleturquose AF EE EE

palevioletred DB 70 93

papayawhop FF EF D5

peachpuff FF DA B9

peru CD 85 3F

pink FF C0 CB

plum DD A0 DD

powderblue B0 E0 E6

purple 80 00 80

red FF 00 00

rosybrown BC 8F 8F

royalblue 41 69 E1

saddlebrown 8B 45 13

salmon FA 80 72

sandybrown F4 A4 60

seagreen 2E 8B 57

seashell FF F5 EE

sienna A0 52 2D

silver C0 C0 C0

skyblue 87 CE EB

slateblue 6A 5A CD

slategray 70 80 80

snow FF FA FA

springgreen 00 FF 7F

steelblue 46 82 B4

tan D2 B4 8C

teal 00 80 80

thistle D8 BF D8

tomato FF 63 47

turquose 40 E0 D0

violet EE 82 EE

wheat F5 DE B3

white FF FF FF

whitesmoke F5 F5 F5

yellow FF FF 00

yellowgreen 9A CD 32

Добавил: (Irina) Рейтинг: 0.0/0

Полезные советы Web-мастеру.

Полезные советы Web-мастеру.

* Размер каждой загружаемой страницы не должен превышать 30К. Если ваша страница требует длительной загрузки, предупредите об этом посетителей.

* Избегайте крупных изображений и апплетов, они долго грузяться.

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

* Для ускорения загрузки страниц применяйте в изображениях теги HEIGHT, WIDTH и ALT.

* По общепринятым нормам баннер размером 468х60 рiх (пикселей) не должен превышать 15-20 Кб.

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

* Регулярно проверяйте свои ссылки на работоспособность.

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

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

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

Добавил: (Irina) Рейтинг: 0.0/0

Рисунок и текст

Иногда нам необходимо сделать так, чтобы рисунок был обтекаемым в тексте.

Например:

null

пример, когда рисунок расположен слева

для этого пишем код:

Code

<P><IMG src="адрес рисунка" alt="null" align="left" border="0" width="ширина рисунка" height="высота рисунка" vspace="отступ"></P><P>текст</P>

Добавил: (Irina) Рейтинг: 0.0/0

Рисунок и текст

А это пример, когда рисунок расположен справа:

null пример, когда рисунок расположен справа

пишем код:

Code

<<IMG src="адрес рисунка" alt="null" align="right" border="0" width="ширина" height="высота"vspace="4"/>текст</p>

Добавил: (Irina) Рейтинг: 0.0/0

Рисунок и текст

В том случае, когда необходимо вставить несколько обтекаемых рисунков, то в таком случае вставляем таблицу. Рисунки расположены слева:

текст

текст

Code

<P><TABLE cellspacing="0" cellpadding="5" width="80%" border="0">
<TBODY><TR><TD width="ширина ячейки"><IMG height="высота" alt="" src="адрес рисунка" width="ширина рисунка"><BR> </TD><TD>текст<BR> </TD></TR><TR><TD width="ширина ячейки"><IMG height="высота" alt="" src="адрес рисунка" width="ширина рисунка"><BR> </TD><TD>текст<BR> </TD></TR></TBODY></TABLE> <BR> </P>

Добавил: (Irina) Рейтинг: 0.0/0

Аватарки своими руками

Подробный FAQ Как делать аватарки.

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

1. Для начала открываем в фотошопе любую картинку из которой вы хотите сделать аватар. Выделяем квадратом

или лассо

нужную область. Копируем. Создаем новое окно (файл→новый...) Т.к. размеры стандартной и максимально допустимой аватарки лиру 150х150 пикселей - вводим именно эти цифры. Вставляем. Подгоняем изображение под нужный формат (редактирование→трансформация→масштаб(держим shift и уменьшаем/увеличиваем)) Создаем отдельную папку на рабочем столе или в моих документах (где удобно) и сохраняем туда картинку.

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

Выделяем всю картинку (правая кнопка мыши→выделить все). Копируем. Новое окно. Вставить.

1) Делаем, так сказать мигание. Выбираем кисть. Ставим такое размер, чтобы захватить всю картинку сразу. Добавляем прозрачность кисти 20-30% и течение можно так же поставить: (500x70, 44Kb)

В итоге вот два кадра, которые получилась:

(318x180, 20Kb)

Затем открываем ImageReady (он у вас обязательно должен быть, ибо идет в комплекте с фотошопом. Если не знаете где воспользуйтесь поиском, хотя должен быть в папке с установленным фотошопом).

Выбираем File →

(400x100, 39Kb)

Устанавливаем время, которое должен длиться каждый кадр

(280x350, 100Kb)

В данном случае желательно выбрать 0 или 0.1 s. Для просмотра там на стрелочку надо нажать, ну это думаю и так понятно... Затем:

(250x300, 79Kb)

→Сохранить→Ок.

Вот, что получилось:

(150x150, 39Kb)

2) Другой вариант анимации описываю более кратко. Делаете две одинаковые картинки нужного размера. На одной выбираете Фильтр →

(400x120, 38Kb)

(Там много вариантов и настроек, советую разобрать на досуге... )

Получается две картинки:

(318x180, 16Kb)

Создаем папку. Сохраняем туда картинки. Открываем в ИмажРеади. Сохраняем. Получаем:

(150x150, 22Kb)

3)Очень похож на второй, только анимация немного другая. Две картинки. На одной выбираем Фильтр →

(400x100, 37Kb)

Сохраняем в новую папку. Открываем в ИмажРеади. Ставим время. Сохраняем. Получаем:

(150x150, 32Kb)

4)Теперь ... ну в общем вот ... не знаю как назвать .... блестки наверно:

(150x150, 30Kb)

Это не аватар, а кусочек с этой картинки (160x128, 40Kb)

Выделяем с помощью лассо

нужную часть. Затем выбираем Фильтр →

(450x100, 52Kb)

Видим сообщение: (429x420, 34Kb)

Обратите внимание, чтобы стояла галочка у пункта "одноцветный". В данном случае ставим где-то 20%. Сохраняем. Затем снова выбираем шум→добавить шум, но ставим уже 21%. Сохраняем в ту же папку, но под другим именем. Можно сделать три картинки. Открываем В ИмажРеади. Время 0 или 0.1s. Сохраняем. Получается:

(150x150, 29Kb)

Но можно добавить и цветной шум. Просто убираем галочку у пункта "одноцветный" И в итоге получаем:

(150x150, 23Kb)

5)Делаем солнышко. Открываем в фотошопе картинку ... к примеру такую:

(150x150, 38Kb)

Делаем так, чтобы из-за сердечка светило солнышко. Для этого выбираем лассо

или волшебную палочку

В данном случае лучше второе. Выделяем сердечко и вырезаем его (Правка→вырезать) Затем вставляем и получаем еще один слой:

(250x175, 17Kb)

Далее работаем с основным. Выбираем Фильтр→

(400x120, 12Kb)

Ставим крести на месте, где было сердечко. Выбираем одну из 4 позиций. В данном случае подходит первая. Ставим определенное количество процентов (смотрим на эскиз). Затем Ок.

И так повторяем 4-5 раз, при этом каждый раз сохраняем картинку под новым именем. Затем отправляем в ИмажРеади. Ставим время. Сохраняем. Получаем:

(150x150, 57Kb)

Мы видим биение сердца, т.к. наше вырезанное сердечко немного меньше по размеру, чем на оригинале.

А теперь как подписать аватарку

Это для тех, кто совсем не знаком с фотошопом. Открываем картинку нужного размера. И выбираем текст

Выделяем нужную область на картинке. Пишем текст(ник). Сохраняем. Отправляем в ИмажРеади. Сохраняем. Получаем (я взяла самый обычный шрифт, который есть у всех):

(150x150, 39Kb)

Как подписать ГОТОВУЮ АНИМАЦИИРОВАННУЮ аватарку

Запихиваем ее в отдельную папку. Открываем как обычно в ИмажРеади. Она автоматически раскладывается на кадры. Затем выбираем File→

(430x150, 57Kb)

Видим сообщение:

(527x552, 144Kb)

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

Добавил: (Irina) Рейтинг: 0.0/0

фото-виджет