|Jean LeLoup & Bob Ponterio
KompoZer (formerly Nvu) is a web site editor that is similar to Dreamweaver in many ways. It is free and you can download a copy for the Mac, Windows or Linux environments.
Before you start, you need to read the information contained in a few of the basic links on the Beginning WWW page. Just get a feel for what they are talking about in a few of these sites. If you have not done this, STOP! Do not pass go, do not collect $200, you are in BIG trouble. Go back and do your homework by examining some of those pages; then return here.
Before you begin construction, you also need to have a general idea of what you want your page to look like, what it is intended to do, how someone will get around inside it, and, consequently, how you will organize it. Below are some basic things to consider when planning your first web page/site:
- What's the purpose of the page? Are you providing a service, a product, information, entertainment?
- Who is your intended audience? What do they know? Why are they looking at your site? Knowing your readers helps you shape the information content and pick a consistent voice to address them.
- How do you intend to structure the information? For multiple page projects or sites, it is common to see at least two levels of hierarchy: a top level index and second-level pages. Put clear, quickly grasped content toward the top of a page so that the reader immediately knows what's going on. This way, even the casual reader can quickly see the sort of information you're presenting, and that may be just the hook to keep the person interested. For your first page, this will not be such an issue, but the principle still holds.
Time to roll up our sleeves. (If you are installing KompoZer on your own computer, check the installation instructions for various language versions.) Open KompoZer. You will be in the main editing window and ready to begin making your web page. Whenever you wish to begin a new page from scratch, you can go to File/New. You can see a number of menu items along the top of the window and a number of buttons in the Composition, Format, and Edit mode toolbars. There is an editing window that can show several different displays of your page (Normal, HTML tags, HTML source, Preview) and a Site Manager for larger sites with multiple pages. Voilà, the bare bones of your first WWW page! You are now in Nvu's user-friendly WYSIWYG (what you see is what you get) editor.
In addition to those pull-down menus across the top, which function just like the menus in many other programs that you probably have seen, the Toolbar provides icon shortcuts to the most common composition commands for your page creation. You can find out more about items in the toolbar by looking at the pop-up text that appears when you move your mouse over each icon.
New: Begin working on a new page from scratch.
Open a web page on your computer for editing.
Save your page as a file on your computer.
Publish: Upload your web site to an online location on a web server.
Browse: Open your web page in your web browser to see how it looks.
Undo / Redo: Undo recent commands in KompoZer.
Named Anchor: Allows you to jump not only to a page, but to a particular spot on that page.
Link: Inserts a link to a another file or page. This can be a relative link to a file name within the same web site or an absolute link (full http://... address) to a page on a different server.
Images: Insert images and allows you to control image properties.
Table: Create a table. Tables are a good way to control the placement of items on your page.
Form: Insert various form elements that you might need for interactive functions. This will be important for more advanced features later in the course.
Cascading Style Sheets: Edit styles as one way to control fonts and the like.
Spell Check (under the Edit menu) can be used to check the spelling of words in languages other than English. Download additional dictionaries here: http://dictionaries.mozdev.org/installation.html Install new dictionaries using the Tools / Extensions menu.
Each web page that you open in KompoZer will have its own Document Window. The windows are tabbed, so you can see along the top which pages are open, and you can jump around among them by clicking on those tabs, editing several pages at the same time. In the example below, there are two windows open, Second (the one we are looking at) and First.
The icons in the document window toolbar allow us to view the document in Normal View, HTML tags, Source, or Preview mode. Most of the time, the Normal view will be all that you need. Normal View is WYSIWYG (what you see is what you get). It will be close to what your final version will look like in a browser with some small differences to make editing easier. Looking at the HTML tags and Source views can be a good way to learn how the codes work together to make you web page appear the way it does. For instance, here is a Normal view image and the associated code for an image:
= <img src="first-www-04.jpg" width="28" height="28" align="absbottom">
When you know what you are doing, directly editing some parts of the source code can give you more precise control (but when you don't know what you are doing, it can get you into trouble).
Many text properties are directly available from the main edit window, just like in a word processor. Paragraph format, text color, size, bold, italic, underline, list styles, alignment, indentation, font, and various tools for positioning are just a click away.
KompoZer does a good job of giving you access to the properties of the objects that you put on your web page intuitively, without requiring that you edit the codes. In fact, if you edit something in the code view, you might introduce errors that could prevent your page from displaying properly. It is MUCH safer to edit an object's properties in the properties window. For instance, to edit the properties of an image, double click on the image in Normal view to open the image's properties window.
Use KompoZer Help and the sites below for additional information.
For more about Nvu: