Chapter Pages:
Quickstart Guide
This section gives you everything you need to know to create and update a chapter page in
five minutes or less.
IMPORTANT NOTE:
We require that all administrators use the Mozilla Firefox web browser for
editing Chapter Pages. Firefox is free, and can be downloaded for PC or Mac at
http://www.getfirefox.com/. Editing Chapter Pages in Internet Explorer and
Safari has been problematic.
Logging in
Using Mozilla Firefox, go to http://www.wellesley.edu/Alum/chapteradmin.html. Log in
using the same username and password you use for the Online Community.
Once you log in, you should see a page like this:
Hover over the Site Management tab at the top of the page, then hover over the Site
Content option. In the second submenu, click “Manage Chapter Pages”.
If you have trouble logging in, please contact the Alumnae Office technical staff at
techadmin@alum.wellesley.edu.
Editing
When you have navigated to your Chapter Page, you will see a list of pages you can edit.
The pages available will depend on which template you chose when the chapter was set
up; your view may look slightly different than the image below.
1
To edit a page, click on the page name (for example, the “Chapter Welcome Page” circled
in red above).
The page will display, with an “Edit” button at the top. Click the
“Chapter: Edit” button to edit the page.
Note: If this is your first time editing a chapter page, you may see a security warning
popup message similar to this one:
Click the “Always trust content from this publisher” checkbox, and press the Run button.
If you forget to click the checkbox, you may see the security warning again, but it will not
cause any other issues. If you click Cancel, you will not be able to use the web editor. If
you click Cancel accidently, quit and restart Firefox and return to the page.
When the page loads, you’ll see an editing window that looks like this:
2
Enter your text or make any changes in this window as if you were working in a Microsoft
Word document. This window behaves similarly to Microsoft Word in editing. Details on
changing text sizes and styles and adding other formatting are covered in the “Advanced
Editing” portion of this guide.
Copy and Paste from Microsoft Word or other programs
You may already have the text you want in another file. There is no need to retype the
information – you can easily copy and paste plain text. Copy text as you normally would
from another document; to paste into the editing window, click in the chapter page
editing window where you want the text to go, and then select Paste from the Edit menu
in Firefox, or press ctrl-v.
Note, however, that you should only copy and paste plain text. Copying tables, text boxes,
images, or formatted text from Microsoft Word or other programs can have
unpredictable results. We recommend saving Microsoft Word or other files as plain text
before copying to avoid potential problems, or alternately, compose your text in Notepad
or another plain text editor. You can add formatting to the plain text after you copy it into
the editing window.
Proofreading
When you paste text into the editor, make sure to proofread the page, both before and
after publishing, to catch any issues. Proofreading is important even if you are copying
from plain text.
Saving and Publishing
When you’re finished editing, click the “Save Changes” button at the bottom.
3
Clicking the “Save changes” button takes you to a page where you can preview the page
you just edited. When you are satisfied with the edits, click the Publish button at the top
of the page:
This will take you to the “Publish” option for the single page you just edited:
Click the “Publish” button to publish your pages. You’ll get a second confirmation page:
Click “Publish Changes”. This will publish your page to the internet, and overwrite any
old information.
You’re finished! The page has been edited, and the edited version can be viewed as
normal.
If you wish to edit other pages, click on them and repeat the procedure above.
What Next?
Now that you’ve created your chapter page, the next step is making it available to
everyone. To do that, we’ll need to put a link to the page on the Alumnae Association
website.
Typically, clubs and classes have a public front page, maintained by the Alumnae
Association, which provides some basic information about the group and a link to the
4
group’s chapter pages. Contact the Alumnae Association to let us know when your
chapter page is ready to go, and we’ll create a public page for you.
Advanced Editing
Advanced topics are covered in the “Advanced Editing” portion of this guide. Topics
include:
• Formatting text
• Adding images
• Adding links
• Tables and other page formatting
• Spell-check
• Using the HTML code editor
Need Help?
If you need assistance editing chapter pages, contact us at
techadmin@alum.wellesley.edu.
5
Chapter Pages:
Advanced Editing
The chapter pages editor provides a WYSIWYG (What You See Is What You Get) editor for
Chapter Pages. As mentioned previously, for basic editing, the editor works similarly to
Microsoft Word – for the most part, you will simply be typing into the editing box.
However, due to the nature of web pages, there are some differences. In this portion of
the guide, we’ll cover how to:
• Change font type, size, and color
• Insert hyperlinks
• Insert images
• Create bulleted or numbered lists
• Create and modify tables
Note: This guide does not cover all options available in the editor. If you have questions
about the editor not covered by this document, contact the Alumnae Office technical
team at techadmin@alum.wellesley.edu.
Font Changes
Unlike Microsoft Word documents, web pages have far more limited font options. Using
the editor, you can change your font style (to a limited number of font options); change
the font color; change the font size; change the font style (i.e. bold, italics, etc); change
the text orientation (left-justified, centered, or right-justified); and use Heading styles to
change font size and style for subject headings.
The font options look like this:
Note: Depending on your web browser’s settings, these buttons may not all appear on the
same row.
From left to right, the options are:
• Heading Style: Choose from “normal” (standard font), heading styles 1 – 6 (in
decreasing order of size/emphasis), “address” (italicized), and “formatted” (a
fixed-width font). Heading styles are a good way to distinguish sections within
your web page.
• Font: Several options are given; all fonts provided are, in general, ok for web use.
The fonts provided include:
o Sans-serif fonts: Arial, Tahoma, Verdana. Sans-serif fonts are very
easily readable, and recommended for large amounts of text.
o Serif fonts: Georgia, Times New Roman. Serif fonts can be more difficult
to read on a screen than sans-serif fonts, but are good for headings.
o Fixed-width fonts: Courier New. Fixed-width fonts have characters
which are all the same width.
6
•
•
•
•
•
o Special fonts: Impact (good for headings), Wingdings (special characters;
examples: HLP†‹`)
Size: Sizes are listed as 1 – 7, with the approximate correlation to Microsoft Word
font sizes in parenthesis. Keep in mind that your font sizes will display slightly
differently on other computers, depending on how the viewer has her browser
configured; font sizes on the web are relative, not absolute.
Bold, Italic, Underline, Strikethrough: Behave as they would in Microsoft Word.
Text Color and Background Color: Clicking on the font color or background
color brings up a palate in a popup window from which you can select a color.
The small “A” next to the background color button shows a preview of the fonts’
appearance with the selected colors.
Superscript and Subscript: Behave as they would in Microsoft Word. Useful for
footnotes, or scientific or mathematical expressions.
Text justification: Choose from left-aligned, centered, right-aligned, and fully
justified.
Hyperlinks
You can add links to other sites on the web. To add a link, highlight the text you would
like to link (e.g. if you would like the words “click here” to link to a site, type “click here”
into the editor window, and then highlight it), and click the link button:
The Insert/Modify Link window will open:
In the URL field, enter the URL you want to go to. A URL is the web address of a web
page: for example, the URL for the Google search engine is http://www.google.com.
7
Make sure you include http:// at the beginning! The easiest way to make sure you’re
getting the correct URL is to go to the web page in a new Firefox window, and then
highlight and copy everything in the “address” field Firefox.
Images and Other Files
You can add pictures to your web site. In order to add a picture, you must first have a copy
of the picture saved to your computer in GIF, JPEG, or PNG format. If your image is
inside a Microsoft Word document or another non-standard image format, you will not
be able to display it on the page.
Some computers indicate file type in the file name; if your image file ends in .jpg, .gif, or
.png, it’s probably ok. Other computers do not show these file name extensions; if you do
not see a three-letter extension on your file’s name, you can tell what type it is by (on a
PC) right-clicking on the file, selecting “Properties” from the menu, and looking for the
“type of file” information.
In order to add an image to your page, position the cursor where you would like the
image to go in the editor, and click the “Image/File Library” button below the editor. This
will pop up a chapter page File Library window (you must allow popup windows in
Firefox to use this feature):
8
In order to help you keep your files organized, we have created two folders for you: “files”
and “images”. Click on the “images” folder to get to the images area.
In order to add the image, you must first “upload” it – that is, put it in a place where the
editor can find it. To do this, click the “Upload Files” button at the bottom of this
window. You’ll see another page (note: because this page contains a Java applet, it may
take some time to load fully):
9
Click the “Browse” button at the top of the window, and you’ll see a third window:
This window behaves like the “Open” function in Microsoft Word or many other
applications. Browse through the files on your computer to locate the image you wish to
10
upload. Click on that image to select it, and click the “Open” button. The window will
close, and in the previous window, you’ll see the file listed:
If you need to upload additional files, click the “Browse” button again and repeat the
procedure until all files appear in the list in the above window. When you are finished,
click the “Upload” button. When the files have finished uploading, they will disappear
from this window. When all files have disappeared, click the “Continue” button.
You will return to the first screen, which will now include a list of available files (with
previews of images):
11
Now that you’ve uploaded the file, you can add it to your page. Underneath the
appropriate image name, locate and click on the “Insert Image into Editor” link, then
close the window. Your image will now be appearing in the editor:
You can adjust the image’s position as you would with an image in Microsoft Word.
12
Lists
When making lists of items, it can be useful to have them display as either numbered or
bulleted lists. The web editor makes creating formatted lists easy! Simply type your list in
the editor with one list item per line, like this:
Oranges
Apples
Lemons
Once you have entered your list, select the whole list, and press either
list), or
(for a bulleted
(for a numbered list). The bullets or numbers will appear automatically, like:
• Oranges
• Apples
• Lemons
or
1. Oranges
2. Apples
3. Lemons
If you later need to add an item to the list, click next to the last item in the list and press
the Enter button on your keyboard – the next list line will be inserted, and you can type in
the item. Numbered lists will automatically adjust numbering to remain in order.
Tables
Tables can be used to better organize information – you can use tables to place items
(including text, images, and other elements) into rows and columns.
To insert a table, press the table button:
You will see a popup window (popups must be enabled to use this feature):
Options include:
• Rows/Cols: Enter the number of rows and columns for your table
13
•
•
•
•
•
Width: Enter any number, and select either “Percent” (for a table that adjusts its
width to the width of the page – i.e. a 75 PERCENT table will always take up 75% of
the page, no matter what the viewer’s screen size is), or “Pixels” (for a table
whose width is constant whether the page is resized or not). If you’re not sure
which you want, “percent” is usually a better option.
Fixed width columns: if this option is checked, columns will stay the same relative
size no matter what you type in them. If it is unchecked, columns will adjust to fit
the table contents.
Alignment: if you want all text in the table to be aligned to the left, right, top, or
bottom of the table cell, select the appropriate option. You can leave this at “not
set” and manually set alignment on each portion of text as well. For multiple
column layout pages, we recommend setting this option to “Top”.
Border thickness: the width, in pixels, of the border displayed around the table.
Can be set to zero for an “invisible” table border.
Cell spacing/Cell padding: The amount of blank space surrounding the contents
of a table cell. Both are set to 1 by default, which is a good amount for both.
Once you have the options you want selected, click OK. The table will appear in the
editor:
Click inside any cell to edit the contents of that cell. You can add text, images, and any
other content to a table cell just as you would add it to the main section of the page.
To add or remove rows or columns, click in a cell adjacent to where you would like a new
row or column. You will see a set of arrows and a circle with an x in it at the top of the
column, and at the left side of the row:
. To add a column or row, click on the
appropriate arrow; for example, if you’d like to add a column to the right of the current
column, click the left arrow in the top set. To remove the current column or row, click the
x in the column or row set of arrows.
Reminder: if you are copying and pasting text from Microsoft Word, it is a good idea to
create tables in the chapter pages editor first and then copy only text from Word into the
new table. Copying tables from Word into the editor can yield unpredictable results!
14
Spell-Check
It’s always a good idea to spell-check documents, and web pages are no exception! The
Chapter Pages web editor has a built-in spell check. To use it, click the spell-check
button:
As you probably know, spell-check is great, but it doesn’t catch everything! We strongly
recommend that you proofread your web pages – or better yet, ask a friend to proofread –
before or shortly after publishing them.
Using the HTML Editor
If you know HTML, or if you use a web editor such as Dreamweaver or GoLive, you may
prefer to simply copy and paste HTML code rather than use the WYSIWYG editor.
To switch to HTML code view, click this button: . The editor will switch to showing
you the HTML code. If you know HTML you can edit it here, or you can copy and paste
from an HTML editor.
Please note that the HTML editor will strip any header information from your HTML
before posting. Page-wide color preferences, background colors and images, and CSS
styles stored in the header will not be retained. To ensure that your page will display
properly, copy only the HTML between the <body> and </body> tags. In addition, take
advantage of the preview screen to ensure your HTML is displaying the way you expect it
to.
If you are using CSS, contact the alumnae office technical team for additional
information.
Additional Help
Need some extra help creating your chapter page? Contact us at
techadmin@alum.wellesley.edu. We’ll be happy to answer any questions, or send you
more technical documentation.
15