Complexitatea lecției: Mediu
Astăzi vom vorbi din nou despre editarea șablonului standard Joomla. În lecțiile anterioare, am vorbit despre cum să lucrăm cu codul paginii și fișierele de stil. și, de asemenea, a creat un antet pentru site-ul nostru. Astăzi vom analiza o întrebare la fel de importantă - cum să proiectăm conținutul paginii (titluri, paragrafe, imagini). În plus, vom învăța cum să lucrăm cu fonturile și să alegem un font frumos pentru site-ul nostru.
Proiectarea imaginilor pe site
Mai întâi, să examinăm imaginile de pe site și să începem cu textul complet al materialului.
În mod implicit, textul complet al materialului poate fi afișat la stânga sau la dreapta și, dacă există dorința de a plasa-l strict în centru? Pentru a face acest lucru, va trebui să vă scrieți propriile stiluri CSS pentru imagine.
Nu este nimic complicat, găsim un bloc în care avem o imagine, determinăm clasele aplicate și scriem stilurile necesare. În șablonul Protostar, imaginea textului integral al materialului se află în bloc
Pentru a trage corect această imagine fără a afecta celelalte, va trebui să lucrați cu clasele de mai sus. Pentru a plasa imaginea textului complet al materialului în centrul paginii, scriem următoarele stiluri în fișierul CSS:
Acum, dacă salvați modificările și examinați rezultatul, puteți să vă asigurați că imaginea se află în centrul paginii.
Design de miniaturi de imagini
Următorul pas este să creați miniaturi ale imaginilor create de pluginul mAvik Thumbnails (dacă îl utilizați și, dacă nu, îl recomand foarte mult). Pentru a fi sincer, nu există aproape nici o problemă cu aceasta, dar dintr-un anumit motiv, în șablonul Protostar există caracteristici de afișare a miniaturilor imaginilor pe dispozitivele mobile - ieșesc din zona de conținut. Pentru a scăpa de această problemă, aplicați următoarele stiluri:
Am indicat că lățimea imaginii care conține miniaturi nu trebuie să fie mai mare decât lățimea zonei de conținut. Acest cadru este încadrat ca o legătură cu clasele "thumbnail" și "zoomin". Apoi, îi spunem browserului că înălțimea imaginii ar trebui selectată automat pentru a evita schimbările nedorite în raportul de aspect al imaginii.
Solicitarea media @media (max-width: 420px) indică faptul că stilurile imbricate se vor aplica numai dispozitivelor cu o lățime a ecranului de 420 pixeli sau mai puțin.
În cele din urmă, obținem următorul rezultat:
Procesarea textului
Componenta principală a oricărui site, printre altele, este textul și imaginile cu imagini a dat seama acum pentru înregistrarea textului de pe site.
În concepția textului se poate înțelege că își schimbă parametrii, cum ar fi dimensiunea, culoarea, alinierea etc. și schimbarea fontului. Mai întâi, să definim fonturile.
Pentru a modifica fontul pe site este o proprietate CSS specifică:
Fonturile pot fi afișate separat prin virgulă, deci dacă utilizatorul nu are primul font instalat pe computer, atunci va fi folosit următorul font și așa mai departe.
Această abordare este în sine bun, dar puteți merge în altă parte - fonturile sunt descărcate la serviciul online (CDN-hosting). În acest caz, puteți fi siguri că acest font va funcționa pe orice computer. Tot ce trebuie să faceți este să conectați fontul preferat și să-l utilizați pe cont propriu, dar aici este necesar să aveți grijă să nu încărcați prea multe fonturi, acest lucru poate afecta viteza de încărcare a paginii.
Un astfel de serviciu online cu fonturi gratuite este Google Web Fonts. Serviciul cu fonturile Google este bun pentru că puteți vizualiza vizual fonturile disponibile, puteți alege cele pe care le doriți și le puteți încărca pe site-ul dvs. Totul este simplu, accesați pagina Fonturi Google Web și căutați un font care ne plac:
Pe pagina Fonturi Google Web, puteți personaliza afișarea fonturilor disponibile la discreția dvs., de exemplu, selectați numai fonturi ruse, o familie de fonturi etc. În plus, puteți vedea cum va arăta fontul, aplicând diferite stiluri, cum ar fi dimensiunea, stilul și așa mai departe.
După ce definiți fontul, faceți clic pe pictograma "+" (puteți selecta mai multe fonturi în același mod). În partea de jos a paginii va apărea o fereastră pop-up care conține un mic cod necesar pentru plasarea fonturilor selectate pe site:
În acest stadiu, suntem interesați de două linii de cod pe care le-a propus Google, acestea putând să difere în funcție de fonturile pe care le-ați ales. Prima linie este inserată în fișierul index al șablonului dintre etichete
. în cazul meu, arată astfel:Fișierul index.php ar trebui să arate cam așa:
A doua linie este inserată în foaia de stil. fie pentru întregul document (pagină), fie pentru fiecare element separat (titlu, paragraf, listă etc.). De exemplu, am ales trei fonturi Alice dintr-o dată. Lobster (font scris de mână) și Open Sans și le-a aplicat diferitelor elemente.
Inițial pentru întregul text am ales fontul Alice și l-am înregistrat după cum urmează:
Apoi separat pentru titlurile utilizate alte fonturi:
Stilurile din fișierul CSS pot fi plasate oriunde doriți, dacă trebuie să specificați prioritatea unui stil, atunci trebuie să adăugați parametrul "Important" la caracterul ";".
Astfel, puteți conecta fonturi frumoase și nu vă faceți griji că este posibil ca acestea să nu fie disponibile vizitatorilor site-ului.
Alte proprietati de text
Acum, să scriem mai multe stiluri pentru textul site-ului nostru, făcându-l mai atractiv și mai lizibil.
În primul rând, mărim dimensiunea textului la 16 pixeli pentru paragrafe și liste. Pentru a face acest lucru, scrieți următoarele:
Vă rugăm să rețineți că lista de stiluri care urmează să fie aplicate nu tuturor, ci numai celor care se află în zona de conținut (.item pagină), este făcută la aceste stiluri au fost aplicate la meniul de pe site-ul, și pesmet, care, la rândul său construit pe baza listei.
Acum, adăugați paragrafe și liste la indentarea din partea de jos și faceți alinierea textului la lățimea paginii:
Acum puteți salva toate modificările și puteți vedea ce sa întâmplat. Și am primit următoarele - textul site-ului a devenit mai atractiv și mai bine citit, iar legăturile sunt imediat vizibile.
Ca rezultat, codul pentru foaia de stil este următorul:
Desigur, aceasta este departe de o listă completă a tuturor tipurilor de stiluri pe care le puteți aplica textului de pe site, dar asta e destul.
La această lecție a ajuns la capăt, iar în lecția următoare vom vorbi despre modul de a optimiza proiectarea meniul din dreapta și navigarea site-ul web (pesmet), precum și a face un buton de dragut „Up“ care duce la partea de sus a paginii.
Articole similare
Trimiteți-le prietenilor: