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.
Here we're looking at KompoZer. This is what you should see when you first open up the program, and you'll see we have many toolbars going across the top. On the left side of the screen is something called the Site Manager. This is used for FTP. If we were building a static website and we wanted to FTP our HTML and CSS and our image files up to a server, we could FTP right from within KompoZer using the Site Manager. The other thing that's available here in the left column is called the DOM Explorer down here on the bottom.
This shows us what types of elements are available to us in the current document. In this case, it's a blank document but it's written in exactly where the head and the body of the HTML are going to occur. There is no CSS at this point because we have not written any styles for this particular webpage, and the HTML CSS View shows us both the HTML that we're working with and our CSS. I'm going to leave that tab open because I think that's going to be pretty handy for us as we continue to work on this webpage.
One of the places that I'd like to start is up at the top under Tools > Options. This is some of our options that we can set when working with KompoZer and what I'd like to do specifically is switch to Advanced. Right now, this is set to, by default, write an HTML 4.01 Strict webpage and I prefer to work in XHTML 1.0 Transitional. So I'm going to set this to XHTML and Transitional for the document type.
If you have different preferences there's nothing wrong working in HTML 4, there is nothing wrong with working with Strict, so you may want to tweak this to your own tastes. Feel free to look through here and look at some of the other settings that are available to you and then click OK. I'm going to start a new page now, so that I get the correct document type, by going to New > Page in New Tab and I'm going to close the one I was just working with. So here is my new webpage.
If I switch over to Source View, this is what the HTML View looks like in KompoZer, now that we've switched our document type to XHTML 1.0. However, it's worth noting that there is a small bug in the code here. Those of you who are familiar with HTML will know that this title tag here is incorrect. What we're going to need to do is fix this by saying title. We can put in a name for the webpage. I'm just going to call it Hansel & Petal for now, and it's not title/.
It's /title, and we can switch back to the Design View. You can go ahead and type some text into the page here. For example, Hansel and Petal is a flower shop in Los Angeles. Note that as you are typing in text, the breadcrumb trail, so of speak, of the HTML tags that contain that code are shown at the bottom of the page and as you mouse over them, they will outline where exactly those HTML tags are represented on the webpage.
What we do see here is that the HTML tag and the Body tag are represented but there is no Paragraph tag for example as you might expect. You can change that by going up here to this dropdown, which says Body Text right now, and switching it to Paragraph and that will give us a Paragraph tag here as well as our Body tag. We also see it here in our DOM Explorer. You'll see that paragraph is a child of the body. Other tools that may be of interest to you across the top here are the ability to put in links.
If we were to highlight the words Hansel & Petal, we could click the Link icon and it would ask us where we would like to link. We can type in www.hanselandpetal.com and we could say that we would want to open it in a new window for example, or we could open it in the same window if we chose, and that will put a link into our document there. Let's just go ahead and save this file.
I am going to click the Save icon. It's going to ask me for a title for the current page. I'm going to type in Hansel and Petal and say OK, and it's going to ask me where I'd like to save it. I'm going to save it on my Desktop in the exercise_files in Chapter 3, and I am going to call this index.html. I might be interested in viewing how this page looks in a web browser. Remember that any time you work in a "what you see is what you get" or WYSIWYG editor, take what you see in the Design View with the grain of salt.
It never represents things exactly perfectly 100% of the time. You always need to check your designs in a web browser to really see how they're being represented. It's easy to do this in KompoZer. Using the Browse button at the top, this will display in your default web browser that you've already established on your computer. In my case, this is going to display in Firefox and here is my webpage and you can see that I have a link. The link is going to hanselandpetal.com. So we get a real sense of how this webpage looks by looking at it in a web browser.
I'm going to go back to KompoZer. It's also possible to insert an image into your document. I am going to click the Image icon up here on the top and it's going to ask me where I would like that image to come from. I can click the Browse button, look in my images folder in my exercise_files > Chapter 3, and I can pick a picture. Let's say flowers. It's going to ask me for alternative text and you should always type in a description here. This will actually be the description that Google will read when they are looking at your webpage.
It's also the description that people who do not have images turned on in their web browser will get, or people who are browsing with the screen reader. This is the text that will be read to them when they come to that photo. So I'm going to put this in as 'Flowers in a vase. Click for Google.' The reason why I have put in periods and spaces here in the Alternate text blank is for screen readers. It's very, very simple to do but it's a great point. As the screen reader reads this, it will read it as "Flowers in a vase. Click for Google." As opposed to "Flowers in a vase," or "Flowers in a vase click for Google." By putting in what happens if you click on the image, you are also giving someone with a screen reader extra information.
They now know that if they click on the image, they will go to the Google homepage. To make that link to Google, it's very easy to do. Right here in this window there is a tab for link, and I can put my link directly in here, www.google.com, and by default the border around the image is turned off. If I want that border in place, I can always check the box. Let's say OK and there's the image on the webpage. Once again I'll save and I'll browse so that I can preview this in the browser and there is my text, my picture, and when I click on it, I go to Google. Okay.
Let's go back to KompoZer. Take some time now to look around at the KompoZer interface and get familiar with the tools that are here. If you've worked with Dreamweaver before, you'll find the tools are fairly familiar to you and they work pretty much as you'd expect. If you're new to KompoZer and you've never worked with Dreamweaver before, in the coming videos I will show you many of the tools you'll see here on these toolbars.
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.