Π Π°Π·Π½ΠΎΠ΅

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

23.08.2023

Как ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΊ вёрсткС? β€” Π”ΠΈΠ·Π°ΠΉΠ½ Π½Π° vc.ru

Руководство для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ²

21Β 014 просмотров

МнС часто ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π»ΠΈ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΡ…ΠΎΠ΄ΠΈΠ»ΠΈ Π² отпуск ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π»ΠΈ. ΠœΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€Ρ‹ ΠΈ Π°Ρ€Ρ‚-Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€ считали, Ρ‡Ρ‚ΠΎ я быстро Π½Π°Ρ€ΠΈΡΡƒΡŽ Π½Π΅Π΄ΠΎΡΡ‚Π°ΡŽΡ‰ΠΈΠ΅ страницы, вСдь основная Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΡƒΠΆΠ΅ сдСлана.

Π― ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π» ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΈ Π½Π΅ Π²ΠΈΠ΄Π΅Π» Π² Π½ΠΈΡ… Π»ΠΎΠ³ΠΈΠΊΠΈ: ΠΊΡƒΡ‡Π° тСкстовых стилСй для ΠΎΠ΄Π½ΠΎΡ‚ΠΈΠΏΠ½Ρ‹Ρ… случаСв, слои Π½Π΅ сгруппированы ΠΈ Π½Π΅ Π½Π°Π·Π²Π°Π½Ρ‹, старыС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π° просто спрятаны. Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΠΏΠ΅Ρ‚ΡŒ Π² отпуск, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π² спСшкС сдСлал красивыС PNG, Π½Π΅ ΠΏΠΎΠ΄ΡƒΠΌΠ°Π» ΠΏΡ€ΠΎ вёрстку ΠΈ оставил ΠΌΠ½Π΅ сырыС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΡ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚, я Ρ‚Ρ€Π°Ρ‚ΠΈΠ» врСмя, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½Π΅ Π·Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π»ΠΎΡΡŒ Π² Π±ΡŽΠ΄ΠΆΠ΅Ρ‚ ΠΈ сроки ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. ΠœΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ обвинял мСня Π² Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ΅, Ρ‚ΠΎΡ€ΠΎΠΏΠΈΠ» ΠΈ Π³ΡƒΠ½Π΄Π΅Π» Π·Π° спиной. Обидно.

Иногда Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ сразу ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Π» Π½Π΅ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ Π² вСрстку. Π€Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π΅Ρ€Ρ‹ Ρ‚Ρ€Π°Ρ‚ΠΈΠ»ΠΈ ΡƒΠΉΠΌΡƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° поиск Π»ΠΎΠ³ΠΈΠΊΠΈ, ΠΈ сроки вёрстки вырастали Π² Π΄Π²Π° Ρ€Π°Π·Π°. Никто Π½Π΅ Π²ΠΈΠ½ΠΈΠ» Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°, вСдь ΠΎΠ½ сдСлал ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ воврСмя. ВсС косяки лоТились Π½Π° Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ·-Π·Π° нСсправСдливости спивались ΠΈ ΠΊΠΎΠΏΠΈΠ»ΠΈ Π·Π»ΠΎΠ±Ρƒ.

Π’Π°ΠΊΠΎΠ΅ Ρƒ нас ΡΠ»ΡƒΡ‡Π°Π»ΠΎΡΡŒ часто. Но Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ² это достало. Они составили список ошибок Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π°Ρ… ΠΈ обсудили Π΅Π³ΠΎ с Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌΠΈ. ПослС Ρ€Π°Π·Π³ΠΎΠ²ΠΎΡ€Π° ΠΌΡ‹ собрали Ρ‡Π΅ΠΊ-лист ΠΈΠ· Ρ‚Ρ€Π΅Π±ΠΎΠ²Π°Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ ΠΎΡ‚ΠΏΡ€Π°Π²ΠΊΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² вёрстку. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π΄Π΅Π»Π°ΡŽΡ‚ чистыС ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»Π΅Π³ΠΊΠΎ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ. ΠœΡ‹ Ρ€Π΅ΡˆΠΈΠ»ΠΈ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ Π²Π°ΠΌ ΠΏΡ€ΠΎ наш Ρ‡Π΅ΠΊ-лист, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ Π½Π΅ наступали Π½Π° наши Π³Ρ€Π°Π±Π»ΠΈ ΠΈ ΠΆΠΈΠ»ΠΈ Π²Π΅Ρ‡Π½ΠΎ Π² Π΄ΠΎΠ±Ρ€ΠΎΠΌ Π·Π΄Ρ€Π°Π²ΠΈΠΈ.

Как ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΊ вёрсткС?

Π—Π°ΠΊΠ»Π°Π΄Ρ‹Π²Π°ΠΉΡ‚Π΅ врСмя Π½Π° ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²ΠΊΡƒ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΊ вёрсткС

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

Π Π°Π·Π±Π΅Ρ€ΠΈΡ‚Π΅ΡΡŒ с тСкстами

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

1. Π‘ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ список тСкстовых стилСй для всСх элСмСнтов

Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ Π³Π°Ρ€Π½ΠΈΡ‚ΡƒΡ€Ρƒ, Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅, кСгль ΠΈ мСТстрочноС расстояниС. ΠŸΡ€ΠΎΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ тСкстов для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ:

  • ΠΊΠ°ΠΊ ΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ кСгль, Π½Π°Ρ‡Π΅Ρ€Ρ‚Π°Π½ΠΈΠ΅ ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆ;
  • ΠΊΠ°ΠΊΠΈΠ΅ тСкстовыС стили ΠΏΡ€ΠΎΠΏΠ°Π΄Π°ΡŽΡ‚.

Бписок стилСй Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΌ:

Π›Π°ΠΉΡ„Ρ…Π°ΠΊ: для скСтча Π΅ΡΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ CRAFT ΠΎΡ‚ InVision. Он сам создаёт список стилСй ΠΈ позволяСт ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ Π»ΠΈΡˆΠ½ΠΈΡ….

Π‘Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ для ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎΠ³ΠΎ случая вводится Π½ΠΎΠ²Ρ‹ΠΉ тСкстовый ΡΡ‚ΠΈΠ»ΡŒ ΠΈ большС Π½ΠΈΠ³Π΄Π΅ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ. НапримСр, стандартный тСкст Π΄ΠΈΠΊΠΎ смотрится с малСнькой ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ. ΠžΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΡƒ, скаТитС, Ρ‡Ρ‚ΠΎ это вынуТдСнная ΠΌΠ΅Ρ€Π°, ΠΈ ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚Π΅ ΠΏΠΎΡ‡Π΅ΠΌΡƒ.

