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 theasset (file) to open it in the Page Editor.
4. Enter content in the content fields on the Page Editor.
You maykey in your content, or copy and pastecontent 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 textfrom 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 PageEditor. |
- 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, alwayscopy and paste the text into Notepad. Then you may copy and paste the content fromNotepad 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 forhighlight boxes should be 150px wideby 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- In order to addpadding
(space)around the image you will need to put a margin in
the style field. For just a little padding you would put
Margin:10px; in the style field. This is measured in pixels so
you must put the px behind the number when adding the
margin.
Please note that this includes space to theleft
andright of the image as well as thetopand
bottom of the image.Also note that the padding
boxes that you see on the image insert propertiesdo not
properly add padding in all browsers. In order to view
the padding in allbrowsers you must use the margin:10px;
method described above.
- 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,style (Margin:10px;)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 onyour current Web page. Collage classifieslinks inthe 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 totext on your currentWeb page
-
-
- Select the text you wish to make a link.
- Click theLink 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 thelink 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 shouldchoose current
window.
- Click the Ok button. Your link has been created.
- Select the text you wish to make a link.
-
- Select the text you wish to make a link.
- Click theLink 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 thelink 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 chooseNew window.
- Click the Ok button. Your link has been
created.
- Select the text you wish to make a link.
-
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.
- Place your cursor at the spot on your Web page that you
want to link to.This is where you will create the
Anchor.
-
- Key in a name to your anchor in the Name field
andclick 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.
- Key in a name to your anchor in the Name field
andclick the OK button-Make the
name of your anchor short and concise. Do not use caps,
spaces or special characters when naming an
Anchor.
-
- 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.