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

Advertisements

Entry filed under: dreamweaver class notes, graphics, illustrator, organizing a site, photoshop.

Dreamweaver Class Notes, Day 2…Fireworks & Dreamweaver – making a background Dreamweaver Class Notes, Day 2…Building a site from parts in Dreamweaver

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


December 2008
M T W T F S S
« Nov   Jan »
1234567
891011121314
15161718192021
22232425262728
293031  

archives

flickr photos

Pages

blog stats

  • 15,951 hits

%d bloggers like this: