Passaggio 1: ritagliare le immagini

Osservando il design di Photoshop, è chiaro che ci sono un sacco di immagini di cui ho bisogno. Se questo fosse un disegno più complesso, userei lo strumento Slice di Photoshop, ma è piuttosto semplice, quindi mi limiterò a ritagliare il file e creare un gruppo di immagini: una per il tavolo, una per tutti i titoli, una per il bolla "seguimi", una per l'immagine di Nettuts e l'altra per la foto della mia fronte gigantesca! Ecco le immagini che ho fatto:

Nota Ho mostrato solo un titolo, ma ovviamente ne ho fatti molti.

Passaggio 2: pianificazione dell'HTML

Quindi pianifichiamo il nostro layout HTML. Molto volutamente questo sito sarà estremamente facile da costruire. È semplicemente una sequenza di blocchi. In precedenza ho scritto su come noi Posizionamento assoluto per creare un layout, questa volta useremo il super semplice Posizionamento relativo.

Come ricorderai quando metti gli elementi in una pagina, hanno un posto naturale in cui andare, relativamente agli elementi precedenti. Perché non stiamo usando colonne o davvero niente di particolare in questo design sarà perfetto per l'utilizzo di questo posizionamento regolare.

Come regola generale, ogni volta che vuoi semplificarti la vita in HTML, è meglio fare le cose in blocchi disposti orizzontalmente. Questo è il modo più semplice per lavorare con i CSS e non richiede molti problemi per la compatibilità del browser. Non appena inizi a inserire layout a colonne, le cose diventano un po 'più complicate. Quindi lo salveremo per un altro tutorial, su un altro progetto.

In ogni caso, il layout che useremo è qualcosa del genere:

Sezione principale Intestazione Intestazione Blocco del contenuto Sezione Intestazione Div Blocco del contenuto Sezione Intestazione Div Blocco del contenuto ... e così via ... 

La cosa migliore di questo piano è che in seguito se improvvisamente andremo "hey vorrei avere il mio blocco in più per le immagini preferite", è come se niente fosse! Inseriscilo, usa le stesse classi CSS e tutto il resto. Questo è davvero il layout più semplice in giro, e con un bel design può sembrare molto bello comunque!

Passaggio 3 - Disposizione del codice HTML iniziale

OK Crea un file index.html e poi ecco la mia prima pugnalata all'HTML, non è perfetta e manca il bit di Twitter, ma è un buon punto di partenza e possiamo apportare alcune modifiche in seguito mentre procediamo:

Cose da notare:

• Mi sono collegato a un file chiamato "style.css". Qui è dove posizioneremo i nostri stili più tardi, quindi vai avanti e crea un file con quel nome.
• Il tutto è dentro a
  . L'ho fatto in parte per abitudine ad essere onesto, ma userò il

  per posizionare la mia immagine di sfondo. e per assicurarmi di non allontanarmi dalla larghezza di 1000 px che ho bisogno di stare dentro per le persone su schermi 1024 x 768 px.
• L'intestazione "logo" è all'interno di a
  . Quindi useremo il parte per rendere il testo invisibile e dargli un'immagine di sfondo in modo che assomigli al design. Questo ha benefici per il SEO, ed è stato un suggerimento dai commenti di un precedente tutorial di NETTUTS (grazie commentatore di cui ho dimenticato il nome, ma di quale suggerimento ho preso l'uso!)
• Ogni sezione è un titolo e poi a
  . Li ho riempiti per lo più di contenuti, ad eccezione della scatola di Twitter di cui ci occuperemo nel prossimo passaggio.

Passaggio 4: aggiungi un po 'di CSS

Ora aggiungeremo un po 'di CSS per rendere la pagina un po' più simile a dove andrà a finire. Crea il tuo file 'style.css' e inserisci queste due definizioni in:

body background-color: # 191e25; margin: 0; padding: 0; color: # 5f6874; famiglia di font: "Lucida Grande", "Lucida Sans Unicode", Arial, Sans-Serif; font-size: 13px; line-height: 21px;  #container width: 900px; padding: 50px; padding-top: 30px; background-image: url (immagini / computer.jpg); background-repeat: no-repeat; posizione di sfondo: in alto a destra; 

Un paio di cose da notare:

• Ho impostato una famiglia di font che utilizza un set di caratteri un po 'insolito. Lucida Grande è sulla maggior parte, se non tutti i Mac, e Lucida Sans Unicode è sulla maggior parte dei PC, quindi la maggior parte delle persone dovrebbe vedere un bel carattere tipografico Lucida. Altrimenti vedranno ancora Arial o alcuni sans-serif predefiniti. In entrambi i casi, Lucida sembra interessante, ed è quello che vedo :-)
• Ho usato il mio
• Il padding 50px che abbiamo impostato nel contenitore eseguirà in modo efficace la maggior parte del nostro posizionamento per noi sulla pagina.

Ed ecco come sta ora la nostra pagina:

Passaggio 5: ora prendiamo il Twitter

Ora aggiungiamo il contenuto da Twitter. Questo è un ottimo modo per rendere la pagina davvero dinamica perché aggiorno il mio feed Twitter quasi tutti i giorni. Sarà anche un modo per convincere la gente ad aggiungermi alle loro reti Twitter, e in futuro, quando lancio nuovi siti, posso indirizzare il traffico verso nuovi luoghi. Quindi in realtà fa tutto parte del mio piano non particolarmente deviato.

Quindi Twitter ha reso il loro feed davvero facile per noi, basta fare quanto segue:

1. Accedi al tuo account Twitter
2. Fai clic sulla casella gialla nella barra a destra che dice "Metti i tuoi aggiornamenti sul tuo sito!"
3. Quando richiesto per MySpace, Blogger, ecc., Scegliere "Altro"
4. Seleziona il HTML / JS opzione in modo da poterlo modificare in un secondo momento con CSS
5. Quindi imposta il Numero di aggiornamenti (Ho impostato il mio su 3) e copia + incolla il codice.

Ecco il processo in immagini!

Ed ecco il codice che Twitter ci offre:

Nota ho cancellato il

un po 'che Twitter inserisce, perché non abbiamo bisogno di un titolo extra, ne abbiamo già uno. Quindi vale la pena prendere il consiglio di Twitter e spostare le due linee Javascript nella parte inferiore della pagina poco prima . In questo modo si carica in ultimo. Poiché Twitter è noto per i suoi tempi di inattività, ciò impedirà loro di uccidere accidentalmente il nostro sito!

Quindi, esaminando l'HTML che ci hanno fornito, possiamo supporre che il Javascript probabilmente lo colmerà

