How to Enter and Format Content on Web Pages
How Do I Instructions for Collage
The instructions below will show you how to enter content and update content on Web pages on your Web site using Collage.
Navigating to your Page in Collage
How to Enter and Format Content on Web Pages
2. Click on the Content tab.
Navigate to the file folder that your Web page is located in.
3. Click on the name of the asset (file) to open it in the Page Editor.
4. Enter content in the content fields on the Page Editor.
You may key in your content, or copy and paste content into the page.
Remember, the Page Title field and the Page Subtitle field is pre-formatted for you, based upon your Web site's color scheme.
|
COLLAGE TIP: When copying and pasting content from another document (such as a Word document) into your Web page, you want to be sure that you do not carry over the document's formatting commands into your Web page. To insure this does not happen, copy and paste your content into Notepad, then copy the text from Notepad and paste into your Web page. |
You may format type by selecting and highlighting the text, then making your choice from the tool bar located at the top of the Page Editor.
- Bold Button - selected text will be made bold type.
- Italic Button - selected text will be made italics type.
- T Color Button - selected text will be changed to the chosen color. Please note that color choices are limited to the color pallet developed for Southeastern's Web site.
- T Size Button - selected text size will be changed to choice. Please note that the default text size is "medium."
- T Font Button - selected text will be changed to choice of type style. Please note that type styles are limited to the type pallet developed for Southeastern's Web site.
|
COLLAGE TIP: To remove formatting commands, such as Bold, Italics, Color, Size or Font, highlight the text and click on Clear Formatting, located at the bottom right corner of the Page Editor. |
- Style Button - selected text will be changed to choice of style.
|
COLLAGE TIP: Please note that once you apply a style to selected text, the only way to "unapply" the style is to delete the text. Whenever possible, it is best to use the Bold, Italic, Color, Size, and Font button to insure easy editing should you change your mind. |
- Alignment Button -- you may set alignment of left, center, or right on selected text.
- Indent Button -- allows you to indent selected text.
- Outdent Button -- allows you to undo indent on selected text.
-
List Button -- allows you to created bulleted or numbered lists.
|
COLLAGE TIP: To undo lists, you will need to use your backspace key and delete key to clear the formatting. However, it is always a good idea to put a few spaces before and after the text you wish to make into a list, then "back out" these extra spaces after you have applied the list fomatting to your text. This insures that the list formatting command does not continue to apply to text you enter above or below your list content. |
- Other tips for formatting type on Web pages in Collage:
Paragraphs
To begin a new paragraph, just press your Enter key.
However, if you wish to break to a new line, press your Shift and Enter keys.
Copying and Pasting into Collage
When copying and pasting from other documents (such as Word) into Collage, you do not want to carry over any formatting commands. To avoid this, always copy and paste the text into Notepad. Then you may copy and paste the content from Notepad into your Web page.
6. Inserting Tables
To insert a Table on your Web page, click the Table button, then choose Insert Table.
Complete the Insert Table box:
- Columns - Indicate how many columns you want your table to include.
- Rows- Indicate how many rows you want your table to include.
- Width - Indicate how wide you want your table to be in the Width field.
|
COLLAGE TIP: You may indicate the width of tables using percentage of allotted space (for instance this Collage Tip box is 80% wide) or you may indicate pixels. If you choose pixel, just enter in the number of pixels in the field (for instance, enter in "80" to get a table 80 pixels wide). |
- Border - Indicate the border size for your table.
Enter in the number of pixels wide you want your border to be. For no border, enter in "0".
- Align - Choose the alignment for your table in the Align field.
- Cell padding - Indicate the amount of cell padding you want. Cell padding is the amount of space between the text inside the cell and the borders of the cell (top & bottom, and left & right).
- Cell spacing - Indicate the amount of cell spacing you desire. Cell spacing is the amount of space between the cells themselves.
-
Background - If you would like the background of your table to be a different color, click the browse button and click on choice of table background (for instance, the Collage Tip boxes have a background color of white).
- Accessibility Options - In the Accessibility fields, you may choose to create captions and header tags for your table. While the Accessibility Options are not required, it is a good idea to complete them whenever possible.
|
COLLAGE TIP: You may make a variety of changes to your table by clicking on the Table Button and choosing any of the options offered. To change the Properties of your table, click the Table Button, then choose Edit Table. |
7. Inserting Images
|
COLLAGE TIP: Images used on your Web pages should be croped and resized BEFORE uploading them into Collage. When a very large image is uploaded into Collage and resized using Collages tools, the file size does not decrease causing your image to be very large and slow to download in addition to looking pixilated or blurry. See our How to Edit and Resize images documentation to learn more about croping and resizing your images to prepare them for use on your Web site. |
Click the Image button and you may insert an image into your Web page.
Complete the Insert Image box:
- Image folder - Click on your Image folder located on the left of your Insert Image box to make sure you are accessing the correct image folder for your Web page.
-
Click the New Image button - this will upload your image so you may include it on your Web page. Please note that the New Image button will not activate until you have selected your image folder that the new image will be uploaded into.
- In the Image Upload box, click the Browse button - Browse to and select the image located on your desktop. After selecting your image, click the OK button.
- Name field - Your image name should now appear in the Name field.
- Width and Height field
The width and height fields may auto-populate with the size of your image. You may adjust the size of your photo in these fields if you so choose by keying in the width or the height you wish to the image to be (in pixels). Be sure the Constrain Proportions box is checked to insure that you do not distort your image.
|
COLLAGE TIP: Images placed in the body content field of your page should not exceed 560 pixels, as the body content field is only 560 pixels wide. The image size for highlight boxes should be 150px wide by 190px tall. While the height of the image can be larger, the width of the image must be 150px wide or less to insure that it fits correctly in the box. |
- Border field - Indicate if you want a border around the image. Key in "0" if no border is desired.
- Align field - Indicate the alignment of the image on the page in the Align field.
- Padding field - Indicate the padding (space) you wish to apply around the image in the Padding fields. This is measured in pixels. Please note that this includes space left and right of the image as well as top and bottom of the image.
- Alt field - Key in a description of the image in the Alt field. This is a required field.
- Click the Ok button. Your image should now appear on your Web page.
|
COLLAGE TIP: You may insert an image that is already in your images folder by simply selecting it once you navigated to your image folder. Complete the border, alignment, padding and Alt fields. Click the Ok button and your image should appear on your page. |
You may create links to other pages on your Web site, links to other pages on Southeastern's Web site, or pages outside of Southeastern's Web site. You may also link to specific text on your current Web page. Collage classifies links in the following three ways:
- Internal Links
Links to pages on Southeastern's Web Site (in Collage)
- External Links
Links to pages outside of Southeatern's Web site (outside of Collage)
- Current Page
Links to text on your current Web page
- Select the text you wish to make a link.
- Click the Link Button located on your tool bar.
- The Link Title box should open. Notice that the text you highlighted for your link appears in the Text field.
- Click the Internal tab - The Internal tab may already be selected for you when the Link Title box opens.
- Navigate to and select the file folder the page you wish to link to resides in. The contents of your file folder should appear in the Contents field on the right once you select the file folder.
- Click on the page you wish to link to in the Contents field located on the right.
- Key in the name of the page you are linking to in the Title field.
- Click the drop down button in the Target field to choose whether the link will open a new window or if the link will replace the page in the current window. Generally, when linking to another page on Southeastern's Web site, you should choose current window.
- Click the Ok button. Your link has been created.
- Select the text you wish to make a link.
- Click the Link Button located on your tool bar.
- Click on the External tab in the Link Title Box.
- A list of external links that have already been created will appear. You may scroll through the list and make your selection (if the link has already been created).
- If your link is not included in the External Links folder, you will want to create a new link. To Create a New Link, click the New Link button.
- Complete the New URL box:
.Key in the name of the link in the Name field
Enter the URL for the Web page in the URL field. Click the drop down box and select the appropriate choice, then key in the URL for the link.
Click the OK button. Your new link should be added to the External Links file and the name of your link should appear in the Name field.
-
Key in the name of the link in the Title field.
- Click the drop down button in the Target field to choose whether the link will open a new window or if the link will replace the page in the current window. Generally, when linking to a page not on Southeastern's Web site, you should choose New window.
- Click the Ok button. Your link has been created.
Creating Links to Text Within Your Web Page:
To link to a place on the page you are working on, you will first need to create an anchor where you want to link to in the Web page. Then you can create the link to the anchor you created on the page.
First, create your anchor:
- Place your cursor at the spot on your Web page that you want to link to. This is where you will create the Anchor.
- Click on the Anchor button on the tool bar and select Insert/Edit Anchor.
- Key in a name to your anchor in the Name field and click the OK button - Make the name of your anchor short and concise. Do not use caps, spaces or special characters when naming an Anchor.
And next, create your link:
- Scroll to and highlight the text you wish to make a link to.
- Click the Link button on your tool bar.
- Click on Current Page tab in the Link Title box.
- Select the Anchor you wish to link to.
- Key in the name of the link in the Title field.
- Make sure Current window is selected in the Target field.
- Click the Ok button. Your link has been created, a yellow anchor icon will be visible to indicate an anchor is present. If the yellow anchor icons are not visible on the page, select the Anchor icon on your Collage toolbar and click Show Anchors, the icons should appear. (See icon to right)
Editing Anchors - To edit an anchor within your Web page
You may want to rename your anchor within the Web page.
To edit the name of an anchor, click the yellow anchor icon, the black grid lines will appear around the icon to show that it is selected. (If the yellow anchor icons are not visible on the page, select the Anchor icon on your Collage toolbar and click Show Anchors, the icons should appear).
Next, select insert/edit anchor
Change the name of the anchor and click OK. The new anchor name will be saved.
Moving Anchors - moving an anchor to a different location on the Web page
To move an anchor to a different location within your Web page, click the yellow anchor icon (the black grid lines will appear around the icon to show that it is selected).
Drag the anchor to the new location within your Web page.
Deleting Anchors - To delete an anchor within your Web page
To delete an anchor, first make sure that the yellow anchor icons are visible on the page by selecting Show/Hide Anchors under the Anchor icon on your Collage toolbar.
Next, simply click the yellow anchor icon that you would like to remove (the black grid lines will appear around the icon to show that it is selected) and press delete on your keyboard. The anchor has been deleted.
Show/Hide Anchors - To visibly show or hide all anchors within your Web page
By clicking this option under the Anchor button on your Collage toolbar, you can choose to make the yellow anchor icons visible or invisible on your web page while editing. These yellow anchor icons will not be visible on the live web page, they are only for editing purposes to indicate an anchor is present.
Highlight Boxes may be included on any page you choose. Highlight boxes will always appear on the right side of your Web page.
To include a Highlight box on your page:
- Click on Metadata in the tool bar at the top of your page.
- Click on choice in the Highlight_Box field.
Image and Text
This will create a box with a field for an image to be inserted into and a field for text to be entered into. The box will include a 1 pixel border.Text Only
This choice will create a box with a field for entering text into only. The box will include a 1 pixel border.No Border
This choice will create a box that can hold either an image or text and does not have a border. This option is recommended for the use with graphic images.None
A highlight box will not be created on the page.
- Click the Ok button. Collage will indicate that the metadata has been applied. Click the OK button again.
- Click the Save button on your toolbar. This will refresh your page editor and your highlight box will appear, ready for you to enter in content.
Once you have completed your page, you will want to make sure you run Spell Check.
- Place your cursor anywhere in the Body field of your document.
- Click the Spell Check button. Collage will perform a spell check of your Web page.