Html вСрстка css: Как ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π²Π΅Π±-страницу. Π§Π°ΡΡ‚ΡŒ 1 / Π₯Π°Π±Ρ€


25.07.2019 Facebook Twitter LinkedIn Google+ Π Π°Π·Π½ΠΎΠ΅


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

с нуля Π΄ΠΎ ΡΠ΅Π½ΡŒΠΎΡ€Π° / Π₯Π°Π±Ρ€

ЗдравствуйтС, мСня Π·ΠΎΠ²ΡƒΡ‚ АлСксандр Π—Π΅Π»Π΅Π½ΠΈΠ½, ΠΈ я Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ.
ΠœΠ½ΠΎΠ³ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎ я ΡΠ»Ρ‹ΡˆΠ°Π» ΠΌΠ½Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ вСрстка β€” ΡƒΠ΄Π΅Π» Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… frontend’Сров. Π₯отя фактичСски это ваТнСйшая Ρ‡Π°ΡΡ‚ΡŒ любого (ΠΏΠΎΡ‡Ρ‚ΠΈ) Π²Π΅Π±-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π­Ρ‚ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ видят Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ. На Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ качСствСнная вёрстка (особСнно ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ²) Π² ΠΊΡ€ΡƒΠΏΠ½ΠΎΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ большого количСства Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π½Π°Π²Ρ‹ΠΊΠΎΠ².

Π’ Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽ схСму развития Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°


[большая ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ]
Π‘Π°ΠΌΠΎ собой, это Π½Π΅ Π²ΡΠ΅ΠΎΠ±ΡŠΠ΅ΠΌΠ»ΡŽΡ‰Π°Ρ ΠΈ СдинствСнно вСрная схСма. Π•ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ цСлая Π³ΠΎΡ€Π° связанных Π½Π°Π²Ρ‹ΠΊΠΎΠ², Ρ€Π΅Π»Π΅Π²Π°Π½Ρ‚Π½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Градация являСтся ΡΡƒΠ±ΡŠΠ΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ.

Π₯ΠΎΡ‡Ρƒ сразу Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… ссылок Π½Π° ΡƒΡ‡Π΅Π±Π½Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚. Π‘ΡƒΠ΄Ρƒ Ρ€Π°Π΄ дополнСниям Π² коммСнтариях.


Π§Π΅Π³ΠΎ ΠΌΡ‹ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ?

Π’ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Π΅Π³ΠΎ ΠΌΡ‹ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ ΠΎΡ‚ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· ΡƒΡ€ΠΎΠ²Π½Π΅ΠΉ. Π’Π°ΡˆΠΈ оТидания ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ.
Junior β€” Π·Π½Π°Π΅Ρ‚ основныС Ρ‚Π΅Π³ΠΈ, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ΄ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° Π³ΠΎΡ‚ΠΎΠ²ΠΎΠΌ html сайтС, ΡƒΠΌΠ΅Π΅Ρ‚ Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ тСкст, Π±Π΅Π· ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ вставит встраиваСмый элСмСнт (Ρ€ΠΎΠ»ΠΈΠΊ с ΡŽΡ‚ΡƒΠ±Π°, яндСкс ΠΊΠ°Ρ€Ρ‚Ρƒ), Π²Π΅Π΄Ρ‘Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ Ρ‡Π΅Ρ€Π΅Π· систСму контроля вСрсий Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для сСбя (master, 1 ΠΊΠΎΠ½Ρ‚Ρ€ΠΈΠ±ΡŒΡŽΡ‚ΠΎΡ€).

ΠœΠΎΠΆΠ΅Ρ‚ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ нСслоТноС с нуля, ΠΈ ΠΎΠ½ΠΎ Π΄Π°ΠΆΠ΅ Π½Π΅ ΠΏΠΎΠ΅Π΄Π΅Ρ‚ (Π»ΠΈΡ‡Π½ΠΎ Ρƒ Π½Π΅Π³ΠΎ). Π’ Ρ†Π΅Π»ΠΎΠΌ Π½Π΅ являСтся ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π΅Π΄ΠΈΠ½ΠΈΡ†Π΅ΠΉ ΠΈ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ руководства ΡΠ²Ρ‹ΡˆΠ΅.
Middle β€” Π±ΠΎΠ»Π΅Π΅-ΠΌΠ΅Π½Π΅Π΅ автономная Π΅Π΄ΠΈΠ½ΠΈΡ†Π° (Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ автономная для ΠΌΠ°Π»Ρ‹Ρ… ΠΈ срСдних ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ²). ΠœΠΎΠΆΠ΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ сайт срСдних Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ², ΠΈ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π²ΠΎ всСх Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… вСрсиях Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². ΠŸΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ ΡˆΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°Ρ‚ΠΎΡ€Ρ‹, ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ (ΠΏΡ€ΠΈ условии прСдоставлСния ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°). Π£ΠΌΠ΅Π΅Ρ‚ ΠΏΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ свою Ρ€Π°Π±ΠΎΡ‚Ρƒ ΠΈ ΠΎΡ†Π΅Π½ΠΈΠ²Π°Ρ‚ΡŒ сроки. ΠŸΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ Π²Π°ΠΆΠ½ΠΎΡΡ‚ΡŒ поддСрТания стиля ΠΊΠΎΠ΄Π°. ΠŸΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚, Π·Π°Ρ‡Π΅ΠΌ Π΅ΡΡ‚ΡŒ Π³Ρ€ΠΈΠ΄-систСмы ΠΈ css Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ. Π£ΠΌΠ΅Π΅Ρ‚ Π±Ρ€Π°Ρ‚ΡŒ всю Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ· ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. ΠœΠΎΠΆΠ΅Ρ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с нСбольшой ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ, ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Ρ‚ΠΊΠΈ ΠΈ ΠΏΡƒΠ»Π»-рСквСсты.
Senior β€” ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ систСму Π±Π»ΠΎΠΊΠΎΠ² для ΠΊΡ€ΡƒΠΏΠ½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π—Π½Π°Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΎΠ² ΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ½Ρ‹Ρ… мСст ΠΏΡ€ΠΈ использовании Π΅Π³ΠΎ ΠΊΠΎΠ΄Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌΠΈ. Π£ΠΌΠ΅Π΅Ρ‚ Π΄Π΅ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ слоТныС Π·Π°Π΄Π°Ρ‡ΠΈ ΠΈ Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎ Ρ„ΠΎΡ€ΠΌΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡ΠΈ. Π£ΠΌΠ΅Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ ΠΎΠ΄Π½Ρƒ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΡŽ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π‘Π­Πœ). ΠœΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ открывался максимально быстро. Π₯ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚ нСсколько популярных ΡˆΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°Ρ‚ΠΎΡ€ΠΎΠ². БпособСн Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ сборщики ΠΈ Π°Π²Ρ‚ΠΎΠΌΠ°Ρ‚ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ процСсс, с этим связанный. ΠœΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ Ρ€Π΅Π²ΡŒΡŽ ΠΈ ΠΊΡƒΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ².
Рассмотрим Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρ‡ΡƒΡ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Π΅Π΅, Ρ‡Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· Π±Π»ΠΎΠΊΠΎΠ² Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅.


Junior

HTML β€” Π·Π½Π°Π½ΠΈΠ΅ основных Ρ‚Π΅Π³ΠΎΠ², Π°Ρ‚Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ². ПониманиС, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΏΠΈΡΠ°Ρ‚ΡŒ Π² ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅.
Π’ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠ° β€” ΡƒΠΌΠ΅Π½ΠΈΠ΅ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ тСкст. ВСкст β€” основа практичСски любого ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Вставка Π½Π΅Ρ€Π°Π·Ρ€Ρ‹Π²Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² Π³Π΄Π΅ Π½Π°Π΄ΠΎ, Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΆΠΈΡ€Π½Ρ‹ΠΌ, курсивом, abbr ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ ΠΈΠ»ΠΈ схоТий сСрвис, Π½ΠΎ ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚.
Π‘Π΅ΠΌΠ°Π½Ρ‚ΠΈΠΊΠ° β€” ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ для ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡ Π΅ΡΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ. Π£ΠΌΠ΅Ρ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ‚Π΅Π³.
МСдиа β€” ΠΊΠ°ΠΊΠΈΠ΅ Π²ΠΈΠ΄Ρ‹ ΠΌΠ΅Π΄ΠΈΠ° ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π² страницу.
Iframe β€” встраиваниС сторонних Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ² (Π²ΠΈΠ΄Π΅ΠΎ, Π°ΡƒΠ΄ΠΈΠΎ, ΠΊΠ°Ρ€Ρ‚Ρ‹ ΠΈ Ρ‚.ΠΏ.).
Аудио, Π’ΠΈΠ΄Π΅ΠΎ β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅, Ρ‚.ΠΊ. частично Ρ€Π΅ΡˆΠ°ΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ iframe. ΠŸΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ ΡƒΠΌΠ΅Π΅Ρ‚ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€, ΠΊΠ°ΠΊ ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ ΠΏΠ»Π΅Π΅Ρ€ ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ β€” ΠΊΠ°ΠΊΠΈΠ΅ графичСскиС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ ΠΈ Π² ΠΊΠ°ΠΊΠΎΠΌ Π²ΠΈΠ΄Π΅ воспринимаСт Π±Ρ€Π°ΡƒΠ·Π΅Ρ€. ΠŸΠ»ΡŽΡΡ‹ ΠΈ минусы использованиС Ρ‚Π΅Ρ… ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ².
Растр β€” jpg, png, gif. ΠŸΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² ΠΈ ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ‡Ρ‚ΠΎ ΠΈ Π³Π΄Π΅ Π½Π°Π΄ΠΎ.
SVG β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅, Ρ‚.ΠΊ. примСняСтся Ρ€Π΅ΠΆΠ΅, Ρ‡Π΅ΠΌ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹. ΠŸΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΏΠ»ΡŽΡΡ‹, минусы, ограничСния ΠΈ Ρ‚.ΠΏ.
Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹ β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. На самом Π΄Π΅Π»Π΅ довольно слоТная Ρ‚Π΅ΠΌΠ°, ΠΈ Π² ΠΎΠ±Ρ‰Π΅ΠΌ случаС я Π±Ρ‹ совСтовал Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ систСмныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹. Π£ΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π»Π°Π³ отрисовки с кастомными ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ.
Вабличная вёрстка β€” ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ. Для ΠΆΠ΅Π»Π°ΡŽΡ‰ΠΈΡ… Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ качСствСнныС email-рассылки Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ.
CSS 1 β€” ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Ρ†Π²Π΅Ρ‚Π°, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.
CSS 2.1 β€” ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ Π±Π»ΠΎΠΊΠΎΠ², ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅.
Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€Ρ‹ β€” простыС сСлСкторы Π½Π° Ρ‚Π΅Π³, класс, Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΉ элСмСнт. ΠŸΡ€ΠΎΡΡ‚Ρ‹Π΅ псСвдосСлСкторы Ρ‚ΠΈΠΏΠ° :hover.
ИмСнованиС β€” ΠΊΠ°ΠΊ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ классы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π±Ρ‹Π»ΠΎ ΠΌΡƒΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ больно.
Блочная вёрстка β€” Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° осознанныС Π±Π»ΠΎΠΊΠΈ, Π²ΠΎΠΏΠ»ΠΎΡ‚ΠΈΡ‚ΡŒ Π±Π»ΠΎΠΊΠΈ Π² HTML, ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚ΡŒ с CSS.
Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. КакиС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚, Π² Ρ‡Ρ‘ΠΌ ΠΈΡ… Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠ΅.
Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ инструмСнты Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ… отобраТСния.
ВСкстовыС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ β€” ΠΊΠ°ΠΊΠΈΠ΅ тСкстовыС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π΅ΡΡ‚ΡŒ ΠΈ Π·Π°Ρ‡Π΅ΠΌ. SublimeText ΠΈ Notepad++ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, ΠΊΠ°ΠΊ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΌΠ½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹Π΅. Π£ΠΌΠ΅Ρ‚ΡŒ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π² Π½ΠΈΡ… Π±Π°Π·ΠΎΠ²Ρ‹Π΅ Π²Π΅Ρ‰ΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ отступы, пСрСнос строки ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.
БистСмы контроля вСрсий β€” я Π»ΠΈΡ‡Π½ΠΎ ΡΡ‡ΠΈΡ‚Π°ΡŽ ΡƒΠΌΠ΅Π½ΠΈΠ΅ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ хотя Π±Ρ‹ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎ, Π»ΠΈΡ‡Π½ΠΎ для сСбя, ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½Ρ‹ΠΌ. ΠŸΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, для Ρ‡Π΅Π³ΠΎ эти систСмы созданы ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ Π±Ρ‹Π²Π°ΡŽΡ‚.
Git β€” ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π² ΠΎΠ±Ρ‰ΠΈΡ… Ρ‡Π΅Ρ€Ρ‚Π°Ρ… Π·Π°Π΄Π°Ρ‡Ρƒ ΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ самой популярной систСмы контроля вСрсий.
Github / bitbucket β€” ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΈΠ· популярных ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΎΠΊ для git.
Checkout / commit / push / pull β€” Π±Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΈ для Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ использования.
Stash β€” для Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ сохранСния Π½Π΅Π½ΡƒΠΆΠ½Ρ‹Ρ… Π² Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π΄Π°Π½Π½Ρ‹Ρ….
10 Ρ€Π°Π±ΠΎΡ‚ β€” ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ 10 Ρ€Π°Π±ΠΎΡ‚ Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. МоТно тСстовых, это Π½Π΅ Π²Π°ΠΆΠ½ΠΎ. Π’Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹Ρ… Π² Ρ€Π°ΠΌΠΊΠ°Ρ… Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΡ… Π·Π½Π°Π½ΠΈΠΉ.


Middle

CSS 3 β€” Π³Ρ€Π°Π΄Π°Ρ†ΠΈΠΈ, Ρ‚Π΅Π½ΠΈ, сглаТиваниС, Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Ρ‹, трансформации.
ΠŸΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Π΅ сСлСкторы β€” элСмСнты, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π·Π° ΠΎΠΏΠ΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΌ (+), ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½Ρ‹ΠΉ ΠΏΠΎ счёту (nth-child), shadow-dom, before/after ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.
Анимации β€” ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ. transition ΠΈ animation. ΠŸΠ»Π°Π²Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹, Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ. ΠŸΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ограничСния ΠΈ минусы.
Π‘Π΅Ρ‚ΠΊΠΈ β€” Π·Π°Ρ‡Π΅ΠΌ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚, ΠΊΠ°ΠΊ Π²Ρ‹ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ Π΅ΡΡ‚ΡŒ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Flexbox grid ΠΈΠ»ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π°ΠΉΠ΄Ρ‘Ρ‚Π΅.
Π€Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠΈ (CSS) β€” Π·Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ. Π–Π΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ ΠΎΠ΄ΠΈΠ½. ΠžΡ‡Π΅Π½ΡŒ пригоТдаСтся для прототипирования. Π—Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ²Ρ‹ΡˆΠ°Π΅Ρ‚ качСство ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° ΠΏΡ€ΠΈ отсутствии Π±ΡŽΠ΄ΠΆΠ΅Ρ‚Π° Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½ (Π½Π΅ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ, Π½ΠΎ юзабСльно).
CSS прСпроцСссоры β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ Ρ€Π°Π±ΠΎΡ‚Ρ‹, Π±ΠΎΠ»Π΅Π΅ красивый ΠΈ Ρ‡ΠΈΡ‚Π°Π±Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅, миксины ΠΈ Ρ‚.ΠΏ. ΠŸΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ»ΠΈ нСсколькими популярными прСпроцСссорами Ρ‚ΠΈΠΏΠ° SASS, LESS, Stylus.
Media queries β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΡƒΠΆΠ½Ρ‹Ρ… стилСй Π² зависимости ΠΎΡ‚ условий (устройство, Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана, ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒ пиксСлСй, вСрсия для ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ ΠΈ Ρ‚.ΠΏ.).
Π‘Ρ‚ΠΈΠ»ΡŒ ΠΊΠΎΠ΄Π° β€” ΠΏΠΎΠ½ΡΡ‚ΡŒ, для Ρ‡Π΅Π³ΠΎ Π΅ΡΡ‚ΡŒ соглашСния ΠΏΠΎ стилям, ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ любой (Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΎΡ‚ AirBNB).
DRY / KISS / SOLID β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. ΠŸΠΎΠ½ΡΡ‚ΡŒ Π²Π°ΠΆΠ½Ρ‹Π΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, ΠΎΡ‰ΡƒΡ‚ΠΈΠΌΠΎ ΡƒΠΏΡ€ΠΎΡ‰Π°ΡŽΡ‰ΠΈΠ΅ дальнСйшСС сопровоТдСниС ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.
OOCSS β€” ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ. ΠŸΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½ΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ css ΠΈ для Ρ‡Π΅Π³ΠΎ ΠΎΠ½. Π’ Ρ‚ΠΎΠΌ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΌ Π²ΠΈΠ΄Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… (Ρ…ΠΎΡ‚ΡŒ ΠΈ Π±Π΅Π· понимания, Ρ‡Ρ‚ΠΎ это ΠΎΠ½). Π’ ΠΈΠ΄Π΅Π°Π»Π΅, Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. ΠœΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Π·Π°ΠΉΡ‚ΠΈ для ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ².
ДокумСнтация β€” ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΈ ΠΊΠ°ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ. МоТно ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ, Π½ΠΎ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ markdown.
ΠŸΠ»Π°Π½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ β€” Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΎΡ†Π΅Π½ΠΈΠ²Π°Ρ‚ΡŒ сроки ΠΏΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚.
ДСкомпозиция β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. ΠΠ°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Ρ€Π°Π·Π±ΠΈΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡Ρƒ Π½Π° ΠΏΠΎΠ΄Π·Π°Π΄Π°Ρ‡ΠΈ. Π­Ρ‚ΠΎ слоТнСС, Ρ‡Π΅ΠΌ каТСтся πŸ™‚
ΠŸΠΎΡΡ‚Π°Π½ΠΎΠ²ΠΊΠ° Π·Π°Π΄Π°Ρ‡ β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. ΠΠ°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ Ρ‡Ρ‘Ρ‚ΠΊΠΎ ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‡ΠΈ тСкстом Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ, Π² Ρ‚ΠΎΠΌ числС с мСньшСй ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ, достаточно ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ для ΠΈΡ… выполнСния.
Flexbox β€” ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΡƒΠΌΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎ.
Вёрстка писСм β€” ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ. Π’ Ρ†Π΅Π»ΠΎΠΌ Π½Π°Π²Ρ‹ΠΊ Π½Π΅ лишний. ΠŸΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ особСнности ΠΏΠΎΡ‡Ρ‚ΠΎΠ²Ρ‹Ρ… систСм, ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ внСшний Π²ΠΈΠ΄ ΠΈ Π½Π΅ ΡƒΠΏΠ°ΡΡ‚ΡŒ Π² спам (Ссли это Π½Π΅ спам).
ΠŸΠΎΠ»ΠΈΡ„ΠΈΠ»Ρ‹ β€” Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ самыС Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ возмоТности Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ, сохраняя ΠΎΠ±Ρ€Π°Ρ‚Π½ΡƒΡŽ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ. ΠŸΠΎΠ½ΡΡ‚ΡŒ минусы ΠΈ ΠΏΠ»ΡŽΡΡ‹ ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°.
ΠšΡ€ΠΎΡΡΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅Π½Π½Π°Ρ вёрстка β€” ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ выглядСл Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΠ΄ Windows, Linux ΠΈ Mac, Π½ΠΎ ΠΈ ΠΏΠΎΠ΄ SmartTV ΠΈΠ»ΠΈ PS.
ΠšΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½Π°Ρ вёрстка β€” ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρƒ Ρ€Π΅Π½Π΄Π΅Ρ€Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ Π·Π°ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈΡ… ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ. Π‘Π°ΠΉΡ‚ CanIUse ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² этом.
Мобильная вёрстка β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. ΠŸΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ ограничСния нСсут Π² сСбС ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π»ΠΈΠΌΠΈΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ пространство Π³Ρ€Π°ΠΌΠΎΡ‚Π½ΠΎ.
ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. Π Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² Β«Ρ†Π΅Π½Π΅Β» Ρ‚Π΅Ρ… ΠΈΠ»ΠΈ ΠΈΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΡ‘ΠΌΠΎΠ². ΠŸΠΎΠ½ΡΡ‚ΡŒ, ΠΈΠ· ΠΊΠ°ΠΊΠΈΡ… Ρ„Π°Π· состоит ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ сайта ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ.
Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ, связанныС с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ, кСшСм, сТатиСм, объСдинСниСм рСсурсов ΠΈ Ρ‚.ΠΏ.
ΠžΡ‚Ρ€ΠΈΡΠΎΠ²ΠΊΠ° β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ, связанныС со ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒΡŽ Ρ€Π΅Π½Π΄Π΅Ρ€Π° послС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.
SEO β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. Π₯отя Π±Ρ‹ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Ρ‹ поисковых систСм. Π£ΠΌΠ΅Π½ΠΈΠ΅ Β«ΠΏΠΎΠΌΠΎΡ‡ΡŒΒ» поисковой систСмС Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, ΠΊΡƒΠ΄Π° ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈ Ρ‡Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ.
Π¨Π°Π±Π»ΠΎΠ½ΠΈΠ·Π°Ρ‚ΠΎΡ€Ρ‹ β€” Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄, Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²Π°Ρ‚ΡŒ страницы. ΠžΡ‡Π΅Π½ΡŒ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊ сСрвСрный Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³, Ρ‚Π°ΠΊ ΠΈ клиСнтский. Бюда ΠΆΠ΅ входят ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Π½Π° «чистом» языкС (Ρ‚ΠΈΠΏΠ° простых PHP вставок). Π Π°Π±ΠΎΡ‚Π° Β«Π΄ΠΎΒ» (dataflow) ΡˆΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°Ρ‚ΠΎΡ€Π° нас Π½Π΅ интСрСсуСт.
PHP β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. Π Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² Π±Π°Π·ΠΎΠ²ΠΎΠΌ синтаксисС ΠΈ ΡƒΠΌΠ΅Ρ‚ΡŒ внСсти ΠΌΠ΅Π»ΠΊΠΈΠ΅ ΠΏΡ€Π°Π²ΠΊΠΈ, связанныС с ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ страницы.
CMS β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. Π£Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ CMS ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΈ для Ρ‡Π΅Π³ΠΎ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ созданы. ΠΠ°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΠΏΠΈΡΠ°Ρ‚ΡŒ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ хотя Π±Ρ‹ для ΠΎΠ΄Π½ΠΎΠΉ (Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ WordPress).
Javascript β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. Π˜Π·ΡƒΡ‡ΠΈΡ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ синтаксис, ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ Π²Π΅ΡˆΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠ΅ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΈ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ с DOM.
jQuery β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. ΠΠ°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ ΠΊΡƒΡ‡Ρƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ довольно Ρ‚ΠΈΠΏΠΎΠ²Ρ‹Ρ… Π·Π°Π΄Π°Ρ‡ с использованиСм ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для самой популярной js Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ (послС vanilla.js, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ).
NodeJS β€” ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚Π»ΠΎΠΆΠΈΡ‚ΡŒ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅. Π Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊ Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΉ сСрвСр, Ρ€Π°Π·Π΄Π°Π²Π°Ρ‚ΡŒ статику ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΡ‚ΡŒ Π½Π° сторонС сСрвСра. МоТно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Express ΠΈΠ»ΠΈ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ.
Π‘Π±ΠΎΡ€ΠΊΠ° β€” ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ. ΠΠ°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΠ· ΠΊΡƒΡ‡ΠΈ CSS / HTML Ρ„Π°ΠΉΠ»ΠΎΠ² Π² Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ хотя Π±Ρ‹ с grunt ΠΈ gulp, ΠΊΠ°ΠΊ прСдставитСлями Β«Ρ€Π°Π·Π½Ρ‹Ρ…Β» Π»Π°Π³Π΅Ρ€Π΅ΠΉ.
IDE β€” ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ. Π˜Π·ΡƒΡ‡ΠΈΡ‚ΡŒ, Π·Π°Ρ‡Π΅ΠΌ Π½ΡƒΠΆΠ½Ρ‹ IDE ΠΈ ΠΊΠ°ΠΊ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° использованиС ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ IDE для экономии Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. Π’Π°ΠΆΠ½ΠΎ: ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ IDE сравнимо с ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΌ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ΠΌ языка программирования, ΠΈ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π½ΠΈΠ΅ большого количСства Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π² это ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅ ΠΎΠΏΡ€Π°Π²Π΄Π°Ρ‚ΡŒΡΡ. Π›ΠΈΡ‡Π½ΠΎ я ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡΡŒ тСкстовыми Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ (ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для ΠΎΠΎΠΎΡ‡Π΅Π½ΡŒ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽ IDE).
Branching β€” Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π²Π΅Ρ‚ΠΊΠ°ΠΌΠΈ Π² git.
Merge β€” Π½Π°ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ ΡΠ»ΠΈΠ²Π°Ρ‚ΡŒ Π²Π΅Ρ‚ΠΊΠΈ с Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΠΎΠ².
Fetch / Rebase β€” Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, Π·Π°Ρ‡Π΅ΠΌ ΠΎΠ½ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ, ΠΈ Π½Π°Ρ‡Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΠΎ нСобходимости.
ГрафичСскиС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ β€” Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ Π±Ρ‹Π²Π°ΡŽΡ‚, для Ρ‡Π΅Π³ΠΎ. Π§Π΅ΠΌ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΡ‚ растровых. Π’Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ хотя Π±Ρ‹ Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ «чтСния» ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. Π’Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚, Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ†Π²Π΅Ρ‚ ΠΈ Ρ‚.ΠΏ. Π§Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ Π½Π° Π³Π»Π°Π·, Π° Ρ‚ΠΎΡ‡Π½ΠΎ. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΏΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ с 1 растровым (Photoshop) ΠΈ 1 Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹ΠΌ (Figma).
50 Ρ€Π°Π±ΠΎΡ‚ β€” ΠΊ ΠΊΠΎΠ½Ρ†Ρƒ этапа Ρƒ вас порядка 50 Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ€Π°Π±ΠΎΡ‚, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΡ… Π½Π°Π²Ρ‹ΠΊΠΈ ΠΈΠ· ΠΈΠ·ΡƒΡ‡Π΅Π½Π½Ρ‹Ρ… областСй.


Senior

Π₯ΠΎΡ‚ΡŒ Π½Π° схСмС ΠΈ каТСтся малСнькой эта Π³Ρ€ΡƒΠΏΠΏΠ°, Π½ΠΎ фактичСски ΠΎΠ½Π° самая большая. Π’.ΠΊ. ΠΊ этому ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ всё Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΡ‚ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π»ΠΎΡΡŒ.
Адаптивная / ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Π°Ρ вёрстка β€” Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² Π²Ρ‹ΡΡˆΠ΅ΠΉ ступСни ΠΈ ΡΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ Π΄ΠΎ этого знания. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²Π΅Π·Π΄Π΅ ΠΈ Π½Π° всём (Π² Ρ€Π°ΠΌΠΊΠ°Ρ… Ρ€Π°Π·ΡƒΠΌΠ½ΠΎΠ³ΠΎ).
ΠŸΠΎΡΡ‚Π΅ΠΏΠ΅Π½Π½Π°Ρ дСградация / ΠŸΡ€ΠΎΠ³Ρ€Π΅ΡΡΠΈΠ²Π½ΠΎΠ΅ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΠ΅ β€” ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ это ΠΈ Π·Π°Ρ‡Π΅ΠΌ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ.
Gitflow β€” ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²Π΅Ρ‚ΠΊΠΈ, ΠΊΡƒΠ΄Π° ΠΈΡ… Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ, ΡƒΠΌΠ΅Ρ‚ΡŒ провСсти ΠΊΠΎΠ΄ Ρ€Π΅Π²ΡŒΡŽ (вёрстки, само собой, Π½Π΅ ΠΊΠΎΠ΄Π°).
Π‘Π­Πœ β€” ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ. Π Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π΅ΠΉ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π±Π΅Π·Π»ΠΈΠΌΠΈΡ‚Π½ΠΎ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ минимальной синхронизации Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΠΈ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°. Π•ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Π΄Π°ΡŽΡ‰ΠΈΠ΅ Π½Π΅ Ρ…ΡƒΠ΄ΡˆΠΈΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚. К этому ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρƒ ΠΎ Π½ΠΈΡ… Π²Ρ‹ Ρ‚Π°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π·Π½Π°Ρ‚ΡŒ ΠΈ смоТСтС, ΠΏΡ€ΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ, ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ.
100 Ρ€Π°Π±ΠΎΡ‚ β€” ΠΈΠΌΠ΅Ρ‚ΡŒ суммарно ΡΠΎΡ‚Π½ΡŽ Ρ€Π°Π±ΠΎΡ‚, Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΡ… Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ Π½Π°Π²Ρ‹ΠΊΠΈ. На самом Π΄Π΅Π»Π΅, это всё условно. МоТно ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ Ρ€Π°Π±ΠΎΡ‚Ρƒ (ΡΠΎΡΡ‚ΠΎΡΡ‰ΡƒΡŽ ΠΈΠ· Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… частСй) Π² ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, которая ΡƒΠΆΠ΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΡΡ‚Ρ€Π°ΡˆΠ½ΠΎ.


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

ЀактичСски ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· этих Ρ‚Π΅ΠΌ нСбольшиС. Однако Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΊΡƒΡ‡Ρƒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ„Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² Π² Π³ΠΎΠ»ΠΎΠ²Π΅ ΠΎΡ‡Π΅Π½ΡŒ слоТно. Π—Π° 15 Π»Π΅Ρ‚ я общался ΠΌΠ΅Π½Π΅Π΅ Ρ‡Π΅ΠΌ с Π΄Π΅ΡΡΡ‚ΡŒΡŽ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°ΠΌΠΈ (Π΄Π° ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ программистами), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… отнёс Π±Ρ‹ ΠΊ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ Senior (Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ², программистов Ρ…ΠΎΡ€ΠΎΡˆΠΈΡ… Π±Ρ‹Π»ΠΎ сильно большС).

Навскидку – Π½Π° ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΡƒΡ‡Π΅Π½ΠΈΠ΅ ΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΡƒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ вёрстки с нуля Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Ρ‚Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π³ΠΎΠ΄ (ΠΈ Π±ΠΎΠ»Π΅Π΅, Ссли ΡƒΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ Π² ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²).

НадСюсь, Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ находится Π² Π½Π°Ρ‡Π°Π»Π΅ ΠΏΡƒΡ‚ΠΈ, схСма подскаТСт, ΠΊΡƒΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ Π΅Ρ‰Ρ‘ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ, ΠΈ Ρ‡Ρ‚ΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ сразу (Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒ Π² Π½Π΅Π³ΠΎ) Π±Π΅ΠΆΠ°Ρ‚ΡŒ Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

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


upd
Много сообщСний ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ Π±Π΅Π· знания Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Π½Π΅ Π½ΡƒΠΆΠ΅Π½. Π’ основном это ΠΏΠΈΡˆΡƒΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π² ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…. И, для Π½ΠΈΡ…, это Π²ΠΏΠΎΠ»Π½Π΅ Ρ‚Π°ΠΊ. Но Π΅ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΌΠ½ΠΎΠ³ΠΎ студий Π΄Π΅Π»Π°ΡŽΡ‰ΠΈΡ… Π»Π΅Π½Π΄ΠΈΠ½Π³ΠΈ, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ для вордпрСсов ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… CMS. Π­Ρ‚ΠΎ Π²ΠΏΠΎΠ»Π½Π΅ сСбС Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Ρ€Ρ‹Π½ΠΎΠΊ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π·Π°Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ. Π•ΡΡ‚ΡŒ довольно ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², с Π³ΠΎΡ€Π°Π·Π΄ΠΎ мСньшими трСбованиями, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ способСн Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π½Π° ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ.

ВСрстка сайта ΠΈΠ· PSD ΠΌΠ°ΠΊΠ΅Ρ‚Π°

Π’ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ я наглядно ΠΏΠΎΠΊΠ°Π·Π°Π», ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ сайта Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ Photoshop, ΠΈ Π² ΠΈΡ‚ΠΎΠ³Π΅ получился простой, Π½ΠΎ Π½Π΅ Ρ€Π΅ΠΆΡƒΡ‰ΠΈΠΉ Π³Π»Π°Π· шаблон.

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ, ΠΊΠ°ΠΊ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈΠ· PSD-ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Π³ΠΎΡ‚ΠΎΠ²ΡƒΡŽ Π²Π΅Π±-страницу, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ инструмСнты HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈ каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй (CSS).

Π’ΠΎΠΎΠ±Ρ‰Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² ΠΊ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΠ΅ шаблонов сущСствуСт мноТСство: ΠΊΡ‚ΠΎ-Ρ‚ΠΎ сначала досконально прорисовываСт шаблон ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎΡ‚ΠΎΠΌ занимаСтся вёрсткой, ΠΊΡ‚ΠΎ-Ρ‚ΠΎ отрисовываСт Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡ€ΠΈΠ±Π»ΠΈΠ·ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, добавляя ΡˆΡ‚Ρ€ΠΈΡ…ΠΈ Π²ΠΎ врСмя вёрстки; ΠΎΠ΄Π½ΠΈ сначала Ρ€ΠΈΡΡƒΡŽΡ‚, Π·Π°Ρ‚Π΅ΠΌ Π·Π°Π½ΠΈΠΌΠ°ΡŽΡ‚ΡΡ Π½Π°Ρ€Π΅Π·ΠΊΠΎΠΉ, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ (ΠΊΠ°ΠΊ ΠΌΡ‹ Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅) ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ графичСскиС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ нСпосрСдствСнно Π² процСссС создания Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Π”Π°ΠΆΠ΅ инструмСнты вёрстки ΠΈ рисования Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ свои: ΠΎΠ΄Π½ΠΈ ставят ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ…, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ стандартный Π½Π°Π±ΠΎΡ€ возмоТностСй ΠΈ Π²Π΅Ρ€ΡΡ‚Π°ΡŽΡ‚ Π² простом рСдакторС… Π² ΠΎΠ±Ρ‰Π΅ΠΌ, Π½ΠΈΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½ всСго лишь ΠΎΠ΄ΠΈΠ½ способ ΠΈΠ· ΠΌΠ½ΠΎΠ³ΠΈΡ….

ΠŸΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ этап

Π˜Ρ‚Π°ΠΊ, создайтС Π³Π΄Π΅ ΡƒΠ³ΠΎΠ΄Π½ΠΎ (Ρ…ΠΎΡ‚ΡŒ Π½Π° Π Π°Π±ΠΎΡ‡Π΅ΠΌ столС, Ρ…ΠΎΡ‚ΡŒ Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅) Ρ„Π°ΠΉΠ» index.html. Π’ этот ΠΆΠ΅ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΈΡŽ images. Она Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ всС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π² шаблонС ΠΈ Π½Π° страницС. Π’Π°ΠΊ ΠΊΠ°ΠΊ графичСскиС элСмСнты ΠΌΡ‹ Π²Ρ‹Ρ€Π΅Π·Π°Π»ΠΈ Π·Π°Π±Π»Π°Π³ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, сразу скопируСм ΠΈΡ… Π² ΠΏΠ°ΠΏΠΊΡƒ images ΠΈ Π΄Π°Π΄ΠΈΠΌ Ρ‚Π°ΠΊΠΈΠ΅ названия:

  • back_all β€” ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠ° сайта.
  • header_top β€” Ρ„ΠΎΠ½ шапки.
  • big_pic β€” Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ.
  • title β€” Ρ„ΠΎΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
  • footer β€” Π·Π°Π»ΠΈΠ²ΠΊΠ° Π½ΠΈΠ·Π° сайта.
  • 1mini β€” ΠΏΠ΅Ρ€Π²ΠΎΠ΅ Ρ„ΠΎΡ‚ΠΎ для основной части страницы.
  • 2mini β€” Π²Ρ‚ΠΎΡ€ΠΎΠ΅ Ρ„ΠΎΡ‚ΠΎ.

Π’ ΠΏΠ°ΠΏΠΊΠ΅ со страницСй index.html создайтС Ρ„Π°ΠΉΠ» styles.css β€” Π² Π½Ρ‘ΠΌ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй шаблона.

Π‘Π»ΠΎΠΊΠ½ΠΎΡ‚ для рСдактирования ΠΊΠΎΠ΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ рСкомСндуСтся. Π“ΠΎΡ€Π°Π·Π΄ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ для этой Ρ†Π΅Π»ΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ Notepad++. Π­Ρ‚ΠΎ ΠΏΠΎΠ΄ΡΠ²Π΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰Π°Ρ синтаксис Ρ€Π°Π·Π½Ρ‹Ρ… языков (HTML ΠΈ CSS β€” Π² Ρ‚ΠΎΠΌ числС) ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΡƒΠ΄ΠΎΠ±Π½Π΅ΠΉ, Ρ‡Π΅ΠΌ Π² простых Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… тСкстовых Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ².

Π”Π΅Π»ΠΈΠΌ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ Π½Π° Π±Π»ΠΎΠΊΠΈ

ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ index.html ΠΈ Π²ΠΏΠΈΡˆΠΈΡ‚Π΅ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Π¨Π°Π±Π»ΠΎΠ½ сайта</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link href="styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
</body>
</html>

Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚Π΅ Ρ„Π°ΠΉΠ». ВсС эти Ρ‚Π΅Π³ΠΈ ΠΌΡ‹ ΡƒΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΠΈΠ·ΡƒΡ‡ΠΈΠ»ΠΈ ΠΈ Π² пояснСнии ΠΎΠ½ΠΈ Π½Π΅ Π½ΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ. Кодом Π²Ρ‹ΡˆΠ΅ ΠΌΡ‹ создали основу HTML-страницы, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Ρ‘ Π½Π° Π±Π»ΠΎΠΊΠΈ β€” ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ структуру Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, Ρ‡Ρ‚ΠΎ Π·Π° Ρ‡Π΅ΠΌ Π² Π½Ρ‘ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ΄Ρ‚ΠΈ.

Π‘Π»ΠΎΠΊΠΎΠ² Ρƒ нас 7, пСрСчислим ΠΈΡ… ΠΏΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ (Π·Π½Π°Ρ‡Π΅Π½ΠΈΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° id):

1. content β€” Π±Π»ΠΎΠΊ, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ Ρ…Ρ€Π°Π½ΠΈΡ‚ΡŒΡΡ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ.

2. header β€” Π±Π»ΠΎΠΊ шапки, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±ΡƒΠ΄ΡƒΡ‚:

2.1. menu β€” вСрхняя навигация.

2.2. logo β€” ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с тСкстом.

3. right β€” основная Ρ‡Π°ΡΡ‚ΡŒ страницы.

4. left

β€” панСль слСва.

5. footer β€” Π½ΠΈΠ· сайта.

Π’Π°ΠΊ ΠΈ запишСм (Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ <body> Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄):

<div>
<!-- Π¨Π°ΠΏΠΊΠ° -->
	<div>
	  <div>
	  </div>
	  <div>
	  </div>
	</div>
<!-- ΠšΠΎΠ½Π΅Ρ† шапки -->
<!-- Основной блок -->
	<div>
	</div>
<!-- ΠšΠΎΠ½Π΅Ρ† основного Π±Π»ΠΎΠΊΠ° -->
<!-- ЛСвая панСль -->
	<div>
	<div>
<!-- ΠšΠΎΠ½Π΅Ρ† Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ -->
<!-- Ноги сайта -->
	<div>
	</div>
<!-- ΠšΠΎΠ½Π΅Ρ† -->
</div>

Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ страница Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ пустой, Π½ΠΎ структуру Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΎΠ½Π° Π³ΠΎΡ‚ΠΎΠ²Π°.

УстанавливаСм Π±Π°Π·ΠΎΠ²ΠΎΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Ρ‘ΠΌ ΠΊ CSS-ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π΄Π°Ρ‚ΡŒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρƒ Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅.

ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ style.css ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ‚ΡƒΠ΄Π° строки ΠΊΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ встрСтитС Π½ΠΈΠΆΠ΅.

Π£Π±ΠΈΡ€Π°Π΅ΠΌ отступы ΠΈ поля Π½Π° страницС ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ:

*
{
margin: 0px;
padding: 0px;
}

УстанавливаСм Ρ†Π²Π΅Ρ‚Π° ссылок Π² зависимости ΠΎΡ‚ повСдСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (Π½Π°Π²Ρ‘Π» курсор, Π½Π΅ Π½Π°Π²Ρ‘Π», посСтил) ΠΈ ΡƒΠ±ΠΈΡ€Π°Π΅ΠΌ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρƒ ссылок, Π½Π°Π΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ находится ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ:

a:link {
	color: #D72020;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

a:visited {
	color: #D72020;
}

НастраиваСм основноС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ страницы: прописываСм Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΡƒ (ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π·Π°Π΄Π°Ρ‘ΠΌ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅), устанавливаСм Ρ†Π²Π΅Ρ‚, ΡΡ‚ΠΈΠ»ΡŒ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°:

body {
	background: #FFD723 url(images/back_all.jpg) repeat-x;
	font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
	color: #333333;
}

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° content:

#content {
	margin: 0 auto;
	background: #ffffff;
	width: 786px;
	text-align: left;
}

Π’ΠΎΡ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ страницу. Она Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π° рисунком-ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠΎΠΉ. Пока СдинствСнноС Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, Π·Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ свойство

background класса body.

ΠžΡ„ΠΎΡ€ΠΌΠ»ΡΠ΅ΠΌ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню

Начало Π΅ΡΡ‚ΡŒ, ΠΈ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊ вёрсткС ΡƒΠΆΠ΅ нСпосрСдствСнно основных Π±Π»ΠΎΠΊΠΎΠ².

Начнём, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, с шапки. ΠšΠΎΡ‚ΠΎΡ€Π°Ρ, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, состоит ΠΈΠ· Π±Π»ΠΎΠΊΠΎΠ² Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ мСню ΠΈ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°.

Π‘Π½Π°Ρ‡Π°Π»Π° Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΎΠ±Ρ‰Π΅Π΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΎΠ±ΠΎΠΈΡ… элСмСнтов шапки: Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Π±Π΅Π»Ρ‹ΠΉ Ρ„ΠΎΠ½ ΠΈ высоту 306px:

#header {
	background: #ffffff;
	height: 306px;
	text-align: left;		
}

Π’Π°ΠΊ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ своСго Ρ€ΠΎΠ΄Π° пространство шапки: Π±Π΅Π»Ρ‹ΠΉ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π΅Ρ‘ элСмСнты.

Π›ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ прямо сСйчас Π·Π°Π½ΡΡ‚ΡŒΡΡ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ мСню. Π’Π°ΠΊ ΠΌΡ‹ ΠΈ поступим, Π½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€Π΅ΠΆΠ΄Π΅, Ρ‡Π΅ΠΌ Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Π΅Π³ΠΎ Π² HTML, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° CSS, ΠΈΠ½Π°Ρ‡Π΅ ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΡΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ это Π±ΡƒΠ΄Π΅Ρ‚ уТасно.

ВнСсём ΠΏΠ΅Ρ€Π²Ρ‹Π΅ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹: Π·Π°Π΄Π°Π΄ΠΈΠΌ Π»Π΅Π²ΡƒΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ Π² 2 пиксСля Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½ΠΎΠΉ, ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту нашСго мСню, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΠΉΡΡ ΠΏΠΎ оси X Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ рисунок:

#menu
{
border-left: 2px solid #ffffff;
width: 779px;
height: 80px;
background: url(images/header_top. gif) repeat-x;
}

Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° Π² ΠΎΠ±ΠΎΠ·Ρ€Π΅Π²Π°Ρ‚Π΅Π»Π΅ Ρ‚ΡƒΡ‚ ΠΆΠ΅ прСобразится ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈ само мСню Π² Ρ„Π°ΠΉΠ» index.html:

