Come Impostare lo Sfondo di Una Pagina HTML

In questo Articolo:Stili:

Aggiungere un'immagine di sfondo alla tua pagina web può aiutarti a renderla più vivace. In questo breve articolo ti verrà spiegato sommariamente come aggiungere un'immagine di sfondo al tuo sito. Puoi anche combinare il CSS (Cascading Style Sheet) con l'HTML per ottenere risultati particolari. l'HTML viene utilizzato per creare la struttura della pagina web mentre il CCS applica uno stile alla struttura - senza HTML comunque, non avrai nulla a cui applicare lo stile.

Passaggi

  1. 1
    Apri il file main.css in un editor di codici. Il file main.css contiene una lista di tutte le classi e id CSS pertinenti alla main content area (area contenuti principale) della pagina web in ordine alfabetico. Queste classi non dovrebbero mai essere cambiate. Gli ID sono elencati dopo le classe e sono anch'essi disposti in ordine alfabetico.
    • Non dare per scontato che i codici preconfezionati funzionino: Molti siti web offrono dei "div overlay" preconfezionati guidandoti poi all'inserimento dell'immagine nel codice della tua pagina web ma non sempre funzionano.
    • Devi capire che la struttura del sito web viene definita tramite le classi CSS per gli elementi HTML. Queste classi contengono anche le informazioni riguardo l'aspetto finale della pagina HTML quando viene visualizzata in un browser. Usa l'HTML per il contenuto; il CSS per la presentazione. La pagina che visualizzi viene codificata in HTML mentre le nuove strutture da definire sono limitate allo stile definito negli ID e le classi CSS. La pagina finale verrà costruita applicando questi elementi nella struttura HTML.
  2. 2
    Crea ed imposta lo sfondo come parte della sezione BODY per ogni pagina definita nel file .css. Nella parte più alta del file CSS che hai aperto, potresti provare ad aggiungere un codice simile a quello che vedi negli esempi seguenti:
    • Attenzione, c'è un eccezione: Questa immagine potrebbe anche essere impostata tramite il foglio di stile. Infatti, potresti scegliere di visualizzare, tramite il CSS, uno sfondo bianco o a caselle affiancate, impostate nel foglio di stile, oppure potresti ignorare il foglio di stile e impostare lo sfondo come negli esempi.
    • BODY { text-align:center; background: url(img/name_of_picture.jpg) center; } /* inserire commento qui */
      • Se hai un’immagine grande come l’intera pagina aggiungi “no-repeat”, dopo “center”, nell’esempio precedente altrimenti l’immagine verrà visualizzata sottoforma di mattonelle ripetute
  3. 3
    Lo sfondo può venire impostato in diversi modi. Ecco altri esempi:
    • BODY { background: url(banner.jpeg) 50% 0% }
    • BODY { background-image: url(banner.jpeg); background-position: top center; }
    • BODY { background: url(banner.jpeg) top left }
    • BODY { background: url(banner.jpeg) 0% 0% }
    • P { background: URL(chess.png) gray 50% repeat fixed }
  4. 4
    Come indirizzo dell’immagine, però, dovrai inserire quello dell’immagine sul server.
  5. 5
    Guarda i risultati: Dopo aver scritto i codici di cui sopra. Salva il documento e apri il tuo sito per vedere il risultato!

Stili:

  1. 1
    Impara ad utilizzare i tre tipi di stili evitando codici disordinati e ridondanti. [1]

Evita gli “inline styles” scritti direttamente nelle tag della pagina web. Gli inline styles hanno effetto solo sulle tag in cui sono stati applicati, ad esempio: <a href="" style="text-decoration: none;"> Evita gli “embedded styles”, ovvero gli stili integrati nell’head della pagina web. Gli embedded styles sono inutili e ridondanti perché devono essere sempre ripetuti, dato che hanno effetto solo sulle tag in cui vengono inclusi, ad esempio: <style type="text/css"> p { color: # 00f; }</style> Collega la pagina verso “stili esterni” scritti in un documento separato e collegati alle diverse pagine web del sito web. In questo modo, dovrai scrivere meno codice. I CSS esterni possono funzionare su qualsiasi pagina a cui vengono collegati, ad esempio: <link rel="stylesheet" type="text/css" href="styles.css" />

  1. 1
    Utilizzando gli stili CSS per standardizzare elementi come banner, colonne, font, dimensioni e immagini puoi rendere il tuo sito più leggero e veloce.
  2. 2
    Come già detto, ogni pagina collegata al CSS (tramite un link nel CSS stesso) presenterà le stesse caratteristiche delle altre pagine linkate allo stesso CSS. Puoi naturalmente utilizzare più CSS per più pagine o anche combinarne due o più.

Consigli

  • Embedding – nell’ambito del computer – significa integrare testi, immagini, file audio, video e codici in un documento HTML oppure un software.
  • Potresti dover apportare modifiche al CSS per cambiare lo sfondo.
  • I “div overlay” sono diventati un metodo popolare per abbellire pagine web o profili di social networks senza la necessità di conoscere a fondo l’HTML. Per utilizzarli, devi trovare prima di tutto il codice che preferisci applicare alla tua pagina e poi inserirlo nel codice HTML della pagina stessa. Naturalmente, devi accertarti prima che il codice che stai usando sia compatibile con il tuo sito o sia permesso dal social network o dalla piattaforma di qualsiasi cosa tu stia modificando. Esistono molti siti che ti permettono di creare i tuoi div overlay. Non è necessario avere una grande conoscienza dell’HTML per fare ciò ma è comunque importante almeno un’infarinatura di base dato che ti troverai ad utilizzare i fogli CSS. [2]

Avvertenze

  • Le istruzioni HTML che inserisci nel codice potrebbero non essere permesse dalle impostazioni di stile nel file CSS.

Riferimenti

  1. http://webdesign.about.com/od/css/qt/aatypesofcss.htm webdesign.about.com -- css -- aatypesofcss.htm
  2. http://www.reference.com/motif/computers/premade-div-overlay reference.com -- "Premade div overlay"

Informazioni sull'Articolo

Categorie: Programmazione | Internet

In altre lingue:

English: Set a Background Image in HTML, Español: fijar una imagen de fondo en HTML, Português: Definir um Plano de Fundo em HTML, Русский: добавить фоновое изображение в HTML, Deutsch: Ein Hintergrund Bild in HTML einfügen, Bahasa Indonesia: Mengatur Gambar Latar di HTML, Français: définir une image en fond de page en HTML, Nederlands: Een achtergrondafbeelding toevoegen aan HTML, ไทย: ใส่ภาพพื้นหลังด้วย HTML, العربية: ضبط صورة خلفية في لغة اتش تي ام ال, 한국어: HTML 배경화면 지정하는 법, Tiếng Việt: Thiết lập hình nền trong HTML, 日本語: HTMLで背景画像を設定する, हिन्दी: HTML में बैकग्राउंड इमेज सेट करें (Set a Background Image in HTML), 中文: 设置HTML背景图片, Türkçe: HTML'de Arka Plan Resmi Nasıl Belirlenir

Questa pagina è stata letta 5 775 volte.
Hai trovato utile questo articolo?