The document provides guidance on adding content and working with text when updating a district website. It discusses two options for adding content: uploading files and adding links to them, or copying and pasting text directly into pages. When pasting content, it is important to remove formatting to avoid issues. The document also provides information on adding images, embedding video, and using basic HTML tags.

1. FROM TO
PRO!
Updating your district website

2. Agenda
 Adding content: 2 options
 Working with text
 Adding images
 Embedding video

3. Two ways to add content
1. 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
links
2. 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. 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. 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. 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. What does this button do?
 Save: Exports contents to a download
 New document: Clears contents of box

8. What does this button do?
 Bold
 Italic
 Underline
 Strikethrough

9. What does this button do?
 Left align text
 Center align text
 Right align text
 Full justify

10. What does this button do?
 Pick from pre-defined website template styles
 HTML structure options
 Font type override
 Font size override

11. What does this button do?
 Pick from pre-defined website template styles
 HTML structure options
 Font type override
 Font size override

12. What does this button do?
 Cut
 Copy
 Paste
 Paste as plain text
 Paste from Word

13. What does this button do?
 Find in text
 Find and Replace

14. What does this button do?
 Unordered list (optional style selection)
 Ordered list (optional style selection)

15. What does this button do?
 Outdent
 Indent
 Blockquote

16. What does this button do?
 Undo
 Redo

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. What does this button do?
 Insert current date as text
 Insert current time as text
 Preview

19. What does this button do?
 Font color
 Highlight color

20. What does this button do?
 Insert table

21. What does this button do?
 Table row properties (size, colors, etc)
 Table cell properties

22. What does this button do?
 Insert row before
 Insert row after
 Delete row

23. What does this button do?
 Insert column before
 Insert column after
 Delete column

24. What does this button do?
 Split table cell
 Merge selected cells

25. What does this button do?
 Insert horizontal line (full width)
 Clear formatting
 Show/Hide invisible formatting lines

26. What does this button do?
 Subscript
 Superscript

27. What does this button do?
 Insert special character
 Insert emoticon
 Embed media
 Horizontal bar (specific width)

28. What does this button do?
 Print

29. What does this button do?
 Text left to right
 Text right to left

30. What does this button do?
 Full screen mode

31. What does this button do?
 New div
 Bring forward
 Move backward
 Absolute positioning

32. What does this button do?
 New div
 Bring forward
 Move backward
 Absolute positioning

33. What does this button do?
 Edit stylesheet

34. What does this button do?
 Edit stylesheet

35. What does this button do?
 Citation* (HTML tag, makes tooltip)
 Abbreviation*
 Acronym*
 Deletion*
 Insertion*
 Insert/Edit Attributes (Title, ID, Class, Style)

36. What does this button do?
 Toggle formatting characters
 Insert space
 Use template
 Insert page break when printing

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. 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. Pasting without formatting
 Use the HTML format drop down to re-format

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. 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. 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. 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. Basic HTML tags
 <p></p>
 <ul>
 <li></li>
 <li></li>
 </ul>
 <ol>
 <li></li>
 <li></li>
 </ol>

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. 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. 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. Putting it all together
 From Word to Web…

49. Follow-up
 Questions?
Jeremy Harder
jharder@gomasa.org
 Test Editor:
http://www.tinymce.com/tryit/full.php