GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.

Size: px

Start display at page:

Download "GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar."

Reginald Dawson
6 years ago
Views:

0 Navigation Bar Now the all-important question Which one would you rather have on your web site?

1 GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question Which one would you rather have on your web site? The old-fashioned buttons? Or the totally dynamic navigation bar? That s exactly what I thought, so let s get started. Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 1 of 25

2 Web 2.0 Menus: Horizontal Navigation Bar with Current Page Navigation WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR WITH CURRENT PAGE NAVIGATION HTML Users You can code this menu by modifying the steps in the Horizontal Nav Bar with Dynamic Background Image.pdf document. To complete this tutorial, you will need the three.png images that you saved in the PortableApps\GIMP\buttons\images\gradient_menu\images folder: btn_gradient_button.png btn_gradient_hover_button.png btn_gradient_current_button.png Rename these images to menu_new.png, menu_new_current.png, and menu_new_hover.png PHP USERS: CODING THE DYNAMIC NAVIGATION BAR To code this menu in PHP with a dynamic <title> tag value and current page navigation, you will create three files: inc_menu.php index.php menu.css Place these three files in a dynamic_menu folder. Place the three button images (menu_new.png, menu_new_current.png, and menu_new_hover.png)in an images folder inside the dynamic_menu folder. Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 2 of 25

3 (You can rename these from the buttons tutorial). inc_menu.php ************************************* Step 1: In a text editor, create a php include file named inc_menu.php with the following code. You will add additional code later. <div id="menu"> <?php echo?> </div> <ul> href='index.php?page=web20' class='current'>home</a></li> href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges'>badges</a></li> href='index.php?page=icons'>icons</a></li> href='index.php?page=buttons'>buttons</a></li> href='index.php?page=animation'>animation</a></li> href='index.php?page=banners'>banners</a></li> href='index.php?page=menus'>menus</a></li> href = 'index.php?page=design'>design</a></li> href = 'index.php?page=common'>common</a></li> menu.css Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 3 of 25

4 Step 1: In the text editor, create a stylesheet named menu.css to format the menu. Author: Diana Kokoska File: CSS styles to format inc_menu.php Date: 6/26/2011 #menu { margin: auto; width:800px; } #menu ul {  list-style:none; } #menu li { list-style:none;  display:block; float:left; margin:0 2px; } #menu li a { display:block; font-family: "Arial Black"; Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 4 of 25

5 float:left; color:black; font-variant: small-caps; font-size:11px; font-weight:bold; text-decoration:none; background:url(images/menu_new.png) repeat-x; height:150px; line-height:100px; padding:0 12px; } #menu li a:hover { background:url(images/menu_new_hover.png) repeat-x; } index.php Step 1: In a text editor, create index.php, which will require the inc_menu.php file. Below the ending <title> tag, insert a link to the menu.css cascading style sheet. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" lang="en" xml:lang="en"> <head> <title> Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 5 of 25

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </title> <link href = "menu.css" rel = "stylesheet" type = "text/css" /> </head> <body> <?php require ("inc_menu.php");?

6 <meta http-equiv="content-type" content="text/html; charset=iso " /> </title> <link href = "menu.css" rel = "stylesheet" type = "text/css" /> </head> <body> <?php require ("inc_menu.php");?> </body> </html> VIEWING THE FILES IN THE BROWSER Step 1: Upload the dynamic_menu folder to the server and view in the browser. The menu should display as shown below with a green bar displaying above the button over which the mouse is hovered. DISPLAYING A BLUE BAR ABOVE THE MENU FOR THE CURRENTLY DISPLAYED PAGE Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 6 of 25

7 Step 1: Modify the inc_menu.php file as shown below the only change in each code section is the class = 'current' that is in a different <li> tag in each case statement. <div id="menu"> <?php switch ($_GET['page']) { case 'web20': echo " <ul> href='index.php?page=web20' class='current'>home</a></li> href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges'>badges</a></li> href='index.php?page=icons'>icons</a></li> href='index.php?page=buttons'>buttons</a></li> href='index.php?page=animation'>animation</a></li> href='index.php?page=banners'>banners</a></li> href='index.php?page=menus'>menus</a></li> href = 'index.php?page=design'>design</a></li> href = 'index.php?page=common'>common</a></li> Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 7 of 25

8 case 'gimp': echo " <ul> href='index.php?page=web20'>home</a></li> href='index.php?page=gimp' class='current'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges'>badges</a></li> href='index.php?page=icons'>icons</a></li> href='index.php?page=buttons'>buttons</a></li> href='index.php?page=animation'>animation</a></li> href='index.php?page=banners'>banners</a></li> href='index.php?page=menus'>menus</a></li> href = 'index.php?page=design'>design</a></li> href = 'index.php?page=common'>common</a></li> case 'text_effects': Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 8 of 25

9 echo " <ul> href='index.php?page=web20'>home</a></li> href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects' class='current'>text</a></li> href='index.php?page=badges'>badges</a></li> href='index.php?page=icons'>icons</a></li> href='index.php?page=buttons'>buttons</a></li> href='index.php?page=animation'>animation</a></li> href = 'index.php?page=common'>common</a></li> case 'badges': href='index.php?page=banners'>banners</a></li> href='index.php?page=menus'>menus</a></li> href = 'index.php?page=design'>design</a></li> echo " <ul> href='index.php?page=web20'>home</a></li> Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 9 of 25

10 href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges' class='current'>badges</a></li> href='index.php?page=icons'>icons</a></li> href='index.php?page=buttons'>buttons</a></li> href='index.php?page=animation'>animation</a></li> href='index.php?page=banners'>banners</a></li> href='index.php?page=menus'>menus</a></li> href = 'index.php?page=design'>design</a></li> href = 'index.php?page=common'>common</a></li> case 'icons': echo " <ul> Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 10 of 25

11 href='index.php?page=web20'>home</a></li> href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges'>badges</a></li> class='current'>icons</a></li> href='index.php?page=icons' href='index.php?page=buttons'>buttons</a></li> href='index.php?page=animation'>animation</a></li> href='index.php?page=banners'>banners</a></li> href='index.php?page=menus'>menus</a></li> 'index.php?page=design'>design</a></li> href = href = 'index.php?page=common'>common</a></li> case 'buttons': Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 11 of 25

12 echo " <ul> href='index.php?page=web20'>home</a></li> href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges'>badges</a></li> >Icons</a></li> class='current'>buttons</a></li> href='index.php?page=icons' href='index.php?page=buttons' href='index.php?page=animation'>animation</a></li> href='index.php?page=banners'>banners</a></li> href='index.php?page=menus'>menus</a></li> href = 'index.php?page=design'>design</a></li> href = 'index.php?page=common'>common</a></li> Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 12 of 25

13 case 'animation': echo " <ul> href='index.php?page=web20'>home</a></li> href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges'>badges</a></li> >Icons</a></li> href='index.php?page=icons' href='index.php?page=buttons'>buttons</a></li> class='current'>animation</a></li> >Banners</a></li> href='index.php?page=animation' href='index.php?page=banners' href='index.php?page=menus'>menus</a></li> href = 'index.php?page=design'>design</a></li> Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 13 of 25

14 href = 'index.php?page=common'>common</a></li> case 'animation': echo " <ul> href='index.php?page=web20'>home</a></li> href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges'>badges</a></li> >Icons</a></li> href='index.php?page=icons' href='index.php?page=buttons'>buttons</a></li> href='index.php?page=animation'>animation</a></li> class='current'>banners</a></li> href='index.php?page=banners' Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 14 of 25

15 href='index.php?page=menus'>menus</a></li> href = 'index.php?page=design'>design</a></li> href = 'index.php?page=common'>common</a></li> case 'menus': echo " <ul> href='index.php?page=web20'>home</a></li> href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges'>badges</a></li> >Icons</a></li> href='index.php?page=icons' href='index.php?page=buttons'>buttons</a></li> href='index.php?page=animation'>animation</a></li> Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 15 of 25

16 >Banners</a></li> class='current'>menus</a></li> href='index.php?page=banners' href='index.php?page=menus' href = 'index.php?page=design'>design</a></li> href = 'index.php?page=common'>common</a></li> case 'design': echo " <ul> href='index.php?page=web20'>home</a></li> href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges'>badges</a></li> >Icons</a></li> href='index.php?page=icons' href='index.php?page=buttons'>buttons</a></li> Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 16 of 25

17 href='index.php?page=animation'>animation</a></li> >Banners</a></li> href='index.php?page=banners' href='index.php?page=menus'>menus</a></li> class='current'>design</a></li> href = 'index.php?page=design' href = 'index.php?page=common'>common</a></li> case 'common': echo " <ul> href='index.php?page=web20'>home</a></li> href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges'>badges</a></li> >Icons</a></li> href='index.php?page=icons' Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 17 of 25

18 href='index.php?page=buttons'>buttons</a></li> href='index.php?page=animation'>animation</a></li> >Banners</a></li> href='index.php?page=banners' href='index.php?page=menus'>menus</a></li> >Design</a></li> class='current'>common</a></li> href = 'index.php?page=design' href = 'index.php?page=common' default: echo " <ul> href='index.php?page=web20' class='current'>home</a></li> href='index.php?page=gimp'>gimp </a></li> href='index.php?page=text_effects'>text</a></li> href='index.php?page=badges'>badges</a></li> href='index.php?page=icons'>icons</a></li> href='index.php?page=buttons'>buttons</a></li> Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 18 of 25

19 href='index.php?page=animation'>animation</a></li> href = 'index.php?page=common'>common</a></li>?> </div> } href='index.php?page=banners'>banners</a></li> href='index.php?page=menus'>menus</a></li> href = 'index.php?page=design'>design</a></li> Step 2: Upload the modified inc_menu.php file to the server. Step 3: Modify the menu.css file by adding the two style definitions below: #menu li a.current { display:block; float:left; background:url(images/menu_new_current.png) repeat-x; color:black; font-variant: small-caps; Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 19 of 25

