Il design di qualsiasi sito si basa su immagini e colori di sfondo, come una casa su una fondazione. Se desideri sostituire le fondamenta tipiche della tua risorsa Internet con qualcosa di più individuale, allora dovresti iniziare con lo sviluppo del design. E quando sarà pronto, rimarrà la parte prettamente tecnica, ovvero sostituire il vecchio design dello sfondo del sito specificato nel codice sorgente delle pagine con quello nuovo. Ci sono diversi modi per implementarlo nella pratica.
Istruzioni
Passo 1
Per prima cosa devi scoprire in quale dei modi è impostato lo sfondo nella versione corrente del sito. Per fare ciò, apri il codice HTML della pagina. Puoi farlo con un semplice editor di testo scaricando in anticipo il file dal server. Oppure puoi utilizzare l'editor delle pagine del sistema di gestione dei contenuti, se ne usi uno. L'editor di pagine non richiede il download del file, ma lo modifica direttamente sul server utilizzando il browser come interfaccia. Il codice HTML (HyperText Markup Language) della pagina che si apre è costituito da righe di istruzioni per il browser. Descrivono i tipi, l'aspetto e la posizione di ciascuno degli elementi di una pagina web. Queste istruzioni sono comunemente chiamate "tag". Anche l'ordine dei tag stessi nel codice della pagina obbedisce alle regole del linguaggio HTML: sono divisi in blocchi, il primo dei quali deve essere un blocco di intestazione che inizia con un tag e termina. Dovrebbe essere seguito dal blocco che ti interessa di più ora: il corpo del documento. È limitato a tag e. Nel tag di apertura di questo blocco (), puoi inserire informazioni sullo sfondo della pagina. Tali informazioni all'interno dei tag sono chiamate "attributi". L'attributo del tag body che imposta il colore di sfondo è indicato come bgcolor e nel codice potrebbe apparire così: Qui impostiamo il colore di sfondo per la pagina su argento. Il browser può riconoscere alcuni colori dai loro nomi, ma per non sbagliare è meglio indicare i loro codici esadecimali. Questa versione con il colore argento nell'espressione esadecimale sarà simile a questa: Quindi, devi trovare il tag che inizia con <body nel codice della pagina e controllare se ha un colore di sfondo. In tal caso, sostituisci l'indicazione del colore al suo interno con la tua nuova versione e salva le modifiche alla pagina.
Passo 2
Lo sfondo nel design attuale del tuo sito può essere impostato non dal colore, ma da un'immagine. L'attributo corrispondente del tag body è chiamato background e può apparire così nel codice: Qui, lo sfondo è l'immagine bg.jpg
Passaggio 3
Quando si descrive l'aspetto di pagine con un design relativamente complesso, utilizzare "fogli di stile a cascata" - CSS (fogli di stile a cascata). I blocchi di codice CSS possono essere inseriti direttamente nel codice della pagina o contenuti in un file esterno con estensione "css". Devi cercare il tag di descrizione dello stile che inizia con <style nella parte dell'intestazione del codice della pagina (tra i tag e). Se contiene un collegamento a un file esterno, sarà simile a questo: @import "style.css"; Ecco un collegamento a un foglio di stile chiamato style.css. È necessario aprire il file specificato per la modifica. E se non c'è alcun collegamento e dopo il tag di apertura <style ci sono istruzioni di stile, allora devi modificarle qui. In entrambe le opzioni, tra le descrizioni degli stili, bisogna cercare quelle relative al corpo del documento (body). Questo blocco di descrizioni potrebbe avere questo aspetto: body {
colore di sfondo: argento;
colore nero;
} Qui devi sostituire il valore del parametro background-color con il valore del tuo nuovo colore e meglio con gli stessi valori esadecimali. L'opzione dell'immagine di sfondo nelle istruzioni CSS dovrebbe essere simile a questa: body {
sfondo: # C0C0C0 url (img/bg.jpg) ripeti-y;
colore nero;
} Qui il collegamento all'immagine è simile a quello discusso sopra, e # C0C0C0 prima del collegamento significa che lo spazio della pagina che non è occupato dall'immagine di sfondo avrà uno sfondo argentato. "Ripeti-y" indica che l'immagine di sfondo deve essere moltiplicata lungo l'asse Y (verticale)."Repeat-y" può essere sostituito con "repeat-x" (replica orizzontale) o "no-repeat" (non replicare). Se non specifichi affatto la ripetizione, l'immagine di sfondo verrà affiancata allo spazio di sfondo della pagina in tutte le direzioni.
