Creating a website from scratch can be a daunting task, especially when you decide to use your own code and not copy some pre-made garbage template. In this Dreamweaver series we are going to achieve just that and create a professional looking website from the ground up.

In this video we look at how you would make a rollover navigation menu. We will not be using images and we will not be utilizing Dreamweaver’s (overused and not search engine friendly) image presets. This is created using HTML5 and CSS3, a basic knowledge is needed but it is aimed for beginners. If you are finding it hard to follow along, it might be worth going back through my older tutorials to get a grasp of the concept.

The new tags replace the old <div> tags used in HTML4. Here are the Tags I use:

• <header> This is for the top of your webpage, where your logo and such would be.
• <nav> This new tag was simply created for navigations.
• <ul> Unordered list. This gives you bullet points normally. We remove them in CSS.
• <li> List Item: This is the text for your list.
• <a> Anchor: We use this to create the rollover effect for the entire button. Without this the rollover would only effect the text portion.

If you are having any trouble, just leave it in the discussion thread below the video and one of us will try help you out.

About Zack R

Zack runs a YouTube Channel called "ZeTutorials" and is known for his combination of videos, with topics including Dreamweaver, iOS videos, product reviews and more! He has a subscriber audience of over 7,500 people and collectively has over 1 million views!

• Twitter
|
• YouTube
|
• More Posts (1)