www.csn.edu Site Builder Support

Develop your page(s)

Putting it all together

Using the Site Builder Content Management System (CMS) is not as challenging as it sounds or seems. The CMS actually takes the guess work out of most tasks for the beginner and when you become more accustomed to the program, there are tweaks and tips that can help you achieve a more creative look.

Now that you have your content, pictures, and graphical elements together, the only decisions to be made now are where to put them on the page in a way that is easily understandable to your readers.

When you create a new page, you are asked to give the page a title. It is important to name the page relevant to the content on the page and always have CSN in the title. When search engines scale our entire site, the page title and meta tags are the two elements commonly used to categorize the pages. For instance, the title you should see at the top of the page right now is "CSN -Sitebuilder Toolkit". This tells the program what the page is about and allows it to index it according to this title.

Metatags are important also. This section is located under the Search Engine heading on the Pages menu in the Site Builder Toolkit. The options are author, page description, and keywords. Do not put anything in author. Page description is a chance to summarize the information on your page, and keywords is where you insert terms that the page contains such as: CSN, College of Southern Nevada, tutoring, admissions, nursing, etc., that will help your page come up in searches for these terms. Although, it will not boost your page to number one, it insures you presence is there.

A stark white page is what you begin with. The first rule of thumb to remember is that all the important information and links should be what we call "above the fold". In newspaper terms, this would be what you see when the newspaper is folded and placed in a rack. This concept applies to web pages too, but the above the fold is everything you can see without scrolling.

The only part of the page you need to be concerned with in the CMS is the main content section. The header and the left-hand navigation are already created for you by the CMS. Although it may seem limiting, there are many different ways you can layout your information in this section.

Text can be entered in two ways, either type it in or copy and paste. The standard font for content within the CMS is the normal format. If you are trying to copy and paste text from another program, the best practice is to copy the text while in the original program and pasting  it by clicking the clipboard marked with a T in the CMS. This removes all formatting and allows the text style to be formatted with the styles programmed into the CMS. Never use the other two clipboards labeled Paste and Paste from Word. They will leave formatting from the original program that can only be removed through the source code.

Special characters are available through the icon on the menu shaped like a small dice with red and blue writing. Spell check, spell check, spell check. One more time - SPELL CHECK! This option is available next to the special characters icon and looks like a check mark with ABC above it. This is very important. Since we are an institution of higher learning, it is important that we do not misspell any words. This goes back to our credibility as professionals and a source of education. Although we may not always be perfect, one misspelled word changes our students, colleagues, and public opinion of us.

Tip: If spell checker is not installed on your computer for Site Builder, you must call xHELP to have it loaded it.

Tables can be your best friend inside the CMS. If you can master this, you have it made. When you press the table icon it automatically defaults to 3 rows, 2 columns, and a 1 point border at 100 percent of the main content area space.

Changing the size of the table:

In the table menu, called table properties, you may change the width of your table in percent or pixels. I suggest percent since it is much easier to work with. If you want you table to be half the size of the main content area, just type 50 into the box and make sure the measurement is percent. If the measurement is set to pixels, you will have a much more dramatic result and smaller box. The entire width of the main content area is 550 pixels to help you with your measurements if you want to use pixels.

Changing the border:

Unless you want the border to be seen, change the 1 to 0 and it will become transparent. You will be able to see it while your working in the CMS, but when you hit preview to see your work, you will see the elements in the table, but not the actual table borders. You cannot change the color of the table border. To use color in tables, you must change the cell properties individually.

Working with cells:

To create colored cell borders, the border in table properties must be set to at least one or you will not be able to view it. To select the color, right click in the cell you are choosing or highlight the cells you are choosing to color and then right click. Choose cell properties. Once the menu opens "border color" will be the last selection on the right. Press select, a color pallette will appear and you can choose your color. CSN only uses colors blue "#006699" and black "#000000".

