May 16
Di solito, creando il layout di una pagina web è fatto con fogli CSS, o di stile CSS. Tuttavia, nella programmazione dei computer, non vi è più di un modo di fare tutto, e qualsiasi tipo di layout che si vuole costruire può essere ottenuta anche utilizzando JavaScript. Con JavaScript, il layout è formata dinamicamente quando la pagina viene caricata nel browser di un utente.
1 Aprire un documento di testo o HTML vuoto e salvarlo come \ "a tre colonne-test.html. \" JavaScript può essere incorporato nel codice HTML, che è il motivo per cui si sta salvando il documento con una normale estensione HTML.
2 Creare la struttura della pagina di base. Dal momento che si stanno facendo un blog a tre colonne, creare tre \ elementi "div \" e dare loro ciascuno un nome utilizzando la "id \" attributo \. L'intera pagina dovrebbe essere simile a questa:
<Html>
<Head>
<Title> Tre colonna Blog </ title>
</ Head>
<Body>
<Div id = \ "nella colonna di sinistra \"> Sinistra Sidebar </ div>
<Div id = \ "middle-colonna \"> Content Goes Here </ div>
<Div id = \ "diritto-colonna \"> barra laterale destra </ div>
</ Body>
</ Html>
3 Aggiungere il codice JavaScript per la parte inferiore della pagina, a destra prima del </ body> tag di chiusura. Impostare un posto per scrivere il codice con il \ "lo script \" e \ "significanti CDATA \":
<Script type = \ "text / javascript \">
// <! [CDATA [
// Codice JavaScript va qui //
//]]>
</ Script>
4 Creare un array contenente tutte le \ "div \" elementi della pagina utilizzando il \ "getElementsByTagName \" metodo, e il nome \ "allMyDivs: \"
allMyDivs = document.getElementsByTagName (\ "div \");
5 Creare un ciclo per scorrere ogni \ "div \" nella matrice:
for (var i = 0; i <allMyDivs.length; i ++) {
// Fare qualcosa per ogni div qui //
}
6 All'interno del ciclo, specificare regole di stile per ogni \ "div \" con l'oggetto \ "stile \":
for (var i = 0; i <allMyDivs.length; i ++) {
allMyDivs [i] .style.width = \ "200px \"
ANDARE
allMyDivs [i] .style.height = \ "500px \"
ANDARE
allMyDivs [i] .style.border = \ "solido \ nero 1px"
ANDARE
allMyDivs [i] .style.cssFloat = \ "\ sinistra"
ANDARE
allMyDivs [i] .style.margin = \ "10px \"
ANDARE
}
Queste regole particolari renderanno ogni \ "div \" 200 pixel di larghezza, 500 pixel di altezza, tutti affiancati, con margini di 10 pixel.
7 Metterli tutti insieme. L'intero struttura del documento dovrebbe essere simile a questo:
<Html>
<Head>
<Title> Tre colonna Blog </ title>
</ Head>
<Body>
<Div id = \ "nella colonna di sinistra \"> Sinistra Sidebar </ div>
<Div id = \ "middle-colonna \"> Content Goes Here </ div>
<Div id = \ "diritto-colonna \"> barra laterale destra </ div>
<Script type = \ "text / javascript \">
// <! [CDATA [
allMyDivs = document.getElementsByTagName (\ "div \")
ANDARE
for (var i = 0; i <allMyDivs.length; i ++) {
allMyDivs [i] .style.width = \ "200px \"
ANDARE
allMyDivs [i] .style.height = \ "500px \"
ANDARE
allMyDivs [i] .style.border = \ "solido \ nero 1px"
ANDARE
allMyDivs [i] .style.cssFloat = \ "\ sinistra"
ANDARE
allMyDivs [i] .style.margin = \ "10px \"
ANDARE
}
//]]>
</ Script>
</ Body>
</ Html>
Salvare il file e aprirlo in un browser per vedere i cambiamenti.
8 Aggiungere il codice per il tuo blog e le informazioni barra laterale all'interno di ogni rispettivo elemento \ "div \".