Перечень используемого оборудования. Практическое занятие 1

Практическое занятие 1

«Синтаксис документа HTML»

Цель работы

1.1 Научиться определять основные теги HTML-документа, их атрибуты.

1.2 Определять их вид.

Пояснение к работе

2.1 Краткие теоретические сведения

Теги

HTML-файл содержит один тип управляющих конструкций - теги (tags).

тег — единица разметки;

элемент — составная часть документа.

Назначение тегов:

- разделяютисходный неформатированный текст документа на элементы;

- создаютновые элементы, которым ничего не соответствовало в тексте (например, графические вставки или Java-апплеты).

Виды тегов:

- парные, охватывающие какой-то фрагмент текста и/или другие теги,

<парный-тег>текст или другие теги</парный-тег>

Парные теги должны вкладываться друг в друга без пересечений, т. е. если в области действия тега А открылся тег В, он должен закрыться до того, как закроется тег А.

<A> <B> </B> </A>

- непарные, стоящие в одиночестве:

<непарный-тег>

Атрибуты

Многие теги, как парные, так и непарные, имеют атрибуты, изменяющие и уточняющие действие тега:

<тег атрибут1="значение" атрибут2="значение"...>

Регистр букв в идентификаторах тегов и атрибутов (но не в значениях атрибутов) не учитывается. Пары атрибут="значение" распознаются как таковые только внутри угловых скобок тега и отделяются друг от друга пробелами.

Подстановки

Чтобы ввести в документ символы, отсутствующие на клавиатуре или же имеющие в синтаксисе HTML специальное значение, употребляются подстановки двух видов:

1. мнемонические - имеют вид

& мнемонический код;

например:

è для ё
< для <

  для символа неразрываемого пробела

2. числовые – имеют вид

& # десятичный числовой код;

например:

&#1б0; для символа неразрываемого пробела

Ссылки и привязки

тег А

Любая ссылка в HTML имеет два обязательных элемента:

источник - то изображение или фрагмент, который заключен между <А> и </А> и щелчок по которому активизирует ссылку;

пункт назначения - URL-адрес документа, на который ведет ссылка.

Адрес назначения может указывать не только на весь документ в целом, но и на какое-то место (точнее, опять-таки, какой-то элемент) внутри документа, в том числе и внутри самого документа со ссылкой. Для этого пункт назначения должен быть помечен с помощью атрибута name тега А создателем того документа, на который делается ссылка. В свою очередь, в теге А в документе-источнике эта метка приписывается к адресу назначения через символ #.

Формы

тег FORM

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

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

Изображения и объект

Тег IMG

Тег IMG, предназначенный длявставки изображений, относится к тегам, создающим новые элементы документа, отсутствовавшие в исходном тексте. Тег этот ссылается на хранящееся в отдельном файле изображение в формате GIF или JPEG; этот графический файл может располагаться там же, где и HTML-файл страницы (в таком случае в атрибуте src достаточно указать имя файла), а может лежать и в другом каталоге и даже на другом сервере (в этом случае нужно указывать полный URL-адрес). Большинство атрибутов этого тега управляют форматированием изображения, устанавливая его размеры, поля, выравнивание и проч.

Таблицы

Тег TABLE

Тег TABLE чаще используется для визуального форматирования страницы, чем для представления табличного по своей природе материала.

Используются атрибуты height, width, cellspacing, cellpadding, border для форматирования внешнего вида таблицы.

Перечень используемого оборудования

2.2.1 Персональный компьютер

2.2.2 Описание практической работы

Задание

3.1. Определите, с какого тега начинается HTML-код web-страницы, запишите его. Является ли он парным тегом?

3.2. Запишите все парные и непарные теги, имеющиеся в примере, что они означают.

3.3. Найдите и запишите все ссылки, имеющиеся в примере, подчеркните путь назначения ссылки.

3.4.Найдите и запишите 3 примера тегов с атрибутами.

3.5. Найдите все вставленные в web-страницуизображения.Запишите их код.

3.6. Имеются ли в коде примера формы? Если есть запишите его код.

3.7. Имеется ли в коде примера подстановки? Какие? Запишите их все. Что они обозначают?

3.8. Найдите и запишите коды всех имеющихся таблиц. Подчеркните атрибут border. Что он означает?

3.9. Имеются ли в коде каскадные таблицы стилей? Запишите их код.

Вариант 1

<html>

<head>

<title>Задания В8</title>

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

background-color: #F8F4F1;

}

a:link {

color: #000000;}

a:visited {

color: #111333;

}

</style>

</head>

<body>

<h1 id="logo-text">Учебный центр "Логарифм Плюс"</h1>

</div>

<ul>

<li><a href=index.html>Главная</a></li>

<li><a href=about_center.html>О центре</a></li>

<li id="selected"><a href=math.html>Математика</a></li>

<li><a href=phys.html>Физика</a></li>

<li><a href=teacher.html>Преподаватели</a></li>

<li><a href=visitor.html>Контакты</a></li>

</ul>

</div>

<h1>Часть II</h1>

<li><a href="pdf_fales/c3.pdf">Задания С3</a></li>

<li><a href="pdf_fales/c2.pdf">Задания С2</a></li>

<li><a href="pdf_fales/c1.doc">Задания С1</a></li>

</ul>

</div>

<h1>Часть I</h1>

<li><a href=B12.html>Задание 12</a></li>

<li><a href=B11.html>Задание 11</a></li>

<li><a href=B10.html>Задание 10</a></li>

<li><a href=B9.html>Задание 9</a></li>

<li><a href=B8.html>Задание 8</a></li>

<li><a href=B7.html>Задание 7</a></li>

<li><a href=B6.html>Задание 6</a></li>

<li><a href=B5.html>Задание 5</a></li>

<li><a href=B4.html>Задание 4</a></li>

<li><a href=B3.html>Задание 3</a></li>

<li><a href=B2.html>Задание 2</a></li>

<li><a href=B1.html>Задание 1</a></li>

</ul>

</div>

<h1>ЕГЭ. Математика</h1>

<p><b>Задание В8</b> </p>

<p><b>Пример 1</b> (МИОО-2010). На рисунке изображен график производной функции f(x), определенной на интервале (-11, 11).

Найдите количество точек экстремума функции f(x) на отрезке [-10; 10].</p>

<p><b>Решение.</b> Для ответа на вопрос, используем необходимый признак экстемума: если в точке

<img src="images/B8_2.jpg"> функция f(x) достигает экстремума, то ее производная f'(x) в этой точке либо равна 0,

либо не существует. Производная обращается в ноль в точках пересечения с осью Ох.

<br>На отрезке [-10; 10] таких

точек 5.

<br><b>Ответ:</b> 5.

</p>

<p><b>Пример 2</b> (МИОО-2011). Прямая y = 3x + 4 является касательной к графику функции <img src="images/B8_1.jpg">.

Найдите c.</p>

<p><b>Решение.</b> По условию задачи касательной к графику функции является прямая y = 3x + 4.

Угловой коэфициент этой прямой k = f'(x) = 3.

Уравнение касательной к графику функции f(x) в точке (<img src="images/B8_3.jpg">)

имеет вид: <img src="images/B8_4.jpg">.

Найдем производную функции: f'(x) = 6x - 3.

<br>В точке <img src="images/B8_2.jpg"> производная функции должна быть равна 3:

<br>6х - 3 = 3.

<br><img src="images/B8_2.jpg"> = 1.

<br><img src="images/B8_5.jpg"> = 3∙1 + 4 = 7.

<br>Точка касания имеет координаты (3,7), эта точка принадлежит графику заданной фунции <img src="images/B8_1.jpg">.

<br>f(3) = 3∙1 - 3∙1 + c = 7.

<br>c = 7.

<br><b>Ответ:</b> 7

</br></p>

<p> <a href="pdf_fales/b8.doc">МИОО. Прототипы задания В8</a>

</p>

</div>

</div>

<p><font color="#FF00FF">Пример:</font></p>

<tr>

<p><div align="left" style="font-size:8pt">  <td><p>Ширина 200 пикселей</p></td></div></p>

<p><div align="left" style="font-size:8pt">  <td><p>Ширина 60%</p></td></div></p>

</td>

<p><strong>Отображение в браузере:</strong></p><br>

<tr>

<td><p>Ширина 200 пикселей</p></td>

</tr>

</table>

<br>

<tr>

<h3> Горизонтальная линия</h3>

Введите тему сообщения:<br /><input name="name" size="30" type="text" />

<hr />

Введите текст самого сообщения:<br /><textarea cols="40" rows="6"></textarea>

<hr />

Укажите почтовый адрес:<br />nic <input name="nic" size="10" type="text" /> <select name="mail"><option value="1">@mail.ru</option><option value="2">@rambler.ru</option><option value="3">@yandex.ru</option><option value="4">@tolpa.net</option><option value="5">@narod.ru</option><option value="6">@anekdotov.net</option></select>

<hr />

Введите пароль:<br /><input name="psw" type="Password" />

<hr />

</tr>

</table>

</td>

</tr></table>

</body>

</html>

Вариант 2

<html>

<head>

<title>Учебник HTML: таблицы html страницы: задание цвета таблицы, графический фон</title>

</head>

<body>

<tr>

<tr>

<td><p><strong>Microsoft Office</strong></p></td>

<td><p><strong>Сайтостроение</strong></p></td>

<td><p><strong>Программинг</strong></p></td>

<td><p><strong>Компьютер</strong></p></td>

<td><p><strong>Графика</strong></p></td>

<td><p><strong>Разное</strong></p></td>

</tr>

<tr>

· <a href="http://on-line-teaching.com/word/index.html">Основы Word</a><br>

</td>

· <a href="http://on-line-teaching.com/site/index.html">Как сделать сайт</a><br>

</td>

· <a href="http://on-line-teaching.com/html/index.html">Основы HTML</a><br>

</td>

· <a href="http://on-line-teaching.com/php/index.html">Основы PHP</a><br>

</td>

· <a href="http://on-line-teaching.com/IBM-computer/index.html">Что внутри ПК</a><br>

· <a href="http://on-line-teaching.com/IBM-PC/index.html">ПК для чайников</a><br>

</td>

<!--

· CorelDraw<br>

· Corel Photo-Paint<br>

-->

· <a href="http://on-line-teaching.com/graphika/index.html">Web-графика</a><br>

· <a href="http://on-line-teaching.com/autocad/index.html">САПР: AutoCAD</a><br>

</td>

· <a href="http://on-line-teaching.com/art/index.html">Статьи</a><br>

</td>

</tr>

</table>

</td>

</tr>

</table>

<tr>

</td>

<p class="nav"><a class="a4" title="На главную страницу" href="../index.html">HTML, Excel, Word, SEO</a> <img src="../img/line6.gif" alt="" width="11" height="10" border="0">  <a class="a4" href="index.html">Основы Html</a><img src="../img/line6.gif" alt="" width="11" height="10" border="0">  Таблицы html</p>

</td>

</tr>

</table>

<tr>

<tr><td><h3 align="center">Основы HTML</h3></td></tr>

<tr><td align="center"><a class="a" href="books.html">Книги по HTML</a></td></tr>

<tr><td><a class="a2" href="../html-tag/index.html">  <font color="#000080">Справочник HTML-тегов</font></a></td></tr>

<tr><td><a class="a2" href="../templates/index.html">  <font color="#008000">Шаблоны для сайтов</font></a></td></tr>

<h4>Как будете расплачиваться?</h4>

<tbody>

<tr>

<td><input name="pay" type="radio" value="cahs" />Наличными</td>

</tr>

<tr>

<td><input name="pay" type="radio" value="check" />Чеком</td>

</tr>

<tr>

<td><input name="pay" type="radio" value="debit" />Дебитной картой</td>

</tr>

<tr>

<td><dl><dt> Кредитной карточкой</dt><dd><input name="pay" type="radio" value="mc" />MasterCard</dd><dd><input name="pay" type="radio" value="visa" />Visa</dd><dd><input name="pay" type="radio" value="dick" />Discovery</dd><dd><input name="pay" type="radio" value="ae" />American Express</dd></dl></td>

</tr>

</tbody>

</table>

</form></td></tr>

</div>

</td></tr>

<p class="topic2"> Здесь. Разные продукты от Microsoft - <a href="http://www.winblog.ru/win7/" target="_blank" class="a3">Windows 7</a> Server 2008 и другие. Бесплатно. </p>

<hr>

<br>

<br>

<br>

</td></tr>

</table>

<br>

<p class="nav"><a class="a5" href="lsn013.html">«создание таблиц</a>

<a class="a5" href="lsn015.html">вид таблиц»</a></p>

<h1>Таблицы html страницы (ч.2)</h1>

<p><a class="a1" href="#1">Задание цвета элементов таблицы</a></p>

<p><a class="a1" href="#2">Графический фон таблицы</a></p>

<p><a class="a1" href="#3">Выравнивание данных в таблице</a></p>

<p><a class="a1" href="#4">Изменение размеров таблицы</a></p>

<a name="1"></a><h3>Задание цвета элементов таблицы html страницы</h3>

<p>При помощи атрибута BGCOLOR можно изменять цвет содержимого ячейки, строки, группы столбцов, крупы строк, таблицы целиком.</p>

<p>Цвет можно задать как наименованием цвета, так и шестнадцатеричным значением кода цвета со знаком #.</p>

<p><font color="#FF00FF">Пример:</font></p>

<tr>

</td>

<p><strong>Отображение в браузере:</strong></p><br>

</tr>

</tr>

</table>

</td>

</tr></table>

<a name="3"></a><h3>Выравнивание данных в таблице html страницы</h3>

<p>Для выравнивания данных в таблице предназначены атрибуты ALIGN, VALIGN.</p>

<p>Атрибут ALIGN предназначен для выравнивания по горизонтали. По умолчанию содержимое заголовков выравнивается по центру, а ячеек - влево.</p>

<p>Атрибут VALIGN выравнивает данные по вертикали. По умолчанию информация выравнивается посередине.

Средствами выравнивания можно пользоваться в отдельной ячейке, строке, группе столбцов, группе строк. Самым высоким приоритетом обладает атрибут выравнивания в ячейках таблицы.</p>

<p>Если вы ограничиваете расстояние между содержимым ячейки и ее кромками при помощи атрибута CELLPADDING, то это сказывается на результате выравнивания. Например, при CELLPADDING=3 и ALIGN="top", данные будут размещены на расстоянии трех пикселей от верхней границы ячейки.</p>

<p><font color="#FF00FF">Пример:</font></p>

<tr>

<p><div align="left" style="font-size:8pt">  <td>Нижняя ячейка</td></div></p>

</td>

<p><strong>Отображение в браузере:</strong></p><br>

<tr>

</tr>

<tr>

<td>Нижняя ячейка</td>

</tr>

</table>

</td>

</tr></table>

<a name="4"></a><h3>Изменение размеров таблицы html страницы</h3>

<p>Ширина таблицы задается атрибутом WIDTH. Значение можно задавать как в абсолютных единицах (WIDTH=250), так и в относительных (WIDTH="80%"). Например, задав значение ширины в 600 пикселей, можно быть уверенным, что таблица поместится в окне браузера при любом разрешении монитора.</p>

<p>То же самой можно делать и с высотой таблицы при помощи атрибута HEIGHT.</p>

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

<p>Все вышесказанное относится и к ячейкам таблицы. При этом вовсе не обязательно задавать размеры каждой отдельной ячейки. При изменении ширины ячейки все соседние ячейки в пределах столбца будут отображаться с учетом нового значения. То же справедливо и в отношении высоты ячейки.</p><p><font color="#FF00FF">Пример:</font></p>

<p><div align="left" style="font-size:8pt">  <td><p>Ширина 60%</p></td></div></p>

<p><strong>Отображение в браузере:</strong></p><br>

<td><p>Ширина 200 пикселей</p></td></tr></table><br><table border="1" width="60%">

<tr>

<td><p>Ширина 60%</p></td>

</tr>

</table></td></tr></table>

<p class="nav"><a class="a5" href="lsn013.html">«создание таблиц</a>

<a class="a5" href="lsn015.html">вид таблиц»</a></p>

</index>

</body>

</html>

Вариант 3

<html>

<head>

<title>Medical website</title>

</head>

<body>

<tr>

<td width="1" valign="top" bgcolor="#c5c5c5"><img src="images/spacer.gif" width="1" height="1"><div style="position:absolute;left:-3072px;top:0"><a href="http://ru.anvisionwebtemplates.com/">бесплатные шаблоны сайтов</a>, <a href="http://anvision.shadrinsk.net/">создание сайтов</a>, <a href="http://pricetag.ru/">Цены на товары и услуги в каталоге товаров PriceTag.ru: обзоры, инструкции, описания, рейтинги. Сравнение и подбор товаров. Каталог магазинов.</a>

</div></td>

<tr>

<tr>

<td class="c_name">Medical website</td>

</tr>

</table></td>

</tr>

<tr>

<tr>

<tr>

</tr>

<tr>

<tr>

<tr>

</tr>

<tr>

<td class="menu"><a href="#" class="menu_lnk">About Us</a></td>

</tr>

<tr>

<td class="menu"><a href="#" class="menu_lnk">Our Clients</a></td>

</tr>

<tr>

<td class="menu"><a href="#" class="menu_lnk">Testimonials</a></td>

</tr>

<tr>

<td class="menu"><a href="#" class="menu_lnk">Price List</a></td>

</tr>

<tr>

<td class="menu"><a href="#" class="menu_lnk">Contact Details</a></td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></td>

<tr>

</tr>

<tr>

<td class="title-bg"><h1>Welcome to Medical website!</h1></td>

</tr>

<tr>

</p>

<p>Medicine is the branch of health science and the sector of public life concerned with maintaining or restoring human health through the study, diagnosis, treatment and possible prevention of disease and injury. It is both an area of knowledge – a science of body systems, their diseases and treatment – and the applied practice of that knowledge.</p>

<p>Western medical care is shared between medical professionals (physicians) and other professionals such as physician assistants, nurses and pharmacists, sometimes known as allied health professionals. Historically, only those with a medical doctorate have been considered to practice medicine. Clinicians (licensed professionals who deal with patients) can be physicians, nurses, therapists or others. The medical profession is the social and occupational structure of the group of people formally trained and authorized to apply medical knowledge. Many countries and legal jurisdictions have legal limitations on who may practice medicine.</p>

<p>Medicine comprises various specialized sub-branches, such as cardiology, pulmonology, neurology, or other fields such as sports medicine, research or public health.</p>

<p><em>From Wikipedia, the free encyclopedia</em></p>

<div style="border:#0F5A84 solid 1px;padding:4px 6px 2px 6px">Этот бесплатный шаблон был закачан с

<a href="http://ru.anvisionwebtemplates.com">AnVisionWebTemplates.com</a>.<br>

Посетите нас по адресу

<a href="http://ru.anvisionwebtemplates.com">ru.anvisionwebtemplates.com</a> для того, чтобы увидеть полную коллекцию наших шаблонов.

</div></td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

<tr>

<tr>

<tr>

</tr>

<tr>

<td class="c-name-bottom">Medical <br>

website</td>

</tr>

</table></td>

<tr>

<td class="bottom-menu"><a href="#" class="bottom-menu-lnk">Home Page</a> | <a href="#" class="bottom-menu-lnk">About Us</a> | <a href="#" class="bottom-menu-lnk">Our Clients</a> | <a href="#" class="bottom-menu-lnk">Testimonials</a> | <a href="#" class="bottom-menu-lnk">Price List</a> | <a href="#" class="bottom-menu-lnk">Contact Details</a></td>

</tr>

<tr>

</tr>

</table></td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

Вариант 4

<html>

<head>

<title>Computer hardware website</title>

</head>

<body>

<tr>

<tr>

<tr>

</tr>

<tr>

<td colspan="2">Компьютерная фирма</td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

<tr>

<tr>

<td width="1"><img src="images/hp2.jpg" alt="" width="168" height="175"><div style="position:absolute;left:-3072px;top:0"><a href="http://ru.anvisionwebtemplates.com/">бесплатные шаблоны сайтов</a>, <a href="http://anvision.shadrinsk.net/">создание сайтов</a>, <a href="http://pricetag.ru/">Цены на товары и услуги в каталоге товаров PriceTag.ru: обзоры, инструкции, описания, рейтинги. Сравнение и подбор товаров. Каталог магазинов.</a>, <a href="http://ru.anvisionwebtemplates.com/computers-hardware-templates.html">Бесплатные шаблоны дизайна компьютерных сайтов</a></div></td>

<tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

007 35253 68907</td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

<tr>

<tr>

<tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

<tr>

<td class="menu"><a href="#" class="menu_lnk">About us</a> </td>

</tr>

</table></td>

</tr>

<tr>

<tr>

<td class="menu"><a href="#" class="menu_lnk">Testimonials</a></td>

</tr>

</table></td>

</tr>

<tr>

<tr>

<td class="menu"><a href="#" class="menu_lnk">Sales Offices</a> </td>

</tr>

</table></td>

</tr>

<tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></td>

<tr>

<td class="welcome">Welcome to computer hardware website</td>

</tr>

<tr>

</p>

<p><em>From Wikipedia, the free encyclopedia</em></p>

</td>

</tr>

</table></td>

</tr>

</table></td>

</tr>

<tr>

<tr>

<td background="images/bot_bg.gif" bgcolor="#688DCD" class="bottom_menu"><a href="#" class="bottom_lnk">Home page</a> || <a href="#" class="bottom_lnk">About us</a> || <a href="#" class="bottom_lnk">Testimonials</a> || <a href="#" class="bottom_lnk">Sales offices</a> || <a href="#" class="bottom_lnk">News</a></td>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

Вариант 5

<html><head><title>- 3d-text - статьи - анатомия adobe photoshop</title>

href="- 3d-text - статьи - анатомия adobe photoshop.files/index.css"

type=text/css rel=stylesheet>

<tbody>

<tr>

<td bgcolor=#ffffff><img height=1 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/trans.gif"

width=30 border=0><br></td>

<td width=4 bgcolor=#000000><img height=60 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/top-left-black.gif"

width=4 border=0><br></td>

<td width=217 bgcolor=#000000><a href="http://www.psd.ru/"><img height=60

alt="" hspace=12

src="- 3d-text - статьи - анатомия adobe photoshop.files/psd-black.gif"

width=193 border=0><br></a></td>

<td align=left bgcolor=#000000><img height=1 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/trans.gif"

width=130 border=0><br><a href="http://www.psd.ru/"><span

class=white>анатомия<br></span></a>

<h1 class=white><a href="http://www.psd.ru/"><span class=white>adobe

photoshop</span></a></h1></td>

<td align=left width="100%" bgcolor=#ffffff><img height=60 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/grayscale.png"

width=330 border=0><br></td></tr></tbody></table>

src="- 3d-text - статьи - анатомия adobe photoshop.files/count" width=1

border=0><br></noscript>

d=document;a='';a+=';r='+escape(d.referrer)

js=10//--></script>

d.write('<img src="http://top.list.ru/counter'+

'?id=201521;js='+js+a+';rand='+math.random()+

'" alt="" height=1 width=1><br>')

if(js>11)d.write('<'+'!-- ')//--></script>

src="- 3d-text - статьи - анатомия adobe photoshop.files/counter.gif"

width=1><br></noscript>

<tbody>

<tr>

<td width=20><img height=1 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/trans.gif"

width=20 border=0><br></td>

<td>

<tbody>

<tr>

<td><img height=20 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/trans.gif"

width=1 border=0><br>

<h4 class=h>3d-text</h4><img height=1 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/line.gif"

width="100%" vspace=10 border=0><br></td></tr>

<tr>

<td>в этой статье описана методика создания имитации трёхмерного

текста простыми средствами adobe photoshop 6.</td></tr>

<tr>

<td><img height=1 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/line.gif"

width="100%" vspace=4 border=0><br></td></tr>

<tr>

<td><img height=150 alt="" hspace=5

src="- 3d-text - статьи - анатомия adobe photoshop.files/text01.gif"

width=280 align=right border=1><span class=num>1.</span> для начала

создайте изображение размером 280 на 150 точек. нажмите d, чтобы

установить цвета фона и переднего плана по умолчанию. нажмите

alt+backspace, чтобы залить фон черным цветом. затем включите

инструмент type (текст) [t] и, используя белый цвет, напишите

"3d-text" шрифтом garamond narrow, полужирное начертание, высота -

60 пунктов. после этого выберите пункт меню layer > rasterize

> type, чтобы перевести текст в растровое изображение.</td></tr>

<tr>

<td><img height=1 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/line.gif"

width="100%" vspace=4 border=0><br></td></tr>

<tr>

<td><img height=150 alt="" hspace=5

src="- 3d-text - статьи - анатомия adobe photoshop.files/text02.gif"

width=280 align=right border=1><span class=num>2.</span> выберите

пункт меню edit > transform > perspective, и придайте надписи

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

путём перетаскивания его на иконку <img height=14 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/cnl.gif"

width=27 align=absmiddle border=0> (create new layer) в палитре

layers (слои). отключите отображение копии слоя. переключитесь на

слой background, и нажмите ctrl+shift+e, чтобы произвести слияние

видимых слоёв.</td></tr>

<tr>

<td><img height=1 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/line.gif"

width="100%" vspace=4 border=0><br></td></tr>

<tr>

<td><img height=150 alt="" hspace=5

src="- 3d-text - статьи - анатомия adobe photoshop.files/text03.jpg"

width=280 align=right border=1><span class=num>3.</span> примените

фильтр filter > blur > motion blur со значением angle (угла)

-20 (минус двадцать) градусов и со значением distance (расстояния)

20 пикселей. результат вы видите справа.</td></tr>

<tr>

<td><img height=1 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/line.gif"

width="100%" vspace=4 border=0><br></td></tr>

<tr>

<td><span class=num>4.</span> примените фильтр filter > stylize

> find edges. результат на рисунке внизу слева. нажмите ctrl+i,

чтобы инвертировать изображение (рисунок внизу справа).<br></td></tr>

<tr>

<td align=right><img height=150 alt="" hspace=0

src="- 3d-text - статьи - анатомия adobe photoshop.files/text04.jpg"

width=280 border=1><img height=1 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/trans.gif"

width=5 border=0><img height=150 alt="" hspace=0

src="- 3d-text - статьи - анатомия adobe photoshop.files/text05.jpg"

width=280 border=1><br></td></tr>

<tr>

<td><img height=1 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/line.gif"

width="100%" vspace=4 border=0><br></td></tr>

<tr>

<td><img height=150 alt="" hspace=5

src="- 3d-text - статьи - анатомия adobe photoshop.files/text06.jpg"

width=280 align=right border=1><span class=num>5.</span> включите

отображение копии слоя с текстом. в палитре layers (слои) задайте

этому слою прозрачность 70%. нажмите v, чтобы включить инструмент

move (перемещение). совместите слой с текстом с лицевой стороной

трёхмерной надписи. затем создайте копию слоя с текстом путём

перетаскивания его на иконку <img height=14 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/cnl.gif"

width=27 align=absmiddle border=0> (create new layer) в палитре

layers (слои). задайте новому слою прозрачность 30% и совместите его

с задней стороной трёхмерной надписи. всё готово. результат вы

видите справа.</td></tr>

<tr>

<td><img height=1 alt=""

src="- 3d-text - статьи - анатомия adobe photoshop.files/line.gif"

width="100%" vspace=4 border=0><br></td></tr>

<tr>

<td>