font-size:11px; font-weight:bold; text-decoration:none; padding:0 14 px; line-height:100px; } #menu li a:hover.current { color:black; } Step 4: Upload the modified menu.css to the server.

20 font-size:11px; font-weight:bold; text-decoration:none; padding:0 14 px; line-height:100px; } #menu li a:hover.current { color:black; } Step 4: Upload the modified menu.css to the server. Step 5: View index.php in the browser and click on a button link and move the cursor to another link. The button on which you clicked should be displayed with a blue bar over it. ADDING A DYNAMIC VALUE TO THE <TITLE> TAG Step 1: In the index.php file, add the following switch statement at the top of the document above the <title> tag. <?php Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 20 of 25

21 switch ($_GET['page']) { case 'web20': $title = "CIS251 Web 2.0 Home page"; case 'gimp': $title = "CIS251 Web 2.0 Gimp"; case 'text_effects': $title = "CIS251 Web 2.0 Text Effects"; case 'badges': $title = "CIS251 Web 2.0 Badges"; case 'icons': $title= "CIS251 Web 2.0 Icons"; case 'buttons': $title = "CIS251 Web 2.0 Buttons"; case 'banners': $title = "CIS251 Web 2.0 Banners"; Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 21 of 25

22 case 'common': $title = "CIS251 Web 2.0 Common Tasks"; case 'animation': $title = "CIS251 Web 2.0 Animation"; case 'design': $title = "CIS251 Web 2.0 Page Design"; case 'menus': $title = "CIS251 Web 2.0 Menus"; default: $title = "CIS251 Web 2.0 Home Page"; }?> Step 2: Add the following line of php code between the opening and closing <title> tags: <title> <?php echo $title?> <meta http-equiv="content-type" content="text/html; charset=iso " /> </title> Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 22 of 25

23 Step 3: Upload the modified index.php file to the server. CREATING A TEST PAGE Step 1: In the text editor create a buttons page named inc_buttons.php with the following content: <p>this is the buttons page.</p> Step 2: Upload the inc_buttons.php page to the server. Step 3: Open index.php and add the following code below the require statement above the ending?> php tag. require("inc_menu.php"); switch ($_GET['page']) { case 'web20': include "inc_web20.php"; $title = "CIS251 Web 2.0 Home page"; case 'gimp': include "inc_gimp.php"; case 'text_effects': include "inc_text_effects.php"; case 'badges': Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 23 of 25

24 include "inc_badges.php"; case 'icons': include "inc_icons.php"; case 'buttons': include "inc_buttons.php"; case 'banners': include "inc_banners.php"; case 'common': include "inc_common.php"; case 'animation': include "inc_animation.php"; case 'menus': include "inc_menus.php"; case 'design': include "inc_design.php"; Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 24 of 25

25 default: } include "inc_web20.php"; Step 4: Upload the modified index.php file to the server. Step 5: Click on the Buttons tab on the navigation bar. The content This is the buttons page displays in the body and the tab navigation displays CIS251 Web 2.0 Buttons. Web 2.0 Menus Horizontal Navigation Bar with Current Page Navigation Page 25 of 25

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever