New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Enhancing layouts with background graphics

From: Dreamweaver CS3 Beyond the Basics

Video: Enhancing layouts with background graphics

Now that we have discussed layout, we are going to turn our focus towards styling content. We will begin by opening another exercise file and if you are doing the exercises along with me, we are working on the index_background file located in the Chapter 3 Starting Files directory. As you can see, this file is a little further along than our previous file. Most of the interior content has already been styled and in fact other than the navigation and some of the graphics, the page is pretty much finished. So we are going to focus on the use of background graphics and how important they are to CSS layouts. Occasionally you are going to have an element inside your XHTML that you want there for either accessibility purposes for screen readers or for other devices as a way of identifying that content or passing along some type of information but you might not want that really to be visible.

Enhancing layouts with background graphics

Now that we have discussed layout, we are going to turn our focus towards styling content. We will begin by opening another exercise file and if you are doing the exercises along with me, we are working on the index_background file located in the Chapter 3 Starting Files directory. As you can see, this file is a little further along than our previous file. Most of the interior content has already been styled and in fact other than the navigation and some of the graphics, the page is pretty much finished. So we are going to focus on the use of background graphics and how important they are to CSS layouts. Occasionally you are going to have an element inside your XHTML that you want there for either accessibility purposes for screen readers or for other devices as a way of identifying that content or passing along some type of information but you might not want that really to be visible.

You can see at the top of our page, we have Welcome to Cheek Chastain Gallery. That's a Heading 1 file and any screen reader that hits this file will read that right off of the bat and give a Welcome to the Cheek Chastain Gallery. Well, that's nice for screen readers and it might be nice for other devices that are parsing the content but we really don't need that in there visually. We would like to have maybe the logo or the name of the gallery represented in a visual fashion. So we can do that by using a background graphic. So what we are going to we are going to do a technique called Image Replacement where we take an element on the page and we replace it with a graphic and that's usually done through the use of background graphics.

So let's go to our CSS Styles panel and we will start by editing some of the styles that are already here. So let's go to the CSS Styles panel and we will start by adding a style that will hide our header H1. So again, if I click inside that text I can see that it's inside the header div tag and it is H1. So we can write a selector to target that specific style. In the CSS Styles panel, I will actually click on the header style itself. Now not only does that sort of give me an idea of what's going on with the header but when I create a new style it will place it relative to that position instead of at the very bottom of my style. So I don't have to keep dragging things around.

So we will go down to the Add New CSS Rule dialog box, we will click on that and the selector I am looking for here is #header h1 because we have actually selected it inside of the header to begin with, it gives us a descendant selector that lists every element in order. Well, we don't need all of them; we just need the #header h1. So if you selected someplace else, you just click the advanced selector type and type in #header h1 for a descendant selector. We will go ahead and click OK and then this is going to be a very simple selector. I am going to go to my Box properties and where it says Margin I will deselect Same for all and for my left margin, I am going to type in -9000 pixels. Now that may seem like bit of overkill but let me explain what this is doing.

There are two ways of hiding an element on the page. You can change the Display property to none and you would actually in this dialog box, go to your Block category and you can choose Display and you can choose None and that would hide it from the screen. The problem with this technique is it also hides it from a lot of the screen readers out there. So if your desire is to have this content accessible than that's maybe not the best way to do that. There is nothing wrong with turning Display to None in certain cases but if your goal is to have that content accessible that's not something you want to do.

So I am going to click back on my Box properties and let's talk a little bit more about what we just did here with the negative margin. So by applying a -9000 pixel margin to the left side of this one, what's going to happen is-- remember negative margins to the left move us actually to the left because positive values move us to the right. So we are going -9000 pixels off the page basically. Now only on a really, really, really big monitor where you would be able to see that. So we give it a high enough value where we are pretty much safe on any monitor that somebody might look at this on. So I am going to go ahead and click OK and sure enough that gets rid of our header. Off it goes. We don't see it anymore.

You get preview of the browser all day long and you wouldn't see it. Now we actually need to go back and add a background graphic to our header div tag now and the easiest way to do that is actually in Code View. So I am going to up to my layout_background.css and even if you hadn't opened that before it should be open now, because the default value in Dreamweaver is if you edit an external style sheet it will go ahead and open that up. Because Dreamweaver assumes that you might want to go ahead and do some manual editing. So click on that. And I need to find my header div tag. So I am going to scroll up all through my sidebar code, favorites, current, so you can see each of the sections that we have in there now. Featured, current, sidebar, there are a lot of rules that pertain to those. And I am going to go up and right over here are all my header styles.

Now notice that because we have clicked on the header style, Dreamweaver inserted the header h1 directly in header styles. So we are going to our background. Currently our background only has a color but what we are going to do now is we are going to apply a background graphic. So if you click right after the color definition in the background rule, you can hit your Spacebar and a lot of other options for working with the background come up. One of those, and using the code hinting I love this, is URL. So if you don't remember where you placed the graphic or exactly what you named it, Dreamweaver allows you to go ahead and browse for that by using the short hand notation. So, I'll go ahead and click URL and hit Return and you can see it actually lets me browse.

So I am going to click on my images and what I am looking for is I am looking for -- as I scroll down through my images directory -- I am looking for the file title.gif and there it is. This is a transparent GIF file and it has the Cheek Chastain Gallery and you can see that we have done a matte edge of the same red color so that it will blend with the background really nicely. So I am going to go ahead and click Choose and now if we were to preview it we would see the logo over there but the problem is we would see the logo over and over and over again. The default behavior for using a background graphic is that the background graphic will tile as many times as it can fit inside of the container element. So we only want to see this logo once.

So we want to make sure that we actually add a little something to this. So after our URL we are going to tell it to no- repeat. So I am going to leave the code hint up here so you can see this but it says no-repeat and underneath that we have repeat, which is the default behavior, and then we have repeat-x and repeat-y. Those two bottom options, repeat-x and repeat-y, would repeat it along an axis, so either horizontally or vertically if you don't want to tile along both of them. That's really good for backgrounds for long vertical elements or for horizontal elements.

So we will say no-repeat and we can also change exactly where this is positioned. Now the default is to position at top left corner and so we don't really need to be explicit as far as that goes but we could specify top, left, bottom, right, we could even give pixel values or em values for the horizontal and vertical positioning. We will just go ahead and be explicit and pass in top and then left and noticed that we're not putting a comma between those; we are just putting spaces between them and the browser knows how to render that. It knows that these are different elements inside the background category.

So we will save our layout_ background and we will go back to our index_background page and sure enough there is our Cheek Chastain Gallery. So, our header now has the Cheek Chastain title in a graphic format. The heading is off the page and we still need a position the logo and the logo is going to go in the bottom right hand corner of the header and the reason why we didn't just make one big background graphic is because maybe the client might change their mind and want a flexible layout rather than a fixed layout. Well, if I have got a background graphic for the header that is 9000 pixels wide and somebody comes to me and says, hey can you make it to where our design stretches? Well now I have to go back and totally redo that. So even though we are working with a fixed layout, we are going to go ahead and work with this as if it were a flexible layout and show you how easy it is to have a header that would stretch both to the left and to the right.

So if we go back in the Code View, I can see that there is one little bit of code that's been adding to this. So I am going to go up underneath the actual navigation menu and right down on line 24, I can see that there is empty div tag and it just says id=logoImage. So again, we have some non-semantic markup here for some web standards people. They get kind of finicky about that but it's just one line of code, so it's not really hurting anybody and it's going to allow us to assign a background graphic to that. So we will finish this up by going back over to our layout_background.css and remaining up in the header, I am going to add a little after #header h1 and our new rule is going to #header #logoImage. Now we don't really need to be that specific.

