Share
Oggi continuiamo la serie di tutorial per creare il design ShutterPress convertendolo da un PSD originale in un sito Web funzionale utilizzando HTML e CSS. A questo punto, abbiamo creato la progettazione iniziale del sito e raccolto le risorse necessarie per la codifica. Ora lo codificheremo in modo che funzioni in tutti i principali browser!
Oggi è tutto per convertire il nostro design PSD in un sito HTML completamente funzionante! Ti guideremo passo dopo passo nella marcatura, finché non avremo un sito che sembra perfetto su tutti i principali browser. Ci avvicineremo a questo da un intermedio livello di comprensione, quindi se ci spostiamo troppo rapidamente rispetto a uno dei passaggi di base, sentiti libero di porre domande specifiche nella sezione Commenti qui sotto.
Uno shoutout speciale va a CodeMyConcept, chi ha gentilmente fornito il codice e il tutorial per questo giorno della serie!
Se hai perso i due giorni precedenti di questa serie, dai un'occhiata qui:
Ok, con i nostri obiettivi ora chiaramente definiti, iniziamo!
Innanzitutto, iniziamo creando la struttura di cartelle di base per il nostro progetto, che dobbiamo assolutamente avere per mantenere le risorse ben strutturate e organizzate.
In questo caso, avremo bisogno di una cartella "css" con il nostro file css principale, una cartella "images" e una cartella "js" (Javascript) una volta che l'HTML e il CSS sono completi, così possiamo aggiungere il cursore, lightbox e plugin per fisarmonica. Anche il file index.html nella cartella principale
Quindi creiamo la struttura HTML di base del layout con le sezioni Left e Right. Utilizzeremo un div wrapper per contenere e centrare tutto e i nostri contenitori sinistro e destro all'interno, oltre a un div nella parte superiore e inferiore dell'involucro per aiutarci con gli angoli arrotondati mantenendo il layout flessibile.
ShutterPress MENÙ LEFFT QUICONTENUTO GIUSTO QUI
In realtà preferiamo creare l'HTML prima di scrivere qualsiasi CSS, anche se alcune persone fanno una sezione di HTML e CSS contemporaneamente e poi passano alla sezione successiva. Abbiamo scoperto che fare tutto il codice HTML prima ci aiuta a pensare al CSS in anticipo ea tutto ciò che potrebbe essere necessario, come JavaScript o PHP. Tutto ciò che aggiungo a questo punto è il mio reset CSS.
Quindi iniziamo codificando il menu sul lato sinistro. Qui, avremo bisogno di un tag h1 e di un link per il nostro logo e di un elenco non ordinato per le nostre voci di menu. Abbiamo anche bisogno di annidare un'altra lista non ordinata sul terzo tag li del nostro sottomenu, e fare lo stesso con alcuni articoli fittizi sul secondo tag li solo così possiamo vedere la nostra fisarmonica javascript che funziona più tardi.
Abbiamo anche bisogno di aggiungere alcune classi "aperte" e "chiuse" ai collegamenti e al sottomenu in modo da poter controllare le icone e quale sottomenu è aperto per impostazione predefinita, e la classe attiva per evidenziare la pagina che stiamo visualizzando attualmente.
ShutterPress
Subito dopo vengono le icone sociali e il campo di ricerca nella nostra sezione di sinistra situata in basso. Quindi, creeremo un contenitore div per la sezione inferiore e separeremo [divs] per ciascuna delle due parti all'interno di quel contenitore.
Per le icone Social abbiamo bisogno di un intervallo per il testo e un elenco per le icone, ognuna con una classe per ottenere l'immagine corretta dell'icona e il rispettivo stato di passaggio del mouse.
Per la sezione Ricerca, creeremo un modulo e div con gli input corrispondenti per aiutarli a fluttuare e aggiungere sfondi e icone. Fare questo piuttosto che applicare gli stili direttamente agli input funziona molto meglio per evitare problemi di cross-browsing con altezze di riga e rientri di testo.
Sociale:
- Tumblr
- picasa
- vimeo
- flickr
- cinguettio
- rss
Ecco come appare nel nostro browser insieme al reset CSS
Ora che abbiamo completato il nostro menu a sinistra, possiamo iniziare a codificare la parte di contenuto giusta per la galleria di miniature.
Quindi per prima cosa creiamo una lista non ordinata di immagini all'interno dei link in modo che siano cliccabili per il nostro plugin lightbox, e dopo di ciò creiamo un div per contenere i nostri pulsanti precedente e successivo.
A questo punto, dobbiamo iniziare a tagliare le anteprime e salvarle con il loro nome corrispondente dall'HTML in modo da avere alcune immagini in linea che mostrano.
Ecco come dovrebbe essere visualizzato tutto il nostro codice HTML in Firefox
Ora, per alcuni stili, impostiamo alcune impostazioni generali per i caratteri, il testo, i collegamenti, i colori e l'immagine di sfondo
Accentsconagua
/ * ------------------------------ * / / * RESET GENERALE * / / * -------- -------------------- * / html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citare, codice, del, dfn, em, font, img, ins, kbd, q, s, samp, piccolo, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, etichetta, legenda, tabella, didascalia, tbody, tfoot, thead, tr, th, td, hr, button margin: 0; padding: 0; border: 0; contorno: 0; font-size: 100%; vertical-align: baseline; sfondo: none; ol, ul list-style: none; h1, h2, h3, h4, h5, h6, li altezza riga: 100%; blockquote, q quote: nessuno; q: prima, q: dopo content: "; table border-collapse: collapse; border-spacing: 0; input, textarea, seleziona font: 11px Arial, Helvetica, sans-serif; vertical-align: middle; padding: 0; margin: 0; input: focus, textarea: focus struttura: none; forma, fieldset border-style: none; html, body margin: 0; padding: 0; min-height: 100%; / * - --------------------------------*/ /* IMPOSTAZIONI GENERALI */ /*-------- ----------------------- * / body height: 100%; font: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif ; color: # 000; background: url ('? /images/bg.jpg') ripete #fff; a text-decoration: none; color: # 000; a: hover text-decoration: none; colour : # 0285da; Quindi impostiamo gli stili del wrapper in modo che possiamo costruire la base del nostro layout, che iniziamo a definire definendo la larghezza del nostro wrapper e centrandolo con un margine: 0 auto;
Per i div top e bottom che abbiamo definito in precedenza, abbiamo impostato le immagini di sfondo e le dimensioni richieste per creare i nostri angoli superiori e inferiori arrotondati e per il wrapper impostiamo un'immagine di sfondo ripetuta nell'asse Y che coprirà il nostro contenuto contenente la linea di divisione tra il contenuto di sinistra e di destra.
Per il div wrapper-bottom dobbiamo impostare un clear: both; perché una volta che faccio galleggiare i miei contenitori Right and Left il wrapper sta per collassare, quindi dobbiamo evitarlo cancellando i float.
/ * -------------------------- * / / * WRAPPER * / / * ------------- ----------- * / # wrapper-top background: url ("? /images/content-top.jpg") no-repeat scroll center top #FFFFFF; altezza: 18px; larghezza: 994px; #wrapper width: 994px; overflow: nascosto; margine: 64px auto 0; background: url ("? /images/content-bg.jpg") centro di scroll di ripetizione y #FFFFFF; # wrapper-bottom background: url ("? /images/content-bottom.jpg") no-repeat scroll center top #FFFFFF; altezza: 61px; larghezza: 994px; chiaro: entrambi; 
Ecco il risultato nel nostro browser:
Ora che abbiamo il nostro wrapper pronto possiamo andare avanti con il contenuto: in primo luogo, impostiamo la larghezza di entrambi i contenitori Right e Left in modo che possiamo farli galleggiare nella giusta posizione.
/ * -------------------------- * / / * MENU SINISTRO * / / * ------------ ------------ * / / * Menu principale * / #left larghezza: 235px; fluttuare: a sinistra; / * ------------------------------ * / / * CONTENUTO GIUSTO * / / * ------- --------------------- * / / * Contenuto Galleria miniature * / #right larghezza: 758px; float: giusto;
Ora iniziamo lo styling della navigazione creando un'immagine sprite per il logo, i pulsanti e le icone sul design.
Questo particolare layout non sembra crescere in altezza, ma vogliamo mantenere le cose flessibili nel caso in cui ci sia una necessità futura di aggiungere più elementi alla navigazione.
Quindi impostiamo il container Left con un'altezza minima in modo che il div left-bottom possa essere posizionato in modo assoluto senza dover usare un enorme margine per spingerlo verso il basso, in questo modo se vengono aggiunti nuovi elementi il layout manterrà le sue dimensioni originali.
Abbiamo anche impostato i collegamenti nella navigazione per essere visualizzati come blocchi in modo che l'intera area possa essere cliccabile e non solo il testo e aggiungere gli sfondi aperti e chiusi utilizzando le rispettive clases e regolando la posizione del nostro sprite.
Il sottomenu con una classe 'chiusa' è impostato per la visualizzazione: nessuno; quindi viene mostrato solo quello predefinito.
/ * -------------------------- * / / * MENU SINISTRO * / / * ------------ ------------ * / / * Menu principale * / #left larghezza: 235px; fluttuare: a sinistra; altezza minima: 615 px; posizione: relativa; #left .logo a background: url ("? /images/sprite.png") scroll senza ripetizione 0 0 trasparente; blocco di visualizzazione; altezza: 32px; margine: 8px auto 0; text-trattino: -999999px; larghezza: 190px; #left .menu width: 100%; border-top: 1px solid #eaeaea; margin-top: 30px; #left .menu li a display: block; altezza: 35px; altezza della linea: 35px; padding-left: 22px; border-bottom: 1px solid #eaeaea; #left .menu li a.active color: # 0285DA; border-right: 1px solid #fff; #left .menu li a.closed background: url ("? /images/sprite.png") scroll senza ripetizione 46px -231px trasparente; #left .menu li a.opened background: url ("? /images/sprite.png") scroll senza ripetizione 46px -257px trasparente; #left .menu li .sub-menu li a padding-left: 38px; #left .menu .sub-menu.closed display: none; # left-bottom position: absolute; fondo: 0; larghezza: 100%; Per le icone sociali inferiori configuriamo le immagini usando il rispettivo clasess e impostando le immagini di sfondo usando le postions, questo vale anche per lo status hover.
/ * Social * / # left-bottom .social overflow: hidden; altezza: 34px; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; padding-left: 25px; # left-bottom .social span float: left; altezza della linea: 34px; # left-bottom .social ul float: left; margine: 9px 0 0 10px; # left-bottom .social ul li float: left; altezza: 34px; # left-bottom .social ul li a background: url ("? /images/sprite.png") no-repeat scroll -5px -50px transparent; blocco di visualizzazione; altezza: 16px; larghezza: 16px; margine: 0 5px 0 0; text-indent: -999999px; # left-bottom .social ul li a: hover background-position: -5px -80px; # left-bottom .social ul li a.picasa background-position: -26px -50px; # left-bottom .social ul li a.picasa: hover background-position: -26px -80px; # left-bottom .social ul li a.vimeo background-position: -47px -50px; # left-bottom .social ul li a.vimeo: hover background-position: -47px -80px; E per la parte di ricerca, stiamo fondamentalmente fluttuando i div del contenitore di input e impostando gli stili su di essi piuttosto che sull'input.
/ * Cerca * / # left-bottom .search overflow: hidden; margin-top: 12px; # left-bottom .search .left background: url ("? /images/sprite.png") no-repeat scroll -5px -203px transparent; float: sinistra; altezza: 27px; margin-left: 20px; imbottitura: 6px 0 0 10px; larghezza: 158px; # left-bottom .search .left input border: none; sfondo: trasparente; larghezza: 100%; # left-bottom .search .right background: url ("? /images/sprite.png") no-repeat scroll -173px -203px transparent; float: sinistra; altezza: 27px; # left-bottom .search .right input background: none repeat scroll 0 0 transparent; confine: medio nessuno; cursor: pointer; altezza: 27px; larghezza: 27px; Quindi ecco quello che abbiamo adesso in Firefox
Qui stiamo solo spostando gli elementi della lista per ottenere una visualizzazione a griglia, aggiungiamo padding, colore di sfondo e bordi per ottenere una cornice per ogni timida e aggiungere anche i margini per la separazione.
Finalmente. abbiamo i nostri pulsanti con un contenitore div che è centrato e entrambi i link sono flottati.
/ * ------------------------------ * / / * CONTENUTO GIUSTO * / / * -------- -------------------- * / / * Contenuto Galleria miniature * / #right larghezza: 758px; float: giusto; #right .thumbnails overflow: hidden; padding: 10px 0 0 32px; #right .thumbnails li float: left; margine: 0 21 px 18 px 0; #right .thumbnails li a border: 1px solid #eaeaea; imbottitura: 2px; sfondo: # f2f2f2; blocco di visualizzazione; #right .navigation margin: -10px auto 0; overflow: nascosto; larghezza: 50 px; #right .navigation a background: url ("? /images/sprite.png") scroll senza ripetizione 0 0 trasparente; blocco di visualizzazione; float: sinistra; altezza: 21px; text-trattino: -999999px; larghezza: 21px; #right .navigation .prev background-position: -159px -75px; margine: 0 8px 0 0; #right .navigation .next background-position: -186px -75px; Ecco la nostra prima pagina finita in firefox!
Passando alla nostra sottopagina, ciò che facciamo è duplicare il nostro index.html e nominarlo qualcosa come subpage.html o inner.html, quindi eliminiamo tutto il contenuto nel nostro contenitore #right e iniziamo a costruire il codice HTML necessario per la nostra galleria di slider e i 3 moduli sotto.
Abbiamo bisogno di un div per contenere l'intero markup per il mio slideshow, un elenco di immagini che saranno le diapositive e utilizzeremo anche 3 diverse versioni delle immagini in modo da poter vedere qualche azione in seguito con il plugin jQuery Cycle.
Stiamo anche impostando un div vuoto che sarà posizionato in cima alle immagini per funzionare come un frame nel caso in cui questo layout debba essere implementato in un CMS per ottenere del contenuto dinamico. Se ciò accade, possiamo semplicemente aggiungere qualsiasi immagine senza dover photoshop gli angoli arrotondati e le ombre prima della mano.
Infine, per la presentazione, è necessario creare un div di navigazione con un paio di collegamenti per la navigazione della galleria "precedente" e "successiva".
Il nostro ultimo blocco di contenuti ha i nostri 3 moduli impostati nel proprio contenitore, ogni modulo essendo un div da solo che fluttuerà in modo che siano uno accanto all'altro. Dentro ho e tag h2 per il titolo e un paragrafo per il testo.
Modulo uno
Sed korem sit feugiat erat at ante vestibulum auctor. Cras rhoncus diam et sem gravida sagittis. Ut tempor sapien in neque ultrices varius. Testo di Lorem ipsum.
Modulo due
Pellentesque lacinia, augue vel venenatis commodo, ante neque tempor augue, sempre rhoncus diam justo in ante. Aliquam in ultrices eleifend libero, in sit amen consectetur velit quis.
Modulo tre
Suspendisse porta sem vel enim molestie suscipit elementum leo porta. Cras lorem lectus, viverra sit amet sempre quis, vehicula quis velit.
In questo particolare progetto, ottenere la cornice per le diapositive era un po 'complicato, quindi ecco cosa abbiamo fatto:
Abbiamo preso il livello chiamato "Shape 90" e abbiamo lasciato il riempimento allo 0%. Quindi, facendo clic con il pulsante destro del mouse sul livello denominato "1720729_high", selezionate la maschera di ritaglio del rilascio e quindi nascondete il livello.
Torna al livello "Forma 90" e imposta l'opacità al 50%. Right ha fatto clic sul livello e ne ha fatto un duplicato, ha selezionato entrambi i layer "Shape 90" e li ha uniti.
Ora puoi salvare il frame come un file .png trasparente separato e aggiungere semplicemente dello sfondo bianco negli angoli in modo che copra le immagini sul retro.
Impostiamo le dimensioni dei moduli e li abbiamo allineati per renderli in linea; dopo di ciò impostiamo gli stili insieme allo sprite come immagine di sfondo per le icone.
Impostiamo gli elementi della lista dal cursore per avere una posizione: assoluta; in relazione con l'ul in modo che possano collassare e apparire come un'unica immagine in modo da poter ottenere il vero aspetto del layout, aggiungeremo la funzionalità dopo che l'intera cosa è pronta.
Anche i pulsanti precedente e successivo sono posizionati in modo assoluto per poterli centrare verticalmente.
/ * Slideshow Galleria Contenuto * / # portacontainer posizione: relativa; larghezza: 719 px; margine: 20px auto 0; altezza: 442 px; # gallery-holder .slideshow-frame background: url ("? /images/slideshow-frame.png") scroll senza ripetizione 0 0 trasparente; altezza: 442px; position: absolute; top: 0; a sinistra: 0; larghezza: 719px; z-index: 10; # gallery-holder .slideshow li height: 442px; position: absolute; top: 0; width: 719px # gallery-holder .navigation a height: 92px; a sinistra: 0; margin-top: -44px; position: absolute; superiore: 50%; larghezza: 47px; z-index: 15; # gallery-holder .navigation a.prev background-position: -6px -103px; margin-top: -44px; # gallery-holder .navigation a.next background-position: -65px -103px; a sinistra: auto; a destra: 0; # modules-holder overflow: hidden; margin-top: 24px; margin-left: 20px; # modules-holder .module float: left; larghezza: 204 px; margin-right: 40px; # modules-holder .module h2 font-size: 18px; font-weight: normale; margin-bottom: 5px; padding-left: 25px; # modules-holder .module h2.module-one background: url ("? /images/sprite.png") no-repeat scroll -128px -170px transparent; # modules-holder .module h2.module-two background: url ("? /images/sprite.png") no-repeat scroll -128px -140px transparent; # modules-holder .module h2.module-three background: url ("? /images/sprite.png") scroll no-repeat -128px -110px transparent; # modules-holder .module p color: # 6a6a6a; altezza della linea: 15px; Dopo tutto questo, possiamo vedere che i titoli dei moduli hanno un font Museo su di essi che non è un font sicuro per il web, quindi avremo bisogno di impostarlo con @ font-face. Abbiamo quindi eseguito il font tramite Font Squirrel (http://www.fontsquirrel.com/fontface/generator) e collocato i caratteri nella loro cartella di caratteri nella radice del nostro progetto e impostato il CSS nelle nostre impostazioni generali utilizzando il diritto percorsi per i caratteri.
/*---------------------------------*/ /* IMPOSTAZIONI GENERALI */ /*----- -------------------------- * / body height: 100%; font: 12px / 12px "Lucida Sans", "Lucida Grande", sans-serif; colore: # 000; background: url ('? /images/bg.jpg') ripete #fff; a text-decoration: none; color: # 000; a: hover text-decoration: none; color: # 0285da; @ font-face font-family: 'Museo700'; src: url ('? /fonts/museo700-regular-webfont.eot'); src: url ('? /fonts/museo700-regular-webfont.eot?#iefix') formato ('embedded-opentype'), url ('? /fonts/museo700-regular-webfont.woff') formato ('woff '), in formato url ('? /fonts/museo700-regular-webfont.ttf ') (' truetype '), url ('? /fonts/museo700-regular-webfont.svg#Museo700 ') (' svg ') ; font-weight: normal; stile font: normale; Quindi tutto ciò che dobbiamo fare ora è impostare la famiglia di font sui nostri tag h2, e ora la nostra seconda pagina è completa.
# module-holder .module h2 font-family: 'Museo700'; font-size: 18px; font-weight: normale; margin-bottom: 5px; padding-left: 25px;
Ora per aggiungere alcune funzionalità e animazioni al nostro progetto, utilizzeremo due plugin: jQuery Cycle per la nostra presentazione (http://jquery.malsup.com/cycle/) e prettyPhoto per la nostra galleria lightbox (http: // www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/) e quindi creeremo una funzione personalizzata per la nostra fisarmonica menu.
Assicurati di scaricare il plugin prettyPhoto e copia le risorse necessarie nelle rispettive cartelle (javascript nella cartella "js", fogli di stile nella cartella "css", ecc.), Il plugin ciclo può essere collegato da Github e jQuery può essere collegato dalle API di Google.
Creeremo anche un file main.js nella nostra cartella JS in cui possiamo inserire la nostra funzione personalizzata e la configurazione del plugin.
Quindi, facciamo riferimento al nostro foglio di stile nell'intestazione dei file html
ShutterPress
Facciamo anche riferimento ai nostri file javascript nella parte inferiore del nostro documento poco prima del tag html di chiusura.