Dreamweaver Navigation Bar with Custom Images for beginners

Dreamweaver creates generic navigation bars on pages for you already, but you have to create your own navigation bar if you want to customize. Dreamweaver allows you to make your custom navigation bars through photo software such as Adobe Fireworks and Photoshop. It is a very easy process to create your custom navigation buttons and I will show a step by step process using Adobe Fireworks. For this example we will make a 5 button navigation bar with the help of Fireworks.

Example: Taken from www.unco.edu



In Fireworks

Step 1: Make a button folder where you can save your images for your buttons on the navigation bar. In the buttons folder there should be folders for every button.

Step 2: Open Fireworks and click File and click New. Make your width and height 1000 px each so you have a big stage to work with.

Step 3: From your tools panel select the vector rectangle and draw a rectangle on the screen. (Feel free to customize your square with fill color, stroke color, texture, filters, etc) Make the rectangle width 170 and the height 50.

Step 4: Fit to canvas

Step 5: Save as generic-button and put it in the folder you have your buttons

Step 6: Open generic-button if you closed it and now we will add text to the button to specify it as button 1. Create a new layer and make sure it is above your first layer. In the new layer go to the tools panel for the vector text tool and use it to create a text box the button. (you will have to manually place the text in the button to align it.)

Step 7: Save as Button 1 in your sub folder part of your buttons folder. Repeat for buttons 2-5

*Once done with Steps 1-7 you should have a buttons folder with 5 folders inside it. The five folders should have one button each.

Step 8: Mouse rollover images. Next we will create rollover images in fireworks so that when a mouse goes over one of the buttons in the navigation bar the button will change images. Open button1 and change the text color to something that contrasts well. You can also add an underline if you so choose. After you make the changes to the button you have to save it as button1-over and save it in the same folder as button1. Repeat for buttons 2-5.

*In your buttons folder it should look like the following



Now creating your Navigation Bar in Dreamweaver

Step 1: Open Dreamweaver and either create a new html page or open your HTML page that you would like to add your navigation bar to. Once your on the page go to the insert tab and click image objects then navigation bar.

Step 2: In the menu it brings up, name your first element button1. Next, browse for the up image and you should get it from your button 1 subfolder in your buttons folder. For the over image browse for your button1-over. Leave down and over while down blank. Alternate Text will bring up a text box when you rest the mouse over the button (not required) Set the link to your page of the button. *Important choose whether you want navigation bar to be horizontal or vertical.

Step 3: Above the Nav Bar Elements section click the plus sign and repeat Step 2 for buttons 2-5.

Final Product with mouse not rolling over.


Final Product with mouse rollover

Need for Web Design and Social Media.

In todays modern society the Internet has become a major factor in virtually all businesses. Companies need to market themselves through the internet and web design. Social Media has become a necessity for companies to network themselves because competition is starting to compete through the web more and more each year. When companies choose to have a website for their business it greatly increases there ability for consumers to find your company.

Right now I'm taking some basic to advance web design classes at UNC in Greeley, Colorado. I have learned that to have websites that will portray the highest quality you will need to have it made by some who is familiar with web development. I free lance with web design and I will have my first website up in about a month.

Tips for Search Engine Optimization

Ever wondered why you can't find your website on Google? Well, I will share a few basic techniques that may assist you in optimizing your search results without paying some one to do it for you. First off, we'll start with a very basic method which involves meta tags.

Meta Tags: There are three meta tags that you need to learn to use Title Tags, Description Tags, and Keyword Tags.

Title Tags: This is the most important tag because ultimately because it is the title of your webpage and it displays the title for a page in search results.

Description Tags: This is the little section on google that shows a short description of your page. It is vital you include this information because it will increase the probability some one will click on the link to your page.

Keyword Tags: This is a section in your coding where you should include keywords relevant to the your page and purpose your page. For example, a website like Pizza Hut, their keywords are Pizza Hut, Pan Pizza, America's Favorite Pizza, order online, Pizza, pizza delivery, carry-out, pizza carry-out, pizza specials, pizza coupons, delivery pizza, Wing Street, wing street, wings.

ScreenShots Located above text