2. Π Π°Π·Π±Π΅ΠΉΡ‚Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, ΠΏΠΎΠ΄Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ, Π°Π±Π·Π°Ρ†Ρ‹ ΠΈ списки Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ слои

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

ΠŸΠ»ΠΎΡ…ΠΎ: всС тСкстовыС стили собраны Π² ΠΎΠ΄Π½ΠΎΠΌ слоС. Π‘ΠΌΠ΅Π½ΠΎΠΉ ΠΈΠ½Ρ‚Π΅Ρ€Π»ΠΈΠ½ΡŒΡΠΆΠ° ΠΌΠ΅ΠΆΠ΄Ρƒ стилями Π½Π΅ получится ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ слой ΠΊ Π±Π°Π·ΠΎΠ²ΠΎΠΉ сСткС. Вратится ΠΌΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° ΠΈΠ·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ отступов

Π₯ΠΎΡ€ΠΎΡˆΠΎ: ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ тСкстовый элСмСнт β€” ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ слой. НС приходится Π΄Π΅Π»Π°Ρ‚ΡŒ Π»ΠΈΡˆΠ½ΠΈΡ… Ρ‚Π΅Π»ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ тСкстов. Π›Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Ρ€ΠΈΡ‚ΡŒ отступы

3. Π‘Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ списки

ΠœΡ‹ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠ΅ΠΌ списки Ρ‚Π°ΠΊ:

  • ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ ΠΈ строка;
  • ΠΎΠ±Ρ‰ΠΈΠΉ список;
  • Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, Π°Π±Π·Π°Ρ† ΠΈ список.

ΠŸΠ»ΠΎΡ…ΠΎ: ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ столбик β€” ΠΎΠ΄ΠΈΠ½ слой. Π’Ρ€ΡƒΠ΄Π½ΠΎ Π²Ρ‹ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ отступы ΠΌΠ΅ΠΆΠ΄Ρƒ строками ΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€Ρ‹

Если Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅, ΠΎΡ‚Π±ΠΈΠ²Π°ΠΉΡ‚Π΅ строки Π½Π΅ проставлСниСм Enter, Π° ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ Β«ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Β» Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ тСкстовых стилСй.

Π₯ΠΎΡ€ΠΎΡˆΠΎ: всС строки Ρ€Π°Π·Π±ΠΈΡ‚Ρ‹ ΠΏΠΎ слоям ΠΈ каТдая сгруппирована с ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ΠΎΠΌ.

ΠŸΠΎΠ½ΡΡ‚Π½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠ°Ρ€ΠΊΠ΅Ρ€ выравниваСтся ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ строки. Π›Π΅Π³ΠΊΠΎ ΠΈΠ·ΠΌΠ΅Ρ€ΠΈΡ‚ΡŒ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ строками ΠΈ столбцами

ΠŸΡ€ΠΎΠ΄ΡƒΠΌΠ°ΠΉΡ‚Π΅ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ отступы

90% сайтов ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ с Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ вёрсткой. ΠŸΡ€ΠΈ ΠΏΠ»ΠΎΡ…ΠΎΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ элСмСнтов Ρ‚Ρ€ΡƒΠ΄Π½ΠΎ ΠΏΡ€Π΅Π΄ΡƒΠ³Π°Π΄Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π½Π° вёрсткС. Π‘Π΅Π· привязки ΠΊ сСткС элСмСнты ΠΌΠΎΠ³ΡƒΡ‚ Π³ΡƒΠ»ΡΡ‚ΡŒ Π½Π° 2-3 пиксСля Π² Π»ΡŽΠ±ΡƒΡŽ сторону. Π­Ρ‚ΠΎ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Π³ΠΎΠ»ΠΎΠ²Π½ΡƒΡŽ боль Ρƒ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°. Если ΠΎΡ‚ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ° Ρ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ Ρ‡Ρ‘Ρ‚ΠΊΠΎΠ³ΠΎ слСдования ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ (Π΄Π°ΠΆΠ΅ Ссли Π² Π½Ρ‘ΠΌ ошибки), ΠΎΠ½ изнасилуСт Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° тубусом с распСчатанными ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ.

1. ΠŸΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°ΠΉΡ‚Π΅ всС элСмСнты ΠΊ сСткС ΠΈΠ»ΠΈ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌ отступам Π±Π»ΠΎΠΊΠΎΠ²

Π’Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Π²Π΅Π΄ΡƒΡ‚ сСбя ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

ΠŸΠ»ΠΎΡ…ΠΎ: тСкстовыС Π±Π»ΠΎΠΊΠΈ Π½Π΅ привязаны ΠΊ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ. Π€ΠΎΡ‚ΠΎ ΠΈ ΠΈΠΌΠ΅Π½Π° Π²Π΅Π΄ΡƒΡ‰ΠΈΡ… располоТСны Π² случайном порядкС

Π₯ΠΎΡ€ΠΎΡˆΠΎ: тСкстовыС Π±Π»ΠΎΠΊΠΈ привязаны ΠΊ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ. Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ ΠΎ Π²Π΅Π΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π° ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ Π²ΠΈΠ΄Ρƒ ΠΈ ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Π½Π° Π² сСйф-Π·ΠΎΠ½Ρƒ: Ρ‚Π°ΠΊ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ ΠΈΠ·ΠΌΠ΅Ρ€ΡΡ‚ΡŒ отступы

2. ΠŸΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°ΠΉΡ‚Π΅ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹ΠΉ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ тСкст ΠΊ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ ΠΈΠ»ΠΈ модулям

Π‘ΡƒΠ΄Π΅Ρ‚ понятно, ΠΊΠ°ΠΊ тСкст Π²Π΅Π΄Ρ‘Ρ‚ сСбя Π½Π° Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²ΠΎΠΉ вёрсткС. ВСкст с auto-ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ с ΠΏΠΎΠ³Ρ€Π΅ΡˆΠ½ΠΎΡΡ‚ΡΠΌΠΈ Π² нСсколько пиксСлСй.

ΠŸΠ»ΠΎΡ…ΠΎ: Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π½Π΅ привязан ΠΊ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ. НСпонятно, ΠΊΠ°ΠΊ ΠΎΠ½ Π²Π΅Π΄Ρ‘Ρ‚ сСбя ΠΏΡ€ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΠΈ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°: Π±ΡƒΠ΄Π΅Ρ‚ Π»ΠΈ ΠΎΠ½ ΠΎΠ΄Π½ΠΎΠΉ строкой Π΄ΠΎ ΠΏΠΎΠ±Π΅Π΄Π½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΊΠΎΠ³Π΄Π°-Ρ‚ΠΎ появится пСрСнос

