Web Design & Development
I
(ASP.NET)
CHAPTER6. Styles, Master Pages and Site
Navigation
LECTURER :Mohamed Abdi Dagane
STYLES, THEMES 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 Sheets
of 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).
CSS gives you a
wide range of
consistent
formatting
properties that you
can
apply to any HTML
element.
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
Toapply 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>
Toadd 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 <html> CSS
include the CSS codes <head> appears
using the HTML tag <title>Example</title> inside the
<style type="text/css">style tags
<style> in the header.
body in the
For example like this: { header
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
Itappears 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-
<%@ Master %> <%@ Page MasterPage-
File="Site.master" %>
File="Site.master" %>
<asp:Content
<asp:Content
<asp:ContentPlaceHolder ContentPlaceHolderID=
<asp:ContentPlaceHolder ContentPlaceHolderID=
ID="Main" "Main" RunAt="server" />
ID="Main" "Main" RunAt="server" />
RunAt="server" />
RunAt="server" />
</asp:Content>
</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.
They provide 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>
END
