How to make a web layout functional?

[robodesign]

You can do it in several ways:
1. Using Dreamweaver or any what you see is what you get web site editor [WYIWYG html editor]. This is for beginners.
2. Using Flash - not recommended.
3. Using Notepad or any text editor. If you are a guru :).

All these techniques imply that you first have to make slices out of your interface design from Photoshop. That means, you have to capture/save the portions of your interface design elements into different files: buttons, headers, etc. You can do this manually or by using a semi-automated tool like ImageReady.

You have to pay attention to how you slice the interface. It all depends on the design you made. The way you slice the interface depends on which technique you want to use for coding the web site, the slices may differ from a Flash website, to a HTML site. Further more, the slices may differ when choosing between using a HTML Table based layout or a CSS layout. I strongly recommend you a CSS layout.

Good luck.

[stylEmon]

i usually design in PS, then take over to imageready to make slices and buttons. Then clean up the HTML in dreamweaver.

[trancor]

well, from my years of experiance, text links made out of images is a bad idea, you have one person at 800 by 600 and another at 1920 by 1640 or what ever the hell it is, that image is going to be the same 100 by 100 pixles on the 800 by 600 as it is on the 1920 by what ever. Not a good idea.

People with big reses and people with small will adjust their font in their browser if they thing it's too big or small for what they need it for, but when it comes to images, you can't do that.

I used to do this thing years ago called javascript (oooo now replaced by php, pearl, and the number of others that do things more efficiantly) that would anilyze the persons res and redirect acording to the res to differently made websites.... maintaining 4 layouts sucks....

My suggestion is make a layout with looping images for the header, borders, and footer that can be retained with a percentage based table, like saying that the table is 70% of the screen wide rather then 600 pixles wide. Use text from html for the links instead of images. With css you can do alot to make simple text links look amazing and with css you can also say 120% size, this adjusts the text on the users machine 120% of what it normaly is.



WOW, I'm sorry, that was a huge rant.. Here is the code if you want to throw it in the code half of dreamweaver -

<a href="LINK.html"><img src="LOCATION/OF/IMAGE.jpg" border=0></a>

That border=0 in there takes away that nasty 2 pixle wide link colored border that would be on standard image links, if the image looks like a link, there is no need for a border.

And yes, notepad is the only way to go.

edit- wow.... pearl isn't new and doesn't really do what I said, ANYWAY....

[Skjoldbroder]

If you go here, they have articles about every aspect of building a website , including css and validators etc.

http://www.w3schools.com/

[h20]

Thanx for all the replys so far.

I've been following this tutorial: http://www.entheosweb.com/photoshop/website.asp

but i absolutley don't see the link between tutorial 3 and 4.

In the 3rd one we only slice the banner + logo + small images bottom right.
Then you go into dreamweaver and you start all over again, creating tables, inserting the text again, why do all this if we made the layout in photoshop.

Why not simply slice each "link" such as about us and then use the slice select tool and then in the URL part type the link you want it to go to when you click? Afterwards do file> save for web, and save it all as images

Only thing is how to edit it so it becomes yellow on mouse over

h20

[nSomnius]

The image based rollover (mouse over, down, etc.) is done with an image for each, which you do in photoshop. With all images in one folder, the javascript will take over the action.

One suggestion I'll make is to spend a small bit of cash and sign up with lynda.com and get over to the Photoshop for Web title, it's a goldmine for slicing, rollovers, etc. and will do wonders for your sanity at this early stage in your development. You won't be sorry.

[prixatw]

Why not simply slice each "link" such as about us and then use the slice select tool and then in the URL part type the link you want it to go to when you click? Afterwards do file> save for web, and save it all as images

h20


You could make every link on your page with photoshop slices but that would result in a long and complex web page which would be, almost certainly, uneditable.

With lots of code needed to program a very complicated table. If you then wanted to move the "about us" link a couple of pixels to the right you would have to go back to photoshop and export the whole page again!

[h20]

what i thought about doing is make the layout without the text (aka links). Put the layout as a background in dreamweaver and then add a table on top of it. In that table i add the hyperlinks etc...

The only thing that I don't know how to do is make the scroller functionnal because it's only an image. And the default ones that you can make in dreamweaver don't look nice (old windows 98 style)

h20

[trancor]

Scroller? Then it would be easy to have a javascript scroller, or map out buttons on the image using javascript. It's called an Image Map, you can designate invisible boxes on one image to be links. A while ago I wrote my own image scroller code which used a div box, and simply hid everything outside of the boundries as it scrolled.

