Jump to content


Photo
* * * * - 2 votes

The Ultimate Layout Slicing and Coding Guide!


  • Please log in to reply
109 replies to this topic

#1 Faken

Faken

    Pimpmaster G

  • Admin
  • 5,966 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 10 July 2005 - 07:40 PM

Welcome to the official Ultimate Layout Slicing and Coding Guide official support forum.

Posted Image

After over 80 hours of writing, taking screenshots and finally designing a website to host this tutorial, the Ultimate Slicing Guide is finally released and ready for viewing! For those of you that missed this, I have been working on the largest online tutorial ever created on how to manually slice a layout with Corel Photopaint (Or any other graphics program) and then code it into an HTML page in Dreamweaver.

You can check out this HUGE tutorial (Over 60MB in screenshots and samples) at http://www.slicingguide.com (The entire website is 1 tutorial!) and learn how to slice a complicated layout by hand and completely code it using Dreamweaver! You'll never have your content boxes screwing up your site everytime they get too long or scratch your head on how to tile gradients.

The tutorial will show you how to:
  • Create a slicing Strategy Guide
  • Manually slice a layout with minimal image size
  • Correct images for your layout
  • Completely code your images to a webpage with Dreamweaver
  • Create expanding content boxes
  • Deal with tiling gradient backgrounds
  • Stack tables to format your layout
  • Apply techniques to any tutorial you slice
  • Insert and pad text and images properly
  • Organize your images and html documents
  • Much more!
You'll never need another slicing tutorial ever again after reading this complete guide, so check it out now!

Please use this thread to post any questions or comments you may have! Otherwise, hope you enjoy the tutorial!

Faken

#2 ThaBirdman

ThaBirdman

    Pidgeon Trainer

  • Twodded Staff
  • PipPipPipPip
  • 1,541 posts
  • Location:Connecticut, US

Posted 11 July 2005 - 10:08 PM

Okay....holy crap....this is the coolest thing ever!!! GREAT WORK cant WAIT to get started!

The site kinda scared me at first, a lot of information all of a sudden, but lookin at it for a second cleared everything up. WOW.....just....WOW

:bowtofaken:


great stuff dude, i cant say that enuf


---and congrats to Griffin again! awesome layout man!

#3 /quit

/quit

    P2L Che

  • Members
  • PipPipPipPip
  • 1,016 posts
  • Gender:Male
  • Location:New Hampshire

Posted 11 July 2005 - 10:20 PM

Is there any fast and painless way to convert the final products code to css or is that a stupid question?

#4 Jaymz

Jaymz

    Retired P2L Staff

  • Members
  • PipPipPipPip
  • 4,104 posts

Posted 11 July 2005 - 10:23 PM

Lesson 14 - Final Notes and Support
Find out how to get help or leave comments on this tutorial, and find out whop's behind this madness!


Donna missed a typo :P

#5 Faken

Faken

    Pimpmaster G

  • Admin
  • 5,966 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 11 July 2005 - 10:25 PM

Lesson 14 - Final Notes and Support
Find out how to get help or leave comments on this tutorial, and find out whop's behind this madness!


Donna missed a typo ;)

Fixed :P

Faken

#6 Donna

Donna

    Retired P2L Queen!

  • P2L Staff
  • PipPipPipPip
  • 12,330 posts
  • Gender:Female
  • Location:B.C Canada

Posted 11 July 2005 - 10:28 PM

Lesson 14 - Final Notes and Support
Find out how to get help or leave comments on this tutorial, and find out whop's behind this madness!


Donna missed a typo ;)

My eyes were going so buggy at the end, so yes I probably have missed some thats what young fresh eye balls are for :P

#7 ludwigw

ludwigw

    P2L Jedi

  • Members
  • PipPipPip
  • 823 posts
  • Gender:Male
  • Interests:Designer at Lee ter Wal.

Posted 11 July 2005 - 11:00 PM

It's good but I dunno if it's good enough for P2L :P


Well done Faken!

#8 raenef

raenef

    Code Enforcer

  • Members
  • PipPipPip
  • 540 posts
  • Location:Battle Creek, Michigan
  • Interests:Web Development and Graphic Design

Posted 11 July 2005 - 11:13 PM

Excellent work! *applauds* The best tutorial on slicing ever. :P

#9 Wingslave

Wingslave

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 12 July 2005 - 04:38 AM

Hello,

Is that possible to download the tut in a pdf file ?

Or will you do that ?

Thanks

WIngslave ;)

#10 syndrome

syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 12 July 2005 - 12:47 PM

I dont know whether this is supposed to be like this but in lesson 9-10 there seems to be a lot of images missing, its says like figure 9.3 about the faint line in the red cirlce and i cant see an image. (there are a lot more i just picked that 1)

im in FF btw does that make a difference?

#11 Faken

Faken

    Pimpmaster G

  • Admin
  • 5,966 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 12 July 2005 - 12:51 PM

I dont know whether this is supposed to be like this but in lesson 9-10 there seems to be a lot of images missing, its says like figure 9.3 about the faint line in the red cirlce and i cant see an image. (there are a lot more i just picked that 1)

im in FF btw does that make a difference?

All the images are fine... there;s a small description error, but the image is there... 9.4 is the one with the line. Tested and works fine in FF. Mayb clear your cache?

Anyhow, fixing that error..

Faken

#12 scizor

scizor

    Young Padawan

  • Members
  • Pip
  • 48 posts
  • Gender:Male

Posted 12 July 2005 - 12:52 PM

Worked fine for me.
Brilliant tut Dan.;)
I can finally make my website and thousands of goes.

#13 syndrome

syndrome

    P2L patient #4819

  • Twodded Staff
  • PipPipPipPip
  • 1,311 posts
  • Location:Nottingham, UK
  • Interests:Photoshop, Tennis, PS2, web design, CS:S

Posted 12 July 2005 - 01:20 PM

I dont know whether this is supposed to be like this but in lesson 9-10 there seems to be a lot of images missing, its says like figure 9.3 about the faint line in the red cirlce and i cant see an image. (there are a lot more i just picked that 1)

im in FF btw does that make a difference?

All the images are fine... there;s a small description error, but the image is there... 9.4 is the one with the line. Tested and works fine in FF. Mayb clear your cache?

Anyhow, fixing that error..

Faken

erm iv tried FF cleared cache, tried IE and cleared cache but no joy, would screenshots help?

#14 HybridMedia

HybridMedia

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 13 July 2005 - 12:54 AM

Hello Faken,

I must say brilliant tutorial, I have been searching for something this in depth for probably the last year or two. Well I am slicing the layout you provided and I am currently stuck. Everything was going perfect until I ran into this mess. I have finished doing the left content area, and started on the main content area to the right, and after finishing my right content area it seemed to mess up my left content area, just below the first content box on the left content area section. Below I have provided a link to view my progress. Thanks in Advance for all your help.

Progress: www.hybridmed.net/Slice/index3.html

Download My Files in Use: http://www.hybridmed.net/Slice/

Thanks,
Taylor Leach
Hybrid Media

#15 skandalouz

skandalouz

    Young Padawan

  • Members
  • Pip
  • 35 posts

Posted 13 July 2005 - 07:00 AM

:blink: uhm i got a few questions, sorry if i just didnt pay attention :D

when i create a table in dreamweaver, it doesnt place it at the top. it places it one break down.

Posted Image

second, when i split my table with a background image, the background image doesnt stay the same:

original:
Posted Image

after splitting:
Posted Image


and third, after i set the vertical size to 100%, it shows it correcly in dreamweaver, but not in my browser! :(

help!




edit: nvm it worked after copying your source code. weird it was the same only in a different shape :P

Edited by skandalouz, 13 July 2005 - 08:17 AM.


#16 Dambo

Dambo

    Young Padawan

  • Members
  • Pip
  • 1 posts

Posted 13 July 2005 - 07:31 AM

Hi . I registered here after reading this AWESOME TUTORIAL about slicing...I laready know how to slice ,but I was shocked how much effort u had to put into that.

BIG THUMBS UP !!!

great and very helpfull job u did !

#17 Faken

Faken

    Pimpmaster G

  • Admin
  • 5,966 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 13 July 2005 - 08:22 AM

Hello Faken,

I must say brilliant tutorial, I have been searching for something this in depth for probably the last year or two. Well I am slicing the layout you provided and I am currently stuck. Everything was going perfect until I ran into this mess. I have finished doing the left content area, and started on the main content area to the right, and after finishing my right content area it seemed to mess up my left content area, just below the first content box on the left content area section. Below I have provided a link to view my progress. Thanks in Advance for all your help.

Progress: www.hybridmed.net/Slice/index3.html

Download My Files in Use: http://www.hybridmed.net/Slice/

Thanks,
Taylor Leach
Hybrid Media

Ok your problem is simple :) Back in Lesson 11a you create a table with two cells - one for your left column, and one for you right column (See Fig 11a.3). Now you did that all fine, but you made a booboo in Lesson 11b. If you scroll down to Fig 11b.24, that's there you paste additional copies of the first left column content box you made.

Here's the problem: You have to paste that content box under the first, but in the same table (The table you created in 11a.3). In your case, you pasted it under the table. That's why you have that huge gap under the first content box.

So just move the second and third content boxes you created into that main table that holds all the content boxes and you're all set.

Faken

#18 Faken

Faken

    Pimpmaster G

  • Admin
  • 5,966 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 13 July 2005 - 08:27 AM

:hi: uhm i got a few questions, sorry if i just didnt pay attention :)

when i create a table in dreamweaver, it doesnt place it at the top. it places it one break down.

Posted Image

second, when i split my table with a background image, the background image doesnt stay the same:

original:
Posted Image

after splitting:
Posted Image


and third, after i set the vertical size to 100%, it shows it correcly in dreamweaver, but not in my browser! :(

help!




edit: nvm it worked after copying your source code. weird it was the same only in a different shape :)

Well you seem to be skipping steps... gotta make sure you read the entire tutorial or you get issues like this ;)

For your first problem, it's because you didn't set your margins as per the instructions in Lesson 4.

For your second issue, it's because you set the image as the background for the cell, not for the table. Click inside the table then remove the background image you have set in the properties box. Then click on the tag to highlight the entire table and set the background in the table property box.

Your third issue is probably the same problem as #1.

Faken

#19 Faken

Faken

    Pimpmaster G

  • Admin
  • 5,966 posts
  • Gender:Male
  • Location:Montreal, Canada

Posted 13 July 2005 - 08:29 AM

Hi . I registered here after reading this AWESOME TUTORIAL about slicing...I laready know how to slice ,but I was shocked how much effort u had to put into that.

BIG THUMBS UP !!!

great and very helpfull job u did !

Thanks man :) Glad you joined!

Faken

#20 skandalouz

skandalouz

    Young Padawan

  • Members
  • Pip
  • 35 posts

Posted 13 July 2005 - 09:36 AM

oh damn gj me looking like an idiot lol. thanks for helping me out!

oh figured why i missed it, im using a diff version of dreamweaver, looks a little different. oh well

Edited by skandalouz, 13 July 2005 - 09:39 AM.





1 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users


    Google (1)