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

Advertisements