<table>
		<tr>
			<td><a href="#"  title="">Главная</a></td>
			<td><a href="#"  title="">ГалСрСя</a></td>
			<td><a href="#"  title="">Π”ΠΎΠ³ΠΎΠ²ΠΎΡ€</a></td>
			<td><a href="#"  title="">ΠŸΡ€Π°ΠΉΡ</a></td>
			<td><a href="#"  title="">ΠžΠ±Ρ€Π°Π·Ρ†Ρ‹</a></td>
			<td><a href="#"  title="">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a></td>
		</tr>
		</table>

Обновив страницу ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ появилось.

Волько Π²ΠΎΡ‚ Π²ΠΈΠ΄ ссылок оставляСт ΠΆΠ΅Π»Π°Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ. Установим для Π½ΠΈΡ… свои ΠΏΡ€Π°Π²ΠΈΠ»Π° (Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Ρ†Π²Π΅Ρ‚, ΠΆΠΈΡ€Π½ΠΎΡΡ‚ΡŒ ΠΈ Ρ‚. Π΄.), Π° ссылкам ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π·Π°Π΄Π°Π΄ΠΈΠΌ смСну Ρ†Π²Π΅Ρ‚Π° ΠΈ Π²Π΅Ρ€Π½Ρ‘ΠΌ ΡƒΠ±Ρ€Π°Π½Π½ΠΎΠ΅ ΠΏΠΎ всСму ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ ΠΏΠΎΠ΄Ρ‡Ρ‘Ρ€ΠΊΠΈΠ²Π°Π½ΠΈΠ΅:

#menu a {
	float: left;
	width: 99px;
	height: 46px;
display: block;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-weight: bold;
	font-size: 14px;
	padding-top: 35px;
}

#menu a:hover {
	color: #D72020;
	text-decoration: underline;
}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ мСню ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ с PSD-шаблоном.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ мСняСтся ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΡƒΠ½ΠΊΡ‚Π°, Ссли подвСсти ΠΊ Π½Π΅ΠΌΡƒ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ (Π·Π° это ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‚ ΠΏΡ€Π°Π²ΠΈΠ»Π° #menu a:hover).

НастраиваСм Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Ρƒ нас ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΈ Π»Π΅ΠΆΠΈΡ‚ Π² ΠΏΠ°ΠΏΠΊΠ΅, остаётся Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° страницу ΠΈ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌΠΈ. И Ρ‚ΠΎ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ срСдствами CSS, Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΈ Π½Π΅ ΠΏΡ€Π΅ΠΌΠΈΠ½Π΅ΠΌ Π·Π°Π½ΡΡ‚ΡŒΡΡ.

#logo {
background: #ffffff url(images/big_pic.jpg) no-repeat;
width: 738px;
height: 146px;
text-align: left;
padding-top: 80px;
padding-left: 40px;
border-left: 4px solid #ffffff;
}

Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ вставлСн Ρ€ΠΎΠ²Π½ΠΎ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ.

ЕдинствСнноС, Ρ‡Π΅Π³ΠΎ Π΅ΠΌΡƒ Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚, Ρ‚Π°ΠΊ это тСкста. Вставим Π½Π΅Π΄ΠΎΡΡ‚Π°ΡŽΡ‰Π΅Π΅ Π² Π±Π»ΠΎΠΊ logo Ρ„Π°ΠΉΠ»Π° index.html, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ:

  <div>
		<h2><a href="#">Имя сайта</a></h2>
		<h3><a href="β„–">Π‘Π»ΠΎΠ³Π°Π½ сайта</a></h3>
	  </div>

ВСкст появился, Π½ΠΎ Π΅Π³ΠΎ Ρ‚ΠΎΠΆΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ.

Π˜ΡΡ…ΠΎΠ΄Ρ ΠΈΠ· Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ ΠΏΠΎΡ‡Ρ‚ΠΈ всСгда Π±Ρ‹Π²Π°Π΅Ρ‚ ссылкой, Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ классам.

#logo a {
	text-decoration: none;
	text-transform: lowercase;
	font-style: italic;
	font-size: 36px;
	color: #FFFFFF;
}
#logo h3 a
{
font-size: 24px;
}

ΠŸΠΎΡΡΠ½ΡΡ‚ΡŒ здСсь Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ, со всСми свойствами Π²Ρ‹ Π·Π½Π°ΠΊΠΎΠΌΡ‹ Π΅Ρ‰Ρ‘ ΠΈΠ· ΡƒΡ€ΠΎΠΊΠΎΠ² CSS. Однако внСшний Π²ΠΈΠ΄ тСкста измСнился, ΠΈ Π² Ρ†Π΅Π»ΠΎΠΌ шапка Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ выглядит Π΄Π°ΠΆΠ΅ Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ Π½Π° PSD-ΠΌΠ°ΠΊΠ΅Ρ‚Π΅.

ВСрстаСм ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ страницы

Π”Π°Π»Π΅Π΅ настраиваСм самый большой Π±Π»ΠΎΠΊ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Ρ‘Π½ вСсь ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Он Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ 500px ΠΈ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π² ΠΏΡ€Π°Π²ΠΎΠΉ части сайта. Установим ΠΏΡ€Π°Π²ΠΈΠ»Π° позиционирования, оформлСния Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Π°Π±Π·Π°Ρ†Π΅Π² ΠΈ ссылок (ΠΎΠ±ΠΎ всСх свойствах ΠΌΡ‹ ΡƒΠΆΠ΅ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Π² ΡΡ‚Π°Ρ‚ΡŒΡΡ… ΠΏΠΎ CSS).

#right
{
float: right;
width: 500px;
padding-right: 10px;
}

#right h5
{
	margin: 0;
	padding: 0px;
	font-size: 12px;
	color: #D72020;
}

#right a
{
color: #D72020;
text-decoration: none;
}

#right p {
	margin: 0;
	padding: 0;
	padding-bottom: 10px;
}

#right h3 {
	margin: 0;
	padding: 0;
	padding-top: 10px;
	color: #D72020;
}

Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ‹ зафиксировали Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±Π»ΠΎΠΊΠ°, Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒΡΡ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° ΠΌΡ‹ Π½Π΅ Π½Π°ΠΏΠΎΠ»Π½ΠΈΠΌ Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ β€” высота страницы Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ содСрТимого.

Π—Π°ΠΏΠΎΠ»Π½ΠΈΠΌ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ right. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ помСстим Π² ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ.

<h3>ГалСрСя</h3><br />
		<h3>ΠšΡƒΡ…Π½ΠΈ</h3><br />
		<table cellspacing = 40>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		<tr>
		<td><img src="images/1mini.jpg" alt = "1"></td>
		<td><img src="images/2mini.jpg" alt = "2"></td>
		</tr>
		</table>

ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ» Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, Π½ΠΎ Π΅ΠΌΡƒ явно Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ Π±Π΅Π»ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°, ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ появится Π΅Ρ‰Ρ‘ Π½Π΅ скоро.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ

Π’ΠΎ врСмя вёрстки, Π½ΠΎ ΡƒΠΆΠ΅ послС отрисовки ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π²Ρ‹ΡΡΠ½ΠΈΠ»ΠΎΡΡŒ, Ρ‡Ρ‚ΠΎ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ мСню Π΅Ρ‰Ρ‘ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΏΡƒΠ½ΠΊΡ‚Ρ‹, ΠΏΡ€ΠΈΡ‡Ρ‘ΠΌ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π³Π»Π°Π²Π½Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ ΠΈ ΠΈΡΡ‡Π΅Π·Π°Ρ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° указатСля Π½Π° Π½Ρ‘ΠΌ Π½Π΅Ρ‚.

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

Π’ Ρ„Π°ΠΉΠ» CSS Π²ΠΏΠΈΡˆΠΈΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄.

#left
{
	padding: 10px;
	width: 237px;
	padding-right: 1em;
}

#left h4
{
width: 225px;
height: 25px;
font-size: 14px;
font-weight: bold;
padding-left: 15px;
padding-top: 15px;
text-transform: uppercase;
color: #ffffff;
background: url(images/title.gif) no-repeat
}

#left ul {
	margin: 0;
	padding: 10px;
	list-style: none;
	width: 100px;
	font-size: 18px;
}

#left li ul {
	position: absolute;
	left: 90px;
	top: 0;
	display: none;
}

#left ul li {
	position: relative;
	margin-bottom:20px;
} 

#left ul li a {
	display: block;
	text-decoration: none;
	color: #ffffcc;
	background: #ff9900;
	padding: 5px;
	border: 1px solid gold;
	border-bottom: 0;
} 

#left li:hover ul {
	display: block;
}

#left li li {
	margin-bottom:0px;
	width: 150px;
}

#left p
{
padding: 10px;
border-bottom: 1px solid #D72020;
border-left: 1px solid #D72020;
border-right: 1px solid #D72020;
}

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΡ€Π°Π²ΠΈΠ»Π° классов ul ΠΈ li β€” сСкрСт исчСзновСния мСню находится Ρ‚Π°ΠΌ, раскройтС Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ.

Π’ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ left HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π΄ΠΎΠ±Π°Π²ΠΈΠΌ сначала ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π±Π΅Π· мСню.

<h4>Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ</h4>
	<p>ΠœΡ‹ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌ Π’Π°ΠΌ ΠΏΡ€Π°Π·Π΄Π½ΠΈΡ‡Π½Ρ‹Π΅ скидки. <a href="http://test1.ru/news.php">Π”Π°Π»Π΅Π΅...</a></p><br />
	<h4>МСню</h4>

Π‘Π΅Π»Ρ‹ΠΉ Ρ„ΠΎΠ½ распространился Π΅Ρ‰Ρ‘ Π½ΠΈΠΆΠ΅ ΠΏΠΎ страницС.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ самоС врСмя Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² HTML-Ρ„Π°ΠΉΠ» ΠΊΠΎΠ΄ мСню Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. Оно, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ списками, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Π΅Ρ‰Ρ‘ ΠΈΠ· CSS-ΠΏΡ€Π°Π²ΠΈΠ».

<ul>
			<li><a href="#">ГалСрСя</a>
					<ul>
						<li><a href="#">ΠšΡƒΡ…Π½ΠΈ</a></li>
						<li><a href="#">ΠšΡ€ΠΎΠ²Π°Ρ‚ΠΈ</a></li>
						<li><a href="#">Π‘Ρ‚Π΅Π½ΠΊΠΈ</a></li>
						<li><a href="#">ΠŸΡ€ΠΈΡ…ΠΎΠΆΠΈΠ΅</a></li>
						<li><a href="#">Π¨ΠΊΠ°Ρ„Ρ‹-ΠΊΡƒΠΏΠ΅</a></li>
						<li><a href="#">ΠšΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹Π΅ столы</a></li>
					</ul>
				</li>
				<li><a href="#">Π”ΠΎΠ³ΠΎΠ²ΠΎΡ€</a></li>
				<li><a href="#">ΠŸΡ€Π°ΠΉΡ</a>
					<ul>
						<li><a href="#">ΠšΡƒΡ…Π½ΠΈ</a></li>
						<li><a href="#">ΠšΡ€ΠΎΠ²Π°Ρ‚ΠΈ</a></li>
						<li><a href="#">Π‘Ρ‚Π΅Π½ΠΊΠΈ</a></li>
						<li><a href="#">ΠŸΡ€ΠΈΡ…ΠΎΠΆΠΈΠ΅</a></li>
						<li><a href="#">Π¨ΠΊΠ°Ρ„Ρ‹-ΠΊΡƒΠΏΠ΅</a></li>
						<li><a href="#">ΠšΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½Ρ‹Π΅ столы</a></li>
					</ul>
				</li>
				<li><a href="#">ΠžΠ±Ρ€Π°Π·Ρ†Ρ‹</a>
					<ul>
						<li><a href="#">Π‘Ρ‚Π΅ΠΊΠ»ΠΎ</a></li>
						<li><a href="#">Π”Π‘ΠŸ</a></li>
						<li><a href="#">Π€ΡƒΡ€Π½ΠΈΡ‚ΡƒΡ€Π°</a></li>
						<li><a href="#">И Ρ‚.Π΄.</a></li>
					</ul>
				</li>
				<li><a href="#">ΠšΠΎΠ½Ρ‚Π°ΠΊΡ‚Ρ‹</a>
				<li><a href="#">Π’Π°ΠΆΠ½ΠΎ</a>
			</li>
		</ul>

ВзглянитС, ΠΊΠ°ΠΊ смотрится список. МногиС ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ это Ρ‚Π°Π±Π»ΠΈΡ†Π°.

ПодмСню Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, Π½Π°Π΄ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ подвСсти ΠΌΡ‹ΡˆΠΊΡƒ ΠΊ ΠΏΡƒΠ½ΠΊΡ‚Ρƒ, Π΅Π³ΠΎ содСрТащСму (Ρƒ нас это ГалСрСя, ΠŸΡ€Π°ΠΉΡ ΠΈ ΠžΠ±Ρ€Π°Π·Ρ†Ρ‹).

Π”Π΅Π»Π°Π΅ΠΌ Π½ΠΎΠ³ΠΈ

Π—Π°Π²Π΅Ρ€ΡˆΠ°ΡŽΡ‰Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ шаблона β€” Ρ„ΡƒΡ‚Π΅Ρ€. ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅, ΠΈΠ· элСмСнтов Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Π±Π·Π°Ρ†Ρ‹ ΠΈ ссылки.

#footer {
	height: 44px;
	clear: both;
	padding-top: 20px;
	background: url(images/footer.gif) repeat-x;
	border-top: 5px solid #A6640E;
}

#footer p {
	margin: 0;
	font-size: 10px;
	text-align: center;
	color: #ffffff;
}

#footer a {
	color: #ffffff;
}

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ Π² Ρ„ΡƒΡ‚Π΅Ρ€Π΅ размСщаСтся Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ информация, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅Ρ‘ Π² HTML-ΠΊΠΎΠ΄ (ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ footer).

<p>Copyright Β© 2016. <a href="http://test1.ru/" title="АдрСс сайта">АдрСс сайта</a> | <a href="#">Π‘Π»ΠΎΠ³Π°Π½ сайта</a></p>
	<p>+7-(777)-777-77-77 | <a href="#">Москва</a></p>

На этом ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ сайта Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΎ. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π·Π°ΠΊΠΎΠ½Ρ‡Π΅Π½Π½Ρ‹ΠΉ, Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΉ ΠΊ использованию шаблон, части ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ вынСсти Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ PHP-Ρ„Π°ΠΉΠ»Ρ‹, сдСлав ΠΈΠ· статичСской страницы Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π΅ΡΠΊΡƒΡŽ.

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ²ΡˆΠΈΠΉΡΡ ΠΊΠΎΠ΄ здСсь ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄Ρƒ β€” Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ вСсь шаблон.

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ссылки:

ΠžΡΠ½ΠΎΠ²Ρ‹ CSS ΠΈ HTML. Блочная вСрстка

Π­Ρ‚ΠΎΡ‚ ΡƒΡ€ΠΎΠΊ рСкомСндуСтся Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΠΎΡΠ²Π°ΠΈΠ²Π°Ρ‚ΡŒ прСмудрости создания сайтов. Π’ Π½Π΅ΠΌ Π΄Π°Π½Ρ‹ основныС понятия ΠΎ HTML ΠΈ CSS. Пошагово выполняя инструкции Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡƒΡ€ΠΎΠΊΠ°, Π²Ρ‹ ΡƒΠΆΠ΅ Ρ‡Π΅Ρ€Π΅Π· нСсколько ΠΌΠΈΠ½ΡƒΡ‚ свСрстаСтС шаблон для своСго сайта.

Π¨Π°Π±Π»ΠΎΠ½ вСбсайта ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Ρ‚Π΅Π³ – Β«DIVΒ».

Π¨Π°Π³ 1 – Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π²Π΅Π± страницы с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² HTML

ΠŸΡ€Π΅ΠΆΠ΄Π΅ всСго Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Π½Π°ΡˆΡƒ Π²Π΅Π± страницу ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ HTML Ρ‚Π΅Π³ΠΈ. Волько послС этого ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΊ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΡŽ сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ каскадных Ρ‚Π°Π±Π»ΠΈΡ† стиля CSS.

HTML β€” это язык Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ гипСртСкста. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ создаСтся структура Π²Π΅Π± страницы. Для этих Ρ†Π΅Π»Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ‚Π΅Π³ΠΈ HTML. Они Π·Π°ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ Π² скобки Β«<Β» ΠΈ Β«>Β».

Π’Π΅Π³ΠΈ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ Π² ΠΏΠ°Ρ€Π΅ β€” ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ ΠΈ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ. ПослСдний отличаСтся Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ послС ΠΏΠ΅Ρ€Π²ΠΎΠΉ скобки Π·Π½Π°ΠΊ Β«/Β». (НапримСр: <div></div>). Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³ΠΎΠ² Π²Ρ‹ опрСдСляСтС, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π½Π° вашСй Π²Π΅Π± страницС.

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

ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠ΅ Ρ‚Π΅Π³ΠΈ Π²Π΅Π± страницы это:

Β 

<html>

<head>

Β 

<title></title>

Β 

</head>

Β 

<body>

Β 

</body>
</html>

Β 

Β 

ВпослСдствии, ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ <body> Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π΅Π³ΠΈ для Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ элСмСнтов Π²Π΅Π± страницы.Β  Π’Π°ΠΆΠ½Ρ‹ΠΌ Ρ‚Π΅Π³ΠΎΠΌ для структурирования страницы являСтся Ρ‚Π΅Π³ <div>. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π΅Π³ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄Π΅Π»ΠΈΡ‚ΡŒ свою страницу Π½Π° Π±Π»ΠΎΠΊΠΈ.

Π’Π½ΡƒΡ‚Ρ€ΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° Π²Ρ‹ смоТСтС Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ HTML Ρ‚Π΅Π³ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ для создания содСрТимого вашСго сайта (ссылки, тСкст, изобраТСния ΠΈ Ρ‚Π΄.). ВсС эти элСмСнты впослСдствии ΠΎΠ±Ρ€Π΅Ρ‚ΡƒΡ‚ свой ΡΡ‚ΠΈΠ»ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ каскадных Ρ‚Π°Π±Π»ΠΈΡ† стиля CSS.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ графичСский Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ (Photoshop Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€) нарисуСм Π±Π»ΠΎΠΊΠΈ нашСй Π²Π΅Π± страницы:

Код HTML этой страницы Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ использования Ρ‚Π΅Π³Π° div:

Β 

<html>

<head>

Β 

<title></title>

Β 

</head>

Β 

<body>

Β 

<div id=Β»containerΒ»>

<div id=Β»headerΒ»>

Β 

</div>

Β 

<div id=Β»navigationΒ»>

Β 

</div>

Β 

<div id=Β»menuΒ»>

Β 

</div>

Β 

<div id=Β»contentΒ»>

Β 

</div>

Β 

<div id=Β»footerΒ»>

Β 

</div>

</div>

Β 

</body>

</html>

Β 

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ Ρ‚Π΅Π³Ρƒ div ΠΌΡ‹ Π΄Π°Π»ΠΈ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ сСлСктор ID. Π’ΠΎ Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌΡƒ Π±Π»ΠΎΠΊΡƒ нашСй страницы ΠΌΡ‹ Π΄Π°Π»ΠΈ своС Π½Π°Π·Π²Π°Π½ΠΈΠ΅. Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ·ΠΆΠ΅, задавая ΡΡ‚ΠΈΠ»ΡŒ Π±Π»ΠΎΠΊΠ°ΠΌ Π² Ρ„Π°ΠΉΠ»Π΅ CSS, ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ.

БущСствуСт Π΄Π²Π° Π²ΠΈΠ΄Π° сСлСкторов. ID β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ², Ρ‚Π°ΠΊΠΈΡ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ большС Π½ΠΈΠ³Π΄Π΅ Π½Π° страницС Π½Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‚ΡΡ. Π’ Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ сСлСктор CLASS β€” примСнятся для обозначСния ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΡ…ΡΡ Π±Π»ΠΎΠΊΠΎΠ².

Π’Π°ΠΊΠΆΠ΅, ΠΌΡ‹ Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΠ»ΠΈ всС Π±Π»ΠΎΠΊΠΈ Π²Π½ΡƒΡ‚Ρ€ΡŒ Π±Π»ΠΎΠΊΠ° Β«containerΒ«. Π­Ρ‚ΠΎ сдСлано для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ впослСдствии ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π°ΡˆΡƒ страницу Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ.

Π¨Π°Π³ 2 β€” ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½ΠΈΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй CSS

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

Если Π²Ρ‹ ΡƒΠΆΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π»ΠΈ свою Π²Π΅Π± страницу Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‚ΠΎ Π½ΠΈΡ‡Π΅Π³ΠΎ Ρ‚Π°ΠΌ Π½Π΅ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ»ΠΈ. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ Π½Π°ΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ свои Π±Π»ΠΎΠΊΠΈ Π½ΠΈ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ содСрТимым, Π½ΠΈ ΠΏΡ€ΠΈΠ΄Π°Π»ΠΈ ΠΈΠΌ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΈ Ρ†Π²Π΅Ρ‚Π°. ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚ для Π±Π»ΠΎΠΊΠΎΠ² Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌΠΈ Ρ‚Π΅Π³Π°ΠΌΠΈ. А Π²ΠΎΡ‚ Ρ„ΠΎΡ€ΠΌΡƒ, располоТСниС Ρ†Π²Π΅Ρ‚ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ внСшниС проявлСния Π±Π»ΠΎΠΊΠΎΠ² ΠΌΡ‹ Π·Π°Π΄Π°Π΄ΠΈΠΌ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„Π°ΠΉΠ»Π° CSS.

Но для Π½Π°Ρ‡Π°Π»Π° Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΅Π³ΠΎ. НазовСм Π΅Π³ΠΎ style.css ΠΈ размСстим Π² Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ html. ПослС этого Π² html Ρ„Π°ΠΉΠ»Π΅, ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ строчку:

Β 

<link rel=Β»stylesheetΒ» type=Β»text/cssΒ» href=Β»style.cssΒ» />

Β 

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΡ‹ связываСм эти Π΄Π²Π° Ρ„Π°ΠΉΠ»Π° вмСстС. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΈ Π²Π΅Π± страницы Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ„Π°ΠΉΠ» стилСй.

Π¨Π°Π³ 3 β€” Π·Π°Π΄Π°Π΅ΠΌ ΡΡ‚ΠΈΠ»ΡŒ

Бинтаксис CSS состоит ΠΈΠ· сСлСктора, свойства ΠΈ значСния. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ β€” это Ρ‚Π΅Π³, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ придавая Π΅ΠΌΡƒ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Π΅ свойства. Бвойство задаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ значСния.

Для записи сСлСкторов, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚Π΅Π³Π° body, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Π·Π½Π°ΠΊΠΈ Β«#Β» Π»ΠΈΠ±ΠΎ Β«.Β«. ΠΎΠ½ΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ ΠΏΠ΅Ρ€Π΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ сСлСктора. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ примСняСтся, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π° сСлСктор ID, Π²Ρ‚ΠΎΡ€ΠΎΠΉ, соотвСтствСнно Π½Π° сСлктор CLASS. Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ любоС количСство свойств. ΠšΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π·Π°ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ Π² Ρ„ΠΈΠ³ΡƒΡ€Π½Ρ‹Π΅ скобки Β«{}Β«.

Β 

#selector {

Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

Β 

Β Β Β Β Β Β Β Β Β Β Β  }

Β 

Π»ΠΈΠ±ΠΎ

Β 

.selector {

Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  property:value;

Β 

Β Β Β Β Β Β Β Β Β Β Β  }

Β 

Β 

Π£ нас ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ сСлСкторы:

body
container
header
navigation
menu
content
footer

Β 

Бвойства ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Π΅ значСния CSS:

Β 

Π€ΠΎΠ½ (background) ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π΄Π°Π½ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Π»ΠΈΠ±ΠΎ ΠΈ Ρ‚Π΅ΠΌ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΠ»ΠΎΡΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΏΡƒΡ‚ΡŒ ΠΊ Π½Π΅ΠΌΡƒ. Если Ρ„ΠΎΠ½ Π·Π°Π΄Π°Π½ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΡˆΠ΅ΡΡ‚Π½Π°Π΄Ρ†Π°Ρ‚Π΅Ρ€ΠΈΡ‡Π½Π°Ρ систСма (#ffffff для Π±Π΅Π»ΠΎΠ³ΠΎ Ρ†Π²Π΅Ρ‚Π° ΠΈ Ρ‚Π΄.).

Бвойство color ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния Ρ†Π²Π΅Ρ‚Π° тСкста.


font-family

β€” это свойство опрСдСляСт сСмСйство ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ тСкст. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ задаСтся сразу Ρ‚Ρ€ΠΈ Ρ‚ΠΈΠΏΠ° ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ². ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ссли Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ смог ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ, Π΅ΠΌΡƒ Π΅ΡΡ‚ΡŒ ΠΈΠ· Ρ‡Π΅Π³ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ (Trebuchet MS, Arial, Times New Roman).

font-size β€” Ρ€Π°Π·ΠΌΠ΅Ρ€ тСкста, задаСтся Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… систСмах измСрСния, здСсь ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ пиксСли.

Β 

margin β€” опрСдСляСт мСстополоТСниС Π±Π»ΠΎΠΊΠ°. Π—Π° Ρ‚ΠΎΡ‡ΠΊΡƒ отсчСта ΠΏΡ€ΠΈ этом ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‚Π°ΠΊ ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов Π²Π΅Π± страницы. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ свою страницы посрСдинС ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Ρ‚ΠΎ запишСм Ρ‚Π°ΠΊΠΈΠ΅ значСния для Π΄Π°Π½Π½ΠΎΠ³ΠΎ свойства: 0px auto 0px auto. Π—Π°ΠΏΠΈΡΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‰Π΅ 0px auto. ΠžΡ‚ΡΡ‡Π΅Ρ‚ Π² случаС задания Π΄Π°Π½Π½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ ΠΈΠ΄Π΅Ρ‚ ΠΏΠΎ часовой стрСлкС: Π²Π΅Ρ€Ρ… β€” ΠΏΡ€Π°Π²ΠΎ- Π½ΠΈΠ· β€” Π»Π΅Π²ΠΎ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π²Π΅Ρ€Ρ… β€” Π½ΠΈΠ·, ΠΏΡ€Π°Π²ΠΎ β€” Π»Π΅Π²ΠΎ Ρƒ нас ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚, Ρ‚ΠΎ Π΄ΡƒΠ±Π»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π½Π΅Ρ‚ потрСбности.

Β 

width β€” ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ°.

Β 

height β€” высота.

Β 

float β€” свойство, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт Π½Π°ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты сСлСктора, Π³Π»Π°Π²Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΏΠΎ Π»Π΅Π²ΡƒΡŽ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΏΡ€Π°Π²ΡƒΡŽ сторону.

Β 

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠΎΠ΄ Π² наш Ρ„Π°ΠΉΠ» стилСй style.css (вСдь Π²Ρ‹ Π΅Π³ΠΎ ΡƒΠΆΠ΅ создали, Π΄Π°?):

body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}

#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}

#header {
background: #838283;
height: 200px;
width: 900px;
}

#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}

#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}

#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}

#footer {
background: #838283;
height: 180px;
width: 900px;
}

Β 

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

На ΠΌΠΎΠΌΠ΅Π½Ρ‚ написания ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½Π΅ всС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈ ΡΠΎΠ·Π΄Π°Π½Π½ΡƒΡŽ Π²Π΅Π± страницу. Для устранСния этого нСдостатка ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ слСдуСт Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ сразу Π·Π° Π±Π»ΠΎΠΊΠΎΠΌ content.

Π’ΠΎΡ‚ Π΅Π³ΠΎ ΠΊΠΎΠ΄ HTML:

Β 

<div id=Β»clearΒ»>

</div>

Β 

И CSS:

Β 

#clear {
clear:both;
}

Β 

А ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ head Π·Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊΡƒΡŽ ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ, Ссли Π²Ρ‹ Π²Π΄Ρ€ΡƒΠ³ ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ русский тСкст Π² свои Π±Π»ΠΎΠΊΠΈ:

Β 

<meta http-equiv=Β»Content-TypeΒ» content=Β»text/html; charset=utf-8β€³ />

Β 

Π€ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄ HTML:

Β 

<html>

<head>

<meta http-equiv=Β»Content-TypeΒ» content=Β»text/html; charset=utf-8β€³ />

Β Β Β Β Β Β Β Β Β Β Β  <title>ΠžΡΠ½ΠΎΠ²Ρ‹ HTML ΠΈ CSS</title>

<link rel=Β»stylesheetΒ» type=Β»text/cssΒ» href=Β»style.cssΒ» />

</head>

Β 

<body>

Β 

Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»containerΒ»>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»headerΒ»>Π¨Π°ΠΏΠΊΠ° сайта

Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»navigationΒ»>Π‘Π»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ

Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

Β 

                        <div id=»menu»>МСню

Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»contentΒ»>ΠšΠΎΠ½Ρ‚Π΅Π½Ρ‚

Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»clearΒ»>

Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  <div id=Β»footerΒ»>Подвал сайта

Β 

Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β  </div>

Β Β Β Β Β Β Β Β Β Β Β  </div>

Β 

</body>

</html>

Β 

Β 

CSS:

Β 

body {

Β Β Β Β Β Β Β Β Β Β Β  background: #f3f2f3;

Β Β Β Β Β Β Β Β Β Β Β  color: #000000;

Β Β Β Β Β Β Β Β Β Β Β  font-family: Trebuchet MS, Arial, Times New Roman;

Β Β Β Β Β Β Β Β Β Β Β  font-size: 12px;

}

Β 

#container {

Β Β Β Β Β Β Β Β Β Β Β  background: #FFFFFF;

Β Β Β Β Β Β Β Β Β Β Β  margin: 30px auto;

Β Β Β Β Β Β Β Β Β Β Β  width: 900px;

Β Β Β Β Β Β Β Β Β Β Β  height: 1000px;

}

Β 

#header {

Β Β Β Β Β Β Β Β Β Β Β  background: #838283;

Β Β Β Β Β Β Β Β Β Β Β  height: 200px;

Β Β Β Β Β Β Β Β Β Β Β  width: 900px;

}

Β 

#navigation {

Β Β Β Β Β Β Β Β Β Β Β  background: #a2a2a2;

Β Β Β Β Β Β Β Β Β Β Β  width: 900px;

Β Β Β Β Β Β Β Β Β Β Β  height: 20px;

}

Β 

#menu {

Β Β Β Β Β Β Β Β Β Β Β  background: #333333;

Β Β Β Β Β Β Β Β Β Β Β  float: left;

Β Β Β Β Β Β Β Β Β Β Β  width: 200px;

Β Β Β Β Β Β Β Β Β Β Β  height: 600px;

}

Β 

#content {

Β Β Β Β Β Β Β Β Β Β Β  background: #d2d0d2;

Β Β Β Β Β Β Β Β Β Β Β  float: right;

Β 

Β Β Β Β Β Β Β Β Β Β Β  width: 700px;

Β Β Β Β Β Β Β Β Β Β Β  height: 600px;

}

Β 

#clear {

Β Β Β Β Β Β Β Β Β Β Β  clear:both;

}

Β 

#footer {

Β Β Β Β Β Β Β Β Β Β Β  background: #838283;

Β Β Β Β Β Β Β Β Β Β Β  height: 180px;

Β Β Β Β Β Β Β Β Β Β Β  width: 900px;

}

Β 

НадССмся, Π΄Π°Π½Π½Ρ‹ΠΉ ΡƒΡ€ΠΎΠΊ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ» Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ основы Ρ€Π°Π±ΠΎΡ‚Ρ‹ с HTML ΠΈ CSS.

Π’ΠΎΡ‚ ΠΊΠ°ΠΊ это выглядит Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:

Β 

Блочная вСрстка сайта css, фиксированный ΠΈ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½

ЦСль ΡƒΡ€ΠΎΠΊΠ°: Знакомство с Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрсткой CSS. ΠŸΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠ΅ Π½Π°Π²Ρ‹ΠΊΠΎΠ² использования Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вСрстки сайта

Блочная вСрстка сайта

  • ΠŸΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ со слоями ΠΈΠ»ΠΈ, ΠΈΠ½Π°Ρ‡Π΅ говоря, Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΈ элСмСнтами div, основная Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠ° лоТится Π½Π° CSS, Ρ‚.ΠΊ. Π±Π΅Π· свойств слои ΠΈΠ· сСбя практичСски Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚.
  • К соТалСнию Π΄ΠΎ сих ΠΏΠΎΡ€ сущСствуСт ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с ΠΊΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. Π’.Π΅. ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ свойства Π΄Π°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Для Π±ΠΎΡ€ΡŒΠ±Ρ‹ с Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ Ρ…Π°ΠΊΠΈ. Π₯Π°ΠΊ β€” это Π½Π°Π±ΠΎΡ€ ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ², ΠΊΠΎΠ³Π΄Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌ подаСтся ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ понимаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ этим Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ игнорируСтся.

ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‡Π΅Ρ€Ρ‚Ρ‹ ΠΎΡ‚ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ вСрстки

Допустим, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ шаблон страницы с «шапкой», Β«ΠΏΠΎΠ΄Π²Π°Π»ΠΎΠΌΒ» ΠΈ двумя ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ.
ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ:

  1. Высота слоСв div ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π° высотой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°:
  2. Вабличная вСрсткаБлочная вСрстка
  3. Π’ случаС, ΠΊΠΎΠ³Π΄Π° содСрТимоС слоя ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ Π΅Π³ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²Π»Π΅Π½Π½ΡƒΡŽ высоту, Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π²Π΅Π΄ΡƒΡ‚ сСбя β€” ΠΎΠ΄Π½ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ высоту слоя ΠΏΠΎΠ΄ Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅, оставляя высоту ΠΏΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ, Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΏΠΎΠ²Π΅Ρ€Ρ… слоя.

Ѐиксированный Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ»ΠΈ
ТСсткая блочная вСрстка (Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ)

  • Ѐиксированный ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ использованиС слоСв Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹, которая опрСдСляСтся Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.
  • Π’Π°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ популярным срСди ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ сСти являСтся Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π° 1024Γ—768, Ρ‚ΠΎ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° Π½Π΅Π³ΠΎ. ΠžΠ±Ρ‰Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠΎΠ² Π² Ρ‚Π°ΠΊΠΎΠΌ случаС составляСт 900–1000 пиксСлСй (нСбольшая Ρ‡Π°ΡΡ‚ΡŒ пиксСлСй трСбуСтся Π½Π° полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°).
  • Основной Π±Π»ΠΎΠΊ с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ размСщаСтся ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Ρ‚ΠΎΠ³Π΄Π° «свободныС» поля ΠΏΠΎ краям Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ смотрятся Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ большом Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°.

