Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Getting to know KompoZer

From: Preparing CMS Web Graphics and Layouts Using Open Source Tools

Video: Getting to know KompoZer

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.

Getting to know KompoZer

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.

Show transcript

This video is part of

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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 "Already a member? Log in

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

Your file was successfully uploaded.

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.