Отправляет 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
29
30
31
Автор
Дмитрий

Статистика

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

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


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

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

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

 
Простая страница.

   Запустите Блокнот и напечатаете текст, расположенный ниже. Окройте ваш браузер . Не забываете обновлять вашу страницу, что бы вы могли видеть изменения , которые вносите.
<HTML>
</HTML>
    С помощью этих двух тегов , вы говорите браузеру , что этот файл - HTML файл. Вы говорите: HTML файл начинается здесь (<HTML>), и заканчивается здесь (</HTML>).Эти теги используются толко один раз. До <HTML>и после </HTML> тегов , обычно никакого текста нет
<HTML>
<HEAD>
</HEAD>
</HTML>
Заголовок
    Каждый HTML файл имеет тег HEAD. Он тоже появляются только один раз в вашей странице. Здесь вы распологаете название вашей страницы. Текст между тегами TITLE показывается в самом верху окна вашего браузера. Не используйте другие теги внутри тегов HEAD. Есть теги , которые вы можете использовать внутри тегов HEAD, но эта информация выходит за рамки данного учебника.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
Название
    Убедитесь, что ваша странца имеет ясное название. Когда кто-то посетит вашу страницу и сделает закладку на нее, единственное, что будет видно в закладке так, это заглавие. Заглавие также важно для поисковых машин. Оно должно содержать только простой текст. Здесь нельзя использовать другие теги. Заглавие всегда расположено внутри тега HEAD .
<HTML>
<HEAD>
<TITLE>простое название</TITLE>
</HEAD>
</HTML>
Тело
    Каждый HTML файл имеет тело, обозначенное тегом BODY. Внутри этого тега распологается содержание вашей страницы, то что будет видно в браузере. Тег BODY используется тоже один раз. Тег<BODY> распологается сразу после тега </HEAD > ; Тег</BODY> распологается последним перед тегом </HTML>
<HTML>
<HEAD>
<TITLE>простое название</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Файлы
    Теперь вы можете сохранить вашу страницу. Сохраните ее как page.html. На некоторых компьютерах нельзя сохранять файлы с расширением, большим чем три буквы. В этом случае вы можете сохранить вашу страницу как page.htm. Поместите этот файл в отдельную деректорию , вместе с другими файлами, которые будут частью вашей страницы
    Очень часто название файла может быть причиной проблем. Большинство веб-серверов используют операционную систему UNIX . UNIX различает заглавные и не заглавные буквы. File.html , FILE.HTML или FiLe.HtMl являются для UNIX тремя разными вещами.Все три могут одновременно сосуществовать в одной дериктории. Поэтому лучше не использовать заглавные буквы в названиях ваших файлов. В Windows допустимы пробелы в названиях файлов, а в UNIX нет. Поэтому не используйте их.

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

www.weballey.net/russian

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

 

HTML4 - немного о безграничном.

Текст:
Текст необходимо отображать и форматировать в таге BODY. Не применяя настроек, браузер отображает шрифт по умолчанию Times New Roman с размер 3 (12pt) чёрного цвета.

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
</HEAD>
<BODY>
Simple text. Простой текст, установки взяты по умолчанию браузером.
</BODY>
</HTML>

Заголовок:

В HTML существуют специальные таги для заголовков. От Н1 самого крупного до Н6 самого мелкого.

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
</HEAD>
<BODY>
<H1> Заголовок 1</H1>
<H2> Заголовок 2</H2>
<H3> Заголовок 3</H3>
<H4> Заголовок 4</H4>
<H5> Заголовок 5</H5>
<H6> Заголовок 6</H6>
</BODY>
</HTML>

Стили текста :


<B> Bold  жирный
<I> Italic  наклонный
<U> Underline   подчеркнутый
<S> Strikethrough   зачеркнутый
Возможно применять комбинацию стилей (смотрите пример).
<HTML>
<BODY>
<B> Bold</B> <br>
<I> Italic </I><br>
<U> Underline </U><br>
<S> Strikethrough </S><br>
<B><I> Bold & Italic </I></B>
</BODY>
</HTML>

Шрифт:

Шрифт задаётся тагом FONT.

Атрибуты тага FONT
Face имена шрифтов, разделенные запятыми
Size размер от 1 до 7 (по умолчанию 3)
Color цвет шрифта


<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
</HEAD>
<BODY>
<FONT FACE="Arial Cyr, Helvetica" SIZE="4" COLOR="green">
Цвет, размер и шрифт выбраны.</FONT>
</BODY>
</HTML>

Форматирование:

В HTML возможно представление неформатированного текста, то есть как написано, так и представлено на странице. Этого можно добиться с помощью тага PRE, особенно удобно использовать для текстовых файлов.
Существует также набор тагов для указания интервалов, абзацов, переноса строк. Один неразрывный пробел обозначается символами & n b s p; (non-breaking space).
Применим два тага <P> и <br>

<br> - простой перенос строки, закрытия таг не требует.
<P> - параграф, таг </P> - закрывает параграф. 

<HTML>
<BODY>
<PRE>
Предварительное      форматирование текста
  //       *       //
</PRE>
<br>
Mitsubishi Galant <br>
Mitsubishi       Galant.
<P> Начало нового абзаца !
</P>
</BODY>
</HTML>

Верхние и нижние индексы:

Верхний индекс - таг SUP, а нижний - SUB.

<HTML>
<BODY>
X<SUP>3</SUP>
<br>
A<SUB>3</SUB>
</BODY>
</HTML>

Ссылки:

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

