Slicing ETC (Framing?)

Hello
I have recently started working on a site in photoshop (it's my first). And I had it all sliced etc and I was wondering when people click on the links in the menu, how would I go about making a frame sort of effect? EG. Everything stays apart from main content box?

Thanks heaps
Antony

Heres what I mean http://cerveza.co.nz/test/main.html

I also just realised it's kinda slow? Will fix that soon, or maby a little pre loader i dno Also this is ruff draft so dont go saying "Things are off center" hehehe oh **** im blabbering :P

Hey Antman,
Using photoshop to design your website graphically is ideal. The problem comes when you want to contol the site - ie make it usable to a viewer.

Once sliced and exported as graphics/html from photoshop you need to make the code functional.

Sure, the html as is shows the site but you will have to dive in there and add the actual fuctionality with css, php, xhtml, javascript etc.

Sticking to Photoshop only means a big effort is needed every time you want to add new site content (open your template, amend with new text etc, save it, export it and alter code previously exported to reflect this change) and will be of no use at all when adding user input or interactivity on your site.

The normal process (well for me anyway) would be to design in photoshop then slice the template as necessary to produce main individual graphic images only. These individual images are then controlled by CSS (CSS allows you to repeat images across or down the screen and position them exactly where you want), tables or whatever, in your page code.

Background colours, text and so on are coded in as opposed to using graphics as this keeps load down, makes for easy visual style changes as well as a host of other advantages.

Hope this helps

ATB

Hmm dont really have any experiance in those languages, any ideas?

Hi,


In my opinion you would be wise to invest some time learning (to start with anyway) the rudiments of HTML and CSS.

After all, you have designed your site in photoshop so your graphics work is paying off already.

You'll pick up enough quickly to get you going and will get huge benefits in terms of your website work.

Ask in the HTML forum, or do a Google, for some good tutorial recommendations and jump in.

ATB

Ok yea I just would like to get something up as I have an apointment for a course 2mrw at 2pm (Its 3.38am) (http://www.natcoll.ac.nz/Courses/Service/Display/Course/50/Info/General) and then was probably gna move onto a Web Design course. And I wanted to get something up to show them you know? So should I post the same question in the HTML forum

Photoshop Templates main aim is to show how the website will look - not how it will function.
So if, at the moment, design is more your thing then you can use the file produced by photoshop as is to demonstrate your flair.

FYI
When you slice the template image each slice can be assigned a URL (page address) to send the user when its clicked. As on your site example, when you click the Home button you will go to whatever URL you assigned the slice to - as long as the page exists.

So, the template nav bar in your example would have seven buttons, each assigned the URL of the target page for that particular (home ->index.html, forum->forum.html etc).

Once thats done SAVE the template.

All further pages made with that template will have those navbar links available.

To add a new page to your site, open a copy of your template, add the text and graphics relevant to that new page, (by hiding old info rather than deleting it) and export the html with a name such as forum.html -or whatever suits your target set in the navbar- and the changed graphics to the server.

Refresh the browser and you should find the links will now go to their corresponding page.

Repeat the process - naming each page to match the navbar- as many times as you need.

You can see that it's far from ideal. Any major style change or navigation update to the main template would cause pages from before to be outdated.

To recap;
Demonstrating your design flair and ideas is an ideal use of templates, your tutor or client can see how the site will look.

Practical production limitations apply with any website that is, basically, one image and javascript so to demonstrate the functioning website (if thats what you want to do) would probably mean diving under the bonnet.

People can make a living designing templates that are bacically layers - not a scrap of code in them.
Whoever buys the template is responsible for producing a fuctioning site.

Thanks so much, some of the stuff I might have to try/figure out later but my parents said they needed there site up as people were about to look at it so I just did THIS


Antman