We could have just said #logoImage and we would have been fine, but by putting the header in front of it, we are giving an identity as well and we are making sure that there are no specificity issues later on. So here I am going to give it a positioning attribute and I am going to position it absolute now. If you remember from the previous movie, we took our header and you can see right up here on line 35, the header has a position relative attribute. That means that anything inside of it and if we include logoImage div tag, it will now position itself relative to that element. So we are positioning ourselves from the top left-hand corner of the header graphic itself. So go down to our next line and I will give it a top position of zero and we will give it a right position of zero.

Now what that's going to do for us is it will take the top right hand corner of this div tag and it will align it towards the top right hand corner of our header. So we go down to our next line and we will do a width of 200 pixels and that's going to be the exact width of the background graphic. So we know that this container is empty but by giving it a 200 pixel width, we are making it the exact size of our graphic. Now to do that we will also assign a height value. So assign it a height value and give it a height value of 141 pixels. So you are going to need to know what your graphic's width and height are before you begin writing your styles and the last thing we'll do is we'll assign our background graphic. So we will type in background and once again, I can go ahead and just hit you to go to my Dreamweaver URL hinting and go ahead and hit there and I can browse.

So I will go in the Images directory again and what I am looking for this time is the logo.gif. So we will find logo.gif and you can see a representation of what that's going to look like and we will hit Choose and we will give that a semicolon and we will finally close the header logo image style out. So we will save the file. We go back into our index_background and we will switch over to Design view and over there on the right hand side, let's scroll over there is our logo. You will notice that it's repeating and that's because we didn't give it any repeating information. So you can see when you don't specify a no-repeat it's going to tile as many times as it can.

So we are going to have to go back and modify that and that's very simple to do. Just go right after you have described the URL and you are going to type in that no-repeat and once again, we are going to give it a top right positioning and that again the default is for the graphic to appear at the top left hand of the div tag and this will make the graphic appear on top right hand corner of the graphic. It will line up with the top right hand corner of the div tag. We will save this again. I will go back to our index_background and that looks a little better.

So we will go ahead and preview that in a browser and there is our finished header. Now we will have to deal with that navigation later on but before we do that, our next movie will look at applying background graphics to our sidebar and we will explore a technique that's called faux columns.

Show transcript

This video is part of

Image for Dreamweaver CS3 Beyond the Basics
Dreamweaver CS3 Beyond the Basics