Атрибуты тага A
href имя и путь к странице, как интернет адрес с именем протокола (http://)
ссылка отправления письма на e-mail (mailto:)
переход на Имя-ссылку в пункт документа по тексту #
target имя окна(frame), в которое отправит ссылка:
_blank - открывает ссылку в новом окно браузера
_top - окно стоящее поверх остальных
_parent - открывает ссылку в родительском окне (по умолчанию)
name имя ссылки в документе


<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
</HEAD>
<BODY>
<A HREF="./index.htm" target="_blank">Заходите в гости! (новое окно)</А>
<BR>
<A HREF="./index.htm" target="_parent">Заходите в гости! (в том же окне)</А>
<BR>
<A HREF="mailto:a_vinnikov@yahoo.com">присылайте письма</A><br>
<A HREF="#mesto">тайное место (ЖМИ!)</A>
<BR><BR><BR>
<BR><BR><BR>
<BR><BR><BR>
<BR><BR><BR>
<BR><BR><BR>
<BR><BR><BR>
<P>.<P>.<P>.
<A NAME="mesto"><font color=red>То самое место, <font></A>
ух прямо в точку!
<BODY>
</HTML>

Фреймы:

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

Атрибуты тага FRAMESET
rows разделяет по горизонтали на регионы, высота задается в пикселах или процентах через запятую * означает, что регион займет все оставшееся пространство
cols разделяет по вертикали на колонки, ширина задается в пикселах или процентах через запятую * означает, что регион займет все оставшееся пространство
framespacing ширина рамки в пикселах между фреймами
bordercolor цвет рамки разделяющей фреймы

Каждому окну можно задать целый ряд параметров.

Атрибуты тага FRAME
name имя фрейма
src путь к HTML документу, помещенному во фрейм
marginwidth свободно пространство, отделяет содержание рамки от границ по ширине
marginheight свободно пространство, отделяет содержание рамки от границ по высоте
scrolling Линейки прокрутки: auto - авто, yes - всегда да, no - всегда нет
noresize Запрет смены размера фрейма
bordercolor цвет контура


Старые версии браузеров не поддерживают фреймы, для этого можно использовать таг NOFRAMES в таге BODY.

<HTML>
<FRAMESET cols="50%,*">
<frame name="rrr" src="././www.i.com.ua/~dvision/index.htm">
<frame name="lll" src="./contact/index.htm">
</frameset>
<BODY>
</BODY>
</HTML>

Графика :

В Internet, в Web возможно размещать графическую информацию. Желаемым условием графики в сети является небольшой размер файлов, наиболее часто реализуется в форматах GIF и JPEG.

Формат Диапазон цветов Прозрачность Анимация
GIF от 2 до 256 Да Да
JPEG 16 милионов или 256 оттенков (Grayscale) Нет Нет


Для публикаций изображений используется таг IMG.

Атрибуты тага IMG
SRC имя графического файла и путь до него
WIDTH ширина изображения в пикселах
HEIGHT высота изображения в пикселах
BORDER ширина рамки вокруг изображения в пиксели
ALT альтернативный текст изображения
ALIGN расположение на экране: Left - слева, Right - справа

<HTML>
<BODY>
<IMG SRC="empty.gif" WIDTH="155" HEIGHT="155" BORDER="2" ALT="sms review">
</BODY>
</HTML>

Регионы:

Изображение может быть разделено на область. Область задаётся тагом AREA внутри тага MAP.
таг MAP использует атрибут NAME - имя карты (региона).

shape форма области:
RECT - прямоугольник
CIRCLE - окружность
POLY - полигон
coords координаты:
RECT - X1,Y1, X2,Y2
CIRCLE - X, Y, R
POLY - X1,Y1, X2,Y2, X3,Y3, ...
href ссылка
nohref неактивная область

<HTML>
<BODY>
<MAP NAME="mapmy">
<AREA SHAPE="POLY" COORDS="13,118,13,136,28,128" HREF="./contact/index.htm">
<AREA SHAPE="CIRCLE" COORDS="19,98,9" HREF="./_default.htm" onfocus="this.blur()">
<AREA SHAPE="RECT" COORDS="0,0,180,60" HREF="./sms/index.htm">
</MAP>
<IMG SRC="empty.gif" BORDER="0" USEMAP="#mapmy">
</BODY>
</HTML>

Звук:

В HTML реально добавлять звуковые файлы, часто это WAV и MIDI. Используется таг EMBED.

Атрибут тага EMBED
src Имя к звуковому файлу и путь к нему
autostart Автостарт проигрывания мелодии:
true - да
false - нет
loop Повтор проигрывания мелодии после завершения:
true - да повторять
false - нет
hidden Скрыть меню управления звуковым файлом:
true - скрыть
false - не скрывать
width и height ширина и высота проигрывателя в пикселах
border ширина рамки
alt текст высвечиваемый над меню управления


<HTML>
<BODY>
<embed src="song.mid.htm" loop="true">
</BODY>
</HTML>

Alexey Vinnikov.
http://russian.enjoy.ru


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

 

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

Вступление

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

Тем, кто прочитал третий выпуск и увидел странное слово "Шортобзоры" посвящается...

Я придумал новый раздел "Шортобзоры". Мы втроем (но по-отдельности) берем один сайт и описываем (маленькое описание и оценка), а потом все эти описания попадают ко мне. Я их совмещаю в один обзор, оценка будет ставиться на основании выставленных нами баллов. В результате получится три описания сайта. Притом самые плохие или хорошие черты этого сайта должны выявиться в обоих обзорах по мере описания. Должно получиться классно. Но вот Дмитрий пока out of our business. И работать над "шортами" будем вдвоем с Валерием.

1) snake666.narod.ru (шортобзор)

Довольно-таки странное оформление. В основном все меню сделано на скриптах. Цвета подходят, но не очеь приятные. Очень много баннеров. Не просто очень, я ОЧЕНЬ много. Я не поленился подсчитать их число - ТРИДЦАТЬ ЧЕТЫРЕ баннера и кнопки. Ладно, за статистику и кнопки "другов" особенно ругать не будем, НО зачем ему участвовать во стольких топах. Чего там только нет: Narod'ный, Халявный и много другого странного топа. Совсем забыл сказать о тематике этого сайта. Как не странно, но это как раз то, что определить не удалось. [ПЖ]

