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

WEB-Дизайн, азы.

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Компьютерная графика и дизайн: истории из жизни." на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2003   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Дмитрий

Статистика

137 подписчиков
0 за неделю
←   Все выпуски   →

WEB-Дизайн, азы. # 2 (121) Dweb.ru


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

Веб-Дизайн, Азы
# 2 (121)
21 января 2003г.
Проект сайта "AGS Design" Dweb.ru
   GoldHost.ru    Jobus.ru    Jlove.ru    GoldHosting.ru
кол-во подписчиков - 22350

    В этом выпуске:
  • Создание баннера в Swish 2.0.
  • Наши пректы.
  • 3Ds MAX. Создание материала огня.
  • Палитра инструментов Adobe Photoshop 6.
  • Копилка Вебмастера-9.

    •   Ссылки Вебмастеру:
  • Иконки и кнопки
  • Flash и Photoshop
  • Баннеры & Фото
  • Работа на JobUs.ru
  • Анимация и графика
  • Скрипты (CGI,JS,Applet)
  • Фоны
  • Web-дизайн
  • Знакомства
  • Обменные сети
  • Gold Хостинг
  • Best Хостинг
    • Доброе время суток!

    Форум на Dweb.RU. Ответы на ВСЕ Ваши вопросы. У Вас есть вопрос, тогда задайте его, Вам подробно ответят, подскажут, помогут наши специалисты

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

  • Как заскриптовать меню
  • Инициировать нажатие кнопки формы.
  • png и HTML
  • Flash vs. Gif Animator'ы
  • Работаем с CrelDraw11
  • То ли я тупой,то ли.....
  • Java Script
  • Adult хостинг
  • Почтовые рассылки
  • Зона ламера
  • Анекдот


    Что такое Java Sript или ваш первый скрипт.

    Добрый день или добрый вечер. Я рад, что вы нашли время, чтобы приступить к изучению JavaScript(JS). С начала я расскажу, для кого эти уроки предназначены:

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

    Так же эти уроки предназначены для тех, кто уже разбирается в JS, но что-то новое они могут найти для себя чуть-чуть попозже, через 3-5 глав.

    Хватит лирических отступлений, давайте начнем. Что такое JavaScript или попросту JS - это язык программирования. Еще точнее это интерпретируемый язык, то есть компьютер распознает скрипт ( что такое скрипт я расскажу немножко попозже) построчно, а только потом, если скрипт сделан правильно, он срабатывает. JS скрипт выполняется на стороне клиента, то есть в вашем, или чьем-либо другом, браузере.

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

    Идем дальше, скрипт (программа, сценарий как вам угодно =) ) может располагаться в четырех местах:

    • В теле документа. То есть внутри тэгов <body></body>. Если скрипт расположен здесь, то он будет выполняться при загрузке страницы в браузере.
    • В заголовке. Внутри тэгов <head></head>. В основном здесь располагаются функции скриптов, о них в следующей главе, они не выполняется при загрузке, а только используются другими скриптами, вот такая вот непонятность???
    • В самих тэгах HTML. Или как эти скрипты еще называются - обработчиками событий.
    • В отдельном файле. JS, как и многие другие языки, позволят сохранять свои скрипты в отдельных файлах с расширением .js
    Итак, мои дорогие (как говорит одна не безызвестная телеведущая) настала пора написать первый скрипт на JavaScript. Для этого нам нужно:

    Создать папку "Уроки по JS" (если хотите),

    js1.jpg[18 кб]

    нажать на правую кнопку мыши---> создать--->текстовый документ.
    Что делаем дальше в самом Текстовом документе:
    Файл----> Сохранить как ------> мойпервыйскрипт.html------->Сохранить
    Теперь у вас в папке должно находиться два файла "Текстовый документ" и "мойпервыйскрипт".

    js2.jpg[22 кб] Заходим в "мойпервыйскрипт", кстати файл "текстовый документ" можно удалить, если вам жалко места =), но лучше оставить т.к он вам потребуется для создания следующих страничек. Продолжим, в "мойпервыйскрипт" щелкаем правой кнопкой мыши и выбираем "Просмотр HTML-кода" открывается текстовый редактор теперь пишем:

    ВНИМАНИЕ НЕ ПИШИТЕ 1#,2# ЭТО Я СДЕЛАЛ СПЕЦИАЛЬНО, ЧТОБЫ ВАМ БЫЛО ЛЕГЧЕ ПОНЯТЬ ПРИ РАЗБОРЕ СКРИПТА ГДЕ КАКАЯ СТРОЧКА!!!

    1#<HTML>
    2#<HEAD>
    3#<TITLE>Мой первый скрипт</TITLE>
    4#</HEAD>
    5#<BODY>
    6#<SCRIPT LANGUAGE=JavaScript>
    7#document.write("Ура я создал свой первый скрипт");
    8#</SCRIPT>
    9#</BODY>
    10#</HTML>
    Для того чтобы, вы увидели результат, нажмем сохранить в текстовом документе, а в самом браузере нажмем кнопку обновить, ву а ля вот она наша строчка. Не забывайте, после каждого внесенного вами изменение в скрипт сохранять его, а потом нажимать кнопку обновить.

    Давайте разберемся с этим скриптом, надеюсь, вы не написали 1#...., итак в строчке 1-5, для тех кто знает HTML ничего непонятного нет, а вот в строчке 6 появляется такой тэг как <SCRIPT>. Теперь при написании скрипта вы все время будете его использовать, т.к он обуславливает начало скрипта. Вы спросите, а что это такое Language=JavaScript - это показывает какой язык скриптирования =) вы будите использовать, в данном случае JavaScript
    В 7 строчки мы видим нечто называемое document - это ваша страничка в браузере, после точки мы пишем действие, которое должно произойти то есть write от англ. писать. Из этого получается, что на вашей страничке должен написаться текст "Ура я создал свой первый скрипт".

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

    Теперь обратим внимание на точку с запятой после закрытие скобки. Она, точка с запятой, дает понятие JS, что кончилась строка кода. Вообще, надо сказать, что JS и без точки с запятой поймет, что это конец строчки, но ставить точку с запятой в конце строчки считается хорошем стилем программирования.
    В 8 строчки мы закрываем тэг script
    В 9-10 ничего необычного мы уже не видим.
    Перейдем к такому понятию как переменная, запомните, переменная - это что-то вроде контейнера, который хранит в себе определенную информацию. Каждая переменная имеет свое уникально имя допустим X или Y
    • Переменные могут содержать все буквы алфавита, цифры, подчеркивание…
    • Переменная должна начинаться или с подчеркивания или с буквы, но не с цифры!!!
    • Переменный чувствительны к регистру, переменная Vana отличается от переменной vana.
    • Переменная может быть сколь угодно большая, но она должна располагаться в одной строке программы.
    Теперь зная все эти правила приведу вам примеры переменных:
    Privet_kak_dela_vana
    Total
    X
    _98

    Еще два понятия связанных с переменной, глобальные и локальные.

    Глобальные переменные - используются во всем скрипте (и других скриптах одного и того же HTML документа)
    Локальные переменные - они применяются только в той функции, в которой были созданы, но, как я уже говорил, о функциях в следующем уроке.

    Понятие глобальная переменная и локальная пригодятся вам в следующих уроках.
    Так же очень часто перед переменными ставят var, это то же считается хорошим стилем программирования =). Но переменные var vana = 25; и vana = 25; ничем не отличаются.

    Воспользовавшись знаниями по переменным, немножко переделаем "мойпервыйскрипт". Сделаем чтобы в нем отображалось текущее время.
    1#<HTML>
    2#<HEAD>
    3#<TITLE>Мой первый скрипт</TITLE>
    4#</HEAD>
    5#<BODY>
    6#<SCRIPT LANGUAGE=JavaScript>
    7#var now = new Date();
    8# var hours = now.getHours();
    9#var minutes = now.getMinutes();
    10#var seconds = now.getSeconds();
    11#var moi_pervi_script = "Ура я создал свой первый скрипт";
    12#document.write("Время:" + hours +" "+ minutes + " " + seconds +"<BR>" +moi_pervi_script);
    13#</SCRIPT>
    14#</BODY>
    15#</HTML>

    А теперь проанализируем получившееся:
    В строчке 1-5 все понятно.
    В 6 строчке мы начинаем наш скрипт.
    В 7 строчке мы создаем переменную now и присваиваем ей текущую дату. Как мы видим, здесь появляется такая функция как Data(); В следующем она нам понадобится для создания дат…
    В 8 строчке создаем переменную hours и присваиваем ей текущий час. Обратите внимание на синтаксис. Для присвоения переменной hours часа мы используем переменную now и дальше пишем такую функцию как getHours(); думаю вы догадались как переводиться эта функция??? Она возвращает нам значение текущего часа.
    В 9 строчке создаем переменную minutes и присваиваем значение текущей минуты. Повторяется история с переменной hours.
    В 10 строчке создаем переменную seconds и присваиваем ей значение текущей секунды.
    В 11 строчке создаем переменную moi_pervi_script и присваиваем ей значение "Ура я создал свой первый скрипт". Обратите внимание, что строка "Ура я создал свой первый скрипт" в кавычках, это дает понять JS, что это просто какая-то строка, а не переменная. Что бы это у вас лучше улеглось в памяти, приведу пример document.write без кавычек.

    <SCRIPT LANGUAGE=JavaScript>
    1# x = "Привет Вася";
    2# y = x;
    document.write(y);
    </SCRIPT>

    Рассмотрим первую строку. Переменной X присваивается значение "Привет Вася", а во 2 - ой строке переменной Y присваивается значение переменной X, а именно "Привет Вася". И переменная Y выводится на экран.

    Но вернемся к основному скрипту. В 12 строке нам встречается уже знакомая функция write(); В этой строке мы видим, что в document.write, что-то написано: какие-то +, вдруг откуда-то взялось Время:??? Объясняю, в этой функции в кавычках мы пишем строку "Время:". Надеюсь, вы поняли почему в кавычках, после этой строки стоит знак + это дает понять JS, что надо эту строку с чем-нибудь объединить. А объединяем мы ее с переменной hours, и опять, я надеюсь, что вам понятно почему БЕЗ кавычек??? Дальше опять стоит знак + теперь он объединяет переменную hours с пробелом. Это сделано для того чтобы часы, минуты и секунды не смешались в одну строчку, например, без пробела было бы так - 131225 - это один час, 12 минут и 25 секунд. И так это у нас продолжается до знака + после переменной seconds. Здесь мы видим тэг, заключенный в кавычки, надо заметить, что все тэги пишутся в кавычках!!! Ну и в самом конце мы прибавляем переменную moi_pervi_script, закрываем скобку, ставим точку с запятой.
    В 13 - 15 строчке ничего непонятного не должно быть.
    Вот и подошел к концу наш первый урок, и я задаю вам домашнее задание. Советую вам его сделать, если вы хотите чему-нибудь научиться. Все выполненные задания присылайте на easds@msn.com туда же можно и ваши вопросы по уроку, ну а кто уже разбирается в JS, и у него возникли вопросы по созданию своего скрипта, просьба вопросы оставлять в форуме.

    Итак, ваше домашнее задание:
    Модернизируйте второй скрипт так, чтобы в нем указывались еще и миллисекунды, используя при это функцию getMilliseconds(); В этом же скрипте разбейте строчку "Ура я создал свой первый скрипт", на две переменные. Но при выводе текста на экран, строка должна быть как одно целое.

    Удачи!!! © EASDS EASDS

    		Оглавление/Вверх


    3Ds MAX

    Создание материала огня.

    "Создаем материал огня."
         Вот, что мы получим:



         Итак, начнём с того, что создадим шар со следующими параметрами:

    Radius: 40
    Segments: 100

        Затем откроем Material Editor клавишей M (Eng). Нажмите на первый материал... Затем нажмите на кнопку Get Material () и выберите в появившемся окне Standart.
         Теперь нам надо сделать середину прозрачной, а край огненного цвета. Для этого, нажимаем на квадратную кнопку рядом с Opacity и выбираем в появившемся окне Fallof. Теперь для того, чтобы видеть правильно ли все идет, активизируйте фон у метериала. нажав кнопку Background на левой панели того же окна - Material Editor. Если прозрачным стал край, то нажмите кнопку Swap Colors/Map. Вот, теперь прозрачным должно быть в середине вот так:

    Ещё можно настроить резкость перехода от краёв к середине. Для этого сверните свиток Falloff Parameters и разверните Mix Curve и сделайте примерно так:


         Теперь поднимитесь на одну ступень вверх и напротив Diffuse и Self-Illumonation выберите оранжевый цвет как тут:


         Затем можете добавить блик...
        Вот и закончили с материалом. Дело осталось за малым... Теперь, чтобы увидеть шар во всей красе, нужно применить к нему модифер Noise c параметрами:

    Seed: 0
    Scale: 8
    Fractal -
    X: 6,0
    Y: 6,0
    Z: 6,0
    Остольное на выбор...

        Для полного эффекта огня, можно применить Video Post < Glow...
    Ну, удачи при рендеринге :)

    Сайфутдинов Нияз
    		Оглавление/Вверх


    Создание баннера в Swish 2.0

    Для начала вам нужна сама программа Swish 2.0. Скачать можно с сайта http://swishzone.ru

    И так, поехали... Задаем размеры холста (468х60): Movie -> Width=468, Height=60.

    Теперь нам необходимо поместить в баннер изображение Сделать это можно следующим образом: Insert -> Image, ищем нужный рисунок и открываем его. Далее, что ни будь пишем на баннере. (Insert -> text) Например, напишем: «Получи бесплатную консультацию...». Это будет на первый frame.

    К тексту можно добавить какой-нибудь эффект. Для этого нажмите Add Effect. И там выбираем нужный нам эффект. Потом на фреймовой прямой, либо растягиваем эффект, либо сужаем.

    Также можно добавит какое-нибудь движение к этому тексту. Для этого жмем два раза на пустом прямоугольнике, на фреймовой прямой и у вас появляется слово move.
    Так же растягиваете или сужаете. А чтобы движение было видно, переместите ваш текст в другое место и увидите, как при проигрывание ролика он будет двигаться.

    Далее создаём новую сцену, просто скопировав старую и только поменяв в новом текст и эффект (чтобы просто добавить новую сцену, нажмите: insert -> Scene).

    Теперь напишем, например: «по веб дизайну...». Ну и закончим наш банер ещё какой-нибудь надписью.

    Так, что ещё можно сделать. Теперь добавим в каждую сцену ссылку на Ваш сайт в правом окошке, где написано URL. Также в свой банер Вы можете добавить кнопку (нажмите insert -> Button).

    Ну, вот и все основные функции этой программы. После того, как Вы создали Ваш банер, просмотрите, что у Вас получилось, нажав кнопку сверху play.
    Если размер Вашего банера (имеется в виду размер в KB), не устраивает, то можно оптимизировать цвета в банере, что уменьшит его размер.

    Для этого нажмите Tools –> Preference –> Color Picker.

    Усе, ваш банер готов к употреблению!!! Легко, не так ли?!!!

    P.S. Так же кроме эффектов можно добавлять ещё и событие (event) и Действие (action). Событие это, например если кто-то нажал на баннер, то с ним произойдёт то-то. А в действие можно указать, чтобы игралась музыка или банер автоматически переходил на какую-то страничку или e-mail.

    Если будут затруднения, обращайтесь. E-Mail: anatoliy@studio-pegas.com
    http://sakh.3v.ru

    		Оглавление/Вверх


    Копилка Вебмастера

    Копилка веб-мастера. Часть 9

    Представляю вниманию читателей очередной выпуск копилки разнообразных интересных и полезных приемов в области веб-дизайна.

    Вывод/сокрытие элементов Иногда постоянное присутствие HTML-формы на веб-странице бывает неоправданным, с другой стороны - трата дополнительного времени на загрузку нового (или перезагрузку старого) документа тоже не является выходом из положения. Другими словами, нужно предоставить пользователю возможность получения быстрого доступа к форме ввода информации, не вынуждая его перезагружать документ. Такой механизм можно реализовать с помощью скрытых слоев Dynamic HTML. Сначала определяем стилевой шаблон для видимого блока информации, назначив ему название класса ON (в разделе HEAD):

    <style type="text/css">
    <!--
    .on { font-weight:bold; }
    -->
    </style>

    В данном случае при отображении видимого текстового блока будет использоваться жирное начертание. После этого в самом начале раздела BODY размещаем тот самый видимый блок:

    <div id="inline">
    <font id="on" class="on" style="cursor:hand;">Убрать/вызвать форму</font>
    </div>

    где:
    div id="inline" - видимый блок с идентификатором;
    font id="on" class="on" - назначение текстовому шаблону класса и идентификатора;
    style="cursor:hand;" - стилевое отображение курсора мыши при наведении на блок вывода/сокрытия формы;
    Далее прописываем код HTML-формы, размещая его в отдельном блоке, и присваиваем ему специальный идентификатор:

    <div id="onForm"><br><form>
    Логин:<br>
    <input type="text" name="login" size="25"><br>
    Пароль:<br>
    <input type="password" name="password" size="25"><br>
    <input type="submit" value="Вход">
    </form></div>

    Сразу после кода формы вписываем небольшой JavaScript-сценарий, отвечающий за вывод/сокрытие формы:

    <script language="JavaScript">
