Negli ultimi due anni, tutto quello che ho sentito dal cliente (i) è che vuole disporre il layout del design del suo sito esistente utilizzando blocchi. Quelli. ha bisogno di un layout a blocchi costruito su DIV e CSS. Ma questo codice è davvero così buono? Ci sto pensando da molto tempo ormai. Ho dovuto creare diversi siti, molti dei quali sono stati strutturati utilizzando tabelle, blocchi o terza opzione blocchi e tabelle.

A mio parere, i vantaggi del layout a blocchi rispetto al layout tabulare sono evidenti, questi sono:

• piccolo Dimensione HTML codice, rispetto alle tabelle
• i parametri principali e le caratteristiche dei blocchi sono memorizzati in un file CSS separato, che viene perfettamente memorizzato nella cache dai browser e non necessita di essere caricato costantemente.
• la possibilità di posizionare il contenuto principale nella parte superiore della pagina (nel codice stesso), ma visualizzarlo in qualsiasi punto, anche in fondo. semplicemente impostando i parametri appropriati al blocco.

Ma insieme a questi vantaggi apparentemente simili, ci sono una serie di problemi e svantaggi associati al processo stesso di layout del blocco e alla sua visualizzazione in diversi browser(Soprattutto sorgono problemi con Internet Explorer 6).

Principali svantaggi a cui dovresti anche prestare attenzione:

• Ci vuole molto più tempo per scrivere codice che funzioni correttamente in tutti i browser e per visualizzare correttamente la pagina in un secondo momento rispetto a quando si utilizza un layout tabulare.
• A volte il codice scritto risulta essere molto più grande di quanto inizialmente previsto, ciò accade a seguito di vari aggiustamenti, aggiustamenti, hack o stili scritti in aggiunta per i singoli browser.
• Spesso devi ricorrere all'utilizzo di JavaScript o librerie come jQuery, che influisce anche nel modo migliore per il sito nel suo complesso. La pagina potrebbe non essere visualizzata correttamente se il browser dell'utente non supporta l'esecuzione di JS o questa funzione è disabilitata.
• Ancora una volta, per quanto riguarda un browser così problematico come IE6. Nel layout a blocchi, viene spesso utilizzato il parametro di posizionamento float (sinistra o destra), spesso i blocchi iniziano a saltare e strisciare l'uno sotto l'altro quando la pagina (finestra del browser) viene ridimensionata. È stato anche notato che quando tutto funzionava bene in IE Tester (6), c'erano continui difetti in IE6 stesso.
• Non è raro dover utilizzare immagini aggiuntive per dipingere o regolare lo sfondo. Ad esempio, quando il blocco di navigazione non può essere allungato per l'intera altezza della pagina fino al piè di pagina, viene utilizzato un metodo per disegnare false colonne: Colonne finte
• Inoltre, spesso il costo di tale lavoro è superiore al costo del layout tabulare.

Il risultato finale e il tempo speso per esso spesso non possono essere giustificati. Pertanto, penso che valga la pena riflettere attentamente su come comporre, utilizzando quale metodo?

Saluti cari lettori, in questo numero parleremo di tipi di layout. Tutti voi dovete averne sentito parlare layout a blocchi e tabulare, oggi vorrei parlare di questi due diversi approcci al layout del sito web. Nell'articolo precedente, ho descritto come proteggere l'elettronica , poco prima abbiamo considerato un esempio specifico di un negozio sul moderno componentevirtmart per CMS gratuito joomla.

Questo articolo sarà utile per gli sviluppatori web alle prime armi che stanno appena intraprendendo il percorso spinoso dei "costruttori di siti" e vogliono crea i tuoi siti web. Anche gli sviluppatori web esperti potranno imparare qualcosa da soli, in particolare, confronta l'articolo vantaggi e svantaggi del layout tabulare ea blocchi.
Forse dobbiamo iniziare con cos'è il layout del sito web? Il progettista del layout riceve dal progettista un layout del futuro sito, di norma vengono forniti i layout formato Photoshop. Un layout è essenzialmente un disegno, solo più dettagliato, in cui i singoli elementi (menu, intestazioni del sito...) sono separati in livelli, questo accade naturalmente quando un designer disegna un layout, inoltre, è molto comodo, puoi facilmente copia un disegno da un livello di cui hai bisogno, vedi le opzioni dei caratteri, ecc. Quindi questa è l'essenza del layout nel trasformare il layout in documento html e la compilazione di una serie di regole CSS.

