`tsunami | Gerda. Все мы смотрим одинаково, но видим по-разному.

Поделиться12013-03-12 16:24:19

Автор: `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.
4
Хорошо, но не сразу разобралась.
Замена надписей онлайн/оффлайн.
Задание 2.
5
Молодец, вроде все хорошо.
Добавление картинок в меню навигации.
Задание 3.

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

0

Поделиться22013-03-12 18:44:07

Автор: Gerda
Участник
Зарегистрирован: 2012-09-25
Приглашений: 0
Сообщений: 101
Уважение: +0
Позитив: +0
Провел на форуме:
2 дня 22 часа
Последний визит:
2015-06-01 17:02:43

`tsunami
ну, с самими дизайнами вроде разобрались. а вот дальше. Стрелочки и навигацию я еще как-нить методом тыка могу сделать, при условии, что есть готовый код и мне нужно ток подставить свое. А вот таблицы.. Даже с готовым кодом мне сразу и не понять чего там к чему) да и вообще нужно уметь делать не только "каркас" но и "начинку"

0

Поделиться32013-03-13 18:38:21

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

0

Поделиться42013-03-14 09:56:42

Автор: Gerda
Участник
Зарегистрирован: 2012-09-25
Приглашений: 0
Сообщений: 101
Уважение: +0
Позитив: +0
Провел на форуме:
2 дня 22 часа
Последний визит:
2015-06-01 17:02:43

Код:

<table border=0 width="300px" style="text-align: justify; position: absolute; top: 50px; margin-left: 100px
<tr><td width="300px"><center><br>
Здесь могла быть ваша реклама. А вообще, тут будут буковки)
</td></tr></table>

проверь, пожалуйста. я с шириной таблицы и шириной запуталась. это там где 300 у меня. а с полодением. вообще должно было быть топ - 30, левт - 60. но оно вот как стоит сейчас, туда и вставало. подумала я, решила увеличить отступы. результат тот же.

0

Поделиться52013-03-15 08:42:06

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

Gerda
Может, ты мне ссылку на тестовик кинешь? А? Я все равно ничего не поняла из твоих объяснений, а еще и без тестовика.

0

Поделиться62013-03-15 10:21:50

Автор: Gerda
Участник
Зарегистрирован: 2012-09-25
Приглашений: 0
Сообщений: 101
Уважение: +0
Позитив: +0
Провел на форуме:
2 дня 22 часа
Последний визит:
2015-06-01 17:02:43

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

а еще и без тестовика.

сорри. забыла.
http://testgerda.mybb.ru/

0

Поделиться72013-03-17 09:58:08

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

Gerda
Ну, у тебя просто неправильно поставлены значения:

<table border=0 width="300px" style="text-align: justify; position: absolute; top: вот это; margin-left: и вот это
<tr><td width="300px"><center><br>
Здесь могла быть ваша реклама. А вообще, тут будут буковки)
</td></tr></table>

0

Поделиться82013-03-17 16:34:10

Автор: Gerda
Участник
Зарегистрирован: 2012-09-25
Приглашений: 0
Сообщений: 101
Уважение: +0
Позитив: +0
Провел на форуме:
2 дня 22 часа
Последний визит:
2015-06-01 17:02:43

`tsunami
все делала как ты написала выше в уроке

0

Поделиться92013-03-18 16:59:13

Автор: Gerda
Участник
Зарегистрирован: 2012-09-25
Приглашений: 0
Сообщений: 101
Уважение: +0
Позитив: +0
Провел на форуме:
2 дня 22 часа
Последний визит:
2015-06-01 17:02:43

`tsunami
усе. разобралась. http://testgerda.mybb.ru/

0

Поделиться102013-03-21 11:46:01

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

Gerda
Молодец.
Замена надписей онлайн/оффлайн
В конце урока мы должны получить что-то вроде того, что есть здесь: 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.	4 Хорошо, но не сразу разобралась.
Замена надписей онлайн/оффлайн. Задание 2.	5 Молодец, вроде все хорошо.
Добавление картинок в меню навигации. Задание 3.

Кот

Меню навигации

Пользовательские ссылки

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