• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
From doh to pro!
 

From doh to pro!

on

  • 630 views

 

Statistics

Views

Total Views
630
Views on SlideShare
630
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    From doh to pro! From doh to pro! Presentation Transcript

    • FROM TOPRO! Updating your district website
    • Agenda Adding content: 2 options Working with text Adding images Embedding video
    • Two ways to add content1. Upload the file and add a link  Pros: Quick and easy; Document retains formatting; Reader can download and edit  Cons: Not very search friendly; More work for the reader; Edits require re-uploading, could affect links2. Copy and paste the text into a page  Pros: Search friendly; Reader can quickly scan for important information; More “sustainable”  Cons: Longer set up; Formatting a pain
    • Bad formatting is… Bad May be visually unappealing or out of character with the website template. Hidden, unclosed code can cause malfunctions throughout the entire website. Formatting on top of bad formatting only makes it uglier. Clearing the pasted format is important.
    • Working with text You have been sent a Word doc, or an email message with the instruction to “put it on the website” What happens when you cut and paste? Example Flyer Example Result
    • Working with text Most content management systems will have buttons similar to these If you have a few already, your web admin can enable any of these features
    • What does this button do? Save: Exports contents to a download New document: Clears contents of box
    • What does this button do? Bold Italic Underline Strikethrough
    • What does this button do? Left align text Center align text Right align text Full justify
    • What does this button do? Pick from pre-defined website template styles HTML structure options Font type override Font size override
    • What does this button do? Pick from pre-defined website template styles HTML structure options Font type override Font size override
    • What does this button do? Cut Copy Paste Paste as plain text Paste from Word
    • What does this button do? Find in text Find and Replace
    • What does this button do? Unordered list (optional style selection) Ordered list (optional style selection)
    • What does this button do? Outdent Indent Blockquote
    • What does this button do? Undo Redo
    • What does this button do? Link Unlink Create Anchor/Bookmark for internal menu Add image Clean up messy code Help View HTML source
    • What does this button do? Insert current date as text Insert current time as text Preview
    • What does this button do? Font color Highlight color
    • What does this button do? Insert table
    • What does this button do? Table row properties (size, colors, etc) Table cell properties
    • What does this button do? Insert row before Insert row after Delete row
    • What does this button do? Insert column before Insert column after Delete column
    • What does this button do? Split table cell Merge selected cells
    • What does this button do? Insert horizontal line (full width) Clear formatting Show/Hide invisible formatting lines
    • What does this button do? Subscript Superscript
    • What does this button do? Insert special character Insert emoticon Embed media Horizontal bar (specific width)
    • What does this button do? Print
    • What does this button do? Text left to right Text right to left
    • What does this button do? Full screen mode
    • What does this button do? New div Bring forward Move backward Absolute positioning
    • What does this button do? New div Bring forward Move backward Absolute positioning
    • What does this button do? Edit stylesheet
    • What does this button do? Edit stylesheet
    • What does this button do? Citation* (HTML tag, makes tooltip) Abbreviation* Acronym* Deletion* Insertion* Insert/Edit Attributes (Title, ID, Class, Style)
    • What does this button do? Toggle formatting characters Insert space Use template Insert page break when printing
    • What does this button do? Upload and link to file Upload and insert image These are great if you have access to them
    • Pasting without formatting Copy and Paste, then use the eraser Copy and Paste from Word/Paste Plain Text Copy and paste into Notepad, re-copy and paste into editor
    • Pasting without formatting Use the HTML format drop down to re-format
    • Working with images Your have a word doc with images… but how do you get them on the web? Download Jing! A free program that let’s you select part of your screen and save it as a picture file
    • Store the image online If your CMS doesn’t include built in tools for uploading, you will need to put the image somewhere online where you can get a direct URL. Get the URL by right-clicking on an image and choose “Copy image URL” Press the “insert image” button and paste the image URL Start a Flickr account if you need to upload images.
    • Linking to files If you need to upload a document and your web site CMS doesn’t support uploads conisder using Dropbox. A new account gets 2GB of storage for free. Put the documents in the Public folder and get the URL to paste into your link
    • Embedding video Finding a place to save and store video is a challenge YouTube is the easiest answer. Videos can be uploaded with some privacy settings. Use the “embed” script provided by YouTube.
    • Basic HTML tags <p></p> <ul>  <li></li>  <li></li> </ul> <ol>  <li></li>  <li></li> </ol>
    • Basic HTML tags <p></p> Paragraph <ul> Unordered List  <li></li> List Item  <li></li> </ul> <ol> Ordered List  <li></li> List Item  <li></li> </ol>
    • Basic HTML tags <b></b> or <strong></strong> <i></i> or <em></em> <a href=http://example.com></a> <img src=http://example.com/1.jpg /> <div></div> <span></span> Style=“something”
    • Basic HTML tags <b></b> or <strong></strong> Bold <i></i> or <em></em> Italic <a href=http://example.com></a> A Link <img src=http://example.com/1.jpg /> An Image <div></div> A box with formatting <span></span> A section with formatting Style=“something”
    • Putting it all together From Word to Web…
    • Follow-up Questions? Jeremy Harder jharder@gomasa.org Test Editor: http://www.tinymce.com/tryit/full.php