# Оформление странички

Лана

Добавляем картинку в аннотацию:

ЛанаОформление страничкиOrigin: http://samlib.ru/s/sorrelx_a/oformlenie5.shtmlСоздан: 25/01/2010, изменен: 08/02/2014, 12kСправочник: ИзобретательствоSeries: Оформление текстов на СИДобавляем картинку в аннотацию:============================================================

Как можно оформить свою страничку? Фон и цвет шрифта. Начнём с фона. Что здесь можно изменить? Разберём все изменения на примере моей странички. Здесь проводится замена самого фона (кроме двух участков со ссылками) заданием свойства background="адрес фона ", замена цвета текста text="#цифровой код ", и замена цвета ссылок: link - цвет просто ссылки; alink - цвет активной ссылки (нажатой); vlink - цвет уже посещенной ссылки. Все эти параметры прописываются внутри тега . На моей страничке (на текущий момент) этот тег имеет вид: <body background="http://catsru.narod.ru/fons/sixtynin.jpg" link="#6F5B7B" vlink="#4F6949" alink="#AB1F5E" text="#4F6949"> Сформированный тег размещают в аннотации к "Сведения о разделе" и получают красиво не серую страничку. Таким образом можно изменить любую страничку вашего раздела, причём изменения коснуться и комментариев. Как здесь. Для этого нужно сформированный тег разместить в аннотации к произведению.   Аватарка (фотография) . На главную страничку вашего раздела можно поместить картинку, не превышающую 10 кБ. Что делать, если вам понравилась картинка большего объёма, например, с анимацией. Можно её разместить в сведениях об авторе, но тогда она не будет выводить посетителей в "информацию о владельце раздела". Для того, чтобы исправить эту неприятность, картинку надо оформить, как ссылку. Берёте адрес этой картинки (либо загрузив её предварительно на свою страничку, либо непосредственно с того сайта, где вы её нашли, например, http://veselble-kartinki.narod.ru/prividenija8.gif) и адрес странички, где у вас находится "информация о владельце раздела" (для примера, моя страничка: http://samlib.ru/s/sorrelx_a/about.shtml). И объединяете с помощью тегов в следующую конструкцию:

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

Как вставить картинку в аннотацию.

Выбираем картинку и копируем её адрес. Например, этот: http://liubavyshka.ru/_ph/19/2/636126127.gif.

Записываем конструкцию

При желании можно добавить тег
, чтобы картинка встала с новой строки.

Загружаем полученную конструкцию в окошко "Аннотаци" и сохраням результат:

Что получилось - видно в аннотации к этому файлу.

Как вставить на страничку ролик с Ютуба.

Разберём на примере этого ролика:

Копируем предлагаемый нам код HTML, переформируем его для наглядности:

<object width="640" height="385">

<param name="movie" value="http://www.youtube.com/v/13-7HlzFbjs&color1=0xb1b1b1&color2=0xd0d0d0&hl=ru_RU&feature=player_embedded&fs=1"></param>

<param name="allowFullScreen" value="true"></param>

<param name="allowScriptAccess" value="always"></param>

<embed src="http://www.youtube.com/v/13-7HlzFbjs&color1=0xb1b1b1&color2=0xd0d0d0&hl=ru_RU&feature=player_embedded&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="385"></embed>

</object>

Наша задача - избавится от тега <embed>, то есть убрать последние строки в общем коде. Для этого вносим внуть тега <object> элемент type="application/x-shockwave-flash", который ранее размещался внутри тега <embed>. И сюда же вписываем элемент data="http://www.youtube.com/v/13-7HlzFbjs" с адресом ролика (в примере оба элемента выделены красным, обратите внимание, поледний адрес берётся до символа &). Теперь удаляем весь код <embed> и получаем:

<object width="640" height="385" type="application/x-shockwave-flash"data="http://www.youtube.com/v/13-7HlzFbjs">

<param name="movie" value="http://www.youtube.com/v/13-7HlzFbjs&color1=0xb1b1b1&color2=0xd0d0d0&hl=ru_RU&feature=player_embedded&fs=1"></param>

<param name="allowFullScreen" value="true"></param>

<param name="allowScriptAccess" value="always"></param>

</object>

Результат:

Дополнительные украшательства.

Бегущая строка.

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

Бегущая строка создаётся с помощью контейнера тэгов <marquee>...</marquee> со следующими атрибутами:

• width="..." - ширина бегущей строки в пикселях или процентах от ширины экрана.

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

• bgcolor="..." - определяет цвет фона бегущей строки.

• behavior="..." задает тип движения (поведение) бегущей строки и имеет следующие значения:

• • scroll - циклическая прокрутка текста из одного конца в другой Бегущая строка

• • slide - текст появляется с одного края и останавливается у другого. Бегущая строка

• • alternate - текст перемещается от одного края к другому и обратно. Бегущая строка

• direction="..." - определяет направление движения бегущей строки. Имеет следующие значения:

• • left - текст движется влево по строке Бегущая строка

• • right - текст движется вправо по строке Бегущая строка

• • up - вся строка перемещается снизу вверх Бегущая строка

• • down - строка движется сверху вниз Бегущая строка

• scrollamount="..." - шаг перемещения в строке в пикселах, на который перемещается текст за заданный интервал времени. Например:


Бегущая строка  - scrollamount="1"


Бегущая строка  - scrollamount="2"


Бегущая строка  - scrollamount="2"


• scrolldelay="..." - Этот атрибут задаёт временной интервал между шагами бегущей строки в миллисекундах. Например:


Бегущая строка  - scrolldelay="100"


Бегущая строка  - scrolldelay="200"


Бегущая строка  - scrolldelay="300"


• loop="..." - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз.

• hspace="..." - Этот атрибут задает поле в пикселах справа и слева от бегущей строки.


Бегущая строка  - hspace="10"


Бегущая строка  - hspace="0"


• vspace="..." - Этот атрибут задает отступ в пикселах выше и ниже бегущей строки.


Бегущая строка  - hspace="0"


Бегущая строка  - hspace="10"


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


<marquee loop="infinite" behavior="altemate"

bgcolor="aqua" direction="right" height="50" width="250">

Пример берущей строки.

</marquee>


А так выглядит результат этого кода:

Пример берущей строки.