Vlad Merzhevich
Il termine "design fisso" è usato per riferirsi a layout di pagina che viene creato in base ai livelli data larghezza... La scelta della larghezza dipende dall'orientamento su certa risoluzione monitor dell'utente. Quindi, per una risoluzione di 1024x768 pixel, la dimensione della tabella non dovrebbe essere superiore a 1000 pixel. Questa larghezza si ottiene sottraendo da 1024 la larghezza della barra di scorrimento verticale e il bordo della finestra del browser. Per tutti gli utenti, un sito costruito su tale layout verrà visualizzato correttamente, ma se grandi risoluzioni risulta essere troppo spazio vuoto... Poiché la risoluzione più popolare tra gli utenti di Internet è 1024x768, gli sviluppatori del sito sono guidati da essa e utilizzano la larghezza totale dei livelli 900-1000 pixel.
Con un design fisso, il blocco di materiale viene solitamente posizionato sul bordo sinistro o al centro dello schermo. L'ultima opzione preferibile, quindi i campi ampi intorno non sono così evidenti ad alte risoluzioni del monitor (Fig. 1).
Riso. 1. Tipico griglia modulare con design fisso
Denominazioni numeriche utilizzate in questa figura: 1 - titolo del sito; 2 - livello sinistro, di solito contiene elementi di navigazione; 3 - livello destro, contiene il contenuto della pagina; 4 - "piè di pagina", la parte inferiore della pagina web, di solito è posizionato al suo interno informazioni sui contatti e vari pulsanti.
Per creare il layout mostrato in Fig. 1, dovresti pensare ad alcuni punti preliminari: quale sarà la larghezza totale di tutti gli elementi; dove verrà posizionato il layout - al centro della pagina o sul bordo sinistro; quali colori e caratteri verranno utilizzati, ecc. I passaggi da eseguire prima di scrivere il codice sono descritti di seguito.
Larghezza dello strato
Il primo passo è determinare la larghezza totale degli elementi visivi della pagina web. Come accennato in precedenza, tale valore è determinato dal progettista stesso in base alla raccolta preliminare di dati sui futuri utenti del sito. Sebbene la maggior parte dei designer imposti la larghezza, che si chiama "dalla lanterna", in base alla propria convenienza. Quindi nell'esempio 1, utilizzando lo stesso principio, la larghezza di tutti i livelli è di 750 pixel.
Quindi, l'intera larghezza è nota, ora dobbiamo dividerla in due parti. Il livello contrassegnato con il numero 2 (Fig. 1) è riservato al menu, la sua larghezza dovrebbe essere minima, ma sufficiente per lettura confortevole testo. Rendiamolo un numero tondo, ad esempio 200 pixel. Tutto il resto sarà occupato dal contenuto.
Altezza degli strati
L'altezza del livello cambia dinamicamente a seconda del suo contenuto. Se desideri impostare tu stesso l'altezza del livello, puoi utilizzare la proprietà height e impostare l'altezza in pixel, percentuali o altro. Unità CSS... Tieni presente che con questo approccio, il contenuto del livello è sempre allineato al suo bordo superiore, quindi non dovresti impostare un'altezza troppo alta (esempio 1).
Esempio 1. Impostazione dell'altezza del livello
Allo stesso modo, l'altezza di un livello può essere modificata mediante padding modificando il valore di padding-top e padding-bottom (esempio 2). Ma questo metodo è meno versatile.
Esempio 2. Impostazione dell'altezza del livello utilizzando il padding
In questo caso, l'altezza del livello è la somma dei margini superiore e inferiore e l'altezza del contenuto che sarà centrato sulla verticale.
Se l'altezza del contenuto di un livello è maggiore della sua altezza, specificata dalla proprietà height, il browser lascia invariate le dimensioni del livello e il contenuto si sovrappone ad esso.
Allinea al centro
Se è necessario lasciare il layout allineato a sinistra della finestra, non è necessario fare nulla, questo effetto si verificherà da solo. Ma affinché il layout sia al centro della finestra del browser, sarà utile un altro livello aggiuntivo, che fungerà da scheletro e includerà tutti gli altri livelli. Chiamiamolo contenitore e scriviamo il seguente stile per esso (esempio 3).
Esempio 3. Allineamento al centro
Le proprietà margin-right e margin-left con valore auto imposta l'allineamento del livello al centro della pagina web. Nello stesso selettore indichiamo anche la larghezza totale di tutti i livelli.
L'allineamento a destra del layout di una pagina Web di solito non viene mai eseguito: viene utilizzato l'allineamento al centro o a sinistra.
Indentare una pagina web
Orizzontale e imbottitura verticale dal bordo del browser al contenuto delle pagine web sono integrati nel browser predefinito. Tuttavia, è possibile modificare il valore di queste proprietà inserendo più o meno rientri come desiderato. Ad esempio, puoi impostare il rientro dal bordo superiore della finestra al titolo della pagina o persino rimuoverlo del tutto.
I rientri sono impostati dalle proprietà Margine CSS e imbottitura per il selettore BODY. La presenza di due proprietà invece di una, richiede ancora gli interessi di browser diversi, margine - Internet Explorer mentre il riempimento proviene da Opera e Firefox. La combinazione di diverse proprietà assicura che la pagina web venga visualizzata in browser diversi sarà lo stesso.
Puoi controllare il riempimento individuale da diversi bordi dello schermo con le proprietà margin-top, margin-bottom, margin-right e margin-left, che modificano di conseguenza la distanza dai bordi superiore, inferiore, destro e sinistro della finestra del browser . Prima di usarli, dovresti impostare la proprietà margin su zero (esempio 4).
Esempio 4. Modifica del riempimento superiore dal bordo del browser
Colori
I CSS hanno diverse opzioni per definire il testo e il colore di sfondo di un livello. La proprietà color specifica il colore del testo nel livello e lo sfondo specifica il colore di sfondo (esempio 5).
Esempio 5. Cambio di colore
Il colore di sfondo per il livello del menu nell'esempio è impostato su verde scuro e il colore del testo è bianco.
Quando si imitava un altro progetto (o si progettava semplicemente una griglia di layout), molti si trovavano di fronte a un dilemma: utilizzare una larghezza di layout fissa o una griglia "di gomma" che si adattasse alle dimensioni della finestra del browser.
Ognuna di queste soluzioni ha i suoi pro e contro, voglio soffermarmi sui contro, poiché di solito è tra due mali che si deve scegliere tra due mali proprio nel rispecchiare gli svantaggi di queste decisioni.
Griglia di layout a larghezza fissa
Il layout è guidato in una dimensione orizzontale di 960-980 pixel (in modo che sulla maggior parte dei dispositivi nella maggior parte delle risoluzioni tutto sia incluso), che con finestre di grandi dimensioni orizzontali sembra in qualche modo freddo - sottile striscia verticale contenuto della pagina utile ed enormi margini inutili di spazio sprecato sui lati.Griglia di layout "gomma" alla larghezza della finestra
Anche in questo caso, con finestre di grandi dimensioni orizzontali, c'è un altro problema: le righe di testo diventano molto lunghe e non diventa per niente comodo leggerle come vorremmo.Un altro problema comune a questa soluzione è che i margini laterali per le grandi dimensioni delle finestre orizzontali non sono più visivamente coerenti con le dimensioni orizzontali degli elementi, il che non aggiunge comfort durante la visualizzazione del layout.
Voglio proporre una soluzione semplice: limitare la dimensione orizzontale minima a un valore fisso in pixel e rendere il massimo come percentuale della larghezza della finestra. Questo è molto comune. con mezzi semplici Altre 2 versioni della specifica CSS.
Aggiornare: Voglio fare una riserva sul fatto che non stiamo parlando del classico effetto gomma e dell'adattamento a tutte le risoluzioni, ma piuttosto solo di una certa ragionevole gamma di risoluzioni per cui è progettato il layout. Negli esempi seguenti, questo è un classico intervallo di risoluzione desktop con una dimensione orizzontale di 1024 pixel o più.Vorrei sottolineare ancora: il post non parla di una soluzione per tutti i tipi di dispositivi e tutte le gamme di risoluzione. Nell'ambito di un layout, questo compito non può essere risolto in linea di principio., per risolverlo in un modo o nell'altro, sono necessari diversi layout. Vola separatamente, cotolette separatamente.
Crea un contenitore di layout:
...
Lo decoriamo con un semplice codice di stile:
div.page-container (min-width: 960px; max-width: 75%; margin: 0 auto; padding: 0;)
Tuttavia, questa soluzione potrebbe non sembrare sufficiente a qualcuno a causa del fatto che con finestre di dimensioni orizzontali molto grandi, si verificano nuovamente problemi con le lunghezze delle linee. Ciò si risolve con una tecnica aggiuntiva altrettanto semplice: creare un ulteriore contenitore esterno all'interno di quello già descritto e limitarlo larghezza massima valore fisso (soggettivamente mi sembra che i valori nell'intervallo 1400-1600 pixel siano più adatti). Ancora una volta, usiamo solo Strumenti CSS 2.0. Una soluzione del genere invece di quella suggerita nel primo commento semplice addizione le larghezze in percentuale per il contenitore originale funzioneranno anche in IE, che fino alla versione 9 non comprende la specifica simultanea dei valori.
HTML integrativo:
E cambia leggermente il CSS:
div.page-container (larghezza massima: 75%; larghezza minima: 960 px; margine: 0 auto; riempimento: 0;) div.page-container-inner (larghezza minima: 960 px; larghezza massima: 1600 px; margine : 0 automatico; riempimento: 0;)
Come puoi vedere, la soluzione è estremamente semplice e abbastanza versatile, può essere applicata a qualsiasi elemento del blocco.
Quando creiamo una carta intestata, Tabella delle parole, abbiamo bisogno che durante il riempimento delle celle la loro dimensione non cambi, in modo che la tabella non si muova. Per fare ciò, è necessario installare dimensione della cella fissa nella tabellaParola
... Come creare un opuscolo in Word, vedi nell'articolo"Crea un libretto in Word".
Come modificare l'altezza della riga in una tabellaParola.
Per modificare la larghezza di righe e colonne, devi prima selezionarle.
Prima opzione.
Si consiglia di andare alla scheda "Layout di pagina" nelle "Impostazioni di pagina" e nella scheda "Linea" per mettere misura giusta stringhe. Nella scheda "Colonna" imposta la dimensione di ogni colonna. 
Come appuntare una tabella aParola.
Per evitare che il tavolo si muova Foglio di parole, nella scheda "Tabella", premi il pulsante "Intorno". Fare clic sul pulsante "Posizionamento" - configurare i parametri di posizionamento della tabella.
Seconda opzione.
Fare clic sulla tabella e sulla scheda "Layout" regolare le dimensioni di righe e colonne. Nella sezione "Dimensione cella", fai clic sul pulsante "Adattamento automatico". Se premiamo " larghezza fissa colonna ", la larghezza della colonna non cambierà quando la cella viene riempita. 
Ma la cosa divertente è che in alcuni versioni di Word, una finestra Imposta pagina completamente diversa. Non ci sono schede Riga e Colonna.
Come congelare l'altezza e la larghezza della linea colonna Parola
, in questo caso. 
Primo sul pannello accesso veloce posizionare il pulsante per la funzione "Proprietà tabella". Spingere pulsante "Personalizza barra di accesso rapido"(pulsante "triangolo con trattino"). Selezioniamo la funzione "Altri comandi".
Questo pulsante è apparso sulla barra di accesso rapido e si chiama Proprietà tabella. Diventa attivo quando clicchiamo sulla tabella.
Abbiamo bisogno fissare l'altezza delle righe nella tabellaParola.
Nella sezione "Altezza riga" della finestra di dialogo, imposta "Esattamente". E nella riga "Valore" mettiamo il numero dell'altezza della riga. Ma il valore non è in mm. o vedere, e in PT. PT è un punto.
1 punto = 0,35 mm. Più facile: l'altezza standard della riga nella tabella è 12 pt. Altezza foglio A4 Orientamento verticale- 878 pt (29 cm senza bordi).
Mettiamo "48 pt". Deseleziona la casella accanto alle parole "Consenti a capo automatico su pagina successiva».
Fare clic su "OK". Si è scoperto così.
