ßê ðåäàãóâàòè øàáëîíè ñàéò³â
Çðîáèòè ñâ³é ñàéò â íàø ÷àñ íåñêëàäíî, íàâ³òü ÿêùî âè íå ìàºòå í³ÿêèõ ñïåöèô³÷íèõ çíàíü â îáëàñò³ âåá-äèçàéíó òà ïðîãðàìóâàííÿ. Ó áóäü-ÿêèé ìîìåíò âè ìîæåòå ñêîðèñòàòèñÿ ìàñîþ ð³çíèõ øàáëîí³â, ðîçì³ùåíèõ â ³íòåðíåò³, ³ íà îñíîâ³ ãîòîâèõ øàáëîí³â âèãîòîâèòè ³ îïóáë³êóâàòè â ìåðåæ³ ñâ³é ñàéò. Îäíàê äàëåêî íå âñ³õ âëàøòîâóº â ïîâí³é ì³ð³ òîé âàð³àíò ñàéòó, ÿêèé ïðîïîíóº øàáëîí. Ïðî òå, ÿê çì³íèòè øàáëîí ñàéòó ³ íàäàòè éîìó óí³êàëüíîñò³ ìè ðîçïîâ³ìî â ö³é ñòàòò³.
Ñêà÷àéòå øàáëîí ³ çíàéä³òü â íüîìó ôàéë style.css. Çàçâè÷àé öåé ôàéë ðîçòàøîâóºòüñÿ â ïàïö³ public_html.
2
³äêðèéòå ôàéë style.css â áëîêíîò³ ³ çíàéä³òü ôðàãìåíò êîäó, ÿêèé â³äïîâ³äຠçà çîâí³øí³é âèãëÿä âåðõí³é ÷àñòèí³ ñàéòó. Öåé ôðàãìåíò âèãëÿäຠíàñòóïíèì ÷èíîì:
#logotype {
background: url (images / logotype.jpg) no-repeat left center # fff-
width: 230px-
height: 60px-
margin: 10px 25px-
position: relative-
#logotype {
background: url (images / logotype.jpg) no-repeat left center # fff-
width: 230px-
height: 60px-
margin: 10px 25px-
position: relative-
3
 äàíîìó êîä³ â ðÿäêó background: url âàì ïîòð³áíî âêàçàòè øëÿõ äî ôîíîâîãî çîáðàæåííÿ ìàéáóòíüîãî ñàéòó. Íàñòóïí³ ðÿäêè ïîçíà÷àþòü äîâæèíó ³ âèñîòó çîáðàæåííÿ, à ïóíêò margin âèçíà÷ຠâ³äñòóï çîáðàæåííÿ ïî âåðòèêàë³ ³ ãîðèçîíòàë³.
4
Çíàéä³òü â ïàïêàõ øàáëîíó ôàéë logotype.jpg, âèêîðèñòîâóâàíèé â êîä³ â ÿêîñò³ ëîãîòèïó, ³ çàì³í³òü éîãî â ò³é æå ïàïö³ íà âëàñíèé ëîãîòèï ç òàêîþ æ íàçâîþ â ôîðìàò³ png.
5
Ôîíîâå çîáðàæåííÿ çàâàíòàæòå â ïàïêó public_html / tmpl / ³ìÿ_øàáëîíà / Images /, ï³ñëÿ ÷îãî, ÿê óæå ãîâîðèëîñÿ âèùå, ïðîïèø³òü â ðÿäêó background: url øëÿõ äî çîáðàæåííÿ.
6
Ïðè íåîáõ³äíîñò³ ïåðåïèø³òü ïàðàìåòðè âèñîòè, äîâæèíè ³ â³äñòóïó çîáðàæåííÿ. Ðÿäîê position: relative ìîæíà íå ÷³ïàòè. Çáåðåæ³òü çì³íè ó ôàéë³ ³ çàâàíòàæòå éîãî íà ñåðâåð çàì³ñòü êîëèøíüîãî ôàéëó øàáëîíó.
7
ßêùî âè õî÷åòå çì³íèòè íèæí³é ëîãîòèï ñàéòó, çíàéä³òü â style.css ôðàãìåíò êîäó, ÿêèé ïî÷èíàºòüñÿ ç³ ñë³â logotype-footer. Çáåðåæ³òü ìàëþíîê ç íîâèì ëîãîòèïîì ³ çàâàíòàæòå éîãî â ïàïêó øàáëîíó Images.
8
Çì³í³òü ïàðàìåòðè äîâæèíè ³ âèñîòè. Çíîâó çáåðåæ³òü ôàéë style.css ³ çàâàíòàæòå îíîâëåíèé ñàéò íà ñåðâåð.
Ñòàòò³ çà òåìîþ "ßê ðåäàãóâàòè øàáëîíè ñàéò³â"
Îö³í³òü, áóäü ëàñêà ñòàòòþ