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

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

ΠžΡΠ½ΠΎΠ²Ρ‹ вСрстки HTML ΠΈ CSS, курс соврСмСнной Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ вСрстки для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…, 12 ΡƒΡ€ΠΎΠΊΠΎΠ²

Π’ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ Π² курс

12 ΡƒΡ€ΠΎΠΊΠΎΠ² (Π²ΠΈΠ΄Π΅ΠΎ ΠΈ/ΠΈΠ»ΠΈ тСкст)

5 ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠΉ Π² Ρ‚Ρ€Π΅Π½Π°ΠΆΠ΅Ρ€Π΅

31 ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΎΡ‡Π½Ρ‹ΠΉ тСст

Π‘Π°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ€Π°Π±ΠΎΡ‚Π°

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹

ΠŸΠΎΠΌΠΎΡ‰ΡŒ Π² Β«ΠžΠ±ΡΡƒΠΆΠ΄Π΅Π½ΠΈΡΡ…Β»

Π§Π΅ΠΌΡƒ Π²Ρ‹ Π½Π°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ

  • Π£Π·Π½Π°Π΅Ρ‚Π΅ основы Π²Π΅Π±-вСрстки: ΠΊΠ°ΠΊ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ статичСскиС Π²Π΅Π±-страницы ΠΈ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ стили элСмСнтам.
  • Π Π°Π·Π±Π΅Ρ€Π΅Ρ‚Π΅ΡΡŒ, ΠΊΠ°ΠΊ пошагово ΠΎΡ‚Π»Π°ΠΆΠΈΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ для быстрого обнаруТСния ошибок.
  • Π‘ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΊΠΎΠ΄Π° с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡΠΌΠΈ, ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‰ΠΈΠΌΠΈ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅. НапримСр, Emmet.
  • Π‘ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ свой сайт Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Π½Π° хостингС GitHub Pages.

ОписаниС

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

HTML5 CSS3 Developer Tools ВСрстка

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° курса

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ 9 часов

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

    ΠšΡƒΡ€Ρ Β«ΠžΡΠ½ΠΎΠ²Ρ‹ соврСмСнной вСрстки» являСтся Π±Π°Π·ΠΎΠΉ для изучСния основ вСрстки сайтов HTML ΠΈ CSS. Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ ΠΊΡ€Π°Ρ‚ΠΊΠΎ расскаТСм ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΡƒΠ·Π½Π°Π΅ΠΌ Π½Π° курсС ΠΈ ΠΊΠ°ΠΊ эти знания ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅.

    тСория

  • Π’Π²Π΅Π΄Π΅Π½ΠΈΠ΅ Π² HTML

    Π£Ρ€ΠΎΠΊ посвящСн HTML вСрсткС с нуля. Π“ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎ Ρ€ΠΎΠ»ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² ΠΈ ΠΈΠ·ΡƒΡ‡Π°Π΅ΠΌ ΠΎΠ±Ρ‰ΡƒΡŽ схСму описания HTML Ρ‚Π΅Π³ΠΎΠ².

    тСория

    тСсты

  • Блочная модСль

    КакиС элСмСнты ΠΎΡ‚Π²Π΅Ρ‡Π°ΡŽΡ‚ Π·Π° каркас страницы, Π° ΠΊΠ°ΠΊΠΈΠ΅ ΠΏΠΎΠΌΠΎΠ³Π°ΡŽΡ‚ Π² процСссС Π΅Π΅ стилизации ΠΈΠ»ΠΈ добавлСния Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Ρ… частСй? Знакомимся с Π±Π»ΠΎΡ‡Π½Ρ‹ΠΌΠΈ ΠΈ строчными элСмСнтами HTML ΠΈ ΠΈΠ·ΡƒΡ‡Π°Π΅ΠΌ влияниС стилСй Π½Π° ΠΈΡ‚ΠΎΠ³ΠΎΠ²ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ элСмСнтов.

    тСория

    тСсты

  • БСмантичСский HTML

    Основная Ρ†Π΅Π»ΡŒ любой HTML-вСрстки β€” ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π° смысла Π±Π»ΠΎΠΊΠΎΠ². Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ рассмотрим возмоТности послСднСго стандарта HTML5 Π² области сСмантики ΠΈ ΡƒΠ·Π½Π°Π΅ΠΌ ΠΎ доступности Π² Π²Π΅Π±.

    тСория

    тСсты

    ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅

  • Базовая структура HTML Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°

    Π›ΡŽΠ±ΠΎΠΉ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ ΠΈΠΌΠ΅Π΅Ρ‚ Π±Π°Π·ΠΎΠ²ΡƒΡŽ структуру, ΡΠΎΡΡ‚ΠΎΡΡ‰ΡƒΡŽ ΠΈΠ· Ρ‚Π΅Π³ΠΎΠ² ΠΈ слуТСбных элСмСнтов. Они Π½ΡƒΠΆΠ½Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ для ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ³ΠΎ отобраТСния ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ. Π’ Π΄Π°Π½Π½ΠΎΠΌ ΡƒΡ€ΠΎΠΊΠ΅ разбСрСмся с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ строчкой этой структуры

    тСория

    тСсты

    ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅

  • ΠžΡΠ½ΠΎΠ²Ρ‹ CSS

    Для Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ оформлСния Π²Π΅Π±-страницы создан язык CSS. Π˜Π·ΡƒΡ‡Π°Π΅ΠΌ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ возмоТности языка, разбираСмся, ΠΊΠ°ΠΊ ΠΈΡ… ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вмСстС с HTML. Учимся ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ CSS Ρ„Π°ΠΉΠ»Ρ‹ ΠΈ знакомимся с Π±Π°Π·ΠΎΠ²Ρ‹ΠΌΠΈ Ρ‚ΠΈΠΏΠ°ΠΌΠΈ сСлСкторов.

    тСория

    тСсты

    ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅

  • ΠšΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡ‚ΡŒ Π² CSS

    Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΠΎΡΡ‚ΡŒ, ΠΈ ΠΊΠ°ΠΊ ΠΎΠ½Π° Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² CSS? Π£Ρ€ΠΎΠΊ посвящСн различиям Π² ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚Π°Ρ… сСлСкторов ΠΈ ΡƒΠΌΠ΅Π½ΠΈΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ это Π² своих ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ….

    тСория

    тСсты

    ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅

  • Chrome DevTools

    ΠŸΡ€ΠΈ вСрсткС сайта Π²Π°ΠΆΠ½ΠΎ воврСмя Π½Π°ΠΉΡ‚ΠΈ ошибки ΠΈΠ»ΠΈ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΊΠ°ΠΊ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Π½Π°ΠΌ Π±Π»ΠΎΠΊ.

    Π Π°Π½Π΅Π΅ это дСлалось прСимущСствСнно Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ. БСйчас соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π²Π΅Π±-инспСктора. Рассмотрим возмоТности ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ… – Chrome DevTools.

    тСория

    тСсты

  • Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΊΠΎΠ΄Π°

    Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ Ρ€Π°Π±ΠΎΡ‚Ρ‹, Π²Π°ΠΌ потрСбуСтся Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π°. Π’ этом ΡƒΡ€ΠΎΠΊΠ΅ Ρ€Π°Π·Π±Π΅Ρ€Π΅ΠΌ, ΠΊΠ°ΠΊ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Visual Studio Code. Π­Ρ‚ΠΎ ΠΌΠΎΡ‰Π½Ρ‹ΠΉ инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для вСрстки, Π½ΠΎ ΠΈ для программирования Π½Π° любом языкС.

    тСория

  • Emmet

    Π˜Π·ΡƒΡ‡Π°Π΅ΠΌ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· самых ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ° β€” Emmet. Он ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ ΡƒΡΠΊΠΎΡ€ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ HTML-ΠΊΠΎΠ΄Π° ΠΈ снимСт Π±Γ³Π»ΡŒΡˆΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ€ΡƒΡ‚ΠΈΠ½Π½Ρ‹Ρ… дСйствий.

    тСория

    тСсты

    ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠ΅

  • ΠŸΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΡ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅

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

    тСория

  • ГрафичСскиС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹

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

    тСория

  • Π‘Π°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½Π°Ρ Ρ€Π°Π±ΠΎΡ‚Π°

    Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ задания, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π·Π°ΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½ΡƒΡŽ Ρ‚Π΅ΠΎΡ€ΠΈΡŽ

