HTML5 & CSS3 | Dreamweaver Tutorial | Rollover Navigation Menu

Loading...

Sign in or sign up now!
Alert icon
Upgrade to the latest Flash Player for improved playback performance. Upgrade now or more info.
3,779
Loading...
Alert icon
Sign in or sign up now!
Alert icon

Uploaded by on Jan 14, 2012

The Site: http://movies-to-watch.net
Playlist: http://bit.ly/DreamweaverPlaylist
Best Web Host!:http://bit.ly/ZeHost
--
To get more information visit: http://tinyurl.com/8axk85h
--
Hey guys! This is the third video in the Create a Website Series/Project. This is a Dreamweaver Tutorials for Beginners all the way up for advanced users. Today we are creating a Rollover Navigation Menu using HTML5 and CSS3.

We begin with the standard tags html, head and body.
html tag: This tells the browser what language we speak, and everything in the website is wrapped inside it.
head tag: This tells the browser information about the website that the visitor wouldn't see ie. Where the stylesheet is.
body tag : All our content is in here ie. What a user will see.
header tag: Contains your logo etc.
nav tag: Holds your navigation.
ul tag: Unordered list.
Li Tag: Listed item.

All of the coding will be done in Adobe Dreamweaver CS5, but you do not need this version or any paid software to follow along. It will be coded by hand.
ie. Dreamweaver CS4, Dreamweaver CS3, Notepad, Notepad++ etc will all work.

There are many parts to this series so you can follow along on each step.

★ Twitter: http://twitter.com/ZeTutorials
★ Google+: gplus.to/ZeTutorials
★ FaceBook: http://facebook.com/ZeTutorialsFan
★ Subscribe: http://bit.ly/Subscribe_ZeTutorials

------
Dreamweaver CS5 Tutorial for beginners and Rollover navigation tutorial.

  • likes, 0 dislikes

Link to this comment:

Share to:

Uploader Comments (ZeTutorials)

  • Where can I get the rolover background image bro? Or is there a tutorial on how to make it?

  • @andoooooo10 You create it yourself for the color scheme you want. I used photoshop.. but you could use GIMP or Paint.net or something.

  • Loving the video's, I can finally understand what I am doing! When is the next video due? I'm dying to learn more!

  • @debeere The next episode is up, check out the playlist :)

  • Hey...

    In the start of the vid u are showing the changes u made, but when i type all that in my css/html site its just showing a blank page when i preview it:( What have i done wrong plz help...

    * { margin:0; padding:0;

    }

    header { width:100%; height:110px; background-color:#305cad; border-bottom:1px solid black;

    }

  • @TheMerchArtz You have to view it in a browser, not in Dreamweaver's design view. I believe the hot key is F12.

see all

All Comments (39)

Sign In or Sign Up now to post a comment!
  • @ZeTutorials Ok Thnx:)

  • @andoooooo10 Yes that's exactly what I'm describing. It is exreamly simple. Either do it in code view what that last way.. or click on the button in design view (dreamweaver) and in the properties panel, put the name of your file in the link tab.

  • @ZeTutorials Yes but that the link points to something in your own website. I don't know how to explain. Like not a link to other website but to something within your own website.

  • @andoooooo10 Link to a button? Do you mean if you click on a button it links you to somewhere? If so, thats just simply adding href="link"

  • Very nice vids bro. But can you make a tutorial or tell me how I can add a link to a button?

Loading...

Alert icon
0 / 00Unsaved Playlist Return to active list
    1. Your queue is empty. Add videos to your queue using this button:
      or sign in to load a different list.
    Loading...Loading...Saving...
    • Clear all videos from this list
    • Learn more