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.

Okay, so I know how to design... now what?

Discussion in 'HTML & Website Design' started by Klaas Koopman, Sep 21, 2005.

0
  1. #1
    Hi All,

    After some years I finally know how I can design my own website layouts. I started this so I could save myself a lot of money, and now I even love doing it!

    But now i'm trying to save myself even more money by starting with coding. I know some basics of what I needed to know to keep my websites up, but not more then that. What should I do? Where do I learn how to slice and code my designs?

    Kind Regards,


    Klaas Koopman
     
    Klaas Koopman, Sep 21, 2005 IP
  2. jpcesar

    jpcesar Peon

    Messages:
    243
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I recomend you ASP as it is very easy and understandable by coding newbies. You could use server side server includes to build your pages.

    for example this is the source code from www.duploclique.com 

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simple Hosting - by duploclique.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css" TYPE="text/css">
</head>
<body  leftMargin=0 topMargin=0 marginheight="0" marginwidth="0"> 
<table width="780" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000"> 
  <tr> 
    <td><table width="100%"  border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF"> 
        <tr> 
          <td> <!--#include file="inc_header.asp"--> 
            <table width="100%"  border="0" cellspacing="0" cellpadding="0"> 
              <tr> 
                <td width="585" bgcolor="#F7F5F6" valign="top"><!--#include file="content_index.asp"--> </td> 
                <td bgcolor="#F7F5F6" valign="top"><!--#include file="inc_right_index.asp"--></td> 
              </tr> 
            </table>   
            </td> 
        </tr> <!--#include file="inc_footer.asp"-->
      </table></td> 
  </tr> 
</table> 

