making a webpage

#1 Drumbum667

Group: Member
Posts: 546
Joined: 16-May 06

Posted 22 November 2006 - 10:35 PM

I was wondering how the people here go about making there pages. For me I usually go into PS and design my layout and then go back into dreamweaver and put the tables in and code the rest of it. I was wondering what you guys do.

#2 Facedown98

Group: Technician
Posts: 2,944
Joined: 25-June 06

Posted 22 November 2006 - 10:37 PM

That's the only way I know how, so we're in the same position lol

(Except you know how to code your own layouts

)

#3 Drumbum667

Group: Member
Posts: 546
Joined: 16-May 06

Posted 22 November 2006 - 10:39 PM

Hahaha, funny. Ya I think that is the most proffesional way, unless you have very extensive experience in CSS it would be extremely hard imo to hard code a full site.

#4 Facedown98

Group: Technician
Posts: 2,944
Joined: 25-June 06

Posted 22 November 2006 - 11:00 PM

Sure. Oh, advice to anyone looking at this topic, don't go to one of those tutorial sites to try to learn how to code

lol Anyway, I'll stop interrupting and see if someone can answer your question lol

#5 skate_punk_21

Group: Retired Staff
Posts: 1,049
Joined: 13-June 05

Posted 22 November 2006 - 11:09 PM

Cant say tables are my first move. If your trouble is positioning things, then yea CSS will definetly help you out.

For those of you using FireFox (doesnt look good in IE (naturally)) take a look here. Its just a page I threw together for an example a couple weeks back.
http://skatepunk.gee...shaunwhite.html
Its all relatively size, so any resolution should work.
the related CSS is here http://skatepunk.gee.../XHTML/main.css

As an example of specific placement of elements you should see this paragraph of code in the CSS:

div#achievements{
	position:absolute;
	top:17%;
	right:0;
	padding: 0 1em 0 0;
	width:245px;
	height:10px;
	color:#FFFF00;
	line-height:25px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

what that says in laymans terms broken down line for line is:
in the division (div) called achievements
place it on top of all other elements(absolutely)
17% from the top
align it along the right side
with 1em (unit of measure - hard to explain) of space from the right
The Width of the division is 245px, the height is 10px (height doesnt really matter, the box will resize automatically)
text color is yellow
spacing between each line is 25px
and obviously the last one is the font face.

Now if you look at the HTML code in the first link, you will see somewhere in there, this:

<!--Shaun's competition stats-->
			   <div id="achievements">
			<h4>Competition Stats.</h4>
			<span>X-Games Halfpipe - 1st</span>
			<span>X-Games Slopestyle - 1st</span>
			<span>2006 Olympics Halfpipe - 1st</span>
			<span>US Open Slopestyle - 1st</span>

			<span>US Open Halfpipe - 1st</span>
		</div>

this is how you form a div, and call it achievements!

the <h4> and <span> tags are also defined in the CSS, see if you can find/understand them

Just one final thing, look how short that code is! Its ALL content on the main page. Search engines gotta love that

Quote

I think that is the most proffesional way

Still think so?

#6 ditto

Group: Member
Posts: 1,260
Joined: 11-April 04

Posted 22 November 2006 - 11:34 PM

i draw a layout on paper then code the html with divs then apply style sheet. i use dreamweaver on windows cause of the syntax highlighting and the built in ftp.

#7 Michael

Group: Retired Staff
Posts: 1,869
Joined: 06-June 05

Posted 23 November 2006 - 12:56 AM

Drumbum667, on Nov 23 2006, 02:39 PM, said:

Hahaha, funny. Ya I think that is the most proffesional way, unless you have very extensive experience in CSS it would be extremely hard imo to hard code a full site.

I would hardly call that the professional way. I would highly recommend you do learn to code html. It is very simple as is css and it gives you a lot more power over what you can do.

I just sit down at my text editor put down a the html strict doctype. Then then the <html> <head> and <body> tags then I put a div in the body to be the main warper, then inside that the content div and menu div. Then a bit of css and I have a template for my whole site, and it normally only take 3 hours or so. Less actually because I copy the basic template form other code I have made in the past.

#8 Drumbum667

Group: Member
Posts: 546
Joined: 16-May 06

Posted 23 November 2006 - 09:35 AM

I already know how to code HTML. I'm going to start learning CSS. When we get that Wc3 university started I'll join and maybe I'll learnj CSS there. And since skate punk showed me that I got to learn how to do DIVs since they look nicer. But when you put buttons and stuff on a site how do you code that with CSS or Html. Anyways I know what CSS is and I know how to do it, just I don't know how to do it that well in my coding. I hope that when the WC3 University gets started some of you really experienced could help me. I definitely think differently of web design now. I really hope to learn more from you guys.

#9 Facedown98

Group: Technician
Posts: 2,944
Joined: 25-June 06

Posted 23 November 2006 - 10:02 AM

Someone please create a lesson in W3C for coding layouts, I need to learn that lol

making a webpage - Geeks to Go Forums