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.
Our webpage is nearly done and almost ready to put into the content management system. The last thing we need to do is take a look at this poor footer, which has nothing in it at the moment. I am going to go ahead and out in a copyright statement here in the footer and if you wish, you go ahead and put in a navigation bar as well. You would follow exactly the same procedure that we just followed to put in the top navigation bar or you could just forget about doing it altogether and just let the content management system put it in place and style it once it's inside of the content management system.
So we're going to get rid of the text that says 'This is the footer' and we're going to put in our copyright statement, which of course starts with a copyright symbol. To do that we're going to go to Insert > Characters and Symbols > Common Symbols and we can find the copyright symbol from a pulldown list of a bunch of different things. And we'll say Insert, and then we can close the Insert Character box. After that we'll say it's 2009 Hansel & Petal, LLC.
All rights reserved. Now in all likelihood we probably really want that text centered in the middle of the footer and we'd like it to probably be a little bit smaller than it is. Maybe we want it slightly lighter gray as well, so it's not distracting from the content that's happening just above it. So to do that, that's all a CSS problem. We're going to go to our CSS dialog box, we're going to find our footer style, and we'll go to the text area. We'll set our Alignment to Center.
So there it is centered on the page. We probably want the font size a little bit smaller. Let's try .85 ems and maybe we want to make the color just a little bit lighter. So maybe instead of black text we'll use something like a lighter gray or even slightly lighter than that. There that looks great! So that pretty much wraps up everything that we've wanted to do with the layout of this webpage. We have our title, we have our navigation bar, we have a placeholder in our left column, we have some placeholder text in the center area that's all styled up, and we have our footer in place.
We're now ready to move this whole entire design to our content management system of choice, whether that's Joomla!, Drupal, or WordPress.
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.