Не понравилось:
1. Страничка еще не загрузилась, уже предлагается проголосовать за нее! Я ее еще не видел, а уже должен голосовать ПОНРАВИЛОСЬ, НЕ ПОНРАВИЛОСЬ!
2. Кнопки на каждой странице. Не только на главной, а на всех последующих. И МНОГО!
3. На сайте всего 2 цвета, причем вставками.
4. В строке состояния появляется надпись "выполненно, но с ошибками на странице.".. Видимо какой-то скрипт неисправный.

Понравилось:
1. МЕНЮ
2. скорость
3. flash-мультик... правда не по сайту!
[Валерий]

оформление:

 3

дизайн:

2,5

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

 4

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

3
скорость: 3,5
моя оценка: 3,5
Рейтинг: 19,5

С половиной, так как общая оценка складывалась из двух значений.

2) kds.al.ru (шортобзор)

Когда попадаешь на этот сайт, то видешь, что его лучше всего просматривать с IE 5.0, хотя уже сотни, тысячи раз все говорили, чтобы такого предложения никто не делал, НИКТО! Еще одна очень призабавная штучка, а именно - <iframe width="1" height="1" frameborder="no">. Если хотите знать, то он ведет на рейтинг doo (а я то думал, откуда у меня в кэше этот рейтинг, и почему наверху стоял KDS, но теперь все ясно [кто не понял, те могут спросить у него самого]) Дизайн и оформление отнюдь не оригинальные. Но, надо быть принципиальными, из-за "beauties" (они же "celebrities") сайт оцениваться не будет. [ПЖ]

Не загрузился он у меня. [Валерий]

3) www.cramac.narod.ru и www.sokoly.ru

Почему эти сайты вынесены под один заголовок, ведь между ними нет ничего общего? Не угадали, общее есть. И это общее - то, как они сами определяют свой сайт. Я имею в виду то, что они подготовили поисковым системам для индексации. У соколов в KeyWords стоит: эротический..девушек..sex..эротика..девочки (всего 25 подобных заявок). У крамака в конце страницы маааленьким чееерненьким шрифтом вписано: эротика, секс, порно, web-master, заработок в инете, плата за клик, лотерея, приз (около 120 наименований). Теперь самое главное. Такие сайты не будут оцениваться до тех пор, пока вся эта гадость не уберется. Но учтите, плохое ощущение (осадок) останется. Переделайте это и подайте повторную заявку на рейтинг (если захотите). Те кто ищут подобное содержание едва-ли найдут вашу страницу среди тысяч ссылок! Даже не надейтесь на это!

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

 


ВНЕ РЕЙТИНГА

 

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

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

Кусочек будущего текста:

...

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

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

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

 

Стилевые таблицы..

Начальные сведения.

