SP16 Student URLs

LOGIN for Marymount Commons
http://commons.marymount.edu

HOW TO Marymount Commons
http://mublog.marymount.edu/MUBlog/tips-tutorials/

LEARN WORDPRESS
http://learn.wordpress.com/

WORDPRESS TUTORIALS
Lynda.com

RESOURCES
Creative Commons
http://search.creativecommons.org/

Music
http://www.royaltyfreemusic
.com/free-music-clips.html

Flash Kit
http://www.flashkit
.com/index.shtml

Inexpensive stock images
http://www.istockphoto.com
http://canstockphoto.com/
http://www.123rf.com
http://www.bigstockphoto.com

Clip art, photos,
sounds, and video clips

INSPIRATIONAL SITES
CA Interactive
http://www.commarts
.com/CA/interactive/
AIGA Loop Journal
http://loop.aiga.org/

REFERENCES
1. Web Monkey
2. Creativepro.com
3. Designinteract.com
4. http://www.wpdfd.com/
5.http://www.commarts
.com/

WRITING
Citing other Sites
Writing for the Web

DESIGNING
1. Good Sites Bad Sites
2. Layout
3. Typography
4. Color
5. Navigation

FILE FORMATS
Graphics & photos

SEARCH LISTINGS
Keywords & Description
Search engine registration

DREAMWEAVER HELP
Macrimedia Support Center
Dreamweaver Support

Tutorials
Lynda.com

In the Mac lab please be sure to only use Firefox with WordPress.

1st Class
LECTURE

COURSE INTRODUCTION
WordPress and CMS: https://theme.wordpress.com/
History: http://codex.wordpress.org/History
Jobs: http://www.wphired.com

WORDPRESS
Navigation and layout depending on purpose of website.
Setting up an account
Selecting a theme
Building a profile
Creating a previewing and publishing a new post

WordPress login: http://commons.marymount.edu
MuBlog tips and tutorials:http://commons.marymount.edu/groups/commons-support/forum

PHOTOSHOP
...Resizing and formatting images for the web

ASSIGNMENT
Due Start of 2nd Class:
1. Create WordPress blog per instructions given in class using "Marymount Twenty Thirteen" theme
2. Change the Header image to one of your own or a non-copyrighted photo – in correct proportions
3. Make post titled "MU experience" and write a paragraph about a recent experience at MU include a picture. Format a headline for your post and have the text wrap around your photograph. Keep the photograph small.
4. Create a page titled "Why this course" add copy explaining why taking GD104 and what you want to learn in this course
5. Create another post titled "Quote" add copy for a favorite quote and explain why
6. Read: 5 steps for making beautiful WordPress sites
Using Wordpress: http://learn.wordpress.com

2nd Class
LECTURE
WORDPRESS
Creating a website vs a blog - creating a static Home page
Adding pages
Creating custom menus
Changing the background and header images
Understanding the difference between posts and pages.
Formatting heads and text
Creating links
Adding images
Adding categories, tags, and excerpts
publishing a post
Turning off email option on home page

ASSIGNMENT
Due 3rd Class:
1. Gather information & items for your portfolio website
2. On your class website add a link to your Portfolio website http://commons.marymount.edu/portfolio"your last name"
3. Design a portfolio Website using the Organic Profile Theme per in class instructions that includes:

Features of Organic Portfolio theme http://organicthemes.com/theme/portfolio-theme/
Example of a portfolio theme portfolio: http://organicthemes.com/demo/portfolio/

....Turn off comments option on all pages and posts
.............Turning off comments option on home page
.............Managing comments

... On your portfolio "Home" page:
............An original "Background" photograph or illustration or copyright free image - 880 x 496 pixels - not distorted
............A "Header" logotype of your name
............Under your name logotype links to "Portfolio" "About" "Philosophy"and "Contact"
............No social media icons unless they got to your social media sites
............6 portfolio project thumbnails with a title "Heading typography"
....................A brief description from 1 - 3 sentences below the the for each image
........... The computer graphic with a slider Should NOT appear at the bottom of your home page

... Your "About" page should include:
............A brief biography or your resume
............Subhead in a color and typographically different from your text
............A small photo of your self with the copy warping around it

... Your "Philosophy" page should include:
............Your designer or artist statement: http://mudesign.net/dreamweaver/designer_statement.pdf
............Subhead in a color and typographically different from your text
............Two inspirational quotes - in typography different from the text
............Active link to a relevant website

... Your "Contact" page should include:
............A working contact form using the "Contact form 7" plugin

Go to Organic Theme support as needed

ASSIGNMENT
Due end of 4th Class:
1. Complete your portfolio site
2. Start your Ocean Exploeres site per in class instructions

4th Class
LECTURE
WORDPRESS
Selecting a theme
Using page templates
Creating custom sidebars

ASSIGNMENT
Due by end of 5th Class:
NOAA Ocean Exploration website:
Add link to your NOAA site from you class blog
Create a website using Organic Block Theme using text and images from
NOAA Ocean Exploration the Sumbmerged New World 2012
http://oceanexplorer.noaa.gov/explorations/12newworld/welcome.html
Example: http://commons.marymount.edu/bakerfinal/

All copy and images should come from the NOAA Ocean Explore website. Edit text and crop images as necessary.

Home page that includes:
... 1. Logotype header
... 2. 5 navigation tabs – Home, About, Gallery, Blog, Contact
... 3. Slider with at least 3 captioned images with links to posts
... 4. Left sidebar with 3 posts different form the slider/homepage posts each with a:
....... a. Thumbnail photograph
....... b. Headline
....... c. Text
... 5. Right sidebar with 3 widgets
....... a. Search
....... b. Recent Posts
....... c. Calendar
... 6. 3 front-page posts each with a:
....... a. Featured photograph
....... b. Headline
....... c. Text
....... d. Social media icon links
About page that includes:
... 1. Featured photograph
... 2. Headline
... 3. Smaller secondary image with text wrapping around it
... 4. Pull quote
Gallery page that includes a:
... 1. Photo gallery with captions
Contact page that includes a:
... 1. Contack form
About, Contact and Gallery page sidebar:
... 1. List of recent posts
... 2. Search box
Blog page that includes:
... 1. At least 1 relevant blog post
Extra credit - embed a NOAA YouTube video in one of your articles or the about page
Embedding videos: Scroll to the bottom of this tutorial for directions on how to add videos to your website. .....
http://learn.wordpress.com/get-flashy/

5th Class
LECTURE
WORDPRESS
Managing users
Managing comments
Managing media

PHOTOSHOP
...Duotones for the Web &..Seamless backgrounds

5th Class
ASSIGNMENT
Due by end of 5th Class:
1. Completed Ocean Explorer expidition website