Web Design Tools and Tips

article 4/4

Following on from the last lesson open up Dreamweaver and select your template file which is located, as usual, on the very right hand side of your Dreamweaver interface.Your Dreamweaver dwt ( dreamweaver template ) will open up showing you your table together with the image that you inserted in the last lesson ( called a header image ), and then follow the below instructions :

1.In the row directly beneath your image ( 2nd row of your table ) you will have two distinct columns, as in the last lesson.Make sure your cursor is flashing in the far left hand corner of this row, and left click your mouse and drag it ( while holding your mouse down, with the left click ) horizontally across the row until the two columns are highlighted or darkened, and then right click your mouse---sub menu opens up---click on table---another sub menu opens up,--- and click on merge cells.These two cells have now been merged, which gives us space to insert a navigation menu.

2.In the property inspectors box, which is the box at the very bottom of your Dreamweaver work station/ interface /control panel ( all stand for the same thing ) you will see all the properties that your page possesses, and these properties can be changed by using the property inspector commands.So go to bg ( stands for background color, and it is located to the left of Brdr, which stands for border color) within the property inspector panel, and when you left click into the bg list menu a color panel box opens up.Make sure at this point that your cursor is flashing within the very left hand corner of the merged row that you have just created, and then go back to left clicking into the bg list menu so that the color panel opens up again.Right click your mouse when the color panel box opens up, and then move your cursor to the image that you inserted in the last lesson, and choose any colour that you want from this image by pointing the pencil icon over it ( the pencil icon appears immediately you right click your mouse when the color panel box opens up ).Left click your mouse when you feel you have chosen the right color from your image, and this color will be inserted into the merged row that you recently created.
I mention this because it is important to know how to use the color panel box, because it will give your template a good blend of the right colours.If even only this technique is learned today you have done very well.

3.Position your cursor at the very left hand side of the merged, and now colored row, and type in the following : | home | about us | contact us | products | links | sitemap |
Separate the different names chosen by using your keyboard, and inserting the required | space | or whatever.Move your cursor over everything that you typed, until everything that you typed is highlighted by your cursor, and while everything is still highlighted by your cursor go to the properties inspector ( located at the bottom of your Dreamweaver work station/i nterface etc ), and click on the icon b ( b stands for bold and is situated to the right of the icon css ).This will make all the names that you typed into this row become bolder and more pronounced.

4.Lastly, move your cursor over the first specific name/ menu item / navigation item /button ( all stand for the same thing ) that you created within this row eg: home ( dont move your cursor over the | space | or whatever, just the actually name itself ) , and while it is highlighted go to the properties inspector, and you will see the word link written with a search box next to it and a folder icon next to the search box .When you click on the folder icon it will navigate you to your folder with your dwt template file.( exactly the same as when you browse for stuff using your own folders in windows ), so make sure that you browse around and find the right folder that you initially created with your specific title, and containing your dwt ( dreamweaver template ) template.When you find the right folder with the appropriate name that you called your template, click on okay and then you will see the template folder---click on it and say okay,---and then you will see the name of your template.dwt,---click on it and say okay.

Thats it you have created a link for this button or menu item eg: home,and when this button ( menu items are normally called buttons ) is clicked it will navigate to the appropriate page.( dont worry that its navigating to nothing at the moment but your template.dwt , not important at this point ).Do the same for every menu item that you have created, and you have successfully inserted a navigation system within your Dreamweaver template.

Again, as in the last lesson, in order to view how your template will appear on the internet there is an icon in your dreamweaver workstation which is represented by a small blue globe, and this icon is positioned in the menu beside the code view, split view, design view, title.Just click on it and it will open up a virtual internet, and this is what your template will look like in the real worldwide web.

This type of navigation menu ( just buttons with links ) is probably the most used menu system on the worldwide web, because it is relatively simple and straightforward.So dont be put off if it takes practise, after practise, after practise.