Π€ΠΎΡ€ΠΌΠ°Ρ‚ обучСния

ВячСслав ΠœΠ΅ΠΆΡƒΡ€Π΅Π²ΡΠΊΠΈΠΉ01 июня 2022

Бпасибо Π·Π° Π·Π°Π΄Π°Π½ΠΈΠ΅, Π±Ρ‹Π»ΠΎ интСрСсно!



Виктория АблаСва12 апрСля 2022

Π‘Π»ΠΈΠ½-блинский! 6 Π·Π°Π΄Π°Π½ΠΈΠ΅ с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Ρ€Π°Π·Π° ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΎΡΡŒ! Π₯СкслСт, спасибо Π·Π° ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ΡƒΡ€ΠΎΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ Π² Π³ΠΎΠ»ΠΎΠ²Π΅!


Π”ΠΌΠΈΡ‚Ρ€ΠΈΠΉ ΠšΠΎΡ€ΠΆΠΎΠ²01 августа 2021

ΠŸΠΈΡˆΡƒ здСсь, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Π½Π΅ Π½Π°ΡˆΡ‘Π», ΠΊΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π² ΠΊΠΎ всСму курсу.

ΠšΡƒΡ€Ρ ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ, ΠΊΠ°ΠΊ для Π²Π²ΠΎΠ΄Π½ΠΎΠ³ΠΎ — Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚Ρ‹ всС основныС аспСкты вёрстки Π±Π΅Π· излишнСго углублСния Π² Π΄Π΅Ρ‚Π°Π»ΠΈ.

Из ΠΏΠΎΠΆΠ΅Π»Π°Π½ΠΈΠΉ — Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ большС ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΈ — ΡƒΠΏΡ€Π°ΠΆΠ½Π΅Π½ΠΈΠΉ ΠΈ, особСнно, испытаний.


Π―Π½Π°15 апрСля 2021

ΠŸΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ инструмСнт, особСнно ΠΏΡ€ΠΈ составлСнии Ρ‚Π°Π±Π»ΠΈΡ†, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я Ρ€Π°Π½ΡŒΡˆΠ΅ Π½Π΅Π½Π°Π²ΠΈΠ΄Π΅Π»Π°)) 15 символов ΠΏΡ€ΠΎΡ‚ΠΈΠ² 139 это ΠΌΠΎΡ‰Π½ΠΎ! Бпасибо Π·Π° интСрСсный курс πŸ™‚

Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅ΠΌΡ‹Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΡ

с нуля

Π€Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

9 ΠΌΠ°Ρ€Ρ‚Π° 10 мСсяцСв

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΡ

Новый с нуля

Онлайн-Π±ΡƒΡ‚ΠΊΠ΅ΠΌΠΏ. Π€Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ

Π˜Π½Ρ‚Π΅Π½ΡΠΈΠ²Π½ΠΎΠ΅ ΠΎΠ±ΡƒΡ‡Π΅Π½ΠΈΠ΅ профСссии Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ дня

20 апрСля 4 мСсяца

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΡ

с нуля

Python-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π° Django

9 ΠΌΠ°Ρ€Ρ‚Π° 10 мСсяцСв

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΡ

с нуля

Java-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π° языкС Java

9 ΠΌΠ°Ρ€Ρ‚Π° 10 мСсяцСв

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΡ

с нуля

PHP-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π½Π° Laravel

9 ΠΌΠ°Ρ€Ρ‚Π° 10 мСсяцСв

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΡ

с нуля

Node. js-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° бэкСнд-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

9 ΠΌΠ°Ρ€Ρ‚Π° 10 мСсяцСв

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΡ

с нуля

Fullstack-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄- ΠΈ бэкСнд-ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² для Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ

9 ΠΌΠ°Ρ€Ρ‚Π° 16 мСсяцСв

ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΡ

с нуля

Π’Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ

ВСрстка с использованиСм послСдних стандартов CSS

Π² любоС врСмя 5 мСсяцСв

Ρ‡Ρ‚ΠΎ это простыми словами, ΠΊΠ°ΠΊ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ

Π’Π΅Ρ€ΠΌΠΈΠ½ «вСрстка» ΠΏΡ€ΠΈΡˆΠ΅Π» Π² digital ΠΈΠ· ΠΈΠ·Π΄Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ рСмСсла. Π’Π°ΠΌ ΠΏΠΎΠ΄ вСрсткой понимаСтся ΠΌΠΎΠ½Ρ‚Π°ΠΆ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π³Π°Π·Π΅Ρ‚Ρ‹ ΠΈΠ»ΠΈ ΠΊΠ½ΠΈΠ³ΠΈ ΠΈΠ· ΠΏΠΎΠ΄Π³ΠΎΡ‚ΠΎΠ²Π»Π΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° β€” тСкста, Ρ‚Π°Π±Π»ΠΈΡ†, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΡ‚ΠΎΠΌ отправляСтся Π² ΠΏΠ΅Ρ‡Π°Ρ‚ΡŒ. Π’ ΠΎΠ±ΠΎΠΈΡ… случаях главная Π·Π°Π΄Π°Ρ‡Π° вСрстки β€” ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ сайт ΠΈΠ»ΠΈ ΠΏΠ΅Ρ‡Π°Ρ‚Π½ΠΎΠ΅ ΠΈΠ·Π΄Π°Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с Π½ΠΈΠΌΠΈ.

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ вСрстка сайта

ВСрстка β€” это созданиС структуры гипСртСкстового Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° графичСского ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса сайта ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ HTML, скриптов ΠΈ стилСй. Главная Π·Π°Π΄Π°Ρ‡Π° Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ° β€” Ρ‚ΠΎΡ‡Π½ΠΎ ΠΈ Π±Π΅Π· ошибок ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏ Π² Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠ΄. ΠŸΡ€ΠΎΡΡ‚Ρ‹ΠΌΠΈ словами, вСрстка β€” это пСрСнос ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° сайта Π² HTML.

