Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

В помощь начинающему web-мастеру


Информационный Канал Subscribe.Ru

Главная Статьи Форум Каталог программ Ссылки О сайте
  Webstudent.net.ru - Мы учимся вместе!
Рассылка начинающему web-мастеру.


Дата: 2004-08-15
Выпуск: 28
Количество подписчиков: 2867


Приветствую, уважаемые подписчики!
Сегодня в выпуске:


Новости:

(c) it4all
Шо-то граждане подписчики наш Роман не желает возвращаться с отпуска...., а я, прикованный к столу с компьютером на все лето, по моему стал пускать корни, по крайней мере левая нога уже не поднимается. Как бы не пришлось выкорчовывать меня от сюда, недельки через две...

Особых новостей пока нет, видимо все, кто еще не успел отдохнуть, старается восполнить этот пробел в своей жизни, поэтому на нашем форуме на этой неделе небольшое затишье. А чтоб совсем не заплесневеть, мы разводим котят, пытаемся скрестить их с драконами, запивая все это можайским молоком :) Присоединяйтесь , вам понравится !


Продолжаем цикл статей по созданию сайта с нуля. Все замечания и предложения сюда: it4all@yandex.ru

Практика web-дизайна. Часть седьмая.

Полная версия статьи с иллюстрациями : http://www.it4all.h10.ru/int.php?cat=intro&num=11
Автор: it4all

Предлагаю на этом уроке заняться некоторым украшательством нашей страницы, создадим "подсвечивающиеся" кнопки ("rollovers"), а также карту ссылок.

Ролловеры ("Rollovers").

Для примера возьмем тотже сайт о футболе, на нем, меню сервисов, представлено в виде рисованных кнопок. При наведении мыши, кнопки остаются статичными, предлагаю сделать из них "перкатыши", так можно литературно перевести вышеприведенное английское слово. В итоге у нас должен получится эффект, когда при наведении мыши на кнопку, она слегка изменится - в данном случае станет ярче. Вы, когда будете делать тоже на своих сайтах, можете применить другие типы выделения кнопок - смена цвета, смещение вверх и в право (кнопка приподнята), вниз и влево (кнопка вдавлена), свечение (ореол вокруг кнопки, особо клево смотрится на темных сайтах) и .т.д.

Многие скажут, что это никому не нужный выпендреж, который лишь добавит "веса" к странице, заставляя пользователя грузить еще и второй экземпляр этой кнопки. У меня есть , что возразить - конечно можно обойтись и без этого, и многие сайты так и делают, но представьте себе пользователя сидящего за большим монитором, с утомленными глазами, и к тому же со слабым зрением. Чтобы помочь такому пользователю определится с выбором пункта в громадном, насыщенном информацией меню, мы обычно "подсвечиваем" (либо подчеркиваем, либо меняем их цвет) ссылки, применяя стиль "a:hover {color: #.....}", либо меняем фоновый цвет в столбце со ссылкой (как было описано в предыдущем уроке). Кто этого не делает, скажу им одно- зря товарищи, "ходить" по такому сайту в 100 раз сложнее, любите своих пользователей.
А что делать если меню представлено в виде графических кнопок ? Именно сделать из них "ролловеры", поверьте этот эффект был задуман именно для выделения, чтоб не смотреть на строку состояния браузера, а не для придания "крутости" страницам.

Будем считать, что я уговорил вас на это дело, теперь посмотрим, как это правильно сделать. Естественно новый вид кнопки нужно нарисовать, и сделать это нужно прямо на эскизе сайта, на отдельном слое. Я просто сделал дубликат слоя с кнопкой, затем добавил контраста и яркости, кнопка получилась, как будто с горящей лампочкой внутри. Затем нужно отключить отображение данного слоя, чтобы он стал невидимым (щелкнуть по пиктограмме "глаза" напротив каждого слоя). Данные манипуляции нужно поделать с каждой кнопкой, перед тем как резать эскиз.

В "Adobe ImageReady", когда вы нарежете кнопку, для того,чтоб сделать ее "Over" состояние нужно обратится к окну "Rollovers". У меня оно не очень удобно поместилось в блоке вместе с "Layers","History" и "Actions", рекомендую вытащить его в отдельное окно или совместить в блоке с окном "Slice" (как было реализовано в 6 версии программы). Выделите "слайс" с кнопкой и в окне "Rollovers" нажмите кнопку "Create rollover state", при этом, под изображением кнопки в окне должен появится новый слой, с изображением тойже кнопки. Теперь самое время перейти к слоям и включить видение слоя с измененным дубликатом кнопки. Теперь программа запомнила, что при "Over state" этого "слайса", слой "имя слоя" должен быть видимым.Повыбирайте курсором нормальное и "овер" состояния и вы увидите, что в главном окне, новое состояние кнопки то появляется,то исчезает. Вот в принципе и все, больше для создания "ролловера" для данной картинки делать не нужно, только не забудьте, при сохранении нарезанного эскиза ("Save Optimized As"), в разделе "File Naming" (именование файлов), добавить к имени файлов опцию "rollover state". Тогда программа сохранит один слайс в двух ипостасях и сама добавит к имени нового состояния кнопки, приписку "…-over" (в данном примере "home-over" ).

