Quando si progettano siti, spesso si deve risolvere una domanda fondamentale: quale sarà il comportamento della pagina quando verrà aperta con diverse risoluzioni dello schermo? Ci sono due opzioni qui: pagine del sito "in gomma" (allungamento) o statiche. Verrà discussa la prima opzione. Qualunque sia la tua preferenza per il layout, il principio principale del design stretch è la relativa scalabilità.
È necessario
- - conoscenza dell'HTML;
- - programma per la modifica del codice html.
Istruzioni
Passo 1
Seleziona il file principale per il modello del tuo sito, che rifletterà il markup principale. Può essere un file index.html o index.php. Uno dei migliori software di modifica dei modelli di siti visivi è Macromedia Dreamweawer. Le modifiche necessarie verranno eseguite sulla base di questo programma.
Aprire il file modello o crearne uno nuovo con il comando "File" - "Nuovo", categoria - "Pagina base" - "HTML" o categoria "Pagina dinamica" - "PHP". Consideriamo qui il caso generale in cui la struttura del sito è registrata esattamente in uno dei due file.
Passo 2
Non è stato a lungo un segreto che esistono diversi tipi di layout: su tabelle, su blocchi div e combinati (tabelle e blocchi allo stesso tempo). Il tag html è responsabile del layout della tabella
Specifica una percentuale (100%) per ogni proprietà. Ciò otterrà l'effetto di allungare automaticamente le celle della tabella sugli schermi con qualsiasi geometria. Può essere un monitor da 19 pollici o uno smartphone: ognuno di essi riprodurrà correttamente il contenuto.
Passaggio 3
Se è necessario specificare esattamente la corrispondenza tra le celle della tabella, utilizzare il seguente esempio:
| … … il contenuto della cella 1. … | … … il contenuto della cella 2. … |
Qui vedrai che una delle celle è specificata con una larghezza del 30% di tutto ciò che è definito per la tabella stessa. Un semplice calcolo mostra che rimane 100% -30% = 70% per la seconda cella. Ricorda che in questo caso una delle celle della tabella non deve avere l'attributo width impostato. Il browser eseguirà tutti i calcoli da solo e allungherà correttamente la tabella con le celle. Anche il contenuto all'interno delle tabelle si estenderà e si ridurrà correttamente su schermi diversi.
Passaggio 4
In una situazione con un layout div, i blocchi di tag vengono estesi per impostazione predefinita all'intera larghezza dello schermo e si susseguono uno dopo l'altro da sinistra a destra, dall'alto verso il basso. Per affinare la loro geometria, creare una classe CCS o identificatore (ID), in cui si specificano, ad esempio, gli attributi e/o per la categoria di dimensione e posizione della scatola (Box). Non dimenticare di collegare lo stile specificato al file di markup del sito e associare la classe (ID) al tag desiderato. Di solito è posizionato all'inizio dello script, definendo tutta la futura geometria del sito:
… … contenuto del sito. …
O così:
… … contenuto del sito. …
Il codice per la regola CSS sarà il seguente:
… la mia classe {
larghezza: 30%;
altezza: 50%;
}
#mioID {
larghezza: 30%;
altezza: 50%;
}
