Как Π΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ для сайта: Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта? — UMI

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

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта? — UMI

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ сайт максимально ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌΒ β€” ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΠΏΡ€ΠΈ Π΅Π³ΠΎ создании, Π΄Π°ΠΆΠ΅ Ссли сайт создан Π½Π°Β Π³ΠΎΡ‚ΠΎΠ²ΠΎΠΌ шаблонС. ОсобСнно это Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎ для коммСрчСских ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΎΠΊ ΠΈΒ Π±Π»ΠΎΠ³ΠΎΠ². Основа популярности кроСтся в узнаваСмости рСсурса, Π°Β Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉΡΡ, ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π±Π»ΠΎΠΊ? Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ ΡˆΠ°ΠΏΠΊΡƒ сайта — вопрос, Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰ΠΈΠΉ ΠΌΠ½ΠΎΠ³ΠΈΡ… Π²Π΅Π±-мастСров.


ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° и содСрТаниС

НаличиС ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΉ шапки (header) Π΄Π°Π΅Ρ‚ Π½Π΅ΠΌΠ°Π»ΠΎ плюсов:

  • ΡƒΠ·Π½Π°Π²Π°Π½ΠΈΠ΅ Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°, символики;
  • ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΈ ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠΈ;
  • Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ красивого Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° ΠΈΒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°;
  • ΡΠΎΠ»ΠΈΠ΄Π½ΠΎΡΡ‚ΡŒ, дСмонстрация ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° к созданию рСсурса Π²Β Ρ†Π΅Π»ΠΎΠΌ.

Для спСциалиста вопрос Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ для сайта Π²Β ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ сроки, являСтся простым. Новичку ТС придСтся ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½ΠΎΠ΅ количСство ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° на эту Ρ‚Π΅ΠΌΡƒ.

Если Π²Ρ‹Β ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ Π²ΡΠ΅Ρ€ΡŒΠ΅Π· ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ Π²Π΅Π±-ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΡΡ‚Π²ΠΎ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈΒ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ с HTML, CSS, Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Photoshop ΠΈΒ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΌ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°ΠΌΠΈ. На сСрвисС 1Π‘-UMI эта Π·Π°Π΄Π°Ρ‡Π° ΡƒΠΆΠ΅ Ρ€Π΅ΡˆΠ΅Π½Π° ― в ассортимСнтС сотни шаблонов с уТС Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ шапками, достаточно Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ свой Π»ΠΎΠ³ΠΎ, слоган и изобраТСния, ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ стилСй.

Π’Π΅Ρ€Ρ…Π½ΠΈΠΉ Π±Π»ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ:

  • яркий, Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠΉΡΡ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π·Π°ΠΌΠ΅Ρ‚Π΅Π½;
  • слоган с краткой ΡΡƒΡ‚ΡŒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ наполнСния;
  • ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ для прСдприятий и коммСрсантов;
  • мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ;
  • Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ.

ΠΠ΅Β ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС пСрСчислСнныС ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ присутствовали в шапкС. ЕС главная Ρ†Π΅Π»ΡŒΒ β€” ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ элСмСнты, Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‰ΠΈΠ΅ΡΡ ΠΏΠΎΒ ΡΡ‚ΠΈΠ»ΡŽ ΠΈΒ Ρ†Π²Π΅Ρ‚Ρƒ. Π¨Π°ΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ΅ ΠΈΒ Π³Π°Ρ€ΠΌΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с дизайном всСго рСсурса. Π•Π΅Β ΡˆΠΈΡ€ΠΈΠ½Π° и высота ΠΌΠΎΠ³ΡƒΡ‚ сильно Ρ€Π°Π·Π½ΠΈΡ‚ΡŒΡΡ, наглядно Π²ΠΈΠ΄Π½ΠΎ это ΠΏΡ€ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ страниц на экранах с разной Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡŒΡŽΒ β€” ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°Ρ…, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°Ρ…, смартфонах.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта?

БущСствуСт Ρ‚Ρ€ΠΈ способа Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ.

  1. Π‘Β ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСрвисов. Π­Ρ‚ΠΎΡ‚ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ самый элСмСнтарный, Π½Π΅Β Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠΉ обучСния Ρ€Π°Π±ΠΎΡ‚Π΅ с графичСскими Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ. Надо ΠΎΡ‚Ρ‹ΡΠΊΠ°Ρ‚ΡŒ в сСти рСсурсы, ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹, и просто ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠΈΠΉΡΡ. БСрвисы Π±Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠ»Π°Ρ‚Π½Ρ‹ΠΌΠΈ и бСсплатными.
  2. Xheader. Если Π²Ρ‹Β β€” ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ, Ρ‚ΠΎΒ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ ΠΎΡ‡Π΅Π½ΡŒ Π΄Π°ΠΆΠ΅ просто. Π—Π΄Π΅ΡΡŒ прСдлагаСтся Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΡ€ΠΈΠ΅ΠΌΠ»Π΅ΠΌΡ‹ΠΉ Π½Π°Π±ΠΎΡ€ инструмСнтов ΠΈΠ»ΠΈ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ с графичСскими ΠΎΠ±Ρ€Π°Π·Ρ†Π°ΠΌΠΈ. В послСднСм присутствуСт удобная навигация — всС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ распрСдСлСны по катСгориям, Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° нС составит Ρ‚Ρ€ΡƒΠ΄Π°. Π•Ρ‰Π΅ Xheader ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ слои для распрСдСлСния элСмСнтов Π²Β Π½ΡƒΠΆΠ½ΠΎΠΌ порядкС. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ Π²Β Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ XHF для обСспСчСния возмоТности рСдактирования, ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ JPG. Xheader ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ достаточными функциями для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°, Π½ΠΎΒ Π²Π΅Π±-мастСру, Ρ€Π΅ΡˆΠΈΠ²ΡˆΠ΅ΠΌΡƒ Π·Π°Π½ΡΡ‚ΡŒΡΡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ Π½Π°Β ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅, слСдуСт всС-Ρ‚Π°ΠΊΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊΒ Photoshop.
  3. Adobe Photoshop. Π­Ρ‚Π° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° прСдоставляСт большиС возмоТности для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с графичСским ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. Π—Π΄Π΅ΡΡŒ Π²Ρ‹Β ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ, ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹, ΠΏΠΎΠ΄Π±ΠΈΡ€Π°Ρ‚ΡŒ Ρ‚ΠΎΠ½, ΠΎΠ±Ρ‹Π³Ρ€Ρ‹Π²Π°Ρ‚ΡŒ контрасты, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½ΡƒΠ»Π΅Π²ΠΎΠΉ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ (он придаст Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ²Ρ‹). Π’Β Π²Π°ΡˆΠΈΡ… Ρ€ΡƒΠΊΠ°Ρ… располоТСниС элСмСнтов, Π²Π½Π΅Π΄Ρ€Π΅Π½ΠΈΠ΅ Π²Β Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°, слогана, ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ нС пСрСусСрдствуйтС, Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ Π²Β Ρ‚Π°ΠΊΠΎΠΌ случаС Π²Π°ΠΆΠ½Π°). Π’Β ΠΎΠ±Ρ‰Π΅ΠΌ, это Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠΈΠΉ инструмСнт в настоящСС врСмя для воплощСния самых смСлых ΠΈΒ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ΄Π΅ΠΉ. Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта Π²Β Π€ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅? Если Π²Ρ‹Β ΠΌΠ°Π»ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ с такой ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΎΠΉ, посмотритС Π²ΠΈΠ΄Π΅ΠΎΡƒΡ€ΠΎΠΊΠΈ ΠΈΒ ΠΏΠΎΠΈΡ‰ΠΈΡ‚Π΅ ΠΎΠ½Π»Π°ΠΉΠ½-пособия. НСобходимо лишь ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ инструмСнты, ΠΈΒ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊΒ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡŽ Π·Π°Π΄Π°Ρ‡ΠΈ.

Как Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊ?

Вы сдСлали элСмСнт, но это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ в структуру рСсурса. Если у вас сайт Π½Π°Β 1Π‘-UMI, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π²Β Ρ€Π΅ΠΆΠΈΠΌ рСдактирования ΠΈΒ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎΒ Π±Π»ΠΎΠΊΡƒ с шапкой, Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΈΒ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π½ΡƒΠΆΠ½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ.

ΠŸΡ€ΠΈ нСобходимости ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΡ€Π°Π±ΠΎΡ‚Π°ΠΉΡ‚Π΅ со стилями Π²Β CSS.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта CSS:

  • В описании #header ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ΡΡ значСния ΠΈΒ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡ΡŒΡ‚Π΅ ΡˆΠΈΡ€ΠΈΠ½Ρƒ и высоту вашСго изобраТСния.

    #header{
    width: ΡˆΠΈΡ€ΠΈΠ½Π°Β px;
    height: Ρ„ΠΎΠ½Β px;
    background-color: #25B33f; β€”Β Ρ„ΠΎΠ½
    margin-bottom: отступ снизу px;
    }
  • Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ.

    #header{
    width: ΡˆΠΈΡ€ΠΈΠ½Π°Β px;
    height: высота px;
    background-color: #25B33f;
    margin-bottom: отступ снизу px;
    background-image: url(images/имя Ρ„Π°ΠΉΠ»Π°)
    }
  • Background-color ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ нС отобразится Π²Β ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Ѐиксация Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ (Π²ΠΎΒ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠ΅ СС смСщСния) осущСствляСтся ΠΏΡƒΡ‚Π΅ΠΌ прописывания position: fixed.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта HTML:

  • Π’Β Ρ‚Π΅Π³ body Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ div, ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π² Π΅Π³ΠΎ с двумя Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ h2Β ΠΈΒ h4, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ и описаниСм соотвСтствСнно.

    <div>
    <h2>Π½Π°Π·Π²Π°Π½ΠΈΠ΅</h2>
    <h4>описаниС</h4>
    </div>
  • ΠŸΡ€ΠΈΠ΄Π°ΠΉΡ‚Π΅ Π²ΠΈΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ и тСксту — создайтС для Π½ΠΈΡ… Π΄Π²Π° описания ΠΈΒ ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΈΠ΅ свойства:

    h2{
    color:#Ρ†Π²Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°;
    font: Ρ€Π°Π·ΠΌΠ΅Ρ€ pxΒ ΡˆΡ€ΠΈΡ„Ρ‚;
    margin-left: отступ слСва px;
    }
    h4{
    width: ΡˆΠΈΡ€ΠΈΠ½Π°Β px;
    color: #Ρ†Π²Π΅Ρ‚;
    font-style: ΡΡ‚ΠΈΠ»ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Π°;
    margin: располоТСниС px;
    }
  • Π¨ΠΈΡ€ΠΈΠ½Π° h4Β Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ большой, ΠΈΠ½Π°Ρ‡Π΅ тСкст Π·Π°ΠΉΠΌΠ΅Ρ‚ всС пространство ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΡŽΡ‚ΡΡ в зависимости ΠΎΡ‚Β Ρ‚ΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎ ΠΏΠ»Π°Π½ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ тСкст.

Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π½Π°Β WordPress

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π±Π»ΠΎΠ³ΠΎΠ² Π±Π°Π·ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π½Π°Β ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ WordPress, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Π±-мастСра ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‚ΡΡ, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊ на этой CMS. Π”Π²ΠΈΠΆΠΎΠΊ ΡƒΠΆΠ΅ оснащСн Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌΠΈ Ρ‚Π΅ΠΌΠ°ΠΌΠΈ ΠΈΒ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. ΠΠΎΒ Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²ΠΈΠ΄ΠΎΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒΒ ΠΈΡ…, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Как это ΠΎΡΡƒΡ‰Π΅ΡΡ‚Π²ΠΈΡ‚ΡŒ?

  1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ в консоли Π²ΠΊΠ»Π°Π΄ΠΊΡƒ «Записи — Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽΒ».
  2. ΠŸΠ΅Ρ€Π΅Π²Π΅Π΄ΠΈΡ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π²Β Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ HTML, Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ.
  3. ПослС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²Β Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ появится ΠΊΠΎΠ΄ изобраТСния. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ, Β«Π—Π°ΠΏΠΈΡΡŒΒ» ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅.
  4. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ΡΡŒ Π²ΠΎΒ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β«Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄Β β€” Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Β», ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ„Π°ΠΉΠ» header.php для рСдактирования.
  5. Π’Β header.php Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ <div> ΠΈΒ ΠΏΠΎΠ΄ этой строкой Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Ρ€Π°Π½Π΅Π΅ скопированный ΠΊΠΎΠ΄ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ.
  6. ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» и посмотритС, ΠΊΠ°ΠΊ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ выглядит ваша шапка вмСстС со вставлСнным ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
  7. Если Π²Π°ΠΌ трСбуСтся ΠΏΠ΅Ρ€Π΅Π΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ΡΡŒ Π²Β Ρ„Π°ΠΉΠ»ΠΎΠ²Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π²Β Ρ‚Π΅Π³ img Π²Β ΠΊΠΎΠ΄Π΅ графичСского элСмСнта запись style со значСниСм margin. ΠŸΡ€ΠΈΠΌΠ΅Ρ€:;
  8. ΠŸΠΎΠ΄Π²ΠΈΠ½ΡŒΡ‚Π΅ Ρ„ΠΎΡ‚ΠΎ Ρ‚ΡƒΠ΄Π°, ΠΊΡƒΠ΄Π° Π²Π°ΠΌ Π½Π°Π΄ΠΎ.

ΠŸΠ΅Ρ€Π²Π°Ρ страница с вСрхним Π±Π»ΠΎΠΊΠΎΠΌ Π³ΠΎΡ‚ΠΎΠ²Π°. ПослС Π΄ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ, ΠΏΠΎΠΏΡ€Π°Π²ΠΊΠΈ ошибок ΠΈΒ ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ Ρ„Π°ΠΉΠ» ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°Ρ‚ΡŒ index.html ΠΈΒ Π²Ρ‹Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΅Π³ΠΎ на ваш хостинг. Π’Β Π΄Π°Π»ΡŒΠ½Π΅ΠΉΡˆΠ΅ΠΌ шаблон пригодится для создания ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… страниц, мСню ΠΈΒ Ρ‚.Π΄.

Π Π°Π±ΠΎΡ‚Π° на конструкторС

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

Если Π½Π΅Ρ‚ возмоТности Π΄ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΏΠΎΡ€ΡƒΡ‡ΠΈΡ‚Π΅ это спСциалистам Π²Β Ρ€Π°ΠΌΠΊΠ°Ρ… услуги Β«Π‘Π°ΠΉΡ‚ за вас». Они оформят ΡˆΠ°ΠΏΠΊΡƒ и сайт по вашим ТСланиями, Π½Π°ΠΏΠΈΡˆΡƒΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΏΠΎΠ΄Π±Π΅Ρ€ΡƒΡ‚ изобраТСния, наполнят и запустят сайт, настроят для продвиТСния.


Π¨Π°ΠΏΠΊΠ° страницы | htmlbook.ru

Основная ΡΠ»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ с Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ это ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ…, ΠΎΡ‚ высокого Π΄ΠΎ Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° 760 пиксСлами, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² шапкС стоит Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±ΠΎΠ»Π΅Π΅ ваТная Ρ‡Π°ΡΡ‚ΡŒ изобраТСния Π²ΠΏΠΈΡΡ‹Π²Π°Π»Π°ΡΡŒ Π² этот Ρ€Π°Π·ΠΌΠ΅Ρ€. На рис.Β 6.3 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ. Π’Ρ‘ΠΌΠ½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π° Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 760px, Π±ΡƒΠΊΠ²ΠΎΠΉ А ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Ρ‹ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΎΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹.

Рис. 6.3. Π¨ΠΈΡ€ΠΈΠ½Π° шапки

Π‘Π°ΠΌΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² шапкС дСлаСтся Ρ‡Π΅Ρ€Π΅Π· Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ элСмСнта <header>.

header {
 display: block; /* Для старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² */
 height: 405px; /* Высота шапки */
 background: url(images/header-bg.png) no-repeat center bottom;
}

Π’ ΠΈΠ΄Π΅Π°Π»Π΅ рисунок Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΡ‚ 2000 пиксСлов, Ρ‚ΠΎΠ³Π΄Π° практичСски ΠΏΡ€ΠΈ любом Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° рисунок Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ, обрСзая всё, Ρ‡Ρ‚ΠΎ Π½Π΅ помСщаСтся Π² ΠΎΠΊΠ½ΠΎ. Но Π±Π΅Π΄Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π΅ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΡˆΠΈΡ€ΠΎΠΊΠ°Ρ, Π° Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ бСсконСчно тянущиСся ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ Ρ‡Ρ‘Ρ€Π½Ρ‹Π΅ полоски Π½Π΅ хочСтся. Один ΠΈΠ· Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ это Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Ρ„ΠΎΠ½Π° ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. Π’Π΅, Ρƒ ΠΊΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ 1280 пиксСлов ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΈ мСньшС, увидят Π΅Π΄ΠΈΠ½ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Π° Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Ρ‹ ΡˆΠΈΡ€ΠΎΠΊΠΈΡ… ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€ΠΎΠ² смогут ΠΏΠΎΠ»ΡŽΠ±ΠΎΠ²Π°Ρ‚ΡŒΡΡ сразу нСсколькими ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹ΠΌΠΈ ΠΈ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ заходящими солнцами. Π—Π΄Π΅ΡΡŒ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ΄Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ рисунок Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π±Π΅Π· стыков совмСщался сам с собой ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ (рис.Β 6.4). Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ для наглядности спрятан.

Рис. 6.4. Π‘ΠΎΠ²ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ изобраТСния ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ

На Π΄Π°Π½Π½ΠΎΠΌ рисункС мСсто стыка ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΎ стрСлкой ΠΈ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ стык ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ. Если ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΎΡ‚Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΡƒΡŽ ΠΈ Π»Π΅Π²ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Ρ‚ΠΎ ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ Π±Π΅Π· Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… стыков, ΠΊΠ°ΠΊ ΠΎΠ΄ΠΈΠ½ сплошной рисунок. ΠžΡΡ‚Π°Ρ‘Ρ‚ΡΡ слСгка ΠΏΠΎΠ΄ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΡΡ‚ΠΈΠ»ΡŒ, Π·Π°ΠΌΠ΅Π½ΠΈΠ² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ no-repeat (Π±Π΅Π· повторСния) Π½Π° repeat-x (ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ).

header {
 display: block;
 height: 405px;
 background: url(images/header-bg. png) repeat-x center bottom;
}

На этом ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок Π² шапкС Π³ΠΎΡ‚ΠΎΠ² (рис.Β 6.5).

Рис. 6.5. Ѐоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° для шапки

Π’ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG-24 Ρ„Π°ΠΉΠ» с Ρ„ΠΎΠ½ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 1325Ρ…405 пиксСлов Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΎΠΊΠΎΠ»ΠΎ 32 Кб, Π° Π² PNG-8 с 256-Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡ‚Ρ€ΠΎΠΉ, Π³Π΄Π΅ качСство Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π° нСсколько Ρ…ΡƒΠΆΠ΅Β β€” ΠΎΠΊΠΎΠ»ΠΎ 15 Кб. МоТно Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ Π½Π° Π΄Π²Π΅ составныС части — Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² своём Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ привСсти ΠΊ ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡŽ качСства отобраТСния Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°. Π’ΠΏΡ€ΠΎΡ‡Π΅ΠΌ, 32 Кб для ΡΡ‚ΠΎΠ»ΡŒ большого изобраТСния это Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ посчитаСт «экономиСй Π½Π° спичках». Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ созданию шапки сайта ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ окаТСтся ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ, Π° ΠΏΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΅Π³ΠΎ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ.

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ шапки

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π² шапкС повторяСтся ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΠ· ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. На рис.Β 6.6 ΠΏΠΎΠΊΠ°Π·Π°Π½ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ высотой 405 пиксСлов, ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½Ρ‹ΠΉ для этой Ρ†Π΅Π»ΠΈ. Π€ΠΎΡ€ΠΌΠ°Ρ‚ PNG-24 Π½Π΅ вносит искаТСния Π² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ сТимаСт (ΠΈΡ‚ΠΎΠ³ΠΎΠ²Ρ‹ΠΉ объСм 402 Π±Π°ΠΉΡ‚Π°), Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π² этом случаС ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΅Π³ΠΎ. Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ рисунка Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° для наглядности.

Рис. 6.6. Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ рисунок (header-gradient.png)

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с силуэтными ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹ΠΌΠΈ дСлаСтся Π½Π° ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΌ Ρ„ΠΎΠ½Π΅ ΠΈ высотой 198 пиксСлов, Π½Π΅Ρ‚ смысла Π΄Π΅Π»Π°Ρ‚ΡŒ Π΅Ρ‘ Π½Π° всю высоту шапки, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ лишь Ρ‡Π°ΡΡ‚ΡŒ. Π€Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ изобраТСния ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° рис.Β 6.7. Π¨Π°Ρ…ΠΌΠ°Ρ‚Π½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ.

Рис. 6.7. Ѐоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒΡŽ (header-animal.png)

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ сохранСниС этой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈΠ΄Π΅Ρ‚ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG-8, Ρƒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ прозрачности, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ 256 ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π° PNG-24, Π²Π°ΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π½Ρ‹ΠΉ Ρ„ΠΎΠ½. Для этого ΠΏΡ€ΠΈ сохранСнии Π² Photoshop-Π΅ Π½Π°Π΄ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ ΠΊΡ€Π°Ρ‘Π² (Matte) Π±Π»ΠΈΠ·ΠΊΠΈΠΉ ΠΊ срСднСй части Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, Π³Π΄Π΅ ΠΈΠ΄Ρ‘Ρ‚ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ силуэта. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ это Ρ†Π²Π΅Ρ‚ #9de1f0. Π’ этом случаС Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ грязных ΠΊΠΎΠ½Ρ‚ΡƒΡ€ΠΎΠ² Π²ΠΎΠΊΡ€ΡƒΠ³ Π΄Π΅Ρ€Π΅Π²ΡŒΠ΅Π² ΠΈ ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹Ρ…, Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΏΡ€ΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠ΅ Ρ†Π΅Π»ΠΎΠ΅.

Π”Π²Π° рисунка для Ρ„ΠΎΠ½Π° шапки ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Ρ‹, пишСм ΠΊΠΎΠ΄ HTML.

<header>
 <div>
  <img src="images/header-title.png" alt="Как ΠΏΠΎΠΉΠΌΠ°Ρ‚ΡŒ льва Π² пустынС">
 </div>
</header>

И ΡΡ‚ΠΈΠ»ΡŒ для элСмСнта <header> ΠΈ слоя header-bg.

header {
 background: #00b0d8 url(images/header-gradient.png) repeat-x;
}
.header-bg {
 background: url(images/header-animal.png) repeat-x center bottom; 
 height: 405px; 
}

Π’ ΠΈΡ‚ΠΎΠ³Π΅ объСм Ρ„Π°ΠΉΠ»ΠΎΠ² оказался 12,5 Кб, Ρ‡Ρ‚ΠΎ Π΄Π°ΠΆΠ΅ мСньшС ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ.

НазваниС сайта

НазваниС написано Π½Π° ΠΎΠ±Π»Π°ΠΊΠ΅ с Ρ€Π°ΡΡ‚ΡƒΡˆΡ‘Π²Π°Π½Π½Ρ‹ΠΌΠΈ краями, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ трудности ΠΏΡ€ΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚. Π•ΡΡ‚ΡŒ Π΄Π²Π° способа, ΠΊΠ°ΠΊ ΠΈΡ… ΠΎΠ±ΠΎΠΉΡ‚ΠΈ.

  1. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ PNG-24 ΠΏΡ€ΠΈ сохранСнии прозрачности.
  2. Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ рисунок Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ GIF ΠΈΠ»ΠΈ PNG-8 с Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠΌ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Π°, Π° Π·Π°Ρ‚Π΅ΠΌ Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ рисунок Π½Π° Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ совпадСниС Π±Ρ‹Π»ΠΎ с Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎ пиксСла.

ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ способ ΠΈΠΌΠ΅Π΅Ρ‚ ряд нСдостатков — ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ нСльзя ΡΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ Π΄Π°ΠΆΠ΅ Π½Π° ΠΏΠ°Ρ€Ρƒ пиксСлов, ΠΎΠ½ΠΎ привязано ΠΊ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρƒ, ΠΈ Ссли Π΅Π³ΠΎ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ, придётся ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ сохраняСм Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ PNG-24. Код HTML останСтся ΠΏΡ€Π΅ΠΆΠ½ΠΈΠΌ, Π° стили Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡΡ.

header {
 background: #00b0d8 url(images/header-gradient.png) repeat-x;
}
.header-bg {
 background: url(images/header-animal.png) repeat-x center bottom; 
 height: 405px; /* Высота шапки */
 text-align: center; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ */
}
.header-bg img {
 position: relative; /* ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ */
 top: 40px; /* Π‘Π΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π²Π½ΠΈΠ· */
}

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ дСлаСтся Ρ‡Π΅Ρ€Π΅Π· свойство text-align, добавляСмоС ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŽ Ρ‚Π΅Π³Π° <img>, Π° сдвиг Π²Π½ΠΈΠ· Ρ‡Π΅Ρ€Π΅Π· свойство top. Π§Ρ‚ΠΎΠ±Ρ‹ это свойство сработало, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ свойства position со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ relative.

На Π³Π»Π°Π²Π½ΠΎΠΉ страницС сайта ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ выводится ΠΊΠ°ΠΊ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, Π½Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… страницах ΠΎΠ½Π° слуТит ссылкой Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу. Для этого достаточно слСгка ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄:

<a href="/"><img src="images/header-title. png" alt="Как ΠΏΠΎΠΉΠΌΠ°Ρ‚ΡŒ льва Π² пустынС"></a>

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ / Ρƒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° href ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ страницу ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π²Π΅Π±-сСрвСрС, Π½ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ локально.

ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ для шапки ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ 6.14.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ 6.14. Π¨Π°ΠΏΠΊΠ° сайта

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Как ΠΏΠΎΠΉΠΌΠ°Ρ‚ΡŒ льва Π² пустынС?</title>
  <!--[if lt IE 9]>      
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <style>
   body { margin: 0; }
   header {
    display: block;
    background: #00b0d8 url(images/header-gradient.png) repeat-x; 
                /* Π“Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚ */
   }
   .header-bg {
    background: url(images/header-animal.png) repeat-x center bottom; 
                /* Π–ΠΈΠ²ΠΎΡ‚Π½Ρ‹Π΅ */
    height: 405px; /* Высота шапки */
    text-align: center; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ */
   }
   .header-bg img {
    position: relative; /* ΠžΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ */
    top: 40px; /* Π‘Π΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π²Π½ΠΈΠ· */
   }
  </style>
 </head>
 <body>
  <header>
   <div>
    <img src="images/header-title. png" alt="Как ΠΏΠΎΠΉΠΌΠ°Ρ‚ΡŒ льва Π² пустынС"
   >
   </div>
  </header>
 </body>
</html>

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта

Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ для шапки сайта, ΠΈ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π² Π½Ρ‘ΠΌ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΈ описаниС сайта ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ HTML ΠΈ CSS

Π‘Π»ΠΎΠΊ для шапки сайта, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ это «header» записываСтся Ρ‚Π°ΠΊ:

HTML


<div></div>

CSS


#header{
Β Β width: 900px; Β  Β  - ΡˆΠΈΡ€ΠΈΠ½Π°
Β Β height: 200px; Β  Β - высота
Β Β background-color: #25B33f; Β - Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ (ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ)
Β Β margin-bottom: 10px; Β  Β - отступ снизу
}

Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для шапки сайта Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ Π±Π»ΠΎΠΊΠ°, Ρ‚.Π΅. 900px X 200px. Π•Π³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ всСго ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅.

Если, ΠΊΡ‚ΠΎ Π½Π΅ Π²Π»Π°Π΄Π΅Π΅Ρ‚ Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠΎΠΌ, я ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ самый простой способ изготовлСния ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ для шапки сайта, Π² ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΌΡΡ Π½Π° всСх Windows ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Paint.

Π“ΠΎΡ‚ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прописываСм Π² Π±Π»ΠΎΠΊ «header».


