ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка сайта: ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСтки // Π”ΠΈΠ·Π°ΠΉΠ½ Π² Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΉ срСдС

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

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСтки ΠΈ Π·Π°Ρ‡Π΅ΠΌ ΠΎΠ½ΠΈ Π²Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ β€” Π‘Π»ΠΎΠ³ Setka

Π‘Π΅Ρ‚ΠΊΠΈ β€” лишь ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ графичСский Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΏΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ². Он основываСтся Π½Π° Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ°Ρ… размСщСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ Ρ‚ΠΎΠΆΠ΅ Π½Π΅ слСдуСт ΠΏΡ€Π΅Π½Π΅Π±Ρ€Π΅Π³Π°Ρ‚ΡŒ, Ρ‚Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ благодаря ΠΈΠΌ Π²ΠΎΠ·Π½ΠΈΠΊΠ»ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ систСмы.

Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π΄Π°ΡŽΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΎ возмоТностСй: Π² Π½Π°Ρ‡Π°Π»Π΅ 1990-Ρ…, Π½Π° Π·Π°Ρ€Π΅ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°, сайты Π²Π΅Ρ€ΡΡ‚Π°Π»ΠΈΡΡŒ c ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML-Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, ΠΈ ΠΏΡ€ΠΈ этом Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСтки, Π° ΠΌΠΎΠ³Π»ΠΈ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠ΄Π° HTML ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ тСкст Π½Π° страницС ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π» ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ (Π·Π° это ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ свойство стиля float). Однако это Π½Π΅ всСгда Ρ…ΠΎΡ€ΠΎΡˆΠΎ выглядСло: свойством Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ, Π½ΠΎ Π±Π΅Π· сСток Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ выглядСл Π½Π΅ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° Π½Π΅ Π±Ρ‹Π»ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ структуры, которая позволяСт Π΅ΠΌΡƒ ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

Π‘ распространСниСм ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΏΡ€ΠΈΠ΅ΠΌΡ‹ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ ΠΏΠ΅Ρ€Π΅ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ.

Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ поняли, Ρ‡Ρ‚ΠΎ слоТная вСрстка ΠΏΠ»ΠΎΡ…ΠΎ смотрится Π½Π° экранС смартфона, Π° броскиС Π±Π°Π½Π½Π΅Ρ€Ρ‹ с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΈΡ… Π² малСньком ΠΌΠ°ΡΡˆΡ‚Π°Π±Π΅. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… элСмСнтов ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ ΠΎΡ‚ΠΊΠ°Π·Π°Ρ‚ΡŒΡΡ ΠΈΠ·-Π·Π° ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΉ скорости Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. Для создания Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π²Π΅Π±-сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»Π΅Π³ΠΊΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ…, Π½ΠΎ ΠΈ Π½Π° ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°Ρ… ΠΈ смартфонах, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ стали ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ сСтки (ΠΎΠ½ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΈ Π² Setka Editor). По-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ Π΅ΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ этот ΠΌΠ΅Ρ‚ΠΎΠ΄. Они ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ сСтки сильно ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ возмоТности, Π½ΠΎ ΠΌΡ‹ совСтуСм всС Ρ€Π°Π²Π½ΠΎ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² сСтках β€” Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π°, ΠΏΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ Π½Π°Ρ€ΡƒΡˆΠ°Ρ‚ΡŒ ΠΈΡ….

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

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, каркас ΠΈ структура web-сайта

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

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ являСтся ΠΎΡΠ½ΠΎΠ²ΠΎΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‰ΠΈΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ сайта, Π½ΠΎ ΠΈ сущСствСнно упростит Тизнь Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка?

Объясню Π½Π° ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½ΠΎΠΌ для вас ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π»ΡŽΠ±ΡƒΡŽ Π±ΡƒΠΌΠ°ΠΆΠ½ΡƒΡŽ ΠΊΠ½ΠΈΠ³Ρƒ. Π’ΠΈΠ΄ΠΈΡ‚Π΅, тСкст, проходящий Ρ‡Π΅Ρ€Π΅Π· всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ страницы, ΠΈΡΠΊΠ»ΡŽΡ‡Π°Ρ поля? Π’Π°ΠΊ Π²ΠΎΡ‚, ΠΏΠ΅Ρ€Π΅Π΄ Π²Π°ΠΌΠΈ типичная одноколоночная вСрстка. А Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ заглянитС Π² ΠΆΡƒΡ€Π½Π°Π» ΠΈΠ»ΠΈ Π³Π°Π·Π΅Ρ‚Ρƒ. Π’ ΠΆΡƒΡ€Π½Π°Π»Π΅ информация Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π° Π½Π° Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π° Π² Π³Π°Π·Π΅Ρ‚Π΅ β€” Π½Π° Ρ‚Ρ€ΠΈ-Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅, Π° Ρ‚ΠΎ ΠΈ большС.

Π’ΠΎΠΎΠ±Ρ‰Π΅ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ довольно ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… Β«Ρ„ΠΈΡˆΠ΅ΠΊΒ» наслСдовал ΠΎΡ‚ полиграфичСского Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π­Ρ‚ΠΎ ΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Ρ€Π°Π±ΠΎΡ‚Ρ‹ со ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ, ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ, ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ. Π‘Π°ΠΉΡ‚Ρ‹-Π²ΠΈΠ·ΠΈΡ‚ΠΊΠΈ ΠΈ сайты-ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Π²ΠΏΠΎΠ»Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π΄ΠΎΠ²ΠΎΠ»ΡŒΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΠ΄Π½ΠΎΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ структурой, домашниС страницы β€” Π΄Π²ΡƒΡ…ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ, Π±ΠΎΠ»Π΅Π΅ слоТныС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹, соотвСтствСнно, ΠΈΠΌΠ΅Ρ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ слоТный ΠΈ ΠΏΡ€ΠΎΠ΄ΡƒΠΌΠ°Π½Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚.

Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½. Быстрый старт

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΠΏΠΈΠΏ сайта Π² Figma

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

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка Π² web-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ прСдставляСт собой Π΅Π΄ΠΈΠ½ΡƒΡŽ схСму располоТСния всСх элСмСнтов ΠΈ Π±Π»ΠΎΠΊΠΎΠ² сайта. Π­Ρ‚ΠΎΡ‚ каркас ΠΏΡ€ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Ρ‡Π΅Ρ€Π΅Π· всС Π²Π΅Π±-страницы ΠΈ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ порядок Π½Π° сайтС.

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

Π§Ρ‚ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ, Ссли Π²ΠΎ врСмя прорисовки Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… страниц Ρƒ вас появились Π±Π»ΠΎΠΊΠΈ ΠΈΠ»ΠΈ элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ подходят ΠΊ Π²Π°ΡˆΠ΅ΠΌΡƒ каркасу? НС Ρ…ΠΎΡ‡Ρƒ вас ΠΎΠ³ΠΎΡ€Ρ‡Π°Ρ‚ΡŒ, Π½ΠΎ это ΡΠ²ΠΈΠ΄Π΅Ρ‚Π΅Π»ΡŒΡΡ‚Π²ΡƒΠ΅Ρ‚ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ваша сСтка Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ годится, ΠΈ Π²Ρ‹ нСдостаточно Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ ΡƒΠ΄Π΅Π»ΠΈΠ»ΠΈ Π΅Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ.

КакиС Π±Ρ‹Π²Π°ΡŽΡ‚ сСтки?

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Π²ΠΈΠ΄Ρ‹ сСток для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

1. Блочная сСтка β€” грубая Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ Π½Π° Π±Π»ΠΎΠΊΠΈ.

2. ΠšΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Π°Ρ β€” ΠΈΠΌΠ΅ΡŽΡ‰Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² своСй структурС.

3. ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ β€” состоящая ΠΈΠ· ΠΏΠ΅Ρ€Π΅ΡΠ΅ΠΊΠ°ΡŽΡ‰ΠΈΡ…ΡΡ прямых, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ.

4. Π˜Π΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΠ°Ρ β€” сСтка с ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ΠΌ Π±Π»ΠΎΠΊΠΎΠ², Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ логичСской структуры.

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

Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½. Быстрый старт

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΠΏΠΈΠΏ сайта Π² Figma

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

Π‘Π΅Ρ‚ΠΊΠ° для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° 960 Grid System (//960.gs) ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΠΈ «статичСского» ΠΌΠ°ΠΊΠ΅Ρ‚Π°, Π° для создания Β«Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠ³ΠΎΒ» ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° сСтку Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° Bootstrap (//getbootstrap.com/css/#grid). ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΉ каркас 960 GS Π΄Π΅Π»ΠΈΡ‚ Π²Π΅Π±-страницу Π½Π° 12, 16 ΠΈ 24 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.

ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Β«Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉΒ» структуры Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана. Π•Π΅ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ 1280 пиксСлями. Если Π½Π΅ ΡƒΡ‡Π΅ΡΡ‚ΡŒ максимальноС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅, Ρ‚ΠΎ Π½Π° Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΌΠΎΠ½ΠΈΡ‚ΠΎΡ€Π°Ρ… содСрТимоС сайта Π±ΡƒΠ΄Π΅Ρ‚ сильно растянуто, Ρ‡Ρ‚ΠΎ Π½Π΅Π³Π°Ρ‚ΠΈΠ²Π½ΠΎ повлияСт Π½Π° Π΅Π³ΠΎ восприятиС.

НаиболСС популярной ΠΈ Π»Π΅Π³ΠΊΠΎΠΉ Π² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ являСтся двухколоночная ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка, ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ€Π°ΡΡΡ‡ΠΈΡ‚Ρ‹Π²Π°ΡŽΡ‚ΡΡ с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… Π΄ΠΎΠΏΡƒΡ‰Π΅Π½ΠΈΠΉ:

самоС распространСнноС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ экрана β€”1024Ρ…768;

ΡˆΠΈΡ€ΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Ρ‚ΡŒ 770 пиксСлСй, для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π° экранС с Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ 800Ρ…600 Π²Π½ΠΈΠ·Ρƒ Π½Π΅ появлялась полоса ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ;

ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°, Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‰Π°Ρ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ модуля, Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅Ρ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Ρ‡Π΅ΠΌ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°, которая ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π° ΠΊΠ°ΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ (мСню).

Π˜ΡΡ…ΠΎΠ΄Ρ ΠΈΠ· этого, пропорция выглядит Ρ‚Π°ΠΊ: 200 пикс. + 550 пикс. ΠΈΠ»ΠΈ 150 пикс. + 620 пикс.

Π’ большСй ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ прСдполагаСтся Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ мСню Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π² мСньшСй β€” ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³, ΠΈΠ»ΠΈ содСрТаниС.

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ ΠΈ ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ β€” ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка сайта BBC

Рассмотрим Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° сСтку Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° извСстного сайта. На всСх сайтах BBC ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Π°Ρ структура с ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ 61 Ρ… 16 пиксСлСй, Ρ‡Ρ‚ΠΎ соотвСтствуСт стандартным Ρ„ΠΎΡ‚ΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π±Ρ€Π΅Π½Π΄Π°.

Как ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅, сСтка BBC довольно гибкая ΠΈ позволяСт Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ: ΠΎΡ‚ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½ΠΎΠΉ Π°Π½Π°Π»ΠΈΡ‚ΠΈΠΊΠΈ Π΄ΠΎ Ρ€Π°Π·Π²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… новостСй. Данная ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка являСтся Π²ΠΈΠ·ΠΈΡ‚Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ являСтся стандартной для всСх Π΅Π΅ сайтов. ΠšΡΡ‚Π°Ρ‚ΠΈ, эта ΡˆΡ‚ΡƒΠΊΠ° прСдставляСт собой ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π³Π°ΠΉΠ΄Π»Π°Π½Π° Β«Global Experience LanguageΒ», Ссли ΠΊΠΎΠΌΡƒ интСрСсно.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ BBC ΠΎΡ…ΠΎΡ‚Π½ΠΎ Π΄Π°ΡŽΡ‚ совСты ΠΏΠΎ ΠΏΠΎΠ²ΠΎΠ΄Ρƒ проСктирования ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Ρ… сСток Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ВСлосипСд, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΎΠ½ΠΈ для нас Π½Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π΅Π»ΠΈ, Π½ΠΎ, я Π΄ΡƒΠΌΠ°ΡŽ, Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°ΠΌ Π² ΠΊΠ°Ρ€ΡŒΠ΅Ρ€Π΅ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° это Π±ΡƒΠ΄Π΅Ρ‚ интСрСсно.

1. ΠŸΡ€ΠΎΡ†Π΅ΡΡ начинаСтся с опрСдСлСния мСст для Π±Π»ΠΎΠΊΠΎΠ² Π²Ρ‹ΡΡˆΠ΅ΠΉ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ. ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΠ΅ΠΌ сСбя эдакими Π¨Π΅Ρ€Π»ΠΎΠΊ Π₯олмсами – мастСрами Π΄Π΅Π΄ΡƒΠΊΡ†ΠΈΠΈ ΠΈ соблюдаСм ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Β«ΠžΡ‚ ΠΎΠ±Ρ‰Π΅Π³ΠΎ ΠΊ частному, ΠΎΡ‚ большСго ΠΊ ΠΌΠ΅Π½ΡŒΡˆΠ΅ΠΌΡƒΒ».

2. БпускаСмся Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π΅ΠΌ Π±Π»ΠΎΠΊΠΈ, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π² ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠΈ. ΠŸΡ€ΠΈ этом базируСмся Π½Π° ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π°Ρ… ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, для опрСдСлСния ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‚ΡΡ оТидания ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ Π²Ρ‹ΡΠ²Π»ΡΡŽΡ‚ΡΡ собствСнныС ΠΊΠΎΠ½ΠΊΡƒΡ€Π΅Π½Ρ‚Π½Ρ‹Π΅ прСимущСства.

3. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Π½Π°Ρ‡Π°Π»Π΅ ΠΏΡ€ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ ΠΎΠ±Ρ‰ΡƒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ ΠΈ самыС ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ элСмСнты. Π—Π°Ρ‚Π΅ΠΌ β€” уточняСм, Π΄ΠΎΡ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌ, Π΄Π΅Ρ‚Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅ΠΌ. Для этого Π½Π°ΠΌ понадобится Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΡΠ΅Ρ€ΠΈΡŽ Ρ‡Π΅Ρ€Π½ΠΎΠ²Ρ‹Ρ… эскизов. Волько послС Π΄Π΅Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠΈ ΠΈΠ΄Π΅ΠΈ сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ°Ρ€Π°Π½Π΄Π°ΡˆΠ° ΠΈ Π±ΡƒΠΌΠ°Π³ΠΈ Π½Π°ΠΊΠΎΠ½Π΅Ρ†-Ρ‚ΠΎ садимся Π·Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€.

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

Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΡˆΠΈΡ€ΠΎΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΊΠ°ΠΊ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠ°ΠΌΠΈ, Ρ‚Π°ΠΊ ΠΈ мастСрами Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Он позволяСт Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΡΠΊΠΎΠ½ΠΎΠΌΠΈΡ‚ΡŒ ΠΊΡƒΡ‡Ρƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Π½ΠΎ ΠΈ Π½Π°ΠΉΡ‚ΠΈ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ слоТных Π·Π°Π΄Π°Ρ‡.

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

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

ΠŸΠΎΠ΄ΠΏΠΈΡΡ‹Π²Π°ΠΉΡ‚Π΅ΡΡŒ Π½Π° обновлСния нашСго Π±Π»ΠΎΠ³Π° ΠΈ Π΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ Ρ†Π΅Π½Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ с Π΄Ρ€ΡƒΠ·ΡŒΡΠΌΠΈ. ВсСм ΡƒΠ΄Π°Ρ‡Π½Ρ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Ρ… сСток ΠΈ Π΄ΠΎ Π½ΠΎΠ²Ρ‹Ρ… встрСч!

Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½. Быстрый старт

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΠΏΠΈΠΏ сайта Π² Figma

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

Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½. Быстрый старт

Π˜Π·ΡƒΡ‡ΠΈΡ‚Π΅ курс ΠΈ ΡƒΠ·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΏΡ€ΠΎΡ‚ΠΎΠΏΠΈΠΏ сайта Π² Figma!

Π‘ΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π²ΠΈΠ΄Π΅ΠΎ

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСтки Π² Ρ€Π°Π±ΠΎΡ‚Π΅ UX-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°. Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ ΠΏΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡŽ | by Natalie Hrodskaya | DesignSpot

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

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

Как Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ сСткой, слоТно Π½Π΅ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ Π΅Ρ‘ прСимущСства:

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

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

Блочная ΠΈΠ»ΠΈ манускриптная сСтка β€” самый простой Π²ΠΈΠ΄ сСтки, которая, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹Ρ… изданиях. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ такая сСтка прСдставляСт собой стандартизированный ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π° страницС ΠΈΠ»ΠΈ Π½Π° экранС.

Π’ качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°, ΠΌΠΎΠΆΠ½ΠΎ привСсти простыС страницы Π±Π»ΠΎΠ³ΠΎΠ², статСй, новостСй, Π³Π΄Π΅ страницы ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Ρ‹ для сплошного чтСния. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ:https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/

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

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Ρ‹ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΡƒΠ·ΠΊΠΈΠΉ ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½Π½ΠΈΠΊ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ для Ρ†Π΅Π½ Π½Π° Π±ΠΈΠ»Π΅Ρ‚Ρ‹ символ Π΄ΠΎΠ»Π»Π°Ρ€Π° вынСсСн Π·Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ, Ρ‚.ΠΊ. ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ мСньший Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ вСс, Ρ‡Π΅ΠΌ сама Ρ†Π΅Π½Π°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ ΠΏΡ€ΠΈΠ±Π΅Π³Π½ΡƒΠ» ΠΊ оптичСской компСнсации, Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ выстраивая Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΡƒΡŽ линию ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±ΠΎΠ»Π΅Π΅ β€œΡ‚ΡΠΆΠ΅Π»Ρ‹Ρ…β€ Ρ†ΠΈΡ„Ρ€ Ρ†Π΅Π½ 39–67. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ:https://silotheatre.co.nz/here-lies-loveΠ¨ΠΈΡ€ΠΎΠΊΠΈΠΉ ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½Π½ΠΈΠΊ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ дизайнСрским Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ:https://www.nationalgeographic.com/

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка характСризуСтся Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ΠΌ ΠΊΠ°ΠΊ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ члСнСния, Ρ‚Π°ΠΊ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ. Π’ΠΎ, Ρ‡Ρ‚ΠΎ образуСтся Π½Π° пСрСсСчСниях, Π΅ΡΡ‚ΡŒ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ β€” ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ с Π·Π°Π΄Π°Π½Π½ΠΎΠΉ высотой ΠΈ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»Π΅ΠΆΠΈΡ‚ Π² основС ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ. Π‘Π΅Ρ‚ΠΊΠ° опрСдСляСт ΠΊΠ°ΠΊ Π² Ρ†Π΅Π»ΠΎΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈ Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ располоТСны ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты: тСкстовыС Π±Π»ΠΎΠΊΠΈ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, изобраТСния.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки ΠΈΠ· ΠΊΠ½ΠΈΠΆΠ½ΠΎΠΉ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ, Π³Π΄Π΅ сСтка содСрТит 4 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ 4 ряда. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ тСкстовый Π±Π»ΠΎΠΊ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ:thinkingwithtype.comΠŸΡ€ΠΈΠΌΠ΅Ρ€ создания ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ‚Π° страницы с Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ΠΌ основных Π±Π»ΠΎΠΊΠΎΠ² ΠΏΠΎ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСткС. Π’ качСствС модуля ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ объСдинСниС Π΄Π²ΡƒΡ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ Π΄Π²ΡƒΡ… Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… строк.ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки, Π³Π΄Π΅ Π² качСствС модуля взят ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π·Π°Π΄Π°Π½Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ². Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ:http://bodhicycling.be/home

Π˜Π΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΠ°Ρ β€” сСтка с ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ΠΌ Π±Π»ΠΎΠΊΠΎΠ², которая фокусируСтся Π½Π° пропорциях ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌ вСсС элСмСнтов Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. Π­Ρ‚ΠΎΡ‚ Ρ‚ΠΈΠΏ сСтки часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π΅ стандартизированный ΠΈ Π½Π΅ ΠΎΠ΄Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΉ. Часто встрСчаСтся для бизнСс Π΄ΠΎΠΌΠ΅Π½ΠΎΠ², связанных с ΠΌΠΎΠ΄ΠΎΠΉ, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠ΅ΠΉ, искусством.

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ:https://www.behance.net/gallery/28285019/OEHLIN-B

НаиболСС слоТной для построСния являСтся ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка, ΠΎΠ½Π° Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π² Ρ‚ΠΎΠΌ числС ΠΈ построСниС ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Π΅Ρ‘ создания.

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

И Ρ‚Π°ΠΊ, Π½Π°Ρ‡Π½Π΅ΠΌ с Π±Π°Π·ΠΎΠ²ΠΎΠΉ сСтки. Она Π½Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅Ρ‚ ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅Ρ‚Ρ€ΠΎΠ²ΡƒΡŽ Π±ΡƒΠΌΠ°Π³Ρƒ. Она ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ самыС ΠΌΠ΅Π»ΠΊΠΈΠ΅ элСмСнты ΠΌΠ°ΠΊΠ΅Ρ‚Π°, сохраняя всС расстояния ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ Ρ€Π°Π²Π½Ρ‹ΠΌΠΈ ΠΈ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ. Π¨Π°Π³ сСтки зависит ΠΎΡ‚ Π½Π΅Π΄Π΅Π»ΠΈΠΌΡ‹Ρ… элСмСнтов (Π°Ρ‚ΠΎΠΌΠΎΠ²) ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Ими ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ ΠΈ высота строки, Ρ€Π°Π΄ΠΈΠΎ-ΠΊΠ½ΠΎΠΏΠΊΠ°, чСкбокс, минимальноС расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠ΅ΠΆΠ΄Ρƒ фотографиями Π² Π³Π°Π»Π΅Ρ€Π΅Π΅ ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌΠΈ Ρ‚ΠΎΠ²Π°Ρ€ΠΎΠ².

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Π±Π°Π·ΠΎΠ²ΠΎΠΉ сСтки являСтся 8-ΠΌΠΈ пиксСльная сСтка ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² Material Design. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ:https://material.io/design/layout/spacing-methods.html#ΠŸΡ€ΠΈΠΌΠ΅Ρ€ выравнивания элСмСнтов ΠΏΠΎΠΏΠ°ΠΏΠ° ΠΏΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ 8-ΠΌΠΈ пиксСльной сСткС. ВсС элСмСнты ΠΈ расстояния ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ ΠΊΡ€Π°Ρ‚Π½Ρ‹ 8. Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ EPAM

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

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

ПолноС руководство ΠΏΠΎ сСткам Π² Π²Π΅Π± Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

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

Π’Π΅ΠΌΡ‹

В этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ мы рассмотрим ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ:

  • БСтки

  • ВСрминология

  • ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ трСтСй

  • 12-колоночная сСтка

  • АкцСнты

  • ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡβ€¨
  • ΠœΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Π°Ρ карта


Π‘Π΅Ρ‚ΠΊΠΈ

Π‘Π΅Ρ‚ΠΊΠ° ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π±Π°Π·ΠΎΠ²ΡƒΡŽ структуру, скСлСт вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Они состоят ΠΈΠ·Β Β«Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ…Β» Π»ΠΈΠ½ΠΈΠΉ, Π½Π°Β ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ располоТСны ваши элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π­Ρ‚ΠΎ связываСт ΠΈΡ…Β Π²Β ΠΎΠ±Ρ‰ΡƒΡŽ систСму ΠΈΒ Ρ€Π°Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ.

BBC

Π‘Π΅Ρ‚ΠΊΠ° ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ эффСктивного выравнивания и логичности ΡΒ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ усилиями. Π˜ΠΌΠΏΡ€ΠΎΠ²ΠΈΠ·Π°Ρ†ΠΈΡ ΠΈΒ Π½Π°Π΄Π΅ΠΆΠ΄Π° Π½Π°Β Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ всС Π²Β ΠΈΡ‚ΠΎΠ³Π΅ ΠΊΠ°ΠΊ-Ρ‚ΠΎ сдСлаСтся, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π΅Β ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ. Если всС Π΄Π΅Π»Π°Ρ‚ΡŒ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‚ΠΎΒ Π²Β Π²Π°ΡˆΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ… Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎΡΡ‚ΡŒ ΠΈΒ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΡΡ‚ΡŒ.

Π₯ΠΎΡ€ΠΎΡˆΠ΅Π΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ и большая Ρ‡Π°ΡΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ практичСски Π½Π΅Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌΠΈ вашим ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ. ВсС Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²Β ΠΌΠ΅Ρ€Ρƒ. Если Π±ΡƒΠ΄Π΅Ρ‚ слишком ΠΌΡƒΠ΄Ρ€Π΅Π½ΠΎ, вы рискуСтС ΠΎΡ‚Π²Π»Π΅Ρ‡ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ от их основной Ρ†Π΅Π»ΠΈ: поиска ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, и быстро Π΅Π³ΠΎ ΠΏΡ€ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ. Π’Π°ΡˆΠ° Π·Π°Π΄Π°Ρ‡Π°Β β€” Π½Π΅Β Ρ…Π²Π°ΡΡ‚Π°Ρ‚ΡŒΡΡ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊΠΈΠΌ изящным Π²Ρ‹Β ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π±Ρ‹Ρ‚ΡŒ с вашими Π½Π°Π²Ρ‹ΠΊΠ°ΠΌΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π•Ρ‰Π΅ Ρ…ΡƒΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π΅Ρ‚Π°Ρ‚ΡŒ вСлосипСд, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ свою Ρ‚ΠΎΡ‡ΠΊΡƒ зрСния. ΠžΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΠΈΠ΅ выравнивания ΠΎΡ‡Π΅Π½ΡŒ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли это нС сдСлано Π½Π°Ρ€ΠΎΡ‡Π½ΠΎ, ΠΏΠΎΒ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ творчСской ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅), и создаСт Π½Π΅Ρ€ΡΡˆΠ»ΠΈΠ²Ρ‹ΠΉ Π²ΠΈΠ΄. Π­Ρ‚ΠΎ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊΒ ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΠΈΡŽ довСрия со стороны ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ видят ваш Π΄ΠΈΠ·Π°ΠΉΠ½.

ВСрминология

Колонка

ΠšΠΎΠ»ΠΎΠ½ΠΊΠΈΒ β€” это основныС ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ сСтки. Π’Β ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΎΡ‚Β BBC Π²Ρ‹Β Π²ΠΈΠ΄ΠΈΡ‚Π΅ 12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΡƒΡŽ сСтку. КаТдая фиолСтовая полоса ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΎΠ΄Π½Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ.

ΠœΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ±Π΅Π»

Π£Π·ΠΊΠΈΠ΅ ΠΆΠ΅Π»Ρ‚Ρ‹Π΅ полоски на рисункС Π½ΠΈΠΆΠ΅Β β€” это ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»ΡΡŽΡ‚ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ. Они ΡΠ²Π»ΡΡŽΡ‚ΡΡ Ρ„ΠΎΡ€ΠΌΠΎΠΉ ΠΌΠΈΠΊΡ€ΠΎ-ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π°ΡŽΡ‚ сСткС Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΎΠ·Π΄ΡƒΡ…Π°.

Π‘Ρ‚ΠΎΠ»Π±Ρ†Ρ‹

Π’Π΅ΠΏΠ΅Ρ€ΡŒ становится интСрСснСС. НСсколько ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈΒ ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ² ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ столбцы, Π²Β ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… эффСктивно и стратСгичСски Π²Π΅Ρ€Π½ΠΎ размСщаСтся ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. ΠΠ°Β Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ этапС столбцы ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅Β ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ, Π½ΠΎΒ ΠΏΡ€ΠΈ создании Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΡΒ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π°ΠΊΠΈΡ… ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ, ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΡ‚ΡŒ процСсс. ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ быстрСС Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с тСм, Π³Π΄Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

Π’Β ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, Π²Ρ‹Β ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… столбца. Π£Β ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ свой Ρ€Π°Π·ΠΌΠ΅Ρ€ для ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΈΠ»ΠΈ для создания Π°ΠΊΡ†Π΅Π½Ρ‚Π°.

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

Поля

Поля Π²ΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ в сСбя столбцы ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΠΈΒ ΠΎΠ±Ρ€Π°Π·ΡƒΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΡ‹ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ Π΄Π΅Π»Π΅Π½ΠΈΠ΅ страниц. Π­Ρ‚ΠΎ нС плохая идСя — стрСмится к полям ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ высоты Π½Π°Β Π²Π°ΡˆΠΈΡ… страницах. Но на практикС этого слоТно Π΄ΠΎΡΡ‚ΠΈΡ‡ΡŒ. Если ваши поля ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ высоты, и это Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с вашим Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌΒ β€” ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ. Если Π½Π΅Ρ‚, Ρ‚ΠΎΒ Π΄Π²ΠΈΠ³Π°ΠΉΡ‚Π΅ΡΡŒ дальшС ΠΈΒ Π·Π°ΠΉΠΌΠΈΡ‚Π΅ΡΡŒ Π΄Π΅Π»Π°ΠΌΠΈ ΠΏΠΎΠ²Π°ΠΆΠ½Π΅Π΅.

ΠŸΡ€Π°Π²ΠΈΠ»ΠΎ Ρ‚Ρ€Π΅Ρ‚Π΅ΠΉ

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

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

Π˜Β Π½Π΅Β Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ мы всС ΠΏΠΎΒ Ρ€Π°Π·Π½ΠΎΠΌΡƒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ воспринимаСм ΠΌΠΈΡ€. ΠœΡ‹Β Π²ΡΠ΅ Ρ€Π°Π·Π½Ρ‹Π΅. ΠœΡ‹Β Π½Π΅Β ΠΌΠ°ΡˆΠΈΠ½Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… матСматичСских Ρ‚ΠΎΡ‡Π΅ΠΊ зрСния ΠΏΡ€ΠΈ взглядС Π½Π°Β ΠΌΠΈΡ€. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π°Β Reddit, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€. ΠŸΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ заботятся ΠΎΒ Π²ΠΎΠ»ΡˆΠ΅Π±Π½Ρ‹Ρ… пСрСкрСстах?

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

Π‘Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ с ума, Π½Π°Ρ€ΡƒΡˆΠ°ΠΉΡ‚Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π°, ΠΏΠΎΠ²Π΅ΡΠ΅Π»ΠΈΡ‚Π΅ΡΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ, и Ссли Π²Π°ΠΌ ΠΏΠΎΠ²Π΅Π·Π΅Ρ‚, Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π½ΠΎΠ²Ρ‹Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹!

Π—ΠΎΠ»ΠΎΡ‚ΠΎΠ΅ сСчСниС

В то врСмя, ΠΊΠ°ΠΊ мы находимся в волшСбном царствС Π²Π΅Ρ‰Π΅ΠΉ Π²Β Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, ΠΏΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ ΠΌΠ½Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡ€Π°Π·Π³Π»Π°Π³ΠΎΠ»ΡŒΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΒ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ к этому ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅: люди Π΄ΠΎΠ»Π³ΠΎΠ΅ врСмя Π²Π΅Ρ€ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎ использованиС «боТСствСнных» ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ Π·ΠΎΠ»ΠΎΡ‚ΠΎΠ³ΠΎ сСчСния принСсСт особСнный Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚, приятный чСловСчСскому Π³Π»Π°Π·Ρƒ. Но нСкоторыС экспСримСнты ставят ΠΏΠΎΠ΄ вопрос эти нСсоврСмСнныС прСдполоТСния.

Витрувианский Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ Π›Π΅ΠΎΠ½Π°Ρ€Π΄ΠΎ Π”Π°Β Π’ΠΈΠ½Ρ‡ΠΈ

ΠžΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Ρ€Π΄ΠΈΠΊΡ‚ по этому вопросу Π΅Ρ‰Π΅ нС вынСсСн, ΠΈΒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±ΡΡƒΠΆΠ΄Π°Ρ‚ΡŒΡΡ Π΅Ρ‰Π΅ Π΄ΠΎΠ»Π³ΠΎΠ΅ врСмя, ΠΎΠ΄Π½Π°ΠΊΠΎ Π½ΠΈΡ‡Ρ‚ΠΎ Π½Π΅Β Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΌΠ΅ΡˆΠ°Ρ‚ΡŒ Π½Π°ΠΌ ΡƒΡΠΎΠΌΠ½ΠΈΡ‚ΡŒΡΡ в этих прСдполоТСниях. Нам Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ стоит ΠΎΡ‚ΠΎΠΉΡ‚ΠΈ от магичСского ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΡ. НСкотороС врСмя для мСня это ΠΈΠΌΠ΅Π»ΠΎ смысл, Ρ‡Ρ‚ΠΎ «золотая сСрСдина» ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ приятной людям, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹Β ΠΎΠΊΡ€ΡƒΠΆΠ΅Π½Ρ‹Β Π΅ΠΉ. ΠΠΎΒ ΠΎΠΏΡΡ‚ΡŒΒ ΠΆΠ΅, Π±Ρ‹Π»ΠΈΒ Π±Ρ‹ ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΎΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒΡΡ‚Π²Π°. ΠœΠΎΠΆΠ΅Ρ‚ Π΅ΡΡ‚ΡŒ, ΠΌΠΎΠΆΠ΅Ρ‚ Π½Π΅Ρ‚, но это Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π΅Β Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ я хочу ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½ΠΎΠ΅ ΠΈΒ ΠΎΠΏΠΈΡ€Π°Ρ‚ΡŒΡΡ на это в своСй Ρ€Π°Π±ΠΎΡ‚Π΅.

12-колоночная сСтка

ВСрнСмся ΠΊΒ Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€Π°Π³ΠΌΠ°Ρ‚ΠΈΡ‡Π½Ρ‹ΠΌ Π²Π΅Ρ‰Π°ΠΌ. ΠœΠ½Π΅Β Π±Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ эту ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π°Π·Π½ΠΎΡΡ‚ΠΎΡ€ΠΎΠ½Π½ΡŽΡŽ сСтку, ΠΈΒ Π½Π°Ρ‡Π°Ρ‚ΡŒ с чСго-Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠ³Π»ΠΎΒ Π±Ρ‹ Π²Π°ΠΌ Π²Β Π½Π°Ρ‡Π°Π»Π΅ вашСй систСмы по созданию ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ². 12-колоночная сСтка ваш Π΄Ρ€ΡƒΠ³.

Etsy

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

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π°Β ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Ρ‚Π°ΠΊΡƒΡŽ Β«Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒΒ» сСтки.

4-Ρ… колоночная сСтка

ΠžΡΠ½ΠΎΠ²Π½Ρ‹Π΅ прСимущСства Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ сСтки в СС простотС, балансС, Π°Β Ρ‚Π°ΠΊΠΆΠ΅ Π²Β Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΎΡ‡Π΅Π½ΡŒ надСТная. Но обратной стороной являСтся то, Ρ‡Ρ‚ΠΎ ΠΈΠ·-Π·Π° своСй симмСтричности ΠΎΠ½Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ скучно.

Часто, Π²Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ основной Ρ€Π°Π·Π΄Π΅Π», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½ΡƒΡ‚ΡŒ содСрТаниС, и боковая панСль для ΠΌΠ΅Π½Π΅Π΅ Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π’Β ΠΏΠ΅Ρ€Π²ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅, Π²Ρ‹Β ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ столбСц ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π±Ρ€Π΅Π½Π΄ΠΈΠ½Π³Π°, Π°Β Π΄Π²Π΅ срСдниС ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ для основного ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

form

Harvard Design Magazine

Etsy

Wallpaper

marie claire

3-Ρ… колоночная стСка

Π‘Β ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этой сСтки, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ столбСц Π²ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ в сСбя 3Β ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π­Ρ‚ΠΎΡ‚ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ слоТнСС, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это асиммСтричная сСтка, ΠΈΒ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·ΡƒΠΌΠ½ΠΎ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ баланс для своСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. АсиммСтричныС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, ΡΡ‡ΠΈΡ‚Π°ΡŽΡ‚ΡΡ Π±ΠΎΠ»Π΅Π΅ смСлыми и качСствСнно сдСланными. Но это, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΒ Π½ΡƒΠΆΠ½ΠΎ ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ сомнСниС!

Wallpaper

Kickstarter

Kickstarter

Wallpaper

WIRED

6-Ρ‚ΠΈ колоночная сСтка

В этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ столбСц Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ в сСбя Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Ρ‚Π°ΠΊΡƒΡŽ сСтку Π΅Ρ‰Π΅ Π±ΠΎΠ»Π΅Π΅ слоТной, Ρ‡Π΅ΠΌ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΡƒΡŽ. Она раздСляСт ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ столбСц сСтки Π½Π°Β Π΅Ρ‰Π΅ 2 столбца. ШСстиколоночная сСтка прСдоставляСт Π²Π°ΠΌ большС возмоТностСй для Ρ‚ΠΎΡ‡Π½ΠΎΠΉ настройки ΠΌΠ΅Π»ΠΊΠΈΡ… Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ. Если Π²Ρ‹Β Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π½Π°Π΄ сайтом, Π²Β ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ большоС количСство ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, ΡˆΠ΅ΡΡ‚ΠΈΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Π°Ρ сСтка ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ ΠΎΡ‚ΠΏΡ€Π°Π²Π½ΠΎΠΉ Ρ‚ΠΎΡ‡ΠΊΠΎΠΉ для экспСримСнтов. ΠΠΎΒ ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это достаточно слоТная сСтка, я бы нС совСтовал Π²Π°ΠΌ Π΅Π΅Β ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Β Π½Π°Ρ‡Π°Π»Π΅ своСго ΠΏΡƒΡ‚ΠΈ.

Wallpaper

The New York Times

ΠšΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ

Π’Ρ‹Β Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ сСтки в вашСм Π΄ΠΈΠ·Π°ΠΉΠ½Π΅, ΠΈΠΌΠ΅Π½Π½ΠΎ поэтому двСнадцатиколоночная сСтка ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½Π°. Она Π»Π΅Π³ΠΊΠΎ позволяСт Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΠΈ ΠΈΠ·Β Ρ‚Ρ€Π΅Ρ…, Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… ΠΈΒ ΡˆΠ΅ΡΡ‚ΠΈ ΠΊΠΎΠ»ΠΎΠ½Π½.

Etsy

BBC

Etsy

Etsy

BBC

Etsy

Etsy

Etsy

АкцСнты

БбалансированныС и простыС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ часто Ρ‡ΡƒΠ²ΡΡ‚Π²ΡƒΡŽΡ‚ сСбя Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΡ„ΠΎΡ€Ρ‚Π½ΠΎ, Ρ‡Π΅ΠΌ Ρ‡Ρ€Π΅Π·ΠΌΠ΅Ρ€Π½ΠΎ слоТныС. ΠΠΎΒ Π±ΡƒΠ΄ΡŒΡ‚Π΅ остороТны, ΠΈΒ Π½Π΅Β Π·Π°ΠΈΠ³Ρ€Π°ΠΉΡ‚Π΅ΡΡŒ Π²Β Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ и простоту, Π΅ΡΡ‚ΡŒ риск, Ρ‡Ρ‚ΠΎ Ρ‚ΠΎΠ³Π΄Π° ваш Π΄ΠΈΠ·Π°ΠΉΠ½ Π±ΡƒΠ΄Π΅Ρ‚ скучным. Для Π°ΠΊΡ†Π΅Π½Ρ‚Π°, Π²Ρ‹Β ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΡ‚ΠΎΠΉΡ‚ΠΈ от сСтки ΠΈΒ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ элСмСнты Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΏΡƒΡ‚Π΅ΠΌ объСдинСния Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ интСрСсно Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ, Π°Β Ρ‚Π°ΠΊΠΆΠ΅ создаст ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ Π²Π°ΡˆΠΈΡ… основных элСмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

Etsy

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

Wallpaper

form

Wallpaper

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

ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡ

Вопрос, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ часто Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚: ΠΊΠΎΠ³Π΄Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСтку Π²Β Π΄ΠΈΠ·Π°ΠΉΠ½Π΅? ВсСгда! Π­Ρ‚ΠΎ всСгда Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ сСтка ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ с балансом, ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΠ΅ΠΉ, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΈΒ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ.

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

Π’Β ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈΠ·Β The Wall Street Journal, Π²Ρ‹Β ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ€Π΅ΠΊΠ»Π°ΠΌΡ‹, Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Π·Π΅Π»Π΅Π½Ρ‹ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, ΠΏΡ€ΠΈΠ²Π΅Π»ΠΎ к дизайнСрскому Ρ€Π΅ΡˆΠ΅Π½ΠΈΡŽ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‡Π°ΡΡ‚ΡŒ сСтки с ним.

ΠœΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Π°Ρ ΠΊΠ°Ρ€Ρ‚Π°

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

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

Они создали Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ Ρ€ΠΈΡ‚ΠΌ для своих страниц, их сСтка выглядит элСгантно, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ сдСлали всС просто.

НапослСдок

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

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка ΠΈ для Ρ‡Π΅Π³ΠΎ ΠΎΠ½Π° Π½ΡƒΠΆΠ½Π° Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

ВсС, Ρ‡Ρ‚ΠΎ ΠΎΠΊΡ€ΡƒΠΆΠ°Π΅Ρ‚ нас, ΠΈΠΌΠ΅Π΅Ρ‚ свои ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ – Ρ‚ΠΎΡ‡Π½Π΅Π΅, ΠΌΡ‹ ΠΈΡ‰Π΅ΠΌ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ Π² Π²Π΅Ρ‰Π°Ρ… Π²ΠΎΠΊΡ€ΡƒΠ³. Для Ρ‡Π΅Π³ΠΎ? Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡ‰Π΅ ΡΡ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚Ρ‹, ΠΊΠΎΠ½ΡΡ‚Ρ€ΡƒΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π² пространствС.Β Π•Ρ‰Π΅ Π² дСтствС ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΊ β€œ38 попугаСв” Π½Π°ΡƒΡ‡ΠΈΠ» нас Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ всС ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° части, Ρ€Π°Π²Π½Ρ‹Π΅ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Ρƒ (Π΄Π»ΠΈΠ½Π° ΡƒΠ΄Π°Π²Π° состояла ΠΈΠ· 38 ΠΏΠΎΠΏΡƒΠ³Π°Π΅Π²).

Π’Π°ΠΊΠΆΠ΅ всС ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ рост Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° равняСтся сСми Π΅Π³ΠΎ Π³ΠΎΠ»ΠΎΠ²Π°ΠΌ, сантимСтр состоит ΠΈΠ· дСсяти ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ΠΌΠ΅Ρ‚Ρ€ ΠΈΠ· ста сантимСтров ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΏΠΎΠΏΡƒΠ³Π°ΠΉ ΠΈΠ· ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΊΠ°, Π³ΠΎΠ»ΠΎΠ²Π° Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ°, ΠΌΠΈΠ»Π»ΠΈΠΌΠ΅Ρ‚Ρ€ ΠΈ сантимСтр – это ΠΌΠΎΠ΄ΡƒΠ»ΠΈ.

Из всСго этого ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ – это условная Π΅Π΄ΠΈΠ½ΠΈΡ†Π°, шаг Π² Ρ€ΠΈΡ‚ΠΌΠ΅ сСтки. А сама сСтка являСт собой систСму ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ.

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

Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΆΠ΅ рассмотрим, ΠΊΠ°ΠΊΠΈΠΌΠΈ Π±Ρ‹Π²Π°ΡŽΡ‚ сСтки 

1.Β Π‘Π°ΠΌΡ‹ΠΉ простой Ρ‚ΠΈΠΏ – блочная сСтка

Π’ΠΎ Π΅ΡΡ‚ΡŒ, ΠΎΠ½Π° Π΄Π΅Π»Π°Π΅Ρ‚ Π³Ρ€ΡƒΠ±ΡƒΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, раздСляя ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ Π½Π° Π±Π»ΠΎΠΊΠΈ.

Блочная сСтка

2. Π‘Π΅Ρ‚ΠΊΠ°, раздСлСнная Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π‘Π΅Ρ‚ΠΊΠ°, раздСлСнная Π½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ

3. ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка

Она ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ‡Π»Π΅Π½Π΅Π½ΠΈΠ΅, Π½ΠΎ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ – Ρ‚Π°ΠΊ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€, Π½Π΅ вычисляя ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ расстояниС Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ получаСтся Π½Π° пСрСсСчСниях прямых, ΠΈ Π΅ΡΡ‚ΡŒ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ.

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка

4. Π˜Π΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΠ°Ρ сСтка,

Π±Π»ΠΎΠΊΠΈ Π² Π½Π΅ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ ΠΈ Π½Π΅ ΠΏΠΎΠ΄Π΄Π°ΡŽΡ‚ΡΡ Π½ΠΈΠΊΠ°ΠΊΠΈΠΌ закономСрностям.

Π˜Π΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΠ°Ρ сСтка

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ сСтку. Β 

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

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

2.Β Π”Π°Π»Π΅Π΅ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эскиз, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ схСматичСски ΠΈΠ·ΠΎΠ±Ρ€Π°Π·ΠΈΠΌ всС, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π² нашСм спискС. Эскиз Π½ΡƒΠΆΠ΅Π½ для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ впослСдствии ΠΌΡ‹ смогли ΠΏΠΎΠ½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ ΠΈ ΡΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ сСтку.

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

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ основаниС нашСй Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΉ сСтки. На это основаниС Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΠΈΡ€Π°Ρ‚ΡŒΡΡ вСсь тСкст.

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

Для удобства Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠΌ Π±ΡƒΠ΄Π΅Ρ‚ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ модулями. Оно Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π²Π½ΠΎ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ ΠΎΠ΄Π½ΠΎΠΉ высотС строки ΠΈΠ· ΠΏΡ€ΠΎΡˆΠ»ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π°.

Π•ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ нюанс – Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ модуля, вСдь Ссли ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ слишком большими, Ρ‚ΠΎ ΠΏΡ€ΠΎΠΏΠ°Π΄Π΅Ρ‚ Π³ΠΈΠ±ΠΊΠΎΡΡ‚ΡŒ сСтки, Π° Ссли ΠΆΠ΅ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ ΠΌΠ΅Π»ΠΊΠΈΠΌΠΈ, Ρ‚ΠΎ сСтка просто потСряСтся.

5.Β Π“ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Ρ‡Π»Π΅Π½Π΅Π½ΠΈΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ достаточно просто. Π•Π³ΠΎ высота Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΊΡ€Π°Ρ‚Π½Π° высотС нашСй строки. А ΡƒΠΆ сколько строк Π²Ρ‹ вставитС Π² ΠΎΠ΄Π½ΠΎ Ρ‡Π»Π΅Π½Π΅Π½ΠΈΠ΅ – это ΡƒΠΆΠ΅ зависит ΠΎΡ‚ вашСго эскиза.

6. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ Π² Ρ€Π΅Π³ΠΈΠΎΠ½Ρ‹ ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка вСсьма ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Π² построСнии сайта, Π½ΠΎ Ссли композиция Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π»ΡƒΡ‡ΡˆΠ΅ Π±Π΅Π· Π½Π΅Π΅, Ρ‚ΠΎ Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ Π²ΠΏΡ€Π°Π²Π΅ Π²Π°ΠΌ Π·Π°ΠΏΡ€Π΅Ρ‚ΠΈΡ‚ΡŒ Π΅Π΅ β€œΡΠ»ΠΎΠΌΠ°Ρ‚ΡŒβ€. ВсС Ρ‚Π°ΠΊΠΈ чСловСчСский Π³Π»Π°Π· ΠΈΠ½ΠΎΠ³Π΄Π° воспринимаСт Π³Ρ€Π°Ρ„ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π½Π΅ Ρ‚Π°ΠΊΠΎΠΉ, ΠΊΠ°ΠΊΠΎΠΉ ΠΎΠ½Π° являСтся Π½Π° самом Π΄Π΅Π»Π΅.

Для облСгчСния поисков инструмСнтов построСния сСток Π²ΠΎΡ‚ Π²Π°ΠΌ нСсколько ссылок:

1.Β Guide GuideΒ ΠΈ GridMaker – ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для Photoshop.

2.Β Grid System Generator,Β Modular Grid PatternΒ ΠΈΒ 960 Grid System – ΠΎΠ½Π»Π°ΠΉΠ½ инструмСнты, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΡƒΠΆΠ΅ Π³ΠΎΡ‚ΠΎΠ²ΡƒΡŽ сСтку Π½ΡƒΠΆΠ½Ρ‹Ρ… Π²Π°ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ².

3. Gridpak – позволяСт ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сСтку для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта.

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

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

