Web Style Guidelines

This paragraph is the "description" of the page - a quick summary. The description can be displayed as part of the folder that holds the page, so it's a good idea to use it whenever possible to introduce the page.

Banner Images
Banner Text

 

Jump to Information About: Text  |  Images  |  Video  |  More

Working with Text (psst, this is a Heading)

If you have a parenthetical point to get across that's not as "important" as your main content, the "Discreet" style makes a good choice.

Did you know that the "Pull-quote" style can be applied to a paragraph to make it look like this?

The default "Paragraph Style" is used for all main paragraphs on the page. In general, it's a good idea to break up large ideas into smaller chunks when writing and styling content for the web.

What about links? If you add a link in your paragraph, avoid simply saying "click here" since this provides no context of where the link goes to someone who is quickly scanning the page. A better approach would be to make the link text descriptive like this: Return to IT Homepage.

Use Subheadings

By the way, this is the "discreet" style again!

When you have several points to get across that are part of a larger idea, use the subheading style to name each one. Bullet points are also useful to:

  • Separate short ideas
  • Make a quick to scan list
  • Enumerate steps in a process

 

Time for Another Heading: Images

Alemany Library
IT is located in the first floor of Alemany Library

When you place an image on a page in plone, you'll see that the "caption" checkbox defaults to being ON now. The caption that will automatically display under the image is the "description" that's added to the image when it's uploaded. If you would like a specific caption for an image, just let IT know when we upload the image and we'll add it to the description so it shows up.

Aligning Images

  • Floated on the right side of the page (that's how the image of the library is placed above...)
  • Floated on the left side of the page
  • Placed "inline". This means they will not have any text on either side of the image. (That's how the image banner is set up at the top. Also, it's in a table with the same background color, so it stretches to fit the page width. Ask IT if you want to do that and we'll help set it up.)

You set the right/left/inline option when you place the image on your page. Make a mistake? Just delete the image from the page and replace it the way you want.

Organizing lots of images

  • When you simply want an image mixed in with your text here or there, just place it and float it right, left, or inline. But if you have lots of images, make sure you leave enough text around each one so that things wrap correctly.
  • Did you know you can set a folder to display images as a gallery? This is the way to go if you're only showing images, and not concerned with text.

 

How about Video?

 

The video above was uploaded to youtube and then embedded on this page. This is a great way to post video, since your viewers don't have to leave your page to see the video. To learn how to do this, ask IT. We're happy to help!

 

Contact Us for More Information

This is a simple style guideline page that can help in getting a few ideas for how to organize web content. However, there are many more options (anchors, tables, multiple pages) available that we're happy to show you about in person if you're a web editor for this site. Please feel free to contact us.

Email

webmaster@dominican.edu

 

 

Sample Portlet
Questions about formatting?
415-257-0123
webmaster


This is a sample "side portlet". It is used for content that you want to appear on an entire section of the website. Its content should not change over time, since editors cannot access the portlet directly for edits like they can for the main body content.

 
© 2008 Dominican University of California
50 Acacia Avenue   San Rafael, CA   94901   1-415-457-4440   1-888-323-6763
Have a general question? Email: chilly@dominican.edu   |   Website feedback: webmaster@dominican.edu
Powered by Plone