The Basics

[Tony Hardy]

Hey everyone.

I've got little to limited experience in the web field and I'd like to make some headway into it by starting on my own portfolio site.

If someone could advise me on this it'd be great.
I can knock together my site layout etc on Photoshop (is this the right programme, what size do I make it?) I'd like it to be locked to browser size. So there's no scroll right to left or up and down, just a navigation menu on the left, with things loading up on the right.

How do I go about this and then coding it into a working site?

Thanks a lot.
Tony

[Corrosive]

Hi Tony

The basics are HTML and CSS. Particularly the CSS Box Model for positioning. Photoshop is fine for layouts but stay well away from the 'export as HTML' button. Use PS for graphics really and then hand write your code.

Unfortunately you won't get a perfect size on every browser and screen resolution but a width of 960px is considered 'safe' nowadays.

Good luck

[Paul Murray]

So long as your DPI is set to 75 anything you produce in Photoshop should display at the same scale on screen. I find it best to draw out an idea on paper, then create a flat in Photoshop, then make notes of the measurements of the elements (how far from the left/right etc).

It makes it much easier when you come to write the code/CSS. If you have Dreamweaver you could open up a basic CSS controlled template and edit that to get a feel for what things do.

[Tony Hardy]

So if I make a 960 width what do I go with as my height?
Cheers for the advice people. I knew CSS and HTML is the basic idea of coding etc, but where do I start with converting a flat image into HTML/CSS etc?

I've got an idea drawn down etc like, so it shouldn't be too much hassle to get sorted out design wise.

[Paul Murray]

Either:
Height: auto; (will adjust the size depending on the content)

or

Height: 100% (in theory scales the div to the bottom of the browser window all the time, but doesn't always work in some browsers).

You could also not have a height entry but this can lead to errors sometimes.

[Tony Hardy]

Haha, I meant for designing it in Photoshop?
But I'm sure that'll come in very helpful for the actual coding Paul, cheers :)
Is there any tutorials anywhere?

[dedwardp]

Generally I often end up taking a screenshot of a site such as Facebook, cropping the sides off and then using that as a rough idea for width, for height just go with what you need - if you have enough content to go down further then go that far!

Often the middle of the screen where the content is will become constant so that as the content expands the page can also get longer to facilitate it.

In terms of going from Photoshop to code, you can google slicing to css and so on, but if you do draw out a model on paper to work out what areas you want etc you can design around the model so that you know it would fit together ok in the end.

To achieve certain things from Photoshop with CSS are more streamlined than you would perhaps first think and so you have to think logically when slicing up your template. As an example, if in Photoshop you designed this forum, say, this is the image slice for the top of the forum header. Because it repeats, you can slice it to just 1px wide, set it as the background image for that area and then set the style to repeat horizontally, meaning the image that needs to be loaded is a very small file.

It makes sense when you think about it but at first it's something you may otherwise overlook. If you design and slice with things like that in mind, then drop the images in to the relevant div areas etc etc it will come together.

[Tony Hardy]

Cheers everyone.
I'm going to knock my design into place this week, so I'll post it somepoint next weekend when I'll inevitably need more assitance.

[djb]

For height you want around 620px to allow for all the gubbins at the top of the browser - width 960px as mentioned above.

[Tony Hardy]

Thanks a lot. I'll be starting this soon.