WordPress come CMS parte 2

Nell'ultimo tutorial abbiamo implementato un layout semplice e veloce in Photoshop e ora dobbiamo trasformarlo in una pagina HMTL e CSS statica.

Disponibile anche in questa serie:

WordPress come CMS: parte 1
WordPress come CMS: parte 2
WordPress come CMS: parte 3

Questo tutorial include uno screencast disponibile per i membri Tuts + Premium.

Una volta che ti senti più a tuo agio con HTML e WordPress puoi saltare questo passaggio e creare il tuo tema WordPress, ma ciò vanificherebbe lo scopo di questo tutorial, quindi faremo questo passo in più.

Ci sono due diversi tipi di tutorial che vedo là fuori e quello più popolare sembra essere qui è l'HTML completo e qui c'è il CSS completo e questa è la fine del tutorial. Non sono un grande fan di questo metodo, quindi ti guiderò attraverso l'intero processo. Per le persone che sono fan dell'altro metodo, puoi trovare l'intero HMTL e CSS alla fine di questo tutorial.

Fare a pezzi

Abbiamo mantenuto un design estremamente semplice, quindi abbiamo solo bisogno di ritagliare 2 immagini. Questi sono il logo e la nostra immagine di contenuto.

Tira fuori il tuo utensile per il taglio e ritaglia entrambe le immagini.

Per il logo, cerca di tenerlo il più vicino possibile a ciascun bordo.

Salva l'immagine per il web e poi fai lo stesso per la nostra immagine di contenuto.

Hai bisogno di una solida base

Ora che abbiamo tutte le nostre immagini tagliate e salvate, possiamo andare avanti e creare il nostro file HTML.

Apri il tuo editor e preparati a creare alcune cartelle e file. Nella tua cartella radice crea queste cartelle e file.

img /

inc /

index.html

Sposta le tue immagini appena create nella cartella img e vai nella tua cartella inc. Una volta dentro, creeremo una nuova cartella e due nuovi file. Crea una nuova cartella chiamata CSS e all'interno di quella cartella crei 2 nuovi file, reset.css e style.css.

La struttura delle cartelle dovrebbe apparire come il nostro screenshot qui sotto.

Reset e struttura di base

Quando crei un sito, è sempre bene iniziare con un solido reset CSS. Questo assicura che stai iniziando a Ground Zero ed eliminando qualsiasi incoerenza del browser che potresti avere.

Il reset dei CSS che uso sempre è da http://meyerweb.com/eric/tools/CSS/reset/, quindi indirizza il browser a quel sito e copia il codice di reimpostazione CSS che ha creato.

Prima di incollarlo nel nostro file reset.CSS, lo comprimeremo rapidamente in un file più piccolo.

Se si usa il compressore CSS di Google ci sono centinaia di script che lo faranno per conto mio, personalmente uso CSSdrive http://www.CSSdrive.com/index.php/main/CSScompressor/ quindi, di nuovo, punta il tuo browser a questo sito.

Incolla il codice di ripristino CSS in quella casella e imposta la modalità di compressione su super-compatto. Hit comprimilo!

Verrai reindirizzato a un'altra pagina con il nostro codice di ripristino CSS appena compresso. Copia il codice, apri reset.css nel tuo editor e incolla il tuo codice. Salvare reset.css e chiudi questo file.

Ora che il nostro CSS resetta tutte le impostazioni, creeremo la struttura HTML di base del nostro sito in modo che possiamo applicare alcuni stili CSS per assicurarci che tutto funzioni correttamente.

Screencast completo

Costruzioni

Aprire index.html e aggiungi questo codice HTML per il file HTML di base.

    WordPress CMS - Parte 2

Ora che abbiamo creato il file HTML di base, possiamo creare i 4 elementi principali della nostra pagina. Questi elementi sono Intestazione, Barra laterale, Contenuto e Piè di pagina. Ancora una volta, poiché stiamo lavorando con un modello che si trova su uno sfondo completamente solido, non dobbiamo preoccuparci di aggiungere padding ai nostri elementi, quindi possiamo solo creare 4 div del contenitore e iniziare ad aggiungere alcuni stili.

Crea 4 div per ciascun elemento e aggiungi _container a ciascun nome. Stiamo per aggiungere 1 contenitore che ospiterà ciascuno dei nostri elementi in modo da poter centrare tutti i nostri contenuti sulla pagina. Questo sarà chiamato contenitore.

Noterai che ogni tag div di chiusura ha un commento accanto. Il nostro modello non diventerà estremamente lungo, ma in futuro quando lavori con molti elementi e elementi sulla tua pagina può essere difficile tenere traccia di quale

il tag appartiene all'apertura

etichetta. L'aggiunta di commenti permetterà di tenere traccia di quale ender appartiene al suo apri.

Abbiamo tutti i nostri contenitori pronti per l'installazione, quindi iniziamo ad aggiungere alcuni stili in modo che possiamo assicurarci che la nostra barra laterale e i contenitori dei contenuti fluttuino uno accanto all'altro!

Aprire style.css e aggiungere rapidamente alcuni stili generali.

Questo uomo ha un po 'di stile

 body background: # f5f5f5; dimensione carattere: 62,5%; colore: # 6e6e6e; font-family: Helvetica, Verdana, Sans-Serif;  p font-size: 1.4em; line-height: 1.5em; margine: 0 0 15px 0;

Se hai mai usato un file CSS, questo dovrebbe apparire molto familiare. Se non lo hai fatto, ciò che abbiamo fatto è cambiato alcune variabili del nostro elemento del corpo. Questo influenza il nostro file HTML principale. Abbiamo cambiato il colore di sfondo con il colore del nostro file PSD, nonché modificato il colore predefinito di qualsiasi testo sulla pagina usando il colore.

Quindi impostiamo lo stack di font predefinito che vogliamo utilizzare per il nostro sito. Questo dice al nostro browser che vogliamo che Helvetica sia il font principale usato per la nostra pagina. Se Helvetica non è disponibile, il browser cerca Verdana e infine il successivo font sans-serif disponibile.

Se ti apri index.html nel tuo browser vedrai una pagina bianca vuota. Poiché non abbiamo alcun elemento nel nostro contenitore, aggiungeremo un'altezza predefinita e alcuni colori di sfondo in modo da poter vedere con cosa stiamo lavorando.

 div height: 200px;  / * - Structure Elements - * / #container width: 900px; margine: 0 auto;  #header_container width: 100%; sfondo: rosso;  #sidebar_container width: 280px; sfondo: blu;  #content_container width: 580px; sfondo: arancione;  #footer_container width: 100%; sfondo: verde;

Aggiorna la pagina e dovresti avere qualcosa che assomigli allo screenshot qui sotto.

Abbiamo impostato un'altezza predefinita di 200 px per tutti i nostri div in modo che potessimo vederli senza alcun contenuto al loro interno. Senza l'altezza predefinita i nostri div avrebbero tutti un'altezza di 0px e non vedremmo nulla.

Ora che abbiamo i nostri div visualizzati nella pagina, dobbiamo assicurarci che la barra laterale e i contenitori dei contenuti siano seduti uno accanto all'altro nella pagina. Useremo la proprietà float per raggiungere questo obiettivo.

Nota: a meno che non ti dica di rimuovere tutti gli stili dall'elemento CSS corrente, ti basta aggiungere le nuove proprietà alle proprietà già esistenti.

 #header_container float: left; chiaro: entrambi;  #sidebar_container float: left;  #content_container float: right #footer_container float: left; chiaro: entrambi;

Spostiamo il nostro div sidebar a sinistra della pagina e il content div a destra della pagina. Questo è uno dei layout a colonne più facili che incontrerai. Non vogliamo che i nostri contenitori di intestazione e piè di pagina abbiano alcun elemento fluttuante accanto a loro, quindi abbiamo aggiunto un chiaro: entrambi; proprietà con la proprietà float. Clear si assicura che nessun altro elemento si trovi su entrambi i lati del contenitore corrente.

Aggiorna e consulta lo screenshot!

Ora abbiamo completato la struttura di base della nostra pagina in modo da poter iniziare ad aggiungere altri elementi alla pagina. Stiamo per iniziare con l'intestazione. Sappiamo che tutto è flottato e allineato correttamente in modo da poter rimuovere i colori di sfondo dai nostri div contenitore.

Come su un po 'di navigazione

All'interno del tuo header_container div è possibile aggiungere un tag h1 e una lista non ordinata che fungerà da nostra navigazione principale.

 / * - header_container - * / Gear'd
  Di
 Piani e prezzi
 FAQ
 Contatto

Se aggiorni la pagina vedrai i tag predefiniti, non c'è molto da guardare. Useremo l'h1 come nostro logo. Torna a style.css e aggiungi alcune proprietà al nostro tag logo h1 #.

 h1 # logo larghezza: 280px; altezza: 96 px; text-indent: -9999px; background: url (... / ... /img/logo.gif) in alto a sinistra nessuna ripetizione; fluttuare: a sinistra;

Quello che abbiamo fatto qui è impostare l'altezza e la larghezza di out h1 all'altezza e alla larghezza dell'immagine del nostro logo. Successivamente abbiamo rimosso il testo indentandolo di -9999px. Infine, abbiamo impostato lo sfondo del nostro h1 al nostro tag logo e lo abbiamo lasciato a sinistra. Ciò assicurerà che si trovi bene accanto alla navigazione.

Il logo sembra fantastico, ma la navigazione richiede un po 'di amore CSS. Diamo un po '!

Un breve passo falso dalla nostra navigazione, includeremo rapidamente il carattere dei giorni che abbiamo utilizzato per il nostro logo e la navigazione.

Useremo @ font-face per dire al CSS che vogliamo usare il nuovo font per il nostro file. Questa proprietà non è disponibile in tutti i browser, ma useremo uno stack di font per assicurarci che l'altro browser sia ancora in grado di vedere i nostri stili.

Per prima cosa dobbiamo includere il nostro font nel nostro file CSS. Crea una nuova cartella chiamata fonts nella nostra cartella inc e trascina days.otf all'interno della nuova cartella fonts.

Se non hai il font dei giorni, puoi scaricarlo, così come altri tipi di font sicuri per il viso da http://spyrestudios.com/21-awesome-font-face-embedable-typefaces/

Una volta ottenuto il carattere, possiamo usare @ font-face per includerlo nel nostro script CSS.

 @ font-face font-family: Days; src: url ("... /fonts/days.otf");

La prima proprietà dice al nostro file CSS qual è il nome del font, quindi possiamo usarlo nella nostra proprietà font-family con altri elementi. La seconda proprietà è dove si trova il nostro font.

Torna alla nostra navigazione. È diventato lo standard usare liste non ordinate o ordinate quando si tratta di navigazione. Disegnare la navigazione può diventare un po 'difficile quando sei un principiante, ma una volta che lo prendi può essere molto potente.

 ul.nav float: right; margine: 25px 0 0 0;  ul.nav li float: left; margine: 0 0 0 10 px;  ul.nav li a font-family: Days, Helvetica, Verdana, Sans-Serif; decorazione del testo: nessuna; imbottitura: 5px 10px; colore: # 6e6e6e; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 1.4em;  ul.nav li a: hover background: # e0e0e0;  ul.nav li.active a background: # 00b8ff; colore: # f5f5f5;

Facciamo riferimento a ul.nav e lo facciamo scorrere a destra. Questo lo mette all'estrema destra del nostro contenuto div attraverso il nostro logo.

Per impostazione predefinita, i tag li dei nostri elenchi si trovano l'uno sopra l'altro su una nuova riga per ogni li. Non vogliamo questo, vogliamo che la nostra navigazione sia accostata. Fluttua in soccorso! Aggiungiamo un po 'di margine a ciascun elemento li per distanziarli un po'.

Aggiungiamo un po 'di stile ai nostri elementi di collegamento per renderli simili ai pulsanti grafici. Useremo un'altra proprietà che non è disponibile in tutti i browser, ma voglio mantenere tutto semplice per motivi di apprendimento.

Questo dove -moz-border-radius e -webkit-border-radius entrare in gioco. Queste 2 proprietà aggiungono un bel raggio di 5 pixel ad ogni elemento di collegamento. Noterai l'arrotondamento solo quando il link è attivo o viene sospeso sopra perché sono gli unici 2 eventi in cui stiamo cambiando il colore di sfondo.

Aggiorna e goditi la gloria della tua nuova navigazione!

Con la nostra nuova conoscenza delle liste, passeremo alla barra laterale e aggiungeremo un altro elenco non ordinato per la navigazione nella barra laterale. Il metodo di creazione della barra laterale di navigazione è quasi identico alla nostra navigazione in alto, quindi se stai cercando una sfida, prova a creare la sidebar e ad assegnarla a stile prima di guardare il codice attuale!