#header{
Β Β width:Β 900px;
Β Β height:Β 200px;
Β Β background-color:Β #25B33f;
Β Β margin-bottom:Β 10px;
Β Β background-image: url(images/i8.png) Β  - Π² свойствС указываСтся ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ. Как ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ± ΠΏΠΎΡ‚ΠΎΠΌ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΡƒΡ‚ΡŒ для Π½Π΅Ρ‘ Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠšΠ°Ρ‚Π°Π»ΠΎΠ³Π° сайта
}

Бвойство background-color указываСтся Π½Π° Ρ‚ΠΎΡ‚ случай, Ссли ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π²Π΄Ρ€ΡƒΠ³, Π² ΠΊΠ°ΠΊΠΎΠΌ Π»ΠΈΠ±ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ посСтитСля, Π½Π΅ отобразится.

Если ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΠ»Π°ΡΡŒ с ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ смСщСниСм, ΠΈ Π½ΡƒΠΆΠ½ΠΎ Π΅Ρ‘ ΠΏΠΎΠ΄ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ, Ρ‚ΠΎ сюда ΠΆΠ΅ добавляСтся свойство background-position

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг β€” добавляСм Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ описания сайта.

Для этого Π² HTML Π±Π»ΠΎΠΊΠ° прописываСм ΠΊΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ Π°Π±Π·Π°Ρ†Π°. Абзацу Π·Π°Π΄Π°Π΄ΠΈΠΌ класс, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ описаниС Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² шапкС.

HTML


<div>
Β Β <h2>Π¨Π°ΠΏΠΊΠ° сайта<h2>
Β Β Β Β <p>Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ для сайта с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ описаниСм</p>
</div>

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Ρƒ нас получаСтся.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΏΡ€ΠΈΠ΄Π°Π΄ΠΈΠΌ Π²ΠΈΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ ΠΈ описанию. Π‘ΠΎΠ·Π΄Π°Ρ‘ΠΌ для Π½ΠΈΡ… Π΄Π²Π° сСлСктора, ΠΈ прописываСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ свойства:
CSS


h2{
Β Β color: #ffee00; Β - Ρ†Π²Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
Β Β font: 40px Georgia; Β - ΡˆΡ€ΠΈΡ„Ρ‚
Β Β margin-left: 300px; Β - отступ слСва
}
.descript{
Β Β width: 300px; Β - ΡˆΠΈΡ€ΠΈΠ½Π°
Β Β color: #ffee00; Β - Ρ†Π²Π΅Ρ‚
Β Β font-style: italic; Β - курсив
Β Β margin: 70px 0 0 30px; Β - располоТСниС
Β Β font-size:22px; - Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ.

Π’ качСствС Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° я Π²ΠΎΠ·ΡŒΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠ³ΠΎ Ρ‡Ρ‘Ρ€Ρ‚ΠΈΠΊΠ°

ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ с ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ Ρ„ΠΎΠ½ΠΎΠΌ, ΠΈΠ½Π°Ρ‡Π΅ Π΅Ρ‘ собствСнный Ρ„ΠΎΠ½ ΠΎΡ‡Π΅Π½ΡŒ нСкрасиво Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Π½Π° Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ.

Π§Ρ‚ΠΎΠ± Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΠΌ Ρ‚Ρ€ΠΈ измСнСния Π² ΠΊΠΎΠ΄Π΅:

Π°) Π² HTML Π±Π»ΠΎΠΊΠ° Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ;

Π±) Π² CSS Π² Π±Π»ΠΎΠΊ header ΠΏΡ€ΠΎΠΏΠΈΡˆΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ Π² этом Π±Π»ΠΎΠΊΠ΅;

Π²) Π² CSS добавляСм сСлСктор Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°, ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅ΠΌ Π΅Π³ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±Π»ΠΎΠΊΠ° header.

HTML


<div>
Β Β <h2>Π¨Π°ΠΏΠΊΠ° сайта<h2>
Β Β Β Β <p>Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ для сайта с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ описаниСм</p>
<img src="images/hortic.gif">
</div>

CSS


#header{
Β Β position:relative;
Β Β width:Β 900px;
Β Β height:Β 200px;
Β Β background-color:Β #25B33f;
Β Β margin-bottom:Β 10px;
Β Β background-image: url(images/i8.png) Β 
}
h2{
Β Β color: #ffee00; Β - Ρ†Π²Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
Β Β font: 40px Georgia; Β - ΡˆΡ€ΠΈΡ„Ρ‚
Β Β margin-left: 300px; Β - отступ слСва
}
.descript{
Β Β width: 300px; Β - ΡˆΠΈΡ€ΠΈΠ½Π°
Β Β color: #ffee00; Β - Ρ†Π²Π΅Ρ‚
Β Β font-style: italic; Β - курсив
Β Β margin: 70px 0 0 30px; Β - располоТСниС
Β Β font-size:22px; - Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°
}
img{
Β Β position:absolute;
Β Β top:10px;
Β Β left:10px;
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ Π²ΠΎΡ‚ такая шапка сайта.

На Β ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ страницС ΠΌΡ‹ сдСлали каркас сайта ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² Π½Π΅Π³ΠΎ ΡˆΠ°ΠΏΠΊΡƒ ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ.

Код страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π±Π΅Π· названия</title>
<style>
#wrapper{
Β  Β  width: 900px;
Β  Β  outline: 1px solid #787274;
Β  Β  padding: 10px;
Β  Β  margin: 0 auto;
}
#header{
Β Β Β Β position:relative;
Β  Β  width: 900px;
Β  Β  height: 200px;
Β  Β  background-color: #25B33f;
Β  Β  margin-bottom: 10px;
Β  Β  background-image: url(images/i8.png)
}
#sidebar{
Β  Β  background-color: #2FF553;
Β  Β  margin-bottom: 10px;
Β  Β  width: 180px;
Β  Β  padding: 10px;
Β  Β  float: right;
}
#content{
Β  Β  background-color: #9EF5AF;
Β  Β  margin-bottom: 10px;
Β  Β  width: 670px;
Β  Β  padding: 10px;
}
#footer{
Β  Β  height:80px;
Β  Β  background-color: #41874E;
Β  Β  margin-bottom: 10px;
}
.clear{
clear: both;
}
h2{
color: #ffee00;
font: 40px Georgia;
margin-left: 300px;
}
. descript{
width: 300px;
color: #ffee00;
font-style: italic;
margin: 70px 0 0 30px;
Β Β font-size:22px;
}
img{
Β Β position:absolute;
Β Β top:10px;
Β Β left:10px;
}
</style>
</head>
<body>
Β Β <div>
Β Β Β Β <div>
Β Β Β Β Β Β <h2>Π¨Π°ΠΏΠΊΠ° сайта</h2>
Β Β Β Β Β Β Β Β <p>Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ для сайта с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ описаниСм</p>
<img src="images/hortic.gif">
Β Β Β Β </div>
Β Β Β Β <div>ЗдравствуйтС ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠ΅ Π²Π΅Π±-мастСра!
МнС 55 Π»Π΅Ρ‚ ΠΈ я Ρ€Π°Π΄ ΠΏΡ€ΠΈΠ²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ
Вас Π½Π° своём сайтС.
Π­Ρ‚ΠΎΡ‚ сайт ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π» ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ,
Π° Π΄ΠΎ этого ΡƒΠΌΠ΅Π» Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚.
Β Β Β Β </div>
Β Β Β Β <div>А ΠΌΠ½Π΅, учитывая возраст ΠΈ Β«ΠΎΠΏΡ‹Ρ‚Β», Π±Ρ‹Π»ΠΎ Π½Π΅ просто
ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΊΠ°ΠΊ Ρ€Π°Π· эти Π½ΡŽΠ°Π½ΡΡ‹, ΠΎΠ½ΠΈ ΠΎΡ‚Π½ΠΈΠΌΠ°Π»ΠΈ
большС всСго Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.
И я Ρ€Π΅ΡˆΠΈΠ» Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ свой ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π», Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ-Π±Ρ‹ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π±Ρ‹Π»ΠΎ Π»Π΅Π³Ρ‡Π΅
ΡΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π½ΠΎΠ²ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.
Π—Π΄Π΅ΡΡŒ Β«Ρ€Π°Π·ΠΆΠ΅Π²Π°Π½Ρ‹Β» всС ΠΌΠ΅Π»ΠΎΡ‡ΠΈ ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‰ΠΈΠ΅ созданиС сайта,
ΠΌΠΈΠΌΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΡ€ΠΎΡΠΊΠ°ΠΊΠΈΠ²Π°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π°Π²Ρ‚ΠΎΡ€Ρ‹.
Β Β Β Β </div>
Β Β Β Β <div></div>
Β Β Β Β <div></div>
Β Β </div>
</body>
</html>

По ΠΌΠΎΠ΅ΠΌΡƒ Π½Π΅ ΠΏΠ»ΠΎΡ…ΠΎ, надСюсь Ρƒ вас получится Π»ΡƒΡ‡ΡˆΠ΅.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ для Ρ‚Π΅Ρ…, Ρƒ ΠΊΠΎΠ³ΠΎ сайт располоТСн Π½Π° CMS WordPress.

На WordPress устанавливаСтся готовая Ρ‚Π΅ΠΌΠ°, с Π³ΠΎΡ‚ΠΎΠ²ΠΎΠΉ шапкой, Π½ΠΎ допустим, Π’Π°ΠΌ Π·Π°Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π² эту Π³ΠΎΡ‚ΠΎΠ²ΡƒΡŽ ΡˆΠ°ΠΏΠΊΡƒ, Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ Π½ΠΈΠ±ΡƒΠ΄ΡŒ свой Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, ΠΈΠ»ΠΈ Π΅Ρ‰Ρ‘ ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

ДСлаСтся это ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. ΠžΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚Π΅ Π² консоли «Записи β€” Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽΒ», ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΡ‚Π΅ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Π² Ρ€Π΅ΠΆΠΈΠΌ HTML, ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅Ρ‚Π΅ Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΡ‚ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Π² ΡˆΠ°ΠΏΠΊΡƒ сайта.

Π’ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΏΠΎΡΠ²ΠΈΡ‚ΡŒΡΡ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Π° Β«Π—Π°ΠΏΠΈΡΡŒΒ» ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ.

Π—Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π²ΠΎ Β«Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ β€” Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Β», ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅ΠΌ для рСдактирования Ρ„Π°ΠΉΠ» header.php.

Π’ этом Ρ„Π°ΠΉΠ»Π΅, Π½Π°Ρ…ΠΎΠ΄ΠΈΠΌ строку <div>, ΠΈ послС Π½Π΅Ρ‘ вставляСм скопированный ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

ПослС этого обновляСм Ρ„Π°ΠΉΠ», ΠΈ смотрим, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΠ»ΠΎΡΡŒ Π² шапкС сайта.

Если Π΅Π³ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΊΡƒΠ΄Π° Ρ‚ΠΎ ΠΏΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ, Ρ‚ΠΎ возвращаСмся Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Ρ„Π°ΠΉΠ»Π°, ΠΈ Π² ΠΊΠΎΠ΄ изобраТСния, Π² Ρ‚Π΅Π³ img, добавляСм Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ style со свойством margin

style="margin:0 0 0 0;"

И Π΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΡƒΠ΄Π°, ΠΊΡƒΠ΄Π° Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

Π’ΠΎΡ‚ ΠΌΡ‹ ΠΈ создали ΠΏΠ΅Ρ€Π²ΡƒΡŽ страницу сайта. ПослС Π΄ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠΈ шапки, ΠΈ Π΅Ρ‰Ρ‘ ΠΊΠΎΠ΅ ΠΊΠ°ΠΊΠΈΡ… Π΄ΠΎΡ€Π°Π±ΠΎΡ‚ΠΎΠΊ, описанных Π΄Π°Π»Π΅Π΅, ΠΌΠΎΠΆΠ½ΠΎ этот Ρ„Π°ΠΉΠ» Π½Π°Π·Π²Π°Ρ‚ΡŒ index.html, ΠΈ Π²Ρ‹Π»ΠΎΠΆΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° хостинг. Π—Π°Ρ‚Π΅ΠΌ, ΠΏΠΎ этому ΠΆΠ΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ, ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ страницы, создаётся мСню ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. И сайт Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ свою Тизнь Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.

P.S. Если ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ захочСтся ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² шапкС сайта Π½Π° WordPress, ΠΈ ΠΏΠΎ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ располоТСниСм Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Ρ‚ΠΎ ΠΎΠ± этом Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅Β Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΡƒΠ΅ΠΌ Ρ‚Π΅ΠΌΡƒ оформлСния

Π–Π΅Π»Π°ΡŽ творчСских успСхов.

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

ΠŸΡŒΡΠ½Ρ‹ΠΉ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Ρ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒ Π΄Π²ΡƒΡˆΠΊΡƒ Π² ΠΏΡ€ΠΎΡ€Π΅Π·ΡŒ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚Π°. β€” Напился, β€” Π° Π΅Ρ‰Π΅ таксист, β€” сказала прохоТая. β€” Π‘ Ρ‡Π΅Π³ΠΎ взяла? β€” Π¨Π°ΠΏΠΊΠ° таксистская. β€” Π”Π°, β€” Π·Π°Π΄ΡƒΠΌΡ‡ΠΈΠ²ΠΎ произнСс ΠΏΡŒΡΠ½Ρ‹ΠΉ, β€” Π° Π±Ρ‹Π»Π° ондатровая.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ для шапки Π² Paint < < < Π’ Ρ€Π°Π·Π΄Π΅Π» > > > Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΈ тСкст Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ
Β 

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ Π² css ΡˆΠ°ΠΏΠΊΡƒ сайта

ΠžΡ‚ Π°Π²Ρ‚ΠΎΡ€Π°: привСтствуСм вас Π½Π° нашСм Π±Π»ΠΎΠ³Π΅ ΠΎ сайтостроСнии. Π£ любого сайта Π΅ΡΡ‚ΡŒ Ρ‚ΠΎ, Ρ‡Π΅ΠΌ ΠΎΠ½ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ запоминаСтся ΠΈ выдСляСтся срСди ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ…. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ это ΠΈΠΌΠ΅Π½Π½ΠΎ шапка сайта. CSS позволяСт ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π΅ Ρ‚Π°ΠΊΠΎΠΉ, ΠΊΠ°ΠΊ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ.

Π¨Π°ΠΏΠΊΠ° сайта – ΠΊΠ°ΠΊΠΎΠΉ ΠΎΠ½Π° Π±Ρ‹Π²Π°Π΅Ρ‚

ΠŸΠΎΡ€Π°Π·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ сСгодня ΠΎΡ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-рСсурса. Но Ρ‡Ρ‚ΠΎ особСнно сильно отдСляСт Π²Π΅Π±-рСсурс ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ…? Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, это ΠΈΠΌΠ΅Π½Π½ΠΎ шапка сайта с Ρ„ΠΈΡ€ΠΌΠ΅Π½Π½Ρ‹ΠΌ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ ΠΈ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎ Π½Π΅ΠΉ люди Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‚ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ запоминаСтся Π² памяти людСй.

НапримСр, Ссли Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π±Π΅Π»ΡƒΡŽ Π±ΡƒΠΊΠ²Ρƒ β€œΠ’β€ Π½Π° синСм Ρ„ΠΎΠ½Π΅, Ρ‚ΠΎ навСрняка сразу Π΄Π΅Π»Π°Π΅Ρ‚Π΅ Π²Ρ‹Π²ΠΎΠ΄ – это ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ сСти Π’ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅. А ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡ‡Ρ‚ΠΎΠ²ΠΎΠ³ΠΎ голубя Ρƒ всСх сразу ΠΆΠ΅ ассоциируСтся с Twitter. ВсС это стало Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π² ΡˆΠ°ΠΏΠΊΠ°Ρ… Ρƒ этих сайтов Π±Ρ‹Π»ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΈΠ΅ изобраТСния ΠΈ ΠΎΠ½ΠΈ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ запомнились людям.

Π’Π°ΠΊ, это Π±Ρ‹Π»ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΠΉ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ нСпосрСдствСнно ΠΊ тСхничСской части.

Как Π² CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта?

Π’ΠΎΠΎΠ±Ρ‰Π΅ шапки Π±Ρ‹Π²Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ. По ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° Π΄Π²Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹: Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹Π΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΈ Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π²Π΅Π±-страницы.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

РаньшС ΡˆΠ°ΠΏΠΊΡƒ Π΄Π΅Π»Π°Π»ΠΈ Ρ‚Π°ΠΊΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π±Π»ΠΎΠΊ – ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌΡƒ Ρ‚Π΅Π³Ρƒ div Π΄Π°Π²Π°Π»ΠΈ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€, послС Ρ‡Π΅Π³ΠΎ Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΎ всС Π½ΡƒΠΆΠ½ΠΎΠ΅ содСрТимоС, Π° ΠΏΠΎΡ‚ΠΎΠΌ всС это ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΠ»ΠΎΡΡŒ. БСгодня ΠΆΠ΅ ΡƒΠΆΠ΅ принято Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ ΠΏΠΎ-Π΄Ρ€ΡƒΠ³ΠΎΠΌΡƒ. Π‘ΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для создания шапки сайта Π² HTML5 появился ΠΏΠ°Ρ€Π½Ρ‹ΠΉ Ρ‚Π΅Π³ – header. Π•Π³ΠΎ использованиС привСтствуСтся, это позволяСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ это Π·Π° Ρ‡Π°ΡΡ‚ΡŒ шаблона ΠΈ Π·Π° Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚. ΠšΡΡ‚Π°Ρ‚ΠΈ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ основы HTML5, Ρ‚ΠΎ Π²Π°ΠΌ прямая Π΄ΠΎΡ€ΠΎΠ³Π° Π² наш ΠΏΡ€Π΅ΠΌΠΈΡƒΠΌ-Ρ€Π°Π·Π΄Π΅Π», Π³Π΄Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΡƒΡ€ΠΎΠΊΠΈ ΠΏΠΎ этой Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, для создания ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠ΅ΠΉ шапки достаточно Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ Π² html Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠΎΠ΄:

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½Π° страницС ΠΏΠΎΠΊΠ° Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ появится – Π½Π°ΠΌ Π΅Ρ‰Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Π½Π΅Π΅ содСрТимоС ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ. Но Π΄Π°Π²Π°ΠΉΡ‚Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, сдСлаСм Π±Π»ΠΎΠΊ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠΈΠΌ.

header{ width: 100%; background: #D8E3AB; height: 70px; }

header{

width: 100%;

background: #D8E3AB;

height: 70px;

}

Π’ΠΎΠΎΠ±Ρ‰Π΅, Ссли всС Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠΎ-ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌΡƒ, Ρ‚ΠΎ слСдовало Π±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΡƒ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ класс ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ (ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Π²Π°ΠΆΠ½Ρ‹ΠΉ элСмСнт Π²Π΅Π±-страницы), Π½ΠΎ ΠΌΡ‹ ΠΏΠΎΠΊΠ° просто обратимся ΠΊ элСмСнту ΠΏΠΎ Ρ‚Π΅Π³Ρƒ.

Бвойство width: 100% Π΄Π΅Π»Π°Π΅Ρ‚ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ наш Π±Π»ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π²Π½Π΅ зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана. Если ΠΆΠ΅ всС-Ρ‚Π°ΠΊΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π½ΡƒΠΆΠ½ΠΎ Ρ…ΠΎΡ‚ΡŒ ΠΊΠ°ΠΊ-Ρ‚ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ свойство max-width, Π³Π΄Π΅ Π² пиксСлях Π·Π°ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€, ΠΏΠΎ Π΄ΠΎΡΡ‚ΠΈΠΆΠ΅Π½ΠΈΡŽ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ большС Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒΡΡ.

БСйчас ΠΏΠ΅Ρ€Π΅Π΄ Π½Π°ΠΌΠΈ просто полоска, ΠΎΠΊΡ€Π°ΡˆΠ΅Π½Π½Π°Ρ Π² Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ высоту Π½Π΅ Π·Π°Π΄Π°ΡŽΡ‚ – ΠΎΠ½Π° опрСдСляСтся автоматичСски Π½Π° основании Ρ‚Π΅Ρ… элСмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π² шапкС.

<div id = «wrap»> <header></header> </div>

<div id = «wrap»>

<header></header>

</div>

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, наш Π²Π΅Ρ€Ρ… сайта Π±ΡƒΠ΄Π΅Ρ‚ располоТСн Ρ€ΠΎΠ²Π½ΠΎ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. ΠžΡΡ‚Π°Π΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ.

Рис. 1. Пока это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ всС содСрТимоС.

Π§Ρ‚ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ содСрТится Π² шапкС?

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Ρ‚Π°ΠΌ вставлСн Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Π½Π°Π·Π²Π°Π½ΠΈΠ΅, описаниС сайта. Π’Π°ΠΊΠΆΠ΅ Ρ‚Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ какая-Ρ‚ΠΎ контактная информация, навигация ΠΏΠΎ страницам ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ°.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π”Π°Π²Π°ΠΉΡ‚Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, поставим Ρ‚Π°ΠΊΠΎΠΉ:

Для этого достаточно Π΄ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΊ Ρ„ΠΎΠ½Ρƒ:

background: #D8E3AB url(logo.png) no-repeat 5% 50%;

background: #D8E3AB url(logo.png) no-repeat 5% 50%;

Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΠΎΠΌΠΈΠΌΠΎ сплошного Ρ†Π²Π΅Ρ‚Π° Π΄Π°Π΅ΠΌ Π΅Ρ‰Π΅ ΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ (Π² нашСм случаС logo.png) ΠΈ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ я Π΅Π΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΠ» Π² Ρ‚Ρƒ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΡƒ, Ρ‡Ρ‚ΠΎ ΠΈ Ρ„Π°ΠΉΠ» стилСй. Π—Π°ΠΏΡ€Π΅Ρ‰Π°Π΅ΠΌ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° ΠΈ опрСдСляСм Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ Π² Π±Π»ΠΎΠΊΠ΅ – Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ смСстим Π²Π»Π΅Π²ΠΎ ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ.

Π”ΠΎΠ±Π°Π²ΠΈΠΌ Π² ΡˆΠ°ΠΏΠΊΡƒ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ содСрТимоС. НапримСр, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ мСню.

<div class = «title»>НазваниС сайта</div> <ul class = «menu»> <li><a href = «#»>ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li> <li><a href = «#»>О нас</a></li> <li><a href = «#»>Услуги</a></li> </ul>

<div class = «title»>НазваниС сайта</div>

<ul class = «menu»>

<li><a href = «#»>ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></li>

<li><a href = «#»>О нас</a></li>

<li><a href = «#»>Услуги</a></li>

</ul>

Π’Π΅ΠΏΠ΅Ρ€ΡŒ всС это ΠΎΡ„ΠΎΡ€ΠΌΠΈΠΌ.

.title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }

.title{

font-size: 36px;

padding-top: 10px;

text-align: center;

}

.menu{

list-style: none;

position: absolute;

top: 10px;

right: 100px;

}

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ Π½ΡƒΠΆΠ½ΠΎ Π΄Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π½Π΅Π΅ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ выдСлялся, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. А Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π° сайтах Π±Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ – Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡ‚ΠΎΡΡ‚ΡŒ ΠΈ слСва, ΠΈ справа.

Π‘Π°ΠΌ список, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ, Ρ‚ΠΎΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ. Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΌΡ‹ всСго лишь ΡƒΠ±Π΅Ρ€Π΅ΠΌ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹ Ρƒ ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ², Π° Π½Π° Π΄Π΅Π»Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ ΠΌΠ½ΠΎΠ³ΠΎ Ρ‡Π΅Π³ΠΎ – ΡƒΠ±Ρ€Π°Ρ‚ΡŒ подчСркивания Ρƒ ссылок, Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈΠΌ Ρ†Π²Π΅Ρ‚ ΠΈ Ρ„ΠΎΠ½ ΠΈ Ρ‚.Π΄.

БмСстим мСню Π² ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎΠ³ΠΎ позиционирования. Π§Ρ‚ΠΎΠ±Ρ‹ это Π·Π°Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΎ, Π½ΡƒΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ для header Ρ‚Π°ΠΊΠΎΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ: position: relative;

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

Как Π·Π°Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π½Π΅ исчСзал ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅?

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ Π² css (Ρ‚Π°ΠΊΠΎΠ΅ Π΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ… Π²Π΅Π±-рСсурсах), Ρ‚ΠΎ Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ фиксированноС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. НуТно Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ стили:

А Ρ‚Π°ΠΊΠΆΠ΅ ΠΊΠΎΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚Ρ‹ (top, left, right, bottom) ΠΊΠ°ΠΊΠΈΠ΅ Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Ρ„ΠΈΠΊΡΠ°Ρ†ΠΈΡŽ Π΄Π΅Π»Π°ΡŽΡ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ jQuery, прописывая ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ сцСнарий ΠΈ привязывая Π΅Π³ΠΎ ΠΊ ΡΠΎΠ±Ρ‹Ρ‚ΠΈΡŽ – Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ скроллу страницы.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ сайты, Π² Ρ‚ΠΎΠΌ числС ΠΈ шапки, Π½ΠΎ рассмотрСнный ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» Π²Π°ΠΌ нСпонятСн, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ с самых Π°Π·ΠΎΠ² – изучСния основ HTML ΠΈ CSS. Π’ этом Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ наш ΠΏΡ€Π΅ΠΌΠΈΠΌΡƒΠΌ-Ρ€Π°Π·Π΄Π΅Π», Ρ‚Π°ΠΌ Π΅ΡΡ‚ΡŒ Π΄Π²Π° ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… видСокурса ΠΏΠΎ этим тСхнологиям, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… всС Ρ€Π°Π·ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ ΠΏΠΎ ΠΏΠΎΠ»ΠΎΡ‡ΠΊΠ°ΠΌ.

Π£ΠΌΠ΅Π½ΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ шапки Π²Π°ΠΌ пригодится, Π½Π° Ρ‚Π΅Ρ… ΠΆΠ΅ Π±ΠΈΡ€ΠΆΠ°Ρ… фриланса Π΅ΡΡ‚ΡŒ Π·Π°ΠΊΠ°Π·Ρ‹, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… просят ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ этот элСмСнт ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ оформлСния. Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, я ТСлаю Π²Π°ΠΌ успСхов Π² ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠΈ ΠΈ ΠΎΡΡ‚Π°Π²Π°ΠΉΡ‚Π΅ΡΡŒ с Π½Π°ΠΌΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ это ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈΠΉ курс ΠΏΠΎ вСрсткС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта с нуля!

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ соврСмСнныС сайты Π½Π° HTML5 ΠΈ CSS3

Π£Π·Π½Π°Ρ‚ΡŒ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅

PSD to HTML

ВСрстка сайта Π½Π° HTML5 ΠΈ CSS3 с нуля

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ

2 простых способа + бонус для WordPress

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Π΄Ρ€ΡƒΠ·ΡŒΡ! БСгодня я Ρ…ΠΎΡ‡Ρƒ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта. Она являСт собой Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ элСмСнт, ΠΏΡ€ΠΈΠ΄Π°ΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. ΠŸΡ€ΠΈΠ΄Π°Π΅Ρ‚ рСсурс ΡƒΠ·Π½Π°Π²Π°Π΅ΠΌΠΎΡΡ‚ΡŒ ΠΈ свой ΡΡ‚ΠΈΠ»ΡŒ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π΅, Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ особыС, спСциализированныС знания, Π½Π°Π²Ρ‹ΠΊΠΈ ΠΈ умСния программирования. БущСствуСт Π΄Π²Π° способа, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ Ρ†Π΅Π»ΠΈ. И ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… простой.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта: вводная информация

НачнСм с ΠΎΠ±Ρ‰Π΅ΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π΄Π°Π½Π½ΠΎΠΌ графичСском ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌ элСмСнтС. Он ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ нСсколькими нСоспоримыми прСимущСствами:

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

ΠšΡΡ‚Π°Ρ‚ΠΈ! Π£ сайта Π΅Ρ‰Π΅ Π½Π΅Ρ‚ собствСнного Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°? Π•Π³ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ всСго Π·Π° 5 ΠΌΠΈΠ½ΡƒΡ‚. Π’ этом Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ наш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

