Procedura dettagliata: modifica di tabelle HTML in Visual Web Developer

Aggiornamento: novembre 2007

La modifica di tabelle rappresenta un aspetto importante di molte pagine Web dal momento che le tabelle sono utilizzate per la creazione del layout di pagina. In questa procedura dettagliata sono illustrate le funzionalità di modifica di tabelle dell'editor HTML in Microsoft Visual Studio. Le tabella saranno utilizzate il layout per un semplice form di inserimento nella pagina.

Nota:
Le funzionalità di modifica di tabelle descritte in questa procedura dettagliata riguardano le tabelle HTML, non il controllo server Web Table (il controllo <asp:Table> e i relativi controlli figlio).

Di seguito sono elencate le attività illustrate nella procedura dettagliata:

• Aggiunta di una tabella.

• Selezione della tabella, delle righe e delle colonne.

• Ridimensionamento di elementi.

• Aggiunta e rimozione di elementi della tabella.

• Impostazione di caratteristiche di cella quali colore di sfondo e allineamento.

Prerequisiti

Per completare questa procedura dettagliata è necessario:

• Visual Web Developer e NET Framework.

Creazione del sito Web

Se si è già creato un sito Web in Visual Studio (ad esempio, mediante le procedure riportate di seguito in Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer), sarà possibile utilizzare quel sito Web e ignorare la sezione successiva, "Creazione del layout di pagina con una tabella". 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

1. Aprire Visual Web Developer.

2. Scegliere Nuovosito Web dal menu File.

3. In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.

4. Nella casella Percorso, immettere il nome della cartella in cui salvare le pagine del sito Web.

   Digitare, ad esempio, il nome cartella C:\WebSites.

5. Nell'elenco Linguaggio scegliere il linguaggio di programmazione con lui lavorare.

6. Scegliere OK.

   In Visual Web Developer vengono create la cartella e una nuova pagina denominata Default.aspx.

Creazione del layout di pagina con una tabella

Per iniziare, verrà aggiunta una tabella che consente di definire il layout generale della pagina.

Per aggiungere una tabella per il layout della pagina

1. Se non si dispone già di una pagina aperta nella finestra di progettazione, aggiungere una pagina al sito Web.

2. Passare alla visualizzazione Progettazione.

3. Dal menu Layout, fare clic su Inserisci tabella.

   Verrà visualizzata la finestra di dialogo Inserisci tabella.

4. Selezionare Modello.

   I modelli di tabella sono layout di tabella predefiniti.

5. Selezionare Intestazione e lato dall'elenco Modello.

6. Scegliere OK.

   Alla pagina viene aggiunta una tabella di due colonne che occupa l'intera altezza e larghezza della pagina. Mediante una cella singola in primo piano vengono inserite le colonne, per consentire l'inserimento di un'intestazione. La cella sinistra al di sotto dell'intestazione è utilizzata per lo spostamento o per informazioni del lato. La cella destra al di sotto dell'intestazione è la principale area di visualizzazione per la pagina.

   Nota:
   I bordi attorno alle celle nella tabella vengono visualizzati per impostazione predefinita in fase di progettazione per agevolare la modifica. Se non si effettua una impostazione del bordo per la tabella o per le celle in modo esplicito, non sarà visualizzato alcun bordo durante il rendering della tabella nel browser.

Creazione di un layout del form con una tabella

È anche possibile utilizzare tabelle HTML per definire il layout dei controlli in un form. Sarà necessario creare una seconda tabella all'interno della prima. In seguito, la seconda tabella sarà utilizzata per la creazione del layout per alcuni controlli in un form.

Per aggiungere una tabella per il layout del form

1. consente di trascinare un elemento Tabella dal gruppo HTML della Casella degli strumenti nella cella di destra (cella principale).

   Quando si trascina una tabella dalla Casella degli strumenti, in Visual Web Developer si crea una tabella vuota composta di tre colonne e di tre righe. Sono necessarie soltanto due colonne; cancellarne, quindi, una delle tre.

   Nota:
   È possibile creare le tabelle utilizzando il comando Inserisci tabella, nel modo descritto in precedenza, oppure trascinando un elemento Tabella dalla Casella degli strumenti.