Итак, CSS это есть таблицы каскадных стилей (в переводе с англ. ("Cascading Style Sheets"). Для чего это дело вообще нужно? Вы, наверное, встречали на сайтах такое: есть ссылка, но она не подчеркнута, а подчеркивается (либо загорается другим цветом, либо создает эффект нажатия на нее) только при наведении на нее мыши. Всё это делает CSS.

Синтаксис.

Тег, определяющий стиль, записывается так: <style></style> - соответственно открывающий и закрывающий теги, и обычно они вставляются между тегами <head> и </head>. Но, как и в JavaScript, между ними поставим такое:

<style><!-- Ваш код --></style>, нового здесь появилось только <!-- и -->.

Строение стиля выглядит так:
Селектор {свойства;}

Пример:

<html>
<body>
<style><!--
h1{color:navy;}
--></style>
</body></html>

Этот код означает, что, если в документе присутствует заголовок типа h1, то он станет темно-синим цветом.

В CSS есть понятие Классовые селекторы (берут свое начало из HTML). В CSS они пригодятся для того, чтобы, к примеру, сделать заголовки (в нашем случае) вида H1 темно-синим цветом и в некоторых случаях - красным. Внимание, стиль применяется ко всему документу, поэтому все заголовки, в нашем случае, в документе будут либо красными, либо темно-синими.

Пример:

<head>
<style><!--
h1{color:navy;}
h1.red{color:red;}
--></style>
</head>
<html>
<body>
<h1>H1</h1>
<h1 class="red">H1</h1>

Замечание: классы можно применять и по такому виду: .class{свойства;}

Пример:

<head>
<style><!--
.red{color:red;} //селектор red можно заменить на любой другой
--></style></head>
<body>
<h1 class="red">H1</h1> //где class="ваш селектор"
</body>
</html>

Эту операцию можно выполнить и при помощи идентификатора, выглядит это так: #идентификатор{св-ва;}, но уже вместо параметра class="...." применяется id="....".

Пример:

<style><!--
#red{text-decoration:line-through;} //идентификатор определяет вид объекта red
--></style>
<body>
<p id="red">Текст</p>
</body>
</html> //текст будет перечеркнутым

Как Вы заметили в фигурных скобках появилась новая штучка - text-decoration - которая имеет 5 параметров:

none - никаких изменений над текстом не происходит
underline - подчеркивает текст
line-through - перечеркивает текст
overline - перечеркивает текст (работает только в IE)
blink - мерцание (работает только в NC)

Как я уже говорил, CSS может сделать, к примеру, ссылку не стандартно подчеркнутую, а подчеркиваемую при наведении на нее курсора. Все это можно сделать при помощи Псевдоклассов (Anchor Pseudo Classes).

Строение псевдоклассов:
a:link{свойства;}
a:visited{свойства;}
a:active{свойства;}
a:hover{свойства;}

Как Вы видите, здесь имеются 4 селектора link-ссылка, visited-посещенная ссылка, active-активная ссылка, hover-состояние ссылки при наведении на нее курсора. В фигурных скобках могут быть заключены от 1 и более параметров, назовем часто используемые:
text-decoration:none(underline, line-through, overline//только в IE, blink//IE не поддерживает) - состояние текста ссылки
color:цвет; - цвет ссылки
font face: название шрифта;

font size: размер в pt (px);
font-style:italic(bold, underline);
font-variant:normal (small-caps);
font-weight:normal(bold, bolder, lighter) - шрифт ссылки //где font-variant:small-caps делает маленькие буквы заглавными;
font-weight определяет жирность, bold-жирный, bolder-очень жирный, lighter-не отличается от normal;
font-style определяет вид шрифта (наклонный, подчеркнутый, полужирный)

Пример:

<style><!--
a:link{text-decoration:underline; font face:Arial; font size:10pt color:red;}
a:visited{text-decoration:line-through; color:red;}
a:active{text-decoration:none; color:blue;}
a:hover{text-decoration:none; font face:verdana; font size:15pt; color:navy;}
--></style>

Вставка стилевых таблиц в теги.

Делается это очень просто: берете чей-нибудь там тег и вставляете по такому виду <font style="свойства">Текст</font>

Пример:

<font style="text-decoration:underline; color:navy">Текст</font>

Применение в документах.

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

Пример:

<style><!--
body{color:white; background-color:gray;}
h1{color:red;}
h2{color:navy;}
--></style>

Надеюсь здесь Вы всё поняли...

А если Вы решили применить некоторый стиль к нескольким документам сразу, то это решается таким образом:

<body>
<link rel="Stylesheet" type="text/css" href="путь к файлу, где содержится код CSS">

Можно и так:

<style><!--
@import url(путь к файлу)
--></style>

Спасибо за терпение более опытных веб-мастеров :-) Пишите!

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

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

Дмитрий Давыденко

http://subscribe.ru/
E-mail: ask@subscribe.ru
Поиск
В избранное