`tsunami | crimson soda. Нам просто стало летать.

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

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

Поделиться12013-02-25 18:57:30

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 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.

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

Отредактировано `tsunami (2013-02-28 09:38:41)

Поделиться22013-02-26 05:17:09

Автор: crimson soda
give us the absolute
Зарегистрирован: 2012-07-03
Приглашений: 0
Сообщений: 134
Уважение: +13
Позитив: +10
Возраст: 29 [1995-02-22]
Провел на форуме:
1 день 17 часов
Последний визит:
2013-09-16 21:25:02

`tsunami написал(а):

Итак, начнем. Расскажи, пожалуйста, немного конкретнее о том, чему бы ты еще хотела научиться? Может быть, есть какие-то вещи конкретные?

даже не знаю. хочу всего, и не знаю, за что ухватиться

Поделиться32013-02-26 13:46:37

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 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. На своем тестовике или на другом сделать таблицу в шапке и заполнить ее каким-то текстом.

Поделиться42013-02-26 17:50:05

Автор: crimson soda
give us the absolute
Зарегистрирован: 2012-07-03
Приглашений: 0
Сообщений: 134
Уважение: +13
Позитив: +10
Возраст: 29 [1995-02-22]
Провел на форуме:
1 день 17 часов
Последний визит:
2013-09-16 21:25:02

`tsunami
http://sodatsunami.mybb.ru/ - готово. сделала новый тестовик и на скорую руку набросала дизайн.

Поделиться52013-02-27 10:13:45

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

Отлично, 5+. Очень все понравилось.

Поделиться62013-02-27 10:13:58

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 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. Думаю, понятно. Заменить надписи "онлайн" и "оффлайн" на свои картинки по уроку.

Поделиться72013-02-28 06:52:58

Автор: crimson soda
give us the absolute
Зарегистрирован: 2012-07-03
Приглашений: 0
Сообщений: 134
Уважение: +13
Позитив: +10
Возраст: 29 [1995-02-22]
Провел на форуме:
1 день 17 часов
Последний визит:
2013-09-16 21:25:02

http://sodatsunami.mybb.ru/ - готово

Поделиться82013-02-28 09:37:35

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

crimson soda
Молодец, все отлично, следующий урок чуть позже))

Поделиться92013-02-28 11:26:21

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 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. Все понятно. Надо на своем тестовике или на новом добавить в меню навигации картинки по этому скрипту.

Поделиться102013-03-01 10:55:50

Автор: crimson soda
give us the absolute
Зарегистрирован: 2012-07-03
Приглашений: 0
Сообщений: 134
Уважение: +13
Позитив: +10
Возраст: 29 [1995-02-22]
Провел на форуме:
1 день 17 часов
Последний визит:
2013-09-16 21:25:02

`tsunami
сегодня не успею, вернусь поздно. завтра все выполню.
не теряй меня