Come fare una pagina web con una zona di Top & barra laterale sinistra

November 14

Come fare una pagina web con una zona di Top & barra laterale sinistra


La grande varietà di layout di pagina Web che si vede in una sessione informale navigazione sul Web è ampia prova della natura altamente configurabile di questi documenti. Due linguaggi di programmazione che consentono questo elevato livello di configurazione sono Hypertext Markup Language (HTML) e fogli di stile a cascata (CSS), che viene applicato all'interno di HTML. Gli sviluppatori Web utilizzano queste lingue per creare, tra gli altri layout di pagina, quello comune, aventi una superficie superiore e barra laterale. Il vantaggio di questa configurazione è il senso di familiarità che conferisce a chi la visualizzazione della pagina.

istruzione

1 Fare clic su "File", poi "Nuovo" in qualsiasi word processor per creare un nuovo documento.

2 Incolla (o tipo) il seguente pagina Web vuota nel documento:

<Html>

<Body>

</ Body>

</ Html>

3 Digita il codice HTML alla fine di questa fase qualsiasi punto tra il "<body>" e "</ body>" tag. Questo codice crea un'area rettangolare (chiamato "divisione", "div" abbreviato) con testo nella parte superiore della pagina.

<Div style = "border-style: solido">

<P>

Questo è il top!

</ P>

</ Div>

4 Salvare il documento come tipo "Testo normale" e con qualsiasi nome che termina con ".htm", così Finestra apre il documento con il programma corretto (un browser Web).

5 Fare doppio clic su (in Windows Explorer) il file appena salvato. Il browser visualizzerà il testo delimitato ( "Questo è il top!").

6 Tipo, nel documento aperto nel word processor, la seguente riga al posto della linea che inizia con "<div style":

<Div style = "position: absolute; sinistra: 200px; top: 30px; border-style: solido">

Questa linea posiziona il rettangolo tenendo il testo in un luogo specifico sullo schermo del tuo browser. Con la creazione di altri due div e specificando le loro posizioni sullo schermo, è possibile creare un layout di pagina con una superficie superiore e una barra laterale di sinistra. Le istruzioni rimanenti mostrano come creare un tale layout.

7 Incollare il seguente codice HTML dopo il "</ div>" dichiarazione di cui sopra. Questo codice crea il rettangolo nel corpo del documento (vicino al centro dello schermo del browser).

<Div style = "position: absolute; sinistra: 200px; top: 300px; border-style: solido">

<P> Questo è il corpo principale!

</ P>

</ Div>

8 Incollare il seguente codice HTML, che costituisce la barra laterale sinistra, dopo il tag "</ div>" dal passaggio precedente.

<Div style = "position: absolute; sinistra: 20px; top: 300px; border-style: solido">

<P>

Questa è la barra laterale di sinistra!

</ P>

</ Div>

9 Salvare le modifiche al documento premendo "Controllo S", quindi premere "F5" nel browser per aggiornare la pagina Web con le modifiche. Il browser visualizzerà una pagina con una superficie superiore e barra laterale.