ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°? — UMI
Π‘Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΉΡ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠΌΒ β ΠΎΡΠ΅Π½Ρ Π²Π°ΠΆΠ½ΠΎ ΠΏΡΠΈ Π΅Π³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ, Π΄Π°ΠΆΠ΅ Π΅ΡΠ»ΠΈ ΡΠ°ΠΉΡ ΡΠΎΠ·Π΄Π°Π½ Π½Π°Β Π³ΠΎΡΠΎΠ²ΠΎΠΌ ΡΠ°Π±Π»ΠΎΠ½Π΅. ΠΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΡΠΎ Π°ΠΊΡΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ΅ΡΠΊΠΈΡ ΠΏΠ»ΠΎΡΠ°Π΄ΠΎΠΊ ΠΈΒ Π±Π»ΠΎΠ³ΠΎΠ². ΠΡΠ½ΠΎΠ²Π° ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΡΡΠΈ ΠΊΡΠΎΠ΅ΡΡΡ Π²Β ΡΠ·Π½Π°Π²Π°Π΅ΠΌΠΎΡΡΠΈ ΡΠ΅ΡΡΡΡΠ°, Π°Β ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ°Π±ΠΎΡΠ°ΡΡ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡΠΈΠΉΡΡ, ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΡΠΉ Π²Π΅ΡΡ Π½ΠΈΠΉ Π±Π»ΠΎΠΊ? ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΡΠ°ΡΠΈΠ²ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°Β β Π²ΠΎΠΏΡΠΎΡ, Π·Π°Π½ΠΈΠΌΠ°ΡΡΠΈΠΉ ΠΌΠ½ΠΎΠ³ΠΈΡ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠΎΠ².
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΠΈΒ ΡΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅
ΠΠ°Π»ΠΈΡΠΈΠ΅ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΠΏΠΊΠΈ (header) Π΄Π°Π΅Ρ Π½Π΅ΠΌΠ°Π»ΠΎ ΠΏΠ»ΡΡΠΎΠ²:
- ΡΠ·Π½Π°Π²Π°Π½ΠΈΠ΅ ΡΠΈΡΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°, ΡΠΈΠΌΠ²ΠΎΠ»ΠΈΠΊΠΈ;
- ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠΈ ΠΏΠ»ΠΎΡΠ°Π΄ΠΊΠΈ;
- Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠ΅ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Π½ΠΈΠ΅ ΠΊΡΠ°ΡΠΈΠ²ΠΎΠ³ΠΎ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠ° ΠΈΒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°;
- ΡΠΎΠ»ΠΈΠ΄Π½ΠΎΡΡΡ, Π΄Π΅ΠΌΠΎΠ½ΡΡΡΠ°ΡΠΈΡ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ΄Ρ ΠΎΠ΄Π° ΠΊΒ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ΅ΡΡΡΡΠ° Π²Β ΡΠ΅Π»ΠΎΠΌ.
ΠΠ»Ρ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠ° Π²ΠΎΠΏΡΠΎΡ ΡΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Π²Β ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅ ΡΡΠΎΠΊΠΈ, ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΠΎΡΡΡΠΌ. ΠΠΎΠ²ΠΈΡΠΊΡΒ ΠΆΠ΅ ΠΏΡΠΈΠ΄Π΅ΡΡΡ ΠΈΠ·ΡΡΠΈΡΡ ΠΏΡΠΈΠ»ΠΈΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° Π½Π°Β ΡΡΡ ΡΠ΅ΠΌΡ.
ΠΠ΅ΡΡ Π½ΠΈΠΉ Π±Π»ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ:
- ΡΡΠΊΠΈΠΉ, Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡΠΈΠΉΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Ρ ΠΎΡΠΎΡΠΎ Π·Π°ΠΌΠ΅ΡΠ΅Π½;
- ΡΠ»ΠΎΠ³Π°Π½ ΡΒ ΠΊΡΠ°ΡΠΊΠΎΠΉ ΡΡΡΡΡ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ Π½Π°ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ;
- ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ½ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΠΏΡΠ΅Π΄ΠΏΡΠΈΡΡΠΈΠΉ ΠΈΒ ΠΊΠΎΠΌΠΌΠ΅ΡΡΠ°Π½ΡΠΎΠ²;
- ΠΌΠ΅Π½Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ;
- ΡΠ΅ΠΊΠ»Π°ΠΌΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ.
ΠΠ΅Β ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ, ΡΡΠΎΠ±Ρ Π²ΡΠ΅ ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½Π½ΡΠ΅ ΠΏΡΠ½ΠΊΡΡ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΎΠ²Π°Π»ΠΈ Π²Β ΡΠ°ΠΏΠΊΠ΅. ΠΠ΅Β Π³Π»Π°Π²Π½Π°Ρ ΡΠ΅Π»ΡΒ β ΠΎΠ±ΡΠ΅Π΄ΠΈΠ½ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΡΠ°Π·Π»ΠΈΡΠ°ΡΡΠΈΠ΅ΡΡ ΠΏΠΎΒ ΡΡΠΈΠ»Ρ ΠΈΒ ΡΠ²Π΅ΡΡ. Π¨Π°ΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ΅ ΠΈΒ Π³Π°ΡΠΌΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΡΒ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ Π²ΡΠ΅Π³ΠΎ ΡΠ΅ΡΡΡΡΠ°. ΠΠ΅Β ΡΠΈΡΠΈΠ½Π° ΠΈΒ Π²ΡΡΠΎΡΠ° ΠΌΠΎΠ³ΡΡ ΡΠΈΠ»ΡΠ½ΠΎ ΡΠ°Π·Π½ΠΈΡΡΡΡ, Π½Π°Π³Π»ΡΠ΄Π½ΠΎ Π²ΠΈΠ΄Π½ΠΎ ΡΡΠΎ ΠΏΡΠΈ ΠΎΡΠΊΡΡΡΠΈΠΈ ΡΡΡΠ°Π½ΠΈΡ Π½Π°Β ΡΠΊΡΠ°Π½Π°Ρ ΡΒ ΡΠ°Π·Π½ΠΎΠΉ Π΄ΠΈΠ°Π³ΠΎΠ½Π°Π»ΡΡΒ β ΠΌΠΎΠ½ΠΈΡΠΎΡΠ°Ρ , ΠΏΠ»Π°Π½ΡΠ΅ΡΠ°Ρ , ΡΠΌΠ°ΡΡΡΠΎΠ½Π°Ρ .
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°?
Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ ΡΡΠΈ ΡΠΏΠΎΡΠΎΠ±Π° Π²ΡΠΏΠΎΠ»Π½ΠΈΡΡ Π·Π°Π΄Π°ΡΡ.
- Π‘Β ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠ΅ΡΠ²ΠΈΡΠΎΠ². ΠΡΠΎΡ Π²Π°ΡΠΈΠ°Π½Ρ ΡΠ°ΠΌΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°ΡΠ½ΡΠΉ, Π½Π΅Β ΡΡΠ΅Π±ΡΡΡΠΈΠΉ ΠΎΠ±ΡΡΠ΅Π½ΠΈΡ ΡΠ°Π±ΠΎΡΠ΅ ΡΒ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°ΠΌΠΈ. ΠΠ°Π΄ΠΎ ΠΎΡΡΡΠΊΠ°ΡΡ Π²Β ΡΠ΅ΡΠΈ ΡΠ΅ΡΡΡΡΡ, ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΡΡΠΈΠ΅ Π³ΠΎΡΠΎΠ²ΡΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ, ΠΈΒ ΠΏΡΠΎΡΡΠΎ ΡΠΊΠ°ΡΠ°ΡΡ ΠΏΠΎΠ½ΡΠ°Π²ΠΈΠ²ΡΠΈΠΉΡΡ. Π‘Π΅ΡΠ²ΠΈΡΡ Π±ΡΠ²Π°ΡΡ ΠΏΠ»Π°ΡΠ½ΡΠΌΠΈ ΠΈΒ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠΌΠΈ.
- Xheader. ΠΡΠ»ΠΈ Π²ΡΒ β ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΠΉ ΡΠ΅Π»ΠΎΠ²Π΅ΠΊ, ΡΠΎΒ ΠΏΠΎΠ»ΡΡΠΈΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΠ΄ΡΠΊΡ ΠΎΡΠ΅Π½Ρ Π΄Π°ΠΆΠ΅ ΠΏΡΠΎΡΡΠΎ. ΠΠ΄Π΅ΡΡ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅ΡΡΡ Π²ΠΏΠΎΠ»Π½Π΅ ΠΏΡΠΈΠ΅ΠΌΠ»Π΅ΠΌΡΠΉ Π½Π°Π±ΠΎΡ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΠΎΠ² ΠΈΠ»ΠΈ ΠΊΠ°ΡΠ°Π»ΠΎΠ³ ΡΒ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌΠΈ ΠΎΠ±ΡΠ°Π·ΡΠ°ΠΌΠΈ. ΠΒ ΠΏΠΎΡΠ»Π΅Π΄Π½Π΅ΠΌ ΠΏΡΠΈΡΡΡΡΡΠ²ΡΠ΅Ρ ΡΠ΄ΠΎΠ±Π½Π°Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡΒ β Π²ΡΠ΅ ΠΏΡΠΈΠΌΠ΅ΡΡ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Ρ ΠΏΠΎΒ ΠΊΠ°ΡΠ΅Π³ΠΎΡΠΈΡΠΌ, Π²ΡΠ±ΡΠ°ΡΡ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½Π΅Β ΡΠΎΡΡΠ°Π²ΠΈΡ ΡΡΡΠ΄Π°. ΠΡΠ΅ Xheader ΠΏΡΠ΅Π΄Π»Π°Π³Π°Π΅Ρ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ, Π³Π΄Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΌΠ΅Π½ΡΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ, ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΠ»ΠΎΠΈ Π΄Π»Ρ ΡΠ°ΡΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² Π²Β Π½ΡΠΆΠ½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. ΠΡΠΎΠ΅ΠΊΡΡ ΡΠΎΡ
ΡΠ°Π½ΡΡΡΡΡ Π²Β ΡΠΎΡΠΌΠ°ΡΠ΅ XHF Π΄Π»Ρ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠ΅Π½ΠΈΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ, ΠΎΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΠΌΠ΅Π΅Ρ ΡΠ°ΡΡΠΈΡΠ΅Π½ΠΈΠ΅ JPG. Xheader ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΡΠΌΠΈ ΡΡΠ½ΠΊΡΠΈΡΠΌΠΈ Π΄Π»Ρ Π½ΠΎΠ²ΠΈΡΠΊΠ°, Π½ΠΎΒ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΡ, ΡΠ΅ΡΠΈΠ²ΡΠ΅ΠΌΡ Π·Π°Π½ΡΡΡΡΡ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠΊΠΎΠΉ Π½Π°Β ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎΠΌ ΡΡΠΎΠ²Π½Π΅, ΡΠ»Π΅Π΄ΡΠ΅Ρ Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊΒ Photoshop.
- Adobe Photoshop. ΠΡΠ° ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠ° ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ Π±ΠΎΠ»ΡΡΠΈΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄Π»Ρ ΡΠ°Π±ΠΎΡΡ ΡΒ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΌ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠΎΠΌ. ΠΠ΄Π΅ΡΡ Π²ΡΒ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠ΅ Π±Π»ΠΎΠΊΠΈ, ΠΌΠ΅Π½ΡΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ, ΠΏΠΎΠ΄Π±ΠΈΡΠ°ΡΡ ΡΠΎΠ½, ΠΎΠ±ΡΠ³ΡΡΠ²Π°ΡΡ ΠΊΠΎΠ½ΡΡΠ°ΡΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΡΠ»Π΅Π²ΠΎΠΉ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ (ΠΎΠ½Β ΠΏΡΠΈΠ΄Π°ΡΡ Π½Π΅ΠΎΠ±ΡΡΠ½ΡΠ΅ ΠΏΠ΅ΡΠ΅Π»ΠΈΠ²Ρ). ΠΒ Π²Π°ΡΠΈΡ ΡΡΠΊΠ°Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², Π²Π½Π΅Π΄ΡΠ΅Π½ΠΈΠ΅ Π²Β Π³ΡΠ°ΡΠΈΠΊΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°, ΡΠ»ΠΎΠ³Π°Π½Π°, ΠΏΡΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ°Π·Π»ΠΈΡΠ½ΡΡ ΡΡΠΈΡΡΠΎΠ² (ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅Β ΠΏΠ΅ΡΠ΅ΡΡΠ΅ΡΠ΄ΡΡΠ²ΡΠΉΡΠ΅, Π»Π°ΠΊΠΎΠ½ΠΈΡΠ½ΠΎΡΡΡ Π²Β ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π²Π°ΠΆΠ½Π°). ΠΒ ΠΎΠ±ΡΠ΅ΠΌ, ΡΡΠΎ Π½Π°ΠΈΠ»ΡΡΡΠΈΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π²Β Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π΄Π»Ρ Π²ΠΎΠΏΠ»ΠΎΡΠ΅Π½ΠΈΡ ΡΠ°ΠΌΡΡ ΡΠΌΠ΅Π»ΡΡ ΠΈΒ ΠΊΡΠ΅Π°ΡΠΈΠ²Π½ΡΡ ΠΈΠ΄Π΅ΠΉ. ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° Π²Β Π€ΠΎΡΠΎΡΠΎΠΏΠ΅? ΠΡΠ»ΠΈ Π²ΡΒ ΠΌΠ°Π»ΠΎ ΡΠ°Π±ΠΎΡΠ°Π»ΠΈ ΡΒ ΡΠ°ΠΊΠΎΠΉ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΎΠΉ, ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠΈ ΠΈΒ ΠΏΠΎΠΈΡΠΈΡΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΠΎΡΠΎΠ±ΠΈΡ. ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π»ΠΈΡΡ ΠΏΠΎΠ½ΡΡΡ, ΡΡΠΎ Π΄Π΅Π»Π°ΡΡ ΡΠ°Π·Π½ΡΠ΅ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½ΡΡ, ΠΈΒ ΠΏΡΠΈΡΡΡΠΏΠΈΡΡ ΠΊΒ Π²ΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π·Π°Π΄Π°ΡΠΈ.
ΠΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π±Π»ΠΎΠΊ?
ΠΡΒ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, Π½ΠΎΒ ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡ ΡΠ°Π±ΠΎΡΡ. Π’Π΅ΠΏΠ΅ΡΡ Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈΠ½ΡΠ΅Π³ΡΠΈΡΠΎΠ²Π°ΡΡ Π²Β ΡΡΡΡΠΊΡΡΡΡ ΡΠ΅ΡΡΡΡΠ°. ΠΡΠ»ΠΈ ΡΒ Π²Π°Ρ ΡΠ°ΠΉΡ Π½Π°Β 1Π‘-UMI, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π²Β ΡΠ΅ΠΆΠΈΠΌ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΠΈΒ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡΠ΅ ΠΏΠΎΒ Π±Π»ΠΎΠΊΡ ΡΒ ΡΠ°ΠΏΠΊΠΎΠΉ, Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ ΠΈΒ Π²ΡΡΠ°Π²ΡΡΠ΅ Π½ΡΠΆΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ.
ΠΡΠΈΠΌΠ΅Ρ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° CSS:
-
ΠΒ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΈ #header ΡΠ΄Π°Π»ΠΈΡΠ΅ ΠΈΠΌΠ΅ΡΡΠΈΠ΅ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΈΒ ΠΎΠ±ΠΎΠ·Π½Π°ΡΡΡΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΈΒ Π²ΡΡΠΎΡΡ Π²Π°ΡΠ΅Π³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
#header{
width: ΡΠΈΡΠΈΠ½Π°Β px;
height: ΡΠΎΠ½Β px;
background-color: #25B33f; βΒ ΡΠΎΠ½
margin-bottom: ΠΎΡΡΡΡΠΏ ΡΠ½ΠΈΠ·ΡΒ px;
} -
ΠΡΡΠ°Π²ΡΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ.
#header{
width: ΡΠΈΡΠΈΠ½Π°Β px;
height: Π²ΡΡΠΎΡΠ°Β px;
background-color: #25B33f;
margin-bottom: ΠΎΡΡΡΡΠΏ ΡΠ½ΠΈΠ·ΡΒ px;
background-image: url(images/ΠΈΠΌΡ ΡΠ°ΠΉΠ»Π°)
} - Background-color ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ, Π΅ΡΠ»ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅Β ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ Π²Β ΠΊΠ°ΠΊΠΎΠΌ-Π»ΠΈΠ±ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅. Π€ΠΈΠΊΡΠ°ΡΠΈΡ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ (Π²ΠΎΒ ΠΈΠ·Π±Π΅ΠΆΠ°Π½ΠΈΠ΅ Π΅Π΅Β ΡΠΌΠ΅ΡΠ΅Π½ΠΈΡ) ΠΎΡΡΡΠ΅ΡΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΡΡΠ΅ΠΌ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π½ΠΈΡ position: fixed.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° HTML:
-
ΠΒ ΡΠ΅Π³ body Π²ΡΡΠ°Π²ΡΡΠ΅ div, ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΡΠΈΡΠΎΠ²Π°Π² Π΅Π³ΠΎ ΡΒ Π΄Π²ΡΠΌΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ h2Β ΠΈΒ h4, ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ²Π»ΡΡΡΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ ΠΈΒ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²Π΅Π½Π½ΠΎ.
<div>
<h2>Π½Π°Π·Π²Π°Π½ΠΈΠ΅</h2>
<h4>ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅</h4>
</div> -
ΠΡΠΈΠ΄Π°ΠΉΡΠ΅ Π²ΠΈΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ ΠΈΒ ΡΠ΅ΠΊΡΡΡΒ β ΡΠΎΠ·Π΄Π°ΠΉΡΠ΅ Π΄Π»Ρ Π½ΠΈΡ Π΄Π²Π° ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΠΈΒ ΡΠΊΠ°ΠΆΠΈΡΠ΅ ΡΠ°ΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
h2{
color:#ΡΠ²Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°;
font: ΡΠ°Π·ΠΌΠ΅Ρ pxΒ ΡΡΠΈΡΡ;
margin-left: ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°Β px;
}
h4{
width: ΡΠΈΡΠΈΠ½Π°Β px;
color: #ΡΠ²Π΅Ρ;
font-style: ΡΡΠΈΠ»Ρ ΡΡΠΈΡΡΠ°;
margin: ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅Β px;
} - Π¨ΠΈΡΠΈΠ½Π° h4Β Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Π±ΠΎΠ»ΡΡΠΎΠΉ, ΠΈΠ½Π°ΡΠ΅ ΡΠ΅ΠΊΡΡ Π·Π°ΠΉΠΌΠ΅Ρ Π²ΡΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ. ΠΡΡΡΡΠΏΡ ΡΠ΅Π³ΡΠ»ΠΈΡΡΡΡΡΡ Π²Β Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡΒ ΡΠΎΠ³ΠΎ, Π³Π΄Π΅ ΠΊΠΎΠ½ΠΊΡΠ΅ΡΠ½ΠΎ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΠ΅ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ ΡΠ΅ΠΊΡΡ.
Π Π°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ Π½Π°Β WordPress
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²ΠΎ Π±Π»ΠΎΠ³ΠΎΠ² Π±Π°Π·ΠΈΡΡΡΡΡΡ Π½Π°Β ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ΅ WordPress, ΠΌΠ½ΠΎΠ³ΠΈΠ΅ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠ° ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡΡΡ, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π±Π»ΠΎΠΊ Π½Π°Β ΡΡΠΎΠΉ CMS. ΠΠ²ΠΈΠΆΠΎΠΊ ΡΠΆΠ΅ ΠΎΡΠ½Π°ΡΠ΅Π½ Π³ΠΎΡΠΎΠ²ΡΠΌΠΈ ΡΠ΅ΠΌΠ°ΠΌΠΈ ΠΈΒ Π±Π»ΠΎΠΊΠ°ΠΌΠΈ. ΠΠΎΒ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π²ΠΈΠ΄ΠΎΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡΒ ΠΈΡ , Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ, ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
- ΠΡΠΊΡΠΎΠΉΡΠ΅ Π²Β ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Π²ΠΊΠ»Π°Π΄ΠΊΡ Β«ΠΠ°ΠΏΠΈΡΠΈΒ β Π‘Π΄Π΅Π»Π°ΡΡ Π½ΠΎΠ²ΡΡΒ».
- ΠΠ΅ΡΠ΅Π²Π΅Π΄ΠΈΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π²Β ΡΠΎΡΠΌΠ°Ρ HTML, Π·Π°Π³ΡΡΠ·ΠΈΡΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΠΊΠΎΡΠΎΡΡΡ Ρ ΠΎΡΠΈΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ.
- ΠΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π²Β ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΠΏΠΎΡΠ²ΠΈΡΡΡ ΠΊΠΎΠ΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π‘ΠΊΠΎΠΏΠΈΡΡΠΉΡΠ΅ Π΅Π³ΠΎ, Β«ΠΠ°ΠΏΠΈΡΡΒ» ΡΠ΄Π°Π»ΠΈΡΠ΅.
- ΠΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΠ΅ΡΡ Π²ΠΎΒ Π²ΠΊΠ»Π°Π΄ΠΊΡ Β«ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄Β β Π Π΅Π΄Π°ΠΊΡΠΎΡΒ», ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ°ΠΉΠ» header.php Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ.
- ΠΒ header.php Π½Π°ΠΉΠ΄ΠΈΡΠ΅ <div> ΠΈΒ ΠΏΠΎΠ΄ ΡΡΠΎΠΉ ΡΡΡΠΎΠΊΠΎΠΉ Π²ΡΡΠ°Π²ΡΡΠ΅ ΡΠ°Π½Π΅Π΅ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠ΄ ΡΠΎΡΠΎΠ³ΡΠ°ΡΠΈΠΈ.
- ΠΠ±Π½ΠΎΠ²ΠΈΡΠ΅ ΡΠ°ΠΉΠ» ΠΈΒ ΠΏΠΎΡΠΌΠΎΡΡΠΈΡΠ΅, ΠΊΠ°ΠΊ ΡΠ΅ΠΏΠ΅ΡΡ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ Π²Π°ΡΠ° ΡΠ°ΠΏΠΊΠ° Π²ΠΌΠ΅ΡΡΠ΅ ΡΠΎΒ Π²ΡΡΠ°Π²Π»Π΅Π½Π½ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ.
- ΠΡΠ»ΠΈ Π²Π°ΠΌ ΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π΄Π²ΠΈΠ½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, Π²Π΅ΡΠ½ΠΈΡΠ΅ΡΡ Π²Β ΡΠ°ΠΉΠ»ΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, Π΄ΠΎΠ±Π°Π²ΡΡΠ΅ Π²Β ΡΠ΅Π³ img Π²Β ΠΊΠΎΠ΄Π΅ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠ³ΠΎ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Π·Π°ΠΏΠΈΡΡ style ΡΠΎΒ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ margin. ΠΡΠΈΠΌΠ΅Ρ:;
- ΠΠΎΠ΄Π²ΠΈΠ½ΡΡΠ΅ ΡΠΎΡΠΎ ΡΡΠ΄Π°, ΠΊΡΠ΄Π° Π²Π°ΠΌ Π½Π°Π΄ΠΎ.
ΠΠ΅ΡΠ²Π°Ρ ΡΡΡΠ°Π½ΠΈΡΠ° ΡΒ Π²Π΅ΡΡ Π½ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ Π³ΠΎΡΠΎΠ²Π°. ΠΠΎΡΠ»Π΅ Π΄ΠΎΡΠ°Π±ΠΎΡΠΊΠΈ Π΄Π΅ΡΠ°Π»Π΅ΠΉ, ΠΏΠΎΠΏΡΠ°Π²ΠΊΠΈ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΈΒ ΠΏΡΠΎΡΠ΅Π³ΠΎ ΡΠ°ΠΉΠ» ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Π·Π²Π°ΡΡ index.html ΠΈΒ Π²ΡΠ»ΠΎΠΆΠΈΡΡ Π΅Π³ΠΎ Π½Π°Β Π²Π°Ρ Ρ ΠΎΡΡΠΈΠ½Π³. ΠΒ Π΄Π°Π»ΡΠ½Π΅ΠΉΡΠ΅ΠΌ ΡΠ°Π±Π»ΠΎΠ½ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡ, ΠΌΠ΅Π½Ρ ΠΈΒ Ρ.Π΄.
Π Π°Π±ΠΎΡΠ° Π½Π°Β ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ΅
ΠΠ΅Β Π²ΡΠ΅ Π²Π»Π°Π΄Π΅Π»ΡΡΡ ΡΠ΅ΡΡΡΡΠΎΠ² ΠΈΠΌΠ΅ΡΡ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΡΠ΅ Π½Π°Π²ΡΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΉΡΠΎΠ² ΠΈΒ ΠΈΡ Β ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ². ΠΒ ΡΠ°ΠΊΠΈΡ ΡΠ»ΡΡΠ°ΡΡ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΠ°ΠΉΡ Π½Π°Β ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ΅ ΠΈΒ Π΄ΠΎΡΠ°Π±ΠΎΡΠ°ΡΡ Π³ΠΎΡΠΎΠ²ΡΠΉ ΡΠ°Π±Π»ΠΎΠ½, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π³ΠΎ Π½Π΅ΠΏΠΎΡ ΠΎΠΆΠΈΠΌ Π½Π°Β ΡΠΈΠΏΠΎΠ²ΡΠ΅ ΡΠ°ΠΉΡΡ. ΠΠ°Β ΡΠ΅ΡΠ²ΠΈΡΠ΅ 1Π‘-UMI ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ. ΠΒ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ΅ ΡΠ΅ΡΠ²ΠΈΡΠ° ΠΏΡΠ΅Π΄ΡΡΠΌΠΎΡΡΠ΅Π½ΠΎ Π±ΠΎΠ»Π΅Π΅ 500 Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ², ΠΏΠΎΡΡΠΎΠΌΡ Π²Π°ΠΌ ΠΏΠΎΠ½Π°Π΄ΠΎΠ±ΠΈΡΡΡ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΠΏΠ°ΡΠ° ΠΌΠΈΠ½ΡΡ, ΡΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΠ΅Π½Π½ΡΡ Π²Π΅ΡΡ Π½ΡΡ ΡΠ°ΡΡΡ ΡΠ΅ΡΡΡΡΠ°. ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅: Π·Π΄Π΅ΡΡ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ ΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΒ Π½ΡΠ»Ρ. ΠΠ΄Π½Π°ΠΊΠΎ Π²Β ΡΠ°Π±Π»ΠΎΠ½Π°Ρ Π΄ΠΎΡΡΡΠΏΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°, ΡΡΠΈΡΡΠ°, ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π°Β ΡΠ°ΠΊΠΆΠ΅ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΡΠ΅ΡΠ΅Π· CSS. ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ: Π²ΡΒ ΡΡΠ°ΡΠΈΡΠ΅ ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΠΎΠ΅ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, Π½ΠΎΒ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΠ΅ ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ»Π½ΠΎΡΡΡΡ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ΠΈΡ ΠΈΒ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΠ΅Ρ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡΠΌ.
ΠΡΠ»ΠΈ Π½Π΅Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ Π΄ΠΎΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ Π΄ΠΈΠ·Π°ΠΉΠ½ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ, ΠΏΠΎΡΡΡΠΈΡΠ΅ ΡΡΠΎ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠ°ΠΌ Π²Β ΡΠ°ΠΌΠΊΠ°Ρ ΡΡΠ»ΡΠ³ΠΈ Β«Π‘Π°ΠΉΡ Π·Π°Β Π²Π°ΡΒ». ΠΠ½ΠΈ ΠΎΡΠΎΡΠΌΡΡ ΡΠ°ΠΏΠΊΡ ΠΈΒ ΡΠ°ΠΉΡ ΠΏΠΎΒ Π²Π°ΡΠΈΠΌ ΠΆΠ΅Π»Π°Π½ΠΈΡΠΌΠΈ, Π½Π°ΠΏΠΈΡΡΡ ΠΊΠΎΠ½ΡΠ΅Π½Ρ, ΠΏΠΎΠ΄Π±Π΅ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π½Π°ΠΏΠΎΠ»Π½ΡΡ ΠΈΒ Π·Π°ΠΏΡΡΡΡΡ ΡΠ°ΠΉΡ, Π½Π°ΡΡΡΠΎΡΡ Π΄Π»Ρ ΠΏΡΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΡ.
Π¨Π°ΠΏΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ | htmlbook.ru
ΠΡΠ½ΠΎΠ²Π½Π°Ρ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΡ Ρ ΡΠ΅Π·ΠΈΠ½ΠΎΠ²ΡΠΌ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ ΡΡΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ°Π·Π½ΡΡ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΡΡ , ΠΎΡ Π²ΡΡΠΎΠΊΠΎΠ³ΠΎ Π΄ΠΎ Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ. ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΌΡ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΠ»ΠΈ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° 760 ΠΏΠΈΠΊΡΠ΅Π»Π°ΠΌΠΈ, ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΡΠ°ΠΏΠΊΠ΅ ΡΡΠΎΠΈΡ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ Π±ΠΎΠ»Π΅Π΅ Π²Π°ΠΆΠ½Π°Ρ ΡΠ°ΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΏΠΈΡΡΠ²Π°Π»Π°ΡΡ Π² ΡΡΠΎΡ ΡΠ°Π·ΠΌΠ΅Ρ. ΠΠ° ΡΠΈΡ.Β 6.3 ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΡΠΎ ΡΠ΄Π΅Π»Π°ΡΡ. Π’ΡΠΌΠ½ΡΠΌ ΡΠ²Π΅ΡΠΎΠΌ Π²ΡΠ΄Π΅Π»Π΅Π½Π° ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½Π°Ρ ΡΠ°ΡΡΡ ΡΠΈΡΠΈΠ½ΠΎΠΉ 760px, Π±ΡΠΊΠ²ΠΎΠΉ Π ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Ρ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΡΠ΅ ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΎΡΡΠ°Π²ΡΠΈΠ΅ΡΡ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΡ.
Π ΠΈΡ. 6.3. Π¨ΠΈΡΠΈΠ½Π° ΡΠ°ΠΏΠΊΠΈ
Π‘Π°ΠΌΠΎ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π² ΡΠ°ΠΏΠΊΠ΅ Π΄Π΅Π»Π°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π· ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π²ΡΡΠΎΠ²Π½ΡΡΡ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <header>.
header {
display: block; /* ΠΠ»Ρ ΡΡΠ°ΡΡΡ
Π±ΡΠ°ΡΠ·Π΅ΡΠΎΠ² */
height: 405px; /* ΠΡΡΠΎΡΠ° ΡΠ°ΠΏΠΊΠΈ */
background: url(images/header-bg.png) no-repeat center bottom;
}
Π ΠΈΠ΄Π΅Π°Π»Π΅ ΡΠΈΡΡΠ½ΠΎΠΊ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅ΡΡ Π±ΠΎΠ»ΡΡΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΎΡ 2000 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ², ΡΠΎΠ³Π΄Π° ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΈ Π»ΡΠ±ΠΎΠΌ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠΈ ΠΌΠΎΠ½ΠΈΡΠΎΡΠ° ΡΠΈΡΡΠ½ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΊΠ°Π·ΡΠ²Π°ΡΡ ΡΠ΅Π½ΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ°ΡΡΡ, ΠΎΠ±ΡΠ΅Π·Π°Ρ Π²ΡΡ, ΡΡΠΎ Π½Π΅ ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΡΡΡ Π² ΠΎΠΊΠ½ΠΎ. ΠΠΎ Π±Π΅Π΄Π° Π² ΡΠΎΠΌ, ΡΡΠΎ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π½Π΅ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ ΡΠΈΡΠΎΠΊΠ°Ρ, Π° ΡΠΈΡΠΎΠ²Π°ΡΡ Π±Π΅ΡΠΊΠΎΠ½Π΅ΡΠ½ΠΎ ΡΡΠ½ΡΡΠΈΠ΅ΡΡ ΠΏΠΎ Π±ΠΎΠΊΠ°ΠΌ ΡΡΡΠ½ΡΠ΅ ΠΏΠΎΠ»ΠΎΡΠΊΠΈ Π½Π΅ Ρ ΠΎΡΠ΅ΡΡΡ. ΠΠ΄ΠΈΠ½ ΠΈΠ· Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ² ΡΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ. Π’Π΅, Ρ ΠΊΠΎΠ³ΠΎ ΡΠ°Π·ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ 1280 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ² ΠΏΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΈ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ²ΠΈΠ΄ΡΡ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, Π° Π²Π»Π°Π΄Π΅Π»ΡΡΡ ΡΠΈΡΠΎΠΊΠΈΡ ΠΌΠΎΠ½ΠΈΡΠΎΡΠΎΠ² ΡΠΌΠΎΠ³ΡΡ ΠΏΠΎΠ»ΡΠ±ΠΎΠ²Π°ΡΡΡΡ ΡΡΠ°Π·Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΆΠΈΠ²ΠΎΡΠ½ΡΠΌΠΈ ΠΈ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π·Π°Ρ ΠΎΠ΄ΡΡΠΈΠΌΠΈ ΡΠΎΠ»Π½ΡΠ°ΠΌΠΈ. ΠΠ΄Π΅ΡΡ Π²Π°ΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π±Π΅Π· ΡΡΡΠΊΠΎΠ² ΡΠΎΠ²ΠΌΠ΅ΡΠ°Π»ΡΡ ΡΠ°ΠΌ Ρ ΡΠΎΠ±ΠΎΠΉ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ (ΡΠΈΡ.Β 6.4). ΠΡΠ°Π΄ΠΈΠ΅Π½Ρ Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ ΡΠΏΡΡΡΠ°Π½.
Π ΠΈΡ. 6.4. Π‘ΠΎΠ²ΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ
ΠΠ° Π΄Π°Π½Π½ΠΎΠΌ ΡΠΈΡΡΠ½ΠΊΠ΅ ΠΌΠ΅ΡΡΠΎ ΡΡΡΠΊΠ° ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½ΠΎ ΡΡΡΠ΅Π»ΠΊΠΎΠΉ ΠΈ ΠΏΡΠΎΠΌΠ΅ΠΆΡΡΠΊΠΎΠΌ, ΡΡΠΎΠ±Ρ ΡΡΡΠΊ ΠΌΠΎΠΆΠ½ΠΎ Π±ΡΠ»ΠΎ Π·Π°ΠΌΠ΅ΡΠΈΡΡ. ΠΡΠ»ΠΈ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΠΎΡΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΠΏΡΠ°Π²ΡΡ ΠΈ Π»Π΅Π²ΡΡ ΡΠ°ΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, ΡΠΎ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΡΡΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π±Π΅Π· Π²ΠΈΠ΄ΠΈΠΌΡΡ ΡΡΡΠΊΠΎΠ², ΠΊΠ°ΠΊ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ. ΠΡΡΠ°ΡΡΡΡ ΡΠ»Π΅Π³ΠΊΠ° ΠΏΠΎΠ΄ΠΏΡΠ°Π²ΠΈΡΡ ΡΡΠΈΠ»Ρ, Π·Π°ΠΌΠ΅Π½ΠΈΠ² Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ no-repeat (Π±Π΅Π· ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΡ) Π½Π° repeat-x (ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ).
header {
display: block;
height: 405px;
background: url(images/header-bg. png) repeat-x center bottom;
}
ΠΠ° ΡΡΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΈΡΠ°ΡΡ, ΡΡΠΎ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ Π² ΡΠ°ΠΏΠΊΠ΅ Π³ΠΎΡΠΎΠ² (ΡΠΈΡ.Β 6.5).
Π ΠΈΡ. 6.5. Π€ΠΎΠ½ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ
Π ΡΠΎΡΠΌΠ°ΡΠ΅ PNG-24 ΡΠ°ΠΉΠ» Ρ ΡΠΎΠ½ΠΎΠΌ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠΌ 1325Ρ 405 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ² Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ ΠΎΠΊΠΎΠ»ΠΎ 32Β ΠΠ±, Π° Π² PNG-8 Ρ 256-ΡΠ²Π΅ΡΠΎΠ²ΠΎΠΉ ΠΏΠ°Π»ΠΈΡΡΠΎΠΉ, Π³Π΄Π΅ ΠΊΠ°ΡΠ΅ΡΡΠ²ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΎ Ρ ΡΠΆΠ΅Β β ΠΎΠΊΠΎΠ»ΠΎ 15Β ΠΠ±. ΠΠΎΠΆΠ½ΠΎ ΡΠ°Π·Π±ΠΈΡΡ ΡΠΎΠ½ Π½Π° Π΄Π²Π΅ ΡΠΎΡΡΠ°Π²Π½ΡΠ΅ ΡΠ°ΡΡΠΈΒ β Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΡΠ²ΠΎΡΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅, ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡΠΈΠ²Π΅ΡΡΠΈ ΠΊ ΠΏΠΎΠ²ΡΡΠ΅Π½ΠΈΡ ΠΊΠ°ΡΠ΅ΡΡΠ²Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°. ΠΠΏΡΠΎΡΠ΅ΠΌ, 32Β ΠΠ± Π΄Π»Ρ ΡΡΠΎΠ»Ρ Π±ΠΎΠ»ΡΡΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ ΠΎΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΠΊΡΠΎ-ΡΠΎ ΠΏΠΎΡΡΠΈΡΠ°Π΅Ρ Β«ΡΠΊΠΎΠ½ΠΎΠΌΠΈΠ΅ΠΉ Π½Π° ΡΠΏΠΈΡΠΊΠ°Ρ Β». Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π°Π»ΡΡΠ΅ΡΠ½Π°ΡΠΈΠ²Π½ΡΠΉ ΠΏΠΎΠ΄Ρ ΠΎΠ΄ ΠΊ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ° ΠΊΠΎΠΌΡ-ΡΠΎ ΠΎΠΊΠ°ΠΆΠ΅ΡΡΡ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΌ, Π° ΠΏΡΠΈ ΠΆΠ΅Π»Π°Π½ΠΈΠΈ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΅Π³ΠΎ ΠΏΡΠΎΠΏΡΡΡΠΈΡΡ.
ΠΠΏΡΠΈΠΌΠΈΠ·Π°ΡΠΈΡ ΡΠ°ΠΏΠΊΠΈ
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π² ΡΠ°ΠΏΠΊΠ΅ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ, Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΠ΅Π·Π°ΡΡ ΠΈΠ· ΠΌΠ°ΠΊΠ΅ΡΠ° ΠΈ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. ΠΠ° ΡΠΈΡ.Β 6.6 ΠΏΠΎΠΊΠ°Π·Π°Π½ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π²ΡΡΠΎΡΠΎΠΉ 405 ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ², ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½ΡΠΉ Π΄Π»Ρ ΡΡΠΎΠΉ ΡΠ΅Π»ΠΈ. Π€ΠΎΡΠΌΠ°Ρ PNG-24 Π½Π΅ Π²Π½ΠΎΡΠΈΡ ΠΈΡΠΊΠ°ΠΆΠ΅Π½ΠΈΡ Π² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ Ρ ΠΎΡΠΎΡΠΎ ΡΠΆΠΈΠΌΠ°Π΅Ρ (ΠΈΡΠΎΠ³ΠΎΠ²ΡΠΉ ΠΎΠ±ΡΠ΅ΠΌ 402 Π±Π°ΠΉΡΠ°), ΡΠ°ΠΊ ΡΡΠΎ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΎΠ΄Π½ΠΎΠ·Π½Π°ΡΠ½ΠΎ ΡΠ»Π΅Π΄ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΈΠΌΠ΅Π½Π½ΠΎ Π΅Π³ΠΎ. Π Π°ΠΌΠΊΠ° Π²ΠΎΠΊΡΡΠ³ ΡΠΈΡΡΠ½ΠΊΠ° Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° Π΄Π»Ρ Π½Π°Π³Π»ΡΠ΄Π½ΠΎΡΡΠΈ.
Π ΠΈΡ. 6.6. ΠΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ (header-gradient.png)
ΠΠ°ΡΡΠΈΠ½ΠΊΠ° Ρ ΡΠΈΠ»ΡΡΡΠ½ΡΠΌΠΈ ΠΆΠΈΠ²ΠΎΡΠ½ΡΠΌΠΈ Π΄Π΅Π»Π°Π΅ΡΡΡ Π½Π° ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΠΌ ΡΠΎΠ½Π΅ ΠΈ Π²ΡΡΠΎΡΠΎΠΉ 198Β ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ², Π½Π΅Ρ ΡΠΌΡΡΠ»Π° Π΄Π΅Π»Π°ΡΡ Π΅Ρ Π½Π° Π²ΡΡ Π²ΡΡΠΎΡΡ ΡΠ°ΠΏΠΊΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΠΎΠ½Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ Π»ΠΈΡΡ ΡΠ°ΡΡΡ. Π€ΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π½Π° ΡΠΈΡ.Β 6.7. Π¨Π°Ρ ΠΌΠ°ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ»Π΅ ΠΎΠ·Π½Π°ΡΠ°Π΅Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡ.
Π ΠΈΡ. 6.7. Π€ΠΎΠ½ΠΎΠ²Π°Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΡΡ (header-animal.png)
ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ ΠΈΠ΄Π΅Ρ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PNG-8, Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΡΡΠΎΠ²Π΅Π½Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ, Π² ΠΎΡΠ»ΠΈΡΠΈΠ΅ ΠΎΡ 256 ΡΡΠΎΠ²Π½Π΅ΠΉ ΡΠΎΡΠΌΠ°ΡΠ° PNG-24, Π²Π°ΠΆΠ½ΠΎ ΠΎΠ±Π΅ΡΠΏΠ΅ΡΠΈΡΡ ΠΊΠΎΡΡΠ΅ΠΊΡΠ½ΠΎΠ΅ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ½ΡΠΉ ΡΠΎΠ½. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΏΡΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠΈ Π² Photoshop-Π΅ Π½Π°Π΄ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΠ²Π΅Ρ ΠΊΡΠ°ΡΠ² (Matte) Π±Π»ΠΈΠ·ΠΊΠΈΠΉ ΠΊ ΡΡΠ΅Π΄Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°, Π³Π΄Π΅ ΠΈΠ΄ΡΡ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠΈΠ»ΡΡΡΠ°. ΠΡΠΈΠΌΠ΅ΡΠ½ΠΎ ΡΡΠΎ ΡΠ²Π΅Ρ #9de1f0. Π ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ Π½Π΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ Π³ΡΡΠ·Π½ΡΡ ΠΊΠΎΠ½ΡΡΡΠΎΠ² Π²ΠΎΠΊΡΡΠ³ Π΄Π΅ΡΠ΅Π²ΡΠ΅Π² ΠΈ ΠΆΠΈΠ²ΠΎΡΠ½ΡΡ , Π° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΏΡΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ Π±ΡΠ΄Π΅Ρ Π²ΠΎΡΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡΡΡ ΠΊΠ°ΠΊ Π΅Π΄ΠΈΠ½ΠΎΠ΅ ΡΠ΅Π»ΠΎΠ΅.
ΠΠ²Π° ΡΠΈΡΡΠ½ΠΊΠ° Π΄Π»Ρ ΡΠΎΠ½Π° ΡΠ°ΠΏΠΊΠΈ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Ρ, ΠΏΠΈΡΠ΅ΠΌ ΠΊΠΎΠ΄ HTML.
<header>
<div>
<img src="images/header-title.png" alt="ΠΠ°ΠΊ ΠΏΠΎΠΉΠΌΠ°ΡΡ Π»ΡΠ²Π° Π² ΠΏΡΡΡΡΠ½Π΅">
</div>
</header>
Π ΡΡΠΈΠ»Ρ Π΄Π»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° <header> ΠΈ ΡΠ»ΠΎΡ header-bg.
header {
background: #00b0d8 url(images/header-gradient.png) repeat-x;
}
.header-bg {
background: url(images/header-animal.png) repeat-x center bottom;
height: 405px;
}
Π ΠΈΡΠΎΠ³Π΅ ΠΎΠ±ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»ΠΎΠ² ΠΎΠΊΠ°Π·Π°Π»ΡΡ 12,5Β ΠΠ±, ΡΡΠΎ Π΄Π°ΠΆΠ΅ ΠΌΠ΅Π½ΡΡΠ΅ ΠΎΠΆΠΈΠ΄Π°Π΅ΠΌΠΎΠ³ΠΎ.
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°
ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ Π½Π°ΠΏΠΈΡΠ°Π½ΠΎ Π½Π° ΠΎΠ±Π»Π°ΠΊΠ΅ Ρ ΡΠ°ΡΡΡΡΡΠ²Π°Π½Π½ΡΠΌΠΈ ΠΊΡΠ°ΡΠΌΠΈ, ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ ΡΡΡΠ΄Π½ΠΎΡΡΠΈ ΠΏΡΠΈ Π½Π°Π»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π½Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ. ΠΡΡΡ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π°, ΠΊΠ°ΠΊ ΠΈΡ ΠΎΠ±ΠΎΠΉΡΠΈ.
- ΠΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΡΠΌΠ°Ρ PNG-24 ΠΏΡΠΈ ΡΠΎΡ ΡΠ°Π½Π΅Π½ΠΈΠΈ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΠΎΡΡΠΈ.
- Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ GIF ΠΈΠ»ΠΈ PNG-8 Ρ ΡΡΠ°Π³ΠΌΠ΅Π½ΡΠΎΠΌ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ Π½Π°Π»ΠΎΠΆΠΈΡΡ ΡΠΈΡΡΠ½ΠΎΠΊ Π½Π° Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΡΠ°ΠΊ, ΡΡΠΎΠ±Ρ ΡΠΎΠ²ΠΏΠ°Π΄Π΅Π½ΠΈΠ΅ Π±ΡΠ»ΠΎ Ρ ΡΠΎΡΠ½ΠΎΡΡΡΡ Π΄ΠΎ ΠΏΠΈΠΊΡΠ΅Π»Π°.
ΠΡΠ΅Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ Π²ΡΠΎΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΠΌΠ΅Π΅Ρ ΡΡΠ΄ Π½Π΅Π΄ΠΎΡΡΠ°ΡΠΊΠΎΠ²Β β ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅Π»ΡΠ·Ρ ΡΠ΄Π²ΠΈΠ½ΡΡΡ Π΄Π°ΠΆΠ΅ Π½Π° ΠΏΠ°ΡΡ ΠΏΠΈΠΊΡΠ΅Π»ΠΎΠ², ΠΎΠ½ΠΎ ΠΏΡΠΈΠ²ΡΠ·Π°Π½ΠΎ ΠΊ Π³ΡΠ°Π΄ΠΈΠ΅Π½ΡΡ, ΠΈ Π΅ΡΠ»ΠΈ Π΅Π³ΠΎ Π³ΡΠ°Π΄ΠΈΠ΅Π½Ρ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ, ΠΏΡΠΈΠ΄ΡΡΡΡ ΠΌΠ΅Π½ΡΡΡ ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. Π’Π°ΠΊ ΡΡΠΎ ΡΠΎΡ ΡΠ°Π½ΡΠ΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π² ΡΠΎΡΠΌΠ°ΡΠ΅ PNG-24. ΠΠΎΠ΄ HTML ΠΎΡΡΠ°Π½Π΅ΡΡΡ ΠΏΡΠ΅ΠΆΠ½ΠΈΠΌ, Π° ΡΡΠΈΠ»ΠΈ ΡΠ°ΡΡΠΈΡΡΡΡΡ.
header {
background: #00b0d8 url(images/header-gradient.png) repeat-x;
}
.header-bg {
background: url(images/header-animal.png) repeat-x center bottom;
height: 405px; /* ΠΡΡΠΎΡΠ° ΡΠ°ΠΏΠΊΠΈ */
text-align: center; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ */
}
.header-bg img {
position: relative; /* ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
top: 40px; /* Π‘Π΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π²Π½ΠΈΠ· */
}
ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ Π΄Π΅Π»Π°Π΅ΡΡΡ ΡΠ΅ΡΠ΅Π· ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ text-align, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌΠΎΠ΅ ΠΊ ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ ΡΠ΅Π³Π° <img>, Π° ΡΠ΄Π²ΠΈΠ³ Π²Π½ΠΈΠ· ΡΠ΅ΡΠ΅Π· ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ top. Π§ΡΠΎΠ±Ρ ΡΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΠ°Π±ΠΎΡΠ°Π»ΠΎ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄Π»Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π·Π°Π΄Π°ΡΡ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° position ΡΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ relative.
ΠΠ° Π³Π»Π°Π²Π½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΡΠ° ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Ρ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΠΊΠ°ΠΊ ΠΎΠ±ΡΡΠ½ΠΎ, Π½Π° ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΠΎΠ½Π° ΡΠ»ΡΠΆΠΈΡ ΡΡΡΠ»ΠΊΠΎΠΉ Π½Π° Π³Π»Π°Π²Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠ»Π΅Π³ΠΊΠ° ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΊΠΎΠ΄:
<a href="/"><img src="images/header-title. png" alt="ΠΠ°ΠΊ ΠΏΠΎΠΉΠΌΠ°ΡΡ Π»ΡΠ²Π° Π² ΠΏΡΡΡΡΠ½Π΅"></a>
ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ / Ρ Π°ΡΡΠΈΠ±ΡΡΠ° href ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° Π³Π»Π°Π²Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π° Π²Π΅Π±-ΡΠ΅ΡΠ²Π΅ΡΠ΅, Π½ΠΎ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ Π»ΠΎΠΊΠ°Π»ΡΠ½ΠΎ.
ΠΠΊΠΎΠ½ΡΠ°ΡΠ΅Π»ΡΠ½ΡΠΉ ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½ Π² ΠΏΡΠΈΠΌΠ΅ΡΠ΅ 6.14.
ΠΡΠΈΠΌΠ΅Ρ 6.14. Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ΠΠ°ΠΊ ΠΏΠΎΠΉΠΌΠ°ΡΡ Π»ΡΠ²Π° Π² ΠΏΡΡΡΡΠ½Π΅?</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body { margin: 0; }
header {
display: block;
background: #00b0d8 url(images/header-gradient.png) repeat-x;
/* ΠΡΠ°Π΄ΠΈΠ΅Π½Ρ */
}
.header-bg {
background: url(images/header-animal.png) repeat-x center bottom;
/* ΠΠΈΠ²ΠΎΡΠ½ΡΠ΅ */
height: 405px; /* ΠΡΡΠΎΡΠ° ΡΠ°ΠΏΠΊΠΈ */
text-align: center; /* ΠΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ */
}
.header-bg img {
position: relative; /* ΠΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ */
top: 40px; /* Π‘Π΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π²Π½ΠΈΠ· */
}
</style>
</head>
<body>
<header>
<div>
<img src="images/header-title. png" alt="ΠΠ°ΠΊ ΠΏΠΎΠΉΠΌΠ°ΡΡ Π»ΡΠ²Π° Π² ΠΏΡΡΡΡΠ½Π΅"
>
</div>
</header>
</body>
</html>
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°
ΠΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π±Π»ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ°, ΠΈ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π² Π½ΡΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π»ΠΎΠ³ΠΎΡΠΈΠΏ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ, ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ HTML ΠΈ CSS
ΠΠ»ΠΎΠΊ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ°, ΠΎΠ±ΡΡΠ½ΠΎ ΡΡΠΎ «header» Π·Π°ΠΏΠΈΡΡΠ²Π°Π΅ΡΡΡ ΡΠ°ΠΊ:
HTML
<div></div>
CSS
#header{
Β Β width: 900px; Β Β - ΡΠΈΡΠΈΠ½Π°
Β Β height: 200px; Β Β - Π²ΡΡΠΎΡΠ°
Β Β background-color: #25B33f; Β - ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠ²Π΅Ρ (ΠΌΠΎΠΆΠ½ΠΎ Π½Π΅ Π·Π°Π΄Π°Π²Π°ΡΡ)
Β Β margin-bottom: 10px; Β Β - ΠΎΡΡΡΡΠΏ ΡΠ½ΠΈΠ·Ρ
}
Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ° Π΄Π΅Π»Π°Π΅ΠΌ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΌ Π±Π»ΠΎΠΊΠ°, Ρ.Π΅. 900px X 200px. ΠΠ³ΠΎ Π»ΡΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π² ΡΠΎΡΠΎΡΠΎΠΏΠ΅.
ΠΡΠ»ΠΈ, ΠΊΡΠΎ Π½Π΅ Π²Π»Π°Π΄Π΅Π΅Ρ ΡΠΎΡΠΎΡΠΎΠΏΠΎΠΌ,Β Ρ ΠΏΡΠ΅Π΄Π»Π°Π³Π°Ρ ΡΠ°ΠΌΡΠΉ ΠΏΡΠΎΡΡΠΎΠΉ ΡΠΏΠΎΡΠΎΠ± ΠΈΠ·Π³ΠΎΡΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ°, Π² ΠΈΠΌΠ΅ΡΡΠΈΠΌΡΡ Π½Π° Π²ΡΠ΅Ρ Windows ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ Paint.
ΠΠΎΡΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ Π² Π±Π»ΠΎΠΊ «header».
#header{
Β Β width:Β 900px;
Β Β height:Β 200px;
Β Β background-color:Β #25B33f;
Β Β margin-bottom:Β 10px;
Β Β background-image: url(images/i8.png) Β - Π² ΡΠ²ΠΎΠΉΡΡΠ²Π΅ ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ ΠΏΡΡΡ ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. ΠΠ°ΠΊ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΡΡΠΎΠ± ΠΏΠΎΡΠΎΠΌ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΠΏΡΡΡ Π΄Π»Ρ Π½Π΅Ρ ΡΠΈΡΠ°ΠΉΡΠ΅ Π² ΡΡΠ°ΡΡΠ΅ ΠΠ°ΡΠ°Π»ΠΎΠ³Π° ΡΠ°ΠΉΡΠ°
}
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ background-color ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ Π½Π° ΡΠΎΡ ΡΠ»ΡΡΠ°ΠΉ, Π΅ΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° Π²Π΄ΡΡΠ³, Π² ΠΊΠ°ΠΊΠΎΠΌ Π»ΠΈΠ±ΠΎ Π±ΡΠ°ΡΠ·Π΅ΡΠ΅ ΠΏΠΎΡΠ΅ΡΠΈΡΠ΅Π»Ρ, Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°Π·ΠΈΡΡΡ.
ΠΡΠ»ΠΈ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ° ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»Π°ΡΡ Ρ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈ Π½ΡΠΆΠ½ΠΎ Π΅Ρ ΠΏΠΎΠ΄ΠΏΡΠ°Π²ΠΈΡΡ, ΡΠΎ ΡΡΠ΄Π° ΠΆΠ΅ Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ background-position
Π‘Π»Π΅Π΄ΡΡΡΠΈΠΉ ΡΠ°Π³ β Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΡΠ°ΠΉΡΠ°.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π² HTML Π±Π»ΠΎΠΊΠ° ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΠΊΠΎΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ Π°Π±Π·Π°ΡΠ°. ΠΠ±Π·Π°ΡΡ Π·Π°Π΄Π°Π΄ΠΈΠΌ ΠΊΠ»Π°ΡΡ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ Π² ΡΠ°ΠΏΠΊΠ΅.
HTML
<div>
Β Β <h2>Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°<h2>
Β Β Β Β <p>ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ</p>
</div>
ΠΠΎΡΠΌΠΎΡΡΠΈΠΌ, ΡΡΠΎ Ρ Π½Π°Ρ ΠΏΠΎΠ»ΡΡΠ°Π΅ΡΡΡ.
Π’Π΅ΠΏΠ΅ΡΡ, ΠΏΡΠΈΠ΄Π°Π΄ΠΈΠΌ Π²ΠΈΠ΄ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ. Π‘ΠΎΠ·Π΄Π°ΡΠΌ Π΄Π»Ρ Π½ΠΈΡ
Π΄Π²Π° ΡΠ΅Π»Π΅ΠΊΡΠΎΡΠ°, ΠΈ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°:
CSS
h2{
Β Β color: #ffee00; Β - ΡΠ²Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
Β Β font: 40px Georgia; Β - ΡΡΠΈΡΡ
Β Β margin-left: 300px; Β - ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°
}
.descript{
Β Β width: 300px; Β - ΡΠΈΡΠΈΠ½Π°
Β Β color: #ffee00; Β - ΡΠ²Π΅Ρ
Β Β font-style: italic; Β - ΠΊΡΡΡΠΈΠ²
Β Β margin: 70px 0 0 30px; Β - ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
Β Β font-size:22px; - ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°
}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π»ΠΎΠ³ΠΎΡΠΈΠΏ.
Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° Ρ Π²ΠΎΠ·ΡΠΌΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π²ΠΎΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΡΡΡΡΠΈΠΊΠ°
ΠΠ°ΡΡΠΈΠ½ΠΊΠ° ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Π° Π±ΡΡΡ Ρ ΠΏΡΠΎΠ·ΡΠ°ΡΠ½ΡΠΌ ΡΠΎΠ½ΠΎΠΌ, ΠΈΠ½Π°ΡΠ΅ Π΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΡΠΉ ΡΠΎΠ½ ΠΎΡΠ΅Π½Ρ Π½Π΅ΠΊΡΠ°ΡΠΈΠ²ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΌΠΎΡΡΠ΅ΡΡΡΡ Π½Π° ΡΠΎΠ½ΠΎΠ²ΠΎΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΈ.
Π§ΡΠΎΠ± ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΏΡΠΎΠ²ΠΎΠ΄ΠΈΠΌ ΡΡΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΠΊΠΎΠ΄Π΅:
Π°) Π² HTML Π±Π»ΠΎΠΊΠ° Π΄ΠΎΠ±Π°Π²ΠΈΠΌ ΠΊΠΎΠ΄ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ;
Π±) Π² CSS Π² Π±Π»ΠΎΠΊ header ΠΏΡΠΎΠΏΠΈΡΠ΅ΠΌ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΠ°ΠΊ ΠΊΠ°ΠΊ Π»ΠΎΠ³ΠΎΡΠΈΠΏ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡΡΡ Π² ΡΡΠΎΠΌ Π±Π»ΠΎΠΊΠ΅;
Π²) Π² CSS Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°, ΠΈ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΠ΅ΠΌ Π΅Π³ΠΎ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ, ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π±Π»ΠΎΠΊΠ° header.
HTML
<div>
Β Β <h2>Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°<h2>
Β Β Β Β <p>ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ</p>
<img src="images/hortic.gif">
</div>
CSS
#header{
Β Β position:relative;
Β Β width:Β 900px;
Β Β height:Β 200px;
Β Β background-color:Β #25B33f;
Β Β margin-bottom:Β 10px;
Β Β background-image: url(images/i8.png) Β
}
h2{
Β Β color: #ffee00; Β - ΡΠ²Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
Β Β font: 40px Georgia; Β - ΡΡΠΈΡΡ
Β Β margin-left: 300px; Β - ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°
}
.descript{
Β Β width: 300px; Β - ΡΠΈΡΠΈΠ½Π°
Β Β color: #ffee00; Β - ΡΠ²Π΅Ρ
Β Β font-style: italic; Β - ΠΊΡΡΡΠΈΠ²
Β Β margin: 70px 0 0 30px; Β - ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
Β Β font-size:22px; - ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°
}
img{
Β Β position:absolute;
Β Β top:10px;
Β Β left:10px;
}
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ:
ΠΠΎΠ»ΡΡΠΈΠ»Π°ΡΡ Π²ΠΎΡ ΡΠ°ΠΊΠ°Ρ ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°.
ΠΠ° Β ΠΏΡΠ΅Π΄ΡΠ΄ΡΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΌΡ ΡΠ΄Π΅Π»Π°Π»ΠΈ ΠΊΠ°ΡΠΊΠ°Ρ ΡΠ°ΠΉΡΠ° ΠΈ ΡΠ΅ΠΏΠ΅ΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΡΠ°Π²ΠΈΡΡ Π² Π½Π΅Π³ΠΎ ΡΠ°ΠΏΠΊΡ ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΎ ΠΏΠΎΠ»ΡΡΠΈΠ»ΠΎΡΡ.
ΠΠΎΠ΄ ΡΡΡΠ°Π½ΠΈΡΡ:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>ΠΠΎΠΊΡΠΌΠ΅Π½Ρ Π±Π΅Π· Π½Π°Π·Π²Π°Π½ΠΈΡ</title>
<style>
#wrapper{
Β Β width: 900px;
Β Β outline: 1px solid #787274;
Β Β padding: 10px;
Β Β margin: 0 auto;
}
#header{
Β Β Β Β position:relative;
Β Β width: 900px;
Β Β height: 200px;
Β Β background-color: #25B33f;
Β Β margin-bottom: 10px;
Β Β background-image: url(images/i8.png)
}
#sidebar{
Β Β background-color: #2FF553;
Β Β margin-bottom: 10px;
Β Β width: 180px;
Β Β padding: 10px;
Β Β float: right;
}
#content{
Β Β background-color: #9EF5AF;
Β Β margin-bottom: 10px;
Β Β width: 670px;
Β Β padding: 10px;
}
#footer{
Β Β height:80px;
Β Β background-color: #41874E;
Β Β margin-bottom: 10px;
}
.clear{
clear: both;
}
h2{
color: #ffee00;
font: 40px Georgia;
margin-left: 300px;
}
. descript{
width: 300px;
color: #ffee00;
font-style: italic;
margin: 70px 0 0 30px;
Β Β font-size:22px;
}
img{
Β Β position:absolute;
Β Β top:10px;
Β Β left:10px;
}
</style>
</head>
<body>
Β Β <div>
Β Β Β Β <div>
Β Β Β Β Β Β <h2>Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°</h2>
Β Β Β Β Β Β Β Β <p>ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΈ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ΠΌ</p>
<img src="images/hortic.gif">
Β Β Β Β </div>
Β Β Β Β <div>ΠΠ΄ΡΠ°Π²ΡΡΠ²ΡΠΉΡΠ΅ ΡΠ²Π°ΠΆΠ°Π΅ΠΌΡΠ΅ Π±ΡΠ΄ΡΡΠΈΠ΅ Π²Π΅Π±-ΠΌΠ°ΡΡΠ΅ΡΠ°!
ΠΠ½Π΅ 55 Π»Π΅Ρ ΠΈ Ρ ΡΠ°Π΄ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ
ΠΠ°Ρ Π½Π° ΡΠ²ΠΎΡΠΌ ΡΠ°ΠΉΡΠ΅.
ΠΡΠΎΡ ΡΠ°ΠΉΡ ΠΏΠ΅ΡΠ²ΡΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Ρ ΡΠ°Π·ΡΠ°Π±ΠΎΡΠ°Π» ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ,
Π° Π΄ΠΎ ΡΡΠΎΠ³ΠΎ ΡΠΌΠ΅Π» ΡΠΎΠ»ΡΠΊΠΎ Π²Ρ
ΠΎΠ΄ΠΈΡΡ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ.
Β Β Β Β </div>
Β Β Β Β <div>Π ΠΌΠ½Π΅, ΡΡΠΈΡΡΠ²Π°Ρ Π²ΠΎΠ·ΡΠ°ΡΡ ΠΈ Β«ΠΎΠΏΡΡΒ», Π±ΡΠ»ΠΎ Π½Π΅ ΠΏΡΠΎΡΡΠΎ
ΠΏΠΎΠ½ΡΡΡ ΠΊΠ°ΠΊ ΡΠ°Π· ΡΡΠΈ Π½ΡΠ°Π½ΡΡ, ΠΎΠ½ΠΈ ΠΎΡΠ½ΠΈΠΌΠ°Π»ΠΈ
Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅Π³ΠΎ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ.
Π Ρ ΡΠ΅ΡΠΈΠ» Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ²ΠΎΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π», ΡΠ°ΠΊ ΡΡΠΎ-Π±Ρ Π΄ΡΡΠ³ΠΈΠΌ Π±ΡΠ»ΠΎ Π»Π΅Π³ΡΠ΅
ΡΠΎΡΠΈΠ΅Π½ΡΠΈΡΠΎΠ²Π°ΡΡΡΡ Π² ΠΏΠΎΡΠΎΠΊΠ΅ Π½ΠΎΠ²ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
ΠΠ΄Π΅ΡΡ Β«ΡΠ°Π·ΠΆΠ΅Π²Π°Π½ΡΒ» Π²ΡΠ΅ ΠΌΠ΅Π»ΠΎΡΠΈ ΡΠΎΠΏΡΠΎΠ²ΠΎΠΆΠ΄Π°ΡΡΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°,
ΠΌΠΈΠΌΠΎ ΠΊΠΎΡΠΎΡΡΡ
ΠΎΠ±ΡΡΠ½ΠΎ ΠΏΡΠΎΡΠΊΠ°ΠΊΠΈΠ²Π°ΡΡ Π΄ΡΡΠ³ΠΈΠ΅ Π°Π²ΡΠΎΡΡ.
Β Β Β Β </div>
Β Β Β Β <div></div>
Β Β Β Β <div></div>
Β Β </div>
</body>
</html>
ΠΠΎ ΠΌΠΎΠ΅ΠΌΡ Π½Π΅ ΠΏΠ»ΠΎΡ ΠΎ, Π½Π°Π΄Π΅ΡΡΡ Ρ Π²Π°Ρ ΠΏΠΎΠ»ΡΡΠΈΡΡΡ Π»ΡΡΡΠ΅.
Π’Π΅ΠΏΠ΅ΡΡ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π΄Π»Ρ ΡΠ΅Ρ , Ρ ΠΊΠΎΠ³ΠΎ ΡΠ°ΠΉΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π½Π° CMS WordPress.
ΠΠ° WordPress ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΡΡΡ Π³ΠΎΡΠΎΠ²Π°Ρ ΡΠ΅ΠΌΠ°, Ρ Π³ΠΎΡΠΎΠ²ΠΎΠΉ ΡΠ°ΠΏΠΊΠΎΠΉ, Π½ΠΎ Π΄ΠΎΠΏΡΡΡΠΈΠΌ, ΠΠ°ΠΌ Π·Π°Ρ ΠΎΡΠ΅Π»ΠΎΡΡ Π² ΡΡΡ Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ°ΠΏΠΊΡ, Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΠΊΠ°ΠΊΠΎΠΉ Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ²ΠΎΠΉ Π»ΠΎΠ³ΠΎΡΠΈΠΏ, ΠΈΠ»ΠΈ Π΅ΡΡ ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅.
ΠΠ΅Π»Π°Π΅ΡΡΡ ΡΡΠΎ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ. ΠΡΠΊΡΡΠ²Π°Π΅ΡΠ΅ Π² ΠΊΠΎΠ½ΡΠΎΠ»ΠΈ Β«ΠΠ°ΠΏΠΈΡΠΈ β ΠΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΎΠ²ΡΡΒ», ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΈΡΠ΅ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ Π² ΡΠ΅ΠΆΠΈΠΌ HTML, ΠΈ Π·Π°Π³ΡΡΠΆΠ°Π΅ΡΠ΅ ΡΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΎ Π² ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°.
Π ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ ΠΏΠΎΡΠ»Π΅ Π·Π°Π³ΡΡΠ·ΠΊΠΈ ΠΏΠΎΡΠ²ΠΈΡΡΡΡ ΠΊΠΎΠ΄ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ, Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ, Π° Β«ΠΠ°ΠΏΠΈΡΡΒ» ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π°Π»ΠΈΡΡ.
ΠΠ°ΡΠ΅ΠΌ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ Π²ΠΎ Β«ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ β Π Π΅Π΄Π°ΠΊΡΠΎΡΒ», ΠΈ ΠΎΡΠΊΡΡΠ²Π°Π΅ΠΌ Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΠ°ΠΉΠ» header.php.
Π ΡΡΠΎΠΌ ΡΠ°ΠΉΠ»Π΅, Π½Π°Ρ ΠΎΠ΄ΠΈΠΌ ΡΡΡΠΎΠΊΡ <div>, ΠΈ ΠΏΠΎΡΠ»Π΅ Π½Π΅Ρ Π²ΡΡΠ°Π²Π»ΡΠ΅ΠΌ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠ΄ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ.
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΎΠ±Π½ΠΎΠ²Π»ΡΠ΅ΠΌ ΡΠ°ΠΉΠ», ΠΈ ΡΠΌΠΎΡΡΠΈΠΌ, ΠΊΠ°ΠΊ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΠ»ΠΎΡΡ Π² ΡΠ°ΠΏΠΊΠ΅ ΡΠ°ΠΉΡΠ°.
ΠΡΠ»ΠΈ Π΅Π³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΊΡΠ΄Π° ΡΠΎ ΠΏΠΎΠ΄Π²ΠΈΠ½ΡΡΡ, ΡΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅ΠΌΡΡ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡ ΡΠ°ΠΉΠ»Π°, ΠΈ Π² ΠΊΠΎΠ΄ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, Π² ΡΠ΅Π³ img, Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅ΠΌ Π°ΡΡΠΈΠ±ΡΡ style ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ margin
style="margin:0 0 0 0;"
Π Π΄Π²ΠΈΠ³Π°Π΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ΄Π°, ΠΊΡΠ΄Π° Π½Π°ΠΌ Π½ΡΠΆΠ½ΠΎ.
ΠΠΎΡ ΠΌΡ ΠΈ ΡΠΎΠ·Π΄Π°Π»ΠΈ ΠΏΠ΅ΡΠ²ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ°. ΠΠΎΡΠ»Π΅ Π΄ΠΎΡΠ°Π±ΠΎΡΠΊΠΈ ΡΠ°ΠΏΠΊΠΈ, ΠΈ Π΅ΡΡ ΠΊΠΎΠ΅ ΠΊΠ°ΠΊΠΈΡ Π΄ΠΎΡΠ°Π±ΠΎΡΠΎΠΊ, ΠΎΠΏΠΈΡΠ°Π½Π½ΡΡ Π΄Π°Π»Π΅Π΅, ΠΌΠΎΠΆΠ½ΠΎ ΡΡΠΎΡ ΡΠ°ΠΉΠ» Π½Π°Π·Π²Π°ΡΡ index.html, ΠΈ Π²ΡΠ»ΠΎΠΆΠΈΡΡ Π΅Π³ΠΎ Π½Π° Ρ ΠΎΡΡΠΈΠ½Π³. ΠΠ°ΡΠ΅ΠΌ, ΠΏΠΎ ΡΡΠΎΠΌΡ ΠΆΠ΅ ΡΠ°Π±Π»ΠΎΠ½Ρ, ΡΠΎΠ·Π΄Π°ΡΡΡΡ Π΄ΡΡΠ³ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ, ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΠΌΠ΅Π½Ρ ΠΈ ΡΠ°ΠΊ Π΄Π°Π»Π΅Π΅. Π ΡΠ°ΠΉΡ Π½Π°ΡΠΈΠ½Π°Π΅Ρ ΡΠ²ΠΎΡ ΠΆΠΈΠ·Π½Ρ Π² ΠΈΠ½ΡΠ΅ΡΠ½Π΅ΡΠ΅.
P.S. ΠΡΠ»ΠΈ ΠΊΠΎΠΌΡ-ΡΠΎ Π·Π°Ρ ΠΎΡΠ΅ΡΡΡ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΡΠ°ΠΏΠΊΠ΅ ΡΠ°ΠΉΡΠ° Π½Π° WordPress, ΠΈ ΠΏΠΎ ΠΌΠ°Π½ΠΈΠΏΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ², ΡΠΎ ΠΎΠ± ΡΡΠΎΠΌ Π² ΡΡΠ°ΡΡΠ΅Β Π Π΅Π΄Π°ΠΊΡΠΈΡΡΠ΅ΠΌ ΡΠ΅ΠΌΡ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ
ΠΠ΅Π»Π°Ρ ΡΠ²ΠΎΡΡΠ΅ΡΠΊΠΈΡ ΡΡΠΏΠ΅Ρ ΠΎΠ².
ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π°
ΠΡΡΠ½ΡΠΉ Π½ΠΈΠΊΠ°ΠΊ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π·Π°ΡΠΎΠ»ΠΊΠ½ΡΡΡ Π΄Π²ΡΡΠΊΡ Π² ΠΏΡΠΎΡΠ΅Π·Ρ Π°Π²ΡΠΎΠΌΠ°ΡΠ°. β ΠΠ°ΠΏΠΈΠ»ΡΡ, β Π° Π΅ΡΠ΅ ΡΠ°ΠΊΡΠΈΡΡ, β ΡΠΊΠ°Π·Π°Π»Π° ΠΏΡΠΎΡ ΠΎΠΆΠ°Ρ. β Π‘ ΡΠ΅Π³ΠΎ Π²Π·ΡΠ»Π°? β Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΊΡΠΈΡΡΡΠΊΠ°Ρ. β ΠΠ°, β Π·Π°Π΄ΡΠΌΡΠΈΠ²ΠΎ ΠΏΡΠΎΠΈΠ·Π½Π΅Ρ ΠΏΡΡΠ½ΡΠΉ, β Π° Π±ΡΠ»Π° ΠΎΠ½Π΄Π°ΡΡΠΎΠ²Π°Ρ.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π΄Π»Ρ ΡΠ°ΠΏΠΊΠΈ Π² Paint < < < Π ΡΠ°Π·Π΄Π΅Π» > > > ΠΠ°ΠΊ Π²ΡΡΠ°Π²ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈ ΡΠ΅ΠΊΡΡ Π² ΠΎΡΠ΄Π΅Π»ΡΠ½ΡΠΉ Π±Π»ΠΎΠΊ
Β
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΈ ΠΎΡΠΎΡΠΌΠΈΡΡ Π² css ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°
ΠΡ Π°Π²ΡΠΎΡΠ°: ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΡΠ΅ΠΌ Π²Π°Ρ Π½Π° Π½Π°ΡΠ΅ΠΌ Π±Π»ΠΎΠ³Π΅ ΠΎ ΡΠ°ΠΉΡΠΎΡΡΡΠΎΠ΅Π½ΠΈΠΈ. Π£ Π»ΡΠ±ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Π΅ΡΡΡ ΡΠΎ, ΡΠ΅ΠΌ ΠΎΠ½ ΠΎΠ±ΡΡΠ½ΠΎ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅ΡΡΡ ΠΈ Π²ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ ΡΡΠ΅Π΄ΠΈ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ . ΠΠ±ΡΡΠ½ΠΎ ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°. CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π΅ ΡΠ°ΠΊΠΎΠΉ, ΠΊΠ°ΠΊ Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ.
Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° β ΠΊΠ°ΠΊΠΎΠΉ ΠΎΠ½Π° Π±ΡΠ²Π°Π΅Ρ
ΠΠΎΡΠ°Π·ΠΈΡΠ΅Π»ΡΠ½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΠ³ΠΎ ΠΌΠΎΠΆΠ΅Ρ Π·Π°Π²ΠΈΡΠ΅ΡΡ ΡΠ΅Π³ΠΎΠ΄Π½Ρ ΠΎΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Π²Π΅Π±-ΡΠ΅ΡΡΡΡΠ°. ΠΠΎ ΡΡΠΎ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎ ΡΠΈΠ»ΡΠ½ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ΅Ρ Π²Π΅Π±-ΡΠ΅ΡΡΡΡ ΠΎΡ Π΄ΡΡΠ³ΠΈΡ ? ΠΠ°ΠΊ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ, ΡΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° Ρ ΡΠΈΡΠΌΠ΅Π½Π½ΡΠΌ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠΌ ΠΈ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ. ΠΠ±ΡΡΠ½ΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΠΏΠΎ Π½Π΅ΠΉ Π»ΡΠ΄ΠΈ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°ΡΡ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΈΠ½ΡΠ΅ΡΠ½Π΅Ρ-ΠΏΡΠΎΠ΅ΠΊΡ. ΠΡΠΎ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ Π·Π°ΠΏΠΎΠΌΠΈΠ½Π°Π΅ΡΡΡ Π² ΠΏΠ°ΠΌΡΡΠΈ Π»ΡΠ΄Π΅ΠΉ.
ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π΅ΡΠ»ΠΈ Π²Ρ Π²ΠΈΠ΄ΠΈΡΠ΅ Π±Π΅Π»ΡΡ Π±ΡΠΊΠ²Ρ βΠβ Π½Π° ΡΠΈΠ½Π΅ΠΌ ΡΠΎΠ½Π΅, ΡΠΎ Π½Π°Π²Π΅ΡΠ½ΡΠΊΠ° ΡΡΠ°Π·Ρ Π΄Π΅Π»Π°Π΅ΡΠ΅ Π²ΡΠ²ΠΎΠ΄ β ΡΡΠΎ ΠΈΠΊΠΎΠ½ΠΊΠ° ΡΠΎΡΠΈΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ΅ΡΠΈ ΠΠΊΠΎΠ½ΡΠ°ΠΊΡΠ΅. Π ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΡΡΠΎΠ²ΠΎΠ³ΠΎ Π³ΠΎΠ»ΡΠ±Ρ Ρ Π²ΡΠ΅Ρ ΡΡΠ°Π·Ρ ΠΆΠ΅ Π°ΡΡΠΎΡΠΈΠΈΡΡΠ΅ΡΡΡ Ρ Twitter. ΠΡΠ΅ ΡΡΠΎ ΡΡΠ°Π»ΠΎ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠΌ ΠΏΠΎΡΠΎΠΌΡ, ΡΡΠΎ Π² ΡΠ°ΠΏΠΊΠ°Ρ Ρ ΡΡΠΈΡ ΡΠ°ΠΉΡΠΎΠ² Π±ΡΠ»ΠΈ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΈ ΠΎΠ½ΠΈ ΠΎΡΠ΅Π½Ρ Ρ ΠΎΡΠΎΡΠΎ Π·Π°ΠΏΠΎΠΌΠ½ΠΈΠ»ΠΈΡΡ Π»ΡΠ΄ΡΠΌ.
Π’Π°ΠΊ, ΡΡΠΎ Π±ΡΠ»ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΡΡΠ»Π΅Π½ΠΈΠΉ, ΡΠ΅ΠΏΠ΅ΡΡ Π΄Π°Π²Π°ΠΉΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΠ΄Π΅ΠΌ Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΊ ΡΠ΅Ρ Π½ΠΈΡΠ΅ΡΠΊΠΎΠΉ ΡΠ°ΡΡΠΈ.
ΠΠ°ΠΊ Π² CSS ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡΠΎΡΠΌΠΈΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°?
ΠΠΎΠΎΠ±ΡΠ΅ ΡΠ°ΠΏΠΊΠΈ Π±ΡΠ²Π°ΡΡ ΡΠ°Π·Π½ΡΠΌΠΈ. ΠΠΎ ΡΠΈΡΠΈΠ½Π΅ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ°Π·Π΄Π΅Π»ΠΈΡΡ Π½Π° Π΄Π²Π΅ Π³ΡΡΠΏΠΏΡ: Π²ΡΡΠΎΠ²Π½Π΅Π½Π½ΡΠ΅ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΈ ΡΠ΅, ΡΡΠΎ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅Π Π°Π½ΡΡΠ΅ ΡΠ°ΠΏΠΊΡ Π΄Π΅Π»Π°Π»ΠΈ ΡΠ°ΠΊΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π»ΡΠ±ΠΎΠΉ Π΄ΡΡΠ³ΠΎΠΉ Π±Π»ΠΎΠΊ β ΠΎΠ±ΡΡΠ½ΠΎΠΌΡ ΡΠ΅Π³Ρ div Π΄Π°Π²Π°Π»ΠΈ Π½ΡΠΆΠ½ΡΠΉ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ, ΠΏΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ Π² Π½Π΅Π³ΠΎ ΠΏΠΎΠΏΠ°Π΄Π°Π»ΠΎ Π²ΡΠ΅ Π½ΡΠΆΠ½ΠΎΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅, Π° ΠΏΠΎΡΠΎΠΌ Π²ΡΠ΅ ΡΡΠΎ ΠΎΡΠΎΡΠΌΠ»ΡΠ»ΠΎΡΡ. Π‘Π΅Π³ΠΎΠ΄Π½Ρ ΠΆΠ΅ ΡΠΆΠ΅ ΠΏΡΠΈΠ½ΡΡΠΎ Π²Π΅ΡΡΡΠ°ΡΡ ΠΏΠΎ-Π΄ΡΡΠ³ΠΎΠΌΡ. Π‘ΠΏΠ΅ΡΠΈΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ° Π² HTML5 ΠΏΠΎΡΠ²ΠΈΠ»ΡΡ ΠΏΠ°ΡΠ½ΡΠΉ ΡΠ΅Π³ β header. ΠΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΡΠ΅ΡΡΡ, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌ ΠΏΠΎΠ½ΠΈΠΌΠ°ΡΡ, ΡΡΠΎ ΡΡΠΎ Π·Π° ΡΠ°ΡΡΡ ΡΠ°Π±Π»ΠΎΠ½Π° ΠΈ Π·Π° ΡΡΠΎ ΠΎΠ½Π° ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ. ΠΡΡΠ°ΡΠΈ, Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΠ·ΡΡΠΈΡΡ ΠΎΡΠ½ΠΎΠ²Ρ HTML5, ΡΠΎ Π²Π°ΠΌ ΠΏΡΡΠΌΠ°Ρ Π΄ΠΎΡΠΎΠ³Π° Π² Π½Π°Ρ ΠΏΡΠ΅ΠΌΠΈΡΠΌ-ΡΠ°Π·Π΄Π΅Π», Π³Π΄Π΅ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ ΡΡΠΎΠΊΠΈ ΠΏΠΎ ΡΡΠΎΠΉ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ.
ΠΠΎΡΡΠΎΠΌΡ, Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΏΡΠΎΡΡΠ΅ΠΉΡΠ΅ΠΉ ΡΠ°ΠΏΠΊΠΈ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π½Π°ΠΏΠΈΡΠ°ΡΡ Π² html Π²ΠΎΡ ΡΠ°ΠΊΠΎΠΉ ΠΊΠΎΠ΄:
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΏΠΎΠΊΠ° Π½ΠΈΡΠ΅Π³ΠΎ Π½Π΅ ΠΏΠΎΡΠ²ΠΈΡΡΡ β Π½Π°ΠΌ Π΅ΡΠ΅ Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π² Π½Π΅Π΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ ΠΈ ΠΎΡΠΎΡΠΌΠΈΡΡ. ΠΠΎ Π΄Π°Π²Π°ΠΉΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠ΄Π΅Π»Π°Π΅ΠΌ Π±Π»ΠΎΠΊ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠΊΡΠ°Π½Π°, Π° ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΡΠΌΠΈΠΌ.
header{ width: 100%; background: #D8E3AB; height: 70px; }
header{ width: 100%; background: #D8E3AB; height: 70px; } |
ΠΠΎΠΎΠ±ΡΠ΅, Π΅ΡΠ»ΠΈ Π²ΡΠ΅ Π΄Π΅Π»Π°ΡΡ ΠΏΠΎ-ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎΠΌΡ, ΡΠΎ ΡΠ»Π΅Π΄ΠΎΠ²Π°Π»ΠΎ Π±Ρ Π·Π°Π΄Π°ΡΡ Π±Π»ΠΎΠΊΡ ΠΊΠ°ΠΊΠΎΠΉ-ΡΠΎ ΠΊΠ»Π°ΡΡ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡ (ΠΏΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΠΎ Π²Π°ΠΆΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ), Π½ΠΎ ΠΌΡ ΠΏΠΎΠΊΠ° ΠΏΡΠΎΡΡΠΎ ΠΎΠ±ΡΠ°ΡΠΈΠΌΡΡ ΠΊ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΏΠΎ ΡΠ΅Π³Ρ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ width: 100% Π΄Π΅Π»Π°Π΅Ρ ΡΠ°ΠΊ, ΡΡΠΎ Π½Π°Ρ Π±Π»ΠΎΠΊ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°ΡΡΡΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π²Π½Π΅ Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠΎΠ² ΡΠΊΡΠ°Π½Π°. ΠΡΠ»ΠΈ ΠΆΠ΅ Π²ΡΠ΅-ΡΠ°ΠΊΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ Π½ΡΠΆΠ½ΠΎ Ρ ΠΎΡΡ ΠΊΠ°ΠΊ-ΡΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠΈΡΡ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ max-width, Π³Π΄Π΅ Π² ΠΏΠΈΠΊΡΠ΅Π»ΡΡ Π·Π°ΠΏΠΈΡΡΠ²Π°ΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ, ΠΏΠΎ Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π±ΠΎΠ»ΡΡΠ΅ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΡΠΈΡΡΡΡΡΡ.
Π‘Π΅ΠΉΡΠ°Ρ ΠΏΠ΅ΡΠ΅Π΄ Π½Π°ΠΌΠΈ ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠ»ΠΎΡΠΊΠ°, ΠΎΠΊΡΠ°ΡΠ΅Π½Π½Π°Ρ Π² Π²ΡΠ±ΡΠ°Π½Π½ΡΠΉ ΡΠ²Π΅Ρ. ΠΠ±ΡΡΠ½ΠΎ Π²ΡΡΠΎΡΡ Π½Π΅ Π·Π°Π΄Π°ΡΡ β ΠΎΠ½Π° ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΡΡΡ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ Π½Π° ΠΎΡΠ½ΠΎΠ²Π°Π½ΠΈΠΈ ΡΠ΅Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ Π±ΡΠ΄ΡΡ Π² ΡΠ°ΠΏΠΊΠ΅.
<div id = «wrap»> <header></header> </div>
<div id = «wrap»> <header></header> </div> |
Π’Π°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π½Π°Ρ Π²Π΅ΡΡ ΡΠ°ΠΉΡΠ° Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ ΡΠΎΠ²Π½ΠΎ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ. ΠΡΡΠ°Π΅ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π½Π°ΠΏΠΎΠ»Π½ΠΈΡΡ Π΅Π³ΠΎ.
Π ΠΈΡ. 1. ΠΠΎΠΊΠ° ΡΡΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ Π²ΡΠ΅ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅.
Π§ΡΠΎ ΠΎΠ±ΡΡΠ½ΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΡΡΡ Π² ΡΠ°ΠΏΠΊΠ΅?
ΠΠ±ΡΡΠ½ΠΎ ΡΠ°ΠΌ Π²ΡΡΠ°Π²Π»Π΅Π½ Π»ΠΎΠ³ΠΎΡΠΈΠΏ, Π½Π°Π·Π²Π°Π½ΠΈΠ΅, ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°. Π’Π°ΠΊΠΆΠ΅ ΡΠ°ΠΌ ΠΌΠΎΠΆΠ΅Ρ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡΡ ΠΊΠ°ΠΊΠ°Ρ-ΡΠΎ ΠΊΠΎΠ½ΡΠ°ΠΊΡΠ½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ ΠΏΠΎ ΡΡΡΠ°Π½ΠΈΡΠ°ΠΌ ΠΈΠ»ΠΈ Π΄Π°ΠΆΠ΅ ΡΠ΅ΠΊΠ»Π°ΠΌΠ°.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ΠΠΎΠ³ΠΎΡΠΈΠΏ ΠΎΠ±ΡΡΠ½ΠΎ Π²ΡΡΠ°Π²Π»ΡΡΡ ΠΊΠ°ΠΊ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠ°Π²Π°ΠΉΡΠ΅, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, ΠΏΠΎΡΡΠ°Π²ΠΈΠΌ ΡΠ°ΠΊΠΎΠΉ:
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ Π΄ΠΎΠΏΠΈΡΠ°ΡΡ Π½Π΅ΠΊΠΎΡΠΎΡΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΊ ΡΠΎΠ½Ρ:
background: #D8E3AB url(logo.png) no-repeat 5% 50%;
background: #D8E3AB url(logo.png) no-repeat 5% 50%; |
Π’ΠΎ Π΅ΡΡΡ ΠΏΠΎΠΌΠΈΠΌΠΎ ΡΠΏΠ»ΠΎΡΠ½ΠΎΠ³ΠΎ ΡΠ²Π΅ΡΠ° Π΄Π°Π΅ΠΌ Π΅ΡΠ΅ ΠΈ ΡΠΎΠ½ΠΎΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ (Π² Π½Π°ΡΠ΅ΠΌ ΡΠ»ΡΡΠ°Π΅ logo.png) ΠΈ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Ρ Π΅Π΅ ΠΏΠΎΠ»ΠΎΠΆΠΈΠ» Π² ΡΡ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΡ, ΡΡΠΎ ΠΈ ΡΠ°ΠΉΠ» ΡΡΠΈΠ»Π΅ΠΉ. ΠΠ°ΠΏΡΠ΅ΡΠ°Π΅ΠΌ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° ΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ Π΅Π³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΡ Π² Π±Π»ΠΎΠΊΠ΅ β Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΡΠΌΠ΅ΡΡΠΈΠΌ Π²Π»Π΅Π²ΠΎ ΠΈ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ.
ΠΠΎΠ±Π°Π²ΠΈΠΌ Π² ΡΠ°ΠΏΠΊΡ ΠΊΠ°ΠΊΠΎΠ΅-ΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ ΠΌΠ΅Π½Ρ.
<div class = «title»>ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°</div> <ul class = «menu»> <li><a href = «#»>ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a></li> <li><a href = «#»>Π Π½Π°Ρ</a></li> <li><a href = «#»>Π£ΡΠ»ΡΠ³ΠΈ</a></li> </ul>
<div class = «title»>ΠΠ°Π·Π²Π°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ°</div> <ul class = «menu»> <li><a href = «#»>ΠΠΎΠ½ΡΠ°ΠΊΡΡ</a></li> <li><a href = «#»>Π Π½Π°Ρ</a></li> <li><a href = «#»>Π£ΡΠ»ΡΠ³ΠΈ</a></li> </ul> |
Π’Π΅ΠΏΠ΅ΡΡ Π²ΡΠ΅ ΡΡΠΎ ΠΎΡΠΎΡΠΌΠΈΠΌ.
.title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; }
.title{ font-size: 36px; padding-top: 10px; text-align: center; } .menu{ list-style: none; position: absolute; top: 10px; right: 100px; } |
ΠΠ°Π³ΠΎΠ»ΠΎΠ²ΠΊΡ Π½ΡΠΆΠ½ΠΎ Π΄Π°ΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΌΠ΅Π½Π΅Π΅ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΡΠΉ ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π²ΡΠ΄Π΅Π»ΡΠ»ΡΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΎΡΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°ΡΡ. Π Π²ΠΎΠΎΠ±ΡΠ΅ Π½Π° ΡΠ°ΠΉΡΠ°Ρ Π±ΡΠ²Π°Π΅Ρ ΠΏΠΎ-ΡΠ°Π·Π½ΠΎΠΌΡ β Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ΅Ρ ΡΡΠΎΡΡΡ ΠΈ ΡΠ»Π΅Π²Π°, ΠΈ ΡΠΏΡΠ°Π²Π°.
Π‘Π°ΠΌ ΡΠΏΠΈΡΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΡΠΎΡΠΌΠΈΡΡΠ΅Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΡ, ΡΠΎΠΆΠ΅ Π½ΡΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΎΡΠΎΡΠΌΠΈΡΡ. Π ΡΡΠΎΠΌ ΠΏΡΠΈΠΌΠ΅ΡΠ΅ ΠΌΡ Π²ΡΠ΅Π³ΠΎ Π»ΠΈΡΡ ΡΠ±Π΅ΡΠ΅ΠΌ ΠΌΠ°ΡΠΊΠ΅ΡΡ Ρ ΠΏΡΠ½ΠΊΡΠΎΠ², Π° Π½Π° Π΄Π΅Π»Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ Π΅ΡΠ΅ ΠΌΠ½ΠΎΠ³ΠΎ ΡΠ΅Π³ΠΎ β ΡΠ±ΡΠ°ΡΡ ΠΏΠΎΠ΄ΡΠ΅ΡΠΊΠΈΠ²Π°Π½ΠΈΡ Ρ ΡΡΡΠ»ΠΎΠΊ, Π·Π°Π΄Π°ΡΡ ΠΈΠΌ ΡΠ²Π΅Ρ ΠΈ ΡΠΎΠ½ ΠΈ Ρ.Π΄.
Π‘ΠΌΠ΅ΡΡΠΈΠΌ ΠΌΠ΅Π½Ρ Π² ΠΏΡΠ°Π²ΡΠΉ ΠΊΡΠ°ΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π§ΡΠΎΠ±Ρ ΡΡΠΎ Π·Π°ΡΠ°Π±ΠΎΡΠ°Π»ΠΎ, Π½ΡΠΆΠ½ΠΎ ΡΠ°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΈΡΠ°ΡΡ Π΄Π»Ρ header ΡΠ°ΠΊΠΎΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΠΎ: position: relative;
ΠΠ° Π²ΡΡ ΠΎΠ΄Π΅ ΠΏΠΎΠ»ΡΡΠ°Π΅ΠΌ Π³ΠΎΡΠΎΠ²ΡΡ ΡΠ°ΠΏΠΊΡ Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠΎΠΌ ΡΠ»Π΅Π²Π°, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ ΠΏΠΎ ΡΠ΅Π½ΡΡΡ ΠΈ ΠΌΠ΅Π½Ρ ΡΠΏΡΠ°Π²Π°. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΏΡΠΈ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ΅Π°Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ° Π½ΡΠΆΠ½ΠΎ Π²ΡΠ΅ Π΄Π΅Π»Π°ΡΡ Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΈΠΈ Ρ ΡΠ΅ΠΌ ΠΌΠ°ΠΊΠ΅ΡΠΎΠΌ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π΄Π΅Π»Π°Π΅ΡΡΡ ΡΠ°Π±ΠΎΡΠ°, Π° Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°ΡΡΡΡ ΡΠ°ΠΌΠΎΠ΄Π΅ΡΡΠ΅Π»ΡΠ½ΠΎΡΡΡΡ. ΠΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡΡΡ Π² ΡΠ΅Π»ΠΎΠΌ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ ΡΠ°ΠΊΠΈΠ΅ ΠΆΠ΅, ΠΊΠ°ΠΊ Ρ ΠΏΡΠΈΠ²ΠΎΠ΄ΠΈΠ» Π·Π΄Π΅ΡΡ.
ΠΠ°ΠΊ Π·Π°ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ Π±Π»ΠΎΠΊ, ΡΡΠΎΠ±Ρ ΠΎΠ½ Π½Π΅ ΠΈΡΡΠ΅Π·Π°Π» ΠΏΡΠΈ ΠΏΡΠΎΠΊΡΡΡΠΊΠ΅?
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π² css (ΡΠ°ΠΊΠΎΠ΅ Π΅Π΅ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ²ΠΈΠ΄Π΅ΡΡ Π½Π° ΠΌΠ½ΠΎΠ³ΠΈΡ Π²Π΅Π±-ΡΠ΅ΡΡΡΡΠ°Ρ ), ΡΠΎ Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅. ΠΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ°ΠΊΠΈΠ΅ ΡΡΠΈΠ»ΠΈ:
Π ΡΠ°ΠΊΠΆΠ΅ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ (top, left, right, bottom) ΠΊΠ°ΠΊΠΈΠ΅ Π²Π°ΠΌ Π½ΡΠΆΠ½Ρ. ΠΠ±ΡΡΠ½ΠΎ ΡΠΈΠΊΡΠ°ΡΠΈΡ Π΄Π΅Π»Π°ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ jQuery, ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Ρ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΠΉ ΡΡΠ΅Π½Π°ΡΠΈΠΉ ΠΈ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Ρ Π΅Π³ΠΎ ΠΊ ΡΠΎΠ±ΡΡΠΈΡ β Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠΊΡΠΎΠ»Π»Ρ ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π½Π°ΡΡΠΈΡΡΡΡ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠ°ΠΉΡΡ, Π² ΡΠΎΠΌ ΡΠΈΡΠ»Π΅ ΠΈ ΡΠ°ΠΏΠΊΠΈ, Π½ΠΎ ΡΠ°ΡΡΠΌΠΎΡΡΠ΅Π½Π½ΡΠΉ ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π» Π²Π°ΠΌ Π½Π΅ΠΏΠΎΠ½ΡΡΠ΅Π½, ΡΠΎ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΠΈΠ½Π°ΡΡ Ρ ΡΠ°ΠΌΡΡ Π°Π·ΠΎΠ² β ΠΈΠ·ΡΡΠ΅Π½ΠΈΡ ΠΎΡΠ½ΠΎΠ² HTML ΠΈ CSS. Π ΡΡΠΎΠΌ Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ ΠΏΠΎΠΌΠΎΡΡ Π½Π°Ρ ΠΏΡΠ΅ΠΌΠΈΠΌΡΠΌ-ΡΠ°Π·Π΄Π΅Π», ΡΠ°ΠΌ Π΅ΡΡΡ Π΄Π²Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠΈΡ Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡΠ° ΠΏΠΎ ΡΡΠΈΠΌ ΡΠ΅Ρ Π½ΠΎΠ»ΠΎΠ³ΠΈΡΠΌ, Π² ΠΊΠΎΡΠΎΡΡΡ Π²ΡΠ΅ ΡΠ°Π·ΡΡΡΠ½ΡΠ΅ΡΡΡ ΠΏΠΎ ΠΏΠΎΠ»ΠΎΡΠΊΠ°ΠΌ.
Π£ΠΌΠ΅Π½ΠΈΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΠΈ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°ΡΡ ΡΠ°ΠΏΠΊΠΈ Π²Π°ΠΌ ΠΏΡΠΈΠ³ΠΎΠ΄ΠΈΡΡΡ, Π½Π° ΡΠ΅Ρ ΠΆΠ΅ Π±ΠΈΡΠΆΠ°Ρ ΡΡΠΈΠ»Π°Π½ΡΠ° Π΅ΡΡΡ Π·Π°ΠΊΠ°Π·Ρ, Π² ΠΊΠΎΡΠΎΡΡΡ ΠΏΡΠΎΡΡΡ ΡΠ²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΠΈΠ»ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π΅Π³ΠΎ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΡ. Π ΠΎΠ±ΡΠ΅ΠΌ, Ρ ΠΆΠ΅Π»Π°Ρ Π²Π°ΠΌ ΡΡΠΏΠ΅Ρ ΠΎΠ² Π² ΠΈΠ·ΡΡΠ΅Π½ΠΈΠΈ ΠΈ ΠΎΡΡΠ°Π²Π°ΠΉΡΠ΅ΡΡ Ρ Π½Π°ΠΌΠΈ, ΡΡΠΎΠ±Ρ ΡΡΠΊΠΎΡΠΈΡΡ ΡΡΠΎ ΠΎΠ±ΡΡΠ΅Π½ΠΈΠ΅.
ΠΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΠΊΡΡΡ ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΠΎΠ³ΠΎ ΡΠ°ΠΉΡΠ° Ρ Π½ΡΠ»Ρ!
ΠΠ·ΡΡΠΈΡΠ΅ ΠΊΡΡΡ ΠΈ ΡΠ·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ Π²Π΅ΡΡΡΠ°ΡΡ ΡΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΡΠ°ΠΉΡΡ Π½Π° HTML5 ΠΈ CSS3
Π£Π·Π½Π°ΡΡ ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅PSD to HTML
ΠΠ΅ΡΡΡΠΊΠ° ΡΠ°ΠΉΡΠ° Π½Π° HTML5 ΠΈ CSS3 Ρ Π½ΡΠ»Ρ
Π‘ΠΌΠΎΡΡΠ΅ΡΡ2 ΠΏΡΠΎΡΡΡΡ ΡΠΏΠΎΡΠΎΠ±Π° + Π±ΠΎΠ½ΡΡ Π΄Π»Ρ WordPress
ΠΡΠΈΠ²Π΅Ρ, Π΄ΡΡΠ·ΡΡ! Π‘Π΅Π³ΠΎΠ΄Π½Ρ Ρ Ρ ΠΎΡΡ ΡΠ°ΡΡΠΊΠ°Π·Π°ΡΡ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°. ΠΠ½Π° ΡΠ²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ, ΠΏΡΠΈΠ΄Π°ΡΡΠΈΠΉ ΠΏΡΠΎΠ΅ΠΊΡΡ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΠΎΡΡΡ, ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΠΎΡΡΡ. ΠΡΠΈΠ΄Π°Π΅Ρ ΡΠ΅ΡΡΡΡ ΡΠ·Π½Π°Π²Π°Π΅ΠΌΠΎΡΡΡ ΠΈ ΡΠ²ΠΎΠΉ ΡΡΠΈΠ»Ρ. Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ Π΅Π΅, Π½Π΅ ΡΡΠ΅Π±ΡΡΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-ΡΠΎ ΠΎΡΠΎΠ±ΡΠ΅, ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°Π½Π½ΡΠ΅ Π·Π½Π°Π½ΠΈΡ, Π½Π°Π²ΡΠΊΠΈ ΠΈ ΡΠΌΠ΅Π½ΠΈΡ ΠΏΡΠΎΠ³ΡΠ°ΠΌΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π‘ΡΡΠ΅ΡΡΠ²ΡΠ΅Ρ Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π°, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΡ Π΄ΠΎΡΡΠΈΡΡ ΡΠ΅Π»ΠΈ. Π ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΈΠ· Π½ΠΈΡ ΠΏΡΠΎΡΡΠΎΠΉ.
Π‘ΠΎΠ΄Π΅ΡΠΆΠ°Π½ΠΈΠ΅ ΡΡΠ°ΡΡΠΈ:
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°: Π²Π²ΠΎΠ΄Π½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ
ΠΠ°ΡΠ½Π΅ΠΌ Ρ ΠΎΠ±ΡΠ΅ΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎ Π΄Π°Π½Π½ΠΎΠΌ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΎΠΌ ΠΈ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ΅. ΠΠ½ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ Π½Π΅ΠΎΡΠΏΠΎΡΠΈΠΌΡΠΌΠΈ ΠΏΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π°ΠΌΠΈ:
- ΡΠΎΡΠΌΠΈΡΡΠ΅Ρ ΡΠ·Π½Π°Π²Π°Π΅ΠΌΠΎΡΡΡ ΡΠ°ΠΉΡΠ°;
- ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΡ, ΠΎΡΠΈΡΠΈΠ°Π»ΡΠ½ΡΡ ΡΠΈΠΌΠ²ΠΎΠ»ΠΈΠΊΡ;
- ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΡΠ΅ΠΌΠ°ΡΠΈΡΠ½ΠΎΡΡΡ ΡΠ΅ΡΡΡΡΠ° β ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ Ρ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ Π²Π·Π³Π»ΡΠ΄Π° ΠΏΠΎΠ½ΠΈΠΌΠ°Π΅Ρ, ΠΎ ΡΠ΅ΠΌ ΠΈΠ΄Π΅Ρ ΡΠ΅ΡΡ;
- Π΄Π΅Π»Π°Π΅Ρ ΠΏΡΠΎΠ΅ΠΊΡ Π±ΠΎΠ»Π΅Π΅ ΠΊΡΠ°ΡΠΈΠ²ΡΠΌ, ΡΡΠΊΠΈΠΌ;
- Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ ΡΠΎΠ»ΠΈΠ΄Π½ΠΎΡΡΠΈ.
ΠΡΡΠ°ΡΠΈ! Π£ ΡΠ°ΠΉΡΠ° Π΅ΡΠ΅ Π½Π΅Ρ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°? ΠΠ³ΠΎ ΡΠ°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ Π²ΡΠ΅Π³ΠΎ Π·Π° 5 ΠΌΠΈΠ½ΡΡ. Π ΡΡΠΎΠΌ Π²Π°ΠΌ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π½Π°Ρ ΠΏΡΠΎΠ΅ΠΊΡ.
Π§ΡΠΎ Π΄ΠΎΠ»ΠΆΠ΅Π½/ΠΌΠΎΠΆΠ΅Ρ Π²ΠΊΠ»ΡΡΠ°ΡΡ Π² ΡΠ΅Π±Ρ Π²Π΅ΡΡ Π½ΠΈΠΉ Π±Π»ΠΎΠΊ Π»ΡΠ±ΠΎΠΉ ΠΏΠ»ΠΎΡΠ°Π΄ΠΊΠΈ:
- Π»ΠΎΠ³ΠΎΡΠΈΠΏ β ΡΡΠΊΠΈΠΉ, Π·Π°ΠΌΠ΅ΡΠ½ΡΠΉ;
- ΡΠ»ΠΎΠ³Π°Π½;
- Π½ΠΎΠΌΠ΅Ρ ΡΠ΅Π»Π΅ΡΠΎΠ½Π°, Π°Π΄ΡΠ΅Ρ ΡΠ»Π΅ΠΊΡΡΠΎΠ½Π½ΠΎΠΉ ΠΏΠΎΡΡΡ ΠΈΠ»ΠΈ Π΄ΡΡΠ³ΠΈΠ΅ ΠΊΠΎΠ½ΡΠ°ΠΊΡΡ;
- ΠΌΠ΅Π½Ρ.
ΠΠΎΠ½Π΅ΡΠ½ΠΎ, Π² Π½Π΅ΠΌ Π½Π΅ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ Π΄ΠΎΠ»ΠΆΠ½Ρ ΠΏΡΠΈΡΡΡΡΡΠ²ΠΎΠ²Π°ΡΡ Π²ΡΠ΅ ΡΠΊΠ°Π·Π°Π½Π½ΡΠ΅ Π²ΡΡΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ. ΠΠ»Π°Π²Π½Π°Ρ Π·Π°Π΄Π°ΡΠ° β ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°ΡΡ ΡΠ·Π½Π°Π²Π°Π΅ΠΌΠΎΡΡΡ ΠΈ ΠΏΡΠΈΠ²Π»Π΅ΠΊΠ°ΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠ°. Π¨Π°ΠΏΠΊΠ° Π΄ΠΎΠ»ΠΆΠ½Π° ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡΠ½ΠΎ Π³Π°ΡΠΌΠΎΠ½ΠΈΡΠ½ΠΎ ΡΠΎΡΠ΅ΡΠ°ΡΡΡΡ Ρ ΠΎΡΠ½ΠΎΠ²Π½ΡΠΌ ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅ΠΌ ΡΠ°ΠΉΡΠ°.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°: Π΄Π²Π° ΡΠΏΠΎΡΠΎΠ±Π° Π΄ΠΎΡΡΠΈΠΆΠ΅Π½ΠΈΡ ΡΠ΅Π»ΠΈ
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅: ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ: 4 ΠΏΡΠΎΡΡΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ
Π― ΠΏΠΎΠΊΠ° Π½Π΅ Π±ΡΠ΄Ρ ΡΠ³Π»ΡΠ±Π»ΡΡΡΡΡ Π² Π²ΠΎΠΏΡΠΎΡΡ Β«ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° htmlΒ» ΠΈΠ»ΠΈ Β«ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° cssΒ». Π‘Π½Π°ΡΠ°Π»Π° ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²ΠΈΡΡ Π΄Π»Ρ Π½Π΅Π΅ Β«ΡΠΈΡΡΠ½ΠΎΠΊΒ».
1. Π‘Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½
ΠΠ°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡΠΎΡΡΠΎΠΉ ΠΌΠ΅ΡΠΎΠ΄. ΠΠ΅ ΡΡΠ΅Π±ΡΡΡΠΈΠΉ ΠΊΠ°ΠΊΠΈΡ -Π»ΠΈΠ±ΠΎ Π½Π°Π²ΡΠΊΠΎΠ², ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΡΡ ΡΠΌΠ΅Π½ΠΈΠΉ. ΠΡΡΡ ΡΠ΅Π»ΡΠΉ ΡΡΠ΄ ΠΏΠ»ΠΎΡΠ°Π΄ΠΎΠΊ, Π½Π° ΠΊΠΎΡΠΎΡΡΡ ΡΠΎΠ·Π΄Π°ΡΡΡΡ ΡΠ°ΠΏΠΊΠΈ Π΄Π»Ρ ΡΠ°ΠΉΡΠΎΠ². Π Π½ΠΈΡ β Π½Π°Π±ΠΎΡΡ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ². ΠΠ΅ΠΊΠΎΡΠΎΡΡΠ΅ ΡΠ΅ΡΠ²ΠΈΡΡ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡ Π²Π½ΠΎΡΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ Π² ΡΠ°Π±Π»ΠΎΠ½Ρ. ΠΡΡΠ³ΠΈΠ΅ β Π½Π΅Ρ. Π‘ΡΠ΅Π΄ΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΡ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠ² Π΅ΡΡΡ, ΠΊΠ°ΠΊ Π±Π΅ΡΠΏΠ»Π°ΡΠ½ΡΠ΅, ΡΠ°ΠΊ ΠΈ ΠΏΠ»Π°ΡΠ½ΡΠ΅.
Π‘Π΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ Π΄Π»Ρ ΡΠ°ΠΉΡΠ° ΠΎΠ½Π»Π°ΠΉΠ½ ΠΎΡΠ΅Π½Ρ ΠΏΡΠΎΡΡΠΎ. Π’ΠΎΠ»ΡΠΊΠΎ Π΄ΠΎΡΡΠΈΡΡ ΠΎΡΠΈΠ³ΠΈΠ½Π°Π»ΡΠ½ΠΎΡΡΠΈ ΡΠ΄Π°Π΅ΡΡΡ Π½Π΅ Π²ΡΠ΅Π³Π΄Π°. ΠΠ΅Π΄Ρ ΡΠ°Π±ΠΎΡΠ° ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ°Π±Π»ΠΎΠ½ΠΎΠ².
2. Adobe Photoshop
ΠΠΎΠΏΡΠ»ΡΡΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ. Π£ Π½Π΅Π³ΠΎ Π±Π΅Π·Π³ΡΠ°Π½ΠΈΡΠ½ΡΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠΈ. Π Π°Π±ΠΎΡΠ°Ρ Π² Π½Π΅ΠΌ, Π²Ρ ΡΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠΎΠ·Π΄Π°ΡΡ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠ½ΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΠΎΠ±Π»ΠΎΠΆΠΊΡ, ΡΠΎΡΠ½ΠΎ ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΡΠ΅ΠΌΠ°ΡΠΈΠΊΠ΅ Π²Π°ΡΠ΅Π³ΠΎ ΠΏΡΠΎΠ΅ΠΊΡΠ°:
- Π½ΡΠΆΠ½ΠΎΠ³ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°;
- ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΡΠ²Π΅ΡΠ° ΠΈ ΠΎΡΡΠ΅Π½ΠΊΠ°;
- Ρ Π½ΡΠΆΠ½ΡΠΌ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΈ Ρ.Π΄..
Photoshop ΡΠ²Π»ΡΠ΅Ρ ΡΠΎΠ±ΠΎΠΉ Π΄Π΅ΠΉΡΡΠ²ΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΏΠΎΠΊ ΠΈ ΠΏΡΠΎΡΠΈΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ².
ΠΡΠΎΠΌΠ΅ΠΆΡΡΠΎΡΠ½ΡΠΉ ΠΈΡΠΎΠ³Π‘Π΄Π΅Π»Π°ΡΡ Π³ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ β ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π° Π΄Π΅Π»Π°. ΠΠ΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΅ΡΠ΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ Π΅Π³ΠΎ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ ΡΠ°ΠΉΡΠ°. Π‘Π½Π°ΡΠ°Π»Π° Π½ΡΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΡ Π³ΠΎΡΠΎΠ²ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ Π² ΠΏΠ°ΠΏΠΊΡ IMAGES. ΠΠ½Π° Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π² ΠΊΠ°ΡΠ°Π»ΠΎΠ³Π΅ Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΈΠ²Π½ΠΎΠΉ ΠΏΠ°Π½Π΅Π»ΠΈ. ΠΠΎΡΠ»Π΅ ΡΠ΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΡΡΡΠΏΠ°ΡΡ ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ°Ρ .
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° CSS: ΠΏΠΎΠΌΠ΅ΡΠ°Π΅ΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΡΠ°ΠΉΡ
Π Π°ΡΡΠΊΠ°Π·ΡΠ²Π°Ρ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° CSS. ΠΠ΅ΡΠ΅Ρ ΠΎΠ΄ΠΈΠΌ Π² #header ΠΈ ΡΠ°ΠΌ Π²ΠΌΠ΅ΡΡΠΎ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π½ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² Π²ΡΡΠΎΡΡ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ Π³Π°Π±Π°ΡΠΈΡΡ ΡΠΎΠ·Π΄Π°Π½Π½ΠΎΠΉ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ β Π²ΡΡΠΎΡΠ° ΠΈ ΡΠΈΡΠΈΠ½Π° ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠΎΡ ΠΏΡΠΈΠΌΠ΅Ρ ΠΊΠΎΠ΄Π°:
#header{
Β Β width: 1420px; Β Β β ΡΠΈΡΠΈΠ½Π°
Β Β height: 300px;Β Β β Π²ΡΡΠΎΡΠ°
Β Β background-color: #25B33f;Β β ΡΠΎΠ½
Β Β margin-bottom: 30px;Β Β β ΠΎΡΡΡΡΠΏ ΡΠ½ΠΈΠ·Ρ
}
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! ΠΠ΄Π΅ΡΡ ΠΈ Π΄Π°Π»Π΅Π΅ ΡΠ»ΠΎΠ²Π° Β«Π¨ΠΈΡΠΈΠ½Π°Β», Β«ΠΡΡΠΎΡΠ°Β», Β«Π€ΠΎΠ½Β» ΠΈ ΠΏΡΠΎΡΠΈΠ΅ ΠΊ ΠΊΠΎΠ΄Ρ Π½Π΅ ΠΈΠΌΠ΅ΡΡ ΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΡ. ΠΠ½ΠΈ Π»ΠΈΡΡ ΡΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΡΡΠΎ Π·Π½Π°ΡΠΈΡ ΡΠ° ΠΈΠ»ΠΈ ΠΈΠ½Π°Ρ ΡΡΡΠΎΠΊΠ°.
ΠΠΎΡΠ»Π΅ ΡΡΠΎΠ³ΠΎ ΠΎΡΡΠ°Π΅ΡΡΡ Π²ΡΡΠ°Π²ΠΈΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΠΌΡ ΡΠ°ΠΏΠΊΡ:
#header{
Β Β width: 900px;
Β Β height: 200px;
Β Β background-color: #25B33f;
Β Β margin-bottom: 10px;
Β Β background-image: url(images/i8. png)Β β ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°
}
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° html
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅: ΠΠ°ΠΊ ΠΎΡΠΎΡΠΌΠΈΡΡ Π³Π»Π°Π²Π½ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ ΡΠ°ΠΉΡΠ°: 11 ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΡΡ ΡΠΎΡΡΠ°Π²Π»ΡΡΡΠΈΡ
ΠΠ°ΡΠΈΠ½Π°Ρ ΡΠ°ΡΡΠΊΠ°Π·ΡΠ²Π°ΡΡ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΡΠ°ΠΉΡΠ° ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½ΡΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ΅Π³ body Π±Π»ΠΎΠΊ div Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠΈΠΊΠ°ΡΠΎΡΠΎΠΌ id=Β»headerΒ», ΠΈ Π² Π½ΡΠΌ Π΄Π²Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° h2 ΠΈΒ h4. Π Π½ΠΈΡ ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠΊΠ°Π·Π°Π½ΠΎ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΡΠΎΠ΅ΠΊΡΠ° ΠΈ Π΅Π³ΠΎ ΠΏΠΎΠ΄ΡΠΎΠ±Π½ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅.
<div id=Β»headerΒ»>
Β Β <h2>ΠΠΎΠΉ ΡΠ°ΠΉΡ<h2>
Β Β Β Β <h4>Π’Π΅ΠΏΠ΅ΡΡ Ρ Π·Π½Π°Ρ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°</h4>
</div>
ΠΡΠ»ΠΈ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²Π½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄ ΡΠ°ΠΌΠΎΠ³ΠΎ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΈ ΡΠ΅ΠΊΡΡΠ° ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ, ΠΎΡΠΎΡΠΌΠΈΡΡ ΠΈΡ , ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΠΎΡ ΡΠ°ΠΊΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°:
h2{
Β Β color: #2980b9;Β β ΡΠ²Π΅Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
Β Β font: 50px Times New Roman;Β β ΡΡΠΈΡΡ
Β Β margin-left: 500px;Β β ΠΎΡΡΡΡΠΏ ΡΠ»Π΅Π²Π°
}
h4{
Β Β width: 400px;Β β ΡΠΈΡΠΈΠ½Π°
Β Β color: #9b59b6;Β β ΡΠ²Π΅Ρ
Β Β font-style: italic;Β β ΠΊΡΡΡΠΈΠ²
Β Β margin: 90px 0 0 40px;Β β ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅
}
Π Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ Π²Π°ΡΠΈΠ°Π½Ρ
Π Π°ΡΡΠΊΠ°ΠΆΡ ΠΏΡΠΎ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠΏΠΎΡΠΎΠ±. Π‘ΡΡΡ Π΅Π³ΠΎ ΡΠΎΡΡΠΎΠΈΡ Π² ΡΠΎΠΌ, ΡΡΠΎΠ±Ρ Π²ΡΡΠ°Π²ΠΈΡΡ Π°Π΄ΡΠ΅Ρ, ΠΏΠΎ ΠΊΠΎΡΠΎΡΠΎΠΌΡ Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½Π°Ρ ΡΠ°ΠΏΠΊΠ°, Π² Π±Π»ΠΎΠΊΒ <div id=Β»headerΒ»> Π½Π΅ΠΏΠΎΡΡΠ΅Π΄ΡΡΠ²Π΅Π½Π½ΠΎ ΠΏΠ΅ΡΠ΅Π΄ ΠΏΠ΅ΡΠ²ΡΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, ΠΎΠ±ΠΎΠ·Π½Π°ΡΠ΅Π½Π½ΡΠΌ ΡΠ΅Π³ΠΎΠΌ <h2>.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! ΠΠΎΡ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ Π°Π΄ΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ: <img src=Β»http://sitetree.com/img/0g/g1/dkr490trfdkl69746rekfklre..pngΒ»>.Β
ΠΡΠΈ ΡΠ°ΠΊΠΎΠΌ Β«ΡΠ°Π·Π²ΠΈΡΠΈΠΈ ΡΠΎΠ±ΡΡΠΈΠΉΒ» Π½ΡΠΆΠ½ΠΎ Π² #header ΡΠ΄Π°Π»ΠΈΡΡ ΡΡΡΠΎΠΊΡ background-image: ΠΈ ΡΠΊΠ°Π·Π°ΡΡ position: relative. Π ΡΠ°Π·Π΄Π΅Π»Π°Ρ h2 ΠΈ h4 ΡΠΊΠ°Π·Π°ΡΡ position: absolute;. ΠΠ΄Π½Π°ΠΊΠΎ Π½ΡΠΆΠ½ΠΎ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠΌΠ΅Π½ΡΡΡ ΠΎΡΡΡΡΠΏΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ². Π§ΡΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ Π² ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΠΈ.
#header{
width: 700px;
height: 500px;
background-color: #2980b9;
margin-bottom: 10px;
position:relative;
}
h2{
position: absolute;
color: #2980b9;
font: 50px Times New Roman;
left: 400px;
}
h4{
position: absolute;
width: 500px;
color: #2980b9;
font-style: italic;
top: 60px;
left:20px;
}
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Π Π°Π·ΠΌΠ΅ΡΡ Π² px ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½Ρ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΏΡΠΈΠΌΠ΅ΡΠ°. ΠΠ΅ Π½ΡΠΆΠ½ΠΎ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ ΠΈΡ Π·Π° ΠΈΡΡΠΈΠ½Ρ! Π Π°Π·ΠΌΠ΅ΡΡ Π½Π° ΡΠ²ΠΎΠ΅ΠΌ ΡΠ°ΠΉΡΠ΅ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°ΠΉΡΠ΅ ΡΠ°ΠΌΠΎΡΡΠΎΡΡΠ΅Π»ΡΠ½ΠΎ!
Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° Π΄Π»Ρ WordPress
Π§ΠΈΡΠ°ΠΉΡΠ΅ ΡΠ°ΠΊΠΆΠ΅: ΠΠ°ΠΊ Π½Π°Π·Π²Π°ΡΡ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΡ: 12 ΡΠΏΠΎΡΠΎΠ±ΠΎΠ² ΠΏΡΠΈΠ΄ΡΠΌΠ°ΡΡ Π½Π°Π·Π²Π°Π½ΠΈΠ΅
Π Π·Π°Π²Π΅ΡΡΠ°Ρ ΡΡΠ°ΡΡΡ ΡΠ°ΡΡΠΊΠ°Π·ΠΎΠΌ ΠΎ ΡΠΎΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° Π΄Π»Ρ CMS WordPress. Π₯ΠΎΡΡ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠ° ΠΏΠΎΠ΄ΡΠ°Π·ΡΠΌΠ΅Π²Π°Π΅Ρ ΡΡΡΠ°Π½ΠΎΠ²ΠΊΡ ΡΠΆΠ΅ Π³ΠΎΡΠΎΠ²ΠΎΠΉ ΡΠ΅ΠΌΡ, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΡΠ°ΠΏΠΊΠ° ΡΠΎΠ·Π΄Π°Π½Π° ΠΈ ΡΡΡΠ°Π½ΠΎΠ²Π»Π΅Π½Π° ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ. ΠΠΎΡΡΠΎΠΌΡ Π΄Π°Π½Π½Π°Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π±ΡΠ΄Π΅Ρ ΠΏΠΎΠ»Π΅Π·Π½Π° ΡΠ΅ΠΌ, ΠΊΡΠΎ Π·Π°Ρ ΠΎΡΠ΅Π» ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ°ΠΏΠΊΡ ΠΈ ΠΏΠΎΡΡΠ°Π²ΠΈΡΡ ΡΠ²ΠΎΡ, ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡΠ°Π»ΡΠ½ΡΡ.
ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΎΠΉΡΠΈ ΠΏΠΎ ΡΠ»Π΅Π΄ΡΡΡΠ΅ΠΌΡ ΠΏΡΡΠΈ:
- Π·Π°ΠΉΡΠΈ Π² Π°Π΄ΠΌΠΈΠ½ΠΈΡΡΡΠ°ΡΠΈΠ²Π½ΡΡ ΠΏΠ°Π½Π΅Π»Ρ;
- Π²ΡΠ±ΡΠ°ΡΡ Β«ΠΠ°ΠΏΠΈΡΠΈΒ» = Β«ΠΠΎΠ±Π°Π²ΠΈΡΡ Π½ΠΎΠ²ΡΡΒ»;
- ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ Π² ΡΠ΅ΠΆΠΈΠΌ HTML ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ°;
- Π·Π°Π³ΡΡΠ·ΠΈΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ, ΠΊΠΎΡΠΎΡΠ°Ρ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΡΠ°ΠΏΠΊΠΈ;
- ΠΏΠΎΡΠ»Π΅ ΠΎΠΊΠΎΠ½ΡΠ°Π½ΠΈΡ Π·Π°Π³ΡΡΠ·ΠΊΠΈ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡΠ΅ Π±ΡΠ΄Π΅Ρ Π²ΠΈΠ΄Π΅Π½ ΠΊΠΎΠ΄ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ;
- Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°ΡΡ;
- Β«ΠΠ°ΠΏΠΈΡΡΒ» ΡΠ΄Π°Π»ΠΈΡΠ΅;
- ΠΎΡΠΊΡΠΎΠΉΡΠ΅ ΡΠ°Π·Π΄Π΅Π» Β«ΠΠ½Π΅ΡΠ½ΠΈΠΉ Π²ΠΈΠ΄Β» = Β«Π Π΅Π΄Π°ΠΊΡΠΎΡΒ»;
- Π²ΡΠ±Π΅ΡΠΈΡΠ΅ ΡΠ°ΠΉΠ» header. php Π΄Π»Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ;
- Π² Π½Π΅ΠΌ Π½ΡΠΆΠ½ΠΎ Π½Π°ΠΉΡΠΈ ΡΡΡΠΎΠΊΡ <div id=Β»headerΒ»>;
- Π² ΡΡΡΠΎΠΊΡ Π²ΡΡΠ°Π²ΠΈΡΡ ΡΠΊΠΎΠΏΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΊΠΎΠ΄ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠΈ;
- ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ ΡΠ°ΠΉΠ»;
- ΡΠ°ΠΏΠΊΠ° ΡΠΆΠ΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π½Π° ΡΠ°ΠΉΡΠ΅.
ΠΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! ΠΡΠΆΠ½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡΠ°ΠΏΠΊΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅? ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ Π²ΠΎΠ·Π²ΡΠ°ΡΠΈΡΠ΅ΡΡ Π² ΡΠ΅Π΄Π°ΠΊΡΠΎΡ, ΠΏΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ Π² ΠΊΠΎΠ΄ ΠΈ Π² ΡΠ΅Π³ img, Π²Π½Π΅ΡΠΈΡΠ΅ Π°ΡΡΠΈΠ±ΡΡ style ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ margin. ΠΠΎΡ ΠΊΠ°ΠΊ ΡΡΠΎ Π±ΡΠ΄Π΅Ρ Π²ΡΠ³Π»ΡΠ΄Π΅ΡΡ: style=Β»margin:0 0 0 0;Β»
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°: Π»ΠΈΡΠ½ΡΠΉ ΡΠΎΠ²Π΅Ρ
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π·Π½Π°Π΅ΡΠ΅ Π½Π΅ ΡΠΎΠ»ΡΠΊΠΎ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ°, Π½ΠΎ ΠΈ ΠΊΠ°ΠΊ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ Π΅Π΅ Π½Π° ΡΠ²ΠΎΠΉ ΠΏΡΠΎΠ΅ΠΊΡ. ΠΠ°ΠΊ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΡΠ΄Π΅Π»Π°ΡΡ Π²ΡΠ²ΠΎΠ΄ ΠΈΠ· Π²ΡΠ΅Π³ΠΎ ΠΎΠΏΠΈΡΠ°Π½Π½ΠΎΠ³ΠΎ Π²ΡΡΠ΅, Π½ΠΈΠΊΠ°ΠΊΠΈΡ ΡΠ»ΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ Π±ΡΡΡ Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ.
ΠΡΠ»ΠΈ Π²Π°Ρ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΡΡΡ ΠΏΡΠΎΡΠΈΠ΅ ΡΠ΅ΠΊΡΠ΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π±ΠΎΡΠ°ΡΡ Ρ ΠΏΠ»Π°ΡΡΠΎΡΠΌΠΎΠΉ WordPress, ΡΠΈΡΠ°ΠΉΡΠ΅ ΠΌΠΎΠΉ Π±Π»ΠΎΠ³. Π Π½Π΅ΠΌ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ³ΠΎ ΠΏΠΎ ΡΡΠΎΠΉ ΡΠ΅ΠΌΠ΅.
ΠΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π² HTML?
Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° HTML ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠΌ Π΄Π»Ρ ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΡ , ΠΊΠΎΡΠΎΡΡΠΉ ΡΠ°Π·ΠΌΠ΅ΡΠ°Π΅ΡΡΡ ΠΌΠ΅ΠΆΠ΄Ρ ΡΠ΅Π³Π°ΠΌΠΈ <html> ΠΈ <body>. ΠΠ΅ΡΠ°Π΄Π°Π½Π½ΡΠ΅ β ΡΡΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ HTML-Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅. ΠΠ½ΠΈ Π½Π΅ Π²ΡΠ²ΠΎΠ΄ΡΡΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΡ.
ΠΠ΅ΡΠ°Π΄Π°Π½Π½ΡΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΡ, ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ, Π° ΡΠ°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π΄Π»Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ ΠΈ Π΄ΡΡΠ³ΠΎΠΉ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ.
Π ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΠΌ ΠΎΡΠ½ΠΎΡΡΡΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠ΅Π³ΠΈ: <title>, <style>, <meta>, <link>, <script>, ΠΈ <base>.
Π’Π΅Π³ <title> ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, ΠΈ ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»Π΅Π½ Π΄Π»Ρ Π²ΡΠ΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠ² HTML/XHTML.
ΠΠ»Π΅ΠΌΠ΅Π½Ρ <title>:
- ΠΠ°Π΄Π°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅;
- ΠΠ°Π΄Π°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½ΠΎΠΉ Π² Β«ΠΠ·Π±ΡΠ°Π½Π½ΠΎΠ΅Β»;
- ΠΡΠ²ΠΎΠ΄ΠΈΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π²ΡΠ΄Π°ΡΠ΅ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΠΎΠΉ ΡΠΈΡΡΠ΅ΠΌΡ.
ΠΡΠΈΠΌΠ΅Ρ:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> Π‘ΠΎΠ΄Π΅ΡΠΆΠΈΠΌΠΎΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°β¦ </body> </html>
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° HTML, Π½ΡΠΆΠ½ΠΎ Π·Π½Π°ΡΡ, ΡΡΠΎ ΡΠ΅Π³ <style> ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΠΈ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠΉ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ:
ΠΡΠΈΠΌΠ΅Ρ:
<style> body {background-color: powderblue;} h2 {color: red;} p {color: blue;} </style>
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ <link> ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΡΡΡΠ»ΠΎΠΊ Π½Π° Π²Π½Π΅ΡΠ½ΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ CSS.
ΠΡΠΈΠΌΠ΅Ρ:
<link rel="stylesheet" href="mystyle.css">
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
ΠΠ΅ΡΠ΅Π΄ ΡΠ΅ΠΌ, ΠΊΠ°ΠΊ Π½Π°ΠΏΠΈΡΠ°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° Π² HTML, ΠΏΠΎΠΌΠ½ΠΈΡΠ΅, ΡΡΠΎ <meta> ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΊΠ°Π·Π°Π½ΠΈΡ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΠΈ, ΠΎΠΏΠΈΡΠ°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΠ΅ΡΠ΅ΡΠΈΡΠ»Π΅Π½ΠΈΡ ΠΊΠ»ΡΡΠ΅Π²ΡΡ ΡΠ»ΠΎΠ², Π°Π²ΡΠΎΡΠ° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π° ΠΈ Π΄ΡΡΠ³ΠΈΡ ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΡ .
ΠΠ΅ΡΠ°Π΄Π°Π½Π½ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°ΠΌΠΈ ΠΊΠ°ΠΊ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΡ ΠΏΠΎ Π²ΡΠ²ΠΎΠ΄Ρ Π΄Π°Π½Π½ΡΡ , ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΠΌΠΈ ΡΠΈΡΡΠ΅ΠΌΠ°ΠΌΠΈ (ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π°), Π° ΡΠ°ΠΊΠΆΠ΅ Π΄ΡΡΠ³ΠΈΠΌΠΈ Π²Π΅Π±-ΡΠ΅ΡΠ²ΠΈΡΠ°ΠΌΠΈ.
ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²ΠΊΡ:
ΠΠ½ΠΎΡΠΈΠΌ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ:
<meta name="description" content="Free Web tutorials">
Π£ΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΠ΅ ΡΠ»ΠΎΠ²Π° Π΄Π»Ρ ΠΏΠΎΠΈΡΠΊΠΎΠ²ΡΡ ΡΠΈΡΡΠ΅ΠΌ:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Π£ΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ Π°Π²ΡΠΎΡΠ° ΠΌΠ°ΡΠ΅ΡΠΈΠ°Π»Π°:
<meta name="author" content="John Doe">
Π‘ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ° ΠΈ Π΅Π΅ HTML ΠΊΠΎΠ΄Π° ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅ΠΌ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ ΠΊΠ°ΠΆΠ΄ΡΠ΅ 30 ΡΠ΅ΠΊΡΠ½Π΄:
<meta http-equiv="refresh" content="30">
ΠΡΠΈΠΌΠ΅Ρ ΠΌΠ΅ΡΠ°ΡΠ΅Π³ΠΎΠ²:
ΠΡΠΈΠΌΠ΅Ρ:
<meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe">
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
Π HTML5 Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ΅Π³Π° <meta> ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠ½ΡΡΠΎΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΠΎΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° (viewport) Π² ΠΎΠΊΠ½Π΅ Π±ΡΠ°ΡΠ·Π΅ΡΠ°.
ΠΠ±Π»Π°ΡΡΡ ΠΏΡΠΎΡΠΌΠΎΡΡΠ° β ΡΡΠΎ ΡΠ°ΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ, Π²ΠΈΠ΄ΠΈΠΌΠ°Ρ Π΄Π»Ρ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Π΅ΠΉ. ΠΠ½Π° ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ ΡΡΡΡΠΎΠΉΡΡΠ²Π° β ΡΠΎ Π΅ΡΡΡ, Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡΠ½ΡΡ ΡΡΡΡΠΎΠΉΡΡΠ²Π°Ρ ΠΎΠ½Π° Π±ΡΠ΄Π΅Ρ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ Π½Π° ΠΠ:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
ΠΡΠΎΡ ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ° HTML Π΄Π°ΡΡ Π±ΡΠ°ΡΠ·Π΅ΡΡ ΠΈΠ½ΡΡΡΡΠΊΡΠΈΠΈ ΠΎ ΡΠ°Π·ΠΌΠ΅ΡΠ°Ρ ΠΎΠ±Π»Π°ΡΡΠΈ ΠΏΡΠΎΡΠΌΠΎΡΡΠ°.
Π€ΡΠ°Π³ΠΌΠ΅Π½Ρ width=device-width ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠΈΡΠΈΠ½Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π΄ΠΎΠ»ΠΆΠ½Π° ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠΈΡΠΈΠ½Π΅ ΡΠΊΡΠ°Π½Π° ΡΡΡΡΠΎΠΉΡΡΠ²Π°.
Π€ΡΠ°Π³ΠΌΠ΅Π½Ρ initial-scale=1.0 ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΈΡΡ ΠΎΠ΄Π½ΡΠΉ ΡΡΠΎΠ²Π΅Π½Ρ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π·Π°Π³ΡΡΠ·ΠΊΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Π² Π±ΡΠ°ΡΠ·Π΅ΡΠ΅.
ΠΠ·Π³Π»ΡΠ½ΠΈΡΠ΅ Π½Π° ΠΏΡΠΈΠΌΠ΅Ρ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ Π±Π΅Π· ΠΌΠ΅ΡΠ°ΡΠ΅Π³Π° viewport, ΠΈ ΡΠΎΠΉ ΠΆΠ΅ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΡΠΊΠ°Π·Π°Π½Π½ΡΠΌ ΡΠ΅Π³ΠΎΠΌ viewport.
Π‘ΠΎΠ²Π΅Ρ: Π΅ΡΠ»ΠΈ Π²Ρ ΡΠΈΡΠ°Π΅ΡΠ΅ ΡΡΠ°ΡΡΡ Π½Π° ΡΠΌΠ°ΡΡΡΠΎΠ½Π΅ ΠΈΠ»ΠΈ ΠΏΠ»Π°Π½ΡΠ΅ΡΠ΅, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΠ΅ΡΠ΅ΠΉΡΠΈ ΠΏΠΎ ΡΡΡΠ»ΠΊΠ°ΠΌ, ΠΏΡΠΈΠ²Π΅Π΄ΡΠ½Π½ΡΠΌ ΠΏΠΎΠ΄ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ°ΠΌΠΈ:
ΠΡΠΈΠΌΠ΅Ρ Π±Π΅Π· ΠΌΠ΅ΡΠ°ΡΠ΅Π³Π° viewport
ΠΡΠΈΠΌΠ΅Ρ Ρ ΠΌΠ΅ΡΠ°ΡΠ΅Π³ΠΎΠΌ viewport
Π’Π΅Π³ ΡΠ°ΠΏΠΊΠΈ ΡΠ°ΠΉΡΠ° HTML CSS ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ ΠΊΠΎΠ΄ JavaScript Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°. Π ΠΏΡΠΈΠΌΠ΅ΡΠ΅ Π½ΠΈΠΆΠ΅ Javascript Π²ΡΠ²ΠΎΠ΄ΠΈΡ Β«Hello JavaScript!Β» Π² HTML-ΡΠ»Π΅ΠΌΠ΅Π½Ρ ΡΠ΅ΡΠ΅Π· id=Β»demoΒ»:
ΠΡΠΈΠΌΠ΅Ρ:
<script> function myFunction { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script>
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
ΠΠ»Π΅ΠΌΠ΅Π½Ρ ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ Π±Π°Π·ΠΎΠ²ΡΠΉ URL ΠΈ ΡΠ΅Π»Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅:
ΠΡΠΈΠΌΠ΅Ρ:
<base href="https://www.w3schools.com/images/" target="_blank">
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
Π‘ΠΎΠ³Π»Π°ΡΠ½ΠΎ ΡΡΠ°Π½Π΄Π°ΡΡΡ HTML5, ΡΠ΅Π³ΠΈ <html>, <body> ΠΈ <head> ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠΏΡΡΡΠΈΡΡ.
<!DOCTYPE html> <title>Page Title</title> <h2>This is a heading</h2> <p>This is a paragraph.</p>
ΠΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄Π΅ΠΌΠΎ
ΠΡΠΈΠΌΠ΅ΡΠ°Π½ΠΈΠ΅: ΠΡ Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΠΌ ΠΎΠΏΡΡΠΊΠ°ΡΡ ΡΠ΅Π³ΠΈ <html> ΠΈ <body>. ΠΡΠΎ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅Π³Π°ΡΠΈΠ²Π½ΠΎ ΡΠΊΠ°Π·Π°ΡΡΡΡ Π½Π° ΡΠ°Π±ΠΎΡΠ΅ DOM ΠΈ XML, Π° ΡΠ°ΠΊΠΆΠ΅ Π²ΡΠ·Π²Π°ΡΡ ΠΎΡΠΈΠ±ΠΊΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡ Π² ΡΡΡΠ°ΡΠ΅Π²ΡΠΈΡ Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, IE9).
- <head> ΠΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ΅.
- <title> ΠΠ°Π΄Π°ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
- <base> ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π°Π΄ΡΠ΅Ρ ΠΈ ΡΠ΅Π»Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ ΡΡΡΠ»ΠΎΠΊ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅.
- <link> ΠΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠ²ΡΠ·Ρ ΠΌΠ΅ΠΆΠ΄Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠΎΠΌ ΠΈ Π²Π½Π΅ΡΠ½ΠΈΠΌΠΈ ΡΠ΅ΡΡΡΡΠ°ΠΌΠΈ.
- <meta> ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΌΠ΅ΡΠ°Π΄Π°Π½Π½ΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
- <script> ΠΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΊΡΠΈΠΏΡΡ Π½Π° ΡΡΠΎΡΠΎΠ½Π΅ ΠΊΠ»ΠΈΠ΅Π½ΡΠ°.
- <style> ΠΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΡΡΠΈΠ»ΠΈΠ·Π°ΡΠΈΡ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°.
ΠΠ°ΠΉΡΠ΅ Π·Π½Π°ΡΡ, ΡΡΠΎ Π²Ρ Π΄ΡΠΌΠ°Π΅ΡΠ΅ ΠΏΠΎ Π΄Π°Π½Π½ΠΎΠΉ ΡΠ΅ΠΌΠ΅ Π² ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡΡ . ΠΡ ΠΊΡΠ°ΠΉΠ½Π΅ Π±Π»Π°Π³ΠΎΠ΄Π°ΡΠ½Ρ Π²Π°ΠΌ Π·Π° Π²Π°ΡΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ, ΠΎΡΠΊΠ»ΠΈΠΊΠΈ, Π»Π°ΠΉΠΊΠΈ, Π΄ΠΈΠ·Π»Π°ΠΉΠΊΠΈ, ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠΈ!
ΠΠ°Π½Π½Π°Ρ ΠΏΡΠ±Π»ΠΈΠΊΠ°ΡΠΈΡ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΏΠ΅ΡΠ΅Π²ΠΎΠ΄ΠΎΠΌ ΡΡΠ°ΡΡΠΈ Β«HTML HeadΒ» , ΠΏΠΎΠ΄Π³ΠΎΡΠΎΠ²Π»Π΅Π½Π½Π°Ρ ΡΠ΅Π΄Π°ΠΊΡΠΈΠ΅ΠΉ ΠΏΡΠΎΠ΅ΠΊΡΠ°.
Π¨Π°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° ΠΈ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS β Zencoder
ΠΡΠΎΡΠΌΠ°ΡΡΠΈΠ²Π°Π» Π²ΠΈΠ΄Π΅ΠΎΠΊΡΡΡ ΠΏΠΎ Π±Π»ΠΎΡΠ½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°ΠΉΡΠ° ΠΎΡ ΠΠ½Π΄ΡΠ΅ΠΉ ΠΠΎΡΠΊΠΎΠ²ΠΈΠ½Π°.
ΠΠ°ΡΠ°Π» ΡΠΌΠΎΡΡΠ΅ΡΡ Ρ ΡΡΠ²ΡΡΠ²ΠΎΠΌ, ΡΡΠΎ Π²ΠΎΡ — ΡΠ΅ΠΉΡΠ°Ρ Π½Π°ΡΡΡΡΡ ΡΠ΅ΠΌΡ-ΡΠΎ Π½ΠΎΠ²ΠΎΠΌΡ. ΠΠΎ ΡΠ΅ΡΠΏΠ΅Π½ΠΈΡ Ρ Π²Π°ΡΠΈΠ»ΠΎ Π΄ΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π΄ΠΎ Π΄Π΅Π²ΡΡΠΎΠΉ ΡΠ°ΡΡΠΈ. Π£ΡΡΠ°Π» Π½Π°Π±Π»ΡΠ΄Π°ΡΡ ΠΌΡΡΠ΅Π½ΠΈΡ Π°Π²ΡΠΎΡΠ° ΠΏΠΎ Π²Π΅ΡΡΡΠΊΠ΅ ΡΠ°Π±Π»ΠΎΠ½Π°, ΠΈ Π² ΡΠ°ΡΡΠ½ΠΎΡΡΠΈ, ΡΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Π»Π°ΡΡ ΡΠ°ΠΏΠΊΠ°.
ΠΠ²ΡΠΎΡ Π·Π°ΡΠ΅ΠΌ-ΡΠΎ Π²ΡΡΠ΅Π·Π°Π» ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΡ ΡΠΎΠ½Π° Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠ΅ΠΉ, Π²ΡΡΠ°Π²Π»ΡΠ» ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° Π² html-ΠΊΠ°ΡΠΊΠ°Ρ ΠΈ ΠΎΠ±Π΅ΡΡΡΠ²Π°Π» Π΅Π³ΠΎ ΡΡΡΠ»ΠΊΠΎΠΉ, ΠΏΡΡΠ°Π»ΡΡ ΡΠ³Π°Π΄Π°ΡΡ ΠΌΠ΅ΡΡΠΎΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ ΠΈΠ»ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. Π― ΡΠ΅ΡΠΈΠ» ΡΠ°ΠΌ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ°ΠΏΠΊΡ ΡΠ°ΠΉΡΠ° ΡΠ°ΠΊ, ΠΊΠ°ΠΊ ΠΌΠ½Π΅ ΠΊΠ°ΠΆΠ΅ΡΡΡ Π±ΠΎΠ»Π΅Π΅ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ.
Π ΠΎΡΠ½ΠΎΠ²Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΡΠ°ΠΏΠΊΠΈ Ρ ΠΏΠΎΠ»ΠΎΠΆΠΈΠ» ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΡΡ
ΡΠ»ΠΎΠ΅Π² Π½Π° div
βΠ°Ρ
. ΠΡΡΠ°ΡΠΈ, Ρ ΡΡΠΈΠΌ ΠΌΠ΅ΡΠΎΠ΄ΠΎΠΌ Ρ ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΏΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΠ»ΡΡ Π² Π΄ΡΡΠ³ΠΎΠΌ Π²ΠΈΠ΄Π΅ΠΎΡΡΠΎΠΊΠ΅ ΠΎΡ ΠΠΌΠΈΡΡΠΈΡ Π‘Π΅ΠΌΠ΅Π½ΠΎΠ²Π°. ΠΠ°Π»Π΅Π΅, ΠΏΡΠ΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΡΡΡ, ΡΡΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ Π²ΡΠ΅Ρ
ΡΠΎΠ½ΠΎΠ²ΡΡ
ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ·Π²Π΅ΡΡΠ½Ρ (Π½Π° ΠΏΡΠ°ΠΊΡΠΈΠΊΠ΅ ΡΠ°ΠΊ ΠΈ ΠΏΡΠΎΠΈΡΡ
ΠΎΠ΄ΠΈΡ, ΠΏΡΠΈ Π²ΡΡΠ΅Π·Π°Π½ΠΈΠΈ ΠΈΡ
ΠΈΠ· psd-ΠΌΠ°ΠΊΠ΅ΡΠ°).
ΠΠ»Ρ ΡΠΈΡΡΠΎΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ° ΠΏΡΠΈΠ²Π΅Π΄Ρ ΡΡΠΈ ΡΠ°Π·ΠΌΠ΅ΡΡ: bg-nav.gif - 300x70px
, bg-header.gif - 800x50px
, logo.gif - 30x30px
. Π CSS-ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ
ΡΠ΄Π΅Π»Π°Π» Π΄Π»Ρ Π½ΠΈΡ
ΠΏΠΎΠ΄ΡΡΠ°Π½ΠΎΠ²ΠΊΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠΉ Π·Π°Π»ΠΈΠ²ΠΊΠΈ ΡΠ²Π΅ΡΠΎΠΌ, Π΄Π»Ρ ΠΏΠΎΠ΄ΡΡΡΠ°Ρ
ΠΎΠ²ΠΊΠΈ.
ΠΡΠ°ΠΊ, ΡΡΠΎ Ρ Π±ΡΠ΄Ρ Π΄Π΅Π»Π°ΡΡ. ΠΠ΅ΡΠ²ΡΠΉ ΡΠ°Π³ ΡΡΠ°Π½Π΄Π°ΡΡΠ½ΡΠΉ. Π‘ΠΎΠ·Π΄Π°Π΅ΡΡΡ ΠΎΠ±Π΅ΡΡΠΊΠ° Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ»ΠΎΡ div
, ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°ΡΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΡΠ΅Π½ΡΡΠΈΡΠΎΠ²Π°Π½ΠΈΡ ΡΡΡΠ°Π½ΠΈΡΡ ΠΈ Π·Π°Π΄Π°Π½ΠΈΡ Π΅ΠΉ ΡΠΈΡΠΈΠ½Ρ:
#wrap{
width: 800px;
height: 100%;
margin: 0 auto;
background: #c0c0c0;
}
ΠΠ°ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Π΅ΡΡΡ ΡΠ»ΠΎΠΉ div
, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΡΠ°ΠΏΠΊΠ° Π±ΡΠ΄ΡΡΠ΅Π³ΠΎ ΡΠ°ΠΉΡΠ°. ΠΠ»Ρ Π½Π΅Π΅ ΠΏΡΠΎΠΏΠΈΡΡΠ²Π°Ρ ΡΠΎΠ²ΡΠ΅ΠΌ ΠΊΠΎΡΠΎΡΠΊΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΊΠΎΡΠΎΡΡΡ
Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎ ΡΠ°ΡΡΡΠ³ΠΈΠ²Π°Ρ ΡΠ°ΠΏΠΊΡ Π½Π° Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠ°-ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ div
ΠΈ Π·Π°Π΄Π°Ρ Π΅Π΅ Π²ΡΡΠΎΡΡ:
#header{
width: 100%;
height: 70px;
}
ΠΠ°ΡΠ΅ΠΌ ΡΠΎΠ·Π΄Π°Ρ ΡΠ»ΠΎΠΉ div
, Π·Π°Π΄Π°ΡΠ° ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΡ Π² ΡΠ΅Π±Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π»Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ³ΠΎ ΡΠΏΠΈΡΠΊΠ° ΡΠ°ΠΏΠΊΠΈ. ΠΡΡΠΎΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ»ΠΎΡ ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Ρ ΡΠ°Π²Π½ΠΎΠΉ Π²ΡΡΠΎΡΠ΅ ΡΠ°ΠΏΠΊΠΈ, Π° ΡΠ°ΠΌ ΡΠΎΠ½ΠΎΠ²ΡΠΉ ΡΠΈΡΡΠ½ΠΎΠΊ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΡΡ Π² ΠΏΡΠ°Π²ΠΎΠΌ ΡΠ³Π»Ρ Π±Π»ΠΎΠΊΠ°. ΠΡΡΠΎΡΠ° Π΅Π³ΠΎ ΡΠ°Π²Π½Π° Π²ΡΡΠΎΡΠ΅ ΡΠ°ΠΏΠΊΠΈ, ΠΏΠΎΡΡΠΎΠΌΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΌΠ΅ΡΠΈΡΡ Π΅Π³ΠΎ ΠΏΠΎ-Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ Π²ΠΏΡΠ°Π²ΠΎ, Π° ΠΏΠΎ-Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ ΠΎΡΡΠ°Π²Π»ΡΡ ΠΊΠ°ΠΊ Π΅ΡΡΡ.
Π ΠΈΡΡΠ½ΠΎΠΊ ΠΊΠΎΡΠΎΡΠΊΠΈΠΉ ΠΈ Π±ΡΠ΄Π΅Ρ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π½Π΅ Π²ΡΡ ΡΠΈΡΠΈΠ½Ρ ΡΠ°ΠΏΠΊΠΈ, Π° ΡΠΎΠ»ΡΠΊΠΎ Π½Π΅ΠΊΠΎΡΠΎΡΡΡ Π΅Π΅ ΠΏΡΠ°Π²ΡΡ ΡΠ°ΡΡΡ, ΠΊΠ°ΠΊ ΡΠ°Π· ΡΠΎΠ²Π½ΠΎ Π½Π°ΡΡΠΎΠ»ΡΠΊΠΎ, ΡΡΠΎΠ±Ρ Π²ΠΌΠ΅ΡΡΠΈΡΡ Π² ΡΠ΅Π±Ρ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ. CSS-ΠΊΠΎΠ΄ Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ ΡΠ»ΠΎΡ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½ Π½ΠΈΠΆΠ΅:
#nav{
background: url(i/bg-nav.gif) #b318cf 100% 0 no-repeat;
height: 70px;
}
Π’Π΅ΠΏΠ΅ΡΡ ΡΠΎΠ·Π΄Π°Ρ Π΅ΡΠ΅ ΠΎΠ΄ΠΈΠ½ ΡΠ»ΠΎΠΉ div
, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ Π±ΡΠ΄Π΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ΅Π½ΠΎ Π΅ΡΠ΅ ΠΎΠ΄Π½ΠΎ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅. ΠΠΎ Π²ΡΡΠΎΡΠ΅ ΠΎΠ½ΠΎ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ΅ΠΌ ΡΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠ»ΠΎΡ div
ΠΈ Π±ΡΠ΄Π΅Ρ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
ΡΡΠΎΠ³ΠΎ ΡΠ»ΠΎΡ, ΠΏΠ΅ΡΠ΅ΠΊΡΡΠ²Π°Ρ Π΅Π³ΠΎ.
ΠΠΎΡΡΠΎΠΌΡ ΡΠΎΠ½ ΡΠ»ΠΎΡ div
Π±ΡΠ΄Π΅Ρ Π²ΠΈΠ΄Π΅Ρ ΡΠΎΠ»ΡΠΊΠΎ ΡΠ°ΡΡΠΈΡΠ½ΠΎ, Π»ΠΈΡΡ Π΅Π³ΠΎ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΡΠ°Π΅ΡΠ΅ΠΊ, Π΄Π»Ρ ΠΊΠΎΡΠΎΡΠΎΠ³ΠΎ ΠΈ ΠΎΡΠ²ΠΎΠ΄ΠΈΡΡΡ ΡΠΎΠ»Ρ ΡΠΎΠ½Π° Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ. ΠΠ»Ρ ΡΠ»ΠΎΡ div
ΡΠ²Π½ΠΎ Π·Π°Π΄Π°Ρ Π΅Π³ΠΎ Π²ΡΡΠΎΡΡ. ΠΠΎΠ΄ ΡΠΎ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ ΠΏΡΠΈΠ²Π΅Π΄Π΅Π½ Π½ΠΈΠΆΠ΅:
#head{
background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat;
height: 50px;
}
ΠΡ Π²ΠΎΡ, Π·Π°Π΄Π°ΡΠ° ΠΏΡΠ°ΠΊΡΠΈΡΠ΅ΡΠΊΠΈ ΠΈ ΡΠ΅ΡΠ΅Π½Π°. ΠΡΠΈ ΡΡΠΎΠΌ Π½Π΅ Π±ΡΠ»ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΎ Π½ΠΈ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎΠ³ΠΎ, Π½ΠΈ ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΡΠΎΠ»ΡΠΊΠΎ ΡΠΌΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΠΎΠ½Π° ΡΠ»ΠΎΡ. ΠΡΡΠ°Π»ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΡΠ»ΠΎΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄Π΅Ρ Π²ΡΠΏΠΎΠ»Π½ΡΡΡ Π·Π°Π΄Π°ΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° ΡΠ°ΠΉΡΠ°. Π Π°Π·ΠΌΠ΅ΡΠ°Ρ Π΅Π³ΠΎ ΠΏΠΎΠ²Π΅ΡΡ Π²ΡΠ΅Ρ ΠΎΡΡΠ°Π»ΡΠ½ΡΡ ΡΠ»ΠΎΠ΅Π² ΠΈ Π΄Π΅Π»Π°Ρ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ Π½Π° Π²ΡΠ΅ Π΅Π³ΠΎ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ.
ΠΡΠΈ ΡΡΠΎΠΌ ΡΠ½ΠΎΠ²Π° Π²ΠΎΡΠΏΠΎΠ»ΡΠ·ΡΡΡΡ ΡΠΎΠ½ΠΎΠ²ΡΠΌ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π²Π»ΠΎΠΆΡ Π²Π½ΡΡΡΡ ΡΡΠΎΠ³ΠΎ ΡΠ»ΠΎΡ. ΠΠΈΠΊΠ°ΠΊΠΈΡ img Π² html-ΠΊΠΎΠ΄Π΅! ΠΠΎΠ·ΠΈΡΠΈΠΎΠ½ΠΈΡΠΎΠ²Π°ΡΡ ΠΈΠ»ΠΈ ΡΠΌΠ΅ΡΠ°ΡΡ Π΅Π³ΠΎ Π½ΠΈΠΊΡΠ΄Π° Π½Π΅ Π½Π°Π΄ΠΎ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΠΎΠ½ ΠΏΠΎ-ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡΡ Π² Π»Π΅Π²ΠΎΠΌ Π²Π΅ΡΡ Π½Π΅ΠΌ ΡΠ³Π»Ρ Π±Π»ΠΎΠΊΠ° (ΠΊΠ°ΠΊ ΠΌΠ½ΠΎΡ Π·Π°Π΄ΡΠΌΠ°Π½ΠΎ Π΄Π»Ρ ΠΏΡΠΎΡΡΠΎΡΡ ΡΠΊΡΠΏΠ΅ΡΠΈΠΌΠ΅Π½ΡΠ°). Π’ΠΎΠ»ΡΠΊΠΎ ΡΠ²Π½ΠΎ Π·Π°Π΄Π°ΠΌ ΡΡΠΎΠΌΡ ΡΠ»ΠΎΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ, ΡΠ°Π²Π½ΡΡ Π²ΡΡΠΎΡΠ΅ ΠΈ ΡΠΈΡΠΈΠ½Π΅ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΡΠΈΡΡΠ½ΠΊΠ°:
#logo{
background: url(i/logo.gif) #36cf18 0 0 no-repeat;
width: 30px;
height: 30px;
}
Π§ΡΠΎΠ±Ρ ΡΠ΄Π΅Π»Π°ΡΡ ΡΠ»ΠΎΠΉ ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡΠ½ΡΠΌ, ΠΏΠΎΠΌΠ΅ΡΠ°Ρ Π²Π½ΡΡΡΡ Π½Π΅Π³ΠΎ ΡΡΡΠ»ΠΊΡ. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΈΠ·Π½Π°ΡΠ°Π»ΡΠ½ΠΎ ΠΎΠ½Π° ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΡΡΠΎΡΠ½ΡΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ (inline
), ΡΠΎ Π΅ΠΉ Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π°, ΡΡΠΎΠ±Ρ βΡΠ°ΡΡΡΠ½ΡΡΡβ Π½Π° Π²ΡΡ Π²ΡΡΠΎΡΡ ΠΈ ΡΠΈΡΠΈΠ½Ρ ΡΠ»ΠΎΡ-ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ div
.
ΠΠΎΡΡΠΎΠΌΡ βΠΏΡΠ΅Π²ΡΠ°ΡΠ°Ρβ ΡΡΡΠ»ΠΊΡ Π² Π±Π»ΠΎΡΠ½ΡΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠ²ΠΎΠΉΡΡΠ²Π° display:block
. Π Π²ΠΎΡ ΡΠ΅ΠΏΠ΅ΡΡ ΡΠ°ΡΡΡΠ½Ρ ΡΡΡΠ»ΠΊΡ, Π·Π°Π΄Π°Π² Π΄Π»Ρ Π½Π΅Π΅ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ Π² ΠΏΡΠΎΡΠ΅Π½ΡΠ°Ρ
. ΠΠΎΠ½Π΅ΡΠ½ΠΎ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°ΡΡ ΡΡΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΈ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ, ΡΠ°ΠΊ ΠΊΠ°ΠΊ ΡΠ°Π·ΠΌΠ΅ΡΡ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ° ΠΈΠ·Π²Π΅ΡΡΠ½Ρ. ΠΠΎ Π»ΡΡΡΠ΅ Π²ΠΎΠ·Π»ΠΎΠΆΠΈΡΡ ΡΡΡ Π·Π°Π΄Π°ΡΡ Π½Π° ΠΏΠ»Π΅ΡΠΈ Π±ΡΠ°ΡΠ·Π΅ΡΠ° — ΠΏΡΡΡΡ ΡΠ°ΠΌ Π²ΡΡΠΈΡΠ»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ Π±Π»ΠΎΠΊΠ°-ΡΡΡΠ»ΠΊΠΈ:
#logo a{
display: block;
width: 100%;
height: 100%;
}
ΠΡΡΠ°Π»ΠΎΡΡ ΡΠΎΠ·Π΄Π°ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΠΎΠ΅ ΠΌΠ΅Π½Ρ ΡΠ°ΠΏΠΊΠΈ, ΠΊΠΎΡΠΎΡΠΎΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠ°ΡΠΏΠΎΠ»Π°Π³Π°ΡΡΡΡ ΠΏΠΎΠ²Π΅ΡΡ
ΡΠ»ΠΎΡ div
. Π‘ΠΎΠ·Π΄Π°Ρ Π½Π΅Π½ΡΠΌΠ΅ΡΠΎΠ²Π°Π½Π½ΡΠΉ ΡΠΏΠΈΡΠΎΠΊ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠΌΠ΅ΡΠ°Ρ Π²Π½ΡΡΡΡ ΡΠ»ΠΎΡ div
. Π’Π°ΠΊ ΠΊΠ°ΠΊ ΠΏΠΎ ΠΊΠΎΠ΄Ρ ΡΠ»ΠΎΠΉ div
ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ Π²ΡΡΠ΅ ΠΈ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ Π²ΡΡΠΎΡΡ, ΡΠΎ ΡΠΏΠΈΡΠΎΠΊ Π·Π°ΠΉΠΌΠ΅Ρ Π²ΡΠ΅ ΠΎΡΡΠ°Π²ΡΠ΅Π΅ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΏΠΎΠ΄ Π½ΠΈΠΌ: 70px - 50px = 20px
.
Π’Π΅ΠΏΠ΅ΡΡ Π΄ΠΎΡΡΠ°ΡΠΎΡΠ½ΠΎ ΡΠΌΠ΅ΡΡΠΈΡΡ ΡΠΏΠΈΡΠΎΠΊ Π²ΠΏΡΠ°Π²ΠΎ Ρ ΠΏΠΎΠΌΠΎΡΡΡ float: right
ΠΈ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ Π΄Π»Ρ Π½Π΅Π³ΠΎ ΠΎΠ±ΡΡΠ½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π°, ΡΡΠΎΠ±Ρ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡΡ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎ ΠΈ ΡΡΠΈΠ»ΠΈΠ·ΠΎΠ²Π°ΡΡ:
#nav ul{
list-style-type: none;
float: right;
}
#nav li{
display: inline-block;
}
#nav a{
text-decoration: none;
color: #fff;
font-weight: bold;
margin-right: 15px;
line-height: 20px;
display: inline-block;
}
ΠΠ΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠ·Π²Π°Π» Ρ ΠΌΠ΅Π½Ρ Π·Π°ΡΡΡΠ΄Π½Π΅Π½ΠΈΡ, ΡΡΠΎ ΠΏΠΎΡΠ²ΠΈΠ²ΡΠΈΠ΅ΡΡ Π΅Π»Π΅ Π·Π°ΠΌΠ΅ΡΠ½ΡΠ΅ ΠΎΡΡΡΡΠΏΡ ΠΌΠ΅ΠΆΠ΄Ρ Π²Π½Π΅ΡΠ½ΠΈΠΌ Π±Π»ΠΎΠΊΠΎΠΌ ul
ΠΈ Π²Π½ΡΡΡΠ΅Π½Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ(Π°ΠΌΠΈ) li
. ΠΠ΅ΡΠ²ΠΎΠ½Π°ΡΠ°Π»ΡΠ½ΠΎ Π΄Π»Ρ Π½ΠΈΡ
Ρ ΠΏΡΠΎΠΏΠΈΡΠ°Π» ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ display: inline
.
ΠΠΎ ΠΏΠΎΡΠ»Π΅ βΠ½Π°Π²ΠΎΠ΄ΠΊΠΈβ Kray Storm Ρ ΡΠΎΡΡΠΌΠ° forum.htmlbook.ru
ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Π±ΡΠ»Π° ΡΠ΅ΡΠ΅Π½Π°. ΠΠ»Ρ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² li
ΠΈ Ρ ΠΏΠΎΠΌΠ΅Π½ΡΠ» ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ Π½Π° display: inline-block
ΠΈ Π΄Π»Ρ Ρ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π΄Π°Π» Π²ΡΡΠΎΡΡ ΡΡΡΠΎΠΊΠΈ line-height: 20px
, ΡΠ°Π²Π½ΡΡ Π²ΡΡΠΎΡΠ΅ Π±Π»ΠΎΠΊΠ° ul
. ΠΠ°Π·ΠΎΡΡ ΠΏΡΠΎΠΏΠ°Π»ΠΈ ΠΈ ΠΏΡΠ½ΠΊΡΡ ΠΌΠ΅Π½Ρ ΡΠ°ΡΡΡΠ½ΡΠ»ΠΈΡΡ Π½Π° Π²ΡΡ Π²ΡΡΠΎΡΡ Π±Π»ΠΎΠΊΠ°-ΡΠΎΠ΄ΠΈΡΠ΅Π»Ρ.
ΠΡΠ΅, ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ° Π³ΠΎΡΠΎΠ²Π°. ΠΡΠ»ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π½Π° html-ΠΊΠΎΠ΄, ΡΠΎ Π²ΠΈΠ΄Π½ΠΎ, ΡΡΠΎ ΠΎΠ½ βΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΉβ. Π’ΠΎ Π΅ΡΡΡ, ΠΎΠ½ Π½Π΅ Π·Π°ΠΌΡΡΠΎΡΠ΅Π½ Π²ΡΡΠΊΠΈΠΌΠΈ img
. Π Π°Π·ΠΌΠ΅ΡΠΊΠ° Π²ΡΠΏΠΎΠ»Π½Π΅Π½Π° ΠΏΡΠΎΡΡΡΠΌΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π°ΠΌΠΈ CSS, ΠΊΠΎΡΠΎΡΡΠΉ Π±ΡΠ΄ΡΡ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°Π½ΠΎ ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠΎΡΡΠΈ Π²ΠΎ Π²ΡΠ΅Ρ
Π±ΡΠ°ΡΠ·Π΅ΡΠ°Ρ
. ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΠ½Π° Π½ΠΈΠΊΡΠ΄Π° Π½Π΅ βΡΡΠ΅Π΄Π΅Ρβ.
ΠΠΈΠΆΠ΅ ΠΏΡΠΈΠ²Π΅Π΄Ρ ΠΏΠΎΠ»Π½ΡΠΉ ΠΊΠΎΠ΄ html-ΠΊΠ°ΡΠΊΠ°ΡΠ° ΠΈ CSS-ΠΊΠΎΠ΄Π°.
HTML-ΠΊΠΎΠ΄:
CSS-ΠΊΠΎΠ΄:
/* reset */
*{
margin: 0;
padding: 0;
}
/* main */
#wrap{
width: 800px;
height: 100%;
margin: 0 auto;
background: #c0c0c0;
}
#header{
width: 100%;
height: 70px;
}
#nav{
background: url(i/bg-nav.gif) #b318cf 100% 0 no-repeat;
height: 70px;
}
#nav ul{
list-style-type: none;
float: right;
}
#nav li{
display: inline-block;
}
#nav a{
text-decoration: none;
color: #fff;
font-weight: bold;
margin-right: 15px;
line-height: 20px;
display: inline-block;
}
#head{
background: url(i/bg-header.gif) #2b66c8 0 0 no-repeat;
height: 50px;
}
#logo{
background: url(i/logo.gif) #36cf18 0 0 no-repeat;
width: 30px;
height: 30px;
}
#logo a{
display: block;
width: 100%;
height: 100%;
}
ΠΠ΄Π΅ΡΡ Ρ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Ρ Π½Π°ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΡ ΠΌΠ½ΠΎΡ ΡΡ Π΅ΠΌΡ ΡΠ°ΡΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ Π²ΡΠ΅Ρ Π±Π»ΠΎΠΊΠΎΠ² Π² ΡΠ°ΠΏΠΊΠ΅ ΡΠ°ΠΉΡΠ°:
Π, Π½Π°ΠΊΠΎΠ½Π΅Ρ, ΡΠ΅Π·ΡΠ»ΡΡΠ°Ρ Π²ΡΠ΅Π³ΠΎ — Π³ΠΎΡΠΎΠ²Π°Ρ ΡΠ°ΠΏΠΊΠ° ΡΠ°ΠΉΡΠ°:
ΠΠ° ΡΡΠΎΠΌ Π²ΡΠ΅.
csshtml
ΠΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ ΠΎΡΠ·ΡΠ²ΡΠΈΠ²ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
Π£Π·Π½Π°ΠΉΡΠ΅, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS.
ΠΠ΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ Π΄ΠΈΠ·Π°ΠΉΠ½ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Π² Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠ°Π·ΠΌΠ΅ΡΠ° ΡΠΊΡΠ°Π½Π°. ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ°Π·ΠΌΠ΅Ρ ΠΎΠΊΠ½Π° Π±ΡΠ°ΡΠ·Π΅ΡΠ°, ΡΡΠΎΠ±Ρ ΡΠ²ΠΈΠ΄Π΅ΡΡ ΡΡΡΠ΅ΠΊΡ.
ΠΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΡΠ°ΠΌΠΈ Β»
Π‘ΠΎΠ·Π΄Π°ΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ
Π¨Π°Π³ 1) ΠΠΎΠ±Π°Π²ΡΡΠ΅ HTML:
ΠΡΠΈΠΌΠ΅Ρ
Π¨Π°Π³ 2) ΠΠΎΠ±Π°Π²ΡΡΠ΅ CSS:
ΠΡΠΈΠΌΠ΅Ρ
/ * Π‘ΡΠΈΠ»Ρ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° Ρ ΡΠ΅ΡΡΠΌ ΡΠΎΠ½ΠΎΠΌ ΠΈ Π½Π΅Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΎΡΡΡΡΠΏΠΎΠΌ * /.Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ {
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΡΠΊΡΡΡΠΎ;
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: # f1f1f1;
ΠΎΡΡΡΡΠΏ: 20 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ 10px;
}
/ * Π‘ΡΠΈΠ»Ρ ΡΡΡΠ»ΠΎΠΊ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ² * /
.header a {
float:
Π»Π΅Π²ΡΠΉ;
ΡΠ²Π΅Ρ: ΡΠ΅ΡΠ½ΡΠΉ;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ ΡΠ΅Π½ΡΡΡ;
Π½Π°Π±ΠΈΠ²ΠΊΠ°:
12px;
ΡΠ΅ΠΊΡΡ-ΠΎΡΠΎΡΠΌΠ»Π΅Π½ΠΈΠ΅: Π½Π΅Ρ;
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 18 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
Π²ΡΡΠΎΡΠ° ΡΡΡΠΎΠΊΠΈ: 25 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
border-radius: 4px;
}
/ * Π‘ΡΠΈΠ»Ρ Π»ΠΎΠ³ΠΎΡΠΈΠΏΠ°
ΡΡΡΠ»ΠΊΠ° (ΠΎΠ±ΡΠ°ΡΠΈΡΠ΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, ΡΡΠΎ ΠΌΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ line-height ΠΈ font-size ΡΠ°Π²Π½ΡΠΌ
ΠΏΡΠ΅Π΄ΠΎΡΠ²ΡΠ°ΡΠΈΡΡ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΡΠΈ ΡΠ²Π΅Π»ΠΈΡΠ΅Π½ΠΈΠΈ ΡΡΠΈΡΡΠ° * /
.Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ a.logo
{
font-size: 25 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
font-weight: ΠΆΠΈΡΠ½ΡΠΉ;
}
/ *
ΠΠ·ΠΌΠ΅Π½ΠΈΡΠ΅ ΡΠ²Π΅Ρ ΡΠΎΠ½Π° ΠΏΡΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΡΠΊΠ°Π·Π°ΡΠ΅Π»Ρ ΠΌΡΡΠΈ * /
.header a: hover {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: #ddd;
ΡΠ²Π΅Ρ: ΡΠ΅ΡΠ½ΡΠΉ;
}
/ * Π‘ΡΠΈΠ»Ρ
Π°ΠΊΡΠΈΠ²Π½Π°Ρ / ΡΠ΅ΠΊΡΡΠ°Ρ ΡΡΡΠ»ΠΊΠ° * /
. Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ a.Π°ΠΊΡΠΈΠ²Π½ΡΠΉ {
ΡΠ²Π΅Ρ ΡΠΎΠ½Π°: Π³ΠΎΠ»ΡΠ±ΠΎΠΉ;
ΡΠ²Π΅Ρ: Π±Π΅Π»ΡΠΉ;
}
/ * ΠΠ»Π°Π²Π°ΡΡΠΈΠΉ
ΡΠ°Π·Π΄Π΅Π» ΡΡΡΠ»ΠΎΠΊ ΡΠΏΡΠ°Π²Π° * /
.header-right {
float: right;
}
/ * ΠΠΎΠ±Π°Π²ΡΡΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π·Π°ΠΏΡΠΎΡΡ Π΄Π»Ρ ΠΎΠΏΠ΅ΡΠ°ΡΠΈΠ²Π½ΠΎΡΡΠΈ — ΠΊΠΎΠ³Π΄Π°
ΡΠΊΡΠ°Π½ ΠΈΠΌΠ΅Π΅Ρ ΡΠΈΡΠΈΠ½Ρ 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡΠ΅, ΡΠ°Π·ΠΌΠ΅ΡΠ°ΠΉΡΠ΅ ΡΡΡΠ»ΠΊΠΈ Π΄ΡΡΠ³ Π½Π° Π΄ΡΡΠ³Π° * /
@media screen ΠΈ (max-width: 500 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ) {
.Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ a {
float: none; ΠΠΈΡΠΏΠ»Π΅ΠΉ
:
Π±Π»ΠΎΠΊΠΈΡΠΎΠ²Π°ΡΡ;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡ ΠΊΡΠ°Ρ;
}
.header-right {
float: none;
}
}
Π‘ΠΎΠ²Π΅Ρ: ΠΠ΅ΡΠ΅ΠΉΠ΄ΠΈΡΠ΅ ΠΊ Π½Π°ΡΠ΅ΠΌΡ ΡΡΠΊΠΎΠ²ΠΎΠ΄ΡΡΠ²Ρ CSS Navbar Tutorial, ΡΡΠΎΠ±Ρ ΡΠ·Π½Π°ΡΡ Π±ΠΎΠ»ΡΡΠ΅ ΠΎ ΠΏΠ°Π½Π΅Π»ΡΡ Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΈ.
css — ΠΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ HTML Π΄Π»Ρ ΠΏΠ΅ΡΠ°ΡΠΈ Π²Π΅ΡΡ Π½Π΅Π³ΠΎ ΠΈ Π½ΠΈΠΆΠ½Π΅Π³ΠΎ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Π° Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΏΠ΅ΡΠ°ΡΠ½ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°?
footer {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 9 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ²Π΅Ρ: # f00;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅Π½ΡΡ;
}
header {
ΡΠ°Π·ΠΌΠ΅Ρ ΡΡΠΈΡΡΠ°: 9 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
ΡΠ²Π΅Ρ: # f00;
Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: ΡΠ΅Π½ΡΡ;
}
@ΡΡΡΠ°Π½ΠΈΡΠ° {
ΡΠ°Π·ΠΌΠ΅Ρ: Π4;
Π·Π°ΠΏΠ°Ρ: 11ΠΌΠΌ 17ΠΌΠΌ 17ΠΌΠΌ 17ΠΌΠΌ;
}
@media print {
Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π½ΠΈΠ·Ρ: 0;
}
header {
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΡΠΈΠΊΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ΅;
Π²Π΅ΡΡ
: 0;
ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅: ΠΈΠ·Π±Π΅Π³Π°ΡΡ;
}
.content-block, p {
ΡΠ°Π·ΡΡΠ² ΡΡΡΠ°Π½ΠΈΡΡ Π²Π½ΡΡΡΡ: ΠΈΠ·Π±Π΅Π³Π°ΡΡ;
ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎΠ΅;
ΡΠΈΡΠΈΠ½Π°: 100%;
Π²Π΅ΡΡ
: 1em; // ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΠΎΠ²Π°ΡΡ ΡΠ°Π·ΠΌΠ΅ΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°
ΡΠ»Π΅Π²Π°: 0px;
Π²ΠΏΡΠ°Π²ΠΎ: 0 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ;
}
html, body {
ΡΠΈΡΠΈΠ½Π°: 210ΠΌΠΌ;
Π²ΡΡΠΎΡΠ°: 297ΠΌΠΌ;
}
.hidden-print {
Π΄ΠΈΡΠΏΠ»Π΅ΠΉ: Π½Π΅Ρ;
}
Π½Π΅ΡΠ΅ΠΊΡΠ΅ΡΠ½ΡΠΉ
ΠΡΠΈΠΌΠ΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°
ΠΡΠΎ ΠΏΡΠΈΠΌΠ΅Ρ Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°ΡΡ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ», ΠΊΠΎΡΠΎΡΡΠΉ ΠΏΠΎΠ²ΡΠΎΡΡΠ΅ΡΡΡ Π²Π½ΠΈΠ·Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, Π½ΠΎ Π½Π΅ Π·Π°ΠΊΡΡΠ²Π°Π΅ΡΡΡ ΡΠ΅ΠΊΡΡΠΎΠΌ Π°Π±Π·Π°ΡΠ°.
ΠΡΠΈΠΌΠ΅Ρ Π Π°Π·Π΄Π΅Π» I
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, conctetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae.Π£ΠΏΠΎΡΡΠ΅Π±Π»ΡΠΉΡΠ΅ Π°Π»ΠΈΠΊΠ²ΠΎΡΡ Π³Π°Π·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π½Π°ΠΏΠΈΡΠΊΠΎΠ² sem ac lorem malesuada. Fusce iaculis ipsum ex, Ρ mollis dolor dapibus sit amet. In convallis felis Ρ orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
Pellentesque vitae augue sed Purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at communo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet toror.Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Π‘Π΅Π΄ Π±Π°Π½Π΄ΠΈΡ ΡΡΠ°Π½ΡΠΏΠΎΡΡΠ½ΠΎΠ³ΠΎ ΡΡΠ΅Π΄ΡΡΠ²Π° ΡΠΎΠ»Π»ΠΈΡΠΈΡΡΠ΄ΠΈΠ½. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla nunc Π² nisl elementum congue. Nunc eu conctetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem.Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
Nullam turpis augue, lacinia ut libero ac, roncus bibendum ligula. Mauris ullamcorper maximus turpis, ΠΊΠΎΠ½ΡΠΊΠ²Π°Ρ ΡΡΡΠΏΠΈΡ Π±ΠΈΠ±Π΅Π½Π΄ΡΠΌ ΡΠΈΡ Π°ΠΌΠ΅Ρ. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In nisi ullamcorper, convallis lectus et, ornare nulla.Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, roncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, conctetur pulvinar orci pulvinar.
Donec aliquet imperdiet ex, et tincidunt risus convallis eget.Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum ΠΈ pellentesque dignissim. Sed vehicleula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
Lorem ipsum dolor sit amet, conctetur adipiscing elit.Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, conctetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Π£ΠΏΠΎΡΡΠ΅Π±Π»ΡΠΉΡΠ΅ Π°Π»ΠΈΠΊΠ²ΠΎΡΡ Π³Π°Π·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π½Π°ΠΏΠΈΡΠΊΠΎΠ² sem ac lorem malesuada. Fusce iaculis ipsum ex, Ρ mollis dolor dapibus sit amet. In convallis felis Ρ orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius.Donec et odio eget odio tempus auctor ac eget ex.
Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla nunc Π² nisl elementum congue. Nunc eu conctetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.Nullam turpis augue, lacinia ut libero ac, roncus bibendum ligula. Mauris ullamcorper maximus turpis, ΠΊΠΎΠ½ΡΠΊΠ²Π°Ρ ΡΡΡΠΏΠΈΡ Π±ΠΈΠ±Π΅Π½Π΄ΡΠΌ ΡΠΈΡ Π°ΠΌΠ΅Ρ. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend.Nullam tincidunt sapien fermentum, roncus risus ac, ullamcorper libero.
ΠΡΠΈΠΌΠ΅Ρ ΡΠ°Π·Π΄Π΅Π»Π° II
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, conctetur id pellentesque in, porta sit amet sapien.Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Π£ΠΏΠΎΡΡΠ΅Π±Π»ΡΠΉΡΠ΅ Π°Π»ΠΈΠΊΠ²ΠΎΡΡ Π³Π°Π·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π½Π°ΠΏΠΈΡΠΊΠΎΠ² sem ac lorem malesuada. Fusce iaculis ipsum ex, Ρ mollis dolor dapibus sit amet. In convallis felis Ρ orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
Pellentesque vitae augue sed Purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum.Praesent feugiat, lorem at communo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet toror. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Π‘Π΅Π΄ Π±Π°Π½Π΄ΠΈΡ ΡΡΠ°Π½ΡΠΏΠΎΡΡΠ½ΠΎΠ³ΠΎ ΡΡΠ΅Π΄ΡΡΠ²Π° ΡΠΎΠ»Π»ΠΈΡΠΈΡΡΠ΄ΠΈΠ½. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin.Nulla mattis purus porta lorem tempor, cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, conctetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Π£ΠΏΠΎΡΡΠ΅Π±Π»ΡΠΉΡΠ΅ Π°Π»ΠΈΠΊΠ²ΠΎΡΡ Π³Π°Π·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π½Π°ΠΏΠΈΡΠΊΠΎΠ² sem ac lorem malesuada. Fusce iaculis ipsum ex, Ρ mollis dolor dapibus sit amet. In convallis felis Ρ orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.Pellentesque vitae augue sed Purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at communo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet toror. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Π‘Π΅Π΄ Π±Π°Π½Π΄ΠΈΡ ΡΡΠ°Π½ΡΠΏΠΎΡΡΠ½ΠΎΠ³ΠΎ ΡΡΠ΅Π΄ΡΡΠ²Π° ΡΠΎΠ»Π»ΠΈΡΠΈΡΡΠ΄ΠΈΠ½. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, varius sapien dictum.Sed sed elit egestas libero maximus finibus eu eget massa.
Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla nunc Π² nisl elementum congue. Nunc eu conctetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.Nullam turpis augue, lacinia ut libero ac, roncus bibendum ligula. Mauris ullamcorper maximus turpis, ΠΊΠΎΠ½ΡΠΊΠ²Π°Ρ ΡΡΡΠΏΠΈΡ Π±ΠΈΠ±Π΅Π½Π΄ΡΠΌ ΡΠΈΡ Π°ΠΌΠ΅Ρ. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend.Nullam tincidunt sapien fermentum, roncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, conctetur pulvinar orci pulvinar.
Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis disparturient montes, nascetur ridiculus mus.Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum ΠΈ pellentesque dignissim. Sed vehicleula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, cursus tellus facilisis.Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, conctetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Π£ΠΏΠΎΡΡΠ΅Π±Π»ΡΠΉΡΠ΅ Π°Π»ΠΈΠΊΠ²ΠΎΡΡ Π³Π°Π·ΠΈΡΠΎΠ²Π°Π½Π½ΡΡ
Π½Π°ΠΏΠΈΡΠΊΠΎΠ² sem ac lorem malesuada. Fusce iaculis ipsum ex, Ρ mollis dolor dapibus sit amet. In convallis felis Ρ orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor.Nulla nunc Π² nisl elementum congue. Nunc eu conctetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
Nullam turpis augue, lacinia ut libero ac, roncus bibendum ligula. Mauris ullamcorper maximus turpis, ΠΊΠΎΠ½ΡΠΊΠ²Π°Ρ ΡΡΡΠΏΠΈΡ Π±ΠΈΠ±Π΅Π½Π΄ΡΠΌ ΡΠΈΡ Π°ΠΌΠ΅Ρ.Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, roncus risus ac, ullamcorper libero.
<Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»>
ΠΡΠΎ ΡΠ΅ΠΊΡΡ, ΠΊΠΎΡΠΎΡΡΠΉ Π½Π°Ρ
ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΠΈΠ·Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΡ.
Javascript — ΠΠ½Π΅ΡΠ½ΠΈΠ΅ ΡΠ°ΠΉΠ»Ρ — ΠΠ΅ΡΡ Π½ΠΈΠ΅ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠ΅ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ»Ρ ΡΡΡΠ°Π½ΠΈΡ
ΠΠ΅Π±-ΡΠ°ΠΉΡΡΡΠ°ΡΡΠΎ ΡΠΎΠ΄Π΅ΡΠΆΠ°Ρ ΠΎΠ΄Π½Ρ ΠΈ ΡΡ ΠΆΠ΅ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅: Π»ΠΎΠ³ΠΎΡΠΈΠΏ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΈ, Π½Π°Π²ΠΈΠ³Π°ΡΠΈΠΎΠ½Π½ΡΠΉ ΡΠ΅ΠΊΡΡ ΠΈΠ»ΠΈ Π·Π½Π°ΡΠΊΠΈ, ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎΠ± Π°Π²ΡΠΎΡΡΠΊΠΈΡ ΠΏΡΠ°Π²Π°Ρ ΠΈ Ρ. Π. ΠΠ°ΠΆΠ΅ Π² ΡΡΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΠΊΠΎΠ΄ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΡΠ΅Π±ΡΠ΅Ρ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡ ΠΌΠΎΠ³ΡΡ Π·Π°Π½ΠΈΠΌΠ°ΡΡ Π΅ΡΠ΅ Π±ΠΎΠ»ΡΡΠ΅ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ. ΠΠΊΠΎΠ½ΠΎΠΌΡΡΠ΅ Π²ΡΠ΅ΠΌΡ ΠΈ ΡΠΈΠ»Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript. ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π»Π΅Π³ΠΊΠΎ Π²ΠΊΠ»ΡΡΠΈΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈ ΡΠΎΡ ΠΆΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Π½Π° ΠΊΠ°ΠΆΠ΄ΡΡ ΡΡΡΠ°Π½ΠΈΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ Π²ΡΠ΅Π³ΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΡΠΊΠΈ ΠΊΠΎΠ΄Π°.
Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΡ ΡΠ°ΠΉΠ»ΠΎΠ² Π΄Π»Ρ ΡΡΡΠ»ΠΊΠΈ Π½Π° Π²Π°ΡΠΈ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ
ΠΠΎ-ΠΏΠ΅ΡΠ²ΡΡ , Π²Π°ΠΌ Π½ΡΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°ΡΡ Π½ΠΎΠ²ΡΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ°ΠΉΠ», ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ.ΠΠ°ΡΠ΅ΠΌ Π²Ρ Π±ΡΠ΄Π΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ JavaScript Π΄Π»Ρ Π²ΡΠ·ΠΎΠ²Π° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ Π²ΠΎ Π²Π½Π΅ΡΠ½Π΅ΠΌ ΡΠ°ΠΉΠ»Π΅. Π’Π΅ΠΊΡΡ ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π²ΠΎ Π²Π½Π΅ΡΠ½Π΅ΠΌ ΡΠ°ΠΉΠ»Π΅ Π·Π°Π³ΡΡΠ·ΡΡΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ Π΅ΡΠ»ΠΈ Π±Ρ ΠΎΠ½ΠΈ Π±ΡΠ»ΠΈ ΡΠ°ΡΡΡΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΡ.
Π¨Π°Π³ 1: ΠΡΠΊΡΠΎΠΉΡΠ΅ ΠΠ»ΠΎΠΊΠ½ΠΎΡ ΠΈΠ»ΠΈ Π»ΡΠ±ΠΎΠΉ ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ.
Π¨Π°Π³ 2: ΠΠ²Π΅Π΄ΠΈΡΠ΅ HTML-ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ Π²ΠΊΠ»ΡΡΠΈΡΡ Π² ΡΠ°ΠΉΠ», Ρ ΠΏΡΠ°Π²ΠΈΠ»ΡΠ½ΡΠΌ ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ Π²Π°Ρ ΡΠΆΠ΅ Π΅ΡΡΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄, ΠΊΠΎΡΠΎΡΡΠΉ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΎΡΡΠΎ Π²ΡΡΠ΅Π·Π°ΡΡ ΠΈ Π²ΡΡΠ°Π²ΠΈΡΡ Π² ΡΠ΅ΠΊΡΡΠΎΠ²ΡΠΉ ΡΠ΅Π΄Π°ΠΊΡΠΎΡ.
<ΡΠ΅Π½ΡΡ> |
Π¨Π°Π³ 3: Π£Π΄Π°Π»ΠΈΡΠ΅ Π²ΡΠ΅ ΡΠ°Π·ΡΡΠ²Ρ ΡΡΡΠΎΠΊ Π² ΠΊΠΎΠ΄Π΅. ΠΡΠ΅ ΡΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±ΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅, ΠΈΠ½Π°ΡΠ΅ Π²Ρ ΠΏΠΎΠ»ΡΡΠΈΡΠ΅ ΠΎΡΠΈΠ±ΠΊΡ JavaScript Π½Π° ΡΠ²ΠΎΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΠ΅ Π²ΠΌΠ΅ΡΡΠΎ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎΠ± Π°Π²ΡΠΎΡΡΠΊΠΈΡ ΠΏΡΠ°Π²Π°Ρ .
|
ΠΡΠΎΡ ΠΊΠΎΠ΄ ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π½Π° Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΡ ΡΡΡΠΎΠΊΠ°Ρ Π² ΡΡΠΎΠΌ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΎΠ½Π½ΠΎΠΌ Π±ΡΠ»Π»Π΅ΡΠ΅Π½Π΅.ΠΠΎΡΠΊΠΎΠ»ΡΠΊΡ ΡΡΡΠΎΠΊΠ° ΠΎΡΠ½ΠΎΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π΄Π»ΠΈΠ½Π½Π°Ρ, Π²Π°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ ΠΎΠ±ΠΎΡΠ°ΡΠΈΠ²Π°Π΅Ρ ΡΠ΅ΠΊΡΡ ΡΠ°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² ΠΎΡΡΠ°Π»ΡΠ½ΠΎΠΉ ΡΠ°ΡΡΠΈ ΡΠ΅ΠΊΡΡΠ° ΠΈΡΡΠΎΡΠΈΠΈ. ΠΡΠΎΡΡΠΎ Π±ΡΠ΄ΡΡΠ΅ Π°Π±ΡΠΎΠ»ΡΡΠ½ΠΎ , ΡΠ±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ΠΎΠ½ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ Π² ΠΎΠ΄Π½ΠΎΠΉ ΡΡΡΠΎΠΊΠ΅ Π² Π²Π°ΡΠ΅ΠΌ ΡΠ°ΠΉΠ»Π΅ ΠΠ»ΠΎΠΊΠ½ΠΎΡΠ°.
Π¨Π°Π³ 4: ΠΠ»ΠΎΠΆΠΈΡΠ΅ HTML-ΠΊΠΎΠ΄ Π² ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡ document.write. ΠΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ HTML Π² ΠΎΠ΄ΠΈΠ½Π°ΡΠ½ΡΠ΅ ΠΊΠ°Π²ΡΡΠΊΠΈ
document.write (' |
ΠΠ°ΠΌ Π½Π΅ Π½ΡΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΡΡΡ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ HTML-ΠΊΠΎΠ΄, ΠΏΡΠΎΡΡΠΎ ΠΏΠΎΠΌΠ΅ΡΡΠΈΡΠ΅ Π΅Π³ΠΎ Π² ΠΎΠΏΠ΅ΡΠ°ΡΠΎΡ JavaScript.
ΠΡΡΠΎΡΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ ΠΎΠ΄ΠΈΠ½Π°ΡΠ½ΡΠ΅ ΠΊΠ°Π²ΡΡΠΊΠΈ Π²Π½ΡΡΡΠΈ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠΉ ΡΡΡΠΎΠΊΠΈ. ΠΠ΅ΡΠ΅Π΄ ΠΎΠ΄ΠΈΠ½Π°ΡΠ½ΠΎΠΉ ΠΊΠ°Π²ΡΡΠΊΠΎΠΉ Π²ΡΠ΅Π³Π΄Π° ΡΡΠ°Π²ΡΡΠ΅ «\». Π ΠΏΡΠΎΡΠΈΠ²Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ JavaScript ΠΏΠΎΠ΄ΡΠΌΠ°Π΅Ρ, ΡΡΠΎ Π²Ρ ΠΏΡΡΠ°Π΅ΡΠ΅ΡΡ ΠΏΡΠ΅ΠΆΠ΄Π΅Π²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π·Π°ΠΊΡΡΡΡ ΡΡΡΠΎΠΊΡ, ΠΈ Π²ΡΠ΄Π°ΡΡ Π²Π°ΠΌ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ ΠΎΠ± ΠΎΡΠΈΠ±ΠΊΠ΅.
Π¨Π°Π³ 5: Π‘ΠΎΡ ΡΠ°Π½ΠΈΡΠ΅ ΡΠ°ΠΉΠ» ΠΊΠ°ΠΊ ΡΠ°ΠΉΠ» .txt. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΈΠΌΠ΅Π½ΠΈ ΡΠ°ΠΉΠ»Π° ΠΌΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ Β«footer_no9.txtΒ».
ΠΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ°ΠΊΠΆΠ΅ Π²ΡΡΠ°Π²ΠΈΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ, Π²Ρ ΠΏΡΠΎΡΡΠΎ Π²ΡΠΏΠΎΠ»Π½ΠΈΡΠ΅ ΡΠ΅ ΠΆΠ΅ Π΄Π΅ΠΉΡΡΠ²ΠΈΡ ΠΈ Π²ΡΡΠ°Π²ΠΈΡΠ΅ ΡΠ΅ΠΊΡΡ ΠΈ Π³ΡΠ°ΡΠΈΠΊΡ, ΠΊΠΎΡΠΎΡΡΠ΅ Ρ ΠΎΡΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π² ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΡΡΡΠ°Π½ΠΈΡΡ.ΠΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ ΠΈ ΡΠΎΡ ΡΠ°Π½ΠΈΠ»ΠΈ ΡΠ°ΠΉΠ» ΠΊΠ°ΠΊ Β«header.txtΒ»
.document.write (' |
Π’Π΅ΠΏΠ΅ΡΡ Π²Ρ Π³ΠΎΡΠΎΠ²Ρ ΡΠ°Π·ΠΌΠ΅ΡΡΠΈΡΡ ΠΈΡ Π½Π° ΡΠ²ΠΎΠΈΡ Π²Π΅Π±-ΡΡΡΠ°Π½ΠΈΡΠ°Ρ Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript.
ΠΡΠ·ΠΎΠ² Π²Π½Π΅ΡΠ½ΠΈΡ ΡΠ°ΠΉΠ»ΠΎΠ² Ρ ΠΏΠΎΠΌΠΎΡΡΡ JavaScript
Π₯ΠΎΡΡ Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΡΡ ΡΠ΅Ρ Π½ΠΈΠΊΡ Π΄Π»Ρ Π²ΡΡΠ°Π²ΠΊΠΈ ΠΊΠΎΠ΄Π° Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅ Π²Π°ΡΠ΅ΠΉ ΡΡΡΠ°Π½ΠΈΡΡ, Π²Ρ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ, Π·Π°Ρ ΠΎΡΠΈΡΠ΅ Π²ΡΡΠ°Π²ΠΈΡΡ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ ΡΡΡΠ°Π½ΠΈΡΡ ΠΏΡΡΠΌΠΎ Π² Π²Π΅ΡΡ Π½Π΅ΠΉ ΡΠ°ΡΡΠΈ ΡΡΡΠ°Π½ΠΈΡΡ ΡΡΠ°Π·Ρ ΠΏΠΎΡΠ»Π΅ ΠΎΡΠΊΡΡΠ²Π°ΡΡΠ΅Π³ΠΎ ΡΠ΅Π³Π° BODY, Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ:
<Π’ΠΠΠ> |
ΠΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ»ΠΎΠ½ΡΠΈΡΡΠ» Π½Π°Ρ ΠΎΠ΄ΠΈΡΡΡ Π²Π½ΠΈΠ·Ρ ΡΡΡΠ°Π½ΠΈΡΡ, ΠΏΡΡΠΌΠΎ ΠΏΠ΅ΡΠ΅Π΄ Π·Π°ΠΊΡΡΠ²Π°ΡΡΠΈΠΌ ΡΠ΅Π³ΠΎΠΌ BODY: