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;...
Bad formatting is… Bad   May be visually unappealing or out of    character with the website template.   Hidden, unclose...
Working with text   You have been sent a Word doc, or an email    message with the instruction to “put it on the    websi...
Working with text   Most content management systems will have    buttons similar to these   If you have a few already, y...
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...
What does this button do?   Pick from pre-defined website template styles   HTML structure options   Font type 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 cod...
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* ...
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 t...
Pasting without formatting   Copy and Paste, then use the eraser   Copy and Paste from Word/Paste Plain Text   Copy and...
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 p...
Store the image online   If your CMS doesn’t include built in tools for    uploading, you will need to put the image    s...
Linking to files   If you need to upload a document and your    web site CMS doesn’t support uploads    conisder using Dr...
Embedding video   Finding a place to save and store video is a    challenge   YouTube is the easiest answer. Videos can ...
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> Ord...
Basic HTML tags   <b></b> or <strong></strong>   <i></i> or <em></em>   <a href=http://example.com></a>   <img src=htt...
Basic HTML tags   <b></b> or <strong></strong> Bold   <i></i> or <em></em> Italic   <a href=http://example.com></a> A L...
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
Upcoming SlideShare
Loading in...5
×

From doh to pro!

583

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
583
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

From doh to pro!

  1. 1. FROM TOPRO! Updating your district website
  2. 2. Agenda Adding content: 2 options Working with text Adding images Embedding video
  3. 3. 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
  4. 4. 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.
  5. 5. 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
  6. 6. 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
  7. 7. What does this button do? Save: Exports contents to a download New document: Clears contents of box
  8. 8. What does this button do? Bold Italic Underline Strikethrough
  9. 9. What does this button do? Left align text Center align text Right align text Full justify
  10. 10. What does this button do? Pick from pre-defined website template styles HTML structure options Font type override Font size override
  11. 11. What does this button do? Pick from pre-defined website template styles HTML structure options Font type override Font size override
  12. 12. What does this button do? Cut Copy Paste Paste as plain text Paste from Word
  13. 13. What does this button do? Find in text Find and Replace
  14. 14. What does this button do? Unordered list (optional style selection) Ordered list (optional style selection)
  15. 15. What does this button do? Outdent Indent Blockquote
  16. 16. What does this button do? Undo Redo
  17. 17. What does this button do? Link Unlink Create Anchor/Bookmark for internal menu Add image Clean up messy code Help View HTML source
  18. 18. What does this button do? Insert current date as text Insert current time as text Preview
  19. 19. What does this button do? Font color Highlight color
  20. 20. What does this button do? Insert table
  21. 21. What does this button do? Table row properties (size, colors, etc) Table cell properties
  22. 22. What does this button do? Insert row before Insert row after Delete row
  23. 23. What does this button do? Insert column before Insert column after Delete column
  24. 24. What does this button do? Split table cell Merge selected cells
  25. 25. What does this button do? Insert horizontal line (full width) Clear formatting Show/Hide invisible formatting lines
  26. 26. What does this button do? Subscript Superscript
  27. 27. What does this button do? Insert special character Insert emoticon Embed media Horizontal bar (specific width)
  28. 28. What does this button do? Print
  29. 29. What does this button do? Text left to right Text right to left
  30. 30. What does this button do? Full screen mode
  31. 31. What does this button do? New div Bring forward Move backward Absolute positioning
  32. 32. What does this button do? New div Bring forward Move backward Absolute positioning
  33. 33. What does this button do? Edit stylesheet
  34. 34. What does this button do? Edit stylesheet
  35. 35. What does this button do? Citation* (HTML tag, makes tooltip) Abbreviation* Acronym* Deletion* Insertion* Insert/Edit Attributes (Title, ID, Class, Style)
  36. 36. What does this button do? Toggle formatting characters Insert space Use template Insert page break when printing
  37. 37. What does this button do? Upload and link to file Upload and insert image These are great if you have access to them
  38. 38. 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
  39. 39. Pasting without formatting Use the HTML format drop down to re-format
  40. 40. 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
  41. 41. 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.
  42. 42. 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
  43. 43. 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.
  44. 44. Basic HTML tags <p></p> <ul>  <li></li>  <li></li> </ul> <ol>  <li></li>  <li></li> </ol>
  45. 45. 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>
  46. 46. 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”
  47. 47. 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”
  48. 48. Putting it all together From Word to Web…
  49. 49. Follow-up Questions? Jeremy Harder jharder@gomasa.org Test Editor: http://www.tinymce.com/tryit/full.php
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×