Transcript CREATING MASTER PAGES

CREATING MASTER
PAGES
Creating a Master Page
 Using Master Pages
Giving your site a professional look and feel
 Adding Master Page content to existing pages
Introduction
 Master Pages are a great way to give your site that
consistent look and feel, because they allow you to
define content that appears on every page in your
site.
 A Master Page lets you define a general format for all
the pages in your site.
 For example,




you might want a consistent header to show your logo
you might want a bar down the side of the page for
displaying links and navigation controls.
You might want a footer at the bottom of each page
providing still more links. Or
you may want a combination of header, sidebar, and
footer.
Examples
Create A folder for the Master Pages
 Make sure you create a folder for the master
pages as it is going to be easier to find them
and collect them as a whole.
 You might use more than one master pages
 REMEMBER : The rest of the page can
contain anything
Creating A Master Page
 In Solution Explorer, right-click the folder in which you





want to place the Master Page and choose Add New
Item.
In the Add New Item dialog box, click Master Page.
Enter a name for your page, or just accept the default
name MasterPage.master.
Choose a programming language (Visual C#).
Select the “Place code in separate file” check box.
Click the Add button.
Designing your page Layout
 From the VWD menu bar, choose
Layout➪Insert Table.
 In the Insert Table dialog box that opens,
choose Template.
 Choose a template from the drop-down list.
For example, choose the Header and Side
layout.
 Click OK.
 Move the ContentPlaceHolder accordingly
Styling Master Page Panes-HEADER
 Right click on a pane and choose STYLE
 The Style Builder follows the CSS specifications
 Setting background color
 Setting text alignment (HorizontalLeft,
VerticalBottom)
 Choose position of header---(Height 50 px Width
100%)
 Setting borders around the pane-Choose down edgeChose style width and color of the border line
Styling Master Page Panes-SIDE
 Choose a different color
 Text Alignment—(set HorizontalCentered,
VerticalTop)
 As a rule, the height of the side pane is equal
to the height of the browser window. The
width is usually up to 50% greater than the
height of the HEADER.
 You also want only right borders
Styling the CONTENTPLACEHOLDER
Pane
 The ContentPlaceHolder pane does not realy need to
be styled because a PAGE will fill it up
 However if you make the pane to be aligned to the
top of the table cell you may find it easier to work with
Master Pages.
 Make sure the mouse pointer is in the same cell as
the ContentPlaceHolder, but not on the
ContentPlaceHolder  Right
ClickStyleTextVerticalTop
 Add padding: StyleEdgesPaddingput 5 px for
all 4 sides
Using A Master Page
 To use a Master page you must create a new Web
Form
 Right-click the site name at the top of Solution
Explorer and choose:








Add New Item.
In the Add New Item window that opens, choose Web
Form.
In the Name box, enter a name for the page.
For Example choose the name TestMaster.aspx because
this is just a test page.
Choose the Select Master Page check box
Click the Add button.
In the Select a Master Page dialog box that opens, click
the name of the folder that contains the Master Page
(Masters, in this example).
Then click the name of the Master Page you want to
useClick OK.
Write something in the Content Page
 The content page is no different than any
other page
 Add some content here


Add a picture
Add some text
 Right Click on the page’s name in the solution
explorerChoose view in Browser
 Note that the header and the side don’t look
like you designed them. WHY???
Editing a Master Page
 Open again the Master page
 Place a logo picture on the left of the header
 Add text  Choose HEADING 1 Add the text
“WELCOME” to the side pane
 Drag a login control to the side pane after the
welcome text shown
 As you add content to the left pane of the Master
Page, the width of the pane changes to
accommodate the content. Try not to let that bother
you because it’s not always a direct reflection of how
things will look in a Web browser.
Adding a Master Page to Existing Pages
 If you’ve already created some pages in Visual Web
Developer without specifying a Master Page, you can
still get that content into a Master Page’s Content
area using simple copy-and-paste techniques.
 If you want the new page you’re about to create to
have the same name as the original page, you’ll need
to rename that original page first.
 To do so, right-click its name in Solution Explorer and
choose Rename. Type a new name (without
changing the .aspx extension) and press Enter. For
example, you might rename Default.aspx to
OriginalDefault.aspx.
Adding a Master Page to Existing
Pages---CONTINUE

Then, to copy and paste the stand-alone page’s content into a new page’s Content
placeholder, follow these steps:











Double-click the stand-alone page to open it. In the example, that would
be the OriginalDefault.aspx page.
If the page opens in Source view, click the Design button to switch to
Design view.
Select and copy everything in the page (press Ctrl+A, then press
Ctrl+C).
Right-click the site name at the top of Solution Explorer and choose
Add New Item.
In the Add New Item dialog box, choose Web Form, and make sure you
also choose (check) the Select Master Page check box.
Name the page whatever you like.
Click the Add button.
In the Select a Master Page box, click the folder that contains the
Master, then click the Master Page.
Click OK.
In the new page that opens, right-click the empty Content placeholder
and choose Paste.
If Pictures don’t show in a Master
Page
 When you choose View in Browser to view a page that uses a Master
page, pictures in the
 Master page should show up in the browser. If you see a red X where
the picture should be, you need to make a slight change to the Master
page. Here’s how:
 Close the browser, then double-click the Master Page in Solution
Explorer to open it.
 With the Master Page open for editing, click the Source button at
the bottom of the design surface to switch to Source view.
 Locate the <img...> tag for the picture, which should look
something like this: <img src=”../Images/Logo.gif” />
 Add runat=”server” to the <img> tag. Make sure there’s a blank
space before and after those new words and that the whole thing is
inside the < and /> tags as follows:
 <img src=”../Images/Logo.gif” runat=”server” />
 Close and save the Master page. Then view in a browser any page
that uses the Master to verify that the picture works correctly.
CREATI NG WEB PAGES
Creating and editing tables
Adding hyperlinks to pages
Adding and styling pictures
Working in Source view
CREATING A NEW BLANK PAGE
 Visual Web Developer offers you two types of Web
pages to create:


Web Forms: Can contain HTML and ASP.NET Server
controls. The filename extension is .aspx.
HTML Pages: Can contain HTML but no ASP.NET
controls. The filename extension is .html.
 So if you want your page to use any ASP.NET
capabilities at all, even if you just want to use a
Master Page with the page you’re creating, you want
to create a Web form. You would only use HTML to
create pages that don’t use a master, and don’t use
ASP.NET controls.
CREATING HTML TABLES
 Create a page (Web Form)  Call it Login.aspx (using the
master page)
 To add a table do the following:








In your page, click where you want to put the table.
Choose Layout➪Insert Table from the menu bar. The
Insert Table dialog box opens.
Choose the Custom option.
Specify the number of rows and columns you want. For
example, create a table with two rows and two columns.
Optionally, choose other formatting options under
Layout and Attributes.
(NOTE : Instead of choosing options in the Insert Table
dialog box to format every table you create, you can use
CSS to create a general style that applies to all tables.)
Click OK.
Just type on the cells created
CREATING HTML TABLES
WORKING WITH TABLES
 You can change a table or its contents at any time:
 Click on any cellLayout …
 Add a column
 Add a row
 Insert a Delete an entire table choose
Layout➪Delete➪Table.
 Delete a column Layout➪Delete➪Column.
 Delete a row Layout➪ Delete➪Row.
 Delete a cell Layout➪Delete➪Cell.
 Resize a column Layout➪Resize➪Resize Column.
 Resize a row Layout➪Resize➪Resize Row.
 Style individual cells
 Merge cells
ADDING CONTROLS INTO CELLS
(Login Control-Hyperlinks)
 Add a Login control on the right-down cell
 Add the text “Sign Up Now” in the left down cell
 Select the text with your mouse
 FormatConvert to HyperLink
 Choose the link’s Type. For example, choose http: for
a Web page.
 Type (or paste) the complete URL of the target Web
page.
 Click OK.
 Quick links to your site Choose BrowseFind a
page in your siteLink to that page
 Notice the different types of links we can create (ftp,
http, etc.)
CREATING BOOKMARKS
 Your page can contain
bookmarks, places that you
can jump directly to from any link in the same page,
or any link in any other page. To create a bookmark,
click where you want to place the bookmark in your
page, so the cursor is positioned where you want the
bookmark to be.
 Choose Format➪Insert Bookmark
 Type in a name for your bookmark (for example, Top
for a bookmark at the top of a page). Then click OK.
 In source view watch the code added : <a
name="top"></a>
LINKING TO BOOKMARKS
 To create a link to a bookmark from within the same
page, follow these steps:




Type the text of the link exactly as you would for
creating a link to an external page.
Select that text and click the Convert to Hyperlink
toolbar button.
In the dialog box that opens, choose Other as the
link type.
For the URL, type the bookmark name preceded by a
pound sign (#). (Example : #Top)
Adding and Styling PIctures
 The easiest way to include pictures in your
Web site is to first get them into a folder in the
VWD Solution Explorer.
 To select a picture, click it. After it’s selected,
the picture appears framed with a border
showing three dragging handles
 Also, the Properties sheet displays an <IMG>
tag; the Src (source) property will be the path
to the image file.
Positioning Pictures—Bordering
Pictures
 Right click on the pictureStylePosition
 Position Mode Options :
 Position in normal flow: Anchors the figure to
neighboring text so it sticks to the current paragraph.
(This is the most common selection.)
 Offset from normal flow: Anchors the figure to the
neighboring text, offset from where it would normally
appear in the flow by whatever amount you specify in
the Top and Left options.
 Absolutely position: Anchors the figure to a specific
place on the page, independent of text flow.
 From the Style BuilderEdges Pick a bordering
style.
 You can also pad the pictures
Adding Lines in a Page
 Most likely your page will contain sections of
information
 Use lines to categorize and distinguish
sections in the page
 HTML ControlsHorizontal Line Drag it
 To style a line after inserting itRight
clickStyle
Editing and Selecting in Source View
 Move to source view
 Select with mouse pairs of tags
 Write new tags using the online tag list
 Use the debugger when writing html code
Cascaded Style Sheets (CSS)
 Defining styles for your entire Web site
 Creating CSS style sheets
 Defining CSS style rules
 Linking style sheets to your pages
 Using CSS styles in your pages
Introduction
 If you want your Web site to have a unique character and
be easy for visitors to get around in, it’s important to
maintain a consistent look and feel throughout all pages
in your site. This involves thinking about what kinds of
design elements you might use in your site.
 To maintain a consistent look and feel, it’s best to
predefine the exact appearance of all these items in
style sheets.
 The technology we use to create style sheets goes by
the name Cascading Style Sheets, or CSS for short.
 CSS is a language that works in conjunction with HTML
to define the exact appearance of any element in a Web
page. You can use it in conjunction with the style=
attribute in any HTML tag.
What is Cascading…..?
 Certain stylistic elements cascade down through child
elements
 Example


<body>
 <h1>I’m Heading</h1>
 <p>I am Paragraph. Heading and I are children of
body.</p>
</body>
 Example with CSS
 <body style=”font-family: ‘Monotype Corsiva’”>
 <h1>I’m Heading</h1>
 <p>I am Paragraph. Heading and I are children of
body.</p>
 </body>
Unless …if…otherwise …specified
 Example
 <body style=”font-family: ‘Monotype Corsiva’”>
 <h1 style=”font-family: ‘Arial Black’”>I’m Heading</h1>
 <p>I am Paragraph. Heading and I are children of
body.</p>
 </body>
 So we don’t want to fill up code in the page like style=
 Instead we create a Style Sheet with all the CSS rules we
will use. This sheet will have CSS rules of the form :





Body {font-family: ‘Bookman Old Style’}
Two major components : SELECTOR DECLARATION
The DECLARATION has the form property:value
It is another LANGUAGE
A rule can contain multiple properties. Example
 Body {font-family: ‘Bookman Old Style’}; font-size: 12pt}
CREATING A CSS Style Sheet
 To create a new style sheet, follow these steps:
 In Solution Explorer, right-click the folder in which
you want to place the style sheet and choose Add
New Item.
 In the Add New Item dialog box, click Style Sheet.
 In the Name box, type a name for your style sheet.
(For example MyStyles.css).
 Click Add.
 A new style sheet opens in the CSS Editor, at first
just showing an empty rule for defining the style of
the HTML body tag.