con i nostri tweet all'interno del
• sarà lì. E questo è esattamente ciò che fa ...

  ---

  Passaggio 6: aggiungi Google Analytics

  Ora a questo punto aggiungerò anche alcuni Javascript per collegare il mio sito con Google Analytics. Penso che molti sviluppatori web abbiano sentito parlare di Analytics, ma se per caso hai vissuto sotto una roccia, consiglio vivamente di provarlo. È gratuito ed è un modo potente per monitorare il tuo traffico. Quando hai ottenuto un account, sei semplice Crea un nuovo profilo web, inserisci un nome di dominio e riceverai in cambio del codice Javascript da incollare nei tuoi documenti HTML. Vai tranquillo!

  

  ---

  Passaggio 7: più CSS

  Successivamente aggiungeremo un paio di altri stili che ci porteranno ancora più vicini al nostro prodotto finale. Loro sono:

  a img border: 0 a color: # cc5630; text-decoration: none;  a: hover color: #ffffff;  .content_box width: 590px; margin-top: 15px; margin-bottom: 30px; 

  Qui stiamo rimuovendo i bordi delle immagini collegate (ad esempio il link a NETTUTS e la foto di me che si collegherà a una versione più grande), inoltre stiamo impostando il colore dei nostri collegamenti sulla pagina in generale. Infine, con lo stile content_box, impostiamo una larghezza per i nostri BLOB di contenuto e utilizziamo i margini superiore e inferiore per separarli nella pagina. Ecco come appare la nostra pagina ora:

  

  La prossima cosa da fare è ottenere un po 'di avvolgimento del testo intorno alle nostre due immagini. La prima cosa da fare è aggiungere una classe alle immagini che vogliamo avvolgere (la foto e l'immagine di Nettuts). Non pensavo di farlo prima, ma posso vedere che ho bisogno di adesso. Quindi cambiamo le immagini per avere:

  Quindi aggiungiamo uno stile veloce per rendere il float a sinistra con un po 'di margine, come questo:

  img.photo float: left; margin-right: 20px; 

  Sfortunatamente, mentre è bello e semplice, questa soluzione non rende il voto perché il mio blocco di testo è troppo lungo, quindi è avvolgente ... booo! Non importa, riparato facilmente. Inseriremo il testo nel proprio blocco e lo renderemo anche mobile.

  

  Quindi regoleremo questo content_box in modo che il codice HTML sia ora:

   
    
   
  Dopo aver lavorato come web designer, impiegato e freelance, nel 2006 ho fondato una startup con alcuni amici. Da allora la nostra azienda, Eden, è cresciuta e ho avuto la fortuna di lavorare su molti progetti molto interessanti e interessanti, tutto, da FlashDen al Blog Action Day. 
   
  Grazie alla natura brillante del web, attualmente vivo e lavoro a Hong Kong e in giro per il mondo. Puoi trovarmi online su Twitter dove postare pensieri casuali, oppure puoi inviarmi una email dal modulo in fondo a questa pagina. Grazie per esserti fermato!
   
   
   

  Quindi puoi vedere che ho avvolto il testo in a

  e poi aggiunto a
  in basso. Questo extra
  sarà usato per cancellare i float, altrimenti gli strati fluttuanti finirebbero sopra la parte superiore del contenuto più in basso nella pagina. Quindi ecco il codice CSS aggiuntivo per farlo funzionare:

  .about_text float: left; larghezza: 380px; . clear clear: both;

  Dobbiamo dare una larghezza al nostro blocco about_text in modo che fluttui accanto alla foto. Ora questo risolve il nostro problema. Tuttavia, se guardi l'immagine mostrata di seguito, sembra che ci sia uno strano divario che appare tra la parte superiore del nostro blocco di testo e l'immagine.

  

  Lacune strane sono le peggio incontrare, perché può essere davvero difficile capire cosa li sta causando. Nel nostro caso qui però mi capita di ricordare che il

  il tag ha un margine superiore predefinito che, se ci liberiamo, probabilmente risolverà il nostro problema. Ecco il codice per risolvere questo problema:

   p margin: 0px; margin-bottom: 20px; 

  Così ora ogni paragrafo non avrà margine tranne 20px sotto di esso (distanziamo l'elemento successivo del paragrafo).

  ---

  Passaggio 8 - Sostituisci la nostra intestazione

  Come ho detto prima useremo un po 'di CSS per sostituire il nostro

  tag in alto con l'immagine molto più bella in modo da ottenere benefici SEO e bel titolo. Se fossi coscienzioso, farei questa tecnica anche con tutti quei sottotitoli ... ma non lo sono!

  Quindi tutto ciò che faremo è usare il tag che abbiamo abilmente posizionato in precedenza per impostare il display del testo su none - rendendolo nascosto. Quindi daremo il

  un'altezza in modo che l'immagine di sfondo non venga tagliata, e alla fine imposterà l'immagine. Ecco il codice CSS di cui abbiamo bisogno per fare in modo che questo accada:

  h1 background-image: url (images / title_main.jpg); background-repeat: no-repeat; altezza: 60px; margin-bottom: 50px;  h1 span display: none; 

  

  ---

  Passaggio 9: crea l'area di Twitter

  Ora modificheremo la nostra casella Twitter. Ma prima di farlo, mi sono reso conto che avevo completamente dimenticato di inserire la mia immagine "Seguimi su Twitter" nella pagina (sciocco Collis!) Non importa, lo aggiungerò ora, ecco il codice HTML risultante per l'area che abbiamo stanno lavorando su:

  Si noti che l'immagine appare dentro il twitter_div. Useremo uno dei grandi vantaggi dello stile CSS per posizionarlo in modo che si trovi fuori dalla scatola. Ora se questo fosse i vecchi tempi e stavo facendo questo layout con a

  , Vorrei finire usando SOO molto più codice qui, impostando i bordi e molte immagini di sfondo e roba del genere. Grazie a Dio per i CSS. Ecco il nostro codice CSS:

  #twitter_div border: 1px solid # 222830; background-color: # 101318; position: relative; min-height: 40px; padding: 40px;  #twitter_div img position: absolute; bottom: -22px; destra: -14px; 

  Questo codice trasforma la nostra casella twitter_div in una bella scatola scura e quindi posiziona il file dentro. Si noti che ho dato l'esterno twitter_div a parente posizione. Quindi all'interno ho impostato l'immagine su a assoluto posizione. Il posizionamento assoluto si posiziona sempre in base all'ultimo contenitore con una posizione relativa. Se non è contenuto in nessun altro elemento HTML, o nessuno di questi elementi ha una posizione relativa, allora torna automaticamente all'intera finestra del browser.

  Poiché il nostro twitter_div è relativamente posizionato, tuttavia, la posizione assoluta sarà in relazione a ciò

  . Quindi, in altre parole top: 0px, a sinistra: 0px, sarebbe la parte in alto a sinistra del contenitore twitter_div. Allo stesso modo, bottom: -22px e right: -14px, è misurato dal basso a destra del twitter_div. In questo caso, perché abbiamo aggiunto numeri negativi, in realtà lo stiamo posizionando al di fuori il div.

  Questo è il modo più semplice per posizionare le immagini che si intendono sovrapporre a una scatola, un bordo, una linea o qualsiasi altra cosa.

  Il posizionamento può essere un po 'complicato per trovare il giusto numero di pixel, ma puoi risolverlo velocemente con una tecnica sofisticata che chiamo "tentativi ed errori" :-)

  

  ---

  Step 10 - Modella il feed di Twitter

  

  Quindi sembra abbastanza buono ora, ma non proprio quello che avevamo in mente. In effetti, quello che volevo inizialmente era la data / ora sul lato sinistro, dove si trovano i punti elenco. E naturalmente tutto ha bisogno di una migliore spaziatura.

  Ora, poiché il contenuto proviene da alcuni Javascript su cui non abbiamo alcun controllo, ciò che dobbiamo fare è capire come lavorare con ciò che abbiamo. Ecco cosa sappiamo:

  • Ogni tweet è in un elemento.
  • Il bit data / ora è un collegamento, quindi deve essere racchiuso in un elemento.
  • E sappiamo che il link è il scorso cosa in ogni tweet.
  • E sappiamo che i collegamenti all'interno dei tweet non sono collegati. (Lo so perché ho provato a spingere attraverso un link reale e non sembrava collegato). Quindi, in altre parole, sappiamo che il bit di data / ora è il SOLO elemento avvolto in un .

  Quindi usando queste informazioni possiamo applicare uno stile al

  e elementi per formattarlo come vogliamo. Ecco come lo facciamo:

  #twitter_div ul margin: 0px; padding: 0px;  #twitter_div ul li list-style: none; margin-bottom: 5px; margin-left: 90px; font-size: 12px;  #twitter_div ul li a width: 70px; blocco di visualizzazione; position: relative; top: -43px; a sinistra: -90px; line-height: 19px; text-transform: capitalizzare; 

  Alcune cose da notare sulle prime due definizioni:

  1. La prima definizione si limita a eliminare i margini predefiniti e il riempimento su
     elemento
     • Successivamente ci liberiamo dei punti elenco (stile elenco: nessuno). Quindi separiamo il
     • elementi con un margine inferiore
     • Poi diciamo anche al
     • elementi per avere un enorme margine sinistro di 90 px. Questo renderà lo spazio sufficiente per spostare i nostri collegamenti data / ora nel gap.

  L'ultima definizione si applica a qualsiasi elementi nella lista, motivo per cui era importante verificare che questi collegamenti data / ora fossero gli unici collegamenti. Per prima cosa diciamo al link di visualizzare: block. Impostando il collegamento come un elemento a livello di blocco, impediamo che si sposti in linea con il resto del testo e lo spostiamo di default per sedersi sotto il testo come blocco.

  Ora perché per impostazione predefinita un elemento di blocco come il nostro link è ora, si allineano a sinistra, possiamo dire con sicurezza dove verrà posizionato il collegamento. Cioè che sarà appena sotto il nostro testo e allineato a sinistra. Se vuoi vedere cosa intendo, cancella tutto dopo la visualizzazione: blocca e guarda il risultato.

  Con questa conoscenza, possiamo usare il posizionamento relativo per spostarlo parente a dove è ora. Quindi diciamo che il link dovrebbe essere 43px più alto rispetto a dove è attualmente, e 90px a sinistra. E questo quindi pone il collegamento proprio dove lo volevamo! Provalo e guarda!

  

  ---

  Completa HTML e CSS

  OK! Abbiamo finito con il nostro HTML e CSS! Puoi scaricare i file - immagini, CSS, HTML - utilizzando il link sottostante:

  Scarica immagini / HTML / CSS

  ---

  Passaggio 11 - Test per le schermate

  Ora abbiamo finito con il nostro HTML, è tempo di fare qualche test. La prima cosa da testare è come apparirà su uno schermo 1024x768. Io uso un plugin per Firefox per farlo chiamato Firesizer, che è così comodo. Appare nella barra di stato, come mostrato e si seleziona la schermata e Bam!

  Comunque tutto è andato a posto OK quindi nessun cambiamento qui!

  

  ---

  Passaggio 12: test per IE6

  Quindi testiamo IE6. Perché sono su un Mac, uso una soluzione IE6 davvero scadente usando qualcosa chiamato Darwine. Su un PC è possibile ottenere un'installazione standalone di IE6 che non interferisca con l'installazione di IE7.

  Se sei uno sviluppatore web e utilizzi IE6 per impostazione predefinita, devi fermarti immediatamente! hehe. Beh, immagino che ci saranno casi in cui sarebbe una buona idea - ad es. se stavi sviluppando per un enorme pubblico IE6. Comunque, sarebbe piuttosto strano. Consiglio vivamente Firefox me stesso, ma Opera, Safari, IE8 Beta, anche IE7 sarebbe buono. Per non parlare di tutti i browser più oscuri ...

  (Nota c'è anche una soluzione IE7 via Darwine, ma per quanto posso dire che è demente ... come se fosse davvero pazzo e inutilizzabile)

  

  ---

  Passaggio 13: test per IE7

  Ora testiamo per IE7 perché sebbene sia molto meglio di IE6, può ancora fare i pazzi di tanto in tanto. Per questo devo eseguire la mia copia appena installata di Parallels.

  I test sui browser dei ragazzi sono laboriosi!

  Comunque non è altrettanto laborioso come se mi capitasse di incontrare dei problemi! Fortunatamente tutto è andato bene.

  

  ---

  Passaggio 14: convalida il nostro markup

  E infine perché alcuni commentatori qui sono NETTUTS ha suggerito che dovrei davvero convalidare il mio markup, andremo a spingerlo attraverso il validatore del W3C

  Ora lo so sembra come se avessi molti problemi lì, ma in realtà provengono tutti da Twitter Javascript - tsk, tsk, tsk, per vergogna! hehe. Quindi va bene, sono fuori dai guai!

  

  ---

  Passaggio 15: l'HTML è finito! Ora per caricare ...

  E ora è il momento di caricare. Esco il mio fidato FileZilla e collego, e su va il sito!

  Fatto ciò ... possiamo rivolgerci a CushyCMS!

  

  ---

  Step 16 - CushyCMS - Introduzione

  Ora lo scopo di questo tutorial era proprio quello di mostrarti come usare CushyCMS. Almeno è stato fino a quando ho capito che questo è un po 'stupidamente facile da usare e non merita davvero un tutorial (ho imparato ad usarlo da quel video che hanno sul loro sito!)

  In ogni caso, il servizio è completamente gratuito e funziona tramite FTP sul tuo server e modificando i file che gli dici di modificare. È davvero semplice da usare, come vedrai, non molto descritto, ma fa ciò che fa bene. Dalla loro homepage sembra che ci saranno altre cose che arriveranno in futuro per le quali faranno pagare.

  Consiglio di provarlo perché potrebbe essere una buona soluzione per molti siti Web di piccoli clienti o, naturalmente, per un sito come il mio! Quindi, comunque, andiamo a CushyCMS e ci iscriviamo.

  

  ---

  Passaggio 17: installazione di CushyCMS per il nuovo sito

  Una volta effettuato l'accesso, è necessaria una procedura in due passaggi per ottenere l'installazione:

  1. La prima cosa da fare è Aggiungi un sito. Questo in pratica implica solo fornire loro i dettagli FTP
  2. Allora noi Assegna la pagina (s), per noi ce n'è solo uno, quindi è una scelta facile

  

  ---

  Passaggio 18: aggiunta della classe CushyCMS

  Ora che CushyCMS è in grado di sapere quali elementi devono essere modificabili, è necessario specificarli nell'HTML della pagina utilizzando una definizione di classe speciale. Quindi dobbiamo tornare al nostro codice HTML e aggiungerne alcuni class = "cushycms" bit.

  Ora i bit che vogliamo essere modificabili sono quelli

  le zone. Ma hanno già una definizione di classe =. Ma va bene! Puoi assegnare più classi a un singolo elemento separandole con uno spazio come questo:

  . Quindi il codice HTML risultante è:

         
   
  Ciao sono Collis, imprenditore, blogger e designer.
    
    
   
  Dopo aver lavorato come web designer, impiegato e freelance, nel 2006 ho fondato una startup con alcuni amici. Da allora la nostra azienda, Eden, è cresciuta e ho avuto la fortuna di lavorare su molti progetti molto interessanti e interessanti, tutto, da FlashDen al Blog Action Day. 
   
  Grazie alla natura brillante del web, attualmente vivo e lavoro a Hong Kong e in giro per il mondo. Puoi trovarmi online su Twitter dove postare pensieri casuali, oppure puoi inviarmi una email dal modulo in fondo a questa pagina. Grazie per esserti fermato!
   
   
   
    
   
   
    
   
    
   
    Nettuts 
  Ad aprile, Eden ha lanciato un sito gemello su PSDTUTS su cui ho lavorato. Il sito ospita tutorial di sviluppo e progettazione web.
   
   
    
   
  Alcuni link a siti a cui ho dato una mano:
   
   
  FlashDen - Il nostro principale progetto Eden
   
  Come diventare un Freelancer Rockstar - Un libro che ho scritto insieme a mia moglie adorabile
   
  FreelanceSwitch - Il blog di grande successo sul freelance
   
  PSDTUTS - Il miglior blog di photoshop in circolazione!
   
  Blog Action Day: un evento annuale senza scopo di lucro
   
   
    
   
  Sono il primo ad ammettere che non sono molto bravo a rispondere a tutte le mie e-mail, ma faccio del mio meglio e se ne hai bisogno, puoi mandarmi un'email.
   
   
        

  Ora torniamo a CushyCMS e la nostra pagina è completamente modificabile!

  Una cosa, devo

  Codice

  Come costruire un layout del sito web di notizie con Flexbox

  Come costruire una camera oscura a basso budget

  

  ×