Π§Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½/ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π² сСбя Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π±Π»ΠΎΠΊ любой ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠΈ:

  • Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ – яркий, Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΉ;
  • слоган;
  • Π½ΠΎΠΌΠ΅Ρ€ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°, адрСс элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹;
  • мСню.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π² Π½Π΅ΠΌ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ всС ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Π΅ Π²Ρ‹ΡˆΠ΅ элСмСнты. Главная Π·Π°Π΄Π°Ρ‡Π° – Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠ·Π½Π°Π²Π°Π΅ΠΌΠΎΡΡ‚ΡŒ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π¨Π°ΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° максимально Π³Π°Ρ€ΠΌΠΎΠ½ΠΈΡ‡Π½ΠΎ ΡΠΎΡ‡Π΅Ρ‚Π°Ρ‚ΡŒΡΡ с основным ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ сайта.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта: Π΄Π²Π° способа достиТСния Ρ†Π΅Π»ΠΈ

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅: Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ: 4 простых дСйствия

Π― ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Ρƒ ΡƒΠ³Π»ΡƒΠ±Π»ΡΡ‚ΡŒΡΡ Π² вопросы Β«ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта htmlΒ» ΠΈΠ»ΠΈ Β«ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта cssΒ». Π‘Π½Π°Ρ‡Π°Π»Π° ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ для Π½Π΅Π΅ «рисунок».

1. Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ для сайта ΠΎΠ½Π»Π°ΠΉΠ½

НаиболСС простой ΠΌΠ΅Ρ‚ΠΎΠ΄. НС Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π½Π°Π²Ρ‹ΠΊΠΎΠ², ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… ΡƒΠΌΠ΅Π½ΠΈΠΉ. Π•ΡΡ‚ΡŒ Ρ†Π΅Π»Ρ‹ΠΉ ряд ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΎΠΊ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ шапки для сайтов. Π’ Π½ΠΈΡ… – Π½Π°Π±ΠΎΡ€Ρ‹ шаблонов. НСкоторыС сСрвисы ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния Π² ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹. Π”Ρ€ΡƒΠ³ΠΈΠ΅ – Π½Π΅Ρ‚. Π‘Ρ€Π΅Π΄ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π΅ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ бСсплатныС, Ρ‚Π°ΠΊ ΠΈ ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅.

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ для сайта ΠΎΠ½Π»Π°ΠΉΠ½ ΠΎΡ‡Π΅Π½ΡŒ просто. Волько Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ удаСтся Π½Π΅ всСгда. Π’Π΅Π΄ΡŒ Ρ€Π°Π±ΠΎΡ‚Π° ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ использованиС шаблонов.

2. Adobe Photoshop

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹ΠΉ графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. Π£ Π½Π΅Π³ΠΎ Π±Π΅Π·Π³Ρ€Π°Π½ΠΈΡ‡Π½Ρ‹Π΅ возмоТности. Работая Π² Π½Π΅ΠΌ, Π²Ρ‹ смоТСтС ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΎΠ±Π»ΠΎΠΆΠΊΡƒ, Ρ‚ΠΎΡ‡Π½ΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ΅ вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°:

  • Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°;
  • ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΈ ΠΎΡ‚Ρ‚Π΅Π½ΠΊΠ°;
  • с Π½ΡƒΠΆΠ½Ρ‹ΠΌ тСкстом ΠΈ Ρ‚.Π΄..

Photoshop являСт собой Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт для создания шапок ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ… Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов.

ΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹ΠΉ ΠΈΡ‚ΠΎΠ³

Π‘Π΄Π΅Π»Π°Ρ‚ΡŒ графичСский элСмСнт – ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° Π΄Π΅Π»Π°. НСобходимо Π΅Ρ‰Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° страницах сайта. Π‘Π½Π°Ρ‡Π°Π»Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² ΠΏΠ°ΠΏΠΊΡƒ IMAGES. Она находится Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅ административной ΠΏΠ°Π½Π΅Π»ΠΈ. ПослС Ρ‡Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΡŽ изобраТСния Π½Π° страницах.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта CSS: ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° сайт

Π Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°ΡŽ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта CSS. ΠŸΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠΌ Π² #header ΠΈ Ρ‚Π°ΠΌ вмСсто установлСнных ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² высоты ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ Π³Π°Π±Π°Ρ€ΠΈΡ‚Ρ‹ созданной ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ – высота ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния.

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠΎΠ΄Π°:

#header{

Β Β width: 1420px; Β  Β  β€” ΡˆΠΈΡ€ΠΈΠ½Π°

Β Β height: 300px;Β  Β  β€” высота

Β Β background-color: #25B33f;Β  β€” Ρ„ΠΎΠ½

Β Β margin-bottom: 30px;Β  Β  β€” отступ снизу

}

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π—Π΄Π΅ΡΡŒ ΠΈ Π΄Π°Π»Π΅Π΅ слова Β«Π¨ΠΈΡ€ΠΈΠ½Π°Β», «Высота», Β«Π€ΠΎΠ½Β» ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅ ΠΊ ΠΊΠΎΠ΄Ρƒ Π½Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ. Они лишь ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚ Ρ‚Π° ΠΈΠ»ΠΈ иная строка.

ПослС этого остаСтся Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ саму ΡˆΠ°ΠΏΠΊΡƒ:

#header{

Β Β width: 900px;

Β Β height: 200px;

Β Β background-color: #25B33f;

Β Β margin-bottom: 10px;

Β Β background-image: url(images/i8.png)Β  β€” ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°

}

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта html

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅: Как ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ Π³Π»Π°Π²Π½ΡƒΡŽ страницу сайта: 11 ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΡ…

ΠΠ°Ρ‡ΠΈΠ½Π°ΡŽ Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ описаниС сайта ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ. Для этого Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ body Π±Π»ΠΎΠΊ div с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ id=Β»headerΒ», ΠΈ Π² Π½Ρ‘ΠΌ Π΄Π²Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° h2 ΠΈΒ  h4. Π’ Π½ΠΈΡ… ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠ΅ описаниС.

<div id=Β»headerΒ»>

Β Β <h2>Мой сайт<h2>

Β Β Β Β <h4>Π’Π΅ΠΏΠ΅Ρ€ΡŒ я знаю, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта</h4>

</div>

Если Π½ΡƒΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ самого Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ тСкста описания, ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ ΠΈΡ…, потрСбуСтся использованиС Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°:

h2{

Β Β color: #2980b9;Β  β€” Ρ†Π²Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°

Β Β font: 50px Times New Roman;Β  β€” ΡˆΡ€ΠΈΡ„Ρ‚

Β Β margin-left: 500px;Β  β€” отступ слСва

}

h4{

Β Β width: 400px;Β  β€” ΡˆΠΈΡ€ΠΈΠ½Π°

Β Β color: #9b59b6;Β  β€” Ρ†Π²Π΅Ρ‚

Β Β font-style: italic;Β  β€” курсив

Β Β margin: 90px 0 0 40px;Β  β€” располоТСниС

}

И Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚

РасскаТу ΠΏΡ€ΠΎ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ способ. Π‘ΡƒΡ‚ΡŒ Π΅Π³ΠΎ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ адрСс, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ находится подготовлСнная шапка, Π² Π±Π»ΠΎΠΊΒ  <div id=Β»headerΒ»> нСпосрСдствСнно ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Π½Ρ‹ΠΌ Ρ‚Π΅Π³ΠΎΠΌ <h2>.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π’ΠΎΡ‚ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ адрСс ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ: <img src=Β»http://sitetree.com/img/0g/g1/dkr490trfdkl69746rekfklre..pngΒ»>.Β 

ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ Β«Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠΈ событий» Π½ΡƒΠΆΠ½ΠΎ Π² #header ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ строку background-image: ΠΈ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ position: relative. А Ρ€Π°Π·Π΄Π΅Π»Π°Ρ… h2 ΠΈ h4 ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ position: absolute;. Однако Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ отступы Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ². Π§Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π² ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ.

#header{

width: 700px;

height: 500px;

background-color: #2980b9;

margin-bottom: 10px;

position:relative;

}

h2{

position: absolute;

color: #2980b9;

font: 50px Times New Roman;

left: 400px;

}

h4{

position: absolute;

width: 500px;

color: #2980b9;

font-style: italic;

top: 60px;

left:20px;

}

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π² px ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°. НС Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΈΡ… Π·Π° истину! Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π½Π° своСм сайтС устанавливайтС ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ!

Π¨Π°ΠΏΠΊΠ° сайта для WordPress

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅: Как Π½Π°Π·Π²Π°Ρ‚ΡŒ компанию: 12 способов ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅

И Π·Π°Π²Π΅Ρ€ΡˆΠ°ΡŽ ΡΡ‚Π°Ρ‚ΡŒΡŽ рассказом ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта для CMS WordPress. Π₯отя ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ установку ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²ΠΎΠΉ Ρ‚Π΅ΠΌΡ‹, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ шапка создана ΠΈ установлСна ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ данная информация Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π΅Π·Π½Π° Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ Π·Π°Ρ…ΠΎΡ‚Π΅Π» ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ ΠΈ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свою, ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ.

Для этого Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠΉΡ‚ΠΈ ΠΏΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ ΠΏΡƒΡ‚ΠΈ:

  • Π·Π°ΠΉΡ‚ΠΈ Π² Π°Π΄ΠΌΠΈΠ½ΠΈΡΡ‚Ρ€Π°Ρ‚ΠΈΠ²Π½ΡƒΡŽ панСль;
  • Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ «Записи» = Β«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽΒ»;
  • ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² Ρ€Π΅ΠΆΠΈΠΌ HTML Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°;
  • Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, которая планируСтся Π² качСствС шапки;
  • послС окончания Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π΅Π½ ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ;
  • Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ;
  • Β«Π—Π°ΠΏΠΈΡΡŒΒ» ΡƒΠ΄Π°Π»ΠΈΡ‚Π΅;
  • ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π» Β«Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄Β» = Β«Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Β»;
  • Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» header.php для рСдактирования;
  • Π² Π½Π΅ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ строку <div id=Β»headerΒ»>;
  • Π² строку Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ скопированный ΠΊΠΎΠ΄ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ;
  • ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ„Π°ΠΉΠ»;
  • шапка ΡƒΠΆΠ΅ отобраТаСтся Π½Π° сайтС.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! НуТно Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ шапки Π½Π° страницС? Для этого Π²ΠΎΠ·Π²Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π² ΠΊΠΎΠ΄ ΠΈ Π² Ρ‚Π΅Π³ img, внСситС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ style со свойством margin. Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ: style=Β»margin:0 0 0 0;Β»

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта: Π»ΠΈΡ‡Π½Ρ‹ΠΉ совСт


Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ сайта, Π½ΠΎ ΠΈ ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π΅Π΅ Π½Π° свой ΠΏΡ€ΠΎΠ΅ΠΊΡ‚. Как ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ ΠΈΠ· всСго описанного Π²Ρ‹ΡˆΠ΅, Π½ΠΈΠΊΠ°ΠΊΠΈΡ… слоТностСй Π±Ρ‹Ρ‚ΡŒ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ.

Если вас ΠΈΠ½Ρ‚Π΅Ρ€Π΅ΡΡƒΡŽΡ‚ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅ сСкрСты, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠΎΠΉ WordPress, Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ ΠΌΠΎΠΉ Π±Π»ΠΎΠ³. Π’ Π½Π΅ΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ³ΠΎ ΠΏΠΎ этой Ρ‚Π΅ΠΌΠ΅.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ для сайта: основныС элСмСнты, Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

Π¨Π°ΠΏΠΊΠ° сайта (Header, Π₯Π΅Π΄Π΅Ρ€) – это ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ±Ρ€Π°Ρ‰Π°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ. Если Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π²Π΅Π±-страницу ΠΊΠ°ΠΊ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½ΡƒΡŽ модСль, Ρ‚ΠΎ Ρ„ΡƒΡ‚Π΅Ρ€ сайта – это ΠΏΠΎΠ΄Π²Π°Π», ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ – ΠΎΠΊΠ½Π° ΠΈ стСны, Π° Ρ…Π΅Π΄Π΅Ρ€ – ΠΊΡ€Ρ‹ΡˆΠ°, которая находится Π½Π° самом Π²Π΅Ρ€Ρ…Ρƒ. УхоТСнная ΠΈ красивая Ρ‡Π΅Ρ€Π΅ΠΏΠΈΡ†Π° частного Π΄ΠΎΠΌΠ° бросаСтся Π² Π³Π»Π°Π·Π°. Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΈ шапка Π½Π° сайтС Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈ Ρ€Π΅Π»Π΅Π²Π°Π½Ρ‚Π½ΠΎΠΉ. Header Π²Ρ…ΠΎΠ΄ΠΈΡ‚ Π² ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΡŽ Ρ‚Π΅Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² рСсурса, ΠΎΡ‚ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ зависит конвСрсия ΠΈ ΠΏΡ€ΠΈΠ±Ρ‹Π»ΡŒ. Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ:

  • Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ для сайта ΠΈ Ρ‡Ρ‚ΠΎ Π² Π½Π΅ΠΉ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ
  • ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ оптимизация шапки для сайта
  • Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ созданию Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎΠ³ΠΎ Ρ…Π΅Π΄Π΅Ρ€Π°
  • ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ красивых ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Ρ… шапок для сайта

Каким ΠΈΠ· прСдставлСнных сайтов ΠΌΠΎΠΆΠ½ΠΎ Π³ΠΎΡ€Π΄ΠΈΡ‚ΡŒΡΡ своСй шапкой?

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ основному Π±Π»ΡŽΠ΄Ρƒ, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌ Π²Π°ΠΌ Π»Π΅Π³ΠΊΠΈΠΉ Ρ€Π°Π·Π²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°ΠΏΠ΅Ρ€ΠΈΡ‚ΠΈΠ². ΠŸΠ΅Ρ€Π΅Π΄ Π²Π°ΠΌΠΈ Ρ‚Ρ€ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° страниц:

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ 1. Π˜Π½Ρ‚Π΅Ρ€ΡŒΠ΅Ρ€Π½Π°Ρ фотостудия Fusion

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ 2. Π‘Π΅Ρ‚ΡŒ ΡˆΠΈΠ½ΠΎΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½Ρ‹Ρ… Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠ² ΠΈ Π°Π²Ρ‚ΠΎΠΌΠΎΠ΅ΠΊ

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ 3. ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ ΠΌΠ°Ρ€ΠΌΠ΅Π»Π°Π΄Π° «Русский ΠΊΠΎΠ½Π΄ΠΈΡ‚Π΅Ρ€Β»

Π“Π΄Π΅, Π½Π° ваш взгляд, самая продуманная шапка ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ, Π° Π³Π΄Π΅, Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, стоит Π²ΡΠ΅Ρ€ΡŒΠ΅Π· ΠΏΠ΅Ρ€Π΅ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ взгляды Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°? Π£Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ· страниц ΠΏΠΎΠΏΠ°Π΄Π°ΡŽΡ‚ ΠΏΠΎΠ΄ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΡŽ друТСствСнных ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ, Π²Ρ‹ смоТСтС Π² ΠΊΠΎΠ½Ρ†Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ. ВзглянитС Π½Π° всС эти рСсурсы Π³Π»Π°Π·Π°ΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. НавСрняка Π²Ρ‹ сами ΠΏΡ€ΠΈΠ΄Π΅Ρ‚Π΅ ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΌΡƒ ΠΎΡ‚Π²Π΅Ρ‚Ρƒ. А ΠΏΠΎΠΊΠ° вСрнСмся ΠΊ Π³Π»Π°Π²Π½ΠΎΠΉ Ρ‚Π΅ΠΌΠ΅.

НазначСниС Ρ…Π΅Π΄Π΅Ρ€Π°: ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ

Π¨Π°ΠΏΠΊΠ° – это стратСгичСский Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΎΡ†Π΅Π½ΠΈΠ²Π°ΡŽΡ‚ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΡΠΊΡ€ΠΎΠ»Π»ΠΈΡ‚ΡŒ ΠΈ ΠΈΠ·ΡƒΡ‡Π°Ρ‚ΡŒ страницу. Если Ρ…Π΅Π΄Π΅Ρ€ Π½Π΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΠΈΡ‚ ΠΈ ΠΎΡ‚Ρ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚ ΠΎΡ‚ сСбя Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, ΠΈΠ·Π±Ρ‹Ρ‚ΠΊΠΎΠΌ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ, Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ², отсутствиСм Π½ΡƒΠΆΠ½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…, Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ с большСй Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°ΠΊΡ€ΠΎΠ΅Ρ‚ сайт Ρ‡Π΅Ρ€Π΅Π· нСсколько сСкунд, Π½Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΠ²ΡˆΠΈΡΡŒ дальшС. ОсобСнно это касаСтся коммСрчСских рСсурсов, Π³Π΄Π΅ Π²Π°ΠΆΠ½ΠΎ Β«ΠΏΠΎΠΉΠΌΠ°Ρ‚ΡŒΒ» ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°. Π‘Ρ‹Π²Π°ΡŽΡ‚ сайты ΠΈ Π±Π΅Π· шапок, Π½ΠΎ ΠΎ Π½ΠΈΡ… ΠΌΡ‹ упомянСм ΠΏΠΎΠ·ΠΆΠ΅. БСйчас рассмотрим Header ΠΊΠ°ΠΊ Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΈ Π½ΡƒΠΆΠ½Ρ‹ΠΉ элСмСнт Π²Π΅Π±-страницы.

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ шапки сайта

Π₯Π΅Π΄Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π΄ΠΎΠ½ΠΎΡΠΈΡ‚ΡŒ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ ΠΊΠ»ΡŽΡ‡Π΅Π²ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π·Π° считанныС сСкунды, ΠΏΠΎΠΌΠΎΠ³Π°Ρ‚ΡŒ Π΅ΠΌΡƒ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π½Π° страницС Π·Π° счСт Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ Π² Ρ†Π΅Π»ΠΎΠΌ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ приятноС Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄Π°Π²Π½ΠΎ извСстно, Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ шанса ΡƒΠΆΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚.

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

  • Π‘ΠΈΠΌΠ²ΠΎΠ»Ρ‹ Π±Ρ€Π΅Π½Π΄Π°: Π½Π°Π·Π²Π°Π½ΠΈΠ΅, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, слоган, тСматичСскиС изобраТСния ΠΈ Ρ„ΠΎΡ‚ΠΎ, ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π° ΠΈ Ρ‚ΠΎΠΌΡƒ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅
  • ΠšΡ€Π°Ρ‚ΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚-Π±Π»ΠΎΠΊ, ΠΏΡ€Π΅Π·Π΅Π½Ρ‚ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ ΠΈΠ»ΠΈ услуги
  • ΠΠ°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΈ мСню
  • Бсылки Π½Π° ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСти
  • Π‘Ρ‚Ρ€ΠΎΠΊΡƒ поиска
  • ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅: Π½ΠΎΠΌΠ΅Ρ€Π° Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ΠΎΠ², адрСса, элСктронная ΠΏΠΎΡ‡Ρ‚Π°
  • Π‘ΠΌΠ΅Π½Ρƒ языков Π² случаС многоязычного интСрфСйса
  • ΠšΠ½ΠΎΠΏΠΊΡƒ подписки ΠΈΠ»ΠΈ оформлСния заявки
  • Бсылки для взаимодСйствия с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ: скачиваниС Π΄Π΅ΠΌΠΎ-вСрсий, ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΉ ΠΈ ΠΏΡ€ΠΎΡ‡Π΅Π΅
  • Бсылку Π½Π° мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

Π’Π°ΠΆΠ½ΠΎ! Π­Ρ‚ΠΎΡ‚ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ Π½Π΅ константа. НСкоторыС пСрСчислСнныС ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΡΡ Π² шапкС, Π° ΠΏΠΎΡ€ΠΎΠΉ ΠΈ вовсС ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ для Π½Π΅Π΅. МногоС зависит ΠΎΡ‚ спСцифики сайта, Π΅Π³ΠΎ назначСния ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΡ… Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ². НиТС ΠΌΡ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎΠ± основных элСмСнтах Ρ…Π΅Π΄Π΅Ρ€Π° для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π²ΠΈΠ΄ΠΎΠ² рСсурсов.

ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ шапки для сайта

Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΌΠΎΠ΄Π΅Π»ΠΈ двиТСния Π³Π»Π°Π· ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ посСщСнии сайта. Π­Ρ‚ΠΎ ΠΎΠ΄Π½Π° ΠΈΠ· Π³Π»Π°Π²Π½Ρ‹Ρ… ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ самый Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π±Π»ΠΎΠΊ страницы Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ Π²Π°ΠΆΠ΅Π½. Когда Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Ρ€Π°Π· Π²ΠΈΠ΄ΠΈΡ‚ сайт, ΠΎΠ½ просматриваСт Π΅Π³ΠΎ вскользь, ΠΏΠΎ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΠΈ, выискивая интСрСсныС элСмСнты. ИсслСдования Π² сфСрС Π°ΠΉΡ‚Ρ€Π΅ΠΊΠΈΠ½Π³Π° ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ люди ΠΈΠ·ΡƒΡ‡Π°ΡŽΡ‚ страницы ΠΏΠΎ Ρ‚Ρ€Π΅ΠΌ схСмам:

Z-ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½. Π₯Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Π½Π° для страниц с Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ². Взгляд читатСля двиТСтся ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π»Π΅Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° Π² ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΈ «сканируСт» ΡˆΠ°ΠΏΠΊΡƒ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ.

И производная ΠΈΠ· Π½Π΅Π³ΠΎ Z-образная модСль, которая Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Π° ΠΏΡ€ΠΈ просмотрС Π±ΠΎΠ»Π΅Π΅ насыщСнных ΠΈ Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… страниц.

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

F-ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½. Когда взгляд ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ пСрСмСщаСтся ΠΏΠΎ «горячим Π·ΠΎΠ½Π°ΠΌΒ» английской Π±ΡƒΠΊΠ²ΠΎΠΉ F, это Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° ΠΏΠΎ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡƒ ΠΌΠΎΠ½ΠΎΡ‚ΠΎΠ½Π½ΠΎΠΉ сСтки. БСйчас Ρ„ΠΎΡ€ΠΌΠ° ΠΏΠΎΠ΄Π°Ρ‡ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° измСнилась, особСнно Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ, Π½ΠΎ эта модСль Ρ‚ΠΎΠΆΠ΅ Π±Ρ‹Π²Π°Π΅Ρ‚ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Π°. ВсС зависит ΠΎΡ‚ прСдставлСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π½Π° страницС.

Π’ΠΎ всСх Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ… ΠΎΠ΄Π½Π° Π·Π°ΠΊΠΎΠ½ΠΎΠΌΠ΅Ρ€Π½ΠΎΡΡ‚ΡŒ – ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅, Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅, формируСтся Π½Π° основС Π·Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π·ΠΎΠ½ 1 ΠΈ 2, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. Π­Ρ‚ΠΎ ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€Π΄ΠΈΠ»ΠΈ экспСримСнты ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Nielsen Norman Group. ΠžΡ‚ΡΡŽΠ΄Π° Π²Ρ‹Π²ΠΎΠ΄, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Header сайта Π΄Π°Π΅Ρ‚ ΠΊΠ»ΡŽΡ‡Π΅Π²ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈ прСдставлСниС ΠΎ Ρ‚ΠΎΠΌ, ΠΊΡƒΠ΄Π° ΠΎΠ½ΠΈ ΠΏΠΎΠΏΠ°Π»ΠΈ, Π° UI/UX Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ – Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚ΠΎΠ²Π°Ρ‚ΡŒ рСсурс ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΡŽ.

Визуализация ΠΈ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΠΎΡΡ‚ΡŒ шапки для сайта

Π•Π΄ΠΈΠ½ΠΎΠΉ ΠΏΠ°Π½Π°Ρ†Π΅ΠΈ для всСх ниш ΠΈ Π²ΠΈΠ΄ΠΎΠ² рСсурса Π½Π΅ сущСствуСт. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊΠΎΠΉ Ρ†Π²Π΅Ρ‚, ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ Ρ„ΠΎΠ½ Ρ…Π΅Π΄Π΅Ρ€Π° ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Π»ΡƒΡ‡ΡˆΠ΅ всСго, проводятся исслСдования ΠΈ А/Π’ тСстирования, ΠΊΠΎΠ³Π΄Π° Ρ€Π°Π·Π½Ρ‹Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹ людСй видят Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» Π½Π° ΠΎΠ΄Π½ΠΎΠΌ ΠΈ Ρ‚ΠΎΠΌ ΠΆΠ΅ сайтС. Однако основная Π·Π°Π΄Π°Ρ‡Π° ΠΎΠ΄Π½Π°: ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρƒ посСтитСля ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΌΠ½Π΅Π½ΠΈΠ΅ ΠΎ страницС Π·Π° наимСньший ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Header ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ сСбя вСсти Π²ΠΎ врСмя скроллинга:

  • Π‘ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΈΠ»ΠΈ Π²ΠΈΠ΄ΠΎΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ
  • Β«ΠŸΡ€ΠΈΠ»ΠΈΠΏΠ½ΡƒΡ‚ΡŒΒ» ΠΈ Π±Ρ‹Ρ‚ΡŒ всСгда Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ нСзависимо ΠΎΡ‚ полоТСния Π½Π° страницС, Ρ‡Ρ‚ΠΎ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π² Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ мСню Π² любой ΠΌΠΎΠΌΠ΅Π½Ρ‚
  • Π˜ΡΡ‡Π΅Π·Π°Ρ‚ΡŒ частично, вслСдствиС Ρ‡Π΅Π³ΠΎ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŽ остаСтся доступным ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»

Липкая (фиксированная) шапка сайта. ΠŸΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½Π½ΠΎΠ³ΠΎ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ ΠΈ удобства ΡŽΠ·Π΅Ρ€Π°. Навигация Π½Π΅ исчСзаСт ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅, вся информация Ρ…Π΅Π΄Π΅Ρ€Π° всСгда Π½Π° Π²ΠΈΠ΄Ρƒ. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ сайта, сдСланного студиСй Web112 ΠΈ посвящСнного ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΡΡ‚Π²Ρƒ Π·Π°Π±ΠΎΡ€ΠΎΠ². Ѐиксированный Ρ…Π΅Π΄Π΅Ρ€ содСрТит Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, описаниС услуги, Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½, e-mail ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π·Π²ΠΎΠ½ΠΊΠ°.

Π”Π²ΠΎΠΉΠ½ΠΎΠ΅ мСню. Π£Π΄ΠΎΠ±Π½Ρ‹ΠΉ ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Ρ…Π΅Π΄Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½ Π½Π° Π΄Π²Π΅ строки. Π’ качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° прСдставляСм сайт для Π±Ρ€Π΅Π½Π΄Π° радиостанций Β«Π’Π΅Ρ€Π΅ΠΊΒ», созданный Π²Π΅Π±-агСнтством Web112. Π’Π΅Ρ€Ρ…Π½ΠΈΠΉ ряд прСдставлСн ссылками Π½Π° соцсСти, ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π°ΠΌΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи. Π’Ρ‚ΠΎΡ€ΠΎΠΉ – Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π½Ρ‹ΠΉ, с Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ, описаниСм услуги ΠΈ ссылками Π½Π° основныС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π’ΠΎ врСмя скроллинга пСрвая строка Β«ΡƒΡ…ΠΎΠ΄ΠΈΡ‚Β» Π·Π° экран, Π° вторая – «сопровоТдаСт» ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π¨Π°ΠΏΠΊΠ° доступна, Π»Π΅Π³ΠΊΠΎ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΠ° ΠΈ выглядит друТСствСнно.

МСню Β«Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Β». Π­Ρ‚ΠΎ популярноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ считаСтся Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ Π½Π° Π·Π°ΠΏΠ°Π΄Π΅ ΠΈ Π² Π ΡƒΠ½Π΅Ρ‚Π΅ распространСно Π½Π΅ Ρ‚Π°ΠΊ сильно. Иконка ΠΈΠ· Ρ‚Ρ€Π΅Ρ… полос, навСянная Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ассоциациСй с трСхслойным Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠΌ, скрываСт всС Π±Π°Π·ΠΎΠ²Ρ‹Π΅ ссылки Π½Π° Ρ€Π°Π·Π΄Π΅Π»Ρ‹, Π΄Π΅Π»Π°Π΅Ρ‚ интСрфСйс минималистским ΠΈ освобоТдаСт пространство.

Кнопка часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ элСмСнт шапки. МнСния ΠΊΠ°ΡΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Β«Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π°Β» ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Ρ‹: ΠΎΠ΄Π½ΠΈ ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ ΠΈ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎΡΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΡΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π½Π° ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ, Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΡƒΠ±Π΅ΠΆΠ΄Π΅Π½Ρ‹, Ρ‡Ρ‚ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ ΠΈΠΊΠΎΠ½ΠΊΡƒ ΠΈ ΠΏΠΎΠΊΠΈΠ½ΡƒΡ‚ΡŒ сайт, Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ² ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ³ΠΎ. Π—Π΄Π΅ΡΡŒ слоТно Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠΏΡ€ΠΎΠ³Π½ΠΎΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ тСстированиС. ΠœΡ‹, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, прСдставим Π²Π°ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ нашСй студиСй, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ сочСтаСтся ΠΈ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½ΠΎΠ΅ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ мСню, ΠΈ Π½Π΅Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΉ, ΠΏΠΎ мнСнию Π΄Ρ€ΡƒΠ³ΠΈΡ… спСциалистов, Β«Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Β». Как? ΠžΡ‡Π΅Π½ΡŒ просто.

На большом экранС страница выглядит Ρ‚Π°ΠΊ.

А Π½Π° экранС смартфона Π²ΠΎΡ‚ Ρ‚Π°ΠΊ.

Π‘ΠΎΠ»ΡŒΡˆΠ΅ Π½Π΅Ρ‚ ΡΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΡ…ΡΡ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈ Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² мСню. Волько основная информация, говорящая ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ всС самоС Π²Π°ΠΆΠ½ΠΎΠ΅. И Ρ‚ΠΎΡ‚ самый Β«Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Β». Если Π½Π° экранС ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΈ ΠΏΡ€Π°Π²Π΄Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Ρ‚Π΅Ρ€ΡΡ‚ΡŒΡΡ, Ρ‚ΠΎ здСсь вниманию Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ…Π²Π°Ρ‚ΠΈΡ‚ΡŒ ΠΊΡƒΠ΄Π° мСньший объСм элСмСнтов. Кнопка мСню сразу бросаСтся Π² Π³Π»Π°Π·Π°.

Π’Π°ΠΆΠ½ΠΎ! Π­Ρ‚ΠΎ качСствСнный ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ шапки для сайта. БСгодня Π±Π΅Π· мобильной вСрсии Π½ΠΈΠΊΡƒΠ΄Π°. НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΎΠ± этом ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Ρ…Π΅Π΄Π΅Ρ€Π°. Если ΠΏΡ€ΠΈ просмотрС сайта Π½Π° Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠ΅ с большим экраном шапка ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ объСмной, Ρ‚ΠΎ Π½Π° Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅ страница Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½ΠΎ, красиво, быстро Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ (ΠΊΠ°ΠΊ, Π²ΠΏΡ€ΠΎΡ‡Π΅ΠΌ, с любого устройства) ΠΈ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΠΉ.

ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Ρ‹ΠΉ Header: Ρ€Π°Π·Π±ΠΎΡ€ основных ΠΈ второстСпСнных ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠ²

ΠŸΡ€ΠΎΠ΄Π°ΡŽΡ‰ΠΈΠ΅ коммСрчСскиС сайты, многостраничники, ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½Ρ‹ – это Ρ‚Π° катСгория, Π³Π΄Π΅ шапки Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ.

Π’Π°ΠΆΠ½ΠΎ! НС ΠΏΡ‹Ρ‚Π°ΠΉΡ‚Π΅ΡΡŒ ΡƒΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² ΡˆΠ°ΠΏΠΊΡƒ всю Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ: ΠΊΡƒΡ‡Ρƒ ΠΈΠΊΠΎΠ½ΠΎΠΊ, Π°ΠΊΡ†ΠΈΠΈ, скидки, Π²Π΅Π»ΠΈΠΊΠΈΠ΅ Ρ†ΠΈΡ‚Π°Ρ‚Ρ‹, Π΄Π»ΠΈΠ½Π½Ρ‹Π΅ описания. Π’ΠΎΠ»ΠΊΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ, ΠΎΠ²Ρ†Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ, ΠΈ Ρ‚ΠΎΠ³Π΄Π° всС останутся Ρ†Π΅Π»Ρ‹. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ Ρ…Π΅Π΄Π΅Ρ€Π° Π½Π΅ пострадаСт ΠΈ Π½Π΅ ΠΎΡ‚Ρ‚ΠΎΠ»ΠΊΠ½Π΅Ρ‚ посСтитСля.

Рассмотрим, ΠΊΠ°ΠΊΠΈΠ΅ элСмСнты Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ для шапки ΠΈ Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅:

1. Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ. На ΠΏΡ€ΠΎΠ΄Π°ΡŽΡ‰ΠΈΡ… сайтах размСщаСтся Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ. Π§Π΅Ρ€Π΅Π· Π½Π΅Π³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Π½Π° Π³Π»Π°Π²Π½ΡƒΡŽ ΠΈΠ· любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ страницы. Но Π½Π° самой Π³Π»Π°Π²Π½ΠΎΠΉ Π»ΠΎΠ³ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈΠ½Π°Ρ‡Π΅ ссылка становится Ρ†ΠΈΠΊΠ»ΠΈΡ‡Π½ΠΎΠΉ ΠΈ страница ссылаСтся сама Π½Π° сСбя. Π­Ρ‚ΠΎ Π²Ρ€Π΅Π΄Π½ΠΎ для SEO. Π‘ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Π³Π΄Π΅ ΠΎΠ½ находится нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΏΡ€ΠΈΡˆΠ΅Π» Π»ΠΈ ΠΎΠ½ Ρ‡Π΅Ρ€Π΅Π· органичСский поиск ΠΈΠ»ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚Π½ΡƒΡŽ Ρ€Π΅ΠΊΠ»Π°ΠΌΡƒ. Π§Π΅ΠΌ дольшС Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ ΠΈΠ·ΡƒΡ‡Π°Π΅Ρ‚ страницу, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΈ ΠΏΠΎΡ‡Π΅ΠΌ, Ρ‚Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ ΠΎΡ‚ΠΊΠ°Π·Π°. Π”Π΅Π»Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹ΠΌ Π½Π΅ стоит, достаточно 40-60 пиксСлСй Π² высоту. На ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ сайта-ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π° для мСбСльной ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ «МСбСль-SΒ», Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π²Ρ‹Ρ…ΠΎΠ΄Ρ†Π° ΠΈΠ· нашСго ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ, ΠΊΠ°ΠΊ Π»ΠΎΠ³ΠΎ Π² шапкС сразу сообщаСт: Β«Π’Ρ‹ Π² ΠΌΠ°Π³Π°Π·ΠΈΠ½Π΅ ΠΌΠ΅Π±Π΅Π»ΠΈΒ».

2. ΠšΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС. Π’Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ «тСкст довСрия», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ размСщаСтся рядом с Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ ΠΈ Π΄Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π΅ΠΌΠΊΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎΠ± услугах ΠΈ Π²Ρ‹Π³ΠΎΠ΄Π°Ρ… сотрудничСства с ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠ΅ΠΉ. МоТно вмСсто описания Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ УВП (ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ‚ΠΎΡ€Π³ΠΎΠ²ΠΎΠ΅ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅). Оно ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ, Π² Π²ΠΈΠ΄Π΅ ΠΎΠ΄Π½ΠΎΠΉ Ρ„Ρ€Π°Π·Ρ‹ ΠΈΠ»ΠΈ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ³ΠΎ списка. Π’ качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° взглянитС Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ Π½Π°ΠΌΠΈ сайт для Ρ‚Ρ€Π΅ΠΉΠ΄-ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³ΠΎΠ²ΠΎΠ³ΠΎ агСнтства POS Management. А Ρ‚ΠΎΡ‡Π½Π΅Π΅, Π½Π° Π΅Π³ΠΎ ΡˆΠ°ΠΏΠΊΡƒ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½ΠΎ Π²Ρ…ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ агСнтства Π² ВОП-10.

3. НомСр Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°. Π•Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ нСпосрСдствСнно Π² шапкС ΠΈΠ»ΠΈ ΡΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹. Зависит ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, ΠΎΡ‚ΠΊΡƒΠ΄Π° поступаСт большС Π·Π°ΠΊΠ°Π·ΠΎΠ². ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½ всС ΠΆΠ΅ указываСтся свСрху справа, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΡƒΠ΄ΠΎΠ±Π½ΠΎ быстро ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΈ Π½Π°Π±Ρ€Π°Ρ‚ΡŒ Π½ΠΎΠΌΠ΅Ρ€, Π° Π½Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎ ссылкС. НС ΠΏΡ‹Ρ‚Π°ΠΉΡ‚Π΅ΡΡŒ ΡƒΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Ρ…Π΅Π΄Π΅Ρ€Π΅ всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹. Если Π³ΠΎΡ€ΠΎΠ΄ΠΎΠ² ΠΌΠ½ΠΎΠ³ΠΎ, сдСлайтС Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠΉ список ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ насСлСнный ΠΏΡƒΠ½ΠΊΡ‚, ΠΊΠ°ΠΊ Π² этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

АкцСнтируйтС Π½Π° бСсплатности Π·Π²ΠΎΠ½ΠΊΠ°, Ссли Ρ‚Π°ΠΊΠΎΠ²ΠΎΠΉ имССтся. И Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π·Π²ΠΎΠ½ΠΊΠ°, которая ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρƒ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΈ Π²Π½ΡƒΡˆΠ°Π΅Ρ‚ Π΄ΠΎΠ²Π΅Ρ€ΠΈΠ΅. Π’Π°ΠΊ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ сСрвиса, ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ рСагирования Π½Π° запрос, ΠΌΠ°Π½Π΅Ρ€Ρƒ общСния сотрудников. Ни Π² ΠΊΠΎΠ΅ΠΌ случаС Π½Π΅ Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Π½ΠΎΠΌΠ΅Ρ€ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ. ΠŸΠΎΠ·Π°Π±ΠΎΡ‚ΡŒΡ‚Π΅ΡΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠ³ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ†ΠΈΡ„Ρ€Ρ‹ ΠΈ быстро ΠΏΠΎΠ·Π²ΠΎΠ½ΠΈΡ‚ΡŒ.

4. Π“Ρ€Π°Ρ„ΠΈΠΊ Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π¦Π΅Π½Π½ΠΎΡΡ‚ΡŒ этой ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² Ρ…Π΅Π΄Π΅Ρ€Π΅ зависит ΠΎΡ‚ спСцифики услуг. Если это сСрвис Π°Π²Π°Ρ€ΠΈΠΉΠ½ΠΎΠ³ΠΎ открытия Π·Π°ΠΌΠΊΠΎΠ², Ρ‚ΠΎ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΡƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ Π² ΠΊΠ²Π°Ρ€Ρ‚ΠΈΡ€Ρƒ, врСмя Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚, бСзусловно, Π²Π°ΠΆΠ½ΠΎ. Π›ΠΈΠ±ΠΎ ΠΆΠ΅ автосСрвис, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ нуТдаСтся прямо сСйчас, Π² связи с Ρ‡Π΅ΠΌ часы Ρ€Π°Π±ΠΎΡ‚Ρ‹ для Π½Π΅Π³ΠΎ – пСрвостСпСнная информация. Для ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… сайтов это Π½Π΅ просто ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΠ΅ удобства ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π½ΠΎ ΠΈ вСсомый коммСрчСский Ρ„Π°ΠΊΡ‚ΠΎΡ€ ранТирования Π² ЯндСксС. Компания Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ круглосуточно ΠΈ ΠΏΠΎ Π²Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹ΠΌ? ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΠΈΡ‚Π΅ это надписью Π² шапкС. ΠšΡΡ‚Π°Ρ‚ΠΈ, ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ качСствСнный сайт для автосСрвиса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ стыдно ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ³Π°Ρ‚ΡŒ Π² поисковиках, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ сайта для автосСрвиса: особСнности SEO ΠΈ Π²Ρ‹Π±ΠΎΡ€ CMSΒ».

5. Навигация. Π•Π΅ ΠΌΡ‹ ΡƒΠΆΠ΅ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΠ»ΠΈ Π²Ρ‹ΡˆΠ΅. НавигационноС мСню Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π³Π»Π°Π²Π½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ сайта Π² Π²ΠΈΠ΄Π΅ ссылок, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ смоТСт ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с рСсурсом. Π’ шапкС мСню всСгда Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅, Ссли ΠΎΠ½ΠΎ Π½Π΅ скрыто Β«Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ΠΎΠΌΒ».

6. ВСматичСская Π³Ρ€Π°Ρ„ΠΈΠΊΠ°. АнимированныС шапки, ΡΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ эффСкты, Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ просто статичныС изобраТСния – зависит ΠΎΡ‚ спСцифики сайта ΠΈ вкуса. РазумССтся, Π²Π°ΠΆΠ½ΠΎ ΡΠΎΠΏΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ поТСлания с Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΎΠΉ ΠΈ возмоТностями. Если Π±ΡŽΠ΄ΠΆΠ΅Ρ‚ позволяСт, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ Π½Π° Ρ„ΠΎΠ½ для шапки ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ тСматичСскоС Π²ΠΈΠ΄Π΅ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ ΠΎΡ‚ Π³Π»Π°Π²Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Π½ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ повысит ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ. Π’ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… случаях Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΡ€ΠΎΡ‰Π΅, Π½ΠΎ качСствСннСС Π²ΠΎ всСх аспСктах, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ страдали ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ, удобство, Ρ€Π΅Π»Π΅Π²Π°Π½Ρ‚Π½ΠΎΡΡ‚ΡŒ ΠΈ SEO-ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅. Π“Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ…Π΅Π΄Π΅Ρ€ ΠΎΡ‚Ρ€Π°ΠΆΠ°Π» Π΄Π΅ΡΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ ΠΈ располагал ΠΊ сСбС. НапримСр, Ссли организация ΠΎΠ±ΡƒΡ‡Π°ΡŽΡ‰Π°Ρ, вмСсто Π±Π΅Π·Π»ΠΈΠΊΠΎΠΉ симпатичной ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ сам процСсс оказания услуг. Или, Ссли это доставка ΠΏΠΈΡ†Ρ†Ρ‹, Ρ‚ΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² для Ρ„ΠΎΠ½Π° – Π΄Ρ€ΡƒΠΆΠ΅Π»ΡŽΠ±Π½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° ΠΊΡƒΡ€ΡŒΠ΅Ρ€ с Π°ΠΏΠΏΠ΅Ρ‚ΠΈΡ‚Π½ΠΎΠΉ ΠΏΠΈΡ†Ρ†Π΅ΠΉ Π² Ρ€ΡƒΠΊΠ°Ρ…. ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°ΠΉΡ‚Π΅ Ρ‚ΠΎΠ²Π°Ρ€ Π»ΠΈΡ†ΠΎΠΌ, направляйтС ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² Π½Π° ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ассоциации.

7. ΠŸΡ€ΠΎΡΡ‚Π°Ρ ΠΈ короткая Ρ„ΠΎΡ€ΠΌΠ° ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠΉ связи. ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, большим Ρ„ΠΎΡ€ΠΌΠ°ΠΌ с дСсятками ΠΏΠΎΠ»Π΅ΠΉ Π² ΠΏΡ€ΠΎΠ΄Π°ΡŽΡ‰ΠΈΡ… сайтах Π½Π΅ мСсто. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π΅ станСт Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π° это врСмя ΠΈ ΠΏΠΎΠΉΠ΄Π΅Ρ‚ ΠΈΡΠΊΠ°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ ΠΈ быстроС.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΡƒΠΆΠ΅ упомянутого Π²Ρ‹ΡˆΠ΅ агСнтства POS Management. Кнопка Β«ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ заявку» Π±Π΅Π·ΠΎΠ±ΠΈΠ΄Π½ΠΎΠ³ΠΎ Π³ΠΎΠ»ΡƒΠ±ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π°. Π€ΠΎΡ€ΠΌΠ° состоит ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΏΠΎΠ»Π΅ΠΉ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ ввСсти ΡΠ°ΠΌΡƒΡŽ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

Π’ зависимости ΠΎΡ‚ Π΄Π΅ΡΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ прСдставляСт сайт, ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ элСмСнты Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ, Π° ΠΊΠ°ΠΊΠΈΠ΅-Ρ‚ΠΎ – ΠΎΡ‚ΠΏΠ°Π΄Π°ΡŽΡ‚. Много Π³Π΄Π΅ Π² шапкС встрСчаСтся ΠΊΠΎΡ€Π·ΠΈΠ½Π° ΠΈ Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΊΠ°Π±ΠΈΠ½Π΅Ρ‚, хотя, ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠ½ΠΈΠΆΠ΅ ΠΈΠ»ΠΈ, Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π°Π΄ Ρ…Π΅Π΄Π΅Ρ€ΠΎΠΌ. Если прСдлагаСтся большой ассортимСнт Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ², поиск ΠΏΠΎ сайту Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡˆΠ°Π΅Ρ‚.

Π Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ Π² шапкС ΠΈΠ»ΠΈ Π² ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠΌ мСстС – Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ Π²Π°ΠΌ вмСстС с ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³Π°ΠΌΠΈ. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ элСмСнты БВА (call-to-action) Π² Ρ…Π΅Π΄Π΅Ρ€ Π½Π΅ Π²ΡΡ‚Π°Π²Π»ΡΡŽΡ‚, Ссли сайт сдСлан для ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° с большим Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΌ ассортимСнтом Π² сСгмСнтС B2Π‘. Если ΠΊΠ½ΠΎΠΏΠΊΠ΅ всС ΠΆΠ΅ нашлось мСсто Π² Header, ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ, Π½ΠΎ нСнавязчиво, Π±Π΅Π· ΠΊΡ€ΠΈΡ‡Π°Ρ‰ΠΈΡ… ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠ².

Π‘ адрСсом ситуация Ρ‚Π° ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ с Π½ΠΎΠΌΠ΅Ρ€ΠΎΠΌ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°. Если услуги ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ рассчитаны Π½Π° ΡΡ€ΠΎΡ‡Π½ΡƒΡŽ ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΈ ΠΊΡ€ΡƒΠ³Π»ΠΎΡΡƒΡ‚ΠΎΡ‡Π½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ, адрСс Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ‡Π΅Ρ‚ΠΊΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ Π³Π»Π°Π·Π°ΠΌΠΈ ΡŽΠ·Π΅Ρ€Π° ΠΏΡ€ΠΈ Π²Ρ…ΠΎΠ΄Π΅ Π½Π° сайт.

Π•Ρ‰Π΅ нСсколько Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ ΠΏΠΎ созданию Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎΠΉ шапки сайта:

  • Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² Ρ…Π΅Π΄Π΅Ρ€ Π°ΠΊΡ†ΠΈΠΈ ΠΈ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ прСдлоТСния, создайтС для Π½ΠΈΡ… красивый Π±Π°Π½Π½Π΅Ρ€ ΠΈ размСститС Π΅Π³ΠΎ ΠΊΠ°ΠΊ Π·Π°Π²Π΅Ρ€ΡˆΠ°ΡŽΡ‰ΠΈΠΉ элСмСнт Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π±Π»ΠΎΠΊΠ°. НС Π½ΡƒΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ лишним тСкстом ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚Π°ΠΌ хаос ΠΈΠ· словСсного мусора.
  • Π’ Header Π½Π΅ мСсто агрСссивным БВА, кислотным ΠΊΡ€ΠΈΡ‡Π°Ρ‰ΠΈΠΌ Ρ†Π²Π΅Ρ‚Π°ΠΌ ΠΈ отчаянным ΠΏΡ€ΠΈΠ·Ρ‹Π²Π°ΠΌ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Π»Π°Π΄Π΅Π»ΡŒΡ†Ρ‹ ΠΏΡ‹Ρ‚Π°ΡŽΡ‚ΡΡ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π½Π° сСбя Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ всСми способами. Если это ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ с ΡˆΠΈΡ€ΠΎΠΊΠΈΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ, яркая ΠΊΠ½ΠΎΠΏΠΊΠ° Β«ΠΊΡƒΠΏΠΈΡ‚ΡŒΒ» умСстна Π²ΠΎΠ·Π»Π΅ Ρ‚ΠΎΠ²Π°Ρ€Π°, Π½ΠΎ Π½Π΅ Π² шапкС.
  • Π Π°Π·ΠΌΠ΅Ρ€ Ρ…Π΅Π΄Π΅Ρ€Π° Π½Π°Π΄ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ Π°Π΄Π΅ΠΊΠ²Π°Ρ‚Π½Ρ‹ΠΌ – Π΄ΠΎ 250 пиксСлСй Π² высоту. НС стоит Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ шапкой вСсь ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ экран, сСйчас это ΡƒΠΆΠ΅ Π½Π΅ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ впСчатлСния, Π°, скорСС, ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ ΠΈ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°Π΅Ρ‚. Π˜ΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ – Ρ„ΠΎΠ½, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ значится полСзная ΠΈ ваТная информация. Π¨Ρ€ΠΈΡ„Ρ‚ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Π·Π΄Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅. Π’Π΅Π³ΠΈ h2-H6 для шапки – плохая идСя, Π²Π»ΠΈΡΡŽΡ‰Π°Ρ Π½Π° ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡŽ.

ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° Β«ΡˆΠ°ΠΏΠΎΡ‡Π½Ρ‹ΠΉΒ» тСст

Π’Π½Π°Ρ‡Π°Π»Π΅ ΠΌΡ‹ Π΄Π°Π»ΠΈ Π²Π°ΠΌ Ρ‚Ρ€ΠΈ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° Π³Π»Π°Π²Π½Ρ‹Ρ… страниц сайтов ΠΈ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΠ»ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, Π³Π΄Π΅ шапка ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Ρ†Π΅Π»ΠΎΠΌ сдСланы качСствСнно, Π° Π³Π΄Π΅ – Π½Π΅Ρ‚.

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

Π£ ΠΈΠ½Ρ‚Π΅Ρ€ΡŒΠ΅Ρ€Π½ΠΎΠΉ фотостудии ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ, шапка ΠΌΠΎΠ³Π»Π° Π±Ρ‹ Π±Ρ‹Ρ‚ΡŒ интСрСснСС ΠΈ Π·Π°Π²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Π΅Π΅, Π° ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ ΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½ Ρ…Ρ€ΠΎΠΌΠ°ΡŽΡ‚ Π½Π° ΠΎΠ±Π΅ Π½ΠΎΠ³ΠΈ. Из плюсов – навигация ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΡΠΏΠ°ΡΠ°ΡŽΡ‚ ΡΠΈΡ‚ΡƒΠ°Ρ†ΠΈΡŽ.

Π£ сСти ΡˆΠΈΠ½ΠΎΠΌΠΎΠ½Ρ‚Π°ΠΆΠ½Ρ‹Ρ… Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠ² Ρ‚Π° ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с сСрым Ρ†Π²Π΅Ρ‚ΠΎΠΌ – Π΅Π³ΠΎ слишком ΠΌΠ½ΠΎΠ³ΠΎ. ΠŸΡ€ΠΈ этом сам ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ экран ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΆΠ΅Π½, Π² шапкС Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚ΠΈΠΊΠΈ, Π° навигация тСряСтся Π½Π° Ρ„ΠΎΠ½Π΅ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов. Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° ΠΈ схСма размСщСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° здСсь Π½Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π° ΠΎΡ‚ слова совсСм.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ шапки для сайта: ΠΏΠΎΠ΄Π²ΠΎΠ΄ΠΈΠΌ ΠΈΡ‚ΠΎΠ³ΠΈ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Ρ…Π΅Π΄Π΅Ρ€ выглядит просто, содСрТит Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ ΠΈΠ·Π±Π°Π²Π»Π΅Π½ ΠΎΡ‚ Π»ΠΈΡˆΠ½ΠΈΡ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ². Π Π΅Π·ΡŽΠΌΠΈΡ€ΡƒΠ΅ΠΌ:

  • Π¨Π°ΠΏΠΊΠ° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΊΠΎΠ½Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° сСбС ΠΌΠ½ΠΎΠ³ΠΎ внимания ΠΈ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ ΠΎΡ‚ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ страницы.
  • Π Π°Π·ΠΌΠ΅Ρ‰Π°ΠΉΡ‚Π΅ Π² Ρ…Π΅Π΄Π΅Ρ€Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ элСмСнты. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ мусор – Ρ‚Π°Π±Ρƒ.
  • НС Π³ΠΎΠ½ΠΈΡ‚Π΅ΡΡŒ Π·Π° ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ. Π›ΡƒΡ‡ΡˆΠ΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π² ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½ΠΎΠΌ для людСй порядкС, Ρ‡Π΅ΠΌ Π²Π²ΠΎΠ΄ΠΈΡ‚ΡŒ посСтитСлСй Π² Π·Π°Π±Π»ΡƒΠΆΠ΄Π΅Π½ΠΈΠ΅.
  • Π“Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ схоТиС элСмСнты. НС Π»Π΅ΠΏΠΈΡ‚Π΅ всС Π² ΠΊΡƒΡ‡Ρƒ.
  • Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ сайты, Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚ΠΎΠ², Π° просто Ρ‚ΠΎΠΏΠΎΠ²Ρ‹Π΅. Если Ρƒ Π½ΠΈΡ… Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π·Π½Π°Ρ‡ΠΈΡ‚ ΠΈ Ρƒ вас Π±ΡƒΠ΄Π΅Ρ‚.

Header Π΅ΡΡ‚ΡŒ Π½Π΅ Π²ΠΎ всСх сайтах. Иногда ΠΎΠ½ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ Π½ΡƒΠΆΠ΅Π½, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Π»Π΅Π½Π΄ΠΈΠ½Π³Π΅, Π³Π΄Π΅ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ экран – это ΡƒΠΆΠ΅ Π±Π»ΠΎΠΊ с основной ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ. МногиС ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ рСсурсы Π±Π΅Π· шапок для самых Ρ€Π°Π·Π½Ρ‹Ρ… ниш, Π½ΠΎ это всС Π΅Ρ‰Π΅ привилСгия Π·Π°ΠΏΠ°Π΄Π°. Π’ Π ΡƒΠ½Π΅Ρ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΏΡ€ΠΈΠ²Ρ‹ΠΊΠ»ΠΈ ΠΊ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°ΠΌ, адрСсам, ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π°ΠΌ ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠΌ Π²Π°ΠΆΠ½Ρ‹ΠΌ элСмСнтам Π² самом Π²Π΅Ρ€Ρ…Ρƒ страницы.

ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ бизнСс Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ своСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°. НС Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊΠΈΠΌ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠΉ Ρ…Π΅Π΄Π΅Ρ€? Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эффСктивный ΠΈ ΠΏΡ€ΠΎΠ΄Π°ΡŽΡ‰ΠΈΠΉ сайт? Бтудия Web112 ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π²ΠΎ всСх вопросах ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΈ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΡŽ качСствСнного сайта.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° шапки сайта: ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ красивый Ρ…Π΅Π΄Π΅Ρ€

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ…Π΅Π΄Π΅Ρ€ сайта?

Π₯Π΅Π΄Π΅Ρ€ (header) β€” это элСмСнт Π²Π΅Π±-страницы, Π»Π΅ΠΆΠ°Ρ‰ΠΈΠΉ Π²Ρ‹ΡˆΠ΅ области ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

Если ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ Π²Π΅Π±-страницу Β«Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π½Ρ‹ΠΌΠΈΒ» Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°ΠΌΠΈ, Ρ‚ΠΎ Ρ„ΡƒΡ‚Π΅Ρ€ β€” это ΠΏΠΎΠ΄Π²Π°Π» сайта, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° β€” стСны ΠΈ ΠΎΠΊΠ½Π°, Π° Ρ…Π΅Π΄Π΅Ρ€ β€” ΠΊΡ€Ρ‹ΡˆΠ°.

Или, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΈΠΌΠ΅ΡŽΡ‚ Π² нашСй срСдС β€” шапка сайта.

