Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΊΠ½ΠΈΠ³ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½ Π½Π° Bookidrom.ru! БСсплатныС ΠΊΠ½ΠΈΠ³ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ»ΠΈΠΊΠ΅
Π˜Π³ΠΎΡ€ΡŒ ΠšΠ²ΠΈΠ½Ρ‚ - HTML, XHTML ΠΈ CSS Π½Π° 100%
Π±Π΅Π»Ρ‹ΠΉ сСпиа сСрый

Π§ΠΈΡ‚Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½ Β«HTML, XHTML ΠΈ CSS Π½Π° 100%Β». Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° 14

Автор Π˜Π³ΠΎΡ€ΡŒ ΠšΠ²ΠΈΠ½Ρ‚

β€’ <table valign=bottom/middle/top> β€“ элСмСнтов Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π²Π½ΠΈΠ·Ρƒ/ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ/Π²Π²Π΅Ρ€Ρ…Ρƒ (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ);

β€’ <tr valign=bottom/middle/top> β€“ элСмСнтов строки Π²Π½ΠΈΠ·Ρƒ/ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ/ Π²Π²Π΅Ρ€Ρ…Ρƒ;

β€’ <th valign=bottom/middle/top> β€“ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π²Π½ΠΈΠ·Ρƒ/ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ/ Π²Π²Π΅Ρ€Ρ…Ρƒ;

β€’ <td valign=bottom/middle/top> β€“ Π΄Π°Π½Π½Ρ‹Ρ… Π² ячСйкС Π²Π½ΠΈΠ·Ρƒ/ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ/ Π²Π²Π΅Ρ€Ρ…Ρƒ.

Π’ листингС 3.6 ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… комбинациях описанных Π²Ρ‹ΡˆΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² форматирования Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ содСрТимого ячССк (рис. 3.11).

Листинг 3.6. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования выравнивания Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ содСрТимого ячССк

<html>

<head>

<title>ΠŸΡ€ΠΎΡΡ‚Π°Ρ HTML-Ρ‚Π°Π±Π»ΠΈΡ†Π°</title>

</head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="0"width= "400" height="150" align=center>

<caption>НаимСнованиС Ρ‚ΠΎΠ²Π°Ρ€Π°</caption>

<tr><th>Π’ΠΎΠ²Π°Ρ€ </th><th>Код</th><th>ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ</th><th>Π¦Π΅Π½Π° </th></tr>

<tr valign=bottom align=center>

<td>КлСй</td><td>028</td><td>190 ΡˆΡ‚ </td><td>12,2 Ρ€ΡƒΠ±</td></tr>

<tr valign=bottom align=center>

<td>Π‘ΠΊΠΎΡ‚Ρ‡</td><td>058</td><td>120 ΡˆΡ‚ </td><td>4,6 Ρ€ΡƒΠ± </td></tr>

<tr valign=bottom align=center>

<td>Ластик</td><td>986</td><td>100 ΡˆΡ‚ </td><td>2,3 Ρ€ΡƒΠ± </td></tr>

</table>

</body>

</html>

Рис. 3.11. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования выравнивания Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ содСрТимого ячССк

3.8. ОбъСдинСниС ячССк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹

На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ встрСчаСтся большоС количСство Ρ‚Π°Π±Π»ΠΈΡ†, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ΄Π½Π° ячСйка ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ Π² сСбС нСсколько ячССк ΠΏΠΎ высотС ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π΅ (см. рис. 3.2). Π’ HTML ячСйки ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² colspan ΠΈ rowspan. Атрибут colspan опрСдСляСт количСство ячССк, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ простираСтся данная ячСйка ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π° rowspan – ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

На рис. 3.12 ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π° Ρ‚Π°Π±Π»ΠΈΡ†Π° с ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Π½Ρ‹ΠΌΠΈ ячСйками. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ находится Π² ячСйкС, ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΡŽΡ‰Π΅ΠΉ всС Ρ‚Ρ€ΠΈ ячСйки строки. Π’Π°Π±Π»ΠΈΡ†Π° содСрТит Π΅Ρ‰Π΅ Π΄Π²Π΅ ячСйки, каТдая ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ Π΄Π²Π΅ ячСйки ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Код Ρ‚Π°ΠΊΠΎΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ Π² листингС 3.7.

