Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Кот » Архивы » `tsunami | Киви. Счастье невозможно, если его не с кем разделить.

`tsunami | Киви. Счастье невозможно, если его не с кем разделить.

Страница: 1

Сообщений 1 страница 5 из 5

1

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Хорошего дня. Я очень рада, что стала теперь твоим учителем. Очень надеюсь, что нашу обучение пойдет тебе на пользу, ты научишься многому интересному и познавательному. К сожалению, сейчас не очень много времени на обучение, я буду стараться читать тему и проверять работы по мере возможности.

План наших занятий

Поработаем со скриптами
1. Таблица в шапке
2. Замена надписей онлайн/оффлайн
3. Добавление картинок в меню навигации
4. Контейнер для баннеров
5. Стрелочки вверх/вниз
Первое окно стиля
6. Разберем подробнее первое окно стиля
Таблицы
7. Поучимся делать таблицы.

Журнал наших занятий

Буду дополнять по мере выполнения тобой заданий.

Тема урока. Задание.

Оценка за задание.

Таблица в шапке.
Задание 1.

5
Все хорошо, молодец.

Замена надписей онлайн/оффлайн.
Задание 2.

P.S. Ошибки я буду выделять красным и исправлять им же. Фуксией выделяю и исправляю недочеты. Таким цветом буду писать заголовки и сноски из своих же уроков для повторного прочтения.
Итак, начнем. Расскажи, пожалуйста, немного конкретнее о том, чему бы ты еще хотела научиться? Может быть, есть какие-то вещи конкретные?

0

2

  • Автор: Киви
  • Участник
  • Киви
  • Зарегистрирован: 2012-11-29
  • Приглашений: 0
  • Сообщений: 63
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 12 часов
  • Последний визит:
    2014-11-13 11:45:52

Если конкретно, то...даже не знаю. Хочу знать всё и сею секунду, поэтому давай всё по порядку.

0

3

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Киви
Хорошо)

Таблица в шапке
Нашла эту штуку на этом же форуме. Это довольно полезная вещь, если не умеешь делать обычные таблицы. Иногда бывает нужно разместить какую-то информацию у всех на виду. Для этого мы сделаем с тобой таблицу не снизу (уже в теле форума), а в самой шапке. Выглядеть это будет примерно, как здесь:
http://hrhfbvj.mybb.ru/
Только мы будем вставлять не облако тегов, а обычный текст. Начнем.
1. Можешь сделать в своем же дизайне, который мы делали на тестовике, можешь сделать новый, - в шапке мы рисуем, чертим, вставляем ту область, где у нас будет сам текст. У меня на простеньком дизайне она желтая с зеленой обводкой.
2. Сохраняем шапку с этим сделанным окном, вставляем в дизайн. Все как обычно, ничего нового.
3. Дальше в HTML-верх вот этот код:

<table border=0 width="ширина таблицы" style="text-align: justify; position: absolute; top: отступ от высоты; margin-left:отступ от левой стороны"
<tr><td width="ширина"><center><br>
Содержимое
</td></tr></table>

Заменяем значения на свои. Чтобы узнать отступ, который надо сделать от левой стороны, чтобы текст таблицы был ровно в том окошке, которое мы для него сделали, можно воспользоваться в фотошопе инстурментом "Рамка". Выделяем пространство между краем шапки и началом места для таблицы. После того, как мы выделили, нажимаем галочку или Enter. Шапка обрезана. Нажимаем Alt+Ctrl+C, открывается окошко «Размер холста». Смотрим ширину изображения. Эту ширину мы и вставляем в margin-left. Не забудь, что она указывается в пикселях (px).
Дальше проделываем все то же самое, только обрезаем от верха и вставляем результат в top. Тоже в пикселях, естественно.
4. Содержимое заполняем уже, как душе угодно.
Вот так в шапку можно сделать и окошко для баннеров.

Задание
1. На своем тестовике или на другом сделать таблицу в шапке и заполнить ее каким-то текстом.

0

4

  • Автор: Киви
  • Участник
  • Киви
  • Зарегистрирован: 2012-11-29
  • Приглашений: 0
  • Сообщений: 63
  • Уважение: +1
  • Позитив: +1
  • Провел на форуме:
    1 день 12 часов
  • Последний визит:
    2014-11-13 11:45:52

Готово.
http://testovik699.mybb.ru/

0

5

  • Автор: `tsunami
  • per aspera ad astra
  • `tsunami
  • Зарегистрирован: 2013-02-07
  • Приглашений: 0
  • Сообщений: 1085
  • Уважение: +85
  • Позитив: +19
  • Пол: Женский
  • Провел на форуме:
    6 дней 22 часа
  • Последний визит:
    2013-05-04 13:04:56

Киви
Молодец.

Замена надписей онлайн/оффлайн
В конце урока мы должны получить что-то вроде того, что есть здесь: http://testcwsummer.mybb.ru/
Это, скорее, не урок, а просто полезный скрипт и объяснение как им пользоваться, ничего больше, но я посчитала, что эту вещь мало где можно найти, а она бывает важна и нужна. Так что вот:

<script type="text/javascript">
var we=document.getElementsByTagName("ul")
var x=0
for (x=0; x<=(we.length-1); x++)
{if (we[x].innerHTML.indexOf("pa-online")!=-1)
{we[x].innerHTML=we[x].innerHTML.substring(0, (we[x].innerHTML.indexOf("pa-online")-11))+"<img src='ссылка на картинку онлайн' />"}
else if ((we[x].innerHTML.indexOf("pa-online")==-1)&&(we[x].innerHTML.indexOf("pa-author")!=-1))
{we[x].innerHTML=we[x].innerHTML+"<img src='ссылка на картинку оффлайн' />"}
}
</script>

Ну, думаю, здесь все понятно. Ставим мы его в HTML-низ, ссылки заменяем на свои, конечно. Картинке делайте или ищите не очень большие, а то будет смотреться не очень красиво. Я брала 150х45 пикселей.

Задание
1. Думаю, понятно. Заменить надписи "онлайн" и "оффлайн" на свои картинки по уроку.

0

Страница: 1

Вы здесь » Кот » Архивы » `tsunami | Киви. Счастье невозможно, если его не с кем разделить.

Рейтинг форумов | Создать форум бесплатно