Scribd
Upload
8 views30 pages

Chapter6 Styles Master Pages and Navigations

This chapter covers styles, themes, master pages, and site navigation in ASP.NET web design. It explains the use of Cascading Style Sheets (CSS) for formatting web pages, including inline, internal, and external styles, as well as the concept and advantages of master pages for consistent layout across multiple pages. Additionally, it discusses site navigation controls like SiteMapPath, TreeView, and Menu for creating structured navigation in web applications.

Uploaded by

somaliyow17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views30 pages

Chapter6 Styles Master Pages and Navigations

This chapter covers styles, themes, master pages, and site navigation in ASP.NET web design. It explains the use of Cascading Style Sheets (CSS) for formatting web pages, including inline, internal, and external styles, as well as the concept and advantages of master pages for consistent layout across multiple pages. Additionally, it discusses site navigation controls like SiteMapPath, TreeView, and Menu for creating structured navigation in web applications.

Uploaded by

somaliyow17
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

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

You might also like