Рис. 3.12. Π’Π°Π±Π»ΠΈΡ†Π° с ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Π½Ρ‹ΠΌΠΈ ячСйками

Листинг 3.7. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² объСдинСния ячССк

<html>

<head>

<title>HTML-Ρ‚Π°Π±Π»ΠΈΡ†Π°</title>

<head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="5" >

<tr align=center><th colspan=3>Π―Ρ‡Π΅ΠΉΠΊΠ° ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ Π² сСбС всС ячСйки строки </th></tr>

<tr align=center><td rowspan=2>Π―Ρ‡Π΅ΠΉΠΊΠ° Π½Π° Π΄Π²Π΅ строки </td>

<td>Π―Ρ‡Π΅ΠΉΠΊΠ° 2Ρ…2</td><td>Π―Ρ‡Π΅ΠΉΠΊΠ° 2Ρ…3</td></tr>

<tr align=center><td>Π―Ρ‡Π΅ΠΉΠΊΠ° 3Ρ…2</td><td>Π―Ρ‡Π΅ΠΉΠΊΠ° 3Ρ…3</td></tr>

<tr align=center><td rowspan=2>Π―Ρ‡Π΅ΠΉΠΊΠ° Π½Π° Π΄Π²Π΅ строки</td>

<td>Π―Ρ‡Π΅ΠΉΠΊΠ° 4Ρ…2</td><td>Π―Ρ‡Π΅ΠΉΠΊΠ° 4Ρ…3</td></tr>

<tr align=center><td>Π―Ρ‡Π΅ΠΉΠΊΠ° 5Ρ…2</td><td>Π―Ρ‡Π΅ΠΉΠΊΠ° 5Ρ…3</td></tr>

</table>

</body>

</html>

3.9. Установка Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ рисунка ячСйки

Π’ HTML Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ установки Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ рисунка. Благодаря Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρƒ bgcolor ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ содСрТимого ячСйки, строки, Π³Ρ€ΡƒΠΏΠΏΡ‹ столбцов, Π³Ρ€ΡƒΠΏΠΏΡ‹ строк, Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ <td bgcolor= "#000000">, Ρ‡Π΅Ρ€Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽΡΡ с конструкциСй <td></td> (со стандартным Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ ячССк), ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π½ΡƒΡŽ Π½Π° рис. 3.13.

Рис. 3.13. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ использования Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° bgcolor

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° background ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ графичСский Ρ„ΠΎΠ½ ячСйки ΠΈΠ»ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ, ΡƒΠΊΠ°Π·Π°Π² ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ. НапримСр, <td background="img\fon.gif">.

Если Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°ΡŽΡ‚ Π³Π°Π±Π°Ρ€ΠΈΡ‚Ρ‹ ячСйки ΠΈΠ»ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, для ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ½ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΎ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΎΠ±Ρ€Π΅Π·Π°Π΅Ρ‚ Π΅Π³ΠΎ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΡƒΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΎΡΡŒ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°.

3.10. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹, ΠΊΠΎΠ³Π΄Π° Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ячСйки, Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ (рис. 3.14). Π—Π΄Π΅ΡΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ colspan бСссилСн.

Рис. 3.14. БлоТная HTML-Ρ‚Π°Π±Π»ΠΈΡ†Π°

ΠšΠΎΠΌΠ°Π½Π΄Ρ‹, ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ созданиСм ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Ρ‚Π°Π±Π»ΠΈΡ†, Π΄ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ Π²Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ элСмСнта TABLE Π²Π½ΡƒΡ‚Ρ€ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ, поэтому Π² ячСйкС ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ с нСзависимой структурой.

