Date post: | 13-Jun-2015 |
Category: |
Technology |
Upload: | ninam87 |
View: | 408 times |
Download: | 0 times |
Laboratorio Informatico Web
A.A. 2007/2008di Davide Di Blasi
Laboratorio Informatico Web 07/08 1
Promemoria per il Web
Questo promemoria vuole essere una guida per l’organizzazione e creazione di pagine web.
Vi assisterà in maniera dettagliata, passo per passo, dalla creazione della cartella principale, sino alla messa online.
Laboratorio Informatico Web 07/08 2
Passo n.1
Crea una cartella sul desktop, nomila a tuo piacimento. Questa sarà la cartella principale del sito.
All’interno crea due cartelle: img CSSQui verranno inserite rispettivamente le
immagini del sito e il file .css
Laboratorio Informatico Web 07/08 3
Passo n.2
Apri il programma DREAMWEAVER (qualunque versione tu abbia), vai sulla barra dei menu -> sito -> nuovo sito
Laboratorio Informatico Web 07/08 4
Dovrebbe apparire una maschera di input simile a questa: ti richiede di inserire il nome del sito, e l’eventuale indirizzo web (questo puoi anche non inserirlo.)
Passo n.3
Le schermate successive ti chiederanno:1. Se vuoi usare una tecnologia server -> seleziona NO.2. Selezionare la cartella principale del sito (la tua è sul desktop ;-) )3. Come ti connetti al server -> nessuno (none in inglese)
Laboratorio Informatico Web 07/08 5
FATTO!
Passo n.4
Il sito è stato creato. Sulla barra destra, nella finestra ‘file’ di
dreamweaver troverai la cartella principale, al cui interno ci saranno la cartella ‘img’ e quella ‘CSS’.
Laboratorio Informatico Web 07/08 6
Passo n.5
Adesso è ora di creare la nostra prima pagina: il file index.html
Sulla barra dei menu clicca su -> file -> nuovo.Qui si aprirà una maschera; seleziona:1. Categoria -> pagina di base2. Pagina di base -> HTML
Inoltre, se è presente spuntare la casella “rendi xhmtl compatibile”.
Laboratorio Informatico Web 07/08 7
Passo n.6
Creato il nuovo file, Dreamweaver ha inserito automaticamente l’ossatura della pagina: dichiarazione del DOCTYPE, elemento <html>, <head>, <title>, <body>.
*ATTENZIONE! In alcune versioni di Dreamweaver è possibile che prima della dichiarazione del DOCTYPE inserisca anche questo: <?xml version="1.0" encoding="UTF-8"?> cancellala! Potrebbe dare problemi con Internet Explorer 6
Laboratorio Informatico Web 07/08 8
Passo n.7
Crea il MARKUP strutturale (XHTML) della pagina web (i 3 div di classe wrapper che conterranno il resto del sito di class):
<div id=“header” class=“wrapper”></div>
<div id=“content” class=“wrapper”></div>
<div id=“footer” class=“wrapper”></div>
Laboratorio Informatico Web 07/08 9
Passo n.8
Fermiamoci un attimo con l’XHTML e creiamo il nostro file css, che ci permetterà di modificare la struttura e l’apparenza grafica del sito:
Sulla barra dei menu di Dreamweaver, seleziona file -> nuovo
Qui si aprirà una maschera; seleziona:1. Categoria -> pagina di base2. Pagina di base -> CSS
Laboratorio Informatico Web 07/08 10
Passo n.9
Crea le 3 rules base dei CSS:*{margin:0;padding:0;}html{margin:0;padding:0;font-family:Arial, Helvetica, sans-serifbackground:url(../img/nomeFIle.png) center top repeat-y;}body{width:100%;height:auto;}
Laboratorio Informatico Web 07/08 11
-> selettore universale
-> selettore elemento html
-> selettore elemento body
Passo n.10
Crea la classe wrapper.wrapper{border:1px solid red;width:740px;margin:0 auto;padding:10px;}
Laboratorio Informatico Web 07/08 12
-> bordo rosso-> larghezza dei div (può variare)-> proprietà che permette di centrarli-> margine interno
Passo n.11
Crea le rules per i selettori di id specifici:#header{width:760px;height:auto;Padding:0;}#content{height:550px;}#footer{height:70px;}
Laboratorio Informatico Web 07/08 13
Cosi facendo settiamo proprietà specifiche per ognuno dei div.
Passo n.12
Per fare in modo che le rules css vengano applicate al markup XHTML, dobbiamo collegare i due file tramite un ‘ponte’; questo ‘ponte’ è rappresentato dall’elemento <link>, che va inserito nella pagina .html, all’interno dell’elemento <head>.
L’elemento <link> deve avere necessariamente 3 attributi:
1. rel=“stylesheet”2. type=“text/css”3. href=“CSS/nomeFile.css” (percorso del file.css)
<link rel="stylesheet" type="text/css" href="CSS/nomeFile.css" />
Laboratorio Informatico Web 07/08 14
Passo n.13
Se tutto funziona correttamente, adesso puoi inserire il contenuto della tua pagina nel file .html.
Nel <div id=“header” class=“wrapper”> puoi inserire un’immagine che farà da sfondo, attenzione: l’immagine dovrà essere larga quanto il div header, quindi 760px.
<img src=“nomeImmagine.png” width=“760” height=“200” alt=“immagine”/>
Laboratorio Informatico Web 07/08 15
Passo n.14
Sempre nel file .html inseriamo all’interno di <div id=“header” class=“wrapper”> gli elementi che daranno vita al menu del sito:
<ul id="menu"> <li><a href="index.html" title="torna alla home
page">Home</a></li><li><a href="pagina1.html" title="vai alla pagina
1">Pagina 1</a></li> </ul>Abbiamo inserito una ‘unordered list’ <ul> il cui id è
menu con all’interno due o più ‘list item’ <li>, che contengono dei collegamenti esterni <a>
Laboratorio Informatico Web 07/08 16
Passo n.15
La nostra lista sarà disposta verticalmente, con i collegamenti uno sotto l’altro.Noi vogliamo una barra di navigazione orizzontale.
Per fare questa modifica grafica usiamo il file .css:
Inseriamo una rule con il selettore di id menu:#menu
{
width:auto;
height:auto;
margin:0;
padding:5px;
list-style:none;
border:1px solid green;
}
Laboratorio Informatico Web 07/08 17
La nostra lista adesso avra margine esterno 0, margine interno 5px, eliminiamo il punto lista con list-style:none, e un bordo verde, ma rimane disposta verticalmente…
Passo n.16
Per ottenere il risultato voluto dobbiamo scrivere una nuova rule css, che modifica solo gli elementi <li> all’interno della <ul> il cui id è ‘menu’:
#menu li{
display:inline;margin:0;padding:0 5px;
}
Laboratorio Informatico Web 07/08 18
Laboratorio Informatico Web 07/08 19
Passo n.17Adesso che il contenuto del div header è stato modificato
graficamente a nostro piacimento, inseriamo il contenuto nella pagina .html che verrà visualizzato nel div content:
Iniziamo con un titolo di livello 1<h1> il titolo della pagina</h1>
Laboratorio Informatico Web 07/08 20
Passo n.18Inserito l’<h1> nel file .html, adesso possiamo modificare
il suo aspetto grafico nel file .css:Inserisci un selettore di elemento h1, e scrive la rule css
per la formattazione del titolo; es.:h1{
font-size:32px;font-family:'Times New Roman', Times, serif;color:black;
}Il titolo avrà ora quest’aspetto: Titolo del tuo sito web!
Passo n.19
Ritorniamo nel file .html e inseriamo il contenuto che verrà visualizzato nel div content:
<div id=”leftbar">Barra di sinistra</div> <div id=”main_content">Contenuto principale</div>
Laboratorio Informatico Web 07/08 21
Passo n.20
Grazie ai selettori di id leftbar e main_content possiamo modificare il loro aspetto grafico tramite i css nel file .css:
#leftbar{
border-right:1px dashed gray;width:130px;height:500px;padding:5px;float:left;}
Laboratorio Informatico Web 07/08 22
La proprietà float è fondamentale affinchè i due div vengano disposti uno accanto l’altro.
Passo n.21
Ora modifichiamo la visualizzazione grafica del div main_content:
#main_content{
width:550px;height:500px;margin:0;padding:5px;float:left;margin-left:25px;
}
Laboratorio Informatico Web 07/08 23
La proprietà float è fondamentale affinchè i due div vengano disposti uno accanto l’altro.Il margin-left serve a distanziare i due div.
Passo n.22
Adesso creiamo una rule CSS per fare in modo che i paragrafi all’interno dei div leftbar e main_content, abbiano un margine esterno superiore e inferiore di 10px, e una grandezza del carattere di 12px:
#leftbar p, #main_content p{
margin:5px 0;font-size:12px;
}
Laboratorio Informatico Web 07/08 24
Passo n.23
Infine inseriamo un paragrafo nel div footer con il tuo nome e cognome, altre informazioni che credi importanti, e se sarà valido XHTML 1.0 Transitional, l’icona del W3C.
Modifichiamo la formattazione del testo in questo paragrafo tramite un selettore css composto:
#footer p{
font-size:10px;}Il testo apparirà più piccolo rispetto il resto.
Laboratorio Informatico Web 07/08 25
Passo n.24
Adesso è il momento di inserire gli ‘orpelli’ grafici al nostro sito:
Iniziamo dal menu.Andiamo sul file .css, troviamo la rule il cui
selettore è #menu, e inseriamo la proprietà:
background:url(percorsoImmagine/nome.png) top center no-repeat;
Laboratorio Informatico Web 07/08 26
Passo n.25
Ora inseriamo un’immagine di sfondo al div content, lavorando sempre sul file .css, posizionandoci sulla rule il cui selettore di id è #content:
background:url(../img/corpo_sfondo.png) top center no-repeat;
Laboratorio Informatico Web 07/08 27
Passo n.26
Infine il div footer, posizioniamoci sulla rule il cui selettore è #footer
background:url(../img/corpo_sfondo.png) top center no-repeat;
Laboratorio Informatico Web 07/08 28
Passo n.27
Per ultimo andiamo a modificare le proprietà grafiche dei collegamenti con queste rule css:
a:link{color:black; text-decoration:none}a:visited{color:black; text-decoration:none}a:hover{color:gray; text-decoration:underline}a:active{color:black; text-decoration:none}
Laboratorio Informatico Web 07/08 29
Passo n.28
Non dimenticate di eliminare tutti i bordi che abbiamo usato fin’ora!
Puoi modificare la formattazione dei vari elementi a tuo piacere: dimensioni del font, tipo di carattere, colore, margini etc…
Laboratorio Informatico Web 07/08 30
Passo n.29
Adesso possiamo inserire dei paragrafi di testo a nostro piacimento nel div leftbar collegamenti ad altri siti che ci piacciono, e nel div main_content, delle immagini, collegamenti, filmati da youtube etc…
Come inserisco un filmato da youtube nel mio sito web?
Laboratorio Informatico Web 07/08 31
Passo n.30
Basta copiare e incollare il codice che trovate alla destra di ogni filmato sotto la parola ‘embed’… ;-)
Laboratorio Informatico Web 07/08 32