Π’ сСти ΠΏΠΎΠ»Π½ΠΎ инструмСнтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сСтку Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° – Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Π΄Π°Π΅ΠΌ ссылки лишь Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅. Но Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅: сСтка – Π½Π΅ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅. Если композиция Π±Π΅Π· Π½Π΅Π΅ смотрится Π»ΡƒΡ‡ΡˆΠ΅, Π½Π΅ Π±ΠΎΠΉΡ‚Π΅ΡΡŒ β€œΡΠ»ΠΎΠΌΠ°Ρ‚ΡŒβ€ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ ΠΊΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡŽ.

Π§ΠΈΡ‚Π°ΠΉΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Π»Π΅ΠΊΡ†ΠΈΠΈ ΠΏΠΎ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСткС

14 Π»ΡƒΡ‡ΡˆΠΈΡ… инструмСнтов для Π²Ρ‹Π±ΠΎΡ€Π° Ρ†Π²Π΅Ρ‚ΠΎΠ²Ρ‹Ρ… схСм

ДизайнСрскоС исслСдованиС ΠΈΠ»ΠΈ Ρ‡Π΅Ρ‚ΠΊΠΈΠ΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹? Когда ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Ρ€ΡƒΡˆΠ°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»Π° Π² Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

Π°Π½Π°Π»ΠΈΠ·, расчСт ΠΈ построСниС / Π₯Π°Π±Ρ€

Intro

ΠšΡ€Π°Ρ‚ΠΊΠ°Ρ прСдыстория

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Π₯Π°Π±Ρ€. Π― Ρ‡ΠΈΡ‚Π°ΡŽ тСбя Π±Π΅Π· ΠΌΠ°Π»ΠΎΠ³ΠΎ 10 Π»Π΅Ρ‚, Π½ΠΎ Π½ΠΈ Ρ€Π°Π·Ρƒ Π½Π΅ писал статСй. Π‘Π½Π°Ρ‡Π°Π»Π° ΡΠΊΠ°Π·Π°Ρ‚ΡŒ Π±Ρ‹Π»ΠΎ Π½Π΅Ρ‡Π΅Π³ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌ β€” Π½Π΅ΠΊΠΎΠ³Π΄Π°. Но сСгодня Π·Π²Ρ‘Π·Π΄Ρ‹ сошлись ΠΈ ΠΏΠΎΠ΄Π²Π΅Ρ€Π½ΡƒΠ»Π°ΡΡŒ подходящая Ρ‚Π΅ΠΌΠ°. ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка.

Казалось Π±Ρ‹, Π½Π°Π±Ρ€ΠΎΡΠ°Ρ‚ΡŒ сСтку β€” Π΄Π΅Π»ΠΎ пяти ΠΌΠΈΠ½ΡƒΡ‚. Всё Ρ€Π°Π·ΠΆΡ‘Π²Π°Π½ΠΎ Π΄ΠΎ нас, ΠΈ бутстрапы Π΅ΡΡ‚ΡŒ Π½Π° любой вкус, ΠΈ Β«ΠΠ½Π½ΡƒΡˆΠΊΠ° ΡƒΠΆΠ΅ ΠΏΡ€ΠΎΠ»ΠΈΠ»Π° своё масло…Β». Но Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ² Ρ‡Π°ΡΡ‚Π΅Π½ΡŒΠΊΠΎ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ вопросы. ΠœΠ½ΠΎΠ³ΠΈΡ… вводят Π² ступор Π΄Π°ΠΆΠ΅ нСбольшиС отступлСния ΠΎΡ‚ ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½Ρ‹Ρ… 12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… сСток, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΈΠΌ Π½Π΅ Π΄ΠΎ ΠΊΠΎΠ½Ρ†Π° понятны ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ построСния.

Когда-Ρ‚ΠΎ эту Ρ‚Π΅ΠΌΡƒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ раскрывал Ρ†ΠΈΠΊΠ» статСй АлСксСя Π§Π΅Ρ€Π΅Π½ΠΊΠ΅Π²ΠΈΡ‡Π°, Π½ΠΎ тСксты ΠΏΡ€ΠΎΠΏΠ°Π»ΠΈ ΠΈΠ· ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠ³ΠΎ доступа. И хотя ΠΈΡ… Π΅Ρ‰Ρ‘ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² Π°Ρ€Ρ…ΠΈΠ²Π°Ρ…, сами тСксты Π·Π° ΠΏΡ€ΠΎΡˆΠ΅Π΄ΡˆΠΈΠ΅ Π³ΠΎΠ΄Ρ‹ нСсколько устарСли.

Π‘Π»ΠΎΠ²ΠΎΠΌ, Π² ΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΠΎΠΉ Ρ€Π°Π· отвСчая Π½Π° вопрос ΠΏΠΎ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСткС ΠΈ Π½Π΅ найдя Π½ΠΈ ΠΎΠ΄Π½ΠΎΠΉ подходящСй ссылки, Ρ€Π΅ΡˆΠΈΠ» ΠΊΠ°ΠΊ-Ρ‚ΠΎ ΠΎΠ±ΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ Π² Π·Π°ΠΌΠ΅Ρ‚ΠΊΠ΅ всё, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ°Π·Ρ‹Π²Π°Π»ΠΎΡΡŒ ΠΏΠΎ дСсяткам ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… сайтах.


Как Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ сСтка

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

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

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠΉ, ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка Π·Π°Π΄Π°Π΅Ρ‚ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ ΠΈ основныС ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ элСмСнтов, поддСрТивая ΠΈΡ… Π²ΠΎ всСм ΠΌΠ°ΠΊΠ΅Ρ‚Π΅. Π­Ρ‚ΠΎ удобная, гибкая ΠΈ довольно простая систСма. ΠŸΡ€ΠΈ условии, Ρ‡Ρ‚ΠΎ Π²Ρ‹ достаточно Π²Π½ΠΈΠΊΠ»ΠΈ Π² Π΅Π΅ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹.


Π§Π΅ΠΌ опрСдСляСтся структура сСтки

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка строится Π² Π΄Π²ΡƒΡ… направлСниях: Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌ. Π“Ρ€ΡƒΠ±ΠΎ говоря, это комбинация ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ рядов с Ρ€Π°Π·Π»ΠΈΠ½ΠΎΠ²ΠΊΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π½Π° строки.

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

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

Если ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ простой ΠΈ Π½Π΅ΠΈΠ·ΠΌΠ΅Π½Π½Ρ‹ΠΉ, ΠΈ извСстСн Π²Π°ΠΌ Π·Π°Ρ€Π°Π½Π΅Π΅, Ρ‚ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ всСго Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚Ρ‚Π°Π»ΠΊΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΎΡ‚ Π½Π΅Π³ΠΎ. Если ΠΆΠ΅ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ слоТный ΠΈ нСпрСдсказуСмый (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, user-generated β€” ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ), Ρ‚ΠΎ сСтка Π² большСй стСпСни Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒΡΡ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠΌ носитСля ΠΈ ΠΎΠ±Ρ‰ΠΈΠΌΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌΠΈ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ.


Начало построСния. Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ

Когда Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Ρ‘Ρ‚ ΠΎ сайтах ΠΈΠ»ΠΈ ΠΏΠ΅Ρ‡Π°Ρ‚Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΠΈ, Π΄ΠΈΠ·Π°ΠΉΠ½ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΎΠΌ зависит ΠΎΡ‚ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ свойств тСкста. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ построСниС сСтки ΡƒΠ΄ΠΎΠ±Π½ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€ΠΈΡ‚ΠΌΠ°.

Π’ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π½Π°Ρ‰ΡƒΠΏΠ°Ρ‚ΡŒ Π΄Π²Π° взаимосвязанных ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°: Π±Π°Π·ΠΎΠ²ΡƒΡŽ высоту строки ΠΈ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°. ΠŸΡ€ΠΎΡ‰Π΅ говоря (Ρ…ΠΈ-Ρ…ΠΈ), Π±Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ ΠΈ кСгль. И Π²ΠΎΡ‚ эта ΠΏΡ€ΠΎΡΡ‚Π΅Π½ΡŒΠΊΠ°Ρ Π·Π°Π΄Π°Ρ‡Π° постоянно Π²Π²ΠΎΠ΄ΠΈΡ‚ людСй Π² ступор. «Как ΠΌΠ½Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΡƒΡŽ высоту строки?Β», «А ΠΊΠ°ΠΊΠΎΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ Π±Ρ€Π°Ρ‚ΡŒ?Β», «А сколько строк Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ для Π±ΡƒΠΊΠ»Π΅Ρ‚Π°? А для Π²ΠΈΠ·ΠΈΡ‚ΠΊΠΈ?Β» ΠΈ Ρ‚.ΠΏ.


Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ «А». ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ Β«ΠΎΡ‚ строки»

Если Ρƒ вашСго носитСля фиксированный Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Π²Π°ΠΌ ΡƒΠΆΠ΅ извСстСн вСсь ΠΊΠ»ΡŽΡ‡Π΅Π²ΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Ρ‚ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΊΠΈΠ½ΡƒΡ‚ΡŒ Π·Π°Ρ€Π°Π½Π΅Π΅.

Для этого Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ отступы, Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΏΠΎ высотС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ количСство абстрактных строк. ΠŸΠΎΡ‚ΠΎΠΌ ΡΠ»ΠΎΠΆΠΈΡ‚ΡŒ всС строки вмСстС ΠΈ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° Π½ΠΈΡ… высоту ΠΌΠ°ΠΊΠ΅Ρ‚Π°. А Π·Π°Ρ‚Π΅ΠΌ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Π°Π±ΡΡ‚Ρ€Π°ΠΊΡ‚Π½ΡƒΡŽ строку Ρ€Π°Π·Π±ΠΈΡ‚ΡŒ Π½Π° N Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹Ρ… строк, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆΡƒ β€” Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² Π½ΠΈΡ… Π°Π΄Π΅ΠΊΠ²Π°Ρ‚Π½ΠΎ помСстился Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ тСкст.


ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ, Π½ΠΎ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ

Допустим, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π½Π° листС А4 список Π»ΡƒΡ‡ΡˆΠΈΡ… Ρ€Π°Π±ΠΎΡ‚Π½ΠΈΠΊΠΎΠ² мСсяца. Π˜Ρ… Ρƒ вас Ρ‚Ρ€ΠΎΠ΅. Для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сотрудника Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ Π±Π»ΠΎΠΊ-ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ: слСва Ρ„ΠΎΡ‚ΠΎ, справа тСкст. Ѐотография ΠΊΡ€ΡƒΠΏΠ½Π΅Π΅, поэтому высота ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Ρ€Π°Π²Π½Π° Π΅Π΅ высотС. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π° листС Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΡˆΠ°ΠΏΠΊΡƒ с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, Π° Π²Π½ΠΈΠ·Ρƒ β€” Π±Π»ΠΎΠΊ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ [ΠΏΡ€ΠΎΡ„ΡΠΎΡŽΠ·Π° Π³Π΅Π½ΠΈΠ΅Π²].

Π’Ρ‹ Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ Π·Π°Π΄Π°Ρ‡Ρƒ ΠΈ мыслСнно ΠΏΡ€ΠΈΠΊΠΈΠ΄Ρ‹Π²Π°Π΅Ρ‚Π΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ высоты всСх элСмСнтов. Π’Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚Π΅, скаТСм, Ρ‡Ρ‚ΠΎ будущая шапка ΠΏΠΎ высотС Π·Π°ΠΉΠΌΠ΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ высоты Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ. А Π² ΠΏΠΎΠ΄Π²Π°Π»Π΅ окаТСтся ΠΌΠ½ΠΎΠ³ΠΎ всСго, ΠΈ ΠΎΠ½ получится Π³Π΄Π΅-Ρ‚ΠΎ Ρ€Π°Π²Π½Ρ‹ΠΌ фотографиям ΠΏΠΎ высотС. Плюс-минус Π»ΠΎΠΏΠ°Ρ‚Π°. Π’Ρ‹ пСрСсчитаСтС это снова, Ссли понадобится.

Если Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ высоту шапки Π·Π° ΠΎΠ΄Π½Ρƒ «строку», получится, Ρ‡Ρ‚ΠΎ вСсь ваш ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ 9 абстрактных «строк». Если Π²Π°ΠΌ Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ Π°Π±ΡΡ‚Ρ€Π°Π³ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆΠ°, Π½Π°Π·ΠΎΠ²ΠΈΡ‚Π΅ эти «строки» рядами ΠΈΠ»ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Π²Ρ‹ Π΅Ρ‰Π΅ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎ 1/2 строки Π²ΠΎΠ·Π΄ΡƒΡ…Π° ΠΏΠ΅Ρ€Π΅Π΄ Π²Π΅Ρ€Ρ…Π½ΠΈΠΌ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΌ краями листа. Π˜Ρ‚ΠΎΠ³ΠΎ, ваш ΠΌΠ°ΠΊΠ΅Ρ‚ Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° 10 строк:

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π²Ρ‹ Π΄Π΅Π»ΠΈΡ‚Π΅ ваш Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒ (лист A4) ΠΏΠΎ высотС Π½Π° 10 «строк». ΠŸΠΎΠ»ΡƒΡ‡Π°ΡŽΡ‚ΡΡ Π±Π»ΠΎΠΊΠΈ высотой ΠΎΠΊΠΎΠ»ΠΎ 3 сантимСтров. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ это слишком крупная Ρ€Π°Π·Π»ΠΈΠ½ΠΎΠ²ΠΊΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ ΠΏΠΎ Π½Π΅ΠΉ тСксты, ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈ ΠΏΡ€ΠΎΡ‡ΠΈΠ΅ ΠΌΠ΅Π»ΠΎΡ‡ΠΈ.

Π’Ρ‹ смотритС Π½Π° свои тСкстовки ΠΈ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·Π»Π΅ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ Ρƒ вас получаСтся описаниС Π³Π΄Π΅-Ρ‚ΠΎ Π½Π° 10β€”12 строчСк тСкста. Π’ΠΎ Π΅ΡΡ‚ΡŒ, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π½ΡƒΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Ρ‰Π΅ Π½Π° 5β€”6 частСй. ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, Π²Ρ‹ ΠΏΠ΅Ρ€Π΅ΡΡ‚Ρ€Π°Ρ…ΠΎΠ²Ρ‹Π²Π°Π΅Ρ‚Π΅ΡΡŒ ΠΈ Π±Π΅Ρ€Π΅Ρ‚Π΅ большСС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ строчкС ΡƒΡˆΠ»ΠΎ Π½Π° отступы. Π‘ΠΈΠ½Π³ΠΎ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ваш ΠΌΠ°ΠΊΠ΅Ρ‚ прСдставляСт собой 10 Π±Π»ΠΎΠΊΠΎΠ² ΠΏΠΎ 6 строк Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ. Π’ΠΎ Π΅ΡΡ‚ΡŒ 60 строк. Π‘ ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ высоты листа (~300 ΠΌΠΌ), каТдая строка ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ высотой ~5ΠΌΠΌ. Всё, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ, Π° Π·Π°Ρ‚Π΅ΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½.

А ΠΊΠ°ΠΊ ΠΆΠ΅ Π±Ρ‹Ρ‚ΡŒ с Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π°? О, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ всё ΠΎΡ‡Π΅Π½ΡŒ просто! По всё Ρ‚ΠΎΠΉ ΠΆΠ΅ Π»ΠΎΠ³ΠΈΠΊΠ΅ Β«ΠΏΡ€Π°Π²ΠΈΠ»Π° внСшнСго ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎΒ», ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ 150β€”200% ΠΎΡ‚ высоты кСгля. Π’ΠΎ Π΅ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ вашСго ΡˆΡ€ΠΈΡ„Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ Π² 1,5β€”2 Ρ€Π°Π·Π° мСньшС высоты строки. А это ΠΎΡ‚ 2,5 Π΄ΠΎ 3,3ΠΌΠΌ. Π­Ρ‚ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ нСслоТно ΠΏΠΎΠ΄ΠΎΠ±Ρ€Π°Ρ‚ΡŒ Π² ΠΏΡƒΠ½ΠΊΡ‚Π°Ρ… ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ просто Π½Π° Π³Π»Π°Π·.

ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½Ρƒ, Ρ‡Ρ‚ΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²Ρ‹ΠΌΠ΅Ρ€ΡΡ‚ΡŒ тысячныС Π΄ΠΎΠ»ΠΈ с ΠΊΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€ΠΎΠΌ. Π£ вас Π΅ΡΡ‚ΡŒ Π³Π»Π°Π·ΠΎΠΌΠ΅Ρ€ ΠΈ чувство ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ β€” ΠΈΡ… Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ достаточно. И Π΄Π°ΠΆΠ΅ Ссли ΠΎΠ½ΠΈ ΠΏΠΎΠΊΠ° Π½Π΅ Ρ€Π°Π·Π²ΠΈΡ‚Ρ‹, спустя ΡΠΎΡ‚Π½ΡŽ-Π΄Ρ€ΡƒΠ³ΡƒΡŽ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² Π²Ρ‹ смоТСтС ΠΏΠΎΠΏΠ°Π΄Π°Ρ‚ΡŒ Π² сСтку ΠΏΠ°Π»ΡŒΡ†Π΅ΠΌ с Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎ 1-2 пиксСлСй, Π΄Π°ΠΆΠ΅ ΠΏΡ€ΠΈ скрытых Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΉ привязкС. И Π½Π΅ Π·Π°Π±Ρ‹Π²Π°ΠΉΡ‚Π΅, Ρ‡Ρ‚ΠΎ чСловСчСский Π³Π»Π°Π· воспринимаСт Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈ расстояния с ΠΏΠΎΠΏΡ€Π°Π²ΠΊΠ°ΠΌΠΈ Π½Π° Ρ„ΠΈΠ·ΠΈΠΎΠ»ΠΎΠ³ΠΈΡŽ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΈ сама сСтка β€” Π½Π΅ Π΄ΠΎΠ³ΠΌΠ°, Π° лишь Π³Ρ€ΡƒΠ±ΠΎΠ΅ ΠΏΠΎΠ΄ΡΠΏΠΎΡ€ΡŒΠ΅ Π² расчСтах. ПослСднСС слово всСгда Π·Π° оптичСской компСнсациСй. К этой Ρ‚Π΅ΠΌΠ΅ вСрнёмся Π½ΠΈΠΆΠ΅.

Π•Ρ‰Ρ‘ ΠΌΠΎΠΌΠ΅Π½Ρ‚. Π‘Ρ‹Π²Π°Π΅Ρ‚ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ послС всСх расчСтов выясняСтся, Ρ‡Ρ‚ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚ слишком ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ слишком ΠΌΠ΅Π»ΠΊΠΈΠΉ. Π’ этом случаС Π²Ρ‹ Π»ΠΈΠ±ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ пСрСрасчСт сСтки, Π»ΠΈΠ±ΠΎ просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ значСния. Как ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, компромиссный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ β€” это ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π½Ρ‹ΠΉ ΠΈΠ»ΠΈ ΠΏΠΎΠ»ΡƒΡ‚ΠΎΡ€Π½Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ.


Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ Β«Π‘Β». ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ Β«ΠΎΡ‚ кСгля»

Π”Π°Π»Π΅ΠΊΠΎ Π½Π΅ всСгда Ρƒ вас Π±ΡƒΠ΄Π΅Ρ‚ прСдсказуСмый ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ фиксированный холст. Π’ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π²Ρ‹ ΠΊΡƒΠ΄Π° Ρ‡Π°Ρ‰Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ с Ρ‚ΠΎΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ Π½Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ.

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

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

Всё, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, это Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ для ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ кСгль, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ достаточно ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒΡΡ, ΠΈ ΠΏΡ€ΠΈ этом достаточно ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² строку основных тСкстовых Π±Π»ΠΎΠΊΠΎΠ² ΠΏΠΎΠΌΠ΅Ρ‰Π°Π»ΠΈΡΡŒ 7β€”8 слов. Π‘Ρ‚Ρ€ΠΎΠ³ΠΎ говоря, для русского языка достаточно ΠΈ 5β€”6 слов, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π² срСднСм Ρƒ нас, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π΄Π»ΠΈΠ½Π½Π΅Π΅ ΠΈ Ρ‚Π²Π΅Ρ€ΠΆΠ΅. Но это ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€, Π° Π½Π΅ Π΄ΠΎΠ³ΠΌΠ°. ΠžΠΏΠΈΡ€Π°Ρ‚ΡŒΡΡ Π½ΡƒΠΆΠ½ΠΎ Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ плюс собствСнноС Π·Ρ€Π΅Π½ΠΈΠ΅ ΠΈ ΠΎΠΏΡ‹Ρ‚.

Π’ ΠΎΠ±Ρ‰Π΅ΠΌ случаС, ваш Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ кСгль для дСсктопных вСрсий сайта окаТСтся Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΠΎΡ‚ 14 Π΄ΠΎ 22 пиксСлСй. ΠŸΡ€ΠΈΡ‡Π΅ΠΌ тСндСнция ΠΈΠ΄Ρ‘Ρ‚ Π² сторону укрупнСния.

Для ΠΏΠ΅Π΄Π°Π½Ρ‚ΠΎΠ² ΠΎΡ‚ΠΌΠ΅Ρ‡Ρƒ: Ρ‚Π°ΠΊΠΈ Π΄Π°, для кСгля ΡƒΠΆΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π΅Ρ‚Π΅Π½Ρ‹ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния, ΠΈ это прСкрасно. Но Ссли ΠΌΡ‹ углубимся Π² это здСсь, Ρ‚ΠΎ ΡΡ‚Π°Ρ€ΠΎΡΡ‚ΡŒ наступит Π½Π΅Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ, ΠΈ ΠΏΠ΅Ρ€Π²ΡƒΡŽ сСтку наш ΡŽΠ½Ρ‹ΠΉ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΡŒ достроит ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρƒ, ΠΊΠΎΠ³Π΄Π° Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅Ρ€Π΅ прочувствуСт Π±Π΅ΡΠΏΠ΅Ρ€ΡΠΏΠ΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ своих отчислСний Π² пСнсионный Ρ„ΠΎΠ½Π΄. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΈ здСсь, ΠΈ Π΄Π°Π»Π΅Π΅ ΠΏΠΎ тСксту Β«pxΒ» β€” простыС ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½Ρ‹Π΅ пиксСли. Π‘Π΅Π· ΡƒΡ‡Ρ‘Ρ‚Π° Ρ€Π΅Ρ‚ΠΈΠ½, Π±Π΅Π· ΡƒΡ‡Π΅Ρ‚Π° адаптивностСй, Π° Ρ‚Π°ΠΊΠΆΠ΅ Β«Π±Π΅Π· ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, Π±Π΅Π· усилка ΠΈ Π±Π΅Π· Π·Π°Ρ‰ΠΈΡ‚Ρ‹ ΠΎΡ‚ Π΄ΡƒΡ€Π°ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ‚Ρ‹ здСсь валяСшь».

Π‘Ρ€Π°Π·Ρƒ ΠΎΡ‚Π²Π΅Ρ‚ Π½Π° частый вопрос: Β«Π±Π°Π·ΠΎΠ²Ρ‹ΠΉΒ» Π½Π΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ «самый ΠΌΠ΅Π»ΠΊΠΈΠΉΒ». Π’ любом ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΏΠΎΡ‡Ρ‚ΠΈ всСгда Π±ΡƒΠ΄ΡƒΡ‚ ΠΈ ΠΌΠ΅Π½Π΅Π΅ Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹Π΅ надписи: сноски, примСчания, подстрочники ΠΈ Ρ‚.ΠΏ. Π—Π΄Π΅ΡΡŒ ΠΆΠ΅ Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ Ρ‚ΠΎΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ Π½Π°Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΎΡΠ½ΠΎΠ²Π½ΡƒΡŽ массу тСкста. ВспомнитС любой тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. Π’Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚Π΅ Π½ΠΎΠ²Ρ‹ΠΉ Ρ„Π°ΠΉΠ» ΠΈ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅ ΠΏΠ΅Ρ‡Π°Ρ‚Π°Ρ‚ΡŒ ΠΊΠ°ΠΊΠΈΠΌ-Ρ‚ΠΎ «просто ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌΒ», Π»ΠΈΡˆΠ΅Π½Π½Ρ‹ΠΌ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ форматирования β€” это ΠΈ Π΅ΡΡ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚, basefont. Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ надпись ΠΏΠΎΠΌΠ΅Π»ΡŒΡ‡Π΅, Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ Π·Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅Π»ΠΊΠΈΠΉ кСгль, это Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ.

Π˜Ρ‚Π°ΠΊ, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈΡΡŒ с Π±Π°Π·ΠΎΠ²Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ. Π§Ρ‚ΠΎ дальшС? А дальшС β€” ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ. По ΡƒΠΆΠ΅ упомянутым традициям соврСмСнной Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΎΠ½ составит 150β€”200% ΠΎΡ‚ кСгля. А ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈ Π±ΠΎΠ»Π΅Π΅.

(ΠŸΠΎΠ΄Ρ‡Π΅Ρ€ΠΊΠ½Ρƒ: Ρ€Π΅Ρ‡ΡŒ ΠΎ соврСмСнных рСалиях. ΠŸΡ€ΠΎΡΡŒΠ±Π° Π½Π΅ ΠΏΠΎΠΏΡ€Π΅ΠΊΠ°Ρ‚ΡŒ БрингхСрстом ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ классиками ΠΊΠ½ΠΈΠΆΠ½ΠΎΠΉ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ β€” ΠΎΠ½ΠΈ, бСзусловно, Π²Π·ΠΎΡ€Π²Π°Π»ΠΈ свой Ρ‚Π°Π½Ρ†ΠΏΠΎΠ», Π½ΠΎ с Ρ‚Π΅Ρ… ΠΏΠΎΡ€ ΠΌΠΈΡ€ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ измСнился. Π’Π΅ 120β€”180% всё-Ρ‚Π°ΠΊΠΈ Ρ€Π°ΡΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Π»ΠΈΡΡŒ для ΠΊΠ½ΠΈΠ³, Π΄Π° Π΅Ρ‰Ρ‘ ΠΈ Π² Π»Π°Ρ‚ΠΈΠ½ΠΈΡ†Π΅).

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ваш Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ ΠΏΠΎΡ‡Ρ‚ΠΈ всСгда окаТСтся Π³Π΄Π΅-Ρ‚ΠΎ Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΠΎΡ‚ 22 Π΄ΠΎ 40 пиксСлСй.

По Π»ΠΈΡ‡Π½ΠΎΠΌΡƒ ΠΎΠΏΡ‹Ρ‚Ρƒ, для простых коммСрчСских сайтов довольно ΡƒΠ΄ΠΎΠ±Π΅Π½ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ 15px. (ΠŸΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ΡΡ 30px, Π½ΠΎ Π½Π° ΡƒΡ€ΠΎΠ²Π½Π΅ вСрстки ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ сразу Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρ‡Π°Ρ‚Ρ‹ΠΌ, Ρ‚.ΠΊ. ΠΎΠ½ Π΄Π°Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ отступы Π² 15px ΠΈ 45px. Π’Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π² контСкстС ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки 15 ΠΈ 30 ΡΡƒΡ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ β€” Π²Ρ‹ просто Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ Π»ΠΈΠ±ΠΎ с ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π½Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Β«Ρ‚Ρ€ΠΈΠ΄Ρ†Π°Ρ‚ΠΊΠΈΒ», Π»ΠΈΠ±ΠΎ с Ρ†Π΅Π»Ρ‹ΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Β«ΠΏΡΡ‚Π½Π°ΡˆΠΊΠΈΒ»). Π₯отя ΠΏΡ€ΠΈ всСй любви ΠΊ классичСским ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΌ сСткам, Π½Π΅ ΠΎΡ‚Ρ€ΠΈΡ†Π°ΡŽ ΠΏΠ»ΡŽΡΡ‹ Ρ‚ΠΎΠΉ ΠΆΠ΅ Ρ‚Ρ€Π΅Π½Π΄ΠΎΠ²ΠΎΠΉ 4-пиксСльной сСтки для UI-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π‘Π΅Ρ‚ΠΊΠΈ Ρ€Π°Π·Π½Ρ‹Π΅ Π½ΡƒΠΆΠ½Ρ‹, сСтки Ρ€Π°Π·Π½Ρ‹Π΅ Π²Π°ΠΆΠ½Ρ‹. Π­Ρ‚ΠΎ инструмСнт, Π° Π½Π΅ рСлигия.


Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Ρƒ нас Π΅ΡΡ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Ρ€Π°Π·Π»ΠΈΠ½Π΅ΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΈ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ, Π½Π°ΠΊΠΎΠ½Π΅Ρ†-Ρ‚ΠΎ, Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ Ρ€ΠΈΡ‚ΠΌΡƒ. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΏΠΎ высотС Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ число строк. Π‘ Ρ€ΠΈΡ‚ΠΌΠΎΠΌ становится ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΈ Π»Π΅Π³ΠΊΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ. НС Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Ρ‡ΠΈΡΠ»ΡΡ‚ΡŒ Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ значСния Π² пиксСлях. Π’Ρ‹ мСряСтС всё строками. Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ уровня β€” 4 строки, ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡ β€” 8 строк, Π°Π²Π°Ρ‚Π°Ρ€ β€” 3 строки, ΠΊΠ½ΠΎΠΏΠΊΠ° β€” 3 строки, мСню β€” 5 строк, отступ β€” 1 строка ΠΈ Ρ‚.ΠΏ. (НадСюсь, Π²Ρ‹ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ это Ρ„ΠΈΠ³ΡƒΡ€Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π° Π½Π΅ Ρ€Π΅Ρ†Π΅ΠΏΡ‚ успСха).

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


Колонки ΠΈ ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»


ΠžΡ‚ Ρ‡Π΅Π³ΠΎ зависит число ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ

Π’ ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, ΠΎΡ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π—Π΄Π΅ΡΡŒ всё ΠΏΡ€ΠΎΡ‰Π΅, Ρ‡Π΅ΠΌ с высотой. Если Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Ρ‘Ρ‚ ΠΎ ΠΏΠ΅Ρ‡Π°Ρ‚Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΠΈ, Π²Ρ‹ Π² ΠΏΠΎΠ΄Π°Π²Π»ΡΡŽΡ‰Π΅ΠΌ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ число ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π΅Ρ‰Π΅ Π½Π° стадии ΠΏΠ΅Ρ€Π²Ρ‹Ρ… Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊΠΎΠ².

НапримСр, Ссли Π²Ρ‹ вСрстаСтС Π±Π»ΠΎΠΊ ΠΏΡ€ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½Π° Π³ΠΎΠ΄Π°, вашим магичСским числом навСрняка Π±ΡƒΠ΄Π΅Ρ‚ 4. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² ΠΎΠ΄ΠΈΠ½ ряд ΠΈΠ»ΠΈ Π² Π΄Π²Π°. ΠŸΡ€ΠΈ этом число ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ получится ΠΊΡ€Π°Ρ‚Π½Ρ‹ΠΌ Π»ΠΈΠ±ΠΎ Π΄Π²ΡƒΠΌ, Π»ΠΈΠ±ΠΎ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ΠΌ. Π’ΠΎ Π΅ΡΡ‚ΡŒ Π΅ΡΡ‚ΡŒ смысл ΠΎΠΏΠΈΡ€Π°Ρ‚ΡŒΡΡ Π½Π° числа 2, 4, 6, 8, 12 ΠΈΠ»ΠΈ 16.

УслоТним. ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΠΌ, ΠΏΠΎΠ΄ Π±Π»ΠΎΠΊΠΎΠΌ с Π²Ρ€Π΅ΠΌΠ΅Π½Π°ΠΌΠΈ Π³ΠΎΠ΄Π° Ρƒ вас ΠΈΠ΄Ρ‘Ρ‚ Π±Π»ΠΎΠΊ с трСмя Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½Ρ‹ΠΌΠΈ объявлСниями. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, для этой части ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ Π±Ρ‹Π»ΠΎ Π±Ρ‹ число ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΊΡ€Π°Ρ‚Π½ΠΎΠ΅ Ρ‚Ρ€Π΅ΠΌ: 3, 6, 12… Но сСтка Π² 3 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ явно Π½Π΅ΡƒΠ΄Π°Ρ‡Π½Π° для Π²Ρ€Π΅ΠΌΠ΅Π½ Π³ΠΎΠ΄Π°. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΊΠ°Ρ‚ΡŒ для Π½ΠΈΡ… ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΎΠ±Ρ‰ΠΈΠΉ Π·Π½Π°ΠΌΠ΅Π½Π°Ρ‚Π΅Π»ΡŒ. ΠŸΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΉ Π°Π±Π·Π°Ρ† подсказываСт, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° сСтка Π½Π° 6 ΠΈΠ»ΠΈ 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.

*Π•Ρ‰Π΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€. Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏΠΎΠ²ΠΎΠΉ Π±Π»ΠΎΠΊ-Π²ΠΈΠ·ΠΈΡ‚ΠΊΡƒ, состоящий ΠΈΠ· Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏΠ°/Π°Π²Π°Ρ‚Π°Ρ€Π° (слСва) ΠΈ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ (справа). Бколько Π½ΡƒΠΆΠ½ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ? Π”Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΡ€ΠΈΠΊΠΈΠ½Π΅ΠΌ.

Если ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ€Π°Π²Π½ΠΎΠ²Π΅ΡΠ½ΡƒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ, Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ Π΄Π°ΠΆΠ΅ двумя ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ. Π’ этом случаС Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π»ΠΎΠ³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ΠΌ, Π° тСкст придСтся Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π½Π° Π³Π»Π°Π·. А ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ тСкст ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ мСста ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π²Π΄Π²ΠΎΠ΅ большС, Ρ‡Π΅ΠΌ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, ΠΈ соотвСтствСнно ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊ Π² Ρ‚Ρ€ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. А ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΉΡ‚ΠΈ Π΅Ρ‰Π΅ дальшС ΠΈ Π·Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π² сСтку Π΅Ρ‰Π΅ ΠΈ отступы. Допустим, слСва ΠΈ справа Π±ΡƒΠ΄Π΅Ρ‚ поля ΠΏΠΎ 1 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅, Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ Π·Π°ΠΉΠΌΠ΅Ρ‚ 2 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, тСкст 4, плюс 1 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ° отступа ΠΌΠ΅ΠΆΠ΄Ρƒ Π»ΠΎΠ³ΠΎ ΠΈ тСкстом β€” ΠΈΡ‚ΠΎΠ³ΠΎ 8 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.*

Π’ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠΌ Π½Π΅Ρ…ΠΈΡ‚Ρ€Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π²Ρ‹ рассуТдаСтС, продумывая сСтку. Если ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΌΠ½ΠΎΠ³ΠΎ, Π° Π³Π»Π°Π· Π½Π΅ Π½Π°ΠΌΡ‘Ρ‚Π°Π½, ΠΌΠΎΠΆΠ½ΠΎ с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Ρ€Π°Π·Π° ΠΏΡ€ΠΎΠ»Π΅Ρ‚Π΅Ρ‚ΡŒ ΠΈ ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ ΠΏΡ€ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ сСтка Π½Π΅ годится. Π­Ρ‚ΠΎ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ. НичСго ΡΡ‚Ρ€Π°ΡˆΠ½ΠΎΠ³ΠΎ.

Когда Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Ρ‘Ρ‚ ΠΎΠ± ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ взятом ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠ΄ Π½ΠΎΠ²ΡƒΡŽ сСтку Π½Π΅Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ. Если ΠΆΠ΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ большой ΠΈ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ ΠΈΠ·ΠΎΠ±ΠΈΠ»ΠΈΠ΅ страниц ΠΈΠ»ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² с Π΅Π΄ΠΈΠ½ΠΎΠΉ ΠΊΠ°Π½Π²ΠΎΠΉ (сайт, Π±Ρ€ΠΎΡˆΡŽΡ€Π°, ΠΊΠ½ΠΈΠ³Π° ΠΈ Ρ‚.Π΄.), Π»ΡƒΡ‡ΡˆΠ΅ Π·Π°Π»ΠΎΠΆΠΈΡ‚ΡŒ Π² сСтку Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ запас прочности ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π½ΡŒΠΊΠΎ ΠΏΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅ со случайным ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ ΠΈΠ· Ρ€Π°Π·Π½Ρ‹Ρ… страниц. Запас прочности, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, достигаСтся ΠΊΡ€Π°Ρ‚Π½Ρ‹ΠΌ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ΠΌ числа ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ: Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Π°ΠΌ сСйчас Π½ΡƒΠΆΠ½ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 3, Π° Π²Ρ‹ Π·Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅Ρ‚Π΅ 6 ΠΈΠ»ΠΈ 9.

ΠžΡ‚ΠΌΠ΅Ρ‡Ρƒ ΠΎΠ΄ΠΈΠ½ нюанс. Если Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ Π½Π΅Ρ‡Ρ‚ΠΎ с Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½Π½ΠΎΠΉ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Π²Ρ‹Π³ΠΎΠ΄Π½Π΅Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ число ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π½Π΅Ρ‡Π΅Ρ‚Π½Ρ‹ΠΌ. Π­Ρ‚ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½Π΅Π΅ Ρ€Π°ΡΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒ отступы ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Π‘ΠΎΠ²Π΅Ρ‚ касаСтся ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ дроблСния ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅, Ссли Ρƒ вас Π±Ρ‹Π»ΠΎ 3 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ Π²Π°ΠΌ понадобилось ΠΈΡ… Π΄Π΅Ρ‚Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, ΠΏΡ€ΠΈ Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΉ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π²Ρ‹ Ρ€Π°Π·ΠΎΠ±ΡŒΠ΅Ρ‚Π΅ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ Π΅Ρ‰Π΅ Π½Π° 3, Π° Π²ΠΎΡ‚ ΠΏΡ€ΠΈ симмСтричной β€” Π½Π° 2 ΠΈΠ»ΠΈ 4. Π’ ΠΈΡ‚ΠΎΠ³Π΅, Π² ΠΏΠ΅Ρ€Π²ΠΎΠΌ случаС ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ станСт 9, Π° Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΌ β€” 6 ΠΈΠ»ΠΈ 12.


ΠŸΠΎΡ‡Π΅ΠΌΡƒ всС Π»ΡŽΠ±ΡΡ‚ 12-ΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ сСтки

Π’ΡƒΡ‚ всё просто. Число 12 дСлится Π½Π°: 12, 6, 4, 3, 2, 1. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ сСтка получаСтся Π³ΠΈΠ±ΠΊΠΎΠΉ ΠΈ позволяСт ΠΎΡ€Π³Π°Π½ΠΈΡ‡Π½ΠΎ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ Π±Π»ΠΎΠΊΠΈ ΠΏΠΎΡ‡Ρ‚ΠΈ любого количСства ΠΈΠ»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹. Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, отбрасывая ΠΏΠΎ краям ΠΌΠ°ΠΊΠ΅Ρ‚Π° 1 ΠΈΠ»ΠΈ 2 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π² качСствС ΠΏΠΎΠ»Π΅ΠΉ, Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ Π±Π»ΠΎΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ дСлится Π΅Ρ‰Ρ‘ ΠΈ Π½Π° 10, 5 ΠΈΠ»ΠΈ 8.

Из Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° добавлю, Ρ‡Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΎΡ‚Ρ‚Π°Π»ΠΊΠΈΠ²Π°ΡΡΡŒ ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π² 1200 пиксСлСй, особСнно Π±Π΅Π· ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠ². Π’Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ 12 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с приятной ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Ρ€ΠΎΠ²Π½ΠΎ Π² 100 пиксСлСй ΠΈ постоянно ΠΎΡ€Π³Π°Π·ΠΌΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΎΡ‚ ΠΊΡ€ΡƒΠ³Π»Ρ‹Ρ… чисСл Π² процСссС Ρ€Π°Π±ΠΎΡ‚Ρ‹. И ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΏΠ»Π°ΡˆΠΊΡƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ, Π²Ρ‹ Π½Π΅ тянСтС Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ° Ρ‚ΡƒΠ΄Π°-сюда, Π° ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ ΠΈ Π½Π΅ Π·Π°Π΄ΡƒΠΌΡ‹Π²Π°ΡΡΡŒ Π²Π±ΠΈΠ²Π°Π΅Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€: 300 Π½Π° 60 ΠΈ ΠΊΠ»ΠΈΠΊΠ°Π΅Ρ‚Π΅ Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚. К слову, ΠΏΠΎΠ»Π΅Π·Π½ΠΎ ΠΏΡ€ΠΈΡƒΡ‡ΠΈΡ‚ΡŒ сСбя ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ элСмСнты Π½Π΅ ΠΌΡ‹ΡˆΠΊΠΎΠΉ ΠΈ стрСлками, Π° Π²Π±ΠΈΠ²Π°Π½ΠΈΠ΅ΠΌ Ρ†ΠΈΡ„Ρ€Ρ‹ отступов ΠΏΠΎ иксу ΠΈ ΠΈΠ³Ρ€Π΅ΠΊΡƒ β€” ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ станут опрятнСС.

Если ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π΅ ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ вСрстку встык, Π±Ρ‹Π²Π°Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ 24 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Π½ΠΈΠΌΠΈ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ с ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΌ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»ΠΎΠΌ, просто отступая ΠΏΡ€ΠΈ нСобходимости ΠΏΠΎΠ»Π½ΡƒΡŽ ΠΊΠΎΠ»ΠΎΠ½ΠΊΡƒ Π² 50px. Π­Ρ‚ΠΎ создаСт Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° достаточно Π²ΠΎΠ·Π΄ΡƒΡ…Π°, ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚ смотрится Π΄ΠΎΡ€ΠΎΠ³ΠΎ. Если ΠΆΠ΅ трСбуСтся ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» ΠΏΠΎΠΌΠ΅Π»ΡŒΡ‡Π΅, бСрСтся Ρ€ΠΎΠ²Π½ΠΎ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ 25px. ВсС расчСты Π½Π° Π»Π΅Ρ‚Ρƒ, числа ΡƒΠ΄ΠΎΠ±Π½Ρ‹Π΅.


ΠœΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠ΅ расстояниС (gutter)

Π—Π°Ρ‡Π΅ΠΌ ΠΈ ΠΊΠΎΠ³Π΄Π° Π½ΡƒΠΆΠ½ΠΎ Π΄Π΅Π»Π°Ρ‚ΡŒ отступы ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ?

ΠœΡ‹ Π½Π΅ всСгда Π΄Π΅Π»Π°Π΅ΠΌ ΠΌΠΎΠ·Π°ΠΈΠΊΡƒ. Π§Π°Ρ‰Π΅ всСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π½Π΅ вСрстаСтся встык β€” ΠΌΠ΅ΠΆΠ΄Ρƒ двумя Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ расстояниС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π½Π΅ слиплись ΠΈ Π½Π΅ ΠΏΠ΅Ρ€Π΅ΠΊΡ€Ρ‹Π»ΠΈ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°.

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

Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв, ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½Ρ‹ΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ мСньшС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ. Π•Π³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ‚ΠΎΠΆΠ΅ опрСдСляСтся особСнностями ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Если Π²Ρ‹ вСрстаСтС интСрфСйс, Π³Π΄Π΅ ΠΌΠ½ΠΎΠ³ΠΎ классичСских элСмСнтов управлСния, ΡƒΠ·ΠΊΠΎΠ΅ ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠ΅ расстояниС слуТит ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»Π΅ΠΌ. НапримСр, ΠΌΠ΅ΠΆΠ΄Ρƒ поисковой строкой ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ, ΠΈΠ»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρƒ чСкбоксом ΠΈ Π΅Π³ΠΎ Π»Π΅ΠΉΠ±Π»ΠΎΠΌ. (Π₯отя Π² Ρ†Π΅Π»ΠΎΠΌ здСсь Π΅ΡΡ‚ΡŒ смысл ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ Β«ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠΉΒ» сСткС: 4px ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΉ, Π²ΠΎΠΎΠ±Ρ‰Π΅ Π±Π΅Π· всяких ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΈ для этого Ρ‚ΠΎΠΆΠ΅ Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρ‹). Если ΠΆΠ΅ Π²Ρ‹ вСрстаСтС страницу с ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΌΠΈ тСкстовыми Π±Π»ΠΎΠΊΠ°ΠΌΠΈ, ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹ΠΌΠΈ всСго Π² 2β€”3 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Ρ‚ΠΎ ΠΌΠ΅ΠΆΠΊΠΎΠ»ΠΎΠ½ΠΎΡ‡Π½ΠΎΠ΅ расстояниС ΠΈΠΌΠ΅Π΅Ρ‚ смысл ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ большим, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ максимум Π²ΠΎΠ·Π΄ΡƒΡ…Π°.

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

Волько ΠΏΡƒΡΡ‚ΡŒ вас Π½Π΅ ΠΏΠΎΠ΄ΠΊΡƒΠΏΠ°Π΅Ρ‚ приятноС слово Β«Π±Π»Π°Π³ΠΎΡ€ΠΎΠ΄Π½Ρ‹ΠΉΒ» β€” Π² коммСрчСском сСгмСнтС Ρ‚Π°ΠΊΠΎΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π΅ всСгда Ρ…ΠΎΡ€ΠΎΡˆ. Π’ Ρ†Π΅Π»ΠΎΠΌ, Ρ‡Π΅ΠΌ Π°ΠΊΡ‚ΠΈΠ²Π½Π΅Π΅ ΠΈ агрСссивнСС схСма ΠΏΡ€ΠΎΠ΄Π°ΠΆ, Ρ‡Π΅ΠΌ Π³ΠΎΠ»ΠΎΠ΄Π½Π΅Π΅ ΠΈ Π·Π»Π΅Π΅ ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΎΠ»ΠΎΠ³ΠΈ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ°, Ρ‚Π΅ΠΌ ΠΏΠ»ΠΎΡ‚Π½Π΅Π΅ Π±ΡƒΠ΄Π΅Ρ‚ вСрстка ΠΈ Ρ‚Π΅ΠΌ мСньшС Ρ‚Π°ΠΌ останСтся Π²ΠΎΠ·Π΄ΡƒΡ…Π°. ΠŸΡ€Π΅Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ (ΠΈΠ»ΠΈ, скорСС, Π·Π°ΠΏΡ€Π΅Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ) случай β€” Π³Π°Π·Π΅Ρ‚Ρ‹ бСсплатных объявлСний Π° ля «Из Ρ€ΡƒΠΊ Π² Ρ€ΡƒΠΊΠΈΒ», Π³Π΄Π΅ занятая ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ Π½Π°ΠΏΡ€ΡΠΌΡƒΡŽ опрСдСляСт Π·Π°Ρ€Π°Π±ΠΎΡ‚ΠΎΠΊ. РазумССтся, Ρ‚Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹ эстСтичСскиС изыски с гигантскими полями. Π‘ Ρ‚Π΅ΠΌ ΠΆΠ΅ успСхом ΠΌΠΎΠΆΠ½ΠΎ просто Π·Π°Π»Π΅Π·Ρ‚ΡŒ Π² ΠΊΠ°Ρ€ΠΌΠ°Π½ ΡƒΡ‡Ρ€Π΅Π΄ΠΈΡ‚Π΅Π»ΡŽ ΠΈ ΠΏΠΎΠ·Π°ΠΈΠΌΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ‚Ρ‚ΡƒΠ΄Π° ΠΏΠ°Ρ€Ρƒ сотСн Π΄ΠΎΠ»Π»Π°Ρ€ΠΎΠ² Π΄ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ Π·ΠΈΠΌΡ‹. Π Π°Π·Π½ΠΈΡ†Ρ‹ Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ, Π° ΡΠΎΠ³Π»Π°ΡΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ мСньшС.


ΠœΠΎΠ΄ΡƒΠ»ΡŒ

БобствСнно, Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠΌ нСпростым ΠΏΡƒΡ‚Ρ‘ΠΌ ΠΌΡ‹ с Π²Π°ΠΌΠΈ Π΄ΠΎΠ±Ρ€Π°Π»ΠΈΡΡŒ Π΄ΠΎ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‰Π΅Π³ΠΎ понятия Β«ΠΌΠΎΠ΄ΡƒΠ»ΡŒΒ», Π² Ρ‡Π΅ΡΡ‚ΡŒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΈ Π½Π°Π·Π²Π°Π½Π° ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ с Π½Π΅Π³ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚, Π½ΠΎ судя ΠΏΠΎ вопросам Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚. Π’Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΆΠ΅ это Π²ΠΎΠΎΠ±Ρ‰Π΅ Ρ‚Π°ΠΊΠΎΠ΅ ΠΈ Π·Π°Ρ‡Π΅ΠΌ ΠΎΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ?

По сути, это просто пропорция. Π¨ΠΈΡ€ΠΈΠ½Π° модуля Ρ€Π°Π²Π½Π° ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, Π° высота β€” нСскольким строкам. Бкольким ΠΈΠΌΠ΅Π½Π½ΠΎ? Зависит ΠΎΡ‚ вашСго Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ ΠΎΡ‚ эффСкта, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ.

*НСсколько Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄ ΠΌΠ½Π΅ довСлось Π΄Π΅Π»Π°Ρ‚ΡŒ сайт, посвящСнный ΠΏΠΈΠ»ΠΎΠ½Π°ΠΌ β€” ΡˆΠ΅ΡΡ‚Π°ΠΌ для Ρ‚Π°Π½Ρ†Π΅Π². ЕстСствСнно, ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Ρ‚Π°ΠΌ Π±Ρ‹Π» сильно вытянут ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ. Π― использовал ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΈ высоты ΠΏΠΎΡ‡Ρ‚ΠΈ 1:3. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄Π°Π²Π»ΡΡŽΡ‰Π΅Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΉ Π±Ρ‹Π»ΠΎ ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π½ΠΎΠΉ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΈ Ρ‚ΠΎΠΆΠ΅ вытянуто. Π’ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ сам ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ ΠΈ вСсь ΡΡ‚ΠΈΠ»ΡŒ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π» Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ долю фалличСской символики. ΠœΠΎΠ΄ΡƒΠ»ΡŒ опрСдСляСтся ΠΈ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΠ΅ΠΉ, ΠΈ стилСм.

Если Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ Π½Π΅Ρ‡Ρ‚ΠΎ Β«ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΠΎΠ΅Β», Ρ‚ΠΎ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚: Π΅ΡΡ‚ΡŒ смысл ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ ΠΎ ΠΌΠΎΠ΄ΡƒΠ»Π΅, Ρ‡ΡƒΡ‚ΡŒ вытянутом ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. Если ΠΆΠ΅ Π²Ρ‹ вСрстаСтС ΠΎΠ³Ρ€ΠΎΠΌΠ½ΡƒΡŽ Π΄Π»ΠΈΠ½Π½ΡƒΡŽ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ, которая слуТит основным ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅, Ρ‚ΠΎ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ Π·Π° ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ ΠΈΠ»ΠΈ Π΄Π²Π΅ Π±Π°Π·ΠΎΠ²Ρ‹Ρ… строки этой самой Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹. Π‘Π»ΠΎΠ²ΠΎΠΌ, Π΄ΡƒΠΌΠ°ΠΉΡ‚Π΅.*

Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅, Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ Π²Π°ΠΌ ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈ Π±ΠΎΠ»Π΅Π΅ слоТныС сСтки. Π’ Π½ΠΈΡ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠΎΠ³ΡƒΡ‚ Ρ‡Π΅Ρ€Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ Ρ€Π°Π·Π½ΠΎΠΉ высоты. Π“Π»Π°Π²Π½ΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π² этом Π±Ρ‹Π»Π° какая-Ρ‚ΠΎ Π»ΠΎΠ³ΠΈΠΊΠ° ΠΈ Π·Π°ΠΊΠΎΠ½ΠΎΠΌΠ΅Ρ€Π½ΠΎΡΡ‚ΡŒ, ΡΠΎΡ…Ρ€Π°Π½ΡΡŽΡ‰Π°Ρ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ.

Допустим, Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ ΠΏΠΎΡ€Ρ‚Π°Π». Π£ вас Π΅ΡΡ‚ΡŒ мСню высотой Π² 3 строки, Π·Π°Ρ‚Π΅ΠΌ слСдуСт Π±Π°Π½Π½Π΅Ρ€ Π³Π»Π°Π²Π½ΠΎΠΉ новости высотой Π² 9 строк, Π·Π°Ρ‚Π΅ΠΌ ряд ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ Ρ†ΠΈΡ„Ρ€ (курсов Π²Π°Π»ΡŽΡ‚, ΠΏΠΎΠ³ΠΎΠ΄Ρ‹ ΠΈ Π΄Ρ€) Π² 3 строки, Π·Π°Ρ‚Π΅ΠΌ ряд ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… новостСй Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΏΠ»Π°Π½Π° Π½Π° 9 строк. Π’ΠΎ Π΅ΡΡ‚ΡŒ вСсь ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ чСрСдуСтся: 3-9-3-9-3-9-3… На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ этот ΠΏΡ€ΠΈΠ΅ΠΌ Ρ€Π΅Π΄ΠΊΠΎ ΠΎΠΏΡ€Π°Π²Π΄Π°Π½, ΠΎΠ½ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ-Ρ‚ΠΎ Π³ΠΈΠ±ΠΎΠΊ. Но стоит Π΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π² Π³ΠΎΠ»ΠΎΠ²Π΅, Ρ‡Ρ‚ΠΎ Ρ€ΠΈΡ‚ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ слоТным.


Π‘Π΅Ρ‚ΠΊΠ° Π² сСткС

Π”Π°, Π±Ρ‹Π²Π°Π΅Ρ‚ ΠΈ Ρ‚Π°ΠΊΠΎΠ΅. Когда ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ слоТный ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π½Ρ‹ΠΉ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ нСсколько Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… сСток. ΠŸΡ€ΠΎΡΡ‚Π΅ΠΉΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€: общая раскладка ΠΌΠ°ΠΊΠ΅Ρ‚Π° (layout) ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ гигантскиС ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ с ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΌ тСкстом, Π° Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… Π»Π΅ΠΆΠΈΡ‚ Ρ„ΠΎΡ€ΠΌΠ° ΠΊΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€Π° с ΠΊΡƒΡ‡Π΅ΠΉ элСмСнтов управлСния, свСрстанных ΠΏΠΎ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π½ΠΎΠΉ сСткС Π² 4px. Π’ этом Π½Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ особСнно ΠΊΡ€ΠΈΠΌΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ.

Π‘ΠΎΠ»Π΅Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠΎΠ³Π΄Π° Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Ρ‘Ρ‚ ΠΎ сайтах, Ρ‡Π°ΡΡ‚ΡŒ вашСго ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²ΠΎΠΎΠ±Ρ‰Π΅ постороннСй ΠΈ встраиваСмой: ΠΏΠ»Π΅Π΅Ρ€Ρ‹, ΠΎΠ½Π»Π°ΠΉΠ½-ΠΊΠ°Ρ€Ρ‚Ρ‹, Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Ρ‹, ΠΏΠ»Π°Ρ‚Π΅ΠΆΠ½Ρ‹Π΅ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ ΠΈ Ρ‚.Π΄. Миллион Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ². Π£ этих элСмСнтов Π±ΡƒΠ΄ΡƒΡ‚ свои Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠ΅ сСтки, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π½Π΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΡƒΠ΅Ρ‚Π΅. И это Ρ‚ΠΎΠΆΠ΅ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ.

Π§Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ρ‚Π°ΠΊ это ΡΠΎΠ±Π»ΡŽΡΡ‚ΠΈ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ ΠΈ внСшнСго для ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ², содСрТащих эти Π±Π»ΠΎΠΊΠΈ. ΠšΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Π΅Π΅, Π΄Π°Ρ‚ΡŒ Π²ΠΎΠΊΡ€ΡƒΠ³ достаточно Π²ΠΎΠ·Π΄ΡƒΡ…Π° (Π² Ρ‚ΠΎΠΌ числС ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΈ Π½Π΅ лСпились ΠΊ ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ, выглядСли обособлСнно ΠΈ Π½Π΅ пСрСтягивали посторонниС элСмСнты Π² свою Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ Π·ΠΎΠ½Ρƒ. ВсС расстояния ΠΈ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ Π² вашСм ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹, поэтому, Π³Ρ€ΡƒΠ±ΠΎ говоря, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ±Π°Π»Π°Π½ΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡ΡƒΠΆΠΎΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ «снаруТи» ΠΏΠΎΡ‡Ρ‚ΠΈ с Ρ‚Π΅ΠΌ ΠΆΠ΅ успСхом, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ мСняли Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Π΅Π³ΠΎ содСрТимого Β«Π²Π½ΡƒΡ‚Ρ€ΠΈΒ».


ΠžΠΏΡ‚ΠΈΡ‡Π΅ΡΠΊΠ°Ρ компСнсация

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

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ссли ваш Π³Π»Π°Π· сообщаСт Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ элСмСнт Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ Π½Π° ΠΏΠ°Ρ€Ρƒ пиксСлСй ΠΏΡ€Π°Π²Π΅Π΅ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰Π΅ΠΉ сСтки, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это. (НС Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ ΠΈ сохранит ваш оптичСский ΠΊΠΎΡΡ‚Ρ‹Π»ΡŒ, Π½ΠΎ всё ΠΆΠ΅).

ΠžΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²Π°ΠΆΠ½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚: элСмСнты Π² сСткС Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ массС, Π° Π½Π΅ ΠΏΠΎ Π³Π°Π±Π°Ρ€ΠΈΡ‚Π½Ρ‹ΠΌ Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌ. Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ (Π² ΠΈΠ΄Π΅Π°Π»Π΅) ΠΊΡ€ΡƒΠ³, Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ полю, ΠΏΠΎΡ‡Ρ‚ΠΈ всСгда окаТСтся Π½Π° нСсколько пиксСлСй Π»Π΅Π²Π΅Π΅ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½ ΠΏΠΎ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ полю. А ΠΌΠ΅Π»ΠΊΠΈΠΉ подстрочник ΠΏΠΎΠ΄ ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΏΠΎΡ‡Ρ‚ΠΈ всСгда Π½ΡƒΠΆΠ½ΠΎ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π²ΠΏΡ€Π°Π²ΠΎ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ оптичСски Π»Π΅Π²Ρ‹ΠΉ ΠΊΡ€Π°ΠΉ ΠΏΠ΅Ρ€Π²ΠΎΠΉ Π±ΡƒΠΊΠ²Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° окаТСтся ΠΏΡ€Π°Π²Π΅Π΅, Ρ‡Π΅ΠΌ Β«ΠΏΠΎ расчСтам». Π­Ρ‚ΠΎ частности оптичСской компСнсации.

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


РСзюмС

ΠŸΠΎΠΆΠ°Π»ΡƒΠΉ, изя всё. ВСкст ΠΈ Π±Π΅Π· Ρ‚ΠΎΠ³ΠΎ ΠΎΠ±ΡŠΠ΅ΠΌΠ½Ρ‹ΠΉ, особыС Π²Ρ‹Π²ΠΎΠ΄Ρ‹ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹: Ρ‚ΡƒΡ‚ Π»ΠΈΠ±ΠΎ Π²Π½ΠΈΠΊΠ°Ρ‚ΡŒ, Π»ΠΈΠ±ΠΎ Π½Π΅Ρ‚. Π’ любом случаС, спасибо Π·Π° вашС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΈ интСрСс ΠΊ основам Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ. УспСхов.

Π‘Π΅Ρ‚ΠΊΠ° Π² ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΡ€ΠΈ создании Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ сайта β€” CMS Magazine

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

ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³ΠΊΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΒ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ, в зависимости ΠΎΡ‚Β Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. НапримСр, Ссли ваша контСнтная ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ всС 1920Β Ρ€Ρ…, то запросто ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΒ 6Β ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ с обСих сторон. А Ссли 320Β Ρ€Ρ…, Ρ‚ΠΎΒ ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ всСго 4Β ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.

Π‘ΠΎΠ»ΡŒΡˆΠ΅ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΈ ΠΎΠ±Π·Π²Π°Π½ΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ Π΄ΠΈΠ΄ΠΆΠΈΡ‚Π°Π»-агСнтство
Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ конкурс Π½Π° workspace.ru – ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ прСдлоТСния ΠΎΡ‚ участников CMS Magazine ΠΏΠΎ Ρ†Π΅Π½Π΅ ΠΈ срокам. Π­Ρ‚ΠΎ бСсплатно ΠΈ Π·Π°ΠΉΠΌΠ΅Ρ‚ 5 ΠΌΠΈΠ½ΡƒΡ‚. Π’ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅ 15 617 Π΄ΠΈΠ΄ΠΆΠΈΡ‚Π°Π»-агСнтств, Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΡ‡ΡŒ – Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈ ΡΡΠΊΠΎΠ½ΠΎΠΌΡŒΡ‚Π΅ Π΄ΠΎ 30%.
Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒ конкурс β†’

Для большСго удобства ΡΒ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ Π»ΠΈΠ½Π΅ΠΉΠΊΠ°ΠΌΠΈ:

ΠŸΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ Π²Π°ΠΌ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ сайта ΡΒ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ 1920?1080 ΠΈΒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ Π²Β 960Ρ€Ρ…, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ на сСгодняшний дСнь ΠΎΠ½ΠΈ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнныС.

А вот ΠΊΠ°ΠΊ он выглядит с налоТСниСм сСтки ΠΈΒ Π»ΠΈΠ½Π΅Π΅ΠΊ:

ΠœΡ‹Β Π²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ всС элСмСнты Π²ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ в сСтку. ВсС Ρ‡Π΅Ρ‚ΠΊΠΎ ΠΈΒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½Ρ‹Π΅ Ρ€ΠΎΠ²Π½Ρ‹Π΅ столбцы. ЕдинствСнноС, с чСм ΠΌΠΎΠ³Π»ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΡƒΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹Β β€” это элСмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Β ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡Π΅Π½Ρ‹ Π·Π²Π΅Π·Π΄Π°ΠΌΠΈ. Π­Ρ‚ΠΎ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΊ ΠΈΠΊΠΎΠ½ΠΊΠΈ с тСкстом, Ρ‚Π°ΠΊ ΠΈΒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ Π²Β ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ, ΠΈΠ»ΠΈ просто столбцы с тСкстом. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Ρ€Π°ΡΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ расстояниС, ΠΌΠ½Π΅ Π½Π΅Β ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ Π΄Π΅Π»Π°Ρ‚ΡŒ слоТных вычислСний, Π²Ρ‹ΠΌΠ΅Ρ€ΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ пиксСль, ΠΏΠ»ΠΎΠ΄ΠΈΡ‚ΡŒ Π½Π΅Β Π½ΡƒΠΆΠ½Ρ‹Π΅ Π²Β Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ Π»ΠΈΠ½Π΅ΠΉΠΊΠΈ ΠΈΒ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. А всС ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ сСтка. Π˜Ρ‚Π°ΠΊ, у мСня 4Β Β«Π·Π²Π΅Π·Π΄Ρ‹Β» ΠΈΒ 12Β ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π΄Π΅Π»ΠΈΠΌ 12Β Π½Π° 4Β ΠΈΒ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΏΠΎΒ 3Β ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π½Π°Β ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚. Π’ΠΎΒ Π΅ΡΡ‚ΡŒ Ρ†Π΅Π½Ρ‚Ρ€ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Β«Π·Π²Π΅Π·Π΄Ρ‹Β» Π΄ΠΎΠ»ΠΆΠ΅Π½ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ посСрСдинС Ρ†Π΅Π½Ρ‚Ρ€Π°Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ·Β Π²Ρ‹Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… Π½Π°Β Π½Π΅Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.

Но, ΠΊΒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, у вас Π½Π΅Β 4, Π°Β 11Β Ρ‚Π°ΠΊΠΈΡ… ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ². Π‘ΠΊΠΎΡ€Π΅ΠΉ всСго, ΠΎΠ½ΠΈ нС помСстятся Π²Β ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π½ΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π²Β ΠΎΠ΄ΠΈΠ½ ряд, Π·Π½Π°Ρ‡ΠΈΡ‚, сдСлаСм 2 ряда — 6 свСрху ΠΈΒ 5 снизу ΠΈΠ»ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚. Π‘Π΅Ρ€Π΅ΠΌ наши 12Β ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈΒ Π΄Π΅Π»ΠΈΠΌ Π½Π°Β 6. ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ ΠΏΠΎΠ΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Π½Π°Β ΠΏΡƒΠ½ΠΊΡ‚, Ρ‚ΠΎΒ Π΅ΡΡ‚ΡŒ Ρ†Π΅Π½Ρ‚Ρ€ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΡƒΠ½ΠΊΡ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ посСрСдинС ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΊΠ° ΠΌΠ΅ΠΆΠ΄Ρƒ двумя СС столбцами, прямо Π½Π°Β Π»ΠΈΠ½Π΅ΠΉΠΊΠ΅, ΠΈΒ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅. Π Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ мСньшС 1920Β Ρ€Ρ… (Π²ΠΏΠ»ΠΎΡ‚ΡŒ Π΄ΠΎΒ 960Β Ρ€Ρ…) Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒ Π½Π΅Β Π±ΡƒΠ΄Π΅ΠΌ. Π’Π°ΠΊ ΠΊΠ°ΠΊ контСнтная Ρ‡Π°ΡΡ‚ΡŒ у нас 960Β Ρ€Ρ… ΠΈΒ ΠΏΠ΅Ρ€Π΅ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅Β Π½ΡƒΠΆΠ½ΠΎ, ΠΌΠ°ΠΊΠ΅Ρ‚ просто обрСзаСтся с обСих сторон.

Π Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ мСньшиС 1920Β Ρ€Ρ… Π²ΠΏΠ»ΠΎΡ‚ΡŒ Π΄ΠΎΒ 960Β Ρ€Ρ… Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒ Π½Π΅Β Π±ΡƒΠ΄Π΅ΠΌ. Π’Π°ΠΊ ΠΊΠ°ΠΊ контСнтная Ρ‡Π°ΡΡ‚ΡŒ у нас 960Β Ρ€Ρ… ΠΈΒ ΠΏΠ΅Ρ€Π΅ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅Β Π½ΡƒΠΆΠ½ΠΎΒ β€” ΠΌΠ°ΠΊΠ΅Ρ‚ просто обрСзаСтся с обСих сторон.

Рассмотрим Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ 768?1024. Π—Π΄Π΅ΡΡŒ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡƒΠΆΠ΅ 8. НачнСм с шапки. Π›ΠΎΠ³ΠΎΡ‚ΠΈΠΏ, Π½ΠΎΠΌΠ΅Ρ€ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π° ΠΈΒ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты просто сдвигаСм ΠΊΒ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Π°Β Π²ΠΎΡ‚ ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ мСню у нас ΡƒΠΆΠ΅ нС постятся, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ само мСню Π»ΡƒΡ‡ΡˆΠ΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ:

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ‚ΠΎΠΆΠ΅ Π²Π΅Π»ΠΈΠΊΠΎΠ²Π°Ρ‚. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ, Ссли Π½Π΅Ρ‚ возмоТности пСрСноса Π½Π°Β Π΄Ρ€ΡƒΠ³ΡƒΡŽ строку, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°. Π’ΠΎΠΎΠ±Ρ‰Π΅ всС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ по сайту ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹Π΅ Π±ΡƒΠΊΠ²Ρ‹ Π½Π΅Β Ρ€Π΅Π·Π°Π»ΠΈ Π³Π»Π°Π·, а вся страница ΡΠΌΠΎΡ‚Ρ€Π΅Π»Π°ΡΡŒ Π±ΠΎΠ»Π΅Π΅ Π³Π°Ρ€ΠΌΠΎΠ½ΠΈΡ‡Π½ΠΎ.

Наши Β«Π·Π²Π΅Π·Π΄Ρ‹Β» здСсь ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ. Π˜Β Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ Π΄ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ ΠΏΠΎΒ 4Β ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ, появилась Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π²ΠΈΠ½ΡƒΡ‚ΡŒ тСкст.

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π±Π»ΠΎΠΊ Ρ‚ΠΎΠΆΠ΅ пСрСстроился:

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

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

В этом Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ Π½ΡƒΠΆΠ½ΠΎ по максимуму ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ количСство всячСских ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ½ΠΈΠ·ΠΈΡ‚ΡŒ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ сайта. Но Ссли Π±Π΅Π· основной ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π°Β Π³Π»Π°Π²Π½ΠΎΠΌ экранС Π½ΠΈΠΊΠ°ΠΊ Π½Π΅Β ΠΎΠ±ΠΎΠΉΡ‚ΠΈΡΡŒ, Π΅Π΅Β ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ. Волько ΠΏΠΎΡΡ‚Π°Ρ€Π°Ρ‚ΡŒΡΡ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π΅Β ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Π³Ρ‡Π΅. Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅ΠΌ, Π½ΠΎΒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всС-Ρ‚Π°ΠΊΠΈ Π±Ρ‹Π»ΠΎ ясно, Ρ‡Ρ‚ΠΎ это Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, а нС просто тСкст. РасстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ Ρ‚Π°ΠΊΠΆΠ΅ стоит Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠΊΡ€Π°Ρ‚ΠΈΡ‚ΡŒ, Π³Π»Π°Π²Π½ΠΎΠ΅Β β€” Ρ‡Ρ‚ΠΎΠ±Ρ‹ вся страница ΡΠΌΠΎΡ‚Ρ€Π΅Π»Π°ΡΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΠΈΒ Π³Π°Ρ€ΠΌΠΎΠ½ΠΈΡ‡Π½ΠΎ

Π—Π΄Π΅ΡΡŒ наши ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ со звСздами Π²Ρ‹ΡΡ‚Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΎΠ΄Π½Π° ΠΏΠΎΠ΄ ΠΎΠ΄Π½ΠΎΠΉ. ΠΠΎΒ Π±Ρ‹Π²Π°ΡŽΡ‚ случаи, ΠΊΠΎΠ³Π΄Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ замСняСт Π·Π²Π΅Π·Π΄Π°, нС слишком Π²Π°ΠΆΠ½Π° по смыслу (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€,Β β€” нСбольшая ΠΈΠΊΠΎΠ½ΠΊΠ°). Π’ΠΎΠ³Π΄Π° ΠΌΠΎΠ½ΠΎ ΠΈΒ ΠΏΠ΅Ρ€Π΅ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ этот Π±Π»ΠΎΠΊ ΠΏΠΎΒ Ρ‚Π°ΠΊΠΎΠΌΡƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ:

Π”Π°Π½Π½Ρ‹ΠΉ Π±Π»ΠΎΠΊ Ρ‚ΠΎΠΆΠ΅ Π±Ρ‹Π» пСрСстроСн. Ѐоновая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° ΡƒΠ΄Π°Π»Π΅Π½Π°, Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ нС нСсСт Π½ΠΈΠΊΠ°ΠΊΠΎΠΉ смысловой Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠΈΒ β€” Π΅Π³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ. Π­Ρ‚ΠΈΠΌ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠΌ всСгда стоит Ρ€ΡƒΠΊΠΎΠ²ΠΎΠ΄ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ создании мобильной вСрсии сайта.

ΠšΠ°Ρ€Ρ‚Ρƒ оставляСм Π½Π΅Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚ΠΎΠΉ, самоС Π³Π»Π°Π²Π½ΠΎΠ΅Β β€” Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½Π° в высоту Π²ΠΏΠΈΡΡ‹Π²Π°Π»Π°ΡΡŒ Π²Β 480Β Ρ€Ρ…. И подвал ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ слоТностСй Π½Π΅Β Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚.

Π˜Ρ‚Π°ΠΊ, Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ у нас ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ: структура снова ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ сохранСна, всС элСмСнты располоТСны Ρ€ΠΎΠ²Π½ΠΎ, Π΄Π°ΠΆΠ΅ мобильная вСрсия Π»Π΅Π³ΠΊΠ° и приятна для восприятия, Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… Π»ΠΈΡˆΠ½ΠΈΡ… Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ, всС на своих мСстах.

Из всСго Π²Ρ‹ΡˆΠ΅ΡΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄: сСтки каТутся лишними, Π½Π΅ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ ΠΈΒ Π½Π΅Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли Π²Ρ‹Β Π½ΠΈΠΊΠΎΠ³Π΄Π° ΠΈΠΌΠΈ нС пользовались. Но стоит с ними Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Π½Π°ΠΉΡ‚ΠΈ для сСбя Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящиС, ΠΊΠ°ΠΊ ΡƒΠΆΠ΅ Π½Π΅Β ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΠ΅ΡˆΡŒ своСй Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π±Π΅Π· Π½ΠΈΡ….

ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Π½Π° ModularGrid

ΠŸΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ ΠŸΡ€ΠΎΡ‡Π΅Π΅ / unknown0001010 Music256klabs2hp4ms Company5540lab7 DialsAbstract DataAbyss DevicesAcid доТдь TechnologyAcidlabACLACXSynthADDAC SystemAdventure AudioAemitAfter ПозТС AudioAfterlife LaboratoriesAI SynthesisAion ModularAJH SynthALM Busy CircuitsAlright DevicesAlyseumAMSynthsAnalog OrdnanceAnalogue SolutionsAnalogue SystemsAnimal Π·Π°Π²ΠΎΠ΄ AmplificationAniModuleAntimatter AudioAntumbraAqa ElektrixARCArcaicoArcus AudioARREL AudioArturiaAtomosynthAtoVprojectAudio DamageAudio ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ ObsessionAudiospektriAudiothingiesAvonSynthBananalogueBardBarton ΠœΡƒΠ·Ρ‹ΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ CircuitsBarulloBastl InstrumentsBearModulesBeast-TekBEBBefacoBehringerBig T MusicbirdkidsBizarre JezabelBizmuth ModularBlack CorporationBlack Π Ρ‹Π½ΠΎΠΊ ModularBlind Monk ModularBlood Π―Ρ‡Π΅ΠΉΠΊΠΈ ΠΡƒΠ΄ΠΈΠΎΠœΠΎΠ΄ΡƒΠ»ΠΈ Π“ΠΎΠ»ΡƒΠ±ΠΎΠ³ΠΎ ЀонаряBoredbrain ΠœΡƒΠ·Ρ‹ΠΊΠ°Bragi ModularБританская ΡˆΡƒΠΌΠΎΠ²Π°Ρ элСктроникаBroken Siliconbrowns only esClankClattersCMSCodex ModulexConjured CircuitsControlCopper TracesCorsynthCosmotronicCPU ModularCre8audioCritter ΠΈ GuitariCwejmanCylonixCynthiad: MachineryD & D ModulesDannysoundDave Jones DesignDave Smith ModularDelptronicsDelta Sound LabsDer Манн ΠΌΠΈΡ‚ Π΄Π΅Ρ€ MaschineDetroit UndergroundDijkstar MusicDinSyncDivision 6DivKidDnipro modularDobozDoepferdotRed Аудио DesignsDove AudioDovemansDPW DesignDreadboxDwarfcraft DevicesE-RMEarthQuaker DevicesEASElby DesignsElectro-Acoustic ResearchElectro-FaustusElectronic Π²Π΅Ρ‰Π΅ΠΉ… ΠΈ StuffElectrosmithElektrofonEmblematic SystemsEmpress EffectsEMWEncore ElectronicsEnd Π’Ρ€Π΅ΠΌΠ΅Π½Π° ModularEndangered Аудио ResearchEndorphin.esEowaveEpoch ModularEquinoxErdErica SynthsErogenous TonesError InstrumentsErthenvareurorack essentialsEurorack HardwareEvaton TechnologiesEventideExpert SleepersExtralife InstrumentsFalafularFaselunareFeedbackFive12FlameFlight ΠΈΠ· HarmonyFolktekFonitronikFound SoundFPBFrap ToolsFrequency CentralFunkstillFuture Sound SystemsFutureretroG-Π¨Ρ‚ΠΎΡ€ΠΌ ElectroGeeklapeenoGenki InstrumentsGezeitenGibbon DigitalGieskesGinko SyntheseGMSN! Π‘ΠΎΠΆΡŒΡ BoxGotharmanGrayscaleGround Grown CircuitsGrove AudioGrpHackMeHappy NerdingHexdevicesHexinverter Γ‰lectroniqueHikari InstrumentsHinton InstrumentshorstronicHumble AudioIeaskul F.MobentheyIn Π’ TreesIndustrial ΠœΡƒΠ·Ρ‹ΠΊΠ° ElectronicsInnerclock SystemsInstruments ΠΈΠ· ThingsInstruōIntellijelIO InstrumentsIOLabsIron EtherIshizenoitijikJ3RKjoeSeggiolaJolin LabJomoxJoranalogue Audio DesignJPSynthKassutronicsKentonKilpatrick AudioKlangbau KΓΆlnKlaviskNoB technologyknob.farmKnobulaKOMA ElektronikKonstant LabKorb-ModularL-1LA 67LA CircuitsLaboratorio Elettronico PopolareLadikLaurentide SynthWorksLeafAudioLiivateraLimafloLivestock ElectronicsLivewire ElectronicsLividLorenz NeumannLow-Gain ElectronicsLPZW.modulesLuna ModularLZX IndustriesM.A.S.F.Macbeth Бтудия SystemsMachineRoomMacro MachinesMad ΠŸΠ΅Ρ‚ΡƒΡ… LabMageritMajella AudioMake NoiseMaker.ieMalekko Heavy IndustryManhattan AnalogManikin ElectronicManikkMannequinsMarion систСмы CorporationMazzatronMedic ModulesMengQiMusicMetabolic DevicesMetalboxMetasonixMetatronic ModsMetro ModularMFBMFOSMichigan Synth WorksMicrobe ModularmidiphyMillion машина MarchMMI ModularMobula MobularModal ElectronicsModbap ModularModcanModdictModor MusicModulaire MaritimeMonde SynthesizerMonomeMoog Music Inc.MordaxMosaicMoseley InstrumentsMotoviloMΓΈffenzeef MΓΈdularMRG SynthesizersMungo EnterprisesMusic Thing ModularMutable instrumentsMutant ModularMystic CircuitsNakedboardsNANO ModulesNeutron SoundNeuzeit InstrumentsNew БистСмы InstrumentsNexus InstrumentsNoise EngineeringNoise LabNoise ReapNonlinearcircuitsNorth ΠΏΠΎΠ±Π΅Ρ€Π΅ΠΆΡŒΠ΅ Modular CollectiveNorth ΠΏΠΎΠ±Π΅Ρ€Π΅ΠΆΡŒΠ΅ SynthesisNorthern Light ModularNozoΓ―dNumericalnw2sOakleyOIIIAudioOlegtronOlitronik CircuitsOlivella ModularOmiindustriiesomsonicOrphoOrthogonal DevicesOscillosaurusoZoe.frPanels4DIYParatekPatch & TweakPatching PandaPercussaph modularPharmasonicPittsburgh ModularPlan BPlankton ElectronicsPlum AudioPMFoundationsPolaxisPoly EffectsPolyendPraxis ElectronicsProk ModularProModularPT AudioPucktronixPulpLogicPurrtronicsQosmo ModularQu-Bit ElectronixQuicco SoundRabid ElephantRadical FrequenciesRadikal Technologies Π‘Π»ΡƒΡ‡Π°ΠΉΠ½Ρ‹Π΅ * SourceRare WavesRat King ModularRazmasynthReBachRebel TechnologyReckless экспСримСнтирования AudioRecovery Π­Ρ„Ρ„Π΅ΠΊΡ‚Ρ‹ ΠΈ DevicesRed PanelRetro ΠœΠ΅Ρ…Π°Π½ΠΈΡ‡Π΅ΡΠΊΠΈΠ΅ LabsRetroaktivRetrokitsReverse LandfillRides Π² StormRitual ElectronicsRiverRobauxRolandRossum Electro-MusicRYK ModularRYOSacrament ModularSchenk.WorkSchenktronicsSchippmannSchlappi EngineeringSchottkey ModularSDS DigitalSeismic IndustriesSequentixSerpens ModularSfeoShakmat ModularShift LineShock ElectronixsimpleCircuitsSismoSkull & CircuitsSleepy CircuitsSlow NovaSnazzy FXSnyderphonicsSoftwire SynthesisSognageSOMA LaboratorySonic PotionsSonicsmithSonoclastSonocurrentSoulsbySoundForceSoundmachinesSpecial Stage SystemsSpinal Cat ModularSputnik ModularSquarp InstrumentsSSSR LabsST ModularStarlingSteady государствСнный FateSteffcorpStem ModularStereopingSTG SoundlabsStochastic InstrumentsStrange Наука InstrumentsStrymonStudio ElectronicsSubconscious CommunicationsSuper SynthesisSupercritical SynthesizersSvarogSyinsiSynovatronSynQuaNonSyntaxsynthCubeSynthesis TechnologySynthetic Sound LabsSynthfoxSynthrotekSynthwerksSyntonieSystem80TakaabtaktaktakTall DogTasty ChipsTeiaTenderfoot ElectronicsTesseract ModularThonkThorn AudioThreeTom ModularTimo RozendalTinrsTiptop AudioTokyo Π»Π΅Π½Ρ‚Π° ΠœΡƒΠ·Ρ‹ΠΊΠ° CenterTomaTek -AudioToppobrilloTouellSkouarnTransient Mod ulesTransistor Sounds LabsTrogotronicTronix-Audiotrouby modularTsyklon LabsTubbutecTubeOhmTwisted Electronsu-heUFO ModularVBrazil SystemsVelectronicVenus InstrumentsVerbos ElectronicsVermonaVinicius ElectrikVintageh Synth LabVisible SignalsVoic-Visible SignalsVoic-Visible SignalsdeVultWaldorfWarm Star ElectronicsWarped CircuitsWavefonixWaveLickerWest Oakland ΠœΡƒΠ·Ρ‹ΠΊΠ° SystemsWestlichtWeston Precision AudioWinter ModularWinterbloomWMDWORNG ElectronicsX-Fade ModularXaoc DevicesXoboXODESXOR ElectronicsYork ModularZebra SynthZerosum InertiaZetaohmZΕ‚obZvex

Ѐункция-AttenuatorBlind PanelClock GeneratorClock ModulatorComparatorControllerCV ModulationDelayDigitalDistortionDrumDual / StereoDynamicsEffectEnvelope FollowerEnvelope GeneratorEqualizerExpanderExpressionExternalFilterFrequency DividerFunction GeneratorFuzzLFOLogicLow Pass GateMIDIMixerMultipleNoiseOscillatorPanningPhase ShifterPitch Shifter PolarizerPowerPreAmpQuadQuantizerRandomReverbRing ModulatorSample ΠΈ HoldSamplingSequencerSlew LimiterSwitchSynth VoiceTubeTunerUtilityVCAVideoWaveshaper

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ функция-AttenuatorBlind ΠŸΠ°Π½Π΅Π»ΡŒΠ“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Ρ‡Π°ΡΠΎΠ²ΠœΠΎΠ΄ΡƒΠ»ΡΡ‚ΠΎΡ€ Ρ‡Π°ΡΠΎΠ²ΠšΠΎΠΌΠΏΠ°Ρ€Π°Ρ‚ΠΎΡ€ΠšΠΎΠ½Ρ‚Ρ€ΠΎΠ»Π»Π΅Ρ€CV ΠœΠΎΠ΄ΡƒΠ»ΡΡ†ΠΈΡΠ—Π°Π΄Π΅Ρ€ΠΆΠΊΠ°Π¦ΠΈΡ„Ρ€ΠΎΠ²Ρ‹Π΅ ИскаТСния Π‘Π°Ρ€Π°Π±Π°Π½Π”Π²ΠΎΠΉΠ½ΠΎΠΉ / Π‘Ρ‚Π΅Ρ€Π΅ΠΎΠ”ΠΈΠ½Π°ΠΌΠΈΠΊΠ°Π­Ρ„Ρ„Π΅ΠΊΡ‚Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π·Π° ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚ΠΎΠΌΠ“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π°ΠŸΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ zerExpanderExpressionExternalFilterFrequency DividerFunction GeneratorFuzzLFOLogicLow Pass GateMIDIMixerMultipleNoiseOscillatorPanningPhase ShifterPitch Shifter PolarizerPowerPreAmpQuadQuantizerRandomReverbRing ModulatorSample ΠΈ HoldSamplingSequencerSlew LimiterSwitchSynth VoiceTubeTunerUtilityVCAVideoWaveshaper

HeightAllOnly 1U TilesOnly Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρƒ

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта с ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСткой? — Π’Ρ‹ΠΊΠ²Π° Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ ΠœΠ°Π½Ρ‡Π΅ΡΡ‚Π΅Ρ€

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка — ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых популярных Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ Π²Π΅Π±-сайтов.Π­Ρ‚ΠΎΡ‚ простой Π΄ΠΈΠ·Π°ΠΉΠ½ структурируСт ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΏΡ€Π°ΠΊΡ‚ΠΈΡ‡Π½Ρ‹ΠΌ ΠΈ эффСктивным способом. Но ΠΊΠ°ΠΊΠΎΠ²Ρ‹ Π³Π»Π°Π²Π½Ρ‹Π΅ сообраТСния ΠΏΡ€ΠΈ использовании ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅? Π§Ρ‚ΠΎ ΠΆ, здСсь, Π² Pumpkin Web Design Manchester, ΠΌΡ‹ являСмся Π²Π΅Π΄ΡƒΡ‰ΠΈΠΌΠΈ экспСртами ΠΏΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠœΠ°Π½Ρ‡Π΅ΡΡ‚Π΅Ρ€Π°. ΠœΡ‹ создаСм ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° для прСдприятий ΠΈ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ Π‘Π΅Π²Π΅Ρ€ΠΎ-Π—Π°ΠΏΠ°Π΄Π°. Бюда входят Π‘Π°ΡƒΡ‚ΠΏΠΎΡ€Ρ‚ ΠΈ Π£ΠΈΠ³Π°Π½. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ ΠΌΡ‹ создали это руководство ΠΏΠΎ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΌ сСткам Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Π΅Π±-сайта с ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСткой?

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

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

ΠšΠ°ΠΊΠΎΠ²Ρ‹ прСимущСства ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта с ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСткой?

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка Π΄Π°Π΅Ρ‚ ряд прСимущСств, Π² Ρ‚ΠΎΠΌ числС:

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

Π§Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ использовании ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅?

Π˜Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ слСдуСт ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ использовании ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅? Π§Ρ‚ΠΎ ΠΆ, Π΅ΡΡ‚ΡŒ ряд Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ Π²ΠΎ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Π² Ρ‚ΠΎΠΌ числС:

  • Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ интСрСс. ΠœΠ°ΠΊΠ΅Ρ‚ сСтки ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ скучным, Ссли Π½Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ с творчСским ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ. ΠŸΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ΡΡ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ модуля? Или Ρ‡Π΅Ρ€Π΅Π΄ΡƒΠΉΡ‚Π΅ тСкст ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для большСй Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Для Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ яркого эффСкта ΠΏΠΎΡ‡Π΅ΠΌΡƒ Π±Ρ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ мСньшиС части ΠΎΠ΄Π½ΠΎΠ³ΠΎ изобраТСния Π² качСствС Ρ„ΠΎΠ½Π° для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ модуля? Π—Π°Ρ‚Π΅ΠΌ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠΎΠ·Π°ΠΈΡ‡Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Однако это Π½Π΅ сработаСт для мобильного Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
  • Π Π°Π·ΠΌΠ΅Ρ€ сСтки. Π’Ρ‹Π±ΠΈΡ€Π°ΠΉΡ‚Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎ количСство ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π²Π°ΠΌ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½ΡƒΠΆΠ½ΠΎ.ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ популярСн ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΠΈΠ·ΠΌ, ΠΈ часто использованиС мСньшСго количСства Π±ΠΎΠ»Π΅Π΅ эффСктивно, Ρ‡Π΅ΠΌ использованиС слишком большого количСства. 2 ΠΈΠ»ΠΈ 3 Π½Π° 2 ΠΈΠ»ΠΈ 3 ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ достаточно для Ρ†Π΅Π»Π΅Π²ΠΎΠΉ страницы ΠΈΠ»ΠΈ Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ.
  • Π Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ модуля. Π­Ρ‚ΠΎ слСдуСт ΠΈΠ· Ρ€Π°Π·ΠΌΠ΅Ρ€Π° сСтки. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ большая сСтка ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ модуля. Но для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π΅Π±-сайта Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠ΅Ρ€ΡŒΠ΅Π·Π½ΠΎ ΠΏΠΎΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, насколько большим Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ ΠΈ сколько ΠΎΡ‚Ρ€ΠΈΡ†Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ пространства слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ модулями. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ большоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ.

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΈΠ»ΠΈ совСт ΠΎ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ… для Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° для вашСй ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΡΠ²ΡΠΆΠΈΡ‚Π΅ΡΡŒ с экспСртами сСгодня, здСсь, Π² Pumpkin Web Design Manchester.

Future Forward Pt. 1 | ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°

Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π² Π²ΠΈΠ΄Π΅ сСтки Π·Π°Π²ΠΎΠ΅Π²Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΠΎΡΡ‚ΡŒ Π½Π΅ зря.

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π² ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΌΠΎΠΌΠ΅Π½Ρ‚ собрал Π½Π°Π±ΠΎΡ€ LEGO. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π±Π»ΠΎΠΊ Π»Π΅Π³ΠΊΠΎ встаСт Π½Π° мСсто. Π’ Π±ΡƒΠΊΠ»Π΅Ρ‚Π΅ с инструкциями ΡƒΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΡƒΠ΄Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½Ρ‹ Π΄Π΅Ρ‚Π°Π»ΠΈ, Π½ΠΎ это Π½Π΅ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΅Ρ‰Π΅, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅.Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ пластичСского убСТдСния просто, ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΠΈ нСслоТно для понимания. Π­Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½. ΠœΡ‹ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΠ»ΠΈ ΠΏΠΎΠΏΡƒΠ»ΡΡ€Π½ΡƒΡŽ Ρ‚Π΅ΠΎΡ€ΠΈΡŽ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π² постС ΠΎ Ρ†ΠΈΡ„Ρ€ΠΎΠ²ΠΎΠΌ Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΈΠ·ΡƒΡ‡ΠΈΠΌ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠ΅ ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ (ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ, Π²Ρ‹ Π΄Π°ΠΆΠ΅ Ρ€Π΅ΡˆΠΈΡ‚Π΅ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² своСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, ΠΈΠ»ΠΈ Mindstream сдСлаСт это Π·Π° вас).

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹ΠΉ? Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚ соврСмСнный, ΠΏΡ€Π°Π²Π΄Π°?

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

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

ΠŸΡ€Π΅ΠΆΠ΄Π΅ Ρ‡Π΅ΠΌ ΠΌΡ‹ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ ΠΎΡ‡Π΅Π²ΠΈΠ΄Π½Ρ‹ΠΌ прСимущСствам, ΠΊΡ€Π°Ρ‚ΠΊΠΎ ΠΈΠ·Π»ΠΎΠΆΠΈΠΌ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π·Π½Π°Π΅ΠΌ ΠΎ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΌ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅:

  • Π“ΠΈΠ±ΠΊΠΈΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ Β«ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°Β»
  • Π‘Π»Π΅Π΄ΡƒΠ΅Ρ‚ ΠΊΠ°ΠΊ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ, Ρ‚Π°ΠΊ ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΏΠΎΡ‚ΠΎΠΊΡƒ
  • Π‘ΠΌΠ΅Π½Π½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ содСрТимого для настройки
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² Ρ‚Π°ΠΊΠΈΡ… областях, ΠΊΠ°ΠΊ Π°Ρ€Ρ…ΠΈΡ‚Π΅ΠΊΡ‚ΡƒΡ€Π° ΠΈ производство
  • Волько Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, насколько Π²Ρ‹ позволяСтС

Π¨Π°Π±Π»ΠΎΠ½Ρ‹ = ΠžΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΡ, ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ = Π‘Π²ΠΎΠ±ΠΎΠ΄Π°

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

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

НайдитС ΠΌΠΈΠ½ΡƒΡ‚ΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° домашнюю страницу послС Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½Π° Visit California.

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

Он ΠΈΠΌΠ΅Π΅Ρ‚ удобство шаблона, Π½Π΅ заставляя вас Π»Π΅ΠΏΠΈΡ‚ΡŒ Π² Π½Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.ВмСсто этого Π²Ρ‹ создаСтС ΠΎΠΏΡ‹Ρ‚Π° Π²Π΅Π±-сайта ΠΈΠ· содСрТимого.

ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ ΠΊ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ эффСктивности.

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

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

Π‘Ρ€Π΅Π½Π΄Ρ‹ часто Π΄ΡƒΠΌΠ°ΡŽΡ‚ ΠΎ Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΊΠ°ΠΊ ΠΎ Π·Π°Π΄Π°Ρ‡Π΅, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΡƒΠΉΠ΄Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, ΠΌΠΎΠ΄ΡƒΠ»ΠΈ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΡΠΊΠΎΡ€ΡΡŽΡ‚ процСсс.Π­Ρ‚ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, UX ΠΈΠ»ΠΈ стиля) обСспСчиваСт Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ. ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·, ΠΈ это ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ отразится Π½Π° всСм ΠΎΠΏΡ‹Ρ‚Π΅. Π­Ρ‚ΠΎ сниТаСт Π½Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ Π½Π° всСх участников, особСнно Π½Π° Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

Π‘ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ эффСктивно — ΠΎΡ‡Π΅Π½ΡŒ ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΠΎ.

ПослС Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ Π²Π΅Π±-ΠΎΠΏΡ‹Ρ‚, созданный с использованиСм ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΎΠ² ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, каТСтся цСлостным. Π’Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ посСщали сайт ΠΈ Π΄ΡƒΠΌΠ°Π»ΠΈ ΠΏΡ€ΠΎ сСбя: «Π­Ρ‚Π° страница ΠΈΠΌΠ΅Π΅Ρ‚ смысл, Π½ΠΎ Ρ‡Ρ‚ΠΎ Ρ‚Π°ΠΌ с , Ρ‡Ρ‚ΠΎ с Ρ€Π°Π·Π΄Π΅Π»ΠΎΠΌ ?» Π’Ρ‹, вСроятно, Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π½Π΅ΡƒΠ΄Π°Ρ‡Π½Ρ‹Π΅ остатки шаблонного Π²Π΅Π±-сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π» ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² Ρ€Π°Π·Π΄Π΅Π», ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΎΠ½ Π½Π΅ ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠ°Π», ΠΈΠ»ΠΈ просто Π½Π΅ ΠΈΠΌΠ΅Π» Π½ΠΈΡ‡Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ это пространство; явно Π½Π΅ Ρ…Π²Π°Ρ‚Π°Π΅Ρ‚ плавности.На самом Π΄Π΅Π»Π΅, с модулями слоТно Π±Ρ‹Ρ‚ΡŒ Π½Π΅ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ.

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

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ конструкция Π½ΠΈΠΊΡƒΠ΄Π° Π½Π΅ дСнСтся.

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

Π‘Π΅Ρ‚ΠΊΠ°

— ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΠ΅ с Ρ‚ΠΈΠΏΠΎΠΌ

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ дСлСния свСрху Π²Π½ΠΈΠ· Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ дСлСниям слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ.Π­Ρ‚ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ ΡƒΠΏΡ€Π°Π²Π»ΡΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΎΠ±Ρ€Π΅Π·ΠΊΠΎΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ тСкста. Π’ 1950-Ρ… ΠΈ 1960-Ρ… Π³ΠΎΠ΄Π°Ρ… ΡˆΠ²Π΅ΠΉΡ†Π°Ρ€ΡΠΊΠΈΠ΅ графичСскиС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹, Π² Ρ‚ΠΎΠΌ числС ГСрстнСр, Π ΡƒΠ΄Π΅Ρ€ ΠΈ ΠœΡŽΠ»Π»Π΅Ρ€-Π‘Ρ€ΠΎΠΊΠΌΠ°Π½Π½, Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСточныС систСмы, ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠΉ здСсь.

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Π°Ρ сСтка: ΠšΠ°Ρ€Π» ГСрстнСр

ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ проСктирования Π‘Π΅Ρ‚ΠΊΠ° , 1963
(пСрСрисована). Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€: ΠšΠ°Ρ€Π» ГСрстнСр. Π˜Π·Π΄Π°Ρ‚Π΅Π»ΡŒ: Артур Ниггли, Π¦ΡŽΡ€ΠΈΡ….
Π­Ρ‚Π° квадратная сСтка состоит ΠΈΠ· ΡˆΠ΅ΡΡ‚ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… столбцов ΠΈ ΡˆΠ΅ΡΡ‚ΠΈ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ
, Π½Π°Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… Π΄Ρ€ΡƒΠ³ Π½Π° Π΄Ρ€ΡƒΠ³Π° сСтками ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ, Π΄Π²ΡƒΡ…, Ρ‚Ρ€Π΅Ρ… ΠΈ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… Π΅Π΄ΠΈΠ½ΠΈΡ†.
По Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ сСтка рСгулируСтся ΠΌΠ΅Ρ€ΠΎΠΉ ΠΈΠ· 10 ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ², которая
опрСдСляСт ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π» ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΎΡ‚ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ Π΄ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ.

Базовая сСтка

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСтки ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΠΏΡƒΡ‚Π΅ΠΌ размСщСния Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΡ… ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ Π±Π°Π·ΠΎΠ²ΠΎΠΉ сСткС , которая управляСт всСм Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ. Π‘Π°Π·ΠΎΠ²Ρ‹Π΅ сСтки слуТат для привязки всСх (ΠΈΠ»ΠΈ ΠΏΠΎΡ‡Ρ‚ΠΈ всСх) элСмСнтов ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΊ ΠΎΠ±Ρ‰Π΅ΠΌΡƒ Ρ€ΠΈΡ‚ΠΌΡƒ. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π±Π°Π·ΠΎΠ²ΡƒΡŽ сСтку, Π²Ρ‹Π±Ρ€Π°Π² Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ тСкста, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Scala Pro 10 ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² с ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆΠ΅ΠΌ 12 ΠΏΡƒΠ½ΠΊΡ‚ΠΎΠ² (10/12).Π˜Π·Π±Π΅Π³Π°ΠΉΡ‚Π΅ автоматичСского ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с Ρ†Π΅Π»Ρ‹ΠΌΠΈ числами, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠΌΠ½ΠΎΠΆΠ°ΡŽΡ‚ ΠΈ дСлят чисто. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ это ΠΏΡ€ΠΈΡ€Π°Ρ‰Π΅Π½ΠΈΠ΅ мСТстрочного ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π±Π°Π·ΠΎΠ²ΡƒΡŽ сСтку Π² настройках Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°.

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

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, подписи ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ элСмСнты, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ мСТдустрочный ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Π±Π°Π·ΠΎΠ²ΠΎΠΉ сСткой, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ 18/24 для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², 14/18 для ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ 8/12 для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ². Π’Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ приращСния (высота строки Π² CSS) для создания Ρ‚Π°Π±Π»ΠΈΡ† стилСй с Ρ‡Π΅Ρ‚ΠΊΠΎ согласованными Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ линиями.По возмоТности располоТитС всС элСмСнты страницы ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π±Π°Π·ΠΎΠ²ΠΎΠΉ сСтки. Но Π½Π΅ заставляйтС Π΅Π³ΠΎ. Иногда ΠΌΠ°ΠΊΠ΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅, Ссли Π²Ρ‹ пСрСопрСдСляСтС сСтку. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π±Π°Π·ΠΎΠ²ΡƒΡŽ сСтку, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ элСмСнтов; Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π°ΠΉΡ‚Π΅ Π΅Π³ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ ΠΎΡ‚Π²Π»Π΅ΠΊΠ°Π΅Ρ‚.

6 ΠΏΡ€Π°Π²ΠΈΠ» создания ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² сСтки Π² Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅

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

НапримСр, ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠ² ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π½Π° основС сСтки, часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ, называСтся систСмой сСтки 8pt. Π­Ρ‚Π° концСпция Π±Ρ‹Π»Π° Π²Π²Π΅Π΄Π΅Π½Π° Π² соотвСтствии с рСкомСндациями Google ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ². Π’ систСмС Material Design ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ сСтка, состоящая ΠΈΠ· ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΎΠ² 8 x 8 pt.На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ элСмСнт Π½Π° страницС Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΡ€Π°Ρ‚Π΅Π½ / ΠΊΡ€Π°Ρ‚Π΅Π½ восьми.

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

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

Π‘Π΅Ρ‚ΠΊΠΈ: столбчатыС ΠΈ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ — 354

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ свою сСтку, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ количСство тСкста ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‚ΠΈΠΏΡ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ тСкста, ΡƒΡ€ΠΎΠ²Π½ΠΈ значСния ΠΈ ваТности, ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρƒ тСстом ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρƒ тСкстом / изобраТСниями ΠΈ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΌ.

РасполоТСниС столбцов

Книги располоТСны Π² ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°Ρ… (с сайта Β«Thinking With TypeΒ» Π­Π»Π»Π΅Π½ Π›ΡƒΠΏΡ‚ΠΎΠ½):

Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Π»ΠΈΠ½ΠΈΠΈ зависания . Π‘ сайта Π­Π»Π»Π΅Π½ Π›ΡƒΠΏΡ‚ΠΎΠ½ Β«Thinking With TypeΒ».

Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Π»ΠΈΠ½ΠΈΠΈ зависания . Π‘ сайта Π­Π»Π»Π΅Π½ Π›ΡƒΠΏΡ‚ΠΎΠ½ Β«Thinking With TypeΒ».

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСти

Π‘ΠΎΠ»Π΅Π΅ слоТная информация, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π³ΠΎΠ΄ΠΎΠ²ΠΎΠΉ ΠΎΡ‚Ρ‡Π΅Ρ‚ (см. НиТС) ΠΈΠ»ΠΈ ΠΊΠ½ΠΈΠ³Π°, написанная Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… языках, Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΠΎΠΉ сСтки :

ΠŸΠΎΡΡ‚Ρ€ΠΎΠ΅Π½ΠΈΠ΅ сСтки. Π‘Π΅Ρ‚Π΅Π²Ρ‹Π΅ исслСдования. ΠšΠ½ΠΈΠΆΠ½Ρ‹Π΅ ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ†ΠΈΠΎΠ½Π½Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°ΡŽΡ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΈ пропорциями страницы, эскизами эскизов, ΠΎΠ±Ρ€Π°Π·Ρ†Π°ΠΌΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ², исслСдованиями основного тСкста ΠΈ исслСдованиями сСтки.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π° страницы Π² ΡˆΠ²Π΅ΠΉΡ†Π°Ρ€ΡΠΊΠΎΠΌ соврСмСнном стилС. Π’Ρ‹ΡˆΠ΅ ΠΈΠ· Π»Π΅ΠΊΡ†ΠΈΠΈ Frost Design.

Modular Grid ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° β€‹β€‹Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ информация . Π‘ сайта Π­Π»Π»Π΅Π½ Π›ΡƒΠΏΡ‚ΠΎΠ½ Β«Thinking With TypeΒ».

ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ β„– 1:
Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ копию основного тСкста, ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ ΠΈ Π΄Π»ΠΈΠ½Ρƒ строки для построСния ΠΌΠ°ΠΊΠ΅Ρ‚Π° сСтки ΠΈ высоты страницы.

ΠŸΠΎΠ΄Ρ…ΠΎΠ΄ β„– 2:
Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ страницы ΠΈ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ, Π·Π°Ρ‚Π΅ΠΌ создайтС ΡΠ΅Ρ€ΠΈΡŽ исслСдований основного тСкста Π² этих пропорциях для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ сСтки ΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

A) НачнитС с опрСдСлСния высоты страницы, ΠΊΡ€Π°Ρ‚Π½ΠΎΠΉ Π²Π°ΡˆΠ΅ΠΌΡƒ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆΡƒ, с полями ΠΈΠ»ΠΈ Π±Π΅Π· Π½ΠΈΡ… (см. НиТС). B) Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΊΡ€Π°Ρ‚Π½Ρ‹Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆΠ° для опрСдСлСния Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΉ сСтки (см. НиТС для ΠΏΠ΅Ρ‡Π°Ρ‚Π½ΠΎΠΉ страницы ΠΈ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°).

Π’Π²Π΅Ρ€Ρ…Ρƒ с сайта Β«Thinking With TypeΒ» Π­Π»Π»Π΅Π½ Π›ΡƒΠΏΡ‚ΠΎΠ½

Π“Π»Π°Π²Π½Ρ‹ΠΉ рСсурс ΠΏΠΎ сСточным систСмам: ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ (сСтки Indesign, Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ ΠΈ Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏ), ΠΊΠ½ΠΈΠ³ΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅: The Grid System.org.Grid System — это постоянно растущий рСсурс, Π³Π΄Π΅ графичСскиС Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎ сСточных систСмах, Π·ΠΎΠ»ΠΎΡ‚ΠΎΠΌ сСчСнии ΠΈ Π±Π°Π·ΠΎΠ²Ρ‹Ρ… сСтках. Π‘ΠΎΠ·Π΄Π°Π½ΠΎ Антонио ΠšΠ°Ρ€ΡƒΠ·ΠΎΠ½Π΅.

C) Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ Π΄Π»ΠΈΠ½Ρƒ строки для столбцов ΠΈ постройтС Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π΅Π΅ сСтку.

ВсС, Ρ‡Ρ‚ΠΎ составляСт 45–75 символов, ΡˆΠΈΡ€ΠΎΠΊΠΎ считаСтся ΡƒΠ΄ΠΎΠ²Π»Π΅Ρ‚Π²ΠΎΡ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π΄Π»ΠΈΠ½ΠΎΠΉ строки для страницы с ΠΎΠ΄Π½ΠΈΠΌ столбцом, установлСнной с ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ с засСчками Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ тСкста. Π‘Ρ‚Ρ€ΠΎΠΊΠ° ΠΈΠ· 66 символов (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π±ΡƒΠΊΠ²Ρ‹ ΠΈ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹) считаСтся идСальной.Для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с нСсколькими столбцами Π»ΡƒΡ‡ΡˆΠ΅Π΅ срСднСС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ составляСт 40–50 символов. β€”Π ΠΎΠ±Π΅Ρ€Ρ‚ БрингхСрст,

Из Π»Π΅ΠΊΡ†ΠΈΠΈ Ѐрэнка Π§ΠΈΠΌΠ΅Ρ€ΠΎ ΠΏΠΎ основам Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ.

Above ЛСкция Ѐрэнка Π§ΠΈΠΌΠ΅Ρ€ΠΎ ΠΏΠΎ основам Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ.

Базовая сСтка упорядочиваСт страницу. Π’Ρ‹ΡˆΠ΅ ΠΈΠ· Π»Π΅ΠΊΡ†ΠΈΠΈ Frost Design.

Базовая сСтка упорядочиваСт страницу. Π’Ρ‹ΡˆΠ΅ ΠΈΠ· Π»Π΅ΠΊΡ†ΠΈΠΈ Frost Design.

Базовая сСтка упорядочиваСт страницу.Π’Ρ‹ΡˆΠ΅ ΠΈΠ· Π»Π΅ΠΊΡ†ΠΈΠΈ Frost Design.

Frost Design ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ сСтку для Π³ΠΎΠ΄ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΡ‚Ρ‡Π΅Ρ‚Π° Goodman.

Frost Design ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ сСтку для Π³ΠΎΠ΄ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΡ‚Ρ‡Π΅Ρ‚Π° Goodman.

Frost Design ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ сСтку для Π³ΠΎΠ΄ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΡ‚Ρ‡Π΅Ρ‚Π° Goodman.

Frost Design ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½ΡƒΡŽ сСтку для Π³ΠΎΠ΄ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΡ‚Ρ‡Π΅Ρ‚Π° Goodman.

ΠœΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСти (Π² основном)


Π½Π°ΠΉΠ΄Π΅Π½ΠΎ Π² сСтСвой систСмС


Π¦Π²Π΅Ρ‚Π½ΠΎΠΉ ΠΆΡƒΡ€Π½Π°Π»

Π’ΠΈΠ»Π»ΠΈ ΠšΡƒΠ½Ρ†

Π’ΠΎΠ»ΡŒΡ‚Π°

ΠœΠ°Ρ‚ΠΈΠ°Ρ ΠšΠΎΡ€ΠΈΠ°

Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΌΠΎΠ΄ΡƒΠ»ΡŒΠ½Ρ‹Π΅ сСтки Π·Π° сСкунды — Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½

ΠœΠΈΡ€ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… структур

Мой ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ ΠΎΠΏΡ‹Ρ‚ Ρ€Π°Π±ΠΎΡ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ начался с ΠΌΠ°ΠΊΠ΅Ρ‚Π° ΠΆΡƒΡ€Π½Π°Π»Π°.Π”Ρ€ΡƒΠ³ΠΈΠΌΠΈ словами, всС Π½Π°Ρ‡Π°Π»ΠΎΡΡŒ с сСтки. Π­Ρ‚ΠΈ Ρ‚ΠΎΠ½ΠΊΠΈΠ΅ красныС Π»ΠΈΠ½ΠΈΠΈ Π² InDesign сСрСдины 2000-Ρ…. Π― помню Ρ‚ΠΎ Π»ΡŽΠ±ΠΎΠΏΡ‹Ρ‚ΡΡ‚Π²ΠΎ, с ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ я ΠΈΠ·ΡƒΡ‡Π°Π», ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, ΠΊΠ°ΠΊΠΈΠ΅ ΠΎΠ½ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈ ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠΉ ситуации. Π’ странС, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я ΠΆΠΈΠ», Π±Ρ‹Π»ΠΎ ΠΏΠΎΡ‡Ρ‚ΠΈ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ просто ΠΏΠΎΠΉΡ‚ΠΈ ΠΈ ΠΊΡƒΠΏΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½ΠΎ выглядящий ΠΆΡƒΡ€Π½Π°Π» ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΡƒΡŽ-Ρ‚ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΡƒΡŽ ΠΊΠ½ΠΈΠ³Ρƒ ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Ρ‚Π΅ΠΌΠ΅. Π§Ρ‚ΠΎ касаСтся сСток, Ρ‚ΠΎ Π²ΠΎΠΊΡ€ΡƒΠ³ Ρ†ΠΈΡ€ΠΊΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Π»Π° ΠΏΠ°Ρ€Π° ΠΊΠ½ΠΈΠ³ — Ρ…ΠΎΡ€ΠΎΡˆΠΈΠ΅ ΠΊΠ½ΠΈΠ³ΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Β«Π€ΠΎΡ€ΠΌΠ° ΠΊΠ½ΠΈΠ³ΠΈΒ» Π―Π½Π° Π§ΠΈΡ…ΠΎΠ»ΡŒΠ΄Π°, Β«Π‘Π΅Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ систСмы Π² графичСском Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Β» Π™ΠΎΠ·Π΅Ρ„Π° ΠœΡŽΠ»Π»Π΅Ρ€-Π‘Ρ€ΠΎΠΊΠΌΠ°Π½Π½Π° ΠΈ ΠΊΠΎΠ΅-Ρ‡Ρ‚ΠΎ Π΅Ρ‰Π΅, Ρ‡Ρ‚ΠΎ я Π½Π΅ совсСм ΠΌΠΎΠ³Ρƒ Π²ΡΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒ.И, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹, я постоянно исслСдовал ΠΌΠΈΡ€ ΠΊΠΎΠΌΠΌΡƒΡ‚ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ³ΠΎ доступа Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ Π² поисках статСй, ΠΏΡ€Π°Π²ΠΈΠ», ΠΊΠ½ΠΈΠ³, ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ² ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΡΠΎΠΏΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»ΠΎΠ². ΠŸΡ€ΠΎΡˆΠ»ΠΎ ΠΎΠΊΠΎΠ»ΠΎ 10 Π»Π΅Ρ‚ с Ρ‚Π΅Ρ… ΠΏΠΎΡ€, ΠΊΠ°ΠΊ я сдСлал ΠΈ Π·Π°Π±Ρ‹Π» этот ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΆΡƒΡ€Π½Π°Π»Π°, Π½ΠΎ это Π»ΡŽΠ±ΠΎΠΏΡ‹Ρ‚Π½ΠΎΠ΅ чувство Π½Π΅ ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ‚ мСня Π΄ΠΎ сих ΠΏΠΎΡ€. Π”ΡƒΠΌΠ°ΡŽ, ΠΎΠ½ Π΄Π°ΠΆΠ΅ стал большС.

Как всС Π½Π°Ρ‡ΠΈΠ½Π°Π»ΠΎΡΡŒ

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

ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΡ‚ΡŒ ΠΊ исполнСнию, ΠΌΡ‹ ΠΏΡ€ΠΎΠ²Π΅Π»ΠΈ ΠΏΠ°Ρ€Ρƒ ΠΏΠ΅Ρ€Π΅Π³ΠΎΠ²ΠΎΡ€ΠΎΠ² с Π°Ρ€Ρ‚-Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ΠΎΠΌ ΠΈ соучрСдитСлСм Charmer АлСксандром Π“Π»Π°Π΄ΠΊΠΈΡ… ΠΎ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°Ρ… ΠΊ Ρ€Π΅Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ ΠΌΠ΅Π΄ΠΈΠ°, использованию Π³Ρ€ΠΈΠ΄-систСм, Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ Ρ€ΠΎΠ»ΠΈ ΠΌΠ΅Π΄ΠΈΠ° Π² Π½Π΅ΠΌ.Π― Π±Ρ‹Π» Π²Π΄ΠΎΡ…Π½ΠΎΠ²Π»Π΅Π½ Π΅Π³ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°ΠΌΠΈ ΠΈ систСмным ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ явно выдСляли Π΅Π³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ срСди ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ….

Он ΠΏΠΎΠΊΠ°Π·Π°Π» ΠΌΠ½Π΅ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· своих сСток, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π»ΠΈ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ Π² зависимости ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° носитСля, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΠ½ использовал Π² своСм ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 16×9 для Π²Π΅Π±-сайтов с большим количСством Π²ΠΈΠ΄Π΅ΠΎ, 3×2 для Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ ΠΈ Ρ‚. Π”.). Для мСня это Π±Ρ‹Π» Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄, учитывая, Ρ‡Ρ‚ΠΎ я ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ строил свои сСточныС систСмы Π½Π° основС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ° — опрСдСляя Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ ΠΈ Π·Π°Ρ‚Π΅ΠΌ составляя ΠΌΠ°ΠΊΠ΅Ρ‚ с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ этого.Π˜Ρ‚Π°ΠΊ, наши Ρ€Π°Π·Π³ΠΎΠ²ΠΎΡ€Ρ‹ Π²Ρ‹Π·Π²Π°Π»ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΡ‹ΡˆΠ»Π΅Π½ΠΈΠΉ ΠΈ исслСдований, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ±ΡƒΠ΄ΠΈΠ»ΠΈ мСня Π½Π°Ρ‡Π°Ρ‚ΡŒ поиск Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ объСдинял Π±Ρ‹ ΠΌΠ΅Π΄ΠΈΠ°-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ ΠΈ Ρ‚ΠΈΠΏΠΎΡ†Π΅Π½Ρ‚Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Ρ‹ Π² ΠΎΠ΄Π½Ρƒ систСму с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… вычислСний. ИдСя Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π»Π°ΡΡŒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ эти расчСты Π² простой Π² использовании мастСр, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ» Π±Ρ‹ Π»ΡŽΠ±ΠΎΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ ΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΈ, ΠΊ ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, внСсти свой Π²ΠΊΠ»Π°Π΄ Π² расчСты ΠΏΡ€ΠΈ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

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

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

Π˜Ρ‚Π°ΠΊ, Π½Π°Ρ‡Π½Π΅ΠΌ с тСкста. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ это, Π½Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, Ρ€Π°Π·Π±ΠΎΡ€Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ нашим читатСлям бСспорядочно Π²ΠΎΡΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π°Π²Ρ‚ΠΎΡ€Ρ‹ ΠΈΠ»ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ Π²Π΅Π±-сайтов ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ. Π‘Ρ€Π΅Π΄ΠΈ всСх стилСй тСкста, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ прСдставлСны Π½Π° вашСм Π²Π΅Π±-сайтС (Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π»ΠΈΠ΄Ρ‹ ΠΈ Ρ‚. Π”.) Основной тСкст (Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ прямо сСйчас) — это Ρ‚ΠΎΡ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ Ρ‡Π°Ρ‰Π΅ всСго. Π˜Ρ‚Π°ΠΊ, ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ разборчивости тСкста, это ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠ΅ мСсто для Π½Π°Ρ‡Π°Π»Π°. Как ΠΌΡ‹ Π·Π½Π°Π΅ΠΌ ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… исслСдований, Ρ€Π°Π·Π±ΠΎΡ€Ρ‡ΠΈΠ²Ρ‹ΠΉ тСкст, Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ ΠΊΠ½ΠΈΠ³Π° ΠΈΠ»ΠΈ Π²Π΅Π±-сайт, Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π²Ρ‹Π²Π΅Ρ€Π΅Π½Π½Ρ‹ΠΉ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ.А ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ…ΠΎΠ΄ΠΈΡ‚ Π΄ΠΎ настройки свойств основного тСкста, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ Ρ€Π°Π·Π±ΠΎΡ€Ρ‡ΠΈΠ²Ρ‹ΠΌ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€ΠΈΡ‚ΠΌΠ° ΠΈ, Π² соотвСтствии с вашими знаниями, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ графичСских Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Sketch, Photoshop ΠΈΠ»ΠΈ Illustrator) ΠΏΠΎΠΌΠΈΠΌΠΎ процСсса Π²Ρ‹Π±ΠΎΡ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ собираСмся Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΠΎΠ·ΠΆΠ΅, заставит вас ΠΈΠΌΠ΅Ρ‚ΡŒ Π΄Π΅Π»ΠΎ с двумя основными числами — Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ высотой строки, Ρ‡Ρ‚ΠΎ Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ даст Π²Π°ΠΌ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° / высоты строки основного тСкста (Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Π·ΠΎΠ²Π΅ΠΌ Π΅Π³ΠΎ flr для дальнСйшСго использования) . На ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ Π½ΠΈΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ основныС ΠΊΠΎΠΏΠΈΠΈ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… популярных ΠΌΠ΅Π΄ΠΈΠ°-сайтов.

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

Когда Π²Ρ‹ Π½Π°Ρ‡Π½Π΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΊ своСму основному тСксту (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚Π΅ ΠΆΠ΅ самыС flp), Π²Ρ‹ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ (срСди Π΄Ρ€ΡƒΠ³ΠΈΡ… Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ) Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ вашСго Ρ‚Π΅Π»Π° измСнится, Π° ΠΈΠ½ΠΎΠ³Π΄Π° ΠΈ ΠΎΡ‡Π΅Π½ΡŒ сильно.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ это Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π½ΠΈΠΆΠ΅, Π³Π΄Π΅ я использовал Helvetica Neue ΠΈ Baskerville с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ значСниями Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° / высоты строки.

Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ любой ΡˆΡ€ΠΈΡ„Ρ‚ с сайта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ нравится, ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π΅Π³ΠΎ ΠΊ Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΌΡƒ Π²Π°ΠΌΠΈ ΡˆΡ€ΠΈΡ„Ρ‚Ρƒ ΠΈ ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ сработаСт. Π­Ρ‚ΠΎΠ³ΠΎ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚, ΠΈ Π² основном ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, срСди Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π·Π»ΠΈΡ‡ΠΈΠΉ, ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ значСния x-height, ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ с Helvetica Neue (x-height составляСт ΠΎΠΊΠΎΠ»ΠΎ 50% ΠΎΡ‚ font-height) ΠΈ Baskerville (x-height Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π½ΠΈΠΆΠ΅ 50 % ΠΎΡ‚ font-height).Но Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ x-height (ΠΊΠ°ΠΊ ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ значСния ΡˆΡ€ΠΈΡ„Ρ‚Π°) нСльзя ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π² Sketch ΠΈΠ»ΠΈ Photoshop, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свои Π³Π»Π°Π·Π°, ΠΎΠΏΡ‹Ρ‚ ΠΈ чувство красоты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€ΠΈΡ‚ΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π°ΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚. ваша основная копия Π½ΡƒΠΆΠ½Π°. Π˜Ρ‚Π°ΠΊ, Π²ΠΎΡ‚ Π³Π΄Π΅ начинаСтся пСрвая Π·Π°Π΄Π°Ρ‡Π°.

Π― искал Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ ΠΏΡ€ΠΎΡ‡Ρ‚Π΅Π½ΠΈΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ ΠΈ настроСк x-height / font-height ΠΈ нашСл ΠΎΠ΄ΠΈΠ½ интСрСсный ΠΌΠΎΠΌΠ΅Π½Ρ‚ Π² ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Xavier Bertels, Π³Π΄Π΅ ΠΎΠ½ заявил, Ρ‡Ρ‚ΠΎ сущСствуСт сильная Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ€Π°Π·Π±ΠΎΡ€Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒΡŽ основного тСкста ΠΈ x-height / em- ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ высоты бокса (Ρ€Π°Π·ΠΌΠ΅Ρ€ строчных Π±ΡƒΠΊΠ² ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с прописными Π±ΡƒΠΊΠ²Π°ΠΌΠΈ) ΠΈ максимально Π±Π»ΠΈΠ·ΠΊΠΎΠ΅ расстояниС ΠΏΠΎ оси x Π΄ΠΎ 50% ΠΎΡ‚ высоты бокса, Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ для разборчивости вашСго основного тСкста.Он Π΄Π°ΠΆΠ΅ сдСлал Ρ„ΠΎΡ€ΠΌΡƒΠ»Ρƒ для этого, которая ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π° Π½ΠΈΠΆΠ΅, с 16 Π² качСствС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ 8 Π² качСствС значСния x-высоты Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ:

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

