Creating Menu Bar for a Website Using Adobe
Photoshop CS3 and Adobe Dreamweaver CS6 - A Menu bar is a very crucial part of
any website. The prime aim of any website is to provide much more information
about an organization to its customers or visitors. To provide flexibility in
navigating through the pages of any website, there must be well structured,
charming and beautiful navigation bar. If it is ambiguous and unstructured it
may leads to the following problems:
1. Visitors
cannot navigate through your website properly
2. Less Visitors means less traffic
3. Less traffic means your website is almost Dead
4. High chance of Google AdSense rejection because Google strictly examines
your website layout and structure, and no doubt menu bar is a part of it!
So, today in this tutorial we are going to see
about creating a horizontal navigation bar. There are several ways to create it
like by using JavaScript, CSS, and normal HTML coding etc. But, I am going to
use my favorite and mostly preferred method which uses a rollover image
technique. We will see Step-By-Step process with Screen Shots.
Requirements:
Adobe Photoshop (any version), Adobe Dreamweaver (any
version) and a browser (any) to test it.
Settings:
Create a folder named Menu bar on your desktop and
two more folder inside it named-Background and foreground.
Procedure:
In Adobe Photoshop:
1. Open an Adobe Photoshop, Create a new document
of dimensions:
width: 800 px,
height: 50 px, resolution: 72 px/inch, background: white
2. Unlock
the layer by double-clicking it. And Select slice tool, right click on your
document anywhere and select divide Slice option. A dialog box will appear, in
there select divide vertically into option and enter the number of slices you want
to make (I am giving 7) and click on ok.
3. Now add some text on each slice by selecting
text tool as shown in image below:
4. Search for fx icon on the bottom-left corner
and at the bottom of the layers window and click on it and select Gradient
Overlay option.
5. A dialog box will appear. And in opacity option
decrease it to 15 % or input it in a box as shown in image below:
6. Now go
to File menu and select save for web and devices option. Again a new dialog
will appear in preset box select JPEG-High option and click on save. To save it
browse to the Menu bar folder on your desktop and save it inside foreground folder
inside it as shown in image below:
7. Again,
go to fx and to Gradient Overlay option and this time increase the opacity % to
25 % as in image below:
8. Save it as before with same setting but this
time in a background folder as shown in image below:
In Adobe Dreamweaver:
1. Open Adobe Dreamweaver and create a new site
before proceeding to get all the resources into it. To create new site- Go to
Site Menu>>New Site. A dialog will appear. In site Name Box give any name
and in Local site box browse your menubar folder form your desktop.
Now you will see all the items into Dreamweaver.
2. Now create new html document. And insert Div Tag
from Insert>>Layout Objects>>Div Tag. Another way is to select
directly from the insert window at upper right corner as shown below:
3. A dialog
will appear, in ID field enter Menubar and click on New CSS Rule just below it.
A new dialog will appear just click on OK. Now you can see CSS rule dialog and
enter the value as shown in the image below:
4. Click on OK. Now you can see following thing in
your design view:
5. Now click on rollover option in an insert
window or go to Insert Menu>>Image Objects>>Rollover Image. You
will see the following dialog. Just browse the images as instructed in the
image:
6. After adding all the images you will see the
following navigation bar in your Dreamweaver working area. If you can’t see
just click on Design to see design view.
7. Save the image as index.html
9. Double-click the index.html file where you have
saved (here we will get it on our desktop). Or directly you can click on the
Earth icon on the same horizontal line where you can get split,code view, Design
view option. And select preview in browser.
10. After completing, your navigation bar will
look like this:
Whenever you hover your mouse pointer over any
menu elements, you will see some rollover image effects!
Thank You!