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

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

  Все выпуски  

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


Служба Рассылок Subscribe.Ru проекта Citycat.Ru

Веб-дизайн. От А до Я.
# 1
5 января 2001г.
Проект сайта "ADG Scripts" webg.agava.ru
кол-во подписчиков - 1000

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

Адреса:
для Ваших вопросов по веб-дизайну
по вопросам публикации
по другим вопросам

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

 

HTML - теги.

    В языке HTML все связанно с тегами. Тег это ярлык с надписью , типа ярлыка на вашей рубашке или брюках. HTML тег чем -то напоминает переключатель, с помощью которого вы что-то включаете или выключаете в вашем браузере.
<TAG>
    Теги всегда распологаются между значками "меньше чем" (<) и "больше чем" (>). Теги могут быть написаны заглавными и незаглавными буквами. Наиболее мудро в тегах использовать заглавные буквы , что бы они выделялись в тексте. Хотя в этой ситуации , это выш выбор. И первый и второй вариант дает одинаковые результаты.
<TAG>...</TAG>
    Теги в основном используются попарно. Открывающий тег и закрывающий тег; включить и выключить . Единственная разница между ними это "слэш" в закрывающем теге. Запомните , что вы будете часто забывать поставить слэш , в результате чего ваши страницы будут сильно отличаться от того , что вы ожидали там увидеть. Открывающий тег включает, закрывающий тег выключает.
<TAG ATTRIBUTE>...</TAG>
    Иногда теги имеют один или несколько атрибутов. Атрибуты предоставляют дополнительную информацию для браузера. При размещении картинки в вашей странице, используется специальный тег. Какую картинку вы разместите , указывается в атрибуте. Название файла этой картинки всегда помещается в двойные ковычки. В кратце: тег говорит браузеру , ЧТО делать , а атрибут говорит КАК это делать.
<TAG ATTRIBUTE="...">...</TAG>
   Всегда обращайте внимание на порядок расположения тегов. Размещайте значки "больше чем" и "меньше чем" в правильном порядке. Размещайте название тега сразу после них, без пробелов. Не используйте пробелы в атрибутах. Когда добовляете информацию для атрибута , после знака "равно" , всегда помещайте ее в двойные кавычки. Всегда должен быть следующий порядок : <A><B></B></A>. Если вы разместите теги вот так: <A><B></A></B> , все может пойти кувырком.

www.weballey.net/russian

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

 

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

Документ HTML представляет собой текстовый файл (имеет расширение *.htm или *.html), написан на языке HyperText Markup Language.
Служебные команды называются Тагами и пишутся в скобках вот так: <ТАГ>.

Между открытием и закрытием тага идёт его содержание: <ТАГ>содержание</ТАГ>.
Таги можно встраивать один в другой: <ТАГ1><ТАГ2>содержание</ТАГ2></ТАГ1>. Содержание может быть текстом или другими тагами.

Например:
<B>содержание </B>
использован один таг B - это жирный текст. Будет виден в html документе так:
содержание


<B><I>содержание </B></I>
использованы два тага B и I - это жирный текст с наклоном. Будет виден в html документе так:
содержание

Таги могут иметь Атрибуты <ТАГ1 Атрибут 1="свойство1, свойство2, свойство3, ..." Атрибут 2="свойство1, ...">содержание </ТАГ2></ТАГ1>.

СТАРТУЕМ!!!
HTML документ начинается с тага <HTML>, им и заканчивается, только вот так, закрытием </HTML>. Затем заголовок <HEAD>, он содержит служебную информацию (кодировку страницы, язык, описание, авторство и др.). В <HEAD> есть таг <TITLE>, заглавие документа. Следует за <HEAD> таг <BODY>, в нем хранится содержание HTML документа, текст, картинки, таблички, всё что угодно.

<HTML>
<HEAD>
<TITLE>Заглавие документа</TITLE>
</HEAD>
<BODY>
содержание документа
</BODY>
</HTML>

Параметры:

Параметры документа задаются через таг <BODY>. Параметры это специальные символьные команды, которые понимает браузер.

Атрибуты тага BODY
bgcolor цвет фона задан по схеме RGB (Красный Зеленый Синий), 6-разрядное шестнадцатеричное число (#RRGGBB) или имя цвета (например red - Красный, green - Зеленый, blue - Синий)
background фон - графический файл
text цвет текста
link цвет ссылки
alink цвет активной ссылки
vlink цвет посещенной ссылки
еще доступно гораздо больше параметров, рекомендую поставить какой-нибудь html редактор или почитать спецификацию языка html.

Дополним наш пример атрибутами тага BODY.

<HTML>
<HEAD>
<TITLE>Заглавие документа</TITLE>
</HEAD>
<body bgcolor="#fee8e0" text="#000000" link="#0000ff" alink="#ff0000" vlink="#000080">
Это <b>наш<</b> пример <i>>!!!</i>
</body>
</HTML>

Использование данных Атрибутов не является обязательным, но добиться индивидуальности они вам помогут.

Структура:

Представлена может быть тагом DIV, Атрибут align поможет менять выравнивание содержания :
  • ’ left - ровняем по левому краю
  • ’ center - центрирование
  • ’ right - ровняем по правому краю
  • ’ justify - ровняем по ширине
Также полезно научится создавать таблицы, в html , работа таблиц неплохо реализована. Используются таги <TABLE>, <TR>, <TD> и <TH>.

TABLE - таблица и ее параметры, TR - ряды, TD - колонки, TH - заглавная ячейка.

Атрибуты тага TABLE
align Центрирование таблицы
width ширина таблицы в пикселах или в процентах от ширины на экрана
border Ширина граница рамки в пиксели
cellspacing расстояние между ячейками таблицы
cellpadding расстояние между рамками и содержанием в ячейке
bgcolor цвет фона таблицы
bordercolor цвет рамки таблицы
bordercolorlight Светлый 3D эффект рамки
bordercolordark Темный 3D эффект рамки
background файл изображения - фон таблицы


Атрибуты тага TR
align Выравнивание содержимого ряда: left, center, right
valign Выравнивание содержимого ряда по вертикале: top, middle, bottom
bgcolor цвет фона на ряда
bordercolor цвет рамки ряда
bordercolorlight светлый 3D эффект рамки
bordercolordark темный 3D эффект рамки
background фон ряда (путь и имя к графическому файлу)


Атрибуты тага TD
width ширина ячейки пиксели или в процентов (50%) (не работает в Netscape) от ширины ряда
height высота ячейки, пикселы
colspan объединение ряда по горизонтали
rowspan объединение ячеек в ряду по вертикале
align выравнивание содержимого ячейки: left, center или right
valign выравнивание содержимого в ячейке по вертикали: top, middle или bottom
nowrap не позволять перенос на новый ряд содержимого ячейки
bgcolor цвет фона ячейки
bordercolor цвет рамки ячейки
bordercolorlight светлый 3D эффект рамки
bordercolordark темный 3D эффект рамки
background графический файл на фон ячейки

Таг TH отличен от TD тем, что центрует и выделяет текст содержимого, очень удобно при написании заголовков таблиц.

<HTML>
<BODY>
<TABLE WIDTH="80%" BORDER="2">
<TR>
<TH COLSPAN="3">Заголовок !</TH>
</TR>
<TR>
<TD>Колонка 1</TD>
<TD ALIGN=center>Колонка 2</TD>
<TD ALIGN=right>Колонка 3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Индексирование:

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

Атрибуты тага META
NAME CONTENT
description описание документа
keywords ключевые слова, разделенные запятыми

Кодировка символов страницы также определяется в МЕТА, разберем как это реализовать. Смотрите пример ниже.

Кодировка страницы

Кодировка может быть задана автором страницы, иначе ее отображение немного неудобно для пользователя. Используется таг META, стоящий в таге HEAD. Атрибуты тага для задания кодировок смотрите в таблице:

http-equiv content .
Content-Type text/html; charset=windows-1251 Кириллица Windows
Content-Type text/html; charset=KOI8-R Кирилица KOI8-R
Content-Type text/html; charset=iso-8859-5 Кириллица ISO
И другие кодировки.


<HTML>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
<META NAME="DESCRIPTION" CONTENT="Домашняя страница Васи Пупкина">
<META NАМЕ="keywords" CONTENT="Пупкин, дизайн, html, html">
<TITLE>Заглавие документа</TITLE>
</HEAD>
<BODY>
Вася
<br>
Содержание документа: автоматически отображается на Кириллице !
</BODY>
</HTML>
Продолжение следует...

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



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

 

Трюки и спецэффекты в Photoshop 5.5.

Пожалуй, в мире создано не так много программ, которые стали бы не только культовыми среди пользователей и определяющими в своем виде деятельности, но и являлись бы стандартом этой деятельности. Среди таких программ Word из текстовых редакторов, AutoCad из проектировщиков, 3D Studio Max из редакторов трехмерной графики и, несомненно, Adobe Photoshop из программ для редактирования двумерной растровой графики. Популярность этой программы среди профессиональных художников и дизайнеров просто не имеет аналогов. Практически 100 процентов мастеров, работающих с компьютерной графикой, (по данным американского журнала для дизайнеров "Imagine") используют ее в качестве средства обработки растровых изображений. Photoshop также одна из наиболее любимых программ непрофессионалов (правда, в цивилизованном мире это не столь ярко выражено, как у нас. Причина ‰ цена). И это все вполне оправдано. Разработчики действительно создали мощный инструмент, который в умелых руках поистине способен творить чудеса.

С популярностью Photoshop связана особенность этой и последующих статей. Я думаю, не стоит на пальцах объяснять элементарные вещи. Этот пакет не столь сложен, как 3D Studio Max, к примеру, и каждый может изучить основные навыки, просто прочитав помощь программы. Эти же статьи будут ориентированы на малоизвестные стороны PhotoShop, на создание в нем спецэффектов, на цветокоррекцию и на многое другое, что крайне полезно людям, работающим с этой программой.

Вообще, задачи PhotoShop можно разделить на две части. Первая наиболее известна и используема (хотя этот мой постулат может быть оспорен людьми, близкими к издательскому делу ‰ им ближе вторая часть функций) ‰ это трансформирующая часть, к которой мы можем отнести фотомонтаж, создание спецэффектов и другие яркие функции, на которые прежде всего обращают внимание новички. Несомненно, эта часть в PhotoShop проработана на славу и никаких нареканий вызвать не может. (Освоивший монтаж в этой программе уже никогда не будет так доверять фотографиям в газетах. У меня есть монтаж, где я стою с известными людьми. И никакого отличия от натуральной фотографии непрофессионал не почувствует). Вторая часть хоть и сложнее и менее впечатляюща, но крайне полезна. Это инструменты цветокоррекции в PhotoShop. Они весьма продуманы, и если вы собрались сделать, к примеру, рекламный буклет для своей фирмы, освоить их придется ради результата.

Статьи будут построены на основе практики. Вообще я считаю, что компьютерные программы стоит изучать в ходе работы. В каждой статье будет 2-3 примера интересного решения и подробное описание значений всех действий. Если вас что-то интересует, напишите на электронный адрес, и это будет учтено в следующих статьях или отвечу вам лично. Только одна просьба: писать "А я не так это делаю!" не стоит. Решений всегда много, я выбираю то, которое считаю наиболее рациональным, вы же можете иметь другое мнение.

Сразу скажу, что начнем мы с работы над текстом. Почему? Во-первых, это наиболее простая часть того, о чем бы я хотела рассказать, во-вторых ‰ наиболее часто используемая. Начнем с самого (несомненно) часто задаваемого вопроса по программе. Как писать по кругу (либо по любой другой заданной кривой)? Увы, пока разработчики не решили эту проблему. Вроде бы обещали к шестой версии исправиться, но пока решения не очень хорошие. Я лично советую найти программу от Еxtensis ‰ Photographics. Это мощное решение, созданное под PhotoShop и интегрируемое в него в виде фильтра Там эта проблема решена очень хорошо. Но увы, это не всем доступно по разным причинам, поэтому постараемся хоть как-то восполнить этот пробел стандартными средствами PhotoShop.

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

Итак, приступим к созданию. Создадим новый файл произвольных размеров. Хочется обратить ваше внимание на то, что видимый размер на мониторе и реальный размер ‰ это две большие разницы даже тогда, когда в окне размер картинки обозначен как стопроцентный. Причина тому такова: монитор отображает одну точку изображения на одну точку монитора. А тут и зарыта собака. Файл ваш может иметь разное разрешение и, следовательно, внешне выглядеть разных размеров. Вам придется не верить своим глазам, а смотреть на цифры. Затем необходимо создать область выделения круглой формы (используя инструмент "Эллиптическое выделение", имеющий горячую клавишу "M"), поставить в меню "Параметры" фиксированый кооффициент 1/1 и залить ее любым цветом. Далее нажатием клавиш "Ctrl+D" либо двойным щелчком левой клавиши мыши удалим выделение (так как в PhotoShop выделение, как, впрочем, и почти везде, играет роль ограничения области редактирования). Заметим, что другого способа делать примитивные фигуры в PhotoShop нет, прежде всего по той причине, что это программа для редакции исключительно растровой графики. Но если вам часто нужны готовые геометрические фигуры, воспользуйтесь Adob Illustrator, который хорошо интегрирован с PhotoShop, или, для экономии места на диске, все тем же PhotoGraphics от Extensis. Затем, используя инструмент "текст", напишите любое слово. В нашем случае это слово "PhotoShop". Если вы неправильно указали размер шрифта и буквы у вас больше либо меньше намеченого, воспользуйтесь трансформацией изображения (сочетание клавиш Ctrl + T). Это очень удобный инструмент. Щелкните правой клавишей внутри области трансформации ‰ и вы сможете выбрать режим. Описывать их сейчас не будем, они интуитивно понятны и их вполне можно изучить методом "научного тыка". В PhotoShop очень важное место занимает работа со слоями. Если вы откроете панельку "Слои", то увидите, что сейчас их у нас два. Первый это фон с кругом, второй ‰ текст. Мы практически ничего не сделаем, если не отрисуем его. Это связано с тем, что для большинства операций нам нужен растровый (то есть описанный по точкам) объект, каковым шрифт не является. Поэтому найдем на слое текста букву T и, щелкнув правой клавишей, выберем "Рендеринг слоя". Теперь можно приступать к нашей основной работе. Возьмем инструмент "прямоугольное выделение" и выделим букву "P". В результате вы должны получить что-то вроде того, что изображено у нас на иллюстрации 1.

Затем зажмите Ctrl+Shift и передвиньте букву немного повыше, к кромке круга. Посмотрите, как выделение обхватило букву. Теперь перейдите в режим трансформации и начните поворачивать букву. Обратите внимание на точку в центре. Это есть то место, вокруг которого осуществляется вращение. Двигайте букву в необходимом направлении до получения удовлетворяющего вас результата. Положительно то, что работаете вы в одном слое. Это значительно удобнее, чем вырезать и вставлять буквы путем использования команд из меню "Редактировать": Вырезать и вставить ("Ctrl+X", "Ctrl+V") соответственно. Установите оставшиеся буквы по примеру первой. Кажется, готово.

Сразу скажу, что часто задают вопрос, почему не работает русский шрифт в PhotoShop. Причина тому ‰ шрифты, следовательно и самое легкое лекарство ‰ заменить в системе шрифты на русские, которые лежат практически на всех дисках с софтом.

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

Для начала создайте заготовку произвольного размера. Убедившись, что изображение находится в нужном режиме, а именно в RGB, приступим к работе. Залейте рабочую область черным цветом и напишите текст. Мы будем работать со словом "adobe". Если вы с первого раза не смогли указать нужный размер шрифта, то не огорчайтесь, а лучше обратитесь к началу этой статьи, где рассказывается о редактировании размера и наклона текста. Написав текст белым цветом, передвинув его ближе к верху, так как нам понадобится место внизу для работы, преступим к следующему этапу. Открываем панель с описанием слоев и, так же как и в первом случае, переводим наш текст в растровое изображение (щелкаем правой клавишей мыши по букве "T" и выбираем рендеринг слоя). Затем склеиваем наши слои. Я предпочитаю работать с клавиатурой, поэтому предлагаю выполнить эту операцию, нажав клавиши "Ctrl+E", однако вы можете это сделать и более привычным для некоторых способом: указать мышью в строке меню на "слой" и затем выбрать "слияние вниз".

Вот первый этап подготовки закончен, и мы переходим к следующему, к созданию самого эффекта.

Поверните свое изображение на 90 градусов по часовой стрелке (изображение -> вращать холст->90 гр. ч. с.). Затем воспользуйтесь несколько раз фильтром ветер (фильтр -> стиль ->ветер ->слева). Для повторного применения фильтра вовсе на обязательно выполнять все эти операции, достаточно лишь нажать необходимое количество раз клавиши "Ctrl+F". Я повторила это действие 5 раз, но в другом случае это количество может колебаться в различные стороны. Затем переворачиваем наше изображение в первоначальное положение (изображение-> вращать холст -> 90 гр. пр. ч. с.) На следующем этапе воспользуемся фильтром "штамп" (фильтр -> наброс -> штамп). Я рекомендую светл/темн баланс установить на значение приблизительно равное 5-6 в зависимости от размеров и формы вашего изображения.

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

1. Инвертировать изображение (изображение -> настройка -> инвертировать) либо нажать клавиши "Ctrl+I".

2. Выделение -> все, либо клавиши "Ctrl+A".

3. Правка -> копировать, либо "Ctrl+C"

4. Delete

5. Переходим в палитру каналов и создаем новый, щелкая левой клавишью мыши по эмблеме нового канала, помещенной внизу. Вкладываем в него содержимое буфера. Правка -> вставить, либо "Ctrl+V".

6. Щелкаем мышью по иконке канала RGB и переходим опять к работе со слоями.

7. Там, нажав клавиши "Ctrl+Alt+4", мы увидим выделение, которое следует инвертировать при помощи клавиш "Ctrl+Shift+I", либо выделить -> инвертировать.

8. Теперь область нашего выделения можно залить подходящим цветом. Я выбрала красный.

И наконец, осталась самая малость ‰ придать нашей надписи объем и реалистичность. Для этого я предлагаю воспользоваться фильтром "Bas рельеф" (фильтр -> наброс -> Bas рельеф). В моем случае значение "детали" =12, а "мягкость" =5. При выполнении этой операции цвет переднего плана должен соответствовать цвету вашего изображения, а цвет фона ‰ идентичный фону на вашем изображении.

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

В моих силах объяснить основы работы, описать ряд спецэффектов, показать возможности работы со слоями и каналами, но давным-давно известно, что навыки и интуиция приходит лишь с опытом работы. Работа в мощных графических пакетах имеет такую специфику, что даже сами создатели не способны учесть и сотую часть возможностей своих продуктов. То есть, никто и ничем не ограничивает вас от поисков новых путей, новых эффектов ‰ эксперемент и опыт есть две составляющие успешного творчества.

http://www.nestor.minsk.by/
Галина Корабельникова 


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

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


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



http://subscribe.ru/
E-mail: ask@subscribe.ru
Поиск

В избранное