To create background color within cells, use the same process, but within the cell properties menu, choose background color instead of border color. CSN only uses colors blue "#006699" and black "#000000".

To make the straight line all the way across, in cell properties,  type at least one letter in two cells next to each other. Highlight the letters in both cells, right click and choose merge cells under the cell menu. Once the two cells are merged, right click and choose cell properties again, then background color.  CSN only uses colors blue "#006699" and black "#000000".

In the example above, I left the table border property set to one so that you may see the effect. To turn the background border off, right click, select table properties, and set the border size to 0.

Step 1: Size the Photo

Before adding a picture to a page in the CMS, it is important to resize the picture in another program such as Adobe Photoshop. If you do not have Adobe Photoshop, you may use Microsoft Word. The standard resolution for a photo to be used on a web page is 72 dots per inch (dpi). This enables the photo to download faster. It is best to save the photo as JPEG image.

If you are using the photo as a header, the standard size to fill the width of the page is approximately 550 pixels. To keep, the picture a nice rectangular shape, the length should be approximately 289 pixels. Here is an example:

This image is 550x213 pixels. Whatever size you save your photo is the size the photo will show when it is imported into the CMS and placed on a page. You may resize it in image properties, but this causes the picture appear to become blurry. The best practice is to save the photo the size you want it to be before being inserted on the page.

Step 2: Insert the photo (standard insert)

To insert the photo to the page, click the image on the menu that resembles a mountain with a yellow background. This will open a new screen called image properties. Click browse server, this will open the images folder. You should have a folder for your section, department, or pages within this area. If you do not, you have the option to create a new folder on the lower left-hand side of the screen. On the right-hand side, you see the option to browse, which will let you access files on your computer. Once you select the appropriate image file, the address for that image will show in the window. Ensure you are in YOUR folder and press upload. Next you must select the photo, and you will automatically return to the image properties window. Do not change any of the options here. Press OK and your photo will be added to the page. It will automatically left justify. 

Step 2: Insert the photo (using a table)

If you want to be able to place a photo in different places on the page, you must use tables. This will allow your photo to be placed next to text.

To achieve this look, I inserted a table and then imported the image. The image is 165 pixels wide so I right clicked in the cell and set the cell width to 185 pixels to give the image some breathing room.  Notice the cell to the right becomes the same height as the cell with the image. This cannot be changed. Try not to make images too big so that it leaves a gapping white space between text on the page.

I placed letters in the two cells underneath the top cells, highlighted them, and then right clicked. Next, I selected the cell menu and merge cells. This gives the effect that the text is running around the image.

All hyperlinks should be clear to readers. Graphic images, such as buttons or tabs, should be clearly labeled and easy to read. If you decide to create your own buttons, banners, or graphic elements, you should pay special attention when selecting the colors, backgrounds, textures, and special effects. It is more important that your navigational buttons and tabs be easy to read and understand than to have "flashy" effects. The KISS rule goes into effect with graphics - Keep It Simply Styled.

The CMS automatically colors text links. It is usually good to bold the links as well to give them greater emphasis.  The reason for this is text links should be unique -- they should not look the same as any other text in your web pages. You do not want people clicking on your headings because they think the headings are links.

Users should be able to find what they are looking for within our site within three clicks. If not, they are very likely to click off our site as quickly as they clicked on.

Just as in any document formatted on a word processor or as in any brochure, newsletter, or newspaper formatted in a desktop publishing program, all graphic images and elements, typefaces, and colors should remain consistent throughout the whole site. Consistency and coherence in any document, whether it be a report or a set of web pages, project a professional image.

For example, if you use a drop shadow as a special effect in your bullet points, you should use drop shadows in all of your bullets. Link-colors should be consistent throughout your web pages. Typefaces and background colors, too, should remain the same throughout your site.

Color-coded web pages, in particular, need this consistency. Typefaces, alignment in the main text and the headings, background effects, and the special effects on graphics should remain the same.

Since, we use a CMS, most of this is already done for you.