Π₯ΠΎΡ€ΠΎΡˆΠΎ: стало понятно, Ρ‡Ρ‚ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ выравниваСтся ΠΏΠΎ Π°Π±Π·Π°Ρ†Ρƒ. Он Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΡˆΠΈΡ€Π΅ Π°Π±Π·Π°Ρ†Π°

ΠŸΡ€ΠΈΠ²ΡΠΆΠΈΡ‚Π΅ тСксты ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΊ модулям: ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠ°ΠΌ, слайдСрам, ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌ. НапримСр, Ссли ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π΅ зависит ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ тСкста, привяТитС тСкст ΠΊΠΎ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΌ отступам ΠΊΠ½ΠΎΠΏΠΊΠΈ:

Если ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ зависит ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ тСкста, Π·Π°Π΄Π°ΠΉΡ‚Π΅ тСксту auto-ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ сдСлайтС Ρƒ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ отступы:

3. Π—Π°Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΈΠΊΠΎΠ½ΠΊΠ°ΠΌ ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ†ΠΈΡΠΌ сСйф-Π·ΠΎΠ½Ρ‹

Π’Π½ΡƒΡ‚Ρ€ΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ списка Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ сэйф-Π·ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ.

ΠŸΠ»ΠΎΡ…ΠΎ: ΠΈΠ·-Π·Π° Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΈΠΊΠΎΠ½ΠΎΠΊ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ приходится Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎ

Π₯ΠΎΡ€ΠΎΡˆΠΎ: благодаря ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ сэйф-Π·ΠΎΠ½Π°ΠΌ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡŽΡ‚ΡΡ Π½Π° вёрсткС автоматичСски

4. ΠŸΠΎΠΊΠ°ΠΆΠΈΡ‚Π΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ отступы

НапримСр, ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΈ ΠΈΠΊΠΎΠ½ΠΊΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΊ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌ:

Π’ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… списках, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ привязаны ΠΊ сСткС, установитС ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ отступы:

Π₯ΠΎΡ€ΠΎΡˆΠΎ: благодаря ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ сэйф-Π·ΠΎΠ½Π°ΠΌ ΠΈΠΊΠΎΠ½ΠΊΠΈ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡŽΡ‚ΡΡ Π½Π° вёрсткС автоматичСски

Π’ Π°Π΄Ρƒ ΠΏΡ€ΠΈΠ³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΡ‚Ρ‘Π» для Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅Π»Π°ΡŽΡ‚ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ мСню ΠΎΠ΄Π½ΠΈΠΌ тСкстовым слоСм, Π° ΠΏΡƒΠ½ΠΊΡ‚Ρ‹ ΠΎΡ‚Π±ΠΈΠ²Π°ΡŽΡ‚ ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ. НС ΠΏΠΎΠ»Π΅Π½ΠΈΡ‚Π΅ΡΡŒ ΠΈ Ρ€Π°Π·Π±Π΅ΠΉΡ‚Π΅ мСню Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ тСкстовыС слои.

ΠŸΠ»ΠΎΡ…ΠΎ: Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅ отступы ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΏΡƒΠ½ΠΊΡ‚Π°ΠΌΠΈ мСню Ρ€Π°Π·Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΏΡ€ΠΎΠ±Π΅Π»Π° Π½Π΅ Π΄Π°Ρ‘Ρ‚ Ρ†Π΅Π»Ρ‹Ρ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ пиксСлСй

Π₯ΠΎΡ€ΠΎΡˆΠΎ: ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΡƒΠ½ΠΊΡ‚ мСню – ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ слой. ΠœΠ΅ΠΆΠ΄Ρƒ слоями Π»Π΅Π³ΠΊΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ отступы

5. ВСстируйтС страницы Π½Π° Π΄ΡƒΡ€Π°Ρ†ΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚

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

НавСдитС порядок Π² слоях

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

1. Π£Π΄Π°Π»ΠΈΡ‚Π΅ скрытыС слои

Часто Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ Π½Π΅ ΡƒΠ΄Π°Π»ΡΡŽΡ‚ старыС Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Π° прячут ΠΈΡ… – Π²Π΄Ρ€ΡƒΠ³ пригодятся. ΠšΠΎΠΏΠΈΡ‚ΡΡ мусор, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π΅ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ².

ΠŸΠ»ΠΎΡ…ΠΎ: скрытыС слои ΠΈΡΠΊΠ°ΠΆΠ°ΡŽΡ‚ поля Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΏΡ€ΠΈ Π²Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠΈ. Π˜Π·ΠΌΠ΅Ρ€Π΅Π½ΠΈΠ΅ отступов прСвращаСтся Π² ΠΏΡ‹Ρ‚ΠΊΡƒ: приходится ΠΊΠΎΠΏΠ°Ρ‚ΡŒΡΡ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΏΠ°ΠΏΠΎΠΊ ΠΈ ΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Ρƒ возникновСния ΠΏΠΎΠ»Π΅ΠΉ

Π₯ΠΎΡ€ΠΎΡˆΠΎ: Ссли Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ Π½Π΅Ρ‚ скрытых слоСв, поля Π³Ρ€ΡƒΠΏΠΏΡ‹ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚ с Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ Π²Π»ΠΎΠΆΠ΅Π½Π½Ρ‹Ρ… ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ²

2.

Π‘Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ слои ΠΊΠ°ΠΊ ΠΌΠ°Ρ‚Ρ€Ρ‘ΡˆΠΊΠΈ

НапримСр: ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, тСкст, ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΈ ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠ° Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΡƒ, ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π² Π½Π°Π±ΠΎΡ€ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ. Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΏΠΎ тСматичСской принадлСТности.

Π₯ΠΎΡ€ΠΎΡˆΠ°Ρ структура ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅

3. Π”Π°ΠΉΡ‚Π΅ понятныС ΠΈΠΌΠ΅Π½Π° слоям ΠΈ Π³Ρ€ΡƒΠΏΠΏΠ°ΠΌ

Π›ΡŽΠ±ΠΎΠΉ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ посмотрит Π½Π° список Π³Ρ€ΡƒΠΏΠΏ, Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π² Π½ΠΈΡ… находится. НапримСр, чСрновая ΠΈ чистовая вСрсии Π»Π΅Π½Π΄ΠΈΠ½Π³Π°.

