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