Π˜Ρ‚Π°ΠΊ, послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π²Ρ‹Π±Ρ€Π°Π»ΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ для основного тСкста, ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ»ΠΈ Π΅Π³ΠΎ подходящий Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ высоту строки, Ρƒ вас Π΅ΡΡ‚ΡŒ число, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для построСния Π±Π°Π·ΠΎΠ²ΠΎΠΉ сСтки.Π’ ΠΌΠΎΠ΅ΠΌ случаС это число (Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΌΠΈΠΊΡ€ΠΎΠΌΠΎΠ΄ΡƒΠ»ΡŒ) — это высота строки основного тСкста, дСлСнная Π½Π° 2 ΠΈΠ»ΠΈ 3 Π² Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях. КсавьС ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ Π½Π° 3 ΠΈΠ»ΠΈ 4 Π² своСй ΠΏΡ€Π΅Π·Π΅Π½Ρ‚Π°Ρ†ΠΈΠΈ, Π½ΠΎ это Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ зависит ΠΎΡ‚ вас, Ссли Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΅Π³ΠΎ. Π˜Ρ‚Π°ΠΊ, Ссли высота строки ΠΌΠΎΠ΅Π³ΠΎ основного тСкста составляСт 22 ΠΏΡ‚, ΠΌΠΎΠΉ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΌΠΈΠΊΡ€ΠΎΠΌΠΎΠ΄ΡƒΠ»ΡŒ Π±ΡƒΠ΄Π΅Ρ‚ 11 ΠΏΡ‚. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ просто. Π’Π΅ΠΏΠ΅Ρ€ΡŒ я ΠΌΠΎΠ³Ρƒ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ этого:

И Π·Π°Ρ‚Π΅ΠΌ я ΠΌΠΎΠ³Ρƒ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π½Π° Π½Π΅ΠΌ свой Ρ‚ΠΈΠΏ:

Π‘Π»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ шаг — это Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ слоТнСС. Нам Π½ΡƒΠΆΠ½ΠΎ Π½Π°Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ нашими столбцами, ΠΈ скаТСм, Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ 12 ΠΈΠ· Π½ΠΈΡ… для этого.Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ нашСго столбца ΠΈ значСния Π½Π°ΡˆΠΈΡ… ΠΆΠ΅Π»ΠΎΠ±ΠΎΠ² (Ссли, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΎΠ½ΠΈ Π½Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹). Π­Ρ‚ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡ‚ΡŒΡΡ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌΠΈ пропорциями ΠΌΠ΅Π΄ΠΈΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π»ΡŽΠ±ΠΎΠΌΡƒ количСству Π½Π°ΡˆΠΈΡ… столбцов, Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Ρ€Π΅ΠΊΠ»Π°ΠΌΠ½ΠΎΠ³ΠΎ Π±Π°Π½Π½Π΅Ρ€Π° ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ любого графичСского ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² любом Ρ‚ΠΎΡ‡Π½ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅. Если ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ распространСнных пропорциях ΠΌΠ΅Π΄ΠΈΠ°, я Π±Ρ‹ Π½Π°Π·Π²Π°Π» 3: 2 (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ) ΠΈ 16: 9 (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π²ΠΈΠ΄Π΅ΠΎ). Π•ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΠΈΠ»ΠΈ Ρ€Π°ΡΠΏΠ΅Ρ‡Π°Ρ‚Π°Ρ‚ΡŒ.Π§Ρ‚ΠΎ интСрСсно Π² пропорциях, Ρ‚Π°ΠΊ это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ смысл Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² графичСском прСдставлСнии, Π½ΠΎ ΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² качСствС Π·Π²ΡƒΠΊΠΎΠ².

Β«3: 2, ΠΏΠΎΠΌΠΈΠΌΠΎ общСпринятой ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ для Ρ„ΠΎΡ‚ΠΎΡΡŠΠ΅ΠΌΠΊΠΈ, Π² ΠΌΡƒΠ·Ρ‹ΠΊΠ΅ называСтся Perfect Fifth, ΠΈ слуТит для настройки скрипки, начиная с 14 Π²Π΅ΠΊΠ°Β»

Π˜Ρ‚Π°ΠΊ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ (Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π²Ρ‹Π±Π΅Ρ€Π΅ΠΌ 16: 9) с нашим Π±Π°Π·ΠΎΠ²Ρ‹ΠΌ Ρ€ΠΈΡ‚ΠΌΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΡ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ систСму. Когда я Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ столкнулся с этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, я Ρ€Π΅ΡˆΠΈΠ» Ρ€Π°ΡΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ Π΅Π΅ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ — Π²ΠΎΠ·ΡŒΠΌΠΈΡ‚Π΅ всС Π±Π»ΠΎΠΊΠΈ 16: 9, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ Π² Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π΅ ΠΎΡ‚ 160/90 пиксСлСй Π΄ΠΎ 1280/720 пиксСлСй, ΠΈ выяснитС, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ… дСлится Π½Π° 11, Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ ΠΌΠΎΠ΅ΠΌΡƒ Π±Π°Π·ΠΎΠ²ΠΎΠΌΡƒ Ρ€ΠΈΡ‚ΠΌΡƒ.Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ это выглядСло, Π²ΠΎΡ‚ сокращСнная вСрсия процСсса:

Π― взял всС свои Π±Π»ΠΎΠΊΠΈ, ΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡƒΡŽ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΡŽ (16: 9), я Π»Π΅Π³ΠΊΠΎ располоТил ΠΈΡ… Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ. Π—Π°Ρ‚Π΅ΠΌ нарисуйтС столбцы ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ мСньшСго Π±Π»ΠΎΠΊΠ°. И, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, всС Π±Π»ΠΎΠΊΠΈ соотвСтствовали ΠΌΠΎΠ΅ΠΌΡƒ Π±Π°Π·ΠΎΠ²ΠΎΠΌΡƒ Ρ€ΠΈΡ‚ΠΌΡƒ Π² 8 пиксСлСй. ПозТС я ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ», Ρ‡Ρ‚ΠΎ Ρ‚Ρƒ ΠΆΠ΅ Π»ΠΎΠ³ΠΈΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π±Π»ΡŽΠ΄Π°Ρ‚ΡŒ ΠΈ Π² Π°Ρ€Π°Π½ΠΆΠΈΡ€ΠΎΠ²ΠΊΠ΅ ΠΎΠ±Π΅Ρ€Ρ‚ΠΎΠ½ΠΎΠ² Π² ΠΌΡƒΠ·Ρ‹ΠΊΠ΅.

Из этого нСбольшого экспСримСнта ΠΌΡ‹ ΡƒΠ·Π½Π°Π»ΠΈ, Ρ‡Ρ‚ΠΎ Π² энтропии всСх Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ сСтки Π΅ΡΡ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡΠΌ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Ρ‹Π²Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ сСбя ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ структуру Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ², Π½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° Π·Π°Ρ€Π°Π½Π΅Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€ΠΈΡ‚ΠΌ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ хранится Π² вашСй основной ΠΊΠΎΠΏΠΈΠΈ.ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, эти иСрархичСскиС систСмы Π»Π΅Π³ΠΊΠΎ дСлятся Π½Π° столбцы, ΠΏΡ€ΠΈ этом Π² качСствС ΡˆΠΈΡ€ΠΈΠ½Ρ‹ столбца ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ наимСньшая ΡˆΠΈΡ€ΠΈΠ½Π° Π±Π»ΠΎΠΊΠ°. Π˜Ρ‚Π°ΠΊ, вмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ слона Π² Π·Π°Ρ€Π°Π½Π΅Π΅ Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ бокс (Π² нашСм случаС это типичная ΡˆΠΈΡ€ΠΈΠ½Π° сСтки, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 960 ΠΈΠ»ΠΈ 1024 пиксСлСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ), ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΠ±ΠΊΡƒ Π² соотвСтствии с ΠΌΠ΅Ρ‚Ρ€ΠΈΠΊΠ°ΠΌΠΈ слона ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Π΅ΠΌΡƒ Π²ΠΎΠΉΡ‚ΠΈ. с Π²Π΄ΠΎΡ…ΠΎΠΌ. Π§Ρ‚ΠΎ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ, Ρ‚Π°ΠΊ это ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΌΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ значСния ΠΈΠ· Π½Π°ΡˆΠΈΡ… настроСк Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² качСствС Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈΠ· ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹Ρ… ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠΉ.И ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈΠ· этого всю систСму. Π’ Ρ‚ΠΎΡ‚ ΠΌΠΎΠΌΠ΅Π½Ρ‚ я ΠΏΠΎΠ΄ΡƒΠΌΠ°Π», Ρ‡Ρ‚ΠΎ Π±Ρ‹Π»ΠΎ Π±Ρ‹ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΎΠΊΠΎΠ½ΡΡƒΠ»ΡŒΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ с ΠΊΠ΅ΠΌ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ с большим ΠΎΠΏΡ‹Ρ‚ΠΎΠΌ Π² ΠΌΠ°Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠ΅ ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ. Π’ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΉ части ΡΡ‚Π°Ρ‚ΡŒΠΈ я ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Ρƒ ΠΊ ΠΌΠΎΠ΅ΠΌΡƒ соучастнику Π² прСступлСнии — Назару Грабовскому, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ присоСдинился ΠΊΠΎ ΠΌΠ½Π΅ Π² этом ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π΅, начиная, Π½Ρƒ, сСйчас.

Как ΠΏΡ€ΠΈΠ½ΡΡ‚ΡŒ участиС

Назар Грабовский

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

Π‘Π½Π°Ρ‡Π°Π»Π° я Π½Π΅ ΠΌΠΎΠ³ ΠΏΠΎΠ½ΡΡ‚ΡŒ Ρ€ΠΈΡ‚ΠΌ Π² Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Ρ… ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΡΡ‚Ρ€ΠΎΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² ΠΈ Π·Π°Ρ‡Π΅ΠΌ ΠΊΠΎΠΌΡƒ-Ρ‚ΠΎ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π»ΡŽΠ±Ρ‹ΠΌΠΈ числами. Но постСпСнно, ΠΏΠΎ ΠΌΠ΅Ρ€Π΅ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ основы Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΎΠ½Π° ΠΏΡ€ΠΎΡΡΠ½ΡΠ»Π°ΡΡŒ. И ΠΌΠΎΠ΅ΠΉ Π³Π»Π°Π²Π½ΠΎΠΉ Ρ†Π΅Π»ΡŒΡŽ Π±Ρ‹Π»ΠΎ Ρ€Π°Π·Π»ΠΎΠΆΠΈΡ‚ΡŒ Π²ΠΎΠ·Π½ΠΈΠΊΡˆΡƒΡŽ Ρ‡ΠΈΡΠ»ΠΎΠ²ΡƒΡŽ Π·Π°Π΄Π°Ρ‡Ρƒ Π½Π° основныС ΠΎΡ€Ρ‚ΠΎΠ³ΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ элСмСнты, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€ΠΈΡ‚ΠΌΠΈΡ‡Π΅ΡΠΊΡƒΡŽ сСтку ΠΈΠ· этих основных элСмСнтов.Как ΠΈ любая числСнная Π·Π°Π΄Π°Ρ‡Π° ΠΈ Π΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ (Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ), ΠΎΠ½Π° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ…ΠΎΠ΄ (Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ) ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄ (ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹ΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚). Для мСня это Π½Π°Ρ‡Π°Π»ΠΎΡΡŒ с Π°Π½Π°Π»ΠΈΠ·Π° Π²Ρ…ΠΎΠ΄ΠΎΠ² ΠΈ Π²Ρ‹Ρ…ΠΎΠ΄ΠΎΠ².

АналитичСскоС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅

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

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

Но Π½Π΅ Ρ€Π°ΡΡΡ‚Ρ€Π°ΠΈΠ²Π°ΠΉΡ‚Π΅ΡΡŒ, Ссли Π²Ρ‹ Π½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡ‹ с Ρ‚Π°ΠΊΠΎΠΉ Π½ΠΎΡ‚Π°Ρ†ΠΈΠ΅ΠΉ. ВсС это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ высота ΠΌΠΈΠΊΡ€ΠΎΠ±Π»ΠΎΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΊΡ€Π°Ρ‚Π½Π° Π½ΠΎΠΌΠ΅Ρ€Ρƒ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΠΈ Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя ΡˆΠΈΡ€ΠΈΠ½Π° сСтки Π΄ΠΎΠ»ΠΆΠ½Π° Π΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΌΠΈΠΊΡ€ΠΎΠ±Π»ΠΎΠΊΠ° с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΆΠ΅Π»ΠΎΠ±Π°. Если Π²Π°ΠΌ интСрСсны подробности, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ явноС происхоТдСниС ΠΈ Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΎΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π½ΠΈΠΆΠ΅, Ссли Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ пояснСния.

Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ ритмичСской сСтки

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

Один интСрСсный Ρ„Π°ΠΊΡ‚ обнаруТился ΠΏΡ€ΠΈ Π΄ΠΎΡ€Π°Π±ΠΎΡ‚ΠΊΠ΅ дСсятков сгСнСрированных ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ².НСкоторыС ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΈΠ΅, Ρ‡Π΅ΠΌ Π΄Ρ€ΡƒΠ³ΠΈΠ΅. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π² ΠΌΠ΅Π΄ΠΈΠ° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ довольно ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ количСство ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ, ΠΌΡ‹ рассматриваСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ 1: 1, 3: 2 ΠΈ 16: 9. Для 1: 1 Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ритмичСскиС Π±Π»ΠΎΠΊΠΈ практичСски любого Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΆΠ΅Π»ΠΎΠ±Π°. Но для 16: 9 всС Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚ — Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½ΡƒΠ»Π΅Π²ΠΎΠΉ ΠΏΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΆΠ΅Π»Π°Π΅ΠΌΡ‹Π΅ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ Π±Π»ΠΎΠΊΠ°. НаконСц, 3: 2 посСрСдинС, Π² Π½Π΅ΠΌ изрядно Ρ€ΠΈΡ‚ΠΌΠΎΠ², Π½ΠΎ Π½Π΅ Ρ‚Π°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ 1: 1. Π’ основном это ΠΈΠ·-Π·Π° числа 9, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½Π΅Ρ‡Π΅Ρ‚Π½Ρ‹Π΅ числа Π½Π΅ Ρ‚Π°ΠΊ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ для дСлимости, ΠΊΠ°ΠΊ числа 1 ΠΈ 2.И Π²Ρ‹ ΠΌΠ°Π»ΠΎ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ с этим ΠΏΠΎΠ΄Π΅Π»Π°Ρ‚ΡŒ, Ссли Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ строго Ρ‚ΠΎΡ‡Π½Ρ‹ΠΌ.

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

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

Π‘Π»Π°Π³ΠΎΠ΄Π°Ρ€Π½ΠΎΡΡ‚ΡŒ Π·Π° Ρ‚Ρ€ΡŽΠΊ с ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ Π›Π°Π»ΠΈΡ‚ ΠŸΠ°Ρ‚Π΅Π»ΡŒ, см. Lalit.lab для получСния Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

На этом этапС ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ популярныС систСмныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΡ… названия), Π½ΠΎ всС ΠΆΠ΅ Π½Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΊΠ°ΠΊ-Ρ‚ΠΎ ΠΈΠ·Π²Π»Π΅Ρ‡ΡŒ ΠΈΠ· Π½ΠΈΡ… ΠΌΠ΅Ρ‚Ρ€ΠΈΠΊΠΈ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ…. Ни ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Π½Π΅ прСдоставляСт Π³ΠΎΡ‚ΠΎΠ²ΠΎΠ³ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для получСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Π³Π»ΠΈΡ„Π°Ρ… ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈ ΠΈΡ… ΠΌΠ΅Ρ‚Ρ€ΠΈΠΊΠ°Ρ…, поэтому Ρ€Π°Π±ΠΎΡ‚Π° с Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΌΠ΅Ρ‚Ρ€ΠΈΠΊΠ°ΠΌΠΈ анализируСтся ΠΈ извлСкаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ графичСских инструмСнтов, доступных Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.Π’ частности, Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ визуализируСтся Π½Π° 2D-холстС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, Π° Π·Π°Ρ‚Π΅ΠΌ анализируСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ нСбольшого ΠΊΠΎΠ΄Π° ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Π° сканирования — Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Π² сСмСйствС Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠΎΠ² ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ. ΠžΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ²Π°Ρ Π»ΠΈΠ½ΠΈΠΈ Π½ΠΈΠΆΠ½Π΅ΠΉ ΠΈ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ для Π³Π»ΠΈΡ„ΠΎΠ² H, , d , x , p ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, ΠΌΡ‹ фактичСски ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅ΠΌ основныС Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ΅Ρ‚Ρ€ΠΈΠΊΠΈ для Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π° — высоту ΠΊΠ΅ΠΏΠΊΠΈ, подъСм, x-высоту ΠΈ спуск соотвСтствСнно. Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Ρƒ нас Π΅ΡΡ‚ΡŒ систСмныС ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ ΠΈ ΠΈΡ… ΠΌΠ΅Ρ‚Ρ€ΠΈΠΊΠΈ, ΠΈΠ·Π²Π»Π΅Ρ‡Π΅Π½Π½Ρ‹Π΅ , ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π²Ρ‹Ρ‡Π΅ΡΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ UPM x-height, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ†Π΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·Π±ΠΎΡ€Ρ‡ΠΈΠ²ΠΎΡΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, насколько ΠΎΠ½ΠΎ отклоняСтся ΠΎΡ‚ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ 500UPM .

ΠšΡ€Π΅Π΄ΠΈΡ‚ Π½Π° ΠΈΠ·Π²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ ΠΌΠ΅Ρ‚Ρ€ΠΈΠΊ динамичСского ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΡ€ΠΈΠ½Π°Π΄Π»Π΅ΠΆΠΈΡ‚ ΠœΠ°ΠΉΠΊΡƒ ΠšΠ°ΠΌΠ΅Ρ€ΠΌΠ°Π½ΡΡƒ ΠΈΠ· ΠΊΠΎΠΌΠ°Π½Π΄Ρ‹ Mozilla Foundation.

ВсС эти Ρ…Π»ΠΎΠΏΠΎΡ‚Ρ‹ с ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² ΠΈ ΠΈΠ·Π²Π»Π΅Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ΠΌΠ΅Ρ‚Ρ€ΠΈΠΊ Π±Ρ‹Π»ΠΈ сдСланы, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Π»ΠΎ ритмичСскиС сСтки. ΠšΠ°ΠΆΠ΅Ρ‚ΡΡ, Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Ρƒ нас Π΅ΡΡ‚ΡŒ вся информация, нСобходимая для построСния сСтки Π² Π²Π΅Π±-ΠΌΠ°ΠΊΠ΅Ρ‚Π΅. Но ΠΏΠΎΠ΄ΠΎΠΆΠ΄ΠΈΡ‚Π΅, Π½Π΅ Ρ‚Π°ΠΊ быстро. ВыскакиваСт Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ прСпятствиС. ΠŸΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Ρ‚ΠΎ CSS Π½Π΅ обСспСчиваСт ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ тСкстовой Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ (Π½Π° этот Ρ€Π°Π· ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ фактичСской Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, Π° Π½Π΅ ΠΎ Π½ΠΎΠΌΠ΅Ρ€Π΅ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ).И ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ€ΠΈΡ‚ΠΌΠΈΡ‡Π΅ΡΠΊΡƒΡŽ сСтку с Ρ‚ΠΎΡ‡Π½ΠΎΡΡ‚ΡŒΡŽ Π΄ΠΎ пиксСля, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΌΡ‹ Ρ…ΠΎΡ‚ΠΈΠΌ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ тСкст Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π° Π±Π°Π·ΠΎΠ²Ρ‹Ρ… линиях, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ€Π°Π²Π½ΠΎΠΌΠ΅Ρ€Π½ΠΎ распрСдСлСны Π² сСткС. Π― имСю Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Π² CSS Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ тСкст ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, ΠΊΠ°ΠΊ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ (ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ, смСщСнный Π½Π° Ρ€Π°Π·Π½Ρ‹Π΅ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹), ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ высоту строки для многострочного тСкста, Π½ΠΎ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Π³Π΄Π΅ ΠΈΠΌΠ΅Π½Π½ΠΎ базовая линия тСкста помСщаСтся для ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ³ΠΎ ΡˆΡ€ΠΈΡ„Ρ‚Π°. ΠŸΡ€ΠΎΡΡ‚ΠΎΠ΅ ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅ Π²Π΅Π±-страниц для изучСния этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹: помСститС тСкст, нарисуйтС Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΡƒΡŽ линию ΠΈ располоТитС эту линию, ΠΊΠ°ΠΊ Ссли Π±Ρ‹ ΠΎΠ½Π° Π±Ρ‹Π»Π° Π±Π°Π·ΠΎΠ²ΠΎΠΉ.Π—Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π³Π°Ρ€Π½ΠΈΡ‚ΡƒΡ€Ρƒ ΠΈΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΡˆΡ€ΠΈΡ„Ρ‚Π°. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉ сам. К соТалСнию, тСкст большС Π½Π΅ соотвСтствуСт Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ послС измСнСния ΡˆΡ€ΠΈΡ„Ρ‚Π°? К соТалСнию, консорциум W3C заявляСт ΠΎΠ± этом прямо — Β«CSS Π½Π΅ опрСдСляСт ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ строчного Π±Π»ΠΎΠΊΠ°Β» (стандарт W3C CSS). Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ ΠΏΡ€ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Π° тСкста. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² Ρ€Π΅Π°Π»ΠΈΠ·ΡƒΠ΅Ρ‚ автоматичСскоС Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π² соотвСтствии со своими убСТдСниями, ΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ, ΠΎΠ½ΠΈ Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ (хотя ΠΈ Π½Π΅ Π²ΠΎ всСх).

К ΡΡ‡Π°ΡΡ‚ΡŒΡŽ, рСбята ΠΈΠ· сообщСства Adobe ΡΡ‚ΠΎΠ»ΠΊΠ½ΡƒΠ»ΠΈΡΡŒ с ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΉ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ, поэтому я позаимствовал ΠΈΡ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ стойки для выравнивания Π±ΡƒΠΊΠ²ΠΈΡ†Ρ‹ (ΠΊΡ€Π΅Π΄ΠΈΡ‚ Алана БтСрнса) ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π» Π΅Π³ΠΎ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для выравнивания Π±Π°Π·ΠΎΠ²ΠΎΠΉ Π»ΠΈΠ½ΠΈΠΈ, Π½ΠΎ для многострочного тСкста. ΠŸΠΎΠΏΡ‹Ρ‚Π°ΠΉΡΡ. Π£ Ρ‚Ρ€ΡŽΠΊΠ° Strut всС Π΅Ρ‰Π΅ Π΅ΡΡ‚ΡŒ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅ Π½Π° ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡƒΡŽ высоту строки, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΎΠΊΠΎΠ»ΠΎ 120% Π² зависимости ΠΎΡ‚ ΡˆΡ€ΠΈΡ„Ρ‚Π°. Но это СдинствСнноС ТизнСспособноС кросс-ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ²ΠΎΠ΅ ΠΈ кросс-Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ я смог Π½Π°ΠΉΡ‚ΠΈ Π½Π° Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚. Π― Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΡƒΡΠ»Ρ‹ΡˆΠ°Ρ‚ΡŒ ваши ΠΈΠ΄Π΅ΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ Π½Π°ΠΉΡ‚ΠΈ идСальноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π±Π΅Π· ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ.Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ здСсь происходит, Π΅ΡΡ‚ΡŒ отличная ΡΡ‚Π°Ρ‚ΡŒΡ ΠšΡ€ΠΈΡΡ‚ΠΎΡ„Π΅Ρ€Π° Ауэ, ΠΎΠ±ΡŠΡΡΠ½ΡΡŽΡ‰Π°Ρ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π΅ устройство выравнивания Π² CSS ΠΈ связанныС с этим ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ — Β«Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅: всС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒΒ».

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

ΠŸΠΈΡ„Π°Π³ΠΎΡ€ ΠΈ Π΅Π³ΠΎ послСдоватСли считали, Ρ‡Ρ‚ΠΎ «всС Π΅ΡΡ‚ΡŒ числа». Они Ρ‚Π°ΠΊΠΆΠ΅ считали, Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ шаг Π² ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ ΠΈ Ρ€Π°Π·Ρ€ΡƒΡˆΠ΅Π½ΠΈΠΈ Π»ΡŽΠ±Ρ‹Ρ… Ρ‚ΠΈΠΏΠΎΠ² Π³Π°Ρ€ΠΌΠΎΠ½ΠΈΠΈ, Ρ†ΠΈΡ„Ρ€Ρ‹ — это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ для Π½Π°Ρ‡Π°Π»Π°.

ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

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

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