Пока мы сделали пол дела, теперь нужно воплотить созданные рисунке в верстке, для чего откроем наш незаменимый "Дримвивер".
В том месте, где у вас планируется размещение кнопки (у меня это ячейка таблицы), в панели инструментов "Insert" щелкните по пиктограмме "Rollover Image". В появившемся окне нужно вписать следующее:

  • Image name - это имя совокупного изображения используемого функцией на "Javascript. Для каждой пары картинок это имя должно быть уникальным! Я ввел "home"
  • Original Image - путь до картинки по умолчанию.
  • Rollover Image - путь до картинки "овер-состояния"
  • Preload Rollover Image - не забудьте поставить тут галочку, тогда оба изображения будут подгружены в кэш компьютера пользователя, и при смене изображений они будут браться именно оттуда, а не с сервера.
  • Alternate Text - подпись к картинкам
  • When Clicked , Go To URL - куда идти, если пользователь кликнул по кнопке.

Все граждане дизайнеры, после этого программа сама сгенерирует нужные функции на языке "Javascript", а вам останется повторить эту нехитрую процедуру для других кнопок.
Результат этого урока можно увидеть тут - http://www.it4all.h10.ru/web_master/project1/new.htm (только кнопка "На главную")
Интересно, сделает ли это на своем сайте, владелец футбольного ресурса Jurgan?

Карта ссылок ("Image map").

На недавно прошедшем конкурсе "Золотой сайт" победу в своей номинации одержал сайт певицы Земфиры. На нем я был уже раньше (мне на него указал Роман ака Crystall), и отметил для себя, что на нем очень оригинальное, красивое меню, выполненное по непопулярной сейчас технологии - карта ссылок. Почему непопулярной ? Дело в том, что для реализации меню на карте ссылок, приходится грузить пользователю достаточно крупное по размерам (а возможно и по килобайтам), цельное изображение. И если по каким-то причинам оно не загрузилось, то все юзабилити сайта просто исчезает, пользователь врятли станет лазить мышью на месте не загрузившейся картинки.
Поэтому многие не хотят рисковать и без особой нужды не применяют эту технологию. Но иногда это бывает просто необходимо, мне пришлось для сайта одной фирмы дать карту с нанесенными на ней городами, в которых находились ее филиалы. По клику на каждом городе должна была загрузится страница с информацией по данному филиалу. Ну будем считать, что на прочтение дальнейших строк, я вас тоже уговорил.

Карта ссылок работает следующим образом - браузеру передается код, по которому он начинает определять области экрана (активные зоны),по координатам "х,у" (начало которых, в левом верхнем углу экрана), в пределах которых действуют гиперссылки .Сама картинка нужна пользователю, даже если она не загрузится карта все равно будет работать (но пользователь не будет знать что там карта а не просто картинка).

.........................................................
(Остальная часть статьи , по выше указанному адресу)

Использованы материалы:
www.it4all.h10.ru/


Интересные программы.

Джуди совершила вполне героический поступок, к первому сентября она пополнила наш каталог программ несколькими скриптами, а что еще более важно электронными учебниками по HTML (плакали теперь все книжные магазины). Всем первоклашкам вэб-дизайна , прыгать и хлопать в ладоши ;)
И она утверждает, что на это ее соблаговолил отпуск на холодном Балтийском море......... НЕ ВЕРЮ !!! (Станиславский =), тут явно не обошлось без теплых вод в Геленжике !)))))))

Скрипт(Последнее обновление)
Показывает дату последнего обновления.
Скачать : http://webstudent.net.ru/modules/mydownloads/visit.php?cid=29&lid=484

Скрипт(Скрытое меню)
Скрытое меню, его нужно вытащить!
Скачать : http://webstudent.net.ru/modules/mydownloads/visit.php?cid=29&lid=485

Скрипт(Летающее меню )
Меню плывет вверх-вниз по странице.
Скачать : http://webstudent.net.ru/modules/mydownloads/visit.php?cid=29&lid=483

Скрипт(Комментарии к ссылке)
Пишет комментарий при наведении на ссылку.

Е-учебники

Золотые правила плохого HTML.
"Этот трактат следует рассматривать как руководство для всех, кто намеревается прославиться плохим HTML - оформлением своей странички."
Автор: Штефан Карзаунинкат.
42.50 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать : http://webstudent.net.ru/modules/mydownloads/visit.php?cid=29&lid=479

CSS - каскадные таблицы стилей.
Автор: Красносельский К. К.
16.70 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать : http://webstudent.net.ru/modules/mydownloads/visit.php?cid=29&lid=478

Как добиться успеха в Internet.
Полезные мысли для тех, кто ищет себя в Паутине.
Автор: Бальтасар Грасианов.
42.50 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать : http://webstudent.net.ru/modules/mydownloads/visit.php?cid=29&lid=477

Веб-дизайн.
Учебник по Веб-дизайну и HTML.
Автор: Vladimir Drigalkin, LENIN INC
260.00 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать : http://webstudent.net.ru/modules/mydownloads/visit.php?cid=29&lid=475

HTML в примерах. Много разных тегов HTML с описанием.
Автор: Александр Климов
197.00 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать : http://webstudent.net.ru/modules/mydownloads/visit.php?cid=29&lid=474

Еще один учебник по HTML. Ни чуть, не хуже первого)))Хи
Автор: Александр Климов
69.70 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать : http://webstudent.net.ru/modules/mydownloads/visit.php?cid=29&lid=473

Ну очень хороший учебник по HTML, с примерами.
Автор: Алленова Наталья
205.00 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать : http://webstudent.net.ru/modules/mydownloads/visit.php?cid=29&lid=472

Компьютерный журнал Хакер №65
Офф-лайн версия известного компьютерного журнала Хакер, посвящённого искусству хакерства, интересным статьям для самообразования, информации о том, что необходимо знать каждому пользователю компьютера. Другими словами, обо всем, что связано с компьютерами. Часто в журнале бывают материалы о стиле жизни, о каких-то абсолютно жизненных вещах, о здоровье и проведении свободного времени. Главное отличие от других изданий - манера подачи материалов...
72.00 KB Win 9*/ME/NT/2K/XP, Free, RU
Скачать : http://webstudent.net.ru/modules/mydownloads/visit.php?cid=29&lid=471


Вопрос в рассылку

Уважаемые Гуру! Нам, новичкам, нужна Ваша помощь! Помогите нам, ведь это выгодно обоим сторонам: мы получаем желанные знания, а вы имеете уникальную возможность продемонстрировать свои знания и опыт. Ссылка на ваш сайт гарантирована!

Присылайте свои вопросы на адрес it4all@yandex.ru

Вопрос № 26
У меня есть сайт на платном хостинге. Имеет ли смысл для повышения
ИЦ сделать зеркала на бесплатных хостингах, где были бы множество
ссылок на основной сайт?

Ответ от Железовский Юрий (Jurgan) (http://interfootball.net.ru):
Нет, не имеет смысла, т.к. индекс цитирования почти не увеличивается,
если ссылки стоят на бесплатных хостингах, проверено.

Ответ от Dansury (http://punk.ru.ru.ru/):
должно иметь :) только это называется "мошенничество" :) (хорошую
идейку подкинул, хе)

