1

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.

2

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:

3

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.

4

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

5

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.

6

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.

7

o Special fonts: Impact (good for headings), Wingdings (special characters; examples: )

• 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.

8

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):

9

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):

10

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

11

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):

12

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.

13

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 (for a bulleted

list), or (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

14

• 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!

15

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.