Building simple content-intensive web pages
Part 2: Using Composer
by Norman Koren
This tutorial teaches you to create attractive web pages with lots of text and images, without resorting to advanced techniques, like CSS or PHP, which involve a big learning curve.
|
|
or |
|
|
||
|
|
 |
 |
Table of contents: Part 1: Introduction | Part 2: Using Composer | Preferences | Control bars | Formatting |.Tables | Images | Links | Minimizing SPAM | Misc. | Glitches | ConclusionPart 1 introduced the elements of building web pages. This part focuses on using the WYSIWYG editor, Composer.
Notice of obsolescence (Sept. 2005)
I no longer use Netscape composer. I now use Nvu, which is a superb free web authoring tool, with a number of nice features, such as four different views and CSS support. It evolved from Mozilla Composer, a part of Mozilla 1.x.
symbols contain raw HTML code Composer doesn't recognize. I copied this
code from Google to produce the search box. You can double-click on the
symbols to edit the code.
Right-clicking on any object: selected text, image, table, or link, brings up a dialog box with options for editing it. You should get to know the options.
Help.. You can learn quite a bit about Composer by clicking Help, Help Contents, Creating web pages (on the left of the Help window), Starting from a New Page (on the right). That puts you at the beginning of Netscape's Composer tutorial. Expand the window to make it more readable. You'll want to refer to it occasionally. Netscape Composer tutorials worth checking out: Pat Pecoy (version 4; a few differences) | RIT (4.x) | California State University, Long Beach (4) | Trinity University. You'll find more on Google, of course. Finally, a nice set of links on Composer.
| Before you go further, you may want to set the Composer defaults.
Click on Edit, Preferences... The box on the right appears. Click on Composer to bring up the settings on the right. Choose appropriate locations for your HTML editor (1st Page 2000, in this case) and image editor (Picture Window Pro, which you have encountered if you've been to my photography pages). These are .exe files, usually located in subdirectories of C:\Program Files. Click on Publishing, under Composer.
My preferred settings are:
|
 |
 |
 |
 Colors
and Background tab: Selects default text and background colors (for
normal text, links, etc.). You can use a color or an image for the background.
A background image is illustrated on the right; there is another in Tables,
below.
|
 |
Other formatting featuresSelectng text and clicking Format, Style can get youClicking Tools, Character Tools can get you Insert Special Character..., Rainbow Colorize (You need a long line to see the rainbow effect; I don't find it very useful), and SMALL CAPS. Special characters (for example, € for Euro) are shown on the right. They're limited. Mu is the only Greek character. Pi would have been nice. |
 |
You now have a pretty good arsenal of character and paragraph formatting tools. But to format pages, you need Tables.
Click Table (or
Insert,
Table),
and the New Table Properties dialog
box on the right is shown. I've left the default values, which I rarely
keep because they look pretty clunky. A 3x3
(rows x columns) table with default
Border, spacing and padding of 1, filled with miscellaneous text, is shown
below.
Choose the number of rows and columns in the table. Don't fuss over the settings: you can easily edit them later. Table Alignment applies to tables under 100% width. If you check Include caption, a caption will appear above or below the table. An empty caption can be used for spacing. I always leave Border line width checked. I set it to 0 for an invisible table or 1 for a table with visible cells. Larger values look clunky. I usually set Cell spacing to to 0 if Border line width is nonzero. I sometimes set it larger in invisible tables (Border line width = 0)-- it makes a difference in appearance when cells are colored. Cell padding is the spacing between the cell boundary and the text. It often has the same effect as Cell spacing. I set it at 0 when I want a table to fit in with regular text. (This very text is inside a 1x2 table with Cell padding = 0.) I set it between 2 and 6 when I want some spacing. Table width (pixels or % or window) sets the table width. If you uncheck it, it will be as large as necessary to fit data (up to 100%). Table min. height doesn't seem to work. I set Equal column widths as needed. |
 |
 Use
Color lets you pick a background color with the same choices
as Page Properties
and Font. Use
image allows you to use a image as the background color. This image
is tiled: stacked horizontally and vertically. It is typically a small
JPEG or GIF file, 100x100 pixels or
so, but it can be larger. It should contrast with the text. A dark background,
suitable for light text, is shown on the right. To get an image, you typically
click on Choose Image... then navigate
to the image. This checks the Use image
box.
Click OK to create the table. Tables (and Rows and Cells) are easy to edit. Just right-click on the table (selecting the appropriate row or column, if needs be), then select Table Properties to open the Table Properties dialog box, shown on the right. You can select from one of three tabs: Table, Row, or Cell. The most recently used of the three appears. The Table tab is identical to the New Table Properties dialog box. The Row tab is similar to the Cell tab, shown on the right, except that the middle entries, Cell spansthrough Cell min. height, are omitted. Most of the settings are pretty obvious, but there is hidden power here. You can set cell height as you please in units of % of table or pixels, then put a color or image in Cell Background to make neat borders. Header style is centered and bold. Cell spans is tricky. You can use it to make an individual cell span more than one row or column. But it doesn't simply consolidate cells, as you might expect. It extends the selected cell and moves the remaining cells. I couldn't get the hang of this feature until I realized that I needed to delete excess cells at the end of the row or column I just extended. You do this by right-clicking on the excess cell, then clicking Delete, Cell. The table below is an example of a 3x3 table where Row 1, Column 2 has been extended to cover two columns, and Row 2, Column 1 has been extended to cover two rows. |
 |
| R1, C1 | R1, C2 | |
| R2, C1 | R2, C2 | R2, C3 |
| R3, C2 | R3, C3 | |
You may have to play with tables a while to get comfortable, but once you get the hang of them you can do some amazing formatting. Remember, you can put tables in cells of tables, giving you endless possibilities. One more example: the banner I use to link to my major pages. It consists of a table within a table. Here is what it looks like in composer:
Now we turn to images.
I display most images smaller than 800 pixels wide or 640 high. Images that are larger than necessary should be resized down. For example, if your 4 megapixel digital camera makes 2272x1704 pixel images (a 4:3 ratio), you might want to resize them to 600x450 pixels for web display. Remember to crop out unnecessary portions. It's usually a good idea to sharpen after resizing.
An outstanding free program called IrfanView has most of the features needed for manipulating images for web page display: crop, resize, sharpen, rotate, flip, etc. It can save an image in almost any format. It functions as a rudimentary image editor: Enhance colors allows you to adjust brightness, contrast, gamma, R, G, and B. Absolutely worth downloading. But it's not a full-featured image editor. For that I use Picture Window Pro.
You may occasionally want to use an image from your computer screen
for your page. To copy a window to the clipboard, select the window, size
it appropriately, and click Control-Print
Screen. To copy the entire screen, click Print
Screen. To copy the image into an image editor, click Paste
(usually in the Edit pull-down menu).
You can edit it (typically crop and/or reduce it) and save it in an appropriate
format (JPEG for photographic images; GIF for block graphics or images
with limited color palettes).
| Inserting an image.
Click on Image or Insert,
Image...
to bring up the Image Properties dialog
box shown on the right. Select an image by entering it in the box or clicking
Choose
File and navigating. Images don't have to be on you site; they can
be on remote sites as well. You should observe copyrights. Remember that
images on remote sites can be deleted without your knowledge.
Text alignment and wrapping around images determines image placement. The two settings on the right wrap the text to the right or the left of the image. I frequently use them with images less than about 480 pixels wide. I often use tables to format images and text-- the results are more predictable. I leave Dimensions alone when inserting an image. The correct pixel sizes appear later, when you edit the image. Space around image is important. Most images need breathing room. I almost always enter numbers into Left and right and Top and bottom. I use Solid border occasionally for images that need it-- rarely more than one pixel. Glitch: if you make the image into a link, which is a nice way of displaying a large image (in its own page) by clicking on a thumbnail, Composer will add a 2 pixel Solid border. I usually reset it to 0 manually. Alt. Text allows you to enter text that appears when you move the cursor over the image. It was originally intended to replace images in non-graphic browsers. Does anybody still use them? Since alternate text is picked up by search engines like Google, it's a good idea to enter a clear description with important keywords. |
 |
 |
Click OK to load the image. The selected image, a 320 pixel wide thumbnail of the Chugwater, Wyoming caboose, appears below Image Properties.
You can bring up Image Properties for editing by right-clicking on an image and selecting Image Properties.
One glitch: If you change the size of an image, Composer usually refuses to recognize it because the original image is stored in the cache (an area of memory where recently accessed images are stored to save time). To fix this, click Save, Preview (or go to the browser). In the browser window, right-click on the image, then click on View image. Click Reload. Click Back to return to the page. The revised image should appear (click Reload if it doesn't), but it will be sized incorrectly. Now go back to Composer and click View, Reload. The revised image should appear, still sized incorrectly. Right-click on it, then click on Original Size. The Dimensions should change. Click OK. This doesn't always stick! Right-click on the image again to see if the size is correct (if it is, clicking Original Size won't change it). To make it stick, manually enter the numbers brought up by clicking Original Size-- just retype what's there. I know it doesn't make sense, but it works. I've done this annoying procedure enough times to run through it in 30 seconds flat. Whew!
You can link to
|
 |
To create a link, select the text to be made into a link and click on Link, or click on Insert, Link..., or right-click on the text and select Create Link using Selected... The latter is my favorite, by habit. The dialog box on the right appears. The Link to a page... box is initially blank.
How to minimize SPAM: Never put your e-mail address in text format anywhere on your site or use mailto: with your text format address. Try one of these techniques.For more detail, look at Why Am I Getting All This Spam?
- Use a small image of your e-mail address in GIF or PNG format. People won't be able to copy and paste it-- a small inconvenience. More importantly, evil SPAM sipders won't find it. Of course if someone else puts your e-mail address on their site you're out of luck.
- Go to https://hsltd.us/links/spamblock.html and implement their technique that replaces regular characters with ASCII-coded characters that SPAM spiders don't yet recoginze. For example, earthlink becomes %65%61%72%74%68%6c%69%6e%6b, etc. Mailto: should remain fully functional, but it's anybody's guess how long it will take the evil spiders to figure it out. You'll need an HTML editor like 1st Page 2000 to paste the text. On my contact page I've combined this technique with an image.
- If you e-mail me, I'll send you a Javascript that's as close to foolproof as anything I've seen. But I can't be certain spammers won't find a way around it. Because of that concern, the friend who developed it preferred that I don't put it on a public page. If the smappers figure it out, you'll need to use forms (a more advanced technique) or stick with a simple image file that has to be copied manually. Or make sure your ISP has an excellent SPAM filter.
- Put your e-mail on a single contact page. That way you can easily update it if you need to.
symbol appears. You can double-click on it to edit it. Very useful for
adding comments-- text which starts with <!-- and ends with -->. Comments
aren't displayed by the browser, but they help you remember what you were
thinking while you were writing.Line spaces between tables and text are not always displayed correctly, especially after a document has been reloaded. You have to preview the document in a browser to see exactly what you have. Remember, Composer is WYSI-almost-WYG.
appears. You can edit a target later. Named targets are particularly useful
for creating 