Website Help?

[Joe_Elding]

Hi, for a while I've been designing a basic website for the riders in and around woking on photoshop. I've kindof finished a design i just need to know what to do.

Basically, all i've done is the home page in photoshop, do i add the font in on photoshop of dreamweaver?

Also with slices, do i slice everything where content will be or just links?

And is all i need to do in dreamweaver connect the links up and upload? or is there all sorts of coding to do?

Thats what it looks like in photoshop what do i need to slice?

Cheers muchos!

Ps: i've searched google but i dont really know what to look for

[Simon]

I posted a huge post explaining this, let me try and find it.

Found it.

If you care about XHTML standards, or using div's over tabular layouts, then ignore everything i say.

Using a photoshop sliced pre-formatted html page can be very tricky when you start out, as you have a .htm/.html page and you're probably thinking, what the hell do i do to get content in, and links in.

To get the best out of your dreamweaver experience, you have to prepare your slices properly in photoshop first. So you mark with the slicer where you want the content to go, where you want the navigation to go. It's easier if you have the navigation as text, i.e, not as separate images, but separate images and rollover's can easily be achieved with a bit of time and effort. If you do want the navigation to be images, then instead of drawing round each button, unless you have no option too, draw round the whole of the navigation block, so you can then just draw hotspots on in dreamweaver.

Once you've got it sliced, and loaded into dreamweaver, you need to start making it work. Make sure its in design view, and if it looks at all wrong, just ignore it. Dreamweaver has problems with rendering stuff correctly in design view. Now click once in the area you want to "make work", and it should highlight the cell in the table, or highlight the image, both are the same. Now go into code view, and you should see the line or image highlighted. It should look something like that, but not exactly, you may have more rows, more columns, what ever, but generally you will see;

<tr> 
        <td> 
            <img src="images/btc_after_PSD_09.gif" width="750" height="105" alt=""></td> 
    </tr>

It's the "<td><img></td>" we are interested in. Right, now you have the area you want to make work, you have some different options. One, you draw hotspots on the image, in which case, simple go back to design view, click on the image you want links to be on, look to the bottom left of dreamweaver, and you'll a black arrow, and 3 blue shapes, with a box for "Map" above them. Click which ever you need, then draw over the button you want to link, it's pretty straight forward after that. Two, the image is one solid colour, and has nothing else on it, in which case, to save loading times, you do this;

<tr> 
        <td bgcolor="#006666" width="750" height="105"> 
        </td> 
    </tr>

Where the #006666 is the colour that takes up the image. Also notice i've added in the width and height properties from the image, this is to keep it all looking as it should, and not screw up. Three, is the most common, where you just want to be able to write properly over the image, and is achieved by making the image in the cell, the background of the cell, instead of the content, like so;

<tr> 
        <td background="images/btc_after_PSD_09.gif" width="750" height="105"> 
            <!--<img src="images/btc_after_PSD_09.gif" width="750" height="105" alt="">--></td> 
    </tr>

I've encapsulated the <img> tag in HTML quote tags, so it wont display on the page, but incase you screw up the cell code (<td>), you can simple remove it, and put the image back again.

This is very basic, but maybe it helps you in some way.

[DeeZee]

Slice? oh dear god.

Ermm, all the text and hyperlinks should be coded in html, either with a wysiwyg like dreamweaver or frontpage. Or you code it by hand in notepad.

Then set out you page layout and layout the graphics, I personally use tables, you have so much control over graphic placement.

To be honest you've kinda worked it back to front. I strongly recommend reading a good book on the topic.

You want to minimize the amount of actual graphic on the page

[Joe_Elding]

I posted a huge post explaining this, let me try and find it.

Found it.

Cheers man thats what I'm looking for

One more quesiton though, where you say image is that the whole image fromk photoshop or just the bit thats been sliced around?

[Simon]

If you slice it in photoshop, then export with the option of (.gif (images) and .html) or something, then it saves the images in /images/ and what ever you set the filename as a webpage. If you edit the source for that webpage it creates, you will see that stuff.

Just make sure you save it for web, and select the right option, images and HTML.

[Joe_Elding]

cheers I've got the hang of it now

Except for it keeps having the background tiled four times and i dont know hw to cahnge it

Nothing looks wrong with the code either

[Simon]

cheers I've got the hang of it now

Except for it keeps having the background tiled four times and i dont know hw to cahnge it

Nothing looks wrong with the code either

background-align:top left;

background-repeat:no-repeat;

<td style="background-alig..." background="..." etc="etc"></td>

You get the idea.