All posts by w.f.

Student Websites!

GRAPH 25 Summer Websites. Take a look!

http://hills.ccsf.edu/~mjavier6

http://hills.ccsf.edu/~jusi/

hills.ccsf.edu/~rsilverm

http://hills.ccsf.edu/~cshih1/index.html

http://hills.ccsf.edu/~rphill14

http://hills.ccsf.edu/~creddig/index.html

http://hills.ccsf.edu/~rbliman

http://hills.ccsf.edu/~eganbold/

http://hills.ccsf.edu/~lma28/index.html

hills.ccsf.edu/~rcheng9

Advertisements

Last Day of Class/Final Exam/Websites Due

Uploading to Hills:

Upload your Dreamweaver website files to the CCSF Hills Web Server, where it will be *live* on the internet.

This upload process is known as file transfer protocol or ftp. FTP is a standard used to copy a file from one web host to another web host over a network, such as the Internet. We’ll be using Dreamweaver as our ftp client.

  • The file space for your Hills account is 25mb. It is accessible as long as you are taking graphics or computer classes at CCSF.
  • All links should function, images should load in a timely manner, no typos, etc. Have another person QA your website before turning it in.
  • When the website is complete, EMAIL Wendy your CCSF URL to get credit for your completed website project. eg:  hills.ccsf.edu/~your user name

Additional FTP Clients:

  • FileZilla (free, cross platform)
  • Fugu (free, part of the Mac OS X)

___________________________

Web Production Classes at CCSF:

MMSP 130 Multimedia Process and Production

___________________________

Your Files:

CCSF Computer Labs will be cleaned; ALL student files will be deleted. Please copy any exercise or project files you’d like to take home with you.
___________________________

Final Exam:

Log Off of all computers, all backpacks and bags in the floor.

You are free to go when you have completed the test.

Final Grades will be posted on engrade at the end of the month.

Enjoy the rest of the summer 🙂

Lesson 3: CSS

Continue building your 5-page website:
home, photoshop, illustrator, flash, indesign pages.
Add images, navigation, relative & absolute links and body copy.

_________________________________

Cascading Style Sheet (CSS): a Style Sheet language, consisting of formatting rules.

Most commonly contained in external .css files, style sheets can also be internal/embedded (within the tag).

Style sheets are applied to pages in the order they are found, cascading down from external to local styles.

An HTML page can have multiple CSSs, eg: screen, mobile, print.

See the website Zen Garden for examples of multiple style sheets on the same .html content.

OPEN LAB:
LESSON 2 FOLDER
Copy the “fonts.css” file into your >Dreamweaver  folder
THIS EXERCISE IS NOT FOUND IN THE READER.

  • In the CSS Panel, link to fonts.css
  • Preview in the Browser.
  • Take a few moments to look through the fonts.css details and modify them to suit your design needs.
  • Additional options for alignment: >Format >Align: _____

Links

Intro to CSS

CSS Tutorial

Homework

  • LAST DAY OF CLASS/FINAL EXAM IS THURSDAY:)

  • Study for the Final EXAM!

  • BRING A PEN TO CLASS.

  • Websites due by mid-class Thursday.


Lesson 2: Interactive Layout: Intro to Dreamweaver

“Dreamweaver Essentials” p.286-297

Adobe Dreamweaver is a web developing program known as a WYSIWYG, “what you see is what you get”. Dreamweaver automatically writes HTML code.

Open Lab:

  • Optimize your web content, saved into one Dreamweaver  Root folder. This includes all images, .swf files, and .pdfs
  • Setting up Hills account in Terminal.
    Note:
    Initial password is a combination of your birthday plus the first two initials of your user name.
    example: Wendy’s birthday is january 5, 1980,  her pw looks like :
    jan0580.wf
    •Write down your initial password AND  a NEW password that has at least 8 characters, including one numeric. Cannot be a common dictionary word!

DEFINING A SITE, pg. 289

DREAMWEAVER ESSENTIALS, pg. 290
*Start creating your 5 webpages in Dreamweaver.
*Import your content for all pages. It will be left un-styled until we add our CSS.

Links

Free FTP: Filezilla

Intro to Interactive Layout/HTML

Hypertext Markup Language, Reader pg. 254-264 and pg. 268-272

HyperText Markup Language (HTML) is the main markup language for web pages. HTML elements are the basic building-blocks of webpages.

Create a new ROOT Folder and move 2-3 web-ready images into this folder for practice.

IN CLASS EXERCISES (1)/OPEN LAB:
COPY THE “LESSON 1″ FOLDER
>HTML >READ ONLY

THIS EXERCISE IS NOT FOUND IN THE READER.

  • Coding a Basic HTML page/part 1
    1. CREATE A NEW  HTML ROOT Folder “yourname_html”
    2. You’ll be recreating the sample.pdf file.
      Don’t worry about the details such as alignment and typeface.
    3. Copy all items from the Lesson 1 folder to YOUR HTML root/source folder:
      • sample.pdf-see finished sample here
      • ccsf_logo.jpg-incorporate into index.html
      • banner.jpg-incorporate into index.html

TURN IN THE ENTIRE ROOT FOLDER TO THE DROP BOX WHEN DONE

Web Pre-production:

Create a banner in PS or AI for your website. This image will appear at the top of all your webpages.

Recommended size: 955px x 175px
>File >Save for Web…yourname_banner

Links:

How Does the Internet Work?

Make an HTML Document

HTML 4 Quicklist (tag reference)

Web Safe Colors/Online HEX Color Codes

Lesson 4: InDesign Final Project

FINAL ASSIGNMENT: PRINT SHOWCASE pg. 245-249

In Class Exercise/Open Lab

REVIEW ALL PROJECT REQUIREMENTS LISTED IN THE READER!
*See samples in th Lesson 4 Folder
Convert all your images to CMYK
Turn in the Packaged Folder AND a .pdf  document.
Name the files: “yourname_final″ or “yourname_final.pdf″

Homework:
InDesign Take-Home-Quiz
https://www.surveymonkey.com/s/5M56K6Z

InDesign Classes at CCSF:

GRPH 101A  Beginning Adobe InDesign

InDesign Lesson 3: Master Pages & Styles

Type review-
Format the content from file “review2.pdf”.
•Select an appropriate image or images.
•Use the recommended type sizes for headers, sub-heads and body copy.
•Use the proper first paragraph starters.
•Consider layout options like # of columns
_________________

Working with Master Pages & Styles,

Reader pg. 230-244

In Class Exercise/Open Lab

EXERCISE #1: EXPLORING STYLES, pg. 239-242
Use the typeface “Rockwell Extra Bold” for the Headline
See the sample file bad_album.pdf

You will be using your *own* found images from the internet for this exercise.
•Select 4 album covers (8 total) for “The Greatest Records Ever Recorded”
-AND-
“The Worst Records Ever Recorded”

•Include your artists’ name, album name, album year, and 2-3 short sentences about the album. You may want to initially put this info into Text Edit.

•You will be formatting 4 Paragraph Styles:
NAME, ALBUM, YEAR, and DESCRIPTION.

•Images should be converted to CMYK.

•Embed Images

Name it  ”your name_styles.indd” and ”your name_styles.pdf”

Turn in 2 files to the class drop box when you are done.

Links

InDesign Style Sheets Tutorial