Creating Web Pages

If you haven’t read the primer, please start there.

If you want to create a multi-page section, such as Neighborhood or Committee site, or just want to create multiple pages linked together in some sort of hierarchy, the Book format is probably what you want to use.

If you want to announce a meeting or special event, or place something on the calendar, you should use the event type (see Calendar events).

A Primer on Creating Web Pages

To create web pages on this site (or merely add comments to an existing page), you need to register for an account. Once registered and logged into the system, you should see your account name on every web page, in a block along the left-hand edge. One of the items inside that block will be “New web page.” Under that you will see a menu of content types you can create (click on the “New web page” menu item to see brief descriptions of each type and their intended purpose). The types you see will depend on the privileges associated with your account. For most users, a story or event are the types of content you will want to create. Other types serve more specialized purposes and are generally only needed by site administrators. Once you select a content type, you’ll see a page with a number of fields germane to that content type. Fill in all appropriate fields and leave blank any which don’t apply. If a field doesn’t make sense to you, go with the default value. The “Path Alias” field is generally best left blank as the system will automatically insert an appropriate value. Required fields – those which cannot be left blank – are marked with a red asterisk.“Neighborhood Association” selection box If your page pertains to a particular neighborhood association or two, then select them from the menu. If your story applies to many neighborhoods or all neighborhoods, then don’t select any (as this will be counterproductive). The neighborhood selection scroll box looks like the image to the right. Chose as many categories from the Topics menu as reasonably apply to your page, but again don’t select too many. Limit your choices to those which best describe your page. “Topics” selection box The topics selection scroll box looks like the image on the left. You may use a limited set of HTML tags in your text. This page demonstrates the effects of most of them. They are useful to create italics, do bolding, create headlines, create an outline, etc. Alternatively, the “enable rich-text” option may be used for this purpose without the need to know how to use these HTML tags. But the option has its quirks and is not supported on all browsers. It is known to work with Camino or Firefox (recommended browsers), or IE. At this time it does not work with Safari. This option inserts various HTML tags to achieve desired styling effects. You may experience difficulties trying to mix the rich-text editor and manually inserting HTML tags. Once you have entered your text, hit the “Preview” button to see what your page will look like. If you have more than a small amount of text, you’ll see two versions of your page. The first is a “teaser,” a truncated version which will display on pages showing teasers from a number of pages (i.e. syndication), and the second is the full version of your text. You can control where the teaser breaks by inserting a <!--break--> tag. While you can move the break up or down from the default break location, you should be careful not to include too much text in the teaser. Depending upon your privileges, you may be able to attach files for downloading or graphics to display in the page. Because this is a privilege which can be easily abused by InterNet outlaws, you may have to apply for this privilege. You may change your text and hit the “Preview” button as often as you like before submitting your page for publication. Once you are ready to publish, just hit the “Submit” button. Even after publication, as the author of the page, you may still go back and edit it to make changes to the page. [Note: The “Submit” button appears only after you have previewed the page.]

Adding images

Please Note: You need elevated privileges to upload files (including graphics) to our system. This is a security measure to protect the site against malicious attack by unknown parties. If you would like these privileges, please contact the webmaster with a short request, including your intended uses of this site. The upload (attachments) dialog box Here’s how to insert images into your web pages. First, either edit an existing page, or create a new web page (see “A Primer on Creating Web Pages” if you don’t know how to do this.) Next you must upload your image files using the attachments dialog box (shown to the right) –> Click “Choose File” to select a file to upload. [Note: this button may be labled “Browse” or something similar, depending on your browser.] Then click “Attach” to mark the file for uploading. (It won’t actually be uploaded until you submit the page for publication.) Repeat this two-step process if you wish to upload more than one file or image. Shows attachments dialog with files attached Notice the “List” checkbox? That’s to display a list of downloadable files in an attachments box at the end of your page. It would look something like this: Shows attachments download box You probably don’t want your image files to be listed like that, so uncheck those checkboxes. If you mark for upload a file which you later decide you’d really rather omit, check the “Delete” checkbox. The file won’t be removed from the list, however the file will not be uploaded when you go to publish the page. (Note: If you are editing a page in which a file has already been uploaded, the file will be deleted from the server once you publish the page.) The image tag in useTo insert the image into your text, you use an HTML image tag, as shown here on the right. If you are not familiar with HTML, the image tag, in its simplest form, looks like this: <img src="path to file">, where “path to file” is replaced with a path to your uploaded file. The image tag supports additional (optional) elements, some of which control how the image is displayed. For example if you embed the image tag inside a block of text, inserting align="right" will cause the image to appear on the right side of the page, with text wrapping around the image to the left. Embedding hspace="10" vspace="5" will add 10 pixels of whitespace horizontally around the image, and 5 pixels of whitespace vertically, which is visually more appealing than text which runs right up to the image. Although optional, it is always good to include the alt element. It adds text describing the graphic, which users with disabilities will appreciate. The format looks like this: alt="Text describing graphic". The path to the file consists of “/system/files/” plus the filename. Spaces in the filename are replaced with “+”. So for a file named “img tag example.png” the path would be: /system/files/img+tag+example.png. So the simplest image tag you could use is: <img src="/system/files/img+tag+example.png">. A more sophisticated example is: <img src="/system/files/img+tag+example.png" alt="Text describing graphic" align="right" width="521" height="345" hspace="10" vspace="5">. Please note: Unless your images are small, around 20K or smaller, you should place a <!--break--> tag before your images. This will prevent the images from loading on summary or teaser pages. Not all users of our system will have fast InterNet connections.

Books

Our CMS system (Drupal) supports a type of content known as “books.” Books are really just a way to relate pages with one another in a hierarchically cascading chapter/section arrangement. This structure is extremely useful for creating a series of related pages on a given topic. It is an excellent way to organize a committee or neighborhood association website. The “Library” tab (at the top of any page) will show all the books on our site. Our FAQ is one of those books, and the page you are now viewing is a page in it.

Books - An Overview

Books are a way to relate pages with one another in a hierarchically cascading chapter/section arrangement. This structure is extremely useful for creating a series of related pages on a given topic. In a book, each page may have children (i.e. “child pages.”) Each child may itself have children. So to create a chapter or section, merely make a page (the chapter), then attach child-pages to it (pages in the chapter).

Pages, chapters and sections of the book may be easily moved around. They may be moved to other areas of the book, or to another book entirely, or made into a new book in and of itself. When a page is moved, all its children (and any of their descendants) come along for the ride.

When a book page is displayed, links to its children (if any) are automatically listed at the bottom of the page (as well as links to “previous” and “next” pages, and a link to move up one level in the book hierarchy). When a page, section or chapter is moved, those lists are updated automatically, without the need to edit the parent page(s). The “printer-friendly version” link at the bottom of a book page allows you to view multiple pages of the book at once.

FAQ Navigation BlockAnother advantage to the book structure is the book navigation block (on the upper-left of a book page), which looks something like the image here on the right. It displays the name of the book in the title, and presents links to its chapters, and the hierarchy down to your current page (plus siblings and children). Pages without any children are denoted with a bullet in front of them; pages with children (e.g. sections/chapters) are preceded by a triangle (or arrowhead).

To learn how to create and manipulate book pages, read the other pages of this section (by following the right pointing link below, or use the menu links for FAQs on the upper right). Additional information about books may also be found in the Drupal handbook on books.

Creating a Book

Creating a book starts by creating a “Book page,” then adding additional pages to it. In order to create book pages, you generally need to ask for “book” privileges. Only then will you see some of the book creation options, such as the “Outline” tab, or “Book page” type. With proper permissions, different people may work collaboratively on a book.

The best practice is to use the “Book page” type when creating new pages in a book. The easiest way to do this is to use the “add child page” link. You’ll find one at the bottom of every book page. Clicking on it creates a new “Book page,” with the current page automatically selected as its parent.

Non-book pages (i.e. already existing pages in the system) may be added to a book. So non-book pages you posted previously, which you hadn’t intended to be part of a book, for example, may easily be added without the need to recreate the page as a “Book page” type. Because these pages lack the “Parent” and “Weight” parameters (necessary for positioning the page within a book) in their creation/edit dialogs, those parameters are made available under an “Outline” tab for the page (you will see the “Outline” tab alongside the “View” and “Edit” tabs if you are the page’s author and have book privileges).

Note: The “Outline” tab is a bit of a kludge to retrofit the book structure onto non-book page types, something Drupal did not originally support. You will not see it on a “Book page” because you can choose a parent when you create (or edit) it. Since other page types lack this option on their creation/edit pages, they require the “Outline” tab to retrofit that functionality. This is a subtle difference between a “Book page” and a “Page” type.