Va notato che il layout è un processo creativo, non ovviamente come disegnare un layout in Photoshop, ma, tuttavia, c'è una quota di creatività in questo, soprattutto nella fase iniziale, poi con la crescita dell'esperienza, il processo di layout può essere meccanizzato. La qualità del layout è valutata da quanto il layout del sito differisce dal layout.

Tipi di disposizione

Come indicato nel titolo il layout può essere a blocchi o tabulare. Nel layout a blocchi, gli elementi del sito sono strutturati utilizzando blocchi ( div ), nel layout tabulare vengono utilizzate le tabelle ( table ).

Disposizione tabulare

Disposizione tabulare utilizzato nei primi giorni della creazione di siti Web, era popolare tra gli sviluppatori Web alle prime armi. Va notato che molti webmaster anche adesso gestiscono in modo abbastanza efficace le tabelle di layout, come si suol dire: il maestro ha paura del lavoro. Personalmente, preferisco il layout a blocchi al layout tabulare, ma non stiamo parlando di gusti ora. L'idea si basa sulla presentazione del sito sotto forma di tabella. Come sai, la stragrande maggioranza dei siti ha una struttura tipica che può essere dettagliata per un'attività specifica. Considera, ad esempio, una versione tipica del sito

che contiene l'intestazione, l'area del contenuto, la barra laterale destra e il piè di pagina, questa non è una struttura complicata del mio blog. Implementiamo questa struttura tavolo

un berretto
contenuto	barra laterale
piè di pagina

la tabella deve essere impostata su una larghezza fissa specifica se il layout ha una larghezza fissa o 100% se il layout è fluido, nel qual caso la tabella si allungherà per adattarsi alla larghezza dello schermo a seconda della risoluzione del monitor.

Vantaggi e svantaggi del layout tabulare:

• Facile da capire, non è richiesta una conoscenza approfondita di HTML e CSS (+ )
• Intuitivo da costruire, regole CSS minime (+ )
• È difficile comprendere il codice HTML con una struttura del sito più complessa (- )
• Fino a quando l'intera tabella non viene caricata, non verrà mostrata sullo schermo (-)
• Il design complesso con elementi sovrapposti non è fattibile (- )
• Un sacco di codice ridondante (-)

Diamo un'occhiata più da vicino al punto 4. Il fatto è che Tabelle HTML sono progettati in modo tale che il browser non può sapere in anticipo come disegnare una tabella con il suo contenuto mentre non è caricata, fino a quando non viene caricata l'ultima cifra nella tabella, la tabella non verrà mostrata sullo schermo del browser, che può far uscire gli utenti dal sito senza attendere la visualizzazione della pagina, perché il visitatore non vede nulla sullo schermo per un po'. Sembra che il sito stia rallentando, infatti il ​​browser attende che tutti gli elementi della tabella vengano caricati.

disposizione dei blocchi

Il layout del blocco si basa sul fatto che il blocco Elementi HTML, di norma, si trovano verticalmente, dall'alto verso il basso uno dopo l'altro, nell'ordine in cui si trovano nel codice HTML. Inoltre, ai blocchi può essere impostata la proprietà di galleggiabilità ( float:sinistra | destra | nessuno | ereditare). Se specifichi la proprietà float:left per un blocco, allora sarà allineato a sinistra e tutti gli altri blocchi lo ignoreranno, come se questo blocco non esistesse, ad eccezione del testo, altri blocchi che hanno lo stesso set di proprietà andranno a capo intorno a destra, di quanto lo consente la larghezza dello schermo o dell'elemento in cui si trovano. Va notato che qualsiasi elemento può essere reso blocco impostando la proprietà display:block su di esso, inizialmente solo gli elementi div sono considerati elementi di blocco per impostazione predefinita, per gli elementi non di blocco (span, p ) la proprietà float viene ignorata e tali elementi sono disposti in sequenza dall'alto verso il basso come di consueto. Affinché la proprietà float non venga ignorata, è necessario impostare la proprietà display:block degli elementi.

float:right allineerà il blocco a destra e tutti gli altri blocchi lo ignoreranno o andranno a capo se la stessa proprietà è impostata su di essi e se due o più blocchi con la proprietà specificata vanno in fila nel codice, allora il blocco che viene prima sarà il primo a destra nel codice, il resto lo avvolgerà a sinistra.

La proprietà float:none annulla l'effetto di fluttuazione per il blocco, ma questo non significa che il blocco verrà posizionato come al solito dall'alto verso il basso, se un blocco con un effetto di fluttuazione si trova sopra, allora il blocco in basso ignorerà il blocco in alto one e stare sotto di esso in modo che questo blocco non debba essere impostato con la proprietà clear:both. Wow, è difficile vero? Sembra solo a prima vista, infatti, tutto è logico e semplice, devi solo esercitarti.

float:inherit - imposta la proprietà di galleggiamento, la stessa del blocco genitore (il blocco in cui questo blocco figlio è nidificato).

Abbiamo bisogno di esempi specifici, non mi sento convincente, si scopre. Creiamo un semplice esempio, per cominciare, la base, un riquadro rosso con una larghezza di 400 pixel. 350 pixel di altezza. e allinearlo al centro dello schermo.

ora devi aggiungere un altro paio di blocchi a questo blocco, verde e grigio con un'altezza e una larghezza di 100 pixel, il blocco grigio ha un'altezza di 120 pixel.

Si può vedere che i blocchi sono disposti nel flusso generale dal basso verso l'alto, nell'ordine in cui si presentano nel codice, prima verde poi grigio alla fine blu. Diamo al blocco verde una proprietà float:left in modo che i blocchi grigi e blu la ignorino.

come puoi vedere, il blocco grigio ha ignorato il blocco verde e si è fermato sotto di esso, il blocco verde, per così dire, da solo, il blocco blu allineato dietro quello grigio. Impostiamo un involucro attorno a tutti i blocchi.

Si può vedere che i blocchi sono allineati uno dopo l'altro nell'ordine in cui compaiono nel codice. Proviamo a posizionare due blocchi uno accanto all'altro e il terzo come al solito sotto. Per fare ciò, è necessario rimuovere la proprietà float:left dal terzo blocco, ma questo non è sufficiente, poiché striscia sotto i primi due blocchi, come abbiamo visto in precedenza. Per evitare che ciò accada, devi impostare la proprietà clear:both al terzo blocco;

Ecco come è risultata la struttura, quando si imposta la larghezza dei blocchi, si è tenuto conto del fatto che la cornice è di 1 pixel. aumenta la dimensione del blocco, quindi la dimensione dell'intestazione è impostata su 398 pixel. non 400 pixel.

Vantaggi e svantaggi del layout a blocchi:

• Meno peso della pagina grazie a meno codice (+ )
• Implementazione di progetti complessi con blocchi sovrapposti (+ )
• Difficile da padroneggiare, il layout tabulare è più semplice (- )
• Più spesso è necessario risolvere problemi di compatibilità tra browser. i blocchi possono sovrapporsi quando si modifica la risoluzione dello schermo, il ridimensionamento (-)

Personalmente, ho iniziato con un layout tabulare, ora uso il layout a blocchi, l'ho imparato molto tempo fa, è stato facile, anche se ha una serie di inconvenienti, è più familiare e più facile per me usare il layout a blocchi.

Questo è tutto cari lettori, tornate spesso.

Tra i progettisti di layout abbastanza spesso ci sono controversie sulla scelta metodo di impaginazione. Alcuni preferiscono disposizione dei blocchi, altri webmaster tendono a farlo metodo tabulare. Questo problema è piuttosto controverso ed entrambi i maestri hanno ragione a modo loro. Ci sono alcune situazioni in cui vale la pena usarlo disposizione dei blocchi, ci sono anche momenti in cui L'opzione migliore userà disposizione tabulare. Ma in ogni caso, quando si sceglie un metodo, è necessario basarsi su alcune caratteristiche inerenti sia al tabulare che al disposizione dei blocchi. Caratteristica principale di questi metodi, ci sono vantaggi e svantaggi, che saranno discussi di seguito.

Vantaggi delle tabelle di layout:

• Le tabelle di layout sono molto più semplici dei blocchi;
• A basse risoluzioni, le tabelle non si sovrappongono
• Facile creare un sito cross-browser.

Svantaggi del layout tabulare:

• Un gran numero di codice;
• Non tutti i design possono essere tabelle impaginate.

Vantaggi del layout a blocchi:

• Una piccola quantità di codice, che riduce sensibilmente il peso del sito;
• Maggiore velocità di caricamento rispetto ai tavoli;
• Puoi creare progetti di qualsiasi complessità.

Svantaggi del layout a blocchi:

• Man mano che la risoluzione diminuisce, i blocchi cadono o si scontrano l'uno con l'altro;
• Problematico con la compatibilità cross-browser;
• La composizione è più difficile delle tabelle.

Ecco i principali pro e contro di questi metodi impaginazione, ma in pratica nella maggior parte dei casi è necessario utilizzare entrambi i metodi. Utilizzo disposizione dei blocchi, molto meglio di quello tabulare, ma solo a condizione che sia possibile realizzarlo visualizzazione corretta pagine in tutti i browser e con qualsiasi risoluzione del monitor. Nel caso in cui il progettista del layout non abbia molta esperienza, vale la pena utilizzare le tabelle del layout, con un aumento delle competenze sarà possibile passare a disposizione dei blocchi.

Ora parleremo di qual è la differenza tra siti con layout tabulare e a blocchi. Dopo che il sito è stato pensato dal progettista, deve essere strutturato e adattato alle esigenze specifiche. Sotto il layout capire l'uso di html+css o html. La più comune è la prima opzione. Esistono altre opzioni di layout più complesse, ma non tutti i browser le supportano. Il layout HTML è tabulare (tabella) e blocco (div). E ogni opzione ha i suoi vantaggi e svantaggi.

Disposizione tabulare

Il layout tabulare viene creato utilizzando tabelle nidificate. Quasi tutti i browser leggono correttamente questo tipo di layout, poiché è stato creato molto prima di quello a blocchi. Se hai bisogno di un design a più colonne, il layout tabulare è l'ideale per questo. È necessario dire delle carenze del layout utilizzando le tabelle. Con una quantità considerevole di tabelle nidificate, si forma un codice troppo ingombrante, difficile da modificare. I siti creati utilizzando il layout tabulare non sono indicizzati abbastanza bene motori di ricerca. Pertanto, i siti che hanno un buon contenuto non occupano sempre il primo posto nei risultati di ricerca.

Disposizione dei blocchi

I siti realizzati con un layout a blocchi si distinguono per l'utilizzo di un codice più compatto, e quindi di minor peso. Il layout del blocco è molto comodo da usare, i livelli o i blocchi possono sovrapporsi l'un l'altro. Gli ottimizzatori sfruttano il fatto che la parte inferiore del codice HTML può essere posizionata in alto. Il lato negativo del layout del blocco è una certa complessità del suo utilizzo. Devi conoscere i CSS 1 e la versione 2, ed è in preparazione un terzo, che avrà ancora più funzionalità. C'è una certa difficoltà nel creare siti con un layout "fluido", ma sul web mondiale puoi trovare abbastanza istruzioni su come farlo facilmente a blocchi. Poiché è necessario conoscere molte sottigliezze nel layout a blocchi, viene utilizzato da progettisti di layout e web designer più esperti e competenti. Pertanto, i servizi negli studi web che creano siti con blocchi di layout sono più costosi, soprattutto perché ci sono ancora persone che utilizzano versioni precedenti.