function formOff() {
  var targetId, srcElement, targetElement;
  srcElement = window.event.srcElement;
  if (srcElement.className == "on") {

     targetId = srcElement.id + "Form";
     targetElement = document.all(targetId);
     if (targetElement.style.display == "none") {
        targetElement.style.display = "";
     } else {
        targetElement.style.display = "none";
     }
  }
}
document.onclick = formOff;
</script>
    где:
    function formOff() - функция сокрытия формы;
    var targetId, srcElement, targetElement; - идентификационные переменные;
    document.onclick = formOff; - событие, скрывающее при щелчке на видимом блоке информации форму ввода.

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

    Алексей Петюшкин

    		Оглавление/Вверх
    Авторам

    Вы хотите, чтобы ваши статьи были опубликованы в рассылках 'Веб-Дизайн, азы' и 'Веб-Дизайн. От А до Я'? Если вы считаете, что можете написать о дизайне, скриптам, графике и т.п., если Вам есть что сказать и о чем рассказать, я буду рад сотрудничеству с Вами. Присылайте свои предложения и статьи.
    Давайте вместе делать общее дело! Присылайте свои соображения, мысли, истории... поделитесь своим опытом.
    В качестве гонорара Вы получите несколько строк под Вашей статьёй, для рекламы/описания Вашего сайта.
    Буду рад сотрудничеству.


    Давыденко Дмитрий.     Dweb.ru   GoldHost.ru   Jlove.ru   JobUs.ru   DwebHost.ru

    © 2000-2002 Copyright by Dweb.RU
    Копирование материалов рассылки возможно только в случае явного указания на сайт "Dweb.RU" как на источник информации. При этом обязательно явное указание адреса: http://dweb.ru/

    • http://subscribe.ru/
    E-mail: ask@subscribe.ru     		Отписаться
    Убрать рекламу
    В избранное