Procedura dettagliata: personalizzazione di un sito Web tramite i temi di Visual Studio
Aggiornamento: novembre 2007
In questa procedura dettagliata viene illustrato come utilizzare i temi per applicare uno stile coerente alle pagine e ai controlli nel sito Web. In un tema possono essere inclusi file di interfaccia che consentono di definire uno stile comune per controlli singoli, uno o più fogli di stile, e per immagini comuni da utilizzare con i controlli, ad esempio il controllo TreeView. In questa procedura dettagliata viene illustrato come utilizzare i temi ASP.NET nei siti Web.
Di seguito sono elencate le attività illustrate nella procedura dettagliata:
Applicazione di temi ASP.NET predefiniti a pagine singole e al sito per intero.
Creazione del proprio tema in cui includere le interfacce utilizzate per definire l'aspetto dei singoli controlli.
Prerequisiti
Per completare questa procedura dettagliata è necessario:
Microsoft Visual Web Developer (Visual Studio).
.NET Framework.
Creazione del sito Web
Se un sito Web è già stato creato in Visual Web Developer (ad esempio seguendo le procedure di Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer), è possibile utilizzare quel sito Web e passare alla sezione successiva. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.
Per creare un sito Web di file system
Aprire Visual Web Developer.
Scegliere Nuovosito Web dal menu File.
Verrà visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.
Nella casella Percorso, immettere il nome della cartella in cui salvare le pagine del sito Web.
Digitare, ad esempio, il nome cartella C:\WebSites.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione con lui lavorare.
Scegliere OK.
In Visual Web Developer vengono create la cartella e una nuova pagina denominata Default.aspx.
Per iniziare a utilizzare i temi nella procedura dettagliata, sarà necessario impostare un controllo Button, un controllo Calendar e un controllo Label per visualizzare il modo in cui questi controlli sono influenzati dai temi.
Per posizionare i controlli nella pagina
Passare alla visualizzazione Progettazione.
Dal gruppo Standard della Casella degli strumenti, trascinare un controllo Calendar, un controllo Button e un controllo Label nella pagina. Il layout esatto della pagina non è importante.
.gif "Nota")
Nota:Non applicare alcuna formattazione ai controlli. Ad esempio, non utilizzare il comando AutoFormat per impostare l'aspetto del controllo Calendar.
Passare alla visualizzazione Origine.
Accertarsi che nell'elemento <head> della pagina sia presente l'attributo per leggere quanto riportato di seguito:
<head ></head>Salvare la pagina.
Per eseguire il test della pagina, sarà necessario visualizzare la pagina prima di applicare un tema, quindi con diversi temi.
Creazione e applicazione di un tema a una pagina
ASP.NET consente di applicare in modo semplice un tema predefinito a una pagina oppure creare un tema unico. In questa parte della procedura dettagliata, sarà creato un tema con alcune interfacce semplici, in cui è definito l'aspetto dei controlli.
Per creare un nuovo tema
In Visual Web Developer, fare clic con il pulsante destro del mouse sul nome del sito Web, quindi su Aggiungi cartella ASP.NET e scegliere Tema.
Vengono create una cartella denominata App_Themes e una sottocartella denominata Theme1.
Rinominare la cartella Theme1 con sampleTheme.
Il nome di questa cartella sarà il nome del tema creato (qui sampleTheme). Il nome esatto non è importante, ma è necessario ricordarlo in fase di applicazione del tema personalizzato.
Fare clic con il pulsante destro del mouse sulla cartella sampleTheme, selezionare Aggiungi nuovo elemento, aggiungere un nuovo file di testo e denominarlo sampleTheme.skin.
Nel file sampleTheme.skin aggiungere le definizioni di interfaccia come illustrato nell'esempio di codice riportato di seguito.
<asp:Label ForeColor="red" Font-Size="14pt" Font-Names="Verdana" /> <asp:button Borderstyle="Solid" Borderwidth="2px" Bordercolor="Blue" Backcolor="yellow"/>Nota:Le caratteristiche esatte definite non sono importanti. I valori riportati nella sezione precedente costituiscono suggerimenti che risulteranno utili più avanti, quando sarà eseguito il test del tema personalizzato.
Le definizioni di interfaccia sono simili alla sintassi per la creazione di un controllo, tranne che nelle definizioni sono incluse soltanto le impostazioni che influenzano l'aspetto del controllo. Ad esempio, nelle definizioni di interfaccia non sono incluse impostazioni per la proprietà ID.
Salvare e chiudere il file di interfaccia.
È ora possibile eseguire il test della pagina prima di applicare i temi.
| Nota: |
|---|
Se si aggiunge un file di stile CSS alla cartella sampleTheme, sarà applicato a tutte le pagine in cui è utilizzato il tema. |
Per eseguire il test dei temi
Premere CTRL+F5 per eseguire la pagina.
I controlli vengono visualizzati con il loro aspetto predefinito.
Chiudere il browser e ritornare a Visual Web Developer.
In visualizzazione Origine, aggiungere l'attributo riportato di seguito alla direttiva @ Page:
<%@ Page Theme="sampleTheme" ... %>Nota:È necessario indicare il nome di un tema effettivo nel valore di attributo (in questo caso, il file sampleTheme.skin definito in precedenza).
Premere CTRL+F5 per eseguire di nuovo la pagina.
In questa fase, viene eseguito il rendering dei controlli con lo schema di colore definito nel tema personalizzato.
I controlli Label e Button saranno visualizzati con le impostazioni effettuate nel file sampleTheme.skin. Dal momento che non è stata creata alcuna voce nel file sampleTheme.skin per il controllo Calendar, sarà visualizzato con il suo aspetto predefinito.
In Visual Web Developer, impostare il tema sul nome di un altro tema, se disponibile.
Premere CTRL+F5 per eseguire di nuovo la pagina.
L'aspetto dei controlli viene nuovamente modificato.
Temi di fogli di stile a confronto con temi di personalizzazione
È possibile personalizzare la modalità di utilizzo del tema creato nell'applicazione associandolo alla pagina come tema di personalizzazione (secondo quanto illustrato nella sezione precedente) oppure come tema di foglio di stile. In un tema di foglio di stile sono utilizzati gli stessi file di tema di un tema di personalizzazione, ma la precedenza all'interno dei controlli e delle proprietà della pagina è bassa, equivalente a un file CSS. In ASP.NET, l'ordine di precedenza è stabilito come segue:
Impostazioni di tema, inclusi i temi impostati nel file Web.config personalizzato.
Impostazioni di pagina locali.
Impostazioni di tema di foglio di stile.
In questo caso, se si sceglie di utilizzare un tema di foglio di stile, le proprietà del tema personalizzato saranno sottoposte a override da tutti gli elementi dichiarati a livello locale all'interno della pagina. Analogamente, se si utilizza un tema di personalizzazione, le proprietà del tema personalizzato saranno sottoposte a override da tutti gli elementi dichiarati all'interno della pagina locale e all'interno di tutti i temi di foglio di stile in uso.
Per utilizzare un tema di foglio di stile e visualizzare l'ordine di precedenza
Passare alla visualizzazione Origine.
Modificare la dichiarazione della pagina:
<%@ Page theme="sampleTheme" %>Per una dichiarazione di tema di foglio di stile:
<%@ Page StyleSheetTheme="sampleTheme" %>Premere CTRL+F5 per eseguire la pagina.
Notare che la proprietà ForeColor del controllo Label1 è in rosso.
Passare alla visualizzazione Progettazione.
Selezionare Label1 e, in Proprietà, impostare ForeColor su blue.
Premere CTRL+F5 per eseguire la pagina.
La proprietà ForeColor del controllo Label1 è blu.
Passare alla visualizzazione Origine.
Modificare la dichiarazione della pagina per dichiarare un tema, invece di un tema di foglio di stile, apportando la seguente modifica:
<%@ Page StyleSheetTheme="sampleTheme" %>tornare indietro a:
<%@ Page Theme="sampleTheme" %>Premere CTRL+F5 per eseguire la pagina.
La proprietà ForeColor del controllo Label1 è di nuovo rossa.
Base di un tema personalizzato in controlli esistenti
Un metodo semplice per creare le definizioni di interfaccia consiste nell'utilizzo della finestra di progettazione per impostare le proprietà dell'aspetto e copiare la definizione del controllo in un file di interfaccia.
Per basare un tema personalizzato sui controlli esistenti
In visualizzazione Progettazione, impostare le proprietà del controllo Calendar in modo che l'aspetto del controllo sia distinguibile. Sono consigliate le seguenti impostazioni:
BackColor Cyan
BorderColor Red
BorderWidth 4
CellSpacing 8
Font-Name Arial
Font-Size Large
SelectedDayStyle-BackColor Red
SelectedDayStyle-ForeColor Yellow
TodayDayStyle-BackColor Pink
Nota:Le caratteristiche esatte definite non sono importanti. I valori riportati nell'elenco precedente sono suggerimenti costituiscono suggerimenti che risulteranno utili più avanti, quando sarà eseguito il test del tema.
Passare alla visualizzazione Origine e copiare l'elemento <asp:calendar> e i relativi attributi.
Passare al file sampleTheme.skin oppure aprirlo.
Incollare la definizione del controllo Calendar nel file sampleTheme.skin.
Rimuovere la proprietà ID dalla definizione nel file sampleTheme.skin.
Salvare il file sampleTheme.skin.
Passare alla pagina Default.aspx, e trascinarvi un secondo controllo Calendar. Non impostare alcuna proprietà del controllo.
Eseguire la pagina Default.aspx.
Entrambi i controlli Calendar saranno visualizzati nello stesso modo. Nel primo controllo Calendar si riflettono le impostazioni esplicite della proprietà effettuate. Il secondo controllo Calendar eredita l'aspetto delle proprietà del primo dalla definizione di interfaccia creata nel file sampleTheme.skin.
Applicazione di temi a un sito Web
È possibile applicare un tema a un sito Web intero senza riapplicare il tema alle singole pagine. Se lo si desidera, è possibile eseguire l'override delle impostazioni dei temi in una pagina.
Per applicare un tema a un sito Web
Se non è stato aggiunto in modo automatico al sito Web, creare un file Web.config seguendo i passaggi riportati di seguito:
In Esplora soluzioni, fare clic con il pulsante destro del mouse sul nome del sito Web e scegliere Aggiungi nuovo elemento.
In Modelli, selezionare File di configurazione Web, quindi scegliere Aggiungi.
Nota Non occorre immettere un nome, in quanto il file è sempre denominato Web.config.
Aggiungere l'elemento <pages>, se non esiste già. L'elemento <pages> deve essere visualizzato all'interno <system.web>.
Aggiungere l'attributo riportato di seguito all'elemento <pages>.
<pages theme="sampleTheme" />Nota:Web.config è un file con distinzione tra maiuscole e minuscole e i valori sono con le maiuscole/minuscole camel. Ad esempio: tema e styleSheetTheme.
Salvare e chiudere il file Web.config.
Passare a Default.aspx e passare alla visualizzazione Origine.
Rimuovere l'attributo theme="themeName" dalla dichiarazione della pagina.
Premere CTRL+F5 per eseguire Default.aspx.
La pagina viene visualizzata con il tema specificato nel file Web.config.
Se si sceglie di specificare un tema nella dichiarazione della pagina, sarà eseguito l'override di tutti i temi specificati nel file Web.config personalizzato.
Passaggi successivi
Nel supporto ASP.NET per i temi sono fornite varie opzioni per la personalizzazione dell'aspetto di un'intera applicazione. In questa procedura dettagliata sono descritte alcune delle nozioni fondamentali, ma è possibile acquisirne altre. Ad esempio, è possibile accedere a ulteriori informazioni su:
Utilizzo dei temi in generale. Per ulteriori informazioni, vedere Cenni preliminari su temi e interfacce ASP.NET.
Utilizzo di temi con codice. Per ulteriori informazioni, vedere Procedura: applicare temi ASP.NET a livello di codice.