I need your help! Please look... comments/suggestions/help

[photoresistor]

I should let you know that I'm not that great w/ web design or photoshop... I've just dabbled in photoshop and frontpage myself a little and am trying to create a little web site for some friends.

with that said... please take a look at this picture of an early design idea:

http://www.gbaprojects.com/images/bypic.jpg

You should know that its for a punk band... thats kind of why darker colors are kinda prominent.

What do you think?


Here is my vision: on mouseover of the links at the top (news/tour/music/etc) the 'regret' above that link will glow red (using DHTML). The cell on the left will show a different picture of the band member(s) on each page...

the little pics on the top right would link to the photo section... on mouseover of each picture they would turn to normal (not inversed).

i want the main cell to be like a frame that you can scroll down (like this: http://www.fiveironfrenzy.com/news.cfm) but I'm not sure how to do that.

Any comments/suggestions/criticisms/etc... are wanted... and if you can help me out with how to implement that main cell and if you can let me know if its possible for the dhtml change picture thing to work on hot spots...?


THANKYOU!!!

[adonoghue]

I can't help you with any of your coding, but you should think about reducing the actual file size of the image.

You say you are using photoshop - which version? Version 6 onwards (might be in 5, I don't know) has the option to 'Save for Web' which dramatically cuts down the image size.

I'm only mentioning this because the indicator in the bottom right of the screen is saying it is going to take the best part of a minute to download on 28.8, and no-one is going to wait that long.

Have fun!

[photoresistor]

Thanks for the suggestions.... I haven't really taken that kinda stuff into account yet though. Right now im just trying to get the look down and the layout set. I didn't know about that save for web thing and im using photoshop 6.

thanks again... anyone else?

[photoresistor]

okay, i've figured out the main cell frame by using an iframe.

[photoresistor]

.... I've got that down...

here is a pic now:

http://www.gbaprojects.com/images/bypic.jpg

I'm also trying to get it to be a popped up window etc... by using this script generator for a pop up window on DD but its not working.


comments/suggestions/etc...? I need some feedback.

[Mr J]

What you need to use is a three frame frameset.


This will allow you to load your images into the left frame via image links in the top frame.

Your main pages would then load into the main frame.

Changing the REGRET colour can be done using CCS attributes

etc.etc

[photoresistor]

I don't really get what you mean by that 3 frame set, but thats okay i think because I think I'm just going to give that up anyways... don't know CSS... hardly any HTML either, just using Frontpage and taking some DHTML from DD using their script generators.

However, I have a new question....

The way I have it set up now:

When you move your mouse over a 'regret' it changes color to red. However, both the regret and the actual link below it ('news' 'music') are actually links... I couldn't think of how to do it another way...

If the regrets just change color but aren't links its kinda weird, isn't it?

[Mr J]

After taking a more indepth look at that website I realised that they were not using a framset.

What they were doing is loading a fixed background image that contained the photo to the left and positioned the text using tables.

You can get text to change colour by using something like this,
The link will change the colour as well:


<style>
.effect1{color:green}
.effect2{color:red}
</style>

<P>Pass your mouse over <span id="me" class="effect1" onmouseover="this.className='effect2'" onmouseout="this.className='effect1'"><b>Regret</b></span> to change to red.
<P><a href="#null" onclick="me.className='effect2'">Click To Change Regret To Red</a>




Let me have your site address I will take a look and try to create your 'Vision'

[photoresistor]

Thanks for all the help Mr J! Here is where the 'site' is at temporarily:

http://www.gbaprojects.com/BY/splash.htm

(edit: for some reason the iframe is not working in NS6... even though it says iframes should be able to. it works fine in IE)

I found out how to use an iframe for the main window and to make the scroll bar different colors... as well as make it pop up into a new window w/ certain dimensions.

How it is now is just so when you move your mouse over the reget image it changes to another image that has it in red. I couldn't figure out how to make it so when you move the mouse over the link image (like 'news') for the regret image to change. Sounds like it'd be too complicated for me...

You help is greatly appreciated... That would be awesome if you could try to create my vision for the site.

Thanks

[Mr J]

photoresistor.


I have re-written your site for you to have a look at to see if I am on the right track.

Because of the file size I have to upload 2 zips.

Download and unzip to your desktop.
Put all files in the regret2 folder into the regret1 folder and open index.htm

Let me know what you think

:confused:

:)

:thumbsup:

OR:

:mad:

[Mr J]

Here is the second zip
................

ok still too big.

theres a third one coming

[Mr J]

Right then,

all files from the three zip files should be placed in one folder, so put them all in the first regret folder.

Open index.htm

Phew!!!!

[photoresistor]

Wow... thanks for doing that a lot. I wonder how long that took you??

The links at the top are exactly how I wanted it to work.

These are just a few questions I have:

- anyway to make it fit into a smaller browser? (right now its fullscreen) Dunno what I'd do w/ all the extra space.

- If not i guess the bigger size is okay, but will it be possible to put that black texture in between the regret images?

- Is there a way to maybe put borders in between the three different sections (not sure if i'd like the look... but might)?

- I noticed you changed the second regret image. Will it not work of did you lose the other image or...?


Thats basically it. Thankyou for doing that... this forum sure has some cool people on it. Very grateful!
:thumbsup: :thumbsup:

[Mr J]

Answers to your questions:


The window is not fullscreen just the size of the screen, there is a difference.

What screen res are you using?

The window should adjust to any size screen but if screen is different to 800 X 600 then it will affect the layout.

You could change the size of the window by using


window.open('main.htm','','height=700,width=500,left=20, top=20')

This will make it a fixed size, just change the numbers


I could not find your second image so I create those just to make sure things worked.


In the source code of main.htm you will see that I have use 2 tables.

Change border=0 to border=1

I think it looks best with just the second table with borders.

I have already redone main.htm to replace the images on the left side when a link is selected.

Not 100% sure of the method thought but it does work.

There is just the top images where you want then to go from negative to normal.

It is a bit hard when you have not got the images to work with but its all part of the fun I suppose.

I'll see what I can do.


PLEASE NOTE:

The down side to all of this is that I know everything will work in Internet Explorer but I cannot guarantee it working in Netscape


:confused:

Do not throw away your original files they might come in handy!

[photoresistor]

EDIT: Here is a zip file.... same as the one you have except I've replaced the image files for ya (1, 1red, 2, 2red). I had to change the original 1 and 1red but I didn't want to overwrite them in case I would use them later so I put them in a different directory.

EDIT2: Also... do you know if there is a way to fill in the spaces in between the 'regret' images w/ that black texture that all of the images have?

http://www.gbaprojects.com/by/by.zip

Cool. My PC is set on 1024 x 768.

The url of the second regret is:

http://www.gbaprojects.com/by/images/regret/2.jpg

and the red version of it:

http://www.gbaprojects.com/by/images/regret/2red.jpg


Right now I'm just fiddling around w/ main.htm...

EDIT: You shouldn't worry that much right now about those top pics because right now those are just filler images! I don't have the actual pics I'll be using yet (friend in band hasn't sent/taken them yet).

Thanks again.

[Mr J]

OK............

First we have a problem here.......

You have your resolution set to 1024 x 768.

I have my resolution set to 800 x 600.

Don't quote me on this but I am under the impression that the norm is 800 x 600 especially here in the UK.

This means that if you design your site for your resolution and I view it on mine it will look totally ...... different.
Especially if sizes are set in percentages.

Try yours on 800 x 600 and see the difference.

Hmm ........................................... have to think that one out.


As for the spacers.

To the first table line add the following:

background="spacer.jpg"

IE:

<table border=0 width=100% background="spacer.jpg" cellpadding="0" cellspacing="0">

And put the spacer.jpg in the folder with all the other images.


See if this is sufficient.

[photoresistor]

The spacer thing works great. Everything is looking pretty good. Thanks.

I should be getting some images from the band sometime soon so I can actually put them on the top and on the side bars.

In 800x600 for my PC the images kinda look a little blurred? Or maybe thats just because of the lower resolution. Either way the window should be smaller than 800x600 so it'll fit everyone's screens.