1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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

Discussion in 'HTML & Website Design' started by fiona45in, Jun 30, 2008.

  1. #1
    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.
     
    fiona45in, Jun 30, 2008 IP
  2. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #2
    There are literally thousands of them. Google search for HTML and CSS tutorials.
     
    blueparukia, Jun 30, 2008 IP
  3. moneylizard

    moneylizard Peon

    Messages:
    384
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Avoid coding and go purchase Dreamweaver or equivalent. Or host with Yahoo, their sitebuilder is excellent for you non-html people.
     
    moneylizard, Jun 30, 2008 IP
  4. guidyy

    guidyy Active Member

    Messages:
    574
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    58
    #4
    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.
     
    guidyy, Jun 30, 2008 IP
  5. guidyy

    guidyy Active Member

    Messages:
    574
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    58
    #5
    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.
     
    guidyy, Jun 30, 2008 IP
  6. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #6
    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.
     
    blueparukia, Jun 30, 2008 IP
    Dan Schulz likes this.
  7. mmkrulz

    mmkrulz Peon

    Messages:
    197
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    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...)
     
    mmkrulz, Jun 30, 2008 IP
  8. NefWolf

    NefWolf Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    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.
     
    NefWolf, Jun 30, 2008 IP
  9. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #9
    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.
     
    blueparukia, Jul 1, 2008 IP
  10. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #10
    *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)
     
    rochow, Jul 1, 2008 IP
  11. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #11
    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 :p
     
    blueparukia, Jul 1, 2008 IP
    rochow likes this.
  12. blurredfringe

    blurredfringe Member

    Messages:
    77
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    48
    #12
    @rochow: great portfolio dude! your coding for strict xhtml is a good reference :)
     
    blurredfringe, Jul 1, 2008 IP
    rochow likes this.
  13. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #13
    Ahok. I was wondering why - you were saying how dreamweaver didn't work well yet your example didn't either :D

    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 :p
     
    rochow, Jul 1, 2008 IP
    blueparukia likes this.
  14. rowen77

    rowen77 Peon

    Messages:
    264
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #14

    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!
     
    rowen77, Jul 1, 2008 IP
  15. vodcoder

    vodcoder Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    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
     
    vodcoder, Jul 2, 2008 IP
  16. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #16
    What? You guys started a war and didn't invite me? [​IMG] (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.
     
    Dan Schulz, Jul 3, 2008 IP
  17. mammothgraphics

    mammothgraphics Peon

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #17
    w3schools.com!
     
    mammothgraphics, Jul 3, 2008 IP
  18. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #18
    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!).
     
    Dan Schulz, Jul 4, 2008 IP
  19. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #19
    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)
     
    Stomme poes, Jul 4, 2008 IP
  20. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #20
    Huh, I didn't know Paul uses Dreamweaver. He always struck me as a PTE (Plain Text Editor) kind of guy.
     
    Dan Schulz, Jul 4, 2008 IP