PDA

View Full Version : Web Design Help (Dreamweaver)



Hamsmyth
3rd July 2008, 02:18 PM
Hi guys,

I'm a graphic design student and I'm currently building a personal portfolio site to showcase my design work. I have dabbled in flash but never attempted web design. I have been reading a lot and doing tutorials and have built a basic layout that I want.

Here's a shot of the 'home' page. The text will stay static the whole time except for turning grey on rollover. (blurred details)

http://i9.photobucket.com/albums/a79/tom_west86/screenshot.jpg

I've uploaded the file here:

2shared - download index.html (http://www.2shared.com/file/3536405/5f65cd56/index.html)

As you can see I have used apDivs to position the text and CSS to provide rollover effects for the text. (no idea if this is the best way to do it??)

Basically now what I need is a way to display the images in the bottom div when the user clicks on the different projects. When they select a project, the image will change as well as the description for the project. I want the images to tile off to infinity on the right and bottom.

I hope you understand what I mean.

Is this possible? If anyone can help me out or provide links to some appropriate documents/tutorials it would be much appreciated.

Cheers!

Hamsmyth
3rd July 2008, 07:49 PM
Anyone?

Hamsmyth
4th July 2008, 07:14 PM
Surely there is a web designer here?

adamd
4th July 2008, 07:42 PM
There is. I am one, but I cant quite understand what you're having a problem with.

Edit: Just read through it again. It seems what you want to do is change the content of a DIV. Yeah?

Anyway, if that is, below is your answer... also, it may be a lil difficult, as it needs to be done in code.

So, with that said, flip over to "code mode".

Anywhere between:

<head>
and

</head>

insert:

<script>
function change_content(contentoffrom){
//function (c) adamd (i3network.net)
document.getElementById('content').innerHTML=docum ent.getElementById(contentoffrom).innerHTML;
}
</script>

and then, throw this in between the:

<body>
and

</body>
tags.

<a href="javascript:void(0);" onclick="change_content('pageone');" onfocus="blur()">page one</a> | <a href="javascript:void(0);" onclick="change_content('pagetwo');" onfocus="blur()">page one</a> <!-- on this line, are two links. They change the content to what is in the 'pageone' and 'pagetwo' divs below, which are hidden, until someone clicks on one of these links.-->
<div id="content"><!--this is where your content goes... ther first bit of content/home etc-->
Welcome
</div>
<div id="hide_me" style="display: none; visibility: hidden;">
<!-- dont put anything in here, unless it's in its own div -->
<div id="pageone"><!-- when "page one" is clicked on, this is shown in the content div -->
hi there, this is page one.
</div>
<div id="pagetwo"> <!-- when "page two" is clicked on, this is shown in the content div -->
hi there, this is page two.
</div>
</div>


Now, before you start screaming, and saying this is too hard, read the comments in the code (ie <!-- this is a comment -->). They wont show up in your finished site.

If you want MANY MANY more advanced options, please email me, as I have a product known as "loadOnce" that is very innovative, and allows many more options than just a simple change of content.

muddie@mac.com
4th July 2008, 07:45 PM
The only thing here that makes what you are trying to do a little difficult is the fact that there is a text section that needs to change as well.
If it was just the picture it would be straight forward.
You can use CSS to hide and show Divs which could certainly work but at this time of a Friday night I certainly don't have the brain capacity to explain how to do it.

I think the simplest answer here and probably the best one under the circumstances (skill level etc.) is to just use a good old fashioned hyperlink to a new page.

There are no graphics at all on the top section, this will take milliseconds to load.
If you just use the "Recent Work" rollovers as hyperlinks to a new page that is laid out exactly the same way but with the appropriate description and graphic at the base then you will be achieving the same thing and the top bit will reload so quickly it will appear that you are on the same page anyway.

Just a note on the technique used to lay out the text at the top. Absolute positioning is a bit dangerous when used so prolifically. You are better off using floats with a margin to space your Divs across the page. It is also best practice to have all the CSS in an external linked file rather than in the head.

If you are after a web site with a lot of CSS tips click here (http://alistapart.com/topics/code/css/).

cmanou
4th July 2008, 07:46 PM
Ou could try adding a < iframe > to the bottom half of the page which changes when u click the links

Hamsmyth
4th July 2008, 08:12 PM
Guys,

Thanks so much for the help. I've read over it but won't have a chance to try anything until tomorrow. I'll post back with the results.

Cheers

Hamsmyth
9th July 2008, 09:39 PM
Thanks for the help fellas.

I had a fair crack at trying to get the thing working with the above tips. Ultimately I've decided this is too complex and I've just gone with a really simple front page showing my current work.

There is then links to my resume and portfolio.

For those interested: Link (http://www.hamishsmyth.com)

RobD
9th July 2008, 10:04 PM
If I can make a comment from a non-technical viewer's perspective, I think your page is too wide and fails to shrink. I notice that the width some websites expands or contracts along with the window being displayed by the viewer; others seem to have a fixed width, meaning that if the width is too great for the window, part of it is cut off and you have to use those scrolly things and get it a bit at a time - not so good. I have a new 20-inch iMac, but to see your page I had to expand the window to the full width of the screen, where it just fitted; but most people will have screens smaller than mine. I far prefer websites that use the adjustable width that expands or contacts along with the size of the window. That way you get the whole page at whatever size you like.

Does this make sense?

something2sea
9th July 2008, 10:05 PM
It's good, except it's a little wide, as on my screen I need to scroll sideways to see all the content, my screen's not that narrow either (1280px). I'd feel sorry for those people running at 1024.

Other than that, good! works well and is simple (for us in safari, but other people need to download PDFs to see them.

Bee-J
9th July 2008, 11:14 PM
It's good, except it's a little wide, as on my screen I need to scroll sideways to see all the content, my screen's not that narrow either (1280px). I'd feel sorry for those people running at 1024.

Wondering if I can borrow this response to critique my site which I'm kinda setting up for similar reasons to Hamsmyth. Are my pages too wide to be viewed comfortably?

My partially built iWeb site is HERE (http://www.benmackay.net)

something2sea
9th July 2008, 11:21 PM
Wondering if I can borrow this response to critique my site which I'm kinda setting up for similar reasons to Hamsmyth. Are my pages too wide to be viewed comfortably?

My partially built iWeb site is HERE (http://www.benmackay.net)

Yeah, they are a little bit wide.

The best way to "test" it, is to set your screen resolution to 1024 x 768 and see if it fits. That can be done in System Preferences -> Displays.

Bee-J
9th July 2008, 11:34 PM
Yeah, they are a little bit wide.

The best way to "test" it, is to set your screen resolution to 1024 x 768 and see if it fits. That can be done in System Preferences -> Displays.

Thanks for reply- and the test tip. Thankfully I don't have too many pages to go back and re-format...:(

Hamsmyth
9th July 2008, 11:43 PM
If I can make a comment from a non-technical viewer's perspective, I think your page is too wide and fails to shrink. I notice that the width some websites expands or contracts along with the window being displayed by the viewer; others seem to have a fixed width, meaning that if the width is too great for the window, part of it is cut off and you have to use those scrolly things and get it a bit at a time - not so good. I have a new 20-inch iMac, but to see your page I had to expand the window to the full width of the screen, where it just fitted; but most people will have screens smaller than mine. I far prefer websites that use the adjustable width that expands or contacts along with the size of the window. That way you get the whole page at whatever size you like.

Does this make sense?

Thanks for the comments. I am aware it's very wide, however it was intentional. It's meant to be just like a desktop with work thrown down in a random and unorganised way. The user has to interact with the site and scroll around. They can then view the work more detailed and in the PDF's.

geektechnu
9th July 2008, 11:58 PM
Thanks for the comments. I am aware it's very wide, however it was intentional. It's meant to be just like a desktop with work thrown down in a random and unorganised way. The user has to interact with the site and scroll around. They can then view the work more detailed and in the PDF's.
Then the issue to consider is that you have intentional design elements the (to the average user) appear to be "accidental design".

Users are used to scrolling vertically, but horizontally is a completely different story.
The only time most users expect that is in a spreadsheet.

If the user isn't expecting it, it will look like you've made a mistake.

Just my 2 cents.

grfxninja
10th July 2008, 12:01 AM
Then the issue to consider is that you have intentional design elements the (to the average user) appear to be "accidental design".

Users are used to scrolling vertically, but horizontally is a completely different story.
The only time most users expect that is in a spreadsheet.

If the user isn't expecting it, it will look like you've made a mistake.

Just my 2 cents.

+1 from me.
If I have to scroll sideways, I won't be going back to the site again - i.e. not the result you would be looking for.

Hamsmyth
10th July 2008, 12:06 AM
All due respects but I'm trying to do something different that stands out. Which it obviously has.

Why should all websites be down the screen? Why should I comply with that?

I'd love to have a website that just went on and on and had no links.

adamd
10th July 2008, 12:10 AM
Eljay Photography (http://eljayphotography.com.au)
Website I made for a client. Basically, they wanted something different, and side scrolling :)

prerecorded
11th July 2008, 05:11 PM
Why should all websites be down the screen? Why should I comply with that?




I completely understand your motivation behind this. I'm a designer too, I understand wanting to stand out.

The thing is, sideways scrolling is different for a reason. Even if unconsciously, it pisses users off. It makes things feel weird, you get the sense that something is broken. It engenders negative feelings in the mind of the viewer, and unless your schtick is making people uncomfortable (and judging by your work it's not, nice stuff btw), you're better off sticking to convention on this one.

Designers are the worst for abusing the web to do a bunch of annoying shit in the name of "being different". If you really want to be different, buck the trend and don't have a website!

banjo
11th July 2008, 08:50 PM
Have to agree with the side-scrolling issue here. Either have vertical scrolling, or side scrolling, but not both. Preferably neither.

The thing with the way the site is at the moment is that it seems like you couldn't be arsed making it usable. Not a major prerequisite for a graphic designer (as opposed to a web designer). However a poorly thought out website is much the same as an architect writing their résumé in crayon: it stands out, but not in a good way.