</body>
</html>
    PHP:
    That way you only need to code the footer, header and side blocks once. When you want to create another page just duplicate that one and create a new content_whatever.asp page that will contain the center body of the website.

    This is only a way to slice your contents and help future upgrades.

    I used this too on www.aranea.pt and www.lojakoala.com

    Hope it helps
     
    jpcesar, Sep 21, 2005 IP
  3. Klaas Koopman

    Klaas Koopman Well-Known Member

    Messages:
    895
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    128
    #3
    hmm can't that also be done with php include??? or is that different? but I need to know like if I got a design, how do I slice it, and then how do I code it so it can be used?
     
    Klaas Koopman, Sep 21, 2005 IP
  4. jpcesar

    jpcesar Peon

    Messages:
    243
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #4
    yes of course. I've showed ASP but you can use PHP as well. You can start to build a unique HTML page containing your slices and then rip apart some blocks, and put them in separate files. That requires some html table training and understanding so you can create hidden tables to organize the things.
     
    jpcesar, Sep 21, 2005 IP
  5. Klaas Koopman

    Klaas Koopman Well-Known Member

    Messages:
    895
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    128
    #5
    so does this mean i should start learning html ? i mean just all html and css?
     
    Klaas Koopman, Sep 22, 2005 IP
  6. jpcesar

    jpcesar Peon

    Messages:
    243
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Yes :)
     
    jpcesar, Sep 22, 2005 IP
  7. maro

    maro Peon

    Messages:
    356
    Likes Received:
    16
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Klaas Koopman my suggestion to you is to learn html and css, it is very easy to learn and understand... Then use a software like dreamweaver to create your page and then look at the source code generated to understand better how things are working and try to modify them...
    Finally, try to code your page from blank without the help of dreamweaver or any other software except notepad :)
    When you are a master in html (which I think you can be in a few days), then you can start learning scripting languages such as asp and php
     
    maro, Sep 23, 2005 IP
    bhutz likes this.
  8. KingSEO

    KingSEO Peon

    Messages:
    295
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    0
    #8
    What kind of moron suggests someone to learn table-based design in this day and time. CHRIST. I havn't even had my breakfast yet.

    How do you do your designs? I suggest you use Photoshop, so I'm going to assume you do that because of its layered design functions.

    Learn how how to separate a page, everything thats a image or round needs to be exported as images, atleast if you have say a box, you need to export top, bottom and a 1px middle line.

    After you have done this you code a design based on DIV's with XHTML or HTML 4.01 - this means that you create a <div> for every large segment of your page, there's plenty of resources for learning on how todo this.

    Now you need to position and align every piece of your design into this div-based structure, that is preferably done with as FEW absolute positionings as possible, ie try to use floats, relative positioning as long as possible and use absolute in the end.

    This should give you a basic template to use in your project, now you can separate parts of this page into files or functions (i use functions for some reason) a function in php is quite easy to create:

    <?
    function myHeader() {
    ?>
    <ul>
    <li>menuitem</li>
    <li>menuitem</li>
    ....
    </ul>
    <?
    }
    ?>

    Then you just call it with <?myHeader();?>. You also need to include or require the file containing these functions.

    I suggest you start reading the PHP manual from top to bottom, just skim it and return to the parts you are confused by when you need to learn it by heart. PHP manual

    Another excellent resource for CSS, javascript and much else is at Devguru.com
     
    KingSEO, Sep 23, 2005 IP
    SEbasic likes this.
  9. KingSEO

    KingSEO Peon

    Messages:
    295
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Whowa, thats like 8 years of experience boiled down 20 lines. Read it slow please.
     
    KingSEO, Sep 23, 2005 IP
  10. bhutz

    bhutz Peon

    Messages:
    76
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I agree with Maro, HTML and CSS are very easy to learn.
    While you are learning HTML and techniques for laying out your content I would avoid using tables for layout and concentrate on using CSS instead.

    This is a very good & easy to follow website to get you started on CSS http://www.wpdfd.com/editorial/basics/index.html although you may want to run through a small HTML tutorial first (http://www.w3schools.com/html/html_intro.asp), don't worry if you pages look bland in the HTML tutorial, CSS will spice things up for you :)

    http://www.hotdesign.com/seybold/ pretty much explains the benefits of not using tables for layout
     
    bhutz, Sep 23, 2005 IP
  11. wisam74us

    wisam74us Well-Known Member

    Messages:
    1,059
    Likes Received:
    47
    Best Answers:
    0
    Trophy Points:
    168
    #11
    Php is the best to be learn .. try to improve your php skills as you are for now good html editor
     
    wisam74us, Sep 25, 2005 IP
  12. Klaas Koopman

    Klaas Koopman Well-Known Member

    Messages:
    895
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    128
    #12
    thanks all for your support, really appreciate it! Is there any tutorial that shows me step by step on how to slice then code a design...? Cause everything I hear here is very new to me. I make my designs in photoshop... if that's important to know.
     
    Klaas Koopman, Sep 26, 2005 IP
  13. my44

    my44 Peon

    Messages:
    722
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I'm quite the opposite. I don't know anything about php (I heard the scripts are usually ready made, like JavaScript?). But I'm fairly good with HTML from about 8 yrs experience doing websites here and there.
     
    my44, Sep 27, 2005 IP
  14. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #14
    SEbasic, Sep 27, 2005 IP
  15. Klaas Koopman

    Klaas Koopman Well-Known Member

    Messages:
    895
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    128
    #15
    but sebasic, is there no place where they teach me to slice and then code a design.
     
    Klaas Koopman, Sep 28, 2005 IP
  16. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #16
    SEbasic, Sep 28, 2005 IP
  17. Klaas Koopman

    Klaas Koopman Well-Known Member

    Messages:
    895
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    128
    #17
    yeah but i don't know how to slice or anything or what to search for :S
     
    Klaas Koopman, Sep 28, 2005 IP
  18. SEbasic

    SEbasic Peon

    Messages:
    6,317
    Likes Received:
    318
    Best Answers:
    0
    Trophy Points:
    0
    #18
    SEbasic, Sep 28, 2005 IP