Le basi di un sito Web basato su Div: 7 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:06

Questo tutorial ti mostrerà le basi su come costruire un sito web con div. Perché le tabelle utilizzate per il layout sono malvagie!:pPer comprendere questo istruibile, avrai bisogno di conoscere HTML e CSS di base. Se non capisci qualcosa, non esitare a chiedere. Anche la mia home page personale utilizza questo tipo di struttura div.

Passaggio 1: creare i file di base

Per prima cosa crea il tuo file html. Aggiungeremo le basi ad esso. Il file css sarà vuoto per il file now.html ora contiene: test Salva il tuo file html come qualcosa.html. Puoi scegliere tu stesso il nome. Il tuo file css deve essere salvato come.css. Assicurati di dargli lo stesso nome menzionato nel file html. In questo caso "style.css". Ora abbiamo una semplice pagina html vuota quando viene visualizzata in anteprima nel nostro browser.

Passaggio 2: modifica il tag del corpo per i colori di base, i caratteri, …

Lasceremo il file html così com'è e modificheremo solo il file css. Aggiungi il seguente codice al tuo file css:body { background: #444444; font-family: verdana, arial, sans-serif; colore: #444444; dimensione del carattere: 12px; margin: 0px;}Con questo bit di codice definiremo tutte le proprietà del tag body. Poiché tutto il contenuto è nel tag body, queste impostazioni influenzeranno l'intera pagina. Il colore dello sfondo e del carattere (colore) è stato impostato su un grigio scuro. La famiglia di caratteri (font-family) è stata impostata su verdana. Se il computer utilizzato per visualizzare il nostro sito web non ha il carattere "verdana", visualizzerà il nostro sito con il carattere "arial". Puoi aggiungere più caratteri all'elenco. Il "sans-serif" è il tipo generico che verrà utilizzato quando non è disponibile alcun carattere fornito. La dimensione del carattere (dimensione del carattere) è stata impostata su 12 pixel. Questo è un valore assoluto. Se vuoi modificare altre dimensioni dei caratteri (come le intestazioni, i paragrafi, le voci di menu, …) puoi usare l'unità relativa "em" al posto di "px". In questo modo, se desideri ridimensionare il tuo sito web, dovrai solo modificare la dimensione del carattere del corpo. Il margine è stato impostato su 0 px per tutti e quattro i lati del tag del corpo. Questo viene fatto per assicurarsi che il sito si attacchi alla parte superiore della finestra.

Passaggio 3: aggiunta di un contenitore con intestazione e contenuto

Ora aggiungeremo il contenitore. Questo è semplicemente un div centrato che conterrà il nostro intero sito Web. In questo contenitore, aggiungeremo altri due div; un div di contenuto e un div di intestazione. Il nostro file html ora avrà il seguente aspetto: test Content Header Aggiungeremo il seguente codice al nostro file css: div#container { width: 800px; margine: 0px automatico; sfondo: #FFFFFF; padding: 0px;}div#content { width: 800px; imbottitura: 100px; sfondo: giallo;}div#header {larghezza: 800px; altezza: 100px; sfondo: blu; posizione: assoluta; top: 0px;}.clearfix:after {content:"."; blocco di visualizzazione; altezza: 0; chiaro: entrambi; visibilità:hidden;}.clearfix {display:inline-block;}/* Nascondi da IE Mac \*/.clearfix {display:block;}div#container significa che abbiamo un tag div con id "container". Aggiungeremo alcuni colori e un "margin: 0px auto;" per assicurarci che il nostro contenitore sia centrato nella pagina. Dobbiamo dare al contenuto un padding-top e all'intestazione un valore assoluto con un "top: 0px" per assicurarci che l'intestazione sia posizionata sopra l'altro contenuto. Non importa i brutti colori. È solo per rendere più facile la lettura dei colori e la visualizzazione dei diversi div. Avremo bisogno di questo strano codice clearfix per assicurarci che i div di navigazione e di contenuto (aggiunti nel passaggio successivo) non escano dal div circostante.

Passaggio 4: crea due div nel div del contenuto per la navigazione e il contenuto effettivo

Ora aggiungeremo altri due div nel div del contenuto. Uno per la navigazione e uno per il contenuto effettivo. Tra il tag del contenuto; aggiungerai il nuovo codice:

Navigazione Contenuto principale Aggiungeremo del codice css per visualizzare la navigazione e il contenuto principale divs;div#nav { width: 200px; galleggiante: sinistro; sfondo: arancione;}div#maincontent { width: 600px; galleggiante: a destra; background: pink;}Nota il fatto che questi due div sono entrambi floating. Se non avessimo inserito il codice extra clearfix nel passaggio precedente, i div fluttuano al di fuori del div circostante. Con il metodo clearfix, faremo in modo che ciò non accada.

Passaggio 5: aggiungi alcuni div aggiuntivi per la struttura nella navigazione

Ora aggiungeremo alcuni div extra a entrambi i div "nav" per creare una sorta di struttura nella nostra pagina web. Cambia il seguente bit di codice:

• pippo
• Sbarra

Aggiungeremo ora un pezzo di codice per definire come deve essere visualizzato il div "navblock". Nota che il navblock ha una classe, non un id. La ragione di ciò è semplice; i div con un id vengono visualizzati solo una volta (il blocco di navigazione, l'intestazione, il piè di pagina, …). I div con classi possono essere visualizzati più di una volta. Qui useremo una classe. Nel caso in cui vorremmo aggiungere un altro blocco di navigazione in seguito.div.navblock { width: 180px; margine: 5px automatico; border: 1px solid red;}Se vogliamo aggiungere un altro blocco di navigazione, dovrai solo aggiungere una nuova … struttura. Il tuo codice ora sarà simile a questo;

• pippo
• Sbarra
• Boo
• Lontano

Passaggio 6: aggiungi alcuni div aggiuntivi per la struttura nel contenuto principale

Ora faremo lo stesso per il div maincontent. Il codice ora ha questo aspetto:

Lorem ipsum dolor sit amet, …

Ancora una volta, aggiungeremo un pezzo di codice al nostro file css per determinare come deve essere visualizzato il div:div.contentblock { width: 580px; margine: 5px automatico; border: 1px solid white;}Ora possiamo aggiungere un altro blocco di contenuto aggiungendo un altro " … " nel div maincontent in questo modo;

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum, …

Passaggio 7: rendere il sito un po' meno brutto

Ora la parte divertente; colori. Ora che abbiamo la struttura div principale, possiamo cambiare i colori in qualcosa di un po' meno caotico/brutto/…Basta giocare con i colori nel file css. Ecco il file html completo della pagina web visualizzata nell'immagine: test

• pippo
• Sbarra
• Boo
• Lontano

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum, …

Header E questo è il file css completo:body { background: #444444; font-family: verdana, arial, sans-serif; colore: #444444; dimensione del carattere: 12px; margine: 0px;}div#contenitore {larghezza: 800px; margine: 0px automatico; sfondo: #FFFFFF; padding: 0px;}div#content { width: 800px; imbottitura: 100px; sfondo: #FFFFFF;}div#header {larghezza: 800px; altezza: 100px; sfondo: #888888; posizione: assoluta; top: 0px;}div#nav { larghezza: 200px; galleggiante: sinistro; sfondo: #FFFFFF;}div#maincontent { larghezza: 600px; galleggiante: a destra; sfondo: #DDDDDD;}div.navblock { width: 180px; margine: 5px automatico; bordo: 1px solido #DDDDDD;}div.contentblock { width: 580px; margine: 5px automatico; bordo: 1px solido #FFFFFF;}.clearfix:after {content:"."; blocco di visualizzazione; altezza: 0; chiaro: entrambi; visibilità: nascosto;}.clearfix {display:inline-block;}/* Nascondi da IE Mac \*/.clearfix {display:block;}Quindi ora hai le basi. Ovviamente c'è ancora molto da modificare come colori, dimensioni dei caratteri, un blocco di navigazione dall'aspetto migliore, … Ma questo istruibile riguarda solo la struttura div. Se desideri vedere altre istruzioni correlate, puoi sempre chiedere. Vedo se riesco a trovare il tempo.