Contents
- TITLE
- HEADER IMAGE
- BODY (EDIT SUMMARY)
- PAGE COMPONENTS
TITLE
The Title is both the page title (e.g. "Page Elements”), the internal Content title and the source of a default automatic URL alias (e.g. “/page-elements”).
HEADER IMAGE
A page header image is optional and recommended for most most webpages. It is an effective visual to introduce a page. See the image at the top of this page. Notice that the page name is inserted into the bottom margin of a header image.
The stated size is 2000 x 400 pixels. However, on most laptops and PC monitors, only the middle 1600 pixels will be displayed. On narrower screens such as mobile phones, only the middle 400 or so pixels will be displayed. Therefore, the middle of the image should be meaningful. The header image for this page when viewed from different platforms gives an indication of the number of pixels displayed.
BODY (EDIT SUMMARY)
Text with an Arresting Image Centered
An image width of 900 to 1200 pixels is recommended.
Alternatively, a custom background image can be uploaded which will span the whole page including all of the rich text.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper.
Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo.
Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.
Text and image right-adjusted without a caption
Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
- Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
- Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
Text and image right-adjusted with a caption
Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
- Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt
Text and image with a background
The Background Color is Light Blue.
Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt,
- Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet.
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
- Duis non efficitur nisi, id malesuada justo.
- Maecenas sagittis felis ac sagittis semper.
- Aenean tincidunt lectus auctor
- Tortor elementum, varius
Embedded YouTube
YouTube, width="560" height="315" caption
Paragraph Format Options and Recommendations
Normal - use for most text
Normal with size increased, for example to 18
Normal with size increased, for example to 16 and the color changed to black
Heading 1 - page title; may also be used within the body, often with the color changed
Heading 2 - major page division, often centered
Heading 3 - use for most of section headers
Heading 4 - occasional use for subsection headers
Bold - An Alternate Header Option with size increased, for example to 20
Heading 5 - An option for image captions. An alternative to the builtin image caption which has limited editing.
Heading 6 - used for the "Updated by ..." at the bottom right of the page; may also be used for footnotes.
Formatted: rarely used - an example of the "formatted" format. Entering <return> will not create paragraph spacing, just a new line.
Image Management
In Photoshop Elements, use "Image/Resize/Image Size..." to establish the desired pixel width and height. Then use "Save for Web..." to render the smallest download size that will display clearly.
A free app such as http://gimp.org is an alternative to Photoshop.
You may also use Image Optimizer to prepare images for the web. Specify "Quality: Normal", and the desired Max Width & Max Height in pixels.
- Download sizes of around 100 - 500 KB are best and give good resolution on computer displays.
- Download sizes above 1MB take longer to download to a web browser and do not render with better resolution.
- Individuals with slower internet connections will find a web page unresponsive if the image sizes are not adjusted to 100 - 500 KB beforehand.