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

Веб-дизайн. От А до Я.

  Все выпуски  

Веб-дизайн. От А до Я. # 5 (31) Dweb.ru


Служба Рассылок Subscribe.Ru

Веб - Дизайн. От А до Я.
# 5 (31)
14 марта 2002г.
Проект сайта "AGS Design" Dweb.ru & DwebHost.ru
кол-во подписчиков - 9400

    В этом выпуске:

  • Дом для сайта
  • Появляющаяся строка
  • Изображения ismap
  • Неизвестное о формах
  • Раскрутка сайтов
  • ICQ - Клуб
  • Клуб друзей.
  •   Ссылки Вебмастеру:

  • Иконки и кнопки
  • Flash и Photoshop
  • Баннеры & Фото
  • Обменный Пункт
  • Получить аттестат
  • Анимация и графика
  • Скрипты (CGI,JS,Applet)
  • Фоны
  • Форум
  • Хостинг
  • Web-дизайн
  • 3D анимация
  • Обменные сети
  • Студия web-дизайна

  • Доброе время суток!


    Dweb-SHOP. On-Line Магазин


    DwebSHOP - Он-Ланй магазин с моментальной доставкой купленного товара (Интернет-карты, мобильные карты, скрипты, развлечения, раскрутка, баннерные показы...).
    Приглашаем к сотрудничеству продавцов. Подробнее на сайте.



    Форум на Dweb.RU. Ответы на ВСЕ Ваши вопросы.

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

  • Классные скрипты
  • Про SSI
  • Супер спецам HTML
  • Внешние таблицы стилей.
  • Просьба хороших веб-мастеров помочь...
  • blur в Photoshop-e
  • Помогите разобраться с программой WEFT
  • Операции с рисунками
  • У кого есть своя рассылка
  • Как увеличить кол-во подписчиков
  • Как повысить ревалентность...
  • Буржуйские баннерные сети
  • Какие банерообменные выбрать?
  • Раскрутка сайтов
  • Windows XP
  • Про клавиатуру для двух рук
  • Мета-тег с указанием кодировки
  • Выбор Платного хостинга
  • Выбор Бесплатного Хостинга
  • Разбор сайтов



    Дом для сайта


    При выборе платного хостера будьте осторожны, т.к. среди огромной массы платных хостеров попадаются и такие, которые предоставляют не очень или совсем НЕ качественные услуги. Мы советуем Вам выбрать для своего сайта или сайта Компании хостинг от 'ЗАО Веб Хостинг' (DwebHost.RU) Почему именно этого хостера?

    Потому-что они предлагают Вам самые качественные, профессиональные и недорогие услуги с максимальными скидками, подарками и бесплатными услугами за цену - от $7.61 / 200 Мб.

    Став клиентом DwebHost.RU, Вы будете спать спокойно и не переживать за сохранность и работоспособность Вашего домена/сайта. При этом служба поддержки работает круглосуточно, 365 дней в году. Служба поддержки оперативно и подробно ответит, а также проконсультирует по ЛЮБОМУ Вашему вопросу.

    Что предлагает DwebHost.RU:
    * минимальный тарифный план включает в себя 200Мб.
    * размещение на 1 аккаунте до 6 доменов 2 уровня, совершенно бесплатно.
    * неограниченный трафик во всех тарифных планах * создание субдоменов * web-интерфейс почты, автоответчики, переадресация почты, SMTP/POP сервер * web панель управления * быстрая смена паролей * ежедневная архивация данных сайта * PERL 5 C++ PHP 3/4 MySQL * CGI-BIN SSI * доступ к LOG-файлам, статистика * свои .htaccess, .htpasswd * страницы ошибок (400-404,500) * автоперекодировка кириллицы * предустановленные скрипты * crontab * поддержка WAP * управление DNS * бесплатные показы * регистрация Вашего сайта в самых популярных и эффективных каталогах и поисковых машинах * cовместно с Дизайн-студией "Design Art studio" предаставят Вам бесплатную консультативную помощь. Подскажут Вам как лучше разукрасить Ваш собственный сайт, как лучше изменить дизайн. Помогут и с идеей создания эмблемы сайта, подберут наиболее подходящую, цветовую гамму для Вашего сайта, посоветуют структуру страниц сайта.
    И многое другое... включая массу скидок и подарков!

    Оплатить наши услуги можно в любой точке Мира (WebMoney, Банковский перевод). Доступ к серверу открывается сразу же после оплаты.

    Выбирая DwebHost.ru, Вы делаете правильный выбор! Мы обслуживаем более 9000 сайтов. Они доверили их DwebHost.ru и не разочаровались в этом!
    Мы регистрируем домены в зонах .ru .biz .info .com и др. Перенос доменов с других хостингов (при переносе предоставляется от 1 до 4 мес. Бесплатного хостинга).

    Сайт здесь, а все вопросы по хостингу, переносе доменов, консультации задавайте сюда.



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


    Неизвестное о формах

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

    Отчасти прогресс в области самообразования сдерживался браузером Netscape 4. Кодеры смотрели на таблицу поддержки языка HTML браузером Netscape 4, сравнивали ее со спецификацией HTML 4.0, удрученно качали головами и откладывали вопрос изучения необычных свойств форм в долгий темный ящик своего новенького (или старенького) компьютерного стола. Но сейчас-то можно смело отпускать педаль газа, потому что браузер Netscape 4 мирно скончался. Нет, он конечно предпринимает попытки хоть на один лишний час удержаться в чартах, но решительные веб-разработчики уже не в силах терпеть его узких рамок и потрясающей нестабильности. Они устали от постоянных и в большинстве своем тщетных попыток искать окружные пути, чтобы старичок Netscape 4 не вешался при обработке сложной таблицы стилей. Короче, окончательные похороны уже не за горами, так что можно отбросить формальности и наконец-то заглянуть в спецификацию HTML 4.0, которую достаточно хорошо поддерживают браузеры MSIE 5+, Netscape 6 и Opera 5+. Откроем ее на разделе "Формы" и внимательно изучим, что там такого незнакомого и полезного. А вот и первые элементы!

    FIELDSET

    Этот элемент позволяет группировать элементы форм. Данная группировка помогает пользователям проще ориентироваться в формах, то есть ему сразу становится понятно, что вот все эти элементы относятся именно к этой форме. Поддерживается браузерами MSIE 4+, Netscape 6, Opera 5+. Кроме того, можно эту группу еще и обозвать. Для этого используется элемент

    LEGEND

    Имеет атрибут align, который теоретически позволяет размещать название не только сверху, но он не работает ни в одном браузере. Вообще элемент LEGEND не поддерживается браузером Opera 5+. Самое прекрасное, что на элемент FIEDLSER можно писать стили, то есть вы можете сделать рамку любого цвета и так далее. Надо сказать, что элемент LEGEND помечен в спецификации HTML 4 как нежелательный, однако это достаточно странно. А вот добрались и до примера. Ниже приведена форма, которая заключена в элемента FIELDSET и имеет название.
    <form>
    <fieldset>
    <legend>Ваш комментарий</legend>
    <p>Вы можете разместить на сайте ваш комментарий, касающийся данной статьи</p>
    <table>
    <tr><td>Имя:</td><td><input size=12></td></tr>
    <tr><td>E-mail:</td><td><input size=12></td></tr>
    <tr><td>Страна:</td><td><select>
    <option selected>Беларусь
    </select></td></tr>
    <tr><td colspan=2>Комментарий:<BR><textarea rows=4 cols=16>Nine</textarea></td></tr>
    <tr><td colspan=2><input type="submit" value="отправить"></td></tr>
    </table>
    </fieldset>
    </form>
    Ваш комментарий

    Вы можете разместить на сайте ваш комментарий, касающийся данной статьи
    Имя:
    E-mail:
    Страна:
    Комментарий:

    Как видите, форма заключена в достаточно оригинальную рамку с названием, которую невозможно сделать средствами CSS без использования элементов FIELDSET и LEGEND.

    А сейчас рассмотрим элемент, который вам уже должен быть знаком.

    BUTTON

    Данный элемент значительно расширяет функциональные возможности кнопок. Имеет атрибут TYPE, который может принимать значения submit, reset и button. Первый два значения и так ясно для чего, а вот третье предназначено для тех случаев, когда надо исполнять какой-нибудь скрипт. То есть на кнопку вешается событие Onclick и вызывается нужная функция. Данный элемент не поддерживается браузером Operа 5+.

    Самое интересное, что внутри элемента BUTTON можно с успехом размещать другие элементы языке HTML, так что можно сделать кнопку с текстом и рисунком. Вот так:

    <BUTTON TYPE="button"> Кнопочка <IMG SRC=./img/news.gif WIDTH=30 HEIGHT=30 BORDER=0 ALT="кнопочка не функционирует"> </BUTTON>



    Можно вместо рисунка запихать вовнутрь что вашей душе угодно, хоть таблицу, если вам это необходимо.
    <BUTTON TYPE="button">
     <TABLE BORDER=1>
      <TR><TD>1</TD>
       <TD>2</TD>
      </TR>
      <TR><TD>3</TD>
       <TD>4</TD>
      </TR>
     </TABLE>
    </BUTTON>


    А еще есть достаточно полезный элемент

    OPTGROUP

    Который позволяет группировать пункты в элементе SELECT. В этом случае добавляются отступы, так что пользователям при выборе необходимого пункта ориентироваться гораздо проще, и названия каждой группы. Название задается в атрибуте LABEL элемента OPTGROUP. Кстати, этот элемент браузером Opera 5+ опять же не поддерживается, так что можно с полной уверенностью сказать, что по реализации поддержки форм Opera является худшим браузером. Вот пример использования группировки:
    <form>
    <p>Справочники:</p>
     <select name="ask">
     <optgroup label="HTML">
      <option label="3.2">HTML 3.2
      <option label="4.0">HTML 4.0
     </optgroup>
     <optgroup label="CSS">
      <option label="1">CSS-1
      <option label="1">CSS-2
      <option label="3">CSS-3
     </optgroup>
      <option value="js">JavaScript
      <option value="dhtml">DHTML
     </select></p>
    </form>
    А вот так будет выглядеть такой выпадающий список в браузере:

    Справочники:


    Итак, кое-что полезное о формах вы, надеюсь, узнали. Плохо то, что браузер Opera 5+ не поддерживает большинство из упомянутых здесь элементов, так что они всей неземной красоты оценить не смогут. Но это исключительно их проблемы.

    Источник: http://www.web-anatomy.f2s.com/



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


    Изображения ismap

    Я познакомлю вас с изображениями ismap, потому что они дают возможность внести приятное разнообразие в ваш сайт. Изображения ismap поддерживаются графическими броузерами и, естественно, имеют право на жизнь, хотя с приходом новых веяний в HTML (особенно Java-апплетов) этот способ стал настоящей редкостью. Конечно, в 80% случаев можно найти этому варианту более быструю замену, но все же иногда именно ismap окажется предпочтительнее всего.
    Что же такое ismap -изображение? Внешне, с точки зрения пользователя, ismap - это простенький рисунок со ссылкой. Но в отличие от простого рисунка-ссылки (при щелчке на котором просто происходит переход по заданному URL), при щелчке на ismap-изображении на сервер передаются координаты щелчка и, соответственно, имеется возможность в зависимости от них произвести то или иное действие.
    Синтаксис ismap-изображений очень простой, он почти не отличается от того, как оформляется рисунок для якоря гиперссылки:

    <A href="cgi-bin/somescript.cgi">
    <IMG src="somepic.gif" border=0 ismap >
    </A>

    Заметьте, что все отличие заключается лишь в том, что в теге <IMG> добавлен атрибут ismap. Он говорит броузеру, что, когда пользователь щелкнет на картинке, нужно не просто перейти к URL, указанному в <A href="URL">, а еще и добавить к этому URL координаты той точки, на которой пользователь произвел щелчок. В нашем примере, если пользователь щелкнет в точке (x = 10, y = 15), то броузер перейдет на следующий URL:

    >http://www.somehost.ru/cgi-bin/somescript.cgi?10,15

    Как видите, броузер просто прибавил к указанному URL параметры в формате x, y. С точки зрения скрипта это означает, что координаты попадают в переменную QUERY_STRING. Как их оттуда извлечь? Нет ничего проще:

    ($x,$y)=split(/,/,$ENV{'QUERY_STRING'});

    Вот скрипт, который просто показывает координаты точки щелчка:

    #!/usr/bin/perl
    #ismap_xy.cgi
    ($x,$y)=split(/,/,$ENV{'QUERY_STRING'});
    print "Content-Type: text/html\n\n";
    print "<HTML>";
    print "<HEAD>";
    print "<TITLE>Ismap X Y</TITLE>";
    print "</HEAD>";
    print "<BODY>";
    print "<H1>Вы щелкнули рисунок в точке: x=$x, y=$y</H1>";
    print "</BODY></HTML>";

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

    Сам переход по нужному URL реализуется очень легко. Вспомните урок 3 про заголовки запросов и ответов. Если скрипт выдаст нужный URL в поле Location: заголовка ответа CGI, то броузер произведет переход по этому URL.
    Следующий пример покажет это. Заготовьте файл urlmap.txt, в котором будет информация, представленная в виде строк в таком формате:

    minx miny maxx maxy URL

    Здесь значения minx, miny, maxx и maxy задают участок рисунка, а следующее за ними поле указывает URL, которому этот участок соответствует. Вот пример такого файла:

    1 1 20 50 http://www.uic.nnov.ru/~paaa/index_p.html
    1 50 20 100 http://www.uic.nnov.ru/~paaa/projects.html
    ;20 1 100 100 http://www.uic.nnov.ru/~paaa/cgi-bin/guestbook.cgi

    Теперь где-нибудь на своей Web-странице разместите такой HTML-код:

    <A href="cgi-bin/testismap.cgi"><IMG src="gifs/doom2.jpg"
    border=0 ismap></A>
    Наконец, сам скрипт testismap.cgi будет иметь вот такой несложный вид:

    #!/usr/bin/perl
    #testismap.cgi
    ###########
    #URL по умолчанию, переходим к нему, если щелчок выполнен
    #на участке, которому не сопоставлен URL
    $default_url="http://www.uic.nnov.ru/~paaa/";
    #файл с информацией об URL
    $url_map_file="urlmap.txt";
    ############
    ($x,$y)=split(/,/,$ENV{'QUERY_STRING'});
    open(F,"$url_map_file")|| print "Location: $default_url\n\n";
    $url=$default_url;
    foreach(){
    chomp;
    ($minx,$miny,$maxx,$maxy,$URL)=split(/\s+/);
    if(($x>=$minx)&&($x<$maxx)&&
         ($y>=$miny)&&($x<$maxy)){$url=$URL;}
    }
    close(F);
    print "Location: $url\n\n";

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

    В общем, данное средство, несмотря на свою простоту, действительно мощное. Теперь вы сможете при необходимости применять его. Помните, такую вещь трудно реализовать другими методами.

    Сергей Гуйдя, irinag@mail.primorye.ru
    http://www.brima.aiq.ru/

    Использованы материалы из книги: "CGI-программирование: учебный курс".



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


    Появляющаяся строка

    Мне кажется, что данный скрипт хорошо привлекает внимание и очень оригинально смотрится. Этот скрипт прост в установке и в использовании.

    <script language=JavaScript1.2>
    
    var delay=3500
    var fcontent=new Array()
    begintag='<font face="Arial" size=2>'
    fcontent[0]="Здесь помещается текст, который вы хотите показывать "
    fcontent[1]="Этот текст будет периодически меняться..."
    fcontent[2]="Таких строк может быть сколько угодно."
    fcontent[3]="Не забывайте заходить на сайт WWW.WEB.SANATORY.NET"
    closetag='</font>'
    
    var fwidth=200
    var fheight=150
    
    var ie4=document.all&&!document.getElementById
    var ns4=document.layers
    var DOM2=document.getElementById
    var faderdelay=0
    var index=0
    
    if (DOM2)
    faderdelay=2000
    
    function changecontent(){
    if (index>=fcontent.length)
    index=0
    if (DOM2){
    document.getElementById("fscroller").style.color="rgb(255,255,255)"
    document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
    colorfade()
    }
    else if (ie4)
    document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag
    else if (ns4){
    document.fscrollerns.document.fscrollerns_sub.document.write(begintag+fcontent[index]+closetag)
    document.fscrollerns.document.fscrollerns_sub.document.close()
    }
    index++
    setTimeout("changecontent()",delay+faderdelay)
    }
    frame=20;
    hex=255
    function colorfade() {
    
    if(frame>0) {
    hex-=12;
    document.getElementById("fscroller").style.color="rgb("+hex+","+hex+","+hex+")";
    frame--;
    setTimeout("colorfade()",20);
    }
    else{
    document.getElementById("fscroller").style.color="rgb(0,0,0)";
    frame=20;
    hex=255
    }
    }
    
    if (ie4||DOM2)
    document.write('<div id="fscroller" style="border:0px solid black;width:'
                           +fwidth+';height:'+fheight+';padding:2px"></div>')
    
    window.onload=changecontent
    </script>
    Для того, чтобы увидеть этот эффект, вставьте этот код между тэгами и . Если вы хоть не много разбираетесь в HTML и Javascript, то вы все поймете: как что работает. Но все же немного поясню. Ширина и высота той области, где будет виден текст задается параметрами: var fwidth=160 var fheight=150 Задержка появления текста задается параметром: faderdelay=2000 Гулидов Сергей Интернет журнал "Веб-дизайн для всех"


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


    Раскрутка

    Лучшие сайты ТЕКСТОВОЙ обменной сети TBE (Tranzit Banner Exchange) - комиссия всего 7(!)%

  • Обои для рабочего стола
  • Интернет-магазин
  • Уникальные отечественные препараты
  • Хакинг и Дизайн
  • DesignWeb.by.ru - Статьи, скрипты, обучение, бесплатный дизайн, раскрутка, графика ...
  • Сайт о реальном заработке. Подробный рассказ о наиболее популярных интернет спонсорах.

    Приглашаем зарегистрироваться в нашей обменной сети.
    ВСЕМ новичкам начисляются Бесплатные показы - 30 тыс.



    Полезная Информация.


    Обменный пункт WebMoney
    Для Казахстанцев. Аттестованный обменный пункт WebMoney. Покупка/продажа титульных знаков WebMoney за Казахстанские Тенге, по самому выгодному для Вас курсу.
    Выдача аттестатов доверия (в течении нескольких часов). Подробнее на нашем сайте.


    Студия web-дизайна DIZ
    Студия web-дизайна DIZ предлагает разработку сайтов с эксклюзивным дизайном, разработку интернет-магазинов, баз данных, автоматизированных каталогов и многое другое.
    Мы предлагаем полный цикл создания web-сайта, начиная от постановки задачи и предоставления хостинга и кончая раскруткой и поддержкой уже готового проекта. Более подробную информацию вы сможете прочитать на нашем сайте.


    Бесплатные Интерактивные Курсы
    - Обучайтесь через Интернет! Языки, программирование, дизайн (создание суперграфики). Обучение полностью бесплатно!
    Языки (английский, немецкий, французский), Программирование (Assembler, Базы данных, C++, Delphi, Pascal, VB) Дизайн (HTML, PhotoShop, Corel Draw, JavaScripts, CGI)


    Бесплатные диски с играми. Закажи!


      Рекомендуем
    * MPEG 4 VIDEO - Каталог видео в формате DivX: фильмы, клипы, караоке. Продажа. Обмен. Доставка по Москве и Росcии. Доставка по Москве и Росcии.
    * ТВ за неделю - поставка ТВ программ за неделю для печати, ранние сроки, низкие цены, удобная форма оплаты.
    * Бесплатная раскрутка - Впервые в Рунете реализована 3 уровневая система рефералов - 20 процентов с первого уровня...



    Клуб друзей
    * Underground Site - web-дизайн, помощь в освоении HTML, CSS. Советы, статьи, голосования.
    * Обои для - рабочего стола Windows c изображениями девушек - фотомоделей и знаменитостей.
    * Всё что Вам нужно для - дизайна, находится здесь.
    * Сервер Знакомств - найди свою судьбу. Психологические статьи. Увлекательные истории.
    В "Клуб друзей" может попасть любой сайт. Ссылки вращаются по КРУГУ постоянно. Как в рассылке, так и на сайте. Правила.



    ICQ - Клуб

    Адрес Клуба http://dweb.ru/1/icq.htm

    Если у Вас возник вопрос по дизайну, графике, скриптам и т.п. То Вы в любой момент можете его задать на странице Клуба любому консультанту находящегося в on-лайне.

    Для тех, кто может, а главное хочет поделиться своими знаниями, Вы можете вступить в наш Клуб, для этого присылайте # ICQ, Имя, E-mail, Город, и темы по которым возможна консультация.


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

    Авторам

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


    Ведущий рассылки Дмитрий Давыденко


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

    В избранное