În MaxSite CMS, există o singură cerință pentru șablon: prezența obligatorie a unui fișier index.php. Tot restul este dat webmasterului. Dar, în mod tradițional, șabloanele MaxSite CMS utilizează o parte a funcționalului din șablonul implicit. În primul rând, se referă la utilizarea așa-numitei. tip fișiere (fișiere de date). Aceasta este, în șablonul său, nu este nevoie să utilizați aceste fișiere - sistemul le va conecta automat de la implicit.
Principala diferență dintre șablonul implicit și alte dezvoltări este că partea de levier a programării, configurarea funcționalității și a designului de bază, șablonul implicit preia. Adică, webmasterului i se oferă un cadru gata și complet funcțional pentru evoluțiile sale.
Cadru pentru noi șabloane
Șablonul standard poate fi un schelet pentru orice șablon nou.
Mai întâi, faceți un nou director pentru șablonul dvs. Lasati-l sa fie "placa mea". Copiați conținutul "implicit" în el. Toate lucrările ulterioare vor fi efectuate în "mytemplate".
Datele inițiale ale șablonului
Deschideți info.php și specificați datele șablonului. Fișierul este informativ, deci nu există nicio diferență în ceea ce specificați în el.
Accesați panoul de administrare din fila Setări de bază din fila Șablon de site. Activează șablonul.
Acum, când te duci la site, vei vedea noul nostru șablon.
Componente pentru șabloane
Grilă modulară a site-ului presupune că blocurile sale principale vor avea un conținut funcțional diferit. De exemplu, blocul SHAPE poate consta dintr-o siglă a site-ului, numele său, diferite pictograme și sub meniul orizontal.
Pe un alt site SHAPKA poate conține aceleași elemente, numai într-o altă secvență. În al treilea rând - numai meniul și numele site-ului.
Aici, în toate aceste cazuri, rețeaua modulară este unificată, numai componentele de umplere ale unui bloc anume sunt modificate. Și este ușor să vedem că, de exemplu, meniul nu se schimbă de la site la site pe funcțional, ci doar la modificările sale de proiectare.
Astfel, componentele șablonului sunt blocuri de funcții gata făcute care sunt folosite din șablon la șablon cu modificări minime.
Componentele sunt în directorul șablon de componente. În MaxSite CMS veți găsi următoarele componente:
Se crede că componentele sunt doar pentru două blocuri: capacele și subsolul sitului. Selecția componentelor se face în Personalizarea șablonului în ordine aleatorie. În antet și subsol există cinci componente în fiecare.
Vom studia pe deplin componentele mai târziu, până când vom afla că blocurile SHAPE și CELLS sunt configurate cu ajutorul componentelor.
Șabloane de șabloane CSS
Rețineți că nu am scris încă o singură linie de cod sau stiluri css, dar șablonul nostru este afișat corect. Acest lucru se datorează faptului că șablonul nostru se împrumută de la fișierele implicite de tip 2:
Fișierul stil-all-mini.css este un cadru css care conține deja toate stilurile de bază care sunt de obicei folosite din șablon pentru șablon cu modificări minime. Acest fișier nu trebuie modificat sau copiat în șablonul dvs. Se conectează automat și este imediat gata de utilizare. De exemplu, toate css-helpers sunt localizate în acest fișier. Există, de asemenea, stiluri din plug-in-urile MaxSite CMS, precum și fișierele de tip.
Fișierul var_style.css. dimpotrivă, conține stiluri care de obicei necesită schimbări. De exemplu, aici este o descriere a structurii, culorii legăturilor etc.
Există, de asemenea, al treilea fișier add_style.css. Aceasta este pentru șabloanele care utilizează pe deplin stilurile de șabloane implicite. De exemplu, dacă doriți să modificați doar câteva elemente, fără a reface structura, atunci este logic să folosiți add_style.css.
Care fișier css va fi cel principal?
Schema de conectare a stilurilor css este foarte simplă:
- style-all-mini.css este întotdeauna conectat la șablonul implicit. Nu este nevoie să fie copiat.
- Dacă se presupune că se modifică structura rețelei modulare, vom folosi fișierul var_style.css. care trebuie copiate din șablonul implicit. Fișierul add_style.css nu poate fi utilizat (șters).
- Dacă structura șablonului nu se modifică și există numai modificări minore, atunci se folosește add_style.css din șablonul său. Fișierul var_style.css va fi utilizat automat din șablonul implicit.
În plus, este disponibilă și o opțiune mai complexă - utilizarea simultană a var_style.css și add_style.css în șablonul dvs.
Rețineți că tehnologia implicită-șablon este că programatorul nu este nevoie de un loc pentru a specifica fișiere de conectare: dacă doriți să utilizați un fișier, acesta este pur și simplu plasat în șablonul - conexiunea și formarea codului corect cade pe umerii MaxSite CMS.
Profile de execuție
Profilurile sunt fișiere css obișnuite care se află în directorul css / profiles al șablonului. În fișierul css, sunt definite câteva stiluri mici pentru a schimba sau rafina designul. De exemplu, profilul font-verdana.css face ca fontul Verdana să fie cel principal pe site. Și profilul paragraf-justify.css stabilește textul principal aliniat la format.
Există, de asemenea, profile de temă mai complexe. css. care modifică serios designul șablonului.
Profilurile sunt conectate selectiv în setările pentru șabloane. În special, acestea sunt convenabile în cazul șabloanelor, atunci când este necesar să se "joace" cu unele elemente sau clientul nu a decis încă alegerea variantei finale.
Fișiere pentru lucrul cu șablonul
Dacă șablonul va repeta funcția implicită, toate modificările vor apărea numai în var_style.css (sau add_style.css).
Tehnologia standard-șablon este foarte flexibilă. Există posibilitatea de a schimba aproape fiecare element, atât prin înlocuire, cât și prin extinderea oportunităților implicite. Toate acestea vom lua în considerare în lecțiile viitoare.
Structura de șabloane HTML
Rețineți că până astăzi nu am menționat niciodată structura unui document HTML. Dacă ați încercat să învățați HTML, probabil știți că orice cod HTML conține secțiuni HEAD și BODY. În majoritatea CMS, secțiunea HEAD este generată manual de webmaster. În MaxSite CMS în șablonul implicit (și, prin urmare, cu noi) secțiunea se formează automat. Acest lucru garantează un cod html complet corect, unde este implementat un program de program destul de complex pentru a conecta stiluri, scripturi, fișiere, opțiuni etc. Anterior, webmasterii aveau de multe ori să actualizeze fișiere HEAD din șablonul implicit. Acum nu vă puteți îngrijora.
Prin urmare, întreaga structură HTML a șablonului se găsește în fișierul principal.php. Acesta este un program PHP cu inserții HTML. Codul PHP nu ne interesează (încă), dar nu este greu să înțelegi etichetele HTML. Cu o mică simplificare, citez codul HTML complet:
Această structură este foarte asemănătoare cu toate acele exemple pe care le-am luat în considerare în lecțiile anterioare. Aceste css-clase sunt predefinite pentru MaxSite CMS (sau, mai degrabă pentru default-șablon) care asigură compatibilitatea deplină între diferitele componente, profiluri și alte css-stiluri.
Nu trebuie să modificați main.php!
Acest lucru este important! Mulți webmasteri fac greșeala de a începe să editeze acest fișier. În același timp, putem spune clar că această structură va fi suficientă pentru 99% din site-urile existente. Acordați atenție la trei puncte:
- Capacul și pivnița sunt determinate de componente. Componentele sunt în directoare și fișiere separate. Prin urmare, toate modificările sunt făcute acolo.
- Conținutul este creat într-un fișier de tip. De regulă, acestea sunt stiluri predefinite, clase, iar în main.php se produce doar ieșirea html-code deja pregătită. Schimbările în ieșire sunt efectuate la nivelul setărilor sau al fișierelor de tip (sau al fișierelor type_foreach).
- Ieșirea bara laterală este o funcție separată și este complet automată.
Prin urmare, nu există niciun motiv pentru a modifica main.php. Datorită blocajului și blocurilor părinte, webmasterul poate schimba arbitrar designul site-ului folosind stilurile css.
Să luăm în considerare câteva exemple practice.
Schimbați bara laterală
Să schimbăm conținutul și bara laterală din șablonul nostru pentru un exemplu. Deoarece schimbăm structura site-ului, este logic să folosim var_style.css. Copiați-l din șablonul implicit. Puteți șterge fișierul add_style.css.
Deschideți acest fișier și găsiți liniile responsabile de afișarea conținutului și a barei laterale:
Blocul div.main este părinte pentru div.content și div.sidebar. Acum este momentul pentru a reîmprospăta cunoștințele de lecții anterioare. Pentru a schimba poziția, hai să folosim float simplu: stânga și plutiți: dreapta.
Bara laterală și conținutul schimbă locurile. Bara laterală adevărată "lipită" de marginea containerului. Acest lucru nu este surprinzător, deoarece nu am specificat liniuțe pentru blocul său de înfășurare. Corectați și obțineți acest cod:
Modificați fundalul browserului
Să modificăm ușor culoarea de fundal a browserului. Eticheta BODY este responsabilă pentru acest lucru.
Îndepărtați umbra recipientului și măriți marginile
Umbra este setată de div.all-wrap utilizând proprietatea box-shadow. Unele browsere îl acceptă la nivel experimental, deci este prezent cu mai multe prefixe. Adăugați, de asemenea, o marjă mai mică de la fiecare margine.
Faceți meniul un fundal negru
Fișierul conține instrucțiuni de meniu. În cazul nostru, trebuie doar să modificați fundalul general. Este specificat în div.MainMenu. De asemenea, schimbați culoarea elementului evidențiat și a elementului când plasați cursorul (acesta este un stil). Ca rezultat, obținem:
Imagine în cap
Copiați componenta imagine-rand.php din șablonul implicit. Vom construi blocurile după cum urmează:
În directorul șablon pentru imagini / anteturi, copiați mai multe imagini din șablonul implicit. Sau încărcați-vă propriul.
După aceasta, puteți trece la site.
Adăugați un cadru la imaginea capacului
Componenta imagine-rand.php afișează imaginea ca o etichetă IMG în interiorul blocului div.component_header_image. Cadrul este pentru IMG. dar că imaginea nu iese din bloc (ne amintim modelul bloc!), reduceți lățimea până la lățimea marginii.
În plus, eliminăm marginea inferioară cu ajutorul "margin-bottom: none".
Să schimbăm subsolul
Scoateți fundalul și adăugați marginea superioară.
Adăugați liniuțele de sus și de jos din browser
Div.all-wrap acum are o marjă: 0 auto este centrat orizontal și marjele zero sunt la partea de sus și de jos. Vom face pe 20px:
Modificați culoarea legăturilor
Aici, în general, nu există nicăieri mai bine:
Codul a: hover este stilul legăturii când se hovering.
Să schimbăm fontul principal
Lăsați-o pe Georgia să aibă dimensiunea de 12pt. Deoarece acesta este fontul principal, l-am setat pentru BODY.
Corectați câmpul bara laterală
Nu-mi place câmpul din bara laterală din stânga.
Mai devreme am făcut-o special, dar acum este clar superfluu. repara:
Anteturi de înregistrări
Și atingerea finală - schimbați titlul înregistrărilor. Să fie fontul Arial. Antetele de înregistrare sunt H1.
Acum comparați rezultatul cu șablonul "Twenty Ten". pe care l-am portat anterior la MaxSite CMS. O coincidență de 100%, desigur, nu, și această sarcină nu a rezistat, doar să comparăm lucrarea versiunii anterioare cu aceasta.
Deoarece toate modificările au apărut în fișierul var_style.css. atunci nu voi scoate întregul șablon, dar mă voi limita la acest dosar numai 14.
Articole similare
Trimiteți-le prietenilor: