When you add a new page or edit an existing one, you will be confronted with several fields. You may not see all of these on every page. These fields all have the question mark  instructions which you should point at.
PAGE NAME
Whatever you enter here will be what appears in the site's navigation links. You should pick a naming scheme for all your pages and stick to it, like ALL UPPERCASE, or all lowercase, or All Title Case. If at all possible, try to use one or two word names. Your home page should be called Home.
PAGE TYPE
Most pages are Information pages, but you should also have one Contact Us page and one Order Form age. If you have more than one Order Form, then the settings for orders forms will apply equally to both forms.
LINKING
This determines in which navigation area the link for this page appears in.
BROWSER TITLE
This is used more by search engines than people, so you don't have to use perfect English here. Just use three to five words (a phrase) that you want to rank well for, and that describes this page a little.
META DESCRIPTION
This is sometimes used as the description of your page when your page shows up in search engine results. Use plain English, up to 255 characters.
PAGE DISPLAY
Determines how many content sections your page will have, from one to three. You can also turn your page off if you want without having to delete it entirely. Disabled pages will not show up in the navigation.
COMPANY INFO?
This determines whether to display the company info on this page, and if so, in which sidebar. It will only display in a sidebar, not in the main content area, so if you enable this, be sure to also enable the appropriate sidebar.
LOGIN FORM?
This determines whether to display the login form on this page, and if so, in which sidebar. It will only display in a sidebar, not in the main content area, so if you enable this, be sure to also enable the appropriate sidebar.
HEADLINE
The headline is very important for both site users and search engines. Try to write a natural sounding headline yet one that uses the search engine keywords or keyphrase you'd like to rank well for.
LEFT SIDEBAR CONTENT
You should only see this field if you've enabled it in the Display field above. If you intend to show the company information or login form in this sidebar, be sure it's enabled, even if you don't write anything more in it.
MAIN CONTENT
This is where your main page content goes. You should read the section about the WYSIWYG editor further on down for detailed instructions on how to enter site content.
RIGHT SIDEBAR CONTENT
You should only see this field if you've enabled it in the Display field above. If you intend to show the company information or login form in this sidebar, be sure it's enabled, even if you don't write anything more in it.
FOOTER MESSAGE
This is an optional field, only holding 255 characters. You could put a quote here or something similar. Where exactly this footer is will depend on your site's particular visual design.
FOOTER LINK
This determines whether this page will be linked to from the footer. You should not enable this option for any page that clients should be logged in to see, as any link in the footer will circumvent the login requirement. If you don't want a page to appear anywhere but the footer, set its Linking to Orphan, and then enable its footer link.
The WYSIWYG Editor
The rest of this article will focus on the WYSIWYG content editor. Its basic functions include text editing and formatting, and it can also handle links, images, tables, horizontal lines, and more. If you've ever used a word processor, you probably already know most of what you'll need to know.
Text Editing and Formatting
Plain text is the heart of any web page. It's the stuff that people read, and it's the stuff that search engines use to rank your page. At it's simplest, just put your cursor in the editor and start typing.
Formatting your text is a good idea for both people and search engines. On the web, there are four kinds of text:
- Unformatted text,
- Paragraph text,
- Headline text, and
- Text that really sticks out!
UNFORMATTED TEXT
Unformatted text and paragraph text are very similar. They look practically the same. The WYSIWYG editor automatically turns unformatted text into paragraph text whenever you press the Enter key to start the next paragraph.
It's good practice to always press Enter at the end of paragraphs so that unformatted text becomes paragraph text. Even if you only have one paragraph on the page. This is because some browsers render unformatted text in one font and paragraph text in another. So if you have a mix of unformatted and paragraph text on the same website, it looks funny.
PARAGRAPH TEXT
Paragraphs on the web work slightly differently than they do in a regular word processor. When you press Enter, instead of the cursor going down to the next line, it goes down two lines. This ensures that there is always a space between paragraphs. Rather than indenting the first line of text, on the web this is the standard way to delineate paragraphs.
If you want to make the cursor go to the next line instead of skipping down two lines, press Shift-Enter instead of just Enter. You can use this to force line breaks.
Paragraphs should be short and sweet. Ideally they are about 15 to 20 words per line, and about 3 to 5 lines per paragraph. This makes it easy on the eyes. Always think of your customers when writing web content, and make it easy for them!
HEADLINE TEXT
 You can turn any unformatted text or paragraph text into headline text by using the Format Selector. Just select the line of text, then click the Format Selector and choose Heading 1, Heading 2, or Heading 3. You should probably ignore the other choices (except for Normal, which is regular paragraph text).
Heading 1 is the largest headline, Heading 2 is the next largest, and so on. Normally Heading 1 is used for the top headline in the page, and Heading 2 is used for any sub-heads. Search engines in particular look at the contents of any Headings. Use any search keywords in your headlines.
TEXT THAT STICKS OUT
 It's a good idea to use the Boldface and Italicize buttons to emphasize bits of text. Just select the text and then click the B or the I buttons. Although a U button (for underlining) is provided, you should avoid using it unless absolutely necessary, since on the web underlined text is usually assumed to be a link. There is a strikethrough button you can use to emphasize, for example, higher lower prices.
TEXT THAT REALLY STICKS OUT
 You can use the Text Color button to change the color of selected text.
If you then center this text and boldface or italicize it,
it will really stick out.
JUSTIFICATION AND LISTS
 You can use the justification buttons to left, center, right, and fully justify selected text. You should usually use left justify instead of full justify. Use the bulleted lists or numbered lists button to easily create lists.