Как Π½ΠΈ Π½Π°Π·ΠΎΠ²ΠΈ, header – стратСгичСская ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΏΡ€ΠΈΠ΄ΠΈΡ€Ρ‡ΠΈΠ²ΠΎ ΠΎΡ†Π΅Π½ΠΈΠ²Π°Π΅Ρ‚ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΡ€Π΅ΠΆΠ΄Π΅, Ρ‡Π΅ΠΌ Π½Π°Ρ‡Π°Ρ‚ΡŒ скроллинг ΠΈ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ страницы.

Π¨Π°ΠΏΠΊΠ° сайта показываСтся Π² ΠΏΠ΅Ρ€Π²Ρ‹Π΅ сСкунды взаимодСйствия, поэтому ΠΎΠ½Π° стала настоящим ΠΈΡΠΏΡ‹Ρ‚Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½ΠΎΠΌ для психологов ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΎΠ².

Π‘ΡƒΠ΄ΡƒΡ‡ΠΈ своСобразным привСтствиСм, этот элСмСнт Π΄ΠΎΠ»ΠΆΠ΅Π½ Π΄ΠΎΠ½ΠΎΡΠΈΡ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, ΠΏΠΎΠΌΠΎΠ³Π°Ρ‚ΡŒ Π² Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅ Π½Π° ΠΏΠΎΠ΄ΡΠΎΠ·Π½Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅.

Π—Π²ΡƒΡ‡ΠΈΡ‚ слоТно, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ? БСгодня ΠΌΡ‹ Ρ€Π°Π·Π»ΠΎΠΆΠΈΠΌ всС ΠΏΠΎ ΠΏΠΎΠ»ΠΎΡ‡ΠΊΠ°ΠΌ ΠΈ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠΌ вас с ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ шапки сайта.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Ρ…Π΅Π΄Π΅Ρ€ Π²Π°ΠΆΠ΅Π½ для бизнСса?

НачнСм с Ρ‚ΠΎΠ³ΠΎ, Π·Π°Ρ‡Π΅ΠΌ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ всС коммСрчСскиС сайты. БизнСсу Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ внимания, ΡƒΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ посСтитСлСй, высокиС конвСрсии ΠΈ ΠΏΡ€ΠΎΠ΄Π°ΠΆΠΈ.

Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ ряд ΠΏΡ€ΠΈΡ‡ΠΈΠ½, ΠΏΠΎΡ‡Π΅ΠΌΡƒ красивый Ρ…Π΅Π΄Π΅Ρ€ β€” ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎ Π²Π°ΠΆΠ½Ρ‹ΠΉ элСмСнт коммСрчСских сайтов (кстати, Π±Ρ‹Π²Π°ΡŽΡ‚ ΠΈ Π±Π΅Π· Ρ…Π΅Π΄Π΅Ρ€Π° β€” ΠΎ Π½ΠΈΡ… ΠΏΠΎΠ·ΠΆΠ΅).

Основная ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠΌ Π·Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΌ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π΅ со страницСй Π³Π»Π°Π·Π° Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° ΡΠΎΠ²Π΅Ρ€ΡˆΠ°ΡŽΡ‚ Ρ…Π°Ρ€Π°ΠΊΡ‚Π΅Ρ€Π½Ρ‹ΠΉ Π·ΠΈΠ³Π·Π°Π³ (ΠΊΠ°ΠΊ Π½Π° рисункС). ΠŸΠ΅Ρ€Π²Ρ‹Π΅ впСчатлСния ΠΌΠΎΠ·Π³ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° основании элСмСнтов 1 ΠΈ 2 β€” Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана.

Π­Ρ‚Π° схСма Π±Ρ‹Π»Π° ΠΏΠΎΠ΄Ρ‚Π²Π΅Ρ€ΠΆΠ΄Π΅Π½Π° экспСримСнтами ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Nielsen Norman Group, ΠΈ ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² повсСднСвной Ρ€Π°Π±ΠΎΡ‚Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² ΠΈ спСциалистов UX.

Когда ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ призСмлился Π½Π° домашнСй страницС ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΠΎΠ½ быстро просматриваСт ΡˆΠ°ΠΏΠΊΡƒ β€” сканируСт Π΅Π΅ Π² Π½Π°Π΄Π΅ΠΆΠ΄Π΅ Π·Π°Ρ†Π΅ΠΏΠΈΡ‚ΡŒΡΡ взглядом Π·Π° интСрСсный ΠΎΠ±ΡŠΠ΅ΠΊΡ‚. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚.


ИсслСдования Π² области Π°ΠΉ-Ρ‚Ρ€Π΅ΠΊΠΈΠ½Π³Π° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ взгляд ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ «сканируСт» страницу ΠΏΠΎ Ρ‚Ρ€Π΅ΠΌ основным ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Π°ΠΌ. Помимо упомянутого Π²Ρ‹ΡˆΠ΅ Z-ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Π°, это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ F-ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ ΠΈ Ρ‚Π°ΠΊ называСмая Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ° Π“ΡƒΡ‚Π΅Π½Π±Π΅Ρ€Π³Π°.

Π’ΠΎ всСх случаях сканированиС начинаСтся с шапки β€” Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ области Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана. ИспользованиС Ρ…Π΅Π΄Π΅Ρ€Π° для размСщСния Π²Π°ΠΆΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π° ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡƒΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ ΡΠΊΠ»ΠΎΠ½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΊ конвСрсии.

ИмСнно поэтому Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Ρ…Π΅Π΄Π΅Ρ€Π° β€” ваТнСйший ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ изучСния для спСциалистов ΠΏΠΎ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ, ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‰ΠΈΠΊΠΎΠ² ΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΎΠ².

Β«Π›ΡŽΠ΄ΠΈ судят ΠΎ качСствС Π²Π΅Π±-сайта Π·Π° ΠΏΠ°Ρ€Ρƒ сСкунд, Π° Β«Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ впСчатлСния» Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π½Π΅ сущСствуСт. Π‘Π°ΠΉΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ сразу Π½Π΅ ΠΏΡ€ΠΈΠΊΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚ взгляд, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠ²Π°Π»ΠΎΠΌ бизнСса», — считаСт извСстный ΠΏΡ€ΠΎΠ΄Π°ΠΊΡ‚-ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ Π‘ΠΎΠ³Π΄Π°Π½ Π‘Π°Π½Π΄Ρƒ.

НС Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΈ ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠΉ сторонС шапки β€” ΠΎΠ½Π° содСрТит мСню.

НСсмотря Π½Π° это, Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ сайт ΠΈΠΌΠ΅Π΅Ρ‚ header.

НСкоторыС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» шапки сайта Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… областях страницы, прСдоставляя посСтитСлям вСсьма Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚.

Π§Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² ΡˆΠ°ΠΏΠΊΡƒ сайта?

Header ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ элСмСнтов:

β€’ Π‘ΠΈΠΌΠ²ΠΎΠ»Ρ‹ идСнтичности Π±Ρ€Π΅Π½Π΄Π°: Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Π½Π°Π·Π²Π°Π½ΠΈΠ΅, слоган ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ прСдставитСлСй ΠΈ офиса, ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ†Π²Π΅Ρ‚Π°

β€’ Π‘Π»ΠΎΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΏΡ€Π΅Π·Π΅Π½Ρ‚ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ ΠΈΠ»ΠΈ услуги ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ

β€’ Бсылки Π½Π° основныС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π²Π΅Π±-сайта (навигация)

β€’ Бсылки Π½Π° самыС популярныС ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСти

β€’ ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Π°Ρ информация (Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π½Ρ‹ΠΉ Π½ΠΎΠΌΠ΅Ρ€, email)

β€’ ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ языковых вСрсий сайта

β€’ Кнопка подписки ΠΏΠΎ элСктронной ΠΏΠΎΡ‡Ρ‚Π΅

β€’ ПолС для поисковых запросов

β€’ Бсылка Π½Π° мобильноС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅

β€’ Бсылки для взаимодСйствия с ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ

ΠœΡ‹ Π½Π΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ, Ρ‡Ρ‚ΠΎ всС эти элСмСнты Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‚ΠΈΡΠ½ΡƒΡ‚ΡŒ Π² header.

НСкоторыС ΠΈΠ· Π½ΠΈΡ… вовсС Π½Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽΡ‚ΡΡ Π² соврСмСнном Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.

НапримСр, ссылки Π½Π° ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСти Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы слуТат ΠΎΡ‚Π²Π»Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠΌ Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ ΠΈ уводят посСтитСлСй с рСсурса.

А публикация адрСса элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹ β€” мишСнь для спамовых рассылок.

И Π²ΠΎΠΎΠ±Ρ‰Π΅, ΠΈΠ·Π±Π΅Π³Π°ΠΉΡ‚Π΅ пСрСгруТСнности Ρ…Π΅Π΄Π΅Ρ€Π° любой Ρ†Π΅Π½ΠΎΠΉ. Π§Π΅ΠΌ большС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ² ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π±ΠΎΡ€ΡŽΡ‚ΡΡ Π·Π° Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ρ‚Π΅ΠΌ мСньшС Π΅Π³ΠΎ останСтся.

Выбирая, Ρ‡Ρ‚ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ, Π° Ρ‡Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² ΡˆΠ°ΠΏΠΊΡƒ сайта, Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ стоит ΠΏΠΎΡΠΎΠ²Π΅Ρ‚ΠΎΠ²Π°Ρ‚ΡŒΡΡ с ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³Π°ΠΌΠΈ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ. Π­Ρ‚ΠΎ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅!

Π§ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Π°Ρ иСрархия

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Ρ…Π΅Π΄Π΅Ρ€Π°, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ проводят Π³Π»ΡƒΠ±ΠΎΠΊΠΈΠ΅ исслСдования ΠΈ А/Π’ тСстированиС. Π”Π°Π½Π½Ρ‹ΠΉ аспСкт Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈΠ³Ρ€Π°Π΅Ρ‚ критичСски Π²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² UX, ΠΈ просчСты нСдопустимы.

ЦСль проста: ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€ΠΎΡΠΊΠ°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ»ΡŽΡ‡Π΅Π²ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈ ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅Π΅ ΠΌΠ½Π΅Π½ΠΈΠ΅ ΠΎ сайтС Π·Π° ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ мСньшСС врСмя. Π˜Π½Π°Ρ‡Π΅ ваш интСрфСйс ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠ·Π²Π°Ρ‚ΡŒ non-user-friendly.

Π’Π°ΠΊΠΆΠ΅ Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ header ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ влияСт Π½Π° скроллинг страницы.

НСкоторыС Π²Π΅Π±-сайты ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ фиксированный (Π»ΠΈΠΏΠΊΠΈΠΉ) Ρ…Π΅Π΄Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ всСгда остаСтся Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана ΠΈ Π³ΠΎΡ‚ΠΎΠ² ΠΏΠΎΠΌΠΎΡ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ своими ссылками.

Π”Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ Π² процСссС скроллинга. Π‘ΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈ Ρ‚Π°ΠΊΠΈΠ΅, Π³Π΄Π΅ header ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅, оставляя Ρ‚ΠΎΠ»ΡŒΠΊΠΎ самоС Π²Π°ΠΆΠ½ΠΎΠ΅.

Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню

Π‘Π°ΠΌΡ‹ΠΉ вкусный элСмСнт Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части Π²Π΅Π±-страниц β€” это Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню.

Для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² поясним, Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ Ρ‚Ρ€ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ полоски, ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ мСню. Π‘ΠΎΠ³Π»Π°ΡΠΈΡ‚Π΅ΡΡŒ, ΠΎΠ½ΠΈ Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‚ Β«Ρ…Π»Π΅Π±-мясо-Ρ…Π»Π΅Π±Β» Π² популярном Π±ΡƒΡ‚Π΅Ρ€Π±Ρ€ΠΎΠ΄Π΅!

Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню освобоТдаСт ΠΌΠ½ΠΎΠ³ΠΎ мСста, позволяя ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ интСрфСйс минималистичным ΠΈ ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ, ΠΏΠΎΠ»Π½Ρ‹ΠΌ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ пространства. Π Π°Π½Π΅Π΅ ΠΌΡ‹ писали, Ρ‡Ρ‚ΠΎ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ остаСтся Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Ρ€ΡƒΠ±Π΅ΠΆΠ½ΠΎΠΉ Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠ΅ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² 2018 Π³ΠΎΠ΄Ρƒ.

НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Ρƒ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Π² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… прилоТСниях ΠΈ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π΅ΡΡ‚ΡŒ Π»Π°Π³Π΅Ρ€ΡŒ сторонников ΠΈ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΈΠΊΠΎΠ², ΠΎΠ½ ΡˆΠΈΡ€ΠΎΠΊΠΎ примСняСтся ΠΏΠΎΠ²ΡΡŽΠ΄Ρƒ.

ЕдинствСнный Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ ΠΏΡ€ΠΎΡ‚ΠΈΠ² Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€Π° основываСтся Π½Π° Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΌΠ°Π»ΠΎΠ·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΉ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°ΠΏΡƒΡ‚Π°Ρ‚ΡŒ Π½Π΅Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ посСтитСля. По Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π΄Π°Π½Π½Ρ‹ΠΌ, Β«Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΉ Π±ΡƒΡ‚Π΅Ρ€Π±Ρ€ΠΎΠ΄Β» ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ ΠΎΡ‚ΠΊΠ°Π·ΠΎΠ².

Π”Π²ΠΎΠΉΠ½ΠΎΠ΅ мСню Π² шапкС сайта

Π”Π²ΠΎΠΉΠ½ΠΎΠ΅ мСню β€” это Π΄Π²Π° слоя Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠ΄ Π΄Ρ€ΡƒΠ³ΠΎΠΌ.

Бмысл Ρ‚Π°ΠΊΠΎΠ³ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π΅Π½: Ρ…Π΅Π΄Π΅Ρ€ любого сайта являСтся стратСгичСской ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ взаимодСйствия, Π° ΠΏΠΎΡ‚ΠΎΠΌΡƒ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ максимально ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½Ρ‹ΠΌ.

Π¦Π΅Π»Π΅ΡΠΎΠΎΠ±Ρ€Π°Π·Π½ΠΎΡΡ‚ΡŒ Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ мСню Π² шапкС сайта нСльзя Π½Π°Π·Π²Π°Ρ‚ΡŒ бСсспорной, поэтому для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ А/Π’ тСстированиС.

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ шапки сайта

ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΡŽ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части Π²Π΅Π±-страницы Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ зависит ΠΎΡ‚ Ρ†Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ прСслСдуСт ваш сайт. Π‘Ρ€Π΅Π½Π΄ΠΈΠ½Π³ личности Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³ Ρ‚ΠΎΠ²Π°Ρ€Π° ΠΈΠ»ΠΈ услуги β€” Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ. Π”Π°Π²Π°ΠΉΡ‚Π΅ разбСрСмся.

Header для Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π° личности

Если Π²Ρ‹ прСдставляСтС Ρ‡Π°ΡΡ‚Π½ΡƒΡŽ Ρ„ΠΈΡ€ΠΌΡƒ ΠΈΠΌΠ΅Π½ΠΈ сСбя, ΡΠ²Π»ΡΠ΅Ρ‚Π΅ΡΡŒ Π°Π²Ρ‚ΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π½Ρ‹ΠΌ спСциалистом ΠΈΠ»ΠΈ, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅, Π·Π²Π΅Π·Π΄ΠΎΠΉ β€” посСтитСли Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎΠ± этом с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда. Π’Ρ‹ β€” Π±Ρ€Π΅Π½Π΄, поэтому header посвящаСтся Π²Π°ΠΌ.

Π‘Π°ΠΌΡ‹ΠΉ быстрый способ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ чувства причастности, ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ построСниС ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ ΠΈ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ·Π½Π°Π½ΠΈΠ΅ – Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΡΡ‡Π°ΡΡ‚Π»ΠΈΠ²ΡƒΡŽ, ΡƒΠ»Ρ‹Π±Π°ΡŽΡ‰ΡƒΡŽΡΡ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° Π² шапкС сайта.

Π”Π°ΠΆΠ΅ Ссли ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ встрСчал вас, Π½Π΅ΠΎΠ΄Π½ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎΠ΅ созСрцаниС вашСго Π»ΠΈΡ†Π° со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ заставит ΠΏΠΎΡ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹Π΅.

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Ρ…Π΅Π΄Π΅Ρ€Π° Π²Π΅Π±-сайта для Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π° личности цСлСсообразно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, имя.

Π”Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ красивый Ρ…Π΅Π΄Π΅Ρ€ Π½Π° сайтС Ани Π›ΠΎΡ€Π°ΠΊ β€” Π³Π»Π°Π· Π½Π΅ ΠΎΡ‚ΠΎΡ€Π²Π°Ρ‚ΡŒ!


Header для Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π° бизнСса

Если это ΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎΠΉ ΠΊΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ сайт, Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ: Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ Π² шапкС Π½Π΅ Β«ΠΏΠΎΡ€Π²Π΅Ρ‚ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Β», ΠΊΠ°ΠΊ принято сСйчас Π²Ρ‹Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ.

Π’ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… случаях Π»ΡƒΡ‡ΡˆΠ΅ΠΉ стратСгиСй являСтся минимизация Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π½ΡΡ‚ΡŒ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π²Ρ‹ΡˆΠ΅. Или Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ…Π΅Π΄Π΅Ρ€, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ (Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π±ΡƒΠ΄Π΅ΠΌ чСстными) ваш Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ – это Π½Π΅ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°, покупатСля, ΠΏΠ°Ρ€Ρ‚Π½Π΅Ρ€Π°.

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

Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Ρ…Π΅Π΄Π΅Ρ€ 100% выполняСт свои Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ сообщаСт ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŽ ΠΎ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΈ ΠΎΠ½Π»Π°ΠΉΠ½-рСсурса.

Header для Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π° Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ² ΠΈ услуг

Для Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π° Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ², событий, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌ ΠΈ услуг ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, доносящий ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠ΅ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅. ΠšΡ€Π°Ρ‚ΠΊΠΎΠ΅ заявлСниС ΠΎ прСимущСствах ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ посСтитСлям ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, находятся Π»ΠΈ ΠΎΠ½ΠΈ Π² Π½ΡƒΠΆΠ½ΠΎΠΌ мСстС.

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Ρ…Π΅Π΄Π΅Ρ€Π° для ΠΏΡ€ΠΎΠ΄Π°ΠΆΠΈ Π±ΠΈΠ»Π΅Ρ‚ΠΎΠ² Π½Π° мСроприятиС (ΠΊΠΎΠ½Ρ†Π΅Ρ€Ρ‚, Π²Π΅Ρ‡Π΅Ρ€ΠΈΠ½ΠΊΠ°) ΠΏΠΎΡΡ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ ΡΠΌΠΎΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Π΅Π³ΠΎ атмосфСру.

РассмотритС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° Ρ‚ΠΎΠ²Π°Ρ€Π°, ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ³ΠΎ описания ΠΈ Π»Π°ΠΊΠΎΠ½ΠΈΡ‡Π½ΠΎΠ³ΠΎ, ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.

ΠžΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ β€” Π²Π΅Π±-сайт агСнтства ΠΏΠΎ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΡ€Π°Π·Π΄Π½ΠΈΠΊΠΎΠ² Π² ΠšΠ°Π·Π°Ρ…ΡΡ‚Π°Π½Π΅ Joyday. ΠžΠ³Ρ€ΠΎΠΌΠ½Π°Ρ шапка с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ взгляда настраиваСт Π½Π° Π²Ρ‹Ρ…ΠΎΠ΄Π½Ρ‹Π΅!


Π’Π΅Π±-сайты Π±Π΅Π· шапки

Header Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π΄Ρ€Π°Π³ΠΎΡ†Π΅Π½Π½Ρ‹Π΅ пиксСли Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части экрана, Ρ‡Ρ‚ΠΎ Π½Π΅ всСгда ΠΎΠΏΡ€Π°Π²Π΄Π°Π½Π½ΠΎ.

Для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ Π»ΡƒΡ‡ΡˆΠ΅ вовсС ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Ρ…Π΅Π΄Π΅Ρ€Π°, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ вмСсто этого, скаТСм, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ.

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Π±-сайта ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»ΠΈ Π½ΡƒΠΆΠ½Π° шапка?

ЯвляСтся Π»ΠΈ ΠΎΠ½Π° ΠΊΡ€ΠΈΡ‚ΠΈΡ‡Π½ΠΎΠΉ для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ? Или для Π²ΠΎΡ€ΠΎΠ½ΠΊΠΈ ΠΏΡ€ΠΎΠ΄Π°ΠΆ?

Π§Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ с шапкой Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах? Она всС Ρ€Π°Π²Π½ΠΎ исчСзнСт ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡΡ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ, Ρ‡Ρ‚ΠΎ Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ смоТСт Π΅Π΅ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ?

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ΄ΠΈΠ²ΠΈΡ‚ΡŒΡΡ собствСнным Π²Ρ‹Π²ΠΎΠ΄Π°ΠΌ!

11 совСтов ΠΏΠΎ созданию ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта — это ΠΏΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ видят посСтитСли ΠΏΡ€ΠΈ посСщСнии сайта, ΠΈ ΠΎΠ½ появляСтся Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС сайта. Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта сочСтаСт Π² сСбС чистый Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΊΡ€ΠΈΡΡ‚Π°Π»ΡŒΠ½ΠΎ Ρ‡ΠΈΡΡ‚ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ ΠΏΠΎ Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡƒΠ±ΠΎΠΊΠΈΠΌ страницам Π²Π΅Π±-сайта. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Π°ΠΆΠ½ΠΎ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄Π°Ρ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта для Π²Π°ΡˆΠΈΡ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡ… ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°ΠΌ быстро ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΠΈΠΌ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ. Π’ΠΎΡ‚ 11 совСтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ для Π²Π°ΡˆΠΈΡ… сайтов.

Π‘ΠΎΠ²Π΅Ρ‚ β„–1. ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΠΈΡ‚Π΅ самыС Π²Π°ΠΆΠ½Ρ‹Π΅ элСмСнты

ΠžΠ±Π΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ Π³Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ посСтитСли сайта Π΄Π΅Π»Π°Π»ΠΈ Π½Π° сайтС, ΠΈ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ этот элСмСнт Ρ‡Π΅Ρ‚ΠΊΠΎ Π²ΠΈΠ΄Π΅Π½ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅. НапримСр, для нСкоммСрчСских сайтов Π΅ΡΡ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ Β«ΠŸΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ сСйчас»; для сайтов с рСсторанами — Π·Π½Π°Ρ‡ΠΎΠΊ Β«Π—Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ столик».

Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ содСрТат ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, которая ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ взаимодСйствиС посСтитСлСй с сайтом, Π² Ρ‚ΠΎΠΌ числС:

  • НавигационныС ссылки
  • Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ
  • ΠŸΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ (Π·Π°ΠΊΠ°ΠΆΠΈΡ‚Π΅ стол, сдСлайтС ΠΏΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΠΎΠ·Π²ΠΎΠ½ΠΈΡ‚Π΅ Π½Π°ΠΌ)
  • ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½Π°Ρ информация
  • Π—Π½Π°Ρ‡ΠΊΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй
  • Π‘Π»ΠΎΠ³Π°Π½
  • ΠœΠ½ΠΎΠ³ΠΎΡΠ·Ρ‹Ρ‡Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ
  • ΠšΠΎΡ€Π·ΠΈΠ½Π° для ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ

ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ… Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹ для Π²Π°ΡˆΠΈΡ… сайтов, ΠΈ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΈΡ….

Π‘ΠΎΠ²Π΅Ρ‚ β„–2. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅, Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ вашСго сайта

ВСкст Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΌ. По возмоТности ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠ΅ слова ΠΈ Π²Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ с ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ большим Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π°. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ подходят для стилизованных ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΡ… Ρ‚Ρ€ΡƒΠ΄Π½Π΅Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π»Π΅Π³ΠΊΠΎ Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΌΠΈ, поэтому ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅, Ρ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹.

Π‘ΠΎΠ²Π΅Ρ‚ β„–3. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ для сайтов с Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΌΠΈ изобраТСниями

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

Если Π²Ρ‹ использовали Π»ΠΈΠΏΠΊΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π΅Π³ΠΎ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΈ Ρ„ΠΎΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ†Π²Π΅Ρ‚ ΠΊ Ρ„ΠΎΠ½Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Π»Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΎΡ‚ ссылок.

Для сайтов с яркими изобраТСниями ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.

Π‘ΠΎΠ²Π΅Ρ‚ β„–4. Π£ΠΌΠ΅Π½ΡŒΡˆΠ°ΠΉΡ‚Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ основная информация ΠΎΡΡ‚Π°Π²Π°Π»Π°ΡΡŒ Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ

ΡƒΡΠ°ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ объСм пространства, Π·Π°Π½ΠΈΠΌΠ°Π΅ΠΌΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅, ΠΏΡ€ΠΈ сохранСнии доступа ΠΊ ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ сайта.Они особСнно ΡƒΠ΄ΠΎΠ±Π½Ρ‹, Ссли Π²Ρ‹ создали Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ большой эффСктный Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ. Π’ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°ΡŽΡ‰Π΅ΠΌΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ основныС элСмСнты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Ρ†Π²Π΅Ρ‚ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

Π‘ΠΎΠ²Π΅Ρ‚ β„–5. Π•ΡΡ‚ΡŒ ΠΌΠ°Π³Π°Π·ΠΈΠ½? ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ Π²Π²Π΅Ρ€Ρ…Ρƒ!

На сайтах элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ помСститС Π·Π½Π°Ρ‡ΠΎΠΊ ΠΊΠΎΡ€Π·ΠΈΠ½Ρ‹ ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ. Π­Ρ‚ΠΎ позволяСт посСтитСлям сайта ΡΠΎΠ²Π΅Ρ€ΡˆΠ°Ρ‚ΡŒ ΠΏΠΎΠΊΡƒΠΏΠΊΠΈ Π»Π΅Π³ΠΊΠΎ ΠΈ ΠΎΠ΄Π½ΠΈΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΌΡ‹ΡˆΠΈ, нСзависимо ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΎΠ½ΠΈ ΠΏΠ΅Ρ€Π΅ΡˆΠ»ΠΈ Π½Π° сайт.

НаконСчник β„–6. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ эффСкты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ посСтитСлям, Π³Π΄Π΅ ΠΎΠ½ΠΈ находятся ΠΈ ΠΊΡƒΠ΄Π° ΠΈΠ΄ΡƒΡ‚

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ навСдСния / Π²Ρ‹Π±ΠΎΡ€Π° ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ элСмСнтами, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ.Π’Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ эффСкты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ достаточно Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π½ΠΎ Π½Π΅ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Ρ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ эффСкты Π²ΠΈΠ΄Π½Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ столС, поэтому ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ эффСкты (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΈΠ΄Π½Ρ‹ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.

Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ навСдСния / Π²Ρ‹Π±ΠΎΡ€Π° ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ, Π³Π΄Π΅ ΠΎΠ½ΠΈ находятся Π½Π° сайтС.

Π‘ΠΎΠ²Π΅Ρ‚ β„– 7. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π³Π°Ρ€ΠΌΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ с Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ

.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ — это часто ΠΏΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ видят посСтитСли сайта, поэтому Π²Π°ΠΆΠ½ΠΎ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ.Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»ΡƒΡ‡ΡˆΠ΅ всСго соотвСтствуСт Ρ„ΠΎΡ€ΠΌΠ΅ ΠΈ ΡΡ‚ΠΈΠ»ΡŽ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°. Π’ Ρ†Π΅Π»ΠΎΠΌ Π»ΡƒΡ‡ΡˆΠ΅ всСго смотрятся ΠΊΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Π΅ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹. Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅; ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Π΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ смотрятся справа ΠΈΠ»ΠΈ слСва.

ΠšΡ€ΡƒΠ³Π»Ρ‹Π΅ ΠΈ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Π΅ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ смотрятся посСрСдинС.

Π‘ΠΎΠ²Π΅Ρ‚ β„–8. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹Ρ€Π°ΠΆΠ°ΡŽΡ‚ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ

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

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ эффСкты Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ Π»ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ.

Π‘ΠΎΠ²Π΅Ρ‚ β„–9. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Π΅ мСню, Ρ‡Ρ‚ΠΎΠ±Ρ‹ изобраТСния сияли

Π Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Π΅ мСню ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ подходят для Π²Π΅Π±-сайтов с Π±ΠΎΠ³Π°Ρ‚Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ достаточно мСста для отобраТСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Они ΡƒΠΆΠ΅ довольно Π΄Π°Π²Π½ΠΎ ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… сайтах ΠΈ ​​сСйчас всС Ρ‡Π°Ρ‰Π΅ ΠΈ Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ….

Для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² с Π²Π°ΠΆΠ½Ρ‹ΠΌΠΈ Π·Π½Π°Ρ‡ΠΊΠ°ΠΌΠΈ ΠΈ ссылками (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° сайтах элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ) использованиС Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° позволяСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π·Π½Π°Ρ‡ΠΎΠΊ ΠΊΠΎΡ€Π·ΠΈΠ½Ρ‹ ΠΏΠΎΠΊΡƒΠΏΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ выдСляСтся, указывая посСтитСлям, Ρ‡Ρ‚ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ информация (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, навигация ΠΏΠΎ сайту) ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π° Π² Ρ‰Π΅Π»Ρ‡ΠΎΠΊ.

Для соврСмСнного внСшнСго Π²ΠΈΠ΄Π°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅Π³ΠΎ ΡΠΈΡΡ‚ΡŒ изобраТСниям ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.

Π‘ΠΎΠ²Π΅Ρ‚ β„–10. Рассмотрим Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль — ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Π»ΠΈ ΠΎΠ½Π° для вашСго сайта?

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ

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

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ

Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ якорныС ссылки посСтитСлям Π² любом мСстС сайта.

Π‘ΠΎΠ²Π΅Ρ‚ β„–11. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши сайты ΠΎΡΡ‚Π°Π²Π°Π»ΠΈΡΡŒ свСТими

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ

нСвСроятно Π³ΠΈΠ±ΠΊΠΈΠ΅ ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ΅ влияниС Π½Π° внСшний Π²ΠΈΠ΄ Π²Π°ΡˆΠΈΡ… сайтов. Π’ΠΎΡ‚ ΠΏΠΎΡ‡Π΅ΠΌΡƒ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов — ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ свСТий Π²ΠΈΠ΄ Π²Π΅Π±-сайтов с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ усилиями.

НСт нСобходимости Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ шаблон ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ смотрится Π½Π° всСх устройствах, ΠΈ Π²Ρ‹ ΠΎΠ±Π½ΠΎΠ²ΠΈΠ»ΠΈ свой сайт с ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ усилиями.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ


Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.


Адаптивный Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ

Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ эффСкт.

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»


Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ

Π¨Π°Π³ 1) Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ HTML:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


Π¨Π°Π³ 2) Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ CSS:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

/ * Π‘Ρ‚ΠΈΠ»ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° с сСрым Ρ„ΠΎΠ½ΠΎΠΌ ΠΈ нСбольшим отступом * /
.Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ {
ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: скрыто;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # f1f1f1;
отступ: 20 пиксСлСй 10px;
}

/ * Π‘Ρ‚ΠΈΠ»ΡŒ ссылок Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° * /
.header a {
float: Π»Π΅Π²Ρ‹ΠΉ;
Ρ†Π²Π΅Ρ‚: Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ;
Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ;
Π½Π°Π±ΠΈΠ²ΠΊΠ°: 12px;
тСкст-ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚;
Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 18 пиксСлСй;
высота строки: 25 пиксСлСй;
border-radius: 4px;
}

/ * Π‘Ρ‚ΠΈΠ»ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° ссылка (ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ установили ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ line-height ΠΈ font-size Ρ€Π°Π²Π½Ρ‹ΠΌ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΡ€ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Π° * /
.Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ a.logo {
font-size: 25 пиксСлСй;
font-weight: ΠΆΠΈΡ€Π½Ρ‹ΠΉ;
}

/ * Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ * /
.header a: hover {
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #ddd;
Ρ†Π²Π΅Ρ‚: Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ;
}

/ * Π‘Ρ‚ΠΈΠ»ΡŒ активная / тСкущая ссылка * /
. Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ a.Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ {
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: Π³ΠΎΠ»ΡƒΠ±ΠΎΠΉ;
Ρ†Π²Π΅Ρ‚: Π±Π΅Π»Ρ‹ΠΉ;
}

/ * ΠŸΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ€Π°Π·Π΄Π΅Π» ссылок справа * /
.header-right {
float: right;
}

/ * Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΌΠ΅Π΄ΠΈΠ°-запросы для опСративности — ΠΊΠΎΠ³Π΄Π° экран ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 500 пиксСлСй ΠΈΠ»ΠΈ мСньшС, Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΠΉΡ‚Π΅ ссылки Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π° * /
@media screen и (max-width: 500 пиксСлСй) {
.Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ a {
float: none; ДисплСй
: Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ;
Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ;
}
.header-right {
float: none;
}
}

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам »

Π‘ΠΎΠ²Π΅Ρ‚: ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ руководству CSS Navbar Tutorial, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ панСлях Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.



Π”ΠΈΠ·Π°ΠΉΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов Π² 2020 Π³ΠΎΠ΄Ρƒ: ΠΏΠ΅Ρ€Π΅Π΄ΠΎΠ²ΠΎΠΉ ΠΎΠΏΡ‹Ρ‚ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ | ΠšΠ°Ρ‚Ρ Π¨ΠΎΠΊΡƒΡ€ΠΎΠ²Π°

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ Π­Π»Π΅Π½ΠΈ Π”Π΅Π±ΠΎ

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈΠ³Ρ€Π°Π΅Ρ‚ ΠΊΠ»ΡŽΡ‡Π΅Π²ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π΅Π±-сайта ΠΈ Π·Π°Π΄Π°Π΅Ρ‚ Ρ‚ΠΎΠ½ всСм ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ Π΅Π³ΠΎ аспСктам.ОсобСнно сСйчас, Π² эпоху Ρ‚ΠΎΡ€ΠΆΠ΅ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π³ΠΎ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌΠ°, ΠΊΠΎΠ³Π΄Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π»Π΅Π΄Π΅Π½Ρ†Ρ‹ для Π³Π»Π°Π· часто бСзТалостно, Π½ΠΎ справСдливо ΠΈΠ·Π³ΠΎΠ½ΡΡŽΡ‚ΡΡ. Иногда большС Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ остаСтся, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π±Ρ€ΠΎΡΠΈΡ‚ΡŒ Π² Π³Π»Π°Π·Π°, поэтому Ρ€ΠΎΠ»ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ возросла.

Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠΈΠ»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ усилий, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эту Ρ‡Π°ΡΡ‚ΡŒ Π²Π΅Π±-сайта с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ крСативности ΠΈ продуктивности. Богласно Google, для формирования мнСния ΠΎ Π²Π΅Π±-сайтС трСбуСтся всСго 50 мс, Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ мнСния Ρ€Π°Π·Π²ΠΈΠ²Π°ΡŽΡ‚ΡΡ Π·Π° нСвСроятныС 17 мс.Π—Π΄Π΅ΡΡŒ начинаСтся знакомство потрСбитСля с Π±Ρ€Π΅Π½Π΄ΠΎΠΌ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ элСмСнты ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ, ΠΏΡ€ΠΎΡ‡Ρ‚ΠΈΡ‚Π΅, здСсь Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹.

Β«Π–ΠΈΠ·Π½ΡŒ — ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅. Π£ вас Π΅ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ шанс.

Π‘Π΄Π΅Π»Π°ΠΉ это Π²Π΅Ρ‡Π½Ρ‹ΠΌ Β».

— J.R. Rim

ΠšΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡ Π²Π΅Π±-сайта производитСля чая

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта — это Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Ρ€Π°Π·Π΄Π΅Π» Π²Π΅Π±-страницы. РаньшС люди ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΊΠ°ΠΊ ΡƒΠ·ΠΊΠΈΠ΅ полоски Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части Π²Π΅Π±-сайтов, содСрТащиС Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.Но Π² соврСмСнном Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ всС пространство Π½Π°Π΄ сгибом домашнСй страницы считаСтся Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ.

Являясь стратСгичСской Ρ‡Π°ΡΡ‚ΡŒΡŽ страницы, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ люди видят Π² ΠΏΠ΅Ρ€Π²Ρ‹Π΅ сСкунды Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²Π΅Π±-сайта, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ дСйствуСт ΠΊΠ°ΠΊ своСго Ρ€ΠΎΠ΄Π° ΠΏΡ€ΠΈΠ³Π»Π°ΡˆΠ΅Π½ΠΈΠ΅. Он Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ сайтС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚, Π·Π° считанныС сСкунды.

НСкоторыС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π΄Π΅Π»Π°ΡŽΡ‚ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² сайта. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ большой Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ для домашнСй страницы ΠΈ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ полосу для Π΄Ρ€ΡƒΠ³ΠΈΡ… страниц.Но Π±ΡƒΠ΄ΡŒΡ‚Π΅ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹. Π”ΠΈΠ·Π°ΠΉΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π° Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ страницС Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ сокращСнной вСрсиСй Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС. Π­Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ° Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Architectural Platform Home

Π—Π°Π΄Π°Ρ‡Π° шапки — Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΎΡ‚Π²Π΅Ρ‚Ρ‹ Π½Π° основныС вопросы: ΠΊΠ°ΠΊΠΎΠΉ Π±Ρ€Π΅Π½Π΄ прСдставлСн, ΠΊΠ°ΠΊΠΈΠ΅ Ρ‚ΠΎΠ²Π°Ρ€Ρ‹ ΠΈ услуги ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽΡ‚ΡΡ, ΠΊΠ°ΠΊ ΡΠ²ΡΠ·Π°Ρ‚ΡŒΡΡ с сотрудниками ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Π΅ΡΡ‚ΡŒ Π»ΠΈ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠ΅ сдСлки ΠΈ Ρ‚. Π”. Π½Π°.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ прСдставляСт качСство ΠΈ Π΄Π°ΠΆΠ΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½ΠΎΡΡ‚ΡŒ Π²Π΅Π±-сайта.Если Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ ΡΠΌΠΎΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΡ‚ΠΊΠ»ΠΈΠΊ ΠΈ Π·Ρ€ΠΈΡ‚Π΅Π»ΡŒ чувствуСт, Ρ‡Ρ‚ΠΎ Π² Π½Π΅ΠΌ Π΅ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Ρ†Π΅Π½Π½ΠΎΠ΅, Π·Π½Π°Ρ‡ΠΈΡ‚, Π²Ρ‹ ΠΏΡ€ΠΎΡˆΠ»ΠΈ ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ тСст.

ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌΠΈ элСмСнтами Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΡΠ²Π»ΡΡŽΡ‚ΡΡ:

  • Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΈΠ»ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π±Ρ€Π΅Π½Π΄Π°
  • ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ
  • тСкст ΠΈΠ»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
  • элСмСнты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ
  • поиск.

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

НС рСкомСндуСтся ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ слишком пустым. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² вашСм интСрфСйсС Π·Π° нСсколько сСкунд, скорСС всСго, ΡƒΠΉΠ΄Π΅Ρ‚ ΠΈ Π½Π΅ вСрнСтся. ΠŸΠ»ΠΎΡ…ΠΎΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Ρ‚ΠΎΠ»ΠΊΠ½ΡƒΡ‚ΡŒ посСтитСлСй Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ сайт с нСкачСствСнным ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ.

Π’ минималистичных Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ… прСдставлСны Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ссылки Π½Π° основныС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ сайта ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ. Π­Ρ‚ΠΎΡ‚ ΠΌΠ΅Ρ‚ΠΎΠ΄ особСнно ΠΏΠΎΠ»Π΅Π·Π΅Π½ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… страниц.

Π”ΠΎΠΌΠ°ΡˆΠ½ΡΡ страница Design Freelancing

Ничто Π½Π΅ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ вашС творчСство, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Ρ€Π°Π·Π΄Π΅Π»Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ сайта — это ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, открытая для ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎ поля творчСских дизайнСрских Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌΠΈΡΡ, ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌΠΈ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌΠΈ.

ΠŸΡ€ΠΎΠΉΠ΄Π΅ΠΌΡΡ ΠΏΠΎ основным ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°ΠΌ.

ΠžΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎΠ³ΠΎ ΠΎΡ‚Π²Π΅Ρ‚Π° Π½Π° вопрос, ΠΊΠ°ΠΊΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° сайта, Π½Π΅Ρ‚. НСкоторыС рСсурсы ΠΏΡ‹Ρ‚Π°ΡŽΡ‚ΡΡ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π°Π±ΠΎΡ€Ρ‹ Ρ‚ΠΎΡ‡Π½Ρ‹Ρ… Ρ†ΠΈΡ„Ρ€, Π½ΠΎ сСгодня ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· самых слоТных аспСктов создания Π²Π΅Π±-сайтов являСтся обСспСчСниС эффСктивности экрана любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.И Π΄Π°ΠΆΠ΅ Ссли Π΄Π²Π° экрана ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹ΠΌ, поэтому ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ увидят ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅.

Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ Π½Π΅ Π·Π°Ρ†ΠΈΠΊΠ»ΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° Ρ‚ΠΎΡ‡Π½ΠΎΠΉ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ пиксСлСй, Π»ΡƒΡ‡ΡˆΠ΅ слСдуйтС простым ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ Π·Π΄Ρ€Π°Π²ΠΎΠ³ΠΎ смысла.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠΉ высоты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ Π²ΠΎΡΠΏΡ€ΠΈΡΡ‚ΠΈΡŽ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Для ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… рСсурсов нСбольшой Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π±Ρ‹Π» Π±Ρ‹ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ Π²Ρ‹Π±ΠΎΡ€ΠΎΠΌ, Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ для Π»Π΅Π½Π΄ΠΈΠ½Π³ΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ большС.

Π’ случаС ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹Ρ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ мСста ΠΏΠΎΠ΄ сгибом, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠ³ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ дальшС Π½Π° страницС, ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΡƒ.

ΠšΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡ сайта Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°

Nielsen Norman Group Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ сформулировала свою Ρ‚Π΅ΠΎΡ€ΠΈΡŽ ΠΎ F-ΠΎΠ±Ρ€Π°Π·Π½ΠΎΠΌ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½Π΅ чтСния Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π² 2006 Π³ΠΎΠ΄Ρƒ, ΠΈ ΠΎΠ½Π° Π½Π΅ потСряла своСй Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΈ ΠΏΠΎ сСй дСнь.

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

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ. Π”Ρ€ΡƒΠ³ΠΎΠ΅ исслСдованиС, ΠΏΡ€ΠΎΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ NN / g, ΠΏΠΎΠΊΠ°Π·Π°Π»ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π»Π΅Π³Ρ‡Π΅ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ Ρ‚Π΅ Π±Ρ€Π΅Π½Π΄Ρ‹, Ρ‡ΡŒΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹ располоТСны слСва, Ρ‡Π΅ΠΌ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ ΠΈΠ»ΠΈ справа.

Если Ρƒ вас Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΊΡ€ΡƒΠ³Π»ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹, Ρ‚ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ экрана, хотя Π΅Π³ΠΎ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ всС Ρ€Π°Π²Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π½ΠΈΠΆΠ΅, Ρ‡Π΅ΠΌ Ρƒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠ² слСва.

Навигация. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ особоС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π·Π°Π³Ρ€ΠΎΠΌΠΎΠΆΠ΄Π°Ρ‚ΡŒ этот Ρ€Π°Π·Π΄Π΅Π» Π²Π΅Π±-сайта. Блишком ΠΌΠ½ΠΎΠ³ΠΎ ссылок ΠΏΠΎΠ΄Π°Π²Π»ΡΡŽΡ‚ посСтитСлСй.Иногда Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ структуру Π²Π΅Π±-сайта, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡΠ²ΠΎΠ±ΠΎΠ΄ΠΈΡ‚ΡŒ мСсто для Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹Ρ… ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ.

Π‘Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ посСтитСли Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ, Π³Π΄Π΅ ΠΎΠ½ΠΈ находятся ΠΈ ΠΊΠ°ΠΊ Π½Π°ΠΉΡ‚ΠΈ свой ΠΏΡƒΡ‚ΡŒ дальшС. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ эффСкты навСдСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΏΡ€ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.

ΠŸΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ. Π Π΅Π°Π»ΠΈΠ·ΡƒΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ СстСствСнным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ CTA.

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° Street Fashion

ΠŸΠΎΡΡ‚ΠΎΡΠ½Π½Ρ‹Π΅ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ, Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, Β«Π»ΠΈΠΏΠΊΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈΒ» ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ навигация слСдуСт Π·Π° Π²Π°ΠΌΠΈ ΠΏΠΎ страницС Π²ΠΎ врСмя ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.Π’Π΅ΠΏΠ΅Ρ€ΡŒ это стандарт Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π˜ΡΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Ссли ΠΎΠ½ Π½Π΅ Π½Π°Ρ€ΡƒΡˆΠ°Π΅Ρ‚ ΠΎΠ±Ρ‰ΡƒΡŽ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π­Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠ°Ρ идСя ΠΊΠ°ΠΊ для Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ², Ρ‚Π°ΠΊ ΠΈ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств:

  • Π’Π΅Π±-сайты элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ — ΠΊΠΎΡ€Π·ΠΈΠ½Π° всСгда находится ΠΏΠ΅Ρ€Π΅Π΄ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.
  • БСрвисныС сайты — Π½ΠΎΠΌΠ΅Ρ€ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π° ΠΈΠ»ΠΈ CTA постоянно ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ.

ЀиксированныС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‚ качСство обслуТивания ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ², ориСнтируя ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ давая ΠΈΠΌ большС контроля.

Π’Π΅Π±-сайт производитСля чая

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, рассмотритС ΠΎΠ±Ρ‰ΠΈΠΉ ΡΡ‚ΠΈΠ»ΡŒ Π²Π΅Π±-сайта ΠΈ Π΅Π³ΠΎ основноС ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅.

Если это Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹ΠΉ Π²Π΅Π±-сайт , ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹ΠΉ для ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, Π΄ΠΈΠ·Π°ΠΉΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ссылки Π½Π° основныС Ρ€Π°Π·Π΄Π΅Π»Ρ‹ Π² сочСтании с большим ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π³Π»Π°Π²Π½ΠΎΠ³ΠΎ гСроя Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠΌ экранС, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ основная Ρ†Π΅Π»ΡŒ Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π²Π΅Π±-сайта — эффСктивно ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚. Π’ случаС Π²Π΅Π±-сайтов элСктронной ΠΊΠΎΠΌΠΌΠ΅Ρ€Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ прСдприятий, ситуация ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½ΠΎΠΉ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π»Π΅Π³ΠΊΠΎ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, Π·Π½Π°Ρ‚ΡŒ ΠΎ послСдних сдСлках, ΠΊΠ°ΠΊ быстро ΡΠ²ΡΠ·Π°Ρ‚ΡŒΡΡ с ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ΠΎΠΌ ΠΈ Π³Π΄Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π·Π°ΠΊΠ°Π·Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ½ ΡƒΠΆΠ΅ сдСлал, поэтому Π² этом случаС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΊΡ€Π°Ρ‚ΠΊΠΈΠΌ, уступая мСсто Π΄Ρ€ΡƒΠ³ΠΈΠΌ катСгориям.

Π•ΡΡ‚ΡŒ нСсколько Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… сообщСний, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ:

  • ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ потрСбитСля Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ
  • Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π°Π΄ ΡƒΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ΠΌ довСрия
  • ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ посСтитСля ΡƒΠ·Π½Π°Ρ‚ΡŒ большС
  • Π±Ρ‹Ρ‚ΡŒ Π·Π°Π±Π°Π²Π½Ρ‹ΠΌ ΠΈ Ρ‚. Π”.

Π’Ρ‹Π±ΠΎΡ€ зависит ΠΎΡ‚ Ρ†Π΅Π»ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Π²Π΅Π±-сайта.

ΠšΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡ ΠΌΠ°Π³Π°Π·ΠΈΠ½Π° 3D-ΠΌΠΎΠ΄Π΅Π»Π΅ΠΉ

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

ΠšΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½Ρ‹Π΅ Ρ„ΠΎΡ‚ΠΎ. Ѐотография — ΠΌΠΎΡ‰Π½Ρ‹ΠΉ инструмСнт для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ². Он ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈΡΡ‚ΠΎΡ€ΠΈΡŽ, Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ эмоции ΠΈ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ посСтитСлСй ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ дальшС. Для сайтов с яркими изобраТСниями ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ. Он Π»ΡƒΡ‡ΡˆΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ изобраТСния, сохраняя основныС ссылки.

Π‘ΠΊΠΎΠ»ΡŒΠ·ΡΡ‰ΠΈΠ΅ изобраТСния. Если Ρƒ вас Π΅ΡΡ‚ΡŒ нСсколько ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… бизнСс Π²Π΅Π±-сайта, Π²ΠΏΠ΅Ρ€Π΅Π΄! ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π½Π°Π±ΠΎΡ€ изысканных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ.

Π˜Π»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² для Π²Π΅Π±-сайтов Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΎΡ‚ΠΊΠ»ΠΈΠΊ ΠΈ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Π»ΠΈΡ‡Π½ΡƒΡŽ связь. Π›ΡƒΡ‡ΡˆΠ΅, Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΠΈΠΌ ΠΈ Π»Π΅Π³ΠΊΠΎ ΡƒΠ·Π½Π°Π²Π°Π΅ΠΌΡ‹ΠΌ, Π΄Π°ΠΆΠ΅ Ссли ΠΎΠ½ΠΎ Π²Ρ‹Ρ€Π΅Π·Π°Π½ΠΎ ΠΈΠ· шапки сайта. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ этого, воспользовавшись сСгодняшнСй Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠ΅ΠΉ ΠΊ созданию ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ.

Builddie Website Homepage

НС сосрСдотачивайтС своС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° статичных изобраТСниях.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π²ΠΈΠ΄Π΅ΠΎ — ΠΎΠ΄Π½Π° ΠΈΠ· самых эффСктивных ΠΈΠ΄Π΅ΠΉ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов. По возмоТности ΠΏΠΎΡΡ‚Π°Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΡˆΠ°ΠΏΠΊΡƒ тСматичСский Π²ΠΈΠ΄Π΅ΠΎΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π».МногиС Π²Π΅Π±-сайты ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²Π»Π΅Ρ‡ΡŒ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΡŽ, прСдставляя свою компанию ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ Π½Π°ΠΈΠ»ΡƒΡ‡ΡˆΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ.

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ способ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш Π΄ΠΈΠ·Π°ΠΉΠ½ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ, ярким ΠΈ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌΡΡ — это Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ . Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΊΡ€ΡƒΡ‚Ρ‹Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ для Π²Π΅Π±-сайтов. Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ Π²Π΅Π±-страницу, которая ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π·Ρ€ΠΈΡ‚Π΅Π»Π΅ΠΉ, анимация — отличная Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π°.

Triumph Motorcycle Shop

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Π±-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ добавляСт Ρ‚ΡƒΠ΄Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ элСмСнты ΠΏΡ€ΠΈΠ·Ρ‹Π²Π° ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Β«Π²Ρ…ΠΎΠ΄ Π² систСму», Β«Π²Ρ…ΠΎΠ΄ Π² систСму», Β«Π²Ρ‹Ρ…ΠΎΠ΄ Π½Π° связь» ΠΈ Ρ‚. Π”.Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ привСсти ΠΊ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ, ΠΊΠ½ΠΎΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ надпись, ΠΏΠΎΠ½ΡΡ‚Π½ΡƒΡŽ ΠΏΠΎΠΊΡƒΠΏΠ°Ρ‚Π΅Π»ΡŽ ΠΈ Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‰ΡƒΡŽΡΡ срСди ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

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

ΠšΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡ Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½Π° Drone Racing League

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

Для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² домашнСй страницы Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΆΠΈΡ€Π½ΡƒΡŽ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ ΠΈ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΡƒΠ΄Π»ΠΈΠ²Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ Ρ‚Ρ€ΡƒΠ΄Π½Ρ‹ΠΌΠΈ для чтСния.

Π’Π΅Π±-страница бСзопасности связи

Если Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ ΠΈ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π΅Π½, ваши посСтитСли Π±ΡƒΠ΄ΡƒΡ‚ Ρ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΏΡ‹Ρ‚Π°Π΅Ρ‚Π΅ΡΡŒ ΠΎΠ±Ρ€Π΅ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… своими прСдлоТСниями. ΠšΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ простой Π²ΠΈΠ΄.

Meal Service Home Page

Π­Ρ‚ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ всС Ρ‡Π°Ρ‰Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-сайтов. Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню прСдставляСт собой нСбольшой Π·Π½Π°Ρ‡ΠΎΠΊ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… полосок, ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ отобраТаСтся ΠΏΠΎΠ»Π½ΠΎΠ΅ мСню. Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹, ΠΊΠΎΠ³Π΄Π° ΠΈΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΡΡ€Π΅Π΄ΠΎΡ‚ΠΎΡ‡ΠΈΡ‚ΡŒΡΡ Π½Π° Π³Π»Π°Π²Π½ΠΎΠΌ экранС.

Π‘ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ сайта это Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚. Π’Π°ΠΊΠΎΠ΅ мСню ΠΏΡ€ΠΈΡˆΠ»ΠΎ ΠΈΠ· мобильного Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ. Π“Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹Ρ… сайтов, Π³Π΄Π΅ основной ΡƒΠΏΠΎΡ€ дСлаСтся Π½Π° ΠΊΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΠΎΡ‚ΠΎ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ.Для ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² этот Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ΅Π½Π΅Π΅ подходящим, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ для покупатСля Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΠΎΡ€Π·ΠΈΠ½Π°, Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Ρ‹ ΠΈ ΠΏΠΎΠ»Π΅ поиска Π½Π°Ρ…ΠΎΠ΄ΠΈΠ»ΠΈΡΡŒ Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ быстрого доступа.

Skate Store Versatility Case

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½ΠΎΠΉ вСрсии сайта, Π½ΠΎ ΠΈ Π½Π° мобильной. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΌ ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΠΎΠΌΡƒ устройству.

Π•ΠΆΠ΅Π΄Π½Π΅Π²Π½ΠΎΠ΅ использованиС ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΏΡ€ΠΈΠ²Π΅Π»ΠΎ ΠΊ созданию Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ выглядят ΠΊΠ°ΠΊ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Π΄Π°ΠΆΠ΅ Π² Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… вСрсиях.НапримСр, рСализация Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π³Π΅Ρ€ΠΎΠ΅Π² ΠΈ Π³Π°ΠΌΠ±ΡƒΡ€Π³Π΅Ρ€-мСню Π±Π΅Ρ€Π΅Ρ‚ своС Π½Π°Ρ‡Π°Π»ΠΎ Π² мобильном Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.

ΠœΠ΅Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΌΠ°Π³Π°Π·ΠΈΠ½ Адаптивный Π΄ΠΈΠ·Π°ΠΉΠ½

Π‘Π°ΠΉΡ‚ прСдставлСн своСй шапкой. Π­Ρ‚ΠΎ ΠΊΠ°ΠΊ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Π°Ρ Π²ΠΈΠ·ΠΈΡ‚ΠΊΠ°. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ сайта удСляйтС максимум внимания Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ.

И Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π»ΡƒΡ‡ΡˆΠΈΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта: рСгулярно вноситС измСнСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш Π²Π΅Π±-сайт оставался свСТим ΠΈ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ. Π’ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π²Ρ‹Π²ΠΎΠ΄Π°ΠΌΠΈ ΠΈΠ· этой ΡΡ‚Π°Ρ‚ΡŒΠΈ.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ΄Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ для вашСго Π²Π΅Π±-сайта

ОбновлСниС Π·Π° ΠΌΠ°Ρ€Ρ‚ 2020 Π³ .: Π‘ выпуском Thrive Theme Builder Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ вас Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΈ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ настраиваСмыС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ для всСго сайта , ΠΈΠ»ΠΈ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… страниц ΠΈ сообщСний.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ вашСго Π²Π΅Π±-сайта — ΠΎΠ΄Π½Π° ΠΈΠ· Π½Π΅ΠΌΠ½ΠΎΠ³ΠΈΡ… Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС вашСго Π²Π΅Π±-сайта. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΊ этому Π΅Π³ΠΎ Π²ΠΈΠ΄Π½ΠΎΠ΅ мСсто Π½Π° страницС, ΠΈ станСт ясно: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ — Π²Π°ΠΆΠ½Ρ‹ΠΉ элСмСнт.

Но ΠΊΠ°ΠΊ Π½Π° самом Π΄Π΅Π»Π΅ выглядит Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ — для Π²Π΅Π±-сайта, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π½Π° ΠΊΠΎΠ½Π²Π΅Ρ€ΡΠΈΡŽ? Π§Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² ΡˆΠ°ΠΏΠΊΡƒ? Π§Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Ρ‡Π΅Π³ΠΎ нСльзя?

Π’ этом постС Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° всС эти вопросы

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ …

Like It’s 1999…

Π‘ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΊΠ°ΠΊ ΠΌΡ‹ запустили Thrive Themes, ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ вопросов ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ…, ΠΈ всС наши Ρ‚Π΅ΠΌΡ‹ содСрТат ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹Π΅ возмоТности, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для настройки этой части сайта.

МногиС вопросы касались ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ Π±Π°Π½Π½Π΅Ρ€ΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Π² стилС. Π’Π°ΠΊΠΈΠ΅ Π²Π΅Ρ‰ΠΈ (ΠΈΠ·Π²ΠΈΠ½ΠΈΡ‚Π΅ Π·Π° Π΄Π΅Ρ€Π·ΠΊΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€):

Π₯отя ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅ΠΌΡ‹ Thrive, Ρƒ нас Π½Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π² стилС Π±Π°Π½Π½Π΅Ρ€Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π½ΠΈ Π² ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½Π°ΡˆΠΈΡ… Ρ‚Π΅ΠΌ. И Π½Π° Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ вСскиС ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹.

Π­Ρ‚ΠΎΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‚ΠΈΠΏΠ° Π±Π°Π½Π½Π΅Ρ€Π° Π±Ρ‹Π» довольно популярСн ΠΌΠ½ΠΎΠ³ΠΎ Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄, ΠΈ идСя, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΎΠ½ основан, Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠΆ ΠΏΠ»ΠΎΡ…Π°: Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницы Ρƒ вас Π±ΡƒΠ΄Π΅Ρ‚ большая, ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°ΡŽΡ‰Π°Ρ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ° вашСго сайта ΠΈΠ»ΠΈ Π±Ρ€Π΅Π½Π΄Π°. Π˜ΠΌΠ΅Π΅Ρ‚ смысл, ΠΏΡ€Π°Π²Π΄Π°?

Π•ΡΡ‚ΡŒ Π΄Π²Π΅ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹, ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ этот Ρ‚ΠΈΠΏ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π²Ρ‹ΡˆΠ΅Π» ΠΈΠ· ΠΌΠΎΠ΄Ρ‹: баннСрная слСпота ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства.

Если Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ выглядит ΠΊΠ°ΠΊ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹ΠΉ Π±Π°Π½Π½Π΅Ρ€, это Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ большим ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚ΠΎΠΌ посСтитСлСй. Π­Ρ‚ΠΎΡ‚ эффСкт называСтся Π±Π°Π½Π½Π΅Ρ€Π½ΠΎΠΉ слСпотой ΠΈ выглядит Ρ‚Π°ΠΊ:

ΠžΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΠ΅ взгляда, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅, Ρ‡Ρ‚ΠΎ посСтитСли ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‚ Π±Π°Π½Π½Π΅Ρ€.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

ΠŸΡ€ΠΎΡ‰Π΅ говоря, Ссли ваш Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ соотвСтствуСт языку Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ для Π±Π°Π½Π½Π΅Ρ€Π½ΠΎΠΉ Ρ€Π΅ΠΊΠ»Π°ΠΌΡ‹, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π²Π°ΡˆΠΈΡ… посСтитСлСй, скорСС всСго, ΠΏΡ€ΠΎΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ.

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства

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

ΠΠ»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌΡƒ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ являСтся созданиС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ° Π±Π°Π½Π½Π΅Ρ€Π° ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ° ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ всС Π΅Π³ΠΎ элСмСнты Π² ΠΏΠΎΠ»Π½ΠΎΠΌ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π΅ Π΄Π°ΠΆΠ΅ Π½Π° мобильном устройствС.Π’ этом случаС ΠΎΠ½ Π·Π°ΠΉΠΌΠ΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ экрана.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ²

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ€Π΅Ρ‚Ρ€ΠΎ-Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ вопрос: ΠΊΠ°ΠΊ выглядит Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ? Π”Π°Π²Π°ΠΉΡ‚Π΅ сначала рассмотрим нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ², взятых с Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² сайтов.

Π‘Π°ΠΉΡ‚Ρ‹ SaaS

Stripe:

Π’ этих ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Ρ‚ΠΎΠ½ΠΊΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ нСбольшоС количСство элСмСнтов Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅. Если ссылок ΠΌΠ½ΠΎΠ³ΠΎ, ΠΎΠ½ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС.

Π‘Π»ΠΎΠ³ΠΈ

Quicksprout:

ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅, ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ ΠΏΠΎ большСй части Ρ‚ΠΎΠ½ΠΊΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ (Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Location180 с большим Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ).Как ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…, Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚ΠΎΠ½ΠΊΠΎΠΌΡƒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡƒ.

Π‘Π°ΠΉΡ‚Ρ‹ элСктронной Ρ‚ΠΎΡ€Π³ΠΎΠ²Π»ΠΈ

Amazon:

Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… элСктронной Ρ‚ΠΎΡ€Π³ΠΎΠ²Π»ΠΈ ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ поиска ΠΊΠ°ΠΊ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сайта. Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ страниц для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΈ поиск — это основной способ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ посСтитСли ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ. ΠžΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ ссылки ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΡΠΎΡ€Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ мСню.

Π–ΡƒΡ€Π½Π°Π»Ρ‹ / сайты БМИ

Mashable:

Π’ этих ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… ΠΌΡ‹ Π²ΠΈΠ΄ΠΈΠΌ Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ экономичныС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ большС мСста для содСрТания сайтов.

Π§Π΅ΠΌΡƒ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΈΠ· этих ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹Ρ… ΠΈ Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ протСстированных сайтов?

Π’ΠΎΡ‚ 5 основных Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта:

1) Π”Π΅Ρ€ΠΆΠΈΡ‚Π΅ Π΅Π³ΠΎ стройным

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΅ΡΡ‚ΡŒ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС вашСго сайт, Π½ΠΎ это Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ самая ваТная Π²Π΅Ρ‰ΡŒ Π½Π° страницС. Π­Ρ‚ΠΎ сдСлано для удобства ΠΈ Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π°, Π½ΠΎ это Π½Π΅ Ρ‚Π°ΠΊ Π²Π°ΠΆΠ½ΠΎ, ΠΊΠ°ΠΊ ваш основной Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΈΠ·Π±Ρ€Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, копия страницы, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Ρ‚.Π΄. Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ слишком ΠΌΠ½ΠΎΠ³ΠΎ мСста для содСрТания сайта.