ВыстраивайтС Π³Ρ€ΡƒΠΏΠΏΡ‹ Π² Ρ‚ΠΎΠΌ порядкС, Π² ΠΊΠ°ΠΊΠΎΠΌ ΠΌΠΎΠ΄ΡƒΠ»ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ Π² ΠΌΠ°ΠΊΠ΅Ρ‚Π΅. НапримСр: Ρ…Π΅Π΄Π΅Ρ€ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ Π² спискС Π³Ρ€ΡƒΠΏΠΏ, Π° Ρ„ΡƒΡ‚Π΅Ρ€ послСдний.

ΠŸΠ»ΠΎΡ…ΠΎ: ΠΏΠΎ структурС Π½Π΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π³Π΄Π΅ находится

Π₯ΠΎΡ€ΠΎΡˆΠΎ: ΠΈΠΌΠ΅Π½Π° Π³Ρ€ΡƒΠΏΠΏ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡŽΡ‚ с Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ структурой Π»Π΅Π½Π΄ΠΈΠ½Π³Π°. Названия Π³Ρ€ΡƒΠΏΠΏ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ интСрфСйса

4. Π‘Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹Π΅ элСмСнты ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ

Π₯ΠΎΡ€ΠΎΡˆΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ – ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡ΠΊΠΈ.

Π£ ΠΊΠ°Ρ€Ρ‚ΠΎΡ‡Π΅ΠΊ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ структурой Π»Π΅Π³Ρ‡Π΅ ΠΏΠΎΠ½ΡΡ‚ΡŒ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² Ρ€Π°Π·Π½Ρ‹Ρ… состояниях

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ

  • Π‘ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ сСбС список Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ сдачСй ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² вёрстку. Π‘Π²Π΅Ρ€ΡΠΉΡ‚Π΅ΡΡŒ с Π½ΠΈΠΌ ΠΏΡ€ΠΈ сборкС ΠΌΠ°ΠΊΠ΅Ρ‚Π°.
  • ΠžΠ±Ρ‰Π°ΠΉΡ‚Π΅ΡΡŒ с Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°ΠΌΠΈ. Π£Π·Π½Π°ΠΉΡ‚Π΅, ΠΊΠ°ΠΊ ΠΈΠΌ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹. ΠŸΠΎΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΈΠΌ эту ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΈ обсудитС, ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠΌΡ‹ Π»ΠΈ совСты Π² вашСй Ρ€Π°Π±ΠΎΡ‚Ρ‹.
  • ΠžΡΠ²ΠΎΠΉΡ‚Π΅ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ Π½Π°Π²Ρ‹ΠΊΠΈ HTML ΠΈ CSS. Π’Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒ стандартныС страницы Π½Π° вёрсткС ΠΈ ΠΏΠΎΠΉΠΌΡ‘Ρ‚Π΅, ΠΊΠ°ΠΊ Π»ΡƒΡ‡ΡˆΠ΅ ΡΠΎΠ±ΠΈΡ€Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ для ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹. Π₯ΠΎΡ€ΠΎΡˆΠΈΠ΅ ΡƒΡ€ΠΎΠΊΠΈ вёрстки (ΠΏΠ΅Ρ€Π²Ρ‹Π΅ занятия бСсплатны). Π£ΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΉ, Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ бСсплатный ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ.
  • Π—Π°Π»ΠΎΠΆΠΈΡ‚Π΅ Π² Π΄ΠΈΠ·Π°ΠΉΠ½-процСсс врСмя Π½Π° Ρ‡ΠΈΡΡ‚ΠΎΠ²ΡƒΡŽ сборку ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ². Π’Ρ‹ ΠΏΠΎΡ‚Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Ρ‡ΡƒΡ‚ΡŒ большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½, Π½ΠΎ сэкономитС ΠΊΡƒΡ‡Ρƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΎΠ². ΠžΠ±ΡŠΡΡΠ½ΠΈΡ‚Π΅ это Π°Ρ€Ρ‚-Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΎΡ€Ρƒ ΠΈ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€Π°ΠΌ.
  • Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для скСтча, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ упростят сборку ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ сэкономят врСмя. CRAFT β€” собираСт ΠΏΠ°Π»ΠΈΡ‚Ρ€Ρƒ стилСй, Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ Π΅Ρ‰Ρ‘ ΠΊΡƒΡ‡Π° ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ³ΠΎ.

Π₯ΠΎΡ€ΠΎΡˆΠΈΡ… Π²Π°ΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈ Π»Ρ‘Π³ΠΊΠΎΠΉ вёрстки!

Блочная вСрстка сайта — ΡƒΡ€ΠΎΠΊ с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ

РаньшС Π½Π° просторах Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° Π±Ρ‹Π» ΡˆΠΈΡ€ΠΎΠΊΠΎ распространён Ρ‚Π°Π±Π»ΠΈΡ‡Π½Ρ‹ΠΉ Ρ‚ΠΈΠΏ вёрстки, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ посвящСна ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ ΡΡ‚Π°Ρ‚ΡŒΡ. Однако со Π²Ρ€Π΅ΠΌΠ΅Π½Π΅ΠΌ этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ созданию структуры сайта устарСл, ΠΈ Π½Π° смСну Π΅ΠΌΡƒ ΠΏΡ€ΠΈΡˆΠ»Π° блочная вёрстка.

ΠžΡ‚Π»ΠΈΡ‡ΠΈΡ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрстки ΠΎΡ‚ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ

Если табличная вёрстка ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ содСрТимоС страницы находятся Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π³Π° <table>, Ρ‚ΠΎ концСпция Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрстки основана Π½Π° Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ использовании ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Π³ΠΎΠ² <div>, Π²Π½ΡƒΡ‚Ρ€ΡŒ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… помСщаСтся содСрТимоС, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚Π΅Π³ΠΈ.

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

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

Π‘ΡƒΡ‚ΡŒ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрстки

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

КаТдая Ρ‡Π°ΡΡ‚ΡŒ страницы помСщаСтся Π² свой Π±Π»ΠΎΠΊ <div>: Π²Π΅Ρ€Ρ… сайта β€” Π² ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ, мСню β€” Π²ΠΎ Π²Ρ‚ΠΎΡ€ΠΎΠΉ, ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ β€” Π² Ρ‚Ρ€Π΅Ρ‚ΠΈΠΉ ΠΈ Ρ‚. Π΄. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ Π±Π»ΠΎΠΊ наполняСтся содСрТимым срСдствами HTML, Π° Ρ‚Π°ΠΊΠΆΠ΅ позиционируСтся ΠΈ оформляСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ.

ΠšΠΎΠ½Π΅Ρ‡Π½Ρ‹ΠΉ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ прСдставляСт собой Π½Π°Π±ΠΎΡ€ Π±Π»ΠΎΠΊΠΎΠ² <div> с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ Π²Π½ΡƒΡ‚Ρ€ΠΈ. ΠžΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ находится Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΌ CSS-Ρ„Π°ΠΉΠ»Π΅, ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΌ ΠΊ страницС Ρ‚Π΅Π³ΠΎΠΌ <link>, ΠΈΠ»ΠΈ ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π΅ <style> сСкции <head>.

ΠŸΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрстки

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ β€” ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, повсСмСстноС использованиС Ρ‚Π΅Π³Π° <div>, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°Ρ‚ΡŒ Π±Π°Π·ΠΎΠ²Ρ‹ΠΌ элСмСнтом Π±Π»ΠΎΡ‡Π½ΠΎΠΉ структуры, Π½ΠΎ ΠΎΠ± этом Π±Ρ‹Π»ΠΎ сказано ΡƒΠΆΠ΅ достаточно ΠΌΠ½ΠΎΠ³ΠΎ.

Π’Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ β€” ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ раздСлСния ΠΊΠΎΠ΄Π°, согласно ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ содСрТимоС ΠΎΡ‚ оформлСния Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡΡ‚ΡŒ. Говоря ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ Π±Π»ΠΈΠΆΠ΅ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ ΡΠ»ΡƒΡ‡Π°ΡŽ: HTML β€” ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ, CSS β€” ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ (ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π² Ρ€Π°Π·Π½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹). Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Π΄Π΅Π»Π°Π΅Ρ‚ структуру понятнСй. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡΡ‚Ρƒ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ CSS, Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρƒ β€” HTML. ВсС смотрят свой ΠΊΠΎΠ΄ ΠΈ Π½Π΅ ΠΌΠ΅ΡˆΠ°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Ρƒ. ИдСально.

Π’Ρ€Π΅Ρ‚ΠΈΠΉ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ β€” Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Π²Π΅Π·Π΄Π΅, Π° ΠΏΠΎ нСобходимости, ΠΏΡ€ΠΈ этом ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚ Π½ΠΈΡ… Ρ‚Π°ΠΊ ΠΆΠ΅ странно, ΠΊΠ°ΠΊ ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π΅ ΠΊ мСсту.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрстки

Но, сколько Π½Π΅ Ρ‚Π΅ΠΎΡ€Π΅Ρ‚ΠΈΠ·ΠΈΡ€ΡƒΠΉ, Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒ всё ΠΏΡ€ΠΎΡ‰Π΅ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅.

Π˜Ρ‚Π°ΠΊ, Ρƒ нас Π΅ΡΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ (рисунок Π½ΠΈΠΆΠ΅). Условный, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ β€” просто Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, вСдь Ρ†Π΅Π»ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° β€” ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ нагляднСй ΠΎΠ±ΡŠΡΡΠ½ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ создания Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрстки. Зная Π±Π°Π·Ρƒ, навСсти красоту ΠΈ ΡƒΡΠ»ΠΎΠΆΠ½ΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Π²Ρ‹ смоТСтС ΠΈ сами, Π° я Π»ΡƒΡ‡ΡˆΠ΅ Π½Π΅ Π±ΡƒΠ΄Ρƒ ΠΏΠ΅Ρ€Π΅Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

Богласно ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ, страница сайта Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΏΡΡ‚ΡŒ Π±Π»ΠΎΠΊΠΎΠ²: Β«ΡˆΠ°ΠΏΠΊΡƒΒ», Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠ΅ мСню, Π±ΠΎΠΊΠΎΠ²ΡƒΡŽ панСль, основной Π±Π»ΠΎΠΊ с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ ΠΈ Β«Π½ΠΎΠ³ΠΈΒ».

Π‘Π½Π°Ρ‡Π°Π»Π° создадим HTML-страницу: ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡ΠΈΠΌ структуру, Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΈΠΌ Π΅Ρ‘. HTML-ΠΊΠΎΠ΄ Π±ΡƒΠ΄Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ:

<!DOCTYPE html>
<html>
<head>
    <title>Блочная вёрстка</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
	<div>
	<h3>header (шапка сайта)</h3>
	</div>
		 
	<div>
	<h3>Π‘Π»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ</h3>
	</div>
		 
	<div>
	<h3>ЛСвая панСль</h3>
	</div>
		 
	<div>
	<h3>Основной ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ страницы</h3>
	</div>
		 
	<div>
		 
	</div>
							   
	<div>
	<h3>footer (Π½ΠΈΠ· сайта)</h3>
	</div>
</div>
</body>
</html>

Π Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρ‹.

<div> β€” это Π±Π»ΠΎΠΊ-Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ, Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΠΈΡΡŒ всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π±Π»ΠΎΠΊΠΈ. Как ячСйки Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π²Π½ΡƒΡ‚Ρ€ΠΈ <table>. НазначСниС Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ понятно, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ Ρ€Π°Π·Π²Π΅ Ρ‡Ρ‚ΠΎ Π±Π»ΠΎΠΊΠ° <div>. Π­Ρ‚ΠΎ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ слой, Π΅Π³ΠΎ смысл Π±ΡƒΠ΄Π΅Ρ‚ понятСн, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΊΠΎΠ΄ CSS.

Если ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ HTML-Ρ„Π°ΠΉΠ» Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π½Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ Ρ‚Π°Π±Π»ΠΈΡ†Ρƒ стилСй, страница Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Ρ‚Π°ΠΊ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Ρ„Π°ΠΉΠ» CSS, ΠΊΠΎΠ΄ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Π½ Π½ΠΈΠΆΠ΅.

body {
     background: #FFF;
     color: #000;
     font-family: Arial, sans-serif;
     font-size: 14px;
}
#header {
     background: #F5DEB3;
     width: 100%;
     height: 55px;
}
 
#container {
     background: #FFD700;
     margin: auto auto;
     text-align: center;
     width: 80%;
     height: 400px;
}
 
#navigation {
     background: #FE9798;
     width: 100%;
     height: 25px;
}
 
#sidebar {
     background: #40E0D0;
     float: left;
     width: 20%;
     height: 280px;
}
#content {
     background: #DCDCDC;
     float: right;
     width: 80%;
     height: 280px;
}
 
#clear {
     clear: both;
}
 
#footer {
    background: #00BFFF;
	width: 100%;
	height: 40px;
}

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ стилСй ΠΌΡ‹ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ оформляСм содСрТимоС Ρ‚Π΅Π³Π° <body> ΠΈ всСх находящихся Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ€Π°Π½Π΅Π΅ ΠΈΠ·ΡƒΡ‡Π΅Π½Π½Ρ‹Ρ… ΠΏΡ€Π°Π²ΠΈΠ».

#clear { clear:both; } Π·Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ элСмСнта слСва ΠΈ справа. Если ΡƒΠ±Ρ€Π°Ρ‚ΡŒ это ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ, вёрстка Β«ΠΏΠΎΠ΅Π΄Π΅Ρ‚Β» ΠΈ Π½ΠΈΠ· сайта пСрСстанСт ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ.

CSS Ρ‚Π²ΠΎΡ€ΠΈΡ‚ чудСса, ΠΈ с Π½ΠΈΠΌ наша HTML-страница ΠΏΡ€ΠΈΠΌΠ΅Ρ‚ ΡƒΠΆΠ΅ совсСм Π΄Ρ€ΡƒΠ³ΠΎΠΉ Π²ΠΈΠ΄.

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

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

  • ΠžΡΠ½ΠΎΠ²Ρ‹ HTML β€” бСсплатный 2-Ρ… часовой видСокурс ΠΏΠΎ основам HTML;
  • БСсплатный курс ΠΏΠΎ вСрсткС сайта β€” ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π±Π»ΠΎΡ‡Π½ΠΎΠΉ вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 β€” ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Ρ‚Π½Ρ‹ΠΉ курс;
  • Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ для Android β€” для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π΄Π°Π²Π½ΠΎ Ρ…ΠΎΡ‚Π΅Π» ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ сСбя Π² мобильной Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ (Π½Π΅ для Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ²).

Как Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚ Π² AutoCAD

Автор: Bill Fane ΠΈ

ОбновлСно: 11 августа 2016 Π³.

AutoCAD 2000 For Dummies
Explore Book ΠšΡƒΠΏΠΈΡ‚ΡŒ На Amazon

Настройка ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² AutoCAD двухэтапный процСсс. ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ шагом являСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±ΡƒΠΌΠ°Π³ΠΈ, Π° Π²Ρ‚ΠΎΡ€Ρ‹ΠΌ шагом являСтся ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΎΠΊΠ½Π° просмотра ΠΈΠ»ΠΈ ΠΎΠΊΠΎΠ½ просмотра.

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Π±ΡƒΠΌΠ°Π³Ρƒ, Π»ΡŽΠ±ΡƒΡŽ Π±ΡƒΠΌΠ°Π³Ρƒ

ΠžΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±ΡƒΠΌΠ°Π³ΠΈ β€” простой процСсс. Π‘Π»Π΅Π΄ΡƒΠΉ этим шагам:
  1. НаТмитС Π½ΡƒΠΆΠ½ΡƒΡŽ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.
  2. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β«ΠœΠ°ΠΊΠ΅Ρ‚Β» Π² мСню Π»Π΅Π½Ρ‚Ρ‹. Π’ΠΊΠ»Π°Π΄ΠΊΠ° Β«ΠœΠ°ΠΊΠ΅Ρ‚Β» появляСтся Π½Π° Π»Π΅Π½Ρ‚Π΅, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠΎΠ³Π΄Π° AutoCAD находится Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.
  3. На ΠΏΠ°Π½Π΅Π»ΠΈ Β«ΠœΠ°ΠΊΠ΅Ρ‚Β» Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ страницы». Запустится ΠΊΠΎΠΌΠ°Π½Π΄Π° PAGESETUP, которая ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ «ДиспСтчСр ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² страницы».
  4. НаТмитС Β«Π‘ΠΎΠ·Π΄Π°Ρ‚ΡŒΒ». ΠŸΠΎΡΠ²ΠΈΡ‚ΡΡ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π½ΠΎΠ²ΠΎΠΉ страницы».
  5. Π’Π²Π΅Π΄ΠΈΡ‚Π΅ подходящСС имя ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ OK. Π”Π°Π»Π΅Π΅ ΠΈΠ΄Π΅Ρ‚ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ страницы». Π­Ρ‚ΠΎ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΡ…ΠΎΠΆΠ΅ Π½Π° Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Plot.
  6. Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΏΡ€ΠΈΠ½Ρ‚Π΅Ρ€, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ρ€Π°Π·ΠΌΠ΅Ρ€ Π±ΡƒΠΌΠ°Π³ΠΈ ΠΈ Ρ‚. Π΄., Π½ΠΎ ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС ΠžΠ±Π»Π°ΡΡ‚ΡŒ ΠΏΠ΅Ρ‡Π°Ρ‚ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠœΠ°ΠΊΠ΅Ρ‚. МногиС ΠΈΠΌΠ΅Π½Π° Π² спискС Имя ΠΏΡ€ΠΈΠ½Ρ‚Π΅Ρ€Π°/ΠΏΠ»ΠΎΡ‚Ρ‚Π΅Ρ€Π° Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ Π·Π½Π°ΠΊΠΎΠΌΡ‹ΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ ΠΏΡ€ΠΈΠ½Ρ‚Π΅Ρ€Ρ‹ ( систСмных ΠΏΡ€ΠΈΠ½Ρ‚Π΅Ρ€ΠΎΠ², Π½Π° ΠΆΠ°Ρ€Π³ΠΎΠ½Π΅ AutoCAD). ИмСна с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ΠΌ .pc3 ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ нСсистСмныС Π΄Ρ€Π°ΠΉΠ²Π΅Ρ€Ρ‹ ΠΏΡ€ΠΈΠ½Ρ‚Π΅Ρ€ΠΎΠ².
  7. НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ «ОК». Π”ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Β«ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ страницы» закроСтся, ΠΈ откроСтся Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ «НовыС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ страницы».

  8. НаТмитС Β«Π—Π°ΠΊΡ€Ρ‹Ρ‚ΡŒΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ настройки ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΌΡƒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ настройку страницы ΡΡ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€Π°Π·, сколько Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Π² Ρ€Π°ΠΌΠΊΠ°Ρ… ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ°. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ нСсколько ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² ΠΈΠ»ΠΈ нСсколько настроСк страницы ΠΈΠ»ΠΈ ΠΈ Ρ‚ΠΎ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ΅. ΠšΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ€Π°Π·Π½Ρ‹Π΅ настройки страницы, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π² любой ΠΌΠΎΠΌΠ΅Π½Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ PAGESETUP, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ настройку.

ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ этот ΠΏΠΎΡ€Ρ‚

Π’Π΅ΠΏΠ΅Ρ€ΡŒ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ настроили Π±ΡƒΠΌΠ°Π³Ρƒ, ΠΏΡ€ΠΈΡˆΠ»ΠΎ врСмя ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ ΠΊ настройкС Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ экрана. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ AutoCAD Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π½ΠΎΠ²Ρ‹ΠΉ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆ с ΠΎΠ΄Π½ΠΈΠΌ Π²ΠΈΠ΄ΠΎΠ²Ρ‹ΠΌ экраном Π² Layout1 ΠΈ Layout2, ΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Π²ΠΈΠ΄ΠΎΠ²ΠΎΠΉ экран находится Π½Π° слоС 0 (Π½ΡƒΠ»Π΅Π²ΠΎΠΉ). Один Π²ΠΈΠ΄ΠΎΠ²ΠΎΠΉ экран Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ часто ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π° Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ΅ΠΉ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹, ΠΈ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ Π²ΠΈΠ΄ΠΎΠ²Ρ‹Ρ… экранов.

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

Настройки ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, вСроятно, Π½Π΅ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ для Π²Π°ΡˆΠΈΡ… Π½ΡƒΠΆΠ΄, поэтому Π²Π°ΠΌ слСдуСт Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ шаги:
  1. Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ слой. Π“Ρ€Π°Π½ΠΈΡ†Π° Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ экрана β€” это ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ рисования, поэтому ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π°ΠΏΠ΅Ρ‡Π°Ρ‚Π°Π½, Ρ‡Π΅Π³ΠΎ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π½Π΅ трСбуСтся. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ДиспСтчСр свойств слоСв, создайтС Π½ΠΎΠ²Ρ‹ΠΉ слой, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, с ΠΈΠΌΠ΅Π½Π΅ΠΌ VPORTS, ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ ΠΏΠ΅Ρ‡Π°Ρ‚ΡŒ для этого Π½ΠΎΠ²ΠΎΠ³ΠΎ слоя. Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ слоя ΠΈΠ»ΠΈ Ρ‚ΠΈΠΏ Π»ΠΈΠ½ΠΈΠΈ, ΠΈΠ»ΠΈ ΠΈ Ρ‚ΠΎ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π»Π΅Π³ΠΊΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΠΈΠ΄ΠΎΠ²Ρ‹Π΅ экраны Π½Π° Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ°Ρ….
  2. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ экрана Π½Π° Π½ΠΎΠ²Ρ‹ΠΉ слой VPORTS.
  3. Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ области просмотра, Π° Π·Π°Ρ‚Π΅ΠΌ Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ имя слоя VPORTS Π² Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌΡΡ спискС ΠΏΠΎΠ΄ слоями Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Β«Π‘Π»ΠΎΠΈΒ» Π²ΠΊΠ»Π°Π΄ΠΊΠΈ «Главная». ΠžΠ±ΡŠΠ΅ΠΊΡ‚ области просмотра остаСтся Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ, Π½ΠΎ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΠ½ Π½Π΅ отобраТаСтся.
  4. УстановитС ΠΌΠ°ΡΡˆΡ‚Π°Π± области просмотра. Π’Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ Π²ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚Π΅ Π²ΠΊΠ»Π°Π΄ΠΊΡƒ Β«ΠœΠ°ΠΊΠ΅Ρ‚ 1Β», всС, Ρ‡Ρ‚ΠΎ Π²Ρ‹ рисуСтС Π² пространствС ΠΌΠΎΠ΄Π΅Π»ΠΈ, Ρ‚ΠΎΡ‡Π½ΠΎ помСщаСтся Π² ΠΎΠΊΠ½Π΅ просмотра? Для этого AutoCAD автоматичСски настраиваСт коэффициСнт ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ экрана. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ это ΠΏΠΎΡ‡Ρ‚ΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ оказываСтся стандартной шкалой, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΊΡ‚ΠΎ-Π»ΠΈΠ±ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π±ΠΎΠ»Π΅Π΅ Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π± 0,1 ΠΈΠ»ΠΈ 1:10. НСт ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ:

    Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ области просмотра.

    НаТмитС ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ области просмотра, Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Π½ΡƒΡŽ рядом с ΠΏΡ€Π°Π²Ρ‹ΠΌ ΠΊΠΎΠ½Ρ†ΠΎΠΌ строки состояния.

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

    Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв слишком ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΎΠ² отобраТаСтся Π² спискС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠ΅ Β«ΠœΠ°ΡΡˆΡ‚Π°Π± Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ экрана» ΠΈ Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ Β«Π“Ρ€Π°Ρ„ΠΈΠΊΒ». AutoCAD ΠΈΠΌΠ΅Π΅Ρ‚ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠ΅ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Β«Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±Ρ‹ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ°Β», ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ позволяСт ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ британскиС ΠΌΠ°ΡΡˆΡ‚Π°Π±Ρ‹, Ссли Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ с Ρ„ΡƒΡ‚Π°ΠΌΠΈ ΠΈ дюймами, ΠΈ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚, Ссли Π²Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚Π΅ с мСтричСскими Π΅Π΄ΠΈΠ½ΠΈΡ†Π°ΠΌΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±Ρ‹, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ «Бписок ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΎΠ²Β» Π½Π° ΠΏΠ°Π½Π΅Π»ΠΈ Β«ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π°Π½Π½ΠΎΡ‚Π°Ρ†ΠΈΠΉΒ» Π½Π° Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ «Аннотации» ΠΈΠ»ΠΈ Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π‘Π Π•Π”.ΠœΠΠ‘Π¨Π’ΠΠ‘ ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Enter, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Β«Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±Ρ‹ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ°Β». Если (Ρ…ΠΎΡ€ΠΎΡˆΠΎ β€” ΠΊΠΎΠ³Π΄Π°) Π²Ρ‹ допустили ΠΎΡˆΠΈΠ±ΠΊΡƒ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒΒ» Π² Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠΌ ΠΎΠΊΠ½Π΅ Β«Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±Ρ‹ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ°Β», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ потСрянный коэффициСнт ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ, ΠΈΠ»ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ «Бброс», Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΎΡΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ всС ΠΌΠ°ΡΡˆΡ‚Π°Π±Ρ‹ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

  5. Π—Π°Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π± ΠΎΠΊΠ½Π° просмотра. Когда Π²Ρ‹Π±Ρ€Π°Π½ΠΎ ΠΎΠΊΠ½ΠΎ просмотра, слСва ΠΎΡ‚ ΠΊΠ½ΠΎΠΏΠΊΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ ΠΎΠΊΠ½Π° просмотра появляСтся Π·Π½Π°Ρ‡ΠΎΠΊ Π·Π°ΠΌΠΊΠ°. Π—Π½Π°Ρ‡ΠΎΠΊ прСдставляСт собой ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ ΠΈΠ»ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π±Π»ΠΎΠΊΠΈΡ€ΠΎΠ²ΠΊΡƒ ΠΌΠ°ΡΡˆΡ‚Π°Π±Π° ΠΎΠΊΠ½Π° просмотра.

