Home › Groups › Community Webmasters

Web Page Cheat Sheet: Creating and maintaining web pages

Important Note: This document is a quick reference guide only. It assumes you have already read the “Creating Web Pages” section of the FAQs.

Table of Contents:

  

 
Neighborhood Page Examples

Calendar of Events, Officers/Contacts, Meeting Minutes, SWNI map, Neighborhood Map, Bylaws, Photo Gallery.
Examples...


How To Log In To SWNI
  1. Go to the User Login page.
  2. Log in using your SWNI username and password.
  3. If you don't have one, click Create New Account to request a username.


How To Create A Web Page
  1. Make sure you have read the FAQ page A Primer on Creating Web Pages before proceeding.
  2. Look under New Web Page (on the left side menu) and select the appropriate “content type” for the kind of page you wish to create [Tip: hover over the various types with your cursor to see their designated purpose]
  3. Give it a Title (this will appear at the top of your page)
  4. Choose the Neighborhood Association, if applicable
  5. Select from the list of Topics (e.g. “activities,” “work party,” “misc,” etc.) You may select more than one topic.
  6. Specialized page types will have several fields which you should fill out as appropriate (leaving blank those fields which are not). Many page types use the “Body” field as the primary field. If you do not need any special formatting, such as italics, bold, lists, links, images, etc., then just enter your text into the body field, otherwise click “Open Rich Text Editor” link below the body field’s text box. [Note: You do not have to use the Rich Text editor; you may enter HTML directly into the Body field if you prefer (limited to the HTML tags allowed by the selected Input Format).]
  7. To enter your text in the Rich Text Editor… just start typing! Don’t worry, your text does not need to be perfect – you will be able to come back and add/change/delete your text later.
  8. Optional: If you want a line to be a heading, select one of the Heading options from the "Format" drop down list, e.g. Heading 3.
  9. TIP: When you want to start a new line, use “carriage returns” (the Enter key).
  10. TIP: The Bullets and Numbers buttons are a nice, simple ways to create lists.
  11. When you’ve finished typing, Click OK to close the Rich Text Editor.
  12. Then click PREVIEW to see how your page looks
  13. Click SUBMIT to post the changes on to the web site
  14. TIP: If you’re creating a new page, Preview-and-Submit occasionally to save your changes as you go. Don’t work for an hour without saving your work.
  15. For additional information, see the Creating Web Pages FAQ section.


How To Move A Page Under A Different Web Page

After you create your new page, you will need to move it to the correct location:

  1. Click on the page Title to open your page, and then click the Outline tab.
  2. Change the Parent Item to the location under which you want your page to appear, e.g. Neighborhood home page.
  3. Click Update Book Outline.


How To Edit A Page

You can only edit pages that you have created.

  1. Make sure you are logged into the SWNI website.
  2. While viewing a page you have created, you should see an Edit tab near the top of the page; click on it.
  3. Make your changes.
  4. Click Preview to see the page.
  5. Click Submit to make it effective.


How To Upload Picture Files To A Page

Highly Recommended: Before you upload pictures to the SWNI site, use a program – such as Picasa (Windows) or Preview (Mac OS X) – to compress photos to under 70 KB. This will allow them to load faster when someone clicks on your web page (especially those using a dial-up connection). And they still look good. Once you’ve done that, you’re ready to upload the pictures…

  1. Make sure you have read the FAQ page Adding images before proceeding.
  2. Click on the page Title, and click the Edit tab
  3. Scroll down and click File Attachments
  4. Click the Browse button alongside the “Attach New File” box
  5. Find the file on your hard drive … then click on the file name … then click Attach.
  6. Click Preview to see the page.
  7. Click Submit to make it effective.
  8. This will give you a link to the file on your web page. A visitor will click the link to see the picture.


How To Display Pictures On A Page

The previous method will provide a link which a visitor must click to see the picture. That’s probably not what you want. Instead of links, it looks better if you display the actual photos, so the user does not need to open each file. Example: see the Marshall Park photo gallery

  1. Make sure you have read the FAQ page Adding images before proceeding.
  2. First you must upload the picture files using the File Attachments function, as described above.
  3. Then click “Open Rich Text Editor” (underneath the “Body” window).
  4. Click in the text where you want the picture to appear.
  5. Click the “Insert/Edit Image” button at the top.
  6. In the “URL” window, type /CMS-Uploads/ followed by the name of the file you attached to this page. For example, /CMS-Uploads/MP-sign-2.jpg
  7. Repeat the above steps to insert other pictures in the Body window.
  8. TIP: If you’re displaying several pictures together, you can separate them by entering a non-zero HSpace value (in the image dialog box) for at least some (or all) of the pictures. HSpace will place n-pixels on both the left and right sides of that picture. VSpace does the same, only at the top and bottom of a picture.
  9. Click OK to close the Rich Text Editor.
  10. Since you are displaying the pictures, you probably don’t want to see the links as well as the picture. To remove the link, uncheck the List box alongside each file name in the File Attachments area.
  11. Click Preview to see the page.
  12. Click Submit to make it effective.


How To Upload A File To A Page

For example, a PDF file of Bylaws (note: PDF files are recommended. RTF files are not allowed.)

  1. Make sure you have read the FAQ page Attaching Files for Download before proceeding.
  2. Click on the page Title and click the Edit tab
  3. Scroll down and click File Attachments.
  4. Click the Browse button alongside the “Attach New File” box
  5. Find the file on your hard drive … click on the file name … then click Attach.
  6. Click Preview to see the page.
  7. Click Submit to make it effective.
  8. This will create a link to the file at the bottom of your page, e.g. /CMS-Uploads/bylaws.pdf


How To Insert A Link To A File You Have Uploaded

For example, a link to a PDF file of Bylaws .

  1. Make sure you have read the FAQ page Attaching Files for Download before proceeding.
  2. First you must upload the file using File Attachments as described above.
  3. Click “Open Rich Text Editor” under the Body
  4. Click in the text where you want the file link to go.
  5. Click the button “Insert/Edit Link”
  6. Click Link Type = URL
  7. Click Protocol = Other
  8. And type /CMS-Uploads/ followed by the name of your file in the URL box. E.g. /CMS-Uploads/MPNA map.pdf
  9. TIP: if you want the link to open in a new window, click the Target tab, and then choose “New Window(_blank)” However this practice is discouraged in the interests of having all links on the SWNI website operate in a consistent manner.
  10. Click OK to close the Rich Text Editor.
  11. TIP: If you want to remove the automatically generated link from the page bottom, uncheck the List box alongside the file name in File Attachments. However one advantage to the automatically generated link is it indicates the file size, so if you remove the link, please provide this information in your link so people using slow dial-up connections can know what to expect in terms of download time.
  12. Click Preview to see the page.
  13. Click Submit to make it effective.


How To Delete Files From A Page
  1. Click on the page Title and click the Edit tab
  2. Scroll down and click File Attachments.
  3. Check the Delete box alongside the attachment.
  4. Click Preview to see the page.
  5. Click Submit to make it effective.


How To Insert A Link To Another Web Site
  1. Make sure you have read the FAQ page Linking to Another Web Page before proceeding.
  2. Click “Open Rich Text Editor” to open the Body editor, then click the button “Insert/Edit Link”
  3. Click Link Type = URL
  4. Enter the URL, for example http://www.portlandonline.com [Note: For links to the SWNI website, be sure to omit http://swni.org !!! Including this will create a dreaded absolute link.]
  5. Click OK … Preview … Save.


How To Insert An Email Address
  1. Click “Open Rich Text Editor” to open the Body editor, then click the button “Insert/Edit Link”
  2. Click Link Type = E-Mail and enter the eMail address.
  3. Click OK … Preview … Save.


How To Change The Order Of Pages

This is useful if you have several pages underneath one page, and you want to change the order they appear.

  1. Click on the page Title to open your page, then click the Outline tab.
  2. Change the Weight number to control the order of the pages under the parent page (the page numbers range from -15 to 15).
  3. Click Update Book Outline.


How To Delete A Page

You can only delete pages that you have created.

  1. Click on the page Title to open your page, then click the Edit tab
  2. Click Delete button at the bottom (next to Preview)
  3. You will be asked to confirm the deletion (Warning - deletions can not be undone)


More Information And Help

On the SWNI site, visit the FAQ for Creating an Account, Logging in, Creating Web Pages, and more!

Groups: