Links and Images
Return to Guidelines for Editing the Web
Return to Rich Text Editor Tools
Links
Linking to an External Website
The HCDE site is set to recognize URLs and turn them into links without your having to format them directly. If you enter the entire URL without "http://," the URL should appear as an active link on the website. The link will open in a new window or tab if it as external website but open in the same window or tab if it is an internal (HCDE) site.
However, if you want to use text (rather than a URL) as a link, you will need to use these instructions.
If you are linking to an external (non-HCDE) website, enter everything after "http://" in the URL box on the "Link Info" tab and click "OK."
Note: The default setting on the HCDE site is for all external links to open in new tabs or windows, so you do not need to do anything with the Target tab unless you want to override the default setting.
Linking to an Internal Website
The HCDE site is set to recognize URLs and turn them into links without your having to format them directly. If you enter the entire URL without "http://," the URL should appear as an active link on the website. The link will open in a new window or tab if it as external website but open in the same window or tab if it is an internal (HCDE) site.
However, if you want to use text (rather than a URL) as a link, you will need to use these instructions.
If you are linking to a page within the HCDE site, enter everything after "http://www.hcde.washington.edu," including the "/" sign.
For example, if you wanted to link to www.hcde.washington.edu/myhcde/pub, you would type "/myhcde/pub" in the URL box. Note that the Protocol box detects this and changes to "<other> from "http://." Click "OK."
Note: Internal sites have a default setting of opening in the same window or tab that the user is in, so you do not need to make changes in the Target tab unless you want to override this setting.
Linking to an Email Address
The HCDE site is set to recognize email addresses and turn them into links without your having to format them directly. If you enter the email address (e.g., hcdeweb@uw.edu) the email should appear as an active link on the website.
However, if you want to use text (rather than an email address) as a link, you will need to use these instructions.
To link to an email address, highlight the text you want to be the link, and select the link button. Under "Link Type," select "E-mail."
Enter the email address. If you would like the email being sent to that address to have a default subject or body message, enter that information in the appropriate fields. Otherwise, leave the fields blank.
Linking to an Anchor
To link to an anchor within the same page, highlight the text you want to turn into a link and click on the link tool. Then, on the "Link Info" tab, select "Anchor" under "Link Type."
A list of available anchors will appear in a drop-down menu. Select the anchor you wish to link to:
To link to an anchor on a different page, follow the instructions for creating an external or internal link, as applicable. You will need to know the anchor name on the other page. Anchors are linked using a # sign, so add "#anchor-name" to the end of the page link. Links with anchors will not be recognized as URLs, so you will need to use the links tool to enter them.
For example, the full link path for the "Anchors" anchor on the the Rich Text Editor Tools page is www.hcde.washington.edu/myhcde/pub/web/tools#anchors.
Note: You must place your anchors on the page prior to linking to them. If you do not have any anchors on your page, you will see the following window.
About the Link "Target" Tab
The target determines how the link will open in a browser. There is no need to name the Target Frame.
The following settings are available:
- <not set>: This keeps the default setting.
- <frame>: This opens the link in a frame. Do not use this setting.
- <popup window>: This opens the link in a popup window. Do not use this setting.
- New Window (_blank): This opens the link in a new window (or tab). This setting should be used for PDF files and anytime you do not want the user to lose the page that the link originates on.
- Topmost Window (_top): This opens the link in the topmost (or oldest) window or tab. There are not very many instances when you will want to use this on the HCDE site.
- Same Window (_self): This opens the link in the same window or tab. Use this setting to override a setting that defaults to a new window. There are not very many instances when you will want to use this on the HCDE site.
- Parent Window (_parent): This opens the link in the parent window (from which the link originated). There are not very many instances when you will want to use this on the HCDE site.
About the Link "Advanced" Tab
Ignore the advanced tab of the links window (below). Contact the Communications Manager with any questions.
Uploading and Linking to a File
To upload and link to a file (e.g., PDF), click on the link tool in the menu. Instead of entering a link, click the "Browse Server" button.
Below is a view of the editor. Click on the image below to view at a larger size.
If the file you want to link to has already been uploaded, find it in the files and click on the file name.
If you need to upload the file you're linking to, click on the "Upload" tool.
The file (or image) will appear in the lower right box. If the file cannot be previewed, the name of the file will appear in the lower right box. Click on "Send to FCKEditor" or on the file or image name in the lower box.
The file browser window will close, and you'll be returned to the "Link" window with the file you chose linked in the URL field.
Set your target to open in a new window, and select "OK."
A few things to note:
- If you upload a revised version of a file with same file name as the original, "_0" (then "_1," "_2," and so on) will be added to the file name to distinguish it from the original. It will not replace the original file. If you want to replace the file, first delete the original from the file browser using the "Delete" button," and then upload the revised file with the same name. Contact the Communications Manager with any questions.
- When at all possible, link to a PDF file rather than a Microsoft document (.doc, .xls, .ppt, etc.). This not only preserves the content of the document, it retains better compatibility across various operating systems. If you are unable to convert your document to a PDF, contact the Communications Manager.
- If you use this method to link to an image, you will be creating a link, not inserting the image into the page. To insert an image into a page, please continue reading.
Inserting Images
Review the Image Use Guidelines before inserting images. To insert an image into your page, click on the images icon. The "Image Properties" window will pop up:
Do not enter the URL of an image from an external site in the URL field. Only enter URLs of images hosted on the HCDE site.
To choose or upload an image, click on the "Browse Server" button. You'll be taken to the file browser. Uploading an image works the same way as uploading files. The maximum dimensions of any file you upload is 1200 x 1200 pixels. The width of the HCDE body page is 500 pixels.
Once you have uploaded and/or chosen your image and sent it to the FCKEditor, you will see an Image Properties window similar to the one below:
Notes regarding the numbers in the image are below.
- This is the URL of the image. Because the image is hosted on the HCDE server, "http://www.hcde.washington.edu" is excluded. The full image URL is www.hcde.washington.edu/files/521class.jpg.
- Alternative Text. Do not leave this field blank. The alternative text (or alt tag) improves the accessibility of the site and describes the image to users if the image does not load for some reason. Always provide a description of the image, and, if applicable, a photo credit.
- Image Dimensions. The dimensions of the image are automatically loaded here. You can resize the appearance of the image (this will not resize the actual image). A couple of notes:
- Do not increase the size of the image.
- Do not drastically decrease the size of the image, as the appearance in quality of the image will be greatly reduced.
- The lock indicates that the image will be resized proportionally. If you click on the lock, it will open, which means that you can override the image proportions. Do not do this, as it will result in the image being stretch out or squished.
- If you click on the "Refresh" button, it will reset the image proportions to the original (true) size.
- Image Properties. These settings control the appearance of the image with respect to its formatting on the web page. HCDE's CSS class settings will override these settings, so using them will have no effect on the appearance of the image.
Note: If you want to change the alignment of the image, use the justification buttons in the rich text editor. Do not change the alignment in the Image Properties window. If you want text to wrap around the image, keep reading to learn about the "Advanced" tab.
About the "Link" Tab
The "Link" tab works similarly to the main "Link Info" tab does for creating links, with a couple of fewer options.
You can enter a URL the same way that you did for the various kinds of links above, including uploading a file.
Rather than having a separate "Target" tab, the target options are located in a drop-down menu below the URL field.
If you want to link to a larger version of the image in your page, use this tab to link to the image and set the target for "New Window (_blank)."
Note: If you want to link to an email address, you must entire "mailto:" before the address in order for it to work. For example, "mailto:hcdeweb@uw.edu."
About the "Advanced" Tab
If you want your image to be arranged with text above and below it, you can ignore this tab. However, if you want to arrange the image so that text flow around it (either on the left or the right), you need to use this tab.
There is only one field in the "Advanced" tab that you need to think about:
If you want your image to be left-aligned and have text wrap around it, enter "imgLeft" in the Stylesheet Classes field. If you want your image to be right-aligned and have text wrap around it, enter "imgRight" in the Stylesheet Classes field. These classes are case sensitive and must be entered exactly as above.
Note: The image will not appear to wrap properly in the rich text editor, but after saving the page and viewing on the site, it will appear aligned properly.
You also have a few other options for working with images in the file browser. You can create a thumbnail of an image and resize an image.
Creating Image Thumbnails
Note: Creating thumbnails and resizing images using the file browser significantly reduces image quality. Ideally, images should be resized in Photoshop before being uploaded. Contact the Communications Manager with any questions.
To create a thumbnail of an image on the server, follow these steps:
- Select the image for which you want to create a thumbnail.
- Click on "Thumbnails" at the top of the page and select the size of thumbnail you want to create.
- Click "Create thumbnails."
- A new file will be created in the same directory sized to the specifications you selected. For most images, this will result in the image being cropped.
Click here to view a screenshot of the file browser prior to creating the thumbnail.
Resizing Images
Note: Creating thumbnails and resizing images using the file browser significantly reduces image quality. Ideally, images should be resized in Photoshop before being uploaded. Contact the Communications Manager with any questions.
To resize an image in the file browser, select the image you want to resize. Input the new size you want. Once you put in one dimension, the other dimension will be calculated automatically to preserve the image proportions.
After clicking "Resize," a new image will be created with the same file name but with "_0" appended.
Note: Always leave "Create a new file" checked.
Click on the image below to view a larger version.
