Idag ska vi bygga en enkel webbsida med ett fantastiskt och gratis verktyg: Cu3er.
Cu3er är en riktigt snygg 3D-bildreglage med galna visuella övergångar och massor av anpassningsalternativ. Även om det är byggt med Flash och JavaScript, behöver du inte verkligen veta något av dessa för att använda det.
I den här artikeln får vi sidan byggd och bildspelet är igång. Nästa gång återkommer vi och ser hur vi anpassar några av Cu3ers många funktioner och variabler.
Vad vi bygger
För att se hur enkelt det är att införliva Cu3er i en design, bygger vi en enkel webbsida som innehåller en rubrik, sidfot, styckkopia och ett navigeringsområde.
Innan vi börjar, kanske du vill kolla in demoen och ladda ner källfilerna.
Notera: I min egen test fungerar cu3er bra i Safari och Firefox men har några problem i IE (överraskning). På grund av detta liksom den lilla CSS3 vi använder, är du säker på att visa demo i Firefox eller Safari.
För att hålla sakerna intressanta använder vi också en liten CSS3 och lär dig hur du installerar en klibbig sidfot? som förblir förankrad längst ner på sidan. Låt oss börja!
Steg 1: Ta tag i Cu3er
Det första du vill göra är att stoppa på Cu3er-webbplatsen och klicka på nedladdningsknappen. När du öppnar .zip bör du se följande filer:
Det första du vill göra är att kopiera hela den här mappen och placera den på ett säkert ställe så att du alltid kan återgå till originalversionerna av en eller alla filer.
När du har gjort det, öppna upp demo.htm i din favorit IDE eller textredigerare.
Steg 2: Anpassa Demo-sidan
När du öppnar demoversidan ser du att den är ganska enkel och innehåller redan en centrerad div med en fungerande version av cu3er. Jag sa att det skulle vara enkelt!
Vi behöver bara lägga till innehåll och restylla den här sidan och vi är alla färdiga. För att påbörja denna process, ersätt stegen 1, steg 2, etc. kommentarer i huvud del av dokumentet och lägg till något mer beskrivande. Ta bort även inline styling och sätt in en länk till ett externt stilark. Du borde ha något som följande.
Låt oss gå över dessa bitar av kod ett i taget. Först av, jag lade till en enkel marginal och vadderingsåterställning, bara se till att olika webbläsarinställningar inte skruvas upp vår layout. Nästa är ett knep jag lärde mig av Chris Coyier vid CSS-Tricks för att rensa flottor (så skrika på honom om du inte tycker att det är semantiskt). Vi kommer att flyta några saker i den här designen och nu när vi har installerat den här CSS kan vi bara kasta in en .clearDiv klass för att se till att innehållet som följer den delen återställs till var vi vill ha det.
Därefter har jag tilldelat några textstilar som typsnitt och typsnitt. Jag har också satt bakgrunden till en mörkgrå och inplacerad header-grafik. Se till att du ställer in rubrikskivan så att du får en stapel som sträcker sig över hela sidan. Slutligen har jag satt höjden på 100% och såg till att dessa stilar tillämpas på både html och kroppsdelar. Detta har att göra med klibbiga sidfotsticket vi kommer att sätta upp senare. För nu bara se till att dessa stilar är närvarande.
Din fil ska följa snyggt nu och se ungefär som bilden nedan.
Steg 5: Stil sidlapp och rubrik
Därefter lägger du till följande text i din CSS:
Här har vi satt vår sidaomslag till 850px (lite oortodox, men det verkade bara rätt) och vår marginal till auto. Detta centrerar allt vårt innehåll snyggt i webbläsarfönstret.
Därefter har jag satt texten till vit, flyttade den till vänster, ställ den bort från toppen och tilldelat en teckensnittsfamilj och -storlek. Detta borde placera? Design Shack? Text snyggt i din förhandsgranskning.
Steg 6: Placera bildspelet
Innan vi lägger till navigeringen i rubriken måste vi ta fram bildspelet. För att göra det här, lägg först in clearDiv-klassen vi pratade om tidigare efter rubriken och före bildspelet i din HTML.
Nu när vi har rensat flottören från rubriken kan vi gå in i vår CSS och lägga till några stilar för bildspelet.
Här har vi lagt till det mesta av stilen till omslaget runt bildspelet. Det här är så att vi kan behålla cu3er-behållare div vid 600px (bredden på bildspelet) medan du har en skugggrafik som sträcker sig bortom denna gräns.
Du kan antingen skapa din egen skugga i Photoshop eller bara ta bort min från källfilerna.
Nu ska ditt bildspel placeras perfekt ovanpå en fin skuggfilm för att ge den en slags flytande illusion.
Steg 6: Lägg till navigeringen
Nu när bildspelet är okej kan vi lägga till i navigeringsområdet. Vi kommer att behålla det här ganska grundläggande och bara använda en orörd lista med länkar. Liksom huvudet, kommer navigationen att använda en float så placera navigerings HTML efter rubriken och före clearDiv.
Nu behöver vi en stor bit av CSS för att stile allt som är involverat i navigeringen. Vi måste täcka navigeringsdeln som helhet, den oordnade listan, listobjekt, listobjektlänkar och listobjektlänkhöjningseffekter.
Allt här är ganska enkelt. Navigationen svänger rätt (den sätter den till höger om sidan och sätter elementen i en linje), inställd på vit, placerad på plats och omvandlad till stor bokstav. Vi har ställt in listestilen till ingen för att dölja bulletpunkterna och eliminera eventuell länktextdekoration utom på svävar, där vi tillämpade en understruk.
Och därmed är vår navigering klar. Nu är allt som är kvar, lite överflödig text och sidfot och vi är alla färdiga!
Steg 7: Lägg till texten nedanför bildspelet
Bara för att avrunda designen lite, vi lägger till en rubrik och ett stycke under bildspelet. Bara några rader av html är allt vi behöver:
Då ska vi ställa in både h1 och stycke taggarna individuellt. Observera att jag använde den bokstäversteknik vi lärde oss i Google Fonts-artikeln. Det här använder en CSS3-textskugga som är ljusare än bakgrunden för att ge illusionen av insettext.
Det tar oss till slutet av det mesta av vår design. Du kan till och med stanna där om du vill, men jag kommer att trycka på och visa dig en snygg klibbig sidfot som jag lärde mig denna vecka.
Bilden som vi använder nedan för sidfoten är exakt densamma som huvudbilden, endast roterad 108 grader, så den röda är överst och den svarta är på botten.
Slutsteg: Lägg till Footer
Om du undrar vad en klibbig sidfot är, är det helt enkelt en sidfot som håller sig fast längst ner på sidan när du ändrar storleken på fönstret. Detta kan vara knepigt att genomföra, men Ryan Fait har skapat en ganska genial metod att uppnå det med mycket lite kod. se den här metoden här.
Grundidén är att du kan använda negativa marginaler och en? Push? för att hålla sidfoten längst ner på sidan. Det första vi behöver göra är att lägga in push- och footer-delarna i vår HTML-fil. Placera push-diven på insidan av sidopaket och sidfoten utanför sidopaketet (så det kommer att sträcka sig till kanterna.)
Gå nu in i din CSS och sätt in följande kod:
Observera att höjden på trycket har ställts till den exakta höjden på sidfoten. Detta är mycket viktigt och tricket kommer inte att fungera utan det. Jag har också placerat i den bakgrundsbild som jag nämnde ovan (bara rotera huvudbilden).
Slutligen lägger vi till ytterligare ett stycke av CSS i vår sidaomslag:
Höjden och minhöjden har båda ställts till 100% och bottenmarginalen har ställts till det negativa värdet av fothöjden (55px). Detta skapar effekten av att hålla sidfoten längst ner på sidan. De höjd: auto! viktigt; bit är en IE hack för att komma runt min-höjd problem med den webbläsaren.
Slutresultat
Vår sida är komplett! Om du har gjort allt rätt ska din sida se ut som den nedan. Du kanske märker att min version startar automatiskt när sidan laddas, oroa dig inte om din inte, vi behandlar det här i nästa artikel.
Nu har du en fantastisk sida med en snygga 3D-bildreglage för att börja bygga en portföljplats.
Slutsats
Observera att nästan allt arbete involverade var att skapa webbplatsen.Cu3er gick faktiskt bara bra i det allra första steget! Kolla tillbaka snart för del två där vi lär oss att tweak några av de grundläggande funktionerna, lägga till text och länkar och mer.