Amenajarea unui șablon de site utilizând css

În lecțiile anterioare am făcut kitul inițial de instalare pentru șablonul de călătorie. care constă din fișiere index.php. templateDetails.xml și două foldere css și imagine.







Dacă ați făcut totul corect, atunci șablonul este instalat pe Joomla 3 fără probleme. Apoi, vom lucra la foi de stil cascadă. care sunt responsabili pentru proiectarea paginilor site-ului.

Momentul 1. La crearea tabelelor voi folosi limba CSS2. Spre deosebire de CSS3, este mai ușor de înțeles. Acest lucru este important, pentru că cea mai mare parte a publicului din site-ul meu este nou în programarea web. De asemenea, există încă un minus CSS3 - această limbă nu este în prezent acceptată de toate browserele. Pentru cei care sunt puțin familiarizați cu CSS2, pentru o mai bună înțelegere, în lucrul la mese, vă recomand să utilizați directorul "HTML, CSS, PHP".

Momentul 2. Întotdeauna creez site-uri și șabloane de practică numai pe serverul local instalat pe calculatorul meu. Pe site-ul de hosting am completat site-ul gata, pe deplin funcțional cu conținutul inițial.

Momentul 3. Nu modific niciodată codul șablonului din panoul de administrare Joomla. dar folosesc doar programul Macromedia Dreamweaver. Deschideți fișierul de care am nevoie, modificați-l, salvați-l (dar nu închideți fișierul) și căutați imediat ce modificări au avut loc pe site. Dacă nu mă plac, am anula acțiunile anterioare.







ATENȚIE: Va reveni în panoul de administrare Joomla când editarea codului nu este posibilă!

Cu programul Macromedia Dreamweaver este foarte convenabil să lucrezi - evidențiază codul, ajută la scrierea foarte rapidă, evidențiază erori, vă permite să vă răzgândiți. Toată documentația pentru Macromedia Dreamweaver și programul în sine îl puteți găsi pe site.

Ei bine, ca tot ce ți-a spus și poți începe să lucrezi. Mai întâi de toate, trebuie să plasați corect toate blocurile DIV pe pagină. Acum stau în picioare una după alta (vezi scenariul din lecția anterioară).

Pentru a procesa lucrări bine pentru a vedea modul în care blocurile creștere în managerul de module CMS Joomla am creat un modul de căutare site-ul si pune-l în poziția «user1», modul de meniu orizontal - în poziția de «utilizator2», modulul de navigare pe site-ul - în poziția de «user3 ", Trei module cu cod HTML arbitrar - în poziția" stânga "," dreapta "," subsol ".

Inițial, am decis să fac blocul "header" universal și i-am furnizat o poziție pentru ieșirea modulelor "header". În această poziție, puteți afișa orice rotator imagine sau un modul cu un cod HTML arbitrar doar pentru a aduce imaginea orice înălțime, lățimea trebuie să fie întotdeauna 950rh (lățimea paginii). Această imagine poate fi făcută clic, precum și poate fi ușor modificată. Pentru inceput, am creat un modul similar si am plasat o imagine de 950x250.

Utilizați ghidul de stil CSS dacă nu înțelegeți nici un parametru.

În primul rând, vom proiecta blocul "corp", vom seta culoarea gri de fundal la ea.

Apoi, faceți pagina directă. Definiți lățimea, specificați proprietățile fontului care va fi folosit pe site și setați mai întâi culoarea de fundal

font: 14px Arial, Helvetica, sans-serif;







Articole similare

Trimiteți-le prietenilor: