Anche i siti web hanno il loro scheletro. Ma è inutile chiedere ai medici le sue caratteristiche. E anche i veterinari non sono a conoscenza della struttura del sito. Solo i progettisti di layout lo sanno. È da loro che dipende la struttura dello scheletro della risorsa futura. E il modo principale per creare le ossa del suo scheletro è il layout a blocchi.
Il layout del sito web è un mestiere per gli iniziati
C'è qualcosa di misterioso nel layout del sito. Ma questo fino a quando non imparerai a conoscere meglio questo mestiere. Iniziamo la nostra dedizione:
La fase successiva nello sviluppo del sito dopo aver creato il suo layout è il layout. Il compito del progettista di layout è trasferire lo scheletro del futuro sito nel mondo virtuale utilizzando il codice html e le tabelle css. In poche parole, trasferisci le dimensioni e le proporzioni della risorsa in un modulo comprensibile per il browser.
Nel processo di impaginazione con codice html, lo "scheletro" del sito viene scomposto in parti. E usando css ( Fogli di stile) imposta la dimensione delle sue "ossa", il colore e la posizione.
Esistono diversi tipi di layout:
I. Tabulare: era il tipo principale di layout. Nel layout della tabella, il tag viene utilizzato per impostare la struttura del sito
e i relativi tag figlio. Il layout mediante tabelle consente di disporre tutti gli elementi di design nel modo più proporzionale l'uno rispetto all'altro. Ma allo stesso tempo, questo codice risulta essere troppo voluminoso:
Inoltre, i principali svantaggi del codice della tabella includono il lungo tempo di caricamento e la scarsa indicizzazione dei contenuti da parte dei motori di ricerca.
Il contenuto di una pagina basata su fogli di calcolo non verrà visualizzato finché tutti i dati non saranno stati caricati. Il layout a blocchi consente di visualizzare separatamente ogni elemento caricato.
Una cattiva indicizzazione delle pagine della tabella è dovuta a grandi spazi tra i blocchi di testo situati in celle diverse della tabella.
Ora la versione tabulare viene utilizzata raramente come metodo principale per la creazione di siti. Ora viene utilizzato solo per la strutturazione dei dati tabulari e la posizione delle immagini grafiche.
II. Blocco: attualmente il metodo di layout principale. A differenza di un layout a blocchi tabulari, presenta una serie di vantaggi:
Separare lo stile degli elementi dal codice html;
La capacità di sovrapporre uno strato sopra l'altro: questa capacità facilita notevolmente il posizionamento degli elementi.
Migliore indicizzazione da parte dei motori di ricerca;
Elevata velocità di caricamento di una pagina composta da elementi tra loro indipendenti;
Facilità di creare effetti visivi ( menu a discesa, elenchi, suggerimenti).
Il principale svantaggio del layout a blocchi è un certo " ambiguità»Comprensione del suo codice da diversi browser. Pertanto, le pagine html spesso devono essere "rifinite" utilizzando hack speciali.
Con l'avvento del layout a blocchi, è nato un concetto come "compatibilità tra browser". A causa della differenza nella visualizzazione dello stesso elemento in diversi browser, i progettisti di layout devono inserire interi blocchi di codice (hack) nell'html principale.
L'hack è altamente specializzato e risolve il problema della visualizzazione errata in un solo browser.
L'elemento principale utilizzato nel layout del blocco è il tag
... La sezione di codice separata da questo tag è chiamata layer. Tutte le decisioni di stile sono state spostate oltre i confini del codice html in fogli di stile a cascata. Sono accessibili tramite ID o classi CSS:
Come funziona il layout dei blocchi?
Prima di iniziare il layout, il layout del sito psd già pronto viene tagliato in blocchi (livelli) in un editor grafico. Le immagini di sfondo ritagliate vengono inserite in una cartella separata, che verrà allegata separatamente a ciascun livello:
Ad esempio, prendiamo il layout di questo sito Web, creato in Photoshop. Innanzitutto, in un editor di testo, utilizzando un div, impostiamo la struttura della risorsa futura e assegniamo il proprio selettore di id a ciascun livello. Risulta la seguente struttura:
Quindi alla struttura del sito finita in html con la riga allega il file css. Quindi aggiungiamo la descrizione dello stile di ogni livello, il posizionamento rispetto agli altri elementi e le sue dimensioni.
Puoi saperne di più su tutte le proprietà CSS dalla documentazione tecnica per la lingua.
Ecco come appare il nostro esempio di layout di un sito basato su blocchi in una finestra del browser.
Questa lezione è consigliata a coloro che stanno appena iniziando a padroneggiare la saggezza della creazione di siti. Contiene concetti basilari oh HTML e CSS... Seguendo passo passo le istruzioni di questa lezione, creerai un modello per il tuo sito in pochi minuti.
Creeremo un modello di sito Web utilizzando disposizione dei blocchi, io uso il tag - " DIV».
Passaggio 1: contrassegnare una pagina Web utilizzando i tag HTML
Prima di tutto, abbiamo bisogno di marcare la nostra pagina web usando i tag HTML. Solo dopo puoi procedere alla progettazione del sito utilizzando fogli di stile CSS a cascata.
HTML- esso Hyper Text Markup Language... Crea struttura pagine web. I tag HTML vengono utilizzati per questi scopi. Sono racchiusi tra parentesi "<" и ">".
I tag, di regola, seguono in coppia: apertura e chiusura. Quest'ultimo differisce dal fatto che ha una "/" dopo la prima parentesi. (Ad esempio:
). Con l'aiuto dei tag, definisci cosa apparirà sulla tua pagina web.
Fogli di stileCSS applicato in seguito. Sono necessari per posizionare il contenuto dei tag in determinati punti della pagina, nonché per dare a questo contenuto l'aspetto desiderato.
I tag della pagina web più semplici sono:
Successivamente, è tra i tag posizionerai altri tag per contrassegnare gli elementi della pagina web.
Un tag importante per strutturare la pagina è il tag
... Usandolo, puoi dividere la tua pagina in blocchi.
All'interno di questo tag, puoi inserire altri tag HTML necessari per creare il contenuto del tuo sito (link, testo, immagini, ecc.). Tutti questi elementi verranno successivamente stilizzati utilizzando fogli di stile CSS CSS.
Ora, utilizzando un editor grafico (Photoshop per esempio), disegna i blocchi della nostra pagina web:
Il codice HTML per questa pagina avrà il seguente aspetto. Questo è un esempio di utilizzo del tag div:
Come puoi vedere, ogni tag div abbiamo dato una certa Selettore ID... Cioè, abbiamo dato a ciascun blocco separato della nostra pagina il proprio nome. Ciò è necessario in modo che in seguito, stilizzando i blocchi nel file CSS, possiamo distinguere un blocco dall'altro.
Ci sono due tipi selettori. ID- utilizzato per blocchi univoci, tali che non si ripetono in nessun'altra parte della pagina. Mentre il selettore CLASSE- usato per indicare blocchi ripetuti.
Inoltre, abbiamo racchiuso tutti i blocchi all'interno del blocco " contenitore". Questo viene fatto in modo che in seguito possiamo posizionare l'intera pagina come vogliamo.
Passaggio 2: allegare un foglio di stile CSS
Come già accennato, un foglio di stile CSS definisce il design degli elementi di una pagina web. Puoi inserirlo all'interno del tuo documento html o allegare un file esterno. In questo tutorial, utilizzeremo quest'ultima opzione.
Se hai già aperto la tua pagina web in un browser, non troverai nulla lì. Questo perché non hai riempito i tuoi blocchi con alcun contenuto, né hai dato loro alcuna forma o colore. Puoi aggiungere contenuto per i blocchi tra i tag corrispondenti. Ma imposteremo la forma, la posizione, il colore e altre manifestazioni esterne dei blocchi utilizzando un file CSS.
Ma prima, devi crearlo. Chiamiamolo style.css e posizioniamolo nella stessa cartella del documento html. Successivamente, nel file html, aggiungi la seguente riga tra i tag:
In questo modo colleghiamo i due file insieme. Ora, quando si visualizza una pagina web, il browser utilizzerà il foglio di stile appropriato.
Passaggio 3: imposta lo stile
La sintassi CSS è composta da selettore, proprietà e valore. Un selettore è un tag di cui si desidera definire l'aspetto assegnandogli varie proprietà. Una proprietà viene impostata utilizzando vari attributi, che a loro volta possono assumere valori diversi.
Per scrivere selettori diversi dal tag corpo, si usano i segni " #
"o" .
". vengono prima del nome del selezionatore. Il primo è usato per indicare selettoreID, il secondo, rispettivamente su selettoreCLASSE... Un selettore può avere un numero qualsiasi di proprietà. Che sono racchiuse tra parentesi graffe" {}
".
#selettore (
valore della proprietà;
valore della proprietà;
valore della proprietà;
}
.selettore (
valore della proprietà;
valore della proprietà;
valore della proprietà;
}
Abbiamo i seguenti selettori:
corpo contenitore intestazione navigazione menù contenuto piè di pagina
Proprietà CSS e possibili valori:
Sfondo (sfondo) può essere specificato per immagine o colore, o entrambi contemporaneamente. Per visualizzare l'immagine, è necessario registrarne il percorso. Se lo sfondo è impostato su un colore, viene utilizzato il sistema esadecimale (#ffffff per il bianco, ecc.).
La proprietà color viene utilizzata per definire il colore del testo.
famiglia di font - questa proprietà definisce la famiglia di caratteri con cui verrà visualizzato il testo. Di norma, vengono specificati tre tipi di caratteri contemporaneamente. Pertanto, se il browser non è stato in grado di visualizzare il primo, ha molto da scegliere (Trebuchet MS, Arial, Times New Roman).
dimensione del font- la dimensione del testo, impostata in vari sistemi di misurazione, qui utilizzeremo i pixel.
margine- definisce la posizione del blocco. In questo caso, sia la finestra del browser che i bordi di altri elementi della pagina web possono fungere da punto di riferimento. Poiché vogliamo posizionare la nostra pagina al centro della finestra del browser, scriveremo i seguenti valori per questa proprietà: 0px auto 0px auto. La voce potrebbe sembrare più semplice 0px auto. Il conto alla rovescia nel caso di impostazione di questi valori è in senso orario: alto - destra - basso - sinistra. Poiché in alto - in basso, a destra - a sinistra coincidiamo, non è necessario duplicarli.
larghezza- larghezza del blocco.
altezza- altezza.
galleggianteè una proprietà che ci consente di posizionare gli elementi del selettore principalmente a sinistra oa destra.
Ora aggiungiamo del codice al nostro file style.css (lo hai già creato, vero?):
corpo ( sfondo: # f3f2f3; colore: # 000000; font-family: Trebuchet MS, Arial, Times New Roman; dimensione del carattere: 12px; }
#piè di pagina ( sfondo: # 838283; altezza: 180px; larghezza: 900px; }
Nota
Al momento della stesura di questo documento, non tutti i browser hanno visualizzato correttamente la pagina Web generata. Per eliminare questo inconveniente, puoi utilizzare un blocco aggiuntivo, che dovrebbe essere posizionato immediatamente dopo il blocco. contenuto.
Ecco il suo codice HTML:
#chiaro ( chiaro: entrambi; }
E tra i tag testa annota quale codifica deve utilizzare il browser se provi improvvisamente ad aggiungere testo russo ai tuoi blocchi:
Codice HTML finale:
Nozioni di base su HTML e CSS
Intestazione del sito
Unità di navigazione
Menù
Contenuto
corpo (
sfondo: # f3f2f3;
colore: # 000000;
font-family: Trebuchet MS, Arial, Times New Roman;
dimensione del carattere: 12px;
}
#contenitore (
sfondo: #FFFFFF;
margine: 30 px automatico;
larghezza: 900px;
altezza: 1000px;
}
#intestazione (
sfondo: # 838283;
altezza: 200px;
larghezza: 900px;
}
#navigazione (
sfondo: # a2a2a2;
larghezza: 900px;
altezza: 20px;
}
#menù (
sfondo: # 333333;
galleggiante: sinistro;
larghezza: 200 px;
altezza: 600px;
}
#contenuto (
sfondo: # d2d0d2;
galleggiante: a destra;
larghezza: 700 px;
altezza: 600px;
}
#chiaro (
chiaro: entrambi;
}
#piè di pagina (
sfondo: # 838283;
altezza: 180px;
larghezza: 900px;
}
Speriamo che questo tutorial ti abbia aiutato a capire basi per lavorare con HTML e CSS.
Ecco come appare nel browser:
Layout inizia il suo viaggio dai giorni in cui il codice è stato scritto in HTML e il markup è stato eseguito utilizzando le tabelle. Nel tempo, ci siamo allontanati da questo e abbiamo spostato il markup su CSS. Ci sono diversi tipi di layout ora. Flex-box, Bootstrap toolbox e gli ultimissimi Grid, che danno un grande potere ai creatori, possono essere considerati moderni. Una delle opzioni di transizione nello sviluppo del Web è il layout a blocchi. Utilizzato in precedenza per creare markup per l'intera pagina, è ormai considerato obsoleto, ma nonostante ciò trova ancora un uso diffuso in casi particolari.
Che cos'è il layout a blocchi?
Ha sostituito quella tabellare obsoleta e imperfetta. La pagina è composta dai cosiddetti livelli, o blocchi, e il tag di chiusura funge da mattoni per questo.
... È un tag di blocco che copre l'intera larghezza dell'elemento genitore e l'altezza per adattarsi al contenuto. Più tardi questa composizione fu chiamata "meravigliosa". La base per l'orientamento della pagina sono le cosiddette classi.
Al momento, questo tipo di layout è notevolmente obsoleto e il tag stesso
deve essere utilizzato solo per lo scopo previsto. Esistono molti tag semanticamente corretti che semplificano la navigazione nel codice. Ad esempio, c'è un tag speciale per il menu di navigazione