ВсСгда Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π± ΠΎΠΊΠ½Π° просмотра сразу послС Π΅Π³ΠΎ установки.

ΠŸΠΎΡ‚Ρ€Π΅Π½ΠΈΡ€ΡƒΠΉΡ‚Π΅ΡΡŒ ΠΈΠ³Ρ€Π°Ρ‚ΡŒ с ΠΌΠ°ΠΊΠ΅Ρ‚Π°ΠΌΠΈ пространства листа ΠΈ пространства ΠΌΠΎΠ΄Π΅Π»ΠΈ Π² ΠΎΠ±Ρ€Π°Π·Ρ†Π΅ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ° AutoCAD. ВсС ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠΈ Π² ΠΏΠΎΠ΄ΡˆΠΈΠ²ΠΊΠ°Ρ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ пространства листа вмСстС с пространством ΠΌΠΎΠ΄Π΅Π»ΠΈ. НапримСр, Π½Π° Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΌ экранС AutoCAD Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Β«Π˜Π·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΠ±Ρ€Π°Π·Ρ†Ρ‹ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ΅ΠΉΒ». Когда откроСтся Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ΅ ΠΎΠΊΠ½ΠΎ Ρ„Π°ΠΉΠ»Π°, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ «Подшивки», Π° Π·Π°Ρ‚Π΅ΠΌ β€” Β«CivilΒ», Π° Π·Π°Ρ‚Π΅ΠΌ β€” «План классификации сайта». НаТмитС Β«Π”Π°Β» Π² появившСмся ΠΎΠΊΠ½Π΅ прСдупрСТдСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆ с Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠ°ΠΌΠΈ пространства листа, основанными Π½Π° Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… Π²ΠΈΠ΄Π°Ρ… ΠΎΠ±Ρ‰Π΅Π³ΠΎ Ρ‡Π΅Ρ€Ρ‚Π΅ΠΆΠ° пространства ΠΌΠΎΠ΄Π΅Π»ΠΈ.

Об этой ΡΡ‚Π°Ρ‚ΡŒΠ΅

Π­Ρ‚Ρƒ ΡΡ‚Π°Ρ‚ΡŒΡŽ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π² ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ:

  • AutoCAD ,

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

ΠΠ°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простых… | Vikalp Kaushik , ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½Ρ‹ΠΉ Π²

Β·

4 ΠΌΠΈΠ½. Π§ΠΈΡ‚Π°Ρ‚ΡŒ

Β·

5 июля 2022

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

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

https://www.newyorker.com/

На Π²Π΅Π±-сайтС New Yorker ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΌΠ°ΠΊΠ΅Ρ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Ρ‹ для Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π² Π΄Π°Π½Π½ΠΎΠΌ случаС для статСй.

Π’ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Π°Ρ иСрархия ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π°ΠΆΠ½Π°, Π² основном Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Π°Ρ иСрархия ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ ΠΈΠ»ΠΈ способ упорядочСния содСрТимого. Π’Π°ΠΊΠΎΠΉ порядок ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° ΠΎΠ±Π»Π΅Π³Ρ‡Π°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅.

Netflix ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ Π² своСм ΠΌΠ°ΠΊΠ΅Ρ‚Π΅. Когда Π²Ρ‹ Π²ΠΈΠ΄ΠΈΡ‚Π΅ экран, Π²Ρ‹ сначала смотритС Π½Π° Ρ‚Ρ€Π΅ΠΉΠ»Π΅Ρ€, Π·Π°Ρ‚Π΅ΠΌ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ воспроизвСдСния, Π·Π°Ρ‚Π΅ΠΌ Π½Π° эпизоды ΠΈ Ρ‚. Π΄.

Π•ΡΡ‚ΡŒ Π΄Π²Π° Ρ‚ΠΈΠΏΠ° Π΄ΠΈΠ·Π°ΠΉΠ½Π°, симмСтричный ΠΈ асиммСтричный. Π‘ΠΈΠΌΠΌΠ΅Ρ‚Ρ€ΠΈΡ‡Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ опрСдСляСтся ΠΊΠ°ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ лСвая ΠΈ правая стороны каТутся ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ, с Π΄Ρ€ΡƒΠ³ΠΎΠΉ стороны, асиммСтричный ΠΌΠ°ΠΊΠ΅Ρ‚ опрСдСляСтся ΠΊΠ°ΠΊ ΠΌΠ°ΠΊΠ΅Ρ‚, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ лСвая ΠΈ правая стороны Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π½Π΅Ρ€ΠΎΠ²Π½Ρ‹.

https://dribbble.com/shots/8499798-АсиммСтричная-ΠšΠΎΠΌΠΏΠΎΠ·ΠΈΡ†ΠΈΡ

Π­Ρ‚ΠΎΡ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ асиммСтричный Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈ ΠΏΡ€ΠΈ этом ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ. Π­Ρ‚ΠΎ всС ΠΎ Π²Ρ‹Π±ΠΎΡ€Π΅ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π°.

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

https://mobbin.com/screens/568a9492-a9c4-4569-89ac-d59e104ad447

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Instacart Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‡Π΅Ρ‚ΠΊΠΎ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ расстояниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄Π²Π° Ρ€Π°Π·Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚Π° для большСй ясности Π΄ΠΈΠ·Π°ΠΉΠ½Π°.

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

https://www.airbnb.com/

Π€ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ 1, 2 ΠΈ 5 ΠΈΠΌΠ΅ΡŽΡ‚ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€, Π½ΠΎ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ 3 ΠΈ 4 ΠΌΠ΅Π½ΡΡŽΡ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΠΈΠ΅ Π±ΠΎΠ»Π΅Π΅ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹ΠΌ.

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

https://iconscout.com/blog/grid-system-how-to-build-better-ui-designs-with-layout-grids

Grid System β€” это способ использования gird для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π° интСрфСйсов, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π°, БСтчатая систСма стоит Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

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

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