Viewers: in countries Watching now:
In Dreamweaver CS5 Essential Training, Adobe Certified Instructor James Williamson explores the tools and techniques of Dreamweaver CS5, Adobe's web design and development software. This course covers both the ins and outs of Dreamweaver, as well as recommended best practices for crafting new web sites and files, the fundamentals of HTML and CSS, and how to ensure clean and accessible code. The course also includes how to use tools in Dreamweaver to create and style web pages, manage multiple sites, and add user interactivity with widgets and scripting. Exercise files are included with the course.
In addition to the pseudo selectors that we have used to style our links, CSS contains other pseudo selectors that allow us to respond to user interaction. One of those, the Focus pseudo selector, can be used with forms to let users know when they have changed focus from one form to another. We will add an additional layer of interactivity to our form by using the Focus pseudo selector on our text fields. Now, I am going to be honest with you guys. You deserve a break after that last exercise. So this one is going to be a snap.
We are only going to do one selector and it's going to have a profound impact on our form. So, I have the join.htm file open and all we need to do is I am going to switch to Split View. Make sure I am focusing on my CSS and again I am going to scroll down to about line 700 or so. There we go! As a matter of fact, line 739, that's where we need to be. I am going to hit Return and go right after that one and I am going to type in #mainContent input. Now remember those are our text fields, .text, and then without another space type in :focus.
Now, you may have remembered styling our links a while back we did a:link, a:hover, a:active, a:visit. Well, it's the same thing. The Focus pseudo selector means when somebody has clicked on this form element or established focus on it. So, by saying input.text:focus we are saying when somebody has selected any of the input field with the class of text. Very nice, right? Well, we also want to do the same thing to our textarea. So, I am going to do a ,#mainContent textarea:focus.
So, those are both going to do the same thing for us and that comma right there between them is going to group them together. Open a curly brace and all we're going to do here is change the background color. So type in background #ffc, whic is sort of a cream color. Close that. Do a Save All, and guess what? You're done! Let's go ahead and preview that in our browser and let's check out what that does for us. By establishing a background color, when somebody has focus in a text field, when you click inside the text field notice that the background color changes and you are essentially giving your user that input that they are typing into that specific area.
Now it's important to note that not every browser supports the Focus pseudo selector on form elements. Most noticeably some of the older versions of Internet Explorer. However, the additional usability that this brings to your forms in standards compliant browsers is well worth the extra line or two of code within your CSS. Besides non standards compliant browsers will still display your form just fine. Its users just won't have this really cool increased interactivity that we're seeing here.
Find answers to the most frequently asked questions about Dreamweaver CS5 Essential Training .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.