Oggi costruiremo una semplice pagina web con uno strumento fantastico e gratuito: Cu3er.
Cu3er è un cursore di immagini 3D davvero pulito con transizioni visive pazzesche e molte opzioni di personalizzazione. Sebbene sia stato realizzato con Flash e JavaScript, non è necessario conoscerne uno per utilizzarlo.
In questo articolo, otterremo la pagina costruita e la presentazione attiva e funzionante. La prossima volta torneremo e vedremo come personalizzare alcune delle molte caratteristiche e variabili di Cu3er.
Cosa stiamo costruendo
Per capire quanto sia facile incorporare Cu3er in un progetto, costruiremo una semplice pagina Web che contiene un'intestazione, un piè di pagina, una copia di paragrafo e un'area di navigazione.
Prima di iniziare, potresti voler controllare la demo e scaricare i file sorgente.
Nota: Nel mio test, cu3er funziona alla grande in Safari e Firefox ma ha alcuni problemi in IE (sorpresa). A causa di questo e del bit di CSS3 che useremo, assicurati di farlo guarda la demo in Firefox o Safari.
Per mantenere le cose interessanti, useremo anche un po 'di CSS3 e impareremo come impostare un? Footy sticker? che rimane ancorato al fondo della pagina. Iniziamo!
Passaggio 1: Afferra Cu3er
La prima cosa che vorrai fare è fermarti al sito web di Cu3er e premere il pulsante di download. Quando apri il .zip dovresti vedere i seguenti file:
La prima cosa che devi fare è copiare l'intera cartella e metterla in un posto sicuro in modo da poter sempre tornare alle versioni originali di alcuni o tutti i file.
Una volta che lo hai fatto, apri demo.htm nel tuo IDE preferito o editor di testo.
Passaggio 2: Personalizza la pagina di prova
Quando apri la pagina demo, vedrai che è piuttosto semplice e contiene già un div centrato con una versione funzionante di cu3er. Te l'ho detto che sarebbe stato facile!
Abbiamo solo bisogno di aggiungere contenuti e restyling questa pagina e saremo tutti finiti. Per iniziare questo processo, sostituire i commenti Step 1, Step 2, ecc. Nel capo porzione del documento e aggiungere qualcosa di più descrittivo. Elimina anche qualsiasi stile in linea e inserisci un link a un foglio di stile esterno. Dovresti avere qualcosa di simile al seguente.
Esaminiamo questi blocchi di codice uno alla volta. Prima di tutto, ho aggiunto un margine semplice e il reset del padding solo per assicurarmi che le varie impostazioni predefinite del browser non rovinino il nostro layout. Il prossimo è un trucco che ho imparato da Chris Coyier ai CSS-Tricks per chiarire i float (quindi urlatelo se non pensi che sia semantico). Faremo galleggiare alcune cose in questo design e ora che abbiamo configurato questo CSS, possiamo semplicemente inserire un .clearDiv classe per assicurarsi che il contenuto che segue quella sezione verrà reimpostato nel punto in cui lo vogliamo.
Successivamente, ho assegnato alcuni stili di testo come font-family e font-weight. Ho anche impostato lo sfondo su un grigio scuro e ho inserito la grafica dell'intestazione. Assicurati di impostare la sezione dell'intestazione da ripetere in modo da ottenere una barra che si estende su tutta la pagina. Infine, ho impostato l'altezza al 100% e ho fatto in modo che questi stili venissero applicati sia alle porzioni html che a quelle del corpo. Questo ha a che fare con il trucco sticky footer che installeremo in seguito. Per ora assicurati solo che questi stili siano presenti.
Il tuo file dovrebbe venire avanti bene ora e apparire all'incirca come l'immagine qui sotto.
Passaggio 5: adatta la pagina a capo e l'intestazione
Successivamente, aggiungi il seguente testo al tuo CSS:
Qui abbiamo impostato il ritorno a 850px (un po 'non ortodosso, ma sembrava giusto) e il nostro margine sull'auto. Questo centra tutto il nostro contenuto piacevolmente all'interno della finestra del browser.
Successivamente ho impostato il testo su bianco, lo abbiamo spostato a sinistra, lo abbiamo distanziato dalla parte superiore e assegnato una famiglia di caratteri e una dimensione. Questo dovrebbe posizionare il design Shack? testo ben nella tua anteprima.
Passaggio 6: posizionare la presentazione
Prima di aggiungere la navigazione nell'intestazione, dobbiamo allontanare la presentazione. Per fare ciò, prima posiziona la classe clearDiv di cui abbiamo parlato prima dopo l'intestazione e prima della presentazione nel tuo codice HTML.
Ora che abbiamo rimosso il float dall'intestazione, possiamo andare nel nostro CSS e aggiungere alcuni stili per la presentazione.
Qui abbiamo aggiunto la maggior parte dello stile al wrapper attorno alla presentazione. Questo è così che possiamo mantenere il cu3er-contenitore div a 600px (la larghezza della presentazione) mentre si ha una grafica ombra che si estende oltre questo limite.
Puoi creare la tua ombra in Photoshop o semplicemente catturare il mio dai file di origine.
Ora la tua presentazione dovrebbe essere posizionata perfettamente sopra una bella grafica shadow per dargli una sorta di illusione fluttuante.
Passaggio 6: aggiungere la navigazione
Ora che lo slideshow è fuori mano, possiamo aggiungere nell'area di navigazione. Manterremo questo piuttosto semplice e basta usare una lista non ordinata di link. Come l'intestazione, la navigazione utilizzerà un float, quindi posiziona il codice HTML di navigazione dopo l'intestazione e prima di clearDiv.
Ora avremo bisogno di una grossa porzione di CSS per personalizzare tutto ciò che riguarda la navigazione. Abbiamo bisogno di coprire il div di navigazione nel suo complesso, la lista non ordinata, gli elementi della lista, i collegamenti alle voci della lista e gli effetti di collegamento al passaggio della voce dell'elenco.
Tutto qui è piuttosto semplice. La navigazione è a destra (questo lo imposta sul lato destro della pagina e mette gli elementi in una linea), impostato su bianco, posizionato in posizione e trasformato in maiuscolo. Abbiamo impostato lo stile elenco su none per eliminare i punti elenco ed eliminato qualsiasi decorazione del testo del collegamento tranne che al passaggio del mouse, dove abbiamo applicato una sottolineatura.
E con questo la nostra navigazione è finita. Ora tutto ciò che rimane è un testo superfluo e il piè di pagina e saremo tutti finiti!
Passaggio 7: aggiungi il testo sotto la presentazione
Solo per arrotondare un po 'il design, aggiungeremo un titolo e un paragrafo sotto lo slideshow. Bastano poche righe di codice HTML di cui abbiamo bisogno:
Quindi modificheremo individualmente sia i tag h1 che i paragrafi. Notate che ho usato la tecnica tipografica che abbiamo appreso nell'articolo di Google Fonts. Questo utilizza un'intestazione testo CSS3 più chiara dello sfondo per dare l'illusione di inserire il testo.
Questo ci porta alla fine della maggior parte del nostro design. Puoi anche fermarti lì, se lo desideri, ma ho intenzione di andare avanti e mostrarti un bel trucchetto che ho imparato questa settimana.
L'immagine che usiamo sotto per il footer è esattamente la stessa dell'immagine dell'header, solo ruotata di 108 gradi, quindi il rosso è in alto e il nero è in basso.
Passaggio finale: aggiungere il piè di pagina
Se ti stai chiedendo cos'è un footer appiccicoso, è semplicemente un piè di pagina che aderisce alla parte inferiore della pagina mentre ridimensiona la finestra. Questo può essere complicato da implementare ma Ryan Fait ha creato un metodo abbastanza ingegnoso per realizzarlo con un codice molto piccolo; vedi questo metodo qui.
L'idea di base è che puoi utilizzare i margini negativi e un? Push? per mantenere il piè di pagina in fondo alla pagina. La prima cosa che dobbiamo fare è inserire il push e il footer div nel nostro html. Posiziona il cursore di spinta all'interno del foglio di pagina e il piè di pagina div all'esterno del foglio di carta (in modo che si estenda ai bordi).
Ora vai nel tuo CSS e inserisci il seguente codice:
Si noti che l'altezza della spinta è stata impostata all'altezza esatta del piè di pagina. Questo è molto importante e il trucco non funzionerà senza di esso. Ho anche inserito l'immagine di sfondo che ho citato sopra (basta ruotare l'immagine di intestazione).
Infine, aggiungeremo un altro snippet di CSS nel nostro involucro di pagina:
L'altezza e l'altezza minima sono entrambe impostate su 100% e il margine inferiore è stato impostato sul valore negativo dell'altezza del footer (55 pixel). Questo crea l'effetto di mantenere il piè di pagina nella parte inferiore della pagina. Il altezza: auto! importante; bit è un trucco di IE per aggirare min-height problemi con quel browser.
Risultato finale
La nostra pagina è completa! Se hai fatto tutto bene, la tua pagina dovrebbe apparire come quella qui sotto. Potresti notare che la mia versione si avvia automaticamente al caricamento della pagina, non preoccuparti se la tua non lo fa, ci occuperemo di questo nel prossimo articolo.
Ora hai una pagina fantastica con un fantastico slider di immagini flash 3D per iniziare a costruire un sito portfolio.
Conclusione
Si noti che praticamente tutto il lavoro richiesto era la creazione del sito web.Cu3er funzionava davvero bene nel primo passo! Torna presto per la seconda parte, dove impareremo a modificare alcune delle funzionalità di base, aggiungere testo e collegamenti e altro ancora.