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

Start learning with our library of video tutorials taught by experts. Get started

Preparing CMS Web Graphics and Layouts Using Open Source Tools
Illustration by

Inserting background graphics


From:

Preparing CMS Web Graphics and Layouts Using Open Source Tools

with Jen Kramer

Video: Inserting background graphics

Now that we've got our general structure for the website in place, now it's time to plug in some of other background graphics. In an earlier movie we sliced up comp using GIMP and we create a header graphic and a footer graphic, but there's many other graphics that go with that design. I have already gone ahead and created those graphics using the slicing techniques you saw with GIMP earlier and those graphics are located in the Chapter 3 folder inside of the folder called Images in your exercise files.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Preparing CMS Web Graphics and Layouts Using Open Source Tools
1h 40m Intermediate Dec 16, 2009

Viewers: in countries Watching now:

In Preparing CMS Web Graphics and Layouts Using Open-Source Tools, Jen Kramer shows how developers and graphic designers can collaborate to create a great site design that integrates with a content management system (CMS) like WordPress, Drupal, or Joomla!, all using open-source software. This workflow is based on two existing open-source design tools, KompoZer and GIMP. Jen shows how to modify web graphics and create slices with GIMP, and then place these in an HTML page integrated with CSS in KompoZer. Along the way, she discusses web design best practices and special challenges that might arise when designing for CMS software. Exercise files are included with this course.

Topics include:
  • Using static HTML versus a CMS in web design
  • Knowing the dos and dont's of CMS design
  • Exploring GIMP and KompoZer
  • Saving slices for the web with GIMP
  • Inserting graphics in an HTML page
  • Styling web pages with CSS
  • Changing the default styling assigned by a CMS
Subjects:
Web CMS Web Graphics
Software:
GIMP KompoZer
Author:
Jen Kramer

Inserting background graphics

Now that we've got our general structure for the website in place, now it's time to plug in some of other background graphics. In an earlier movie we sliced up comp using GIMP and we create a header graphic and a footer graphic, but there's many other graphics that go with that design. I have already gone ahead and created those graphics using the slicing techniques you saw with GIMP earlier and those graphics are located in the Chapter 3 folder inside of the folder called Images in your exercise files.

There is a background image in there for the body of this webpage, there is a background image for the navigation, the footer is a background image, and so we are going to plug all three of those images in now. Background images are generally controlled three CSS, so we're going to go ahead and use CSS to do that. So we are going to click on the CSS icon at the top of the page and we are going to create a new style under Style rule. This one will just be called body as in the HTML body tag, and we will click the Create Style Rule button.

Now that it puts the HTML tag right at the very bottom of your stylesheet and this is just the way this particular stylesheet editor works. Every time you add a new style declaration, it shows at the bottom of the list. Generally speaking I like to put my HTML style declarations at the top of my stylesheet. That way my more specific ID and Class items will override generic HTML styles. Using the little arrows at the top of the screen here you can move styles up or down simply by selecting them, by clicking on them once, and then clicking the arrow to move the style up the list.

All right, so from the body tag here, I am going to click the Background tab and I am going to click the Choose File next to the image. Now this of course is a background image, and I am going to choose the image called Body Background, which again is in that Chapter_03 folder inside the Images folder, and I will say Open and you will see the image shows up here on the webpage. Now note the little white margin along the edges of that. This is due to body tag has some either margin or padding, depending on which browser you're working with and that is the browser default. We will need to make sure we zero that out along the way.

We now have our image in place but also note that our image cuts off and we have a white area underneath, so we are going to need to tweak this a little bit. We only want this background image to tile across horizontally, because it has a nice gradient that goes into a solid background color. So I am going to change this to tile horizontally and it can start at the left at the top. My background color, which I looked up using GIMP, is #312e1d and don't forget to put the pound sign in front of your color.

That's the way HTML colors work. Now I am going to switch to the Box tab and I am going to set my margins to be zero and my padding to be zero for my entire Body tag and you can watch the page change in the background as I do this. There that looks much better. This is now stretching all the way across the page quite nicely. There are other things that I generally like to set in the Body tag as well. Generally speaking the best place to set your text font family is in the Body tag, because that will be inherited all the way down the rest of the website.

So if I set my default font to Arial, that will show up for all of the rest of the selectors for the rest of this document. They will all show up as Arial unless I specifically override them. This is a great way to easily build your website. You don't have to put Arial in every single stylesheet declaration along the way. It makes it very hard if you decide to change your font family later. So let's go to the Text tab and I'm going to go to the predefined font family of Arial, Helvetica, and Sans-serif.

For the font size I am going to set this to be 0.75 em. An em is a relative sized font which allows for easy text resizing using the browser's built-in tools to zoom in and zoom out of text. If you use pixels as your text size, in some older browsers the text can't be resized. You can't increase the font size or decrease the font size. Although it typically works just fine in Firefox or Safari. Internet Explorer 6 is usually the culprit in this case.

I am also going to set a line height of 1.5 ems and you should always use ems for the line height because as your font size increases, you also want your line height to increase proportionately. If you use a fixed line height, let's say you use 10 pixels, as your font gets bigger your letters will start to overlap and that would be a bad thing. You wouldn't be able to read anything anymore. All right so we have the Body tag all set up and we are looking pretty good here in the web browser.

We don't have our divs quite lining up correctly over top of that background image, but we're going to fix that in a little while. Right now let's just get the basic construct in place. So for our nav item, I also want to set a background image for the nav and I'm going to set that to be, from the Background tab, click Choose File and I have a little nav background image and we only want back to tile horizontally. Notice that it's cut off a little bit here. That's because we don't have nav set up to the correct height just yet.

So we'll go ahead and set the height for the nav bar. That's under Box and the height is 55 pixels. And it looks like we have two nav bars. We just have a little bit of overlap going on between a background image in the body and the background image in our nav div. But we are going to fix that again as we add more things to this design. Don't worry about it right now. Finally, I want to put in a background image for the footer. So I am going to go to the footer div, go back to the Background tab, and I'm going to choose the footer background image. In fact we are not going to tile this background image at all. We just want it to show up once.

The background color in this case is going to be f8f8f8 and we also need to set the height for the footer, which is 72 pixels, and that takes care of the background images that we are going to include in this particular design. The next thing I need to do is add the header graphic and we are going to start cleaning up some of the layout here so that it better matches with what's going on with the body background image behind it.

There are currently no FAQs about Preparing CMS Web Graphics and Layouts Using Open Source Tools.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Preparing CMS Web Graphics and Layouts Using Open Source Tools.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

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.