MORE ON TEXT FORMATTING
 If you create your text in Microsoft Word and then copy and paste it into the WYSIWYG editor, it might look kind of funny. To avoid this, copy it from Word, put your cursor in the WYSIWYG editor, then click the Paste From Word button.
 If the text you paste in looks like it's all crazy with a bunch of different fonts, different emphases, and you want to clean it up, select everything and click the Remove Format button. You may also need to use the Format Selector to change everything to Normal if the sizes are all wacky.
^ Top
Links
Links are the lifeblood of the web, and there are five kinds:
- Links to other websites.
- Links to other pages on your own website.
- Links to other places on the same page.
- Email links.
- Links to download files such as PDFs, DOCs, RTFs, TXTs, and others.
They're all created in similar ways.
LINKS TO PAGES & EMAILS
 To create a link, select the text you want to turn into a link, then press the Insert / Edit Link button. A window pops up asking you to choose the link type (URL which means a link to a web page, anchor which means a link to another place in the same page, or email).
You also need to enter the URL, which you can find out by using a browser to go to the page you want to link to and looking in the browser's address area.
- For another person's website, the URL will look like www.websitename.com.
- For another page on your own site, the URL will look like www.yourwebsite.com/yourpage.php
- For an email, you'll need to enter an email address, and an optional default message subject and body.
ANCHOR LINKS
 Anchors are useful for, say, a FAQ page where you could have a whole bunch of questions at the top of the page which link to the answers further on down the page.
To create an anchor link to somewhere else on the same page, you first need to create the anchor. Put your cursor where you want the anchor to go, and click the Insert / Edit Anchor button. A popup window will ask you for the name of the anchor. Call it whatever you like, but make it one word.
Then go back to where you want to create the anchor link, select the text you want to turn into an anchor link, click the Insert Link button, select anchor for Link Type, then select the Anchor Name you just created. Repeat the process for every anchor and anchor link to be put on the page.
LINK TO DOWNLOAD FILES SUCH AS PDFs AND DOCs
It's pretty easy to include downloadable files in your pages such as Adobe Reader files and Word documents:
- Click the the Insert / Edit Link button. A window pops up.
- Click the Upload tab.
- Click the Browse button and find the file on your hard drive, then click OK.
- Once back in the popup click Send it to the Server.
- Once it's successfully uploaded (you may have to click OK here), click OK to get back to the WYSIWYG editor.
- Your link will be there with a name that includes your website address. You can edit this so that it's more descriptive.
^ Top
Images
Images should ideally be pre-processed for web use. Though this is not mandatory, it can dramatically affect the user experience. For example, if you take a high-resolution digital camera photo and upload it directly to the web site, it will probably be too large and take a long time to download. If you have twenty of these on a page, that might make it take ten minutes to download for any modem users!
Optimizing images for web use can be done for you by Valued Websites, or if you have image editing software like Photoshop (search the help files for "optimize"), you can do it yourself. Gimp is a free image editor for Windows, Mac, or Linux.
Images should be on your hard drive in .jpg, .png, or .gif format. Photos should be in .jpg format saved at around 80% compression, and logos should be in .png or .gif format. They should be should be 510 pixels wide maximum when working with a full content area, or 330 pixels or less for a content area with a sidebar.
 That said, let's get started:
- Put your cursor where you want the image to go and click the Insert/Edit Image button. A window pops up.
- Click the Browse Server button. Another window pops up.
- Look for the "Upload a new file in this folder" field at the bottom, and click its Browse button.
- Navigate to the image file on your hard drive, select it, click OK, then back in the popup window click the Upload button at the bottom right of the window.
- Your picture will upload, then you'll see a link for the new picture in the center of the window. Click that link.
- The second popup window will disappear, and you'll be back in the first popup window, and you should be able to see a preview of the image.
- In the Alternative Text field, enter a brief description of this image. This is used by search engines and screen readers for the blind.
- If the width of the image is greater than 510 or 300 (as noted above), change the width to 510 or 300. This will smoosh the picture to fit into the web page. You should also reduce the height so that it remains in the same proportion. This is not the ideal solution for pictures that are too large for the web page, but it will do in a pinch.
- Experiment with the other fields and options if you like as described further on down.
- Press OK, and you should see the image in the WYSIWYG editor.
IMAGE OPTIONS
- Border: put in a number from 0 to 10.
- HSpace: the number of pixels between the image and any text it abuts horizontally. Put in a number between 15 and 20.
- VSpace: the number of pixels between the image and any text it abuts vertically. Put in a number between 15 and 20.
- Align: useful for making the text flow around smaller images. You'll probably only ever use Left or Right.
In the Advanced tab, there's a field called Style. For classy images leave the four above options blank, and copy and paste one of these two lines in there:
For left aligned-images put in
float: left; border:1px solid #ccc; padding: 3px; margin: 5px 15px 5px 0
For right aligned-images put in
float: right; border:1px solid #ccc; padding: 3px; margin: 5px 0 5px 15px
^ Top
Tables
 Put your cursor where you want it, then click the Insert/Edit Table button to create a table, which is useful for presenting tabular data in an orderly fashion. A popup window will ask you for the number of rows, columns, and other information.
For width, if you want the table to span the entire content area, enter 100 for the number, and change pixels to percent.
Tables are finnicky, and you may sometimes need to use the Source button described below to format them to perfection (or ask Valued Websites to do it).
^ Top
Horizontal Lines
 Use the Horizontal Line button to insert a horizontal line wherever your cursor is positioned. Be careful not to go overboard with these lines. Often, a better result can be achieved just by using proper paragraph and headline formatting.
^ Top
More Options
 The Source button lets you view and directly edit the content's HTML code. If you know HTML, this can be useful. If you don't, then you'll probably want to stay away from this button. It can be used to enter JavaScript and CSS into the content, which can make the page look terrible if you don't know what you're doing.
For more information or if you have any questions please email info@valuedwebsites.com.
More Articles
^ Top |
