Dreamweaver Tutorial

Adobe Dreamweaver is one of selected software, exclusively used to design a website. Due to its outstanding capability of modifying a webpage as per the user requirement, Adobe Dreamweaver is first choice among developer. In this chapter, we gonna talk about Pseudo Class selector feature of Dreamweaver, which is basically used to positioning particular element of a webpage, irrespective of a page code.

This video will guide you how to use this amazing feature on a particular webpage. So, enjoy the video.

In this video tutorial we gonna talk about what is called the pseudo class selector. The pseudo class describe the state of particular element on your page and isn’t based on something that can be, determined looking at the source code of a document. Pseudo class is attached at the end of the other selector types, to assign a stall, that happen only when an object is in certain state. The most common types of pseudo class and one we use more often than any other are the link, visited, hover, and active pseudo class. These set of classes are most often applied to links or A tags.

A common rule using pseudo classes to remove underlines from links, when user hold his or her mouse over the link. Now if you recall back in the movie, when we say page property, we actually create it some pseudo class rules, so only you didn’t know they were pseudo class rules. So if we go look at our style sheet, w see these styles here. these are actually pseudo class rules. Just take a link for an example. Here is the A tag is a type selector, it’s a tag, so if we were just defining an anchor tag, we just create a type selector within A. But because it’s a follower of a colon link, the colon link, just like a colon visited, colon hover, and colon active here are all the pseudo classes at the end of that selector.

I mean these rules are only activated in certain situations. In this case when it is an unvisited link, a visited link, when the user rolls the mouse over the link and when the user clicks down on the link for active. this is the most common type of active pseudo class that you will find. And just as a side note when you apply this particular set of pseudo classes they should always be displayed in this order. Because of the cascading nature of style sheets if you had hover first, then active, then visited, then link; your links might not behave the way you want them to. They should always appear link, visited, hover, and active. Some people like to use the pneumatic device of love hate-LVHA to remember that order. But pseudo classes are not always just for setting this basic type of link.

In the examples we are going to take a look at, we are going to use pseudo classes to create some more sophisticated navigation on our page here. Because currently the links – on the side of the page here are just regular text that have underlines under them and we have changed some colors. But we wanna make them look like buttons. And we can actually do this just with cascading style sheets. We don’t actually have to go into an image editing program and create image buttons. We can create buttons with cascading style sheets. So let’s come in here and we are going to create a new style. For the select its gonna be advanced. And in this case we are going to type the pound sign – sidebar because this appears in the sidebar area.

Remember we created the id for the sidebar in the movie on id selectors. We are going to add a. Again this can be called a descendant selector because in this rule we are selecting all anchors or links that are appearing inside the sidebar table cell. We are going to make sure that this is a current style sheet. We will click on ok. And in the type category here we are going to check none meaning we don’t want any kind of decoration. We don’t want an underline or an overline or anything on this text. But we are gonna change the color. Let’s come in here into the color field and we will type 474F49. Move over the block category list here and from the display field here we are gonna choose block. Now there are lots of choices here.

By setting all the links to be block level elements that ensures that each link reserves space in the document and all the anchors will stack up on top of each other. If the anchors were left as an inline element, which is what they are by default, so you could select inline here without seeing here any kind of change. All line up in a row which is not the effect we want. I want all of my links to be on their own line. So we are choosing these to be block level elements. Essentially block level elements reserve space, which means nothing else, could sit to the left or right of the element.

Inline elements on the other hand don’t reserve any more space than it takes to display them which is why in this case “history” is followed by “from the“ on the same line and then to go to the next line on the fields and then – types appear on the same line. We want them all to be on separate lines. Okay a couple of more things to do here. Let’s go over to the box category. And we are gonna keep the same for all selectors here. I am going to type in 8. is gonna be applied to the padding for top, right, bottom and left around each of my links. And we are also gonna – a margin of in this case 10 pixels. So basically setting the value for the padding adds some space around the text inside the anchor which will make it look more like a button.

Adding a margin around the link ensures that they are all nicely spaced out and their borders aren’t going to be up or touching each other. Now let us determine what these buttons are gonna look like. Let’s go over to the border category. And we are going to uncheck same for all of these because I just want a border on the top and bottom of these buttons. So let’s choose solid for the top, let’s make it one pixel and in this case we will set a color of CED2B6. And I am going to do the same for the bottom.

Make it solid, one pixel and the bottom border will be the same color as the top just like so. Let’s just add some visual separation between the unless the users know where the hotspots are where they can click. Let’s click on ok and keep an eye on these links and watch what happens to them. Pretty cool. Now each of the links is surrounded by a dotted line because Dreamweaver now sees them as block level elements. When we actually preview this page in a browser we won’t see these dotted lines. They will look a little bit different. But before we do that, let’s do one more thing. Let’s set up a hover state for these buttons so that they will actually change the appearance slightly when we roll our mouse over them.

So let’s create another rule and with advance selected we are gonna type pound sign – sidebar again followed by a. But this time the pseudo class of hover will follow that. Ok so the hover pseudo class is gonna change the background color of the links when the user hovers his or her mouse over the link. So click on ok. And let’s go back to the background category. And we will choose a color for the background for when the user hovers the mouse over the link and we will call this FBFCF9. And that’s all we are gonna do here. We are just gonna have the background color change when we roll the mouse over the link. Click on ok.

Just make sure we save our style sheet. And while we are in here you can see there’s the descendant selector we created there. And here is the pseudo class style we created. So let’s preview this in the browser. Refresh and there are our links. And you just wanna roll over them and there are these nice roller effects. This is really incredible if you think about it. We didn’t have to create a single image for this. If we took just plain text, wrote a couple of CSS rules for them and now I have these very nice looking buttons over here on the sidebar. So that’s all there is to CSS rollovers.

The process is simple but the payback is amazing. You can create complicated navigation without using a single image, which cuts down on bandwidth and page load time and also makes your pages much easy to maintain. If I decide to add a new link or change, the text of a link there is no need to create or edit it in a new image file. So we have covered a lot of information about CSS in this chapter and hopefully I have given you an idea of what CSS is capable of. We will definitely be working more with CSS in the upcoming chapter but again I encourage you to check the CSS training on the specific chapter on .com in my training library and find a lot more information and find a lot more about what CS is capable of in Dreamweaver.

Tags: dreamweaver cs3 layout tutorials, dreamweaver 8, dreamweaver tutorial, dreamweaver templates, dreamweaver free download, dreamweaver

Tags

Dreamweaver Tutorials