From doh to pro!

739 views

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
739
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
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

×