WRA 210:MODULE 3 &PORTFOLIOSESSION 2: 9.4.13

STUFF TO REMEMBER• Do the readings. It helps, seriously.

• Ask questions. It’s OK to interrupt me (not others).

• Don’t not ask for help. Help is helpful.

• I want you to do well - bother me often.

• Practice, practice, sleep, practice.

And most importantly,

Don’t be scared to try something new.

AGENDA• Introduction to Module 3 (Due 9/11)

• Troubleshoot

• Introduce portfolio

• Brainstorm questions about portfolio

• Overview of basic HTML tags

• Activity: setting up your course page (again)

REMINDERS

Course website has all the information!

• John-lauckner.com/wra210/• Agendas• PowerPoints

Check your email

SEMESTER PROJECTS• Focus on the portfolio

• Orderly, logical fashion:

1. Research

2. Design

3. Build• Beginning tonight: portfolio research

1. I will describe function and purpose

2. You will research portfolios (module 3)

HTML REMINDERS• Modify your course webpage with HTML

• Remember, you compose mark up for the browser. You do this already in Microsoft Word, but you don’t see the markup (bold, italic, headings, etc.)

• Example: Your brain sees this

• <h1> This is a header </h1>• Your browser sees this and displays this:

• This is a header

BRAINSTORM QUESTIONS

ACTIVITY: SET UP COURSE PAGES• Download the template (if you haven’t already)

• Save it to the Desktop• Open a plain text editor

• PC: Notepad++• Mac: TextWrangler

• Open the file

NEXT: MAIN PAGE TITLE <H1>

• Return to your text editor

• Page headers: h1 (biggest) to h6 (smallest)

• Change to something appropriate

• text only• can match your <title>

• Save immediately

NEXT: COPYRIGHT STATEMENT• Paragraph text - all types of text

• Notice the copyright symbol &copy;

• Change the text to something appropriate

• Save immediately

NEXT: LIST OF MODULE LINKS• Lists keep related things organized

• Two types of lists:

• Ordered lists <ol></ol>• Unordered lists <ul></ul>

• Lists contain as many items as you need

• List items go between list tags<ol>

<li>This is the first list item</li>

<li>This is the second list item</li>

</ol>

NEXT: EDIT LIST OF LINKS• Remove second list item (it's an example)

• Look at the first

• It's a list item with a link inside!• Leave the text "Link to Module 1" where it is

• Change the link properties

• the "href" property tells the link where to go• change the "href" property to point to your Module 1 Work

document (should be module1.doc)• Save your work

SEE YOUR PAGE IN ACTION• Go back to your browser

• Click "refresh" (circle with an arrow)

• You should now see all changes

• Try the link

• Why doesn't it work?

USE FTP TO SEND FILE TO AFS• Rename document to "index.html”

• Fire up Filezilla

• Connect it to your AFS space

• Transfer file from your desktop to your "web" folder

• Should now have two files - index.html and module1.doc

• Load your page: http://msu.edu/~yournetid

FOR NEXT WEEK• Start Module 3 right away (due 9/11)

• Read:

• The Big Four: Contrast, Repetition, Alignment, and Proximity (pdf)

• CRAP: The Four Principles of Sound Design