Condividi tramite

Procedura dettagliata: utilizzo di un file CSS esistente

  • Articolo

Aggiornamento: novembre 2007

In questa procedura dettagliata vengono illustrate le funzionalità dei fogli di stile CSS di Visual Studio 2008. Vengono descritte le procedure di creazione e modifica di un layout della pagina a due colonne. Vengono inoltre illustrate le tecniche di base per la creazione di una nuova pagina Web e di un nuovo foglio di stile CSS.

In questa procedura dettagliata vengono illustrate le attività seguenti:

  • Creazione di un sito Web di file system.

  • Utilizzo di funzionalità orientate a CSS di Visual Web Developer.

  • Creazione di un layout della pagina a due colonne mediante CSS.

    Nota:

    In questa procedura dettagliata vengono illustrate funzionalità aggiuntive di Visual Studio 2008 che non erano state analizzate in Procedura dettagliata: creazione e modifica di un file CSS.

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre dei seguenti componenti:

  • Visual Studio 2008 o Microsoft Visual Web Developer Express Edition. Per informazioni sul download, vedere il sito Web Microsoft Visual Studio Express Editions (informazioni in lingua inglese).

  • .NET Framework versione 3.5.

  • Immagine che può essere aggiunta alla pagina Web. L'immagine effettiva non è importante, poiché verrà utilizzata soltanto per illustrare le funzionalità di posizionamento.

Creazione di un sito Web

In questa parte della procedura dettagliata, viene creato un sito Web al quale viene aggiunta una pagina.

Se è già stato creato un sito Web in Visual Web Developer, ad esempio seguendo i passaggi della Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer, è possibile utilizzare tale sito e passare a "Aggiunta di elementi HTML e di un file CSS" più avanti in questa procedura dettagliata. In caso contrario, creare un nuovo sito Web nuovi attenendosi alla seguente procedura.

Per creare un nuovo sito Web di file system

  1. Aprire Visual Web Developer.

  2. Scegliere Nuovosito Web dal menu File.

    Viene visualizzata la finestra di dialogo Nuovo sito Web.

  3. In Modelli Visual Studio installati scegliere Sito Web ASP.NET.

  4. Nella casella Percorso selezionare File system e digitare il nome della cartella in cui salvare le pagine del sito Web.

    Digitare ad esempio il seguente nome della cartella C:\CSSWebSite.

  5. Nell'elenco Linguaggio, fare clic su Visual Basic oppure su Visual C#.

    Il linguaggio di programmazione scelto sarà il linguaggio predefinito per il sito Web; tuttavia, è possibile impostare il linguaggio di programmazione per ogni singola pagina.

  6. Scegliere OK.

    Visual Web Developer crea la cartella e una nuova pagina denominata Default.aspx.

Aggiunta di elementi HTML e di un file CSS

In questa sezione viene fornito un insieme di elementi che consente di concentrarsi sugli strumenti di formattazione e applicazione di stili anziché creare elementi a cui applicare gli stili. Questi elementi possono essere copiati e incollati in una pagina. Il codice include sezioni create con gli elementi div, che a loro volta includono un banner, sezioni di intestazione laterale sinistra e destra, una sezione di contenuto principale e un piè di pagina. Questi semplici elementi contengono il testo da utilizzare e gli ID elemento. In alcuni casi, gli elementi contengono classi CSS utilizzabili per applicare uno stile a determinati elementi di una pagina.

Aggiunta di elementi HTML

In questa sezione viene aggiunto il contenuto con il quale lavorare. La pagina è composta da un banner contenente testo e una casella di ricerca, un piè di pagina e tre sezioni di testo. Il contenuto principale della pagina è presente nell'ultima sezione di testo.

Per aggiungere elementi HTML alla pagina

  1. Aprire la pagina Default.aspx nella visualizzazione Origine.

  2. Aggiungere il codice seguente dopo l'elemento <form>.

    <div id="pagecontainer">
<div id="banner">
<h1>AdventureWorks Styling Page</h1>
<h2>Making CSS Styling Easier in Design View</h2>
<div id="search">Find:<input id="searchbox" type="text" />
<input id="searchbutton" type="button" value="Go" />
</div>
</div>
<div id="leftsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="rightsidebar" class="column">
<h3>Matters of the Web</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus adipiscing vulputate lacus. Sed enim 
lorem, fringilla eget, nonummy sed, ullamcorper sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada 
rutrum.</p>
</div>
<div id="maincontent" class="column">
<h2>Matters of the Web</h2>
<p> Pellentesque mattis tincidunt ipsum. Donec tempus, nunc vitae rhoncus imperdiet, eros turpis accumsan risus, ut luctus ipsum 
lacus a felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod 
nulla. Suspendisse potenti. Donec in mi nec odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam 
pede tempus magna, mollis dapibus quam est et magna. Aenean eros massa, elementum vehicula, dapibus eget, lobortis non, 
mauris. Vivamus nisl ante, interdum eget, sagittis vel, scelerisque nec, magna. Praesent placerat nibh vel metus viverra 
tincidunt.</p>
<asp:Image ID="Image1" />
<p>Fusce magna urna, gravida non, sodales vehicula, consequat ac, lacus. Ut sed eros sit amet neque malesuada 
malesuada. Fusce porttitor cursus eros. Maecenas libero odio, convallis vel, tristique id, sodales vel, leo. Curabitur nibh 
neque, interdum eget, convallis id, adipiscing nec, risus. Suspendisse rutrum dui sed urna. Pellentesque leo felis, tempor eu, 
convallis venenatis, auctor vitae, justo. In at massa.</p>
</div>
<div id="footer">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2007.</p>
</div>
</div>

  3. Salvare la pagina.

  4. Passare alla visualizzazione Progettazione per vedere la formattazione predefinita.

Aggiunta di un file CSS

In questa sezione viene aggiunto un foglio di stile CSS (file CSS) che formatta e applica uno stile agli elementi aggiunti alla pagina nell'ultima sezione. Il foglio di stile utilizza regole di stile basate su ID e sulla classe.

Per aggiungere un file CSS

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi nuovo elemento.

    Verrà visualizzata la finestra di dialogo Aggiungi nuovo elemento.

  2. In Modelli Visual Studio installati fare clic su Foglio di stile.

  3. Nella casella Nome digitare Layout.css, quindi scegliere Aggiungi.

    L'editor apre un nuovo foglio di stile contenente una regola di stile body.

  4. Rimuovere la regola di stile body, quindi incollare le regole seguenti nel file.

    #pagecontainer {
    width: 800px;
}
#banner {
    height: 126px;
    padding-top: 18px;
    background-color: #DD6B26;
}
#search {
    width: 254px;
    position: absolute;
    top: 115px;
    left: 545px;
    font-family: "Lucida Sans";
    font-size: small;
    color: #930626;
}
#leftsidebar {
    width: 188px;
    float: left;
    padding-right: 10px;
}
#rightsidebar {
    width: 238px;
    float: right;
    padding-left: 6px;
}
#maincontent {
    border-left: 1px solid #DD6B26;
    margin-left: 203px;
    margin-right: 260px;
    padding-left: 13px;
    padding-right: 13px;
}
#footer {
    text-align: center;
    background-color: #DD6B26;
}
h1 {
    font-family: "Lucida Calligraphy";
    font-size: x-large;
    font-weight: bold;
    color: #930626;
    text-align: center;
    height: 42px;
    margin-bottom: 0px;
}
h2 {
    font-family: "Lucida Sans";
    font-variant: small-caps;
    font-size: large;
    color: #307630;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0px;
    margin: 0;
    padding: 0;
}
p {
    font-family: "Palatino Linotype";
    font-size: medium;
}

  5. Salvare il file.

Aggiunta di regole di stile al foglio di stile

Quando si lavora con un foglio di stile CSS esistente, è possibile utilizzare la finestra Gestisci stili per modificare le regole di stile nel suddetto foglio. In questa procedura dettagliata, la pagina verrà modificata dal layout a tre colonne originale a un layout a due colonne. Verranno quindi rimossi gli stili applicati al layout originale.

Rimozione della colonna destra e modifica dello stile

