Difference between revisions of "Class:Digital Portfolio 2015/Week 4"

From wiki.mpsdigitalphoto.com
Jump to navigation Jump to search
(Created page with "== Last Week == == This Week == * Image Processing & Image Renaming Tricks * Divs & Spans -vs- classes & ID's * CSS Floats * CSS Normalized * CSS Position * CSS Offset * C...")
 
Line 32: Line 32:
 
: Direct link to download [http://www.russellbrown.com/images/tips_downloads/Services_Installer_2.3.1.zip right here].
 
: Direct link to download [http://www.russellbrown.com/images/tips_downloads/Services_Installer_2.3.1.zip right here].
  
 +
=== Clearing your CSS Slate Before' You Start ===
  
 +
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
 +
 +
* [http://stackoverflow.com/questions/6887336/what-is-the-difference-between-normalize-css-and-reset-css What is the difference between Normalize.css and Reset CSS?]
 +
* The [http://meyerweb.com/eric/tools/css/reset/ Reset CSS]
 +
* The [http://necolas.github.io/normalize.css/ Normalize CSS]
 +
 +
=== CSS Cheat Sheet ===
 +
 +
; Spans and divs are TAGS
 +
: Just like <h1>, <img>, <ul>
 +
 +
; All tags can optionally have attributes of type class or ID
 +
: <div class="header"> is styled in CSS using .header
 +
: <div id="header"> is styled in CSS using #header
 +
: <h1 class="highlight"> is styled in CSS using .highlight
 +
 +
=== CSS Floats ===
 +
 +
* [http://alistapart.com/article/css-floats-101 CSS Floats 101]
 +
* [http://www.w3schools.com/css/css_float.asp CSS Float] at w3schools.com
 +
 +
=== CSS Positioning ===
 +
 +
* [http://www.w3schools.com/css/css_positioning.asp CSS Positioning] at w3schools.com
 +
* [http://www.barelyfitz.com/screencast/html-training/css/positioning/ Learn CSS Positioning in Ten Steps]
 +
 +
=== CSS Overflow ===
 +
 +
* [http://www.w3schools.com/cssref/pr_pos_overflow.asp CSS overflow Property] at w3schools.com
 +
* [http://css-tricks.com/the-css-overflow-property/ The CSS Overflow Property]
 +
 +
=== The CSS Box Model ===
 +
 +
* [http://www.w3schools.com/css/css_boxmodel.asp CSS Box Model] at w3schools.com
 +
* [http://css-tricks.com/the-css-box-model/ The CSS Box Model]
 
=== CSS Background Images ===
 
=== CSS Background Images ===
  

Revision as of 21:29, 28 May 2015

Last Week

This Week

  • Image Processing & Image Renaming Tricks
  • Divs & Spans -vs- classes & ID's
  • CSS Floats
  • CSS Normalized
  • CSS Position
  • CSS Offset
  • CSS Sliding Gallery
  • CSS Web Fonts
  • CSS Background Images
  • Tips for styling HTML headers

Notes

Image Processing & Image Renaming Tricks

In class we discussed a few different solutions for streamlining a photographers batch processing needs.

I have updated the Handy Utilities reference page for you here.

A Better Finder Rename (http://www.publicspace.net/ABetterFinderRename/)
Insanely quick and useful way to rename files and folders.
Trial download available from the website, also available in the Mac App Store here.
Dr (Russell) Brown's Image Processor Pro (http://www.russellbrown.com/scripts.html)
Fantastic image processing extension for Photoshop/Bridge
Direct link to download right here.

Clearing your CSS Slate Before' You Start

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

CSS Cheat Sheet

Spans and divs are TAGS
Just like <h1>, <img>, <ul>
All tags can optionally have attributes of type class or ID
<div class="header"> is styled in CSS using .header
<div id="header"> is styled in CSS using #header
<h1 class="highlight"> is styled in CSS using .highlight

CSS Floats

CSS Positioning

CSS Overflow

The CSS Box Model

CSS Background Images

Video Notes

Section A

Section B

Files

Assignment

If you did not complete the codecademy.com assignment from last week, please do.
Review as many photo portfolio websites and themes as you can.
Study how they are broken down.
Study how the sections (photography) is organized.
Outline (written, on paper) what the goal of your website is.
Are you building a website for your thesis only?
Are you building your new professional site and featuring your thesis?
Wireframe (sketch) your website sections and your main navigation
Gather Content
Images
About Me / Contact Me - should be one page imho.
How will you link to (or feature) friends?
Blog?
Twitter?
Newslist Signup?
Instagram?
Retrieved from "http://wiki.mpsdigitalphoto.com/index.php?title=Class:Digital_Portfolio_2015/Week_4&oldid=271"