Forum: web design and graphics community

Celestial Star Forum > Art Boards > Tutorials > Celestial Star Tutorials > Iframe Layout II

Pages: [1] 2

« previous next »

Author

Topic: Iframe Layout II (Read 2672 times)

Melfina

Administrator
Valkyrie Randgris

Posts: 1285

Iframe Layout II

« on: December 14, 2004, 01:00:00 AM »

Description: The second part of the Iframe layout tutorial containing the coding.
Tutorial URL: http://celestial-star.net/tutorials/37-iframe-layout-ii/

You may comment this tutorial here or ask for help.


	Logged

MySpace ~ MySpace Codex ~ Rune Nifelheim

Rina78

Angeling

Posts: 1

Re: Iframe Layout II

« Reply #1 on: July 22, 2007, 04:52:19 PM »

Where is the slice tool? All I see is the crop tool


	Logged

Melfina

Administrator
Valkyrie Randgris

Posts: 1285

Re: Iframe Layout II

« Reply #2 on: August 14, 2007, 03:28:56 PM »

I guess it may depend on the program version you're using. On Photoshop 7.0 it's right next to the crop tool.


	Logged

MySpace ~ MySpace Codex ~ Rune Nifelheim

thepinkpunk

Skogul

Posts: 26

I'm d best damn thing dat ur eyes hav ever seen

Re: Iframe Layout II

« Reply #3 on: January 30, 2008, 05:02:27 AM »

when i replace the codes it don't look right. what should i do?


	Logged

Hugz n' Kizses,
MGF

solitaryinsanity

Angeling

Posts: 1

Re: Iframe Layout II

« Reply #4 on: March 05, 2008, 03:08:55 PM »

Is there any way that this part and the first part of the tutorial can be translated into GIMP because I'm not sure how to do the slicing part on GIMP.


	Logged

MaiaH

Angeling

Posts: 2

Im a newbiE

Re: Iframe Layout II

« Reply #5 on: April 04, 2008, 04:37:31 AM »

what if the navigations are part of the image..?

i really wanna learn...

juz lyk my image..? http://i31.tinypic.com/2s7fm2o.gif

thnx for sharing though...


« Last Edit: April 04, 2008, 08:12:02 AM by MaiaH »	Logged

I Love My Siggy!

katie-kate

Incubus

Posts: 74

Re: Iframe Layout II

« Reply #6 on: April 04, 2008, 09:37:58 AM »

If the navigation is part of your image, you'll need to use image maps. There are tutorials out there, but they'll basically tell you the same thing: either use ImageReady, or find some other way to do it. I'm not a fan of ImageReady, so I use a different method.

Go here: http://www.draac.com/imagemap/main1.html. They have a simple tutorial and have something that can help generate the coordinates for your image map. Hope that's helpful. If you need help, feel free to PM me.


	Logged

MaiaH

Angeling

Posts: 2

Im a newbiE

Re: Iframe Layout II

« Reply #7 on: April 04, 2008, 04:03:23 PM »

Thankyou for the reply...

I know how to image map, my prob is wer to insert the map codes..?
and that if ill click the links, it wont open to new window...


	Logged

I Love My Siggy!

katie-kate

Incubus

Posts: 74

Re: Iframe Layout II

« Reply #8 on: April 06, 2008, 02:28:40 PM »

I usually put the first part of the map code between the <head> </head> tags, and then usemap goes in the part of the code that puts the image in the layout [slice_01.jpg, etc].

If you want a link to open in a new window, you'll need to target it, like this:
<a href="http://url.com" target="_blank">text here</a>. Using target="_blank" will open the link in a new window. You'll need to target your links if you ever have an IFrame layout that uses two IFrames, also; for example, if you have one IFrame for navigation and one for your content, you'll need to target them to open in the content IFrame.

Hope that helps!


	Logged

Nuriko

Angeling

Posts: 3

Re: Iframe Layout II

« Reply #9 on: April 13, 2008, 07:27:41 PM »

Hi,

Thanks for the great tutorial!
I've a question regarding the placement for the links, if I use the code provided I get a looks like this:
http://img157.imageshack.us/img157/450/bild2pm2.png
Without the link placement it looks fine

Any ideas why?

And how to get a background for the browser (which is white?) >-<


	Logged

katie-kate

Incubus

Posts: 74

Re: Iframe Layout II

« Reply #10 on: April 13, 2008, 08:53:14 PM »

You might need to edit your CSS to get the links to look right, but I can't be sure without looking at your coding.

As far as the background color, that can easily be edited with CSS. Add this to your CSS:
body {background: #hex code here;}

That will change the background color from white to whatever color you input.


	Logged

Nuriko

Angeling

Posts: 3

Re: Iframe Layout II

« Reply #11 on: April 14, 2008, 04:42:19 AM »

Quote from: katie-kate on April 13, 2008, 08:53:14 PM

Thank you for your help!
Unfortunately I'm a real beginner XD so I don't know anything about CSS yet (I only followed the tutorial).
If someone could help me

...

==
This is the slice/code which should get replaced T___T because the navigation links should get on that particular slice.

<td colspan="3">
<img src="Bilder/index_07.jpg" width="455" height="34" alt=""></td>
==

The code without navigation is this one: Click!
Which is fine.

The code with the replaced code (from the tutorial is this one:
Click!


	Logged

katie-kate

Incubus

Posts: 74

Re: Iframe Layout II

« Reply #12 on: April 14, 2008, 10:30:35 AM »

I think what you'll need is a second IFrame for your content. So, instead of
<img src="Bilder/index_07.jpg" width="455" height="34" alt="">
put
<iframe id=nav name=nav src="nav.html" frameborder=0 width=455 height=34></iframe>

You'll then need to make another page called nav.html with all your links in it.

What program do you use to make your designs? I know with Photoshop you can pick colors with the eyedropper, but I don't know about any other program. The colors you pick will have a six-digit hex code that defines them and can be used to style the font, links, background color, etc.


	Logged

Nuriko

Angeling

Posts: 3

Re: Iframe Layout II

« Reply #13 on: April 14, 2008, 03:39:17 PM »

Quote from: katie-kate on April 14, 2008, 10:30:35 AM

Thank you so much for your help

!
It worked out right now...

Hm, I use Photoshop and after that something called Taco (for Mac OS X).
And since it was my first time doing a website/layout I only blindly followed the tutorial ^^

Again, thanks so much for your kind help~
Here's a screenie to the layout I was able to do with your help ^^
http://img377.imageshack.us/img377/5957/bild3dv4.png


	Logged

katie-kate

Incubus

Posts: 74

Re: Iframe Layout II

« Reply #14 on: April 14, 2008, 08:55:25 PM »

Very cool layout!

If you want to change your font, its color, size, etc, that's what you'd use CSS for. If you need help with that, feel free to ask, I'd be glad to help.


	Logged

Pages: [1] 2

« previous next »

Jump to:

Forum: web design and graphics community

General

Art boards

Web development

Off-topic