Dan said:
what if I don't use a master page?
Ok, maybe we need to slow down just a minute. The basic assumption I
always assume is that ASP.NET developers will at least have some basic
HTML background before they start. If you don't, that's fine --we all
had to start somewhere-- but it's much easier to learn this stuff in a
static page, first. ;-)
Basically, all HTML pages should have at least three elements, starting
with the HTML tag.
<html>
</html>
The HTML tag marks the beginning and the end of an HTML document. So
now that we have our starting point, we can move onward to the next
element that will describe some important aspects of the HTML document.
This element is obviously the HEAD tag.
<html>
<head>
</head>
</html>
Within this tag we can provide meta data that describes our page. Among
the many aspects that can be defined, one of those is the style that can
be assumed to be applied across the entire page (this isn't always the
case, but for the sake of argument, just assume that it is). So then,
knowing this, we can define the style by using the STYLE tag.
<html>
<head>
<style type="text/css" media="all">
@import "mystyle.css";
</style>
</head>
</html>
So cool...Now we have a simple HTML document that describes where the
browser can locate the style sheet, but we don't have anything useful to
display, yet. The rendered aspects of the page fall in the last of
three tags that you'll most likely find in any HTML document. That is
the BODY tag.
<html>
<head>
<style type="text/css" media="all">
@import "mystyle.css";
</style>
</head>
<body>
</body>
</html>
To make things interesting, let's add an ID to a CSS named mystyle.css
so we can see what affect the style sheet has on the document.
div.demonstration
{
background-color: #ff0000;
}
Now we can put this style to use by referencing it in our HTML page.
<html>
<head>
<style type="text/css" media="all">
@import "mystyle.css";
</style>
</head>
<body>
<div class="demonstration">
This is a test.
</div>
</body>
</html>
If we've done everything correctly, the background color of that div
should be red. Granted, we would normally have defined such a style in
a span tag or what have you, but this was just a simple example to prove
a point.
One important thing to note is that it's usually a good idea to define
which (X)HTML standard that your page was designed to confine to. My
personal recommendation is XHTML 1.0 strict because it forces a more
structured designed and helps to ensure that styles are defined in the
CSS rather than within the document. The reason for doing this is so
that it's easier to update the entire site as a whole rather than having
to go back and manually edit each element individually if an update to
the style is required. It is for this reason that I personally always
start my HTML pages with a template similar to the following.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>Untitled Page</title>
<style type="text/css" media="all">
@import "mystyle.css";
</style>
</head>
<body>
</body>
</html>
Now I've just gone of a major tangent from your original question;
however, now that we have a basic understanding of how an HTML document
should be laid out, we can understand better how to design our master
page to work across the entire site (or at least most pages in a site).
In its simplest form, my master pages will always contain everything
from a template similar to the one I posted above because it is these
aspects of the HTML document that I wish to remain consistent across all
of the pages for my site. That said, it should be obvious that portions
within the BODY tags are assumed to be unique to each individual page.
Following is the exact contents of one of my master pages:
<%@ Register TagPrefix="sef" TagName="header" Src="~/Common/header.ascx" %>
<%@ Register TagPrefix="sef" TagName="sidebar"
Src="~/Common/sidebar.ascx" %>
<%@ Register TagPrefix="sef" TagName="footer" Src="~/Common/footer.ascx" %>
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head runat="server">
<title>Untitled Page</title>
<link href="../Styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<sef:header ID="myheader" runat="server" />
<div id="content">
<asp:contentplaceholder id="ContentPlaceHolder1"
runat="server">
</asp:contentplaceholder>
</div><!-- ends content -->
<div id="footer">
<sef:footer ID="seffooter" runat="server" />
</div><!-- ends footer -->
</div><!-- ends container -->
</form>
</body>
</html>
As you can see, I have defined a section for a header, a footer and most
importantly, the body, which can be found in the place holder.
I hope this helps,
