1 / 17

Adding Content to the CSU Extension Webpage Template

Adding Content to the CSU Extension Webpage Template. Lesson 3 Feb 3, 2010. What goes on your pages?. Headers (headlines) Text Links (to pages, email addresses, docs) Images Bullet points Boxes for content Tables (for formatting, or tabular data). Headers. 3.

whitney-moss
Download Presentation

Adding Content to the CSU Extension Webpage Template

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adding Content to the CSU Extension Webpage Template Lesson 3 Feb 3, 2010

  2. What goes on your pages? Headers (headlines) Text Links (to pages, email addresses, docs) Images Bullet points Boxes for content Tables (for formatting, or tabular data)

  3. Headers 3 • Use “Format” in PI to change headers • <h1> through <h6> • <h2> suited for headlines within middle column • <h3> suited to headlines in right column • <h2> has 2 variations: • class=“green” • class=“grand”

  4. Text • Most will be cut-and-pasted from existing sources • CSS will convert to standardized font style, size, color for paragraphs • <p>paragraph</p> • Provides consistent “look and feel” to text across website • Use “Format” box in Property Inspector to convert text to Paragraph • Enter = paragraph break • </p><p> • Shift + Enter = line break • <br />

  5. Text links • For simple links: select text, use the Link box in the PI • Absolute (outside sites): cut-and-paste URL • Relative (your site): browse or use target icon • Email links: select text, use the mail icon • Document links: select text, browse or use target icon

  6. Embrace the Hyperlink! • Packs lots of content in a small space • Gives the end-user the option of clicking for more information, or continuing with the overview • Two good examples: • NASA Astronomy Picture of the Day • Wikipedia • The more sites you link to, and the more sites link to you, the more “Google-juice” you have

  7. Images • Images take longer to load, so use judiciously • Insert Image on the objects panel • Select Image (browse to it) • Property inspector will change to allow image manipulation • Thumbnail will appear with image size and dimensions • You’ll be prompted to add alt text • ALWAYS add alt, or descriptive, text • Text to speech browsers, or folks who have image loading turned off need it

  8. Manipulating images • Best done in outside image editor • Photoshop is industry standard • Powerful tool, fun to work with • Expensive ($125) • Steep learning curve • Adobe Elements • Basic, cheaper version of PShop ($79) • Free editors: GIMP, Pixlr, Picasa • You have some image software with your computer (MS PhotoEditor, Kodak Imaging for Windows) • Digital cameras come with basic imaging software

  9. Image size • If you have no image editing software: • Adjust size using Width/Height boxes in PI or Click-and-drag sizing boxes • Numbers in Width and Height boxes will bold to indicate a changed value • Use “Reset size” button if you don’t like what you did

  10. Other Image attributes • In PI: • Image link – put URL in “Link” box • Change alt text in “Alt” box • V-Space, H-space will add vertical and horizontal spacing in pixels • Border and alignment won’t work • Trumped by CSS • If you want to float it right – chose “right” in class • You can crop, lighten, darken, sharpen here too • Again, better done with an image editor

  11. Image types • JPEG - • supports lots of colors, longer to download, best for complex imagery • good for photos • GIF - • 256 colors (any 256, not predetermined) • Easier to download, best for large areas of flat color • Good for cartoon-ish images • PNG – • not supported by all browsers • Good for simpler graphics (NOT photos) • Better than GIF, more than 256 colors

  12. Page loading tips for images • Keep image files small • Smallest physical size • Lowest usable quality (# of colors in gifs, quality # in jpgs) • Use alt tags • Not necessary for small details (borders, bullets, etc) • Reuse images (only need one logo for all pages)

  13. Unordered lists Main column Right column Left column Use the List icon in the PI Bullet points are pre-formatted with custom images for the bullets Each column (left, main, right for a 3 column layout) has a distinct bullet point style

  14. 3rd Column List Options • List elements with class=“video” • List elements with class=“audio”

  15. Boxes To add visual emphasis Select text Add class of “box”

  16. Tables • Used for formatting content • Before CSS, the primary way to lay out a page • Building shelves for images and text • Now: build boxes within a column for content • Also used for Tabular data (e.g. precipitation over time) or columns of information (e.g. name, phone #, email address)

  17. Tables • Click Table icon in Insert panel • # of rows, # of columns • Width in pixels or % • Border thickness • Padding (within cell) • Spacing (between cells)

More Related