Logical steps to approach Project 1

The .psd file (jewelry_alternative.psd) and .html file (skeleton_jewelry.html), that go along with the packet passed out today can be found in the Class Folders "project1" folder. You are welcome to use them if you like.

1. PLANNING: SKETCH, AND USE IN CONJUNCTION WITH IMAGEREADY SLICING
   
   The first step would be laying out the project in Photoshop, but this was already done in this case. I would recommend that after you have your layout nailed down, you do the slicing in ImageReady. Remember large areas of space should be "sliced out" as these areas will be replaced with spacer.gif's. If you do use ImageReady for this initial documentation of your table layout, please do a "print screen" and turn in to me each of your page layouts. Please see page 1 of the handout packet from 3/1/04 for an example of slices made for the Jewelry page:
   
   http://courses.wccnet.org/~tnielsen/project1/placeholder/slices.jpg
   
   From the slices, you can easily see exact dimensions for each of the images that will be included. Please draw out your sketch accordingly. See the sketch example for the Jewelry page shown on the second page of the packet passed out on 3/1/04:
   
   http://courses.wccnet.org/~tnielsen/project1/placeholder/sketch.jpg
   
   For each page in your site, create a separate .psd. Even if the layout seems identical, it is good practice to just have separate .psd files for separate pages. NOTE: this does not mean that you should be using separate versions of common images (such as the navigation and logo). This would be redundant and unnecessary - always re-use the images you have if they exist on multiple pages.
   
   
   MORE PLANNING: DIRECTORY STRUCTURE TREE
   
   Given the files and folders you have to work with, figure out a logical directory structure diagram. In our case, you may refer to:
   
   http://courses.wccnet.org/~tnielsen/project1/p1.pdf
   
   as an example of how you might organize your files and folders.
   
   
2. PAGE PREPARATION SKELETON LAYOUT TABLES -- INSTEAD OF USING PLACEHOLDERS...
   
   a) First make sure you have the dimensions recorded from your ImageReady sliced files, and make a sketch.
   
   b) Next, create a "skeleton table". This means, create your table in Dreamweaver, but hold off on placing images (or placeholders for that matter) just assign the width and height attributes for each table cell (for the nested tables as well as the main table). Please see page 3 of the handout packet from 3/1/04. Or click this link and print it out:
   
   http://courses.wccnet.org/~tnielsen/project1/placeholder/skeleton.gif
   
   c) Once you have your skeleton table, set the Vertical Alignment for your table cells to Top (in code that would be <tr valign="top">). After selecting an entire row in Dreamweaver, you can simply choose Top in the Vert menu (lower left are of Properties pallette). See the last page of your packet from 3/1/04:
   
   http://courses.wccnet.org/~tnielsen/project1/placeholder/skeleton_valign.gif
   
   Now your skeleton table is ready and waiting for the images you will create in ImageReady.
   
   
   
   
3. PAGE PREPARATION: SAVE VARIOUS PAGES
   
   Save the HTML page for the About Us layout as index.html, for the See Jewelry page, jewelry.html, the FAQ page, faq.html, and the Contact page contact.html. There is an example of a Layout Table made with placeholders in the Class Folders for the Jewelry page, called table_placeholders_jewelry.htm. This matches the slices of jewelry.psd, which is also in the Class Folders (You are welcome to use either of these files if you need to. Of course then you must create the other pages, but you can can work from these).
   
   
4. ACTION BEGINS: GENERATING IMAGES: SET UP ROLLOVER IMAGES IN IMAGEREADY, AND EXPORT SLICES. Go back to your original ImageReady file (project.psd), and get your Rollovers working.
   
   *** Suggestion: Put your pearls that make the over-states in a separate layer set.
   
   To make rollovers:
   
   1. Make sure none of the navigation slices have their rollover slices visible.
   2. Go to the 'about' slice in the rollover/web content pallette.
   3. Add a rollover state (bottom of pallette, looks like new page).
   4. Select the rollover state.
   5. Make visible the pearl underline.
   6. Click back on the non-rollover-state.
   7. Repeat steps 2-6 for all of the rest of the navigation slices.
      
   This will give us our navigation pre-rollover and rollover states. In addition to this, we want to also make sure the slices we need (i.e. logo, header images) are all named with proper optimization settings.
   
   
5. TEST PAGE TO MAKE SURE ROLLOVERS WORK. "SAVE OPTIMIZED AS..." FOR HTML AND IMAGES. BUT WE WILL NOT USE IMAGEREADY'S HTML...
   
   Even though we optimized this page for HTML, we will never use the project1.html page that ImageReady generated. In contrast, we created this page for the sole purpose of ImageReady's generating the rollover images. ImageReady automatically created:
   
   • an images folder that everyone needs anyway, right? Be careful not to create   redundant images folders - In ImageReady, always save images only outside the  images folder. ImageReady automatically puts them into the images folder... (Confusing, I know!!)
     
   • rollover states for the navigation... we now have 'about-over', 'jewelry-over', etc.
   
   The difference now is that we will use Dreamweaver for rollovers now. It is much more elegant than ImageReady-generated rollovers, that is why I highly recommend making this change.
   
   
6. BEGIN CREATING YOUR 'BASE PAGE'
   
   Once you have all of your rollovers working, you are ready to create your 'Base Page'. The "Base Page" is just a template that you will swap out various page elements. This is the page where:
   
• All of the rollovers work.
• All of the images have Alt text.
• The page is titled "project1.html"

Instead of using the ImageReady-Generated HTML page, like before, this time we are going to create another file called project1.html (overwriting the ImageReady one). To do this:

1. Create a mini navigational table that we will copy and paste, and nest inside of each of the four pages. The table should be the width of your navigational elements, with 1 column, 4 rows, 0 cellpadding, 0 cellspacing.
2. Insert your pre-rollover images in the table in the correct order - about, jewelry, faq, contact.
   
3. Add Alt text to each of these images.
   
4. Have the: About Us button linked to index.html; See Jewelry linked to jewelry.html; FAQ linked to faq.html; Contact linked to contact.html.
   
   
7. ADD DREAMWEAVER ROLLOVERS TO THE 'BASE PAGE'
   
   1. Select your about.gif image.
   2. Go to Window>Behaviors
   3. Click on the "+". Select Swap Image.
   4. Browse for 'about-over.gif'.
   5. Select it, and press 'Okay'.
      
8. NOW COPY AND PASTE THE SMALL TABLE INTO EACH OF YOUR INDIVIDUAL LAYOUTS (FROM STEP 2). First delete the original table, then paste the table from project1.html into each layout.
   
   
9. 'MARK' EACH PAGE APPROPRIATELY SO USER KNOWS WHICH PAGE THEY'RE ON.
   
   Switch the image to the over state, and remove the link for the page the user will be on. For instance, the index page woold have about-over.gif instead of about.gif, and there will be no link.
   
   
10. INSERT TEXT found in the project1 folder in the Class Folders (for pages other than the Jewelry page).
    
    
11. For the Jewelry page, you will need to follow instructions found at: http://courses.wccnet.org/~tnielsen/project1/popup.htm OR http://courses.wccnet.org/~tnielsen/project1/popup.htm
    
    
12. FOR FAQ'S PAGE: See http://www.pearlstrings.com/flash/faq.html for an example.