A total noob to web development

[LocutusEstBorg]

Also use Ajax for coolness.

 

[Vee]

I understand everything everyones saying here. What i dont get is after learning HTML, how you make your template and how you tell images, where to stay.


Also, i'm running into a bit of trouble when it comes to the resolution of my site. I've made it according to the my computer, which is running at 1280x1024. But friends of mine that are using lower resolutions claim to see the site resized and completely out of order.

 

[A_Nub]

a rule of thumb is to develop for a POS system. Personally I try to keep my sites in 800x600. But recently I have been making dynamically sized sites, which are optimal .

AJAX ftw.

 

[Archaemic]

Use AJAX only when necessary, I feel. I like to have some shiny stuff on the top, but have it fall back to something that's still completely functional if JavaScript fails.

 

[Clint]

Use AJAX only when necessary, I feel. I like to have some shiny stuff on the top, but have it fall back to something that's still completely functional if JavaScript fails.

Yay, unobtrusive JavaScript really is the best way to go. So many sites really ignore the JavaScript disabled audience, which really is a shame. Especially for large sites, it could really be a larger group than you expect.

 

[ilyace]

I'm extremely picky when it comes to standards but you can't blame a huge web app like vB for failing standards with all the plugins we've thrown in, that just shows a little ignorance on your part.

@OP: You should learn XHTML 1.0 Strict I'd say, people say it's harder to code in but I write standards compliant HTML naturally so I can't tell.

Always, always, always use classes and IDs with CSS, never inline style things using attributes (width="500", etc). You'll thank yourself in the long run.
I never can understand why some people don't use CSS.

Oh and don't you dare use tables for layout, don't even think about it.

For JS I'd just say get a framework like jQuery. For about a year I've tried dealing with browser differences by write straight JS (out of arrogance really) but it's just not worth it. jQuery levels the playing field and makes it a lot easier to use JS on all browsers.

PHP is easy, really easy. Just look at one or two examples then go straight to the php.net manual, at a beginner level PHP is ridiculously straight forward.



There's nothing wrong with pirating any Adobe program, anyone who is going to download it wasn't really a potential customer anyway. That's why it's so easy to crack, Adobe don't make their money off people like us.

Basically my advice is don't listen to anything Sullivan says and do listen to TacticalPenguin, x3sphere and Archaemic.

Thanks for all that, Chath, and everybody else who's been helping me out.

 

[Manic Nimrod]

@all, Thanks for all the information given, im also looking into learning html etc.

 

[Vee]

a rule of thumb is to develop for a POS system. Personally I try to keep my sites in 800x600. But recently I have been making dynamically sized sites, which are optimal .

AJAX ftw.

So you think i should redo it at using a 800x600 resolution? How do i make it dynamic? Do i set certain parts to "absolute"?

 

[x3sphere]

I usually design for 1024x768 these days. If people are still using 800x600, tough. Same goes for any browser older than IE 6 :sneaky2: Doing a liquid layout, one that stretches according to the user's browser size is the best route to take, but not always suitable in some situations. If your page doesn't have a lot of content for instance, it's far better to go with a fixed layout, as a liquid one will look barren, too empty.

If you want an element to stretch according to the browser size it must be given a width value of 100%.

 

[Chathurga]

A very good feature in CSS is max-width and min-width, this would allow you to make the content stop expanding/shrinking before it becomes a problem on the users end.

By defining width as 100% and max-width as 900px it will allow the page to flow and resize for everyone one smaller displays but won't look horribly stretched out on bigger resolutions as it will never expand pass 900px is width.

Also just a little nugget of info that I always see people ask, to center a DIV (and many other block elements) set the margin to "0 auto" in your CSS.

 

[Vee]

Ah thanks.

 

[Archaemic]

Also just a little nugget of info that I always see people ask, to center a DIV (and many other block elements) set the margin to "0 auto" in your CSS.

Sorry, that's some bad CSS. Margin can either take numbers or auto, not both. You have to do this to set auto for some and not all:

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

A little verbose, but it gets the job done.

Ah thanks. Can you lot check out INK inc. and tell me what you think of it. I've just been using a free webhost to get the hang of stuff. If anyone could give some feedback, it would be greatly appreciated!

Never, EVER embed music on a website. At best, it surprises people. At worst, it pisses people off (which in turn may reduce traffic, something generally undesirable).

 

[Vee]

Never, EVER embed music on a website. At best, it surprises people. At worst, it pisses people off (which in turn may reduce traffic, something generally undesirable).

I get ya. Thanks.

 

[Chathurga]

Sorry, that's some bad CSS. Margin can either take numbers or auto, not both. You have to do this to set auto for some and not all:

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

A little verbose, but it gets the job done.

What? "margin" in CSS sets all the margins in clock wise order starting with the top. If you only use two values then the first value sets the top and bottom margins, the second value sets right and left. It's in the w3 specification and I've never heard anything about what said, can you back it up with a source?

Edit: Just ran my CSS through the w3 validator and it didn't mind "margin: 0 auto" so...

 

[Archaemic]

Hrm, this is odd. I definitely remember that being the case in the past, but I just looked it up in the official spec, and it's not the case. I must be going mad. Only rational explanation. Perhaps I was thinking of some other thing that can take auto and also takes its arguments in clockwise order.

 

[Vee]

This is something i'm really unsure about and i'd really appreciate if someone could explain:

I've seen tons of these tutorials on the internet
HV-DESIGNS V.24 | PHOTOSHOP TUTORIALS | CODING TUTORIALS

Where they make make a website layout on photoshop. It looks excellent and really easy to do. It seems perfect for me, seeing as i'm hopeless right now getting my images into code. Though i'm good with Photoshop.

So after them making this layout, how do they put it into a site? Is it just one huge image, with hotspot/hotlink areas drawn on each part of the image for clickable links? If so, wouldnt that slow the website loading times alot?


Anyway, any clarity here would help so much.

 

[Vee]

Any help?

 

[Nevada]

Generally the graphics are done in photoshop keeping in mind that they will eventually need to be ported out to code, best way to do that is to think what sections of the image repeats, as those areas can be done easilly with repeating backgrounds in css, any part of an image where you can reuse existing graphic helps to reduce overall size, generally you can get away with simply overlaying text via html over a background bar rather than applying graphical text to the bar, which means the background bar can repeat and save a lot of space.
Regardless though you need to be at least decent with html/css before you start undertaking tasks such as porting a graphic creation to an actual coded site otherwise corners will be cut and the overall size of the site will be high, causing high loadtimes and bringing the server to it's knees far sooner than it normally would (assuming the site gets decent to high traffic).

tl;dr, learn html/css before bothering.

 

[Vee]

Generally the graphics are done in photoshop keeping in mind that they will eventually need to be ported out to code, best way to do that is to think what sections of the image repeats, as those areas can be done easilly with repeating backgrounds in css, any part of an image where you can reuse existing graphic helps to reduce overall size, generally you can get away with simply overlaying text via html over a background bar rather than applying graphical text to the bar, which means the background bar can repeat and save a lot of space.
Regardless though you need to be at least decent with html/css before you start undertaking tasks such as porting a graphic creation to an actual coded site otherwise corners will be cut and the overall size of the site will be high, causing high loadtimes and bringing the server to it's knees far sooner than it normally would (assuming the site gets decent to high traffic).

tl;dr, learn html/css before bothering.

I understand that. What i dont get is how templates like that are applied to a site. If i made a similar looking layout on photoshop, how would I go about changing it into html?

 

[Hardrive]

He just told you. Export the images into chunks, find the ones that repeat and make them small. Make the site using divs and css. Party until morning. Got it?