Adding Some Style To ASP.NET 2.0 Pages
These days layout is very important. ASP.NET supports CSS and adds its own Themes and Skins which provide control
based style elements. Uniform layout on your whole site can be guaranteed by using Master Pages.
Master Pages
A professional Web site will have a standardized look across all pages. It can be difficult to maintain a standard look if you must
always put the common pieces in place with every single web for you build. A Master Page defines the look and feel and standard behavior
as a template for all the pages (or a group of pages) in your application. Your Web form only needs to define the unique content itself
and this will plug into specified areas of the Master Page layout at runtime.
To create a Master Page right click on your folder in the Solution Explorer > Add new Item > Master Page.
On first sight you would say it's a normal Web form with the standard HTML generated. The differences between a normal Web form are the
Master directive (<%@ Master ...>) and a ContentPlaceHolder where the content of your web form will be
placed.
Around this ContentPlaceHolder you can create your template which will be used for all the pages you assign this master too.
It is possible use more than one ContentPlaceHolder, but don't forget to use the different ID's in your Web form too.
To use a Master page at the creation of a new Web form you'll have to select the checkbox 'Select Master Page' while creating the new
Web form (Add new Item > Web Form). This web form will be created with a link to your Master Page in the Page directive and
all basic HTML tags will be replaced with a Content control for each ContentPlaceHolder in your Master Page.
 <%@
Master Language="C#"
AutoEventWireup="true"
CodeFile="MasterPage.master.cs"
Inherits="MasterPage"
%>
<!DOCTYPE
html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
>
<head
runat="server">
<title>Untitled
Page</title>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<asp:contentplaceholder
id="ContentPlaceHolder1"
runat="server">
</asp:contentplaceholder>
</div>
</form>
</body>
</html>
<%@
Page Language="C#"
MasterPageFile="~/Site/MasterPage.master"
AutoEventWireup="true"
CodeFile="~/Default.aspx.cs"
Inherits="Site_Default"
Title="Untitled
Page"
%>
<asp:Content
ID="Content1"
ContentPlaceHolderID="ContentPlaceHolder1"
Runat="server">
</asp:Content>
Master Pages can be nested by adding a link to the other Master Page file in the first one's Master directive.
If you want to use your Master Page for the whole site it can simply be done by adding <pages masterPageFile
="~/SiteTemplate.master" /> to your Web.config file. The title for your page can be set in your Page directive or be
placed into the Master at runtime. Metadata can only be placed at runtime. The best place to do this is the Page_Load event.
In case you have controls in your Master Page that has to be accessed by your Web form, you can do this with public properties and
methods in your Master Page file. Now you'll be able to access the controls in your content page, but without IntelliSense.
To enable IntelliSense for these controls you'll have to add the virtual path of your Master Page file to your Web form (.aspx file).
protected
void Page_Load(object
sender, EventArgs e)
{
//path of current page
string PageName = Page.AppRelativeVirtualPath;
foreach (MenuItem
i in mnuMain.Items)
{
if (i.NavigateUrl == PageName)
{
i.Selected
= true;
i.Selectable = false;
}
}
}
public
string Titel {
set { lblTitel.Text =
value; }
}
Using CSS in ASP.NET
To add a CSS file to your website you can do this by Add New Item > CSS. Cascading Style Sheets work together with
HTML tags, not with ASP.NET controls and are implemented by the browser. If you want the style elements to be applied on the
ASP.NET web controls you'll have to use Themes/Skins.
Themes and Skins
A Skin is a server side stylesheet, each stylesheet has the extension .skin. A Theme is a group of style-related files
(css, skin, resources like images) and needs at least one skin file with the standard properties for your controls. It's possible to
add several skins to one single control by changing the SkinID. Place the Themes in the App_Themes folder of your
project.
To add a new theme/skin, right click and Add New Item -> Skin File. This will create a skin file and if it's the
first skin file also the theme folder in which it will be placed. To use the skin file on a certain page place the theme in the
Theme property or add it in the Page directive. This might give conflicts with style you've assigned to certain controls.
The conflicts are solved in this order: Theme goes first, then CSS style, then the control defined style.
If you plan to use a certain Theme for several pages or even your whole site, consider placing a link to the Theme in your
Web.config file. This can still be overloaded by using the Page directive in case you want a special Theme for one
singular page.
You can go even further by automatically assigning themes by using a DropDownList and sessions. This way the user can choose his
own theme.
protected
void Page_Load(object
sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// check for all themes
DirectoryInfo themeDir =
new DirectoryInfo(Server.MapPath("~/AppThemes"));
ddlThemes.DataTextField = "Name";
ddlThemes.DataSource = themeDir.GetDirectories();
ddlThemes.DataBind();
ddlThemes.Items.Insert(0, new
ListItem("-- Select a
Theme ---"));
}
}
protected
void Page_PreInit(object
sender, EventArgs e)
{
if (Session["Theme"]
== null)
Page.Theme =
"";
else
Page.Theme = (string)Session["Theme"];
}
protected
void ddlThemes_SelectedIndexChanged(object
sender, EventArgs e)
{
Session["Themes"]
= ddlThemes.SelectedValue;
// Refresh the page
Server.Transfer(Request.FilePath);
}
Using Divs
To conclude this tutorial a small view on the eternal discussion between tables and divs. It's a fact that tables are around longer
than CSS and it's rather easy to position your things. But tables were meant to output large sets of data in a nice way, not to design
your site. In fact using loads of tables makes your page slower to render. Also all positions are relative to eachother when
using tables, this might sound good, but can have downsides too. It's also easy to forget a tag, with all
consequences added to it.
Pages created with divs aren't only smaller (and render faster most of the times), there are a nice step forward to the future
since divs stick closer to XHTML and XML. Whenever you feel like changing your layout, you only have to mess around with your css file
and your whole site is restyled. Imagine changing the table layout on a 30ish pages, one by one.
There is a small downside to divs too though. Some browsers have an own opinion about interpreting and implementing css files and
refuse to follow the W3C standards. So use divs whenever you can and fall back on a table when it's really needed.
There is Sample Adding Style Visual Studio Project, used in this tutorial.
This tutorial is written by Assesino |
