(ASP.
NET)
CHAPTER5. Styles, Master Pages and Site Navigation
LECTURER :Abdiwahab Osman siad
STYLES AND MASTER PAGES
In this Chapter will cover :
Introducing Styles
Style Types
Creating Inline Style Sheets
Creating Internal Style Sheets
Creating External Style Sheets
Master page
Site Navigation
INTRODUCING STYLES
Styles are part of the Cascading Style Sheet (CSS)
standard. With styles, you can define a set of
formatting options once and reuse it to format
different elements on multiple pages, for example,
styles that change the font of all the text in your
website without requiring you to modify any of the
web page code.
Styles allow you to add borders, set font details,
change colors, add margin space and padding, and so
on.
INTRODUCING STYLES
What is CSS?
CSS is a style language that defines
Cascading layout
Style Sheetsof HTML
documents.
CSS can add:
• fonts,
• colors,
• margins,
• lines,
• height,
• width,
• background images, advanced more!
INTRODUCING STYLES
In modern web design, HTML is used ONLY for the framework
of the site. Cascading Style Sheets (CSS) is used for many of
the attributes we have discussed in this lesson (font
characteristics, layout, and more).
STYLE TYPES
Web pages can use styles in three different ways:
1. Inline styles (like HTML tags!) inside the HTML document, style
information on a single element, use “Style” attribute in HTML.
2. Embedded style (Internal style sheet ), Is a collection of styles that are
placed in the <head> section of your web page markup blocks of CSS
information inside the HTML itself
3. External style sheets, i.e., a separate CSS file referenced from the
document, specified in the header
CREATING INLINE STYLE SHEETS
To apply a style to an ordinary HTML element,
you set the style attribute. Here’s an example that
gives a blue background to a paragraph:
<p style="background: Blue">This text has a blue
background.</p>
To add multiple style properties, you simply
separate them with semicolons, as shown here:
<p style="color:White; background:Blue; font-size:x-
large; padding:10px" > This text has a blue
background.</p>
CREATING INTERNAL STYLE
What is CSS?
SHEETS
Where do you put CSS code?
Internal (tag style)
Another way is to include the <html> CSS appears
CSS codes using the HTML <head> inside the
tag <style> in the header. For <title>Example</title> style tags in
<style type="text/css"> the header
example like this:
body
{
background-color: #FF0000;
}
</style>
</head>
<body>
<p>This is a red page</p>
</body> </html>
CREATING EXTERNAL STYLE SHEETS
You could create styles for each page in your site, or you can create
external style sheets and use the same styles across many pages.
Obviously, the latter is the most efficient choice. In order to make
changes to styles on many pages, you will create an external style
sheet.
By defining styles in external style sheets (in a .css files) and attaching
them to Web pages, you can ensure your entire Web site has a
consistent appearance
1. File Menu > New File > Style Sheet
CREATING EXTERNAL STYLE SHEETS
2. A blank page opens. Do not add anything to this
page. Immediately save the file, and name it
Bit12stylesheet.css (don’t use any spaces or special
characters in the name.).
3. Switch back to the default.aspx or index.aspx page.
4. Attach the new CSS file to a Web page by clicking
on the Attach Style Sheet link in the Manage Styles
task pane. Or
Format Menu > Attach Style Sheet
Manage Styles task Attach Style Sheet
CREATING EXTERNAL STYLE
SHEETS
Once you have moved your styles to an external style
sheet, the style sheet can be attached to any other pages
in your Web site. Any changes to a style in an external
style sheet are automatically applied in all pages where
that style sheet is attached.
A little later you will apply this style sheet to the rest of
the pages you create.
A style sheet .css file is not a document that gets
displayed in the browser like an .aspx or html page. it is
a special type of file that is saved along with all of the
Web pages and image files.
MASTER PAGE
An ASP.NET file with a .master file extension. A
master page contains a layout that includes text,
HTML, and server controls. Instead of an “@
Page” directive, it contains an “@ Master”
directive.
A master page typically includes the page structure
(usually an HTML table), company name and
logo, and site navigation.
To enable pages to insert content, a master page
contains one or more ContentPlaceHolder controls.
WHAT ARE MASTER PAGES?
A master page is a page template that can be applied to
give many web forms a consistent appearance. F or
example, a master page can set out a standard structure
containing the header , footer, and other elements that
you expect to display in multiple web forms within a
web application.
Master pages can be nested.
Master pages provide a more elegant solution to the
problem of defining common look and feel.
MASTER PAGES
Master Page
Content Page
CONTENTPLACEHOLDER
ContentPlaceHolder is a placeholder that can be filled with content
relevant to the needs of each web for m that uses the master page
It appears on the page as a faintly outlined box. If you click inside
it or hover over it, the name of ContentPlaceHolder appears in a
tooltip.
Masters define common content and placeholders
(<asp:ContentPlaceHolder>)
CONTENTPLACEHOLDER
CONTENTPLACEHOLDER AT DESIGN TIME
CONTENT PAGES
A content page is a standard .aspx file and is bound to the master
page using the Master Page File attribute in the “@ Page”
directive.
Content pages have their own page-specific conten
<%@ Page Title="Home Page" Language="VB"
MasterPageFile="~/Site.Master"
AutoEventWireup="false"
CodeFile="Default.aspx.vb" Inherits="_Default" %>
CONTENT PAGES
Content page
Site.master default.aspx http://.../default.aspx
<%@ Master %> <%@ Page MasterPage-
File="Site.master" %>
<asp:Content
<asp:ContentPlaceHolder ContentPlaceHolderID=
ID="Main" "Main" RunAt="server" />
RunAt="server" />
</asp:Content>
CREATE A NEW MASTER PAGE
WEBSITE > ADD NEW ITEM > MASTER PAGE
ADDING CONTENT PAGE
To create the content pages, add standard Web
forms, select the master page check box when
creating the page, select the master page, and
then add content to the page.
Your content page will have all the elements of
the master page, but the elements will be shaded
in gray, indicating that you can’t select or
change them in any way.
ADVANTAGES OF MASTER PAGES
They allow you to centralize the common functionality of
your pages so that you can make updates in just one
place.
They make it easy to create one set of controls and code
and apply the results to a set of pages. For example, you
can use controls on the master page to create a menu that
applies to all pages.
Theyprovide an object model that allows you to
customize the master page from individual content pages.
RUN TIME BEHAVIOR OF THE MASTER PAGE
At run time, master pages are handled in the following sequence:
1.Users request a page by typing the URL of the content page.
2.When the page is fetched, the @ Page directive is read. If
the directive references a master page, the master page is
read as well. If this is the first time the pages have been
requested, both pages are compiled.
3.The master page with the updated content is merged into the
control tree of the content page.
4.The content of individual Content controls is merged into
the corresponding ContentPlaceHolder control in the
master page.
5.The resulting merged page is rendered to the browser
RUN TIME BEHAVIOR OF THE MASTER PAGE
Master file “A.master”
. Content file “B.aspx” .
<% @ Master %> < % @ Page
Master = ”A . master” %>
Resulting Page
< asp : Content
runat = server
ContentName = ”Main” >
< asp : ContentPlaceHolder
runat = server
ContentName = ”Main” /> < / asp : Content >
< asp : Content
< asp : ContentPlaceHolder runat = server
runat = server ContentName = ”Footer” >
ContentName = ”Footer” />
< / asp : Content >
SITE NAVIGATION
The SiteMapPath control provides the
functionality to generate a breadcrumb
navigational structure for your site.
The TreeView control is a very powerful control
that’s capable of displaying a complex hierarchical
structure of items.
The Menu control is similar to TreeView in that it
displays hierarchical data from a data source; the
ways in which we work with both controls are also
very similar .
SITE NAVIGATION
WEB.SITEMAP
XML document is "very" case sensitive
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="Default.aspx" title="Home" description="Home Page">
<siteMapNode url="Assignments.aspx" title="Assignments"
description="Programming assignments">
<siteMapNode url="Assignment1.aspx" title="Assignment 1"
description="Programming assignment 1" />
<siteMapNode url="Assignment2.aspx" title="Assignment 2"
description="Programming assignment 2" />
</siteMapNode>
<siteMapNode url="AboutUs.aspx" title="About Us"
description="Authors and purposes">
<siteMapNode url="ContactInfo.aspx" title="Contact information"
description="Contact phones and emails" />
<siteMapNode url="ManagementTeam.aspx" title="Management Teams"
description="Introduction of management teams" />
</siteMapNode>
</siteMapNode>
</siteMap>
END