Frankly, I will say again. Try to make the links with text, it becomes alot easier to edit, and still alot can be done with text.

Are you putting the layout on the document or on the back of the table? If you do it on the back of the table it might work out easier. There is margin width and border with on the edge of a browser window to deal with in placement. Enless you are doing background-position:center center;



So just look up "image scrollbars javascript" and "html image map" in google or something. Hopefully this is what you are looking for.

[stylEmon]

You could make every link on your page with photoshop slices but that would result in a long and complex web page which would be, almost certainly, uneditable.

the way I see it, you get your design finalized early on. then you wont need to move any buttons over by one pixel. The beauty of doing it in PS, is that you dont have to guess about what it will look like.

I realize that there are some barriers with using PS for slices, but for someone getting started, and just needs clean looking portfolio pages, you cant go wrong.


here is a sample i did using PS for design, Image readdy for slices, and dreamweaver for clean-up (and some java and PHP copy and paste)...


http://www.arizona-wedding-day-planner.com/

I obviously could critic the site but for a portfolio type page, it does the job.

[trancor]

Or you can use some css to move the image over a few pixles-

//move left 2 from current position
<img src="Gallery.jpg" style="position:relative;left:2;">

//move down 2 from current position
<img src="Gallery.jpg" style="position:relative;top:2;">


or

in the style tags -


<html>
<head>
<style>
.linkButtons{
position:relative;
left:2;
}
</style>
</head>
<body>
<a href="blah.htm"><img src="Home.jpg" class="linkButtons"></a>
<br><a href="blah.htm"><img src="2dGallery.jpg" class="linkButtons"></a>
<br><a href="blah.htm"><img src="3dGallery.jpg" class="linkButtons"></a>
<br><a href="blah.htm"><img src="Bio.jpg" class="linkButtons"></a>
</body>

[BlueFlare]

Why not simply slice each "link" such as about us and then use the slice select tool and then in the URL part type the link you want it to go to when you click? Afterwards do file> save for web, and save it all as images

There are tons of reasons why you shouldn't do it like that, but one important reason that some people might not think about is that linked images arent' rated as well by search engines as pure text links, regardless whether the image has a tag that describes what the image/link is all about.
So if you care about descent traffic coming to your site then make sure that the most import links on your site are all text links.

[Skjoldbroder]

there's also the size issue.. yes, we have high-speed internet these days, but that doesn't mean that I want to be downloading 4 megs of graphics to view a webpage. If a page loads to slowly.. my browser window gets closed!

[stylEmon]

i build a few websites, and I agree about the search issue, but i've never had a problem with file size using graphic buttons.

[prixat]

...get your design finalized...

Can you tell me where you find such wonderful clients? :)

But seriously, that is a good site and photoshop got the job done, which is what matters!

Though I would say that it is approaching the limit of complexity for this method. A few rollover buttons in a row, a single 'target' area on the right, a non-rollover link along the bottom and nothing overlaping anything else.

Even with this 'simple' table The only way to swap a couple buttons round, insert a testimonials button after pictures, change a background image or put in a special offer link temporarily, would be to go back to photoshop and redesign and recode!

Yet those are the sort of things I'm always asked to do after the design is finalised and they are not all unreasonable.

[stylEmon]

thanks for the words.

I've been able to be pretty stren with clients about design. When I was doing a lot of web design, I would make them sign an agreement that said they were happy with the design ;) Then I could move on to coding.

And your right, I've pretty much reached the limit of what I can do with that method. Although, I try to anticipate the future of the site. I'll ask the client if they are expanding in the future to a shopping cart or anything else. Then I'll try to leave a slice where I can easily replace an image with a button.

I'd like to learn how to add some dynamic design to my site designs. I just dont have the time to submerse myself in Java and PHP books. I am now doing arch viz, and trying to figure out what all the sliders do in mental ray is enough for now!

[trancor]

there's also the size issue.. yes, we have high-speed internet these days, but that doesn't mean that I want to be downloading 4 megs of graphics to view a webpage. If a page loads to slowly.. my browser window gets closed!

True images can be 10 k large, but not many people know about that little feature in photoshop called "Save to web". People will throw up 100 k image files just for the links, let alone the 500k-1meg background file. Which makes me want to shoot myself.


