Sample Ideas

Deconstruction is a method of learning how parts fit together

  1. 10 min - Deconstruct
    1. What dreamweaver layout would you use for the layout
    2. Identify the Divs that would make up the template?
      1. For each div determine
        1. Width (may determine widths of final background artwork)
        2. Background color or image
          1. Placement of image
        3. Content within (navigation, titles, text, copyright symbols etc)
  2. 20 min - Recreate a similar NEW website (created in a subfolder called web1_grouppopquiz2) Only put the final website in one of your root folders – if you want to share the files and add them to each members root later, and on your own time that would be helpful to you later.
    1. Duplicate the layout
      1. Title the template web1_grouppopquiz2
        1. Don’t forget the css
          1. css: new folder and file named web1_grouppopquiz2
          2. change a minimum of 3 rules to match the screenshot
        2. Editable region/s – what’s a good name for these regions?
        3. Content (if it goes on every page it should be on your template)
          1. Navigation
            1. Insert a table
          2. Insert names without active links
        4. Original Images
          1. Create original large PSD
            1. store these files OUTSIDE of the root folder
        5. Image folder
          1. will ONLY include low res internet final images
      2. Create an index.html page from your template
        1. title with group member names (first name and role, first name and role, first name and role…)
      3. Upload web1_grouppopquiz2 folder
      4. Print screenshot of your live comp (index.html – title must include all your group member names)
        1. Print out css file, circle all that you edited or added  (printout at 8 pts font)
        2. Put group member names at top of page
  3. 10 min- Typed summary of group members contributions (who did what)
  4. 5 min - Staple 3 section packet together in this order
    1. Site screenshot printout (20 points)
    2. Summary of group members participation (up to 20 points)
    3. css printout w changes (10 points)

Sample Idea 1

to top

Sample Idea 2

to top

Sample Idea 3

to top

Sample Idea 4

to top

Sample Idea 5

to top

Sample Idea 6

to top

Sample Idea 7

to top

Sample Idea 8

to top

Sample Idea 9

NOTE: This image does not exist, so although the code is set up for an image, the area is left blank. Look at the code and analyze the pattern.

  1. All my images are 500 pixels wide, when I captured the images I saved them with a naming convention titling each idea followed by a number.
  2. When I opened the images in PhotoShop, I was able to resize (smaller never larger) all but idea9.
  3. In dreamweaver, I inserted the first image, then I copied and pasted the assicated code about a dozen times.
    1. Then all I had to do was change the html code accordingly
      1. title in the H2
      2. revise the image name's number.

PROBLEM: While copying and pasting code and using a good naming convention, I still ended up with this missing image.

SOLUTION: The next time I capture images, I will just add a idea9.jpg image to my files panel, and then upload the image. The gaping hole is NOT my only reminder. I keep a running list of to-dos.

to top

Sample Idea 10

to top

Sample Idea 11

to top

Sample Idea - simplicity at it's core

to top

Sample Idea 1

to top