01.10.2013 01:04
73845
Disposizione in gomma sito (così come il layout fisso) inizia con la creazione del cosiddetto scheletro, o framework per un ulteriore sviluppo. In generale, il layout html è un costruttore. Innanzitutto, viene creato il contenitore principale, la cui base sarà in seguito responsabile della larghezza minima e massima dell'intero sito, i bordi. Se fai tutto bene, quindi modificando la dimensione massima, puoi aumentare la dimensione massima del sito, ad esempio da 1280px a 1360px o 1920px con modifiche al codice minime o assenti (e talvolta senza di esse). Non dovresti creare una gomma infinita perché è illeggibile su monitor di grandi dimensioni. L'opzione ideale sarebbe un layout html che includa tutte le principali risoluzioni dello schermo, comprese quelle mobili, ad esempio il layout in gomma per risoluzioni dello schermo da 240px a 1920px.
Esistono diversi tipi di layout html che è visivamente diverso. Consideriamo brevemente queste tipologie di layout prima di passare alla realizzazione pratica del telaio:
Visivamente diversi tipi di layout sono: layout fluido, layout fisso, layout adattivo. Il layout reattivo può essere combinato con il layout fluido.
Caratteristiche di ogni tipo di layout:
1) Disposizione fissa- la capacità del container del sito principale di avere la stessa larghezza indipendentemente dalla risoluzione del monitor. Se lo schermo è più piccolo della dimensione fissa del contenitore principale, viene visualizzato lo scorrimento laterale (scorrimento da sinistra a destra).
2) Disposizione in gomma- la capacità del container del sito principale di allungarsi in larghezza da e verso le dimensioni minime e massime specificate. Il layout fluido può essere senza specificare un minimo (non sembrerà molto decente su schermi più piccoli di Npx, gli oggetti statici possono sovrapporsi se non viene aggiunta l'adattabilità) o una dimensione massima, quindi si espanderà all'infinito (immagina come apparirà un articolo su risoluzione 7000px, praticamente in una riga), quindi un buon layout html ha sempre dei limiti ragionevoli. Pertanto, è sempre necessario controllare il risultato del layout a diverse risoluzioni e in diversi browser.
3) Disposizione adattiva- la capacità sia del contenitore principale che di qualsiasi elemento del sito di adattarsi alla risoluzione dello schermo, consentendo così di modificare la dimensione del carattere, la posizione degli oggetti, il colore e tutto ciò che si può desiderare. Inoltre, ciò avviene in modo dinamico, senza l'azione dell'utente, ad esempio utilizzando media query che consentono di determinare automaticamente la risoluzione del monitor, il tipo di dispositivo (cellulare, smartphone, tablet) e di sostituire automaticamente i valori specificati. Questo offre grandi opportunità. Ad esempio, combinando un layout fluido con un layout adattivo, è possibile personalizzare la visualizzazione del sito, partendo dalle risoluzioni mobili più piccole e finendo con i monitor più grandi. Il layout adattivo non influisce sulle possibilità del layout in gomma o fisso, le integra.
Pertanto, l'opzione migliore oggi sarebbe il layout html, originariamente costruito come layout fluido, ad esempio 980px-1920px, aggiornato a 240px utilizzando il layout adattivo. Bisogna sempre ricordare la differenza principale:
Il layout in gomma funziona solo con i contenitori, mentre il layout adattivo funziona sia con i contenitori che con il loro contenuto, consentendo di modificare oggetti come i caratteri, sostituire un oggetto con un altro e molto altro a seconda della risoluzione dello schermo o del dispositivo. Pertanto, cerca di prendere in considerazione questa sfumatura quando pianifichi e crei i tuoi progetti e ricorda che oggi il layout fluido in combinazione con il layout adattivo è considerato una buona forma nella creazione di siti Web e domani potrebbe diventare uno standard non detto. Pertanto, per non dover recuperare più tardi, è meglio andare avanti oggi, rendendo la combinazione di cui sopra la norma per noi stessi.
Vale anche la pena considerare la validità del sito durante il layout. Si ritiene che oggi la validità influisca sulle prestazioni, almeno nel motore di ricerca di Google. Pertanto, durante la creazione di un progetto, vale sempre la pena esaminare il validatore online e verificarne la validità e, se possibile, ridurre al minimo la presenza di errori. Di solito viene verificata la validità della pagina principale del sito. Secondo esso, è consuetudine determinare la validità del sito. Vale anche la pena ricordare che la maggior parte dei CMS ha codice in alcuni punti che non supera la convalida.
Molto spesso questo può essere osservato nelle notizie complete, dove è presente un editor visivo, soprattutto con un uso eccessivo della formattazione e ogni sorta di evidenziazione per mezzo dell'editor stesso. Ma senza questo, da nessuna parte, quindi se la pagina principale del sito viene convalidata, questo sarà un risultato abbastanza degno e, se possibile, è possibile passare le pagine interne. A volte devi modificare anche nel motore, cosa che non tutti possono fare, quindi tutto ha bisogno di una misura ragionevole, e la validità dovrebbe essere un evento comune per un designer di layout, una norma quotidiana, ma allo stesso tempo non trasformarsi in una mania che ti costringe a fare validità per il bene della validità. Devi solo cercare di farlo nel modo più efficiente possibile e ridurre il numero di errori al minimo, entro le tue capacità. Alla fine, se ci sono una dozzina o due errori, il sito non smetterà di funzionare, quindi non dovresti nemmeno averne paura.
Passiamo ora alla creazione del frame del sito., che utilizza il layout in gomma:
Innanzitutto, dobbiamo creare uno standard comune, come sempre, un doctype, tag di servizio e inserire il contenuto del futuro sito tra i tag
Ecco come appare il corpo iniziale del sito, che non ha ancora nemmeno cornice e blocchi interni. Sono solo informazioni necessarie per il browser, una libreria online per comprendere html5, poiché è ancora solo una raccomandazione e la specifica è ancora html 4.1, sebbene html5 sia già ampiamente utilizzato con may e main. Inoltre nei tag di servizio sono presenti i meta tag, un titolo e un file di stile css è incluso per il design visivo della nostra cornice.
Per creare la cornice principale, che diminuirà a 240px e aumenterà a 1920px e, se la risoluzione è maggiore di 1920px, allinealo al centro, devi posizionare il contenitore immediatamente dopo il tag body e chiuderlo prima del tag body di chiusura. Tutto il resto del ripieno deve già essere implementato al suo interno.
Di solito questo contenitore è chiamato con nomi simili, come wrap, wrapper, ecc., il che significa che è un blocco avvolgente che include tutto il contenuto del layout principale, blocchi, contenuto. Pertanto, non reinventeremo la ruota e cercheremo di utilizzare nomi di classi generalmente accettati.
Una classe è una specie di soprannome per qualsiasi contenitore che può essere scritto una volta e utilizzato ovunque, un numero illimitato di volte.
Ad esempio, se scrivi una classe in stili CSS, diciamo redblock e assegnagli un colore di sfondo rosso, quindi qualsiasi blocco a cui assegni questa classe avrà un colore di sfondo rosso. Assegnare una classe è molto semplice. Tra virgolette, al blocco desiderato viene assegnato il nome desiderato, ad esempio redblock o wrapper o privetvasya. Questa è una classe astratta che ti viene in mente, come un soprannome per un cucciolo.
Pertanto, il nostro contenitore di wrapping, a cui abbiamo deciso di assegnare la classe wrapper, potrebbe assomigliare a questo:
Ma, poiché siamo sicuri di avere un solo contenitore di inviluppo sull'intero sito, è più opportuno assegnargli un identificatore piuttosto che una classe. L'identificatore differisce dalla classe in quanto la classe può essere utilizzata quanto vuoi e l'identificatore può essere solo uno sulla pagina. L'identificatore ha una priorità più alta, poiché è uno, può essere indirizzato in modo specifico. Questo può essere paragonato alla coda alla stazione. Tutti hanno sentito come hanno annunciato alla stazione ferroviaria, ad esempio, la cittadina Kutuzova Adelina Matveevna, vai allo spedizioniere ...
In questo caso, rivolgersi a un cittadino per nome completo è un analogo di un identificatore in html (dicono anche ID, ID, ID). E un appello come cari passeggeri, mandando il treno..
Sarà paragonabile alla classe, poiché l'appello va a tutti i passeggeri, senza un ricorso specifico.
La presenza di un identificatore non vieta l'uso di una classe e lo stesso nome di classe e identificatore (ID) sono diversi e puoi fare riferimento a tale blocco per classe o per id.
Ad esempio:
Un'occorrenza comune che consente di accedere a questo blocco in diversi modi. Ma questa informazione è generale, per il riscaldamento. Questa lezione presuppone che tu abbia già una minima comprensione teorica e comprensione di quanto sopra.
Quindi, non complichiamo il processo chiamato layout del sito, in base al quale il nostro blocco avrà ancora un id e non una classe, è l'unico nel suo genere, ma non abbiamo nemmeno bisogno di una classe aggiuntiva qui. Pertanto, lascia che sia così:
Il frame è pronto, ora secondo le regole di html5, useremo tag semantici che rendono più facile per i motori di ricerca la comprensione della struttura in modo che la cosa principale non passi inosservata. Anche in questo caso, ripeto, non caricheremo la descrizione dei tag in questa lezione, per questo c'è una sezione speciale che descrive in dettaglio i tag html, con una dimostrazione e l'opportunità di sperimentare da soli.
Consentitemi di attirare la vostra attenzione sul fatto che inizialmente abituatevi alla regola principale: la parte del contenuto agli occhi dei motori di ricerca ha più peso, maggiore è nella struttura. Pertanto, durante il layout, devi tenerne conto, seguendo questa regola:
Le barre laterali e il footer devono trovarsi nel codice sorgente più in basso rispetto alla parte principale, che deve essere evidenziata con il tag dell'articolo, indicando il contenuto principale al motore di ricerca. Inoltre, utilizzeremo i tag: header, main, article, aside, footer, il cui scopo, prima di tutto, è mostrare il significato semantico e le priorità nella struttura. Pertanto, il layout del nostro layout non in gomma, dopo aver aggiunto questi tag, sarà simile al seguente:
codice html
Mostra codice
Cornice modello
Per il futuro sito
contenuto
Ecco come apparirà il nostro html, ma per visualizzare il nostro layout, dobbiamo applicare gli stili CSS. Per fare ciò, abbiamo incluso il nostro file di stile CSS nell'intestazione, come previsto. Ora possiamo passare a ciascun blocco.
Per questo, sono state assegnate classi e identificatori sopra, in modo da non confondere un div con un altro. Questo non si applica ad alcuni tag semantici che abbiamo al singolare, poiché possiamo riferirci a loro per nome come tag, anche senza una classe e un id. Ciò ridurrà le dimensioni del file di stile e non influirà sul risultato.
Quindi, con il codice html, penso che tutto sia chiaro, questo è solo un futuro frame senza volto e il layout in gomma si ottiene manipolando le classi CSS. Il layout reattivo ha le stesse radici, è CSS. Consentono di rendere vivo il layout, rispondente alle dimensioni dello schermo. Pertanto, ulteriori azioni verranno eseguite con il file di stile CSS.
Non esamineremo ogni voce, poiché questo è uno standard che si trova in ogni file di stile. Ci stiamo concentrando solo su un metodo che consenta alle barre laterali di rimanere fisse, mentre la sezione centrale si estende da un minimo a una larghezza massima che imposteremo noi stessi, che sarà compresa tra 240px e 1920px.
Ora prima di procedere con la revisione del codice css(in cui non c'è nulla di superfluo, ho lasciato solo ciò che è necessario per questa lezione, inoltre ho aggiunto uno sfondo per i blocchi per la visibilità e un'altezza minima in modo che i blocchi possano essere visti bene), prestiamo attenzione ad alcune sfumature:
1) Se guardi da vicino, il footer si trova all'esterno del contenitore principale. Non è un caso, in quanto tale disposizione consentirà di premere il piè di pagina fino in fondo. Penso che molti abbiano visto un piè di pagina sui siti Web che rimane in fondo a qualsiasi scala. E molti volevano sapere come si fa. Pertanto, spiegherò il meccanismo lungo il percorso, dopodiché tutto diventerà chiaro.
2) Molti, avendo visto sul sito un piè di pagina e un'intestazione estensibili al 100% e un centro in gomma, lo considerano già un design adattivo. Questo non è del tutto vero, l'adattabilità è un concetto più ampio e trasformazioni più avanzate, ma questo non è considerato in questa lezione. Tuttavia, l'imposizione della gomma può essere di vari tipi, incluso il tipo sopra. Pertanto, modernizziamo subito il nostro template in modo che alla fine header e footer siano sempre al 100%, ma allo stesso tempo la parte visibile del contenuto in essi contenuto sia da 240px a 1920px e al centro.
Questo è il metodo che ho usato su questo sito.
3) Pertanto, dobbiamo aggiungere qualcos'altro al nostro layout per implementare le idee descritte nel secondo paragrafo. Quindi, affinché il nostro piè di pagina e l'intestazione siano sempre al 100% (di solito questi blocchi sono riempiti con uno sfondo, immagini, ecc.) e allo stesso tempo il loro contenuto non superi i 1920px, faremo quanto segue:
1) Estrarre
2) Creiamo più blocchi con la stessa classe, ad esempio io di solito lo chiamo .maxw, quindi non mi discosterò dalle mie regole. Aggiungiamolo all'intestazione e al piè di pagina e assegniamo questa classe alla nostra sezione principale con la classe .section. Aggiungeremo anche una condizione per le versioni precedenti di IE, con una chiamata al set di regole, a condizione che la voce provenga da IE< 9 (если такие пользователи еще есть), и специальный метатег metanome="
vista"
per il corretto rapporto di scala su dispositivi come tablet, smartphone, ecc. (ci sono sicuramente utenti del genere).
3) Per controllare il comportamento dei nostri blocchi a risoluzioni dello schermo inferiori a 980px, aggiungi @media rules in fondo al file di stile, in cui scriveremo le modifiche necessarie per determinati blocchi, nel nostro caso per le barre laterali. Forzarli a spostarsi sotto la parte del contenuto con una risoluzione dello schermo inferiore a 980 px e allinearli al centro.
Di conseguenza, il nostro layout html sarà simile a questo:
Codice html finale
Mostra codice html
Cornice modello
Per il futuro sito
contenuto
Il nostro file di stile sarà simile a questo:
codice css
Mostra codice CSS
* ( margin: 0; padding: 0; ) html ( height: 100%; ) header, nav, section, main, article, aside, footer ( display: block; ) body ( height: 100%; width: 100%; background: #fefefe; ) .maxw ( margin: 0 auto; min-width: 240px; max-width: 1920px; ) header ( min-width: 240px; width: 100%; height: 220px; background: #74C9FF; ) #wrapper ( position: relative; margin: 0 auto; height: auto !important; height: 100%; /*min-height: 100%; - Necessario per spingere il piè di pagina in basso*/ padding: 5px 0; ) . sezione ( larghezza: 100%; riempimento: 0 0 220px; posizione: relativa; ) .sezione:dopo ( contenuto: ""; chiaro: entrambi; display: tabella; ) .mainwrap ( larghezza: 100%; float: sinistra; overflow : hidden ; ) main ( padding: 0 240px 0 240px; min-height: 350px; margin: 0; ) article ( padding: 0 5px; margin: 0 5px; background: #EAF2F5; min-height: 350px; ) #s_left ( float : sinistra; larghezza: 240px; margine-sinistra: -100%; sinistra: 0; posizione: relativa; sfondo: #E88139; altezza min: 350px; ) #s_right ( fl avena: a sinistra; larghezza: 240px margine sinistro: -240px; a destra: 0; posizione: relativa; sfondo: #E86A3B; altezza minima: 350px ) footer ( margin: -220px auto 0; width: 100%; min-width: 240px; height: 220px; background: #AFBFC6; position: relativo; ) /* Per la visualizzazione su dispositivi inferiori a 980px */ @media screen e ( min-width:240px) e (max-width:479px) ( main ( padding:10px; ) #s_left ( padding: 0; margin: 0 auto; float: none; clear: both; left: 0; ) #s_right (padding: 0; margin: 0 auto; float: nessuno; clear: both; right: 0; ) ) @media screen and (min-width:480px) e (max-width:799px) ( main ( padding:10px; ) #s_left ( riempimento: 0; margine: 0 auto; float: nessuno; clear: entrambi; sinistra: 0; ) #s_right ( riempimento: 0; margine: 0 auto; float: nessuno; clear: entrambi; destra: 0; ) ) @media screen and (min-width:800px) e (max-width:979px) ( main ( padding:10px; ) #s_left ( padding: 0; margin: 0 auto; float: nessuno; clear: entrambi; sinistra : 0; ) #s_right (padding: 0; margin: 0 auto; float: nessuno; clear: both; right: 0; ) )
E ora diamo un'occhiata agli ultimi passaggi con il nostro layout e consideriamo le principali sfumature del layout in gomma, grazie alle quali non abbiamo un telaio statico, ma uno in gomma.
1) Abbiamo spostato l'intestazione all'esterno, poiché nella prima versione era all'interno del contenitore di imbustamento. E il contenitore che lo racchiudeva, a sua volta, era un massimo di 1920px, come si diceva all'inizio. Ciò non consentirebbe di rendere l'intestazione larga al 100%, riposerebbe sul genitore 1920px. Pertanto, abbiamo rimosso la larghezza massima da quella avvolgente e l'abbiamo spostata al di fuori di essa, inoltre abbiamo creato una classe .maxw, a cui abbiamo assegnato questi 1920px massimi e l'allineamento centrale. Ora abbiamo 1920px per qualsiasi blocco con la classe .maxw. Pertanto, all'interno dell'intestazione e del piè di pagina mettiamo un contenitore div con questa classe, in modo che tutto al suo interno si allunghi da 240px a 1920px e sia centrato se la risoluzione è maggiore di 1920px. Questo può essere visto modificando la risoluzione con una scala, ad esempio con uno slider in Opera.
2) Piè di pagina premuto fino in fondo. Questa è anche una caratteristica importante del layout. Ecco il segreto è:
Il piè di pagina stesso si trova all'esterno del contenitore di avvolgimento, che a sua volta ha un'altezza del 100%. Anche la sezione, che è all'interno del wrapper, ma avvolge essa stessa le barre laterali e la parte centrale, si riempie dal basso all'altezza del piè di pagina utilizzando il padding. Questo crea uno spazio vuoto sotto il contenuto. Poiché l'altezza è 100% e il piè di pagina è all'esterno del blocco, viene spostato fuori dalla vista di una distanza pari alla sua altezza. Riempiendo il fondo con padding:0 0 100px stiamo preparando lo spazio per spostare il piè di pagina a un'altezza negativa. Questo farà rientrare la parte superiore in ordine inverso, il che significa che si sposterà fino alla sua altezza. Finiamo con un padding di 100px dal basso, un footer spostato di 100px sotto lo schermo e questa è una posizione fissa. Quando diamo al footer un margine: -100px auto 0 comando, lo solleviamo dalla parte inferiore dello schermo nella cavità che abbiamo creato. Di conseguenza, abbiamo un piè di pagina premuto nella parte inferiore dello schermo.
3) Il layout fluido interessa a molti, quindi la nostra lezione è dedicata al layout del sito, più precisamente al layout del frame del sito, che dovrebbe avere due barre laterali a larghezza fissa, nel nostro caso è 240px, ma allo stesso tempo su qualsiasi schermo da 240px a 1920px, il nostro frame dovrebbe allungarsi arbitrariamente lungo la larghezza e il layout html dovrebbe capire che dobbiamo solo allungare la parte centrale, non toccare la barra laterale!
Beh, deve essere così. Il layout è pronto. Resta da capire, a causa di cosa si comporta in questo modo?
Tutto è chiaro con il contenitore di avvolgimento, ma in che modo il layout html mantiene le barre laterali mentre allunga la parte del contenuto?
Tutto qui non è così complicato come potrebbe sembrare a prima vista. Anche il layout degli stili CSS è layout, il che significa che obbedisce a determinate regole di layout per gli stili del sito.
Un ruolo importante in questo è svolto dal rientro a sinistra e a destra, che abbiamo prescritto per il tag dell'articolo. Se osserviamo il codice html, vedremo che esiste un determinato contenitore con id=container che ha una larghezza del 100%. Al suo interno c'è il nostro articolo, che ha padding sinistro e destro, padding:10px 270px. Ma la larghezza non è specificata per esso, e dato il fatto che ha display: block (abbiamo specificato per gli elementi html5 che smettono di essere inline), sarà a tutta larghezza e, senza una larghezza esplicita, i rientri all'interno saranno all'interno del contenitore e non dietro di essi. Grazie a questa combinazione, abbiamo id=container, all'interno del quale si trova un articolo con rientri sinistro e destro di 270px. Abbiamo barre laterali di 240px ciascuna e 20px ciascuna per i rientri dall'articolo centrale.
Ora ricorda cosa ho scritto sopra sul piè di pagina premuto. E se ti sei dimenticato: torna indietro e rileggi, il layout in gomma non è un cruciverba, non è necessario indovinarlo, il layout html richiede precisione e cura. Quindi, il layout in gomma utilizza lo stesso principio del piè di pagina premuto verso il basso, solo c'era uno spostamento verticale e qui è orizzontale.
chiude
Il tocco finale è posizionare correttamente le nostre barre laterali in modo che capiscano che siamo consapevoli di quale sia il layout del sito Web e rimangano dove diciamo. Per fare ciò, puoi collegare la logica. Se il blocco non si adatta alla larghezza, viene spostato verso il basso. E se i numeri negativi sono supportati nel posizionamento, allora possiamo far funzionare l'effetto al contrario.
Il blocco sinistro viene prima, quindi assegnagli un riempimento negativo di margin-left:-100% e si ingannerà apparendo esattamente nello spazio vuoto che l'articolo ha preparato per noi. Il layout è buono, il layout fluido è ancora migliore e il layout già pronto è ancora migliore, soprattutto dopo lunghe battaglie. Pertanto, un colpo di controllo al nostro avversario chiamato layout di gomma è uno spostamento della barra laterale destra della sua stessa larghezza a sinistra. Perché a sinistra?
Sì, perché era a destra, non si adattava a 240px ed è stato spostato nell'angolo sinistro, tutto è secondo le regole, html non è da biasimare qui e anche CSS è con carattere. Pertanto, margin-left:-240px risolve il problema rimanente facendo scorrere la casella di destra esattamente nello spazio vuoto preparato a destra di lato.
Bene, qui abbiamo esaminato, risolto tutti i punti oscuri del layout in gomma del layout. Su un esempio tutto controllato, vengono applicati i codici sorgente. Il layout è un business che richiede competenze costanti, sia esso gommato o fisso. Il layout reattivo è un problema separato. Forse nella prossima lezione non realizzeremo una cornice da zero, ce l'abbiamo già. Meglio aggiungeremo adattabilità a quella esistente, giocheremo con il font, cambieremo lo sfondo, le immagini a seconda della risoluzione dello schermo, in generale analizzeremo nel dettaglio le sfumature del layout, più precisamente layout adattivo. E non dimenticare di controllare la validità dell'html dopo il layout del sito, sicuramente non peggiorerà.
Di seguito è allegato il codice sorgente con il layout finito, che può essere scaricato. Se desideri modificare qualcosa, come il numero di barre laterali o il loro ID , l'altezza dell'intestazione o del piè di pagina e altre modifiche, puoi semplicemente utilizzare il generatore di layout wireframe online gratuito. Puoi creare sia un telaio con un layout fisso, sia un layout in gomma + condizioni prescritte per il layout adattivo.
Tutto questo può essere fatto sul nostro generatore di modelli.
Disposizione in gomma
"Disposizione in gomma
Tutti i modelli che abbiamo creato avevano una larghezza fissa: ovvero la larghezza di unità, colonne, aree, ecc. rimane costante quando la finestra del browser viene ridimensionata. La maggior parte dei siti Web di successo commerciale utilizza questo principio dall'avvento di Internet. Questo approccio si è dimostrato il metodo di layout più efficace per creare progetti di qualità in un ambiente che non è sempre adatto ai designer.
Tuttavia, non posso fare a meno di considerare disposizione "gomma".– creare pagine che cambiano dimensione a seconda del viewport.
I designer vogliono creare siti Web che tengano davvero conto delle preferenze degli utenti. Pertanto, è impossibile respingere le forti argomentazioni addotte contro pagine a larghezza fissa e introduzione per disposizione "gomma". In sostanza, una pagina Web a larghezza fissa riflette l'inclinazione del designer a controllare l'utilizzo effettivo, mentre le pagine che cambiano in base al viewport considerano principalmente le esigenze degli utenti.
Possiamo dire che con uno schermo di grandi dimensioni il sito dovrebbe occupare l'intera area disponibile e con dimensioni ridotte dovrebbe diminuire di conseguenza. Non sarebbe del tutto corretto dire che il layout "gomma" sta cercando di adattarsi a tutti gli utenti, ma ha un compito vicino a questo. Internet è un conglomerato di molti sistemi che servono un'ampia gamma di utenti in modi adattati alle loro esigenze individuali. Concordo sul fatto che la stessa percezione del contenuto o della funzionalità dello stesso sito è impossibile. Perché l'aspetto dovrebbe essere lo stesso per tutti? Il layout fluido è più adatto al Web e tiene conto dei suoi punti di forza e di debolezza rispetto alle pagine di dimensioni fisse. Come notato in precedenza, più naturale è la soluzione, più efficace è.
Fino a poco tempo, le possibilità del web design non ci permettevano di godere appieno del layout "in gomma". Le nuove funzionalità del browser, insieme alle innovazioni compatibili con i dispositivi in CSS e JavaScript, consentono ai designer di creare pagine molto più dinamiche.
I designer innovativi possono ora impegnarsi nel cosiddetto web design "reattivo". Ethan Marcotte, un sostenitore vocale, sostiene che questo approccio apre nuove possibilità:
È possibile rendere il sito facile da usare e visivamente attraente, utilizzando tecnologie standard in modo che il sito non sia solo più flessibile, ma si adatti anche all'ambiente in cui è incorporato.
Queste tecnologie si stanno sviluppando in modo incredibilmente veloce, quindi ho deciso di non trattarle nel mio libro. Le migliori pratiche nel campo del web design "reattivo" non sono state ancora trovate.
Tuttavia, i principi di base della progettazione rimangono validi indipendentemente dallo sviluppo di un nuovo approccio. È anche giusto che i designer continuino a condividere il controllo sulle proprie creazioni con gli utenti che vogliono controllare le proprie azioni. Sarebbe un errore pensare che il web design "reattivo" significhi dare agli utenti il pieno controllo, perché ciò di cui hanno veramente bisogno è alcune caratteristiche. Gli utenti sperano che i designer non solo forniscano loro una sorta di shell, ma la perfezionino anche abbastanza per essere gestibile.
Il progettista dovrebbe prendere alcune decisioni per l'utente, ma non tutte, ma solo quelle che aiutano nella percezione. Il progettista consente all'utente di controllare gli aspetti più importanti della percezione per i suoi scopi, ma l'utente deve anche sentirsi stabile e affidabile.
Il web design reattivo non semplifica questo compito. Anzi, lo complica. Ci saranno ancora più situazioni che devono essere prese in considerazione, più combinazioni di elementi dell'interfaccia utente in varie combinazioni, che renderanno difficile la percezione dei siti. In questo modo, la griglia diventa ancora più importante per il progetto complessivo; la creazione di una griglia rigida alla base del web design "reattivo" lo renderà più solido e robusto.
Gli stessi principi di progettazione basati su griglia possono essere utilizzati sia nel web design fluido che reattivo. Le unità possono essere combinate in colonne e aree e la dimensione degli elementi può essere modificata in base ai parametri principali della griglia. Questi elementi dovrebbero crescere e ridursi secondo gli stessi parametri, ma è importante ricordare che non tutto deve cambiare. Alcuni elementi possono e devono rimanere invariati. In un ambiente in cui gli elementi si ridimensionano all'infinito, è importante mantenere le cose coerenti, per fornire agli utenti una sorta di riferimento. Con lo sviluppo di questa teoria, ci saranno nuove opportunità per i designer che lavorano in questo campo. Ma resterà inalterato il ruolo centrale del designer, colui che gestisce la user experience.
Dal libro di Adobe InDesign CS3 autore Zavgorodny VladimirLayout a più colonne La caratteristica principale del design di qualsiasi giornale è il layout a più colonne. Poiché è difficile immaginare una riga della lunghezza di una pagina intera di un giornale, il designer suddivide la pagina in colonne separate; il loro numero dipende dal formato del giornale.
Dal libro 300 migliori programmi per tutte le occasioni autore Leontiev Vitaly PetrovichLayout con illustrazioni Un'altra caratteristica del layout di una rivista che è importante tenere a mente sono più immagini. Se per un articolo di giornale (più corto, che occupa parte della pagina) sono sufficienti una o due illustrazioni, gli articoli di rivista più lunghi richiedono
Dal libro Cosa non è scritto nei libri di Delfi autore Grigoriev A. B.Il design finale e il layout del volantino Il primo compito nella progettazione finale del volantino è la progettazione della scritta "Nuovo", che, sicuramente, è stata un pugno nell'occhio per i nostri lettori per molto tempo. Per il design, lo faremo scegli una tecnica visiva semplice che viene così spesso utilizzata
Dal libro HTML 5, CSS 3 e Web 2.0. Sviluppo di siti Web moderni. autore Dronov VladimirLayout finale della pagina Il layout finale della pagina nel nostro caso si ridurrà alle seguenti operazioni: inserimento delle informazioni di servizio nella pagina (ad esempio intestazioni e piè di pagina); riempiendo la striscia di testo reale (programmi TV reali, selezione di veri
Dal libro HTML 5, CSS 3 e Web 2.0. Sviluppo di siti Web moderni autore Dronov VladimirLayout del testo Il primo compito del layout è assegnare stili al testo importato. Dovresti anche rimuovere le righe vuote extra (di solito usate per i titoli e le barre laterali in un set), lasciando solo una riga vuota tra il testo della barra laterale e la seguente
Dal libro Mobile First! l'autore Wroblewski LukeImpaginazione e preparazione prestampa del testo
Dal libro dell'autore1.3.4.2. Linee di gomma e operazioni raster Ora dobbiamo dare all'utente la possibilità di disegnare linee. Per fare ciò, utilizziamo una linea standard "di gomma": l'utente preme il tasto sinistro del mouse e, tenendolo premuto, muove il mouse. Finché si tiene premuto il pulsante,
Dal libro dell'autore Dal libro dell'autoreLayout a più colonne Il layout a più colonne è qualcosa che manca nel Web design da molto tempo. I singoli appassionati lo hanno implementato da tempo utilizzando tabelle o contenitori, ma ora hanno mezzi "legittimi" per suddividere il testo in un numero arbitrario di colonne,
Dal libro dell'autore7 Layout I PRINCIPI DI ORGANIZZAZIONE DEI CONTENUTI E degli elementi dell'interfaccia utente, che vengono utilizzati nella progettazione di siti ordinari, possono essere senza dubbio utili nella progettazione di applicazioni web mobili. Ma come puoi essere sicuro che questi principi saranno rilevanti per chiunque
Vlad Merzevich
Il layout fluido a tre colonne è probabilmente il layout più flessibile e personalizzabile disponibile. La combinazione di percentuali e pixel per specificare le larghezze delle colonne consente di creare layout diversi, scegliendoli in base alle proprie esigenze. Sulla fig. La Figura 5.17 mostra le opzioni per i layout a tre colonne, per comodità sono numerate.
Riso. 5.17. Layout a tre colonne
Qui, il simbolo di percentuale (%) significa che la larghezza della colonna è impostata come percentuale della larghezza del layout, px - la larghezza della colonna è specificata in pixel e il segno di infinito (∞) che la colonna occupa lo spazio rimanente. Nonostante l'abbondanza di layout diversi, i principi della loro costruzione rimangono gli stessi e includono due metodi principali: posizionamento e elementi galleggianti. Puoi anche utilizzare le tabelle per creare colonne di uguale altezza.
Usando il posizionamento
Per controllare la posizione dei livelli rispetto all'elemento padre, imposta la proprietà position del genitore su relative e imposta gli elementi figlio che formano le colonne su absolute . La struttura del codice per i primi quattro layout sarà la stessa ed è mostrata nell'Esempio 5.13.
Esempio 5.13. Due colonne in pixel o tre in percentuale
Qui le colonne sono numerate in ordine, ad es. la colonna 1 è a sinistra, la colonna 2 è al centro e la colonna 3 è a destra.
Il posizionamento presenta un certo inconveniente che limita l'uso di questo metodo: quando si aggiunge un piè di pagina, sarà nascosto sotto le colonne. Questo perché il livello di layout non ha altezza di per sé, quindi non "spinge" il livello del piè di pagina verso il basso. Se un piè di pagina è assolutamente necessario in una pagina, dovresti usare il metodo di costruzione di colonne basate su elementi mobili. Inoltre, questo metodo non funziona in IE6 a causa della presenza di errori in esso.
Per il layout #1, in cui la larghezza della prima colonna è fluida e il resto è fisso, lo stile sarà il seguente (esempio 5.14).
Esempio 5.14. Disposizione n. 1
Intestazione ( sfondo: #D5BAE4; ) .layout ( posizione: relativa; /* posizionamento relativo */ ) .layout DIV ( posizione: assoluta; /* posizionamento assoluto */ ) .col1 ( sfondo: #C7E3E4; /* colore di sfondo * / sinistra: 0; /* Posizione del margine sinistro */ destra: 300px; /* Posizione del margine destro */ ) alla larghezza della colonna 3 */ ) .col3 ( sfondo: #ECD5DE; larghezza: 100px; destra: 0; )
Le colonne con una determinata larghezza hanno una proprietà width e la loro posizione a sinistra oa destra è specificata rispettivamente dalla proprietà left o right. La larghezza della gomma della colonna rimanente viene costruita dopo aver aggiunto contemporaneamente sinistra e destra, i cui valori sono gli stessi della larghezza delle colonne fisse.
I layout n. 2 (Esempio 5.15) e n. 3 (Esempio 5.16) sono costruiti sullo stesso principio.
Esempio 5.15. Disposizione n. 2
Header ( sfondo: #D5BAE4; ) .layout ( posizione: relativo; ) .layout DIV ( posizione: assoluta; ) .col1 ( sfondo: #C7E3E4; larghezza: 100px; ) .col2 ( sfondo: #E0D2C7; sinistra: 100px; a destra: 200px;) .col3 ( sfondo: #ECD5DE; larghezza: 200px; a destra: 0; )
Esempio 5.16. Disposizione n. 3
Intestazione ( sfondo: #D5BAE4; ) .layout ( posizione: relativa;) .layout DIV ( posizione: assoluta; ) .col1 ( sfondo: #C7E3E4; larghezza: 100px; ) .col2 ( sfondo: #E0D2C7; larghezza: 200px; sinistra: 100px; ) .col3 (sfondo: #ECD5DE; sinistra: 300px; destra: 0; )
Il layout n. 4, in cui la larghezza di tutte le colonne è data come percentuale, presenta alcune sfumature. Se è richiesta la stessa larghezza di tutte le colonne, può essere impostata in modo frazionario (33,33%), ma il browser Opera non sa come lavorare con valori percentuali frazionari, quindi appariranno dei "buchi" tra le colonne (Fig. 5.18 ).
Riso. 5.18. Larghezze delle colonne specificate in percentuali frazionarie
In tali situazioni, dovresti passare a quote disuguali, ad esempio 33%, 34%, 33%, come mostrato nell'esempio 5.17.
Esempio 5.17. Disposizione n. 4
Intestazione ( sfondo: #D5BAE4; ) .layout ( posizione: relativa;) .layout DIV ( posizione: assoluta; ) .col1 ( sfondo: #C7E3E4; larghezza: 33%; ) .col2 ( sfondo: #E0D2C7; sinistra: 33 %; larghezza: 34%; ) .col3 ( sfondo: #ECD5DE; destra: 0; larghezza: 33%; )
Alcuni browser potrebbero presentare un leggero spazio tra le colonne. Si risolve utilizzando non numeri interi, ma valori percentuali frazionari, ad es. 33,3% invece del 33%.
I restanti layout, in cui due colonne di tre sono in gomma, rappresentano un gruppo speciale, perché possono essere interpretati in modi diversi. Quindi, la larghezza di una colonna è indicata in pixel, l'altra come percentuale della larghezza del layout e la larghezza della restante viene calcolata automaticamente. Sulla fig. La Figura 5.19 mostra diversi approcci al calcolo delle larghezze delle colonne usando il layout n. 5 come esempio.
Riso. 5.19. Larghezza di due colonne di gomma
Nella prima opzione, la larghezza della prima colonna viene impostata come percentuale della larghezza del layout, la larghezza della seconda colonna viene calcolata automaticamente e la terza colonna ha una larghezza fissa in pixel. Nella seconda variante, le colonne cambiano tra loro e la larghezza della prima colonna viene calcolata automaticamente. La terza opzione presuppone che la larghezza totale delle colonne di gomma sia presa come 100% e che la larghezza della prima e della seconda colonna sia calcolata da essa.
La prima e la seconda opzione sono facilmente implementabili in modo simile al codice con due colonne in pixel. Solo al posto della larghezza in px specifichiamo%. L'Esempio 5.18 mostra lo stile di layout n. 5 con la prima colonna impostata come percentuale.
Esempio 5.18. Layout # 5. Viene calcolata la larghezza della seconda colonna
Intestazione ( sfondo: #D5BAE4; ) .layout ( posizione: relativa;) .layout DIV ( posizione: assoluta; ) .col1 ( sfondo: #C7E3E4; larghezza: 50%; ) .col2 ( sfondo: #E0D2C7; sinistra: 50 %; destra: 200px; ) .col3 ( sfondo: #ECD5DE; destra: 0; larghezza: 200px; )
Lo stile di layout n. 5 con una prima colonna calcolata è mostrato nell'Esempio 5.19.
Esempio 5.19. Layout n. 5. Viene calcolata la larghezza della prima colonna
Intestazione ( sfondo: #D5BAE4; ) .layout ( posizione: relativa;) .layout DIV ( posizione: assoluta; ) .col1 ( sfondo: #C7E3E4; sinistra: 0; destra: 200px; margine-destra: 50%; ) . col2 ( sfondo: #E0D2C7; larghezza: 50%; destra: 200px; ) .col3 (sfondo: #ECD5DE; larghezza: 200px; destra: 0; )
La prima colonna non può essere vincolata a destra tramite la proprietà corretta, poiché il valore sarà 50%+200px, non ci sono tali valori calcolati in CSS2. Quindi applichiamo lo stato attivo: limitiamo il primo livello a destra a una larghezza di 200px a destra e lo spostiamo a sinistra alla larghezza della seconda colonna del 50% usando margin-right . Il nostro strato è assolutamente posizionato, quindi tali macchinazioni non influiranno in alcun modo sulla larghezza.
La terza opzione con due colonne di gomma richiede un livello aggiuntivo, chiamiamolo rubber , rispetto al quale verrà impostata la larghezza delle colonne (esempio 5.20).
Esempio 5.20. Layout n. 5: larghezza percentuale a due colonne
La costruzione del layout n. 6 è simile al layout n. 5, quindi non ci soffermeremo su di esso. Per quanto riguarda il layout n. 7, esiste un'opzione che può causare difficoltà. Questo vale nel caso in cui si desidera calcolare la larghezza delle colonne sinistra e destra e renderle uguali tra loro. Per fare ciò, la larghezza della prima e della terza colonna dovrebbe essere pari al 50% (Fig. 5.20).
Riso. 5.20. Layout n. 7 colonne di uguale larghezza
Per lasciare spazio alla seconda colonna, utilizzare la proprietà margin-right per la prima colonna e margin-left per la terza. Il valore di queste proprietà sarà la metà della larghezza della seconda colonna. Quindi, se è 200px, allora è margin-right: 100px (esempio 5-21).
Esempio 5.21. Layout n. 7. La larghezza delle colonne di gomma è la stessa
Header ( sfondo: #D5BAE4; ) .layout ( posizione: relativa;) .layout DIV ( posizione: assoluta; ) .col1 ( sfondo: #C7E3E4; sinistra: 0; destra: 50%; margine-destra: 100px; ) . col2 ( sfondo: #E0D2C7; larghezza: 200px; sinistra: 50%; margine-sinistra: -100px; ) .col3 ( sfondo: #ECD5DE; sinistra: 50%; destra: 0; margine-sinistra: 100px; )
Non puoi usare direttamente la proprietà width, perché l'aggiunta di un margine aumenterà solo la larghezza, non la diminuirà come vogliamo. Pertanto, la larghezza è formata dalle proprietà sinistra e destra impostate contemporaneamente. Con il posizionamento della seconda colonna, è difficile specificare il valore left o right , poiché sarà pari a 50%-200px. Quindi impostiamo la posizione del margine sinistro su 50% (left : 50% ), quindi spostiamo l'intera colonna a sinistra di metà della sua larghezza tramite la proprietà margin-left (margin-left : -100px ).
Poiché la larghezza di alcune colonne viene calcolata automaticamente, si consiglia di limitare la larghezza minima del layout aggiungendo una proprietà min-width al selettore BODY. Quindi la larghezza delle colonne non diminuirà quando viene raggiunto il limite specificato.
BODY ( larghezza minima: 800px; /* Larghezza minima del layout */ )
Il valore di min-width dipende dal layout e dal contenuto della pagina e di solito viene scelto empiricamente.
Utilizzo di elementi fluttuanti
Gli elementi mobili sono un altro metodo versatile per costruire una varietà di layout a tre colonne. A differenza del posizionamento, ti consente di non preoccuparti del problema del piè di pagina, poiché il piè di pagina sarà sempre posizionato al suo posto sotto la colonna più alta.
Le colonne vengono create utilizzando la proprietà float in combinazione con le proprietà margin e width. A seconda del layout selezionato, cambia anche l'ordine delle colonne nel codice, i livelli seguono sempre per primi, a cui viene aggiunto float.
Layout n. 1. Prima colonna in gomma
La larghezza della seconda e della terza colonna è specificata in pixel e la loro posizione è specificata tramite la proprietà float con il valore right . Per la prima colonna è inoltre necessario impostare la proprietà margin-right con un valore uguale alla larghezza totale delle colonne rimanenti (esempio 5.22).
Esempio 5.22. Disposizione n. 1
Layout n. 2. Colonna centrale in gomma
Le larghezze della prima e della terza colonna sono espresse in pixel e le loro posizioni sono mobili con sinistra per la prima colonna e destra per la terza. La colonna centrale, per mantenerne l'aspetto, contiene la proprietà universale margin , che imposta il rientro a sinistra ea destra (esempio 5.23).
Esempio 5.23. Disposizione n. 2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout n. 3. Terza colonna di gomma
La posizione della prima e della seconda colonna è specificata tramite la proprietà float con il valore left , per la terza colonna è necessario impostare il margine sinistro (margin-left ) sulla larghezza totale delle colonne rimanenti (esempio 5.24).
Esempio 5.24. Disposizione n. 3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout n. 4: tutte le larghezze delle colonne sono impostate come percentuale
Per creare questo layout, funzioneranno molte opzioni basate sui layout precedenti, ma invece dei pixel, dovresti specificare le percentuali. Un altro modo è mostrato nell'Esempio 5-25, che usa solo le proprietà float e width.
Esempio 5.25. Disposizione n. 4
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Layout n. 5. Larghezza della gomma a due colonne
Sulla fig. 5.19, è stato mostrato che il layout n. 5, che ha due colonne di gomma, può essere interpretato in modi diversi.
- La larghezza della prima colonna è specificata come percentuale della larghezza del layout, la terza colonna è in pixel e la colonna centrale occupa lo spazio rimanente.
- La larghezza della seconda colonna è specificata come percentuale della larghezza del layout, la terza colonna è in pixel e la prima colonna occupa lo spazio rimanente.
- La larghezza totale delle due colonne di gomma viene presa come 100% e la larghezza delle colonne viene indicata come percentuale di questo valore.
Larghezza della colonna centrale calcolata
Qui, la larghezza della prima colonna è specificata in percentuale e la sua posizione è specificata tramite la proprietà float con il valore left , per la terza colonna, la larghezza è specificata in pixel e il valore della proprietà float come right . Per la colonna centrale, non resta che impostare i margini a sinistra ea destra rispetto alla larghezza delle colonne (esempio 5.26).
Esempio 5.26. Disposizione 5.1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Larghezza della prima colonna calcolata
Questo è il layout più complicato, perché la larghezza della prima colonna non è specificata direttamente. Ma per limitare il contenuto, devi specificare un valore per la proprietà margin-right che combini percentuali e pixel. In CSS2, come già accennato, questo non può essere impostato, quindi aggiungiamo un altro livello all'interno del livello col1 chiamato wrap e aggiungiamo un rientro a ciascuno di questi livelli. Uno in percentuale, l'altro in pixel (esempio 5.27).
Esempio 5.27. Disposizione 5.2
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Larghezza percentuale di due colonne
In questo layout, la larghezza complessiva delle colonne di gomma viene presa come 100%, quindi abbiamo bisogno di un livello aggiuntivo per fare riferimento alla larghezza delle colonne interne. Questo livello, chiamato gomma, funziona con il livello col3 come un layout a due colonne e gli strati interni col1 e col2 sono allineati orizzontalmente applicando la proprietà float (esempio 5.28).
Esempio 5.28. Disposizione 5.3
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
I layout 6, 7 e le loro variazioni si basano sullo stesso principio del layout n. 5, ad eccezione del layout n. 7, in cui la larghezza delle colonne sinistra e destra è di gomma e uguale tra loro.
Per prima cosa, prepariamo la base, specifichiamo l'ordine dei livelli nel codice HTML.
Col1 (larghezza: 50%; float: sinistra; ) .col2 (larghezza: 200px; float: sinistra; ) .col3 (larghezza: 50%; float: destra; )
Non è tutto, i livelli non formano ancora colonne e si allineano in un modo del tutto inappropriato per noi. Devi spostare la seconda colonna a sinistra della metà della sua larghezza (margin-left : -100px ) e forzare la terza colonna a posizionarsi. Per fare ciò, aumenta la sua larghezza in modo che sia uguale o maggiore di 50% + 100px (metà della seconda colonna). La proprietà margin-left con un valore negativo è la migliore, dopodiché verranno create le colonne. Ci sono alcune sfumature in più. Le colonne estreme sono unite tra loro, il che è chiaramente visibile quando la loro altezza supera l'altezza della colonna centrale (Fig. 5.21).
Riso. 5.21. Altoparlanti impilati
Inoltre, nella colonna di sinistra, il testo si trova a destra e nella colonna di destra il testo a sinistra è nascosto sotto lo sfondo della colonna centrale. Questo non sarà evidente se l'altezza di questa colonna è grande, ma ciò non è sempre possibile. Per ovviare a queste carenze, è necessario inserire uno strato in più all'interno delle colonne più esterne (nell'esempio si chiama wrap ) e già per esse impostare il colore di sfondo della colonna, i margini ei rientri necessari. Il codice finale è mostrato nell'Esempio 5.29.
Esempio 5.29. Disposizione n. 7
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Margini e bordi in un layout a tre colonne
La proprietà padding non è stata volutamente aggiunta agli esempi di layout forniti, poiché il codice funge solo da base per il layout e spetta a te decidere in casi specifici se sono necessari margini nelle colonne o meno. L'aggiunta di margini e bordi a un elemento di blocco ne aumenta la larghezza, che deve essere presa in considerazione durante il layout. Tuttavia, la larghezza aumenta solo se il livello è impostato su width . Diamo un'occhiata ad alcuni esempi in cui la larghezza cambierà e dove no.
Div ( /* riempimento influisce sulla larghezza */ larghezza: 200px; riempimento: 10px; ) div ( /* riempimento non influisce sulla larghezza */ posizione: assoluta; sinistra: 20px; destra: 20px; riempimento: 10px; ) div ( / * il padding influisce sulla larghezza */ float: left; width: 50%; padding: 10px; ) div ( /* il padding non influisce sulla larghezza */ margin-right: 50%; padding: 10px; )
In quelle colonne in cui è richiesto il riempimento o il bordo, ma aggiungerli interromperà il layout, puoi utilizzare il livello nidificato e impostare le proprietà necessarie per esso.
In questo esempio, la larghezza del livello impostata su 200 pixel non cambierà, ma verranno aggiunti i margini e il bordo.
Tabella come colonne
La tabella è utile per la creazione semplice e veloce di colonne della stessa altezza. Questa velocità è raggiunta da diverse cose. Innanzitutto, la struttura del codice per qualsiasi layout rimane la stessa, le colonne nel codice, come nel caso di float , non cambiano mai il loro ordine. In secondo luogo, la larghezza delle celle viene calcolata automaticamente in base al loro contenuto, quindi è sufficiente specificare la larghezza delle colonne richieste e le restanti si adatteranno alla larghezza totale della tabella. L'esempio 5.30 mostra il layout n. 1 realizzato su un tavolo.
Esempio 5.30. Disposizione n. 1
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Colonna 1 | Colonna 2 | Colonna 3 |
L'aggiunta di una proprietà di riempimento a un selettore TD sovrascrive l'attributo cellpadding del tag
