Таблицы
Тег TABLE
Тег TABLE чаще используется для визуального форматирования страницы, чем для представления табличного по своей природе материала.
Используются атрибуты height, width, cellspacing, cellpadding, border для форматирования внешнего вида таблицы.
Задания для практического занятия:
1. Определите, с какого тега начинается HTML-код web-страницы, запишите его. Является ли он парным тегом?
2. Запишите все парные и непарные теги, имеющиеся в примере, что они означают.
3. Найдите и запишите все ссылки, имеющиеся в примере, подчеркните путь назначения ссылки.
4.Найдите и запишите 3 примера тегов с атрибутами.
5. Найдите все вставленные в web-страницуизображения.Запишите их код.
6. Имеются ли в коде примера формы? Если есть запишите его код.
7. Имеется ли в коде примера подстановки? Какие? Запишите их все. Что они обозначают?
8. Найдите и запишите коды всех имеющихся таблиц. Подчеркните атрибут border.Что он означает?
9. Имеются ли в коде каскадные таблицы стилей? Запишите их код.
Вариант 1
<html>
<head>
<title>Задания В8</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" href="images/style.css" type="text/css" />
<style type="text/css">
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>
<div id="wrap">
<div id="header-top"></div>
<div id="header-main">
<h1 id="logo-text">Учебный центр "Логарифм Плюс"</h1>
<h2 id="logo-slogan">тел. 8 925 158 36 96</h2>
</div>
<div id="nav">
<div id="nav-bar">
<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=price.html>Цены</a></li>
<li><a href=visitor.html>Контакты</a></li>
</ul>
</div>
</div>
<div id="content-wrap">
<div id="sidebar">
<h1>Часть II</h1>
<div class="left-box">
<ul class="sidemenu">
<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>
<div class="left-box">
<ul class="sidemenu">
<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>
</div>
<div id="content">
<h1>ЕГЭ. Математика</h1>
<p><b>Задание В8</b> </p>
<p><b>Пример 1</b> (МИОО-2010). На рисунке изображен график производной функции f(x), определенной на интервале (-11, 11).
Найдите количество точек экстремума функции f(x) на отрезке [-10; 10].</p>
<img src="images/B8.jpg">
<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>
<div id="footer">
<div align="center">© 2010. Учебный центр "Логарифм Плюс"</a>
</div>
<p><font color="#FF00FF">Пример:</font></p>
<table width="100%" border="1" bordercolor="#0000ff">
<tr>
<td width="50%" valign="top">
<p><strong>HTML-код:</strong></p><br>
<p><div align="left" style="font-size:8pt"><table border="1" width="200"></div></p>
<p><div align="left" style="font-size:8pt"> <tr></div></p>
<p><div align="left" style="font-size:8pt"> <td><p>Ширина 200 пикселей</p></td></div></p>
<p><div align="left" style="font-size:8pt"> </tr></div></p>
<p><div align="left" style="font-size:8pt"></table></div></p>
<p><div align="left" style="font-size:8pt"><br></div></p>
<p><div align="left" style="font-size:8pt"><table border="1" width="60%"></div></p>
<p><div align="left" style="font-size:8pt"> <tr></div></p>
<p><div align="left" style="font-size:8pt"> <td><p>Ширина 60%</p></td></div></p>
<p><div align="left" style="font-size:8pt"> </tr></div></p>
<p><div align="left" style="font-size:8pt"></table></div></p>
</td>
<td width="50%" valign="top">
<p><strong>Отображение в браузере:</strong></p><br>
<table border="1" width="200">
<tr>
<td><p>Ширина 200 пикселей</p></td>
</tr>
</table>
<br>
<table border="1" width="60%">
<tr>
<td> <form>
<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 />
<input type="Submit" value="Отправить" /> <input type="Reset" value="Сброс" /></form> </td>
</tr>
</table>
</td>
</tr></table>
</body>
</html>
Вариант 2
<html>
<head>
<title>Учебник HTML: таблицы html страницы: задание цвета таблицы, графический фон</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" href="../style.css" type="text/css">
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td rowspan="2" bgcolor="#F0E1C8" width="150" height="150"><img src="../sova.jpg" alt="Обучение HTML, Excel, Word. Как сделать свой сайт бесплатно" border="0"></td>
<td height="120" valign="middle" align="center">
<table cellspacing="2" cellpadding="2" border="0" width="100%">
<tr>
<td><p><strong>Microsoft Office</strong></p></td>
<td><p><strong>Сайтостроение</strong></p></td>
<td><p><strong>HTML</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>
<td valign="top">
· <a href="http://on-line-teaching.com/word/index.html">Основы Word</a><br>
</td>
<td valign="top">
· <a href="http://on-line-teaching.com/site/index.html">Как сделать сайт</a><br>
</td>
<td valign="top">
· <a href="http://on-line-teaching.com/html/index.html">Основы HTML</a><br>
</td>
<td valign="top">
· <a href="http://on-line-teaching.com/php/index.html">Основы PHP</a><br>
</td>
<td valign="top">
· <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>
<td valign="top">
<!--
· 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>
<td valign="top">
· <a href="http://on-line-teaching.com/art/index.html">Статьи</a><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#B8984B">
<tr>
<td width="20%" align="left">
<a href="../index.html"><img src="../images/h_home.gif" alt="Главная страница" width="17" height="17" border="0"></a>
<a href="../sitemap.html"><img src="../images/h_map.gif" alt="Карта сайта" width="17" height="17" border="0"></a>
</td>
<td width="80%">
<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>
<table width="100%" border="1" bordercolor="#897132" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="18%" valign="top" bgcolor="#DCB464">
<table width="100%" cellpadding="0" cellspacing="0">
<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><img src="../images/blankbutton.jpg" alt="" width="156" height="10" border="0"> </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>
<tr><td> <form>
<h4>Как будете расплачиваться?</h4>
<table border="1" cellspacing="0" bordercolor="#cceeee">
<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>
<p><input type="submit" value="Отправить" /> <input type="Reset" /></p>
</form></td></tr>
<tr><td><img src="../images/blankbutton.jpg" alt="" width="156" height="10" border="0"> </td></tr>
<tr><td> </td></tr>
<tr><td>
<div align="center"><a href="../art/art18.html">
<img src="../img/submit.jpg" alt="Сабмит сайта в каталоги" width="240" height="172" border="0"></a>
</div>
</td></tr>
<tr><td>
<p class="topic2"> Здесь. Разные продукты от Microsoft - <a href="http://www.winblog.ru/win7/" target="_blank" class="a3">Windows 7</a> Server 2008 и другие. Бесплатно. </p>
<hr>
<br>
<!-- on-line-teaching.com разместите на месте показа блока -->
<div id="mix_block_12949321151294933089"></div>
<br>
<!-- on-line-teaching.com разместите на месте показа блока -->
<div id="mix_block_12949321151294932475"></div>
<br>
</td></tr>
</table>
<index></td>
<td width="64%" valign="top">
<br>
<p class="nav"><a class="a5" href="lsn013.html">«создание таблиц</a>
||
<a class="a5" href="index.html">язык 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>
<table width="100%" border="1" bordercolor="#0000ff">
<tr>
<td width="50%" valign="top">
<p><strong>HTML-код:</strong></p><br>
<p><div align="left" style="font-size:8pt"> <td>1</td></div></p>
<p><div align="left" style="font-size:8pt"> <td>2</td></div></p>
</td>
<td width="50%" valign="top">
<p><strong>Отображение в браузере:</strong></p><br>
<table border="1">
<tr bgcolor="#ff00ff">
<td>1</td>
<td>2</td>
</tr>
<tr bgcolor="#5555ff">
<td>3</td>
<td>4</td>
</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>
<table width="100%" border="1" bordercolor="#0000ff">
<tr>
<td width="50%" valign="top">
<p><strong>HTML-код:</strong></p><br>
<p><div align="left" style="font-size:8pt"><table border="1" cellpadding="5"></div></p>
<p><div align="left" style="font-size:8pt"> <tr></div></p>
<p><div align="left" style="font-size:8pt"> <td align="right">1111<br>2222</td></div></p>
<p><div align="left" style="font-size:8pt"> <td valign="top" align="center">22222</td></div></p>
<p><div align="left" style="font-size:8pt"> </tr></div></p>
<p><div align="left" style="font-size:8pt"> <tr></div></p>
<p><div align="left" style="font-size:8pt"> <td>Нижняя ячейка</td></div></p>
<p><div align="left" style="font-size:8pt"> <td>Нижняя ячейка</td></div></p>
<p><div align="left" style="font-size:8pt"> </tr></div></p>
<p><div align="left" style="font-size:8pt"></table></div></p>
</td>
<td width="50%" valign="top">
<p><strong>Отображение в браузере:</strong></p><br>
<table border="1" cellpadding="5">
<tr>
<td align="right">1111<br>2222</td>
<td valign="top" align="center">22222</td>
</tr>
<tr>
<td>Нижняя ячейка</td>
<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>
<table width="100%" border="1" bordercolor="#0000ff"><tr><td width="50%" valign="top">
<p><strong>HTML-код:</strong></p><br>
<p><div align="left" style="font-size:8pt"><table border="1" width="200"></div></p>
<p><div align="left" style="font-size:8pt"> <td><p>Ширина 60%</p></td></div></p>
<p><div align="left" style="font-size:8pt"> </tr></div></p>
<p><div align="left" style="font-size:8pt"></table></div></p></td>
<td width="50%" valign="top">
<p><strong>Отображение в браузере:</strong></p><br>
<table border="1" width="200"><tr>
<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="boldright"><img src="../img/top.gif" alt="" width="11" height="10" border="0"><a class="a3" href="#Начало страницы">top</a> </p>
<p class="nav"><a class="a5" href="lsn013.html">«создание таблиц</a>
||
<a class="a5" href="index.html">язык HTML</a>
||
<a class="a5" href="lsn015.html">вид таблиц»</a></p>
</index>
</body>
</html>
Вариант 3
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Medical website</title>
<meta name="description" content="Medical website">
<meta name="keywords" content="jewelry, watches">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" bgcolor="#e7e7e7"> </td>
<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>
<td width="750" valign="top"><table width="750" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="1"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1"><img src="images/spacer.gif" alt="" width="21" height="75"></td>
<td width="1"><img src="images/logo.jpg" alt="" width="59" height="75"></td>
<td class="c_name">Medical website</td>
<td width="1"><img src="images/h1.jpg" alt="" width="70" height="75"></td>
<td width="1"><img src="images/spacer.gif" alt="" width="274" height="1"></td>
</tr>
</table></td>
</tr>
<tr>
<td height="100%" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/l1.jpg" alt="" width="192" height="17"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" valign="top" background="images/l3l.gif" class="bgy"><img src="images/l2l.jpg" alt="" width="15" height="144"></td>
<td bgcolor="#E8F7FE"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="menu"><a href="#" class="menu_lnk">Home</a></td>
</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>
<td width="1" valign="top" background="images/l3r.gif" bgcolor="#E8F7FE" class="bgy"><img src="images/l2r.jpg" alt="" width="16" height="144"></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/l-last.jpg" alt="" width="192" height="14"></td>
</tr>
<tr>
<td height="100%" background="images/l-bg-1.gif" class="bgy"> </td>
</tr>
<tr>
<td><img src="images/l-bg-2.jpg" alt="" width="192" height="121"></td>
</tr>
</table></td>
<td width="1" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1" height="1"><img src="images/p2.jpg" alt="" width="558" height="161"></td>
</tr>
<tr>
<td class="title-bg"><h1>Welcome to Medical website!</h1></td>
</tr>
<tr>
<td height="100%" class="body_txt"><p>
</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>
<td height="1" bgcolor="#4d96af"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1"><img src="images/spacer.gif" alt="" width="26" height="54"></td>
<td width="1" valign="middle"><img src="images/bottom-logo.jpg" alt="" width="41" height="42"></td>
<td width="1"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" alt="" width="125" height="1"></td>
</tr>
<tr>
<td class="c-name-bottom">Medical <br>
website</td>
</tr>
</table></td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<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>
<td class="bottom_addr">© 2006 Company Name. All Rights Reserved</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="1" valign="top" bgcolor="#c5c5c5"><img src="images/spacer.gif" width="1" height="1"></td>
<td valign="top" bgcolor="#e7e7e7"> </td>
</tr>
</table>
</body>
</html>
Вариант 4
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Computer hardware website</title>
<meta name="description" content="Computer hardware website">
<meta name="keywords" content="computer, hardware, pc">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1"><img src="images/hname1.jpg" width="224" height="47"></td>
<td valign="top" background="images/hname_bg.gif" class="norepeat"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" height="1"><img src="images/spacer.gif" width="46" height="1"></td>
<td width="1" height="1"><img src="images/spacer.gif" width="358" height="1"></td>
</tr>
<tr>
<td colspan="2">Компьютерная фирма</td>
</tr>
</table></td>
<td width="100%" background="images/hhbg.gif" class="bgx"> </td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1"><img src="images/hp1.jpg" width="224" height="175"></td>
<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>
<td width="1"><img src="images/hp3.jpg" width="157" height="175"></td>
<td width="1" valign="top" background="images/hp4.jpg" class="norepeat"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/spacer.gif" width="1" height="30"></td>
</tr>
</table></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="196" height="70"></td>
</tr>
<tr>
<td class="call_us">Call us on<br>
007 35253 68907</td>
</tr>
</table></td>
<td background="images/hp5[bg].jpg" class="bgx"><p> </p>
<p> </p></td>
</tr>
</table></td>
</tr>
<tr>
<td height="100%" valign="top"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="1" height="100%" valign="top" background="images/sub_bot.gif" bgcolor="#c2ddfe" class="sub"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td background="images/btn_menu.gif" class="norepeat"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="menu"><a href="#" class="menu_lnk">Home page</a> </td>
<td width="1"><img src="images/spacer.gif" width="30" height="18"></td>
</tr>
</table></td>
</tr>
<tr>
<td background="images/btn_menu.gif" class="norepeat"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="menu"><a href="#" class="menu_lnk">About us</a> </td>
<td width="1"><img src="images/spacer.gif" width="30" height="18"></td>
</tr>
</table></td>
</tr>
<tr>
<td background="images/btn_menu.gif" class="norepeat"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="menu"><a href="#" class="menu_lnk">Testimonials</a></td>
<td width="1"><img src="images/spacer.gif" width="30" height="18"></td>
</tr>
</table></td>
</tr>
<tr>
<td background="images/btn_menu.gif" class="norepeat"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="menu"><a href="#" class="menu_lnk">Sales Offices</a> </td>
<td width="1"><img src="images/spacer.gif" width="30" height="18"></td>
</tr>
</table></td>
</tr>
<tr>
<td background="images/btn_menu.gif" class="norepeat"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="menu"><a href="#" class="menu_lnk">News</a></td>
<td width="1"><img src="images/spacer.gif" width="30" height="18"></td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="186" height="1"></td>
</tr>
</table></td>
<td valign="top" bgcolor="#e1e6f8"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="welcome">Welcome to computer hardware website</td>
</tr>
<tr>
<td height="100%" class="base_txt"><p>
</p>
<p><em>From Wikipedia, the free encyclopedia</em></p>
</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1" bgcolor="#688DCD"><img src="images/bot_angle.gif" width="186" height="60"></td>
<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>
<meta http-equiv=content-type content="text/html; charset=windows-1251"><link
href="- 3d-text - статьи - анатомия adobe photoshop.files/index.css"
type=text/css rel=stylesheet>
<meta content="mshtml 6.00.2800.1106" name=generator></head>
<body text=#000000 bgcolor=#ffffff leftmargin=0 topmargin=0><br>
<table cellspacing=0 cellpadding=0 width="100%" border=0>
<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><!-- hotlog -->
<noscript><img height=1
src="- 3d-text - статьи - анатомия adobe photoshop.files/count" width=1
border=0><br></noscript><!-- /hotlog --><!--toplist counter-->
<script language=javascript><!--
d=document;a='';a+=';r='+escape(d.referrer)
js=10//--></script>
<script language=javascript><!--
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>
<noscript><img height=1 alt=""
src="- 3d-text - статьи - анатомия adobe photoshop.files/counter.gif"
width=1><br></noscript>
<table cellspacing=0 cellpadding=0 width="100%" border=0>
<tbody>
<tr>
<td width=20><img height=1 alt=""
src="- 3d-text - статьи - анатомия adobe photoshop.files/trans.gif"
width=20 border=0><br></td>
<td>
<table cellspacing=10 cellpadding=0 width="100%" align=center border=0>
<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>
<p align=right><i>михаил сергеенко (<a
href="http://www.sergeenko.ru/"
target=_blank>http://www.sergeenko.ru/</a>)</i></p></td></tr>
<tr>
<td><a href="http://www.psd.ru/actions/zip/3d-text.zip">скачать
action 3d-text</a></td></tr>
<tr>
<td align=middle><img height=1 alt=""
src="- 3d-text - статьи - анатомия adobe photoshop.files/line.gif"
width="100%" vspace=4 border=0><br><a
href="http://www.psd.ru/article/">вернуться к списку
статей</a></td></tr></tbody></table></td></tr></tbody></table></body></html>
Контрольные вопросы
1. В чем состоит назначение тегов?
2. Какие теги бывают? Запишите определения.
3. Какие виды подстановок бывает? Запишите примеры.
Дата добавления: 2014-12-12; просмотров: 1225;