INNOVATIVE TUTORIALS: HTML

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />

<br />
<div class="MsoNormal" style="text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicqgQC9T-uqKjoef4QiuJCU4BOZ8hUkIglTLULyx5qtO-IRu4AiNeHDsHB8VJiNeg_BkYRHmkWjx3w2MgN9qAJXOne3NTF4cYlurOzaDWucbSDXrX2AhvmJkAOBXADFklRlov5BC6gW2Q/s1600/web_design.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicqgQC9T-uqKjoef4QiuJCU4BOZ8hUkIglTLULyx5qtO-IRu4AiNeHDsHB8VJiNeg_BkYRHmkWjx3w2MgN9qAJXOne3NTF4cYlurOzaDWucbSDXrX2AhvmJkAOBXADFklRlov5BC6gW2Q/s1600/web_design.jpg" width="320" /></a><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">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:</span></div>
<div class="MsoNormal" style="text-align: left;">
<br /></div>
<div class="MsoNormal" style="text-align: left;">
<br /></div>
<br />
<div class="MsoNormal" style="text-align: left;">
<b><span style="font-family: Wingdings; font-size: 12.0pt; line-height: 115%; mso-bidi-font-family: Wingdings; mso-fareast-font-family: Wingdings;"><span style="mso-list: Ignore;">1. <span style="font: 7.0pt "Times New Roman";"> </span></span></span><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">Visitors
cannot navigate through your website properly</span></b></div>
<div class="MsoNormal" style="text-align: left;">
<br /></div>
<div class="MsoNormal" style="text-align: left;">
<b><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">2. Less Visitors means less traffic</span></b></div>
<div class="MsoNormal" style="text-align: left;">
<br /></div>
<div class="MsoNormal" style="text-align: left;">
<b><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">3. Less traffic means your website is almost Dead</span></b></div>
<div class="MsoNormal" style="text-align: left;">
<br /></div>
<div class="MsoNormal" style="text-align: left;">
<b><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">4. High chance of Google AdSense rejection because Google strictly examines  </span></b></div>
<div class="MsoNormal" style="text-align: left;">
<br /></div>
<div class="MsoNormal" style="text-align: left;">
<b><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">    your website layout and structure, and no doubt menu bar is a part of it! </span></b></div>
<div class="MsoNormal" style="text-align: left;">
<b><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;"><br /></span></b></div>
<div class="MsoNormal" style="text-align: left;">
<br /></div>
<br />

<br />
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">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.</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">Requirements:<span style="mso-spacerun: yes;">  </span></span></b></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">Adobe Photoshop (any version), Adobe Dreamweaver (any
version) and a browser (any) to test it.</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">Settings:</span></b></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">Create a folder named Menu bar on your desktop and
two more folder inside it named-Background and foreground.</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;"></span></div>
<br />
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">

</span></div>
<div class="MsoNormal">
<b><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">Procedure:</span></b></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<u><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">In Adobe Photoshop:</span></u></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">1. Open an Adobe Photoshop, Create a new document
of dimensions:<span style="mso-spacerun: yes;">                                                                                                     
</span><span style="mso-spacerun: yes;"> </span><span style="mso-spacerun: yes;">               </span>width: 800 px,
height: 50 px, resolution: 72 px/inch, background: white</span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZWkWqx-dRLZPiRuVhdRt3FpDpUX64SNMr-rfZU2cVo7reBmDINhn1ggO0SVHNYORXcX4e-109dcLORKdSM-0DQnt_eTE8xgiL0wWhLkgvniqe2rr9t5-zh7dscjaWN3IBsRS3jqhHeg/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="43" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAZWkWqx-dRLZPiRuVhdRt3FpDpUX64SNMr-rfZU2cVo7reBmDINhn1ggO0SVHNYORXcX4e-109dcLORKdSM-0DQnt_eTE8xgiL0wWhLkgvniqe2rr9t5-zh7dscjaWN3IBsRS3jqhHeg/s1600/1.PNG" width="400" /></a></div>
<br />
<div class="MsoNormal">
<br /></div>
<br />
<br />
<div class="MsoNormal">
<br /></div>

