Visitatori: 698
In questa lezione vedremo come aggiungere una Master Page al Sito creato nella lezione precedente.
Da esplora soluzioni col tasto destro del mouse selezioniamo "aggiungi nuovo elemento":
Quindi selezioniamo "Pagina Master" denominandola FrontEnd.master:
VWD creerà in automatico alcuni <ContentPlaceHolder> ovvero dei contenitori "modello" che potranno essere ereditati da tutte le pagine del nostro sito che utilizzano questa pagina Master. Per questo esempio eliminiamo il ContentPlaceHolder con id="head" in quanto lo creeremo come <div> all'interno del corpo della pagina e sarà uguale per tutte le pagine del Sito. Alla fine dovete realizzare questa struttura:
Come potrete notare abbiamo aggiunto un Container principale che contiene a sua volta altri 3 <div>:
- head: rappresenta la testata del nostro Sito;
- ColonnaSinistra: posizioneremo il menu del Sito;
- ColonnaDestra: posizioneremo i contenuti delle nostre pagine web all'interno del ContentPlaceHolder1.
Per dare un aspetto accettabile al nostro sito dobbiamo specificare come questi <div> devono essere formattati graficamente. Per fare ciò dobbiamo aggiungere un foglio di Stile al nostro Sito Web:
Denominiamo il nostro foglio di stile FrontEnd.css e inseriamo le seguenti righe (chiaramente diamo per scontato che abbiate una conoscenza anche minima dei fogli di stile):
body
{
font-family:Verdana;
width:800px;
}
#head
{
margin: 0px;
background-color:Navy;
color:White;
height:100px;
width:100%;
}
#head h1
{
margin:20px;
}
#Container
{
width:100%;
float:left;
}
#ColonnaSinistra
{
width:25%;
float:left;
height:350px;
background-color:Gray;
}
#ColonnaDestra
{
width:70%;
float:left;
height:350px;
margin-left:20px;
}
#footer
{
text-align:center;
height:40px;
float:left;
width:100%;
background-color:Navy;
color:White;
font-size:70%;
}
A questo punto dobbiamo associare il foglio di stile alla nostra pagina
master. Ciò si può fare collocando il riferimento nella
sezione head della pagina master:
<head runat="server">
<title>Horus web site</title>
<link href="FrontEnd.css" rel="stylesheet" type="text/css"
/>
</head>
oppure in visualizzazione progettazione (non codice) trascinare il foglio di stile dalla finestra esplora soluzioni sulla pagina master. Ciò ha l'effetto di cui sopra.
A questo punto aggiungiamo una nuova pagina al Sito ricordandoci di selezionare "Seleziona pagina master":
Scegliamo come nome HomePage.aspx e clicchiamo su aggiungi, verrà visualizzata la seguente schermata:
VWD ci propone le pagine master disponibili, in questo caso abbiamo solo la nostra FrontEnd.master quindi selezioniamo e clicchiamo su "ok".
A questo punto la pagina HomePage.aspx verrà aperta in visualizzazione codice e come potete vedere sarà visibile solo la parte relativa al ContentPlaceHolder1. Scriviamo in esso alcune righe di presentazione del nostro sito:
A questo punto dalla finestra esplora soluzioni selezioniamo la pagina HomePage.aspx e clicchiamo col tasto destro del mouse selezionando "Imposta come pagina iniziale". A questo punto avviamo il nostro progetto. Ecco il risultato:
Nel prossimo articolo vedremo come creare un menù di navigazione per il nostro sito collocandolo nella colonna di sinistra e vedremo un primo esempio di accesso ai dati visualizzando una lista di News del nostro Sito.
Lezione precedente | Indice degli articoli | Lezione Successiva
|