And getting people to finalize a layout is good, especially when there is legal stuff involved. I make this website, it was finished, my client loved it, the person he was working with didn't. Not to mention this was the last phase of making the site, I made a little website editor in php for my client. Fully customizable layout from the admin login, EVERYTHING. Last second that non client wanted the layout changed, so I did, then wanted it changed again, so I did, then all together dropped me as a web designer.... kinda pissed me off.


Damn it, I hate thsoe photoshop looking websites. I can tell RIGHT off the bat if a website was made in dreamweaver, frontpage, or sliced up with photoshop. People design the layout as though it's a piece of art, sure, I like that. But when it comes time to getting text in the layout, or images, or buttons, everything looks messed up.

[trancor]

there's also the size issue.. yes, we have high-speed internet these days, but that doesn't mean that I want to be downloading 4 megs of graphics to view a webpage. If a page loads to slowly.. my browser window gets closed!

True images can be 10 k large, but not many people know about that little feature in photoshop called "Save to web". People will throw up 100 k image files just for the links, let alone the 500k-1meg background file. Which makes me want to shoot myself.


And getting people to finalize a layout is good, especially when there is legal stuff involved. I make this website, it was finished, my client loved it, the person he was working with didn't. Not to mention this was the last phase of making the site, I made a little website editor in php for my client. Fully customizable layout from the admin login, EVERYTHING. Last second that non client wanted the layout changed, so I did, then wanted it changed again, so I did, then all together dropped me as a web designer.... kinda pissed me off.


Damn it, I hate those photoshop looking websites. I can tell RIGHT off the bat if a website was made in dreamweaver, frontpage, or sliced up with photoshop. People design the layout as though it's a piece of art, sure, I like that. But when it comes time to getting text in the layout, or images, or buttons, everything looks messed up.

[trancor]

there's also the size issue.. yes, we have high-speed internet these days, but that doesn't mean that I want to be downloading 4 megs of graphics to view a webpage. If a page loads to slowly.. my browser window gets closed!

Sure buttons CAN be 10 k, but most of the time you are getting these images 100k to a button, FORGET about an image as a background, that is like another meg right there, not to mention everything else.. But people forget about the "Save to web" feature of photoshop. This compresses everything down nicely.

Damn it, the one thing I hate is that when people design a website in photoshop, they try to make it look like a piece of art, sure, I like that. But when it comes down to getting content and extra stuff into the website, problems arize.

I can tell right off the bat when a website was made in dreamweaver, frontpage, or photoshop slices. Everything is too simular is production.

[BlueFlare]

What happened Trancor, I see 3 similar posts.

[trancor]

I posted, the page didn't load for like a minute, hit reload, came up with a "cg society under maintaintence" Went back after it was back up, none of my posts were there, so I posed again, and now all three are there.....

[BlueFlare]

Thanks, good to remember, because I often seem to post when that maintenance screen pops up.

[stylEmon]

I like that. But when it comes time to getting text in the layout, or images, or buttons, everything looks messed up.

What are you talking about, that site I posted has NO gaps or anything like that. All my rollovers are spot on, the java script in the Gallery works flawless, as does the PHP feedback in the contact area...

So you'd rather have a site with a tiling header and footer, little use of the design elements, and no sense of variation from the rest of the sites out there? Check out myspace, I hear there is some mind blowing design going on there!

As for "save for web", of you can't figure that out, you have no right using PS or the internet. It's a fairly basic function. As a matter fact, Imageready automatically "saves for web" when you output your slices.

The main drawbacks that I've found is shopping cart intergration, and resolution differences for different users. Other than that, PS designs are great. Most of the people on this forum just need a portfolio page. So I'd say the PS/DW method is great. Intergrate QT, add a PHP contact script, a little flash banner, what else do you need?

[trancor]

No, I don't have a problem with people using the images for everything, I have the problem when people are using z-index instead of using background-image for divs, or using position:absolute/relative instead of just throwing text anywhere in a layout. Trying to center tables using center tags and fiddling with percentages rather then simply using alignments to settle things in the right spots.

I said it was the added stuff that makes the site non functionable, well, design sense wize.


If you want to deal with writing jpgs server side with php, go for it, it's fun, there is alot of stuff you can do with it. But needing to add another link to a page, you need to go through, change your layout, maybe even change how the background image looks to fit the new link.

I simply perfer text or php text based images over images slized up in photoshop.

[CGTalk Moderation]

This thread has been automatically closed as it remained inactive for 12 months. If you wish to continue the discussion, please create a new thread in the appropriate forum.