Creating My Drop Down Menu, Home Page and About Page

Always start with creating Div Tags to contain what you want.
Screen Shot 2014-02-10 at 11.34.49
I created the drop down menu using the ‘Spry’ options under ‘Insert’. You select ‘Spry Menu Bar’ and then choose how you want it to be (e.g. vertical, horizontal, how many drop down options). I chose to create a horizontal menu bar at the top of my page (just below the name of my page) with 4 drop down option: About, Galleries, Blog and Home
Screen Shot 2014-02-10 at 14.13.09
I then inserted my chosen front page image into a new Div Tag. It appeared off centre in Dreamweaver due to the menu bar, but in fact was central when I previewed it in Google Crome.
I used some Top Padding (about 30px) to make the image lower, and set ‘Left’ an ‘Right’ placement to ‘Auto’ to make the image central.

Screen Shot 2014-02-10 at 14.13.21
To change the names of the drop down options on the menu bar, you click on the menu bar and then on the blue box that appears around it.

At this point the properties will appear at the bottom of the screen and you can Add and Subtract drop down options and sub down options.
Screen Shot 2014-02-10 at 14.13.46
Here is how it will look. To make a navigation option lead to a different page on your website, simply write the exact html name of the page in the ‘link’ box, which is below the box that lets you change the name of the drop down option, labelled ‘Text’.

e.g. I wanted ‘Biography’ to lead to the page about me, I had named this page in dreamweaver about.html
So, I simply put that into the ‘link’ box (making sure to remove the # that otherwise fills the box)
Screen Shot 2014-02-10 at 14.14.01
This is my About page in process.
Screen Shot 2014-02-10 at 15.27.34

Screen Shot 2014-02-10 at 15.27.39
This is the code for my About page. To make my life easier, and stop me having to recreate my menu bar for each individual page, I went to my front page, clicked ‘save as’ and saved a second version of it and called it ‘about’. Then, when I opened my new second version, I just deleted the images and home page div tags, keeping only my menu bar. I has made my life ten times easier and ensures better uniformity throughout my website.

The code for my ‘about’ page.
Screen Shot 2014-02-10 at 15.27.41
My front page as viewed in Google Chrome Preview
Screen Shot 2014-02-10 at 15.27.54
My ‘About Drop down’ leading to my biography and Contact us pages links.
Screen Shot 2014-02-10 at 15.27.58
My ‘Galleries drop down’ leading to a ‘252MC’ option, which when hovered over, leads to my three 252MC gallery links.
Screen Shot 2014-02-10 at 15.28.06

Advertisements