Dreamweaver Tutorial

Hello and welcome to the video on dreamweaver tutorial. The tutorial is on how to create a CSS Horizontal Tabbed Menu which is fully Customizable too. The video is really good and easy to understand. The video is great for the new learners.

Hi everybody its James at DreamweaverTutorial.co.uk and today we gonna be looking to create a CSS tabbed navigation menu. Each link creates an illusion of a new tab when clicked upon. There are also various over rollover effects which is fully customizable and you can also choose the oval tabs, rounded tabs or square tabs. Okay so let’s go in to Dreamweaver, now I have already defined a new sign in Dreamweaver, I have coded the tab menu and I have given a CSS folder and an images folder. And what I am gonna do is take a blank HTML 1.0 transitional web page and I am going to split the screen and I am gonna go in body tag and we are start building a navigation menu. Now I am gonna create a div which is going to wrap around the whole of the menu and this is for you to use to install into your website.

So I am gonna give an id of navbar so div id whose navbar and again we are going to define in CSS folder this navbar div is a width attribute, width property. Okay so inside of navbar we are going to start creating our menu, so I am gonna give div with an id of holder because this is gonna hold and end hold we are going to turn in to horizontal tab navigation menu. Okay lets start creating an unordered list now so I am gonna open and close a UL tag, so I type in bracket UL and closing UL tag. And inside of the unordered list we are gonna put a list item tag such as li tag and inside of the list item tag we are going to place a a href link , so here is the li and closing li we are gonna type a href equals and we are gonna close the link tag and then we are gonna put a hash inside to create a no link.

Okay so we are gonna copy and paste the whole of this list item so you can press ctrl c highlight press ctrl c and then press ctrl d and it will copy and paste it as many times as you like. Okay so pull the screen if you need to but this pretty much the whole of the HTML we are going to use in this tutorial to create our horizontal tab navigation menu. So pull the screen if you need to and I got need exactly what I got here and you should see in design view as well some empty bullets that could be populated with link tag j so I am gonna start it now I am gonna type in home, products, services, ammm have a link to gallery and a link called contact.

So lets click inside the design view or press refresh to see the list items that has being populated in design view and are gonna get work on CSS now covered need to list out bullet links items and the text decoration, so if you got that navbar there and place of cursor in anywhere inside that navbar div there if you go to CSS style panel there will be a buttons clicked to create a new CSS rule. So we are gonna create a new CSS rule defined in a new style file and I have got my folder already set up inside of the tab menu folder in the CSS and the CSS tab menu as well. So we are gonna press save and I should create a CSS document, I am gonna click ok and I am gonna click just beside the source code and go in and hand code the CSS from there. Okay we’ve have the navbar selected I have just created.

This is essentially just gonna have the width attribute at the end of the tutorial. when you copy and paste the menu in the web design this navbar div is for you to position it. You can add the properties you need to get it to the web design package. Now we gonna talk about the unordered list inside of the holder div now I am gonna type in holder ul and the opening closing curly braces. And first thing we go do is take out the list bullet which are inside the unordered list so I am gonna type in list- style: none and semi colon and press refresh and see to make this disappear and we gonna take out divful margins and paddings so we will make the list items go flush to decided to the div. so make the margin:0, padding:0 and insert the semi colons and there we go. Now for absolute beginners you see if I click on CSS rules here it will bring out the definition dialogue box for you and you can see if you click on list category its done exactly what I type there say none and box category padding and margin is 0. if you are an absolute beginner ok lets start styling the links inside the unordered list now. So I am gonna type in pound navbar pound holder ul li a, so that’s a links inside the unordered list which is inside of the div called holder and the holder dive happens to be inside the navbar div.

Okay, so first thing we gonna do is to take out ugly underline so I am gonna type text style decoration:none and that ends with a semicolon. Now you press refresh or click inside the design view to disappear that’s fantastic okay. So next we gonna do is we are gonna flow out the list to the left and that will give a horizontal feel. So they are got to float left and if we set a margin right of 5 pixels that will push the text from each other by 5 pixels. Now I am going to change the font family decoration and I want a nice chunky font, so we can apply text shadow too. So I am gonna drop font family and I am gonna set Arial, black gadgets, sans serif and when you refresh they get big chunky text now you go to alter the size of the font now.

So I am gonna change the color of the text to black and set the div ful link blue color. Okay set some border around of the link so I am gonna do a concatenation of a selector so I am gonna type in border:1 px solid # 000; and you can see the border has being created tool way around and we gonna over write that in the cascade now and we have the border and we are gonna select that to none and so we end with a border all the way around apart from the bottom and see this started to create the tabbed effect already. Okay the border is little bit of to close to the link so we gonna set padding all the way around 20 pixels fantastic and we gonna define the set width for every link so I am gonna make sure they are 75 pixel each and go to is plus 20 pixels from either sides for padding and the 2 pixels on either side and 1 on each side for border.

So I am gonna set the text align to centre and centre order on the text and set of the displayed property to block and that means that when someone rolls over the link just be on the text of the rollover effect takes place on the whole of that 75 pixel ok so background m gonna set to pound 69f which is a same a light blue color ok if you are looking at the side design view now pretty much styling the look of tab we are about start styling the hover effect for the links. So we select the new selector and we type in #navbar #holder ul li ai:hover so this what happens when we hover over the link. Then we set the background color we want background color I am gonna put in a orange color.

However whatever color you want to so I am gonna #F90 and I am gonna set the text color to black. And add the text shadow 1 pixel 1 pixel and set that to black so #000 is the very faint text shadow there and refresh. Ok so that in Firefox now. Ok so what we looking to see now is the rollover effect of working each link change from blue to an orange color so here we are and it is working and hover effect is gonna work and is working correctly ok so lets go back into the dreamweaver and finish styling of the rest of the navigation menu now we need to start creating the illusion of individual tab so if I just click a you see that it starts to collapse. We flocks the long horizontal blue liners so we gonna do to select an individual make that coded encompass themselves #navbar#holder and we gonna give a white attribute. So and if you still see I the design view there so I am gonna give the height colon 65 pixel and press refresh and then you go to it comes to whole links and whole navbar now.
To make that 64 pixels looking nice and here we go fantastic. Okay so lets put in the border so I am typing border dash colon and I set to 1 pixel solid and a black and semi colon at the end press refresh and we put it into the browser

Tags: dreamweaver cs3 tutorial, dreamweaver cs3 serial number, actinic extension for dreamweaver 8, dreamweaver tutorial, dreamweaver cs3 tutorials, dreamweaver tutorial video

Tags

Dreamweaver Tutorials