DIV Tutorial No Slices!!!

Programs Used: [b:4c8f1dc6db]Adobe Photoshop
Macromedia Dreamweaver[/b:4c8f1dc6db]


For those of you who have attempted to make an overlay using slices and have not succeeded, here is a way to do the same thing, without the slices.

Firstly, if you do not have the programs needed to complete this tutorial you can download a trial version of each program here:

[url]http://www.adobe.com[/url]

This tutorial is accompanied by images which will help you understand what is going on. Please click on the URLs to see the images.

[b:4c8f1dc6db]Step One[/b:4c8f1dc6db]

You need to open Adobe Photoshop and create a new document. You will make the document 800px wide and 1000px high. (You can change the measurements at your discretion anytime)

[url]http://img93.imageshack.us/img93/7467/2qr3.gif[/url]

You will need to fill your 1st layer with a gradient or color. (Because we are using layers, you can change this at any time)

[url]http://img93.imageshack.us/img93/9712/3nn3.gif[/url]


[b:4c8f1dc6db]Step Two[/b:4c8f1dc6db]

You will need an image of yourself seeing as how this is your myspace page. So go to File>Open and find an image of yourself that you would like to use.

Once you have opened your image, you can crop or alter it as you like.
*Note that if you need to crop your photo you must do it before you paste it to your overlay.

Once you have done that you will need to copy the image and paste it on your overlay.

[url]http://img176.imageshack.us/img176/6171/4rh9.gif[/url]

Then you will position your image anywhere you want on your overlay.

[b:4c8f1dc6db]Step Three[/b:4c8f1dc6db]

Now that we have an image we need to create some links.
To do this you will need to use the text tool. You will create a text area where you want your links. (You can always move them if you want)

[url]http://img176.imageshack.us/img176/6561/5uw8.gif[/url]

The only link that you absolutely have to have on your page is a “Block” button. However you can add as many links as you wish.

Now that you have your links you can alter your text and place them anywhere you want on your page.

[b:4c8f1dc6db]Step Four[/b:4c8f1dc6db]

Now here is the point at which you need to make up your mind where you want to place things on your page.
Some examples of what I mean include: a music player, a video, other photos, your comments, your friend space, and any text about yourself.
These are just examples of things that you can place on your page later on, and you should decide where you want everything to go now.

This step is something that I do to organize my page, though it is optional.
It is always recommended that you have information about yourself on your myspace page, so I like to use scroll boxes to do this.
We will add the scroll boxes to the code later on but for now you can create a placeholder for where you will position the scroll boxes.

To do this all you need to do is use the box tool and make a box. Place it anywhere you want on your page and that is where we will put the scroll box later.

[url]http://img149.imageshack.us/img149/8615/6hu2.gif[/url]

Make as many as you like and keep in mind the information that you will want to put in the scroll boxes.

[b:4c8f1dc6db]Step Five[/b:4c8f1dc6db]

I like to have a special place for my friends on my page so we are going to make a friend space. If you don’t want a friend space, feel free to skip ahead to the next step.

First, you are going to create a new document which will serve as your standard size for the images of your friends. I am making mine 100px by 100px.

[url]http://img294.imageshack.us/img294/9118/7nt8.gif[/url]

Now you will need to either have access to a photo of your friends saved on your computer or to their myspace page so you can copy a photo and paste.
You will either open their photo on your computer and copy/paste it to your new document, or you can find their photo online and copy/paste it to the document.

Once you have your image pasted you will need to resize it to fit in your square so that you can see your friend’s face.
[url]http://img294.imageshack.us/my.php?image=8ag0.gif[/url]

Once that is finished, I always crop the image to fit inside the document, because though you can not see it there are leftovers around your image that could possibly transfer to your overlay.

You will now copy/paste your image to your overlay.

[url]http://img176.imageshack.us/img176/8940/9ip6.gif[/url]

Repeat this step for all of your friends and then place them on the page where you want them keeping in mind that you will want to put other objects on your page later.

[url]http://img157.imageshack.us/img157/3017/10ak6.gif[/url]

[b:4c8f1dc6db]Step Six[/b:4c8f1dc6db]

Ok, so your overlay should look somewhat like what you want with the exception of things that we will add later on.

All we are going to do in this step is save our overlay. You will need to save it for web which will make it an html document.

Incase you wish to change this later, save as a Photoshop document as well.

Once you have done that, close Photoshop!

Open Macromedia Dreamweaver.

[b:4c8f1dc6db]Step Seven[/b:4c8f1dc6db]

Click on the open folder and open your html document.

[url]http://img152.imageshack.us/img152/9522/11cp8.gif[/url]

Now we are going to use something called “hotspots.” This feature allows you to pinpoint areas on the overlay where you would like to put links. This means that all of the text and friend pictures that we placed earlier can be linked to other places.

At the bottom of the screen you will see the “hotspot” selectors. Click on the triangle shaped one. (You will need to click on the overlay so that the adjustment tools are visible.)

[url]http://img85.imageshack.us/img85/1639/12qa6.gif[/url]

Now you will draw a box around every thing that you want to link.

[url]http://img85.imageshack.us/img85/6387/13qw4.gif[/url]

Once you have completed this you will need to click on each box that you made and put a link in for them. You can do this at the bottom of the screen.

[url]http://img85.imageshack.us/img85/7480/14xa0.gif[/url]


Once you have done this for all of your links you will need to save your document, and leave Dreamweaver open

[b:4c8f1dc6db]Step Eight[/b:4c8f1dc6db]

Now that you have your overlay linked and saved you can start setting up your myspace page.

First you will need to delete everything on your profile. Go to Edit Profile and delete all of your information in each section. Make sure that all of the sections are blank.

Once you have done that you will need to paste this code into your “About me” section:

[code:1:4c8f1dc6db]<style type="text/css">
.Main { position:absolute; left:50%; top:125px; width:800px; z-index:1; margin-left:-400px; padding:0px; border:0px; background-color:transparent;} </style>[/code:1:4c8f1dc6db]

And this one in your “I’d Like to Meet” section:

[code:1:4c8f1dc6db]
<DIV class="Main"> <table style="width:800px; height:600px; border:2px solid silver; background-color:ffffff;" cellpadding="0" cellspacing="0"> <tr> <td valign="top">All of your content goes in here, whether it be tables, flash, or whatever!</td> </tr> </table> </DIV>[/code:1:4c8f1dc6db]

Once you have that finished save your profile.

Sometimes if you have a lot of comments they will stick out of the bottom of your profile so I put this in to hide them.

[code:1:4c8f1dc6db]
<div style="position:relative; height:400px; overflow:hidden; border:0px;"><table><tr><td><table><tr><td>[/code:1:4c8f1dc6db]

And since you did a customized friend space you will need this code to hide your friends.

[code:1:4c8f1dc6db]<style type="text/css">
td.text td.text table table table,
td.text td.text table br,
td.text td.text table
.orangetext15,
td.text td.text .redlink,
td.text td.text span.btext {display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td,
td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:inline;}
.rid br {display:none;}
</style>[/code:1:4c8f1dc6db]

Save your profile.

It should look like this

[url]http://img167.imageshack.us/img167/4512/15cg6.gif[/url]

[b:4c8f1dc6db]Step Nine[/b:4c8f1dc6db]

Now to put your overlay on this blank canvas you will need to do two things.

Go to Dreamweaver and look at your code.

[url]http://img242.imageshack.us/img242/1931/16ge4.gif[/url]

Copy/paste this in your code here…

[url]http://img167.imageshack.us/img167/5228/17sb3.gif[/url]

Save your profile.

Now you will need to upload your image to a website and paste the URL into the code for your page. To do this you can use several sites but the one below is free.

[url]http://www.imageshack.us[/url]

Browse for your image and in the same folder where you saved your html document there should be a folder labeled images, inside is the image of your overlay. Click on it and hit “host it”.

[url]http://img242.imageshack.us/img242/756/18fo5.gif[/url]

Now you will Copy/Paste the URL to the image into your code. The URL that you need is the very last one.

