Html Π²Π΅ΡΡΡΠΊΠ° css: ΠΠ°ΠΊ ΡΠ²Π΅ΡΡΡΠ°ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ. Π§Π°ΡΡΡ 1 / Π₯Π°Π±Ρ
25.07.2019
Π Π°Π·Π½ΠΎΠ΅
Ρ Π½ΡΠ»Ρ Π΄ΠΎ ΡΠ΅Π½ΡΠΎΡΠ° / Π₯Π°Π±Ρ
ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅, ΠΌΠ΅Π½Ρ Π·ΠΎΠ²ΡΡ ΠΠ»Π΅ΠΊΡΠ°Π½Π΄Ρ ΠΠ΅Π»Π΅Π½ΠΈΠ½, ΠΈ Ρ Π²Π΅Π±-ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊ.
ΠΠ½ΠΎΠ³ΠΎΠΊΡΠ°ΡΠ½ΠΎ Ρ ΡΠ»ΡΡΠ°Π» ΠΌΠ½Π΅Π½ΠΈΠ΅, ΡΡΠΎ Π²Π΅ΡΡΡΠΊΠ° β ΡΠ΄Π΅Π» Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΡ
frontendβΠ΅ΡΠΎΠ². Π₯ΠΎΡΡ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΠΎ Π²Π°ΠΆΠ½Π΅ΠΉΡΠ°Ρ ΡΠ°ΡΡΡ Π»ΡΠ±ΠΎΠ³ΠΎ (ΠΏΠΎΡΡΠΈ) Π²Π΅Π±-ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡΠΎ ΡΠΎ, ΡΡΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π²ΠΈΠ΄ΡΡ Π² ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ. ΠΠ° ΡΠ΅ΠΊΡΡΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½Π°Ρ Π²ΡΡΡΡΠΊΠ° (ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ²) Π² ΠΊΡΡΠΏΠ½ΠΎΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
Π½Π°Π²ΡΠΊΠΎΠ².
Π Π΄Π°Π½Π½ΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡ ΡΡ Π΅ΠΌΡ ΡΠ°Π·Π²ΠΈΡΠΈΡ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠ°
[Π±ΠΎΠ»ΡΡΠ°Ρ ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡ]
Π‘Π°ΠΌΠΎ ΡΠΎΠ±ΠΎΠΉ, ΡΡΠΎ Π½Π΅ Π²ΡΠ΅ΠΎΠ±ΡΠ΅ΠΌΠ»ΡΡΠ°Ρ ΠΈ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎ Π²Π΅ΡΠ½Π°Ρ ΡΡ
Π΅ΠΌΠ°. ΠΡΡΡ Π΅ΡΡ ΡΠ΅Π»Π°Ρ Π³ΠΎΡΠ° ΡΠ²ΡΠ·Π°Π½Π½ΡΡ
Π½Π°Π²ΡΠΊΠΎΠ², ΡΠ΅Π»Π΅Π²Π°Π½ΡΠ½ΡΡ
ΡΠ΅Ρ
Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΡΠ°Π΄Π°ΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΠ±ΡΠ΅ΠΊΡΠΈΠ²Π½ΠΎΠΉ.
Π₯ΠΎΡΡ ΡΡΠ°Π·Ρ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ, ΡΡΠΎ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΡΡΠ΅Π±Π½ΡΠ΅ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Ρ Π² ΡΡΠ°ΡΡΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ. ΠΡΠ΄Ρ ΡΠ°Π΄ Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΡΠΌ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ .
Π§Π΅Π³ΠΎ ΠΌΡ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ?
Π ΠΏΠ΅ΡΠ²ΡΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΠΎΠ½ΡΡΡ, ΡΠ΅Π³ΠΎ ΠΌΡ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌ ΠΎΡ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊΠ° Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ· ΡΡΠΎΠ²Π½Π΅ΠΉ. ΠΠ°ΡΠΈ ΠΎΠΆΠΈΠ΄Π°Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ.
Junior β Π·Π½Π°Π΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ΅Π³ΠΈ, ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠ΄ΠΏΡΠ°Π²ΠΈΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ Π½Π° Π³ΠΎΡΠΎΠ²ΠΎΠΌ html ΡΠ°ΠΉΡΠ΅, ΡΠΌΠ΅Π΅Ρ Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ, Π±Π΅Π· ΠΏΡΠΎΠ±Π»Π΅ΠΌ Π²ΡΡΠ°Π²ΠΈΡ Π²ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ (ΡΠΎΠ»ΠΈΠΊ Ρ ΡΡΡΠ±Π°, ΡΠ½Π΄Π΅ΠΊΡ ΠΊΠ°ΡΡΡ), Π²Π΅Π΄ΡΡ ΡΠ°Π±ΠΎΡΡ ΡΠ΅ΡΠ΅Π· ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π²Π΅ΡΡΠΈΠΉ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΡΠ΅Π±Ρ (master, 1 ΠΊΠΎΠ½ΡΡΠΈΠ±ΡΡΡΠΎΡ).
Middle β Π±ΠΎΠ»Π΅Π΅-ΠΌΠ΅Π½Π΅Π΅ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° (Π»ΠΈΠ±ΠΎ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½Π°Ρ Π΄Π»Ρ ΠΌΠ°Π»ΡΡ ΠΈ ΡΡΠ΅Π΄Π½ΠΈΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ²). ΠΠΎΠΆΠ΅Ρ Ρ ΠΎΡΠΎΡΠΎ ΡΠ²Π΅ΡΡΡΠ°ΡΡ ΡΠ°ΠΉΡ ΡΡΠ΅Π΄Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ², ΠΈ ΠΎΠ½ Π±ΡΠ΄Π΅Ρ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π²ΠΎ Π²ΡΠ΅Ρ Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΡ Π²Π΅ΡΡΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ². ΠΠΎΠ½ΠΈΠΌΠ°Π΅Ρ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΡΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°ΡΠΎΡΡ, ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ (ΠΏΡΠΈ ΡΡΠ»ΠΎΠ²ΠΈΠΈ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°). Π£ΠΌΠ΅Π΅Ρ ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ²ΠΎΡ ΡΠ°Π±ΠΎΡΡ ΠΈ ΠΎΡΠ΅Π½ΠΈΠ²Π°ΡΡ ΡΡΠΎΠΊΠΈ. ΠΠΎΠ½ΠΈΠΌΠ°Π΅Ρ Π²Π°ΠΆΠ½ΠΎΡΡΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠ°Π½ΠΈΡ ΡΡΠΈΠ»Ρ ΠΊΠΎΠ΄Π°. ΠΠΎΠ½ΠΈΠΌΠ°Π΅Ρ, Π·Π°ΡΠ΅ΠΌ Π΅ΡΡΡ Π³ΡΠΈΠ΄-ΡΠΈΡΡΠ΅ΠΌΡ ΠΈ css ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ. Π£ΠΌΠ΅Π΅Ρ Π±ΡΠ°ΡΡ Π²ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΈΠ· ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°. ΠΠΎΠΆΠ΅Ρ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΎΠ²Π°ΡΡ Ρ Π½Π΅Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΊΠΎΠΌΠ°Π½Π΄ΠΎΠΉ, ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²Π΅ΡΠΊΠΈ ΠΈ ΠΏΡΠ»Π»-ΡΠ΅ΠΊΠ²Π΅ΡΡΡ.
Senior β ΠΌΠΎΠΆΠ΅Ρ ΡΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΡΡΠ΅ΠΌΡ Π±Π»ΠΎΠΊΠΎΠ² Π΄Π»Ρ ΠΊΡΡΠΏΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΠ½Π°Π΅Ρ, ΠΊΠ°ΠΊ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΠΏΠΎΠ²ΡΠΎΡΠΎΠ² ΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ½ΡΡ ΠΌΠ΅ΡΡ ΠΏΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ Π΅Π³ΠΎ ΠΊΠΎΠ΄Π° Π΄ΡΡΠ³ΠΈΠΌΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌΠΈ. Π£ΠΌΠ΅Π΅Ρ Π΄Π΅ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»ΠΎΠΆΠ½ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ ΠΈ Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎ ΡΠΎΡΠΌΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ Π·Π°Π΄Π°ΡΠΈ.

Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΠ΅ΠΏΠ΅ΡΡ ΡΡΡΡ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½Π΅Π΅, ΡΡΠΎ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π±Π»ΠΎΠΊΠΎΠ² Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅.
Junior
HTML β Π·Π½Π°Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
ΡΠ΅Π³ΠΎΠ², Π°ΡΡΡΠΈΠ±ΡΡΠΎΠ². ΠΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΏΠΈΡΠ°ΡΡ Π² ΠΏΡΠΈΠ½ΡΠΈΠΏΠ΅.
Π’ΠΈΠΏΠΎΠ³ΡΠ°ΡΠΈΠΊΠ° β ΡΠΌΠ΅Π½ΠΈΠ΅ ΠΎΡΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡ. Π’Π΅ΠΊΡΡ β ΠΎΡΠ½ΠΎΠ²Π° ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π»ΡΠ±ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°. ΠΡΡΠ°Π²ΠΊΠ° Π½Π΅ΡΠ°Π·ΡΡΠ²Π½ΡΡ
ΠΏΡΠΎΠ±Π΅Π»ΠΎΠ² Π³Π΄Π΅ Π½Π°Π΄ΠΎ, Π²ΡΠ΄Π΅Π»Π΅Π½ΠΈΠ΅ ΠΆΠΈΡΠ½ΡΠΌ, ΠΊΡΡΡΠΈΠ²ΠΎΠΌ, abbr ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΠΏΠΎΠ³ΡΠ°Ρ ΠΈΠ»ΠΈ ΡΡ
ΠΎΠΆΠΈΠΉ ΡΠ΅ΡΠ²ΠΈΡ, Π½ΠΎ ΡΠΌΠ΅ΡΡ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ.
Π‘Π΅ΠΌΠ°Π½ΡΠΈΠΊΠ° β ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΡ
Π·Π°Π΄Π°Ρ Π΅ΡΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠ΅ ΡΠ΅Π³ΠΈ. Π£ΠΌΠ΅ΡΡ Π²ΡΠ±ΡΠ°ΡΡ Π½ΡΠΆΠ½ΡΠΉ ΡΠ΅Π³.
ΠΠ΅Π΄ΠΈΠ° β ΠΊΠ°ΠΊΠΈΠ΅ Π²ΠΈΠ΄Ρ ΠΌΠ΅Π΄ΠΈΠ° ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π² ΡΡΡΠ°Π½ΠΈΡΡ.
Iframe β Π²ΡΡΡΠ°ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΡΠΎΡΠΎΠ½Π½ΠΈΡ
Π²ΠΈΠ΄ΠΆΠ΅ΡΠΎΠ² (Π²ΠΈΠ΄Π΅ΠΎ, Π°ΡΠ΄ΠΈΠΎ, ΠΊΠ°ΡΡΡ ΠΈ Ρ.ΠΏ.).
ΠΡΠ΄ΠΈΠΎ, ΠΠΈΠ΄Π΅ΠΎ β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅, Ρ.ΠΊ. ΡΠ°ΡΡΠΈΡΠ½ΠΎ ΡΠ΅ΡΠ°ΡΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ iframe. ΠΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΡΠΌΠ΅Π΅Ρ Π²ΠΎΡΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ, ΠΊΠ°ΠΊ ΠΎΡΠΎΡΠΌΠΈΡΡ ΠΏΠ»Π΅Π΅Ρ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΠ°ΡΡΠΈΠ½ΠΊΠΈ β ΠΊΠ°ΠΊΠΈΠ΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΡ ΠΈ Π² ΠΊΠ°ΠΊΠΎΠΌ Π²ΠΈΠ΄Π΅ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°Π΅Ρ Π±ΡΠ°ΡΠ·Π΅Ρ. ΠΠ»ΡΡΡ ΠΈ ΠΌΠΈΠ½ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Ρ
ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ
ΡΠΎΡΠΌΠ°ΡΠΎΠ².
Π Π°ΡΡΡ β jpg, png, gif. ΠΠΎΠ½ΠΈΠΌΠ°ΡΡ ΡΠ°Π·Π»ΠΈΡΠΈΠ΅ ΡΠΎΡΠΌΠ°ΡΠΎΠ² ΠΈ ΡΠΌΠ΅ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΠΎ ΠΈ Π³Π΄Π΅ Π½Π°Π΄ΠΎ.
SVG β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅, Ρ.ΠΊ. ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ΅ΠΆΠ΅, ΡΠ΅ΠΌ Ρ
ΠΎΡΠ΅Π»ΠΎΡΡ Π±Ρ. ΠΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΏΠ»ΡΡΡ, ΠΌΠΈΠ½ΡΡΡ, ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ ΠΈ Ρ.ΠΏ.
Π¨ΡΠΈΡΡΡ β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½Π°Ρ ΡΠ΅ΠΌΠ°, ΠΈ Π² ΠΎΠ±ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ Ρ Π±Ρ ΡΠΎΠ²Π΅ΡΠΎΠ²Π°Π» Π½Π°ΡΠΈΠ½Π°ΡΡΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΈΡΡΠ΅ΠΌΠ½ΡΠ΅ ΡΡΠΈΡΡΡ. Π£ΠΌΠ΅ΡΡ ΠΏΠΎΠ΄Π³ΡΡΠ·ΠΈΡΡ ΡΡΠΈΡΡΡ, ΠΎΠΏΡΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΌΠΈΠ½ΠΈΠΌΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π»Π°Π³ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ Ρ ΠΊΠ°ΡΡΠΎΠΌΠ½ΡΠΌΠΈ ΡΡΠΈΡΡΠ°ΠΌΠΈ.
Π’Π°Π±Π»ΠΈΡΠ½Π°Ρ Π²ΡΡΡΡΠΊΠ° β ΠΎΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ. ΠΠ»Ρ ΠΆΠ΅Π»Π°ΡΡΠΈΡ
Π²Π΅ΡΡΡΠ°ΡΡ ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ email-ΡΠ°ΡΡΡΠ»ΠΊΠΈ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ.
CSS 1 β ΡΡΠΈΡΡΡ, ΡΠ²Π΅ΡΠ°, Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, ΡΠ°Π·ΠΌΠ΅ΡΡ.
CSS 2.1 β ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ Π±Π»ΠΎΠΊΠΎΠ², ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅.
Π‘Π΅Π»Π΅ΠΊΡΠΎΡΡ β ΠΏΡΠΎΡΡΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ Π½Π° ΡΠ΅Π³, ΠΊΠ»Π°ΡΡ, Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ. ΠΡΠΎΡΡΡΠ΅ ΠΏΡΠ΅Π²Π΄ΠΎΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ ΡΠΈΠΏΠ° :hover.
ΠΠΌΠ΅Π½ΠΎΠ²Π°Π½ΠΈΠ΅ β ΠΊΠ°ΠΊ Π½Π°Π·ΡΠ²Π°ΡΡ ΠΊΠ»Π°ΡΡΡ, ΡΡΠΎΠ±Ρ Π½Π΅ Π±ΡΠ»ΠΎ ΠΌΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΠ½ΠΎ.
ΠΠ»ΠΎΡΠ½Π°Ρ Π²ΡΡΡΡΠΊΠ° β ΡΠ°Π·Π±ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π½Π° ΠΎΡΠΎΠ·Π½Π°Π½Π½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ, Π²ΠΎΠΏΠ»ΠΎΡΠΈΡΡ Π±Π»ΠΎΠΊΠΈ Π² HTML, ΠΎΡΠΎΡΠΌΠΈΡΡ Ρ CSS.
ΠΡΠ°ΡΠ·Π΅ΡΡ β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΠ°ΠΊΠΈΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ, Π² ΡΡΠΌ ΠΈΡ
ΡΠ°Π·Π»ΠΈΡΠΈΠ΅.
ΠΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΡΡΠΎΠ±Ρ ΡΠ°Π·Π±ΠΈΡΠ°ΡΡΡΡ Π² ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°Ρ
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
Π’Π΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ β ΠΊΠ°ΠΊΠΈΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ Π΄Π»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΎΠ² Π΅ΡΡΡ ΠΈ Π·Π°ΡΠ΅ΠΌ. SublimeText ΠΈ Notepad++ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π΄Π»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ°, ΠΊΠ°ΠΊ Ρ
ΠΎΡΠΎΡΠΎ ΠΌΠ½Π΅ Π·Π½Π°ΠΊΠΎΠΌΡΠ΅. Π£ΠΌΠ΅ΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ Π² Π½ΠΈΡ
Π±Π°Π·ΠΎΠ²ΡΠ΅ Π²Π΅ΡΠΈ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΎΡΡΡΡΠΏΡ, ΠΏΠ΅ΡΠ΅Π½ΠΎΡ ΡΡΡΠΎΠΊΠΈ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
Π‘ΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π²Π΅ΡΡΠΈΠΉ β Ρ Π»ΠΈΡΠ½ΠΎ ΡΡΠΈΡΠ°Ρ ΡΠΌΠ΅Π½ΠΈΠ΅ ΠΈΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Ρ
ΠΎΡΡ Π±Ρ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎ, Π»ΠΈΡΠ½ΠΎ Π΄Π»Ρ ΡΠ΅Π±Ρ, ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΡΠΌ. ΠΠΎΠ½ΠΈΠΌΠ°ΡΡ, Π΄Π»Ρ ΡΠ΅Π³ΠΎ ΡΡΠΈ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠΎΠ·Π΄Π°Π½Ρ ΠΈ ΠΊΠ°ΠΊΠΈΠ΅ Π±ΡΠ²Π°ΡΡ.
Git β ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ Π² ΠΎΠ±ΡΠΈΡ
ΡΠ΅ΡΡΠ°Ρ
Π·Π°Π΄Π°ΡΡ ΠΈ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ°ΠΌΠΎΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π²Π΅ΡΡΠΈΠΉ.
Github / bitbucket β ΡΠΌΠ΅ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΎΠ΄Π½Ρ ΠΈΠ· ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ
ΠΏΠ»ΠΎΡΠ°Π΄ΠΎΠΊ Π΄Π»Ρ git.
Checkout / commit / push / pull β Π±Π°Π·ΠΎΠ²ΡΠ΅ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠΈ Π΄Π»Ρ Π»ΠΈΡΠ½ΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ.
Stash β Π΄Π»Ρ Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΠΎΡ
ΡΠ°Π½Π΅Π½ΠΈΡ Π½Π΅Π½ΡΠΆΠ½ΡΡ
Π² Π΄Π°Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ Π΄Π°Π½Π½ΡΡ
.
10 ΡΠ°Π±ΠΎΡ β ΡΠ΄Π΅Π»Π°ΡΡ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ 10 ΡΠ°Π±ΠΎΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΡΠΎΠ²ΡΡ
, ΡΡΠΎ Π½Π΅ Π²Π°ΠΆΠ½ΠΎ. ΠΠ°ΠΆΠ½ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΡ
Π² ΡΠ°ΠΌΠΊΠ°Ρ
ΡΠ΅ΠΊΡΡΠΈΡ
Π·Π½Π°Π½ΠΈΠΉ.
Middle
CSS 3 β Π³ΡΠ°Π΄Π°ΡΠΈΠΈ, ΡΠ΅Π½ΠΈ, ΡΠ³Π»Π°ΠΆΠΈΠ²Π°Π½ΠΈΠ΅, ΡΠΈΠ»ΡΡΡΡ, ΡΡΠ°Π½ΡΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΡΠΎΠ΄Π²ΠΈΠ½ΡΡΡΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ β ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ Π·Π° ΠΎΠΏΠ΄Π΅Π»ΡΠ½Π½ΡΠΌ (+), ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΡΠΉ ΠΏΠΎ ΡΡΡΡΡ (nth-child), shadow-dom, before/after ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΠ½ΠΈΠΌΠ°ΡΠΈΠΈ β ΠΎΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ. transition ΠΈ animation. ΠΠ»Π°Π²Π½ΡΠ΅ ΠΏΠ΅ΡΠ΅Ρ
ΠΎΠ΄Ρ, Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ ΠΈ ΠΌΠΈΠ½ΡΡΡ.
Π‘Π΅ΡΠΊΠΈ β Π·Π°ΡΠ΅ΠΌ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ, ΠΊΠ°ΠΊ Π²ΡΡΡΡΠ°ΠΈΠ²Π°ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ Π΅ΡΡΡ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΠ΅ΡΠ΅Π½ΠΈΡ. ΠΠ»Ρ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Flexbox grid ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°ΠΉΠ΄ΡΡΠ΅.
Π€ΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠΈ (CSS) β Π·Π°ΡΠ΅ΠΌ Π½ΡΠΆΠ½Ρ, ΠΊΠ°ΠΊ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ. ΠΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΡΠΈΡΡΡΡ Ρ
ΠΎΡΠΎΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ ΠΎΠ΄ΠΈΠ½. ΠΡΠ΅Π½Ρ ΠΏΡΠΈΠ³ΠΎΠΆΠ΄Π°Π΅ΡΡΡ Π΄Π»Ρ ΠΏΡΠΎΡΠΎΡΠΈΠΏΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠ²ΡΡΠ°Π΅Ρ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΏΡΠΈ ΠΎΡΡΡΡΡΡΠ²ΠΈΠΈ Π±ΡΠ΄ΠΆΠ΅ΡΠ° Π½Π° Π΄ΠΈΠ·Π°ΠΉΠ½ (Π½Π΅ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎ, Π½ΠΎ ΡΠ·Π°Π±Π΅Π»ΡΠ½ΠΎ).
CSS ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΡ β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΡΠ°Π±ΠΎΡΡ, Π±ΠΎΠ»Π΅Π΅ ΠΊΡΠ°ΡΠΈΠ²ΡΠΉ ΠΈ ΡΠΈΡΠ°Π±Π΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄. ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅, ΠΌΠΈΠΊΡΠΈΠ½Ρ ΠΈ Ρ.ΠΏ. ΠΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ»ΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌΠΈ ΠΏΡΠ΅ΠΏΡΠΎΡΠ΅ΡΡΠΎΡΠ°ΠΌΠΈ ΡΠΈΠΏΠ° SASS, LESS, Stylus.
Media queries β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½ΡΠΆΠ½ΡΡ
ΡΡΠΈΠ»Π΅ΠΉ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΡΠ»ΠΎΠ²ΠΈΠΉ (ΡΡΡΡΠΎΠΉΡΡΠ²ΠΎ, ΡΠ°Π·ΠΌΠ΅Ρ ΡΠΊΡΠ°Π½Π°, ΠΏΠ»ΠΎΡΠ½ΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, Π²Π΅ΡΡΠΈΡ Π΄Π»Ρ ΠΏΠ΅ΡΠ°ΡΠΈ ΠΈ Ρ.ΠΏ.).
Π‘ΡΠΈΠ»Ρ ΠΊΠΎΠ΄Π° β ΠΏΠΎΠ½ΡΡΡ, Π΄Π»Ρ ΡΠ΅Π³ΠΎ Π΅ΡΡΡ ΡΠΎΠ³Π»Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎ ΡΡΠΈΠ»ΡΠΌ, ΠΈΠ·ΡΡΠΈΡΡ ΠΈ Π½Π°ΡΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Π»ΡΠ±ΠΎΠΉ (ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΎΡ AirBNB).
DRY / KISS / SOLID β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΠΎΠ½ΡΡΡ Π²Π°ΠΆΠ½ΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ, ΠΎΡΡΡΠΈΠΌΠΎ ΡΠΏΡΠΎΡΠ°ΡΡΠΈΠ΅ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅Π΅ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
OOCSS β ΠΎΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ. ΠΠΎΠ½ΡΡΡ, ΡΡΠΎ Π΅ΡΡΡ ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΠΎ-ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ css ΠΈ Π΄Π»Ρ ΡΠ΅Π³ΠΎ ΠΎΠ½. Π ΡΠΎΠΌ ΠΈΠ»ΠΈ ΠΈΠ½ΠΎΠΌ Π²ΠΈΠ΄Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ
ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ
(Ρ
ΠΎΡΡ ΠΈ Π±Π΅Π· ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΡ, ΡΡΠΎ ΡΡΠΎ ΠΎΠ½). Π ΠΈΠ΄Π΅Π°Π»Π΅, Π½Π°ΡΡΠΈΡΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ. ΠΠΎΠΆΠ΅Ρ ΠΎΡΠ»ΠΈΡΠ½ΠΎ Π·Π°ΠΉΡΠΈ Π΄Π»Ρ ΠΊΡΡΠΏΠ½ΡΡ
ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ².
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ β ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΠΈ ΠΊΠ°ΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ. ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡ. ΠΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ, Π½ΠΎ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ·ΡΡΠΈΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ markdown.
ΠΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ β Π½Π°ΡΡΠΈΡΡΡΡ ΠΎΡΠ΅Π½ΠΈΠ²Π°ΡΡ ΡΡΠΎΠΊΠΈ ΠΏΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΠ°Π±ΠΎΡ.
ΠΠ΅ΠΊΠΎΠΌΠΏΠΎΠ·ΠΈΡΠΈΡ β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΠ°ΡΡΠΈΡΡΡΡ ΡΠ°Π·Π±ΠΈΠ²Π°ΡΡ Π·Π°Π΄Π°ΡΡ Π½Π° ΠΏΠΎΠ΄Π·Π°Π΄Π°ΡΠΈ. ΠΡΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, ΡΠ΅ΠΌ ΠΊΠ°ΠΆΠ΅ΡΡΡ π
ΠΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠ° Π·Π°Π΄Π°Ρ β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΠ°ΡΡΠΈΡΡΡΡ ΡΡΡΠΊΠΎ ΠΎΠΏΠΈΡΡΠ²Π°ΡΡ Π·Π°Π΄Π°ΡΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ Ρ ΠΌΠ΅Π½ΡΡΠ΅ΠΉ ΠΊΠ²Π°Π»ΠΈΡΠΈΠΊΠ°ΡΠΈΠ΅ΠΉ, Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ, ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π΄Π»Ρ ΠΈΡ
Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ.
Flexbox β ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ, ΡΠΌΠ΅Π½ΠΈΠ΅ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎ.
ΠΡΡΡΡΠΊΠ° ΠΏΠΈΡΠ΅ΠΌ β ΠΎΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ. Π ΡΠ΅Π»ΠΎΠΌ Π½Π°Π²ΡΠΊ Π½Π΅ Π»ΠΈΡΠ½ΠΈΠΉ. ΠΠΎΠ½ΠΈΠΌΠ°ΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΠΎΡΡΠΎΠ²ΡΡ
ΡΠΈΡΡΠ΅ΠΌ, ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ Ρ
ΠΎΡΠΎΡΠΈΠΉ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΈ Π½Π΅ ΡΠΏΠ°ΡΡΡ Π² ΡΠΏΠ°ΠΌ (Π΅ΡΠ»ΠΈ ΡΡΠΎ Π½Π΅ ΡΠΏΠ°ΠΌ).
ΠΠΎΠ»ΠΈΡΠΈΠ»Ρ β ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ, ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ°ΠΌΡΠ΅ Π°ΠΊΡΡΠ°Π»ΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ, ΡΠΎΡ
ΡΠ°Π½ΡΡ ΠΎΠ±ΡΠ°ΡΠ½ΡΡ ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠΎΡΡΡ. ΠΠΎΠ½ΡΡΡ ΠΌΠΈΠ½ΡΡΡ ΠΈ ΠΏΠ»ΡΡΡ ΠΎΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄Π°.
ΠΡΠΎΡΡΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅Π½Π½Π°Ρ Π²ΡΡΡΡΠΊΠ° β ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ Π΄Π΅Π»Π°ΡΡ, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΠ΅ΠΊΡ Ρ
ΠΎΡΠΎΡΠΎ Π²ΡΠ³Π»ΡΠ΄Π΅Π» Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ΄ Windows, Linux ΠΈ Mac, Π½ΠΎ ΠΈ ΠΏΠΎΠ΄ SmartTV ΠΈΠ»ΠΈ PS.
ΠΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½Π°Ρ Π²ΡΡΡΡΠΊΠ° β ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΡΠ°Π·Π½ΠΈΡΡ ΡΠ΅Π½Π΄Π΅ΡΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΠΈ Π·Π°ΡΡΠ°Π²Π»ΡΡΡ ΠΈΡ
ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎ. Π‘Π°ΠΉΡ CanIUse ΠΎΡΠ΅Π½Ρ ΠΏΠΎΠΌΠΎΠ³Π°Π΅Ρ Π² ΡΡΠΎΠΌ.
ΠΠΎΠ±ΠΈΠ»ΡΠ½Π°Ρ Π²ΡΡΡΡΠΊΠ° β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ Π½Π΅ΡΡΡ Π² ΡΠ΅Π±Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΠΏΠ»Π°ΡΡΠΎΡΠΌΡ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΠΈΠΌΠΈΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎ.
ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. Π Π°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² Β«ΡΠ΅Π½Π΅Β» ΡΠ΅Ρ
ΠΈΠ»ΠΈ ΠΈΠ½ΡΡ
ΠΏΡΠΈΡΠΌΠΎΠ². ΠΠΎΠ½ΡΡΡ, ΠΈΠ· ΠΊΠ°ΠΊΠΈΡ
ΡΠ°Π· ΡΠΎΡΡΠΎΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
ΠΠ°Π³ΡΡΠ·ΠΊΠ° β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ, ΠΊΠ΅ΡΠ΅ΠΌ, ΡΠΆΠ°ΡΠΈΠ΅ΠΌ, ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½Π΅Π½ΠΈΠ΅ΠΌ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΈ Ρ.ΠΏ.
ΠΡΡΠΈΡΠΎΠ²ΠΊΠ° β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΠΈ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΡΠΎ ΡΠΊΠΎΡΠΎΡΡΡΡ ΡΠ΅Π½Π΄Π΅ΡΠ° ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ.
SEO β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. Π₯ΠΎΡΡ Π±Ρ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠ΅ ΡΠ°Π±ΠΎΡΡ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ
ΡΠΈΡΡΠ΅ΠΌ. Π£ΠΌΠ΅Π½ΠΈΠ΅ Β«ΠΏΠΎΠΌΠΎΡΡΒ» ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ, ΠΊΡΠ΄Π° ΡΠΌΠΎΡΡΠ΅ΡΡ ΠΈ ΡΡΠΎ Π²Π°ΠΆΠ½ΠΎ.
Π¨Π°Π±Π»ΠΎΠ½ΠΈΠ·Π°ΡΠΎΡΡ β ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠΎΠ΄, Π³ΡΡΠΏΠΏΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡΠ΅Π½Ρ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ·ΡΡΠΈΡΡ ΠΊΠ°ΠΊ ΡΠ΅ΡΠ²Π΅ΡΠ½ΡΠΉ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³, ΡΠ°ΠΊ ΠΈ ΠΊΠ»ΠΈΠ΅Π½ΡΡΠΊΠΈΠΉ. Π‘ΡΠ΄Π° ΠΆΠ΅ Π²Ρ
ΠΎΠ΄ΡΡ ΡΠ°Π±Π»ΠΎΠ½Ρ Π½Π° Β«ΡΠΈΡΡΠΎΠΌΒ» ΡΠ·ΡΠΊΠ΅ (ΡΠΈΠΏΠ° ΠΏΡΠΎΡΡΡΡ
PHP Π²ΡΡΠ°Π²ΠΎΠΊ). Π Π°Π±ΠΎΡΠ° Β«Π΄ΠΎΒ» (dataflow) ΡΠ°Π±Π»ΠΎΠ½ΠΈΠ·Π°ΡΠΎΡΠ° Π½Π°Ρ Π½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΠ΅Ρ.
PHP β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. Π Π°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² Π±Π°Π·ΠΎΠ²ΠΎΠΌ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ΅ ΠΈ ΡΠΌΠ΅ΡΡ Π²Π½Π΅ΡΡΠΈ ΠΌΠ΅Π»ΠΊΠΈΠ΅ ΠΏΡΠ°Π²ΠΊΠΈ, ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ Ρ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ ΡΡΡΠ°Π½ΠΈΡΡ.
CMS β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. Π£Π·Π½Π°ΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ CMS ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΠΈ Π΄Π»Ρ ΡΠ΅Π³ΠΎ ΠΎΠ½ΠΈ Π±ΡΠ»ΠΈ ΡΠΎΠ·Π΄Π°Π½Ρ. ΠΠ°ΡΡΠΈΡΡΡΡ ΠΏΠΈΡΠ°ΡΡ ΡΠ°Π±Π»ΠΎΠ½Ρ Ρ
ΠΎΡΡ Π±Ρ Π΄Π»Ρ ΠΎΠ΄Π½ΠΎΠΉ (ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ WordPress).
Javascript β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΠ·ΡΡΠΈΡΡ Π±Π°Π·ΠΎΠ²ΡΠΉ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ, ΠΏΠΎΠ½ΡΡΡ, ΠΊΠ°ΠΊ Π²Π΅ΡΠ°ΡΡ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠΈΠ΅ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΈ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΡΡ ΠΏΡΠΎΡΡΡΡ ΡΠ°Π±ΠΎΡΡ Ρ DOM.
jQuery β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. ΠΠ°ΡΡΠΈΡΡΡΡ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΡΡ ΠΊΡΡΡ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π΄Π»Ρ ΡΠ΅ΡΠ΅Π½ΠΈΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠΈΠΏΠΎΠ²ΡΡ
Π·Π°Π΄Π°Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π΄Π»Ρ ΡΠ°ΠΌΠΎΠΉ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΉ js Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ (ΠΏΠΎΡΠ»Π΅ vanilla.js, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ).
NodeJS β ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠ»ΠΎΠΆΠΈΡΡ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅. Π Π°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ, ΠΊΠ°ΠΊ Π·Π°ΠΏΡΡΡΠΈΡΡ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠΈΠΉ ΡΠ΅ΡΠ²Π΅Ρ, ΡΠ°Π·Π΄Π°Π²Π°ΡΡ ΡΡΠ°ΡΠΈΠΊΡ ΠΈ ΡΠ΅Π½Π΄Π΅ΡΠΈΡΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΡΠ΅ΡΠ²Π΅ΡΠ°. ΠΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Express ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊ.
Π‘Π±ΠΎΡΠΊΠ° β ΠΎΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ. ΠΠ°ΡΡΠΈΡΡΡΡ ΡΠΎΠ±ΠΈΡΠ°ΡΡ ΠΏΡΠΎΠ΅ΠΊΡ ΠΈΠ· ΠΊΡΡΠΈ CSS / HTML ΡΠ°ΠΉΠ»ΠΎΠ² Π² ΡΠΎ, ΡΡΠΎ Π½ΡΠΆΠ½ΠΎ. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡΡΡΡ Ρ
ΠΎΡΡ Π±Ρ Ρ grunt ΠΈ gulp, ΠΊΠ°ΠΊ ΠΏΡΠ΅Π΄ΡΡΠ°Π²ΠΈΡΠ΅Π»ΡΠΌΠΈ Β«ΡΠ°Π·Π½ΡΡ
Β» Π»Π°Π³Π΅ΡΠ΅ΠΉ.
IDE β ΠΎΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ. ΠΠ·ΡΡΠΈΡΡ, Π·Π°ΡΠ΅ΠΌ Π½ΡΠΆΠ½Ρ IDE ΠΈ ΠΊΠ°ΠΊ ΠΈΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ. ΠΠ΅ΡΠ΅ΠΉΡΠΈ Π½Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°ΠΊΠΎΠ³ΠΎ-Π»ΠΈΠ±ΠΎ IDE Π΄Π»Ρ ΡΠΊΠΎΠ½ΠΎΠΌΠΈΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΠ°ΠΆΠ½ΠΎ: ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ IDE ΡΡΠ°Π²Π½ΠΈΠΌΠΎ Ρ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΠΌ ΠΈΠ·ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ·ΡΠΊΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΈ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°Π½ΠΈΠ΅ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Π° Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π² ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅ ΠΎΠΏΡΠ°Π²Π΄Π°ΡΡΡΡ. ΠΠΈΡΠ½ΠΎ Ρ ΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°ΠΌΠΈ (ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΎΠΎΠΎΡΠ΅Π½Ρ ΠΊΡΡΠΏΠ½ΡΡ
ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Π²ΠΊΠ»ΡΡΠ°Ρ IDE).
Branching β Π½Π°ΡΡΠΈΡΡΡΡ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π²Π΅ΡΠΊΠ°ΠΌΠΈ Π² git.
Merge β Π½Π°ΡΡΠΈΡΡΡΡ ΡΠ»ΠΈΠ²Π°ΡΡ Π²Π΅ΡΠΊΠΈ Ρ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ»ΠΈΠΊΡΠΎΠ².
Fetch / Rebase β ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ, Π·Π°ΡΠ΅ΠΌ ΠΎΠ½ΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΈΡ
ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ, ΠΈ Π½Π°ΡΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΠΏΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎΡΡΠΈ.
ΠΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΡ β ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ, ΠΊΠ°ΠΊΠΈΠ΅ Π±ΡΠ²Π°ΡΡ, Π΄Π»Ρ ΡΠ΅Π³ΠΎ. Π§Π΅ΠΌ Π²Π΅ΠΊΡΠΎΡΠ½ΡΠ΅ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ ΠΎΡ ΡΠ°ΡΡΡΠΎΠ²ΡΡ
. ΠΠ°ΠΆΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Ρ
ΠΎΡΡ Π±Ρ Π½Π° ΡΡΠΎΠ²Π½Π΅ Β«ΡΡΠ΅Π½ΠΈΡΒ» ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΎΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ°. ΠΡΠ±ΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉ ΡΡΠΈΡΡ, ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠ²Π΅Ρ ΠΈ Ρ.ΠΏ. Π§ΡΠΎΠ±Ρ Π½Π΅ Π½Π° Π³Π»Π°Π·, Π° ΡΠΎΡΠ½ΠΎ. Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΡ ΠΏΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΌΠΈΠ½ΠΈΠΌΡΠΌ Ρ 1 ΡΠ°ΡΡΡΠΎΠ²ΡΠΌ (Photoshop) ΠΈ 1 Π²Π΅ΠΊΡΠΎΡΠ½ΡΠΌ (Figma).
50 ΡΠ°Π±ΠΎΡ β ΠΊ ΠΊΠΎΠ½ΡΡ ΡΡΠ°ΠΏΠ° Ρ Π²Π°Ρ ΠΏΠΎΡΡΠ΄ΠΊΠ° 50 ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°Π±ΠΎΡ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠΈΡ
Π½Π°Π²ΡΠΊΠΈ ΠΈΠ· ΠΈΠ·ΡΡΠ΅Π½Π½ΡΡ
ΠΎΠ±Π»Π°ΡΡΠ΅ΠΉ.
Senior
Π₯ΠΎΡΡ Π½Π° ΡΡ
Π΅ΠΌΠ΅ ΠΈ ΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΌΠ°Π»Π΅Π½ΡΠΊΠΎΠΉ ΡΡΠ° Π³ΡΡΠΏΠΏΠ°, Π½ΠΎ ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ½Π° ΡΠ°ΠΌΠ°Ρ Π±ΠΎΠ»ΡΡΠ°Ρ. Π’.ΠΊ. ΠΊ ΡΡΠΎΠΌΡ ΠΌΠΎΠΌΠ΅Π½ΡΡ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΠ·ΡΡΠΈΡΡ Π²ΡΡ ΡΠΎ, ΡΡΠΎ ΠΎΡΠΊΠ»Π°Π΄ΡΠ²Π°Π»ΠΎΡΡ.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½Π°Ρ / ΠΡΠ·ΡΠ²ΡΠΈΠ²Π°Ρ Π²ΡΡΡΡΠΊΠ° β ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² Π²ΡΡΡΠ΅ΠΉ ΡΡΡΠΏΠ΅Π½ΠΈ ΠΈ ΡΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡΠΎΠ²Π°ΡΡ Π²ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π΄ΠΎ ΡΡΠΎΠ³ΠΎ Π·Π½Π°Π½ΠΈΡ. ΠΡΠΎΠ΅ΠΊΡ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Ρ
ΠΎΡΠΎΡΠΎ Π²Π΅Π·Π΄Π΅ ΠΈ Π½Π° Π²ΡΡΠΌ (Π² ΡΠ°ΠΌΠΊΠ°Ρ
ΡΠ°Π·ΡΠΌΠ½ΠΎΠ³ΠΎ).
ΠΠΎΡΡΠ΅ΠΏΠ΅Π½Π½Π°Ρ Π΄Π΅Π³ΡΠ°Π΄Π°ΡΠΈΡ / ΠΡΠΎΠ³ΡΠ΅ΡΡΠΈΠ²Π½ΠΎΠ΅ ΡΠ»ΡΡΡΠ΅Π½ΠΈΠ΅ β ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ ΡΡΠΎ ΠΈ Π·Π°ΡΠ΅ΠΌ. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ.
Gitflow β ΡΠΌΠ΅ΡΡ ΠΎΠ±ΡΡΡΠ½ΠΈΡΡ Π΄ΡΡΠ³ΠΈΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π²Π΅ΡΠΊΠΈ, ΠΊΡΠ΄Π° ΠΈΡ
Π²Π»ΠΈΠ²Π°ΡΡ, ΠΊΠ°ΠΊ, ΡΠΌΠ΅ΡΡ ΠΏΡΠΎΠ²Π΅ΡΡΠΈ ΠΊΠΎΠ΄ ΡΠ΅Π²ΡΡ (Π²ΡΡΡΡΠΊΠΈ, ΡΠ°ΠΌΠΎ ΡΠΎΠ±ΠΎΠΉ, Π½Π΅ ΠΊΠΎΠ΄Π°).
ΠΠΠ β ΠΎΠΏΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ. Π Π°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ Π² ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΠΈ, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠ΅ΠΉ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ Π±Π΅Π·Π»ΠΈΠΌΠΈΡΠ½ΠΎ ΠΊΡΡΠΏΠ½ΡΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠΉ ΡΠΈΠ½Ρ
ΡΠΎΠ½ΠΈΠ·Π°ΡΠΈΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠ°Π½Π΄Ρ ΠΌΠΎΠ³Π»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±Π»ΠΎΠΊΠΈ Π΄ΡΡΠ³ Π΄ΡΡΠ³Π°. ΠΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Π΄Π°ΡΡΠΈΠ΅ Π½Π΅ Ρ
ΡΠ΄ΡΠΈΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ. Π ΡΡΠΎΠΌΡ ΠΌΠΎΠΌΠ΅Π½ΡΡ ΠΎ Π½ΠΈΡ
Π²Ρ ΡΠ°ΠΊ ΠΈΠ»ΠΈ ΠΈΠ½Π°ΡΠ΅ Π±ΡΠ΄Π΅ΡΠ΅ Π·Π½Π°ΡΡ ΠΈ ΡΠΌΠΎΠΆΠ΅ΡΠ΅, ΠΏΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ, ΠΈΠ·ΡΡΠΈΡΡ.
100 ΡΠ°Π±ΠΎΡ β ΠΈΠΌΠ΅ΡΡ ΡΡΠΌΠΌΠ°ΡΠ½ΠΎ ΡΠΎΡΠ½Ρ ΡΠ°Π±ΠΎΡ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠΈΡΡΡΡΠΈΡ
ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΏΠΎΠ»ΡΡΠ΅Π½Π½ΡΠ΅ Π½Π°Π²ΡΠΊΠΈ. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅, ΡΡΠΎ Π²ΡΡ ΡΡΠ»ΠΎΠ²Π½ΠΎ. ΠΠΎΠΆΠ½ΠΎ ΠΈΠΌΠ΅ΡΡ ΠΎΠ΄Π½Ρ ΡΠ°Π±ΠΎΡΡ (ΡΠΎΡΡΠΎΡΡΡΡ ΠΈΠ· ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°ΡΡΠ΅ΠΉ) Π² ΠΏΠΎΡΡΡΠΎΠ»ΠΈΠΎ, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΆΠ΅ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ, ΡΡΠΎ Π²Π°ΠΌ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΡΡΡΠ°ΡΠ½ΠΎ.
ΠΠ°ΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅
Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ ΠΈΠ· ΡΡΠΈΡ
ΡΠ΅ΠΌ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅. ΠΠ΄Π½Π°ΠΊΠΎ Π΄Π΅ΡΠΆΠ°ΡΡ ΠΊΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ
ΡΠ°ΠΊΡΠΎΡΠΎΠ² Π² Π³ΠΎΠ»ΠΎΠ²Π΅ ΠΎΡΠ΅Π½Ρ ΡΠ»ΠΎΠΆΠ½ΠΎ. ΠΠ° 15 Π»Π΅Ρ Ρ ΠΎΠ±ΡΠ°Π»ΡΡ ΠΌΠ΅Π½Π΅Π΅ ΡΠ΅ΠΌ Ρ Π΄Π΅ΡΡΡΡΡ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠ°ΠΌΠΈ (Π΄Π° ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠ°ΠΌΠΈ), ΠΊΠΎΡΠΎΡΡΡ
ΠΎΡΠ½ΡΡ Π±Ρ ΠΊ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΠΈ Senior (Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠΎΠ², ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡΠΎΠ² Ρ
ΠΎΡΠΎΡΠΈΡ
Π±ΡΠ»ΠΎ ΡΠΈΠ»ΡΠ½ΠΎ Π±ΠΎΠ»ΡΡΠ΅).
ΠΠ°Π΄Π΅ΡΡΡ, ΡΠ΅ΠΌ, ΠΊΡΠΎ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² Π½Π°ΡΠ°Π»Π΅ ΠΏΡΡΠΈ, ΡΡ Π΅ΠΌΠ° ΠΏΠΎΠ΄ΡΠΊΠ°ΠΆΠ΅Ρ, ΠΊΡΠ΄Π° ΠΌΠΎΠΆΠ½ΠΎ Π΅ΡΡ Π΄Π²ΠΈΠ³Π°ΡΡΡΡ, ΠΈ ΡΡΠΎ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠ°Π·Ρ (Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π΅ Π΄Π²ΠΈΠ³Π°ΡΡ Π² Π½Π΅Π³ΠΎ) Π±Π΅ΠΆΠ°ΡΡ Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅.
Π’Π°ΠΊΠΆΠ΅ ΠΏΠ»Π°Π½ΠΈΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΠΉ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΉ ΠΊΡΡΡ Ρ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΡΠΌ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ΡΠ΅ΠΌ-ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊΠΎΠ² ΡΠΎ ΡΡ
Π΅ΠΌΡ. ΠΡΠ΄Ρ ΡΠ°Π΄ ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΎΡΠ·ΡΠ²Π°ΠΌ, ΠΏΠΎΠΆΠ΅Π»Π°Π½ΠΈΡΠΌ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΡΡΡ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π±ΡΠ΄Π΅Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠΎΠ² Ρ ΠΏΠΎΠ»Π½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΌ ΠΈ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΡΠ»ΠΈ Π΄Π΅Π»ΠΎ ΠΏΠΎΠΉΠ΄ΡΡ, ΠΏΡΠΈΠ»ΠΎΠΆΡ Π² Π±ΡΠ΄ΡΡΠ΅ΠΌ ΡΡΡΠ»ΠΊΠΈ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ.
upd
ΠΠ½ΠΎΠ³ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠΉ ΠΎ ΡΠΎΠΌ, ΡΡΠΎ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊ Π±Π΅Π· Π·Π½Π°Π½ΠΈΡ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Π½Π΅ Π½ΡΠΆΠ΅Π½. Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΡΠΎ ΠΏΠΈΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π² ΠΊΡΡΠΏΠ½ΡΡ
ΠΏΡΠΎΠ΅ΠΊΡΠ°Ρ
. Π, Π΄Π»Ρ Π½ΠΈΡ
, ΡΡΠΎ Π²ΠΏΠΎΠ»Π½Π΅ ΡΠ°ΠΊ. ΠΠΎ Π΅ΡΡΡ Π΅ΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΡΡΠ΄ΠΈΠΉ Π΄Π΅Π»Π°ΡΡΠΈΡ
Π»Π΅Π½Π΄ΠΈΠ½Π³ΠΈ, ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ Π΄Π»Ρ Π²ΠΎΡΠ΄ΠΏΡΠ΅ΡΠΎΠ² ΠΈ Π΄ΡΡΠ³ΠΈΡ
CMS. ΠΡΠΎ Π²ΠΏΠΎΠ»Π½Π΅ ΡΠ΅Π±Π΅ Ρ
ΠΎΡΠΎΡΠΈΠΉ ΡΡΠ½ΠΎΠΊ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π·Π°ΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ. ΠΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ
ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ², Ρ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΠΌΠ΅Π½ΡΡΠΈΠΌΠΈ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊ ΡΠΏΠΎΡΠΎΠ±Π΅Π½ Π·Π°ΠΊΡΡΡΡ Π½Π° ΠΎΡΠ»ΠΈΡΠ½ΠΎ.
ΠΠ΅ΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠ° ΠΈΠ· PSD ΠΌΠ°ΠΊΠ΅ΡΠ°
Π ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΠ°ΡΡΠ΅ Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎ ΠΏΠΎΠΊΠ°Π·Π°Π», ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ ΡΠ°ΠΉΡΠ° Π² ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ΅ Photoshop, ΠΈ Π² ΠΈΡΠΎΠ³Π΅ ΠΏΠΎΠ»ΡΡΠΈΠ»ΡΡ ΠΏΡΠΎΡΡΠΎΠΉ, Π½ΠΎ Π½Π΅ ΡΠ΅ΠΆΡΡΠΈΠΉ Π³Π»Π°Π· ΡΠ°Π±Π»ΠΎΠ½.
Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ, ΠΊΠ°ΠΊ ΡΠ²Π΅ΡΡΡΠ°ΡΡ Π΅Π³ΠΎ ΠΈΠ· PSD-ΠΌΠ°ΠΊΠ΅ΡΠ° Π² Π³ΠΎΡΠΎΠ²ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ HTML-ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΈ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ (CSS).
ΠΠΎΠΎΠ±ΡΠ΅ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΎΠ² ΠΊ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΊΠ΅ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ² ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ: ΠΊΡΠΎ-ΡΠΎ ΡΠ½Π°ΡΠ°Π»Π° Π΄ΠΎΡΠΊΠΎΠ½Π°Π»ΡΠ½ΠΎ ΠΏΡΠΎΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅Ρ ΡΠ°Π±Π»ΠΎΠ½ ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠΎΠΌ Π·Π°Π½ΠΈΠΌΠ°Π΅ΡΡΡ Π²ΡΡΡΡΠΊΠΎΠΉ, ΠΊΡΠΎ-ΡΠΎ ΠΎΡΡΠΈΡΠΎΠ²ΡΠ²Π°Π΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΏΡΠΈΠ±Π»ΠΈΠ·ΠΈΡΠ΅Π»ΡΠ½ΠΎ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ ΡΡΡΠΈΡ
ΠΈ Π²ΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΡΡΡΠΊΠΈ; ΠΎΠ΄Π½ΠΈ ΡΠ½Π°ΡΠ°Π»Π° ΡΠΈΡΡΡΡ, Π·Π°ΡΠ΅ΠΌ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ Π½Π°ΡΠ΅Π·ΠΊΠΎΠΉ, Π΄ΡΡΠ³ΠΈΠ΅ (ΠΊΠ°ΠΊ ΠΌΡ Π² ΠΏΡΠΎΡΠ»ΠΎΠΉ ΡΡΠ°ΡΡΠ΅) ΡΠΎΡ
ΡΠ°Π½ΡΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΎΠ±ΡΠ΅ΠΊΡΡ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ Π² ΠΏΡΠΎΡΠ΅ΡΡΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΡΡΠ°ΠΏ
ΠΡΠ°ΠΊ, ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π³Π΄Π΅ ΡΠ³ΠΎΠ΄Π½ΠΎ (Ρ ΠΎΡΡ Π½Π° Π Π°Π±ΠΎΡΠ΅ΠΌ ΡΡΠΎΠ»Π΅, Ρ ΠΎΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅) ΡΠ°ΠΉΠ» index.html. Π ΡΡΠΎΡ ΠΆΠ΅ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π΄ΠΈΡΠ΅ΠΊΡΠΎΡΠΈΡ images. ΠΠ½Π° Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π²ΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π² ΡΠ°Π±Π»ΠΎΠ½Π΅ ΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. Π’Π°ΠΊ ΠΊΠ°ΠΊ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΡ Π²ΡΡΠ΅Π·Π°Π»ΠΈ Π·Π°Π±Π»Π°Π³ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, ΡΡΠ°Π·Ρ ΡΠΊΠΎΠΏΠΈΡΡΠ΅ΠΌ ΠΈΡ Π² ΠΏΠ°ΠΏΠΊΡ images ΠΈ Π΄Π°Π΄ΠΈΠΌ ΡΠ°ΠΊΠΈΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΡ:
- back_all β ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠ° ΡΠ°ΠΉΡΠ°.
- header_top β ΡΠΎΠ½ ΡΠ°ΠΏΠΊΠΈ.
- big_pic β Π»ΠΎΠ³ΠΎΡΠΈΠΏ.
- title β ΡΠΎΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ.
- footer β Π·Π°Π»ΠΈΠ²ΠΊΠ° Π½ΠΈΠ·Π° ΡΠ°ΠΉΡΠ°.
- 1mini β ΠΏΠ΅ΡΠ²ΠΎΠ΅ ΡΠΎΡΠΎ Π΄Π»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ.
- 2mini β Π²ΡΠΎΡΠΎΠ΅ ΡΠΎΡΠΎ.
Π ΠΏΠ°ΠΏΠΊΠ΅ ΡΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅ΠΉ index.html ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ ΡΠ°ΠΉΠ» styles.css β Π² Π½ΡΠΌ Π±ΡΠ΄ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½Ρ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ ΡΠ°Π±Π»ΠΎΠ½Π°.
ΠΠ»ΠΎΠΊΠ½ΠΎΡ Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΊΠΎΠ΄Π° ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ. ΠΠΎΡΠ°Π·Π΄ΠΎ Π»ΡΡΡΠ΅ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Notepad++. ΠΡΠΎ ΠΏΠΎΠ΄ΡΠ²Π΅ΡΠΈΠ²Π°ΡΡΠ°Ρ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ ΡΠ°Π·Π½ΡΡ ΡΠ·ΡΠΊΠΎΠ² (HTML ΠΈ CSS β Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅) ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°, Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ Π² ΠΊΠΎΡΠΎΡΠΎΠΉ Π³ΠΎΡΠ°Π·Π΄ΠΎ ΡΠ΄ΠΎΠ±Π½Π΅ΠΉ, ΡΠ΅ΠΌ Π² ΠΏΡΠΎΡΡΡΡ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°Ρ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ².
ΠΠ΅Π»ΠΈΠΌ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ Π½Π° Π±Π»ΠΎΠΊΠΈ
ΠΡΠΊΡΠΎΠΉΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ index.html ΠΈ Π²ΠΏΠΈΡΠΈΡΠ΅ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Π¨Π°Π±Π»ΠΎΠ½ ΡΠ°ΠΉΡΠ°</title> <meta name="keywords" content=""> <meta name="description" content=""> <link href="styles.css" rel="stylesheet" type="text/css" media="screen"> </head> <body> </body> </html>
Π‘ΠΎΡ
ΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ». ΠΡΠ΅ ΡΡΠΈ ΡΠ΅Π³ΠΈ ΠΌΡ ΡΠΆΠ΅ Π΄Π°Π²Π½ΠΎ ΠΈΠ·ΡΡΠΈΠ»ΠΈ ΠΈ Π² ΠΏΠΎΡΡΠ½Π΅Π½ΠΈΠΈ ΠΎΠ½ΠΈ Π½Π΅ Π½ΡΠΆΠ΄Π°ΡΡΡΡ. ΠΠΎΠ΄ΠΎΠΌ Π²ΡΡΠ΅ ΠΌΡ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΎΡΠ½ΠΎΠ²Ρ HTML-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠ΅ΠΏΠ΅ΡΡ Π½ΡΠΆΠ½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π΅Ρ Π½Π° Π±Π»ΠΎΠΊΠΈ β ΡΠΊΠ°Π·Π°ΡΡ ΡΡΡΡΠΊΡΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΡΡΠΎ Π·Π° ΡΠ΅ΠΌ Π² Π½ΡΠΌ Π±ΡΠ΄Π΅Ρ ΠΈΠ΄ΡΠΈ.
ΠΠ»ΠΎΠΊΠΎΠ² Ρ Π½Π°Ρ 7, ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»ΠΈΠΌ ΠΈΡ ΠΏΠΎ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΡ (Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π°ΡΡΠΈΠ±ΡΡΠ° id):
1. content β Π±Π»ΠΎΠΊ, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΡΠ΄ΡΡ Ρ ΡΠ°Π½ΠΈΡΡΡΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ.
2. header β Π±Π»ΠΎΠΊ ΡΠ°ΠΏΠΊΠΈ, Π²Π½ΡΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΡΠ΄ΡΡ:
2.1. menu β Π²Π΅ΡΡ Π½ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ.
2.2. logo β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Ρ ΡΠ΅ΠΊΡΡΠΎΠΌ.
3. right β ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ ΡΠ°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ.
4. left
β ΠΏΠ°Π½Π΅Π»Ρ ΡΠ»Π΅Π²Π°.5. footer β Π½ΠΈΠ· ΡΠ°ΠΉΡΠ°.
Π’Π°ΠΊ ΠΈ Π·Π°ΠΏΠΈΡΠ΅ΠΌ (Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ <body> Π²ΡΡΠ°Π²ΡΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄):
<div> <!-- Π¨Π°ΠΏΠΊΠ° --> <div> <div> </div> <div> </div> </div> <!-- ΠΠΎΠ½Π΅Ρ ΡΠ°ΠΏΠΊΠΈ --> <!-- ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π±Π»ΠΎΠΊ --> <div> </div> <!-- ΠΠΎΠ½Π΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° --> <!-- ΠΠ΅Π²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ --> <div> <div> <!-- ΠΠΎΠ½Π΅Ρ Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ --> <!-- ΠΠΎΠ³ΠΈ ΡΠ°ΠΉΡΠ° --> <div> </div> <!-- ΠΠΎΠ½Π΅Ρ --> </div>
Π Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΡΡΠ°Π½ΠΈΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΠΎ-ΠΏΡΠ΅ΠΆΠ½Π΅ΠΌΡ ΠΏΡΡΡΠΎΠΉ, Π½ΠΎ ΡΡΡΡΠΊΡΡΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° ΡΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ½ΡΡΡ, ΠΎΠ½Π° Π³ΠΎΡΠΎΠ²Π°.
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π±Π°Π·ΠΎΠ²ΠΎΠ΅ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅
Π’Π΅ΠΏΠ΅ΡΡ ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΡΠΌ ΠΊ CSS-ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ, ΡΡΠΎΠ±Ρ Π·Π°Π΄Π°ΡΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΡ Π½Π°ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅.
ΠΡΠΊΡΠΎΠΉΡΠ΅ style.css ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ ΡΡΠ΄Π° ΡΡΡΠΎΠΊΠΈ ΠΊΠΎΠ΄Π°, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΡΡΠ΅ΡΠΈΡΠ΅ Π½ΠΈΠΆΠ΅.
Π£Π±ΠΈΡΠ°Π΅ΠΌ ΠΎΡΡΡΡΠΏΡ ΠΈ ΠΏΠΎΠ»Ρ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ:
* { margin: 0px; padding: 0px; }
Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ²Π΅ΡΠ° ΡΡΡΠ»ΠΎΠΊ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ (Π½Π°Π²ΡΠ» ΠΊΡΡΡΠΎΡ, Π½Π΅ Π½Π°Π²ΡΠ», ΠΏΠΎΡΠ΅ΡΠΈΠ») ΠΈ ΡΠ±ΠΈΡΠ°Π΅ΠΌ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅ Ρ ΡΡΡΠ»ΠΎΠΊ, Π½Π°Π΄ ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ:
a:link { color: #D72020; } a:hover { text-decoration: none; color: #FF0000; } a:visited { color: #D72020; }
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ: ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅-ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΡ (ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π·Π°Π΄Π°ΡΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅), ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΡΠ²Π΅Ρ, ΡΡΠΈΠ»Ρ ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°:
body { background: #FFD723 url(images/back_all.jpg) repeat-x; font: 13px Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #333333; }
ΠΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ° content:
#content { margin: 0 auto; background: #ffffff; width: 786px; text-align: left; }
ΠΠΎΡ ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ½Π° Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π° ΡΠΈΡΡΠ½ΠΊΠΎΠΌ-ΠΏΠΎΠ΄Π»ΠΎΠΆΠΊΠΎΠΉ. ΠΠΎΠΊΠ° Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ Π²ΠΈΠ΄ΠΈΠΌΠΎΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅, Π·Π° ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background ΠΊΠ»Π°ΡΡΠ° body.
ΠΡΠΎΡΠΌΠ»ΡΠ΅ΠΌ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΌΠ΅Π½Ρ
ΠΠ°ΡΠ°Π»ΠΎ Π΅ΡΡΡ, ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΡΡΡΠΏΠ°ΡΡ ΠΊ Π²ΡΡΡΡΠΊΠ΅ ΡΠΆΠ΅ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ².
ΠΠ°ΡΠ½ΡΠΌ, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ, Ρ ΡΠ°ΠΏΠΊΠΈ. ΠΠΎΡΠΎΡΠ°Ρ, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· Π±Π»ΠΎΠΊΠΎΠ² Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Ρ ΠΈ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°.
Π‘Π½Π°ΡΠ°Π»Π° Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΎΠ±ΡΠ΅Π΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΎΠ±ΠΎΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ°ΠΏΠΊΠΈ: Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, Π±Π΅Π»ΡΠΉ ΡΠΎΠ½ ΠΈ Π²ΡΡΠΎΡΡ 306px:
#header { background: #ffffff; height: 306px; text-align: left; }
Π’Π°ΠΊ ΠΌΡ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ΄Π° ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΡΠ°ΠΏΠΊΠΈ: Π±Π΅Π»ΡΠΉ ΠΏΡΡΠΌΠΎΡΠ³ΠΎΠ»ΡΠ½ΠΈΠΊ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ.
ΠΠΎΠ³ΠΈΡΠ½ΠΎ Π±ΡΠ»ΠΎ Π±Ρ ΠΏΡΡΠΌΠΎ ΡΠ΅ΠΉΡΠ°Ρ Π·Π°Π½ΡΡΡΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΡΠΌ ΠΌΠ΅Π½Ρ. Π’Π°ΠΊ ΠΌΡ ΠΈ ΠΏΠΎΡΡΡΠΏΠΈΠΌ, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΡΠ΅ΠΆΠ΄Π΅, ΡΠ΅ΠΌ Π²ΡΡΠ°Π²Π»ΡΡΡ Π΅Π³ΠΎ Π² HTML, Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° CSS, ΠΈΠ½Π°ΡΠ΅ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΆΠ°ΡΠ½ΠΎ.
ΠΠ½Π΅ΡΡΠΌ ΠΏΠ΅ΡΠ²ΡΠ΅ ΠΊΠΎΡΡΠ΅ΠΊΡΠΈΠ²Ρ: Π·Π°Π΄Π°Π΄ΠΈΠΌ Π»Π΅Π²ΡΡ Π³ΡΠ°Π½ΠΈΡΡ Π² 2 ΠΏΠΈΠΊΡΠ΅Π»Ρ ΡΠΎΠ»ΡΠΈΠ½ΠΎΠΉ, ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π½Π°ΡΠ΅Π³ΠΎ ΠΌΠ΅Π½Ρ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΠΉΡΡ ΠΏΠΎ ΠΎΡΠΈ X ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ:
#menu { border-left: 2px solid #ffffff; width: 779px; height: 80px; background: url(images/header_top.gif) repeat-x; }
Π‘ΡΡΠ°Π½ΠΈΡΠ° Π² ΠΎΠ±ΠΎΠ·ΡΠ΅Π²Π°ΡΠ΅Π»Π΅ ΡΡΡ ΠΆΠ΅ ΠΏΡΠ΅ΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ ΠΈ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΡΠ°ΠΊ.
Π’Π΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΈ ΡΠ°ΠΌΠΎ ΠΌΠ΅Π½Ρ Π² ΡΠ°ΠΉΠ» index.html:
<table> <tr> <td><a href="#" title="">ΠΠ»Π°Π²Π½Π°Ρ</a></td> <td><a href="#" title="">ΠΠ°Π»Π΅ΡΠ΅Ρ</a></td> <td><a href="#" title="">ΠΠΎΠ³ΠΎΠ²ΠΎΡ</a></td> <td><a href="#" title="">ΠΡΠ°ΠΉΡ</a></td> <td><a href="#" title="">ΠΠ±ΡΠ°Π·ΡΡ</a></td> <td><a href="#" title="">ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a></td> </tr> </table>
ΠΠ±Π½ΠΎΠ²ΠΈΠ² ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ, ΡΡΠΎ ΠΎΠ½ΠΎ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΡΠ²ΠΈΠ»ΠΎΡΡ.
Π’ΠΎΠ»ΡΠΊΠΎ Π²ΠΎΡ Π²ΠΈΠ΄ ΡΡΡΠ»ΠΎΠΊ ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΆΠ΅Π»Π°ΡΡ Π»ΡΡΡΠ΅Π³ΠΎ. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π΄Π»Ρ Π½ΠΈΡ ΡΠ²ΠΎΠΈ ΠΏΡΠ°Π²ΠΈΠ»Π° (Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅, ΡΠΈΡΠΈΠ½Ρ, ΡΠ²Π΅Ρ, ΠΆΠΈΡΠ½ΠΎΡΡΡ ΠΈ Ρ. Π΄.), Π° ΡΡΡΠ»ΠΊΠ°ΠΌ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΡΠΌΠ΅Π½Ρ ΡΠ²Π΅ΡΠ° ΠΈ Π²Π΅ΡΠ½ΡΠΌ ΡΠ±ΡΠ°Π½Π½ΠΎΠ΅ ΠΏΠΎ Π²ΡΠ΅ΠΌΡ ΡΠ°Π±Π»ΠΎΠ½Ρ ΠΏΠΎΠ΄ΡΡΡΠΊΠΈΠ²Π°Π½ΠΈΠ΅:
#menu a { float: left; width: 99px; height: 46px; display: block; text-align: center; text-decoration: none; color: #ffffff; font-weight: bold; font-size: 14px; padding-top: 35px; } #menu a:hover { color: #D72020; text-decoration: underline; }
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ΅Π½Ρ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠΏΠΎΡΡΠ°Π²ΠΈΡΡ Ρ PSD-ΡΠ°Π±Π»ΠΎΠ½ΠΎΠΌ.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΠΊΠ°ΠΊ ΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΏΡΠ½ΠΊΡΠ°, Π΅ΡΠ»ΠΈ ΠΏΠΎΠ΄Π²Π΅ΡΡΠΈ ΠΊ Π½Π΅ΠΌΡ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ (Π·Π° ΡΡΠΎ ΠΎΡΠ²Π΅ΡΠ°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π° #menu a:hover).
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ Π»ΠΎΠ³ΠΎΡΠΈΠΏ
ΠΠΎΠ³ΠΎΡΠΈΠΏ Ρ Π½Π°Ρ ΡΠΆΠ΅ Π΅ΡΡΡ ΠΈ Π»Π΅ΠΆΠΈΡ Π² ΠΏΠ°ΠΏΠΊΠ΅, ΠΎΡΡΠ°ΡΡΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π΅Π³ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΠΎΡΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π°ΠΌΠΈ. Π ΡΠΎ, ΠΈ Π΄ΡΡΠ³ΠΎΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠ΅Π΄ΡΡΠ²Π°ΠΌΠΈ CSS, ΡΠ΅ΠΌ ΠΌΡ ΠΈ Π½Π΅ ΠΏΡΠ΅ΠΌΠΈΠ½Π΅ΠΌ Π·Π°Π½ΡΡΡΡΡ.
#logo { background: #ffffff url(images/big_pic.jpg) no-repeat; width: 738px; height: 146px; text-align: left; padding-top: 80px; padding-left: 40px; border-left: 4px solid #ffffff; }
ΠΠΎΠ³ΠΎΡΠΈΠΏ Π²ΡΡΠ°Π²Π»Π΅Π½ ΡΠΎΠ²Π½ΠΎ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ.
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠ΅, ΡΠ΅Π³ΠΎ Π΅ΠΌΡ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ, ΡΠ°ΠΊ ΡΡΠΎ ΡΠ΅ΠΊΡΡΠ°. ΠΡΡΠ°Π²ΠΈΠΌ Π½Π΅Π΄ΠΎΡΡΠ°ΡΡΠ΅Π΅ Π² Π±Π»ΠΎΠΊ logo ΡΠ°ΠΉΠ»Π° index.html, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ:
<div> <h2><a href="#">ΠΠΌΡ ΡΠ°ΠΉΡΠ°</a></h2> <h3><a href="β">Π‘Π»ΠΎΠ³Π°Π½ ΡΠ°ΠΉΡΠ°</a></h3> </div>
Π’Π΅ΠΊΡΡ ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ, Π½ΠΎ Π΅Π³ΠΎ ΡΠΎΠΆΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ.
ΠΡΡ
ΠΎΠ΄Ρ ΠΈΠ· ΡΠΎΠ³ΠΎ, ΡΡΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΏΠΎΡΡΠΈ Π²ΡΠ΅Π³Π΄Π° Π±ΡΠ²Π°Π΅Ρ ΡΡΡΠ»ΠΊΠΎΠΉ, Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌ ΠΊΠ»Π°ΡΡΠ°ΠΌ.
#logo a { text-decoration: none; text-transform: lowercase; font-style: italic; font-size: 36px; color: #FFFFFF; } #logo h3 a { font-size: 24px; }
ΠΠΎΡΡΠ½ΡΡΡ Π·Π΄Π΅ΡΡ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ Π½ΡΠΆΠ½ΠΎ, ΡΠΎ Π²ΡΠ΅ΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ Π²Ρ Π·Π½Π°ΠΊΠΎΠΌΡ Π΅ΡΡ ΠΈΠ· ΡΡΠΎΠΊΠΎΠ² CSS. ΠΠ΄Π½Π°ΠΊΠΎ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ΅ΠΊΡΡΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ»ΡΡ, ΠΈ Π² ΡΠ΅Π»ΠΎΠΌ ΡΠ°ΠΏΠΊΠ° ΡΠ΅ΠΏΠ΅ΡΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π΄Π°ΠΆΠ΅ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ Π½Π° PSD-ΠΌΠ°ΠΊΠ΅ΡΠ΅.
ΠΠ΅ΡΡΡΠ°Π΅ΠΌ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΡΠ°ΡΡΡ ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠ°Π»Π΅Π΅ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ ΡΠ°ΠΌΡΠΉ Π±ΠΎΠ»ΡΡΠΎΠΉ Π±Π»ΠΎΠΊ, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠ½ Π²Π΅ΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ. ΠΠ½ Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ 500px ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π² ΠΏΡΠ°Π²ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠ°ΠΉΡΠ°. Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², Π°Π±Π·Π°ΡΠ΅Π² ΠΈ ΡΡΡΠ»ΠΎΠΊ (ΠΎΠ±ΠΎ Π²ΡΠ΅Ρ ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ ΠΌΡ ΡΠΆΠ΅ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ Π² ΡΡΠ°ΡΡΡΡ ΠΏΠΎ CSS).
#right { float: right; width: 500px; padding-right: 10px; } #right h5 { margin: 0; padding: 0px; font-size: 12px; color: #D72020; } #right a { color: #D72020; text-decoration: none; } #right p { margin: 0; padding: 0; padding-bottom: 10px; } #right h3 { margin: 0; padding: 0; padding-top: 10px; color: #D72020; }
Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°, Π²ΠΈΠ΄ΠΈΠΌΡΡ
ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π½Π°Π±Π»ΡΠ΄Π°ΡΡΡΡ Π½Π΅ Π±ΡΠ΄Π΅Ρ Π΄ΠΎ ΡΠ΅Ρ
ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΠΌΡ Π½Π΅ Π½Π°ΠΏΠΎΠ»Π½ΠΈΠΌ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ β Π²ΡΡΠΎΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ.
ΠΠ°ΠΏΠΎΠ»Π½ΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ right. ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠΌΠ΅ΡΡΠΈΠΌ Π² ΠΏΡΠΎΡΡΡΡ ΡΠ°Π±Π»ΠΈΡΡ.
<h3>ΠΠ°Π»Π΅ΡΠ΅Ρ</h3><br /> <h3>ΠΡΡ Π½ΠΈ</h3><br /> <table cellspacing = 40> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> <tr> <td><img src="images/1mini.jpg" alt = "1"></td> <td><img src="images/2mini.jpg" alt = "2"></td> </tr> </table>
ΠΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠΎΠ»ΡΡΠΈΠ» ΡΠ°Π·ΠΌΠ΅ΡΠΊΡ, Π½ΠΎ Π΅ΠΌΡ ΡΠ²Π½ΠΎ Π½Π΅ Ρ Π²Π°ΡΠ°Π΅Ρ Π±Π΅Π»ΠΎΠ³ΠΎ ΡΠΎΠ½Π°, ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΠΎ ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΡΠ²ΠΈΡΡΡ Π΅ΡΡ Π½Π΅ ΡΠΊΠΎΡΠΎ.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ
ΠΠΎ Π²ΡΠ΅ΠΌΡ Π²ΡΡΡΡΠΊΠΈ, Π½ΠΎ ΡΠΆΠ΅ ΠΏΠΎΡΠ»Π΅ ΠΎΡΡΠΈΡΠΎΠ²ΠΊΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ°, Π²ΡΡΡΠ½ΠΈΠ»ΠΎΡΡ, ΡΡΠΎ Π±ΠΎΠΊΠΎΠ²ΠΎΠ΅ ΠΌΠ΅Π½Ρ Π΅ΡΡ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΡ, ΠΏΡΠΈΡΡΠΌ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠΎΡΠ²Π»ΡΡΡΡΡ ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° Π³Π»Π°Π²Π½ΡΠΉ ΠΏΡΠ½ΠΊΡ ΠΈ ΠΈΡΡΠ΅Π·Π°ΡΡ, ΠΊΠΎΠ³Π΄Π° ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ Π½Π° Π½ΡΠΌ Π½Π΅Ρ.
Π‘ΠΈΡΡΠ°ΡΠΈΠΈ, ΠΊΠΎΠ³Π΄Π° ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π΄ΠΎΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Β«Π½Π° Ρ ΠΎΠ΄ΡΒ», Π²ΡΡΡΠ΅ΡΠ°ΡΡΡΡ Π΄ΠΎΠ²ΠΎΠ»ΡΠ½ΠΎ ΡΠ°ΡΡΠΎ. Π Π°ΡΡΡΠΎΡΠ½ΠΈΠ΅ ΠΌΠ΅ΠΆΠ΄Ρ ΠΌΠ΅Π½Ρ ΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΏΠΎΠ΄ΠΏΡΠ½ΠΊΡΡ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ΅Π½ ΡΠΎΠΊΡΡ Ρ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΠ΅ΠΌ ΠΈ ΠΏΠΎΡΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ΄ΠΌΠ΅Π½Ρ.
Π ΡΠ°ΠΉΠ» CSS Π²ΠΏΠΈΡΠΈΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄.
#left { padding: 10px; width: 237px; padding-right: 1em; } #left h4 { width: 225px; height: 25px; font-size: 14px; font-weight: bold; padding-left: 15px; padding-top: 15px; text-transform: uppercase; color: #ffffff; background: url(images/title.gif) no-repeat } #left ul { margin: 0; padding: 10px; list-style: none; width: 100px; font-size: 18px; } #left li ul { position: absolute; left: 90px; top: 0; display: none; } #left ul li { position: relative; margin-bottom:20px; } #left ul li a { display: block; text-decoration: none; color: #ffffcc; background: #ff9900; padding: 5px; border: 1px solid gold; border-bottom: 0; } #left li:hover ul { display: block; } #left li li { margin-bottom:0px; width: 150px; } #left p { padding: 10px; border-bottom: 1px solid #D72020; border-left: 1px solid #D72020; border-right: 1px solid #D72020; }
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΊΠ»Π°ΡΡΠΎΠ² ul ΠΈ li β ΡΠ΅ΠΊΡΠ΅Ρ ΠΈΡΡΠ΅Π·Π½ΠΎΠ²Π΅Π½ΠΈΡ ΠΌΠ΅Π½Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΡΠ°ΠΌ, ΡΠ°ΡΠΊΡΠΎΠΉΡΠ΅ Π΅Π³ΠΎ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ.
Π ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ left HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ° Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΡΠ½Π°ΡΠ°Π»Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΡΠΉ Π±Π»ΠΎΠΊ Π±Π΅Π· ΠΌΠ΅Π½Ρ.
<h4>ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ</h4> <p>ΠΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΠΌ ΠΠ°ΠΌ ΠΏΡΠ°Π·Π΄Π½ΠΈΡΠ½ΡΠ΅ ΡΠΊΠΈΠ΄ΠΊΠΈ. <a href="http://test1.ru/news.php">ΠΠ°Π»Π΅Π΅...</a></p><br /> <h4>ΠΠ΅Π½Ρ</h4>
ΠΠ΅Π»ΡΠΉ ΡΠΎΠ½ ΡΠ°ΡΠΏΡΠΎΡΡΡΠ°Π½ΠΈΠ»ΡΡ Π΅ΡΡ Π½ΠΈΠΆΠ΅ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ ΡΠ°ΠΌΠΎΠ΅ Π²ΡΠ΅ΠΌΡ Π²ΡΡΠ°Π²ΠΈΡΡ Π² HTML-ΡΠ°ΠΉΠ» ΠΊΠΎΠ΄ ΠΌΠ΅Π½Ρ Π»Π΅Π²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. ΠΠ½ΠΎ, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ Π²Π΅ΡΡ Π½Π΅ΠΉ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ ΡΠΏΠΈΡΠΊΠ°ΠΌΠΈ, ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ Π΅ΡΡ ΠΈΠ· CSS-ΠΏΡΠ°Π²ΠΈΠ».
<ul> <li><a href="#">ΠΠ°Π»Π΅ΡΠ΅Ρ</a> <ul> <li><a href="#">ΠΡΡ Π½ΠΈ</a></li> <li><a href="#">ΠΡΠΎΠ²Π°ΡΠΈ</a></li> <li><a href="#">Π‘ΡΠ΅Π½ΠΊΠΈ</a></li> <li><a href="#">ΠΡΠΈΡ ΠΎΠΆΠΈΠ΅</a></li> <li><a href="#">Π¨ΠΊΠ°ΡΡ-ΠΊΡΠΏΠ΅</a></li> <li><a href="#">ΠΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΡΠ΅ ΡΡΠΎΠ»Ρ</a></li> </ul> </li> <li><a href="#">ΠΠΎΠ³ΠΎΠ²ΠΎΡ</a></li> <li><a href="#">ΠΡΠ°ΠΉΡ</a> <ul> <li><a href="#">ΠΡΡ Π½ΠΈ</a></li> <li><a href="#">ΠΡΠΎΠ²Π°ΡΠΈ</a></li> <li><a href="#">Π‘ΡΠ΅Π½ΠΊΠΈ</a></li> <li><a href="#">ΠΡΠΈΡ ΠΎΠΆΠΈΠ΅</a></li> <li><a href="#">Π¨ΠΊΠ°ΡΡ-ΠΊΡΠΏΠ΅</a></li> <li><a href="#">ΠΠΎΠΌΠΏΡΡΡΠ΅ΡΠ½ΡΠ΅ ΡΡΠΎΠ»Ρ</a></li> </ul> </li> <li><a href="#">ΠΠ±ΡΠ°Π·ΡΡ</a> <ul> <li><a href="#">Π‘ΡΠ΅ΠΊΠ»ΠΎ</a></li> <li><a href="#">ΠΠ‘Π</a></li> <li><a href="#">Π€ΡΡΠ½ΠΈΡΡΡΠ°</a></li> <li><a href="#">Π Ρ.Π΄.</a></li> </ul> </li> <li><a href="#">ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a> <li><a href="#">ΠΠ°ΠΆΠ½ΠΎ</a> </li> </ul>
ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅, ΠΊΠ°ΠΊ ΡΠΌΠΎΡΡΠΈΡΡΡ ΡΠΏΠΈΡΠΎΠΊ. ΠΠ½ΠΎΠ³ΠΈΠ΅ ΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ΄ΡΠΌΠ°ΡΡ, ΡΡΠΎ ΡΡΠΎ ΡΠ°Π±Π»ΠΈΡΠ°.
ΠΠΎΠ΄ΠΌΠ΅Π½Ρ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ, Π½Π°Π΄ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΠ΄Π²Π΅ΡΡΠΈ ΠΌΡΡΠΊΡ ΠΊ ΠΏΡΠ½ΠΊΡΡ, Π΅Π³ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠ΅ΠΌΡ (Ρ Π½Π°Ρ ΡΡΠΎ ΠΠ°Π»Π΅ΡΠ΅Ρ, ΠΡΠ°ΠΉΡ ΠΈ ΠΠ±ΡΠ°Π·ΡΡ).
ΠΠ΅Π»Π°Π΅ΠΌ Π½ΠΎΠ³ΠΈ
ΠΠ°Π²Π΅ΡΡΠ°ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΡΠ°Π±Π»ΠΎΠ½Π° β ΡΡΡΠ΅Ρ. ΠΡΠΎΡΡΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅, ΠΈΠ· ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠΎΠ»ΡΠΊΠΎ Π°Π±Π·Π°ΡΡ ΠΈ ΡΡΡΠ»ΠΊΠΈ.
#footer { height: 44px; clear: both; padding-top: 20px; background: url(images/footer.gif) repeat-x; border-top: 5px solid #A6640E; } #footer p { margin: 0; font-size: 10px; text-align: center; color: #ffffff; } #footer a { color: #ffffff; }
ΠΠ±ΡΡΠ½ΠΎ Π² ΡΡΡΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°ΡΠ΅Π»ΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π΅Ρ Π² HTML-ΠΊΠΎΠ΄ (ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ footer).
<p>Copyright Β© 2016. <a href="http://test1.ru/" title="ΠΠ΄ΡΠ΅Ρ ΡΠ°ΠΉΡΠ°">ΠΠ΄ΡΠ΅Ρ ΡΠ°ΠΉΡΠ°</a> | <a href="#">Π‘Π»ΠΎΠ³Π°Π½ ΡΠ°ΠΉΡΠ°</a></p> <p>+7-(777)-777-77-77 | <a href="#">ΠΠΎΡΠΊΠ²Π°</a></p>
ΠΠ° ΡΡΠΎΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° Π·Π°Π²Π΅ΡΡΠ΅Π½ΠΎ. Π ΡΠ΅Π·ΡΠ»ΡΡΠ°ΡΠ΅ ΠΌΡ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π·Π°ΠΊΠΎΠ½ΡΠ΅Π½Π½ΡΠΉ, Π³ΠΎΡΠΎΠ²ΡΠΉ ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ°Π±Π»ΠΎΠ½, ΡΠ°ΡΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ½Π΅ΡΡΠΈ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ PHP-ΡΠ°ΠΉΠ»Ρ, ΡΠ΄Π΅Π»Π°Π² ΠΈΠ· ΡΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΡΡ.
ΠΠΎΠ»ΡΡΠΈΠ²ΡΠΈΠΉΡΡ ΠΊΠΎΠ΄ Π·Π΄Π΅ΡΡ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΡΡ Π½Π΅ Π±ΡΠ΄Ρ β Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°ΡΠ°ΡΡ Π²Π΅ΡΡ ΡΠ°Π±Π»ΠΎΠ½.
ΠΠΎΠ»Π΅Π·Π½ΡΠ΅ ΡΡΡΠ»ΠΊΠΈ:
ΠΡΠ½ΠΎΠ²Ρ CSS ΠΈ HTML. ΠΠ»ΠΎΡΠ½Π°Ρ Π²Π΅ΡΡΡΠΊΠ°
ΠΡΠΎΡ ΡΡΠΎΠΊ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΡΠ΅ΠΌ, ΠΊΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΠΎΡΠ²Π°ΠΈΠ²Π°ΡΡ ΠΏΡΠ΅ΠΌΡΠ΄ΡΠΎΡΡΠΈ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ². Π Π½Π΅ΠΌ Π΄Π°Π½Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΠΏΠΎΠ½ΡΡΠΈΡ ΠΎ HTML ΠΈ CSS. ΠΠΎΡΠ°Π³ΠΎΠ²ΠΎ Π²ΡΠΏΠΎΠ»Π½ΡΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΡΠΎΠΊΠ°, Π²Ρ ΡΠΆΠ΅ ΡΠ΅ΡΠ΅Π· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΠΌΠΈΠ½ΡΡ ΡΠ²Π΅ΡΡΡΠ°Π΅ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½ Π΄Π»Ρ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°.
Π¨Π°Π±Π»ΠΎΠ½ Π²Π΅Π±ΡΠ°ΠΉΡΠ° ΠΌΡ Π±ΡΠ΄Π΅ΠΌ Π΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠ΅Π³ β Β«DIVΒ».
Π¨Π°Π³ 1 β Π Π°Π·ΠΌΠ΅ΡΠΊΠ° Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³ΠΎΠ² HTML
ΠΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠΈΡΡ Π½Π°ΡΡ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ HTML ΡΠ΅Π³ΠΈ. Π’ΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΡΡ ΠΊ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Ρ CSS.
HTML β ΡΡΠΎ ΡΠ·ΡΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ Π³ΠΈΠΏΠ΅ΡΡΠ΅ΠΊΡΡΠ°. Π‘ Π΅Π³ΠΎ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΡΡΡΠΊΡΡΡΠ° Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»Ρ ΡΡΠΈΡ ΡΠ΅Π»Π΅ΠΉ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ΅Π³ΠΈ HTML. ΠΠ½ΠΈ Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² ΡΠΊΠΎΠ±ΠΊΠΈ Β«<Β» ΠΈ Β«>Β».
Π’Π΅Π³ΠΈ, ΠΊΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ ΡΠ»Π΅Π΄ΡΡΡ Π² ΠΏΠ°ΡΠ΅ β ΠΎΡΠΊΡΡΠ²Π°ΡΡΠΈΠΉ ΠΈ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠΉ. ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΡΠ΅ΠΌ, ΡΡΠΎ ΠΈΠΌΠ΅Π΅Ρ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ²ΠΎΠΉ ΡΠΊΠΎΠ±ΠΊΠΈ Π·Π½Π°ΠΊ Β«/Β». (ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ: <div></div>). Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³ΠΎΠ² Π²Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΠ΅, ΡΡΠΎ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π½Π° Π²Π°ΡΠ΅ΠΉ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΠ΅.
ΠΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ CSS ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΠΏΠΎΠ·ΠΆΠ΅. ΠΠ½ΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ΅Π³ΠΎΠ² Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΡ ΠΌΠ΅ΡΡΠ°Ρ ΡΡΡΠ°Π½ΠΈΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠΌΡ ΠΆΠ΅Π»Π°Π΅ΠΌΡΠΉ Π²ΠΈΠ΄.
ΠΡΠΎΡΡΠ΅ΠΉΡΠΈΠ΅ ΡΠ΅Π³ΠΈ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ ΡΡΠΎ:
Β
<html>
<head>
Β
<title></title>
Β
</head>
Β
<body>
Β
</body>
</html>
Β
Β
ΠΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΈ, ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³Π°ΠΌΠΈ <body> Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΠ΅Π³ΠΈ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ.Β ΠΠ°ΠΆΠ½ΡΠΌ ΡΠ΅Π³ΠΎΠΌ Π΄Π»Ρ ΡΡΡΡΠΊΡΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ΅Π³ <div>. ΠΡΠΏΠΎΠ»ΡΠ·ΡΡ Π΅Π³ΠΎ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄Π΅Π»ΠΈΡΡ ΡΠ²ΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π±Π»ΠΎΠΊΠΈ.
ΠΠ½ΡΡΡΠΈ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ΅Π³Π° Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π΄ΡΡΠ³ΠΈΠ΅ HTML ΡΠ΅Π³ΠΈ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²Π°ΠΌ ΠΏΠΎΡΡΠ΅Π±ΡΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²Π°ΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ° (ΡΡΡΠ»ΠΊΠΈ, ΡΠ΅ΠΊΡΡ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΡΠ΄.). ΠΡΠ΅ ΡΡΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΈ ΠΎΠ±ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉ ΡΡΠΈΠ»Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΡ ΡΠ°Π±Π»ΠΈΡ ΡΡΠΈΠ»Ρ CSS.
Π’Π΅ΠΏΠ΅ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ (Photoshop Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ) Π½Π°ΡΠΈΡΡΠ΅ΠΌ Π±Π»ΠΎΠΊΠΈ Π½Π°ΡΠ΅ΠΉ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ:
ΠΠΎΠ΄ HTML ΡΡΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅. ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅Π³Π° div:
Β
<html>
<head>
Β
<title></title>
Β
</head>
Β
<body>
Β
<div id=Β»containerΒ»>
<div id=Β»headerΒ»>
Β
</div>
Β
<div id=Β»navigationΒ»>
Β
</div>
Β
<div id=Β»menuΒ»>
Β
</div>
Β
<div id=Β»contentΒ»>
Β
</div>
Β
<div id=Β»footerΒ»>
Β
</div>
</div>
Β
</body>
</html>
Β
ΠΠ°ΠΊ Π²ΠΈΠ΄ΠΈΡΠ΅, ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΡΠ΅Π³Ρ div ΠΌΡ Π΄Π°Π»ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠΉ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ID. Π’ΠΎ Π΅ΡΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΌΡ Π±Π»ΠΎΠΊΡ Π½Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ ΠΌΡ Π΄Π°Π»ΠΈ ΡΠ²ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅. ΠΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΏΠΎΠ·ΠΆΠ΅, Π·Π°Π΄Π°Π²Π°Ρ ΡΡΠΈΠ»Ρ Π±Π»ΠΎΠΊΠ°ΠΌ Π² ΡΠ°ΠΉΠ»Π΅ CSS, ΠΌΡ ΠΌΠΎΠ³Π»ΠΈ ΠΎΡΠ»ΠΈΡΠ°ΡΡ ΠΎΠ΄ΠΈΠ½ Π±Π»ΠΎΠΊ ΠΎΡ Π΄ΡΡΠ³ΠΎΠ³ΠΎ.
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° Π²ΠΈΠ΄Π° ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ². ID β ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ Π±Π»ΠΎΠΊΠΎΠ², ΡΠ°ΠΊΠΈΡ , ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π½ΠΈΠ³Π΄Π΅ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ Π½Π΅ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ. Π ΡΠΎ Π²ΡΠ΅ΠΌΡ ΠΊΠ°ΠΊ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ CLASS β ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΠΈΡ ΡΡ Π±Π»ΠΎΠΊΠΎΠ².
Π’Π°ΠΊΠΆΠ΅, ΠΌΡ Π·Π°ΠΊΠ»ΡΡΠΈΠ»ΠΈ Π²ΡΠ΅ Π±Π»ΠΎΠΊΠΈ Π²Π½ΡΡΡΡ Π±Π»ΠΎΠΊΠ° Β«containerΒ«. ΠΡΠΎ ΡΠ΄Π΅Π»Π°Π½ΠΎ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π²ΠΏΠΎΡΠ»Π΅Π΄ΡΡΠ²ΠΈΠΈ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π½Π°ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ΅Π»ΠΈΠΊΠΎΠΌ ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΌΡ Ρ ΠΎΡΠΈΠΌ.
Π¨Π°Π³ 2 β ΠΏΡΠΈΠΊΡΠ΅ΠΏΠ»Π΅Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ CSS
ΠΠ°ΠΊ ΡΠΆΠ΅ Π±ΡΠ»ΠΎ ΡΠΊΠ°Π·Π°Π½ΠΎ, CSS ΡΠ°Π±Π»ΠΈΡΠ° ΡΡΠΈΠ»Π΅ΠΉ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π΅Π΅ ΠΊΠ°ΠΊ Π²Π½ΡΡΡΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ html Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΡΠ°ΠΊ ΠΈ ΠΏΡΠΈΠΊΡΠ΅ΠΏΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΡΠ°ΠΉΠ». Π ΡΡΠΎΠΌ ΡΡΠΎΠΊΠ΅ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ Π²Π°ΡΠΈΠ°Π½Ρ.
ΠΡΠ»ΠΈ Π²Ρ ΡΠΆΠ΅ ΠΎΡΠΊΡΡΠ»ΠΈ ΡΠ²ΠΎΡ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΠΎ Π½ΠΈΡΠ΅Π³ΠΎ ΡΠ°ΠΌ Π½Π΅ ΠΎΠ±Π½Π°ΡΡΠΆΠΈΠ»ΠΈ. ΠΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π²Ρ Π½Π΅ Π½Π°ΠΏΠΎΠ»Π½ΠΈΠ»ΠΈ ΡΠ²ΠΎΠΈ Π±Π»ΠΎΠΊΠΈ Π½ΠΈ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ, Π½ΠΈ ΠΏΡΠΈΠ΄Π°Π»ΠΈ ΠΈΠΌ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠΎΡΠΌΡ ΠΈ ΡΠ²Π΅ΡΠ°. ΠΠΎΠ½ΡΠ΅Π½Ρ Π΄Π»Ρ Π±Π»ΠΎΠΊΠΎΠ² Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΌΠΈ ΡΠ΅Π³Π°ΠΌΠΈ. Π Π²ΠΎΡ ΡΠΎΡΠΌΡ, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ²Π΅Ρ ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΏΡΠΎΡΠ²Π»Π΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ² ΠΌΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΠΉΠ»Π° CSS.
ΠΠΎ Π΄Π»Ρ Π½Π°ΡΠ°Π»Π° Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠΎΠ·Π΄Π°ΡΡ Π΅Π³ΠΎ. ΠΠ°Π·ΠΎΠ²Π΅ΠΌ Π΅Π³ΠΎ style.css ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠΌ Π² ΡΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, ΡΡΠΎ ΠΈ Π΄ΠΎΠΊΡΠΌΠ΅Π½Ρ html. ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ Π² html ΡΠ°ΠΉΠ»Π΅, ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³Π°ΠΌΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΡΡ ΡΡΡΠΎΡΠΊΡ:
Β
<link rel=Β»stylesheetΒ» type=Β»text/cssΒ» href=Β»style.cssΒ» />
Β
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΌΡ ΡΠ²ΡΠ·ΡΠ²Π°Π΅ΠΌ ΡΡΠΈ Π΄Π²Π° ΡΠ°ΠΉΠ»Π° Π²ΠΌΠ΅ΡΡΠ΅. Π’Π΅ΠΏΠ΅ΡΡ ΠΏΡΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ Π±ΡΠ°ΡΠ·Π΅Ρ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ.
Π¨Π°Π³ 3 β Π·Π°Π΄Π°Π΅ΠΌ ΡΡΠΈΠ»Ρ
Π‘ΠΈΠ½ΡΠ°ΠΊΡΠΈΡ CSS ΡΠΎΡΡΠΎΠΈΡ ΠΈΠ· ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°, ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ β ΡΡΠΎ ΡΠ΅Π³, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΠΏΡΠΈΠ΄Π°Π²Π°Ρ Π΅ΠΌΡ ΡΠ°Π·Π½ΠΎΠΎΠ±ΡΠ°Π·Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ Π·Π°Π΄Π°Π΅ΡΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ Π°ΡΡΠΈΠ±ΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ ΠΌΠΎΠ³ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΡΠ°Π·Π½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ.
ΠΠ»Ρ Π·Π°ΠΏΠΈΡΠΈ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠΎΠ², ΠΊΡΠΎΠΌΠ΅ ΡΠ΅Π³Π° body, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π·Π½Π°ΠΊΠΈ Β«#Β» Π»ΠΈΠ±ΠΎ Β«.Β«. ΠΎΠ½ΠΈ ΡΠ»Π΅Π΄ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄ ΠΈΠΌΠ΅Π½Π΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°. ΠΠ΅ΡΠ²ΡΠΉ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ, ΡΡΠΎΠ±Ρ ΡΠΊΠ°Π·Π°ΡΡ Π½Π° ΡΠ΅Π»Π΅ΠΊΡΠΎΡ ID, Π²ΡΠΎΡΠΎΠΉ, ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ Π½Π° ΡΠ΅Π»ΠΊΡΠΎΡ CLASS. Π‘Π΅Π»Π΅ΠΊΡΠΎΡ ΠΌΠΎΠΆΠ΅Ρ ΠΈΠΌΠ΅ΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΡΠ²ΠΎΠΉΡΡΠ². ΠΠΎΡΠΎΡΡΠ΅ Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² ΡΠΈΠ³ΡΡΠ½ΡΠ΅ ΡΠΊΠΎΠ±ΠΊΠΈ Β«{}Β«.
Β
#selector {
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β property:value;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β property:value;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β property:value;
Β
Β Β Β Β Β Β Β Β Β Β Β }
Β
Π»ΠΈΠ±ΠΎ
Β
.selector {
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β property:value;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β property:value;
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β property:value;
Β
Β Β Β Β Β Β Β Β Β Β Β }
Β
Β
Π£ Π½Π°Ρ ΠΈΠΌΠ΅ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΡ:
body
container
header
navigation
menu
content
footer
Β
Π‘Π²ΠΎΠΉΡΡΠ²Π° ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ CSS:
Β
Π€ΠΎΠ½ (background) ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π·Π°Π΄Π°Π½ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ»ΠΈ ΡΠ²Π΅ΡΠΎΠΌ, Π»ΠΈΠ±ΠΎ ΠΈ ΡΠ΅ΠΌ ΠΈ Π΄ΡΡΠ³ΠΈΠΌ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ. Π§ΡΠΎΠ±Ρ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΠ»ΠΎΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΡΡΡ ΠΊ Π½Π΅ΠΌΡ. ΠΡΠ»ΠΈ ΡΠΎΠ½ Π·Π°Π΄Π°Π½ ΡΠ²Π΅ΡΠΎΠΌ, ΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅ΡΡΠ½Π°Π΄ΡΠ°ΡΠ΅ΡΠΈΡΠ½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° (#ffffff Π΄Π»Ρ Π±Π΅Π»ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° ΠΈ ΡΠ΄.).
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ color ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ²Π΅ΡΠ° ΡΠ΅ΠΊΡΡΠ°.
font-family
β ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΠ΅ΠΌΠ΅ΠΉΡΡΠ²ΠΎ ΡΡΠΈΡΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠΌΠΈ Π±ΡΠ΄Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΡΠ΅ΠΊΡΡ. ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ Π·Π°Π΄Π°Π΅ΡΡΡ ΡΡΠ°Π·Ρ ΡΡΠΈ ΡΠΈΠΏΠ° ΡΡΠΈΡΡΠΎΠ². ΠΠΎΡΡΠΎΠΌΡ, Π΅ΡΠ»ΠΈ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ ΡΠΌΠΎΠ³ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡ ΠΏΠ΅ΡΠ²ΡΠΉ, Π΅ΠΌΡ Π΅ΡΡΡ ΠΈΠ· ΡΠ΅Π³ΠΎ Π²ΡΠ±ΠΈΡΠ°ΡΡ (Trebuchet MS, Arial, Times New Roman).
font-size β ΡΠ°Π·ΠΌΠ΅Ρ ΡΠ΅ΠΊΡΡΠ°, Π·Π°Π΄Π°Π΅ΡΡΡ Π² ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΈΡΡΠ΅ΠΌΠ°Ρ ΠΈΠ·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ, Π·Π΄Π΅ΡΡ ΠΌΡ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ.
Β
margin β ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠ°. ΠΠ° ΡΠΎΡΠΊΡ ΠΎΡΡΡΠ΅ΡΠ° ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΡΡΡΠΏΠ°ΡΡ ΠΊΠ°ΠΊ ΠΎΠΊΠ½ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠ°ΠΊ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ Π΄ΡΡΠ³ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ Ρ ΠΎΡΠΈΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ²ΠΎΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΠΎΡΡΠ΅Π΄ΠΈΠ½Π΅ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΠΎ Π·Π°ΠΏΠΈΡΠ΅ΠΌ ΡΠ°ΠΊΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄Π»Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°: 0px auto 0px auto. ΠΠ°ΠΏΠΈΡΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΡΠΎΡΠ΅ 0px auto. ΠΡΡΡΠ΅Ρ Π² ΡΠ»ΡΡΠ°Π΅ Π·Π°Π΄Π°Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΠΉ ΠΈΠ΄Π΅Ρ ΠΏΠΎ ΡΠ°ΡΠΎΠ²ΠΎΠΉ ΡΡΡΠ΅Π»ΠΊΠ΅: Π²Π΅ΡΡ β ΠΏΡΠ°Π²ΠΎ- Π½ΠΈΠ· β Π»Π΅Π²ΠΎ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π²Π΅ΡΡ β Π½ΠΈΠ·, ΠΏΡΠ°Π²ΠΎ β Π»Π΅Π²ΠΎ Ρ Π½Π°Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π°ΡΡ, ΡΠΎ Π΄ΡΠ±Π»ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΡ Π½Π΅Ρ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΠΈ.
Β
width β ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ°.
Β
height β Π²ΡΡΠΎΡΠ°.
Β
float β ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π°ΠΌ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°, Π³Π»Π°Π²Π½ΡΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΠΏΠΎ Π»Π΅Π²ΡΡ ΠΈΠ»ΠΈ ΠΏΠΎ ΠΏΡΠ°Π²ΡΡ ΡΡΠΎΡΠΎΠ½Ρ.
Β
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠΎΠ΄ Π² Π½Π°Ρ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ style.css (Π²Π΅Π΄Ρ Π²Ρ Π΅Π³ΠΎ ΡΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π»ΠΈ, Π΄Π°?):
body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}
#header {
background: #838283;
height: 200px;
width: 900px;
}
#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}
#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}
#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}
#footer {
background: #838283;
height: 180px;
width: 900px;
}
Β
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅
ΠΠ° ΠΌΠΎΠΌΠ΅Π½Ρ Π½Π°ΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΠ°ΡΡΠΈ Π½Π΅ Π²ΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π»ΠΈ ΡΠΎΠ·Π΄Π°Π½Π½ΡΡ Π²Π΅Π± ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»Ρ ΡΡΡΡΠ°Π½Π΅Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΡΠ°Π·Ρ Π·Π° Π±Π»ΠΎΠΊΠΎΠΌ content.
ΠΠΎΡ Π΅Π³ΠΎ ΠΊΠΎΠ΄ HTML:
Β
<div id=Β»clearΒ»>
</div>
Β
Π CSS:
Β
#clear {
clear:both;
}
Β
Π ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³Π°ΠΌΠΈ head Π·Π°ΠΏΠΈΡΠ°ΡΡ, ΠΊΠ°ΠΊΡΡ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ, Π΅ΡΠ»ΠΈ Π²Ρ Π²Π΄ΡΡΠ³ ΠΏΠΎΠΏΡΠΎΠ±ΡΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΡΡΡΠΊΠΈΠΉ ΡΠ΅ΠΊΡΡ Π² ΡΠ²ΠΎΠΈ Π±Π»ΠΎΠΊΠΈ:
Β
<meta http-equiv=Β»Content-TypeΒ» content=Β»text/html; charset=utf-8β³ />
Β
Π€ΠΈΠ½Π°Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ HTML:
Β
<html>
<head>
<meta http-equiv=Β»Content-TypeΒ» content=Β»text/html; charset=utf-8β³ />
Β Β Β Β Β Β Β Β Β Β Β <title>ΠΡΠ½ΠΎΠ²Ρ HTML ΠΈ CSS</title>
<link rel=Β»stylesheetΒ» type=Β»text/cssΒ» href=Β»style.cssΒ» />
</head>
Β
<body>
Β
Β Β Β Β Β Β Β Β Β Β Β <div id=Β»containerΒ»>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <div id=Β»headerΒ»>Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </div>
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <div id=Β»navigationΒ»>ΠΠ»ΠΎΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </div>
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <div id=Β»menuΒ»>ΠΠ΅Π½Ρ
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </div>
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <div id=Β»contentΒ»>ΠΠΎΠ½ΡΠ΅Π½Ρ
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </div>
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <div id=Β»clearΒ»>
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </div>
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β <div id=Β»footerΒ»>ΠΠΎΠ΄Π²Π°Π» ΡΠ°ΠΉΡΠ°
Β
Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β Β </div>
Β Β Β Β Β Β Β Β Β Β Β </div>
Β
</body>
</html>
Β
Β
CSS:
Β
body {
Β Β Β Β Β Β Β Β Β Β Β background: #f3f2f3;
Β Β Β Β Β Β Β Β Β Β Β color: #000000;
Β Β Β Β Β Β Β Β Β Β Β font-family: Trebuchet MS, Arial, Times New Roman;
Β Β Β Β Β Β Β Β Β Β Β font-size: 12px;
}
Β
#container {
Β Β Β Β Β Β Β Β Β Β Β background: #FFFFFF;
Β Β Β Β Β Β Β Β Β Β Β margin: 30px auto;
Β Β Β Β Β Β Β Β Β Β Β width: 900px;
Β Β Β Β Β Β Β Β Β Β Β height: 1000px;
}
Β
#header {
Β Β Β Β Β Β Β Β Β Β Β background: #838283;
Β Β Β Β Β Β Β Β Β Β Β height: 200px;
Β Β Β Β Β Β Β Β Β Β Β width: 900px;
}
Β
#navigation {
Β Β Β Β Β Β Β Β Β Β Β background: #a2a2a2;
Β Β Β Β Β Β Β Β Β Β Β width: 900px;
Β Β Β Β Β Β Β Β Β Β Β height: 20px;
}
Β
#menu {
Β Β Β Β Β Β Β Β Β Β Β background: #333333;
Β Β Β Β Β Β Β Β Β Β Β float: left;
Β Β Β Β Β Β Β Β Β Β Β width: 200px;
Β Β Β Β Β Β Β Β Β Β Β height: 600px;
}
Β
#content {
Β Β Β Β Β Β Β Β Β Β Β background: #d2d0d2;
Β Β Β Β Β Β Β Β Β Β Β float: right;
Β
Β Β Β Β Β Β Β Β Β Β Β width: 700px;
Β Β Β Β Β Β Β Β Β Β Β height: 600px;
}
Β
#clear {
Β Β Β Β Β Β Β Β Β Β Β clear:both;
}
Β
#footer {
Β Β Β Β Β Β Β Β Β Β Β background: #838283;
Β Β Β Β Β Β Β Β Β Β Β height: 180px;
Β Β Β Β Β Β Β Β Β Β Β width: 900px;
}
Β
ΠΠ°Π΄Π΅Π΅ΠΌΡΡ, Π΄Π°Π½Π½ΡΠΉ ΡΡΠΎΠΊ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ» Π²Π°ΠΌ ΠΏΠΎΠ½ΡΡΡ ΠΎΡΠ½ΠΎΠ²Ρ ΡΠ°Π±ΠΎΡΡ Ρ HTML ΠΈ CSS.
ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅:
Β
ΠΠ»ΠΎΡΠ½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠ° css, ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΈ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½
Π¦Π΅Π»Ρ ΡΡΠΎΠΊΠ°: ΠΠ½Π°ΠΊΠΎΠΌΡΡΠ²ΠΎ Ρ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΎΠΉ CSS. ΠΠΎΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π½Π°Π²ΡΠΊΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ ΡΠ°ΠΉΡΠ°
ΠΠ»ΠΎΡΠ½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠ°
- ΠΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ ΡΠΎ ΡΠ»ΠΎΡΠΌΠΈ ΠΈΠ»ΠΈ, ΠΈΠ½Π°ΡΠ΅ Π³ΠΎΠ²ΠΎΡΡ, Π±Π»ΠΎΠΊΠ°ΠΌΠΈ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌΠΈ
div
, ΠΎΡΠ½ΠΎΠ²Π½Π°Ρ Π½Π°Π³ΡΡΠ·ΠΊΠ° Π»ΠΎΠΆΠΈΡΡΡ Π½Π° CSS, Ρ.ΠΊ. Π±Π΅Π· ΡΠ²ΠΎΠΉΡΡΠ² ΡΠ»ΠΎΠΈ ΠΈΠ· ΡΠ΅Π±Ρ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ. - Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΠΊΡΠΎΡΡΠ±ΡΠ°ΡΠ·Π΅ΡΠ½ΠΎΡΡΡΡ ΠΏΡΠΈ ΡΠ°Π±ΠΎΡΠ΅ Ρ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. Π’.Π΅. ΠΎΠ΄Π½ΠΈ ΠΈ ΡΠ΅ ΠΆΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π°ΡΡ ΡΠ°Π·Π½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠ»Ρ Π±ΠΎΡΡΠ±Ρ Ρ ΡΠ°ΠΊΠΈΠΌΠΈ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΡΠ°ΠΊ Π½Π°Π·ΡΠ²Π°Π΅ΠΌΡΠ΅ Ρ Π°ΠΊΠΈ. Π₯Π°ΠΊ β ΡΡΠΎ Π½Π°Π±ΠΎΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ², ΠΊΠΎΠ³Π΄Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌ ΠΏΠΎΠ΄Π°Π΅ΡΡΡ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΈΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ, Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΡΡΡ.
ΠΡΠ»ΠΈΡΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ΅ΡΡΡ ΠΎΡ ΡΠ°Π±Π»ΠΈΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ
ΠΠΎΠΏΡΡΡΠΈΠΌ, Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°Π±Π»ΠΎΠ½ ΡΡΡΠ°Π½ΠΈΡΡ Ρ Β«ΡΠ°ΠΏΠΊΠΎΠΉΒ», Β«ΠΏΠΎΠ΄Π²Π°Π»ΠΎΠΌΒ» ΠΈ Π΄Π²ΡΠΌΡ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ.
ΠΡΠ»ΠΈΡΠΈΡ:
- ΠΡΡΠΎΡΠ° ΡΠ»ΠΎΠ΅Π²
div
ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π° Π²ΡΡΠΎΡΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°: - Π ΡΠ»ΡΡΠ°Π΅, ΠΊΠΎΠ³Π΄Π° ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»ΠΎΡ ΠΏΡΠ΅Π²ΡΡΠ°Π΅Ρ Π΅Π³ΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ Π²ΡΡΠΎΡΡ, ΡΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π²Π΅Π΄ΡΡ ΡΠ΅Π±Ρ β ΠΎΠ΄Π½ΠΈ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°ΡΡ Π²ΡΡΠΎΡΡ ΡΠ»ΠΎΡ ΠΏΠΎΠ΄ Π½ΠΎΠ²ΡΠΉ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, Π° Π΄ΡΡΠ³ΠΈΠ΅, ΠΎΡΡΠ°Π²Π»ΡΡ Π²ΡΡΠΎΡΡ ΠΏΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎΠΉ, Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ ΠΏΠΎΠ²Π΅ΡΡ ΡΠ»ΠΎΡ.
Π’Π°Π±Π»ΠΈΡΠ½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° | ΠΠ»ΠΎΡΠ½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° |
---|---|
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΠΈΠ»ΠΈ
ΠΆΠ΅ΡΡΠΊΠ°Ρ Π±Π»ΠΎΡΠ½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° (Π΄Π²Π΅ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ)
- Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»ΠΎΠ΅Π² Π·Π°Π΄Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ° ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ.
- Π’Π°ΠΊ ΠΊΠ°ΠΊ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΠΌ ΡΡΠ΅Π΄ΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ ΡΠ΅ΡΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ° 1024Γ768, ΡΠΎ ΠΆΠ΅Π»Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° Π½Π΅Π³ΠΎ. ΠΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠΎΠ² Π² ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 900β1000 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (Π½Π΅Π±ΠΎΠ»ΡΡΠ°Ρ ΡΠ°ΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π½Π° ΠΏΠΎΠ»ΠΎΡΡ ΠΏΡΠΎΠΊΡΡΡΠΊΠΈ ΠΈ Π³ΡΠ°Π½ΠΈΡΡ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°).
- ΠΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π±Π»ΠΎΠΊ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ, ΡΠΎΠ³Π΄Π° Β«ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΡΠ΅Β» ΠΏΠΎΠ»Ρ ΠΏΠΎ ΠΊΡΠ°ΡΠΌ Π½Π΅ΠΏΠ»ΠΎΡ ΠΎ ΡΠΌΠΎΡΡΡΡΡΡ Π΄Π°ΠΆΠ΅ ΠΏΡΠΈ Π±ΠΎΠ»ΡΡΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°.
Π ΠΈΡ.1. ΠΡΠΈΠΌΠ΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°
ΠΡΠΈΠΌΠ΅Ρ: ΡΠΎΠ·Π΄Π°ΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΉΡΠ° Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ
ΠΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅:
- Β«Π Π°Π·Π±ΠΈΠ²Π°Π΅ΠΌΒ» Π²ΡΠ΅ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Π½Π° Π±Π»ΠΎΠΊΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ:
- Π±Π»ΠΎΠΊ 1 β ΡΠ»ΠΎΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ (
id="shapka"
), - Π±Π»ΠΎΠΊ 2 ΠΈ 3 Π·Π°ΠΊΠ»ΡΡΠ°ΡΡΡΡ Π² Π΅Π΄ΠΈΠ½ΡΠΉ Π±Π»ΠΎΠΊ (
id="container"
), - Π±Π»ΠΎΠΊ 2 β ΡΠ»ΠΎΠΉ Ρ ΠΌΠ΅Π½Ρ (
id="menu"
), - Π±Π»ΠΎΠΊ 3 β ΡΠ»ΠΎΠΉ Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ (
id="content"
), - Π±Π»ΠΎΠΊ 4 β ΡΠ»ΠΎΠΉ Ρ
id="bottom"
.
- Π±Π»ΠΎΠΊ 1 β ΡΠ»ΠΎΠΉ ΠΏΠ΅ΡΠ²ΡΠΉ (
Π‘Ρ
Π΅ΠΌΠ°ΡΠΈΡΠ½ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°Π·ΠΈΠΌ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π»ΠΎΠΊΠΎΠ²:
<body> <div>1</div> <div> <div>2</div> <div>3</div> </div> <div>4</div> </body> |
<body> <div>1</div> <div> <div>2</div> <div>3</div> </div> <div>4</div> </body>
1. ΠΠ°Π΄Π°Π΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° Β«ΡΠ°ΠΏΠΊΠΈΒ» (Π±Π»ΠΎΠΊ 1)
- Π»ΠΈΠ±ΠΎ Π½Π°ΠΏΡΡΠΌΡΡ Π·Π°Π΄Π°Π² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Ρ
height
Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ , ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ ΠΈΠ»ΠΈ Π΄Ρ. Π΅Π΄ΠΈΠ½ΠΈΡΠ°Ρ ; - Π»ΠΈΠ±ΠΎ Π·Π°Π΄Π°ΡΡ Π²ΡΡΠΎΡΡ ΠΏΡΠΈ ΠΏΠΎΠΌΠΎΡΠΈ ΠΎΡΡΡΡΠΏΠ°
Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΠ»ΠΎΡ Β«ΡΠ°ΠΏΠΊΠΈΒ»:
Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
padding-top: 15px; padding-bottom: 15px; |
padding-top: 15px; padding-bottom: 15px;
ΠΠ΅ΡΡ ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ:
#shapka{ text-align: left; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */ width: 750px; /* Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π°*/ background: #900000; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */ height: 50px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */ margin-right: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° */ margin-left: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ } |
#shapka{ text-align: left; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */ width: 750px; /* Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π°*/ background: #900000; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */ height: 50px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */ margin-right: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° */ margin-left: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ }
2. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°
3. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° 2 β ΠΌΠ΅Π½Ρ
4. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° 3 β ΠΊΠΎΠ½ΡΠ΅Π½Ρ
- ΠΠ°Π΄Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΡΠ»ΠΎΡ ΠΈΠ· ΡΠ°ΡΡΠ΅ΡΠ° 770px β 200px = 570px, ΠΠΎ! ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ Π² ΠΎΠ±ΠΎΠΈΡ Π±Π»ΠΎΠΊΠ°Ρ 2 ΠΈ 3, ΡΠΎ ΠΌΡ Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΡΡΠ΅ΡΡΡ Π΅ΡΠ΅ 40 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ: 20 β Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ Π±Π»ΠΎΠΊΠ° Ρ ΠΌΠ΅Π½Ρ ΠΈ 20 β Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ Π±Π»ΠΎΠΊΠ° Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ. ΠΠΎΠ»ΡΡΠΈΠΌ ΡΠΈΡΠΈΠ½Ρ ΡΠ»ΠΎΡ 770px β 200px β 40px = 530px
- ΠΠ°Π΄Π°Π΅ΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅
float: left
, ΠΈΡΠΊΠ»ΡΡΠ°Ρ Π±Π°Π³ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Internet Explorer: Π΅ΡΠ»ΠΈ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΡΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ»ΠΎΡΠΌΠΈ Π±ΡΠ΄Π΅Ρ Π·Π°Π·ΠΎΡ. ΠΡΠΎΠΌΠ΅ ΡΠΎΠ³ΠΎ, Π΅ΡΠ»ΠΈ Π½Π΅ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ, ΡΠΎ Π±Π»ΠΎΠΊ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ Π·Π° Π±Π»ΠΎΠΊΠΎΠΌ ΠΌΠ΅Π½Ρ, ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π»ΠΈΡΡ Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½Ρ (ΡΠ΅ΠΊΡΡ) Π±ΡΠ΄Π΅Ρ ΠΎΠ±ΡΠ΅ΠΊΠ°ΡΡ Π±Π»ΠΎΠΊ ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π°. - ΠΠ°Π΄Π°Π΅ΠΌ ΡΠ²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° (
background
) ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ (padding
)
#content { /* ΠΡΠ°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ width: 550px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ */ float: left; /* ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌ ΡΠ»ΠΎΠ΅ΠΌ */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ background: #e0e0e0; /* Π¦Π²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } |
#content { /* ΠΡΠ°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ width: 550px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ */ float: left; /* ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌ ΡΠ»ΠΎΠ΅ΠΌ */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ background: #e0e0e0; /* Π¦Π²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ }
5. Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° 4 β Β«ΠΏΠΎΠ΄Π²Π°Π»Β»
- Π¨ΠΈΡΠΈΠ½Ρ ΡΠ»ΠΎΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π² 750 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ
- ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° Π½Π°Π΄ΠΎ ΡΠ±ΡΠ°ΡΡ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅, Ρ.Π΅. ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ
clear
- Π£ΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ
padding
- ΠΠ°Π΄Π°Π΅ΠΌ ΡΠ²Π΅Ρ Π΄Π»Ρ ΡΠΎΠ½Π° (
background
) ΠΈ ΡΠ΅ΠΊΡΡΠ° (color
) - Π¦Π΅Π½ΡΡΠΈΡΡΠ΅ΠΌ Π±Π»ΠΎΠΊ (
margin-right
ΠΈmargin-left
)
#bottom{ width:750px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ */ clear:left; /* Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ Π±Π»ΠΎΡΠ½ΠΎΡΡΡ ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ ΡΠ»ΠΎΠΉ ΡΠ»Π΅Π²Π° */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ background:#444; /* ΡΠΎΠ½ */ color:#fff; /* ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */ margin-right: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° */ margin-left: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ } |
#bottom{ width:750px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ */ clear:left; /* Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ Π±Π»ΠΎΡΠ½ΠΎΡΡΡ ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ ΡΠ»ΠΎΠΉ ΡΠ»Π΅Π²Π° */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ background:#444; /* ΡΠΎΠ½ */ color:#fff; /* ΡΠ²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */ margin-right: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° */ margin-left: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ }
ΠΡΠΎΠ³ΠΎΠ²ΡΠΉ ΠΊΠΎΠ΄: Π²ΡΡ Π²ΠΌΠ΅ΡΡΠ΅
/* Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° 1 - ΡΠ°ΠΏΠΊΠ° */ #shapka{ text-align: left; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */ width: 750px; /* Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π°*/ background: #900000; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */ height: 50px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */ margin-right: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° */ margin-left: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ } /* Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */ #container { width: 770px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅ΡΠ°+20px */ margin-right: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° */ margin-left: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ } /* Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° 2 - ΠΌΠ΅Π½Ρ */ #menu { width: 200px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ */ float: left; /* ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌ ΡΠ»ΠΎΠ΅ΠΌ */ color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */ background: #008080; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ } /* Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° 3 - ΠΊΠΎΠ½ΡΠ΅Π½Ρ */ #content { /* ΠΡΠ°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ width: 530px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ */ float: left; /* ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌ ΡΠ»ΠΎΠ΅ΠΌ */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ background: #e0e0e0; /* Π¦Π²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } /* Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° 4 - ΠΏΠΎΠ΄Π²Π°Π» */ #bottom{ width:750px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ */ clear:left; /* Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ Π±Π»ΠΎΡΠ½ΠΎΡΡΡ ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ ΡΠ»ΠΎΠΉ ΡΠ»Π΅Π²Π° */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ background:#444; color:#fff; margin-right: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° */ margin-left: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ } |
/* Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° 1 — ΡΠ°ΠΏΠΊΠ° */ #shapka{ text-align: left; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π²Π½ΡΡΡΠ΅Π½Π½Π΅Π³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ */ width: 750px; /* Π¨ΠΈΡΠΈΠ½Π° Π±Π»ΠΎΠΊΠ° ΠΈ ΠΎΠ±ΡΠ°Ρ ΡΠΈΡΠΈΠ½Π°*/ background: #900000; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */ height: 50px; /* ΠΡΡΠΎΡΠ° Π±Π»ΠΎΠΊΠ° */ margin-right: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° */ margin-left: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ } /* Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° */ #container { width: 770px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ ΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅ΡΠ°+20px */ margin-right: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° */ margin-left: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ } /* Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° 2 — ΠΌΠ΅Π½Ρ */ #menu { width: 200px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ */ float: left; /* ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌ ΡΠ»ΠΎΠ΅ΠΌ */ color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */ background: #008080; /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ } /* Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° 3 — ΠΊΠΎΠ½ΡΠ΅Π½Ρ */ #content { /* ΠΡΠ°Π²Π°Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°*/ width: 530px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ */ float: left; /* ΠΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ Ρ ΡΠΎΡΠ΅Π΄Π½ΠΈΠΌ ΡΠ»ΠΎΠ΅ΠΌ */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ background: #e0e0e0; /* Π¦Π²Π΅Ρ Π·Π°Π΄Π½Π΅Π³ΠΎ ΡΠΎΠ½Π° */ } /* Π΄Π»Ρ Π±Π»ΠΎΠΊΠ° 4 — ΠΏΠΎΠ΄Π²Π°Π» */ #bottom{ width:750px; /* Π¨ΠΈΡΠΈΠ½Π° ΡΠ»ΠΎΡ */ clear:left; /* Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌ Π±Π»ΠΎΡΠ½ΠΎΡΡΡ ΠΈ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌ ΡΠ»ΠΎΠΉ ΡΠ»Π΅Π²Π° */ padding: 10px; /* ΠΠ½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ */ background:#444; color:#fff; margin-right: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠΏΡΠ°Π²Π° */ margin-left: auto; /* ΠΠ²ΡΠΎ-ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ }
</style> </head> <body> <div>1</div> <div> <div>2</div> <div>3</div> </div> <div>4</div> </body> |
</style> </head> <body> <div>1</div> <div> <div>2</div> <div>3</div> </div> <div>4</div> </body>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
Π ΠΈΡ.2. ΠΠ΅ΡΡΠΊΠ°Ρ Π±Π»ΠΎΡΠ½Π°Ρ Π²Π΅ΡΡΡΠΊΠ° ΠΈΠ· Π΄Π²ΡΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π΄Π»Ρ ΡΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ
ΠΡΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈΠ· ΡΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ΄Π΅Π»ΠΈΡΡ Π΄Π²Π° ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΠΌΠΎΠ΄ΡΠ»ΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ:
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° float Π΄Π»Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΡΠ΄ΠΎΠΌ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°Π±ΠΎΡΠ° ΡΠ΅Ρ CSS ΡΠ²ΠΎΠΉΡΡΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Ρ Π΄Π»Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»ΠΎΠ΅Π².
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΠ΅ΡΠ²ΡΠΉ ΡΠ»ΡΡΠ°ΠΉ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° float Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° Π² ΡΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
ΠΠ° ΡΠΈΡ. 3 β ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° float Π΄Π»Ρ ΡΡΠ΅Ρ
ΠΊΠΎΠ»ΠΎΠ½Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°. ΠΠ° ΡΠ°ΠΌΠΎΠΌ Π΄Π΅Π»Π΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ 6 ΡΠ»ΠΎΠ΅Π² β ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠ°ΠΌΠΈΡ
ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.
Π ΠΈΡ. 3. Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ Π² ΡΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
ΠΡΠΈΠΌΠ΅Ρ: ΡΠΎΠ·Π΄Π°ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ ΠΈΠ· ΡΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½Π½ΡΡ Π½Π° ΡΠΈΡ. 3. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΈΠ΅ΠΌΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ Π±Π»ΠΎΡΠ½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ
ΠΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅:
1. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΡΡΠΊΡΡΡΡ html-ΠΊΠΎΠ΄Π°
- ΠΠΏΡΠ΅Π΄Π΅Π»ΠΈΠΌ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΡΡΠΈ ΡΠ»ΠΎΡ (
#header...
) ΠΈ Π΄Π»Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΡΠΈ ΡΠ»ΠΎΡ (#col...
). - Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ ΠΈ ΠΈΡ
Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½Ρ Π½Π° Π΄Π²ΡΡ
ΡΠ°Π·Π½ΡΡ
ΡΡΡΠΎΠΊΠ°Ρ
, ΡΠΎ ΠΎΠ±ΡΠ΅Π΄Π΅Π½ΠΈΠΌ ΠΈΡ
Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ (
class="container"
). - ΠΠΎΠ»ΡΡΠΈΠΌ ΡΡ Π΅ΠΌΠ°ΡΠΈΡΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π±Π»ΠΎΠΊΠΎΠ²:
ΠΠΎΠ»ΡΡΠΈΠΌ ΡΠ»Π΅Π΄ΡΡΡΡΡ html-ΡΡΡΡΠΊΡΡΡΡ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <body> <div> <div>ΠΠ²Π³Π΅Π½ΠΈΠΉ ΠΠ²ΡΡΡΠ΅Π½ΠΊΠΎ</div> <div>ΠΠ°Π»Π΅ΡΠΈΠΉ ΠΡΡΡΠΎΠ²</div> <div>ΠΠ΄ΡΠ°ΡΠ΄ ΠΡΠ°Π΄ΠΎΠ²</div> </div> <div> <div> ΠΠ½Π΅ ΡΠ½ΠΈΡΡΡ ΡΡΠ°ΡΡΠΉ Π΄ΡΡΠ³,<br/>ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π» Π²ΡΠ°Π³ΠΎΠΌ,<br/> Π½ΠΎ ΡΠ½ΠΈΡΡΡ Π½Π΅ Π²ΡΠ°Π³ΠΎΠΌ,<br/>Π° ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠ°ΠΌΡΠΌ Π΄ΡΡΠ³ΠΎΠΌ.<br/> Π‘ΠΎ ΠΌΠ½ΠΎΡ Π½Π΅Ρ Π΅Π³ΠΎ,<br/>Π½ΠΎ ΠΎΠ½ ΡΠ΅ΠΏΠ΅ΡΡ ΠΊΡΡΠ³ΠΎΠΌ,<br/> ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ<br/>ΠΎΡ ΡΠ½ΠΎΠ²ΠΈΠ΄Π΅Π½ΠΈΠΉ ΠΊΡΡΠ³ΠΎΠΌ. </div> <div> ΠΠ΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/>ΠΠΈΡΡ ΠΈΠ·Π΄Π°Π»ΠΈ ΡΠΎΡΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΠ½ΠΎ,<br/> ΠΡ Π²ΡΠ΅ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΠΌ ΠΏΡΠ΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/>Π Π²ΠΈΠ΄ΠΈΠΌ Π»ΠΈΡΡ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎΠ΅ Π·Π²Π΅Π½ΠΎ. </div> <div> Π Π»ΡΠ±ΡΡ Π΄Π΅Π»Π°Ρ ΠΏΡΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΠ΅ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ<br/>ΠΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅ Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/> ΠΠ΅Π»Π°Π½ΡΠ΅ - ΡΡΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ,<br/>Π Π½Π΅ΠΆΠ΅Π»Π°Π½ΡΠ΅ - ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈΡΠΈΠ½. </div> </div> </body> |
<body> <div> <div>ΠΠ²Π³Π΅Π½ΠΈΠΉ ΠΠ²ΡΡΡΠ΅Π½ΠΊΠΎ</div> <div>ΠΠ°Π»Π΅ΡΠΈΠΉ ΠΡΡΡΠΎΠ²</div> <div>ΠΠ΄ΡΠ°ΡΠ΄ ΠΡΠ°Π΄ΠΎΠ²</div> </div> <div> <div> ΠΠ½Π΅ ΡΠ½ΠΈΡΡΡ ΡΡΠ°ΡΡΠΉ Π΄ΡΡΠ³,<br/>ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π» Π²ΡΠ°Π³ΠΎΠΌ,<br/> Π½ΠΎ ΡΠ½ΠΈΡΡΡ Π½Π΅ Π²ΡΠ°Π³ΠΎΠΌ,<br/>Π° ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠ°ΠΌΡΠΌ Π΄ΡΡΠ³ΠΎΠΌ.<br/> Π‘ΠΎ ΠΌΠ½ΠΎΡ Π½Π΅Ρ Π΅Π³ΠΎ,<br/>Π½ΠΎ ΠΎΠ½ ΡΠ΅ΠΏΠ΅ΡΡ ΠΊΡΡΠ³ΠΎΠΌ,<br/> ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ<br/>ΠΎΡ ΡΠ½ΠΎΠ²ΠΈΠ΄Π΅Π½ΠΈΠΉ ΠΊΡΡΠ³ΠΎΠΌ. </div> <div> ΠΠ΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/>ΠΠΈΡΡ ΠΈΠ·Π΄Π°Π»ΠΈ ΡΠΎΡΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΠ½ΠΎ,<br/> ΠΡ Π²ΡΠ΅ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΠΌ ΠΏΡΠ΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/>Π Π²ΠΈΠ΄ΠΈΠΌ Π»ΠΈΡΡ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎΠ΅ Π·Π²Π΅Π½ΠΎ. </div> <div> Π Π»ΡΠ±ΡΡ Π΄Π΅Π»Π°Ρ ΠΏΡΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΠ΅ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ<br/>ΠΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅ Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/> ΠΠ΅Π»Π°Π½ΡΠ΅ — ΡΡΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ,<br/>Π Π½Π΅ΠΆΠ΅Π»Π°Π½ΡΠ΅ — ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈΡΠΈΠ½. </div> </div> </body>
2. ΠΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΡΡΠΈΠ»Π΅ΠΉ Π΄Π»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² (ΡΠ΅Π»Π΅ΠΊΡΠΎΡ header...
) ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ (ΡΠ΅Π»Π΅ΠΊΡΠΎΡ col...
)
- Π¨ΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΡΠ΄Π΅Π»Π°Π΅ΠΌ Ρ Π²ΡΠ΅Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ 3, Π° ΡΡΠ΅Π΄Π½ΡΡ ΡΠΈΡΠΈΠ½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ ΠΏΡΠΈΠΌΠ΅ΡΠ½ΠΎ 700-900 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² 250 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ.
- ΠΠΎΠ±Π°Π²ΠΈΠΌ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠ΅ ΠΏΠΎΠ»Ρ (ΠΎΡΡΡΡΠΏΡ ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ°) β
padding
ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΠΎΡΡΡΡΠΏΡ, ΡΡΠΎΠ±Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ Π·Π°Π·ΠΎΡ ΠΌΠ΅ΠΆΠ΄Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π·Π°Π΄Π°ΡΡΡΡ ΡΡΠ°Π·Ρ Π΄Π»Ρ Π²ΡΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ, Π° ΡΠ°ΠΌ Π²Π΅ΡΡ ΠΌΠ°ΠΊΠ΅Ρ Π½Π΅ ΡΠ΅Π½ΡΡΠΈΡΡΠ΅ΡΡΡ, Π° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅ΡΡΡ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ, ΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ ΠΎΡΡΡΡΠΏ ΡΠΎΠ»ΡΠΊΠΎ Ρ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΠΎΡΠΎΠ½Ρ β Π»Π΅Π²ΠΎΠΉ β Ρ Π²ΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ (margin-left
). - ΠΠΎΠ±Π°Π²ΠΈΠΌ ΡΠ°ΠΊΠΆΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠΉ ΠΎΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ
Ρ, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ² Π·Π°Π·ΠΎΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΌΠ΅ΠΆΠ΄Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ°ΠΌΠΈ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΡΡΡΠΏ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΎΡ Π²Π΅ΡΡ
Π° ΡΡΡΠ°Π½ΠΈΡΡ (
margin-top
). - ΠΠ»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ Π±Π»ΠΎΡΠ½ΡΠ΅ ΡΠ΅Π³ΠΈ
div
, ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΠ»ΠΈΡΡ ΡΡΠ΄ΠΎΠΌ Π΄ΡΡΠ³ Ρ Π΄ΡΡΠ³ΠΎΠΌ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π·Π°Π΄Π°ΡΡ ΠΈΠΌ ΠΎΠ±ΡΠ΅ΠΊΠ°Π½ΠΈΠ΅ βfloat
. - ΠΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π³ΡΠ°Π½ΠΈΡΡ Π΄Π»Ρ Π±Π»ΠΎΠΊΠΎΠ² (
border
) ΠΈ ΠΈ Π·Π°Π΄Π°Π΅ΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΡΡΠΈΡΡΠ° (font-family
,font-weight
,font-size
,color
). - Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΠΌ Π·Π°Π΄Π½ΠΈΠΉ ΡΠΎΠ½ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°.
#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ } |
#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ }
#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */ margin-left: 5px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ } |
#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */ margin-left: 5px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ }
#header1, #header2, #header3, #col1, #col2, #col3 { ... margin-top: 2px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ */ } |
#header1, #header2, #header3, #col1, #col2, #col3 { … margin-top: 2px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ */ }
#header1, #header2, #header3, #col1, #col2, #col3 { ... float: left; /* Π‘ΠΎΡΡΡΠΊΠΎΠ²ΠΊΠ° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */ } |
#header1, #header2, #header3, #col1, #col2, #col3 { … float: left; /* Π‘ΠΎΡΡΡΠΊΠΎΠ²ΠΊΠ° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */ }
#header1, #header2, #header3, #col1, #col2, #col3 { ... border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠ»ΠΎΡ */ font-family: Verdana, Arial, sans-serif; /* ΠΠ΅ ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΡΡΠ±Π»Π΅Π½ΡΠΉ ΡΡΠΈΡΡ */ font-weight: bold; /* ΠΠΈΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */ color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ } |
#header1, #header2, #header3, #col1, #col2, #col3 { … border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠ»ΠΎΡ */ font-family: Verdana, Arial, sans-serif; /* ΠΠ΅ ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΡΡΠ±Π»Π΅Π½ΡΠΉ ΡΡΠΈΡΡ */ font-weight: bold; /* ΠΠΈΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */ color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ }
ΠΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ΄:
#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */ margin-left: 5px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ margin-top: 2px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ */ float: left; /* Π‘ΠΎΡΡΡΠΊΠΎΠ²ΠΊΠ° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */ border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠ»ΠΎΡ */ font-family: Verdana, Arial, sans-serif; /* ΠΠ΅ ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΡΡΠ±Π»Π΅Π½ΡΠΉ ΡΡΠΈΡΡ */ font-weight: bold; /* ΠΠΈΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */ color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ } |
#header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */ margin-left: 5px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ margin-top: 2px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ */ float: left; /* Π‘ΠΎΡΡΡΠΊΠΎΠ²ΠΊΠ° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */ border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠ»ΠΎΡ */ font-family: Verdana, Arial, sans-serif; /* ΠΠ΅ ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΈΠ»ΠΈ ΡΡΠ±Π»Π΅Π½ΡΠΉ ΡΡΠΈΡΡ */ font-weight: bold; /* ΠΠΈΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */ color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ }
#header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; } |
#header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; }
Π‘ΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ:
Π ΠΈΡ. 4. ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠΉ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ
3. ΠΠ°Π΄Π°Π½ΠΈΠ΅ ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ²
#col1, #col2, #col3 { font-family: "Times New Roman", Times, serif; /* Π¨ΡΠΈΡΡ ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΈΠ»ΠΈ Ρ Π·Π°ΡΠ΅ΡΠΊΠ°ΠΌΠΈ */ font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */ font-weight: normal; /* ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ */ color: black; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */ } |
#col1, #col2, #col3 { font-family: «Times New Roman», Times, serif; /* Π¨ΡΠΈΡΡ ΡΠ΅ΡΠΈΡΠ½ΡΠΉ ΠΈΠ»ΠΈ Ρ Π·Π°ΡΠ΅ΡΠΊΠ°ΠΌΠΈ */ font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */ font-weight: normal; /* ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ */ color: black; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */ }
ΠΡΠΎΠ³ΠΎΠ²ΡΠΉ ΠΊΠΎΠ΄: Π²ΡΡ Π²ΠΌΠ΅ΡΡΠ΅
/* Π΄Π»Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² */ #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */ margin-left: 5px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ margin-top: 2px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ */ float: left; /* Π‘ΠΎΡΡΡΠΊΠΎΠ²ΠΊΠ° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */ border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠ»ΠΎΡ */ font-family: Verdana, Arial, sans-serif; /* Π ΡΠ±Π»Π΅Π½ΡΠΉ ΡΡΠΈΡΡ */ font-weight: bold; /* ΠΠΈΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */ color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ } /* Π΄Π»Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ #col1, #col2, #col3 { font-family: "Times New Roman", Times, serif; /* Π¨ΡΠΈΡΡ Ρ Π·Π°ΡΠ΅ΡΠΊΠ°ΠΌΠΈ */ font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */ font-weight: normal; /* ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ */ color: black; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */ } Β /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»ΠΎΡ */ #header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; } Β .container { clear: both; /* ΠΡΠΌΠ΅Π½ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ float */ } |
/* Π΄Π»Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΈ ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² */ #header1, #header2, #header3, #col1, #col2, #col3 { width: 250px; /* Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ padding: 5px; /* ΠΠΎΠ»Ρ Π²ΠΎΠΊΡΡΠ³ ΡΠ΅ΠΊΡΡΠ° */ margin-left: 5px; /* ΠΡΡΡΡΠΏ ΡΠ»Π΅Π²Π° */ margin-top: 2px; /* ΠΡΡΡΡΠΏ ΡΠ²Π΅ΡΡ Ρ */ float: left; /* Π‘ΠΎΡΡΡΠΊΠΎΠ²ΠΊΠ° ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ */ border: 1px solid black; /* Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠ»ΠΎΡ */ font-family: Verdana, Arial, sans-serif; /* Π ΡΠ±Π»Π΅Π½ΡΠΉ ΡΡΠΈΡΡ */ font-weight: bold; /* ΠΠΈΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ font-size: 80%; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */ color: white; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° */ } /* Π΄Π»Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ */ #col1, #col2, #col3 { font-family: «Times New Roman», Times, serif; /* Π¨ΡΠΈΡΡ Ρ Π·Π°ΡΠ΅ΡΠΊΠ°ΠΌΠΈ */ font-size: 100%; /* Π Π°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ° */ font-weight: normal; /* ΠΠΎΡΠΌΠ°Π»ΡΠ½ΠΎΠ΅ Π½Π°ΡΠ΅ΡΡΠ°Π½ΠΈΠ΅ */ color: black; /* Π¦Π²Π΅Ρ ΡΠ΅ΠΊΡΡΠ° */ } /* Π¦Π²Π΅Ρ ΡΠΎΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡΠ»ΠΎΡ */ #header1 { background: #B38541; } #header2 { background: #008159; } #header3 { background: #006077; } #col1 { background: #EBE0C5; } #col2 { background: #BBE1C4; } #col3 { background: #ADD0D9; } .container { clear: both; /* ΠΡΠΌΠ΅Π½ΡΠ΅Ρ Π΄Π΅ΠΉΡΡΠ²ΠΈΠ΅ float */ }
</style> </head> <body> <div> <div>ΠΠ²Π³Π΅Π½ΠΈΠΉ ΠΠ²ΡΡΡΠ΅Π½ΠΊΠΎ</div> <div>ΠΠ°Π»Π΅ΡΠΈΠΉ ΠΡΡΡΠΎΠ²</div> <div>ΠΠ΄ΡΠ°ΡΠ΄ ΠΡΠ°Π΄ΠΎΠ²</div> </div> <div> <div> ΠΠ½Π΅ ΡΠ½ΠΈΡΡΡ ΡΡΠ°ΡΡΠΉ Π΄ΡΡΠ³,<br/> ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π» Π²ΡΠ°Π³ΠΎΠΌ,<br/> Π½ΠΎ ΡΠ½ΠΈΡΡΡ Π½Π΅ Π²ΡΠ°Π³ΠΎΠΌ,<br/> Π° ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠ°ΠΌΡΠΌ Π΄ΡΡΠ³ΠΎΠΌ.<br/> Π‘ΠΎ ΠΌΠ½ΠΎΡ Π½Π΅Ρ Π΅Π³ΠΎ,<br/> Π½ΠΎ ΠΎΠ½ ΡΠ΅ΠΏΠ΅ΡΡ ΠΊΡΡΠ³ΠΎΠΌ,<br/> ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ<br/> ΠΎΡ ΡΠ½ΠΎΠ²ΠΈΠ΄Π΅Π½ΠΈΠΉ ΠΊΡΡΠ³ΠΎΠΌ. </div> <div> ΠΠ΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/> ΠΠΈΡΡ ΠΈΠ·Π΄Π°Π»ΠΈ ΡΠΎΡΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΠ½ΠΎ,<br/> ΠΡ Π²ΡΠ΅ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΠΌ ΠΏΡΠ΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/> Π Π²ΠΈΠ΄ΠΈΠΌ Π»ΠΈΡΡ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎΠ΅ Π·Π²Π΅Π½ΠΎ. </div> <div> Π Π»ΡΠ±ΡΡ Π΄Π΅Π»Π°Ρ ΠΏΡΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΠ΅ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ<br/> ΠΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅ Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/> ΠΠ΅Π»Π°Π½ΡΠ΅ - ΡΡΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ,<br/> Π Π½Π΅ΠΆΠ΅Π»Π°Π½ΡΠ΅ - ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈΡΠΈΠ½. </div> </div> </body> |
</style> </head> <body> <div> <div>ΠΠ²Π³Π΅Π½ΠΈΠΉ ΠΠ²ΡΡΡΠ΅Π½ΠΊΠΎ</div> <div>ΠΠ°Π»Π΅ΡΠΈΠΉ ΠΡΡΡΠΎΠ²</div> <div>ΠΠ΄ΡΠ°ΡΠ΄ ΠΡΠ°Π΄ΠΎΠ²</div> </div> <div> <div> ΠΠ½Π΅ ΡΠ½ΠΈΡΡΡ ΡΡΠ°ΡΡΠΉ Π΄ΡΡΠ³,<br/> ΠΊΠΎΡΠΎΡΡΠΉ ΡΡΠ°Π» Π²ΡΠ°Π³ΠΎΠΌ,<br/> Π½ΠΎ ΡΠ½ΠΈΡΡΡ Π½Π΅ Π²ΡΠ°Π³ΠΎΠΌ,<br/> Π° ΡΠ΅ΠΌ ΠΆΠ΅ ΡΠ°ΠΌΡΠΌ Π΄ΡΡΠ³ΠΎΠΌ.<br/> Π‘ΠΎ ΠΌΠ½ΠΎΡ Π½Π΅Ρ Π΅Π³ΠΎ,<br/> Π½ΠΎ ΠΎΠ½ ΡΠ΅ΠΏΠ΅ΡΡ ΠΊΡΡΠ³ΠΎΠΌ,<br/> ΠΈ Π³ΠΎΠ»ΠΎΠ²Π° ΠΈΠ΄Π΅Ρ<br/> ΠΎΡ ΡΠ½ΠΎΠ²ΠΈΠ΄Π΅Π½ΠΈΠΉ ΠΊΡΡΠ³ΠΎΠΌ. </div> <div> ΠΠ΅Π»ΠΈΠΊΠΎΠ΅ Π²Π±Π»ΠΈΠ·ΠΈ Π½Π΅ΡΠ»ΠΎΠ²ΠΈΠΌΠΎ,<br/> ΠΠΈΡΡ ΠΈΠ·Π΄Π°Π»ΠΈ ΡΠΎΡΠΆΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ ΠΎΠ½ΠΎ,<br/> ΠΡ Π²ΡΠ΅ ΠΏΡΠΎΡ ΠΎΠ΄ΠΈΠΌ ΠΏΡΠ΅Π΄ Π²Π΅Π»ΠΈΠΊΠΈΠΌ ΠΌΠΈΠΌΠΎ<br/> Π Π²ΠΈΠ΄ΠΈΠΌ Π»ΠΈΡΡ ΡΠ»ΡΡΠ°ΠΉΠ½ΠΎΠ΅ Π·Π²Π΅Π½ΠΎ. </div> <div> Π Π»ΡΠ±ΡΡ Π΄Π΅Π»Π°Ρ ΠΏΡΠΈ ΠΌΠ°ΠΊΡΠΈΠΌΡΠΌΠ΅ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ<br/> ΠΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ΅ Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΠΎΠ΄ΠΈΠ½:<br/> ΠΠ΅Π»Π°Π½ΡΠ΅ — ΡΡΠΎ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ,<br/> Π Π½Π΅ΠΆΠ΅Π»Π°Π½ΡΠ΅ — ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΠΏΡΠΈΡΠΈΠ½. </div> </div> </body>
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
Π ΠΈΡ. 5. Π Π΅Π·ΡΠ»ΡΡΠ°Ρ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ»ΠΎΠ΅Π² Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° Π² ΡΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ
ΠΠΎΠ·ΡΠΌΠ΅ΠΌ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ° ΠΌΠ°ΠΊΠ΅Ρ, ΡΠΎΡΡΠΎΡΡΠΈΠΉ ΠΈΠ· ΡΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ ΡΠ°Π·Π³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΡΡ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ (ΡΠΈΡ. 6).
Π ΠΈΡ. 6. ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ»ΠΎΠ΅Π² Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ° Π² ΡΡΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»Π΅ΠΌ
ΠΡΠΈΠΌΠ΅Ρ: ΡΠΎΠ·Π΄Π°ΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ ΠΈΠ· ΡΡΠ΅Ρ ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Ρ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ Π»ΠΈΠ½ΠΈΠ΅ΠΉ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½Π½ΡΡ Π½Π° ΡΠΈΡ. 6. ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΈΠ΅ΠΌΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ Ρ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠ»ΠΎΠ΅Π²
ΠΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅:
1. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΡΡΡΠΊΡΡΡΡ html-ΠΊΠΎΠ΄Π°
- ΠΠ»Ρ Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΈ ΡΠ»ΠΎΡ
div
Π΄Π»Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ.
ΠΠΎΡΡΠΎΠΌΡ ΡΡΡΡΠΊΡΡΡΠ° Π±ΡΠ΄Π΅Ρ ΠΏΡΠΎΡΡΠΎΠΉ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < |
ΠΡΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠΎΠ² | htmlbook.ru
HTML ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ Π·Π°Π΄ΡΠΌΡΠ²Π°Π»ΡΡ ΠΊΠ°ΠΊ ΡΠ·ΡΠΊ, ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π½Π΅ Π½ΡΠΆΠ½Ρ ΡΡΠ΅Π΄ΡΡΠ²Π° ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΡΠ²Π΅Ρ, ΡΠ°Π·ΠΌΠ΅Ρ, ΡΠ°ΠΌΠΊΠΈ ΠΈΠ»ΠΈ ΡΡΠΎ-ΡΠΎ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ΅. Π Π°Π·ΡΠ°Π±ΠΎΡΠ°Π½Π½ΡΠΉ Π² ΠΠ²ΡΠΎΠΏΠ΅ΠΉΡΠΊΠΎΠΌ ΠΈΠ½ΡΡΠΈΡΡΡΠ΅ ΡΠΈΠ·ΠΈΠΊΠΈ ΡΠ°ΡΡΠΈΡ (CERN), HTML Π±ΡΠ» ΠΈΠ³ΡΡΡΠΊΠΎΠΉ ΡΡΠ΅Π½ΡΡ , ΠΈΡ , ΠΏΡΠ΅ΠΆΠ΄Π΅ Π²ΡΠ΅Π³ΠΎ, ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°Π»Π° Π»ΠΎΠ³ΠΈΠΊΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ, Π° Π½Π΅ Π΅Ρ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΠ΅. Π’ΠΎΠ³Π΄Π° Π΅ΡΡ Π½Π΅ ΡΡΡΠ΅ΡΡΠ²ΠΎΠ²Π°Π»ΠΎ ΠΏΠΎΠ½ΡΡΠΈΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π° ΠΈ Π²ΡΡΡΡΠΊΠΈ ΠΊΠ°ΠΊ ΡΠ°ΠΊΠΎΠ²ΠΎΠΉ, Π²ΡΠ΅ ΡΠ°ΠΉΡΡ ΠΏΠΎ ΡΠ²ΠΎΠ΅ΠΌΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ Π±ΡΠ»ΠΈ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΎΠ΄Π½ΠΎΡΠΈΠΏΠ½ΡΠΌΠΈ, Π² ΡΡΠΈΠ»Π΅, Π½Π°Π·ΡΠ²Π°Π΅ΠΌΠΎΠΌ ΡΠ΅ΠΉΡΠ°Ρ Β«Π°ΠΊΠ°Π΄Π΅ΠΌΠΈΡΠ΅ΡΠΊΠΈΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½Β». ΠΡΠΈΠΌΠ΅Ρ Π΄ΠΎ ΡΠΈΡ ΠΏΠΎΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° lib.ru.
ΠΠ΄Π½Π°ΠΊΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎ Π΄ΡΠΌΠ°Π»ΠΈ ΠΈΠ½Π°ΡΠ΅ ΠΈ, Π³Π»ΡΠ΄Ρ Π½Π° ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΠΎΡΠ΄Π°Π²Π°Π»ΠΈ ΠΏΡΠ΅Π΄ΠΏΠΎΡΡΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΅ΠΉ. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Netscape ΠΏΡΠ΅ΠΊΡΠ°ΡΠ½ΠΎ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ ΡΡΠΎ ΠΈ Π²Π²ΠΎΠ΄ΠΈΠ»ΠΈ Π² HTML Π½ΠΎΠ²ΡΠ΅ ΡΠ΅Π³ΠΈ, ΡΠ»ΡΡΡΠ°ΡΡΠΈΠ΅ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°. ΠΡΠΈ ΡΠ΅Π³ΠΈ Π½Π΅ Π±ΡΠ»ΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Ρ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π² Netscape, ΡΡΠΎ Π² ΡΠΏΠΎΡ Ρ ΠΏΠΎΠ²Π°Π»ΡΠ½ΠΎΠ³ΠΎ Π·Π°ΡΠΈΠ»ΡΡ ΡΡΠΎΠ³ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π΅ ΠΈΠΌΠ΅Π»ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΠΎΠ»Ρ Netscape ΡΠΎΡΡΠ°Π²Π»ΡΠ»Π° Π±ΠΎΠ»Π΅Π΅ 90% ΠΎΡ Π²ΡΠ΅Ρ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΠ»ΠΈΡΠ½ΠΈΠ΅ Netscape ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ Π³ΡΠ±ΠΈΡΠ΅Π»ΡΠ½ΡΠΌ Π΄Π»Ρ Π°ΠΊΠ°Π΄Π΅ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π°, ΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΠΎΡ ΠΎΡΠΎΠ½ΠΈΠ² Π΅Π³ΠΎ ΠΈ ΠΎΠΊΠ°Π·Π°Π»ΠΎΡΡ Π±Π»Π°Π³ΠΎΡΠ²ΠΎΡΠ½ΡΠΌ Π΄Π»Ρ ΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π Π°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠ°ΠΉΡΠΎΠ² ΠΏΠΎΠ½ΡΠ»ΠΈ, ΡΡΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΡΠΎ Π½Π΅ ΠΏΡΠΎΡΡΠΎ ΡΠ°Π·Π½ΠΎΡΠ²Π΅ΡΠ½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΈ Π²ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ Π½Π°ΠΎΠ±ΡΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΡΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ ΠΊΡΠ°ΡΠΎΡΠ½ΠΎ ΠΈ ΡΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΏΠΎΠ΄Π°ΡΡ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», ΠΏΡΠΈΠ΄Π°ΡΡ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠ΅ Π½Π°ΡΡΡΠΎΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΉΡΡ, Π·Π°ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠΎΠ²Π°ΡΡ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ ΠΈ Π·Π°Π΄Π΅ΡΠΆΠ°ΡΡ Π΅Π³ΠΎ Π½Π° ΡΠ΅ΡΡΡΡΠ΅. ΠΠΈΠ·Π°ΠΉΠ½ ΡΡΠ°Π» Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΡΠΌ ΡΡΠ°ΠΏΠΎΠΌ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ°ΠΉΡΠ°, Π·Π° ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΠΎΡΠ»Π΅Π΄ΠΎΠ²Π°Π»Π° ΠΈ Π²ΡΡΡΡΠΊΠ°. ΠΠ°ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π² Π€ΠΎΡΠΎΡΠΎΠΏΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΎ ΠΏΡΠ΅Π²ΡΠ°ΡΠΈΡΡ ΠΈΠ· ΠΎΠ΄Π½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² Π½Π°Π±ΠΎΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΡΠΈΠ»Π΅Π²ΡΡ ΠΈ HTML-ΡΠ°ΠΉΠ»ΠΎΠ², ΡΠΏΠΎΡΠΎΠ±Π½ΡΡ Π±ΡΡΡΡΠΎ Π·Π°Π³ΡΡΠΆΠ°ΡΡΡΡ ΠΏΠΎ ΡΠ΅ΡΠΈ, ΡΠΎΡ ΡΠ°Π½ΡΡ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ Π΄ΠΈΠ·Π°ΠΉΠ½Π°.
ΠΠ΅ΠΊ Netscape Β ΠΏΡΠΎΠ΄ΠΎΠ»ΠΆΠ°Π»ΡΡ Π΄ΠΎ ΡΠ΅Ρ ΠΏΠΎΡ, ΠΏΠΎΠΊΠ° ΡΠ°ΡΡΡ ΡΡΠ½ΠΊΠ° Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π½Π΅ Π·Π°Ρ Π²Π°ΡΠΈΠ»Π° Microsoft ΡΠΎ ΡΠ²ΠΎΠΈΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ Internet Explorer, ΡΡΠΎ Π² ΠΈΡΠΎΠ³Π΅ ΠΏΡΠΈΠ½Π΅ΡΠ»ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π³ΠΎΠ»ΠΎΠ²Π½ΡΡ Π±ΠΎΠ»Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ°ΠΌ ΡΠ°ΠΉΡΠΎΠ². Π Π°Π·Π½ΡΠ΅ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Ρ Netscape ΠΈ Internet Explorer ΠΊ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠ°ΠΉΡΠ°, ΠΏΡΠΎΡΠΈΠ²ΠΎΡΠ΅ΡΠΈΠ²Π°Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠ° ΡΡΠΈΠ»Π΅ΠΉ ΠΈ ΡΠ΅Π³ΠΎΠ², Π±ΠΎΠ»ΡΡΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΌΠ΅Π»ΠΊΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΏΡΠΈΠ²Π΅Π»ΠΎ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ ΡΠ°ΠΉΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ ΡΠ΅ΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΈ ΠΎΡΠ»Π°ΠΆΠΈΠ²Π°ΡΡ Π΄ΠΎΠ»Π³ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ.
Π£ΡΡΠ°ΡΠ΅Π²ΡΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π½Π΅ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅ΡΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π»ΠΈ CSS (Cascading Style Sheets, ΠΊΠ°ΡΠΊΠ°Π΄Π½ΡΠ΅ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ), ΠΏΠΎΡΡΠΎΠΌΡ ΠΊΠΎΠ΄ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ» ΡΠΎΠ±ΠΎΠΉ ΠΎΠΊΡΠΎΡΠΊΡ ΠΈΠ· HTML ΠΈ CSS. ΠΡΠΎ ΠΏΡΠΈΠ²Π΅Π»ΠΎ ΠΊ ΡΠΎΠΌΡ, ΡΡΠΎ Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΡΡΠ°Π»ΠΈ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠ°Π±Π»ΠΈΡΡ Ρ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ Π³ΡΠ°Π½ΠΈΡΠ΅ΠΉ, Π½Π° Π΄ΠΎΠ»Π³ΠΎΠ΅ Π²ΡΠ΅ΠΌΡ ΡΡΠ°Π²ΡΠΈΠΌΠΈ ΡΡΠ°Π½Π΄Π°ΡΡΠΎΠΌ Π΄Π΅-ΡΠ°ΠΊΡΠΎ.
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΌ ΡΡΠ°ΠΏΠΎΠΌ ΡΠ°Π·Π²ΠΈΡΠΈΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ°ΠΉΡΠΎΠ² ΡΡΠ°Π»ΠΎ ΡΠΎΠΆΠ΄Π΅Π½ΠΈΠ΅ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ»Π° Π½Π°Π·Π²Π°Π½Π° Cascading Style Sheets Level 2, ΡΠΎΠΊΡΠ°ΡΠ΅Π½Π½ΠΎ CSS2. Π‘Π»Π΅Π΄ΠΎΠΌ ΠΏΠΎΡΠ²ΠΈΠ»ΠΎΡΡ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1), ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΠΎ ΡΠ΅ΠΉ Π΄Π΅Π½Ρ. ΠΡΠΏΡΡΠΊ Π½ΠΎΠ²ΡΡ Π²Π΅ΡΡΠΈΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΠΈΡ , ΠΏΡΡΡΡ ΠΈ Π½Π΅ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅ΡΠ΅, ΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ, ΡΠ΅ΡΡΡΠ·Π½ΠΎ ΠΎΠ±Π»Π΅Π³ΡΠΈΠ» ΡΠ°Π±ΠΎΡΡ Π½Π°Π΄ ΡΠ°ΠΉΡΠ°ΠΌΠΈ. Π ΠΈΡΠΎΠ³Π΅, Π½Π°ΡΠ°Π» ΠΏΡΠΎΠΈΡΡ ΠΎΠ΄ΠΈΡΡ ΠΏΠΎΡΡΠ΅ΠΏΠ΅Π½Π½ΡΠΉ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ ΠΎΡ ΡΠ°Π±Π»ΠΈΡΠ½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ ΠΊ Π±Π»ΠΎΡΠ½ΠΎΠΉ ΠΈΠ»ΠΈ, ΠΊΠ°ΠΊ ΠΎΠ½Π° Π΅ΡΡ Π½Π°Π·ΡΠ²Π°Π΅ΡΡΡ, Π²ΡΡΡΡΠΊΠ΅ ΡΠ»ΠΎΡΠΌΠΈ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈ ΠΈΡ Π²ΠΈΠ΄ Π·Π°Π΄Π°ΡΡΡΡ ΡΠ΅ΡΠ΅Π· ΡΡΠΈΠ»ΠΈ.
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΡΠ²ΠΈΡΡ, ΡΡΠΎ ΡΠ°Π±Π»ΠΈΡΠ½Π°Ρ Π²ΡΡΡΡΠΊΠ° Π² Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ ΡΠ²ΠΎΡΠΌ ΡΠ²Π»ΡΠ΅ΡΡΡ Π°ΡΡ Π°ΠΈΠ·ΠΌΠΎΠΌ. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΅ΡΡ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΠ°ΠΉΡΠΎΠ² Π²ΡΠΎΠ΄Π΅ yandex.ru, artlebedev.ru ΠΈ Π΄ΡΡΠ³ΠΈΡ , ΡΠ²ΡΡΡΡΠ°Π½Π½ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΡΠΈ ΡΠΎΠ΄Π΅ΠΉΡΡΠ²ΠΈΠΈ ΡΠ°Π±Π»ΠΈΡ. Π’Π°ΠΊΠΎΠΉ ΠΊΠΎΠ½ΡΠ΅ΡΠ²Π°ΡΠΈΠ·ΠΌ ΡΠ²ΡΠ·Π°Π½ ΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌΠΈ ΠΎΠ±ΡΡΠΎΡΡΠ΅Π»ΡΡΡΠ²Π°ΠΌΠΈ.
- ΠΡΡΡΡΠΊΠ° ΡΠ»ΠΎΡΠΌΠΈ ΡΠ»ΠΎΠΆΠ½Π΅Π΅, ΡΠ΅ΠΌ ΡΠ°Π±Π»ΠΈΡΠ°ΠΌΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠ΅Π±ΡΠ΅Ρ ΠΎΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° Π³Π»ΡΠ±ΠΎΠΊΠΈΡ Π·Π½Π°Π½ΠΈΠΉ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS.
- ΠΡΠ°ΡΠ·Π΅ΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΡΠ°Π·Π½ΡΠ΅ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΏΡΠΈ ΠΈΠ½ΡΠ΅ΡΠΏΡΠ΅ΡΠ°ΡΠΈΠΈ ΡΡΠΈΠ»Π΅Π²ΡΡ ΡΠ²ΠΎΠΉΡΡΠ², ΠΏΠΎΡΡΠΎΠΌΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ Π·Π½Π°ΡΡ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ², ΠΈΡ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΈ ΡΠΌΠ΅ΡΡ ΠΎΠ±Ρ ΠΎΠ΄ΠΈΡΡ ΠΈΡ .
- ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΊΠ°ΠΆΠ΄ΡΡ Π·Π°Π΄Π°ΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΅ΡΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΡΠΏΠΎΡΠΎΠ±Π°ΠΌΠΈ, ΠΎΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠ° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ Π²ΡΠ±ΡΠ°ΡΡ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΡΠΉ, Ρ.Π΅. Π½Π°ΠΈΠΌΠ΅Π½Π΅Π΅ Π·Π°ΡΡΠ°ΡΠ½ΡΠΉ ΠΏΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ ΠΈ ΡΡΠΈΠ»ΠΈΡΠΌ. ΠΠ»Ρ ΠΎΡΠ΅Π½ΠΊΠΈ ΠΎΠΏΡΠΈΠΌΠ°Π»ΡΠ½ΠΎΡΡΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΎΠΏΡΡ, ΡΡΠΎΠ±Ρ ΠΈΠΌΠ΅ΡΡ Π² Π·Π°ΠΏΠ°ΡΠ΅ ΡΠ°Π·Π½ΡΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ, ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΠΌΡΠ΅ Π² ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΡΡ ΡΠΈΡΡΠ°ΡΠΈΡΡ .
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²ΡΡΡΡΠΊΠ° Π² ΠΏΡΠΎΡΡΠΎΠΌ ΠΏΠΎΠ½ΠΈΠΌΠ°Π½ΠΈΠΈ ΡΡΠΎ ΠΏΡΠΎΡΠ΅ΡΡ ΠΏΡΠ΅Π²ΡΠ°ΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½Π΅ΡΠ° Π² Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠΎ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΡΠ°Π·Π½ΡΠΌΠΈ ΠΌΠ΅ΡΠΎΠ΄Π°ΠΌΠΈ ΠΈ ΡΠΆΠ΅ ΠΎΡ Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊΠ° Π·Π°Π²ΠΈΡΠΈΡ, ΠΊΠ°ΠΊΠΎΠΉ ΠΈΠ· Π½ΠΈΡ ΠΏΡΠ΅Π΄ΠΏΠΎΡΠ΅ΡΡΡ. ΠΡ ΡΠ°ΠΊΠΎΠ³ΠΎ Π²ΡΠ±ΠΎΡΠ° Π·Π°Π²ΠΈΡΠΈΡ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ ΡΠ°Π±ΠΎΡΡ ΡΠ°ΠΉΡΠ°, Π±ΡΡΡΡΠΎΡΠ° Π΅Π³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π΄ΠΎΡΡΡΠΏΠ½ΠΎΡΡΡ Π΄Π»Ρ ΡΠ°Π·Π½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ² ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ².
ΠΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ Π²ΡΡΡΡΠΊΠ° ΡΡΠΎ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠ°Ρ Π΄ΠΈΡΡΠΈΠΏΠ»ΠΈΠ½Π° ΠΈ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΡΠ΅ΡΠ°Ρ ΡΠ°Π·Π½ΡΠ΅ Π·Π°Π΄Π°ΡΠΈ ΠΈ ΡΠ°Π±ΠΎΡΠ°Ρ Π½Π°Π΄ ΠΏΡΠΎΠ΅ΠΊΡΠ°ΠΌΠΈ, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠ²ΠΎΠΈΡΡ ΡΡΠΎ ΠΈΡΠΊΡΡΡΡΠ²ΠΎ.
ΠΠ»ΠΎΡΠ½Π°Ρ Π²ΡΡΡΡΠΊΠ° | htmlbook.ru
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ ΡΠ΅ΡΠΌΠΈΠ½ Β«ΡΠ»ΠΎΠΉΒ» Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΡΡΠΎΠΉΡΠΈΠ²ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΠΏΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠ΅ ΡΠ°ΠΉΡΠ°, ΡΠ°ΡΡΠΈΡΡΠΎΠ²ΠΊΠ΅ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ½ΡΡΠΈΡ Π² Π»ΠΈΡΠ΅ΡΠ°ΡΡΡΠ΅ ΠΏΠΎ ΡΠ°ΠΉΡΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π΅ ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅. Π Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ Ρ Π±ΡΠ΄Ρ Π°ΠΊΡΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅ΡΠΌΠΈΠ½ Β«ΡΠ»ΠΎΠΉΒ», ΠΏΠΎΡΡΠΎΠΌΡ Π²Π½Π°ΡΠ°Π»Π΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΠΈΡΡ, ΡΡΠΎ ΠΆΠ΅ ΠΏΠΎΠ΄ Π½ΠΈΠΌ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΡΡΡ.
ΠΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ ΡΠ»ΠΎΠΈ Π²Π²Π΅Π»Π° ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡ Netscape, Π²ΠΊΠ»ΡΡΠΈΠ² Π² ΡΠ²ΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΡ ΡΠ΅Π³Π° <layer>. ΠΡΠΎΡ ΡΠ΅Π³ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ» ΠΏΡΡΡΠ°ΡΡ/ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ΅ΠΊΡΡΠ΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, Π½Π°ΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡ ΠΎΠ΄ΠΈΠ½ ΡΠ»ΠΎΠΉ ΠΏΠΎΠ²Π΅ΡΡ Π΄ΡΡΠ³ΠΈΡ ΠΈ Π·Π°Π³ΡΡΠΆΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ Π² ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΡΠ»ΠΎΡ ΠΈΠ· ΡΠ°ΠΉΠ»Π°. ΠΡΠ΅ ΡΡΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ Π»Π΅Π³ΠΊΠΎ ΠΌΠ΅Π½ΡΠ»ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript ΠΈ ΡΡΠΎ ΡΠ°ΡΡΠΈΡΡΠ»ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΠΏΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΡΠΎΠ»Ρ Π²ΠΏΠ΅ΡΠ°ΡΠ»ΡΡΡΠΈΠΉ Π½Π°Π±ΠΎΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ, ΡΠ΅Π³ <layer> Π½Π΅ Π±ΡΠ» Π²ΠΊΠ»ΡΡΡΠ½ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ HTML ΠΈ ΠΎΡΡΠ°Π»ΡΡ Π»ΠΈΡΡ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ° Netscape.
ΠΠ΄Π½Π°ΠΊΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΡΡΡ Π² ΡΠΊΠ°Π·Π°Π½Π½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡΡ ΡΠΆΠ΅ Π½Π°Π·ΡΠ΅Π»Π°, ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ 1996 Π³ΠΎΠ΄Π° ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ ΡΠΎ ΡΠ»ΠΎΡΠΌΠΈ Π±ΡΠ» ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π½ ΠΈ ΠΎΠ΄ΠΎΠ±ΡΠ΅Π½ Π² ΡΠ°Π±ΠΎΡΠ΅ΠΌ ΠΏΡΠΎΠ΅ΠΊΡΠ΅ ΠΊΠΎΠ½ΡΠΎΡΡΠΈΡΠΌΠ° Β«CSS Positioning (CSS-P)Β». ΠΡΠ½ΠΎΠ²Π½Π°Ρ Π½Π°Π³ΡΡΠ·ΠΊΠ° Π»ΠΎΠΆΠΈΠ»Π°ΡΡ Π½Π° ΡΡΠΈΠ»ΠΈ, Ρ ΠΈΡ ΠΏΠΎΠΌΠΎΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π²ΠΈΠ΄ΠΎΠΌ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΠΌΠ΅Π½ΡΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΡΠ΅ΡΠ΅Π· JavaScript. Π ΡΠΎΠΆΠ°Π»Π΅Π½ΠΈΡ, ΠΎΠ±ΡΠ΅ΠΊΡΠ½ΡΠ΅ ΠΌΠΎΠ΄Π΅Π»ΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π΄Π»Ρ Π΄ΠΎΡΡΡΠΏΠ° ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ ΡΠ°Π·Π»ΠΈΡΠ°Π»ΠΈΡΡ, ΠΏΠΎΡΡΠΎΠΌΡ ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΠ»ΠΎΡΡ ΠΏΠΈΡΠ°ΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ»ΠΎΠΆΠ½ΡΠΉ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π±Ρ ΡΡΠΈΡΡΠ²Π°Π» ΡΡΠΈ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ.
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΡΡΠ°Π»ΠΈ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ HTML ΠΈ CSS, ΡΡΠΎ ΡΠΈΠ»ΡΠ½ΠΎ ΠΎΠ±Π»Π΅Π³ΡΠΈΠ»ΠΎ ΠΆΠΈΠ·Π½Ρ ΡΠΎΠ·Π΄Π°ΡΠ΅Π»ΡΠΌ ΡΠ°ΠΉΡΠΎΠ², ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ ΡΠ½ΠΈΠ·ΠΈΠ»ΠΎ Π²ΡΠ΅ΠΌΡ Π½Π° ΠΎΡΠ»Π°Π΄ΠΊΡ ΡΠ°ΠΉΡΠ° Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΡΠ°Π·Π»ΠΈΡΠΈΡ Π² ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π°Ρ Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² ΡΡΡΠ΅ΡΡΠ²ΡΡΡ ΠΈ ΠΏΡΠΈ ΠΈΡ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠΎΡΠΌ ΡΠ°Π±ΠΎΡΡ.
- ΠΡΠ»ΠΈ Π½Π°Π±Π»ΡΠ΄Π°ΡΡΡΡ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΡ Π² ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ , ΡΠΎ Π½Π° ΡΡΠΈ ΠΎΡΠ»ΠΈΡΠΈΡ Π·Π°ΠΊΡΡΠ²Π°ΡΡ Π³Π»Π°Π·Π°. ΠΠΎΠΏΡΠΎΡΡΡ Π³ΠΎΠ²ΠΎΡΡ, Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΈΡΠΏΡΠ°Π²Π»ΡΡΡ. ΠΠΎΡΠ΅ΡΠΈΡΠ΅Π»ΠΈ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΏΠΎΠΏΠΈΠΊΡΠ΅Π»ΡΠ½ΠΎ ΡΡΠ°Π²Π½ΠΈΠ²Π°ΡΡ ΡΠ°ΠΉΡ Π² ΡΠ°Π·Π½ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ . ΠΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠ³ΠΎΠ²ΠΎΡΠΊΡ, ΡΡΠΎ ΡΠ°ΠΉΡ Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ ΠΈ Π±Π΅Π· ΠΎΡΠΈΠ±ΠΎΠΊ.
- ΠΡΠ»ΠΈ Ρ ΡΠ°ΠΉΡΠ° ΠΈΠΌΠ΅ΡΡΡΡ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΡΠ΅ ΡΠ°Π·Π»ΠΈΡΠΈΡ ΠΏΡΠΈ Π΅Π³ΠΎ ΠΏΠΎΠΊΠ°Π·Π΅ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ Π΄ΡΡΠ³ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅, ΡΠΎ Π΄Π»Ρ ΠΈΡ ΡΡΡΡΠ°Π½Π΅Π½ΠΈΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ Ρ Π°ΠΊΠΈ.
Π₯Π°ΠΊ β ΡΡΠΎ Π½Π°Π±ΠΎΡ ΠΏΡΠΈΠ΅ΠΌΠΎΠ², ΠΊΠΎΠ³Π΄Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ½Π½ΠΎΠΌΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ Β«ΠΏΠΎΠ΄ΡΠΎΠ²ΡΠ²Π°ΡΡΒ» ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΈΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠΌ, Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΠΌΠΈ ΠΈΠ³Π½ΠΎΡΠΈΡΡΠ΅ΡΡΡ.
ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Ρ Π°ΠΊΠΈ ΡΠ°Π±ΠΎΡΠ°ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½Π½ΠΎ ΠΈΠ»ΠΈ Π²ΠΎΠΎΠ±ΡΠ΅ ΠΎΠ±Ρ ΠΎΠ΄ΠΈΡΡΡΡ Π±Π΅Π· Π½ΠΈΡ . ΠΠ΅Π»ΠΎ Π² ΡΠΎΠΌ, ΡΡΠΎ Ρ Π°ΠΊΠΈ ΡΠ½ΠΈΠΆΠ°ΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΡΡΡ ΠΊΠΎΠ΄Π° ΠΈ Π΄Π»Ρ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈΡ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΠΎΡΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π² ΡΠ°Π·Π½ΡΡ ΠΌΠ΅ΡΡΠ°Ρ .
ΠΡΡΡ ΠΈ Π΄ΡΡΠ³ΠΎΠΉ, ΠΏΠ΅ΡΡΠΏΠ΅ΠΊΡΠΈΠ²Π½ΡΠΉ ΠΏΡΡΡΒ β ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΈ CSS. ΠΠ΅ΡΠΌΠΎΡΡΡ Π½Π° ΡΠΎ, ΡΡΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΡ Π½Π΅ Π² ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΌΠ΅ΡΠ΅ ΡΠ°ΠΌΠΈ Π΅Ρ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°ΡΡ, ΠΎΠ½ΠΈ ΠΏΡΠΎΠ³ΡΠ΅ΡΡΠΈΡΡΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π² Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠΈ ΠΏΠΎΠ»Π½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ (HTML, CSS, DOM). Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ, ΡΡΠΎ Π±ΡΠ΄ΡΡΠΈΠ΅ Π²Π΅ΡΡΠΈΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² Π±ΡΠ΄ΡΡ ΡΠ½ΠΈΡΠΈΡΠΈΡΠΎΠ²Π°Π½Ρ ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ ΡΠ°ΠΉΡ ΡΡΠ°Π½ΡΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎ.
Π‘Π½ΠΎΠ²Π° Π²Π΅ΡΠ½Π΅ΠΌΡΡ ΠΊ ΡΠ»ΠΎΡΠΌ. ΠΠΎΠ½ΡΡΠ½ΠΎ, ΡΡΠΎ ΠΎΠ½ΠΈ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΡΠ²ΡΠ·Π°Π½Ρ ΡΠΎ ΡΡΠΈΠ»ΡΠΌΠΈ. Π Π°Π· ΡΠ°ΠΊ, ΡΠΎ Π½Π΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ Π»ΠΈ, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ HTML-ΠΊΠΎΠ΄Π°, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π΄ΠΎΠ±Π°Π²Π»ΡΡΡΡΡ ΡΡΠΈΠ»ΠΈ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠ»ΠΎΠ΅ΠΌ? Π ΠΊΠ°ΠΊΠΎΠΌ-ΡΠΎ ΡΠΌΡΡΠ»Π΅ ΡΠ°ΠΊ ΠΈ Π΅ΡΡΡ. ΠΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ Π²Π½Π΅ΡΠ»ΠΎ Π±Ρ ΠΈΠ·ΡΡΠ΄Π½ΡΡ ΠΏΡΡΠ°Π½ΠΈΡΡ, Π΅ΡΠ»ΠΈ Π²ΠΌΠ΅ΡΡΠΎ Β«ΡΠ°Π±Π»ΠΈΡΠ°Β» ΠΈΠ»ΠΈ Β«Π°Π±Π·Π°ΡΒ» ΠΌΡ Π±Ρ Π³ΠΎΠ²ΠΎΡΠΈΠ»ΠΈ Β«ΡΠ»ΠΎΠΉΒ». ΠΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΡ ΡΡΠΎΡ ΡΠ΅ΡΠΌΠΈΠ½ ΡΠΎΠ»ΡΠΊΠΎ ΠΊ ΡΠ΅Π³Π°ΠΌ <div>.
Π HTML4 ΠΈ XHTML ΡΠ»ΠΎΠΉ β ΡΡΠΎ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎΠ·Π΄Π°Π½Π½ΡΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° <div>, ΠΊ ΠΊΠΎΡΠΎΡΠΎΠΌΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΡΠΈΠ»Π΅Π²ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅.
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Β«Π±Π»ΠΎΡΠ½Π°Ρ Π²ΡΡΡΡΠΊΠ°Β» ΠΈΠ»ΠΈ Π²ΡΡΡΡΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»ΠΎΡΠ² Π·Π°ΠΊΠ»ΡΡΠ°Π΅ΡΡΡ Π² ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΠ²Π½ΠΎΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅Π³ΠΎΠ² <div> ΠΈ ΡΡΠΈΠ»Π΅ΠΉ. ΠΡΠΈ ΡΡΠΎΠΌ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΠΏΡΠΈΠ½ΡΠΈΠΏΠΎΠ².
Π Π°Π·Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ ΠΈ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ
ΠΠΎΠ΄ HTML Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π³ΠΈ ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ ΠΈ ΡΠ΅Π³ΠΈ Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, Π° Π»ΡΠ±ΠΎΠ΅ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ Π²ΡΠ½ΠΎΡΠΈΡΡΡ Π·Π° ΠΏΡΠ΅Π΄Π΅Π»Ρ ΠΊΠΎΠ΄Π° Π² ΡΡΠΈΠ»ΠΈ. Π’Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π½Π΅Π·Π°Π²ΠΈΡΠΈΠΌΠΎ ΡΠΏΡΠ°Π²Π»ΡΡΡ Π²ΠΈΠ΄ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ Π½Π°Π΄ ΡΠ°ΠΉΡΠΎΠΌ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ, ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΡΠ²ΠΎΡ ΡΡΠ½ΠΊΡΠΈΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ . ΠΠΈΠ·Π°ΠΉΠ½Π΅Ρ, Π²Π΅ΡΡΡΠ°Π»ΡΡΠΈΠΊ ΠΈ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΡ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π½Π°Π΄ ΡΠ²ΠΎΠΈΠΌΠΈ Π·Π°Π΄Π°ΡΠ°ΠΌΠΈ Π°Π²ΡΠΎΠ½ΠΎΠΌΠ½ΠΎ, ΡΠ½ΠΈΠΆΠ°Ρ Π²ΡΠ΅ΠΌΡ Π½Π° ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΡ ΡΠ°ΠΉΡΠ°.
ΠΠΊΡΠΈΠ²Π½ΠΎΠ΅ ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ΅Π³Π° <div>
ΠΡΠΈ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²ΡΡΡΡΠΊΠ΅ ΡΡΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ½ΠΈΠ²Π΅ΡΡΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠ΅Π³Ρ <div>, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎ ΡΡΠ½ΠΊΡΠΈΠΉ. Π€Π°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΡΡΠΎ ΠΎΡΠ½ΠΎΠ²Π°, Π½Π° ΠΊΠΎΡΠΎΡΡΡ Β«Π½Π°Π²Π΅ΡΠΈΠ²Π°ΡΡΡΡΒ» ΡΡΠΈΠ»ΠΈ, ΠΏΡΠ΅Π²ΡΠ°ΡΠ°Ρ Π΅Ρ ΡΠΎ Π² ΠΈΠ³ΡΡΡΠΊΡ, ΡΠΎ Π² Π·Π²Π΅ΡΡΡΠΊΡ. Π‘ΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ Π½Π΅ Π·Π½Π°ΡΠΈΡ, ΡΡΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΡ ΡΠ΅Π³, Π½ΡΠΆΠ½ΠΎ Π²Π΅Π΄Ρ ΠΈ ΡΠΈΡΡΠ½ΠΊΠΈ Π²ΡΡΠ°Π²Π»ΡΡΡ ΠΈ ΠΎΡΠΎΡΠΌΠ»ΡΡΡ ΡΠ΅ΠΊΡΡ. ΠΠΎ ΠΏΡΠΈ Π²ΡΡΡΡΠΊΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»ΠΎΡΠ² ΡΠ΅Π³ <div> ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΈΡΠΏΠΈΡΠΈΠΊΠΎΠΌ Π²ΡΡΡΡΠΊΠΈ, Π΅Ρ Π±Π°Π·ΠΎΠ²ΡΠΌ ΡΡΠ½Π΄Π°ΠΌΠ΅Π½ΡΠΎΠΌ.
ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ ΡΡΠΎΠΌΡ ΡΠ΅Π³Ρ HTML-ΠΊΠΎΠ΄ ΡΠ°ΡΠΏΠ°Π΄Π°Π΅ΡΡΡ Π½Π° ΡΡΠ΄ ΡΡΡΠΊΠΈΡ Π½Π°Π³Π»ΡΠ΄Π½ΡΡ Π±Π»ΠΎΠΊΠΎΠ², ΠΊΠΎΠ΄ ΠΏΡΠΈ ΡΡΠΎΠΌ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΠΎΠΌΠΏΠ°ΠΊΡΠ½ΡΠΌ, ΡΠ΅ΠΌ ΠΏΡΠΈ ΡΠ°Π±Π»ΠΈΡΠ½ΠΎΠΉ Π²ΡΡΡΡΠΊΠ΅, ΠΊ ΡΠΎΠΌΡ ΠΆΠ΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠ΅ ΡΠΈΡΡΠ΅ΠΌΡ Π΅Π³ΠΎ Π»ΡΡΡΠ΅ ΠΈΠ½Π΄Π΅ΠΊΡΠΈΡΡΡΡ.
Π’Π°Π±Π»ΠΈΡΡ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ΠΈΡ ΡΠ°Π±Π»ΠΈΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ
ΠΡΠΈ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²ΡΡΡΡΠΊΠ΅, ΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΠΆΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΠ°Π±Π»ΠΈΡΡ, Π½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ΅Ρ ΡΠ»ΡΡΠ°ΡΡ , ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ Π½ΡΠΆΠ½Ρ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΠ³ΠΎ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΠΈΡΠ΅Π» ΠΈ Π΄ΡΡΠ³ΠΈΡ ΡΠ°Π±Π»ΠΈΡΠ½ΡΡ Π΄Π°Π½Π½ΡΡ . ΠΠ°ΡΠΈΠ°Π½Ρ, ΠΊΠΎΠ³Π΄Π° ΠΎΡ ΡΠ°Π±Π»ΠΈΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΡΡΡ ΠΎΡΠΊΠ°Π·Π°ΡΡΡΡ Π²ΠΎΠΎΠ±ΡΠ΅, ΡΠ²Π»ΡΠ΅ΡΡΡ Π½Π΅ΡΠ΅Π»Π΅ΡΠΎΠΎΠ±ΡΠ°Π·Π½ΡΠΌ ΠΈ, Π±ΠΎΠ»Π΅Π΅ ΡΠΎΠ³ΠΎ, Π²ΡΠ΅Π΄Π½ΡΠΌ.
ΠΠΎΠ΄Π²Π΅Π΄Ρ ΠΈΡΠΎΠ³ΠΈ. Π HTML4 ΠΈ XHTML ΡΠ»ΠΎΠΉ ΡΡΠΎ Π±Π°Π·ΠΎΠ²ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΡΡΡΠΊΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ, ΠΏΡΠΈ ΠΊΠΎΡΠΎΡΠΎΠΉ Π°ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ ΡΡΠΈΠ»ΠΈ ΠΈ ΠΏΡΠΈΠ΄Π΅ΡΠΆΠΈΠ²Π°ΡΡΡΡ ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΠΉ HTML ΠΈ CSS. ΠΡΠΈ ΡΠ°ΠΊΠΎΠΌ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π΅ Π²Π°ΠΆΠ½Π°Ρ ΡΠΎΠ»Ρ ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΡΠ΅Π³Ρ <div>, Ρ ΠΊΠΎΡΠΎΡΡΠΌ Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° Π»ΡΠ΄Π΅ΠΉ ΠΈ Π°ΡΡΠΎΡΠΈΠΈΡΡΡΡΡΡ ΡΠ»ΠΎΠΈ. Π ΠΊΠ°ΠΊΠΎΠΌ-ΡΠΎ ΡΠΌΡΡΠ»Π΅ ΡΡΠΎ ΡΠ²Π»ΡΠ΅ΡΡΡ Π²Π΅ΡΠ½ΡΠΌ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΠ³ΠΎΠ²ΠΎΡΠΈΠΌΡΡ Π² Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ ΡΠΏΠΎΡΡΠ΅Π±Π»ΡΡΡ ΡΠ΅ΡΠΌΠΈΠ½ Β«ΡΠ»ΠΎΠΉΒ» ΠΊ ΡΠ΅Π³Ρ <div> Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΊΠ°Π·Π°Π½ ΡΡΠΈΠ»Π΅Π²ΠΎΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ ΠΈΠ»ΠΈ ΠΊΠ»Π°ΡΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²ΡΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Β«ΡΠ»ΠΎΠΉ Ρ ΠΈΠΌΠ΅Π½Π΅ΠΌ contentΒ» ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅Ρ, ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠ΅Π³ <div> ΠΈΠ»ΠΈ <div >.
Π HTML5 Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π½ΠΎΠ²ΡΡ ΡΠ΅Π³ΠΎΠ² ΡΠ°Π·ΠΌΠ΅ΡΠΊΠΈ Π΄Π»Ρ ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠ°Π·Π½ΡΡ ΡΠΈΠΏΠΎΠ²ΡΡ Π±Π»ΠΎΠΊΠΎΠ² ΡΡΡΠ°Π½ΠΈΡΡ. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, <header> ΠΈ <footer> ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Β«ΡΠ°ΠΏΠΊΠΈΒ» ΠΈ Β«ΠΏΠΎΠ΄Π²Π°Π»Π°Β», <nav> Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, <aside> Π΄Π»Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. ΠΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ Π² ΡΠΏΠ΅ΡΠΈΡΠΈΠΊΠ°ΡΠΈΡ HTML ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΡΠΈΠ·Π²Π°Π½ΠΎ ΡΠ½ΠΈΠ·ΠΈΡΡ Π΄ΠΎΠΌΠΈΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ΅Π³Π° <div> ΠΈ ΠΏΡΠΈΠ΄Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΡΠΌΡΡΠ»Π° ΡΠ°Π·ΠΌΠ΅ΡΠΊΠ΅. ΠΠΎΡΡΠΎΠΌΡ Π² Π²ΡΡΡΡΠΊΠ΅ Π½Π° HTML5 Π°ΠΊΡΠΈΠ²Π½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΠ΅ΡΡΡ ΡΠ΅ΡΠΌΠΈΠ½ Β«ΡΠ»Π΅ΠΌΠ΅Π½ΡΒ», ΠΏΠΎΠ΄ ΠΊΠΎΡΠΎΡΡΠΌ ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅ΡΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ΅Π³ ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠ½ ΡΠΎΠ·Π΄Π°ΡΡ.
ΠΠ·Π»ΠΎΠΆΠ΅Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΠΏΡΠΈΠ½ΡΠΈΠΏΡ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²ΡΡΡΡΠΊΠΈ ΠΏΡΠΈ ΡΡΠΎΠΌ ΡΠΎΡ ΡΠ°Π½ΡΡΡΡΡ Π·Π° ΠΈΡΠΊΠ»ΡΡΠ΅Π½ΠΈΠ΅ΠΌ ΡΠΎΠ³ΠΎ ΠΌΠΎΠΌΠ΅Π½ΡΠ°, ΡΡΠΎ <div> Π² Π½Π΅ΠΊΠΎΡΠΎΡΡΡ ΡΠ»ΡΡΠ°ΡΡ Π·Π°ΠΌΠ΅Π½ΡΠ΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΎΡΠΌΡΡΠ»Π΅Π½Π½ΡΠΌΠΈ ΡΠ΅Π³Π°ΠΌΠΈ.
Shiny — Π ΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²ΠΎ ΠΏΠΎ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
ΠΠ±Π·ΠΎΡ
Shiny Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΡΡΠ΄ ΡΡΠ΅Π΄ΡΡΠ² Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ ΠΎΠΏΠΈΡΠ°Π½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ:
ΠΡΠΎΡΡΠΎΠΉ ΠΌΠ°ΠΊΠ΅Ρ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ Π΄Π»Ρ Π²Π²ΠΎΠ΄Π° ΠΈ Π±ΠΎΠ»ΡΡΠΎΠΉ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΡΡ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π°.
ΠΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΠΈΡΡΠ΅ΠΌΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Shiny grid.
Π‘Π΅Π³ΠΌΠ΅Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΉ
tabsetPanel ()
ΠΈnavlistPanel ()
.Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°ΠΌΠΈ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ
navbarPage ()
.
ΠΡΠΈ ΡΡΠ½ΠΊΡΠΈΠΈ Π±ΡΠ»ΠΈ ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΠΉ ΠΌΠ°ΠΊΠ΅ΡΠ°, Π΄ΠΎΡΡΡΠΏΠ½ΡΡ Π² Bootstrap 2, ΡΡΠ΅Π·Π²ΡΡΠ°ΠΉΠ½ΠΎ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΌ ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ΅ HTML / CSS (Ρ ΠΎΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΎΠΏΡΡ ΡΠ°Π±ΠΎΡΡ Ρ Bootstrap Π½Π΅ ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ).
ΠΠ°ΠΊΠ΅Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ
ΠΠ°ΠΊΠ΅Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ — ΠΏΠΎΠ»Π΅Π·Π½Π°Ρ ΠΎΡΠΏΡΠ°Π²Π½Π°Ρ ΡΠΎΡΠΊΠ° Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ Π΄Π»Ρ Π²Π²ΠΎΠ΄Π° ΠΈ Π±ΠΎΠ»ΡΡΡΡ ΠΎΡΠ½ΠΎΠ²Π½ΡΡ ΠΎΠ±Π»Π°ΡΡΡ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π°:
ΠΠΎΡ ΠΊΠΎΠ΄, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½Π½ΡΠΉ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°:
ui <- fluidPage (
titlePanel ("ΠΡΠΈΠ²Π΅Ρ, ΡΠΈΡΡΡΠΈΠΉ!"),
sidebarLayout (
sidebarPanel (
sliderInput ("obs", "ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π½Π°Π±Π»ΡΠ΄Π΅Π½ΠΈΠΉ:",
ΠΌΠΈΠ½ = 1, ΠΌΠ°ΠΊΡ = 1000, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ = 500)
),
mainPanel (
plotOutput ("distPlot")
)
)
)
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ»Π΅Π²Π° (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ) ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ ΠΎΠ±Π»Π°ΡΡΠΈ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΡΠΏΡΠ°Π²Π°, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΊΠΎΠ΄:
sidebarLayout (position = "right",
sidebarPanel (
# ΠΡ
ΠΎΠ΄Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Ρ Π΄Π»Ρ ΠΊΡΠ°ΡΠΊΠΎΡΡΠΈ
),
mainPanel (
# ΠΡΡ
ΠΎΠ΄Ρ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Ρ Π΄Π»Ρ ΠΊΡΠ°ΡΠΊΠΎΡΡΠΈ
)
)
Π‘Ρ Π΅ΠΌΠ° ΡΠ΅ΡΠΊΠΈ
ΠΠ½Π°ΠΊΠΎΠΌΡΠΉ sidebarLayout ()
, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΠΉ Π²ΡΡΠ΅, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ ΡΡΠ½ΠΊΡΠΈΠΈ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΈ ΡΠ΅ΡΠΊΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ Shiny. Π‘ΡΡΠΎΠΊΠΈ ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ fluidRow ()
ΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ ΡΡΠΎΠ»Π±ΡΡ, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ column ()
.Π¨ΠΈΡΠΈΠ½Π° ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΎΡΠ½ΠΎΠ²Π°Π½Π° Π½Π° 12-ΡΠ°Π·ΡΡΠ΄Π½ΠΎΠΉ ΡΠ΅ΡΠΎΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅ Bootstrap, ΠΏΠΎΡΡΠΎΠΌΡ Π² ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ΅ fluidRow ()
Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ»ΡΡΠΈΡΡΡΡ 12.
ΠΠ»Ρ ΠΈΠ»Π»ΡΡΡΡΠ°ΡΠΈΠΈ, Π²ΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, ΡΠ΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΡΠΉ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΠΉ fluidRow (),
, column (),
ΠΈ wellPanel ()
:
ui <- fluidPage (
titlePanel ("ΠΡΠΈΠ²Π΅Ρ, ΡΠΈΡΡΡΠΈΠΉ!"),
FluidRow (
ΡΡΠΎΠ»Π±Π΅Ρ (4,
wellPanel (
sliderInput ("obs", "ΠΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π½Π°Π±Π»ΡΠ΄Π΅Π½ΠΈΠΉ:",
ΠΌΠΈΠ½ = 1, ΠΌΠ°ΠΊΡ = 1000, Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ = 500)
)
),
ΡΡΠΎΠ»Π±Π΅Ρ (8,
plotOutput ("distPlot")
)
)
)
ΠΠ΅ΡΠ²ΡΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠΌ ΡΡΠ½ΠΊΡΠΈΠΈ column ()
ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΈΡΠΈΠ½Π° (ΠΈΠ· 12 ΡΡΠΎΠ»Π±ΡΠΎΠ²).Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ ΡΡΠΎΠ»Π±ΡΡ Π²ΠΏΡΠ°Π²ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
ΠΊ ΡΡΠ½ΠΊΡΠΈΠΈ column ()
. ΠΠ°ΠΆΠ΄Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΡΡΠΎΠ»Π±ΡΠ° Π½Π° ΡΠ΅Π»ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° Ρ Π³ΡΠ°ΡΠΈΠΊΠΎΠΌ Π²Π²Π΅ΡΡ Ρ ΠΈ ΡΡΠ΅ΠΌΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ Π²Π½ΠΈΠ·Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ Π²Ρ ΠΎΠ΄Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅, ΡΠΏΡΠ°Π²Π»ΡΡΡΠΈΠ΅ Π³ΡΠ°ΡΠΈΠΊΠΎΠΌ:
ΠΠ»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° (Π±Π»Π΅ΡΡΡΡΠ°Ρ)
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° (ggplot2)
Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ
<- Π±ΡΠΈΠ»Π»ΠΈΠ°Π½ΡΡ
ui <- fluidPage (
title = "ΠΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»Ρ Π±ΡΠΈΠ»Π»ΠΈΠ°Π½ΡΠΎΠ²",
plotOutput ('ΡΡΠΆΠ΅Ρ'),
ΡΠ°Ρ (),
FluidRow (
ΡΡΠΎΠ»Π±Π΅Ρ (3,
h5 ("ΠΡΡΠ»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»Ρ Π°Π»ΠΌΠ°Π·ΠΎΠ²"),
sliderInput ('ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠ±ΡΠ°Π·ΡΠ°', 'Π Π°Π·ΠΌΠ΅Ρ ΠΎΠ±ΡΠ°Π·ΡΠ°',
min = 1, max = nrow (Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ
), value = min (1000, nrow (Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ
)),
ΡΠ°Π³ = 500, ΡΠ°ΡΠ½Π΄ = 0),
br (),
checkboxInput ('jitter', 'Jitter'),
checkboxInput ('Π³Π»Π°Π΄ΠΊΠΈΠΉ', 'Π³Π»Π°Π΄ΠΊΠΈΠΉ')
),
ΡΡΠΎΠ»Π±Π΅Ρ (4, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ = 1,
selectInput ('x', 'X', ΠΈΠΌΠ΅Π½Π° (Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ
)),
selectInput ('y', 'Y', ΠΈΠΌΠ΅Π½Π° (Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ
), ΠΈΠΌΠ΅Π½Π° (Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ
) [[2]]),
selectInput ('ΡΠ²Π΅Ρ', 'Π¦Π²Π΅Ρ', c ('ΠΠ΅Ρ', ΠΈΠΌΠ΅Π½Π° (Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ
)))
),
ΡΡΠΎΠ»Π±Π΅Ρ (4,
selectInput ('facet_row', 'Facet Row', c (None = '.', ΠΈΠΌΠ΅Π½Π° (Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ
))),
selectInput ('facet_col', 'Facet Column', c (None = '.', names (Π½Π°Π±ΠΎΡ Π΄Π°Π½Π½ΡΡ
)))
)
)
)
ΠΠ΄Π΅ΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΎΡΠΌΠ΅ΡΠΈΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΆΠ½ΡΡ ΠΌΠΎΠΌΠ΅Π½ΡΠΎΠ²:
ΠΡ ΠΎΠ΄Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π½Π°Ρ ΠΎΠ΄ΡΡΡΡ Π²Π½ΠΈΠ·Ρ ΠΈ ΡΠ°Π·Π±ΠΈΡΡ Π½Π° ΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠ° ΡΠ°Π·Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ.
ΠΠ°ΡΠ°ΠΌΠ΅ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ
Π‘ΡΡΠ°Π½ΠΈΡΠ° Π½Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ
titlePanel ()
, ΠΏΠΎΡΡΠΎΠΌΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΠΊΠ°Π·Π°Π½ ΠΊΠ°ΠΊ ΡΠ²Π½ΡΠΉ Π°ΡΠ³ΡΠΌΠ΅Π½Ρ Π΄Π»ΡfluidPage ()
.
ΠΠ°ΠΊΠ΅ΡΡ ΡΠ΅ΡΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ Π³Π΄Π΅ ΡΠ³ΠΎΠ΄Π½ΠΎ Π² ΠΏΡΠ΅Π΄Π΅Π»Π°Ρ
fluidPage ()
ΠΈ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²Π»ΠΎΠΆΠ΅Π½Ρ Π΄ΡΡΠ³ Π² Π΄ΡΡΠ³Π°. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ°Ρ
ΡΠ΅ΡΠΊΠΈ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Β«ΠΠ»ΡΠ±ΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅ΡΠΎΠ² ΡΠ΅ΡΠΊΠΈΒ» Π½ΠΈΠΆΠ΅.
ΠΠ°Π±ΠΎΡΡ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ
Π§Π°ΡΡΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡΠΌ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ ΡΠ²ΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ Π½Π° ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ. ΠΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ tabsetPanel ()
. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
ΠΠΎΠ΄, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°:
ui <- fluidPage (
titlePanel ("ΠΠ°Π±ΠΎΡΡ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ"),
sidebarLayout (
sidebarPanel (
# ΠΡ
ΠΎΠ΄Π½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΈΡΠΊΠ»ΡΡΠ΅Π½Ρ Π΄Π»Ρ ΠΊΡΠ°ΡΠΊΠΎΡΡΠΈ
),
mainPanel (
tabsetPanel (
tabPanel ("Π£ΡΠ°ΡΡΠΎΠΊ", plotOutput ("ΡΡΠ°ΡΡΠΎΠΊ")),
tabPanel ("Π‘Π²ΠΎΠ΄ΠΊΠ°", verbatimTextOutput ("ΡΠ²ΠΎΠ΄ΠΊΠ°")),
tabPanel ("Π’Π°Π±Π»ΠΈΡΠ°", tableOutput ("ΡΠ°Π±Π»ΠΈΡΠ°"))
)
)
)
)
ΠΠΊΠ»Π°Π΄ΠΊΠΈ ΠΌΠΎΠ³ΡΡ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ Π²ΡΡΠ΅ (ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ), Π½ΠΈΠΆΠ΅, ΡΠ»Π΅Π²Π° ΠΈΠ»ΠΈ ΡΠΏΡΠ°Π²Π° ΠΎΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ.ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ ΠΏΠΎΠ΄ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΡΠΌ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΠΎΡ ΠΊΠΎΠ΄:
tabsetPanel (position = "Π½ΠΈΠΆΠ΅",
tabPanel ("Π£ΡΠ°ΡΡΠΎΠΊ", plotOutput ("ΡΡΠ°ΡΡΠΎΠΊ")),
tabPanel ("Π‘Π²ΠΎΠ΄ΠΊΠ°", verbatimTextOutput ("ΡΠ²ΠΎΠ΄ΠΊΠ°")),
tabPanel ("Π’Π°Π±Π»ΠΈΡΠ°", tableOutput ("ΡΠ°Π±Π»ΠΈΡΠ°"))
)
ΠΠ°Π²Π»ΠΈΡΡΡ
ΠΠΎΠ³Π΄Π° Ρ Π²Π°Ρ Π±ΠΎΠ»ΡΡΠ΅, ΡΠ΅ΠΌ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ tabPanel, navlistPanel ()
ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Ρ
ΠΎΡΠΎΡΠ΅ΠΉ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²ΠΎΠΉ tabsetPanel ()
. ΠΠ°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΠ΅Ρ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΡ Π² Π²ΠΈΠ΄Π΅ ΡΠΏΠΈΡΠΊΠ° Π½Π° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, Π° Π½Π΅ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ Π²ΠΊΠ»Π°Π΄ΠΎΠΊ.ΠΠ½ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ ΡΠ°Π·Π΄Π΅Π»ΠΎΠ² ΠΈ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΠ΅Π»ΠΈ Π΄Π»Ρ Π±ΠΎΠ»Π΅Π΅ Π΄Π»ΠΈΠ½Π½ΡΡ
ΡΠΏΠΈΡΠΊΠΎΠ². ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ navlistPanel ()
:
ΠΠΎΠ΄, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠΉ Π΄Π»Ρ ΡΠ΅Π°Π»ΠΈΠ·Π°ΡΠΈΠΈ ΡΡΠΎΠ³ΠΎ, Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ (ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ tabPanels ΠΏΡΡΡΡ, ΡΡΠΎΠ±Ρ Π½Π΅ ΠΏΠ΅ΡΠ΅Π³ΡΡΠΆΠ°ΡΡ ΠΏΡΠΈΠΌΠ΅Ρ, ΠΎΠ±ΡΡΠ½ΠΎ ΠΎΠ½ΠΈ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°):
ui <- fluidPage (
titlePanel ("ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ"),
navlistPanel (
"ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π",
tabPanel ("ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ 1"),
tabPanel ("ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ 2"),
"ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ B",
tabPanel ("ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ 3"),
tabPanel (Β«ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ 4Β»),
"-----",
tabPanel (Β«ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ 5Β»)
)
)
Π‘ΡΡΠ°Π½ΠΈΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Shiny, ΡΠΎΡΡΠΎΡΡΠ΅Π΅ ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ
ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΡ
ΠΏΠΎΠ΄ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² (ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠΎ ΡΠ²ΠΎΠ΅ΠΉ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠΉ Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ, Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠΌΠΈ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΈΡΠΌΠΈ ΠΌΠ°ΠΊΠ΅ΡΠ°).Π€ΡΠ½ΠΊΡΠΈΡ navbarPage ()
ΡΠΎΠ·Π΄Π°Π΅Ρ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Bootstrap Π²Π²Π΅ΡΡ
Ρ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ:
ui <- navbarPage (Β«ΠΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β»,
tabPanel ("ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ 1"),
tabPanel ("ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ 2"),
tabPanel (Β«ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ 3Β»)
)
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Shiny tabPanel ()
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ², ΠΏΠΎ ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΠ°ΡΡΡΡ.
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ Π²ΡΠΎΡΠΎΠΉ ΡΡΠΎΠ²Π΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΡΠ½ΠΊΡΠΈΡ navbarMenu ()
.ΠΡΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΠΌΠ΅Π½Ρ ΠΊ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ Π²Π΅ΡΡ
Π½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅, Π² ΡΠ²ΠΎΡ ΠΎΡΠ΅ΡΠ΅Π΄Ρ, ΠΌΠΎΠΆΠ΅Ρ ΡΡΡΠ»Π°ΡΡΡΡ Π½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ tabPanels.
ui <- navbarPage (Β«ΠΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β»,
tabPanel ("ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ 1"),
tabPanel ("ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ 2"),
navbarMenu ("ΠΡΠ΅",
tabPanel (Β«ΠΠΎΠ΄ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ AΒ»),
tabPanel (Β«ΠΠΎΠ΄ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ BΒ»))
)
ΠΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΎΠΏΡΠΈΠΈ
ΠΡΡΡ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Π΄ΡΡΠ³ΠΈΡ
Π°ΡΠ³ΡΠΌΠ΅Π½ΡΠΎΠ² Π΄Π»Ρ navbarPage ()
, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°ΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ ΠΌΠ΅ΡΡ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ:
ΠΡΠ³ΡΠΌΠ΅Π½Ρ | ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ |
---|---|
Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ | Π’Π΅Π³ ΡΠΏΠΈΡΠΊΠ° ΡΠ΅Π³ΠΎΠ² Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π²ΠΈΠ΄Π΅ ΠΎΠ±ΡΠ΅Π³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π½Π°Π΄ Π²ΡΠ΅ΠΌΠΈ tabPanels. |
Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» | Π’Π΅Π³ ΠΈΠ»ΠΈ ΡΠΏΠΈΡΠΎΠΊ ΡΠ΅Π³ΠΎΠ² Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π²ΠΈΠ΄Π΅ ΠΎΠ±ΡΠ΅Π³ΠΎ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π° ΠΏΠΎΠ΄ Π²ΡΠ΅ΠΌΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΠ°ΠΌΠΈ |
ΠΎΠ±ΡΠ°ΡΠ½ΠΎΠ΅ | TRUE Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΎΠ½Π° ΠΈ ΡΠ²Π΅ΡΠ»ΠΎΠ³ΠΎ ΡΠ΅ΠΊΡΡΠ° Π΄Π»Ρ ΠΏΠ°Π½Π΅Π»ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ |
ΡΠ°Π·Π±ΠΎΡΠ½Π°Ρ | TRUE Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ²ΠΎΡΠ°ΡΠΈΠ²Π°Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Π² ΠΌΠ΅Π½Ρ, ΠΊΠΎΠ³Π΄Π° ΡΠΈΡΠΈΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΌΠ΅Π½ΡΡΠ΅ 940 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ (ΠΏΠΎΠ»Π΅Π·Π½ΠΎ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½Π° Π½Π΅Π±ΠΎΠ»ΡΡΠΈΡ
ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ
Ρ ΡΠ΅Π½ΡΠΎΡΠ½ΡΠΌ ΡΠΊΡΠ°Π½ΠΎΠΌ) |
ΠΠ»ΡΠ±ΠΈΠ½Π½ΡΠ΅ ΠΌΠ°ΠΊΠ΅ΡΡ ΡΠ΅ΡΠΊΠΈ
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΡΠΈΠΏΠ° ΡΠ΅ΡΠΎΠΊ Bootstrap: ΠΏΠ»Π°Π²Π½ΡΠ΅ ΠΈ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅.Π ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
Π΄ΠΎ ΡΠΈΡ
ΠΏΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»Π°ΡΡ ΠΈΡΠΊΠ»ΡΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΈΡΡΠ΅ΠΌΠ° Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠΈ, ΠΈ ΡΡΠ° ΡΠΈΡΡΠ΅ΠΌΠ° ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ Π΄Π»Ρ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ (ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ ΡΡΠ½ΠΊΡΠΈΠΉ Shiny, ΡΠ°ΠΊΠΈΡ
ΠΊΠ°ΠΊ navbarPage ()
ΠΈ sidebarLayout ()
).
ΠΠ±Π΅ ΡΠΈΡΡΠ΅ΠΌΡ ΡΠ΅ΡΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π³ΠΈΠ±ΠΊΠΎ ΡΠ°Π·Π΄Π΅Π»ΡΠ΅ΠΌΡΡ ΡΠ΅ΡΠΊΡ ΠΈΠ· 12 ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄Π»Ρ ΠΌΠ°ΠΊΠ΅ΡΠ°. ΠΠΈΠ±ΠΊΠ°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° Π²ΡΠ΅Π³Π΄Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ ΠΈΠ·ΠΌΠ΅Π½ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ Π΅Π΅ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² ΠΏΠΎ ΠΌΠ΅ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΡΡΠ°Π½ΠΈΡΡ. Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠΈΡΡΠ΅ΠΌΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ 940 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΌΠΎΠΆΠ΅Ρ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΠΈΡΠΈΠ½Ρ, ΠΊΠΎΠ³Π΄Π° ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Bootstrap (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ,Π³. ΠΊΠΎΠ³Π΄Π° Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ΅).
Π‘Π»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ°Π·Π΄Π΅Π»Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ±ΠΎΠΉ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΠΏΠΎ ΡΠ΅ΡΠΎΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΠ΅ Bootstrap 2, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΊΠΎΠ΄ HTML Π·Π°ΠΌΠ΅Π½Π΅Π½ Π½Π° ΠΊΠΎΠ΄ R.
ΠΠΈΠ΄ΠΊΠΎΡΡΠ½Π°Ρ ΡΠ΅ΡΠΊΠ°
Π‘Π΅ΡΠΊΠ° Bootstrap ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ 12 ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΠΌΠΎΠΆΠ½ΠΎ Π³ΠΈΠ±ΠΊΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π° ΡΡΡΠΎΠΊΠΈ ΠΈ ΡΡΠΎΠ»Π±ΡΡ. Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ Π½Π° ΠΎΡΠ½ΠΎΠ²Π΅ ΠΆΠΈΠ΄ΠΊΠΎΡΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ, Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΡ fluidPage ()
. ΠΠ»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΡΠΎΠΊ Π² ΡΠ΅ΡΠΊΠ΅ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΡ fluidRow ()
; Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π²Π½ΡΡΡΠΈ ΡΡΡΠΎΠΊ Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΡ column ()
.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ ΡΡΠΎΠ²Π½Ρ (ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΠΌΡΠ΅ ΡΠΈΡΠ»Π° ΡΠ²Π»ΡΡΡΡΡ ΡΡΠΎΠ»Π±ΡΠ°ΠΌΠΈ ΠΈΠ· 12):
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Shiny, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ (ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΡΠΈΡΠΈΠ½Π° ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π² ΡΡΠΌΠΌΠ΅ ΡΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ 12):
ui <- fluidPage (
FluidRow (
ΡΡΠΎΠ»Π±Π΅Ρ (2,
"Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ"
),
ΡΡΠΎΠ»Π±Π΅Ρ (10,
"Π³Π»Π°Π²Π½ΡΠΉ"
)
)
)
Π‘ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½Π½Ρ
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΠ΅ΡΡΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΡΡΠΎΠ±Ρ Π΄ΠΎΠ±ΠΈΡΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΡΠΎΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»Ρ Π½Π°Π΄ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ°.ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΡΠΎΠ»Π±ΡΡ Π²ΠΏΡΠ°Π²ΠΎ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅
ΠΊ ΡΡΠ½ΠΊΡΠΈΠΈ column ()
. ΠΠ°ΠΆΠ΄Π°Ρ Π΅Π΄ΠΈΠ½ΠΈΡΠ° ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΠ²Π΅Π»ΠΈΡΠΈΠ²Π°Π΅Ρ Π»Π΅Π²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΡΡΠΎΠ»Π±ΡΠ° Π½Π° ΡΠ΅Π»ΡΠΉ ΡΡΠΎΠ»Π±Π΅Ρ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ:
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Shiny, Π²Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
ui <- fluidPage (
FluidRow (
ΡΡΠΎΠ»Π±Π΅Ρ (4,
Β«4Β»
),
ΡΡΠΎΠ»Π±Π΅Ρ (4, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ = 4,
Β«4 ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ 4Β»
)
),
FluidRow (
ΡΡΠΎΠ»Π±Π΅Ρ (3, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ = 3,
Β«3 ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ 3Β»
),
ΡΡΠΎΠ»Π±Π΅Ρ (3, ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ = 3,
Β«3 ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ 3Β»
)
)
)
ΠΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ»Π±ΡΠΎΠ²
ΠΠΎΠ³Π΄Π° Π²Ρ Π²ΠΊΠ»Π°Π΄ΡΠ²Π°Π΅ΡΠ΅ ΡΡΠΎΠ»Π±ΡΡ Π² ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡΡ ΡΠ΅ΡΠΊΡ, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π΄ΠΎ 12 ΡΡΠΎΠ»Π±ΡΠΎΠ².ΠΡΠΎ ΡΠ²ΡΠ·Π°Π½ΠΎ Ρ ΡΠ΅ΠΌ, ΡΡΠΎ Π΄Π»Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΠΈ ΡΠΈΡΠΈΠ½Ρ Π² Π³ΠΈΠ±ΠΊΠΎΠΉ ΡΠ΅ΡΠΊΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΠΏΡΠΎΡΠ΅Π½ΡΡ, Π° Π½Π΅ ΠΏΠΈΠΊΡΠ΅Π»ΠΈ. Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΡΡΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ ΡΡΡΠ°Π½ΠΈΡΡ:
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΠΎΡ ΠΌΠ°ΠΊΠ΅Ρ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Shiny, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
ui <- fluidPage (
FluidRow (
ΡΡΠΎΠ»Π±Π΅Ρ (12,
Β«ΠΠΈΠ΄ΠΊΠΎΡΡΡ 12Β»,
FluidRow (
ΡΡΠΎΠ»Π±Π΅Ρ (6,
Β«ΠΠΈΠ΄ΠΊΠΎΡΡΡ 6Β»,
FluidRow (
ΡΡΠΎΠ»Π±Π΅Ρ (6,
Β«ΠΠΈΠ΄ΠΊΠΎΡΡΡ 6Β»),
ΡΡΠΎΠ»Π±Π΅Ρ (6,
Β«ΠΠΈΠ΄ΠΊΠΎΡΡΡ 6Β»)
)
),
ΡΡΠΎΠ»Π±Π΅Ρ (ΡΠΈΡΠΈΠ½Π° = 6,
Β«ΠΠΈΠ΄ΠΊΠΎΡΡΡ 6Β»)
)
)
)
)
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° Π²Π²ΠΎΠ΄ΠΈΡΡΡ fluidRow ()
, ΡΡΠΎΠ»Π±ΡΡ Π² ΡΡΡΠΎΠΊΠ΅ ΡΠΊΠ»Π°Π΄ΡΠ²Π°ΡΡΡΡ Π² 12.
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠ΅ΡΡ
Π€ΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠ΅ΡΠΊΠ° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅Ρ 12 ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠΈΡΠΈΠ½Ρ 940 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ. ΠΡΠ»ΠΈ Π°ΠΊΡΠΈΠ²ΠΈΡΠΎΠ²Π°Π½Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠ΅ ΡΡΠ½ΠΊΡΠΈΠΈ Bootstrap (ΠΎΠ½ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π² Shiny), ΡΠΎ ΡΠ΅ΡΠΊΠ° ΡΠ°ΠΊΠΆΠ΅ Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ ΡΠΈΡΠΈΠ½Ρ 724 ΠΈΠ»ΠΈ 1170 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΎΠΊΠ½Π° ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π½Π° ΠΏΠ»Π°Π½ΡΠ΅ΡΠ΅).
ΠΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²ΠΎΠΌ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎ, ΡΡΠΎ ΠΎΠ½Π° ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅Ρ Π±ΠΎΠ»Π΅Π΅ Π½Π°Π΄Π΅ΠΆΠ½ΡΠ΅ Π³Π°ΡΠ°Π½ΡΠΈΠΈ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΠΈ Π±ΡΠ΄ΡΡ Π²ΠΈΠ΄Π΅ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡΠ° (ΡΡΠΎ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ ΠΎΠ½Π° Π½Π΅ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π΄ΠΈΠ½Π°ΠΌΠΈΡΠ΅ΡΠΊΠΈ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ Π±ΡΠ°ΡΠ·Π΅ΡΠ°).ΠΠ»Π°Π²Π½ΡΠΉ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΎΠΊ Π² ΡΠΎΠΌ, ΡΡΠΎ Ρ Π½ΠΈΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ»ΠΎΠΆΠ½Π΅Π΅ ΡΠ°Π±ΠΎΡΠ°ΡΡ. ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΠΌΡ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠ΅ΡΠΊΠΈ, Π΅ΡΠ»ΠΈ ΡΠΎΠ»ΡΠΊΠΎ Π²Π°ΠΌ Π½Π΅ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠΎΠΌΠΏΠΎΠ½ΠΎΠ²ΠΊΠΎΠΉ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΡΡΠΎΠ²Π½Ρ, ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΠ²Π°Π΅ΠΌΠΎΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΎΠΉ.
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ΅ΡΠΎΠΊ
ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΡΠ΅ΡΠΎΠΊ Π² Shiny ΠΏΠΎΡΡΠΈ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½ΠΎ ΠΏΠ»Π°Π²Π½ΡΠΌ ΡΠ΅ΡΠΊΠ°ΠΌ. ΠΠΎΡ ΠΎΡΠ»ΠΈΡΠΈΡ, ΠΎ ΠΊΠΎΡΠΎΡΡΡ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΏΠΎΠΌΠ½ΠΈΡΡ:
ΠΠ»Ρ ΠΏΠΎΡΡΡΠΎΠ΅Π½ΠΈΡ ΡΠ΅ΡΠΊΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΠΈ
fixedPage ()
ΠΈfixedRow ()
.Π‘ΡΡΠΎΠΊΠΈ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΠΌΠΈ, Π½ΠΎ Π²ΡΠ΅Π³Π΄Π° Π΄ΠΎΠ»ΠΆΠ½Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π½Π°Π±ΠΎΡ ΡΡΠΎΠ»Π±ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π² ΡΡΠΌΠΌΠ΅ ΡΠ°Π²Π½ΡΡΡΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° (Π²ΠΌΠ΅ΡΡΠΎ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΡΠ±ΡΠ°ΡΡΠ²Π°ΡΡ Π΄ΠΎ 12 Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΡΡΠΈ, ΠΊΠ°ΠΊ ΡΡΠΎ Π΄Π΅Π»Π°Π΅ΡΡΡ Π² Π³ΠΈΠ±ΠΊΠΈΡ ΡΠ΅ΡΠΊΠ°Ρ ).
ΠΠΎΡ ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠ΅ΡΠΊΠΈ Π²Π΅ΡΡΠΈΠΈ ΠΏΡΠΎΡΡΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Π±ΠΎΠΊΠΎΠ²ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ, ΠΏΠΎΠΊΠ°Π·Π°Π½Π½ΠΎΠ³ΠΎ ΡΠ°Π½Π΅Π΅:
ui <- fixedPage (
fixedRow (
ΡΡΠΎΠ»Π±Π΅Ρ (2,
"Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ"
),
ΡΡΠΎΠ»Π±Π΅Ρ (10,
"Π³Π»Π°Π²Π½ΡΠΉ"
)
)
)
ΠΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠ»Π±ΡΠΎΠ²
Π ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
ΡΠ΅ΡΠΊΠ°Ρ
ΡΠΈΡΠΈΠ½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ³ΠΎ ΡΡΠΎΠ»Π±ΡΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠ°Π²Π½ΡΡΡΡΡ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² ΠΈΡ
ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅. ΠΠΎΡ fixedRow ()
ΡΠΎ ΡΡΠΎΠ»Π±ΡΠΎΠΌ ΡΠΈΡΠΈΠ½ΠΎΠΉ 9, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡ Π΄Π²Π° Π΄ΡΡΠ³ΠΈΡ
ΡΡΠΎΠ»Π±ΡΠ° ΡΠΈΡΠΈΠ½ΠΎΠΉ 6 ΠΈ 3:
Π§ΡΠΎΠ±Ρ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡ ΡΡΡΠΎΠΊΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Shiny, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄:
fixedRow (
ΡΡΠΎΠ»Π±Π΅Ρ (9,
Β«Π‘ΡΠΎΠ»Π±Π΅Ρ ΡΡΠΎΠ²Π½Ρ 1Β»,
fixedRow (
ΡΡΠΎΠ»Π±Π΅Ρ (6,
"Π£ΡΠΎΠ²Π΅Π½Ρ 2"
),
ΡΡΠΎΠ»Π±Π΅Ρ (3,
"Π£ΡΠΎΠ²Π΅Π½Ρ 2"
)
)
)
)
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΎΠ±ΡΠΈΠΉ ΡΠ°Π·ΠΌΠ΅Ρ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΡΠ°Π²Π΅Π½ 9, ΡΡΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΠΈΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΎΠΌΡ ΡΡΠΎΠ»Π±ΡΡ.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ
Π‘Π΅ΡΠΊΠ° Bootstrap ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ CSS, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²Π°ΡΠ΅ΠΌΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π°Π΄Π°ΠΏΡΠΈΡΠΎΠ²Π°ΡΡ ΠΌΠ°ΠΊΠ΅Ρ Π΄Π»Ρ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΡΠ°Π·Π½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°. ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ ΡΠ»Π΅Π΄ΡΡΡΠ΅Π΅:
- ΠΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² Π² ΡΠ΅ΡΠΊΠ΅
- ΠΠ»Π΅ΠΌΠ΅Π½ΡΡ ΡΡΠ°Π±Π΅Π»Ρ Π²ΠΌΠ΅ΡΡΠΎ ΠΏΠΎΠΏΠ»Π°Π²ΠΊΠ° ΡΠ°ΠΌ, Π³Π΄Π΅ ΡΡΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ
- ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² ΠΈ ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ΠΈ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°Π»ΠΈ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌ
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ Π²ΠΊΠ»ΡΡΠ΅Π½ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π΄Π»Ρ Π²ΡΠ΅Ρ
ΡΠΈΠΏΠΎΠ² ΡΡΡΠ°Π½ΠΈΡ Shiny.Π§ΡΠΎΠ±Ρ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΠ΅ΡΠ΅Π΄Π°ΡΡ responseive = FALSE
Π² ΡΡΠ½ΠΊΡΠΈΡ fluidPage ()
ΠΈΠ»ΠΈ fixedPage ()
.
ΠΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅ΠΌΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°
ΠΠΎΠ³Π΄Π° Π²ΠΊΠ»ΡΡΠ΅Π½ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ, Π²ΠΎΡ ΠΊΠ°ΠΊ ΡΠΈΡΡΠ΅ΠΌΠ° ΡΠ΅ΡΠΎΠΊ Bootstrap Π°Π΄Π°ΠΏΡΠΈΡΡΠ΅ΡΡΡ ΠΊ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠΌ ΡΡΡΡΠΎΠΉΡΡΠ²Π°ΠΌ:
Π¨ΠΈΡΠΈΠ½Π° ΠΌΠ°ΠΊΠ΅ΡΠ° | Π¨ΠΈΡΠΈΠ½Π° ΠΊΠΎΠ»ΠΎΠ½Π½Ρ | Π¨ΠΈΡΠΈΠ½Π° ΠΆΠ΅Π»ΠΎΠ±Π° | |
---|---|---|---|
ΠΠΎΠ»ΡΡΠΎΠΉ Π΄ΠΈΡΠΏΠ»Π΅ΠΉ | 1200px ΠΈ Π²ΡΡΠ΅ | 70 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 30 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ |
ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ | 980px ΠΈ Π²ΡΡΠ΅ | 60 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ | 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ |
ΠΠΎΡΡΡΠ΅ΡΠ½ΡΠ΅ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ | 768px ΠΈ Π²ΡΡΠ΅ | 42px | 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ |
Π’Π΅Π»Π΅ΡΠΎΠ½Ρ ΠΊ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°ΠΌ | 767px ΠΈ Π½ΠΈΠΆΠ΅ | Fluid (Π±Π΅Π· ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ) | Fluid (Π±Π΅Π· ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ) |
Π’Π΅Π»Π΅ΡΠΎΠ½Ρ | 480 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈ ΠΌΠ΅Π½ΡΡΠ΅ | Fluid (Π±Π΅Π· ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ) | Fluid (Π±Π΅Π· ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠΉ ΡΠΈΡΠΈΠ½Ρ) |
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ Π½Π° ΡΠΊΡΠ°Π½Π°Ρ ΠΌΠ΅Π½ΡΡΠ΅Π³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ° Π³ΠΈΠ±ΠΊΠΈΠ΅ ΡΠΈΡΠΈΠ½Ρ ΡΡΠΎΠ»Π±ΡΠΎΠ² ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½Π°Ρ ΡΠ΅ΡΠΊΠ°.
Π’Π΅ΠΌΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΉ
ΠΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Shiny Π½Π°ΡΠ»Π΅Π΄ΡΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΠΌΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Π²Π΅Π±-ΡΡΠ΅ΠΉΠΌΠ²ΠΎΡΠΊΠ° Bootstrap, Π½Π° ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΎΡΠ½ΠΎΠ²Π°Π½ Shiny. ΠΡΠ»ΠΈ Π²Ρ Ρ
ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΡ ΡΠ΅ΠΌΡ Bootstrap. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡ theme
Π΄Π»Ρ ΡΡΠ½ΠΊΡΠΈΠΈ fluidPage ()
, fixedPage ()
ΠΈΠ»ΠΈ navbarPage ()
, ΠΊΠΎΡΠΎΡΠ°Ρ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΡ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ Bootstrap CSS Π΄Π»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π² ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ.
Bootstrap ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡΡΡ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΡΡ
ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΠ»Π° CSS (Ρ
ΠΎΡΡ ΠΎΠ½ΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡΡ ΠΈΠΌΠ΅ΡΡ ΡΠ²ΡΠ·Π°Π½Π½ΡΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, CSS ΠΈΠ»ΠΈ ΡΡΠΈΡΡΡ). ΠΡΠ»ΠΈ Π²Ρ ΡΠΎΡ
ΡΠ°Π½ΠΈΠ»ΠΈ ΡΠ΅ΠΌΡ ΠΏΠΎ Π°Π΄ΡΠ΅ΡΡ www / bootstrap.css
Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ, Π²Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ ΡΠ²ΡΠ·Π°ΡΡ Π΅Π΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΡΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°:
ui <- fluidPage (theme = "bootstrap.css",
titlePanel (Β«ΠΠΎΠ΅ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β»)
# ΠΈΠ½ΡΠ΅ΡΡΠ΅ΠΉΡ ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ
)
ΠΡΠΈ ΠΈΠΌΠΏΠΎΡΡΠ΅ ΡΠ΅ΠΌΡ Π²Π°ΠΆΠ½ΠΎ ΡΠ±Π΅Π΄ΠΈΡΡΡΡ, ΡΡΠΎ ΠΎΠ½Π° ΡΠΎΠ²ΠΌΠ΅ΡΡΠΈΠΌΠ° Ρ Bootstrap 3.ΠΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ ΠΈΡΡΠΎΡΠ½ΠΈΠΊΠΎΠ² ΡΠ΅ΠΌ Bootstrap ΡΠ²Π»ΡΠ΅ΡΡΡ Bootswatch, Π½ΠΎ Π΅ΡΡΡ ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π΄ΡΡΠ³ΠΈΠ΅.
ΠΡΠ»ΠΈ Ρ Π²Π°Ρ Π΅ΡΡΡ Π²ΠΎΠΏΡΠΎΡΡ ΠΏΠΎ ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΈΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΎΠ±ΡΡΠ΄ΠΈΡΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠ΅ Π·Π΄Π΅ΡΡ ΠΈΠ΄Π΅ΠΈ, Π½Π°ΠΏΠΈΡΠΈΡΠ΅ ΠΈΡ Π² ΡΠΎΠΎΠ±ΡΠ΅ΡΡΠ²Π΅ RStudio. ΠΠ°ΡΠΈ ΡΠ°Π·ΡΠ°Π±ΠΎΡΡΠΈΠΊΠΈ ΡΠ»Π΅Π΄ΡΡ Π·Π° ΡΡΠΈΠΌΠΈ ΡΠΎΡΡΠΌΠ°ΠΌΠΈ ΠΈ ΠΏΠ΅ΡΠΈΠΎΠ΄ΠΈΡΠ΅ΡΠΊΠΈ ΠΎΡΠ²Π΅ΡΠ°ΡΡ Π½Π° Π²ΠΎΠΏΡΠΎΡΡ. Π‘ΠΌ. Π‘ΠΏΡΠ°Π²ΠΊΡ Π΄Π»Ρ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎΠΉ ΠΏΠΎΠΌΠΎΡΠΈ ΠΏΠΎ Π²ΡΠ΅ΠΌ ΡΡΠ½ΠΊΡΠΈΡΠΌ Shiny.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΌΠ°ΠΊΠ΅ΡΠ° Π² 2 ΡΡΠΎΠ»Π±ΡΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ HTML ΠΈ CSS Ρ Π½ΡΠ»Ρ
Π Π½Π°ΡΠΈ Π΄Π½ΠΈ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΡΠ°Π» ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎΠΉ ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠ΅ΠΉ Π²Π΅Π±-ΡΠ°ΠΉΡΠ°. ΠΠΎΠ»Π΅Π΅ 50% + Π»ΡΠ΄Π΅ΠΉ, ΠΈΠΌΠ΅ΡΡΠΈΡ Π΄ΠΎΡΡΡΠΏ ΠΊ ΠΠ½ΡΠ΅ΡΠ½Π΅ΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π»ΠΈΠ±ΠΎ ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΠ΅ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΡΠ°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠ»Π°Π½ΡΠ΅ΡΡ, ΡΠ΅Π»Π΅ΡΠΎΠ½Ρ ΠΈ Ρ. Π.Π Π΅ΡΠ»ΠΈ Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ Π½Π΅ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ΅Π°Π³ΠΈΡΡΠ΅Ρ Π½Π° ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΡΡΠΎΠΉΡΡΠ²Π°, ΡΠΎ, ΡΠΊΠΎΡΠ΅Π΅ Π²ΡΠ΅Π³ΠΎ, ΡΡΠΎ ΠΏΠΎΡΠ΅ΡΡΠ½Π½ΡΠΉ ΠΊΠ»ΠΈΠ΅Π½Ρ Π΄Π»Ρ Π²Π°Ρ.
[tutorial_details]
Π ΡΡΠΎΠΌ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Π΅ Ρ ΠΏΠΎΠΊΠ°ΠΆΡ Π²Π°ΠΌ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΡ ΠΌΠ°ΠΊΠ΅ΡΠΎΠ². ΠΡΡΡ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ css-ΡΠ΅ΡΠΊΠΈ, Π² ΠΊΠΎΡΠΎΡΡΡ ΡΠΆΠ΅ Π΅ΡΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π½Π°ΡΡΡΠΎΠ΅Π½Π½ΡΠ΅ ΡΡΠΎΠ»Π±ΡΡ ΠΈ ΡΡΠΈΠ»ΠΈ. ΠΠΎ ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΡ Π½Π΅ Π±ΡΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΊΡΡ-Π»ΠΈΠ±ΠΎ ΡΠ΅ΡΠΊΡ.
ΠΠ°ΠΊΠ΅Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ, Π±ΡΠ΄Π΅Ρ ΠΈΠΌΠ΅ΡΡ 2 ΡΡΠΎΠ»Π±ΡΠ°, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ, ΠΎΠ±Π»Π°ΡΡΡ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ³ΠΎ, Π° ΡΠ°ΠΊΠΆΠ΅ Π±ΠΎΠΊΠΎΠ²ΡΡ ΠΏΠ°Π½Π΅Π»Ρ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ».
Π‘Π±ΡΠΎΡ Π½Π°ΡΡΡΠΎΠ΅ΠΊ Π±ΡΠ°ΡΠ·Π΅ΡΠ° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
ΠΠ»Ρ Π½Π°ΡΠ°Π»Π° Π½Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ ΡΡΠΎ-ΡΠΎ ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ reset.css. Reset.css ΠΎΡΠΈΡΠ°Π΅Ρ Π²ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΏΡΠΈΠ΄Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΠΌ html, ΡΠ°ΠΊΠΈΠΌ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ, ΡΠ΅Π³ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², ΡΠ°Π±Π»ΠΈΡΡ, ΡΠΏΠΈΡΠΎΠΊ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅.
ΠΠΎΡΠ΅ΠΌΡ ΡΡΠΎ Π²Π°ΠΆΠ½ΠΎ?
ΠΠ°ΠΆΠ½ΠΎ ΡΠ±ΡΠΎΡΠΈΡΡ ΡΡΠΈ ΡΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ ΠΊΠ°ΠΆΠ΄ΡΠΉ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°Π·Π½ΡΠ΅ ΡΡΠΈΠ»ΠΈ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π²Π°Ρ Π²Π΅Π±-ΡΠ°ΠΉΡ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. ΠΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ reset.css Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΠ·Π±Π΅ΠΆΠ°ΡΡ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ.Π’Π°ΠΊ ΡΡΠΎ ΡΠΊΠ°ΡΠ°ΠΉΡΠ΅ reset.css ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π΅Π³ΠΎ Π² ΠΏΠ°ΠΏΠΊΡ ΡΠ²ΠΎΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
ΠΠ°ΡΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΡ Ρ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ
ΠΠ΅ΡΠ²ΡΠΉ ΡΠ°Π³ ΡΠ΄Π΅Π»Π°Π½, ΡΠ΅ΠΏΠ΅ΡΡ ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π΄Π²Π° ΡΠ°ΠΉΠ»Π°: index.html ΠΈ style.css .
ΠΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ²ΠΎΠΉ index.html ΠΈ Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π² Π½Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ HTML-ΠΊΠΎΠ΄.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ <Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ>ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ ΠΌΠ°ΠΊΠ΅Ρ
<ΡΠ°Π·Π΄Π΅Π»>Π‘ΠΎΠ·Π΄Π°Π½ΠΎ Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ CSS3 ΠΈ HTML5
<Π² ΡΡΠΎΡΠΎΠ½Ρ>ΠΡΠΎ Π±ΠΎΠΊΠΎΠ²Π°Ρ ΠΏΠ°Π½Π΅Π»Ρ
<Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»> ΠΠ²ΡΠΎΡΡΠΊΠΈΠ΅ ΠΏΡΠ°Π²Π° ΠΈ ΠΊΠΎΠΏΠΈΡ ΠΠ½Π΄ΠΎΡ ΠΠ°Π΄Ρ 2015