Π’ листингС 3.8 ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½ ΠΊΠΎΠ΄ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π½ΠΎΠΉ Π½Π° рис. 3.13. Π—Π΄Π΅ΡΡŒ примСняСтся ΠΌΠ΅Ρ‚ΠΎΠ΄ влоТСния ΠΎΠ΄Π½ΠΎΠΉ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π² Π΄Ρ€ΡƒΠ³ΡƒΡŽ. Π’Π½Π΅ΡˆΠ½ΡΡ Ρ‚Π°Π±Π»ΠΈΡ†Π° состоит ΠΈΠ· Π΄Π²ΡƒΡ… строк. ΠŸΠ΅Ρ€Π²Π°Ρ строка содСрТит Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ ячСйки, вторая – Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ со своСй нСзависимой структурой. ВнутрСнняя Ρ‚Π°Π±Π»ΠΈΡ†Π°, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, содСрТит Π΄Π²Π΅ строки, каТдая ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… содСрТит ΠΏΠΎ Ρ‚Ρ€ΠΈ ячСйки.

Листинг 3.8. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, которая содСрТит Π΅Ρ‰Π΅ ΠΎΠ΄Π½Ρƒ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ

<html>

<head>

<title>HTML-Ρ‚Π°Π±Π»ΠΈΡ†Π°</title>

<head>

<body>

<table border="4" bordercolor="#000000" cellspacing="0" cellpadding="10">

<caption>Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†</caption>

<tr><td> 1x1</td><td>1x2</td><td>1x3</td><td>1x4</td></tr>

<tr><td colspan=4>

<table border="3" bordercolor="#000000" cellspacing="0" cellpadding="10">

<tr><td> 1x1</td><td>1x2</td><td>1x3</td></tr>

<tr><td> 2x1</td><td>2x2</td><td>2x3</td></tr>

</table>

</td>

</tr>

</table>

</body>

</html>

РСзюмС

Π’ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ слСдуСт ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ваТнСйшСй Ρ‡Π°ΡΡ‚ΡŒΡŽ любой Π²Π΅Π±-страницы. Для контроля Π½Π°Π΄ элСмСнтами Π²Π΅Π±-ΡƒΠ·Π»Π° Ρ„ΠΈΡ€ΠΌΡ‹ Microsoft (www.microsoft.com) ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹.

Π£ΠΌΠ΅Π»ΠΎΠ΅ ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ с Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ позволяСт ТСстко ΡΠ²ΡΠ·Π°Ρ‚ΡŒ тСкстовыС Π±Π»ΠΎΠΊΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° с Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°ΠΌΠΈ. ИспользованиС Ρ‚Π°Π±Π»ΠΈΡ† ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ страницС Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ быстрСС, Π½ΠΎ большиС рисунки слСдуСт Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ Π½Π° нСсколько ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ…. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π½Π°Ρ€ΡƒΡˆΠΈΡ‚ΡŒ Ρ†Π΅Π»ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ всСго рисунка, Π΅Π³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ части слСдуСт Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π² ячСйках Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π»ΠΈ Ρ†Π΅Π»Ρ‹ΠΉ рисунок.

ИспользованиС Ρ‚Π°Π±Π»ΠΈΡ† Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ всю HTML-страницу Π½Π° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ части: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ страницы, мСсто для Ρ€Π΅ΠΊΠ»Π°ΠΌΡ‹, панСль инструмСнтов ΠΈ Ρ‚. Π΄. ПодобноС Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ страницы даст Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ быстро ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ «остов» сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания Π΄Ρ€ΡƒΠ³ΠΈΡ… страниц.

Π“Π»Π°Π²Π° 4

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ°

4.1. ВстраиваниС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

4.2. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ°

ΠŸΡ€ΠΈ создании сайта Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π±Π΅Π· использования Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² Π²Ρ€ΠΎΠ΄Π΅ Flash-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ. Π’Π°ΠΊ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Π²ΠΈΠ΄ сайта, ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ ярчС, интСрСснСС ΠΈ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ для посСтитСлСй. Однако Π½Π΅Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎΠ΅ использованиС ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ° Π½Π° страницС способно ΠΏΠΎΠ³ΡƒΠ±ΠΈΡ‚ΡŒ самыС Π»ΡƒΡ‡ΡˆΠΈΠ΅ ΠΈ интСрСсныС сайты. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π² Π΄Π°Π½Π½ΠΎΠΉ Π³Π»Π°Π²Π΅, ΠΏΠΎΠΌΠΈΠΌΠΎ тСхничСских аспСктов встраивания ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ°, Π±ΡƒΠ΄ΡƒΡ‚ освСщСны эстСтичСскиС аспСкты ΠΈ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹, связанныС с удобством для посСтитСля.