<br />

<br />
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">2.<span style="mso-spacerun: yes;">  </span>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.</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">3. Now add some text on each slice by selecting
text tool as shown in image below:</span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfI26CRRuWEUwLOB5h-f-JWZENflKaUZ4T1IP0yzpy5EqJvbvJalxWhoH1CMHfTZD1HhMMLA5kNnypvmXNr2sZ6HDI_jZMpxRK47ABhM3rWK8yI3rorfqf9kHF-ji9XwzOnN9hb6YGSA/s1600/2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="36" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhfI26CRRuWEUwLOB5h-f-JWZENflKaUZ4T1IP0yzpy5EqJvbvJalxWhoH1CMHfTZD1HhMMLA5kNnypvmXNr2sZ6HDI_jZMpxRK47ABhM3rWK8yI3rorfqf9kHF-ji9XwzOnN9hb6YGSA/s1600/2.PNG" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">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.</span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvb-hmtGrE1MQ0hdf8GCxKhD8iUEoTgxa2K22DwiXrYHvoZ8gJ0JK40eoowVbiifJybja03x2eFclH3wEK9TQDrAx29StbscpUm8S0r4GbnCCBR4_RhyphenhyphenZzlhoI0swx8TjvOZ6h_xRAPU/s1600/3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvb-hmtGrE1MQ0hdf8GCxKhD8iUEoTgxa2K22DwiXrYHvoZ8gJ0JK40eoowVbiifJybja03x2eFclH3wEK9TQDrAx29StbscpUm8S0r4GbnCCBR4_RhyphenhyphenZzlhoI0swx8TjvOZ6h_xRAPU/s1600/3.PNG" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">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:</span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbswUeceqzKbprPlCpQ36WEM20m_xHcMKjYaAHNUOqSAhyfQKGVlCoE0k_NZM5WUA07oEoTWNxUBaxlbw4sBvY6qZy0hhcLuO2b2vHBLK6ysW6hTey39unZAbfI3PlFCSLRfcfpQjz5Bk/s1600/4.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="189" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbswUeceqzKbprPlCpQ36WEM20m_xHcMKjYaAHNUOqSAhyfQKGVlCoE0k_NZM5WUA07oEoTWNxUBaxlbw4sBvY6qZy0hhcLuO2b2vHBLK6ysW6hTey39unZAbfI3PlFCSLRfcfpQjz5Bk/s1600/4.PNG" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;"><span style="mso-spacerun: yes;">  </span>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:</span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVTLEJR-qVQUFQOJFKzSDQxHQiWL9KanTpd6jlJjMGLxR9TOFaD8i3HAere8Z8ZaKsUxeRvy9je8w-_Eu460y30KZMXM13ihuDNVUNpxwim_fBU2DGODerdWV_vOa-p9bRzgyuuah_o4/s1600/5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVTLEJR-qVQUFQOJFKzSDQxHQiWL9KanTpd6jlJjMGLxR9TOFaD8i3HAere8Z8ZaKsUxeRvy9je8w-_Eu460y30KZMXM13ihuDNVUNpxwim_fBU2DGODerdWV_vOa-p9bRzgyuuah_o4/s1600/5.PNG" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7E-_xrpz75oAZlpUHcqxpwj7dSG_mva8OPPru1HwpiszEr1hs025fuHQ5yDUP4kf4XF4BdGLByiO8bOjKZViVag0iXLNjhzN9HzkkoaVjCsQCKHt47q4TmC6mePcXhQ0b343wQ0yP9N8/s1600/6.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7E-_xrpz75oAZlpUHcqxpwj7dSG_mva8OPPru1HwpiszEr1hs025fuHQ5yDUP4kf4XF4BdGLByiO8bOjKZViVag0iXLNjhzN9HzkkoaVjCsQCKHt47q4TmC6mePcXhQ0b343wQ0yP9N8/s1600/6.PNG" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">7. <span style="mso-spacerun: yes;"> </span>Again,
go to fx and to Gradient Overlay option and this time increase the opacity % to
25 % as in image below:<span style="mso-spacerun: yes;">    </span></span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgrv0vIQmN7oUxQom-ZICKxUlJasA0GamQQGflyY4rKeM5QGfKUojzb01trSh1tMe05jInLeOGGoHHjkQlc-XbgXCINbkNxJI6rscEyabBIIdl7hSFTfv-qdf4aAuVo6VbRjBPUJdB4Wc/s1600/7.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgrv0vIQmN7oUxQom-ZICKxUlJasA0GamQQGflyY4rKeM5QGfKUojzb01trSh1tMe05jInLeOGGoHHjkQlc-XbgXCINbkNxJI6rscEyabBIIdl7hSFTfv-qdf4aAuVo6VbRjBPUJdB4Wc/s1600/7.PNG" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">8. Save it as before with same setting but this
time in a background folder as shown in image below:</span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTYp5hR2NR857egfrkMXiLGdGKR-oLOeFiHmGgcWsKrDXEbkqpBn_GRRLkhZaBFDtNynhxFFHx-550Yrj1m6uKnDC9VMMtYdHTLDHkKNsBODOjxmknxzlB8smdVnG5bI4SaQnvN566kU/s1600/8.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="96" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyTYp5hR2NR857egfrkMXiLGdGKR-oLOeFiHmGgcWsKrDXEbkqpBn_GRRLkhZaBFDtNynhxFFHx-550Yrj1m6uKnDC9VMMtYdHTLDHkKNsBODOjxmknxzlB8smdVnG5bI4SaQnvN566kU/s1600/8.PNG" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<u><span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">In Adobe Dreamweaver:<span style="mso-spacerun: yes;">   </span></span></u></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">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.</span></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">Now you will see all the items into Dreamweaver.</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">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:</span></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5rjoI0NMeDx9jb4-8KWFtu0nBhn9ugy1FULywnLMa3Entt3VItwAnSfovN0cEaldlhRbJf2OBUW6SSK_KSu_4BOG88HjvWJDYxWPoPtqmxhUhreopaCqijYeOY_v9hDeEc60F-Fy6Fjw/s1600/9.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5rjoI0NMeDx9jb4-8KWFtu0nBhn9ugy1FULywnLMa3Entt3VItwAnSfovN0cEaldlhRbJf2OBUW6SSK_KSu_4BOG88HjvWJDYxWPoPtqmxhUhreopaCqijYeOY_v9hDeEc60F-Fy6Fjw/s1600/9.PNG" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">3.<span style="mso-spacerun: yes;">  </span>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:</span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9dgsJc-ZoZGQom_KDnmVxxRwHNFrdJEzZKlSBGjsZiGA27cXxUAVgSqH-2WoS1qQXc7e1Sn0qfUVebESdBolRAqPlASk4bolLFWDbqKdVl8QKlFj3XlMiFegvXCcv0kKs3TJvcZdv9xE/s1600/10.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9dgsJc-ZoZGQom_KDnmVxxRwHNFrdJEzZKlSBGjsZiGA27cXxUAVgSqH-2WoS1qQXc7e1Sn0qfUVebESdBolRAqPlASk4bolLFWDbqKdVl8QKlFj3XlMiFegvXCcv0kKs3TJvcZdv9xE/s1600/10.PNG" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-font-family: Mangal; mso-bidi-language: NE; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin;">4. Click on OK. Now you can see following thing in
your design view:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__qpmjV2o02nRtieLYfF50D9uXPUskwM_Q9qMB9xrIbX8COnDh6wbt5JOt4ZHlEPUWh9Vk0BWmc2cKPrAVB0zDn2Z8twIg_fD475k-x3ErIGKH_TYMoqZUgWfI90slshwS6Zd4XlA6ug/s1600/11.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="76" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__qpmjV2o02nRtieLYfF50D9uXPUskwM_Q9qMB9xrIbX8COnDh6wbt5JOt4ZHlEPUWh9Vk0BWmc2cKPrAVB0zDn2Z8twIg_fD475k-x3ErIGKH_TYMoqZUgWfI90slshwS6Zd4XlA6ug/s1600/11.PNG" width="320" /></a></div>
<br />
<br />
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-font-family: Mangal; mso-bidi-language: NE; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin;"></span><br />
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%; mso-ansi-language: EN-US; mso-bidi-font-family: Mangal; mso-bidi-language: NE; mso-bidi-theme-font: minor-bidi; mso-fareast-font-family: Calibri; mso-fareast-language: EN-US; mso-fareast-theme-font: minor-latin;">

