Кот

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

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

Вы здесь » Кот » Архивы » `tsunami | Nicol.tea. Твои мечты сбудутся, нужно мечтать.

`tsunami | Nicol.tea. Твои мечты сбудутся, нужно мечтать.

Страница: 1 2 3  

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

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.

5
Мне понравилось, работа хорошо выполнена.

Добавление картинок в меню навигации.
Задание 3.

5
Няшные фруктики, но лениться плохо))

Контейнер для баннеров.
Задание 4.

5
Молодца, все круто.

Стрелочки вверх/вниз.
Задание 5.

5
Все отлично, молодец.

Разберем подробнее первое окно стиля.
Задание 6.

5
Молодец, все отлично.

Поучимся делать таблицы.
Задание 7.

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

Отредактировано `tsunami (2013-02-27 13:52:30)

0

2

  • Автор: Nicol.tea
  • Администратор
  • Nicol.tea
  • Зарегистрирован: 2013-02-11
  • Приглашений: 0
  • Сообщений: 815
  • Уважение: +42
  • Позитив: +16
  • Пол: Женский
  • Возраст: 25 [1999-01-28]
  • Провел на форуме:
    12 дней 5 часов
  • Последний визит:
    2015-05-31 14:02:35

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

0

3

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

Nicol.tea
Всему... Ладно) скоро будет первый урок.

0

4

  • Автор: `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

5

  • Автор: Nicol.tea
  • Администратор
  • Nicol.tea
  • Зарегистрирован: 2013-02-11
  • Приглашений: 0
  • Сообщений: 815
  • Уважение: +42
  • Позитив: +16
  • Пол: Женский
  • Возраст: 25 [1999-01-28]
  • Провел на форуме:
    12 дней 5 часов
  • Последний визит:
    2015-05-31 14:02:35

http://latte.mybb.ru/

0

6

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

Nicol.tea
Да, молодец, все супер - 5. Следующий урок сегодня вечером))

0

7

  • Автор: `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

8

  • Автор: Nicol.tea
  • Администратор
  • Nicol.tea
  • Зарегистрирован: 2013-02-11
  • Приглашений: 0
  • Сообщений: 815
  • Уважение: +42
  • Позитив: +16
  • Пол: Женский
  • Возраст: 25 [1999-01-28]
  • Провел на форуме:
    12 дней 5 часов
  • Последний визит:
    2015-05-31 14:02:35

сделала
http://latte.mybb.ru/

0

9

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

Nicol.tea
Ага, молодец, отлично)) новый урок вечером.

0

10

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

Добавление картинок в меню навигации
Я не знала как лучше назвать этот урок, прости. Смысл его в том, что в интернете я видела много скриптов, как надписи меню навигации заменить на свои, но это довольно банально. Видела замену на кнопочки, но и это банально, да? Думаю, если захочется, ты сама сможешь посмотреть эти скрипты. А я расскажу про такой, которым пользуются довольно редко, по-идее, он не особо нужный, но интересный. Может, он когда-нибудь тебе понадобится. В итоге у нас должно получиться что-то такое. Этот скрипт я взяла и поставила в исходном виде, как его нашла:
http://testkot23.mybb.ru/
1. Вот он, собственно, сам скрипт. Вставляем в HTML-верх:

<style type="text/css">
#pun-navlinks  * {
  text-align: center !important;
  padding-top: 65px !important;
}

#pun-navlinks li {
  display: inline;
  margin: 0.2%;
  padding-top: 70px;
  padding-right: 10px;
  padding-left: 10px;
}

#navextra1 {
  padding-right: 20px;
  padding-left: 20px;
}

#navindex {
background: transparent url(ссылка на картинку форума) no-repeat center;
}
#navuserlist {
background: transparent url(ссылка на картинку участников) no-repeat center;
}
#navrules {
background: transparent url(ссылка на картинку правил) no-repeat center;
}
#navsearch {
background: transparent url(ссылка на картинку поиска) no-repeat center;
}
#navprofile {
background: transparent url(ссылка на картинку профиля) no-repeat center;
}
#navlogin, #navlogout {
background: transparent url(ссылка на картинку входа/выхода) no-repeat center;
}
#navregister {
background: transparent url(ссылка на картинку регистрации) no-repeat center;
}

#navextra0, #navextra1, #navextra2, #navextra3, #navextra4, #navextra5, #navextra6, #navextra7, #navextra8, #navextra9, #navextra10 {
background: transparent url(/img/Mybb_NewBlack/extra.gif) no-repeat center;
}

#navpm {
background: transparent url(ссылка на картинку сообщений) no-repeat center;
}

#navadmin {
background: transparent url(ссылка на картинку администрирования) no-repeat center;
}
</style>

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

Задание
1. Все понятно. Надо на своем тестовике или на новом добавить в меню навигации картинки по этому скрипту.

0

Страница: 1 2 3  

Вы здесь » Кот » Архивы » `tsunami | Nicol.tea. Твои мечты сбудутся, нужно мечтать.

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