2. Spostare il puntatore del mouse sulla tabella fino a quando assume la forma di cursore di spostamento (freccia a quattro punte), quindi fare clic per selezionare la tabella.

3. Trascinare il bordo destro della tabella per allargarla fino a superare la larghezza della pagina.

   In fase di trascinamento, sono visualizzate le dimensioni correnti della tabella.

4. Fare clic con il pulsante destro del mouse su una delle celle nella colonna più a sinistra. Scegliere Colonne dal sottomenu Elimina per rimuovere la colonna della cella selezionata.

   La colonna viene eliminata dalla tabella.

   Nota:
   Se nell'opzione Elimina visualizzata, non è presente alcun sottomenu, significa che lo stato attivo non è in una cella. Fare clic con il pulsante del mouse sulla parte sinistra della colonna.

5. Fare clic sulla parte inferiore destra della cella; quindi premere il tasto TAB per aggiungere una quarta riga alla tabella.

   Si dispone, infine, di una tabella con due colonne e quattro righe, che possono costituire il contenitore per i controlli del form.

Impostazione delle caratteristiche della tabella del layout di pagina

Una volta creata una tabella per il layout del form all'interno della tabella della pagina, sarà possibile completare il layout della pagina modificando la tabella di layout della pagina.

Per impostare le caratteristiche della tabella del layout della pagina

1. Nella tabella del layout della pagina, fare clic nella cella superiore.

   Il bordo più spesso attorno alla cella indica che la cella è selezionata e in modalità di modifica del contenuto.

2. Nella finestra Proprietà, fare clic col pulsante nella casella Stile.

   Verrà visualizzata la finestra di dialogo Generatore di stile.

3. Fare clic su Centrato nell'elenco Orizzontale nella scheda Testo.

4. Selezionare un colore dall'elenco Colori nella scheda Sfondo. È possibile anche fare clic sul pulsante accanto alla casella Colore per visualizzare la finestra di dialogo Selezione colori da cui selezionare altri colori.

   Mediante le impostazioni eseguite è stato definito lo stile della cella nella parte superiore della tabella del layout.

5. Digitare Contoso Web Site come intestazione.

6. Selezionare il testo e fare clic su Heading 1 <H1> nell'elenco Formato blocco della barra degli strumenti Formattazione.

7. Ripetere i passaggi da 1 a 6 per la cella più a sinistra della tabella, con le seguenti modifiche:

   • Modificare il testo in This site is maintained by Contoso, Incorporated.

   • Non formattare il testo come Heading 1.

   • Fare clic su in basso nell'elenco Verticale nella scheda Testo della finestra di dialogo Generatore di stile.

   In una pagina Web di produzione, la cella laterale può essere occupata da un menu di collegamenti oppure da altro contenuto. Tuttavia, per questa procedura dettagliata, il contenuto della cella non è di particolare importanza.

Generazione del form

È ora possibile generare il form.

Per aggiungere il testo e i controlli alla tabella del layout del form