Per modificare il layout della pagina in un layout a due colonne, è possibile rimuovere il codice che crea la colonna destra. Sarà quindi possibile modificare lo stile degli altri elementi per creare il layout a due colonne.

Per rimuovere il codice e la formattazione della colonna destra

  1. Aprire o passare alla pagina Default.aspx.

  2. Passare alla visualizzazione Progettazione.

  3. Da Esplora soluzioni, trascinare il file CSS creato e rilasciarlo nella pagina.

    In questo modo il file CSS viene collegato alla pagina corrente. La pagina viene modificata per riflettere gli stili definiti nel file CSS.

  4. Passare alla visualizzazione Origine.

  5. Eliminare l'elemento div che inizia con <div id="rightsidebar" class="column">.

  6. Salvare il file.

  7. Scegliere Stili CSS dal menu Formato, quindi fare clic su Gestisci stili.

    Verrà visualizzata la finestra Gestisci stili. Per impostazione predefinita, la finestra è ancorata.

  8. Nella finestra Gestisci stili, fare clic con il pulsante destro del mouse sullo stile #rightsidebar, quindi scegliere Elimina.

    Nota:

    L'icona dello stile #rightsidebar non è racchiusa in un cerchio, il che significa che non viene più utilizzata nella pagina e quindi può essere rimossa.

  9. Nella finestra Gestisci stili, fare clic con il pulsante destro del mouse sullo stile #maincontent, quindi scegliere Modifica stile.

    Verrà visualizzata la finestra di dialogo Modifica stile.

  10. Scegliere Casella sotto Categoria.

  11. In margine, impostare il valore della casella destra a 0.

  12. Scegliere OK.

  13. Passare alla visualizzazione Progettazione. Ora il layout è a due colonne.

  14. Salvare il file.

Aggiunta di un'immagine

Prima di impostare lo stile di un'immagine, è necessario aggiungere l'immagine al progetto e impostarne la proprietà ImageUrl.

Per aggiungere un'immagine al progetto

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del sito Web, quindi scegliere Aggiungi elemento esistente.

    Verrà visualizzata la finestra di dialogo Aggiungi elemento esistente.

  2. Selezionare un file di immagine, quindi scegliere Aggiungi.

Una volta aggiunta l'immagine al progetto, è necessario assegnarla a un controllo Image.

Per assegnare un'immagine al controllo Image

  1. Aprire o passare al file Default.aspx.

  2. Passare alla visualizzazione Progettazione e selezionare il controllo Image.

  3. Nella finestra Proprietà, impostare la proprietà ImageUrl del controllo Image sull'URL del file di immagine appena aggiunto.

Aggiunta di regole di stile per formattare l'immagine

Per conferire all'immagine un migliore orientamento rispetto al testo, è possibile eseguire il float dell'immagine al bordo sinistro o destro della colonna principale e aggiungere la spaziatura interna, la quale allontana il testo dall'immagine.

Per aggiungere immagini al layout

  1. Aprire o passare al file Layout.css.

  2. Aggiungere il codice seguente al foglio di stile.

    img {
    margin: 0px;
    border: 1px solid #DD6B26;
    padding: 5px;
}
.floatright {
    margin-left: 10px;
    float:right;
}
.floatleft {
    float: left;
    margin-right: 10px;
}

  3. Aprire o passare al file Default.aspx.

  4. Passare alla visualizzazione Progettazione e selezionare il controllo Image.

  5. Nella finestra Gestisci stili, applicare lo stile CSS floatright o floatleft al controllo Image facendo clic con il pulsante destro del mouse sullo stile CSS e selezionando Applica stile.

    Lo stile CSS selezionato viene assegnato allo stile img.

Passaggi successivi

In questa procedura dettagliata vengono illustrate le tecniche di base per l'utilizzo degli stili CSS mediante l'interfaccia utente di Visual Studio 2008. È inoltre possibile esplorare le seguenti modalità per controllare l'aspetto delle pagine Web:

Vedere anche

Attività

Procedura dettagliata: creazione e modifica di un file CSS

Concetti

Cenni preliminari sull'utilizzo di CSS

Controlli server Web ASP.NET e stili CSS

Procedura: utilizzare la finestra Proprietà CSS