Ответ от Renat_K (http://www.hotwebpro.narod.ru/) :
С теоретической точки зрения, это ни к чему не приведёт. Индекс Цитирования (ИЦ) повышается если ссылка находится на сайте максимально близком к вашему тематически. Т.е. если ссылка на ваш сайт (например, посвящённый мотогонкам) находится на сайте Космического агентства, то ваш ИЦ повысится на 0,01-0,1 пункта. К тому же ссылки на бесплатных хостах в ИЦ некоторых поисковых систем вообще не рассматриваются.
Но создание зеркал на бесплатных хостах может принести положительные плоды в посещаемость вашего сайта. Например, если вы разместите зеркало на всем известном NAROD.RU, то оно в течении суток будет проиндексированно Яндексом. C учётом того, что через него проходит около 50% всех поисковых запросов Рунета, ваши шансы на появление в отчёте поисковых запросов существенно возрастают.

Ответ от Vladimir (http://mod-site.net/ru/):
Большого смысла в этом нет, т.к. при подсчете ИЦ сайта учитываются также ИЦ
ссылающихся сайтов, а ИЦ сайтов с доменом третьего уровня (в том числе
сайтов на бесплатных хостингах) считается равным нулю до тех пор, пока этот
сайт не попадет в каталог Яндекса. Чтобы получить из такой схемы какой-то
эффект, необходимо настряпать очень много сайтов. При этом не имеет
значения, сколько ссылок будет идти из настряпанных сайтов, т.к. исходящие
ссылки разделяют между собой "вес" сайта.

Ответ от Islander :
Смысл есть и очень неплохой. Лично я знаю одного "монстра", который
таким образом смог добиться невиданной посещаемости. Ну и еще можно
немножко подзаработать на кликах... В общем, фича с зеркалами, на
основной ваш сайт - неплохая. Если владеете временем или же есть
команда для поддержания сайтов, то не тяните и делайте.

Новый вопрос № 27

С сайтами вроде narod.ru, прекрасно научился обращатся. Удачно раскручивать (последний проект 2700 посетителей)Но вырос (наверное) нужно ДОМИНА своя (домен). Для хорошего проекта зарегистрировать нужно свой домен (имя.ru). Простите за чайнечиство, но я до сих пор не знаю как етот ДОМЕН зарегистрировать. Заходил на Хостер компанию (посмотрел хостинг) там есть форма для проверки домена.
Так вот при проверки домена он оказался свободным, заполнил все формы на сайте хостера и что ДАЛЬШЕ (говорит что домен как вроде уже твой). Ведь домен нужно регить по паспортным данным, далее договора должны быть, вроде так. Как мне
разобраться в этом новом деле? Да еще какие-то настройки где-то там у Большого Нема сделать надо.

Объясните пожалуйста пошагово (попонятней), что и как? (читал статьи, и ни чего толком не понял, только округленно). Про зону .ru, домен второго уровня.Благодарен Вам за Ваш содержательный ответ заблаговременно!
Ответить

Хочу задать вопрос!




Обьявление 1.
Хочу обменяться ссылками с сайтами, тематика которых футбол или спорт.
Желательно с сайтами, находящихся на платных хостингах, или можно
бесплатных, но с хорошим числом посещений в день.
Мой адрес - "Футбол в России и за рубежом" - http://interfootball.net.ru

Обьявление 2.
Портал "Всё о ЖЕЛЕЗНОМ мире" - http://www.ironworld.n9.ru
Обменяюсь ссылками с сайтами, схожими по тематике (бодибилдинг, пауэрлифтинг, фитнес и т.п.).
Предложения по адресу - admin@ironworld.n9.ru?subject=exchange
Формат обмена - Кнопка 88x31 + описание в разделе "Каталог ссылок".

Прислать свое обьявление


Последние темы форума:

Форум Тема Ответов Просмотров Последнее сообщение
Web-строительство Про формы 2 5 15/08/2004 16:07 Graff
Обсуждение сайтов Tynu40k Graff'a 3 6 15/08/2004 15:58 Graff
Флейм Давайте пофантазируем 0 2 15/08/2004 14:04 J_curious
Мастерская по ремонту и изготовлению сайтов Фрейм и ссылки 4 18 15/08/2004 5:21 Graff
Флейм Might and Magic 9 ( Игра) 0 6 14/08/2004 21:51 dzudi
Замечания Ваши предложения? 18 442 14/08/2004 21:04 J_curious
Обсуждение сайтов Компьюерные новости 16 46 14/08/2004 17:33 ner0x
Раскрутка Короче про сам раздел - раскрутка 17 36 13/08/2004 23:20 Jurgan
Мастерская по ремонту и изготовлению сайтов Помогите улучшить сайт 70 187 13/08/2004 15:14 Versus
Флейм Перенимайте опыт... 3 23 13/08/2004 8:12 Yuma
   

На сегодня это все, встретимся в следующем выпуске рассылки! Удачи!
Самую свежую информацию всегда можно найти на нашем сайте - Webstudent.net.ru
Архив рассылки доступен по адресу:
http://subscribe.ru/archive/inet.webbuild.webstudent

P.S И не забывайте - мы учимся вместе!

C уважением, Поликарпов Роман


В начало выпуска


© 2003, Поликарпов Роман aka Crystall
По всем вопросам пишите на crystall@webstudent.net.ru

Все материалы данной рассылки охраняются законом об авторском праве!
Вы можете свободно использовать и распространять материалы, подписанные именем Поликарпова Романа, с указанием автора и активной ссылки на сайт (http://webstudent.net.ru/). Желательно уведомить меня по e-mail :)

Главная Статьи Форум Каталог программ Ссылки О сайте

http://subscribe.ru/
http://subscribe.ru/feedback/
Адрес подписки
Отписаться

В избранное