2) НС Π²ΠΎΠ»Π½ΡƒΠΉΡ‚Π΅ΡΡŒ Π½Π°Π΄ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ

Много ΡˆΡƒΠΌΠ° Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‚ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹ ΠΊΠ°ΠΊ элСмСнт Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π°, Π½ΠΎ Ссли ΠΌΡ‹ посмотрим Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· самых ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹Ρ… Π²Π΅Π±-сайтов Π² сСти, Ρ‚ΠΎ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΡ‹ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ малСнькиС ΠΈ просто.

Π’Π°Ρˆ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС, Ρ‡Π΅ΠΌ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ вашСго Π±Ρ€Π΅Π½Π΄Π°, написанноС простым ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ. И Ρ‡Ρ‚ΠΎ Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½ΠΎ, ΠΊΠ°ΠΊΠΈΠΌ Π±Ρ‹ ΠΌΠΎΠ΄Π½Ρ‹ΠΌ (ΠΈΠ»ΠΈ Π΄ΠΎΡ€ΠΎΠ³ΠΈΠΌ) Π½ΠΈ Π±Ρ‹Π» ваш Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Π½Π΅ ΠΏΡ‹Ρ‚Π°ΠΉΡ‚Π΅ΡΡŒ Π΅Π³ΠΎ Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π°ΠΏΠΎΠΊΠ°Π· ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ слишком большим. Π‘ΠΌ. ΠŸΡƒΠ½ΠΊΡ‚ Π½ΠΎΠΌΠ΅Ρ€ ΠΎΠ΄ΠΈΠ½: пространство Π½Π° вашСм сайтС слишком Ρ†Π΅Π½Π½ΠΎ, Π° Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ являСтся Π½Π° Π½Π΅ΠΌ самым Π²Π°ΠΆΠ½Ρ‹ΠΌ.

3) Π”Π΅Ρ€ΠΆΠΈΡ‚Π΅ Π²Π°ΡˆΡƒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ Π² порядкС

Когда Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ основных Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ссылок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ добавляСтС Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΈΠ½ΠΎΠ³Π΄Π° примСняСтся Ρ„Ρ€Π°Π·Π° «мСньшС Π·Π½Π°Ρ‡ΠΈΡ‚ большС», Π° ΠΈΠ½ΠΎΠ³Π΄Π° Π½Π΅Ρ‚.

Если Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ свСсти количСство Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ссылок ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ, Π»ΡƒΡ‡ΡˆΠ°Ρ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π° — Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ всС Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ ΠΈ красиво сгруппированными. ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΡ€Π°ΠΆΠ°Ρ‚ΡŒ посСтитСлСй слишком большим количСством ссылок, ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΈΡ… Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ сгруппированными Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ΡΡ списки.

4) Если поиск Π²Π°ΠΆΠ΅Π½, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ

Ѐункция поиска Π½Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ Π²Π°ΠΆΠ½Π° Π½Π° всСх Π²Π΅Π±-сайтах.Если Π½Π° вашСм Π²Π΅Π±-сайтС ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΈ посСтитСли ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡ‰ΡƒΡ‚ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ΅ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ, поиск Π²Π°ΠΆΠ΅Π½. И Π² этом случаС рСкомСндуСтся ΠΈΠΌΠ΅Ρ‚ΡŒ панСль поиска Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅, Π³Π΄Π΅ ΠΎΠ½Π° доступна с любой страницы.

5) ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ Π΅Π΅ Π½Π° ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… экранах

Π’Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ посмотритС, ΠΊΠ°ΠΊ ваш сайт выглядит Π½Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ слишком ΠΌΠ½ΠΎΠ³ΠΎ мСста ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ? Бсылки слишком Π±Π»ΠΈΠ·ΠΊΠΎ Π΄Ρ€ΡƒΠ³ ΠΊ Π΄Ρ€ΡƒΠ³Ρƒ? Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ слишком малСнькиС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ?

ΠžΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваш сайт Ρ…ΠΎΡ€ΠΎΡˆΠΎ выглядСл ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π» Π½Π° экранах Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ².

Π‘ ΠΎΠ±Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ΠΌ ΠΊ Π²Π°ΠΌ

Π’ Π½Π°ΡˆΠΈΡ… Ρ‚Π΅ΠΌΠ°Ρ… ΠΌΡ‹ ΠΏΠΎΠ·Π°Π±ΠΎΡ‚ΠΈΠ»ΠΈΡΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ соотвСтствовали ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΌ Π²Ρ‹ΡˆΠ΅ рСкомСндациям. Наша Ρ†Π΅Π»ΡŒ состоит Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ высокоэффСктивный Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΎΡΡ‚Π°Π²Π°ΡΡΡŒ ΠΏΡ€ΠΈ этом Ρ‚ΠΎΠ½ΠΊΠΈΠΌ ΠΈ простым.

Π£ вас Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ? ΠœΡ‹ΡΠ»ΠΈ ΠΈΠ»ΠΈ вопросы ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ этого поста? Π”Π°ΠΉΡ‚Π΅ Π½Π°ΠΌ Π·Π½Π°Ρ‚ΡŒ, оставив ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π½ΠΈΠΆΠ΅!

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта ΠΈ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ Π·Π½Π°Ρ‡ΠΎΠΊ

Jennifer Bourn

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта — это ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, которая являСтся ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· самых Ρ†Π΅Π½Π½Ρ‹Ρ… областСй вашСго Π²Π΅Π±-сайта.Он ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части страницы ΠΈ отобраТаСтся Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС вашСго Π²Π΅Π±-сайта, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ шаблонов ΠΏΡ€ΠΎΠ΄Π°ΠΆ ΠΈΠ»ΠΈ Ρ†Π΅Π»Π΅Π²Ρ‹Ρ… страниц, ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΠ½ ΡƒΠ΄Π°Π»Π΅Π½.

ЦСль Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° вашСго Π²Π΅Π±-сайта — ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ³Π°Ρ‚ΡŒ ваш Π±Ρ€Π΅Π½Π΄ ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ваш сайт ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΡƒΠ·Π½Π°Π²Π°Π΅ΠΌΡ‹ΠΌ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ ΡƒΠΆΠ΅ Π·Π½Π°ΠΊΠΎΠΌ с Π²Π°ΠΌΠΈ. Для ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ — это идСальноС мСсто, Ρ‡Ρ‚ΠΎΠ±Ρ‹ эффСктивно ΠΈ дСйствСнно ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ, ΠΎ Ρ‡Π΅ΠΌ ΠΈΠΌΠ΅Π½Π½ΠΎ ваш сайт ΠΈ Ρ‡Π΅ΠΌ занимаСтся ваш бизнСс.

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта

Π‘Ρ€Π΅Π½Π΄ΠΈΠ½Π³ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°:

Если Π²Ρ‹ Π½Π°Π·Ρ‹Π²Π°Π΅Ρ‚Π΅ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° Π·Π½Π°ΠΌΠ΅Π½ΠΈΡ‚ΠΎΡΡ‚ΡŒΡŽ ΠΈΠ»ΠΈ прСдставитСлСм Π±Ρ€Π΅Π½Π΄Π° , Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ сразу ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ связь ΠΌΠ΅ΠΆΠ΄Ρƒ посСтитСлСм ΠΈ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠΎΠΌ.Π‘Π°ΠΌΡ‹ΠΉ быстрый способ Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ этого ощущСния связи , ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ процСсс построСния ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ ΠΈ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ узнаваСмости — это ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΡ‡Π°ΡΡ‚Π»ΠΈΠ²ΡƒΡŽ, ΡƒΠ»Ρ‹Π±Π°ΡŽΡ‰ΡƒΡŽΡΡ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅. Π”Π°ΠΆΠ΅ Ссли ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ встрСчал вас, простоС постоянноС наблюдСниС Π·Π° вашим Π»ΠΈΡ†ΠΎΠΌ со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ заставит ΠΈΡ… ΠΏΠΎΡ‡ΡƒΠ²ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡƒΠΆΠ΅ вас Π·Π½Π°ΡŽΡ‚.

  • ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта, посвящСнного Π±Ρ€Π΅Π½Π΄Ρƒ, ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ свой Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ, имя ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов с Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³ΠΎΠΌ


Π‘Ρ€Π΅Π½Π΄ΠΈΠ½Π³ бизнСса:

Если Π²Ρ‹ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚Π΅ΡΡŒ Π±Ρ€Π΅Π½Π΄ΠΎΠΌ , ΠΏΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ вашСго Π²Π΅Π±-сайта Π½Π΅ принСсСт Π²Π°ΠΌ успСха Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.ЀактичСски, Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… случаях Π»ΡƒΡ‡ΡˆΠ°Ρ стратСгия — ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Π½ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° страницу Π²Ρ‹ΡˆΠ΅, ΠΈΠ»ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта — ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π±ΡƒΠ΄Π΅ΠΌ чСстными здСсь, ваш Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ — это Π½Π΅ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ±Π΅ΠΆΠ΄Π°Ρ‚ΡŒ ΠΊΡ‚ΠΎ-Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Π½ΡΡ‚ΡŒ вас, ΠΊΡƒΠΏΠΈΡ‚ΡŒ Ρƒ вас ΠΈΠ»ΠΈ ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Ρƒ вас.

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

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов Π‘Ρ€Π΅Π½Π΄ΠΈΠ½Π³ бизнСса


Π‘Ρ€Π΅Π½Π΄ΠΈΠ½Π³ Π²Π΅Ρ‰ΠΈ:

Если Π²Ρ‹ Ρ€Π΅ΠΊΠ»Π°ΠΌΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Π²Π΅Ρ‰ΡŒ, событиС, ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ ΠΈΠ»ΠΈ услугу , ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ создании Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ° для основного прСдлоТСния. Если ΠΎΠ½ΠΎ прСдлагаСтся Π±Ρ€Π΅Π½Π΄ΠΎΠΌ, упомянитС, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ «сдСлано вам…» ΠΈΠ»ΠΈ «прСдставлСно…», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΏΠΎΠ²Ρ‹ΡΠΈΡ‚ΡŒ Π΄ΠΎΠ²Π΅Ρ€ΠΈΠ΅. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ³ΠΎ описания прСимущСств Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠΎΡ‡ΡŒ посСтитСлям быстрСС ΠΏΠΎΠ½ΡΡ‚ΡŒ, Π² Π½ΡƒΠΆΠ½ΠΎΠΌ Π»ΠΈ ΠΎΠ½ΠΈ мСстС.

  • ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта, посвящСнного Π±Ρ€Π΅Π½Π΄Ρƒ Π²Π΅Ρ‰ΠΈ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°, ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ элСмСнта, ΠΊΡ€Π°Ρ‚ΠΊΠΎΠ΅ описаниС ΠΈΠ»ΠΈ слоган, ΠΎΠ±ΡŠΡΡΠ½ΡΡŽΡ‰ΠΈΠΉ, Ρ‡Ρ‚ΠΎ это Ρ‚Π°ΠΊΠΎΠ΅, ΠΈ, Ссли Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ элСмСнта.
  • ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° для сайта ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ ΠΈΠ»ΠΈ сайта мСроприятия ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ изобраТСния ΠΏΠ΅Ρ€Π΅Π΄Π°ΡŽΡ‚ ΡΠ½Π΅Ρ€Π³ΠΈΡŽ события ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов Π‘Ρ€Π΅Π½Π΄ΠΈΠ½Π³ ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Π°


НС Π½Π° всСх Π²Π΅Π±-сайтах Π΅ΡΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ†Π΅Π½Π½ΠΎΠ΅ пространство Π² Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° , Ρ‡Ρ‚ΠΎ Π½Π΅ всСгда Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ.НСкоторым компаниям Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта, Π° вмСсто этого просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΈ ΠΏΠΎΠ΄Π½ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²Ρ‹ΡˆΠ΅ Π½Π° страницС. (Нравится наш сайт!)

  • ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ своСго Π²Π΅Π±-сайта ΠΏΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»ΠΈ Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ — Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ΄ΠΈΠ²Π»Π΅Π½Ρ‹, ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ², Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ΅Π½!
  • ЯвляСтся Π»ΠΈ ваш Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΈΠ»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‡Π°ΡΡ‚ΡŒΡŽ вашСй Π²ΠΎΡ€ΠΎΠ½ΠΊΠΈ ΠΏΡ€ΠΎΠ΄Π°ΠΆ? Π’Π°ΠΆΠ½ΠΎ Π»ΠΈ ΠΏΠΎΠ±ΡƒΠΆΠ΄Π°Ρ‚ΡŒ посСтитСлСй ΠΊ дСйствиям Π½Π° вашСм сайтС? Если ΠΎΡ‚Π²Π΅Ρ‚ ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π²Π°ΠΌ Π½Π΅ понадобится Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.
  • ΠŸΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ с вашим Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах. Он всС Ρ€Π°Π²Π½ΠΎ исчСзнСт ΠΈΠ»ΠΈ станСт Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ малСньким, Ρ‡Ρ‚ΠΎ Π΅Π³ΠΎ всС Ρ€Π°Π²Π½ΠΎ Π½Π΅ увидят? Или части Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π°Ρ‡Π½ΡƒΡ‚ ΠΏΡ€ΠΎΠΏΠ°Π΄Π°Ρ‚ΡŒ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ экран становится всС мСньшС ΠΈ мСньшС, ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ваш Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ?

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π²Π΅Π±-сайтов, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ


Π‘ΠΎΠ²Π΅Ρ‚, Ссли Π²Ρ‹ ΠΈΠ·ΡƒΡ‡Π°Π΅Ρ‚Π΅ Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов

ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ стрСссовым ΠΈ Ρ€Π°Π·ΠΎΡ‡Π°Ρ€ΠΎΠ²Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ сущСствуСт Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΈ я ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ интСрСсно, какая информация заслуТиваСт довСрия, какая точная, Π° какая Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Π°Ρ.Π― ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ‡ΠΈΡ‚Π°Π»ΠΈ сообщСния Π² Π±Π»ΠΎΠ³Π°Ρ… ΠΎ Ρ‚ΠΎΠΌ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΏΠΎΠ»Π΅ согласия Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ своСго Π²Π΅Π±-сайта ΠΈΠ»ΠΈ ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ свою Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅.

Но ΠΏΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ ΠΌΠ½Π΅ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ совСт: Π½Π΅ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‰Π°ΠΉΡ‚Π΅ Ρ‡ΡƒΠΆΠΈΠ΅ обобщСния Π² ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΈ констатации Ρ„Π°ΠΊΡ‚ΠΎΠ². Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΉ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π² ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³ΠΎΠ²Ρ‹Ρ… Π±Π»ΠΎΠ³Π°Ρ…, сводятся ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ: Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ — это Ρ‡ΡŒΠ΅-Ρ‚ΠΎ ΠΌΠ½Π΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ Ρ‡ΡƒΠΆΠΎΠ³ΠΎ мнСния. ВмСсто этого сдСлайтС домашнСС Π·Π°Π΄Π°Π½ΠΈΠ΅, собСритС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΏΡ€ΠΈΡΠ»ΡƒΡˆΠ°ΠΉΡ‚Π΅ΡΡŒ ΠΊ мнСнию Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΈ ΠΎΡ†Π΅Π½ΠΈΡ‚Π΅ стратСгии ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ.ΠžΡ†Π΅Π½ΠΈΡ‚Π΅, какая стратСгия Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайта Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для вашСго Π±Ρ€Π΅Π½Π΄Π° ΠΈ вашСго бизнСса.

Π’ΠΎΡ‚ нСсколько совСтов ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ шапки Π²Π΅Π±-сайта:

  • Π‘ΡƒΠ΄ΡŒΡ‚Π΅ ΠΏΡ€ΠΎΡ‰Π΅. НС ΠΏΡ‹Ρ‚Π°ΠΉΡ‚Π΅ΡΡŒ Π²Ρ‚ΠΈΡΠ½ΡƒΡ‚ΡŒ слишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ — хотя это цСнная Π½Π΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡ‚ΡŒ, Ρ‡Π΅ΠΌ большС Π²Ρ‹ Π² Π½Π΅Π΅ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅Ρ‚Π΅, Ρ‚Π΅ΠΌ ΠΌΠ΅Π½Π΅Π΅ Ρ†Π΅Π½Π½ΠΎΠΉ ΠΎΠ½Π° становится.
  • Π‘Π²Π΅Π΄ΠΈΡ‚Π΅ тСкст ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ. Π’Π°Ρˆ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ для Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π° ΠΈ узнаваСмости Π±Ρ€Π΅Π½Π΄Π°, ΠΈ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ.Π‘Π²Π΅Π΄ΠΈΡ‚Π΅ тСкст ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ. Π’Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ своСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, своС имя, Ρ‚ΠΈΡ‚ΡƒΠ», слоган, заявлСниС ΠΎ миссии ΠΈΠ»ΠΈ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³ΠΎΠ²ΠΎΠ΅ сообщСниС, ΠΈ, ΠΈ, и…
  • НС ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΠΉΡ‚Π΅ согласиС Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ поля согласия Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ вашСго Π²Π΅Π±-сайта Π±Ρ‹Π»ΠΎ большой ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π½ΠΎΠ²Ρ‹ΠΌ Π΅Ρ‰Π΅ Π² 2007/2008 Π³ΠΎΠ΄Ρƒ. Но Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° ΠΏΡ€ΠΎΠ½ΠΈΠΊΠ»Π° Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚, Π° подписки распространСны ΠΏΠΎΠ²ΡΡŽΠ΄Ρƒ, стратСгия тСряСт свою ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΎΡ‚Ρ‡Π°ΡΠ²ΡˆΠΈΠΌΡΡ ΠΈ Π½Π΅ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ, Ссли Π½Π΅ всС сдСлаСтС ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ.ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠΎΠ»Π΅ Π²Ρ‹Π±ΠΎΡ€Π° Π²Π΅Π±-сайта Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΎ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницС вашСго Π²Π΅Π±-сайта — Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° Π²Π°ΡˆΠΈΡ… услугах, ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°Ρ…, ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°Ρ… ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… страницах, ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Ρ… Π½Π° ΠΊΠΎΠ½Π²Π΅Ρ€ΡΠΈΡŽ.
  • ΠΠ°Π½ΡΡ‚ΡŒ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, ΠΌΡ‹ считаСм, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ слСдуСт Π½Π°Π½ΡΡ‚ΡŒ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° для всСго сайта, Π½ΠΎ Ссли Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ всС ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ»ΠΈ Ρƒ вас Π½Π΅Ρ‚ Π±ΡŽΠ΄ΠΆΠ΅Ρ‚Π°, ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ, инвСстируйтС Π² ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ графичСского Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ вашСго Π²Π΅Π±-сайта ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Π°Π½Π½Π΅Ρ€Π°. для тСбя. Π£ вас Π΅ΡΡ‚ΡŒ всСго ΠΏΠ°Ρ€Π° сСкунд, Ρ‡Ρ‚ΠΎΠ±Ρ‹ произвСсти ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ сдСлайтС это.

А Ρ‚Ρ‹?

Π’Ρ‹ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π½Π°Π΄ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ шапки вашСго сайта? Π’Ρ‹ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ этот пост ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ? Π£ вас Π΅ΡΡ‚ΡŒ вопросы ΠΏΠΎ созданию шапки сайта? Если Π΄Π°, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π΄Ρ‹ ΡƒΡΠ»Ρ‹ΡˆΠ°Ρ‚ΡŒ ΠΎΡ‚ вас Π² коммСнтариях Π½ΠΈΠΆΠ΅!

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π» Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° вашСго Π²Π΅Π±-сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS (Π Π°Π·Π΄Π΅Π» 1)

Π§Π°ΡΡ‚ΡŒ сСрии: Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π­Ρ‚ΠΎ руководство являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ сСрии ΠΏΠΎ созданию ΠΈ настройкС этого Π²Π΅Π±-сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, языка Ρ‚Π°Π±Π»ΠΈΡ† стилСй, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ для управлСния прСдставлСниСм Π²Π΅Π±-сайтов.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ Π·Π° всСй сСриСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΎΡΡΠΎΠ·Π΄Π°Ρ‚ΡŒ дСмонстрационный Π²Π΅Π±-сайт ΠΈ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с CSS, ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ описанныС здСсь ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ для Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π²Π΅Π±-сайтов CSS.

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ, ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ Π²Π°ΠΌ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ знания HTML, стандартного языка Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ для отобраТСния Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² Π² Π²Π΅Π±-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Если Π²Ρ‹ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с HTML, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π΄Π΅ΡΡΡ‚ΡŒ руководств нашСй сСрии «ΠšΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-сайт с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML», ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ эту ΡΠ΅Ρ€ΠΈΡŽ.

Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅

Π’ этом руководствС Π²Ρ‹ воссоздадитС Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ дСмонстрационного Π²Π΅Π±-сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML ΠΈ CSS.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Бэмми своСй собствСнной, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€. ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ здСсь ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅, ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΊ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌ Π²Π΅Π±-сайтов CSS / HTML.

ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ трСбования

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ этому руководству, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ настроили Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ΠΈ ΠΏΠ°ΠΏΠΊΠΈ, ΠΊΠ°ΠΊ описано Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ руководствС ΠΈΠ· этой сСрии «Как Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ CSS ΠΈ HTML для ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈΒ».

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ Π²Π΅Π±-страницы

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ нашСго Π²Π΅Π±-сайта Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ («Акула Бэмми»), ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ (Β«Π‘Π’ΠΠ Π¨Π˜Π™ БЕЛАΠ₯ИМОРЀА Π’ DIGITALOCEANΒ») ΠΈ нСбольшоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ профиля.Π­Ρ‚ΠΈ элСмСнты Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€

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

Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½Π° свой сайт, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅Π³Π°ΠΌΠΈ Π² индСксС .html Ρ„Π°ΠΉΠ». Π—Π°ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Бэмми своСй собствСнной, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠ΅Ρ€ΡΠΎΠ½Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свой сайт:

