Acest site este destinat, în primul rând, celor care doresc să facă web-development. Vă puteți familiariza cu materialele de pe site-ul clădirii, de la proiectarea designului, structura și finisarea promovării site-urilor gata făcute. În curând, site-ul ar trebui să devină o colecție vastă de materiale utile, sfaturi, lecții, servicii și linkuri pentru a ajuta atât un dezvoltator web cu experiență și începători.
Citiți mai multe despre acest blog
În curând în blogul meu va fi o serie de articole "Crearea unui site de la zero", "Efectuarea unui blog flexibil, funcțional", "Magazin online pe CMF / CMF MODx" și mult, mult mai mult. Nu treceți.
Urmăriți apariția de articole noi pe site. RSS feed.
Acum, trecem treptat la lucruri mai interesante, și anume integrarea designului în MODx CMS. Ați instalat și ați configurat un sistem de gestionare a site-ului și acum este momentul să găsiți un design adecvat pentru viitorul site. Pentru a facilita această sarcină, am făcut o selecție de resurse cu șabloane gratuite. unde puteți alege cu siguranță ceva pentru dvs.
Ca să nu pierdeți timpul în căutarea unor template-uri pregătite pentru modex, am scris o notă de 100 000 de șabloane pentru MODx. cu care vă puteți familiariza, de asemenea, dacă nu ați făcut deja acest lucru.
După cum am fost de acord, vom începe munca în MODx cu crearea unui site de cărți de vizită. Am luat un șablon potrivit care ne-ar fi potrivit pentru sarcina noastră. Acesta va fi un șablon de la OS-templates.com. Stil drăguț și proaspăt în stil occidental. Are deja pagini de diferite tipuri:
- pagina de start cu galerie jQuery
- pagina interioară a două coloane cu navigație suplimentară
- pagină dintr-o coloană până la întreaga lățime a șablonului
În arhiva descărcată există 3 dosare și 3 fișiere HTML.
În «imagini» dosar conține imagini utilizate pentru proiectarea site-ului, în «scripturi» -script dosar, conectat pentru galerie jQuery pe pagina de start, și în «stilurile» dosar conține CSS-fișiere care definesc aspectul șablonul nostru.
HTML-fișiere care sunt în arhiva nu este nimic, ca markup HTML pentru fiecare dintre cele trei tipuri de pagini: index.html - Acasă, stil demo.html - în interiorul paginii cu două coloane cu navigare suplimentare, full-width.html - O pagină cu o coloană pentru întreaga lățime a șablonului. Cine a uitat pentru a vedea cum arată aceste pagini, el merge rapid la pagina demo a șablonului și meniul de sus, primul clic pe elementul «Style-demo», apoi se face clic pe elementul «lățime completă».
Toate fișierele de șabloane utilizate de sistemul de gestionare sunt stocate în folderul: active / șabloane. Pe gazda locală calea completă la acest director am este: z: \ home \ site \ www \ assets \ templates. Există deja trei dosare, nu este necesar să atingeți numai directorul "manager", în care sunt stocate șabloanele de sistem. Restul poate fi șters. Și creați un dosar pentru șablonul nostru viitor, de exemplu - "site", în care vă despachetați conținutul arhivei descărcate împreună cu șablonul.
În panoul de administrare, urmați filele: Elemente → Gestionare elemente → Șabloane. Aici vom crea noi sau vom personaliza șabloanele create deja. Veți vedea că două șabloane au fost deja create. șablon Demo «MODxhost» poate elimina, astfel încât să nu spin în ochi, și vom face o schimbare «minim Template» Template, care, după cum vă amintiți din lecția despre configurarea sistemului, am stabilit ca șablon implicit.
Pentru a șterge sau edita, faceți clic pe link-ul cu numele șablonului. După ștergerea șablonului demo, continuați editarea "Șablonului minim".
Să creați mai întâi un șablon pentru pagina principală a site-ului nostru cu galeria jQuery. Pentru a face acest lucru, introduceți numele șablonului la editarea șablonul în „Template Name“ și câmpul „Descriere“ - o scurtă descriere, pentru a evita confuzia, în cazul în care vor exista mai multe template-uri. În „codul șablonului (HTML)» nevoie pentru a insera HTML aspectul paginii noastre de start, am acest marcaj este indicat în fișierul index.html pe care am pus recent în active folderul / template-uri / site-ului. Prin urmare, noi pur și simplu copiați în acest domeniu, toate conținutul fișierului index.html este dezbrăcat de tot ce era acolo înainte. În figura de mai jos puteți vedea cum am completat aceste câmpuri, puteți face exact același lucru. După completare, faceți clic pe butonul "Salvați" din partea de sus a paginii.
În timp ce nu arata foarte impresionant, pentru că trebuie să rupă tot drumul de a include fișierele stiluri, imagini și script-uri, așa că suntem Să ne să le reparăm. Vă rugăm să rețineți că, atunci când cursorul mouse-ului chiar în partea de sus a paginii afișate deja panoul de control al paginii, mă voi concentra pe ea mai târziu, dar acum cel mai important lucru pentru a face cartografiere dreptul de șablon, pe care îl urmează din nou o pagină de editare șablon: Elemente → Gestionare elemente → Șabloane → Pagina principală.
Începem să schimbăm căile spre fișierele și imaginile din șablon.
Mai întâi, vom scrie adresa URL de bază pentru site-ul nostru pentru a avertiza împotriva recunoașterii incorecte a căilor relative. Pentru asta, în interiorul etichetei
prescrie următoarele:Deoarece cuibarea de foldere sa schimbat atunci când designul este integrat în sistemul de management, atunci pentru toate căile trebuie să adăugăm următoarea construcție.
Adăugați cu ușurință, nu ratați nimic, nu vă întoarceți la ea din nou și din nou, trebuie să schimbați toate căile în care există stiluri, scripturi și imagini.
De exemplu, iată cum se poate conecta stilurile CSS în aspectul original:
Și aici este după schimbare:
Mare, ne-am descurcat foarte bine cu sarcina. Dacă nu reușiți, puteți să descărcați fișierul pe care l-am modificat și să copiați conținutul acestuia în zona "Codul șablonului (HTML)" când editați șablonul de pagină principală.
La această integrare a designului paginii principale sa încheiat, doar setarea suplimentară a rămas. Spuneți-mi, știți vreun sistem de control în care proiectul este construit atât de repede? Nu am mai intalnit un astfel de CMS.
În următoarea lecție vom învăța cum să creăm meniuri dinamice și să cunoaștem principiile de proiectare de bază în MODx. Veți afla ce bucăți sunt și cum să lucrați cu ele. Între timp, vă sugerez să vă uitați la ecranul pentru lecția de astăzi.
Dimensiunea: 3.3 mb. Durata: 2 minute.