• home
  • forum
  • my
  • kt
  • download
  • Slicing Part 2

    Author: 2007-07-24 19:26:05 From:

    Slicing Part 2


    Now that you have your layout sliced it's time to put it back togather. For this task we will use Dreamweaver. If you havent done Pt. 1 and still want to follow along download the images Here.
    Open up dreamweaver. First press File -> New and click ok. Now that you have a blank
    canvas to work on, create your first table. Apply the setting pictured to the left. We found
    out the width of the table by checking the width of our layout in photoshop.
    Time to create a seccond table to hold the body of your layout. Click on the middle row
    of your table and click the add new table button again. This time set Rows to 1 and Columns
    to 5, than press ok. You should now have something that looks like the picture to the left.  
    Now it's time to put your images into the tables. You should know where each image goes
    . For the 2 'burned canvas' type images we will set them as BG, that way we can write over
    top of them. To do this instead of using the add image button use the set as BG box Now your layout may look out of place but we will fix that in a sec.

    We need to now set the width and heights of each cell. The easiest way to do this is, click
    on slice 1, look in the width/height box write down the numbers, or just memorize them. Now press the right arrow on the direction pad, the fields should go blank, fill them in with the numbers you just wrote down.

    Now you ask, what about the 2 canvas pictures, they don't have a height and a width, well for these you need to find out the settings in photoshop. The smaller canvas is 152x416 and the bigger one is 537x416. Once you have all the widths and heights defined the slices should fall into place.
    Now this was just a simple example to show you how people slice their sites when using
    tables. Alot of people use CSS nowadays so they might not agree with this method, but it's
    still around. I did not show you how to define a site here, or tile images which you should
    look into to optimize your site to the fullest. But this tutorial should give you the basic idea
    on how to get your site web ready.

    discuss this topic to forum

    relation tutorial

    No relevant information

    New

    Hot