Share
În timpul serialelor precedente din această serie am acoperit o mulțime de terenuri, construindu-ne aspectul receptiv (sau adaptiv) cu scheletul de schelet. Acum este momentul să finalizați toate detaliile finale; probabil cea mai consumatoare parte a oricărui site web!
De-a lungul acestor trei scenarii, vom analiza coloanele de încadrare, embederele video flexibile, elementele formularului Skeleton și filele. Vom elabora orice marcaj lipsă și vom completa CSS-ul însoțitor. Există multe despre care să vorbim; bine peste o oră de material pentru a absorbi, astfel încât ar putea fi necesar să vă pregătiți mintal ...
Am analizat anterior structura de șasezeci de coloane Skeleton și modul în care stilul modifică cu câteva interogări media selectate. Vom vedea acum ce se întâmplă atunci când noi cuib coloanele unul în celălalt.
Alternativ, descărcați videoclipul sau abonați-vă la programele de distribuție Webdesigntuts + prin iTunes sau YouTube!
Este timpul să adăugați niște carne în bara noastră laterală. Vom adăuga toate marcările necesare, apoi începem să modelam diferitele secțiuni. În timp ce facem asta, vom vorbi repede despre stylingul formularului Skeleton și vom lua niște fonturi web pentru icoanele noastre.
Alternativ, descărcați videoclipul sau abonați-vă la programele de distribuție Webdesigntuts + prin iTunes sau YouTube!
Dacă sunteți serios în ceea ce privește proiectarea web flexibilă, va trebui să știți cum să gestionați conținutul flexibil încorporat. În acest videoclip, vom analiza elasticitatea conținutului nostru video. Mai sunt multe de discutat pe această temă, însă această abordare de bază este un început minunat.
Odată ce am acoperit acest lucru, vom vorbi rapid despre filele Skeleton, plus vom adăuga câteva bannere promoționale care se modifică în funcție de interogările media utilizate.
Alternativ, descărcați videoclipul sau abonați-vă la programele de distribuție Webdesigntuts + prin iTunes sau YouTube!
Subiectul încorporărilor flexibile este destul de interesant. Aici, pentru disecția ta, sunt fragmentele de bază de care ai nevoie pentru a începe lucrurile. În primul rând, marcajul:
Și apoi stilurile:
/ * În primul rând, ne ocupăm de elementul recipientului, făcând-o relativ poziționată și definind înălțimea sa proporțională cu lățimea sa - oferindu-ne un raport 16: 9. umplutura: 0; pad-bottom: 56,25%; / * Raportul 16: 9 * / înălțime: 0; overflow: ascuns; / * apoi facem ca conținutul propriu încorporat să se comporte în ceea ce privește dimensiunile și poziția sa în interiorul containerului * / .embed iframe, .embed object, embed embed position: absolute; top: 0; stânga: 0; lățime: 100%; înălțime: 100%;
Notă: În ecranul de emisie am setat înălţime din containerul de 56,25%, ar fi trebuit să-l dau la zero (hei, am obosit ...) În cele mai multe cazuri acest lucru nu va avea efecte dăunătoare, dar m-am gândit că merită să menționez :)
Unele linkuri utile pentru a continua să se bazeze pe ceea ce a fost acoperit în aceste videoclipuri.
Accentsconagua