Dreamweaver Class Notes, Day 2…organizing the site
December 4, 2008 at 3:15 pm Leave a comment
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
Entry filed under: dreamweaver class notes, graphics, illustrator, organizing a site, photoshop.
Trackback this post | Subscribe to the comments via RSS Feed