102 video lessons · 38638 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 3s
    1. Welcome
      1m 17s
    2. Using the exercise files
      46s
  2. 1h 23m
    1. Reviewing the Coding toolbar
      8m 42s
    2. Customizing the Coding toolbar
      9m 52s
    3. Taking advantage of Code Hinting
      7m 20s
    4. Using snippets and shortcuts
      11m 10s
    5. Using the Quick Tag Editor
      5m 18s
    6. Using Find and Replace
      9m 50s
    7. Regular expressions
      5m 39s
    8. Using Bridge with Dreamweaver CS3
      8m 28s
    9. Round-trip editing with Photoshop CS3
      3m 40s
    10. Leveraging image variables in Photoshop CS3
      7m 32s
    11. Integrating external variables into your workflow
      6m 16s
  3. 37m 26s
    1. Understanding the CSS Styles panel
      7m 59s
    2. Understanding the Cascade
      5m 50s
    3. Understanding Inheritance
      5m 8s
    4. Understanding Specificity
      7m 5s
    5. Managing CSS styles
      5m 4s
    6. Using Design-Time style sheets
      6m 20s
  4. 2h 19m
    1. Using the new CSS template pages
      5m 59s
    2. Understanding DIV tag structure and layout
      12m 0s
    3. Understanding the CSS box model
      10m 0s
    4. Using absolute and relative positioning
      8m 35s
    5. Understanding floating elements
      7m 9s
    6. Clearing floats
      7m 19s
    7. Using floats to control page layout
      3m 45s
    8. Building structure and assigning IDs
      10m 19s
    9. Applying basic styling to structured content
      11m 14s
    10. Positioning container elements
      11m 4s
    11. Enhancing layouts with background graphics
      11m 48s
    12. Creating faux columns with background graphics
      8m 55s
    13. Creating rounded corners with background graphics
      9m 17s
    14. Building navigation with CSS
      16m 57s
    15. Using Dreamweaver's Browser Check feature
      5m 31s
  5. 53m 22s
    1. Creating properly structured forms
      6m 30s
    2. Creating accessible forms
      6m 41s
    3. Using CSS to lay out form structure
      7m 40s
    4. Creating vertical columns for form elements
      7m 48s
    5. Adding user feedback
      5m 52s
    6. Applying advanced styling to forms
      8m 11s
    7. Client-side form validation
      4m 17s
    8. Validating forms with the Spry Validation tools
      6m 23s
  6. 1h 20m
    1. Understanding the Spry framework
      3m 43s
    2. Defining a data source for use in Spry
      3m 56s
    3. Creating a Spry table
      8m 8s
    4. Using the Spry widgets
      8m 11s
    5. Connecting various data sets
      4m 50s
    6. Understanding Spry widget structures
      7m 1s
    7. Applying custom styles to Spry widgets
      6m 24s
    8. Applying additional custom styles to Spry widgets
      8m 46s
    9. Controlling Spry widget behaviors with JavaScript
      6m 0s
    10. Controlling Spry widget animations with JavaScript
      9m 31s
    11. Creating effects with Spry behaviors
      4m 42s
    12. Hand-coding Spry
      9m 11s
  7. 1h 11m
    1. Creating a base template
      8m 6s
    2. Creating editable attributes
      6m 26s
    3. Creating a new page from a template
      7m 42s
    4. Applying a template to an existing page
      4m 36s
    5. Creating nested templates
      5m 24s
    6. Using repeating regions
      6m 34s
    7. Creating editable and non-editable optional regions
      6m 0s
    8. Using template parameters
      7m 26s
    9. Using template expressions
      9m 59s
    10. Using conditional template expressions
      8m 54s
  8. 54m 40s
    1. Examining XML structure
      2m 44s
    2. Creating an XML document
      9m 9s
    3. Using the CDATA structure
      5m 7s
    4. Creating an XSLT file
      4m 33s
    5. Binding data from an XML to an XSLT document
      5m 6s
    6. Inserting repeating regions into an XSL document
      5m 16s
    7. Creating a client-side XSL transformation
      2m 52s
    8. Styling a remote RSS feed
      7m 29s
    9. Creating a server-side XSL transformation
      5m 31s
    10. Writing XSL expressions
      6m 53s
  9. 1h 2m
    1. Overview of building dynamic websites
      1m 35s
    2. Installing PHP, MySQL, and Apache on Mac
      3m 22s
    3. Installing PHP, MySQL, and Apache on Windows
      3m 54s
    4. Creating a MySQL database
      3m 16s
    5. Defining a testing server and database bindings
      6m 14s
    6. Creating a database recordset
      4m 35s
    7. Adding dynamic content to the page
      5m 14s
    8. Creating repeating regions of dynamic content
      7m 6s
    9. Filtering database records
      7m 39s
    10. Using the Live Preview
      10m 22s
    11. Passing URL parameters
      4m 23s
    12. Dynamically generating links
      5m 18s
  10. 57m 9s
    1. Understanding behaviors
      5m 16s
    2. Installing additional behaviors
      3m 39s
    3. Planning to create a custom behavior
      3m 42s
    4. Examining existing behaviors
      5m 32s
    5. Building a behavior function
      7m 23s
    6. Creating an Action file
      6m 48s
    7. Enabling behavior functions
      9m 1s
    8. Initializing the user interface for a behavior
      3m 9s
    9. Loading behaviors in Dreamweaver
      6m 47s
    10. Testing and debugging behaviors
      5m 52s
  11. 27m 12s
    1. Running reports
      7m 41s
    2. Checking and validating links
      3m 40s
    3. Using cloaking
      5m 42s
    4. Using Check In/Check Out
      4m 3s
    5. Using Design Notes
      6m 6s
  12. 20s
    1. Goodbye
      20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.