HTML - Content Over Image Slices Tutorial - Part 1

I felt the need to make this tutorial in order to properly wrap up the gap between my Photoshop lessons and my previous lessons on HTML. I explained how to properly slice up your Photoshop documents and open the html file in Dreamweaver, as well as set the background image properly and align the design. However, in this tutorial I explain how to actually insert HTML content over those sliced images!

I will be continuing my Adobe After Effects tutorials after this! So don't worry! :)

Philosophy Quote!
"Consequently he who wishes to attain to human perfection, must therefore first study Logic, next the various branches of Mathematics in their proper order, then Physics, and lastly Metaphysics."
~Maimonides

Category:

Education

Tags:

• html
• content
• over
• image
• slices
• tutorial
• part
• tutorialclarity
• graham
• castronovo
• grahamsdomain

[PHW]

I checked the Code section after opening a page up from my template, and the coding for the background isn't the new code I learned from this tutorial, it's the default one, so for some reason the pages aren't updating with the template, unless for some reason the HTML pages just can't support that particular code. I'm not sure what's going on, everytime it prompts me to update all of the pages with the status of the template, I make sure to do it.

[TutorialClarity]

I think I know what you're talking about. I'm glad you brought this up. I said in the tutorial that "for the sake of not having anybody miss anything, I'm going to allow dreamweaver to reload the document".

In your case, don't do it!! Just click "No" ever time you update and export your template images in Photoshop. Then, the important part is to manually save what you had in dreamweaver, over the one exported from Photoshop(should be the same document).

[PHW]

Thank you very much, you may have prevented me from murdering someone.

[TutorialClarity]

haha, great! (:

[Honisuckl]

the "tsh tsh tsh tsh tsh" is pretty funny. Thanks for this vid anyways.=)

[xmachineoo7]

THANKS MATE, YOUR TUTORIALS ARE REALLY GREAT ...

[rhiotronics]

looked for this for a long time. the moment i stopped and begun learning the hard part? here you are bro. i happen to think its still free will even your not sure whose it is. thanks man.

[PCHavoc]

...The table data looks different in mine, it doesn't have colspan...

[pendecho911]

Hey mate, YOU ARE A STAR!!!! You helped me a lot. I couldn't find any help with this and finally I found this video. Thanks a lot. Exactly what I was looking for : ) I was beginning to be so angry at this ; ) Thanks again

[taylormac1993]

Lovin all the people who are trashing table layouts..... If you know how to make a table layout NOT LOOK like a table layout, then what's the problem? lol

Anyway thank you so much for this video. I subbed cuz I have a ton of trouble with web design lol XD

[MrBlenderMan]

lol.... Just use divs and put another div over the other using z-indices. Dreamweaver makes it easy w/ ap-divs...

Table layouts are so 1997. D: