default.aspx

.net中多个漂亮的web模板

<%@ Page Language="C#" MasterPageFile="~/Default.master" Title=".NET Treats & Tricks Sample MasterPages, Themes, Skins, and CSS" StylesheetTheme="MSN_Blue" %>
<script runat="server">
    
    public void Page_PreInit()
    {
        // Set the Theme for the page. Post-data is not currently loaded
        // Use trace="true" to see the Form collection
        this.Theme = "MSN_Blue";
        if (Request.Form != null && Request.Form.Count > 0)
            this.Theme = this.Request.Form[4].Trim();
    }

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <br />
     <p class="title">
     ASP.NET 2.0 Colorful Web Site Starter Kit
        </p>
        <hr>
   <br />
   <p class="menutextindent">
   by Erika Ehrli Cabral
   <br />
   April 2005
   </p>
   <h1>
        Summary
    </h1>
    <p class="bodytextindent1">
        ASP.NET 2.0 includes a new set of features that allow you to define the look-and-feel of Web Sites. The purpose of the Colorful Web Site Starter Kit is to help you to
        create, modify, and use ASP.NET 2.0 Skins, Styles, and Themes to define the Graphic User Interface of your Web Site. The Colorful Web Site Starter Kit provides eight free sample ASP.NET 2.0 Beta 2 Themes.<br />
    </p>

    <p class="menutextindent">
    <b>Disclaimer:</b>
    <br /> 
    Some images and color combinations that appear in this Starter Kit were taken from 
        <a href="http://login.passport.net/uilogin.srf?id=6528">My MSN</a> and Windows XP desktop. Microsoft is not responsible for, shall have no liability for and disclaims all warranties whatsoever, expressed or implied, related to the Starter Kit, including without limitation any warranties related to performance, security, stability, or non-infringement of title of the sample (including site content) or any controls downloaded from the site. All material is provided as-is. 
     
    </p>
    <h1>
        Table of Contents
    </h1>
   <ul>
   <li><a href="#section1">Before you start reading</a></li><li><a href="#section2">Introduction</a></li><li><a href="#section3">How to define Web Site look-and-feel with ASP.NET 2.0</a></li><li><a href="#section4">Free ASP.NET 2.0 Themes</a></li><li><a href="#section5">Conclusion</a></li><li><a href="#section6">References</a></li></ul>
    
       <h1 id="section1">
        Before you start reading<br />
    </h1>
    <p class="bodytextindent1">
        This page allows readers to set programmatically a selected theme. Before you start reading, please tell me what color you love:
        <br /><br />
        <asp:dropdownlist id="ddlThemes" runat="server" autopostback="true">
             <asp:listitem value="MSN_Blue">I love blue!</asp:listitem>
             <asp:listitem value="MSN_Finance">I love green!</asp:listitem>
             <asp:listitem value="MSN_CherryBlossom">I love pink!</asp:listitem>
             <asp:listitem value="MSN_Purple">I love purple!</asp:listitem>
             <asp:listitem value="MSN_Red">I love red!</asp:listitem>
             <asp:listitem value="WINXP_Blue">I love win xp blue!</asp:listitem>
             <asp:listitem value="WINXP_Silver">I love win xp silver!</asp:listitem>
             <asp:listitem value="MSN_Morning">I love yellow!</asp:listitem>
        </asp:dropdownlist>
</p>
    <h1  id="section2">
        Introduction
    </h1>
    <p class="bodytextindent1">
