📄 personal.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>"Personal" Template</title>
<link href="Default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
<h1>"Personal" Template </h1>
<p>This template is best suited for a personal, or blog-style web site.
Its layout consist of two columns with the main navigation menu spanning
the top. The layout has a "fluid" width, which means that it
adjusts its size to the user's browser window. While this is nothing
spectacular in itself — after all, table-based layouts have behaved
like this for years — there
is some added benefit for users with large monitors: the content expands
only to a certain point after which it doesn't get any wider anymore.
The result is greatly increased readability of the content because the
lines of text will never extend beyond a comfortable width. Likewise,
the content won't ever be squashed to a point beyond legibility when
the user narrows the browser window.</p>
<p>Note: general features of this template which are common to all templates
are described in the <a href="Default.htm">introduction to the template set</a>. Make sure to read
this document first if you haven't done so already.</p>
<h2>Main features</h2>
<h3><a name="themes" id="themes"></a>Themes and theme selection </h3>
<p>The template comes with three different themes called <em>Red</em>, <em>Green</em> and <em>Brown</em>,
named after — you guessed it — their predominant color. While
the other templates in the template set have to have their theme set
in the application's configuration file by the site's administrator,
this one leaves the selection up to the visitor. Once a user has selected
a theme, the choice is stored in their <a href="http://msdn.microsoft.com/en-us/library/system.web.profile">profile</a> and
restored upon their next visit. </p>
<p>Implementing the theme picker functionality required the introduction
of a common base class for all pages in the application. You can find
the <em>PageBase</em> class in the <em>App_Code</em> directory of the
sample application. Rather than having to manually configure every page
to inherit from this class in the <code>@Page</code> directive, the <code>pageBaseType</code> attribute
of the <code>pages</code> configuration
element in <em>web.config</em> is used:</p>
<p><code><pages pageBaseType="PageBase" /></code></p>
<p>This way, all pages automatically inherit from <code>PageBase</code> rather
than from the default <code>System.Web.UI.Page</code>. Take a look at
the code in <em>PageBase.cs</em> as well as the code-behind file of the
master page (<em>AppMaster.master.cs</em>) to see how dynamic theme selection
works.</p>
<p>While selection of the preferred theme is up to the user, you can influence
the default theme which will applied when the user first visits your
site. Simply find the following section in <em>web.config</em> and change the
value in bold to the name of the desired theme.</p>
<p><code><profile enabled="true"><br />
<properties><br />
<add name="StylesheetTheme" defaultValue="<strong>Red</strong>" allowAnonymous="true" /><br />
</properties><br />
</profile></code></p>
<h3><a name="fluid" id="fluid"></a>Fluid, but not really</h3>
<p>As described in the introduction to this template, the content of a
page, though essentially fluid, will never extend beyond a comfortable
reading width — regardless of the width of the user's browser
window. This behavior is achieved by taking advantage of a very clever
CSS layout technique named the <em>Jello
Mold</em> and invented by <a href="http://uwmike.com/">Mike Purvis</a>.
Mike has written an <a href="http://www.positioniseverything.net/articles/jello-expo.html">in-depth
article</a> explaining the inner workings of the technique. This article
is highly recommended reading if you plan to make major layout changes
to the template. </p>
<h3>Menu</h3>
<p>The main menu is an instance of the ASP.NET <code>Menu</code> control
which<code></code> derives
the page information from the <em>web.sitemap</em> file in the site root
directory. If you add new pages to the site, make sure you also place
corresponding entries in the sitemap so the pages will be displayed correctly
in the menu. </p>
<p>This template doesn't contain any breadcrumbs since personal sites seldom
reach a page hierarchy deep enough to actually require breadcrumbs. </p>
<p>Note: dynamic submenu items for the menu are not supported in this
release of the template.</p>
<h3>Accessibility</h3>
<p>The contact form found in <em>Contact.aspx</em> is in compliance with <a href="http://www.w3.org/TR/WAI-WEBCONTENT/checkpoint-list.html">Priority
1 checkpoints</a> of the <a href="http://www.w3.org/TR/WAI-WEBCONTENT/">W3C
Web Content Accessibility Guidelines (WCAG 1.0</a>) as well as <a href="http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Web">§ 1194.22
of Section 508</a>. Use the techniques shown there for your own forms
as well, so they'll be accessible for site visitors with disabilities.</p>
<h3>Database</h3>
<p>The template includes a SQL Server Express version of the <dfn>pubs</dfn> sample
database for displaying the list of books on the <em>Publications.aspx</em> page.
You may have to grant read and write permissions on the<em> pubs.mdf</em> file
located in the application's <em>App_Data</em> directory to the ASP.NET
process account (ASPNET on IIS 5.x, NETWORK SERVICE on IIS 6) if you
encounter errors when trying to view the <em>Publications.aspx</em> page.</p>
<p>If you don't want to use the SQL Express database, simply change the
connection string in the <em>connectionStrings</em> section of the <em>web.config</em> file to point to a different destination.</p>
<h3>Designer support </h3>
<p>Since the template's current theme is set dynamically as explained <a href="#themes">above</a> ,
the web form designer in Visual Studio 2005 and Visual Web Developer Express 2005
has no way of determining which theme to apply at design time, so there
is no designer support initially. </p>
<p>However, it is possible
to temporarily set a theme while you work in the designer and then
remove the instruction before deploying the finished application. Simply
add the following code to the <em>web.config</em> file below the <code>system.web</code> node:</p>
<p><code><pages styleSheetTheme="Brown" /></code> </p>
<p>This will set the default theme for use during design time. Please note
that dynamic theme selection will not work if you preview the pages in
the browser while the above instruction is contained in <em>web.config</em>.
Remove the code when you're ready to deploy and theme selection will
work as expected again.</p>
<h2>Template structure</h2>
<p>The first thing you'll probably notice when inspecting the master page
of this template is a set of nested <code>div</code>s below the <code>body</code> tag
called <em>sizer</em>,
<em>expander</em> and <em>wrapper</em>. These are necessary to make the
semi-fuid layout (the <em>Jello Mold</em>, see <a href="#fluid">above</a>)
work. The remaining
<code>div</code> elements structure the actual page content. Their names
indicate their purpose so you should be able to find your way around
the element hierarchy pretty quickly. </p>
<p>The <em>sidebar</em> is floated to the right and neatly fits in the
243px right margin of the <em>content</em> div. </p>
<p>The look of each theme is achieved by a combination of background colors
and background images that are assigned to specific <code>div</code> elements
of the master page. See the style sheet for further details. </p>
<h2>Customizing the template </h2>
<p>Modifying a template's design to suit your needs is done almost exclusively
in the CSS and .skin files of a theme. The recommended approach to customizing
a theme is to make a copy of the one that most closely resembles the
look you're going for in the <em>App_Themes</em> directory and give it
a new name. The main areas of customization of this template are: personal
information, colors, background images and, of course, the page content.</p>
<h3>Personal information </h3>
<p>The name of the site owner as well as the (optional) slogan is set in
<em>ownername</em> div of the master page, additional information can
be provided in the <em>ownerinfo</em> <code>div</code>. Don't forget
to put an appropriate copyright notice in the <em>footer</em> div.</p>
<h3>Images</h3>
<p>The images used to create the design of each theme are stored in the <em>Images</em> subfolder
of the theme. Some images have very specific widths or heights to make
them fit into the layout. If you want to stay on the safe side when editing
the supplied images in a graphics program, try not to change any image
dimensions. Note that this warning only applies to images used for layout
purposes, such as background-tiles. There is no restriction on modifying
pictures used in the page contents, of course.</p>
<h4>Page content </h4>
<p>Before you start to add content to the pages of your themed application
it is a good idea to study the sample pages provided with each template
as well as the master page. Sections that require specific markup are
commented and contain instructions on what the markup should look like
so it will actually pick up the styles set in the style sheet and the
skin file. </p>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -