An alternate way for you to display images on your page is through the use of…CSS background images.…Every element on your page has the ability to display a background color or…image or even both if you prefer.…This allows you to display images on the page without using an image tag in your…HTML code and creates the opportunity for presentation-only images.…This allows you to use images for your design without cluttering up your HTML…with unnecessary image tags.…In this example, we're going to apply a background image to the page header…region and use a background image to replace a textual headline with the school logo.…
So I have the index file open from the 07_08 folder and I can tell even before…I hit Live View, but I'm going to go ahead and hit Live View, that some things are missing.…So the image of the very starry-eyed young girl who is looking forward to…her future at Roux Academy is missing and then the Roux Academy logo itself…is missing as well.…Now what I want to do, I'm going to turn the Live View off first.…
Author
James Williamson
Released
5/7/2012- Choosing and customizing a workspace
- Defining a new site
- Uploading files to your site
- Creating new documents and web pages
- Formatting source code
- Working with CSS
- Placing images and background graphics
- Creating links
- Styling a basic table
- Creating a web form with buttons, check boxes, and list menus
- Adding Spry effects
Skill Level Beginner
Duration
Views
-
Adobe Dreamweaver
-
What is Dreamweaver?1m 4s
-
-
Introduction
-
Welcome1m
-
Using the exercise files2m 17s
-
Learning web design2m 23s
-
-
1. The Dreamweaver Interface
-
Arranging panels8m 44s
-
Managing workspaces10m 14s
-
Using the Insert panel6m 30s
-
2. Site Control
-
Defining a new site5m 23s
-
Managing files and folders7m 57s
-
Adding remote servers7m 4s
-
Uploading files12m 46s
-
Previewing in browsers9m 11s
-
Managing multiple sites4m 46s
-
3. Creating New Documents
-
Creating new documents6m 49s
-
Working with starter pages4m 32s
-
Managing starter pages13m 1s
-
-
4. Adding and Structuring Text
-
Importing Word documents4m 6s
-
Adding structure to text7m 35s
-
Creating lists4m 35s
-
Using the Quick Tag Editor8m 24s
-
5. Coding in Dreamweaver
-
Exploring the Code toolbar5m 41s
-
Setting code preferences7m 19s
-
Using code hints8m 8s
-
Wrapping tags5m 7s
-
Adding comments6m 29s
-
Using snippets7m 32s
-
Formatting source code4m 25s
-
-
6. Managing CSS
-
Setting CSS preferences9m 32s
-
Creating a new CSS rule6m 42s
-
Organizing styles7m 22s
-
Modifying style properties6m 17s
-
Using CSS visual aids7m 3s
-
Using CSS Inspect6m 48s
-
Using the Code Navigator6m 39s
-
-
7. Working with Images
-
Placing images on the page10m 12s
-
Modifying Smart Objects9m 42s
-
Styling images with CSS6m 45s
-
Using background graphics7m 28s
-
Positioning background graphics10m 10s
-
8. Creating Links
-
Link basics3m 17s
-
Using absolute links3m 43s
-
Using named anchors6m 41s
-
Creating an email link5m 25s
-
Creating CSS-based rollovers5m 41s
-
-
9. Working with Tables
-
Reviewing table structure5m 20s
-
Importing tabular data6m 46s
-
Creating accessible tables6m 11s
-
Styling alternate rows8m 57s
-
-
10. Working with Forms
-
Understanding how forms work2m 45s
-
Reviewing form design3m 44s
-
Creating accessible forms5m 16s
-
Setting form properties2m 39s
-
Inserting text fields6m 56s
-
Inserting list menu items7m 54s
-
Inserting checkboxes4m 14s
-
Inserting submit buttons2m 25s
-
-
11. Adding Interactivity
-
Adding CSS3 transitions8m 29s
-
Spry overview2m 44s
-
Using Spry widgets3m 57s
-
Adding Spry effects8m 1s
-
Using the Widget Browser7m 4s
-
Extending Dreamweaver3m 10s
-
-
Conclusion
-
Additional resources1m 2s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Using background graphics