4.1. ВстраиваниС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

НачнСм с добавлСния изобраТСния, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это самый простой для добавлСния ΠΈ самый распространСнный ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½Ρ‹ΠΉ элСмСнт, Π²ΡΡ‚Ρ€Π΅Ρ‡Π°ΡŽΡ‰ΠΈΠΉΡΡ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. Π£ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΌΠ½ΠΎΠ³ΠΎ плюсов: ΡΡ‚Π°Ρ‚ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ, нСбольшиС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ„Π°ΠΉΠ»ΠΎΠ² (ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ‚ΠΈΠΏΠΎΠ² ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠ°-содСрТимого), ΡˆΠΈΡ€ΠΎΠΊΠ°Ρ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ примСнСния. БСйчас Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ сайт Π±Π΅Π· ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ. Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π½Π°ΡƒΡ‡ΠΈΠ»ΠΈΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π°Π·ΡƒΠΌΠ½ΠΎ. Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ скорости соСдинСний ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ большоС количСство Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ Π½Π° страницС. Однако Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΌΠ΅Ρ€Ρƒ, сайт Π½Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ пустым, Π½ΠΎ Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя Π½Π΅ стоит ΠΈ Π·Π»ΠΎΡƒΠΏΠΎΡ‚Ρ€Π΅Π±Π»ΡΡ‚ΡŒ рисунками. Π“Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎΠ΅ ΠΈ умСстноС использованиС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сайт красивым, интСрСсным ΠΈ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ. Π‘Ρ‹Π²Π°ΡŽΡ‚ ситуации, ΠΊΠΎΠ³Π΄Π° Π±Π΅Π· большого количСства ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΡ€ΠΈ создании Π³Π°Π»Π΅Ρ€Π΅ΠΈ, Ρ„ΠΎΡ‚ΠΎΠ°Π»ΡŒΠ±ΠΎΠΌΠ°, ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π°. Π’ Ρ‚Π°ΠΊΠΈΡ… случаях ΡƒΠΌΠ΅Π»ΠΎΠ΅ распрСдСлСниС Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΏΠΎ сайту ΠΈ удобная навигация ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈ Ρ‚Ρ€Π°Ρ„ΠΈΠΊ. ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ создании сайта Π±Π΅Π· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π²Π°ΠΌ Π½Π΅ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ, этот ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ являСтся самым простым, ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ ΠΈ распространСнным.

Для встраивания ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ примСняСтся элСмСнт IMG. Он ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ src, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ адрСс встраиваСмого изобраТСния.

ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ записи для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ: <IMG src=" image.jpg">. ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΉ записи Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° экранС Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

АдрСс изобраТСния ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½ Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠΎΠ³Π΄Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° находится Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΌ сСрвСрС (http://www.mypage.ru/IMG/myfoto.jpg)), Π»ΠΈΠ±ΠΎ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ мСстополоТСния вашСго Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ссли ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° находится Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ (IMG/myfoto.jpg)). Π’ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ случаС для указания Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΠΈ, находящСйся Π²Ρ‹ΡˆΠ΅ Π² ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ΠΎΠ², ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ символы../ (ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΈΠ· ΠΏΠ°ΠΏΠΊΠΈ DOC, находящСйся Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅ с ΠΏΠ°ΠΏΠΊΠΎΠΉ IMG, Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ:. /IMG/myfoto.jpg).

Π’ листингС 4.1 продСмонстрирован ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ встраивания ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

Листинг 4.1. ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ встраиваниС изобраТСния Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚

<html>

<head>

<title>ВстраиваниС изобраТСния</title>

</head>

<body>

<img src="image.jpg"/>

</body>

</html>

На рис. 4.1 ΠΏΠΎΠΊΠ°Π·Π°Π½ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ ΠΊΠΎΠ΄Π° ΠΈΠ· листинга 4.1 – простоС встраиваниС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π±Π΅Π· рСдактирования.

Рис. 4.1. Вставка изобраТСния