Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ„ΠΎΠ½ΠΎΠΌ Π² html: Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок Π½Π° Π²Π΅Π±-страницу?

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ Π² HTML-ΠΏΠΈΡΡŒΠΌΠ°Ρ…

РассказываСм ΠΎΠ±ΠΎ всСх способах Ρ€Π°Π±ΠΎΡ‚Ρ‹ с фоном ΠΏΡ€ΠΈ создании рассылки.

Письма на стандартном #ffffff β€” Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½ΠΎ, ΡƒΠ΄ΠΎΠ±Π½ΠΎ, Ρ‡ΠΈΡ‚Π°Π΅ΠΌΠΎ, Π΄Π°Β ΠΈΒ Π²ΠΈΠ΄Π½ΠΎ во всСх ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΠΈΠΊΠ°Ρ…. Но что, Ссли Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ±ΠΎΠ΄Ρ€Π΅Π΅ ΠΈΠ»ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ„ΠΎΠ½ΠΎΠΌ на всё письмо?Β 

Π’ΠΎΡ‚ нСсколько простых совСтов ΠΎΒ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ„ΠΎΠ½ Π²Β HTML-ΠΏΠΈΡΡŒΠΌΠ°Ρ….

Как Β«Ρ€Π°ΡΠΊΡ€Π°ΡΠΈΡ‚ΡŒΒ» Ρ„ΠΎΠ½ ΡΒ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML

Π¦Π²Π΅Ρ‚Π° Π²Β ΠΏΠΈΡΡŒΠΌΠ°Ρ… ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ Π²Β Π²ΠΈΠ΄Π΅ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹Ρ… чисСл Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° HEX (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, #444444). Π’Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ сокращСния HEX ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ нС всС ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΠΈΠΊΠΈ, поэтому их в вёрсткС рассылок ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нС стоит. Π¦Π²Π΅Ρ‚Π° Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° RGB Ρ‚ΠΎΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅Β Π±ΡƒΠ΄ΡƒΡ‚.

ΠŸΡ€ΠΈ вёрсткС HTML-писСм Ρ„ΠΎΠ½ Π·Π°Π΄Π°ΡŽΡ‚ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ background=»» ΠΈΒ bgcolor=»» для Ρ‚Π΅Π³Π° <table>.Β 

НС всС ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Π΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ„ΠΎΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ прописан Ρ‡Π΅Ρ€Π΅Π· стили CSS. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ свойство background ΠΈΒ Π΅Π³ΠΎ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄Π½Ρ‹Π΅ (background-image, background-visibility, background-size) Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅Β ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ.

Β <head>
Β Β <meta charset=Β»utf-8β€³>
Β Β <title>Π¦Π²Π΅Ρ‚ тСкста ΠΈΒ Ρ„ΠΎΠ½Π°</title>
Β Β <style>
Β Β Β .colortext {
Β Β Β Β background-color: #ffe; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
Β Β Β Β color: #930; /* Π¦Π²Π΅Ρ‚ тСкста */
Β Β Β }
Β Β </style>
Β </head>
Β <body>
Β Β <form method=Β»postΒ» action=Β»handler.phpΒ»>
Β Β Β <p><input type=Β»textΒ» class=Β»colortextΒ»>
Β Β Β <input type=Β»submitΒ» name=Β»SubmitΒ» value=Β»ΠŸΠΎΡΠ»Π°Ρ‚ΡŒΒ»></p>
Β Β </form>
Β </body>
</html>

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΎΠ΄ΠΈΠ½ Ρ†Π²Π΅Ρ‚

Если письмо хочСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠΌΡΡ, Π½ΠΎΒ ΠΏΡ€ΠΈ этом Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π΅Ρ€Π΅Π½Π½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΠ½ письма Π½Π΅Β ΠΏΠΎΠΌΠ΅ΡˆΠ°Π΅Ρ‚ Ρ‡Ρ‚Π΅Π½ΠΈΡŽ β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠ΄ΠΈΠ½ Ρ†Π²Π΅Ρ‚.

Если ΠΌΠΎΠ½ΠΎΡ…Ρ€ΠΎΠΌ β€” это ΠΏΡ€ΠΎ вас, Ρ‚ΠΎΒ ΠΌΡ‹Β Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒ изобраТСния и прописанный ΠΊΠΎΠ΄ для Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π°.

Письма, состоящиС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ·Β ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ часто ΠΏΠΎΠΏΠ°Π΄Π°ΡŽΡ‚ в спам ΠΈΠ»ΠΈ вовсС Π½Π΅Β ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ, Ссли ΡƒΒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Ρ‘Π½ просмотр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π²Β ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΠΎΠΌ ящикС.

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ выглядит письмо ΠΎΡ‚Β ΠœΠΎΠΎ, Π±Π΅Π· ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π€ΠΎΠ½ ΠΏΠΎΠ΄ тСкстом остался на мСстС, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ прописан Π²Β ΠΊΠΎΠ΄Π΅, Π°Β ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ изобраТСния письма Π±Ρ‹Π»ΠΈ Π²Β jpg.Β 

Π§Ρ‚ΠΎΠ±Ρ‹ вашС письмо выглядСло Ρ‚Π°ΠΊ ΠΆΠ΅Β ΠΎΡ€Π³Π°Π½ΠΈΡ‡Π½ΠΎ, ΠΊΠ°ΠΊ ΡƒΒ ΠœΠΎΠΎ, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ элСмСнта:

  • Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ;
  • Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° HTML-Π±Π»ΠΎΠΊΠ° с тСкстом;
  • Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° alt, Ссли изобраТСния Π½Π΅Β ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ.

Если Π²Ρ‹Β Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ на аутсорсС, Π΄ΠΎΒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π½Π΅Β Π΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, Π°Β Π³Π°Ρ€ΠΌΠΎΠ½ΠΈΡ‡Π½ΠΎΠ΅ письмо Π΄Π΅Ρ‚ΡŒ хочСтся, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π²ΠΎΡ‚ этот сСрвис. ΠžΠ½Β ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Β«Π²Ρ‹Ρ‚Π°Ρ‰ΠΈΡ‚ΡŒΒ» всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Ρ†Π²Π΅Ρ‚Π° ΠΈΠ·Β ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π²Β ΡƒΠΆΠ΅ HEX-Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅.

НСсколько Ρ†Π²Π΅Ρ‚ΠΎΠ²

Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π΅Β Ρ‚ΠΎΠ»ΡŒΠΊΠΎ красоты, но и для упорядочивания Π±Π»ΠΎΠΊΠΎΠ² письма. Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ подходят для создания «иСрархичности» ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈΒ Π·Π΄ΠΎΡ€ΠΎΠ²ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ΠΌ читатСля.

Если хочСтся ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΠΈ письма Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°, Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Ρ„ΠΎΠ½ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ background=»» ΠΈΒ bgcolor=»» Π²Β <table> для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ·Β Π½ΠΈΡ….

БовсСм простой способ


Если Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ Π²Ρ‹Β Π·Π°ΠΏΡƒΡ‚Π°Π»ΠΈΡΡŒ Π²Β ΠΊΠΎΠ΄Π°Ρ…, Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ к конструкторам писСм, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Letteros.Β 

Π—Π΄Π΅ΡΡŒ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Π°ΡΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π²Β ΠΎΠ΄ΠΈΠ½ ΠΊΠ»ΠΈΠΊ. А вторым ΠΊΠ»ΠΈΠΊΠΎΠΌ, Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ Π²Β ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ссли это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ в качСствС Ρ„ΠΎΠ½Π° для письма

НСкоторыС конструкторы ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ изобраТСния Ρ„ΠΎΠ½ΠΎΠΌ Π±Π»ΠΎΠΊΠΎΠ² письма. Π’Π°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΒ Π²Β Letteros.

МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ и для всСго письма. Но Сго Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π½ΠΎ подписчикам Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с дСсктопа. ΠΠ°Β Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств эти изобраТСния Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅Β ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅, ΠΊΠ°ΠΊ это Π΄Π΅Π»Π°ΡŽΡ‚ EmailMatrix:

Благодаря изобраТСниям Π½Π°Β Ρ„ΠΎΠ½Π΅ всСго письма ваши рассылки Π±ΡƒΠ΄ΡƒΡ‚ Π±ΠΎΠ»Π΅Π΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΌΠΈ и тСматичСскими.Β 

На Ρ‚Π΅Π»ΠΎ письма такая ΠΌΠ°ΡΡˆΡ‚Π°Π±Π½Π°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½ΠΈΠΊΠ°ΠΊ нС повлияСт. Вы всё Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΏΠΎΠ²Π΅Ρ€Ρ… Π½Π΅Ρ‘ Π±Π°Π½Π½Π΅Ρ€Ρ‹, Ρ‚ΠΎΠ²Π°Ρ€Π½Ρ‹Π΅ раскладки, Ρ€Π°ΠΌΠΊΠΈ, Ρ„ΡƒΡ‚Π΅Ρ€Ρ‹, Ρ…Π΅Π΄Π΅Ρ€Ρ‹ ΠΈΒ Π»ΡŽΠ±Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π±Π»ΠΎΠΊΠΈ.

ΠŸΠΎΠ΄Π±ΠΈΡ€Π°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π°Β Ρ„ΠΎΠ½, Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ о стыках. Π­Ρ‚ΠΎ ΠΊΠ°ΠΊ с обоями Π²Β ΠΊΠΎΠΌΠ½Π°Ρ‚Π΅: ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ, Ссли ΠΎΡ‚ΠΎΠΉΡ‚ΠΈ подальшС ΠΈΒ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ на всю ΠΊΠΎΠΌΠ½Π°Ρ‚Ρƒ Π²Β Ρ†Π΅Π»ΠΎΠΌ.Β 

На этой ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ ΠΎΡ‚Β Campaign Monitor Π²Ρ‹Β ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ Β«ΠΏΡƒΠ»Π΅Π½Π΅ΠΏΡ€ΠΎΠ±ΠΈΠ²Π°Π΅ΠΌΡ‹ΠΉΒ» Ρ„ΠΎΠ½ для вашСй рассылки ΠΈΒ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ²Π΅Ρ€Π΅Π½Π½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Β Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ на всСх ОБ. Π—Π΄Π΅ΡΡŒ ТС прописаны HEX-Ρ†Π²Π΅Ρ‚Π° изобраТСния для ΠΊΠΎΠ΄Π° и сам кусочСк ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ вставляСтся Π²Β <body>.

ΠŸΡ€Π°Π²ΠΈΠ»Π° Ρ€Π°Π±ΠΎΡ‚Ρ‹ с фоном-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉΒ 

ΠŸΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π²Β ΠΈΠΌΠ΅ΠΉΠ»Ρ‹ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ ΠΎΒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… особСнностях.

  • Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Β Π²Ρ‹Π±ΠΈΡ€Π°Π΅Ρ‚Π΅, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ тСматичСскими ΠΈΒ Π½Π΅Β ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ от основного сообщСния письма.Β 
  • ДобавляйтС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ для всСго ΠΈΠΌΠ΅ΠΉΠ»Π°. Π­Ρ‚ΠΎ ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, в то врСмя ΠΊΠ°ΠΊ Ρ€Π°Π·Π½Ρ‹Π΅ изобраТСния Ρ‚ΠΎΠ»ΡŒΠΊΠΎ «намусорят» в письмС.
  • Если ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ конструктор, Π²ΠΊΠ»ΡŽΡ‡Π°ΠΉΡ‚Π΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ изобраТСния. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ„ΠΎΠ½ Π½Π°Β ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… и дСсктопных устройствах.

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ваш HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ β€” Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Mark Down

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² свой HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ сначала ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ мСстополоТСниС изобраТСния. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ это дСлаСтся ΠΏΡƒΡ‚Π΅ΠΌ установки свойства CSS background-image. Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ мСстополоТСниС изобраТСния ΡƒΠΊΠ°Π·Π°Π½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS-свойство background-size для управлСния ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ изобраТСния. Бвойство background-size ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ значСния, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ auto, cover ΠΈ contains. Если Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ большС, Ρ‡Π΅ΠΌ элСмСнт HTML, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΎΠ½ΠΎ примСняСтся, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ€Π΅Π·Π°Π½ΠΎ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ это, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ CSS-свойство background-clip. Бвойство background-clip ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ряд Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ border-box ΠΈ padding-box. НаконСц, CSS-свойство background-repeat ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для указания Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Бвойство background-repeat ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ряд Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€-x.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π»ΠΎΡΡŒ Π½Π° всю страницу Π±Π΅Π· повторСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ CSS? Если Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ background-size Π²ΠΊΠ»ΡŽΡ‡Π΅Π½, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ растянСт страницу ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΈ высотС. Из-Π·Π° CSS2 Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π‘Π°ΠΌΡ‹ΠΉ простой способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это β€” ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ измСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€. Div Π±ΡƒΠ΄Π΅Ρ‚ располоТСн Π·Π° страницСй, ΠΏΡ€ΠΈ нСобходимости занимая всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ страницы. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Ρ‚Π΅Π³ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ мСньшС, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ 100%, ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΈΠ»ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ, Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎΡΡŒ. Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΈΠ»ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹Ρ… Ρ„ΠΎΠ½Π°Ρ… см. http://www.webdesignerwall.com/trends/80-large-background-websites/.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана?

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ соотвСтствовало Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ вашСго экрана, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS3 для установки Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Ρ„ΠΎΠ½Π°. Бвойство background-size ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для указания Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π»ΠΈΠ±ΠΎ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ, Π»ΠΈΠ±ΠΎ ΠΏΠΎΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ. Если Π²Ρ‹ установитС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΒ», Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈ ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ области содСрТимого. Если Π²Ρ‹ установитС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для покрытия, Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈ ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ div ΠΈΠ»ΠΈ любой HTML-элСмСнт Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ уровня полноэкранным? Π•ΡΡ‚ΡŒ нСсколько способов ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это, Π½ΠΎ Π½Π° этот Ρ€Π°Π· я Π±ΡƒΠ΄Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ height:100%. Бвойство CSS box-sizing:border-box β€” это всС, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ для Π²ΠΎΠ·Π²Ρ€Π°Ρ‚Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π² исходноС состояниС. Когда Π²Ρ‹ Π²Π²ΠΎΠ΄ΠΈΡ‚Π΅ ΠΏΡƒΡ‚ΡŒ URL-адрСса изобраТСния Π² скобках свойства background-image bg-container, Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ URL-адрСс слова, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ слСдуСт ΠΏΡƒΡ‚ΡŒ URL-адрСса изобраТСния Π² ΠΎΠ΄ΠΈΠ½Π°Ρ€Π½Ρ‹Ρ… ΠΈΠ»ΠΈ Π΄Π²ΠΎΠΉΠ½Ρ‹Ρ… ΠΊΠ°Π²Ρ‹Ρ‡ΠΊΠ°Ρ…. Π― знаю, добавлю Π»ΠΈ я ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² качСствС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π² этот ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎΡΡŒ Π²Π²Π΅Ρ€Ρ…Ρƒ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния большС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, ΠΎΠ½ΠΎ обрСзаСтся. Π― ΠΌΠΎΠ³Ρƒ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойство background-size.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ я использовал, ΡˆΠΈΡ€Π΅, Ρ‡Π΅ΠΌ высота, ΠΊΠΎΠ³Π΄Π° я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ background-size, ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния растягиваСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° , Π½ΠΎ высота ΠΊΠΎΡ€ΠΎΡ‡Π΅. ΠŸΡ€ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠΈ изобраТСния Π²Π½ΠΈΠ·Ρƒ страницы ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ background-repeat: norepeat. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠ³ΠΎ изобраТСния Π² Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π»Π΅Π²Ρ‹ΠΉ ΡƒΠ³ΠΎΠ», Π²Ρ‹ ΡƒΠΆΠ΅ догадались: Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ background-position Π±ΡƒΠ΄Π΅Ρ‚ Π»Π΅Π²Ρ‹ΠΌ.

Html Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΈΠ»ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ экрана Π±Π΅Π· Css

Авторы ΠΈ ΠΏΡ€Π°Π²Π°: Stack Overflow

На этот вопрос Π½Π΅Ρ‚ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎΠ³ΠΎ ΠΎΡ‚Π²Π΅Ρ‚Π°, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ зависит ΠΎΡ‚ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Однако, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ HTML ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ экрана Π±Π΅Π· CSS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ свойства max-width ΠΈ max-height.

ИспользованиС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π΅Π±-сайта ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰Π΅Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для Π΅Π³ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ устройства ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ экранов Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ, Ρƒ вас Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΎΡΡŒ Π½Π° страницС. ΠŸΡ€ΠΈ растягивании изобраТСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство CSS3 для Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ Π·Π°ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π΅Π³ΠΎ Ρ€Π°Π²Π½Ρ‹ΠΌ ΠΈΠ»ΠΈ мСньшим, Ρ‡Π΅ΠΌ Ρ„ΠΎΠ½. Богласно Caniuse.com, этот ΠΌΠ΅Ρ‚ΠΎΠ΄ поддСрТиваСтся ΠΏΠΎΡ‡Ρ‚ΠΈ всСми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. Если Ρƒ вас Π΅ΡΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ установлСн Ρ€Π°Π·ΠΌΠ΅Ρ€ 100%, Π²Ρ‹ всСгда смоТСтС Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° экранС. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Microsoft, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ запасной Π²Π°Ρ€ΠΈΠ°Π½Ρ‚. Π­Ρ‚ΠΎ свойство доступно для использования с Internet Explorer 9.(IE 9), Firefox 4 ΠΈ Opera 10.5. Доступны всС основныС ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹, Π° Ρ‚Π°ΠΊΠΆΠ΅ Chrome 10.4.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Π±-страница ΠΏΠΎΠΌΠ΅Ρ‰Π°Π»Π°ΡΡŒ Π½Π° экранС Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ HTML

Π§Ρ‚ΠΎΠ±Ρ‹ ваша Π²Π΅Π±-страница соотвСтствовала Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ экрана Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ HTML, Π·Π°Π΄Π°ΠΉΡ‚Π΅ для основной части ΠΈ HTML ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ значСния: фиксированный, ΠΏΡ€Π°Π²Ρ‹ΠΉ, Π»Π΅Π²Ρ‹ΠΉ, Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ, Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΈ 0;. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅, Π΄Π°ΠΆΠ΅ Ссли ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ пСрСполнится, ΠΎΠ½ Π½Π΅ прСвысит ΠΏΡ€ΠΎΠΏΡƒΡΠΊΠ½ΡƒΡŽ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ области просмотра. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ этот ΠΌΠ΅Ρ‚ΠΎΠ΄ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π°, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ тСряСт всС содСрТимоС.

Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML Π±Π΅Π· CSS

ΠšΡ€Π΅Π΄ΠΈΡ‚: wikiHow

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML Π±Π΅Π· CSS, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ background Π² HTML-Ρ‚Π΅Π³Π΅ . Атрибут Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ URL-адрСса, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ являСтся мСстополоТСниСм изобраТСния.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ HTML 5 Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ„ΠΎΠ½Π°, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ ΠΎΠΏΡ†ΠΈΡŽ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ Π½Π° HTML-страницу . ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π»Π΅Π³ΠΊΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-страницС, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, хранится Π»ΠΈ нашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅, Ρ‡Ρ‚ΠΎ ΠΈ Ρ„Π°ΠΉΠ» HTML, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΡƒΡ‚ΡŒ ΠΊ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρƒ Background. БлСдуя этим простым шагам, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ быстро ΠΈ Π»Π΅Π³ΠΊΠΎ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-страницС. Π§Ρ‚ΠΎΠ±Ρ‹ HTML-ΠΊΠΎΠ΄ появился, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ сначала ввСсти Π΅Π³ΠΎ Π² любой тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΡƒΠΆΠ΅ созданный html-Ρ„Π°ΠΉΠ». Π—Π°Ρ‚Π΅ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Β«Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ CSSΒ» для Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. НаконСц, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π² тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ ΠΈ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄.

Атрибут Ρ„ΠΎΠ½Π° Π½Π΅ поддСрТиваСтся Π² HTML5

Π’Π΅Π³ body> нСльзя ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² качСствС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Ρ„ΠΎΠ½Π° Π² HTML5, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Π² ΠΎΠ΄Π½ΠΎΠΉ строкС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ встроСнный CSS .

Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚Π° с Ρ€Π°Π±ΠΎΡ‡Π΅Π³ΠΎ стола

Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚Π°, Π²Π°ΠΌ потрСбуСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ изобраТСния. Π’Π΅Π³ изобраТСния:

Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ Β«path/to/image.jpgΒ» Π½Π° ΠΏΡƒΡ‚ΡŒ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ Ρ„Π°ΠΉΠ»Ρƒ изобраТСния. ΠŸΡƒΡ‚ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ, Ρ‚Π°ΠΊ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρ„Π°ΠΉΠ» изобраТСния находится Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅, Ρ‡Ρ‚ΠΎ ΠΈ HTML-Ρ„Π°ΠΉΠ».

Π’Π΅Π³ΠΈ HTML ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для вставки ΠΈΠ»ΠΈ отобраТСния элСмСнтов HTML Π² Π½Π°ΡˆΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ… HTML. ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния [высоту ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ] ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π² HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚/Π²Π΅Π±-страницу, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ изобраТСния HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚Π°, ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство Ρ„ΠΎΠ½Π° CSS. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Β«Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚Β», Π·Π°Ρ‚Π΅ΠΌ Π΄Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π΅Π³ΠΎ. Π—Π°Ρ‚Π΅ΠΌ, послС этого, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚. Имя ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ с использованиСм ΠΌΠ΅Ρ‚ΠΎΠ΄Π° SRC.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π±Π»ΠΎΠΊΠ½ΠΎΡ‚, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΡƒΡ‚ΡŒ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ Ρ„Π°ΠΉΠ»Ρƒ изобраТСния; ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ этот ΠΏΡƒΡ‚ΡŒ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ SRC нашСго Ρ‚Π΅Π³Π° IMG.

Π’ наш HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚, Π° Π½Π΅ изобраТСния. ΠŸΠ΅Ρ€Π΅Π΄ вставкой Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π² HTML ΠΈΠ· локальной ΠΏΠ°ΠΏΠΊΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ввСсти Ρ‚ΠΎΠ»ΡŒΠΊΠΎ имя Ρ„Π°ΠΉΠ»Π° изобраТСния ΠΈ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ изобраТСния. ΠœΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ΠΎΠ² HTML IMG , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ Π² HTML. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я расскаТу Π²Π°ΠΌ, ΠΊΠ°ΠΊ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS background-image. Когда ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Ρ„Π°ΠΉΠ» HTML находятся Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅, Ρ„Π°ΠΉΠ»Ρƒ изобраТСния Π±ΡƒΠ΄Π΅Ρ‚ присвоСно Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ изобраТСния Π² качСствС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния. Π©Π΅Π»ΠΊΠ½ΡƒΠ² ΠΏΡ€Π°Π²ΠΎΠΉ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΌΡ‹ΡˆΠΈ Π½Π° своСм ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ ΠΈ Π²Ρ‹Π±Ρ€Π°Π² свойства, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ изобраТСния Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Β«Π‘Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒΒ».

Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚Π°?

ΠŸΠΎΠ»Π½Ρ‹ΠΉ курс HTML/CSS 2022 Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² любой Ρ€Π°Π·Π΄Π΅Π» HTML-страницы, просто ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΠ² ΠΈΡ… Π² любоС Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто. Π’Π΅Π³ΠΈ img ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для вставки изобраТСния Π½Π° HTML-страницу. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ Π½Π΅ Π½ΡƒΠΆΠ΅Π½, это пустой Ρ‚Π΅Π³, содСрТащий Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹. Π’Π°ΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ‚Π΅Π³ *img Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ Π² body.

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ загруТаСтся? Π’ΠΎΡ‚ нСсколько совСтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡƒΡΡ‚Ρ€Π°Π½ΠΈΡ‚ΡŒ Π½Π΅ΠΏΠΎΠ»Π°Π΄ΠΊΠΈ

УстранСниС Π½Π΅ΠΏΠΎΠ»Π°Π΄ΠΎΠΊ с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π΅ загруТаСтся: *br> Π’Π°ΠΌ потрСбуСтся нСсколько совСтов ΠΏΠΎ ΡƒΡΡ‚Ρ€Π°Π½Π΅Π½ΠΈΡŽ Π½Π΅ΠΏΠΎΠ»Π°Π΄ΠΎΠΊ. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ располоТСниС Ρ„Π°ΠΉΠ»Π°: Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ загруТаСтся с сСрвСра, Π΅ΡΡ‚ΡŒ большая Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΉΠ΄Π΅Π½ΠΎ. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅, ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π»ΠΈ располоТСн Ρ„Π°ΠΉΠ» изобраТСния Π½Π° сСрвСрС. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ имя Ρ„Π°ΠΉΠ»Π°: Если имя Ρ„Π°ΠΉΠ»Π° ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅, Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ загруТаСтся, ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π² самом Ρ„Π°ΠΉΠ»Π΅. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ имя Ρ„Π°ΠΉΠ»Π° ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ Ρ‚ΠΈΠΏ Ρ„Π°ΠΉΠ»Π° изобраТСния: изобраТСния ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ сТаты ΠΈΠ»ΠΈ Π·Π°ΡˆΠΈΡ„Ρ€ΠΎΠ²Π°Π½Ρ‹, ΠΈ Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ смоТСт ΠΈΡ… ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π΄Π΅ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠŸΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π° Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ° Ρ„Π°ΠΉΠ»Π° изобраТСния. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ изобраТСния ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠ΅ ΠΈΠ»ΠΈ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅ 64 пиксСлСй Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… 64 пиксСлСй изобраТСния. Если ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ соотвСтствуСт этим трСбованиям, ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ошибка Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. Π‘ΠΆΠ°Ρ‚Ρ‹Π΅ изобраТСния ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Ρ‚Π°ΠΊΠΈΠΌΠΈ качСствСнными, ΠΊΠ°ΠΊ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»Ρ‹, Ссли качСство изобраТСния сниТСно. Если ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ загруТаСтся, качСство изобраТСния ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½ΠΈΠ·ΠΊΠΈΠΌ.

Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ изобраТСния?

НСвозмоТно ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ изобраТСния Π² Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся тСкстовым Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ. ВмСсто этого Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ WordPad. ΠŸΡ€ΠΈ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈ вставкС ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ тСкста Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚Π° WordPad ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для копирования ΠΈ вставки тСкста; ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использовано. Π­Ρ‚ΠΎ Π±Ρ‹Π» ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‚.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ гипСрссылку Π² HTML

Бсылку Π½Π° HTML-страницу ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… способов. Π’Π΅Π³ΠΈ a> ΠΈ /a> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‡Π°Ρ‰Π΅ всСго. Когда ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚Π΅Π³ΠΈ /a>, ΠΎΠ½ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, Π³Π΄Π΅ заканчиваСтся ΠΈ начинаСтся гипСрссылка. Если ΠΊ этим Ρ‚Π΅Π³Π°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ тСкст, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π²Π΅Π΄Π΅Π½ Π² ссылку. ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ URL ссылки Π² *a href=’.
Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ссылку, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚Π΅Π³ΠΈ [[a href [[β€œ]]) ΠΈ [[/a [[]. Π’Π΅Π³ a href=»/a> ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ссылку Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅, Π° Ρ‚Π΅Π³ /a> ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ для открытия позволяСт ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ссылку, которая Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ Ρ‚Π°ΠΌ.
Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ² Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΎΠΏΡ‹Ρ‚ Π±ΠΎΠ»Π΅Π΅ пСрсонализированным. Если ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ HTML-Ρ‚Π΅Π³ a target=»_blank»>, откроСтся Π½ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ, Π½ΠΎ ссылка Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ссылку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π»Π°ΡΡŒ Π² Π½ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅, Π½ΠΎ сохраняйтС Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ страницы, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ этот ΠΌΠ΅Ρ‚ΠΎΠ΄.

Как ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² HTML Π² HTML?

встраиваниС изобраТСния Π² Π²Π΅Π±-страницы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML-Ρ‚Π΅Π³Π° *img. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ тСхничСски Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° Π²Π΅Π±-страницС, Π½ΠΎ ΠΎΠ½ΠΈ связаны со страницСй. Π’Π΅Π³ img> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания пространства для хранСния изобраТСния, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±Ρ‹Π»Π° сдСлана ссылка. Π£ Π½Π΅Π³ΠΎ Π½Π΅Ρ‚ Π½ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², Π½ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… Ρ‚Π΅Π³ΠΎΠ², Π½ΠΈ пустого Ρ‚Π΅Π³Π°.

Html Stretch Background Image

Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ HTML ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки изобраТСния Π² качСствС Ρ„ΠΎΠ½Π° Π²Π΅Π±-страницы. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS background-size. Бвойство background-size ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ значСния Β«coverΒ» ΠΈΠ»ΠΈ Β«containΒ». Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«ΠΎΠ±Π»ΠΎΠΆΠΊΠ°Β» заставит ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ всю страницу, Π° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΒ» заставит ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π² страницу, Π½Π΅ растягивая Π΅Π΅.

Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π° с Ρ†Π²Π΅Ρ‚ΠΎΠΌ, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ Ρ„ΠΎΠ½Ρƒ изобраТСния (Ссли ΠΎΠ½ΠΎ сплошноС). Π’ любом случаС вашС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ ΠΈΠ»ΠΈ Π½Π΅ ΠΏΠΎΠ²Π»ΠΈΡΡ‚ΡŒ Π½Π° ваши Ρ†Π΅Π»ΠΈ. Если это Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ»ΠΈ Π½Π΅Π½Π°Π΄Π΅ΠΆΠ½ΠΎ Π²ΠΎ всСх Π²Π°ΡˆΠΈΡ… Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ растянутый Ρ‚Π΅Π³ img с z-index, установлСнным Π½Π° Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΈΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ, ΠΈ position, установлСнным Π½Π° absolute. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ большоС альбомноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ измСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„ΠΎΠ½Π° Π² ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ находился свСрху ΠΈ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π±Ρ‹Π» Π½Π΅Π²ΠΈΠ΄ΠΈΠΌ. ΠŸΠΎΡ‡Ρ‚ΠΈ навСрняка Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ всю страницу. Π’Π°ΠΌ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ, Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π»ΠΈ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ экранов (скаТСм, Π΄ΠΎ 1600 Γ— 1200, Π²Ρ‹ΡˆΠ΅ Π΅Π³ΠΎ мСньшС), ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΅Ρ‰Π΅, Π²Ρ€ΠΎΠ΄Π΅ этой ΠΏΠ»ΠΈΡ‚ΠΊΠΈ.

Как Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒ изобраТСния ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π² Css

ΠŸΡ€ΠΈ растяТСнии изобраТСния ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ свойство CSS background-size, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ для покрытия. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ этот ΠΌΠ΅Ρ‚ΠΎΠ΄, исходная высота ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния Π±ΡƒΠ΄ΡƒΡ‚ сохранСны ΠΏΡ€ΠΈ растяТСнии изобраТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Ρ„ΠΎΠ½Π° .

Π€ΠΎΠ½ Css3

Π‘ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° появлСния CSS3 Ρ„ΠΎΠ½Ρ‹ стали Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ интСрСснСС ΠΈ Π³ΠΈΠ±Ρ‡Π΅. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹, изобраТСния ΠΈ Π΄Π°ΠΆΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Π² качСствС Ρ„ΠΎΠ½Π°. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ с Ρ„ΠΎΠ½ΠΎΠΌ. CSS3 Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π» ΠΌΠ½ΠΎΠ³ΠΎ возмоТностСй, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ слоТных Ρ„ΠΎΠ½ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Background-size

Background-size ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания слоТных Ρ„ΠΎΠ½ΠΎΠ² ΠΏΡ€ΠΈ использовании Π² сочСтании со свойствами background-position ΠΈ background-repeat. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ элСмСнта, Π° Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π΅Π³ΠΎ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΠΏΠΎΠΊΡ€Ρ‹Π²Π°Π»ΠΎ вСсь элСмСнт, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ background-size.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ тСкст ΠΈ изобраТСния β€” ArcGIS Hub

Π§Π»Π΅Π½Ρ‹ основной ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈΠ»ΠΈ сайта ΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ изобраТСния ΠΈ тСкст Π½Π° сайт, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ:

  • ΠšΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° строк β€” ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ вашСго сайта. КаТдая ΠΊΠ°Ρ€Ρ‚Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π° Π² ΠΊΠ°Ρ€Ρ‚Ρƒ строки. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ изобраТСния ΠΈ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° Π² ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ строки.
  • ВСкстовая ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° β€” Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ тСкст Π² любом мСстС вашСго сайта, помСстив эту ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ строки. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эту ΠΊΠ°Ρ€Ρ‚Ρƒ для добавлСния ΠΊΠ½ΠΎΠΏΠΎΠΊ, списков, Ρ‚Π°Π±Π»ΠΈΡ† ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π° Π½Π° свой сайт.
  • ΠšΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° изобраТСния β€” Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ изобраТСния Π² Π»ΡŽΠ±ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ строки Π² любом мСстС Π½Π° вашСм сайтС.

Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ, Π²ΠΎΠΉΠ΄ΠΈΡ‚Π΅ Π² ArcGIS Hub ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π‘Π°ΠΉΡ‚Ρ‹ Π½Π° страницС ΠžΠ±Π·ΠΎΡ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ список своих сайтов. Если Ρƒ вашСй ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΅ΡΡ‚ΡŒ лицСнзия Π½Π° ArcGIS Hub Premium, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ свои сайты Π² спискС Π˜Π½ΠΈΡ†ΠΈΠ°Ρ‚ΠΈΠ²Ρ‹ Π½Π° страницС ΠžΠ±Π·ΠΎΡ€.

Π‘ΠΎΠ²Π΅Ρ‚:

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сайт ΠΏΡ€ΠΈ Π΅Π³ΠΎ просмотрС Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ вошли Π² ArcGIS Hub, ΠΈ Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ рСдактирования слСва ΠΎΡ‚ вашСго сайта.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ тСкста

ВСкст ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π° ваш сайт Π² любом мСстС, Π³Π΄Π΅ Π΅ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° строки.

  1. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ сайта ΠΈΠ»ΠΈ страницы Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ рСдактирования.
  2. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ ВСкст Π² строку.
  3. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ тСкст.
  4. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ ΡΡ‚ΠΈΠ»ΡŒ (Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΊΠΎΠ΄Π° ΠΈ ΠΊΠ°Π²Ρ‹Ρ‡Π΅ΠΊ), Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, курсивом ΠΈ ссылки.
  5. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ стиля ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.
  6. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π°Π±Π·Π°Ρ†Π° ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ отступ ΠΈΠ»ΠΈ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ отступ строки тСкста, Π²Ρ‹Π±Ρ€Π°Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ Π°Π±Π·Π°Ρ†Π° ΠΈ Π²Ρ‹Π±Ρ€Π°Π² любой Π²Π°Ρ€ΠΈΠ°Π½Ρ‚.
  7. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ тСкста

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ тСкста, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ настройки Ρ‚Π΅ΠΌΡ‹ вашСго сайта, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ†Π²Π΅Ρ‚ ΠΊΠΎ всСму тСксту Π½Π° вашСм сайтС. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ тСкста ΠΏΠΎ строкС, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ настройки строки.

  1. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ сайт ΠΈΠ»ΠΈ страницу Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ рСдактирования.
  2. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ для всСго тСкста Π½Π° сайтС ΠΈΠ»ΠΈ страницС, ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль ΠΈ Ρ€Π°Π·Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ мСню Β«Π’Π΅ΠΌΠ°Β». Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния ΠΎ Ρ‚Π΅ΠΌΠ°Ρ… см. Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π‘Ρ€Π΅Π½Π΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ Ρ‚Π΅ΠΌΡ‹.
  3. Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ строки, Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΊΠ°Ρ€Π°Π½Π΄Π°Ρˆ рСдактирования для строки.
  4. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ†Π²Π΅Ρ‚, ввСдя ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ Π²Ρ‹Π±Ρ€Π°Π² Ρ†Π²Π΅Ρ‚ ΠΈΠ· ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ².
  5. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ основного тСкста с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Google Fonts. Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ тСкст Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя вСсь тСкст Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ вашСго сайта. Π­Ρ‚ΠΎΡ‚ ΡˆΡ€ΠΈΡ„Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ примСняСтся ΠΊΠΎ всСм страницам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ Π½Π° ваш сайт, страницам свСдСний ΠΎΠ± элСмСнтах, доступ ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ осущСствляСтся Ρ‡Π΅Ρ€Π΅Π· поиск ΠΏΠΎ сайту, ΠΈ Π»ΡŽΠ±Ρ‹ΠΌ просмотрам событий.

Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ см. Π€ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ тСкста Π½Π° сайтах ArcGIS Hub ΠΈ ArcGIS Enterprise.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ списка

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ список, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ дСйствия.

  1. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ сайта ΠΈΠ»ΠΈ страницы Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ рСдактирования.
  2. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ Π½Π° сайт ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ страницы.
  3. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ тСкст ΠΈΠ»ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ тСкст.
  4. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ нСупорядочСнный список, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список, ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ упорядочСнный список, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΡƒΠΌΠ΅Ρ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ список.
  5. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°ΠΊΠΊΠΎΡ€Π΄Π΅ΠΎΠ½Π½ΠΎΠ΅ мСню

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ΡΡ мСню, полСзная опция для добавлСния часто Π·Π°Π΄Π°Π²Π°Π΅ΠΌΡ‹Ρ… вопросов.

  1. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅ сайта ΠΈΠ»ΠΈ страницы Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ рСдактирования.
  2. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ ВСкст Π² ΠΌΠ°ΠΊΠ΅Ρ‚.
  3. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ вставки ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ АккордСон.
  4. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ тСкста.
  5. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.

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

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ изобраТСния, Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ² ΠΈΡ… ΠΈΠ· Ρ„Π°ΠΉΠ»Π° ΠΈΠ»ΠΈ ΡƒΠΊΠ°Π·Π°Π² URL-адрСс Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Π½ΠΎΠ³ΠΎ изобраТСния. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΎΠ±ΠΌΠ΅Π½ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ, Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΈΠ΄Π½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ вошСл Π² систСму ΠΈ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ ΠΊ основной ΠΊΠΎΠΌΠ°Π½Π΄Π΅ ΠΈΠ»ΠΈ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ.

  1. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ сайт ΠΈΠ»ΠΈ страницу Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ рСдактирования.
  2. Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚Ρƒ изобраТСния Π² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ ряд.
  3. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ источник изобраТСния. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»ΠΈΠ±ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» изобраТСния, Π»ΠΈΠ±ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ URL-адрСс изобраТСния. Оба Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ JPG, JPEG ΠΈ PNG.
    • Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» изобраТСния, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β» ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² ΠΏΠΎΠ»Π΅ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ сайта ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«ΠžΠ±Π·ΠΎΡ€ изобраТСния», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ». ΠœΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° составляСт 3 ΠœΠ‘.
    • Или ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ URL-адрСс изобраТСния, Π²Ρ‹Π±Ρ€Π°Π² URL-адрСс изобраТСния ΠΈ вставив ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡƒΡŽ ссылку Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Π΅ URL-адрСса.
  4. ΠŸΡ€ΠΈ использовании Ρ„Π°ΠΉΠ»Π° изобраТСния ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Π½Ρ‹Π΅ изобраТСния, Π½Π°ΠΆΠ°Π² ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΠ² ΠΌΠ°Ρ€ΠΊΠ΅Ρ€, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ€Π°ΠΌΠΊΠΈ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ. Π Π°ΠΌΠΊΡƒ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΠ² ΠΏΡƒΠ½ΠΊΡ‚ΠΈΡ€Π½ΡƒΡŽ линию. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±, ΠΎΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Π² ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ ΠΏΠΎΠ΄ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ изобраТСния, Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ€Π°ΠΌΠΊΠΈ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ.
  5. Π’ мСню Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹Β» Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π·Π°ΠΌΠ΅Ρ‰Π°ΡŽΡ‰ΠΈΠΉ тСкст изобраТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ нСзрячих ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ вашСго сайта.
  6. Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ гипСрссылку Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ссылка ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π»Π°ΡΡŒ Π»ΠΈΠ±ΠΎ Π½Π° Ρ‚ΠΎΠΉ ΠΆΠ΅ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅, Π»ΠΈΠ±ΠΎ Π½Π° Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅.
  7. Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ тСкст для подписи ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста.
  8. ΠŸΡ€ΠΈ нСобходимости Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ заполнСния», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ фокус изобраТСния. Ѐокусная Ρ‚ΠΎΡ‡ΠΊΠ° Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ останСтся сфокусированным Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ измСняСтся для Ρ€Π°Π·Π½Ρ‹Ρ… экранов.
  9. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.

Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ

Кнопка со ссылкой Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠ΅ мСсто, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ€Π°Π·Π΄Π΅Π» ΠΈΠ»ΠΈ страницу, являСтся ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ инструмСнтом Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. Кнопки Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ·Ρ‹Π²Ρ‹ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.

  1. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ сайт ΠΈΠ»ΠΈ страницу Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ рСдактирования.
  2. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ ВСкст Π² ΠΌΠ°ΠΊΠ΅Ρ‚.
  3. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒΒ» ΠΈ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ «Кнопка».
  4. ΠžΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ тСкст Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.
  5. НаТмитС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ ссылки.
  6. Π’ тСкстовом ΠΏΠΎΠ»Π΅ ВСкст для отобраТСния Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ тСкст, Ссли Π²Ρ‹ Π΅Ρ‰Π΅ этого Π½Π΅ сдСлали.
  7. Π’ тСкстовом ΠΏΠΎΠ»Π΅ URL-адрСс Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ссылку, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ΅Ρ€Π΅Π½Π°ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ.
  8. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ссылку, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΡ‚ΡŒ измСнСния.
  9. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.
  10. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Ρ†Π²Π΅Ρ‚Π°Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ см. Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Ρ‚Π΅ΠΌΡ‹.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Ρ†Π²Π΅Ρ‚Π°

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ изобраТСния ΠΏΠΎΠ·Π°Π΄ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ Ряд.

Π‘ΠΎΠ²Π΅Ρ‚:

ΠŸΡ€ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ тСкста ΠΈΠ»ΠΈ содСрТимого ΠΏΠΎΠ²Π΅Ρ€Ρ… изобраТСния Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ свСтлый ΠΈΠ»ΠΈ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°. НапримСр, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ свСтлый тСкст ΠΈΠ»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚Π΅ ΡΠ²Π΅Ρ‚Π»ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚Ρƒ, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст оставался Ρ‡Π΅Ρ‚ΠΊΠΈΠΌ. Π—Π°Ρ‚Π΅ΠΌ ΠΎΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ Ρ†Π²Π΅Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΡ‚Π°Π²Π°Π»ΠΎΡΡŒ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ.

  1. ΠžΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ сайт ΠΈΠ»ΠΈ страницу Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ рСдактирования.
  2. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ Row.
  3. Π’ Ρ€Π°Π·Π΄Π΅Π»Π΅ Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ источник изобраТСния. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»ΠΈΠ±ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» изобраТСния, Π»ΠΈΠ±ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ URL-адрСс изобраТСния. Оба Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ JPG, JPEG ΠΈ PNG.
    • Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ» изобраТСния, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β» ΠΈ ΠΏΠ΅Ρ€Π΅Ρ‚Π°Ρ‰ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» Π² ΠΏΠΎΠ»Π΅ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ сайта ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«ΠžΠ±Π·ΠΎΡ€ изобраТСния», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΉΡ‚ΠΈ ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ». ΠœΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° составляСт 3 ΠœΠ‘.
    • Или ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ URL-адрСс изобраТСния, Π²Ρ‹Π±Ρ€Π°Π² URL-адрСс изобраТСния ΠΈ вставив ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡƒΡŽ ссылку Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΏΠΎΠ»Π΅ URL-адрСса.
  4. ПослС добавлСния изобраТСния Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ†Π²Π΅Ρ‚ для ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° Β«Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°Β» Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ «Настройки строки», ввСдя ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρƒ Ρ†Π²Π΅Ρ‚ΠΎΠ².
  5. Π’ Ρ€Π°Π·Π΄Π΅Π»Π΅ Β«Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄Β» ΠΎΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠ° ΠΈΠ»ΠΈ Π²Π²ΠΎΠ΄Π° значСния Π² ΠΏΠΎΠ»Π΅ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠ². ΠŸΡ€ΠΈ настройкС прозрачности изобраТСния Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ ярчС ΠΈΠ»ΠΈ тусклСС Π² зависимости ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π΅Π³ΠΎ настроили. Π­Ρ‚ΠΎ полСзная Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ° для обСспСчСния Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ тСкст ΠΎΡΡ‚Π°Π²Π°Π»ΠΈΡΡŒ доступными для нСзрячих ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.
  6. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.

Π’Ρ‹Π±ΠΎΡ€ ΠΌΠ°ΠΊΠ΅Ρ‚Π° изобраТСния Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ΅ строки

КаТдая ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ° строки ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ способ отобраТСния изобраТСния.

  1. ПослС добавлСния изобраТСния Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ строки Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ ΠΈΠ»ΠΈ фиксированный ΠΌΠ°ΠΊΠ΅Ρ‚ для изобраТСния ΠΈ любого содСрТимого, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ΅.
    • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Β«Π¨ΠΈΡ€ΠΎΠΊΠΈΠΉΒ», Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΎ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ вашСго сайта.
    • Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ «Ѐиксированный», Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΡ‚Π°Π²Π°Π»ΠΎΡΡŒ фиксированным.
  2. УстановитС Ρ‚ΠΎΡ‡ΠΊΡƒ фокусировки изобраТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΡ‚Π°Π²Π°Π»ΠΎΡΡŒ сфокусированным Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния для Ρ€Π°Π·Π½Ρ‹Ρ… экранов.
  3. НаТмитС Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.

Настройка тСкста с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ HTML для настройки тСкста, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнты HTML:

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ сайт ΠΈΠ»ΠΈ страницу Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ рСдактирования.
  2. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ «ВСкст» Π² ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² HTMLΒ».
  3. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ ΠΊΠΎΠ΄ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ.
Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅:

Π’ цСлях бСзопасности тСкстовыС ΠΊΠ°Ρ€Ρ‚Ρ‹ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ. встроСнный JavaScript. Π’Π΅Π³ΠΈ скрипта Π±ΡƒΠ΄ΡƒΡ‚ игнорируСтся.

Допустимы ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнты HTML:

 'a', 'abbr', 'Π°ΠΊΡ€ΠΎΠ½ΠΈΠΌ', 'адрСс', 'ΡΡ‚Π°Ρ‚ΡŒΡ', 'Π°ΡƒΠ΄ΠΈΠΎ', 'Π±',
'bdi', 'bdo', 'большой', 'Ρ†ΠΈΡ‚Π°Ρ‚Π°', 'br', 'Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ', 'Ρ†Π΅Π½Ρ‚Ρ€', 'Ρ†ΠΈΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ',
 'ΠΊΠΎΠ΄', 'ΠΊΠΎΠ»',
 'colgroup', 'datalist', 'dd', 'del', 'Π΄Π΅Ρ‚Π°Π»ΠΈ', 'dfn', 'div', 'dl', 'dt',
'em', 'embed', 'fieldset', 'figcaption', 'рисунок', 'ΡˆΡ€ΠΈΡ„Ρ‚',
Β«Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Β», Β«Π½Π°Π±ΠΎΡ€ Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ²Β»,
'h2', 'h3', 'h4', 'h5', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr',
 'i', 'img', 'input', 'ins', 'kbd', 'keygen', 'li', 'ссылка', 'основная', 'ΠΊΠ°Ρ€Ρ‚Π°',
'ΠΌΠ΅Ρ‚ΠΊΠ°', 'мСню', 'ΠΌΠ΅Ρ‚Ρ€', 'навигация', 'ΠΎΠ»', 'ΠΎΠΏΡ‚Π³Ρ€ΡƒΠΏΠΏΠ°', опция', 'Π²Ρ‹Ρ…ΠΎΠ΄', 'Ρ€',
Β«ΠΏΠ°Ρ€Π°ΠΌΒ», Β«ΠΏΡ€Π΅Π΄Β», «прогрСсс», Β«ΠΊΒ», Β«Ρ€ΠΏΒ», Β«Ρ€Ρ‚Β», Β«Ρ€ΡƒΠ±ΠΈΠ½Β», «с», «сэмп»,
'Ρ€Π°Π·Π΄Π΅Π»', 'малСнький', 'источник', 'Ρ€Π°Π·ΠΌΠ°Ρ…', 'забастовка', 'ΡΠΈΠ»ΡŒΠ½Ρ‹ΠΉ', 'ΡΡ‚ΠΈΠ»ΡŒ'
 Β«subΒ», Β«summaryΒ», Β«supΒ», Β«tableΒ», Β«tbodyΒ», Β«tdΒ», Β«tfootΒ», Β«textareaΒ»,
'th', 'thead', 'врСмя', 'Π½Π°Π·Π²Π°Π½ΠΈΠ΅', 'tr', 'Ρ‚Ρ€Π΅ΠΊ, 'tt', 'u', 'ul', 

Допустимы ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ для этих элСмСнтов:

 ВсС ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ элСмСнты HTML ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚: ['класс', 'ΡΡ‚ΠΈΠ»ΡŒ'],
 'a' : ['href', 'Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ', 'ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ…', 'Ρ†Π΅Π»ΡŒ Π΄Π°Π½Π½Ρ‹Ρ…', 'ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Ρ…',
 'имя', 'ΠΎΡ‚Π½.
ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *