Home   Preview the Book   Chapter 15, TOC   Part 12

  Previous: Encapsulating Design Elements in Controls
  Next: Developing a Localized Footer Control

Using Graphics in a Header Control

The top section of each VB Snippets Web page contains a graphical logo. Figure 15-10 shows the appearance of the logo on a white background. As you can see, the image contains no pixels beyond those absolutely necessary to produce the logo. Reducing the size and number of the graphics in a Web site reduces the response time of a Web site, thereby improving the visitor’s experience with it.

Figure 15-10. The Web designer purposely kept the VB Snippets logo.gif image as small as possible.
Chapter 15, Figure 10.

The VB Snippets logo is displayed by the simple user control u_vbsnippets_logo.ascx in Listing 15-2. Although encapsulating the logo in a user control doesn’t buy much in this case, it will still be helpful if the logo should change. You would then have to edit in only one place to change the width and height of the new logo, rather than having to change each ASPX file in the Web application.

Listing 15-2. The u_vbsnippets_logo.ascx User Control

<%@ Control Language="vb" AutoEventWireup="false" 
    Codebehind="u_vbsnippets_logo.ascx.vb" 
    Inherits="Chapter_15.u_vbsnippets_logo" 
    TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<img border="0" src="images/logo.gif" alt="VB Snippets Logo" 
    width="290" height="33">

Once you add a Register directive to a Web page for this user control, you can add it to the proper table cell like this:

<td width="100%" class="tlogo" align="middle">
    <sma:logo id="smalogo" runat="server" />
</td>

In the implementation of VB Snippets, the basic structure page naturally contains the Register directives for those controls used throughout the design, making it a simple operation to add them to any new ASPX file.

The tlogo CSS class specifies the background color for the table cell that contains the logo. The definition of the tlogo class in Styles.css is as follows:

.tlogo{
background-color: #369;
border: 1px solid #000; 
}

The Web designer created the logo to avoid dithering when displayed against this specific blue-green Web-safe color.

  Previous: Encapsulating Design Elements in Controls
  Next: Developing a Localized Footer Control

Home   Preview the Book   Chapter 15, TOC   Part 12

Copyright © 1996 - 2017 SoftMedia Artisans, Inc. All Rights Reserved.