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

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

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

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

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

←   Февраль 2001   →
 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
Автор
Дмитрий

Статистика

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

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


Служба Рассылок Subscribe.Ru проекта Citycat.Ru
Веб-дизайн. От А до Я.
# 4
12 февраля 2001г. 		Проект сайта "ADG Scripts" webg.agava.ru
кол-во подписчиков - 2400

          В этом выпуске:
Адреса:
для Ваших вопросов по веб-дизайну
Ответы смотрите в рассылке "Веб-дизайн. Вопросы и ответы". Подписка на сайте http://webg.agava.ru
по вопросам публикации
по другим вопросам и предложениям

                          Давыденко Дмитрий
 
Доброе время суток!

 
Формы

Интерактивные формы позволяют читателям Web-страниц легко общаться с их владельцами. Благодаря простоте использования тага <mailto:> и форм стал возможен двусторонний диалог между владельцами Web-узлов и их читателями. Это открывает для Web-навигаторов увлекательные перспективы и коммерческие возможности. К сожалению, многие старые броузеры не поддерживают таг <mailto:>.

Как сделать так, чтобы ваша форма хорошо смотрелась

Один из способов свести все трудности к минимуму состоит в том, чтобы разместить области ввода и выпадающие меню в левой части страницы, а весь сопроводительный текст - справа. Поскольку ширину областей ввода можно задать с помощыо атрибута SIZЕ=, вы по крайней мере выровняете строки слева, а текст справа будет невыровненным - как в большинстве документов. Такая форма выглядит несколько аккуратнее. Не забудьте оставить промежуток между текстом и областью ввода формы. Другой несколько более сложный способ - разместить элементы формы в ячейки таблицы. Это позволяет разместить сопроводительный текст слева, а области ввода справа. Это показано в примере.

Пример 1.26 

 <HTML>
 <HEAD>
 <TITLE>Коментарии</TITLE>
 </HEAD>
 <BODY>
 <H1>Коментарии</H1>
 <BR>Пожалуйста сообщите нам, что вы думаете о нашем web сайте, компании,
 продукции, или услугах. Если вы сообщите нам свою контактную информацию,
 у нас будет возможность связаться с вами и ответить на ваши вопросы.</p>
 <FORM METHOD="POST" action="mailto: yourname@your.email.address">
 <H3>Контактная информация</H3>
 <TABLE BORDER="0">
 <TR>
 <TD ALIGN="right"><em>Имя</em></td>
 <TD><input type="text" size="35" name="Name"></td>
 </TR>
 <TR>
 <TD ALIGN="right"><em>Тема</em></td>
 <TD><input type="text" size="35" name="Title"></td>
 </TR>
 <TR>
 <TD ALIGN="right"><em>Компания</em></td>
 <TD><input type="text" size="35" name="Company"></td>
 </TR>
 <TR>
 <TD ALIGN ="right"><em>Адрес</em></td>
 <TD><input type="text" size="35" name="Address"></td>
 </TR>
 <TR>
 <TD ALIGN ="right"><em>Телефон</em></td>
 <TD><input type="text" size="35" name="Telephone"></td>
 </TR>
 <TR>
 <TD ALIGN ="right"><em>Факс</em></td>
 <TD><input type="text" size="35" name="FAX"></td>
 </TR>
 <TR>
 <TD ALIGN ="right"><em>E-mail</em></td>
 <TD><input type="text" size="35" name="Email"></td>
 </TR>
 </TABLE>
 <p><input type="submit"value="Послать сообщение">
 <input type="reset" value="Очистить форму"> </p>
 </FORM>
 </BODY>
 </HTML>

Как заставить формы работать

Возможно, это именно тот раздел, которого вы ждете - как сделать так, чтобы формы отсылали на сервер введенные данные. На самом деле заставить форму пересылать данные довольно просто. Главная проблема - понять, куда их пересылать. Формально вы просто пишете в таге <FORM> атрибут АСТION= и задаете ссылку на URL программы, которая может обработать входные данные и сделать с ними что-нибудь полезное.

Andres
www.bigweb.by.ru

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

 

Апплеты.

Собственно и не стоило бы говорить о Java, если бы не возможность использования небольших мобильных программ, которые можно передавать по сети и исполнять на компьютере пользователя. Эти программы в терминологии Java называются апплетами (яблочками). Для встраивания вызовов апплетов в текст НТМL-документа и отведения места для отображаемой апплетом информации в НТМL был введен контейнер АРРLЕТ, который начинается тагом <аррlet> и кончается тагом </аррlet>. В общем виде документ, содержащий ссылки на апплеты будет выглядеть так, как это представлено в примере.

