Pagina's opmaken met controls

Een pagina is meestal meer dan een verzameling elementen. Het geheel moet niet alleen functioneel zijn, maar moet er ook nog aardig uit zien. U heeft al gezien dat de meeste server control allerlei mogelijkheden hebben om ze op te maken. De opmaak die u geeft is voor zover mogelijk onafhankelijk van de webbrowser waarin de pagina wordt weergegeven. Let er wel op dat door de beperkingen van oudere webbrowsers sommige opmaak niet getoond kan worden in die webbrowsers. Dit is echter niet van invloed op de functionaliteit van de pagina. Aan de hand van de informatie die ASP.NET ontvangt over de webbrowser waarmee een pagina wordt opgevraagd, kan ASP.NET besluiten de pagina als HTML 4.0 met ondersteuning voor Cascading Style Sheets (CSS) terug te sturen, of in pure HTML 3.2, zonder CSS en eventuele webbrowserspecifieke elementen. U kunt dit zien door een pagina op te vragen in een oudere webbrowser, en dan de HTML bron weer te geven. De nieuwere versies van Internet Explorer ondersteunen ook absolute positionering. Als u in Visual Studio .NET een nieuw WebForm aanmaakt, staat dit zelfs standaard aan. Het voordeel hiervan is dat u precies (op de pixel) kunt bepalen waar een control op de pagina komt te staan. Omdat dit alleen goed werkt in Internet Explorer kunt u echter beter uit gaan van reguliere HTML voor de positie van elementen. Hiervoor kunt u gebruik maken van tabellen en dergelijke. ASP.NET kan hier nog een belangrijke rol spelen, omdat niet iedere webbrowser op dezelfde manier om gaat met dezelfde HTML, en niet iedere webbrowser CSS ondersteunt. Hierdoor kan bijvoorbeeld de tekst in een cel van een tabel niet het juiste lettertype hebben. U kunt dit zien aan het voorbeeld hieronder. In figuur 1 ziet u het resultaat in Internet Explorer en in Netscape het resultaat in Netscape 4. 

<html>
<head>
</head>
<body>
  <font face="Arial,Helvetica">
  <table>
    <tr>
      <td>In welk lettertype staat deze tekst?</td>
    </tr>
  </table>
  </font>
</body>
</html>


Figuur 1, Lettertype in de tabel wordt weergegeven als het omliggende lettertype


Figuur 2, Lettertype in de tabel is anders als daarbuiten

U ziet in figuur 1 en 2 dat Internet Explorer en Netscape de HTML verschillend interpreteren. Als u gebruik maakt van de Table control van ASP.NET kunt u dit voorkomen, omdat ASP.NET inspeelt op de verschillende interpretaties. De Table control is in principe identiek aan een tabel in HTML, maar is makkelijker te gebruiken, omdat ASP.NET de instellingen die u aan de tabel geeft door de hele tabel consistent gebruikt. U kunt dit zien aan het onderstaande voorbeeld.

<html>
<head>
</head>
<body>
  <asp:Table runat="server" Font-Names="Arial,Helvetica">
    <asp:TableRow>
      <asp:TableCell>
        Deze tekst heeft het juiste lettertype.
      </asp:TableCell>
    </asp:TableRow>
  </asp:Table>
</body>
</html>

Als u het bovenstaande voorbeeld gebruikt, wordt zowel in Internet Explorer als in Netscape het juiste lettertype weergegeven. ASP.NET kent de verschillen in interpretatie en genereert daarom verschillende HTML voor de verschillende webbrowsers, zoals u hieronder kunt zien.

Internet Explorer

<html>
<head>
</head>
<body>
  <table border="0" style="font-family:Arial,Helvetica;">
    <tr>
      <td>
        Deze tekst heeft het juiste lettertype.
      </td>
    </tr>
</table>
</body>
</html>

Netscape 

<html>
<head>
</head>
<body>
  <table border="0">
    <tr>
      <td><font face="Arial,Helvetica">
        Deze tekst heeft het juiste lettertype.
      </font></td>
    </tr>
</table>
</body>
</html>

ASP.NET gaat in het genereren van HTML vrij ver. Ook als u server controls nest in andere server controls, bijvoorbeeld door een Label control in een Table control te gebruiken, dan zorgt ASP.NET ervoor dat de opmaak van de Table control overgenomen wordt door de Label control, tenzij voor de Label control expliciet andere opmaak gedefinieerd is. Dit is veel consequenter dan HTML, en dat maakt server control veel makkelijker om mee te werken. De Table control heeft in principe dezelfde opmaak mogelijkheden als de Label control, maar met wat extra mogelijkheden. Verder is het goed om op te merken dat TabelRow en TableCell de rol van TR en TD op zich nemen. Ook voor die elementen kunt u apart opmaak definiδren. U ziet de eigenschappen van de Table control, en van TableRow en TableCell in tabel 1,tabel 2, en tabel 3.

Eigenschap Omschrijving
BackImageUrl Lokatie van de afbeelding die als achtergrond van de tabel dient. Dit moet een geldige URL zijn.
CellPadding Het aantal pixels dat de tekst van de rand van de cel in de tabel af moet staan.
CellSpacing Het aantal pixels dat tussen de cellen in de tabel moet zitten.
GridLines Geeft aan of er rasterlijnen weergegeven moeten worden. De waarde kan True of False (standaard) zijn.
HorizontalAlign Horizontale uitlijning van de tekst. De mogelijke waardes zijn NotSet (standaard) voor niet gedefinieerd, Left voor links uitlijnen, Center voor centreren, Right voor rechts uitlijnen, en Justify voor links en rechts uitvullen.
Tabel 1, Additionele eigenschappen van de Table control

Eigenschap Omschrijving
HorizontalAlign Horizontale uitlijning van de tekst. De mogelijke waardes zijn NotSet (standaard) voor niet gedefinieerd, Left voor links uitlijnen, Center voor centreren, Right voor rechts uitlijnen, en Justify voor links en rechts uitvullen.
VerticalAlign Verticale uitlijning van de tekst. De mogelijke waardes zijn NotSet (standaard) voor niet gedefinieerd, Top voor boven uitlijnen, Middle voor verticaal centreren, en Bottom voor onderaan uitlijnen.
Tabel 2, Additionele eigenschappen van een TableRow

Eigenschap Omschrijving
ColumnSpan Aantal kolommen dat de cel moet beslaan. Standaard is dit 1.
HorizontalAlign Horizontale uitlijning van de tekst. De mogelijke waardes zijn NotSet (standaard) voor niet gedefinieerd, Left voor links uitlijnen, Center voor centreren, Right voor rechts uitlijnen, en Justify voor links en rechts uitvullen.
RowSpan Aantal rijen dat de cel moet beslaan. Standaard is dit 1.
VerticalAlign Verticale uitlijning van de tekst. De mogelijke waardes zijn NotSet (standaard) voor niet gedefinieerd, Top voor boven uitlijnen, Middle voor verticaal centreren, en Bottom voor onderaan uitlijnen.
Wrap Geeft aan of de tekst door moet lopen op de volgende regel als de rand van de cel bereikt is. De waarde kan True (standaard) of False zijn.
Tabel 3, Additionele eigenschappen van een TableCell

In Visual Studio .NET en Web Matrix kunt u gebruik maken van een special edit venster dat u kunt opvragen vanuit het eigenschappen venster. Via dit scherm, dat u ziet in Figuur 3, kunt u rijen en cellen toevoegen, wijzigen en verwijderen.


Figuur 3, Venster voor het wijzigen van rijen en kolommen in een Table control.

 

⌐2002 Microsoft Nederland BV