</span><br />
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">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:</span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPz8muCPg_jkltHb_pw1D3inuLN-VbiyLvEzK6mT09KOXQWSi_UAYABMtT3rq-ZqOq4Ez7nrS5zDqjA05ToUrBnElNZ8VnbtIVyOO8L2HKC0YQ2bkkyznssGFxaw6z1JTVn3FpYSK42Eo/s1600/12.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPz8muCPg_jkltHb_pw1D3inuLN-VbiyLvEzK6mT09KOXQWSi_UAYABMtT3rq-ZqOq4Ez7nrS5zDqjA05ToUrBnElNZ8VnbtIVyOO8L2HKC0YQ2bkkyznssGFxaw6z1JTVn3FpYSK42Eo/s1600/12.PNG" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">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.</span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT46eb-f9Ca6wCGWb9NGAJKNhmTCiQ4pXcRIp-FVtm9iRaNAhoUzcaG9DVffSQ-ahyphenhyphenJA3qe4sWOD0_guFi8a8kTyzfcWgDcA0_j8w-yiA1Tf1o8JeZ-J-pGO2CQViPzm4aIDV41RHyVoA/s1600/13.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="101" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT46eb-f9Ca6wCGWb9NGAJKNhmTCiQ4pXcRIp-FVtm9iRaNAhoUzcaG9DVffSQ-ahyphenhyphenJA3qe4sWOD0_guFi8a8kTyzfcWgDcA0_j8w-yiA1Tf1o8JeZ-J-pGO2CQViPzm4aIDV41RHyVoA/s1600/13.PNG" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">7. Save the image as index.html</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">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.</span></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">10. After completing, your navigation bar will
look like this:</span></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsAE6Roz3Pom1pt5lOAzDe6fdCWC8FjFLjt_6a0aieM1_F20i6b2YUZ4zFLPk1E5XYG-y6-lck8m40cMCrhwqKcCFdnWjaE_tLAdIRIXxCGOFef9NBKlH-UJIrGNlhc-h1y67qCil7w2w/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="112" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsAE6Roz3Pom1pt5lOAzDe6fdCWC8FjFLjt_6a0aieM1_F20i6b2YUZ4zFLPk1E5XYG-y6-lck8m40cMCrhwqKcCFdnWjaE_tLAdIRIXxCGOFef9NBKlH-UJIrGNlhc-h1y67qCil7w2w/s1600/14.png" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">Whenever you hover your mouse pointer over any
menu elements, you will see some rollover image effects!</span></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">To watch video for this tutorial <a href="http://youtu.be/t6GPr4_XSgs" target="_blank">CLICK HERE>></a></span></div>
<div class="MsoNormal">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;">Thank You!</span></div>

<br />
<br />
<div class="MsoNormal" style="text-align: left;">
<span style="font-family: "Trebuchet MS","sans-serif"; font-size: 12.0pt; line-height: 115%;"></span></div>
<br />
<br /></div>

Create Beautiful Horizontal Navigation Bar with Adobe Dreamweaver CS6 and Adobe Photoshop CS3

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...