В данном примере после заглавия документа (таг H1) и горизонтальной черты начинается поле апплета шириной 200 пикселей и высотой 100 пикселей. В данное поле загружается аррlet с именем hello (файл hello.class). Текст между тагами начала и конца контейнера аррlet используется для размещения встраиваемых контейнеров и текста, который отображается броузерами, не позволяющими использовать Java.

Пример 1.27 

 <HTML>
 <HEAD>
 <TITLE>Документ со встроенной ссылкой на applet.</TITLE>
 </HEAD>
 <BODY bgcolor=#FFFFFF>
 <CENTER>
 <H1>Документ со встроенным апплетом hello Java</H1>
 <HR>
 <APPLET CODE=hello width=200 height=100>
 Аррlet будет отображаться в этом месте, если Ваш браузер интерпретирует Java
 </APPLET>
 <HR>
 </BODY)
 </HTML>

В результате ссылки на такой документ сначала будет загружен текст документа. За тем будет обнаружен контейнер аррlet, и произойдет загрузка кода апплета. Файл hello.class должен в этом случае находиться там же, где и НТМL-файл, в котором есть на него ссылка. После приема апплета браузер отведет под него место в своей рабочей области и только после этого начнет его исполнение.

В общем случае контейнер АРРЕЕТ имеет следующий вид: 

 <applet
 [codebase = codebase url]
 code = applet.class
 [alt = text]
 [name= applet name]
 width = number of pixels
 height = number of pixels
 [align = alignment]
 [vspace=number of picsels]
 [hspace=number of pixels]
 [<param name=param name value=param value>]
 [HTML text]
 </applet>

Параметр соdebase задает базу для поиска кода апплета, соdе - это имя файла апплета, которое должно иметь расширение сlass, аlt - альтернативный текст - отображается в том случае когда выполнение апплета запрещено, name - имя контейнера аррlet, используется для ссылки на контейнер, widthт - ширина области отображения апплета, height - высота области отображения апплета, аlign - управляет выравниванием области отображения апплета внутри рабочей области браузера, vspase и hspase - указывают на отступ от текста НТМL-документа (вертикальный и горизонтальный, соответственно).

Использование контейнера РАRАМ позволяет передавать параметры внутрь апплета и НТМL-документа. Это аналогично вызову команды с различными аргументами командной строки. Для того, чтобы получить эти параметры внутри апплета, следует использовать метод getParametr ().

Из атрибутов контейнера АРРLЕТ обязательными являются только соdе, width и height Все остальные атрибуты (они заключены в квадратные скобки "[ ]") можно опускать. Большинство систем разработки Java-программ сами генерируют НТМL-документ, точнее его макет, для тестирования Java-апплетов. Так поступают, например, в АDК (Аррlet Development Kit) компании IВМ.

Для получения URL документа, из которого вызван аррlet можно использовать метод getDocumentBase и getCodeBase. Первый определяет базу адреса для документа, в то врeмя как второй определяет базу самого апплета. Применение этих методов необходимо для обращения за данными (текст или графика), которые могут храниться там жe, где и документ аррlet.

Andres
www.bigweb.by.ru
Оглавление/Вверх

 

Рейтинг сайтов по оформлению или TOP DESIGNED.

Вступление

Все помнят домашнее задание? Лучше всех с ним справился Ren (renat@echo.ru) - автор сайта http://referatik.by.ru/. Далее приведена моя с ним переписка:

ПЖ: Так кто повторил?
Ren: Оба.
ПЖ: С кого?
Ren: А это я сказать не могу.

Вот и вся переписка.

1) http://kras.izh.com/

Этот сайт одним из первых был подан на рейтинг. Но мой рэндомный выбор попал на него лишь сейчас. Сей ресурс есть выставка работ российского модельера (чуть не сказал дизайнера) Александра Красноперова. Чтобы подробно не останавливаться на описании ресурса сразу перейдем к дизайну и оформлению. Оформление сделано в сиренево-фиолетовой :) гамме, которая совсем не мешает просмотру сайта. Надо заметить, что бледные цвета - удачный выбор, чтобы угодить зрителю (посетителю, обозревателю, мне). Мне очень понравилась система выбора моделей (и одежды, и женщин), хотя, раз я кликнул на язык русский, то надо было и пояснения делать на русском (как прекрасен русский язык, чтоб он проглотился). [ПЖ]

оформление:

 5

дизайн:

4

оригинальность:

 4

эффективность:

4
скорость: 3
моя оценка: 4
Рейтинг: 24

А вот если бы вы поставили на своей странице наш баннер с ссылкой на http://zoomdesign.euro.ru и отправили бы мне письмо, то вы бы стояли выше.

2) www.krauklitis.lv

Сайт латвийской фирмы "Krauklitis", занимающейся производством и распространением "бумажных товаров" в Балтии. Сайт сделан на трех языках: русский, английский, латвийский. Дизайн хорош тем, что я, не зная латвийского языка, могу догадаться, что Krauklitis это на латвийском ворон (или ворона? или я не прав?). Именно с этой птицей связано все оформление сайта, красиво нарисованны анимашки вороны. Оцените: ворона с письмом, ворона читает книжку. Но, все-таки, я нашел к чему можно придраться. Внимание. Это постоянная ошибка ВСЕХ. Почему в title окна написано "KRAUKLОTIS" вместо "Krauklitis" (или i с палочкой на верху читается как o)? Еще...в одном месте (stripa.htm) они забыли убрать тэг meta name="GENERATOR" content="кое-что 3.0". [ПЖ]

оформление:

 4

дизайн:

4

оригинальность:

 4

эффективность:

4
скорость: 3
моя оценка: 4
Рейтинг: 23

 

Часть вторая. Собственно TOP LIST. И ВНЕ РЕЙТИНГА.

 


ВНЕ РЕЙТИНГА

 

Часть третья. Из будущего.

Оставьте свою ссылку на моей (zoom) гостевой книге. Действительно хороший или плохой дизайн будет обязательно оценен - "станьте примером".

PS "Во многом определяя моду на дизайн, мы делаем то, что до нас никто не делал, меняя лицо русского интернета." Артемий Лебедев.

Петр Жарнов: zoomdesign@euro.ru

http://zoomdesign.euro.ru
Валерий Иванов: ivanovvs@udm.net
Оглавление/Вверх

 

Фреймы

Атрибуты ROW= и СОLS= похожи. Имейте в виду, что для каждой строки и столбца, упомянутых в таге <FRAMESET>, должен быть свой набор тагов <FRАМЕ>.

  •  
  • Атрибут ROW=

    Атрибут ROW= тага < FRAMESET > задает число и размер строк на странице. Количество тагов <FRАМЕ> должно соответствовать указанному числу строк. Справа от знака = можно определить размер каждой строки в пикселях, процентах от высоты экрана или в относительных величинах (обычно это указание занять оставшуюся часть места). Не забывайте пользоваться кавычками и запятыми и оставлять пробелы между значениями атрибутов. Например, следующая запись формирует экран, состоящий из трех строк: высота верхней равна 20 пикселей, средней - 80 пикселей, нижней - 20 пикселей:

    Следующий таг < FRAMESET > создает экран, на котором верхняя строка занимает 10% высоты экрана, средняя - 60%, а нижняя - оставшиеся 30%. 

     <FRAMESET ROW="10%, 60%, 30%->

    Можно поступить элегантнее, задав относительные значения в комбинации с фиксированными, выраженными в процентах или пикселях. Например, следующий таг создает экран, на котором верхняя строка имеет высоту 20 пикселей, средняя - 80 пикселей, а нижняя занимает все оставшееся место: 

     < FRAMESET ROW="20, 80, *" >

    А можно сделать так: 

     < FRAMESET ROW="20, 2*, *" >

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

  • Атрибут СOLS=

    Столбцы задаются так же, как строки. Для них применимы те же атрибуты.

  • Таг <FRАМЕ>

    Таг <FRАМЕ> определяет внешний вид и поведение фрейма. Этот таг не имеет закрывающего тага, поскольку в нем ничего не содержится. Вся суть тага <FRАМЕ> в его атрибутах. Их шесть: NАМЕ=, MARGINWITH=, MARGINHEIGHT=, SCROLLING=, NORESIZE= и SRC=.

  • Атрибут NАМЕ=

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

     <FRАМЕ SRC="my.html" NАМЕ="main">

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

  • Атрибут МАRGINWITH=

    Атрибут МАRGINWITH = действует аналогично атрибуту таблиц CELLPADDING=. Он задает горизонтальный отступ между содержимым кадра и его границами. Наименьшее значение этого атрибута равно 1. Нельзя указать 0. Можно ничего не присваивать - по умолчанию атрибут равен б.

  • Атрибут МАRGINHEIGHT=

    Атрибут МАRGINHEIGHT= действует так же, как и МАRGINWITH =. Он задает поля в верхней и нижней части фрейма.

  • Атрибут SCROLLING=

    Хотите ли вы, чтобы ваши читатели пользовались прокруткой в фрейме? Иногда бывает разумно лишить их этого удовольствия. Возможные варианты: SCROLLING =YES, SCROLLING =NО, SCROLLING =АUТО. SCROLLING =YES означает, что в фрейме всегда будут полосы прокрутки, даже если это не нужно. При задании SCROLLING =NО полос прокрутки не будет, даже если они необходимы. Если документ слишком большой, а вы задали режим без прокрутки, то документ просто будет обрезан. Атрибут SCROLLING =АUТО предоставляет броузеру самому решать, требуются ли полосы прокрутки или нет. Если атрибут SCROLLING= отсутствует, результат будет таким же, как и при задании SCROLLING =АUТО.

  • Атрибут NORESIZE

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

  • Атрибут SRС=

    Атрибут SRС= применяется в таге FRАМЕ при разработке фреймовой структуры для того, чтобы определить, какая страница появится в том или ином кадре. Если вы зададите атрибут SRС= не для всех фреймов, у вас возникнут проблемы. Даже если страницы, отображаемые в фрейме, выбираются в соседнем фрейме, вы должны по крайней мере задать для каждого фрейма начальную страницу. Если вы не укажите начальную страницу и URL, фрейм окажется пустым, а результаты могут быть самыми неожиданными - например, ваш броузер начнет выводить все новые и новые окна просмотра.

  • Атрибут ТАRGЕТ=

    Чтобы разобраться с атрибутом ТАRGЕТ=, давайте вернемся к нашему простому примеру с кадром оглавления. Когда пользователь щелкает мышкой на одной из ссылок в левом фрейме, соответствующая страница должна появиться в правом фрейме, а оглавление остается неизменным. Чтобы этого добиться, нужно определить целевой фрейм ТАRGЕТ, в котором будет отображаться страница для каждого пункта оглавления. Задание целевых фреймов осуществляется в ссылках левого фрейма. Вот зачем всем кадрам в фреймовой структуре были присвоены имена. Правый фрейм называется main, так что нужно в каждой ссылке добавить атрибут ТАRGЕТ="main", в результате чего соответствующая страница появится в фрейме main. Обратите внимание: каждая ссылка содержит атрибут ТАRGЕТ="main", который в ответ на щелчок мышью отображает страницу в фрейме main.

    Атрибут ТАRGЕТ= можно задавать для нескольких различных тагов. При использовании в таге <ВАSЕ> он направляет все ссылки в определенный целевой фрейм, если в дальнейшем особо не оговорено другое. Можно задать атрибут ТАRGЕТ= в таге <АRЕА> в активном изображении или в таге <FОRМ>. Фреймы полезны для организации форм. Пользователи будут видеть одновременно и форму, и результат своего выбора. Обычно при щелчке мышью кнопки Submit форма исчезает и возникает страница с результатами выбора. Сочетание форм и фреймов может оказаться удобным средством навигации.

    • "Волшебные" целевые фреймы

    <Волшебные> целевые фреймы предназначены исключительно для особых случаев. Прежде чем вы решитесь их применить, дважды подумайте: они способны усложнить жизнь некоторым пользователям.

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

    Фрейм "blank"

    Если атрибут ТАRGЕТ= ссылается на " blank", то документ всегда будет появляться в новом пустом окне.

    Фрейм "self"

    Имя "self" указывает на то, что выбранная страница загружается в тот же фрейм, где была активирована ссылка. Если вы щелкнете мышкой на ссылке в фрейме оглавления, выбранная страница окажется в том же самом фрейме. Если вы задали фрейм для всего документа в атрибуте ВАSЕ=, то "self" помогает нейтрализовать ссылку в ВАSЕ=.

    Фрейм "раrent"

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

    Фрейм "top"

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

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

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

    В основном вложенные фреймы действуют так же, как вложенные таблицы. Задайте кадровую структуру, а внутри какого-нибудь фрейма в ней еще одну структуру. Помните, что таг <FRАМЕ> не имеет закрывающего тага. Вы, наверное, заметили, что при работе с фреймами не используются таги <СОLSРАN> и <ROWSРАN>. Их роль играют множественные, или вложенные, фреймы. Задав внутри одной объемлющей фреймовой структуры две независимых подструктуры, можно поместить в левой части экрана столбец из двух, а в правой - из трех фреймов.

    Andres
    www.bigweb.by.ru

    		Оглавление/Вверх
      Вы хотите публиковаться?
      Присылайте статьи или вопрос (по публикации) по адресу kar_dd@inbox.ru с пометкой "Статьи в рассылку". Гонорар за статьи - договорной (500-2000 показов RLE).

    Я жду Вас на сайте моего проекта http://webg.agava.ru
    Здесь Вы можете найти:

    Дмитрий Давыденко
    http://subscribe.ru/
    E-mail: ask@subscribe.ru
    Поиск
    В избранное