[url]http://img218.imageshack.us/img218/249/19wd1.gif[/url]

Once you have that copied you will need to paste it here.

[url]http://img174.imageshack.us/img174/9933/20bb2.gif[/url]

Save your profile, and view it. Make sure that all of your links work and it looks like you want it.

[b:4c8f1dc6db]Step Ten[/b:4c8f1dc6db]

Ok your profile should look like you want it now, but there are some things missing, right? You want people to see your comments maybe or a music player. Well now you can place anything you want on your overlay as long as you put the codes in the correct places.

If you want to put your comments on the page you can use this code. Put it in your overlay codes at the very end.

For more help with comments in a overlay please see this tutorial [u:4c8f1dc6db]here[/u:4c8f1dc6db]

[code:1:4c8f1dc6db]<div style="position:absolute; left:212px; top:442px; width:229px; height:211px; background-color:000000; overflow:auto; z-index:2; border="0"> <center><table><tr><td><table><tr><td>[/code:1:4c8f1dc6db]

And this one goes directly after your overlay codes.

[code:1:4c8f1dc6db]<div class="comt"><table><tbody><td><table>[/code:1:4c8f1dc6db]

Now you can change the position and things to put it wherever you want.

The first thing I usually place on my page somewhere is a scroll box with information about me and my page in it. This will make your page personal, which is really what Myspace is for.
Here is the code for this

[code:1:4c8f1dc6db]<div style="position:absolute; top:0px; left:0px; overflow:auto;width:200;height:200; color:silver; font-size:9pt; font-weight:bold; font-family:arial; text-align:center; background-color:black; background-image: url(URL_TO_IMAGE); background-position:center; background-repeat:no-repeat; border:2px solid silver;">Text or Image</div>[/code:1:4c8f1dc6db]

*you should change the parameters to suit your page.*

Another thing that I like to do is change my page background color and fonts. To do this I would go here

[url]http://www.strikefile.com/myspace[/url]

Or you can certainly use the Mygen Profile Editor here

[url]http://www.mygen.co.uk/index.php?page=create[/url]

You can everything that you want and then Copy/Paste the code into the “Interest” section on your profile editor.

For music players here are some sites that have good players.

[url]http://www.myflashfetish.com[/url]

[url]http://www.mygen.co.uk[/url]

Just position them anywhere on your page that you want.

I hope that this tutorial was helpful to you, if you have any questions or comments please post them below. Thank You.


*If the code for your comments doesn't work please try these codes*
also see this tutorial[u:4c8f1dc6db] here[/u:4c8f1dc6db] for more help with comments in a overlay.

Put this in Style tags:

[code:1:4c8f1dc6db]
{ Hide Friends }
td.text td.text table table table, td.text td.text table br, td.text td.text table .orangetext15, td.text td.text .redlink, td.text td.text span.btext {display:none;}
td.text td.text table {background-color:transparent;}
td.text td.text table td, td.text td.text table {height:0;padding:0;border:0;}
td.text td.text table table td {padding:3;}
td.text td.text table table br {display:block;}[/code:1:4c8f1dc6db]

This in About Me:

[code:1:4c8f1dc6db].comt {
visibility:visible; position:absolute; left:50%; top:880px; overflow:auto; width:1030px; height:400px;
border:4px ridge; border-color:006666;
margin-top:800px; margin-left:-500px; background-color:transparent; z-index:5;
}
.comt span, .comt b {color:ffffff; visibility:visible !important; display:block; }
.comt table { width:700px; }
.comt table table { width:0px; }
.blacktext10 { width:800px; display:inline; }
.comt a, .comt font, .comt span { visibility:visible; } [/code:1:4c8f1dc6db]

and this at the end of your Meet Section (after your DIV codes)

[code:1:4c8f1dc6db]<div class="comt"><table><tbody><tr><td><table> [/code:1:4c8f1dc6db]

© 2004-2017 MyGen.co.uk. All rights reserved.
MyGen v2.6 - 137315249 Unique Visitors
This page was created in 1.026 seconds
Privacy Policy

eXTReMe Tracker