Рис.1. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ фиксированного Π΄ΠΈΠ·Π°ΠΉΠ½Π°

  • ΠžΠ±Ρ‰Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ, Ρ‡Ρ‚ΠΎ называСтся Β«Π½Π° Π³Π»Π°Π·Β», ΠΈΠ»ΠΈ послС сбора ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… свСдСний.
  • ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ фиксированный Π΄ΠΈΠ·Π°ΠΉΠ½ сайта Π½Π° основС прСдставлСнного Π²Ρ‹ΡˆΠ΅ изобраТСния

    Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅:

    • Β«Π Π°Π·Π±ΠΈΠ²Π°Π΅ΠΌΒ» всС основныС элСмСнты страницы Π½Π° Π±Π»ΠΎΠΊΠΈ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:
      • Π±Π»ΠΎΠΊ 1 β€” слой ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ (id="shapka"),
      • Π±Π»ΠΎΠΊ 2 ΠΈ 3 Π·Π°ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ΡΡ Π² Π΅Π΄ΠΈΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ (id="container"),
      • Π±Π»ΠΎΠΊ 2 β€” слой с мСню (id="menu"),
      • Π±Π»ΠΎΠΊ 3 β€” слой с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ (id="content"),
      • Π±Π»ΠΎΠΊ 4 β€” слой с id="bottom".

    Π‘Ρ…Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°Π·ΠΈΠΌ располоТСниС Π±Π»ΠΎΠΊΠΎΠ²:

    <body>
    <div>1</div>
    <div>
    	<div>2</div>
    	<div>3</div>
    </div>
    <div>4</div>
    </body>

    <body> <div>1</div> <div> <div>2</div> <div>3</div> </div> <div>4</div> </body>

    1. Π—Π°Π΄Π°Π΅ΠΌ свойства «шапки» (Π±Π»ΠΎΠΊ 1)

    1. Π»ΠΈΠ±ΠΎ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ Π·Π°Π΄Π°Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойству height Π² пиксСлях, ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… ΠΈΠ»ΠΈ Π΄Ρ€. Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ…;
    2. Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, для Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ слоя «шапки»:

    3. Π»ΠΈΠ±ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ высоту ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ отступа
    4. Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

        padding-top: 15px; 
        padding-bottom: 15px;

      padding-top: 15px; padding-bottom: 15px;

    Π’Π΅ΡΡŒ ΠΊΠΎΠ΄ для шапки:

    #shapka{
      text-align: left; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ */
      width: 750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ общая ΡˆΠΈΡ€ΠΈΠ½Π°*/
      background: #900000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
      height: 50px; /* Высота Π±Π»ΠΎΠΊΠ° */
      margin-right: auto; /* Авто-отступ справа */
      margin-left: auto; /* Авто-отступ слСва */
      padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */
     }

    #shapka{ text-align: left; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ */ width: 750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ общая ΡˆΠΈΡ€ΠΈΠ½Π°*/ background: #900000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ height: 50px; /* Высота Π±Π»ΠΎΠΊΠ° */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слСва */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ }

    2. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ свойства ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°

    3. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ свойства для Π±Π»ΠΎΠΊΠ° 2 β€” мСню

    4. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ свойства для Π±Π»ΠΎΠΊΠ° 3 β€” ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

    • Π—Π°Π΄Π°Π΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ слоя ΠΈΠ· расчСта 770px β€” 200px = 570px, Но! Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ‹ установили Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы Π² ΠΎΠ±ΠΎΠΈΡ… Π±Π»ΠΎΠΊΠ°Ρ… 2 ΠΈ 3, Ρ‚ΠΎ ΠΌΡ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Ρ‡Π΅ΡΡ‚ΡŒ Π΅Ρ‰Π΅ 40 пиксСлСй: 20 β€” Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы Π±Π»ΠΎΠΊΠ° с мСню ΠΈ 20 β€” Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ отступы Π±Π»ΠΎΠΊΠ° с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ слоя 770px β€” 200px β€” 40px = 530px
    • Π—Π°Π΄Π°Π΅ΠΌ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ float: left, ΠΈΡΠΊΠ»ΡŽΡ‡Π°Ρ Π±Π°Π³ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Internet Explorer: Ссли Π½Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ свойство, Ρ‚ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ слоями Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π·ΠΎΡ€. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Ссли Π½Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ это свойство, Ρ‚ΠΎ Π±Π»ΠΎΠΊ окаТСтся Π·Π° Π±Π»ΠΎΠΊΠΎΠΌ мСню, ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ лишь Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ (тСкст) Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ Π±Π»ΠΎΠΊ мСню справа.
    • Π—Π°Π΄Π°Π΅ΠΌ Ρ†Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° (background) ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля (padding)
    • #content { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ 
          width: 550px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ 
          float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ 
          padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ 
          background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */  
         }

      #content { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ width: 550px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */ }

    5. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ свойства для Π±Π»ΠΎΠΊΠ° 4 β€” Β«ΠΏΠΎΠ΄Π²Π°Π»Β»

    • Π¨ΠΈΡ€ΠΈΠ½Ρƒ слоя устанавливаСм Π² 750 пиксСлСй
    • Для этого Π±Π»ΠΎΠΊΠ° Π½Π°Π΄ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅, Ρ‚.Π΅. ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ свойство clear
    • УстанавливаСм Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля padding
    • Π—Π°Π΄Π°Π΅ΠΌ Ρ†Π²Π΅Ρ‚ для Ρ„ΠΎΠ½Π° (background) ΠΈ тСкста (color)
    • Π¦Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅ΠΌ Π±Π»ΠΎΠΊ (margin-right ΠΈ margin-left)
    • #bottom{
      	width:750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */
      	clear:left; /* Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ Π±Π»ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ ΠΈ располагаСм слой слСва */
      	padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */
              background:#444; /* Ρ„ΠΎΠ½ */
      	color:#fff; /* Ρ†Π²Π΅Ρ‚ тСкста */
              margin-right: auto; /* Авто-отступ справа */
              margin-left: auto; /* Авто-отступ слСва */
      }

      #bottom{ width:750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ clear:left; /* Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ Π±Π»ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ ΠΈ располагаСм слой слСва */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ background:#444; /* Ρ„ΠΎΠ½ */ color:#fff; /* Ρ†Π²Π΅Ρ‚ тСкста */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слСва */ }

    Π˜Ρ‚ΠΎΠ³ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ΄: всё вмСстС

    /* для блока 1 - шапка */
    #shapka{
      text-align: left; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ */
      width: 750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ общая ΡˆΠΈΡ€ΠΈΠ½Π°*/
      background: #900000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
      height: 50px; /* Высота Π±Π»ΠΎΠΊΠ° */
      margin-right: auto; /* Авто-отступ справа */
      margin-left: auto; /* Авто-отступ слСва */
      padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */
    }
    /* для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */
    #container {
      width: 770px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π°+20px */
      margin-right: auto; /* Авто-отступ справа */
      margin-left: auto; /* Авто-отступ слСва */
     }
    /* для блока 2 - мСню */
    #menu {
      width: 200px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ 
      float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ 
      color: white; /* Π¦Π²Π΅Ρ‚ тСкста */
      background: #008080; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */
      padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */
     }
    /* для Π±Π»ΠΎΠΊΠ° 3 - ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ */
    #content { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ 
        width: 530px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ 
        float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ 
        padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ 
        background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */  
       } 
    /* для блока 4 - подвал */
    #bottom{
    	width:750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ 
    	clear:left; /* Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ Π±Π»ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ ΠΈ располагаСм слой слСва */
    	padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */
    	background:#444;
    	color:#fff;
    	margin-right: auto; /* Авто-отступ справа */
        margin-left: auto; /* Авто-отступ слСва */
    }

    /* для Π±Π»ΠΎΠΊΠ° 1 — шапка */ #shapka{ text-align: left; /* Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ */ width: 750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ общая ΡˆΠΈΡ€ΠΈΠ½Π°*/ background: #900000; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ height: 50px; /* Высота Π±Π»ΠΎΠΊΠ° */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слСва */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ } /* для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° */ #container { width: 770px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π°+20px */ margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слСва */ } /* для Π±Π»ΠΎΠΊΠ° 2 — мСню */ #menu { width: 200px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ color: white; /* Π¦Π²Π΅Ρ‚ тСкста */ background: #008080; /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ } /* для Π±Π»ΠΎΠΊΠ° 3 — ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ */ #content { /* ΠŸΡ€Π°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ width: 530px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ float: left; /* ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ с сосСдним слоСм */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ background: #e0e0e0; /* Π¦Π²Π΅Ρ‚ Π·Π°Π΄Π½Π΅Π³ΠΎ Ρ„ΠΎΠ½Π° */ } /* для Π±Π»ΠΎΠΊΠ° 4 — ΠΏΠΎΠ΄Π²Π°Π» */ #bottom{ width:750px; /* Π¨ΠΈΡ€ΠΈΠ½Π° слоя */ clear:left; /* Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅ΠΌ Π±Π»ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒ ΠΈ располагаСм слой слСва */ padding: 10px; /* Π’Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля Π²ΠΎΠΊΡ€ΡƒΠ³ содСрТимого */ background:#444; color:#fff; margin-right: auto; /* Авто-отступ справа */ margin-left: auto; /* Авто-отступ слСва */ }

    </style>
    </head> 
    <body>
    <div>1</div>
    <div>
    	<div>2</div>
    	<div>3</div>
    </div>
    <div>4</div>
    </body>

    </style> </head> <body> <div>1</div> <div> <div>2</div> <div>3</div> </div> <div>4</div> </body>

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

    Рис.2. ЖСсткая блочная вСрстка ΠΈΠ· Π΄Π²ΡƒΡ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ

    Ѐиксированный Π΄ΠΈΠ·Π°ΠΉΠ½ для Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ

    ΠŸΡ€ΠΈ фиксированном Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ для ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄Π²Π° основных ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° построСния ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки:

    1. ИспользованиС свойства float для располоТСния ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ рядом.
    2. ИспользованиС Π½Π°Π±ΠΎΡ€Π° Ρ‚Π΅Ρ… CSS свойств, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для позиционирования слоСв.

    Рассмотрим ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ случай.

    ИспользованиС свойства float для ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Ρ‚Ρ€ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

    На рис. 3 β€” Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ использования свойства float для Ρ‚Ρ€Π΅Ρ…ΠΊΠΎΠ»ΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°. На самом Π΄Π΅Π»Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ 6 слоСв β€” ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ для самих ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.

    Рис. 3. Ѐиксированный Π΄ΠΈΠ·Π°ΠΉΠ½ Π² Ρ‚Ρ€ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-страницу с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π½ΡƒΡŽ Π½Π° рис. 3. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ фиксированного Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ макСтирования

    Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅:

    1. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ структуры html-ΠΊΠΎΠ΄Π°

    • ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠΌ для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Ρ‚Ρ€ΠΈ слоя (#header...) ΠΈ для ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Ρ‚Ρ€ΠΈ слоя (#col...).
    • Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ ΠΈΡ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ располоТСны Π½Π° Π΄Π²ΡƒΡ… Ρ€Π°Π·Π½Ρ‹Ρ… строках, Ρ‚ΠΎ объСдСним ΠΈΡ… Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹ (class="container").
    • ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠΌ схСматичноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ располоТСния Π±Π»ΠΎΠΊΠΎΠ²:

    ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ html-структуру:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    <body>
    <div>
        <div>Π•Π²Π³Π΅Π½ΠΈΠΉ Π•Π²Ρ‚ΡƒΡˆΠ΅Π½ΠΊΠΎ</div>
        <div>Π’Π°Π»Π΅Ρ€ΠΈΠΉ Π‘Ρ€ΡŽΡΠΎΠ²</div>
        <div>Π­Π΄ΡƒΠ°Ρ€Π΄ Асадов</div>
      </div>
      <div>
        <div>
    		МнС снится старый Π΄Ρ€ΡƒΠ³,<br/>ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стал Π²Ρ€Π°Π³ΠΎΠΌ,<br/>
    		Π½ΠΎ снится Π½Π΅ Π²Ρ€Π°Π³ΠΎΠΌ,<br/>Π° Ρ‚Π΅ΠΌ ΠΆΠ΅ самым Π΄Ρ€ΡƒΠ³ΠΎΠΌ.<br/>
    		Π‘ΠΎ мною Π½Π΅Ρ‚ Π΅Π³ΠΎ,<br/>Π½ΠΎ ΠΎΠ½ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΡ€ΡƒΠ³ΠΎΠΌ,<br/>
    		ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ‚<br/>ΠΎΡ‚ сновидСний ΠΊΡ€ΡƒΠ³ΠΎΠΌ.
    	</div>
        <div>
    	Π’Π΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡƒΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/>Π›ΠΈΡˆΡŒ ΠΈΠ·Π΄Π°Π»ΠΈ торТСствСнно ΠΎΠ½ΠΎ,<br/>
    	ΠœΡ‹ всС ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΠΌ ΠΏΡ€Π΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/>И Π²ΠΈΠ΄ΠΈΠΌ лишь случайноС Π·Π²Π΅Π½ΠΎ.
    	</div>
        <div>
    	Π’ Π»ΡŽΠ±Ρ‹Ρ… Π΄Π΅Π»Π°Ρ… ΠΏΡ€ΠΈ максимумС слоТностСй<br/>ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ всС-Ρ‚Π°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/>
    	Π–Π΅Π»Π°Π½ΡŒΠ΅ - это мноТСство возмоТностСй,<br/>А нСТСланьС - мноТСство ΠΏΡ€ΠΈΡ‡ΠΈΠ½.
    	</div>
      </div>
    </body>

    <body> <div> <div>Π•Π²Π³Π΅Π½ΠΈΠΉ Π•Π²Ρ‚ΡƒΡˆΠ΅Π½ΠΊΠΎ</div> <div>Π’Π°Π»Π΅Ρ€ΠΈΠΉ Π‘Ρ€ΡŽΡΠΎΠ²</div> <div>Π­Π΄ΡƒΠ°Ρ€Π΄ Асадов</div> </div> <div> <div> МнС снится старый Π΄Ρ€ΡƒΠ³,<br/>ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стал Π²Ρ€Π°Π³ΠΎΠΌ,<br/> Π½ΠΎ снится Π½Π΅ Π²Ρ€Π°Π³ΠΎΠΌ,<br/>Π° Ρ‚Π΅ΠΌ ΠΆΠ΅ самым Π΄Ρ€ΡƒΠ³ΠΎΠΌ.<br/> Π‘ΠΎ мною Π½Π΅Ρ‚ Π΅Π³ΠΎ,<br/>Π½ΠΎ ΠΎΠ½ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΡ€ΡƒΠ³ΠΎΠΌ,<br/> ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ‚<br/>ΠΎΡ‚ сновидСний ΠΊΡ€ΡƒΠ³ΠΎΠΌ. </div> <div> Π’Π΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡƒΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/>Π›ΠΈΡˆΡŒ ΠΈΠ·Π΄Π°Π»ΠΈ торТСствСнно ΠΎΠ½ΠΎ,<br/> ΠœΡ‹ всС ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΠΌ ΠΏΡ€Π΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/>И Π²ΠΈΠ΄ΠΈΠΌ лишь случайноС Π·Π²Π΅Π½ΠΎ. </div> <div> Π’ Π»ΡŽΠ±Ρ‹Ρ… Π΄Π΅Π»Π°Ρ… ΠΏΡ€ΠΈ максимумС слоТностСй<br/>ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ всС-Ρ‚Π°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/> Π–Π΅Π»Π°Π½ΡŒΠ΅ — это мноТСство возмоТностСй,<br/>А нСТСланьС — мноТСство ΠΏΡ€ΠΈΡ‡ΠΈΠ½. </div> </div> </body>

    2. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ стилСй для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² (сСлСктор header...) ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ (сСлСктор col...)

    • Π¨ΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² сдСлаСм Ρƒ всСх ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ 3, Π° срСдняя ΡˆΠΈΡ€ΠΈΠ½Π° страницы Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ 700-900 пиксСлСй, Ρ‚ΠΎ установим ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² 250 пиксСлСй.
    •  #header1, #header2, #header3, #col1, #col2, #col3 {
          width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */
      }

      #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ }

    • Π”ΠΎΠ±Π°Π²ΠΈΠΌ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ поля (отступы ΠΎΡ‚ содСрТимого тСкста) β€” padding ΠΈ внСшниС отступы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π·Π°Π·ΠΎΡ€ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ свойства Π·Π°Π΄Π°ΡŽΡ‚ΡΡ сразу для всС ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ, Π° сам вСсь ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π΅ цСнтрируСтся, Π° выравниваСтся ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, Ρ‚ΠΎ установим отступ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΎΠ΄Π½ΠΎΠΉ стороны β€” Π»Π΅Π²ΠΎΠΉ β€” Ρƒ всСх ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ (margin-left).
    •  #header1, #header2, #header3, #col1, #col2, #col3 {
          width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */
          padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
          margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */
         }

      #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */ }

    • Π”ΠΎΠ±Π°Π²ΠΈΠΌ Ρ‚Π°ΠΊΠΆΠ΅ внСшний отступ свСрху, обСспСчив Π·Π°Π·ΠΎΡ€ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ отступ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π° страницы (margin-top).
    •  #header1, #header2, #header3, #col1, #col2, #col3 {
          ...
          margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */
         }

      #header1, #header2, #header3, #col1, #col2, #col3 { … margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */ }

    • Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ div, Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΠΈΡΡŒ рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΈΠΌ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ β€” float.
    •  #header1, #header2, #header3, #col1, #col2, #col3 {
          ...
          float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
         }

      #header1, #header2, #header3, #col1, #col2, #col3 { … float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */ }

    • ДобавляСм Π³Ρ€Π°Π½ΠΈΡ†Ρƒ для Π±Π»ΠΎΠΊΠΎΠ² (border) ΠΈ ΠΈ Π·Π°Π΄Π°Π΅ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚Π° (font-family, font-weight, font-size, color).
    •  #header1, #header2, #header3, #col1, #col2, #col3 {
          ...
          border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */
          font-family: Verdana, Arial, sans-serif; /* НС сСрифный ΠΈΠ»ΠΈ Ρ€ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */
          font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
          font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
          color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
         }

      #header1, #header2, #header3, #col1, #col2, #col3 { … border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */ font-family: Verdana, Arial, sans-serif; /* НС сСрифный ΠΈΠ»ΠΈ Ρ€ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */ font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ }

      ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠΌ ΠΊΠΎΠ΄:

       #header1, #header2, #header3, #col1, #col2, #col3 {
          width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */
          padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
          margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */
          margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */
          float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
          border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */
          font-family: Verdana, Arial, sans-serif; /* НС сСрифный ΠΈΠ»ΠΈ Ρ€ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */
          font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
          font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
          color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
      }

      #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */ margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */ float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */ border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */ font-family: Verdana, Arial, sans-serif; /* НС сСрифный ΠΈΠ»ΠΈ Ρ€ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */ font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ }

    • Установим Π·Π°Π΄Π½ΠΈΠΉ Ρ„ΠΎΠ½ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сСлСктора.
    •    #header1 { background: #B38541; }
         #header2 { background: #008159; }
         #header3 { background: #006077; }
         #col1 { background: #EBE0C5; }
         #col2 { background: #BBE1C4; }
         #col3 { background: #ADD0D9; }

      #header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }

    Π‘ΠΌΠΎΡ‚Ρ€ΠΈΠΌ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

    Рис. 4. ΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΡ‡Π½Ρ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

    3. Π—Π°Π΄Π°Π½ΠΈΠ΅ стиля для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ²

     #col1, #col2, #col3 { 
        font-family: "Times New Roman", Times, serif; /* Π¨Ρ€ΠΈΡ„Ρ‚ сСрифный ΠΈΠ»ΠΈ с засСчками */
        font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
        font-weight: normal; /* ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */
        color: black; /* Π¦Π²Π΅Ρ‚ тСкста */
       }

    #col1, #col2, #col3 { font-family: «Times New Roman», Times, serif; /* Π¨Ρ€ΠΈΡ„Ρ‚ сСрифный ΠΈΠ»ΠΈ с засСчками */ font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ font-weight: normal; /* ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */ color: black; /* Π¦Π²Π΅Ρ‚ тСкста */ }

    Π˜Ρ‚ΠΎΠ³ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠ΄: всё вмСстС

    /* для ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΠΈΡ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² */
     #header1, #header2, #header3, #col1, #col2, #col3 { 
         width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */
        padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */
        margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */
        margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */
        float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */
        border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */
        font-family: Verdana, Arial, sans-serif; /* Π ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */
        font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
        font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
        color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */
       }
       /* для колонок */
       #col1, #col2, #col3 { 
        font-family: "Times New Roman", Times, serif; /* Π¨Ρ€ΠΈΡ„Ρ‚ с засСчками */
        font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */
        font-weight: normal; /* ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */
        color: black; /* Π¦Π²Π΅Ρ‚ тСкста */
       } 
    Β 
       /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ слоя */
       #header1 { background: #B38541; }
       #header2 { background: #008159; }
       #header3 { background: #006077; }
       #col1 { background: #EBE0C5; }
       #col2 { background: #BBE1C4; }
       #col3 { background: #ADD0D9; }
    Β 
       .container { 
         clear: both;  /* ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅Ρ‚ дСйствиС float */ 
       }

    /* для ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΠΈΡ… Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² */ #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* Поля Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста */ margin-left: 5px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ слСва */ margin-top: 2px; /* ΠžΡ‚ΡΡ‚ΡƒΠΏ свСрху */ float: left; /* Бостыковка ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ */ border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡ€ΡƒΠ³ слоя */ font-family: Verdana, Arial, sans-serif; /* Π ΡƒΠ±Π»Π΅Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ */ font-weight: bold; /* Π–ΠΈΡ€Π½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ color: white; /* Π¦Π²Π΅Ρ‚ тСкста Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ } /* для ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ #col1, #col2, #col3 { font-family: «Times New Roman», Times, serif; /* Π¨Ρ€ΠΈΡ„Ρ‚ с засСчками */ font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° */ font-weight: normal; /* ΠΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠ΅ Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ */ color: black; /* Π¦Π²Π΅Ρ‚ тСкста */ } /* Π¦Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ слоя */ #header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; } .container { clear: both; /* ΠžΡ‚ΠΌΠ΅Π½ΡΠ΅Ρ‚ дСйствиС float */ }

    </style>
    </head> 
    <body>
    <div>
        <div>Π•Π²Π³Π΅Π½ΠΈΠΉ Π•Π²Ρ‚ΡƒΡˆΠ΅Π½ΠΊΠΎ</div>
        <div>Π’Π°Π»Π΅Ρ€ΠΈΠΉ Π‘Ρ€ΡŽΡΠΎΠ²</div>
        <div>Π­Π΄ΡƒΠ°Ρ€Π΄ Асадов</div>
      </div>
      <div>
        <div>
    		МнС снится старый Π΄Ρ€ΡƒΠ³,<br/>
    		ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стал Π²Ρ€Π°Π³ΠΎΠΌ,<br/>
    		Π½ΠΎ снится Π½Π΅ Π²Ρ€Π°Π³ΠΎΠΌ,<br/>
    		Π° Ρ‚Π΅ΠΌ ΠΆΠ΅ самым Π΄Ρ€ΡƒΠ³ΠΎΠΌ.<br/>
    		Π‘ΠΎ мною Π½Π΅Ρ‚ Π΅Π³ΠΎ,<br/>
    		Π½ΠΎ ΠΎΠ½ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΡ€ΡƒΠ³ΠΎΠΌ,<br/>
    		ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ‚<br/>
    		ΠΎΡ‚ сновидСний ΠΊΡ€ΡƒΠ³ΠΎΠΌ.
    	</div>
        <div>
    	Π’Π΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡƒΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/>
    	Π›ΠΈΡˆΡŒ ΠΈΠ·Π΄Π°Π»ΠΈ торТСствСнно ΠΎΠ½ΠΎ,<br/>
    	ΠœΡ‹ всС ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΠΌ ΠΏΡ€Π΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/>
    	И Π²ΠΈΠ΄ΠΈΠΌ лишь случайноС Π·Π²Π΅Π½ΠΎ.
    	</div>
        <div>
    	Π’ Π»ΡŽΠ±Ρ‹Ρ… Π΄Π΅Π»Π°Ρ… ΠΏΡ€ΠΈ максимумС слоТностСй<br/>
    	ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ всС-Ρ‚Π°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/>
    	Π–Π΅Π»Π°Π½ΡŒΠ΅ - это мноТСство возмоТностСй,<br/>
    	А нСТСланьС - мноТСство ΠΏΡ€ΠΈΡ‡ΠΈΠ½.
    	</div>
      </div>
    </body>

    </style> </head> <body> <div> <div>Π•Π²Π³Π΅Π½ΠΈΠΉ Π•Π²Ρ‚ΡƒΡˆΠ΅Π½ΠΊΠΎ</div> <div>Π’Π°Π»Π΅Ρ€ΠΈΠΉ Π‘Ρ€ΡŽΡΠΎΠ²</div> <div>Π­Π΄ΡƒΠ°Ρ€Π΄ Асадов</div> </div> <div> <div> МнС снится старый Π΄Ρ€ΡƒΠ³,<br/> ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стал Π²Ρ€Π°Π³ΠΎΠΌ,<br/> Π½ΠΎ снится Π½Π΅ Π²Ρ€Π°Π³ΠΎΠΌ,<br/> Π° Ρ‚Π΅ΠΌ ΠΆΠ΅ самым Π΄Ρ€ΡƒΠ³ΠΎΠΌ.<br/> Π‘ΠΎ мною Π½Π΅Ρ‚ Π΅Π³ΠΎ,<br/> Π½ΠΎ ΠΎΠ½ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΡ€ΡƒΠ³ΠΎΠΌ,<br/> ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ‚<br/> ΠΎΡ‚ сновидСний ΠΊΡ€ΡƒΠ³ΠΎΠΌ. </div> <div> Π’Π΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡƒΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/> Π›ΠΈΡˆΡŒ ΠΈΠ·Π΄Π°Π»ΠΈ торТСствСнно ΠΎΠ½ΠΎ,<br/> ΠœΡ‹ всС ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΠΌ ΠΏΡ€Π΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/> И Π²ΠΈΠ΄ΠΈΠΌ лишь случайноС Π·Π²Π΅Π½ΠΎ. </div> <div> Π’ Π»ΡŽΠ±Ρ‹Ρ… Π΄Π΅Π»Π°Ρ… ΠΏΡ€ΠΈ максимумС слоТностСй<br/> ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ΅ всС-Ρ‚Π°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/> Π–Π΅Π»Π°Π½ΡŒΠ΅ — это мноТСство возмоТностСй,<br/> А нСТСланьС — мноТСство ΠΏΡ€ΠΈΡ‡ΠΈΠ½. </div> </div> </body>

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

    Рис. 5. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

    ИспользованиС позиционирования слоСв для ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Ρ‚Ρ€ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

    Π’ΠΎΠ·ΡŒΠΌΠ΅ΠΌ Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΌΠ°ΠΊΠ΅Ρ‚, состоящий ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Ρ€Π°Π·Π³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½Ρ‹Ρ… Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ (рис. 6).

    Рис. 6. ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ слоСв для ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² Ρ‚Ρ€ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ с Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»Π΅ΠΌ

    ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅Π±-страницу с ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠΌ ΠΈΠ· Ρ‚Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½Π½ΡƒΡŽ Π½Π° рис. 6. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ фиксированного макСтирования с ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ слоСв

    Π’Ρ‹ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅:

    1. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ структуры html-ΠΊΠΎΠ΄Π°

    • Для Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° достаточно ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‚Ρ€ΠΈ слоя div для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.

    ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ структура Π±ΡƒΠ΄Π΅Ρ‚ простой:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    
    <

    Вёрстка сайтов | htmlbook.ru

    HTML ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ задумывался ΠΊΠ°ΠΊ язык, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹ срСдства оформлСния, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Ρ†Π²Π΅Ρ‚, Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ€Π°ΠΌΠΊΠΈ ΠΈΠ»ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½Π½Ρ‹ΠΉ Π² ЕвропСйском институтС Ρ„ΠΈΠ·ΠΈΠΊΠΈ частиц (CERN), HTML Π±Ρ‹Π» ΠΈΠ³Ρ€ΡƒΡˆΠΊΠΎΠΉ ΡƒΡ‡Π΅Π½Ρ‹Ρ…, ΠΈΡ…, ΠΏΡ€Π΅ΠΆΠ΄Π΅ всСго, интСрСсовала Π»ΠΎΠ³ΠΈΠΊΠ° ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Π° Π½Π΅ Π΅Ρ‘ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ прСдставлСниС. Π’ΠΎΠ³Π΄Π° Π΅Ρ‰Ρ‘ Π½Π΅ сущСствовало понятия Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ вёрстки ΠΊΠ°ΠΊ Ρ‚Π°ΠΊΠΎΠ²ΠΎΠΉ, всС сайты ΠΏΠΎ своСму ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΡŽ Π±Ρ‹Π»ΠΈ практичСски ΠΎΠ΄Π½ΠΎΡ‚ΠΈΠΏΠ½Ρ‹ΠΌΠΈ, Π² стилС, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠΌ сСйчас «акадСмичСский Π΄ΠΈΠ·Π°ΠΉΠ½Β». ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π΄ΠΎ сих ΠΏΠΎΡ€ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° lib.ru.

    Однако ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ прСимущСствСнно Π΄ΡƒΠΌΠ°Π»ΠΈ ΠΈΠ½Π°Ρ‡Π΅ ΠΈ, глядя Π½Π° ΠΊΡ€Π°ΡΠΈΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, ΠΎΡ‚Π΄Π°Π²Π°Π»ΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΅ΠΉ. Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Netscape прСкрасно ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ это ΠΈ Π²Π²ΠΎΠ΄ΠΈΠ»ΠΈ Π² HTML Π½ΠΎΠ²Ρ‹Π΅ Ρ‚Π΅Π³ΠΈ, ΡƒΠ»ΡƒΡ‡ΡˆΠ°ΡŽΡ‰ΠΈΠ΅ внСшний Π²ΠΈΠ΄ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π­Ρ‚ΠΈ Ρ‚Π΅Π³ΠΈ Π½Π΅ Π±Ρ‹Π»ΠΈ стандартизированы ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Netscape, Ρ‡Ρ‚ΠΎ Π² эпоху повального засилья этого Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π½Π΅ ΠΈΠΌΠ΅Π»ΠΎ значСния. Доля Netscape составляла Π±ΠΎΠ»Π΅Π΅ 90% ΠΎΡ‚ всСх ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ².

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

    Π’Π΅ΠΊ Netscape  продолТался Π΄ΠΎ Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΏΠΎΠΊΠ° Ρ‡Π°ΡΡ‚ΡŒ Ρ€Ρ‹Π½ΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π½Π΅ Π·Π°Ρ…Π²Π°Ρ‚ΠΈΠ»Π° Microsoft со своим Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Internet Explorer, Ρ‡Ρ‚ΠΎ Π² ΠΈΡ‚ΠΎΠ³Π΅ принСсло Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π³ΠΎΠ»ΠΎΠ²Π½ΡƒΡŽ боль Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ сайтов. Π Π°Π·Π½Ρ‹Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρ‹ Netscape ΠΈ Internet Explorer ΠΊ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ сайта, противорСчивая ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° стилСй ΠΈ Ρ‚Π΅Π³ΠΎΠ², большоС количСство ΠΌΠ΅Π»ΠΊΠΈΡ… ошибок ΠΏΡ€ΠΈΠ²Π΅Π»ΠΎ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ сайт ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ Ρ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΎΡ‚Π»Π°ΠΆΠΈΠ²Π°Ρ‚ΡŒ Π΄ΠΎΠ»Π³ΠΎΠ΅ врСмя.

    Π£ΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠ΅ вСрсии Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π½Π΅ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅Ρ€Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π»ΠΈ CSS (Cascading Style Sheets, каскадныС Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй), поэтому ΠΊΠΎΠ΄ прСдставлял собой ΠΎΠΊΡ€ΠΎΡˆΠΊΡƒ ΠΈΠ· HTML ΠΈ CSS. Π­Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π»ΠΎ ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ для ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² стали ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ с Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Π΅ΠΉ, Π½Π° Π΄ΠΎΠ»Π³ΠΎΠ΅ врСмя ΡΡ‚Π°Π²ΡˆΠΈΠΌΠΈ стандартом Π΄Π΅-Ρ„Π°ΠΊΡ‚ΠΎ.

    Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ этапом развития Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ сайтов стало Ρ€ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ спСцификации, которая Π±Ρ‹Π»Π° Π½Π°Π·Π²Π°Π½Π° Cascading Style Sheets Level 2, сокращСнно CSS2. Π‘Π»Π΅Π΄ΠΎΠΌ появилось ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1), ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ сСй дСнь. Выпуск Π½ΠΎΠ²Ρ‹Ρ… вСрсий Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ…, ΠΏΡƒΡΡ‚ΡŒ ΠΈ Π½Π΅ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅Ρ€Π΅, эту ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ, ΡΠ΅Ρ€ΡŒΡ‘Π·Π½ΠΎ ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΠ» Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ сайтами. Π’ ΠΈΡ‚ΠΎΠ³Π΅, Π½Π°Ρ‡Π°Π» ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ постСпСнный ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΎΡ‚ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ вёрстки ΠΊ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ ΠΈΠ»ΠΈ, ΠΊΠ°ΠΊ ΠΎΠ½Π° Π΅Ρ‰Ρ‘ называСтся, вёрсткС слоями, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ располоТСниС элСмСнтов Π½Π° страницС ΠΈ ΠΈΡ… Π²ΠΈΠ΄ задаётся Ρ‡Π΅Ρ€Π΅Π· стили.

    Π’ настоящСС врСмя ΡƒΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΡΠ²ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ табличная вёрстка Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ своём являСтся Π°Ρ€Ρ…Π°ΠΈΠ·ΠΌΠΎΠΌ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, сущСствуСт Π΅Ρ‰Ρ‘ мноТСство сайтов Π²Ρ€ΠΎΠ΄Π΅ yandex.ru, artlebedev.ru ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ…, свёрстанных ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΡ€ΠΈ содСйствии Ρ‚Π°Π±Π»ΠΈΡ†. Π’Π°ΠΊΠΎΠΉ консСрватизм связан со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ ΠΎΠ±ΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΡΡ‚Π²Π°ΠΌΠΈ.

    • Вёрстка слоями слоТнСС, Ρ‡Π΅ΠΌ Ρ‚Π°Π±Π»ΠΈΡ†Π°ΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΎΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° Π³Π»ΡƒΠ±ΠΎΠΊΠΈΡ… Π·Π½Π°Π½ΠΈΠΉ спСцификации CSS.
    • Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ содСрТат Ρ€Π°Π·Π½Ρ‹Π΅ ошибки ΠΏΡ€ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚Π°Ρ†ΠΈΠΈ стилСвых свойств, поэтому слСдуСт Π·Π½Π°Ρ‚ΡŒ особСнности повСдСния основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ², ΠΈΡ… ошибки ΠΈ ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈΡ….
    • ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Π·Π°Π΄Π°Ρ‡Ρƒ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ нСсколькими способами, ΠΎΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° трСбуСтся Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ, Ρ‚.Π΅. Π½Π°ΠΈΠΌΠ΅Π½Π΅Π΅ Π·Π°Ρ‚Ρ€Π°Ρ‚Π½Ρ‹ΠΉ ΠΏΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΠΈ усилиям. Для ΠΎΡ†Π΅Π½ΠΊΠΈ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ практичСский ΠΎΠΏΡ‹Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π² запасС Ρ€Π°Π·Π½Ρ‹Π΅ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹, примСняСмыС Π² ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹Ρ… ситуациях.

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

    ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ вёрстка это практичСская дисциплина ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π΅ΡˆΠ°Ρ Ρ€Π°Π·Π½Ρ‹Π΅ Π·Π°Π΄Π°Ρ‡ΠΈ ΠΈ работая Π½Π°Π΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ, Π²Ρ‹ смоТСтС ΠΎΡΠ²ΠΎΠΈΡ‚ΡŒ это искусство.

    Блочная вёрстка | htmlbook.ru

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

    ΠŸΠ΅Ρ€Π²ΠΎΠ½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ слои Π²Π²Π΅Π»Π° компания Netscape, Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ² Π² свой Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Ρ‚Π΅Π³Π° <layer>. Π­Ρ‚ΠΎΡ‚ Ρ‚Π΅Π³ позволял ΠΏΡ€ΡΡ‚Π°Ρ‚ΡŒ/ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ‚Π΅ΠΊΡƒΡ‰Π΅Π΅ содСрТимоС, ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π½Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ слой ΠΏΠΎΠ²Π΅Ρ€Ρ… Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹Π΅ Π² содСрТимоС слоя ΠΈΠ· Ρ„Π°ΠΉΠ»Π°. ВсС эти ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π»Π΅Π³ΠΊΠΎ мСнялись с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript ΠΈ это Ρ€Π°ΡΡˆΠΈΡ€ΡΠ»ΠΎ возмоТности ΠΏΠΎ созданию Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ динамичСского ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π° страницС. НСсмотря Π½Π° ΡΡ‚ΠΎΠ»ΡŒ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»ΡΡŽΡ‰ΠΈΠΉ Π½Π°Π±ΠΎΡ€ возмоТностСй, Ρ‚Π΅Π³ <layer> Π½Π΅ Π±Ρ‹Π» Π²ΠΊΠ»ΡŽΡ‡Ρ‘Π½ Π² ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ HTML ΠΈ остался лишь Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Netscape.

    Однако Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΡΡ‚ΡŒ Π² ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… возмоТностях ΡƒΠΆΠ΅ Π½Π°Π·Ρ€Π΅Π»Π°, ΠΈ Π² ΠΊΠΎΠ½Ρ†Π΅ 1996 Π³ΠΎΠ΄Π° синтаксис для Ρ€Π°Π±ΠΎΡ‚Ρ‹ со слоями Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ ΠΈ ΠΎΠ΄ΠΎΠ±Ρ€Π΅Π½ Π² Ρ€Π°Π±ΠΎΡ‡Π΅ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ консорциума Β«CSS Positioning (CSS-P)Β». Основная Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠ° лоТилась Π½Π° стили, с ΠΈΡ… ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Π²ΠΈΠ΄ΠΎΠΌ любого элСмСнта, Π² Ρ‚ΠΎΠΌ числС ΠΌΠ΅Π½ΡΡ‚ΡŒ значСния динамичСски Ρ‡Π΅Ρ€Π΅Π· JavaScript. К соТалСнию, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π½Ρ‹Π΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² для доступа ΠΊ элСмСнтам Ρ€Π°Π·Π»ΠΈΡ‡Π°Π»ΠΈΡΡŒ, поэтому ΠΏΡ€ΠΈΡ…ΠΎΠ΄ΠΈΠ»ΠΎΡΡŒ ΠΏΠΈΡΠ°Ρ‚ΡŒ достаточно слоТный ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Π» эти особСнности.

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

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

    Π₯Π°ΠΊ β€” это Π½Π°Π±ΠΎΡ€ ΠΏΡ€ΠΈΠ΅ΠΌΠΎΠ², ΠΊΠΎΠ³Π΄Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠΌΡƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Β«ΠΏΠΎΠ΄ΡΠΎΠ²Ρ‹Π²Π°ΡŽΡ‚Β» ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ понимаСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ этим Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ игнорируСтся.

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

    Π•ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠΉ, пСрспСктивный ΠΏΡƒΡ‚ΡŒΒ β€” ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ спСцификации CSS. НСсмотря Π½Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π½Π΅ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅Ρ€Π΅ сами Π΅Ρ‘ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚, ΠΎΠ½ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π΅ΡΡΠΈΡ€ΡƒΡŽΡ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ Π² Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… спСцификаций (HTML, CSS, DOM). Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, получаСтся, Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠ΅ вСрсии Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠ½ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ сайт станут ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ.

    Π‘Π½ΠΎΠ²Π° вСрнСмся ΠΊ слоям. ΠŸΠΎΠ½ΡΡ‚Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ нСпосрСдствСнно связаны со стилями. Π Π°Π· Ρ‚Π°ΠΊ, Ρ‚ΠΎ Π½Π΅ получаСтся Π»ΠΈ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт HTML-ΠΊΠΎΠ΄Π°, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ стили, являСтся слоСм? Π’ ΠΊΠ°ΠΊΠΎΠΌ-Ρ‚ΠΎ смыслС Ρ‚Π°ΠΊ ΠΈ Π΅ΡΡ‚ΡŒ. Однако это внСсло Π±Ρ‹ ΠΈΠ·Ρ€ΡΠ΄Π½ΡƒΡŽ ΠΏΡƒΡ‚Π°Π½ΠΈΡ†Ρƒ, Ссли вмСсто Β«Ρ‚Π°Π±Π»ΠΈΡ†Π°Β» ΠΈΠ»ΠΈ Β«Π°Π±Π·Π°Ρ†Β» ΠΌΡ‹ Π±Ρ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ «слой». ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ договоримся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚ΡŒ этот Ρ‚Π΅Ρ€ΠΌΠΈΠ½ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ Ρ‚Π΅Π³Π°ΠΌ <div>.

    Π’ HTML4 ΠΈ XHTML слой β€” это элСмСнт Π²Π΅Π±-страницы, созданный с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅Π³Π° <div>, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ примСняСтся стилСвоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅.

    Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ «блочная вёрстка» ΠΈΠ»ΠΈ вёрстка с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ слоёв Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² конструктивном использовании Ρ‚Π΅Π³ΠΎΠ² <div> ΠΈ стилСй. ΠŸΡ€ΠΈ этом ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ².

    Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ содСрТимого ΠΈ оформлСния

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

    АктивноС ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ‚Π΅Π³Π° <div>

    ΠŸΡ€ΠΈ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрсткС сущСствСнноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ удСляСтся ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ‚Π΅Π³Ρƒ <div>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ выполняСт мноТСство Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. ЀактичСски это основа, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Β«Π½Π°Π²Π΅ΡˆΠΈΠ²Π°ΡŽΡ‚ΡΡΒ» стили, прСвращая Π΅Ρ‘ Ρ‚ΠΎ Π² ΠΈΠ³Ρ€ΡƒΡˆΠΊΡƒ, Ρ‚ΠΎ Π² Π·Π²Π΅Ρ€ΡƒΡˆΠΊΡƒ. Π‘ΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½Π½ΠΎ Π½Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ этот Ρ‚Π΅Π³, Π½ΡƒΠΆΠ½ΠΎ вСдь ΠΈ рисунки Π²ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»ΡΡ‚ΡŒ тСкст. Но ΠΏΡ€ΠΈ вёрсткС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ слоёв Ρ‚Π΅Π³ <div> являСтся ΠΊΠΈΡ€ΠΏΠΈΡ‡ΠΈΠΊΠΎΠΌ вёрстки, Π΅Ρ‘ Π±Π°Π·ΠΎΠ²Ρ‹ΠΌ Ρ„ΡƒΠ½Π΄Π°ΠΌΠ΅Π½Ρ‚ΠΎΠΌ.

    Благодаря этому Ρ‚Π΅Π³Ρƒ HTML-ΠΊΠΎΠ΄ распадаСтся Π½Π° ряд Ρ‡Ρ‘Ρ‚ΠΊΠΈΡ… наглядных Π±Π»ΠΎΠΊΠΎΠ², ΠΊΠΎΠ΄ ΠΏΡ€ΠΈ этом получаСтся Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΌ, Ρ‡Π΅ΠΌ ΠΏΡ€ΠΈ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ вёрсткС, ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ поисковыС систСмы Π΅Π³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡ€ΡƒΡŽΡ‚.

    Π’Π°Π±Π»ΠΈΡ†Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для прСдставлСния Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ…

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

    ΠŸΠΎΠ΄Π²Π΅Π΄Ρƒ ΠΈΡ‚ΠΎΠ³ΠΈ. Π’ HTML4 ΠΈ XHTML слой это Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ элСмСнт вёрстки Π²Π΅Π±-страниц, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ стили ΠΈ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ спСцификаций HTML ΠΈ CSS. ΠŸΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π΅ ваТная Ρ€ΠΎΠ»ΡŒ удСляСтся Ρ‚Π΅Π³Ρƒ <div>, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Ρƒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° людСй ΠΈ Π°ΡΡΠΎΡ†ΠΈΠΈΡ€ΡƒΡŽΡ‚ΡΡ слои. Π’ ΠΊΠ°ΠΊΠΎΠΌ-Ρ‚ΠΎ смыслС это являСтся Π²Π΅Ρ€Π½Ρ‹ΠΌ, поэтому договоримся Π² дальнСйшСм ΡƒΠΏΠΎΡ‚Ρ€Π΅Π±Π»ΡΡ‚ΡŒ Ρ‚Π΅Ρ€ΠΌΠΈΠ½ «слой» ΠΊ Ρ‚Π΅Π³Ρƒ <div> для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΡƒΠΊΠ°Π·Π°Π½ стилСвой ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΈΠ»ΠΈ класс. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ «слой с ΠΈΠΌΠ΅Π½Π΅ΠΌ contentΒ» ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅Π³ <div> ΠΈΠ»ΠΈ <div >.

    Π’ HTML5 Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ нСсколько Π½ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ² Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ для обозначСния Ρ€Π°Π·Π½Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ²Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² страницы. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, <header> ΠΈ <footer> ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для создания «шапки» ΠΈ Β«ΠΏΠΎΠ΄Π²Π°Π»Π°Β», <nav> для Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, <aside> для Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. Π’ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Π² ΡΠΏΠ΅Ρ†ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ HTML ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Ρ… элСмСнтов ΠΏΡ€ΠΈΠ·Π²Π°Π½ΠΎ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ Π΄ΠΎΠΌΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ‚Π΅Π³Π° <div> ΠΈ ΠΏΡ€ΠΈΠ΄Π°Ρ‚ΡŒ большС смысла Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π² вёрсткС Π½Π° HTML5 Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ примСняСтся Ρ‚Π΅Ρ€ΠΌΠΈΠ½ «элСмСнт», ΠΏΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ подразумСваСтся ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Ρ‚Π΅Π³ ΠΈ элСмСнт ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ создаёт.

    Π˜Π·Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Π΅ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрстки ΠΏΡ€ΠΈ этом ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‚ΡΡ Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ‚ΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚Π°, Ρ‡Ρ‚ΠΎ <div> Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях замСняСтся Π±ΠΎΠ»Π΅Π΅ осмыслСнными Ρ‚Π΅Π³Π°ΠΌΠΈ.

    Shiny — Руководство ΠΏΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ прилоТСния

    ΠžΠ±Π·ΠΎΡ€

    Shiny Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя ряд срСдств для размСщСния ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² прилоТСния. Π’ этом руководствС описаны ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ особСнности ΠΌΠ°ΠΊΠ΅Ρ‚Π° прилоТСния:

    1. ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ с Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ панСлью для Π²Π²ΠΎΠ΄Π° ΠΈ большой основной ΠΎΠ±Π»Π°ΡΡ‚ΡŒΡŽ для Π²Ρ‹Π²ΠΎΠ΄Π°.

    2. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с использованиСм систСмы ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Shiny grid.

    3. Π‘Π΅Π³ΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ tabsetPanel () ΠΈ navlistPanel () .

    4. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ с нСсколькими ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ уровня с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ navbarPage () .

    Π­Ρ‚ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π±Ρ‹Π»ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ с использованиСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚Π°, доступных Π² Bootstrap 2, Ρ‡Ρ€Π΅Π·Π²Ρ‹Ρ‡Π°ΠΉΠ½ΠΎ популярном Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ΅ HTML / CSS (хотя ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Bootstrap Π½Π΅ прСдполагаСтся).

    ΠœΠ°ΠΊΠ΅Ρ‚ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ

    ΠœΠ°ΠΊΠ΅Ρ‚ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ — полСзная отправная Ρ‚ΠΎΡ‡ΠΊΠ° для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. Π­Ρ‚ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ содСрТит Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль для Π²Π²ΠΎΠ΄Π° ΠΈ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ для Π²Ρ‹Π²ΠΎΠ΄Π°:

    Π’ΠΎΡ‚ ΠΊΠΎΠ΄, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ для создания этого ΠΌΠ°ΠΊΠ΅Ρ‚Π°:

      ui <- fluidPage (
    
      titlePanel ("ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΡΠΈΡΡŽΡ‰ΠΈΠΉ!"),
    
      sidebarLayout (
    
        sidebarPanel (
          sliderInput ("obs", "ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ наблюдСний:",
                      ΠΌΠΈΠ½ = 1, макс = 1000, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ = 500)
        ),
    
        mainPanel (
          plotOutput ("distPlot")
        )
      )
    )  

    ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ боковая панСль ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ слСва (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ) ΠΈΠ»ΠΈ справа ΠΎΡ‚ основной области.НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль справа, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΊΠΎΠ΄:

      sidebarLayout (position = "right",
                  
      sidebarPanel (
        # Π’Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ для краткости
      ),
      mainPanel (
        # Π’Ρ‹Ρ…ΠΎΠ΄Ρ‹ ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ для краткости
      )
    )  

    Π‘Ρ…Π΅ΠΌΠ° сСтки

    Π—Π½Π°ΠΊΠΎΠΌΡ‹ΠΉ sidebarLayout () , описанный Π²Ρ‹ΡˆΠ΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ сСтки Π½ΠΈΠΆΠ½Π΅Π³ΠΎ уровня Shiny. Π‘Ρ‚Ρ€ΠΎΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ fluidRow () ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ столбцы, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ column () .Π¨ΠΈΡ€ΠΈΠ½Π° столбцов основана Π½Π° 12-разрядной сСточной систСмС Bootstrap, поэтому Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ fluidRow () Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ 12.

    Для ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ, Π²ΠΎΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ с использованиСм Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ fluidRow (), , column (), ΠΈ wellPanel () :

      ui <- fluidPage (
    
      titlePanel ("ΠŸΡ€ΠΈΠ²Π΅Ρ‚, ΡΠΈΡΡŽΡ‰ΠΈΠΉ!"),
    
      FluidRow (
      
        столбСц (4,
          wellPanel (
            sliderInput ("obs", "ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ наблюдСний:",
                        ΠΌΠΈΠ½ = 1, макс = 1000, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ = 500)
          )
        ),
    
        столбСц (8,
          plotOutput ("distPlot")
        )
      )
    )  

    ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ column () являСтся ΡˆΠΈΡ€ΠΈΠ½Π° (ΠΈΠ· 12 столбцов).Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ столбцов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ контроля Π½Π°Π΄ располоТСниСм элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ столбцы Π²ΠΏΡ€Π°Π²ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ смСщСниС ΠΊ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ column () . КаТдая Π΅Π΄ΠΈΠ½ΠΈΡ†Π° смСщСния ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ столбца Π½Π° Ρ†Π΅Π»Ρ‹ΠΉ столбСц.

    Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса с Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΌ Π²Π²Π΅Ρ€Ρ…Ρƒ ΠΈ трСмя столбцами Π²Π½ΠΈΠ·Ρƒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ содСрТат Π²Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅, ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΌ:

    Для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ этого ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса трСбуСтся ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

      Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° (блСстящая)
    Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° (ggplot2)
    
    Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ… <- Π±Ρ€ΠΈΠ»Π»ΠΈΠ°Π½Ρ‚Ρ‹
    
    ui <- fluidPage (
    
      title = "Π˜ΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π±Ρ€ΠΈΠ»Π»ΠΈΠ°Π½Ρ‚ΠΎΠ²",
      
      plotOutput ('ΡΡŽΠΆΠ΅Ρ‚'),
      
      час (),
    
      FluidRow (
        столбСц (3,
          h5 ("Π˜ΡΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π°Π»ΠΌΠ°Π·ΠΎΠ²"),
          sliderInput ('Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΎΠ±Ρ€Π°Π·Ρ†Π°', 'Π Π°Π·ΠΌΠ΅Ρ€ ΠΎΠ±Ρ€Π°Π·Ρ†Π°',
                      min = 1, max = nrow (Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ…), value = min (1000, nrow (Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ…)),
                      шаг = 500, Ρ€Π°ΡƒΠ½Π΄ = 0),
          br (),
          checkboxInput ('jitter', 'Jitter'),
          checkboxInput ('Π³Π»Π°Π΄ΠΊΠΈΠΉ', 'Π³Π»Π°Π΄ΠΊΠΈΠΉ')
        ),
        столбСц (4, смСщСниС = 1,
          selectInput ('x', 'X', ΠΈΠΌΠ΅Π½Π° (Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ…)),
          selectInput ('y', 'Y', ΠΈΠΌΠ΅Π½Π° (Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ…), ΠΈΠΌΠ΅Π½Π° (Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ…) [[2]]),
          selectInput ('Ρ†Π²Π΅Ρ‚', 'Π¦Π²Π΅Ρ‚', c ('НСт', ΠΈΠΌΠ΅Π½Π° (Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ…)))
        ),
        столбСц (4,
          selectInput ('facet_row', 'Facet Row', c (None = '.', ΠΈΠΌΠ΅Π½Π° (Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ…))),
          selectInput ('facet_col', 'Facet Column', c (None = '.', names (Π½Π°Π±ΠΎΡ€ Π΄Π°Π½Π½Ρ‹Ρ…)))
        )
      )
    )  

    Π—Π΄Π΅ΡΡŒ слСдуСт ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ нСсколько Π²Π°ΠΆΠ½Ρ‹Ρ… ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠ²:

    1. Π’Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ находятся Π²Π½ΠΈΠ·Ρƒ ΠΈ Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ Π½Π° Ρ‚Ρ€ΠΈ столбца Ρ€Π°Π·Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹.

    2. ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ смСщСния ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΌ столбцС Π²Π²ΠΎΠ΄Π° для прСдоставлСния настраиваСмых расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ ΠΈ Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ столбцами.

    3. Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° Π½Π΅ содСрТит titlePanel () , поэтому Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡƒΠΊΠ°Π·Π°Π½ ΠΊΠ°ΠΊ явный Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ для fluidPage () .

    ΠœΠ°ΠΊΠ΅Ρ‚Ρ‹ сСтки ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π³Π΄Π΅ ΡƒΠ³ΠΎΠ΄Π½ΠΎ Π² ΠΏΡ€Π΅Π΄Π΅Π»Π°Ρ… fluidPage () ΠΈ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Ρ‹ Π΄Ρ€ΡƒΠ³ Π² Π΄Ρ€ΡƒΠ³Π°. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… сСтки Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ Β«Π“Π»ΡƒΠ±ΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² сСтки» Π½ΠΈΠΆΠ΅.

    Наборы Π²ΠΊΠ»Π°Π΄ΠΎΠΊ

    Часто прилоТСниям Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ свой ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ интСрфСйс Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ tabsetPanel () . НапримСр:

    Код, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ для создания этого ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса:

      ui <- fluidPage (
    
      titlePanel ("Наборы Π²ΠΊΠ»Π°Π΄ΠΎΠΊ"),
    
      sidebarLayout (
        
        sidebarPanel (
          # Π’Ρ…ΠΎΠ΄Π½Ρ‹Π΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ для краткости
        ),
      
        mainPanel (
          tabsetPanel (
            tabPanel ("Участок", plotOutput ("участок")),
            tabPanel ("Бводка", verbatimTextOutput ("сводка")),
            tabPanel ("Π’Π°Π±Π»ΠΈΡ†Π°", tableOutput ("Ρ‚Π°Π±Π»ΠΈΡ†Π°"))
          )
        )
      )
    )  

    Π’ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π²Ρ‹ΡˆΠ΅ (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ), Π½ΠΈΠΆΠ΅, слСва ΠΈΠ»ΠΈ справа ΠΎΡ‚ содСрТимого Π²ΠΊΠ»Π°Π΄ΠΊΠΈ.НапримСр, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΏΠΎΠ΄ содСрТимым Π²ΠΊΠ»Π°Π΄ΠΊΠΈ, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΊΠΎΠ΄:

      tabsetPanel (position = "Π½ΠΈΠΆΠ΅",
      tabPanel ("Участок", plotOutput ("участок")),
      tabPanel ("Бводка", verbatimTextOutput ("сводка")),
      tabPanel ("Π’Π°Π±Π»ΠΈΡ†Π°", tableOutput ("Ρ‚Π°Π±Π»ΠΈΡ†Π°"))
    )  

    Навлисты

    Когда Ρƒ вас большС, Ρ‡Π΅ΠΌ нСсколько tabPanel, navlistPanel () ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²ΠΎΠΉ tabsetPanel () . Навигационный список прСдставляСт Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π² Π²ΠΈΠ΄Π΅ списка Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Π° Π½Π΅ с использованиСм Π²ΠΊΠ»Π°Π΄ΠΎΠΊ.Он Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ² ΠΈ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ для Π±ΠΎΠ»Π΅Π΅ Π΄Π»ΠΈΠ½Π½Ρ‹Ρ… списков. Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ navlistPanel () :

    Код, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ этого, выглядит ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ (ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ tabPanels пусты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π΅ ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠ½ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса):

      ui <- fluidPage (
      
      titlePanel ("НазваниС прилоТСния"),
      
      navlistPanel (
        "Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ А",
        tabPanel ("ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ 1"),
        tabPanel ("ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ 2"),
        "Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ B",
        tabPanel ("ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ 3"),
        tabPanel (Β«ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ 4Β»),
        "-----",
        tabPanel (Β«ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ 5Β»)
      )
    )  

    Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Ρ‹ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ

    Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Shiny, состоящСС ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠΎΠ΄ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² (ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ со своСй собствСнной Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ панСлью, Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ конструкциями ΠΌΠ°ΠΊΠ΅Ρ‚Π°).Ѐункция navbarPage () создаСт ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ со стандартной панСлью Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Bootstrap Π²Π²Π΅Ρ€Ρ…Ρƒ. НапримСр:

      ui <- navbarPage («МоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β»,
      tabPanel ("ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ 1"),
      tabPanel ("ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ 2"),
      tabPanel (Β«ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ 3Β»)
    )  

    ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Shiny tabPanel () ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для указания ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ.

    Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ навигация

    Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π° страницу Π²Ρ‚ΠΎΡ€ΠΎΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ navbarMenu () .Π­Ρ‚ΠΎ добавляСт мСню ΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ уровня, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅, Π² свою ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, ΠΌΠΎΠΆΠ΅Ρ‚ ΡΡΡ‹Π»Π°Ρ‚ΡŒΡΡ Π½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ tabPanels.

      ui <- navbarPage («МоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β»,
      tabPanel ("ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ 1"),
      tabPanel ("ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ 2"),
      navbarMenu ("Π•Ρ‰Π΅",
        tabPanel (Β«ΠŸΠΎΠ΄ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ AΒ»),
        tabPanel (Β«ΠŸΠΎΠ΄ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ BΒ»))
    )  
    Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΏΡ†ΠΈΠΈ

    Π•ΡΡ‚ΡŒ нСсколько Π΄Ρ€ΡƒΠ³ΠΈΡ… Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ² для navbarPage () , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‚ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ€Ρ‹ настройки:

    АргумСнт ОписаниС
    Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π’Π΅Π³ списка Ρ‚Π΅Π³ΠΎΠ² для отобраТСния Π² Π²ΠΈΠ΄Π΅ ΠΎΠ±Ρ‰Π΅Π³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π°Π΄ всСми tabPanels.
    Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» Π’Π΅Π³ ΠΈΠ»ΠΈ список Ρ‚Π΅Π³ΠΎΠ² для отобраТСния Π² Π²ΠΈΠ΄Π΅ ΠΎΠ±Ρ‰Π΅Π³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π° ΠΏΠΎΠ΄ всСми Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ
    ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ΅ TRUE для использования Ρ‚Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π° ΠΈ свСтлого тСкста для ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ
    разборная TRUE для автоматичСского сворачивания элСмСнтов Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π² мСню, ΠΊΠΎΠ³Π΄Π° ΡˆΠΈΡ€ΠΈΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° мСньшС 940 пиксСлСй (ΠΏΠΎΠ»Π΅Π·Π½ΠΎ для просмотра Π½Π° Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… устройствах с сСнсорным экраном)

    Π“Π»ΡƒΠ±ΠΈΠ½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ сСтки

    БущСствуСт Π΄Π²Π° Ρ‚ΠΈΠΏΠ° сСток Bootstrap: ΠΏΠ»Π°Π²Π½Ρ‹Π΅ ΠΈ фиксированныС.Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… Π΄ΠΎ сих ΠΏΠΎΡ€ использовалась ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ систСма Π³ΠΈΠ±ΠΊΠΎΠΉ сСтки, ΠΈ эта систСма рСкомСндуСтся для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ (ΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ Shiny, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ navbarPage () ΠΈ sidebarLayout () ).

    ОбС систСмы сСток ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π³ΠΈΠ±ΠΊΠΎ Ρ€Π°Π·Π΄Π΅Π»ΡΠ΅ΠΌΡƒΡŽ сСтку ΠΈΠ· 12 столбцов для ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Гибкая систСма всСгда Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π²Π΅Π±-страницы ΠΈ динамичСски измСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π΅Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° страницы. Ѐиксированная систСма ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 940 пиксСлСй ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ значСния ΡˆΠΈΡ€ΠΈΠ½Ρ‹, ΠΊΠΎΠ³Π΄Π° срабатываСт Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Bootstrap (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€,Π³. ΠΊΠΎΠ³Π΄Π° Π½Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π΅).

    Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ сСточной систСмС Bootstrap 2, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΊΠΎΠ΄ HTML Π·Π°ΠΌΠ΅Π½Π΅Π½ Π½Π° ΠΊΠΎΠ΄ R.

    Жидкостная сСтка

    Π‘Π΅Ρ‚ΠΊΠ° Bootstrap ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ 12 столбцов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π³ΠΈΠ±ΠΊΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° строки ΠΈ столбцы. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π° основС Тидкостной систСмы, Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ fluidPage () . Для создания строк Π² сСткС Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ fluidRow () ; для создания столбцов Π²Π½ΡƒΡ‚Ρ€ΠΈ строк Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ column () .

    НапримСр, рассмотрим этот ΠΌΠ°ΠΊΠ΅Ρ‚ страницы высокого уровня (ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ числа ΡΠ²Π»ΡΡŽΡ‚ΡΡ столбцами ΠΈΠ· 12):

    Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ этот ΠΌΠ°ΠΊΠ΅Ρ‚ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Shiny, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ (ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° столбцов Π² Π³ΠΈΠ±ΠΊΠΎΠΉ строкС Π² суммС составляСт 12):

      ui <- fluidPage (
      FluidRow (
        столбСц (2,
          "боковая панСль"
        ),
        столбСц (10,
          "Π³Π»Π°Π²Π½Ρ‹ΠΉ"
        )
      )
    )  
    Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹

    Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ столбцов, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ Π±ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ контроля Π½Π°Π΄ располоТСниСм элСмСнтов ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.ΠŸΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ столбцы Π²ΠΏΡ€Π°Π²ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ смСщСниС ΠΊ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ column () . КаТдая Π΅Π΄ΠΈΠ½ΠΈΡ†Π° смСщСния ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ столбца Π½Π° Ρ†Π΅Π»Ρ‹ΠΉ столбСц. Рассмотрим этот ΠΌΠ°ΠΊΠ΅Ρ‚:

    Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ этот ΠΌΠ°ΠΊΠ΅Ρ‚ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Shiny, Π²Ρ‹ использовали ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

      ui <- fluidPage (
      FluidRow (
        столбСц (4,
          Β«4Β»
        ),
        столбСц (4, смСщСниС = 4,
          Β«4 смСщСниС 4Β»
        )
      ),
      FluidRow (
        столбСц (3, смСщСниС = 3,
          Β«3 смСщСниС 3Β»
        ),
        столбСц (3, смСщСниС = 3,
          Β«3 смСщСниС 3Β»
        )
      )
    )  
    Π’Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ столбцов

    Когда Π²Ρ‹ Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅Ρ‚Π΅ столбцы Π² ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡƒΡŽ сСтку, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ влоТСнности столбцов Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΄ΠΎ 12 столбцов.Π­Ρ‚ΠΎ связано с Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ для установки ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π² Π³ΠΈΠ±ΠΊΠΎΠΉ сСткС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹, Π° Π½Π΅ пиксСли. Рассмотрим этот ΠΌΠ°ΠΊΠ΅Ρ‚ страницы:

    Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ этот ΠΌΠ°ΠΊΠ΅Ρ‚ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Shiny, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

      ui <- fluidPage (
      FluidRow (
        столбСц (12,
          Β«Π–ΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒ 12Β»,
          FluidRow (
            столбСц (6,
              Β«Π–ΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒ 6Β»,
              FluidRow (
                столбСц (6,
                  Β«Π–ΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒ 6Β»),
                столбСц (6,
                  Β«Π–ΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒ 6Β»)
              )
            ),
            столбСц (ΡˆΠΈΡ€ΠΈΠ½Π° = 6,
              Β«Π–ΠΈΠ΄ΠΊΠΎΡΡ‚ΡŒ 6Β»)
          )
        )
      )
    )  

    ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° вводится fluidRow () , столбцы Π² строкС ΡΠΊΠ»Π°Π΄Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² 12.

    Ѐиксированная ΡΠ΅Ρ‚ΡŒ

    Ѐиксированная сСтка Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ 12 столбцов ΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 940 пиксСлСй. Если Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Bootstrap (ΠΎΠ½ΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π² Shiny), Ρ‚ΠΎ сСтка Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 724 ΠΈΠ»ΠΈ 1170 пиксСлСй Π² зависимости ΠΎΡ‚ вашСго ΠΎΠΊΠ½Π° просмотра (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π΅).

    ΠžΡΠ½ΠΎΠ²Π½Ρ‹ΠΌ прСимущСством фиксированной сСтки являСтся Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° обСспСчиваСт Π±ΠΎΠ»Π΅Π΅ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹Π΅ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΠΈ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ элСмСнты вашСго ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса (это ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° Π½Π΅ размСщаСтся динамичСски Π² соотвСтствии с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°).Π“Π»Π°Π²Π½Ρ‹ΠΉ нСдостаток Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ с Π½ΠΈΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ слоТнСС Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΌΡ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³ΠΈΠ±ΠΊΠΈΠ΅ сСтки, Ссли Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π°ΠΌ Π½Π΅ трСбуСтся ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΎΠΉ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ уровня, обСспСчиваСмоС фиксированной сСткой.

    ИспользованиС фиксированных сСток

    ИспользованиС фиксированных сСток Π² Shiny ΠΏΠΎΡ‡Ρ‚ΠΈ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½ΠΎ ΠΏΠ»Π°Π²Π½Ρ‹ΠΌ сСткам. Π’ΠΎΡ‚ отличия, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… слСдуСт ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ:

    1. Для построСния сСтки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ fixedPage () ΠΈ fixedRow () .

    2. Π‘Ρ‚Ρ€ΠΎΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ, Π½ΠΎ всСгда Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π½Π°Π±ΠΎΡ€ столбцов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π² суммС Ρ€Π°Π²Π½ΡΡŽΡ‚ΡΡ количСству столбцов ΠΈΡ… Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта (вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ±Ρ€Π°ΡΡ‹Π²Π°Ρ‚ΡŒ Π΄ΠΎ 12 Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡƒΡ€ΠΎΠ²Π½Π΅ влоТСнности, ΠΊΠ°ΠΊ это дСлаСтся Π² Π³ΠΈΠ±ΠΊΠΈΡ… сСтках).

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

      ui <- fixedPage (
      fixedRow (
        столбСц (2,
          "боковая панСль"
        ),
        столбСц (10,
          "Π³Π»Π°Π²Π½Ρ‹ΠΉ"
        )
      )
    )  
    Π’Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ столбцов

    Π’ фиксированных сСтках ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ столбца Π΄ΠΎΠ»ΠΆΠ½Π° Ρ€Π°Π²Π½ΡΡ‚ΡŒΡΡ количСству столбцов Π² ΠΈΡ… Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ элСмСнтС. Π’ΠΎΡ‚ fixedRow () со столбцом ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 9, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит Π΄Π²Π° Π΄Ρ€ΡƒΠ³ΠΈΡ… столбца ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 6 ΠΈ 3:

    Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ эту строку Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Shiny, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

      fixedRow (
      столбСц (9,
        Β«Π‘Ρ‚ΠΎΠ»Π±Π΅Ρ† уровня 1Β»,
        fixedRow (
          столбСц (6,
            "Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 2"
          ),
          столбСц (3,
            "Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 2"
          )
        )
      )
    )  

    ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΎΠ±Ρ‰ΠΈΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… столбцов Ρ€Π°Π²Π΅Π½ 9, Ρ‡Ρ‚ΠΎ соотвСтствуСт ΠΈΡ… Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ столбцу.

    Адаптивный ΠΌΠ°ΠΊΠ΅Ρ‚

    Π‘Π΅Ρ‚ΠΊΠ° Bootstrap ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡŽ автоматичСски Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ для просмотра Π½Π° устройствах Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Адаптивный ΠΌΠ°ΠΊΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

    1. ИзмСнСниС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов Π² сСткС
    2. Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ ΡˆΡ‚Π°Π±Π΅Π»Ρ вмСсто ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ° Ρ‚Π°ΠΌ, Π³Π΄Π΅ это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ
    3. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ тСкста, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ соотвСтствовали устройствам

    Адаптивный ΠΌΠ°ΠΊΠ΅Ρ‚ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для всСх Ρ‚ΠΈΠΏΠΎΠ² страниц Shiny.Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ responseive = FALSE Π² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ fluidPage () ΠΈΠ»ΠΈ fixedPage () .

    ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅ устройства

    Когда Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, Π²ΠΎΡ‚ ΠΊΠ°ΠΊ систСма сСток Bootstrap адаптируСтся ΠΊ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌ устройствам:

    Π¨ΠΈΡ€ΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π¨ΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½Π½Ρ‹ Π¨ΠΈΡ€ΠΈΠ½Π° ΠΆΠ΅Π»ΠΎΠ±Π°
    Π‘ΠΎΠ»ΡŒΡˆΠΎΠΉ дисплСй 1200px ΠΈ Π²Ρ‹ΡˆΠ΅ 70 пиксСлСй 30 пиксСлСй
    По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 980px ΠΈ Π²Ρ‹ΡˆΠ΅ 60 пиксСлСй 20 пиксСлСй
    ΠŸΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π½Ρ‹Π΅ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Ρ‹ 768px ΠΈ Π²Ρ‹ΡˆΠ΅ 42px 20 пиксСлСй
    Π’Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹ ΠΊ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°ΠΌ 767px ΠΈ Π½ΠΈΠΆΠ΅ Fluid (Π±Π΅Π· фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹) Fluid (Π±Π΅Π· фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹)
    Π’Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹ 480 пиксСлСй ΠΈ мСньшС Fluid (Π±Π΅Π· фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹) Fluid (Π±Π΅Π· фиксированной ΡˆΠΈΡ€ΠΈΠ½Ρ‹)

    ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π° экранах мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбцов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ автоматичСски, Π΄Π°ΠΆΠ΅ Ссли Π½Π° страницС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ фиксированная сСтка.

    Π’Π΅ΠΌΡ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

    ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Shiny Π½Π°ΡΠ»Π΅Π΄ΡƒΡŽΡ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²Π΅Π±-Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Bootstrap, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ основан Shiny. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ своСго прилоТСния, ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ Bootstrap. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ theme для Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ fluidPage () , fixedPage () ΠΈΠ»ΠΈ navbarPage () , которая ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй Bootstrap CSS для использования Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.

    Π’Π΅ΠΌΡ‹

    Bootstrap ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ с использованиСм ΠΎΠ΄Π½ΠΎΠ³ΠΎ исходного Ρ„Π°ΠΉΠ»Π° CSS (хотя ΠΎΠ½ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ связанныС изобраТСния, CSS ΠΈΠ»ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹). Если Π²Ρ‹ сохранили Ρ‚Π΅ΠΌΡƒ ΠΏΠΎ адрСсу www / bootstrap.css Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅ вашСго прилоТСния, Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠ²ΡΠ·Π°Ρ‚ΡŒ Π΅Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΊΠΎΠ΄Π°:

      ui <- fluidPage (theme = "bootstrap.css",
                      
      titlePanel («МоС ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β»)
      
      # интСрфСйс прилоТСния
    )  

    ΠŸΡ€ΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π΅ Ρ‚Π΅ΠΌΡ‹ Π²Π°ΠΆΠ½ΠΎ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° совмСстима с Bootstrap 3.Одним ΠΈΠ· популярных источников Ρ‚Π΅ΠΌ Bootstrap являСтся Bootswatch, Π½ΠΎ Π΅ΡΡ‚ΡŒ ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅.

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

    Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² 2 столбца с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML ΠΈ CSS с нуля

    Π’ наши Π΄Π½ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ стал ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ Π²Π΅Π±-сайта. Π‘ΠΎΠ»Π΅Π΅ 50% + людСй, ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΡ… доступ ΠΊ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Ρƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Ρ‹, Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹ ΠΈ Ρ‚. Π”.И Ссли ваш Π²Π΅Π±-сайт Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Π½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ устройства, Ρ‚ΠΎ, скорСС всСго, это потСрянный ΠΊΠ»ΠΈΠ΅Π½Ρ‚ для вас.

    [tutorial_details]

    Π’ этом руководствС я ΠΏΠΎΠΊΠ°ΠΆΡƒ Π²Π°ΠΌ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· способов создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ². Π•ΡΡ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ способов ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ css-сСтки, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ настроСнныС столбцы ΠΈ стили. Но Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΡ‹ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΡƒΡŽ-Π»ΠΈΠ±ΠΎ сСтку.

    ΠœΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ создадим, Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ 2 столбца, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, ΠΎΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ».

    Бброс настроСк Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

    Для Π½Π°Ρ‡Π°Π»Π° Π½Π°ΠΌ понадобится Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ reset.css. Reset.css ΠΎΡ‡ΠΈΡ‰Π°Π΅Ρ‚ всС стили ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΡ€ΠΈΠ΄Π°ΡŽΡ‚ элСмСнтам html, Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Ρ‚Π΅Π³ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, список ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅.

    ΠŸΠΎΡ‡Π΅ΠΌΡƒ это Π²Π°ΠΆΠ½ΠΎ?

    Π’Π°ΠΆΠ½ΠΎ ΡΠ±Ρ€ΠΎΡΠΈΡ‚ΡŒ эти стили ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·Π½Ρ‹Π΅ стили ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ваш Π²Π΅Π±-сайт ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΠΎ-Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅. Но с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ reset.css Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹.Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ скачайтС reset.css ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² ΠΏΠ°ΠΏΠΊΡƒ своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

    Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ с ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ

    ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ шаг сдСлан, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ создайтС Π΄Π²Π° Ρ„Π°ΠΉΠ»Π°: index.html ΠΈ style.css .

    ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ свой index.html ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ HTML-ΠΊΠΎΠ΄.

     
         Адаптивный ΠΌΠ°ΠΊΠ΅Ρ‚ 
            
        
        
    
    
    
    <Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ>

    Адаптивный ΠΌΠ°ΠΊΠ΅Ρ‚

    <Ρ€Π°Π·Π΄Π΅Π»>

    Боздано с использованиСм CSS3 и HTML5

    <Π² сторону>

    Π­Ρ‚ΠΎ боковая панСль

    <Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»> АвторскиС ΠΏΡ€Π°Π²Π° ΠΈ копия Андор Надь 2015

    Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄Π΅ Ρƒ нас Π΅ΡΡ‚ΡŒ нСсколько основных ΠΌΠΎΠΌΠ΅Π½Ρ‚ΠΎΠ².Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π» . Π—Π΄Π΅ΡΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ Ρ‚Π΅Π³ΠΈ </strong>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ страниц, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π΄Π²Π΅ наши Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй. <strong> reset.css </strong> ΠΈ <strong> style.css </strong>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ наши стили. Наряду с:</p><pre title=""> & lt; meta name = "viewport" content = "width = device-width, initial-scale = 1.0" & gt; </pre><p> Π£ΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана устройства. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с ΠΌΠ΅Π΄ΠΈΠ°-запросами.</p><p> Π—Π°Ρ‚Π΅ΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° <strong><body> </strong> ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ:</p><ul><li> <strong><div id = ”container”> </strong> - это основной ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ нашСго сайта.</li><li> <strong><header id = ”header”> </strong> - Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ нашСго Π²Π΅Π±-сайта, Π² основном содСрТит Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²Π΅Π±-сайта ΠΈ описания.</li><li> <strong><nav id = ”nav”> </strong> - НашС мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.</li><li> <strong><section id = ”content”> </strong> - ΠžΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ отобраТаСтся содСрТимоС Π²Π΅Π±-сайта.</li><li> <strong><aside id = ”sidebar”> </strong> - Боковая панСль нашСго Π²Π΅Π±-сайта.</li><li> <strong><footer id = ”footer” class = ”clearfix”> </strong> - ΠžΠ±Π»Π°ΡΡ‚ΡŒ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»Π° Π²Π΅Π±-сайтов.</li></ul><h4><span class="ez-toc-section" id="_HTML"> Бтилизация HTML </span></h4><p> Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ создали Ρ€Π΅Π°Π»ΡŒΠ½ΡƒΡŽ структуру Π²Π΅Π±-сайта, ΠΌΡ‹ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ CSS ΠΈ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎΡ…ΠΎΠΆΠΈΠΌ Π½Π° настоящий Π²Π΅Π±-сайт. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ свой <strong> style.css </strong> ΠΈ слСдуйтС Π·Π° Π½ΠΈΠΌ.</p><p> Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ стили поэлСмСнтно. Для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° элСмСнтов ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎ ΠΈΠΌΠ΅Π½ΠΈ элСмСнта (навигация, Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ», Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ»), Π° Π½Π΅ ΠΏΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρƒ (#nav, #header, #footer).</p><h5><span class="ez-toc-section" id="i-44"> ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ <strong> </strong>. </span></h5><p> ΠœΡ‹ сдСлаСм Π΅Π³ΠΎ максимальной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ <strong>, </strong>, Ρ€Π°Π²Π½Ρ‹ΠΌ 1200 пиксСлСй ΠΈ <strong>, располоТив </strong> ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ <strong> max-width </strong>, Π° Π½Π΅ <strong> width </strong>, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ наш Π²Π΅Π±-сайт ΠΌΠΎΠ³ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒΡΡ, Ссли экран мСньшС <strong> 1200 пиксСлСй </strong></p><pre data-enlighter-language="css"> #container { ΠΌΠ°Ρ€ΠΆΠ°: 0 Π°Π²Ρ‚ΠΎ; максимальная ΡˆΠΈΡ€ΠΈΠ½Π°: 1200 пиксСлСй; } </pre><p> <strong> Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ. </strong></p><p> ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ здСсь, Π² <strong> #container </strong>, ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ пиксСли для указания ΡˆΠΈΡ€ΠΈΠ½Ρ‹.Но здСсь ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ <strong> ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π° (%) </strong>. Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ наш Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π·Π°Π½ΠΈΠΌΠ°Π» всС Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ пространство.</p><p> ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ <strong> 94% </strong>, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρƒ нас <strong> 3% padding </strong>, Π° padding ΠΈΠΌΠ΅Π΅Ρ‚ ΠΎΠ±Π° Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, поэтому, Ссли Π²Ρ‹ слоТитС всС вмСстС (3% + 94% + 3% = 100%), это Ρ€Π°Π²Π½ΠΎ 100 %.</p><pre data-enlighter-language="css"> Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ { ΡˆΠΈΡ€ΠΈΠ½Π°: 94%; Π½Π°Π±ΠΈΠ²ΠΊΠ°: 3%; Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # FF5722; } header #title { Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 50 пиксСлСй; Ρ†Π²Π΅Ρ‚: #fff; } </pre><p> <strong> Навигатор </strong></p><p> МСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ΅.ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρƒ нас Π΅ΡΡ‚ΡŒ <strong> нСупорядочСнный список </strong> ΠΈ <strong> элСмСнтов списка </strong> Π²Π½ΡƒΡ‚Ρ€ΠΈ, ΠΌΡ‹ Π΄Π°Π΅ΠΌ Π΅ΠΌΡƒ <strong> ΡˆΠΈΡ€ΠΈΠ½Ρƒ 97% </strong> ΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ <strong> 1,5% заполнСния. </strong></p><pre data-enlighter-language="css"> nav { ΡˆΠΈΡ€ΠΈΠ½Π°: 97%; Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # E64A19; Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: 0 1,5% 0 1,5%; } nav ul li { дисплСй: встроСнный Π±Π»ΠΎΠΊ; отступ: 15 пиксСлСй 1,5% 15 пиксСлСй 1,5%; } nav ul li a { тСкстовоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚; Ρ†Π²Π΅Ρ‚: #ffffff; Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°: 1.2em; } nav ul li a: hover { Ρ†Π²Π΅Ρ‚: # 000000; тСкстовоС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ‚; } </pre><p> <strong> Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ </strong></p><p> ΠžΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого Π·Π°ΠΉΠΌΠ΅Ρ‚ <strong> 70% ΠΎΡ‚ ΠΏΠΎΠ»Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° </strong>, поэтому Ρƒ нас Π±ΡƒΠ΄Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Π° <strong> 64% </strong> ΠΈ отступ <strong> 3% </strong>, ΠΈ ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ»Π°Π²Π°Ρ‚ΡŒ Π΄ΠΎ слСва.</p><pre data-enlighter-language="css"> #content { ΠΏΠ»Ρ‹Ρ‚ΡŒ Π½Π°Π»Π΅Π²ΠΎ; Π½Π°Π±ΠΈΠ²ΠΊΠ°: 3%; ΡˆΠΈΡ€ΠΈΠ½Π°: 64%; } </pre><p> <strong> Боковая панСль </strong></p><p> ΠžΠ±Π»Π°ΡΡ‚ΡŒ содСрТимого ΡƒΠΆΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ 70% доступного пространства, поэтому боковая панСль Π·Π°ΠΉΠΌΠ΅Ρ‚ ΠΎΡΡ‚Π°Π²ΡˆΠΈΠ΅ΡΡ 30%. ΠΈ ΠΏΠ»Ρ‹Π²ΠΈΡ‚Π΅ Π²ΠΏΡ€Π°Π²ΠΎ.</p><pre data-enlighter-language="css"> Π² сторону { float: right; Π½Π°Π±ΠΈΠ²ΠΊΠ°: 3%; ΡˆΠΈΡ€ΠΈΠ½Π°: 24%; Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: #eee; } </pre><p> <strong> НиТний ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» </strong></p><p> НиТний ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» Ρ‚ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ». 94% ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ 3% заполнСния.</p><pre data-enlighter-language="css"> footer { ΡˆΠΈΡ€ΠΈΠ½Π°: 94%; Π½Π°Π±ΠΈΠ²ΠΊΠ°: 3%; Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # FF5722; вСрхняя Π³Ρ€Π°Π½ΠΈΡ†Π°: 5px solid # E64A19; Ρ†Π²Π΅Ρ‚: #fff; Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Ρ†Π΅Π½Ρ‚Ρ€; } </pre><p>, Ссли Π²Ρ‹ слСдовали инструкциям ΠΈ всС сдСлали ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, ваша страница Π΄ΠΎΠ»ΠΆΠ½Π° Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:</p><p></p><p> Π­Ρ‚ΠΎ всС Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Π½ΠΎ ΠΌΡ‹ Π΅Ρ‰Π΅ Π½Π΅ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ»ΠΈ.</p><h4><span class="ez-toc-section" id="i-45"> Π”Π΅Π»Π°Π΅ΠΌ Π΅Π³ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌ </span></h4><p> ΠœΡ‹ использовали <strong> ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π° </strong>, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ элСмСнтов Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π° максимальная ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° составляСт 1200 пиксСлСй, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ нСобходимости. Но Π½Π΅ Π² этом ΡΡƒΡ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. это ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ элСмСнты ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΈ ΠΌΠ΅Π½ΡΡŽΡ‚ мСсто Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° устройства, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ΡΡ.</p><p> Для этого ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ ΠΌΠ΅Π΄ΠΈΠ°-запросы. МСдиа-запросы ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π½Π°ΠΌ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ стили для ΠΎΠ΄Π½ΠΈΡ… ΠΈ Ρ‚Π΅Ρ… ΠΆΠ΅ элСмСнтов Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΎΠ½ΠΈ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°ΡŽΡ‚ΡΡ.Π£ ΠšΡ€ΠΈΡΠ° ΠšΠΎΠΉΠ΅Ρ€Π° Π΅ΡΡ‚ΡŒ отличная ΡΡ‚Π°Ρ‚ΡŒΡ ΠΎΠ± этом: CSS Media Queries & Using Available Space</p><p> Π’Π°ΠΊ ΠΊΠ°ΠΊ это простой ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈΠ· Π΄Π²ΡƒΡ… столбцов, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄Π²Π° ΠΌΠ΅Π΄ΠΈΠ°-запроса.</p><p> ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ Ρ€Π°Π·Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊ элСмСнтам, Ссли Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана мСньшС 768 пиксСлСй, ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ элСмСнты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ.</p><pre data-enlighter-language="css"> @media all and (max-width: 768px) { header { Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Ρ†Π΅Π½Ρ‚Ρ€; } nav { Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Ρ†Π΅Π½Ρ‚Ρ€; } #content { ΡˆΠΈΡ€ΠΈΠ½Π°: 94%; Π½Π°Π±ΠΈΠ²ΠΊΠ°: 3%; } #sidebar { ΡˆΠΈΡ€ΠΈΠ½Π°: 94%; Π½Π°Π±ΠΈΠ²ΠΊΠ°: 3%; border-top: 3px solid # E64A19; } } </pre><p> Π—Π°Ρ‚Π΅ΠΌ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ для <strong> Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² экрана мСньшС 330 пиксСлСй </strong>.Π—Π΄Π΅ΡΡŒ всС, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ, это устанавливаСм элСмСнты списка Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ <strong> с </strong> Π½Π° <strong> display: block </strong> вмСсто <strong> display: inline-block </strong> ΠΈ Π·Π°Π΄Π°Π΅ΠΌ ΠΈΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 94%</p><p></p><pre data-enlighter-language="null"> @media all and (max-width: 330px ) { nav ul li { дисплСй: Π±Π»ΠΎΠΊ; ΡˆΠΈΡ€ΠΈΠ½Π°: 94%; } } </pre><p> ПослС добавлСния этих Π΄Π²ΡƒΡ… ΠΌΠ΅Π΄ΠΈΠ°-запросов, ΠΌΡ‹ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠ»ΠΈ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ, Ссли Π²Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, элСмСнты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ соотвСтствСнно ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ.</p><h4><span class="ez-toc-section" id="i-46"> Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ рСсурсы ΠΈ ΡΡ‚Π°Ρ‚ΡŒΠΈ </span></h4><h4><span class="ez-toc-section" id="i-47"> Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ </span></h4><p> Как я ΡƒΠΆΠ΅ ΡƒΠΏΠΎΠΌΠΈΠ½Π°Π» Π² Π½Π°Ρ‡Π°Π»Π΅ этой ΡΡ‚Π°Ρ‚ΡŒΠΈ, сущСствуСт ΠΌΠ½ΠΎΠ³ΠΎ способов создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ², ΠΈ это ΠΎΠ΄ΠΈΠ½ ΠΈΠ· способов.МногиС ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСтки css, Ρ‡Ρ‚ΠΎ являСтся ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΌ способом ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ отступы, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ столбцы ΡƒΠΆΠ΅ ΠΈΠΌΠ΅ΡŽΡ‚ стили. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, - это ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ классы столбцов.</p><h2><span class="ez-toc-section" id="W3Layouts_4000"> W3Layouts: 4000+ бСсплатных шаблонов сайтов </span></h2><p> МСню Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Γ—</p><p> Π˜ΡΠΊΠ°Ρ‚ΡŒ: Поиск</p><ul><li> ΠŸΡ€Π΅ΠΌΠΈΡƒΠΌ</li><li data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut"> БизнСс <i/><ul aria-labelledby="handheld-departments-menu-item-dropdown-47168" role="menu"><li><ul><li> ВсС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹</li><li> Автомобили ΠΈ транспорт</li><li> Π¨Π°Π±Π»ΠΎΠ½Ρ‹ элСктронных рассылок</li><li> ΠšΠΎΡ€ΠΏΠΎΡ€Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ бизнСс</li><li> ЭлСктронная торговля</li><li> ОбъявлСния ОбъявлСния</li><li> БСльскоС хозяйство</li><li> БанковскоС Π΄Π΅Π»ΠΎ</li><li> Π€ΠΎΠ½ Π²ΠΈΠ΄Π΅ΠΎ</li><li> БообщСство</li><li> ΠŸΠ΅Π΄Π°Π³ΠΎΠ³ΠΈΡ‡Π΅ΡΠΊΠ°Ρ школа</li><li> ΠŸΡ€ΠΎΠΌΡ‹ΡˆΠ»Π΅Π½Π½ΠΎΠ΅</li><li> Π£ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ чСловСчСскими рСсурсами</li></ul></li></ul></li><li data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut"> Π›ΠΈΡ‡Π½Ρ‹ΠΉ <i/><ul aria-labelledby="handheld-departments-menu-item-dropdown-47170" role="menu"><li><ul><li> ВсС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹</li><li> Π›ΠΈΡ‡Π½Ρ‹ΠΉ</li><li> Мода</li><li> ЀотогалСрСя</li><li> Бвадьба</li><li> Π–ΠΈΠ²ΠΎΡ‚Π½Ρ‹Π΅ ΠΈ домашниС ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹Π΅</li><li> Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ</li><li> Π‘Π»ΠΎΠ³</li></ul></li></ul></li><li data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut"> ΠšΠΎΡ€ΠΏΡƒΡ <i/><ul aria-labelledby="handheld-departments-menu-item-dropdown-47176" role="menu"><li><ul><li> ВсС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹</li><li> Π Π΅ΠΌΠΎΠ½Ρ‚ ΠΈ обслуТиваниС Π΄ΠΎΠΌΠ°</li><li> Π˜Π½Ρ‚Π΅Ρ€ΡŒΠ΅Ρ€ ΠΈ мСбСль</li><li> ΠΠ΅Π΄Π²ΠΈΠΆΠΈΠΌΠΎΡΡ‚ΡŒ</li><li> Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄</li><li> ΠŸΡ€Π°Ρ‡Π΅Ρ‡Π½Π°Ρ</li></ul></li></ul></li><li data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut"> РазвлСчСния <i/><ul aria-labelledby="handheld-departments-menu-item-dropdown-47211" role="menu"><li><ul><li> ВсС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹</li><li> РазвлСчСния</li><li> Π˜Π³Ρ€Ρ‹</li><li> ΠŸΠΎΡ€Ρ‚Π°Π» мобильного ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°</li><li> ΠœΡƒΠ·Ρ‹ΠΊΠ°</li><li> Π‘ΠΏΠΎΡ€Ρ‚</li><li> ΠŸΠΎΡ€Ρ‚Π°Π» Π²ΠΈΠ΄Π΅ΠΎΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°</li></ul></li></ul></li><li data-event="hover" data-animation-in="slideInUp" data-animation-out="fadeOut"> Π’Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° <i/><ul aria-labelledby="handheld-departments-menu-item-dropdown-47223" role="menu"><li><ul><li> ВсС ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹</li><li/></ul></li></ul></li></ul>.</div></div><div class="panel panel-default"><div class="panel-heading">Comments</div><div class="panel-body"><div class='text-center'><a class='btn btn-lg btn-success' href="javascript:void(0);" onclick="jQuery('#wlt_comments_form').show(); jQuery('#wlt_comments_form_lc').hide();" id="wlt_comments_form_lc">Leave Comment</a></div><div style="display:none;" id="wlt_comments_form"> <a class='badge pull-right' href="javascript:void(0);" onclick="jQuery('#wlt_comments_form').hide(); jQuery('#wlt_comments_form_lc').show();">Close</a><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Leave a Comment<hr /> <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/html-verstka-css-kak-sverstat-veb-straniczu-chast-1-habr.html#respond" style="display:none;">ΠžΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚</a></small></h3><form action="https://winx-fan.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p><textarea id="comment" name="comment" aria-required="true" placeholder="ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ" class="form-control"></textarea></p><p> <input id="author" name="author" type="text" value="" size="30" placeholder="Name" class="form-control" /></p><p> <input id="email" name="email" type="text" value="" size="30" placeholder="Email" class="form-control" /></p><p><input id="url" name="url" type="text" value="" size="30" placeholder="Website" class="form-control" /></p><p class="form-submit wp-block-button"> <input type='hidden' name='comment_post_ID' value='10016' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /><hr /><div class="form-group clearfix"> <label class="control-label col-md-5">What is the sum of:</label><div class="input-group controls col-md-3"> <span class="input-group-addon"> 5 + 3 = </span> <input type="text" name="reg_val" tabindex="500" class="form-control"> <input type="hidden" name="reg1" value="5" /> <input type="hidden" name="reg2" value="3" /></div></div><hr /><div class="clearfix"></div><div class="btnbox"><button name="submit" class="btn btn-success btn-lg" type="submit" id="submit"(.+)>Submit Comment</button></div> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div><div class="clearfix"></div></div></div></div></article><aside class="core_sidebar col-md-300 col-sm-300 hidden-xs" id="core_right_column"><div class="panel panel-default" id="categories-2"><div class="panel-heading">Π ΡƒΠ±Ρ€ΠΈΠΊΠΈ </div><div class="panel-body widget"><ul><li class="cat-item cat-item-3"><a href="https://winx-fan.ru/category/akvarelyu">ΠΠΊΠ²Π°Ρ€Π΅Π»ΡŒΡŽ</a></li><li class="cat-item cat-item-1"><a href="https://winx-fan.ru/category/bez-rubriki">Π‘Π΅Π· Ρ€ΡƒΠ±Ρ€ΠΈΠΊΠΈ</a></li><li class="cat-item cat-item-8"><a href="https://winx-fan.ru/category/guashyu">Π“ΡƒΠ°ΡˆΡŒΡŽ</a></li><li class="cat-item cat-item-6"><a href="https://winx-fan.ru/category/dlya-nachinayushhix">Для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…</a></li><li class="cat-item cat-item-4"><a href="https://winx-fan.ru/category/karandashom">ΠšΠ°Ρ€Π°Π½Π΄Π°ΡˆΠΎΠΌ</a></li><li class="cat-item cat-item-7"><a href="https://winx-fan.ru/category/portret">ΠŸΠΎΡ€Ρ‚Ρ€Π΅Ρ‚</a></li><li class="cat-item cat-item-5"><a href="https://winx-fan.ru/category/poetapno">ΠŸΠΎΡΡ‚Π°ΠΏΠ½ΠΎ</a></li><li class="cat-item cat-item-10"><a href="https://winx-fan.ru/category/raznoe-2">Π Π°Π·Π½ΠΎΠ΅</a></li><li class="cat-item cat-item-2"><a href="https://winx-fan.ru/category/raznoe">Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠ°</a></li></ul><div class="clearfix"></div></div></div></aside></div></div></div></div></div><p id="back-top"> <a href="#top"><span></span></a></p><footer id="footer"><div id="footer_content"><div class="container-fluid"><div class="row clearfix"><div class="col-md-3"></div><div class="col-md-3 hidden-xs"></div><div class="col-md-3 hidden-xs"></div><div class="col-md-3 hidden-xs"></div></div></div></div><div id="footer_bottom"><div class="container-fluid"><div class="row clearfix"><div class="pull-left copybit">2019 © ВсС ΠΏΡ€Π°Π²Π° Π·Π°Ρ‰ΠΈΡ‰Π΅Π½Ρ‹. <a href="/sitemap.xml">ΠšΠ°Ρ€Ρ‚Π° сайта</a></div></div></div></div></footer><div id="freeow" class="freeow freeow-top-right"></div></div><div id="core_footer_ajax"></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://winx-fan.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --></body></html>