Full Site. How to add new menu item and new page

This video tutorial will show you how to add new menu and new page. Due to the common file structure this tutorial can also be used for any HTML based template like Full Package, Flash/Swish animated, Static version of flash templates.

1. Open Index.html file from ‘site_flash’ folder to see the preview.

2. Then open the same file in Adobe Dreamweaver program.

3. Locate our menu items. Copy one of them and paste it right below the last menu item.

4. Change the menu item Title and ‘html’ file which it will be linked to.

5. Lets name our new page ‘newpage.html’

6. Save this file.

7. Now, we need to create a new page.

8. We can simply duplicate one of the existing pages. Select any of the ‘html’ files and press CTRL+C to copy and CTRL+V to paste.

9. So, we have duplicated ‘index-2.html’ file and renamed it to ‘newpage.html’

10. Open that ‘newpage.html’ file in Dreamweaver and add the menu item, as we did it previously.

11. Let’s now open all the other html files (pages) in Dreamweaver. We should add menu item for each file; so that our newly added menu will be visible in every page.

12. Also, on the newly added page, our new menu item needs to include an ‘active’ class. So, let’s add the class to the menu item.

Now, when website visitor will access this page, the menu item will be ‘active’. In our case, this menu item will include an underline.

13. Save all the files.

NOTE: newly added menu item might not be in place.

We can fix it by modifying the ‘style.css’ file.

14. Open the ‘Style.css’ file from ‘site_flash/css’ folder in Dreamweaver.

15. Locate our menu ‘margin-left’ value and change its value. Find this code:

  .menu li {
	float:left;
	position:relative;
	background:url(../images/devider-1.gif)  0 0 no-repeat;
	padding:1px  0 1px 22px;
	margin-left:22px;
  	}
   

And change the ‘margin-left’ value to approximately 11px:
margin-left:11px;

Save this file and open the “index.html’ file in the browser to see the changes.

Feel free to check the detailed video tutorial below: