Links to Other Key Pages
Links in this page:
About Graphics and RWD
The use of images (pictures or graphics) can truly enhance your web pages. As the old adage says, "a picture is worth a thousand words", and we think that effective use of pictures is worth ten thousand words. Graphics and pictures can be used in a variety of ways in your pages; sometimes as an illustration of a concept, and other times as extensions of the colors and style of the page itself. Creative use of images is one of the areas where you can get the most out of RWD. Style sheets and pre-formatted skins have their place, but if you want your page to look exactly as you want, you will most likely need to learn to effectively use graphics.
In the Page Body of your RWD page, you can use images exactly as you do in any FirstClass document using the Insert Image Command on the document tool bar. The other RWD sections; the Header, Header Links Bar, Navigation Sidebar and Information Sidebar deal with images in a slightly different way. To use images in these areas of your page, you need to upload them to your site and tell RWD where they are by filling in the Path/Filename fields. This is quite a simple thing to do, once you understand about paths to objects in FirstClass.
Paths in FirstClass
The term "path" in FirstClass (and RWD) refers to the location of a specific object (which can be a document, a calendar, a container such as a conference or a folder, or, in this case, a graphics file). In order for RWD to display a graphic it must know where to find that graphic file. The path is the route to the container that contains the file. A container can be a folder or a conference so we will use these terms interchangeably.
There are two basic uses for paths in RWD. In some cases, you provide a path and a file name to the RWD form itself to tell it where to locate a resource that you wish to display (a graphics file is an example of this and always involves a filename after the path such as: images/logo.jpg). The other use for a path is to provide a destination for a web user to visit when they click on a link in your RWD page. Paths of this type are either internal links (to other RWD pages, to markers within RWD pages, or to conferences, folders or calendars), or they are external links to other web sites. Note: paths to RWD pages can be internal or external (through the internet), see below for an explanation of how to write a path to a page using either method.
For paths within FirstClass, there are two kinds; absolute paths and relative paths. In order to explain the concepts behind these two types of paths we will use the following examples to illustrate them.
An absolute path leaves no ambiguity as to the location of the object being referenced. In the example below, there can be absolutely no doubt about which book is being referenced:
The Universe, The Milky Way Galaxy, The Solar System, Planet Earth, Canada, Ontario, Anytown, 123 Anystreet, in Joe's house, in the kitchen, On the green table, The hardcover book called War and Peace
In this example, there can be no mistake as to where the book is located and which book we are talking about, no matter where you are when you read the address.
On the other hand, the same book could be reached by a relative path that ONLY works from the location you are currently in. If you were standing two blocks East of Joe's house, you could find the book with the following relative path:
two blocks West of here, 123 Anystreet, in Joe's House, in the kitchen, On the green table, The hardcover book called War and Peace,
This path will ONLY work from your specific location as the instructions "two blocks west of here" would take you to a different location if you started from any other place (123 Anystreet wouldn't be there, so the rest of the path would be broken).
An even simpler relative path can be given if you are closer to the object being referenced. For instance, if you were standing in Joe's kitchen, the same book could be found like this:
The hardcover book called War and Peace, On the green table
This path is still relative because it only works when you are in Joe's kitchen.
These examples illustrate the concept of paths and these concepts apply to FirstClass and RWD.
Writing a Path To Another Page in RWD
In general, you use relative paths to locate files and documents in RWD. Usually, when you wish to use a relative path to a file, the file must be in the same folder as the RWD page that is accessing it, or in a subcontainer (or sub-subcontainers, etc.) of that folder. If you wish to use an absolute path, the easiest way is to use an internet link which always starts from a common starting point; the site name as it is registered in the Multiple Sites and Languages form.
In this example website container (picture below), a link created in the RWD page called Home Page that will open the Writing page would take on one of two forms. The internal, relative link would simply be (no quotes): 'Writing' (Because the Writing page is in the same folder as the Home Page, the relative link is just the page name. If the Writing page happened to be located in the Assignments folder, the relative link would be: 'Assignments/Writing' - again, no quotes)
The link ' Writing' will only work if the page containing the link is located in the same folder as the writing page itself. If the Home Page was in any other location, it would not work.
This syntax is absolute because there can be no mistake about where the Writing page is, regardless of where you open the link from. The http://www.firstclassdepot.com/Teachers/Mr_Obama portion of the link is absolute and will always take you to the same place, no matter where you start from.
As long as the Writing page exists in the container that is opened when you type the http://www.firstclassdepot.com/Teachers/Mr_Obama of the URL, the page will open, REGARDLESS of where the link originated. If the destination of the link was not on your FirstClass server, you would have to use the full internet syntax to link to the page.
Paths in the RWD form require you to type the link, however in the document section of the form (the Page Body), you can either type links or you could drag a document or page onto the document body itself and FirstClass will automatically create a link to that object.
Be careful when using this technique however as the link is only relative when the container holding the target page is in the same container as the page with the link on it. Otherwise, FirstClass will assign a special syntax to the link and make it absolute - this forces anyone who clicks on the link to log into FirstClass to see the target page.
If you see syntax like that shown below in the link, recreate the link because it will not work in the browser:
In summary, a path to the writing document can take on one of the following forms:
Writing - a relative, internal link that will only work if the document or RWD page that contains the link is located in the same folder or container as the destination page (the Writing page itself).
Paths To Files Inside Folders
To use an image in your RWD page that is not in the page's main body content (IE. a logo in your header section or a bullet in the navigation sidebar) you must first upload the image to a folder or conference that your site has access to in FirstClass. A folder or conference can be used and in FirstClass we will collectively refer to either as containers. Generally, it is advisable to create an images folder right in your site container (the container in which your RWD pages are stored).
In order that your RWD page can find the image to display, you must enter the path to the image file that you have uploaded. Remember, a path is nothing more than an address to tell the page where the file is and what the name of the file is.
In all of our examples, we have named the images folder "SiteImages". If you choose to store all your images in an images folder that was created in your site container, you would have to tell the RWD page that your image file was located in that folder. For example, a path to a title image called classlogo.gif that is stored in the images folder inside your site container, would simply have the path: Siteimages/classlogo.gif as in the example image that follows.
If the file was located in a folder that was inside the SiteImages folder, for example a folder called 'logos', you would have to also include that extra folder in the path: SiteImages/logos/classlogo.gif.
If you did not create an images folder but uploaded the graphics into the same folder as the RWD page that is using the image, the path would simply be the image file name itself but we always recommend that you store images in a folder to avoid cluttering up your main site container.
In the diagram below, an example of a site is shown in a directory tree view. The entire site and all objects in that site are stored in the Site Container. This site contains two pages, a Home Page and a second page called RWD Page 2. It also contains another web site that is located in a subfolder called Sub Site, which has a Home Page of its own. The following examples demonstrate how you would show the school logo, which is stored in the Images folder (and is named logo.gif), depending on which page you were editing in the site.
[Image:path_img0.jpg[
To path to the logo.gif file from the main Home Page, you would enter the following path in the Logo path/file name field in the RWD form:
Images/logo.gif
This path dissects to the following:
Images/ = In the images folder
logo.gif = The file name itself
To path to the logo.gif file from the Home Page that is located in the Subsite, you would enter the following path in the Logo path/file name field in the RWD form:
../Images/logo.gif
This path dissects to the following:
../ = One level up from current container
Images/ = In the images folder
logo.gif = The file name itself
In another example, If you wanted to create a link in your main Home Page that would open the Home Page in the Subsite, your link would look like this:
/Subsite
(because the page name is Home Page, you do not have to name the page itself)
Paths to Files From the Internet
Just as you have to enter a path to display a file inside an RWD page, you can also use a path to display a page itself (another RWD page or any other document). The word path can be used interchangeably with URL (Uniform Resource Locator).
Pathing a file from the Internet is simple. To display a source file from the Internet, merely type in the URL address of the source file in the field. The URL of a file is the address that appears in the URL area (address bar) of the browser window. It is usually in the form:
For Example
When the URL is typed into a field, such as the Logo Path/File Name field, the corresponding area on the web page in the Internet Browser will display just the graphic.
Generally, resources such as graphics files are not referred to using the internet syntax but it can be quite useful if the if the images folder containing the graphics is not near the local site container. An example of this would be where a school or other organization maintained a central images folder for common clipart, etc. and all of the sites within that organization contained images that were stored in that central folder.
General Guidelines When Working With Images
While you can use clipart and other commercially available graphics in your RWD pages, you should consider using a graphics editing program to do some basic manipulation of the images before putting them in your page. There are many programs on the market that offer a wide variety of features but at a minimum the program you use should allow you to resize (scale) images, resize the 'canvas' or background of images (effectively creating a border around your image that is part of the image file itself), and save to .gif, .jpg or .jpeg, and .png formats. The more you can tailor your images to the size and resolution you want in your page before you use them, the better.
Using images to your best advantage takes experience but following a few guidelines will go a long way toward maximizing their effect in your web pages.
- Try to use images that compliment your page subject and reflect a concept or thought that is being expressed by the text in the page. Having pictures for the sake of having pictures is not helpful and can clutter the look of your page.
- Create your graphics or size your pictures so that they appear on your web page a full size (with no scaling). Scaling pictures in the web page itself can lead to one of two problems; If the original image is too large and needs to be scaled down to fit properly in the web page, web users will experience slow download speeds and the web page will appear slow and jerky as it loads. If, on the other hand, your original image is too small and you scale it up in the page, the resolution of the picture will be diminished and the picture may appear to be of low quality.
- Experiment with margins on your images so that they fit the web page better. In RWD, Logos often look best when the image itself has a bit of a margin (either transparent or matching the page background) between the edge of the image and the top and left sides of the web page.
- Use the best graphic file type available. We use .JPG, .GIF and .PNG predominately, with a growing focus on .PNG. See below for an explanation of the various graphics file types
Graphic File Types
Note: Lossless compression means that none of the data in the original picture is lost when the file is compressed. Some file types use 'lossy' compression that achieves a greater file compression by sacrificing some of the image quality (usually color depth).
PNG - Portable Network Graphic
Uncompressed/ Lossless, supports all color depths. PNG supports lossless compression of images at all color depths. PNG has compression well suited for master copy data, and PNG is about 10% - 30% smaller than 8-bit GIF files. This relatively new bit-mapped graphics format is similar to GIF, but not yet fully supported by all Web browsers (the main ones do however). FirstClass fully supports the PNG file format. A superior replacement for GIF; PNG Supports indexed color, grayscale, and true color images, and transparency.
BMP - Bitmap
Uncompressed/ Lossless, supports all color depths. This is the standard image file format used by Windows, and is widely supported by Windows applications. The .bmp size of a screen capture will depend on the screen resolution and color depth chosen. A bitmap file is uncompressed and, therefore, an exact copy of what is captured from the screen.
Use when file size is not constrained and high quality is desired. Do not use for files destined for the Internet because file sizes are generally large and images do not scale up well.
BMP (RLE) - Windows Run-Length Encoded
Uncompressed/ Lossless, supports 256 colors or less. This is a compressed BMP file format for images with less than 256 colors, but it is not often used. RLE is effective with graphics, but less effective in continuous tones, like those found in photos. Use with graphics, but not with photographs.
GIF - Graphics Interchange Format
Uncompressed/ Lossless, supports 256 colors or less. It is one of the most popular image formats used to distribute images over the Internet. GIF compresses the image without incurring a loss in image quality. This file format supports transparent color. Best for Internet graphics with a few distinct colors, such as illustrations, cartoons, icons, buttons, and text; GIF supports transparent color and animation.
ICO - Windows Icon Image File
Uncompressed/ Lossless, supports all color depths. This image file format is exclusively for icon files. Icon files can contain the same icon in varying color depths: 16 colors, 256 colors, and the Windows XP palette (millions of colors and alpha blending), for example. ICO is only used for creating icon files.
JPEG/JPG - Joint Photographic Experts Group
Uncompressed/ Lossy, but you can select compression quality, supports all color depths. These files are compressed by discarding "extra" data. However, you can select the quality of the compressed image. The lower the quality, the smaller the image but the more different it will look than the original image. JPEG image files are typically much smaller than other file formats and are widely used for communicating images over the Internet. The JPEG image file format works best for images with many colors and a large variation of colors (e.g., a scanned photo or multimedia CD display).
Use with full-color or grayscale images that have continuous variations in color, such as photographs. Use for scanned images.
An excellent choice for images that will be used on the Internet; where file size must be kept small at the cost of image quality. Do not use for images with few colors, or for line drawings or images with text.
TIF - Tagged Image File Format
Uncompressed/ Lossless, supports all color depths. This was created to become the industry standard image file format. This file format is widely supported by graphics applications on many different types of computers besides the Windows PC. TIF files are supported by about every desktop publishing program, and the files are known for their portability and rich set of possible options. TIF files are specifically used for print publishing purposes.
Widely supported in desktop publishing; High quality images for use in page layout programs; Compatible with all types of images and graphics.
| 
Help Site Home Page
