Chapter 2: Developing the Site Design
Design
A good-looking graphical template (layout) that appears the same with Internet Explorer and Firefox, and a mechanism to dynamically apply different color schemes and other appearance attributes to it. A way to easily share the created template to all pages of the site, without physically copying and pasting the entire code to each page. A navigation system that enables you to easily edit the links shown in the site's menu, and clearly tells users where they currently are in the site map, enabling them to navigate backward. A way to apply not only a common design to all pages of the site, but also a common behavior, such as counting page views or applying the user's favorite style to the page.
#############################
Designing the Site Layout
#############################
Designing the Site Layout
#############################
-----------------------------------------
Technologies Used to Implement the Design
-----------------------------------------
Technologies Used to Implement the Design
-----------------------------------------
HTML is defined in several ways.
1.You can use the visual form designer in Visual Studio to drop controls onto the form, and this automatically creates HTML code.
1.You can use the visual form designer in Visual Studio to drop controls onto the form, and this automatically creates HTML code.
2.Or, you can hand-edit or author your own HTML code in the .aspx files to give it features that aren't easily specified in the form designer.
3.Lastly, HTML can be dynamically generated by your C# code, or by classes in the .NET Framework.
ASP.NET 1.x used a "code behind" model: HTML (and some presentation-oriented C# code) was put in an .aspx file, and implementation C# code would go into a separate file that would be inherited by the .aspx file
ASP.NET 2.0 modifies the code-behind model and uses a new 2.0 feature of the .NET Framework called partial classes. The idea is simple: Allow one class to span more than one file. Visual Studio will auto-generate at runtime the code for declaring the controls and registering events, and then it will combine that with the user-written code; the result is a single class that is inherited by the .aspx page. The @Page directive declared in the .aspx page uses the CodeFile attribute to reference the .cs code-behind file with the user-written code.
ASP.NET 2.0 modifies the code-behind model and uses a new 2.0 feature of the .NET Framework called partial classes. The idea is simple: Allow one class to span more than one file. Visual Studio will auto-generate at runtime the code for declaring the controls and registering events, and then it will combine that with the user-written code; the result is a single class that is inherited by the .aspx page. The @Page directive declared in the .aspx page uses the CodeFile attribute to reference the .cs code-behind file with the user-written code.
Another change in .ASP.NET 2.0 is the elimination of project files.now ASP.NET 2.0 generates code separately for each page.
----------------------------------------------
Using CSS to Define Styles in Stylesheet Files
----------------------------------------------
These styles can be included as attributes of HTML tags, or they can be stored separately and referred to by name or ID.
you should always put the style definitions in a separate stylesheet file with an extension of .css; or if you insist on including styles inside an HTML file, you should at least define them in a <style> section at the top of the HTML file.
When you group CSS styles together, you can create small classes, which syntactically resemble classes or functions in C#. You can assign them a class name, or ID, to allow them to be referenced in the class= attribute of HTML tags.
----------------------------------------------
Using CSS to Define Styles in Stylesheet Files
----------------------------------------------
These styles can be included as attributes of HTML tags, or they can be stored separately and referred to by name or ID.
you should always put the style definitions in a separate stylesheet file with an extension of .css; or if you insist on including styles inside an HTML file, you should at least define them in a <style> section at the top of the HTML file.
When you group CSS styles together, you can create small classes, which syntactically resemble classes or functions in C#. You can assign them a class name, or ID, to allow them to be referenced in the class= attribute of HTML tags.
------------------------------------------
Avoid Using HTML Tables to Control Layout
------------------------------------------
you should use container controls (such as DIVs) and their style attribute, possibly through the use of a separate <style> section or a separate file. This is ideal for a number of reasons:
1.
If you use DIVs and a separate stylesheet file to define appearance and position, you won't need to repeat this definition again and again, for each and every page of your site. This leads to a site that is both faster to develop and easier to maintain.
2.
The site will load much faster for end users! Remember that the stylesheet file will be downloaded by the client only once, and then loaded from the cache for subsequent requests of pages until it changes on the server. If you define the layout inside the HTML file using tables, the client instead will download the table's layout for every page, and thus it will download more bytes, with the result that downloading the whole page will require a longer time. Typically, a CSS-driven layout can trim the downloaded bytes by up to 50%, and the advantage of this approach becomes immediately evident. Furthermore, this savings has a greater impact on a heavily loaded web server — sending fewer bytes to each user can be multiplied by the number of simultaneous users to determine the total savings on the web server side of the communications.
The site will load much faster for end users! Remember that the stylesheet file will be downloaded by the client only once, and then loaded from the cache for subsequent requests of pages until it changes on the server. If you define the layout inside the HTML file using tables, the client instead will download the table's layout for every page, and thus it will download more bytes, with the result that downloading the whole page will require a longer time. Typically, a CSS-driven layout can trim the downloaded bytes by up to 50%, and the advantage of this approach becomes immediately evident. Furthermore, this savings has a greater impact on a heavily loaded web server — sending fewer bytes to each user can be multiplied by the number of simultaneous users to determine the total savings on the web server side of the communications.
##############################################
Sharing the Common Design Among Multiple Pages
##############################################
Sharing the Common Design Among Multiple Pages
##############################################
---------------------------
Enter the Master Page Model
---------------------------
it's not really implemented with inheritance in an OOP sense — instead, the underlying implementation of master pages is based on a template model.
it is extremely similar to a standard page, except that it has a @Master directive at the top of the page instead of a @Page directive, and it declares one or more ContentPlaceHolder controls where the .aspx pages will add their own content.
The master page and the content page will merge together at runtime — therefore, because the master page defines the <html>, <head>, <body> and <form> tags, you can easily guess that the content pages must not define them again. Content pages will only define the content for the master's ContentPlaceHolder controls, and nothing else.
Enter the Master Page Model
---------------------------
it's not really implemented with inheritance in an OOP sense — instead, the underlying implementation of master pages is based on a template model.
it is extremely similar to a standard page, except that it has a @Master directive at the top of the page instead of a @Page directive, and it declares one or more ContentPlaceHolder controls where the .aspx pages will add their own content.
The master page and the content page will merge together at runtime — therefore, because the master page defines the <html>, <head>, <body> and <form> tags, you can easily guess that the content pages must not define them again. Content pages will only define the content for the master's ContentPlaceHolder controls, and nothing else.
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
+CodeFile="MyPage.aspx.cs" Inherits="MyPage" Title="The Beer House - My Page" %>
+
+<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" Runat="Server">
+ My page content goes here...
</asp:Content>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
The first key point is that the @Page directive sets the MasterPageFile attribute to the virtual path of the master page to use. The content is placed into Content controls whose ContentPlaceHolderID must match the ID of one of the ContentPlaceHolder controls of the master page. In a content page, you can't place anything but Content controls, and other ASP controls that actually define the visual features must be grouped under the outermost Content controls. Another point to note is that the @Page directive has a new attribute, Title, that allows you to override the value specified in the master page's <title> metatag. If you fail to specify a Title attribute for a given content page, then the title specified on the master page will be used instead.
+<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
+CodeFile="MyPage.aspx.cs" Inherits="MyPage" Title="The Beer House - My Page" %>
+
+<asp:Content ID="MainContent" ContentPlaceHolderID="MainContent" Runat="Server">
+ My page content goes here...
</asp:Content>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
The first key point is that the @Page directive sets the MasterPageFile attribute to the virtual path of the master page to use. The content is placed into Content controls whose ContentPlaceHolderID must match the ID of one of the ContentPlaceHolder controls of the master page. In a content page, you can't place anything but Content controls, and other ASP controls that actually define the visual features must be grouped under the outermost Content controls. Another point to note is that the @Page directive has a new attribute, Title, that allows you to override the value specified in the master page's <title> metatag. If you fail to specify a Title attribute for a given content page, then the title specified on the master page will be used instead.
When you define the ContentPlaceHolder in a master page, you can also specify the default content for it, which will be used in the event that a particular content page doesn't have a Content control for that ContentPlaceHolder.
Default content is helpful to handle situations in which you want to add a new section to a number of content pages, but you can't change them all at once. You can set up a new ContentPlaceHolder in the master page, give it some default content, and then take your time in adding the new information to the content pages — the content pages that haven't been modified yet will simply show the default content provided by the master.
Default content is helpful to handle situations in which you want to add a new section to a number of content pages, but you can't change them all at once. You can set up a new ContentPlaceHolder in the master page, give it some default content, and then take your time in adding the new information to the content pages — the content pages that haven't been modified yet will simply show the default content provided by the master.
The MasterPageFile attribute at the page level may be useful if you want to use different master pages for different sets of content pages. If, however, all pages of the site use the same master page, it's easier to set it once for all pages from the web.config file, by means of the <pages> element, as shown here:
look up:http://msdn.microsoft.com/zh-cn/community/950xf363.aspx
look up:http://msdn.microsoft.com/zh-cn/community/950xf363.aspx
++++++++++++++++++++++++++++++++++++++++++++
<pages masterPageFile="~/Template.master" />
++++++++++++++++++++++++++++++++++++++++++++
If you still specify the MasterPageFile attribute at the page level however, that attribute will override the value in web.config for that single page.
<pages masterPageFile="~/Template.master" />
++++++++++++++++++++++++++++++++++++++++++++
If you still specify the MasterPageFile attribute at the page level however, that attribute will override the value in web.config for that single page.
