It would be good if some kind soul made a tutorial for a website creation!

As much as I would like but am stuck at coding a website. It would have been nice if someone made a tutorial for that.

 

There are literally thousands of them. Google search for HTML and CSS tutorials.

 

Avoid coding and go purchase Dreamweaver or equivalent. Or host with Yahoo, their sitebuilder is excellent for you non-html people.

 

there are a lot of tutorials around, and several websites offering basic layouts and templates.
This is one of the most visited: http://www.dynamicdrive.com/
They everything you may need to build a website, and little CSS expertize will make your site look and feel unique.
They have also links to tons of resources.
There is no need to buy dreamweaver or any other wysiwyg editor to make a decent website.
My own advice: keep your site clean, light to load ad with a good navigation menu. Avoid frames, and use as few tables as you can.
Last but not least, do not stuff your pages with banners and ads.
Your visitors will thank you.

 

I just Love this kind of webmaster, expecially when they post in adsense group because they are not able to add a javascript on their pages.
It's really what the internet needs. Really.

 

Non-html means not web developer. If you can't learn the HTML & CSS, you're not a web developer, so don't try to be one.

Its like me - I want to be a chef, but all I can cook is baked beans, and since I'm not stupid, I don't pursue it by using pointless shortcuts.

A site made in Dreamweaver will fail considerably, in both producing crap, out of date code that makes you look stupid and in cross browser compatibility - a site made in DW will only work in 1 or 2 browsers most of the time.

 

I am guessing you haven't used much of DW as I use it quite often to view my CSS and HTML Pages. (And yes, I an ACTUALLY Code, as well as design). I think the decision to not learn something should be made after having experienced why it is being made, not just because someone else says (oh, well, you won't get anything done this way, so you might as well not even try...)

 

go get dreamweaver - its a WYSIWUG design program and you can access the code as well...

Then go attack the tutorials when searching on google HTML, CSS such.

 

You see, unlike some others here, I do my research first. I have Dreamweaver MX, CS3 and CS4 Beta installed on my system, none of them are good, plus I started out on Dreamweaver. Ontop of that, I get paid $60 an hour for cleaning up the code that Dreamweaver/Photoshop/Fireworks churn out. Luckily for my bank account, it takes a long time.

The code view....oh wow, its like gEdit or Notepad++...but with less features :O, and $400 more.

The design view. A waste of time, pure, unadulterated crapulence.

Why is there so much pure, unadulterated crapulence on these forums. Use Dreamweaver to make your site, the are the demographics who will be unable to view your site:

1. People using Firefox, Safari, IE or Opera (thats like 99.99999% of the Internet - Dreamweaver always f**ks up on at least one of them)
2. People like me with Images disabled
3. People with Frames disabled
4. People with JS disabled
5. People with screenreaders. (all of the above)

If you can't reach everyone, you have no right being in the business.

Take dreamweavers wonderful (sarcasm) rollover images.

Their HTML head:

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Code (markup):

Their HTML body:

<body onload="MM_preloadImages('file:///C|/Documents and Settings/Owner/My Documents/My Pictures/Evoque/designFLAT.png')">
<a href="http://google.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','file:///C|/Documents and Settings/Owner/My Documents/My Pictures/Evoque/designFLAT.png',1)"><img src="file:///C|/Documents and Settings/Owner/My Documents/My Pictures/Evoque/design.png" width="800" height="600" border="0" id="Image1" /></a>
</body>

Code (markup):