index.html

 . . .




    

Акула Бэмми

Π‘Π’ΠΠ Π¨Π˜Π™ БЕЛАΠ₯ИМОРЀА Π’ DIGITALOCEAN

Π’ этом Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ ΠΊΠΎΠ΄Π° Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Sammy the Shark ΠΈ присвоили Π΅ΠΌΡƒ Ρ‚Π΅Π³ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°

, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это самый Π²Π°ΠΆΠ½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ этой Π²Π΅Π±-страницы.Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ SENIOR SELACHIMORPHA AT DIGITALOCEAN ΠΈ присвоили Π΅ΠΌΡƒ Ρ‚Π΅Π³ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ нСпосрСдствСнно ΠΏΠ΅Ρ€Π΅Π΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ. ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для сохранСния ΠΏΠΎΡΡΠ½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠΉ ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΊΠΎΠ΄Ρƒ для дальнСйшСго использования ΠΈ Π½Π΅ отобраТаСтся Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ для посСтитСлСй сайта (Ссли ΠΎΠ½ΠΈ Π½Π΅ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ исходный ΠΊΠΎΠ΄ Π²Π΅Π±-страницы). Π’ HTML ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ Π·Π°ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΈ -> , ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π²ΠΎ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π΅ ΠΊΠΎΠ΄Π° Π²Ρ‹ΡˆΠ΅.ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°ΠΊΡ€ΠΎΠΉΡ‚Π΅ свой ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ Ρ‚Π΅Π³ΠΎΠΌ коммСнтария ( -> ), ΠΈΠ½Π°Ρ‡Π΅ вСсь ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½.

Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΈ стилизация нСбольшого изобраТСния профиля Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-страницы

Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚Π΅ нСбольшоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ профиля Π² Ρ€Π°Π·Π΄Π΅Π» Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ„ΠΎΡ‚ΠΎ профиля, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π° своСм сайтС. Если Ρƒ вас Π½Π΅Ρ‚ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ профиля, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ любоС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ профиля Бэмми) ΠΈΠ»ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π°Π²Π°Ρ‚Π°Ρ€ Π½Π° Ρ‚Π°ΠΊΠΎΠΌ сайтС, ΠΊΠ°ΠΊ Getavataaars.com.

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, сохранитС Π΅Π³ΠΎ Π² ΠΏΠ°ΠΏΠΊΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΊΠ°ΠΊ small-profile.jpeg .

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ профиля Π½Π° Π²Π΅Π±-страницу с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° src , Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ³ΠΎ ΠΏΡƒΡ‚ΠΈ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ изобраТСния вашСго профиля. Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ ΠΊΠΎΠ΄Π° Π² Ρ„Π°ΠΉΠ» index.html сразу послС строки ΠΈ ΠΏΠ΅Ρ€Π΅Π΄ строкой

Sammy the Shark

:

ИндСкс

.html

 . . .

  

  
       Акула Бэмми, талисман DigitalOcean
        

Акула Бэмми

Π‘Π’ΠΠ Π¨Π˜Π™ БЕЛАΠ₯ИМОРЀА Π’ DIGITALOCEAN

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ваша Π²Π΅Π±-страница Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ профиля ΠΈ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅:

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΡΡ‚ΠΈΠ»ΡŒ, Ρ‡Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ профиля Π½Π° дСмонстрационном сайтС.Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΎΡΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΡƒ, Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ изобраТСния профиля Π½Π° дСмонстрационном сайтС, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π½Π°Π±ΠΎΡ€ ΠΏΡ€Π°Π²ΠΈΠ» Π² свой Ρ„Π°ΠΉΠ» styles.css :

styles.css

 . . .
/ * Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ профиля Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° * /
.profile-small {
   высота: 150 пиксСлСй;
   радиус Π³Ρ€Π°Π½ΠΈΡ†Ρ‹: 50%;
   Π³Ρ€Π°Π½ΠΈΡ†Π°: сплошная 10px # FEDE00;
}
  

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ дальшС, Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΊΠ°ΠΆΠ΄ΡƒΡŽ строку ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ:

  • / * Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ профиля Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° * / - это ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ CSS для ΠΌΠ°Ρ€ΠΊΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΊΠΎΠ΄Π°.
  • ВСкст .profile-small относится ΠΊ ΠΈΠΌΠ΅Π½ΠΈ класса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ опрСдСляСм с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π°Π±ΠΎΡ€Π° ΠΏΡ€Π°Π²ΠΈΠ». Π­Ρ‚ΠΎΡ‚ класс Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ профиля Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ шагС.
  • ДСкларация height: 150px; устанавливаСт высоту изобраТСния Π½Π° 150 пиксСлСй ΠΈ автоматичСски Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ для сохранСния ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния.
  • ОбъявлСниС border-radius: 50%; округляСт края изобраТСния Π΄ΠΎ ΠΎΠΊΡ€ΡƒΠ³Π»ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹.
  • ОбъявлСниС border: 10px solid # FEDE00; Π΄Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΡΠΏΠ»ΠΎΡˆΠ½ΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 10 пиксСлСй ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ΄ HTML # FEDE00 .

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» ΠΈ Π²Π΅Ρ€Π½ΠΈΡ‚Π΅ΡΡŒ Π² Ρ„Π°ΠΉΠ» index.html , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ класс profile-small Π² свой Ρ‚Π΅Π³ , Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

index.html

 . . .
       Акула Бэмми, талисман DigitalOcean
. . .
  

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ вашСго профиля Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΈΠΌΠ΅Ρ‚ΡŒ высоту 150 пиксСлСй, ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ ΠΈ ΠΆΠ΅Π»Ρ‚ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ:

На ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ шагС Π²Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ, ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡƒ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ профиля Π² Ρ†Π΅Π»ΠΎΠΌ.

Бтилизация ΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ содСрТимого Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅ класс с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS для стилизации ΠΈ размСщСния содСрТимого Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Π’Π΅Ρ€Π½ΠΈΡ‚Π΅ΡΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ styles.css ΠΈ создайтС класс Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° , Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π½Π°Π±ΠΎΡ€ ΠΏΡ€Π°Π²ΠΈΠ» CSS:

styles.css

 . . .
/ * Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ * /
.header {
  отступ: 40 пиксСлСй;
  Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Ρ†Π΅Π½Ρ‚Ρ€;
  Ρ„ΠΎΠ½: # f9f7f7;
  ΠΌΠ°Ρ€ΠΆΠ°: 30 пиксСлСй;
  Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 20 пиксСлСй;
}
  

Π”Π°Π²Π°ΠΉΡ‚Π΅ сдСлаСм ΠΊΠΎΡ€ΠΎΡ‚ΠΊΡƒΡŽ ΠΏΠ°ΡƒΠ·Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ строку ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ:

  • / * Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° * / - это ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ отобраТаСтся Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.
  • ВСкст .header - это имя сСлСктора класса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ создаСм ΠΈ опрСдСляСм с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого Π½Π°Π±ΠΎΡ€Π° ΠΏΡ€Π°Π²ΠΈΠ».
  • ПолС : 40 пиксСлСй; ОбъявлСниС создаСт 40 пиксСлСй заполнСния ΠΌΠ΅ΠΆΠ΄Ρƒ содСрТимым ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ элСмСнта.
  • Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ; ОбъявлСниС ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ содСрТимоС Π² Ρ†Π΅Π½Ρ‚Ρ€ элСмСнта. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π½Π° слСва ΠΈΠ»ΠΈ справа , Ρ‡Ρ‚ΠΎΠ±Ρ‹ соотвСтствСнно Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ тСкст.
  • Π€ΠΎΠ½ : # f9f7f7; ОбъявлСниС устанавливаСт Ρ†Π²Π΅Ρ‚ Π² соотвСтствии с ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ HTML, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ Π½Π° дСмонстрационном Π²Π΅Π±-сайтС.Π­Ρ‚ΠΎΡ‚ ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄Ρ‹ Ρ†Π²Π΅Ρ‚ΠΎΠ² HTML Π² этой сСрии руководств, Π½ΠΎ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π° Ρ†Π²Π΅Ρ‚ΠΎΠ² HTML ( Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ , Π±Π΅Π»Ρ‹ΠΉ , сСрый , сСрСбристый , Ρ„ΠΈΠΎΠ»Π΅Ρ‚ΠΎΠ²Ρ‹ΠΉ , красный , фуксия , салатовый , ΠΎΠ»ΠΈΠ²ΠΊΠΎΠ²Ρ‹ΠΉ , Π·Π΅Π»Π΅Π½Ρ‹ΠΉ , ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ , Π±ΠΈΡ€ΡŽΠ·ΠΎΠ²Ρ‹ΠΉ , Ρ‚Π΅ΠΌΠ½ΠΎ-синий , синий , Ρ‚Π΅ΠΌΠ½ΠΎ-Π±ΠΎΡ€Π΄ΠΎΠ²Ρ‹ΠΉ ΠΈ синий ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° этого свойства.
  • ПолС : 30 пиксСлСй; ОбъявлСниС создаСт ΠΏΠΎΠ»Π΅ Π² 30 пиксСлСй ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΠ΅Ρ€ΠΈΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ элСмСнта ΠΈ ΠΏΠ΅Ρ€ΠΈΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ области просмотра ΠΈΠ»ΠΈ Π»ΡŽΠ±Ρ‹Ρ… ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΡ… элСмСнтов.
  • Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° : 20 пиксСлСй; ОбъявлСниС ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» styles.css . Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚Π΅ этот класс Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΊ содСрТимому вашСго Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Π’Π΅Ρ€Π½ΠΈΡ‚Π΅ΡΡŒ Π½Π° страницу index.html ΠΈ ΠΎΠ±Π΅Ρ€Π½ΠΈΡ‚Π΅ содСрТимоС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° (ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Ρ‹ ΡƒΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π² свой Ρ„Π°ΠΉΠ») Π² Ρ‚Π΅Π³

, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π½Π°Π·Π½Π°Ρ‡Π΅Π½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ class:

 . . .

   
 Акула Бэмми, талисман DigitalOcean

Акула Бэмми

Π‘Π’ΠΠ Π¨Π˜Π™ БЕЛАΠ₯ИМОРЀА Π’ DIGITALOCEAN

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ» index.html ΠΈ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ Π΅Π³ΠΎ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ваш Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ профиля Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ стилизованы Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

Π² соотвСтствии с ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ объявили Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ . class:

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²Ρ‹ воссоздали Ρ€Π°Π·Π΄Π΅Π» Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° дСмонстрационного Π²Π΅Π±-сайта Π½Π° своСй Π²Π΅Π±-страницС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML ΠΈ CSS.Π’Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΈ стилизовали Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ профиля, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹

ΠΈ классы CSS. Если Π²Π°ΠΌ интСрСсно, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ возмоТностСй Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS для содСрТимого Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.

Когда Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ руководству, Π³Π΄Π΅ Π²Ρ‹ воссоздадитС Π²Ρ‚ΠΎΡ€ΠΎΠΉ Ρ€Π°Π·Π΄Π΅Π» дСмонстрационного сайта.

20 Π»ΡƒΡ‡ΡˆΠΈΡ… бСсплатных шаблонов Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² для вдохновСния

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта - ΠΎΠ΄Π½Π° ΠΈΠ· самых Π²Π°ΠΆΠ½Ρ‹Ρ… частСй ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Π±-сайта.Он ΠΈΠ³Ρ€Π°Π΅Ρ‚ Ρ€Π΅ΡˆΠ°ΡŽΡ‰ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡Π΅Π½ΠΈΠΈ внимания посСтитСлСй ΠΈ установлСнии с Π½ΠΈΠΌΠΈ связи.

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

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ списку Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠ² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡ‚Π²Π΅Ρ‚ΠΈΡ‚ΡŒ Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ вопросы:

  • Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта?
  • Какого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта?
  • Π§Ρ‚ΠΎ ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Ρ‹ Π½Π° Π²Π΅Π±-сайтС?

Π§Π°ΡΡ‚ΡŒ 1: Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта?

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта - это Ρ‡Π°ΡΡ‚ΡŒ вашСго Π²Π΅Π±-сайта, которая отобраТаСтся Π² самом Π²Π΅Ρ€Ρ…Ρƒ вашСй страницы.Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ - это ΠΏΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ видят посСтитСли, попадая Π½Π° Π²Π°ΡˆΡƒ страницу.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта Π΄ΠΎΠ»ΠΆΠ΅Π½ Π΄Π΅Π»Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ Π΄Π²Π΅ Π²Π΅Ρ‰ΠΈ: ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ посСтитСля ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΏΠΎΠΏΠ°Π» Π² Π½ΡƒΠΆΠ½ΠΎΠ΅ мСсто, ΠΈ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ посСтитСля ΠΊ Π΄Π°Π»ΡŒΠ½Π΅ΠΉΡˆΠ΅ΠΌΡƒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΡŽ сайта.

Π•ΡΡ‚ΡŒ пословица, гласящая, Ρ‡Ρ‚ΠΎ Ρƒ вас Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ шанса произвСсти ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ΠΈΠ΅. Π£ вас Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ 6 сСкунд, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, ΠΊΡ‚ΠΎ Π²Ρ‹ ΠΈ ΠΊΠ°ΠΊΠΎΠ² ваш Π±Ρ€Π΅Π½Π΄.

Для этого Π΄ΠΈΠ·Π°ΠΉΠ½ вашСго Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅:

Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ Ρ‚ΠΈΠΏ Π±Ρ€Π΅Π½Π΄Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ вашСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, слоган ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ гСроя. Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, ваша контактная информация, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ваш адрСс элСктронной ΠΏΠΎΡ‡Ρ‚Ρ‹, адрСс ΠΈΠ»ΠΈ Π½ΠΎΠΌΠ΅Ρ€ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°. Π’-Ρ‚Ρ€Π΅Ρ‚ΡŒΠΈΡ…, ΠΊΠ½ΠΎΠΏΠΊΠ° поиска. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ добавлСния языковых ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ссылок Π½Π° ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ сСти, поля подписки ΠΈ бСсплатных ΠΏΡ€ΠΎΠ±Π½Ρ‹Ρ… вСрсий Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ².

Π§Π°ΡΡ‚ΡŒ 2. Какого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта?

Π₯отя экраны устройств Π±Ρ‹Π²Π°ΡŽΡ‚ большСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ составляСт 1024 Γ— 768 пиксСлСй.Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΡƒΡΠΏΠ΅ΡˆΠ½Ρ‹Ρ… ΠΈ популярных Π²Π΅Π±-сайтов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ для Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ². Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС, посмотритС Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ Π½ΠΈΠΆΠ΅ :

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π§Π°ΡΡ‚ΡŒ 3: Π§Ρ‚ΠΎ Π²Π»Π΅Ρ‡Π΅Ρ‚ Π·Π° собой Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Ρ‹ Π½Π° Π²Π΅Π±-сайтС?

Π’Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Ρ‹ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹ΠΌΠΈ элСмСнтами Π²Π΅Π±-сайта. Они содСрТат ссылки Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚Ρ‹ Ρ‡Π°Ρ‰Π΅ всСго захотят ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΡΠΎΠ²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ ΠΏΠΎΠΊΡƒΠΏΠΊΡƒ ΠΈΠ»ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ запрос.

НиТний ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» Ρ‚Π°ΠΊ ΠΆΠ΅ Π²Π°ΠΆΠ΅Π½, ΠΊΠ°ΠΊ ΠΈ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ», ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ послСдний шанс ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠ² ΠΈ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΡ‚ΡŒ ΠΈΡ… ΡΠΎΠ²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ дСйствиС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΡΠΎΠ²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ ΠΏΠΎΠΊΡƒΠΏΠΊΡƒ ΠΈΠ»ΠΈ Π·Π°ΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π²Π΅Ρ€Ρ…Π½ΠΈΡ… ΠΈ Π½ΠΈΠΆΠ½ΠΈΡ… ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»ΠΎΠ² Π²Π°ΠΌ, вСроятно, слСдуСт ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅Π»ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ ΡΡ‚ΠΈΠ»ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π°, ΠΎΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с Новый способ создания Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π° Π²Π΅Π±-сайта [5 Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»ΡΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ²] .

Π§Π°ΡΡ‚ΡŒ 4: Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ созданию Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов для вдохновСния

НиТС ΠΌΡ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ 20 Π»ΡƒΡ‡ΡˆΠΈΡ… бСсплатных шаблонов Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² для вашСго вдохновСния.ΠΠ°ΡΠ»Π°ΠΆΠ΄Π°Ρ‚ΡŒΡΡ!

1. Baianat

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

2. Mockplus Cloud

Mockplus Cloud - это ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ новая ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ° для совмСстной Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ².Π•Π³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ содСрТит Π²ΠΈΠ΄Π΅ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ воспроизводится автоматичСски, дСмонстрируя основныС возмоТности ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π°. Он Ρ‚Π°ΠΊΠΆΠ΅ содСрТит ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π½Π° Π±Π΅ΡΠΏΠ»Π°Ρ‚Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ±Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ.

3. WPS

WPS - это ΠΌΠΎΡ‰Π½ΠΎΠ΅ офисноС ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ обСспСчСниС, ΠΏΠΎΡ…ΠΎΠΆΠ΅Π΅ Π½Π° Word. Π’ Π΅Π³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ динамичСскиС ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ для прСдставлСния Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ срСды. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ всю страницу Π±ΠΎΠ»Π΅Π΅ яркой. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ CTA.

4. Godaddy

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

5. Slack

Π”ΠΈΠ·Π°ΠΉΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Slack содСрТит ΠΏΠΎΡ‡Ρ‚ΠΈ всС. Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, навигация, CTA бСсплатного слСда, ΠΊΠ½ΠΎΠΏΠΊΠ° Π²Π²ΠΎΠ΄Π° ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Π’Π΅ΡΡŒ интСрфСйс чистый ΠΈ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ. Π•ΡΡ‚ΡŒ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡƒΡŽ Π½Π° сайтС.

6. ΠšΡ€ΡƒΡ‚ΠΎΠΉ ΠΊΠ»ΡƒΠ±

Как слСдуСт ΠΈΠ· названия, этот сайт Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ классный. Он Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя мноТСство интСрСсных микровзаимодСйствий.ВсС ΠΏΡ€ΠΈΠ·Ρ‹Π²Ρ‹ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ содСрТат микровзаимодСйствия.

7. Ана-сантос

Ана-сантос - личная страница UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. Π•Π³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° выдСляСтся смСлой Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ, ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠ΅ΠΉ, Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹ΠΌ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ, ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ CTA ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ.

8. Π”ΡƒΡ…ΠΎΠ²ΠΊΠ°

Π”ΡƒΡ…ΠΎΠ²ΠΊΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΡΠΊΡ€Ρ‹Ρ‚ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ, поэтому вся страница остаСтся Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ простой ΠΈ чистой. Π’ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ основныС элСмСнты. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π° сайтС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ большоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ гСроя, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

9. ЗСлСная горная энСргия

ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ ΠΊΠΎΠ»Π»Π΅ΠΊΡ‚ΠΎΡ€Π° Π—Π΅Π»Π΅Π½ΠΎΠΉ Π³ΠΎΡ€Π½ΠΎΠΉ энСргСтики ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Π°. Особого внимания заслуТиваСт ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ гСроя, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‰Π΅Π΅ ΠΎΠ²Π΅Ρ† Π² ΠΌΡƒΠ»ΡŒΡ‚ΡΡˆΠ½ΠΎΠΌ стилС Π² настоящСй Ρ‚Ρ€Π°Π²Π΅. CTA Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»Π΅Π½.

10. Impossible-bureau

Impossible-bureau - ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ эстСтичных сайтов Π² нашСм спискС. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ яркиС Ρ†Π²Π΅Ρ‚Π° ΠΈ тСкстуры, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ страницу Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ.

Одно ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… прСимущСств Google Material Design - это наша Π³ΠΎΡ‚ΠΎΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ яркиС Ρ†Π²Π΅Ρ‚Π°, слои ΠΈ Π³Ρ€Π°Π΄ΠΈΠ΅Π½Ρ‚Ρ‹ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.

11. Monstroid2

Monstroid2 - это ΠΌΠ½ΠΎΠ³ΠΎΡ†Π΅Π»Π΅Π²ΠΎΠΉ шаблон Π²Π΅Π±-сайта с ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. Он отличаСтся ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ гСроя ΠΈ отличаСтся чистым ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Он Ρ‚Π°ΠΊΠΆΠ΅ отличаСтся Π½Π°Π΄Π΅ΠΆΠ½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΎΠΉ ΠΈ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ понятной Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ мноТСство настраиваСмых ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ниш, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свой Π²Π΅Π±-сайт. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ адаптируСтся ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΠΎΠΌΡƒ устройству ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Ρƒ.

12. DreamSoft

DreamSoft - это шаблон многостраничного Π²Π΅Π±-сайта, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ для ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‰Π΅ΠΉΡΡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния.Π•Π³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ Π½Π° ΠΏΠ΅Ρ€Π²ΠΎΠ΅ мСсто вмСстС с броским Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ посСтитСли ΠΌΠΎΠ³Π»ΠΈ быстро ΠΏΠΎΠ½ΡΡ‚ΡŒ бизнСс. ДСмонстрация Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ самого ΠΏΡ€ΠΎΠ΄Π°Π²Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° - Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ способ ΠΏΡ€ΠΈΠ²Π»Π΅Ρ‡ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ.

13. Perquetry

Perquetry - это многостраничный HTML-шаблон Π²Π΅Π±-сайта для ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, производящСй элСгантныС ΠΏΠΎΠ»Ρ‹. Π’ этом спискС прСдставлСн ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… шаблонов Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ². Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ соврСмСнныС особСнности Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ. Π’Ρ€ΠΈ Π·Π°ΡΠ»ΡƒΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… внимания элСмСнта сайта Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π² сСбя:

  • ΠœΠΎΡ‰Π½Ρ‹ΠΉ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ Π±Π°Π½Π½Π΅Ρ€ с Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠΎΠΌ, ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ поиска ΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π²ΠΎΠΌ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ.
  • Π‘ΠΊΠΎΠ»ΡŒΠ·ΡΡ‰ΠΈΠ΅ изобраТСния. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ красивыС изобраТСния с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ.
  • Π­Ρ„Ρ„Π΅ΠΊΡ‚ параллакса ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ΅, Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‰ΠΈΠΉ сайт.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ большС Π²Π΅Π±-сайтов с параллакс-скроллингом для вдохновСния, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ эти 23 Π»ΡƒΡ‡ΡˆΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°.

14. Smart

Smart ΠΈΠΌΠ΅Π΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта bootstrap 4 CSS. Π’ качСствС Ρ„ΠΎΠ½Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π²ΠΈΠ΄Π΅ΠΎ. Π’ΠΈΠ΄Π΅ΠΎΡ„ΠΎΠ½ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ остаСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· Π»ΡƒΡ‡ΡˆΠΈΡ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ для оформлСния Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° домашнСй страницы.

15. БотаничСский сад

БотаничСский сад ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΡƒ ΠΈ большиС изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ тСсно связаны с Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΎΠΉ Π²Π΅Π±-сайта. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ контраст ΠΈ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ. Он Ρ‚Π°ΠΊΠΆΠ΅ отличаСтся Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ, Ρ„Π°ΠΉΠ»Π°ΠΌΠΈ PSD с Ρ‡Π΅Ρ‚ΠΊΠΎΠΉ структурой слоСв, измСнСниями Π² содСрТании, ΠΊΠΎΠ΄ΠΎΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта ΠΈ ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΠ΅ΠΉ с cms.

16. Fluid

Fluid - это ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ шаблон, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ скоро появится. Он поставляСтся с Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ раскладками.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… Ρ‚ΠΈΠΏΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ„ΠΎΠ½ изобраТСния, Π²Ρ‚ΠΎΡ€ΠΎΠΉ - Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ слайдСр, Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ - Π²ΠΈΠ΄Π΅ΠΎ Ρ„ΠΎΠ½, Π° послСдний ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹.

17. Π˜Π½Ρ‚Π΅Ρ€ΡŒΠ΅Ρ€

Π˜Π½Ρ‚Π΅Ρ€ΡŒΠ΅Ρ€ - это Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ шаблон Π²Π΅Π±-сайта Β«Π˜Π½Ρ‚Π΅Ρ€ΡŒΠ΅Ρ€ ΠΈ мСбСль». Он отличаСтся ΠΎΡ‡Π΅Π½ΡŒ простым ΠΈ чистым Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ. Если Π²Ρ‹ Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° CTA, ΠΎΠ½ ΠΎΡ‚Π²Π΅Ρ‚ΠΈΡ‚ микровзаимодСйствиСм. Π‘ΠΏΡ€Π°Π²Π° Π΅ΡΡ‚ΡŒ мноТСство Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ Π½Π° связи.Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΆΠΈΡ€Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ Google Web Fonts, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ вСсь интСрфСйс Π±ΠΎΠ»Π΅Π΅ связным.

18. Olly

Olly - это ΡΡ‚ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ, быстрый ΠΈ красивый многостраничный HTML5 шаблон Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½ΠΎΠ³ΠΎ агСнтства. Π’ шаблонС Π΅ΡΡ‚ΡŒ самый ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, ΠΏΡ€ΠΈΠ·Ρ‹Π²Ρ‹ ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ поиска. Π‘Π»Π΅Π²Π° - ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π° справа - Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° ΠΈ ΠΏΡ€ΠΈΠ·Ρ‹Π² ΠΊ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡŽ для связи. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΈ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ Ρ„ΠΎΠ½ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Ρ€Π΅Π·ΠΊΠΈΠΉ, Π½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ контраст.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π²Π΅Π±-сайтов HTML: 20 Π»ΡƒΡ‡ΡˆΠΈΡ… простых HTML-шаблонов Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ бСсплатно Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π² 2019 Π³ΠΎΠ΄Ρƒ

19.Photo Studio

Как ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΈ соврСмСнный шаблон Π²Π΅Π±-сайта Bootstrap HTML5, Photo Studio ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΊΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΉ Π² своСм Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°. КаТдоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдставляСт ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΡŽ, ΠΈ Ссли Π²Ρ‹ Π½Π°Π²Π΅Π΄Π΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ, ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΎ. Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ Π½Π°Π±ΠΎΡ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ ΠΈ ΠΎΠ³Ρ€ΠΎΠΌΠ½ΡƒΡŽ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ ΠΈ Ρ‚Π΅ΠΌ.

20. МСбСль

Π’ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ схСмС этого Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ шаблона смСло ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΆΠ΅Π»Ρ‚Ρ‹ΠΉ Π² качСствС основного Ρ†Π²Π΅Ρ‚Π° ΠΈ цСнтрированная Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° для прСдставлСния сайта.ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΠΌΠ΅Π±Π΅Π»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора.

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ рСсурсы ΠΏΠΎ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ²:

РСсурсы ΠΏΠΎ ΠΊΠΎΠ΄Π°ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов

Π”ΠΈΠ·Π°ΠΉΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π² рСсурсах HTML

РСсурсы ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов CSS

Π’Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ слСдуСт ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π²Π΅Π±-сайта. ΠœΡ‹ надССмся, Ρ‡Ρ‚ΠΎ эти 20 Π»ΡƒΡ‡ΡˆΠΈΡ… бСсплатных шаблонов ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов вдохновят вас. ΠŸΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΠ»ΠΈ Π»ΠΈ ΠΌΡ‹ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π²Π΅Π±-сайтов? Если Π΄Π°, Π΄Π°ΠΉΡ‚Π΅ Π½Π°ΠΌ Π·Π½Π°Ρ‚ΡŒ!

.

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

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

АвторскоС ΠΏΡ€Π°Π²ΠΎ © 2025 Es picture - ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ
top