📄 default.htm
字号:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ASP.NET Master Pages Templates</title>
<link href="Default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<h1>Introduction to the ASP.NET Master Pages Template Set</h1>
<p>The <dfn>ASP.NET Master Pages Template Set</dfn> consists of four templates
demonstrating the powerful combination of <acronym>ASP.NET</acronym> master
pages and themes on the server and standard <acronym>XHTML</acronym> and <acronym>CSS</acronym> on
the client. Each template contains three original themes providing you with
a total of 12 different layouts to pick from and adapt to your needs in your
next ASP.NET 2.0 project. </p>
<p>The templates have been created with two purposes in mind:</p>
<ol>
<li> to provide you with a set of layouts you can take and adapt to your needs</li>
<li>to showcase best practices in regards to standard-based web design using
ASP.NET 2.0.</li>
</ol>
<p>The most commonly found page layouts on the Web today have either two or
three columns and either have a fixed width or adjust dynamically to the
width of the visitor's browser window. Therefore, the ASP.NET Master Pages
Template Set consists of templates that fulfill these requirements. Additionally,
each template is best suited for a particular purpose as indicated by its
name. They are:</p>
<ul>
<li><a href="SmallBusiness.htm">Small Business</a></li>
<li><a href="Personal.htm">Personal</a></li>
<li><a href="Corporate.htm">Corporate</a></li>
<li><a href="Commerce.htm">Commerce</a></li>
</ul>
<p>The following table shows the type of layout contained in each of the templates: </p>
<table width="400" border="1" cellpadding="3" style="border-collapse: collapse" bordercolor="#000000">
<caption style="text-align:left;font-size:smaller;" align="bottom">
Table 1: The available templates and their layout
</caption>
<tr>
<th width="124" scope="col" bgcolor="#000000"><div align="left"> </div></th>
<th width="129" scope="col" bgcolor="#000000"><div align="center"> <font face="Verdana" color="#FFFFFF">Columns </font> </div></th>
<th width="121" scope="col" bgcolor="#000000"><div align="center"> <font face="Verdana" color="#FFFFFF">Width</font></div></th>
</tr>
<tr>
<th scope="row"><div align="left">Small Business</div></th>
<td><div align="center">2</div></td>
<td><div align="center">fixed</div></td>
</tr>
<tr>
<th scope="row"><div align="left">Personal</div></th>
<td><div align="center">2</div></td>
<td><div align="center">fluid</div></td>
</tr>
<tr>
<th scope="row"><div align="left">Corporate</div></th>
<td><div align="center">3</div></td>
<td><div align="center">fixed</div></td>
</tr>
<tr>
<th scope="row"><div align="left">Commerce</div></th>
<td><div align="center">3</div></td>
<td><div align="center">fluid</div></td>
</tr>
</table>
<p>While each template comes with its own documentation, this document serves
as a general introduction to the template set and its features.</p>
<p>Note: this documentation assumes basic familiarity with ASP.NET 2.0 master
pages, themes and skins as well as a working knowledge of CSS. If you need
to brush up on any of these subjects, you can do so using the <a href="http://www.asp.net/Tutorials/quickstart.aspx">ASP.NET
Quickstart tutorials</a> or <a href="http://www.w3schools.com/css/default.asp">basic
CSS tutorials</a>. </p>
<h2>Master Pages and CSS </h2>
<p>One of the most prominent new features of ASP.NET version 2.0 is a technique
called <a href="http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx"><dfn>Master
Pages</dfn></a>. It provides the means to define the overall layout of an ASP.NET
application at a single point (the .master file) and reuse it in all content
pages that derive from the master. Updates to the layout can be done quickly
and will be applied to the content pages immediately.</p>
<p>The structure of each of the four templates is defined in a master page
in the application root. Aside from the sample content you will find the
markup in them to be rather bare-bones. If you're coming from a "traditional" school
of thought in Web design, the first thing you'll notice is the absence of
tables. The templates structure the content in a number of <code>div</code> elements
which usually have an <code>id</code> attribute assigned to them. The id
is then referenced by an associated CSS file where the actual formatting
takes place: the elements are placed at the desired locations on the page,
have background-images and -colors assigned and the appearance of their content
is determined. This way, a clear separation of content and design is achieved.
Both can be changed independently without influencing, or potentially breaking,
the other. Additionally, updates to the layout need to be done in one place
only — the CSS file. If you ever had to update even a relatively small site
that had content and presentational markup intermingled, you'll certainly
appreciate the advantage of this approach. </p>
<h3>If CSS is such a smart way to design web sites, then why isn't everybody
using it? </h3>
<p>Two reasons:</p>
<ol>
<li>CSS layouts are initially harder to create than conventional table-based
layouts</li>
<li>browser support for advanced CSS tends to be inconsistent.</li>
</ol>
<p>While reason # 1 can be overcome by simply learning CSS, # 2 can be nearly
a science in itself at times. <span style="font-size: 9pt; color: black; font-family: Verdana;
mso-fareast-font-family: 'MS Mincho'; mso-bidi-font-family: 'Times New Roman';
mso-ansi-language: EN-US; mso-fareast-language: JA; mso-bidi-language: AR-SA">Differences
in the rendering engines of different browsers can often result in some rather odd page behavior upon previewing some of the CSS instructions you have written across
multiple browsers and operating systems.</span> The good news is, though,
that by now most of the browser rendering issues have been documented and several
workarounds exist to arrive at viable cross-browser CSS layouts (if you're interested, check
out <a href="http://www.positioniseverything.net">http://www.positioniseverything.net</a>,
one of several excellent resources on CSS in general and browser bugs in
particular). As far as the templates in the ASP.NET Master Pages Template
Set are concerned: you need not worry about necessary hacks and workarounds,
as these have already been applied in the style sheets that come with each
template. In fact, the templates will work correctly (or degrade gracefully)
in all modern browser versions including Firefox, Opera and Safari, as well
as in versions 5.0, 5.5 and 6.0 of Internet Explorer for Windows. IE 5.0
and 5.5 will have some minor glitches, but will mostly play along nicely,
too. </p>
<h2>Themes and Skins </h2>
<p>Master Pages aren't the only new design-related feature of ASP.NET 2.0.
Web developers are also provided with the ability to assign <dfn>themes</dfn> and <dfn>skins</dfn> to
controls, pages or entire web sites, respectively. A <a href="http://msdn.microsoft.com/en-us/library/ykzx33wh">theme</a> is
essentially a collection of files that determine the appearance of web application
elements, such as pages and controls. Themes can include images, CSS files
and <a href="http://msdn.microsoft.com/en-us/library/ykzx33wh">skin</a> files,
where the latter specifically set visual properties of ASP.NET controls.</p>
<p>Each of the templates in the ASP.NET Master Pages Templates Set contains
three themes. As you will see when you start experimenting with the templates,
applying a different theme can dramatically change a web application's appearance — without necessitating changes in the code of any of the content pages.
ASP.NET 2.0 takes web developers a large step forward on the road to strict
separation of presentation and content. </p>
<h3>Effective use of skins</h3>
<p>There are two main approaches to skinning controls, for example a text box.
Let's say you want to achieve a uniform visual appearance of all text boxes
in your application. They should all look like this: </p>
<p>
<input name="textfield" type="text" style="border:1px solid #933126; background-color:#F7DE8A;" />
</p>
<p>The most straightforward approach to skinning this control would be the
declaration of a <dfn>default skin</dfn> for the ASP.NET <code>TextBox</code> control
in the .skin file:</p>
<p><code><asp:TextBox runat="server" BackColor="#F7DE8A" BorderColor="#933126" BorderStyle="Solid" BorderWidth="1px" /></code></p>
<p>While this works just fine when you preview it in the browser, there is
another, more elegant way to achieve the same visual result: create a class
rule in the CSS file and reference this rule from the skin file, as in the
following example:</p>
<ul>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -