Лана : другие произведения.

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

Самиздат: [Регистрация] [Найти] [Рейтинги] [Обсуждения] [Новинки] [Обзоры] [Помощь|Техвопросы]
Ссылки:


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

Как можно оформить свою страничку?

Фон и цвет шрифта.

Начнём с фона. Что здесь можно изменить? Разберём все изменения на примере моей странички. Здесь проводится замена самого фона (кроме двух участков со ссылками) заданием свойства 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). И объединяете с помощью тегов в следующую конструкцию:

<a href=/editors/s/sorrelx_a/about.shtml><img src=http://veselble-kartinki.narod.ru/prividenija8.gif></a>

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

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

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

Записываем конструкцию <img src=http://liubavyshka.ru/_ph/19/2/636126127.gif>

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

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

аннотация

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

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

Разберём на примере этого ролика:
Копируем предлагаемый нам код 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>

А так выглядит результат этого кода:
Пример берущей строки.


 Ваша оценка:

Связаться с программистом сайта.

Новые книги авторов СИ, вышедшие из печати:
О.Болдырева "Крадуш. Чужие души" М.Николаев "Вторжение на Землю"

Как попасть в этoт список

Кожевенное мастерство | Сайт "Художники" | Доска об'явлений "Книги"