Every time you start building a Web Site, you need to define the Web Site's Graphic User Interface (GUI). Usually you need to choose a set of colors, fonts, images, styles, navigation schemas, and layout. As a developer you might be the one devoted to build complex functionality for Web Sites, and in most cases, you might have
        few time to create a nice look-and-feel for the pages. Web developers and
        designers sometimes need to build theme sets for Web Sites to accomplish different purposes:</p>
    <ul>
        <li><strong>Building quick prototypes:</strong> You might need to build a quick prototype that emulates
            functionality for a new Web Application that your customer asked for. Sometimes you need to develop the prototype with few time and a set of predefined themes can help
            you to build a pretty prototype and to concentrate in functionality details.</li><li><strong>Personalization:</strong> Some Web Sites and portals require the use of role-based personalization.
                Users might choose their favorite color and layout configuration
                and a set of predefined themes can help you to provide personalized configuration for
                the users.</li><li><strong>GUI Standards:</strong> Your company has different teams that constantly build Web Applications.
                    Each team uses a particular GUI configuration and you want that all the Web
                    Applications developed in the company share a standard look-and-feel. Defining and distributing a Theme
                    might help you to assure that all the company's Web Applications have the same look-and-feel.</li></ul>
    <p class="bodytextindent1">
        Microsoft has thought about this need and has created a solution for this problem. ASP.NET 2.0 includes MasterPages, Themes, Skins, Cascading StyleSheets
        (CSS), and a set of WebControls that integrate to build a predefined style in a Rapid Application Design (RAD) approach.</p>
    <p class="bodytextindent1">
        The following document explains how to use ASP.NET 2.0 Skins, Styles, Themes
        and WebControls to create and modify GUI for Web Sites. I also provide for free
        eight ASP.NET 2.0 Themes.
    </p>
    <h1 id="section3">
        How to define Web Site look-and-feel with ASP.NET 2.0</h1>
    <p class="bodytextindent1">
        ASP.NET 2.0 has evolved dramatically to allow Web Developers to create complex functionality for Web Applications in less time, and with less code. ASP.NET 2.0 provides a set of features that help to create and enhance the look-and-feel of Web Applications. The features that allow to define a Web Site's appearance with ASP.NET 2.0 are:
    </p>
        <ul>
        <li><strong>MasterPages</strong>: Allow you to factor out layout, structure, and interface elements (headers, footers, navigation bars, content placeholders) definition. MasterPages provide a consistent layout for Web Sites. For more information on MasterPages, read <a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnvs05/html/aspnet-masterpages.asp">
                Web Site Consistency Made Easy with ASP.NET 2.0 Master Pages</a>.</li><li><strong>Styles</strong>: Allow you to define rich designs through CSS and the <em>style</em> property of standard HTML tags, HTML server controls, and Web server controls. For more information on CSS, read the <a href="http://www.w3.org/Style/CSS/">
                        W3C Cascading Style Sheets</a> specs.</li><li><strong>Skins</strong>: Allow you to define individual HTML and Web control styles.</li><li><strong>Themes</strong>: Group of files (CSS, Skins, Images) that define the look-and-feel of
                            Web Pages. For more information on Skins and Themes, read <a href="http://winfx.msdn.microsoft.com/library/default.asp?url=/library/en-us/dv_aspnetcon/html/5df3ebbd-d46c-4502-9406-02f9df4ef2c3.asp">
                                Introduction to ASP.NET Themes</a>.</li></ul> 
    
    <p class="bodytextindent1">
        Once you have created a new ASP.NET Web Project, you can create new themes. The steps I followed to create and use new ASP.NET Themes are:
    </p>
    <h3>
        1. Defining &nbsp;the Themes</h3>
    <p class="bodytextindent1">
        In the <b>Solution Explorer:</b></p>
    <blockquote>
    <p class="bodytextindent1">
        1.
        Right-click the <strong>App_Themes</strong> folder,
        click <b>Add Folder</b>, click <b>Theme folder</b>, and type the name of the new
        Theme (e.g.: MySampleTheme)</p>
    <p class="bodytextindent1">
        <strong>Note:</strong> The name of the folder is the name of the new theme.</p>
    <p>
        2.
        Right-click the new Theme folder you just created, click <b>Add Folder</b>, click
        <strong>Regular <b>folder</b></strong>, and type the <strong>Images</strong>.</p>
    <p>
        3.
        Right-click the <strong>Images</strong> folder you just created, and Add all the
        images you need.</p>
    <p>
        4.
        Right-click the new Theme folder, click <b>Add
            New Item</b>, click <b>StyleSheet</b>, and then click <b>OK</b>.</p>
    <p>
        5.
        Define all the styles needed in the CSS file.</p>
    <p>
        6.
        Right-click the new Theme folder, click <b>Add New Item</b>, click <b>Skin File</b>,
        and then click <b>OK</b>.</p>
    <p>
        7.
        Define all the skins needed for each control in the Skin File.</p>
        <p class="menutextindent">
        &lt;asp:GridView ID="GridView1" runat="server" <strong>SkinId="MyGridViewSkin"</strong>
            BackColor="White" &gt;<br />
   &lt;AlternatingRowStyle BackColor="Blue" /&gt;<br />
&lt;/asp:GridView&gt;<br />
        </p>
        <p></p>
    </blockquote>
    <h3>
        2. Applying the Themes to Web Pages</h3>
    <p class="bodytextindent1">
        In the Web Page where you need to define a Theme:</p>
    <blockquote>
    <p class="bodytextindent1">
        1.
        Set the <b>Theme</b> attribute of the @ Page directive to the name of the Theme to use.</p>
    <p class="menutextindent">
&lt;%@&nbsp;Page <B>Theme="MySampleTheme"</B> %&gt;
</p>
To define a Theme for the Web Site use the application's Web.config file and set
    the Pages
    <pages /> element to the name of the theme.
<p class="menutextindent">
&lt;configuration&gt;<br />
    &nbsp;&nbsp;
    &lt;system.web&gt;<br />
        <B>&nbsp; &nbsp; &lt;pages theme="MySampleTheme" /&gt;</B><br />
    &nbsp;&nbsp;
    &lt;/system.web&gt;<br />
&lt;/configuration&gt;<br />
</p>
<p></p>
</blockquote>
<h3>
        3. Applying the Skins to HTML and Web Controls</h3>
    <p class="bodytextindent1">
        In the Web Page where you need to define the controls:</p>
    <blockquote>
    <p class="bodytextindent1">
        1. Create the HTML or Web Control and define the skin name with <b>SkinID</b> attribute of the control to the name SkinID of the control's skin to use.</p>
    <p class="menutextindent">
    &lt;asp:GridView ID="GridView1" runat="server" <strong>SkinID="MyGridViewSkin"</strong>
        /&gt;<br />
</p>
</blockquote>
<p></p>
    
 <H1 id="section4">Free ASP.NET 2.0 Themes</H1><P class="bodytextindent1">As a Web Developer, I would really appreciate having a set of themes with the most common color configurations preferred by customers. I created a set of eight new ASP.NET 2.0 Themes that I would love to share with the ASP.NET Community. The sample themes I provide are based on <A href="http://login.passport.net/uilogin.srf?id=6528">My MSN Web Site </A>and Windows XP desktop. Each theme is extensible and you can modify the configuration according to your needs. </P><H2>
        Theme components</H2><P class="bodytextindent1">
        Each theme is composed by:</P><UL><LI>Images: Sample logo, bar, and bullets.</LI><LI>Skins: Style definition for the following Web Controls:</LI><OL><LI>Image</LI><LI>Calendar</LI><LI>DetailsView</LI><LI>FormView</LI><LI>GridView</LI><LI>Login</LI><LI>SiteMapPath</LI><LI>WebPartZone</LI></OL><LI>CSS: Style definition for text and paragraph elements.</LI></UL><H2>Sample Themes</H2><P class="bodytextindent1">
        The following is a list of the sample themes I created:</P><UL><LI>MSN_Blue: Blue theme.</LI><LI>MSN_CherryBlossom: Pink theme.</LI><LI>MSN_Finance: Green theme.</LI><LI>MSN_Morning: Yellow theme.</LI><LI>MSN_Purple: Purple theme.</LI><LI>MSN_Red: Red theme.</LI><LI>WINXP_Blue: Windows XP Blue theme.</LI><LI>WINXP_Silver: Windows XP Silver theme.&nbsp;</LI></UL>
        <H1  id="section5">Conclusion</H1><P class="bodytextindent1">
            ASP.NET 2.0 includes new features such as MasterPages, Skins, Styles, and Themes
            that allow you to define the look-and-feel of Web Sites quickly and easily. You
            can create personalization features for your Web Applications and even assure the
            use of predefined Web GUI standards across organizations.</P>
            <H1  id="section6">References</H1>
            <P class="bodytextindent1">
        </P>
            <ul>
            <li><a href="http://beta.asp.net/QUICKSTART/aspnet/default.aspx">ASP.NET QuickStart Tutorials</a></li><li><a href="http://winfx.msdn.microsoft.com/library/default.asp?url=/library/en-us/dv_aspnetcon/html/f9d72364-4d77-4b73-84be-7630dc63e0fe.asp">
                    ASP.NET Themes and Skins</a></li><li><a href="http://login.passport.net/uilogin.srf?id=6528">My MSN</a></li></ul>
    <p>
    </p>
</asp:Content>