Англоязычный эквивалСнт Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π° «вСрстка Π²Π΅Π±-страниц» β€” Frontend web development, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ пСрСвСсти ΠΊΠ°ΠΊ Β«Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈΒ». Π€Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄ сайта β€” это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²ΠΈΠ΄ΠΈΡ‚ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ β€” тСкст, изобраТСния, Π΄Ρ€ΡƒΠ³ΠΈΠ΅ графичСскиС элСмСнты. Бэкэнд сайта β€” это внутрСнняя, нСвидимая Π³Π»Π°Π·Ρƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ Ρ‡Π°ΡΡ‚ΡŒ сайта β€” ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΠΊΠ°ΠΏΠΎΡ‚Π½ΠΎΠ΅ пространство автомобиля.

Удобство просмотра Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ с любого устройства ΠΈ ΠΈΠ· любого Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°.

ΠŸΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ Telegram-ΠΊΠ°Π½Π°Π»Ρƒ!

  • Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ послСдниС новости ΠΈΠ· ΠΌΠΈΡ€Π° ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Ρ€ΠΊΠ΅Ρ‚ΠΈΠ½Π³Π° Π² мСссСндТСрС Telegram Π½Π° своём мобильном Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π΅.
  • Для этого Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ΄ΠΏΠΈΡΠ°Ρ‚ΡŒΡΡ Π½Π° наш ΠΊΠ°Π½Π°Π».

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ вСрстки

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ вСрстку, ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌ Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅. Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ…Π΅Π΄Π΅Ρ€ Π³Π»Π°Π²Π½ΠΎΠΉ страницы.

Π Π°Π·ΠΌΠ΅Ρ‡Π΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Ρ€Π°Π·Π΄Π΅Π»Π° («Главная страница», «Наши ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹Β», «О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈΒ», Β«Π‘Π²ΡΠ·Π°Ρ‚ΡŒΡΡ с Π½Π°ΠΌΠΈΒ»). Π‘ΠΏΠ΅Ρ€Π²Π° формируСтся основа Π² Π²ΠΈΠ΄Π΅ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°:

<header>
<div>
<div>
<div>

<a href=»#»><img src=»company-logo.png» alt=»»/></a>
</div>
<div>
<ul>
<li><a href=»#»>Главная cΡ‚Ρ€Π°Π½ΠΈΡ†a</a></li>
<li><a href=»#»>Наши ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹</a></li>
<li><a href=»#»>О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ</a></li>
<li><a href=»#»>Π‘Π²ΡΠ·Π°Ρ‚ΡŒΡΡ с Π½Π°ΠΌΠΈ</a></li>
</ul>
</div>
</div>
</div>
</header>

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ свойства для сСлСкторов. Π’ΠΎΡ‚ Ρ‚Π°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ сСлСкторов для отступов ΠΎΠΊΠ½Π° ΠΈ ΠΏΠΎΠ»Π΅ΠΉ Π²ΠΎΠΊΡ€ΡƒΠ³ тСкста:


  body {
      font-family: 'Kawon', Consolas;
      font-size: 100%;
      background: #fff;
  }
  .wrap {
      margin: 0 auto;
      width: 70%;  /* это ΠΈ Π΅ΡΡ‚ΡŒ отступы, ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° */
  }
  .header {
     padding: 1.3em 0em; /* Π° это нСпосрСдствСнныС поля, ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰ΠΈΠ΅ тСкст */
  …
  ΠΈ Ρ‚Π°ΠΊ Π΄Π°Π»Π΅Π΅

Π’ ΠΈΡ‚ΠΎΠ³Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Ρ…Π΅Π΄Π΅Ρ€Π° cΠ°ΠΉΡ‚Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницы ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Ρ‚Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Π²ΠΈΠ΄:

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<link href=’http://fonts.googleapis.com/css?family=Kawon:100,300,400,700,900′ rel=’stylesheet’ type=’text/css’>
<link href=»style.css» rel=»stylesheet» type=»text/css» media=»all» />
<title>ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ с Π·Π°Ρ€ΡƒΠ±Π΅ΠΆΠ½Ρ‹ΠΌΠΈ компаниями</title>
</head>

<body>
<header>
<div>
<div>
<div>
<a href=»»><img src=»company-logo. png» alt=»»/></a>
</div>
<div>
<ul>
<li><a href=»#»>Главная страница</a></li>
<li><a href=»#»>Наши ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹</a></li>
<li><a href=»#»>О ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ</a></li>
<li><a href=»#»>Π‘Π²ΡΠ·Π°Ρ‚ΡŒΡΡ с Π½Π°ΠΌΠΈ</a></li>
</ul>
</div>
<div></div> /* ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ */
</div>
</div>
</header>
</body>
</html>

Π’Π°ΠΊ ΠΌΡ‹ свСрстали Ρ…Π΅Π΄Π΅Ρ€ для Π³Π»Π°Π²Π½ΠΎΠΉ страницы с Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ Ρ€Π°Π·Π΄Π΅Π»Π°ΠΌΠΈ ΠΈ Π·Π°Π΄Π°Π»ΠΈ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅ шапки «стилями».

Π’ ΠΈΡ‚ΠΎΠ³Π΅, ΠΌΡ‹ Π΅Ρ‰Π΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ поэкспСримСнтировали ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ Ρ‚Π°ΠΊΡƒΡŽ ΡˆΠ°ΠΏΠΊΡƒ

Π­Ρ‚Π°ΠΏΡ‹ вСрстки сайта

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

  1. ΠŸΠ΅Ρ€Π΅Π½ΠΎΡ структуры ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π² HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.
  2. Π Π°Π±ΠΎΡ‚Π° со «стилями», Π·Π°Π΄Π°Π½ΠΈΠ΅ Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Ρ… настроСк CSS согласно ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ ΠΏΡ€ΠΎΡ‚ΠΎΡ‚ΠΈΠΏΠ°.
  3. Настройка ΠΈ Π·Π°Π΄Π°Π½ΠΈΠ΅ свойств для ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ² страницы. ΠŸΡ€ΠΈ этом ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ β€” Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, JQuery ΠΈ JS (ΠΈ, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ ΠΆΠ΅, «стили»).
  4. ΠŸΠ΅Ρ€Π΅Π½ΠΎΡ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ шаблона Π² систСму управлСния ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ.
  5. ВСстированиС. На этом этапС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ стараСтся ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΡ‚ΡŒ Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹: Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π΅ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ страниц Π² Ρ€Π°Π·Π½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΈΠ»ΠΈ съСзд Π±Π»ΠΎΠΊΠΎΠ² Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах.

Π’ ΠΈΠ΄Π΅Π°Π»Π΅ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ пСрСнСсти сайт ΠΈΠ· ΠΌΠ°ΠΊΠ΅Ρ‚Π° Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ отличался ΠΎΡ‚ Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ Π·Π°Π΄ΡƒΠΌΠ°Π» Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€.

Π’ΠΎΠΏΠ»ΠΎΡ‚ΠΈΡ‚ΡŒ эту идСю удаСтся Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ всСгда Π² силу особСнностСй Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠΉ CMS, нСдостатка Π·Π½Π°Π½ΠΈΠΉ Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΈ Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°, ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠΉ ΠΏΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ тСхнологиям, ΠΏΡ€ΠΎΡ‡ΠΈΡ… тСхничСских ΠΏΡ€ΠΈΡ‡ΠΈΠ½.

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

ΠœΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ вСрсии сайтов 2022: интСрСсныС Ρ‚Π΅Π½Π΄Π΅Π½Ρ†ΠΈΠΈ ΠΈ Π½Π΅ΠΎΠΆΠΈΠ΄Π°Π½Π½Ρ‹Π΅ Π²Ρ‹Π²ΠΎΠ΄Ρ‹

Π’ΠΈΠ΄Ρ‹ вСрстки сайта

БСгодня самыми распространСнными ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π΄Π²Π° Ρ‚ΠΈΠΏΠ° вСрстки: блочная ΠΈ табличная.

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

Π‘ΠΎΠ»Π΅Π΅ соврСмСнная ΠΈ отзывчивая, ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ сочСтаСтся со стилями ΡƒΠΆΠ΅ Β«ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈΒ». Π­Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ нСобходимости ΠΌΠΎΠΆΠ½ΠΎ быстро ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ располоТСниС ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠ², Π·Π°Π΄Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹Π΅ отступы, ΠΈΠ½Ρ‚Π΅Ρ€Π²Π°Π»Ρ‹, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ любого элСмСнта страницы. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π±Π»ΠΎΡ‡Π½Ρ‹Π΅ элСмСнты страницы ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Π΅Π΅ с Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния быстродСйствия ΠΈ отзывчивости.

Π‘Ρ…Π΅ΠΌΠ°Ρ‚ΠΈΡ‡Π½ΠΎ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π±Π»ΠΎΡ‡Π½Ρ‹ΠΉ Ρ‚ΠΈΠΏ вСрстки ΠΌΠΎΠΆΠ½ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

Π‘Ρ…Π΅ΠΌΠ° Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°

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

Блочная вСрстка Ρ†Π΅Π»ΠΈΠΊΠΎΠΌ ΠΎΡ‚Π²Π΅Ρ‡Π°Π΅Ρ‚ Π³Π»Π°Π²Π½Ρ‹ΠΌ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ°ΠΌ адаптивности ΠΈ Π½ΠΈΠΊΠ°ΠΊ ΠΈΠΌ Π½Π΅ ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΡ€Π΅Ρ‡ΠΈΡ‚. Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΉ сайт Π»ΡƒΡ‡ΡˆΠ΅ Π²Π΅Ρ€ΡΡ‚Π°Ρ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ с Π΅Π΅ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ.

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

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ адаптивная вёрстка страниц сайта: ΠΏΠΎΠ»Π½Ρ‹ΠΉ Π³Π°ΠΉΠ΄, тСория ΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ°

Вабличная вСрстка

Π£ΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎ использовалось Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ дСсятки Π»Π΅Ρ‚ Π½Π°Π·Π°Π΄. БСгодня этот ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΏΡ€ΠΈ создании сайтов практичСски Π½Π΅ встрСчаСтся. Π‘ΡƒΡ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ вСрстки Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ страница дСлится Π½Π° мноТСство ΠΌΠ΅Π»ΠΊΠΈΡ… ячССк, прямо ΠΊΠ°ΠΊ рабочая ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π² Google Sheets:

Google Π’Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈ вСрстка сайта. Казалось Π±Ρ‹, Ρ‡Ρ‚ΠΎ Ρƒ Π½ΠΈΡ… общСго…

А это старая-добрая табличная вСрстка:

Π‘Ρ€Π°Π²Π½Π΅Π½ΠΈΠ΅ структуры Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Google Sheets ΠΈ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΉ вСрстки

Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π±Π»ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π°, Π² Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° задаСтся Ρ‚Π΅Π³ΠΎΠΌ <table>. ПослС Π½Π΅Π³ΠΎ Π² иСрархичСском порядкС слСдуСт <tr> ΠΈ <td> β€” это строки ΠΈ столбцы, соотвСтствСнно.

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

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

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

ВнутрСнняя оптимизация сайтов

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Π²Π°Π»ΠΈΠ΄Π½ΠΎΡΡ‚ΡŒ вСрстки

ВСрстка соврСмСнного сайта Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ Π²Π°Π»ΠΈΠ΄Π½ΠΎΠΉ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π΅ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½Ρ‹Ρ… ошибок: Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, отсутствия Π³Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Ρ… HTML-Ρ‚Π΅Π³ΠΎΠ² (HTML, HEAD, BODY) ΠΈΠ»ΠΈ элСмСнта DOCTYPE Π² самом Π½Π°Ρ‡Π°Π»Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°. Π­Ρ‚ΠΎ самыС ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Ρ‹Π΅ сцСнарии, Π½ΠΎ ΠΎΠ½ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΡƒΡŽΡ‚ ΡΡƒΡ‚ΡŒ ошибок Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΠΈ. ВрСбования ΠΊΠ°ΡΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ валидности вСрстки прописаны Π² W3C.

ΠšΠΎΠ½ΡΠΎΡ€Ρ†ΠΈΡƒΠΌ World Wide Web (W3C) β€” мСТдународная организация, которая ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΏΡ€Π°Π²ΠΈΠ»Π° устройства ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°. Бостоит ΠΈΠ· Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 350 ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ совмСстно , проводят ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΉ Ρ„ΠΎΡ€ΡƒΠΌ для обсуТдСния Π‘Π΅Ρ‚ΠΈ ΠΈ Ρ€Π°Π·Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‚ Π²Π΅Π±-стандарты.

Для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Π²Π°Π»ΠΈΠ΄Π°Ρ†ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΠΆΠ΅ инструмСнт β€” W3C Markup Validation Service (Π²Π°Π»ΠΈΠ΄Π°Ρ‚ΠΎΡ€ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ²).

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠΉ ΠΈ ошибок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нашСл W3C Markup Validation Service

Π’Π°ΠΊΠΆΠ΅ слСдуСт ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ всС ошибки ΡΠ²Π»ΡΡŽΡ‚ΡΡ критичСскими: ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· Π½ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ.

Как Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ Google, коррСктная валидация вСрстки β€” ΠΎΠ΄ΠΈΠ½ ΠΈΠ· сигналов качСства сайта Π² Ρ€Π°Π·Ρ€Π΅Π·Π΅ Core Web Vitals.

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ для вСрстки сайта

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

ВСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ β€” это ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ°, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΠΈΡˆΡƒΡ‚ свой ΠΊΠΎΠ΄.

Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ спСциализированными Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°ΠΌΠΈ:

  • NetBeans. Π‘Π²ΠΎΠ±ΠΎΠ΄Π½ΠΎ доступная срСда Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠ°Ρ для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ, Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ.
  • SublimeText. ВСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€, написанный Π½Π° C++ ΠΈ Python, доступный для Windows, Mac ΠΈ Linux.
  • Notepad++. ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ тСкстовый Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€. ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ встроСнный Π±Π»ΠΎΠΊΠ½ΠΎΡ‚ Windows (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠΌΠ΅Π΅Ρ‚ ΠΌΠ½ΠΎΠ³ΠΎ схоТих ΠΎΠ±Ρ‰ΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ), Π½ΠΎ Notepad++ ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько приятных Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΈΠΌΠ΅Π½Π½ΠΎ для Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠ°.
  • WinMerge. БСсплатный ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ инструмСнт для сравнСния Ρ„Π°ΠΉΠ»ΠΎΠ² ΠΈ объСдинСния тСкстовых Ρ„Π°ΠΉΠ»ΠΎΠ². ПолСзСн для опрСдСлСния Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ измСнилось ΠΌΠ΅ΠΆΠ΄Ρƒ вСрсиями, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€.
  • CoffeeCup. БСсплатный инструмСнт, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΏΡ€ΠΎΡ‰Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ Π²Π΅Π±-страниц с использованиСм HTML/CSS.
  • Adobe DreamWeaver. ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° для Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Π²Π΅Π±-страниц, ΠΏΠΎ сути, Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ»Π½ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ HTML ΠΈ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€.
  • Firebug. Π Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ (надстройка) для Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Mozilla Firefox. ΠŸΠΎΠΌΠΎΠ³Π°Π΅Ρ‚ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ исходный ΠΊΠΎΠ΄ ΠΈ Ρ‚Π΅ΠΌ самым ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π΅Π³ΠΎ элСмСнты.

ΠšΡ€ΠΎΠΌΠ΅ Π²Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹Ρ… Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠ² ΠΊΠΎΠ΄Π°, для вСрстки сайта ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΈ графичСскиС Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ ΠΈ Π²Π°Π»ΠΈΠ΄Π°Ρ‚ΠΎΡ€Ρ‹. Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠΉ β€” это, Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ, Β«ΠšΡ€ΠΈΡ‚Π°Β» ΠΈ Β«Π“ΠΈΠΌΠΏΒ», Π° Π²ΠΎΡ‚ Photoshop Π²Π΅Ρ€ΡΡ‚Π°Π»ΡŒΡ‰ΠΈΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Ρ€Π΅ΠΆΠ΅, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½ Π½Π°Ρ†Π΅Π»Π΅Π½ Π½Π° Ρ€Π°ΡΡ‚Ρ€ΠΎΠ²ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, Π° Π½Π΅ Π²Π΅ΠΊΡ‚ΠΎΡ€Ρ‹.

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

Как ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ сайт с нуля

Из Π²Π°Π»ΠΈΠ΄Π°Ρ‚ΠΎΡ€ΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ CSS Validator, CrossBrowserTesting, Dr. Watson, Markup Validator, Validator.w3. Для ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ повСдСния скриптов ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€Π° сайта Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ€Π°Π·Π½Ρ‹Ρ… вСрсий Internet Explorer ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ IETester.

ВСстированиС вСрстки ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ ΠΊΠ°ΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ автоматичСских скриптов, Ρ‚Π°ΠΊ ΠΈ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ.

ВСсты Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ΅ IETester

ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° вСрстки Π½Π° ошибки

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π½Π°Π΄Π΅ΠΆΠ½Ρ‹ΠΉ способ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ вСрстку сайта Π½Π° ошибки β€” Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ встроСнным ΠΎΡ‚Π»Π°Π΄Ρ‡ΠΈΠΊΠΎΠΌ. Он Π΅ΡΡ‚ΡŒ Π² любом Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΈ вызываСтся Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ΠΌ клавиши F12. ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²ΠΎ ΠΎΡ‚Π»Π°Π΄Ρ‡ΠΈΠΊΠΎΠ² Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ автоматичСски Π²Ρ‹Π΄Π΅Π»ΡΡŽΡ‚ ошибки.

ΠžΡ‚Π»Π°Π΄Ρ‡ΠΈΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π² Google Chrome

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

Π­Ρ‚ΠΎ ΡƒΠ΄ΠΎΠ±Π½ΠΎ ΠΈ быстро β€” особСнно ΠΊΠΎΠ³Π΄Π° страниц ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΊΠΎΠ΄ ΠΎΡ‡Π΅Π½ΡŒ «тяТСлый». Ни ΠΎΠ΄ΠΈΠ½ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π΅ ΠΈΡ‰Π΅Ρ‚ ошибки Π² ΠΊΠΎΠ΄Π΅ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ, Π° использованиС ΠΎΡ‚Π»Π°Π΄Ρ‡ΠΈΠΊΠ° β€” ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ шаг ΠΊ ΠΈΡ… ΠΈΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡŽ.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ сайтов

  • Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° эффСктивных сайтов для ΠΏΡ€ΠΎΠ΄Π°ΠΆ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅.
  • Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ сайты с нуля любой слоТности, ΠΎΡ‚ сайтов Π²ΠΈΠ·ΠΈΡ‚ΠΎΠΊ Π΄ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-ΠΌΠ°Π³Π°Π·ΠΈΠ½ΠΎΠ² ΠΈ ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΏΠΎΡ€Ρ‚Π°Π»ΠΎΠ².

Π‘Π°ΠΌΡ‹Π΅ частыС ошибки вСрстки сайта

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

Π’ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ сайт получился совсСм Π΄Ρ€ΡƒΠ³ΠΈΠΌ! ПомСнялись Ρ†Π²Π΅Ρ‚Π° ΠΈ расстояниС ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ½ΠΎΠΏΠΊΠ°ΠΌΠΈ, изобраТСния Π²Ρ‹Π»Π΅Π·Π°ΡŽΡ‚ Π·Π° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠΉ области. ВСрстка сломалась β€” всС ΠΏΡ€ΠΎΠΏΠ°Π»ΠΎ, ΡˆΠ΅Ρ„!

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

  1. НСнуТныС div-Ρ‚Π΅Π³ΠΈ. НС Π½ΡƒΠΆΠ½ΠΎ ΠΎΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ Π² Π½ΠΈΡ… всС подряд: URL, списки, изобраТСния, ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Ρ‹. Π‘Ρ‚Ρ€ΠΎΡ‡Π½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒΡΡ Π² стилях ΠΊΠ°ΠΊ Π±Π»ΠΎΡ‡Π½Ρ‹Π΅.
  2. НСкоррСктныС значСния классов ΠΈ ID. Если сущСствуСт нСсовпадСниС Π² Ρ„Π°ΠΉΠ»Π΅ HTML ΠΈ Ρ„Π°ΠΉΠ»Π΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π΅Π³Π»Π°ΠΌΠ΅Π½Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚ стили, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ смоТСт ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ Π² HTML. Π’Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡŒΡ‚Π΅ ID всСх ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ², Π² особСнности для всСх Π±Π»ΠΎΠΊΠΎΠ² с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌΠΈ свойствами. Π”Π°ΠΆΠ΅ ΠΎΠ΄ΠΈΠ½ лишний символ ΠΌΠΎΠΆΠ΅Ρ‚ привСсти ΠΊ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ вСрстка ΠΏΠΎΠ»Π΅Ρ‚ΠΈΡ‚.
  3. Π›ΠΈΡˆΠ½ΠΈΠ΅ ΠΈΠ»ΠΈ Π½Π΅Π΄ΠΎΡΡ‚Π°ΡŽΡ‰ΠΈΠ΅ символы Π² ΠΊΠΎΠ΄Π΅. ΠžΠΏΠ΅Ρ‡Π°Ρ‚ΠΊΠΈ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΊΠ°Ρ‚ΡŒ постоянно ΠΈ ΠΆΠ΅Π»Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π²ΠΎ всСм ΠΊΠΎΠ΄Π΅ сразу. Они Π±Ρ‹Π²Π°ΡŽΡ‚ Π΄Π°ΠΆΠ΅ Ρƒ ΠΎΠΏΡ‹Ρ‚Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ². БовсСм Π½Π΅ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΡΠΊΠ°Ρ‚ΡŒ ΠΎΠΏΠ΅Ρ‡Π°Ρ‚ΠΊΠΈ Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ: Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ автоматичСски ΠΌΠ°Ρ€ΠΊΠΈΡ€ΡƒΡŽΡ‚ ΠΈΡ…. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π² Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°Ρ… ΠΊΠΎΠ΄Π° Π΅ΡΡ‚ΡŒ подсвСтка синтаксиса, которая Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Π΅Ρ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ΅ восприятиС ΠΊΠΎΠ΄Π°: ΠžΠ±Ρ‹Ρ‡Π½ΠΎΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ΄Π° страницы ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с подсвСткой синтаксиса

    ΠžΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡ слСша (прямой ΠΈΠ»ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹ΠΉ), Ρ‚ΠΎΡ‡ΠΊΠ°, ΡˆΠ°Ρ€ΠΏΡ‹, Π΄Π°ΠΆΠ΅ простая запятая Π²Π»ΠΈΡΡŽΡ‚ Π½Π° Ρ‚ΠΎ, ΠΊΠ°ΠΊ сайт Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅.

  4. Π•Π΄ΠΈΠ½ΠΈΡ†Ρ‹ для указания Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Для Ρ‚ΠΈΠΏΠΎΠ³Ρ€Π°Ρ„ΠΈΠΊΠΈ ΠΈ Π±Π»ΠΎΠΊΠΎΠ² Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹Π΅ значСния. Π‘Π°ΠΌΡ‹Π΅ распространСнный сцСнарий β€” это px. Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π΅Π΄ΠΈΠ½ΠΈΡ†Ρ‹ измСрСния Π² ΠΊΠΎΠ΄Π΅ ΠΈ стилях Π½Π΅ ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°, ΠΈΠ½Π°Ρ‡Π΅ вСрстка сломаСтся. ОсобСнно Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈ создании Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° страниц, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ€Π°Π·ΠΌΠ΅Ρ€Π½ΠΎΡΡ‚ΡŒ Π² Ρ‚Π°ΠΊΠΎΠΌ случаС задаСтся Π½Π΅ Π² Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Ρ…, Π° Π² ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… (em).
  5. НСкоррСктныС названия Ρ„Π°ΠΉΠ»ΠΎΠ². Π­Ρ‚Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° особСнно Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Π° ΠΏΡ€ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»ΠΎΠ², Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ URL. Π“Π»Π°Π²Π½Ρ‹Π΅ ошибки здСсь: использованиС кирилличСских символов, спСцсимволов, пустых ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠ². Если Π² Π½Π°Π·Π²Π°Π½ΠΈΠΈ изобраТСния ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»Π° ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ нСсколько слов, отдСляйтС ΠΈΡ… Π½Π΅ ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ, Π° дСфисом.
  6. ИзмСнСниС структуры Π±Π»ΠΎΠΊΠΎΠ². Блочная вСрстка, нСсмотря Π½Π° ΠΏΡ€ΠΈΠΌΠΈΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏ Β«ΠΌΠ°Π»ΠΎΠ΅ Π²Π½ΡƒΡ‚Ρ€ΠΈ большого», ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ довольно ΡΠ»ΠΎΠΆΠ½ΡƒΡŽ ΠΈΠ΅Ρ€Π°Ρ€Ρ…ΠΈΡŽ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ошибок ΠΏΡ€ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ΠΎΠ² Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ…, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π²Π°Π»ΠΈΠ΄Π°Ρ‚ΠΎΡ€Ρ‹. Они ΠΌΠ°Ρ€ΠΊΠΈΡ€ΡƒΡŽΡ‚ строки с ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌΠΈ ошибками ΠΈ сразу ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ Π½Π° Π½ΠΈΡ…. Π§Π΅ΠΌ слоТнСС структура Π±Π»ΠΎΠΊΠΎΠ², Ρ‚Π΅ΠΌ Π²Ρ‹ΡˆΠ΅ Π²Π΅Ρ€ΠΎΡΡ‚Π½ΠΎΡΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ допуститС Π² Π½ΠΈΡ… ΠΎΡˆΠΈΠ±ΠΊΡƒ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ ΠΏΡ€Π΅Π½Π΅Π±Ρ€Π΅Π³Π°Ρ‚ΡŒ Π²Π°Π»ΠΈΠ΄Π°Ρ‚ΠΎΡ€Π°ΠΌΠΈ Ρ‚ΠΎΡ‡Π½ΠΎ Π½Π΅ стоит.

Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ сайты с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ вСрсткой

Π‘Π°ΠΉΡ‚

Π’Π΅Π»Π΅Ρ„ΠΎΠ½

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML CSS

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML CSS

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

ΠœΡ‹ собираСмся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ HTML-Ρ‚Π΅Π³ DIV, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ это Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° основС DIV, Π° ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ HTML ΠΈ CSS. ΠŸΡ€ΠΎΠ΅ΠΊΡ‚Ρ‹ Π½Π° основС DIV Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ эффСктивнСС ΠΈ приводят ΠΊ Π±ΠΎΠ»Π΅Π΅ чистому ΠΊΠΎΠ΄Ρƒ ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°ΠΌΠΈ Π½Π° основС Ρ‚Π°Π±Π»ΠΈΡ†. Π’ Ρ‚Π°Π±Π»ΠΈΡ‡Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π’Π΅Π³

ΠΈ Π΅Π³ΠΎ столбцы / строки для построСния ΠΌΠ°ΠΊΠ΅Ρ‚Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²ΠΎΠΎΠ±Ρ‰Π΅ Π½Π΅ считаСтся ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ способом.

ΠŸΡ€ΠΈΡΡ‚ΡƒΠΏΠΈΠΌ

Π’Π½Π°Ρ‡Π°Π»Π΅ Ρƒ вас Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΈΠ·Π°ΠΉΠ½, созданный Π²Π°ΠΌΠΈ ΠΈΠ»ΠΈ прСдоставлСнный Π΄Ρ€ΡƒΠ³ΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€ΠΎΠΌ ΠΈΠ»ΠΈ ΠΊΠ»ΠΈΠ΅Π½Ρ‚ΠΎΠΌ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π½ΠΈΠΆΠ΅.

Π’Π°ΠΊ ΠΊΠ°ΠΊ это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ пустой дСмонстрационный Π΄ΠΈΠ·Π°ΠΉΠ½, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ Ρ€Π°Π·Π΄Π΅Π»Π°. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ»Π½Ρ‹ΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-сайта Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ большС Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ², ΠΈ ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹ Π½Π°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ этот Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚, Π²Ρ‹ смоТСтС Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ большС Ρ€Π°Π·Π΄Π΅Π»ΠΎΠ².

Π“ΠžΠ›ΠžΠ’ΠΠΠ― БСкция



<Π³ΠΎΠ»ΠΎΠ²Π°>
<ΠΌΠ΅Ρ‚Π°-ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠ°="utf-8">
ДСмонстрационный ΠΌΠ°ΠΊΠ΅Ρ‚


 

Π’ этом Ρ€Π°Π·Π΄Π΅Π»Π΅ ΠΌΡ‹ Π΄Π°Π»ΠΈ этой страницС Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ «ДСмонстрационный ΠΌΠ°ΠΊΠ΅Ρ‚Β» ΠΈ связали Ρ„Π°ΠΉΠ» Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй style. css Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅ css. Если Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅ этих основ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎΠ± этом здСсь.

ΠšΡƒΠ·ΠΎΠ²Π½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ

<Ρ‚Π΅Π»ΠΎ>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
  
<Π΄Π΅Π»>

<Π΄Π΅Π»>

<Π΄Π΅Π»>
<Π΄Π΅Π»>




Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Ρ‚Π΅Π³ΠΈ DIV ΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ· Π½ΠΈΡ… Π½Π°Π·Π½Π°Ρ‡Π΅Π½ класс. ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ эти классы ΠΏΠΎΠ·ΠΆΠ΅ Π² Ρ„Π°ΠΉΠ»Π΅ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй, вызывая ΠΈΠΌΠ΅Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ³ΠΎ класса.
ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ с ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΌ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½ΠΎΠ³ΠΎ класса послС ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ закрытия DIV. Π”ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π² считаСтся Ρ…ΠΎΡ€ΠΎΡˆΠ΅ΠΉ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎΠΉ, ΠΈ это Ρ‚Π°ΠΊΠΆΠ΅ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΊΠΎΠ΄ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ ваш ΠΊΠΎΠ΄.

CSS

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

.ΡΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ {
ΡˆΠΈΡ€ΠΈΠ½Π°: 980 пиксСлСй;
ΠΏΠΎΠ»Π΅:0 Π°Π²Ρ‚ΠΎ;
}
 

Как Π²ΠΈΠ΄Π½ΠΎ ΠΈΠ· названия Β«.wrapΒ», это называСтся ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠΎΠΉ DIV, которая содСрТит всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ DIV. ΠžΡ‡Π΅Π²ΠΈΠ΄Π½ΠΎ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ любоС Π΄Ρ€ΡƒΠ³ΠΎΠ΅ имя, Ρ‚Π°ΠΊΠΎΠ΅ ΠΊΠ°ΠΊ ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠ°, ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ ΠΈΠ»ΠΈ main_div ΠΈ Ρ‚. Π΄., Π½ΠΎ я ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°ΡŽ Π½Π°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π΅Π³ΠΎ .wrap выглядит чистым ΠΈ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΌ.

ΠœΡ‹ Π·Π°Π΄Π°Π»ΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρƒ 980 пиксСлСй ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π²Π΅Ρ€Ρ…Π½Π΅Π΅/Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ»Π΅ ΠΊΠ°ΠΊ 0 ΠΈ ΠΏΡ€Π°Π²ΠΎΠ΅/Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΊΠ°ΠΊ auto . Π­Ρ‚ΠΎ ΠΏΠΎΠ»Π΅ auto с ΠΎΠ±Π΅ΠΈΡ… сторон Π΄Π΅Π»Π°Π΅Ρ‚ наш Π²Π΅Π±-сайт Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹ΠΌ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ.

Ρ‚Π΅Π»ΠΎ { ΠΏΠΎΠ»Π΅: 0; Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: 0; }
 

ΠŸΡ€ΠΎΡΡ‚ΠΎ сброс ΠΏΠΎΠ»Π΅ΠΉ ΠΈ отступов ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Ρ‚Π΅Π»Π°.

.Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ {
высота: 140 пиксСлСй;
ниТняя Π³Ρ€Π°Π½ΠΈΡ†Π°: 15px;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 0d7963;
}
 

Π― надСюсь, Ρ‡Ρ‚ΠΎ это довольно просто ΠΈ ΠΎΠ±ΡŠΡΡΠ½ΡΠ΅Ρ‚ΡΡ ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ свойств CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΠΌΡ‹ присвоили высоту 140 пиксСлСй, Π½ΠΈΠΆΠ½Π΅Π΅ ΠΏΠΎΠ»Π΅ 15 пиксСлСй ΠΈ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Β«#0d7963Β», ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ΄. Π― использовал инструмСнт Π²Ρ‹Π±ΠΎΡ€Π° Ρ†Π²Π΅Ρ‚Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ†Π²Π΅Ρ‚ΠΎΠ²ΠΎΠΉ ΠΊΠΎΠ΄ Π² Adobe Photoshop.

.содСрТаниС {
ΡˆΠΈΡ€ΠΈΠ½Π°: 690 пиксСлСй;
высота: 450 пиксСлСй;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 0d7963;
ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ: справа;
}
.сайдбар {
ΡˆΠΈΡ€ΠΈΠ½Π°: 275 пиксСлСй;
высота: 450 пиксСлСй;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 0d7963;
ΠΏΠ»Ρ‹Ρ‚ΡŒ Π½Π°Π»Π΅Π²ΠΎ;
}
 

ΠœΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ свойство float , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ этот DIV ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ эти DIV рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ. Π‘Π΅Π· свойства float DIV Π·Π°Π½ΠΈΠΌΠ°Π» Π±Ρ‹ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ страницы, Π° Π½ΠΎΠ²Ρ‹ΠΉ DIV Β«.sidebarΒ» начинался Π±Ρ‹ ΠΏΠΎΠ΄ DIV Β«.contentΒ». Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ мСстами значСния float , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π° Π»Π΅Π²ΡƒΡŽ ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΡƒΡŽ сторону.

.ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ {
ясно: оба;
}
 

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

.Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» {
высота: 70 пиксСлСй;
Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠ»Π΅: 15 пиксСлСй;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 0d7963;
}
 

Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ просто, ΠΊΠ°ΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ DIV.

ΠŸΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ HTML ΠΈ CSS

Π’ΠΎΡ‚ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ для Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML CSSΒ». Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ PSD ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ HTML / CSS с Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π²Ρ‹ΡˆΠ΅.

HTML



<Π³ΠΎΠ»ΠΎΠ²Π°>
<ΠΌΠ΅Ρ‚Π°-ΠΊΠΎΠ΄ΠΈΡ€ΠΎΠ²ΠΊΠ°="utf-8">
ДСмонстрационный ΠΌΠ°ΠΊΠ΅Ρ‚


<Ρ‚Π΅Π»ΠΎ>
<Π΄Π΅Π»>
<Π΄Π΅Π»>
  
<Π΄Π΅Π»>

    
    <Π΄Π΅Π»>
    

    <Π΄Π΅Π»>
    
<Π΄Π΅Π»>




 

КББ

Ρ‚Π΅Π»ΠΎ { ΠΏΠΎΠ»Π΅: 0; Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: 0; }
.ΡΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ {
ΡˆΠΈΡ€ΠΈΠ½Π°: 980 пиксСлСй;
ΠΏΠΎΠ»Π΅:0 Π°Π²Ρ‚ΠΎ;
}
.Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ {
высота: 140 пиксСлСй;
ниТняя Π³Ρ€Π°Π½ΠΈΡ†Π°: 15px;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 0d7963;
}
.содСрТаниС {
ΡˆΠΈΡ€ΠΈΠ½Π°: 690 пиксСлСй;
высота: 450 пиксСлСй;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 0d7963;
ΠΏΠΎΠΏΠ»Π°Π²ΠΎΠΊ: справа;
}
. сайдбар {
ΡˆΠΈΡ€ΠΈΠ½Π°: 275 пиксСлСй;
высота: 450 пиксСлСй;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 0d7963;
ΠΏΠ»Ρ‹Ρ‚ΡŒ Π½Π°Π»Π΅Π²ΠΎ;
}
.Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½Ρ‚ΠΈΡ‚ΡƒΠ» {
высота: 70 пиксСлСй;
Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΏΠΎΠ»Π΅: 15 пиксСлСй;
Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π°: # 0d7963;
}
.ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ {
ясно: оба;
}
 

Π­Ρ‚ΠΎΡ‚ Β«Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Π° Π²Π΅Π±-сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML CSSΒ» β€” Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ Ρ‚ΡƒΡ‚ΠΎΡ€ΠΈΠ°Π» для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ большС руководств ΠΏΠΎ HTML здСсь. Π‘ΠΊΠΎΡ€ΠΎ появятся Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Π΅ руководства.

Html Css Π”ΠΈΠ·Π°ΠΉΠ½ Π²Π΅Π±-сайтов, Ρ‚Π΅ΠΌΡ‹, ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΡ‹Π΅ графичСскиС элСмСнты Π½Π° Dribbble

  1. Π‘Ρ‚Π°Π±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ Π²Π΅Π±-сайт EV: шаблон Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ html css javascript jquery

  2. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ HTML-шаблон сайта Nextmv, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap js php

    HTML-шаблон Π²Π΅Π±-сайта Nextmv, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap js php

  3. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ ΠΏΡƒΠ½ΠΊΡ‚ HTML-шаблон Π²Π΅Π±-сайта, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap js php

    ΠŸΡƒΠ½ΠΊΡ‚ HTML-шаблон Π²Π΅Π±-сайта, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap js php

  4. HTML-шаблон Π²Π΅Π±-сайта ΠΏΠΎ ΡƒΡ…ΠΎΠ΄Ρƒ Π·Π° ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹ΠΌΠΈ, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap php

    HTML-шаблон Π²Π΅Π±-сайта ΠΏΠΎ ΡƒΡ…ΠΎΠ΄Ρƒ Π·Π° ΠΆΠΈΠ²ΠΎΡ‚Π½Ρ‹ΠΌΠΈ, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap php

  5. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ HTML-шаблон Π²Π΅Π±-сайта OpenColony, Ρ‚Π΅ΠΌΡƒ администратора, css bootstrap js

    HTML-шаблон Π²Π΅Π±-сайта OpenColony, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap js

  6. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ ИИ для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ ΠΊΡƒΠ»ΠΈΠ½Π°Ρ€Π½ΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° Π’Π΅Π±-сайт html css bootstrap js

    ИИ для Π»ΡƒΡ‡ΡˆΠ΅Π³ΠΎ ΠΊΡƒΠ»ΠΈΠ½Π°Ρ€Π½ΠΎΠ³ΠΎ ΠΎΠΏΡ‹Ρ‚Π° Π’Π΅Π±-сайт html css bootstrap js

  7. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ HTML-шаблон Π²Π΅Π±-сайта ΠΉΠΎΠ³ΠΈ, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap js php

    HTML-шаблон Π²Π΅Π±-сайта ΠΉΠΎΠ³ΠΈ, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap js php

  8. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ агСнтство ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния

    агСнтство ΠΏΠΎ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ³ΠΎ обСспСчСния

  9. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ html-шаблона Π²Π΅Π±-сайта Atopa, Ρ‚Π΅ΠΌΡ‹ администратора, css bootstrap js php

    HTML-шаблон Π²Π΅Π±-сайта Atopa, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap js php

  10. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ HTML-шаблон сайта Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ музСя, Ρ‚Π΅ΠΌΠ° Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ, css js php

    HTML-шаблон сайта Π²ΠΈΡ€Ρ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ музСя, Ρ‚Π΅ΠΌΠ° администратора, css js php

  11. HTML-шаблон Π²Π΅Π±-сайта Cellebrite, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap js

  12. Π‘Π°ΠΉΡ‚ ΠΏΠΎΡ€Ρ‚Π°Π»Π° просмотра Ρ„ΠΈΠ»ΡŒΠΌΠΎΠ² ΠΈ сСриалов html шаблон, css bootstrap

    ΠŸΠΎΡ€Ρ‚Π°Π» Ρ„ΠΈΠ»ΡŒΠΌΠΎΠ² ΠΈ сСриалов HTML-шаблон сайта, css bootstrap

  13. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ HTML-шаблон Π²Π΅Π±-сайта Ninox, Ρ‚Π΅ΠΌΡƒ администратора, css bootstrap js php

    HTML-шаблон Π²Π΅Π±-сайта Ninox, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap js php

  14. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ HTML-шаблон Π²Π΅Π±-сайта Wizeline, Ρ‚Π΅ΠΌΡƒ администратора, css bootstrap js

    HTML-шаблон Π²Π΅Π±-сайта Wizeline, Ρ‚Π΅ΠΌΠ° администратора, css bootstrap js

  15. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ Blackdesk — Π²Π΅Π±-сайт

    Blackdesk — Π²Π΅Π±-сайт

  16. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½ΠΎΠ²Ρ‹Π΅ HTML-ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Plasma πŸ₯³

    НовыС HTML-ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ Plasma πŸ₯³

  17. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ†Π΅Π»Π΅Π²ΡƒΡŽ страницу Oniexmint😍

    Π›Π΅Π½Π΄ΠΈΠ½Π³ Oniexmint😍

  18. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ‡ΠΈΡΠ»ΠΎΠ²ΡƒΡŽ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ

    Цифровая анимация

  19. ΠŸΡ€ΠΎΡΠΌΠΎΡ‚Ρ€ Π²ΠΎΠΉΠ½Ρ‹.

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

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

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

    © 2019 Π¨Ρ‚ΠΈΡ€Π»ΠΈΡ† Π‘Π΅Ρ‚ΡŒ ΠΏΠ΅Ρ‡Π°Ρ‚Π½Ρ‹Ρ… салонов Π² ΠŸΠ΅Ρ€ΠΌΠΈ

    Цифровая ΠΏΠ΅Ρ‡Π°Ρ‚ΡŒ, Ρ†Π²Π΅Ρ‚Π½ΠΎΠ΅ ΠΈ Ρ‡Π΅Ρ€Π½ΠΎ-Π±Π΅Π»ΠΎΠ΅ ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ², сканированиС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠ², ризография Π² ΠŸΠ΅Ρ€ΠΌΠΈ.