My HTML head:

	<style type="text/css">
		a.links{
			background: #FFF url(rollover.png) left top;
			width:230px;
			height:40px;
			display:block;
			}

                      a.links span{
                                  position:absolute;
                                  top:20em;
                                  left:5em;
                                  }
			
		a.links:hover{
			background-position:left bottom; /*Using my 1 image technique, this can also be used to change the image URL)
			}
	</style>

Code (markup):

My HTML body:

<a href="http://google.com" class="links"><span>Link Text</span></a>

Code (markup):

Not only is that a portion of the code, it will work with any browser back to IE5 with NO Javascript, so more or less anyone can use it, and if the user has images turned off, or they have slow connections and have to wait for the images to load - they are presented with a text link, a non accessible (but still better than Dreamweaver's) is here

Whether you use the code view or not, Dreamweaver offers nothing new, in fact it offers a lot of old stuff repackaged from 15MB to 250MB, which also gives my ISP a reason to hate me.

 

*Jerry! Jerry! Jerry! *

If you don't know what you are doing, pay someone else. If it's worth doing, it's worth doing properly.

I started by using free templates, and simply modifying them to suit my needs.

There is 1 thing Dreamweaver is good for other than ruining your site (holy sh*t, I know):

Email templates

I have an email newsletter I do, its based off the original (non-dreamweaver!) version. Basically its put the new text+images in for that particular months sales. Dreamweaver makes it so much quicker to do because there is no styling involved. The only problem is that sometimes Dreamweaver loves to throw in random <p>&nbsp;</p> and other weird and wonderful things, so have to keep watch.

That example above doesn't work at all. Firstly, the link text is half way down the page while the image is up the top; secondly, if the text is positioned where it should be, it'll be ontop of the <a>

A much better method is like so:

Things that aren't necessary:
- left:0 (only if text-align is not left)
- top:0 (line heights can push the span down, so putting top:0 ensures its flush with the top)

You could probably even put the <span> at the back if it really mattered that much to you (such as <h2>Your Title<span></span></h2>) though I haven't played around with that.

If you want to get really technical, then style the link using CSS as close to the image as possible (so that if images are disabled, the site doesn't look trashy) One thing I noticed is sites will do this image replacement technique, but not colour the link/background differently enough that its easily readable.

The example site you showed doesn't work either if you add text (there is none, but even if there was, it would just show up on top of the image)

 

The position was just made up, as I currently have no working example, not having done one since i got this new PC. It was just an example filler position.

When I was just starting out, Deathshadow showed me the image replacement technique, using <span></span> and I can't remember how I did it on my last one, I'll check out my old PC later tonight. I am just trying to make the point that Dreamweaver outputs far to bloated and inaccessible code

 

@rochow: great portfolio dude! your coding for strict xhtml is a good reference

 

Ahok. I was wondering why - you were saying how dreamweaver didn't work well yet your example didn't either

That image replacement above is the one I got from Dan, which I assume is probably the one deathshadow showed you too (as far as I know it is the best, though the stupid <span></span> does irritate me, there must be a better way...)

Thanks!

Don't look at the old ones

 

My advice, invest some money in some really good html/css books. I spent many months digging the internet for good tutorials, but I was getting literally no where

then I invested some money in books, and in ONE month I can make a good, practical site.

Some books I suggest:

1. Beginning CSS web development from Novice to professional
2. CSS The Missing Manual

I would avoid the sitepoint series, they gloss over everything

Good luck!

 

For the lazy ones, who don't want to read a book or a tutorial, I recommend the video tutorials on codervods.com - plain and simple

 

What? You guys started a war and didn't invite me? (j/k)

fiona45in, if you look in my signature there's a link to a post titled "X/HTML Coding Best Practices". I strongly recommend reading it. It only covers the HTML part (it's on the SEO board here), but I will be expanding upon it and creating a full HTML/CSS layout tutorial with it eventually.

Hope that helps.

 

w3schools.com!

 

I do NOT recommend W3Schools.com at all whatsoever. The site is horribly outdated, does not advocate best practices, and has even less to do with the W3C than I have to do with Charles M. Schulz (the guy who created Snoopy, Charlie Brown, and the Peanuts gang - and he was my grandfather's second cousin!).

 

Ah, well I guess I want to say that one of my favourite crusties uses Dreamweaver regularly, mostly for taking other people's code and setting it automatically to his style of indenting etc (so he can find their problems easier).

So I guess every crappy thing said about Dreamweaver (or other wysiwyg-- current;y I'm fighting some strange FrontPage Javascripty-thing right now, f*cking jebus it's so bad) is true, and yet it's just a tool and there are people who like to use it and still churn out good code.

Kinda like people keep saying you can't do professional work in GIMP. There, I can see the blame is 100% on the user and not the tool. DW is a fancy enough tool that it can only output garbage when the person using it not only doesn't know code but doesn't know DW. Apparently you can train it like a dog to do exactly what you want... if you're willing to put that kind of investment into your tool, and you know what you're doing, then you should really have no other drawbacks from using it. Hell, Gary uses (and advocates) Emacs, which is definitely bloated with features (instead of an text editing program, it's like practically a language who happens to contain a text editor)!

I never learned on such things and never will, nor will I ever advocate them, but if I see a page that's cleanly written by someone who obviously knows what they're doing and it works and is beautiful etc then I won't tell them to stop using their tool even if it's DW.

(the crusty btw is Paul O'B who's saved my butt plenty of times)

 

Huh, I didn't know Paul uses Dreamweaver. He always struck me as a PTE (Plain Text Editor) kind of guy.