Strictly speaking, new books are only created when a page is assigned “<top level>” as its parent value. Only system administrators can do that. However a book may be effectively started at any level by anyone with book privileges, and later moved by an admin to become a truly standalone book. Technically, such books begin their lives as chapters, and are later promoted to book status. The Community Webmasters group on our site provides a place where you can create a book prototype which is generally out-of-sight of the public (and search engines), until you are ready to take the book live. All that needs to occur is for the top page of your book prototype to be moved elsewhere. Because all the links are relative, your whole book – and all its descendants – can therefore be moved by one simple page edit. You can use this approach with whole books, chapters, sections, or single pages.

Creating a Chapter or Section

Books are a way to relate pages with one another in a hierarchically cascading chapter/section arrangement. Strictly speaking, our CMS doesn’t support chapters or sections. There are only book pages, and links to ancestor pages. But we can easily create data structures which resemble chapters or sections, so it is very useful for us to use these metaphors.

In a book, each page may have children (i.e. “child pages.”) Each child may itself have children. So to create a chapter or section, merely make a page (the chapter), then attach child-pages to it (pages in the chapter).

Chapters/sections are merely pages with children. As such, it is possible to put a great deal of text into a chapter page. Be careful about this as too much text may obscure the chapter contents. Chapter and section pages should be very succinct, generally no more than a short paragraph. Put the bulk of your content in the pages of the chapter or section.

One approach to books is to limit, as far as possible, each page to a single topic, then organize related pages into chapters or sections. Be forewarned that you can easily carry this too far, creating a complex and difficult to navigate hierarchy. Striking the perfect balance between the total number of pages and amount of text on a page is more art than science. Fortunately, you can edit and rearrange.

With well chosen titles and divisions of content, it is possible to create an extremely accessible layout for your content.

Calendar events

To add an event to this web site’s calendar, all you need to do is create content of type “event,” filling in all the fields appropriate to your event, and leaving blank any which don’t apply. If you don’t know how to create web pages on our system, read the FAQ page on Creating Web Pages.

Be sure to choose one or more appropriate topics for your event. If it is a committee meeting, for example, you’ll want to select “meeting” and the committee (e.g. Transportation, Board, Trails, Public Safety, etc.) If a topic for your committee does not exist, ask the webmaster to add it.

Please note that there are separate fields for agenda and description. The description field will show up in the event summary, so it is best if it is relatively succinct. The agenda field is optional, if you don’t have a formal agenda to post, or if you want to add the agenda later. If you don’t have your agenda finalized, you could post a preliminary agenda and mark it as such, or you could simply put in “TBD” or leave the field empty. You can always edit your event page later by hitting the “edit” tab at the top.

If you fill in a street address and city information in the location fields, the system will automatically create a Google Maps link for you. Brief instructions for each field appear just below the field’s entry box.

In general, if an optional field is left blank, it will be omitted from the event’s web page; even the title for the field will not appear on the page. For example, you would normally leave the “cost” field empty for committee meetings, and the word “cost” would not appear on the page. On the other hand, if you entered “free” into the “cost” field, a line would appear on the page which looked something like: “cost: free.” In some circumstances, this might be what you want. But for many events, such as a committee or neighborhood meeting, it is probably unnecessary.

Leave the “repeat” field unchanged, unless you wish to set up a recurring/repeating event.

Note: If the “End” date & time is the same as the “Start,” only the “Start” date & time will be displayed.

Did this page answer all your questions? If not, please post a comment.

Recurring/repeating events

Note: At present, the repeat function is not working properly. It tends to produce multiple copies of events. A bug report has been submitted on this. This text will be removed from this page when the problem is resolved.

It is possible to create repeating events, which are extremely useful for monthly meetings. Modeled largely on the iCal RRULE standard, it is possible to define events which repeat at regular intervals (e.g. the 2nd Thursday of each month, etc.) Most SWNI committee and neighborhood association meetings can therefore take advantage of the repeat feature.

Repeating events may be perpetual, end on a certain date, or repeat for a specified number of occurrences. Exceptions to the pattern may also be defined.

To define a repeating event, it is usually best to create an event template using the date and time of the next event. Fill in all appropriate fields which are unlikely to change from one event to the next. For example the agenda for meetings usually changes from one meeting to the next, so you’ll want to leave that field empty (even if you already know the agenda for your next meeting). Once you have the template in place, it’s just a matter of editing each individual event later on with date-specific information, such as agenda; recurring information, like meeting location, is already filled in for you from the original template and requires no further entry.

Set the date and time for your next event. If the “repeat” field is collapsed (which is usually the case), you’ll need to click on it to see its options, which are: “Repeat type,” “End Settings,” “Advanced” and “Exceptions.” Set all which are appropriate, leave unchanged any which don’t apply or which you don’t understand.

Repeat type is the interval at which this event is to repeat. Options include: Daily, weekly, monthly and yearly. While these are straightforward, what is not immediately obvious is how this may be combined with the “Interval” setting under the “Advanced” section. Setting up a monthly event with an interval of 3 defines a quarterly event. Likewise a weekly event with an interval of 2 defines an event which recurs every other week.

End Settings determines when to end the recurring event schedule. You may choose to end it either on a specific date, or after a certain number of events (but not both). To define a perpetually recurring event, leave this field unchanged/undefined (i.e. the default settings).

Advanced

Interval acts like a multiplier expanding the schedule. So a weekly schedule becomes biweekly (i.e. every other week) with an interval of “2.”

Days can be used to specify a day of the week, a day of the month, etc. It has many options, so scroll through it to determine if one(s) are right for you. This field has an option to select, for example, an event which recurs the 2nd Thursday of each month.

Months can be used to specify irregular patterns. Usually you’ll leave this field unchanged/blank. With it, you could specify a pattern of events, for example, which occurs during only a few months in the year. For regularly recurring monthly events, you would normally leave this field blank (and set the “Repeat type” to “monthly.”)

Exceptions can be used to exclude certain days, months, etc. Exception dates exclude the creation of an event which is otherwise within the repeat sequence.

Final Comments

Generally speaking, multiple selections within the same parameter use an OR comparison for determining the pattern (e.g. Monday OR Tuesday OR Wednesday). Choosing multiple parameters uses an AND comparison between the parameters (e.g. on Monday AND in March). So, setting the days parameter to Monday, Wednesday – and the month parameter to July, August – would result in this comparison logic: Occurs on (Monday OR Wednesday) AND (July OR August.)

For a your typical monthly meeting, set “Repeat type” to “monthly”, “End Settings” at their default values (i.e. unset), “Interval” set to “1”, “Days” to the appropriate value (e.g. 2nd Thursday), leave “Months” and “Exceptions” unset.

Once a repeating event is defined and posted (i.e. submitted), you’ll eventually want to edit each individual event it spawns to provide date-specific information, such as the agenda, a room change, or whatever. Under the section titled Apply edit(s) to: you’ll be given three options: “This occurance only,” “This occurance and all future occurances,” or “All occurances.” In most cases, you’ll want the default of “This occurance only” as that leaves your default template unchanged. If you ever need to edit your default template, you would choose the “This occurance and all future occurances” option.

A help information page for the repeat module may be found here.

Did this page answer all your questions? If not, please post a comment.

Creating a Community or Neighborhood Website

If you want to create a Community or Neighborhood Assocation website, you should be read these sections of the FAQ:

then subscribe to the Community Webmaster’s group, and read the Home Page Prototyping Area page under that group.

Meeting minutes

There are two ways to create minutes for meetings. One way is to attach them as a comment to the meeting announcement. The other is as a standalone page of its own. The former method is perhaps quicker and easier, and has the advantage of keeping the agenda and minutes together on a single page, but the latter is perhaps the best approach as it is possible to create a dynamic archive of all the past minutes, and will show up as new content on RSS feeds.

Creating a standalone minutes page should be done using the “story” page type. If you don’t know how to create web pages on our system, read the FAQ page on Creating Web Pages. Once you create a new story page, select “minutes” from the scrolling “Topics” category list. If this is a SWNI committee or board meeting, also select the committee as a topic in addition to “minutes.” If this is a neighborhood association meeting, select the appropriate name from the scrolling “Neighborhood Association” list.

Now place the minutes themselves in the “Body” text box. If Rich-Text is enabled, you should be able to easily control formatting and other text options.

Did this page answer all your questions? If not, please post a comment.