Di seguito troverai il codice HTML e CSS per la navigazione nella sidebar. Non ho intenzione di guidarti attraverso di esso perché, come ho detto prima, è praticamente identico alla nostra navigazione dell'intestazione, tranne che stiamo impostando una larghezza per i nostri elementi di collegamento perché vogliamo che siano le dimensioni complete della barra laterale.

  Piano gratuito
 Piano non così libero
 Trump Plan

 #sidebar_container ul, #sidebar_container ul li float: left; chiaro: entrambi; larghezza: 280 px;  #sidebar_container ul li margin: 0 0 10px 0;  #sidebar_container ul li a -moz-border-radius: 5px; -webkit-border-radius: 5px; imbottitura: 7px 10px; decorazione del testo: nessuna; colore: # 6e6e6e; fluttuare: a sinistra; chiaro: entrambi; larghezza: 260 px; font-size: 1.5em; text-transform: maiuscolo; font-family: Days, Helvetica, Verdana, Sans-Serif;  #sidebar_container ul li a: hover background: # e0e0e0;  #sidebar_container ul li.active a background: # 00b8ff; colore: # f5f5f5;

Ormai dovresti essere una lista non ordinata e io odio farlo, ma faremo un'altra lista che prometto. Utilizzeremo un'altra lista per il nostro footer.

Ancora una volta, vi fornirò sia il codice HTML che il codice CSS con un po 'di spiegazione perché è quasi identico, tranne che stiamo fluttuando alcuni elementi in modo diverso questa volta.

  Copyright Gear'd © 2009
 Termini & Condizioni
 Sviluppatori
 FAQ

 #footer_container color: #bebebe;  #footer_container a color: # 6e6e6e; decorazione del testo: nessuna; font-size: 1.4em;  #footer_container ul li float: right; border-left: 1px solid #bebebe; padding: 0 10px;  #footer_container ul li.copyright float: left; padding: 0; confine: 0;  #footer_container ul li p margin: 0;

Abbiamo la nostra lista dei piedi e ognuno dei nostri elementi li è a posto ma vogliamo che li.copyright siediti sul lato sinistro della nostra pagina lontano dalla lista dei footer. Per fare ciò, diamo una classe di copyright e lasciala a sinistra anziché a destra. Abbiamo anche aggiunto alcuni bordi a sinistra di ogni elemento li tranne per i nostri diritti d'autore per un po 'di spezie.

Sei stanco di liste ancora? Se la risposta è sì, sei fortunato, abbiamo finito con le liste per questo tutorial. Grazie per esserti attenuto così a lungo: P

Siamo vicini al traguardo, dobbiamo solo aggiungere alcuni elementi di contenuto e aggiungere alcuni ritocchi all'ultimo minuto.

Riempi il contenuto

Piani e prezzi

Piano gratuito

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augusta neque tempor enim, et mattis justo nibh eu elit. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.

Tutti i nostri elementi di contenuto sono principalmente elementi predefiniti nella pagina ad eccezione del nostro header header_image. Questo è buono perché significa una quantità minima di CSS per rendere la nostra pagina fantastica.

 / * - Elementi di intestazione - * / h1, h2, h3 font-family: Days, Helvetica, Verdana, Sans-Serif;  h2 font-size: 4em; colore: # 00b8ff;  h3 font-size: 2em; colore: # 6e6e6e; line-height: 2em;  / * - Post Elements - * / .header_image float: left; chiaro: entrambi; margine: 10px 0; sfondo: # 00b8ff; imbottitura: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

Le intestazioni sono in stile, l'immagine dell'intestazione è fantastica. Tutto sembra venire insieme. Aggiorna la pagina e goditi la gloria della tua nuova pagina! L'intestazione sembra un po 'fuori, anche se viene risucchiata fino alla cima della pagina.

Aggiungeremo un po 'di margine superiore e inferiore al nostro contenitore di intestazione per distanziare tutto.

Aggiungi la proprietà margin al nostro elemento header_container.

margine: 20px 0;

Ciò aggiunge 20 pixel di margine alla parte superiore e inferiore di header_container. È molto semplice!

Il tocco finale che aggiungeremo è un po 'di padding e border al nostro footer_container.

 border-top: 1px solid # d0d0d0; imbottitura: 10px 0;

Siamo tutti codificati e tutto sembra fantastico, quindi questa è la fine di questo tutorial. Passa al prossimo tutorial in cui stiamo andando a prendere questo file e fare in modo che WordPress generi contenuti per ogni pagina!

Codice