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 edge- Chose 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 tag for the picture, which should look something like this: Add runat=”server” to the tag. Make sure there’s a blank space before and after those new words and that the whole thing is inside the tags as follows: 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 :

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 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 I’m Heading I am Paragraph. Heading and I are children of body. Example with CSS I’m Heading I am Paragraph. Heading and I are children of body.

Unless …if…otherwise …specified Example I’m Heading I am Paragraph. Heading and I are children of 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.