Dreamweaver Class Notes, Day 2...organizing the site

Building graphics in Photoshop or Fireworks
- basic size is 800 x 600, 72 ppi, rgb (remember 54% users still use windows 98- likely to have smaller screens)
- mast head should average 110 px to 165 px in depth
- some people build a site in parts, some design it in photoshop as a full view page in fireworks or photoshop (see below)
- no capital letters, no spaces, use underscore when naming files!!!
- always name your layers, it will be helpful when you import

Fireworks vs. Photoshop/Illustrator for building your site
- Fireworks "forces" you to think about the site and it's functionality from the beginning
- fireworks is both vector and bitmap, a great web app.
- Illustrator and photoshop are great for print, and can be translated over to web

Managing your website

- ideally, work out your site plan on paper (so you can draw folder boxes, etc.)
- create a site folder (usually client name)
- within the folder add 2 folders, production and images
- images are go on the web
- production are the parts used to build the site

Organizing a small site (up to 10 pages):

• - client/work folder
• images folder (live)
• production folder (creation parts, .psd, txt, ai, eps, etc)
• freefloating pages within the client folder (examples)
  
• index.html
• stylesheet.css
• services.html
• contact_us.html
• products.html
  

Organizing a large site:

• - client/work folder
• images folder (live images)
• production folder (creation parts, .psd, txt, ai, eps, etc)
• folder for tab 1
• tab1_index.html
• section1.1 folder
• section1A.html
• section1B.html
  
• section1.2 folder
• section2A.html
• section2B.html
  
• tab1_images folder
• section1 images folder
• section2 images folder
• folder for tab 2
• tab2_index.html
• section1.2 folder
• section1A.html
• section1B.html
  
• section2.2 folder
• section2A.html
• section2B.html
  
• tab2_images folder
• section1 images folder
• section2 images folder
  
• freefloating pages within the client folder (examples)
  
• index.html
• stylesheet.css
• html
• html
  

Side notes - photoshop tips
- "f" and toggle through a variety of backgrounds/windows to change your work space
- command j - duplicate the layer that you have selected
- "i" = eyedropper
- "g" - gradient
- remember that photoshop remembers what you did last time
- CS4 you can freeze part of an image in quick mask, then you can go into free transform to extend your background