1. Fare clic nella cella superiore sinistra della tabella del layout del form (la tabella all'interno della tabella del layout della pagina) e digitare Name:.

2. Fare clic nella cella superiore sinistra della seconda riga e digitare Birth year:.

3. Dal gruppo Standard della Casella degli strumenti trascinare un controllo TextBox nella cella superiore destra.

4. Impostare la proprietà ID del controllo TextBox su textName.

5. Trascinare un altro controllo TextBox nella cella destra della seconda riga ed impostarne la proprietà ID su textBirthYear.

6. Trascinare un controllo Button nella terza cella a destra e impostarne la proprietà Text su Invia.

7. Trascinare un controllo Label nella cella inferiore destra, impostarne la proprietà ID su labelDisplay e deselezionare la relativa proprietà Text.

8. Posizionare il cursore del mouse sulla colonna sinistra fino alla visualizzazione di un simbolo di selezione (un piccolo quadrato) nella parte superiore della colonna; quindi fare clic sul simbolo.

   La colonna sinistra è selezionata.

9. Nella finestra Proprietà, fare clic sul pulsante nella casella Stile per visualizzare la finestra di dialogo Generatore di stile.

10. Scegliere Destra nell'elenco Orizzontale nella scheda Testo.

    Le didascalie di testo nel form sono allineate a destra.

11. Scegliere OK per chiudere il generatore di stile.

12. Selezionare di nuovo la colonna sinistra, quindi trascinare la relativa parte destra per ridurre la colonna a una grandezza adatta al testo della didascalia.

13. Fare clic con il pulsante destro del mouse sulla cella della tabella del layout esterna alla tabella del layout del form, quindi scegliere Stile.

    Nel menu di scelta rapida viene fornito un metodo alternativo per visualizzare la finestra di dialogo Generatore di stile.

14. Fare clic su in alto nell'elenco Verticale nella scheda Testo.

    La tabella del layout del form è allineata alla parte superiore della cella.

Programmazione dei controlli del form

È ora possibile programmare i controlli del form. Nel form è visualizzata l'età dell'utente nell'anno in corso.

Per programmare i controlli del form

1. Fare doppio clic sul controllo Button nel form.

   Nell'editor viene creato un gestore eventi Click.

2. Aggiungere il codice evidenziato riportato di seguito.

   Protected Sub Button1_Click(ByVal sender As Object, _
       ByVal e As System.EventArgs) _
       Handles Button1.Click 
       Dim age As Integer    age = DateTime.Now.Year - CInt(textBirthYear.Text)    labelDisplay.Text = Server.HtmlEncode(textName.Text) & _        ", this year you are " & Server.HtmlEncode(age.ToString())
   End Sub
   

   protected void Button1_Click(Object sender, EventArgs e)
   {
       int age = DateTime.Now.Year - Int32.Parse(textBirthYear.Text);    labelDisplayText.Text = Server.HtmlEncode(textName.Text) +     ", this year you are " + Server.HtmlEncode(age.ToString());
   }
   

Test della pagina

È ora possibile eseguire il test della pagina.

Per eseguire il test della pagina

1. Premere CTRL+F5 per eseguire la pagina.

   Quando la pagina è visualizzata sul browser, prestare attenzione al layout creato. Dal momento che non sono stati specificati in modo esplicito i bordi di tabella, nel form non è presente alcuna linea.

2. Nella casella Nome digitare il nome desiderato.

3. Nella casella Birth year, digitare l'anno di nascita, quindi fare clic sul pulsante Invia.

   Il calcolo dell'età viene visualizzato nel form nel percorso creato con la tabella del form.

Passaggi successivi

In questa procedura dettagliata sono state utilizzate alcune delle funzionalità nell'editor delle tabelle visivo in visualizzazione Progettazione. Le tabelle sono state aggiunte con due metodi, è stata ridimensionata una tabella, aggiunta una riga, eliminata una colonna, impostati gli stili della cella e sono stati aggiunti testo e controlli come contenuti di cella. Per approfondire l'argomento, si consiglia di effettuare le seguenti operazioni:

• Ulteriori informazioni sui vari metodi di utilizzo delle tabelle. Per informazioni dettagliate, vedere:

  • Procedura: aggiungere e rimuovere gli elementi delle tabelle HTML in Visual Web Developer

  • Procedura: selezionare elementi e contenuti delle tabelle HTML in Visual Web Developer

  • Procedura: ridimensionare gli elementi delle tabelle HTML in Visual Web Developer

• Alcuni suggerimenti sulla modifica delle tabelle sia nella visualizzazione Progettazione, sia nella visualizzazione Origine. Per informazioni, vedere Suggerimenti per la modifica delle tabelle HTML in Visual Web Developer.

• Aggiungere la convalida alla casella di testo Birth year in modo che possano essere immessi soltanto anni validi. Per ulteriori informazioni, vedere Convalida dell'input utente nelle pagine Web ASP.NET.

Vedere anche

Attività

Procedura dettagliata: creazione e utilizzo di pagine master ASP.NET in Visual Web Developer

Concetti

Spostamento tra i tag dell'editor HTML in Visual Web Developer

Formattazione degli elementi nell'editor HTML in Visual Web Developer