Nwlapcug.com


Come utilizzare livelli HTML

Strati in HTML offrono un modo più flessibile di presentare e organizzare le informazioni in una pagina Web che le vecchie tabelle di stile. Utilizzo dei livelli in software per la creazione Web come Dreamweaver CS3 o espressioni Web può sembrare semplice, ma può essere difficile. Informazioni sulla struttura del livello di codifica in HTML può evitare scrupoloso correzioni in più sofisticati programmi di progettazione web. Un avvertimento: il codice HTML viene inserito tra parentesi angolari (>) di destra e di sinistra (<). Nel breve tutorial di seguito, perché il codice vero e proprio si comporterebbe come HTML, staffe semplice sostituire parentesi angolari. In pratica, sostituire la sinistra ([]) e la parentesi destra (]) sotto con la parentesi sinistra e ad angolo retto.

Istruzioni

1Come utilizzare livelli HTML


Creare un documento HTML di base utilizzando un word editor come Microsoft Notepad o simili — non un programma di elaborazione testi. Digitare il seguente testo esattamente come appare nelle singole righe. Salvarlo sul desktop per un facile recupero di una file con estensione ". html" anziché l'impostazione predefinita "txt". [html] [stile tipo = "text/css"] [!... #apDiv1 {posizione: absolute; Larghezza: 200px; altezza: 115px z-indice: 1;} -] / [stile] [corpo] [div id = "apDiv1"] qui è la mia prima creazione di strato. [/div] / [corpo] / [HTML]

2Come utilizzare livelli HTML


Aprire un browser Web e selezionare "File/Apri". Individuare il documento dal percorso che è stato salvato nella finestra che appare. Se le parole "Qui è la mia prima creazione di strato" non vengono visualizzati, tornare indietro e verificare che tutto sia inserita esattamente come sopra.

3

Modificare la posizione e le dimensioni del livello della pagina Web, aggiungere un secondo strato e la pagina con colore di sfondo di fantasia. Apportare le seguenti modifiche al codice precedente. [html] [stile tipo = "text/css"] [!... #apDiv1 {posizione: absolute; altezza: 44px; sinistra: 350px; Top: 185px; z-indice: 1; background-color: #FFFF00;} #apDiv2 {posizione: absolute; Larghezza: 200px; altezza: 80px; z-indice: 1; left: 271px; top: 65px; background-color: #00FF00;} body {background-color: #0066FF;} -] [/ stile] [div id = "apDiv1"] qui è la mia prima creazione di strato. [/div] [div id = "apDiv2"] [h1 align = "center"] Ora mi sto fantasia [/ h1] [/div] / [corpo] / [HTML]

4Come utilizzare livelli HTML


Controllare il codice come nel passo 2, aggiornare la pagina prima di premere "F5" o "Visualizza/Aggiorna" nella barra degli strumenti del browser.

5Come utilizzare livelli HTML


Inserire immagini in strati utilizzando il tag HTML [img src] seguito dal nome del file immagine (jpg) tra virgolette all'interno della linea [div id]. Modificare il codice che inizia con le prime linee "#apDiv" per leggere come qui sotto. Si noti il layout di pagina..--altezza, larghezza, left e top - informazioni nelle definizioni di "#apDiv" è stato modificato per visualizzare entrambi gli oggetti chiaramente. Controllare l'immagine per vedere il risultato. < html >< stile tipo = "text/css" ><!... #apDiv1 {posizione: absolute; Larghezza: 175px; altezza: 44px z-indice: 1; sinistra: 50px; top: 400px; background-color: #FFFF00;} #apDiv2 {posizione: absolute; width: 150px; height: 100px; z-indice: 1; sinistra: 400px; top: 25px; background-color: #00FF00;} body {background-color: #0066FF;} --> < / stile >< div id = "apDiv1" >< img src="wheres_dinner.jpg" >< h2 > Dov'è la mia cena? < / h2 >< / div >< div id = "apDiv2" >< img src="relaxation.jpg" >< h2 > come rilassarsi. </h < / div >< / corpo >< / html >

6

Aggiungere azione ai livelli. Controllare le risorse aggiuntive per un esempio. Mostra questa pagina code-behind selezionando Visualizza/sorgente nel browser.

Consigli & Avvertenze

  • Modificare i nomi degli strati - il apDiv1, apDiv2..--a qualcosa di più significativo, ad esempio MyDiv1, MyDiv2. Assicuratevi solo i nomi corrispondono in entrambe le sezioni.
  • I rientri nel primo esempio di testo di livello non sono necessari, ma rendono il codice più facile da capire.
  • Strati creativi possono migliorare sito web graphic design. Il link nella sezione risorse aggiuntive confronta tabelle statiche ai livelli dinamici.
  • Ogni singolo segno di punteggiatura nel codice è fondamentale. Lasciare un punto e virgola o staffa e il risultato probabilmente sarà un disastro.
  • Ricordate quando si scrive il codice per modificare il [e] staffe a < e >.
  • Si tratta di HTML molto semplice codifica. Tuttavia, la maggior parte degli elementi della struttura dei livelli complicati sono qui.
  • Pagine Web complete hanno molti più elementi HTML, quali gli stili metatags e css.
  • Precedenti versioni dei browser potrebbero non essere in grado di visualizzare i layer.