Start learning with our library of video tutorials taught by experts. Get started
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.
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.
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.