Embed Size (px)
Citation preview
Push the Portfolio Envelop Laura Yost
KCELT Dog Days 2008
Push It How?Push It Why?
Flexibility!Creativity!
Adaptability!Transfer-ability!
Working Backwards: What to Put In?
Possible “Digital” Portfolio Artifacts:
1. WORD documents2. PPT presentations3. Photos/scanned images4. PDFs5. Screen captures6. Videos (teaching demo)
• = .doc• = .ppt• Photoshop• Cute PDF • Gadwin • Videotapes
The Basics: How to Begin I
• use a white background• create variation with HTML• punctuate with graphics• make standardized format/content
The Basics: How to Begin II
• Programs: FlashPeak BlazeFtp• Accessories: Notepad• Viewing 1: View → Source• Viewing 2: File →Open→ Browse
The Basics: How to Begin II
• Programs: FlashPeak BlazeFtp• Accessories: Notepad• Viewing 1: View → Source• Viewing 2: File →Open→ Browse
HTML – The On-line Language
• HTML (Hyper Text Markup Language)• Basic building block of any on-line page• # online code generators/tutorials
HTML – The Basics of Code
• HTML is a mirrored code: most commands/ tags need a match (front & back)
<B>bold</B>
<U>underline</U>
<A HREF=“http://www.cnn.com”>cnn.com</A>
<I>italicize</I>
<CENTER>centered!</CENTER>
• . . . they also need two sets of quotes
<IMG SRC=“my_favorite_picture.gif”>
• Some instances do not need a match to work
<BR> <P>
<IMG SRC=“buddha.gif”>
Some General Issues . . .• To CAPITALIZE your code or not?• Keep it clear & clean; it’s easier to decipher!• Organize images, documents, etc.• If it doesn’t work, look for common mistakes!
HTML – The Basics of Code
#1: No Need To Reinvent the Wheel!
There is a lot you can learn & borrow from existing websites . . .
#2: Give Your Font Some Style
Types Face & Sizing
<font size="2">Times New Roman</font>
<font size="5" face="Verdana">Verdana!</font>
<font size="2" face="Verdana" Color="Red" >Verdana!</font>
Font Coloring
<font size="2" face="Verdana" Color=“Pink” >Verdana!</font>
<font size="2" face="Courier">Courier!</font>
#3: Link to a Document
#4: Link to Code or a Website
<A HREF=“http://www.kirkwood.edu”>Kirkwood Community College</A>
<A HREF=“http://syllabus_info.html”>syllabus</A>
<A HREF=“Fall_intro.doc”>Fall Syllabus!</A>
Click HERE for your Fall Syllabus!
<A HREF=“KCELT.pdf”>KCELT</A> (PDF)
#5 & #6: Working with Pictures
1. Most images can be copied2. Cautious of copyrights3. RIGHT click loaded image4. “Save Picture As”
• I MUST have that!
• I MADE that!
<IMG SRC=“casa.jpg”>
<IMG SRC=“head.gif”>
Additional Picture Information
• How do I link an image? LINK + IMAGE
<A HREF=“http://www.cnn.com”> +
<IMG SRC=“ikebana.gif”> + </A>
I am linked now! But I will ALWAYS have a
border!
<IMG SRC=“ikebana.gif” BORDER=“0”>
<IMG SRC=“ikebana.gif” BORDER=“2”>OR
#7: Integrate ALT Rollovers
• In order to provide additional information• Useful for the sight-impaired
<IMG SRC=“brochure.jpg” ALT=“This brochure featuresa piece of gold artwork from
an ancient civilization in SouthAmerica. The exhibit Americas
In Antiquity is at the ChicagoField Museum.” >
#8: Organize With Internal Links
• Straightforward presentation of information• Prevents constant scrolling
<a href="javascript:void(self.location='#begin')">Click Here to Begin</A> |
<a href="javascript:void(self.location='#end')">Skip to End of Exercise</A>
Click Here to Begin | Skip to End of Exercise
<A NAME=“begin">Start Here!</A>
• I want to wrap text, create cool layouts!
<TABLE BORDER=1><TR><TD>Content</TD></TR><TR><TD>Content</TD></TR> </TABLE>
• TR = table rows, as many as you want!• TD = in the rows, as many as you want!• You can insert images, text, colors in the TD
#9: Create Some Structure with Tables
Content
Content
Structure & More with Tables
Dissecting Table Design = Tables within tables!It can get very complex = flexibility!
#10: Design a Graphic & Insert It
• Use Adobe Photoshop (request to add)• Create a graphic (photo, button, title)• “Save for Web”• Use the “.JPG” or the “.GIF” ending
The Essence of HTML Code Basics
1. Borrow some code!2. Give your font style3. Link to a document4. Link to another website5. Include a picture – that’s not yours6. Include a picture – that’s yours7. Integrate ALT “rollovers” 8. Create “structure” with tables9. Design a graphic & insert it!
EASY
HARD
#8: Organize With Internal Links
