zelf lay-outs maken?

Status
Niet open voor verdere reacties.

jefie1

Gebruiker
Lid geworden
18 apr 2008
Berichten
315
hoe maak je zelf eigelijk layouts in het html?
met tabbelen,kleuren enzo.
en mag ik een voorbeeld coden?
al vast bedankt.
 
Wat heeft dat dan weer voor nut, maar ga je maar eens photoshoppen leren en css, dan leer je je nog html, dan lukt het je wel om een layout te maken, zo heb ik het ook geleerd...
PS: je site zit vol typfouten
 
is dit ook een goede coden?;
HTML:
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="AUTHOR" content="created by Doyle at http://free-templates.org">
<meta name="KEYWORDS" content="replace, these, words, that, describe, your, site, and, page, contents, separated, by, commas">
<meta name="DESCRIPTION" content="Here is where you put a short sentence or two describing this page and it's goals">
<title>Free template #1 provided by www.free-templates.org (replace this title with your own)</title>
</head>

<body bgcolor="#B1D6E7">

<div align="center">
  <center>
  <table border="1" cellpadding="3" cellspacing="1" width="799" height="76">
    <tr>
      <td width="786" valign="top" align="center" bgcolor="#70B4D3" height="66"><font size="7" face="Arial" color="#000080">Place
        your logo and/or title here</font></td>
    </tr>
  </table>
  </center>
</div>
<center><b>Place a short line of text here.  This can help with
your search engine rankings.</b></center>
<div align="center">
  <center>
  <table border="0" cellpadding="3" cellspacing="1" width="813" height="581">
    <tr>
      <td width="748" colspan="3" align="center" height="19" bgcolor="#91C5DD"><b>
        -link1-        
        - link2-         
        -link3-        
        -link4-         
        -link5-        
        -link6-         
        -link7-          -link8-</b></td>
    </tr>
    <tr>
      <td width="44" height="524" valign="top" align="center">
        <div align="center">
          <table border="0" cellpadding="3" cellspacing="1" width="137">
            <tr>
              <td width="124" bgcolor="#2E7595">
                <p align="center"><font color="#FFFFFF"><b>Header Text</b></font></td>
            </tr>
            <tr>
              <td width="124" bgcolor="#D2E7F1">Link 1</td>
            </tr>
            <tr>
              <td width="124" bgcolor="#D2E7F1">Link 2</td>
            </tr>
            <tr>
              <td width="124" bgcolor="#D2E7F1">Link 3</td>
            </tr>
            <tr>
              <td width="124" bgcolor="#D2E7F1">Link 4</td>
            </tr>
            <tr>
              <td width="124" bgcolor="#D2E7F1">Link 5</td>
            </tr>
            <tr>
              <td width="124" bgcolor="#D2E7F1">Link 6</td>
            </tr>
            <tr>
              <td width="124" bgcolor="#D2E7F1">Link 7</td>
            </tr>
            <tr>
              <td width="124" bgcolor="#D2E7F1">Link 8</td>
            </tr>
          </table>
        </div>
        <div align="center">
          <table border="0" cellpadding="3" cellspacing="1" width="136" height="106">
            <tr>
              <td width="123" bgcolor="#F2F8FB" height="96">
                <p align="center"><b>Put an ad or a button or whatever here</b></td>
            </tr>
          </table>
        </div>
        <div align="center">
          <table border="0" cellpadding="3" cellspacing="1" width="136">
            <tr>
              <td width="125" bgcolor="#2E7595">
                <p align="center"><font color="#FFFFFF"><b>Header Text</b></font></td>
            </tr>
            <tr>
              <td width="125" bgcolor="#D2E7F1">Link 1</td>
            </tr>
            <tr>
              <td width="125" bgcolor="#D2E7F1">Link 2</td>
            </tr>
            <tr>
              <td width="125" bgcolor="#D2E7F1">Link 3</td>
            </tr>
            <tr>
              <td width="125" bgcolor="#D2E7F1">Link 4</td>
            </tr>
            <tr>
              <td width="125" bgcolor="#D2E7F1">Link 5</td>
            </tr>
            <tr>
              <td width="125" bgcolor="#D2E7F1">Link 6</td>
            </tr>
            <tr>
              <td width="125" bgcolor="#D2E7F1">Link 7</td>
            </tr>
            <tr>
              <td width="125" bgcolor="#D2E7F1">Link 8</td>
            </tr>
          </table>
        </div>
        <div align="center">
          <table border="0" cellpadding="3" cellspacing="1" width="136" height="112">
            <tr>
              <td width="125" align="center" bgcolor="#F2F8FB" height="104"><b>Put an ad or a button or whatever here</b></td>
            </tr>
          </table>
        </div>
      </td>
      <td width="654" height="524" valign="top" bgcolor="#F2F8FB">
        <p align="center"><b><font face="Arial" size="5">This would be the title
        of the page</font></b>.</p>
  </center>
      <p align="left">     <b><font size="2"><font face="Arial">Here is where you could put the
      main text and content of your site.  Include a couple paragraphs
      describing your site and it's goals.  Without sounding stupid, try to
      include as many of your keywords as you can.  This will help with
      your search engine rankings</font>.</font></b></p>
      <div align="center">
        <center>
        <table border="1" cellpadding="3" cellspacing="1" width="486" height="384">
          <tr>
            <td width="232" height="184" valign="top" align="center" bgcolor="#FFFFFF">Placing
              a graphic in this square could increase the attractiveness of your
              site.</td>
            <td width="232" height="184" valign="top" align="center" bgcolor="#FFFFFF">You
              could add a description of the graphic to the left, list your
              products, or special events.</td>
          </tr>
          <tr>
            <td width="232" height="180" valign="top" align="center" bgcolor="#FFFFFF">Add
              more text here or whatever.  You are probably getting the
              hang of it now.</td>
            <td width="232" height="180" valign="top" align="center" bgcolor="#FFFFFF">If
              you are going to add graphics to this square, stagger the images
              to be in opposite squares.</td>
          </tr>
        </table>
        </center>
      </div>
      <p>     Add a closing paragraph that contains the
      clincher. If you are selling a product, here is where you can put the
      reason why the potential buyer cannot live without it.  A testimonial
      or 2 would be great.   Or.... just pop a banner down here and
      earn some extra money. </p>
      <p align="center"><font size="2">Put a Guestbook or Counter here!<BR>Don't
      have a free one?  <a href="http://www.bravenet.com?afilid=3813648466" target="_blank">CLICK
      HERE</a></font></p>
    </td>
  <center>
      <td width="119" height="524" valign="top" align="center">
        <div align="center">
          <table border="0" cellpadding="3" cellspacing="1" height="264" width="116">
            <tr>
              <td height="256" width="105" bgcolor="#D2E7F1" valign="top" align="center"><b>This
                area is ideally used for that flashy banner ad. You could put
                button links to your favorite websites.</b></td>
            </tr>
          </table>
        </div>
        <div align="center">
          <table border="0" cellpadding="3" cellspacing="1" height="424" width="116">
            <tr>
              <td height="416" width="105" valign="top" align="center" bgcolor="#D2E7F1"><b>This
                area is ideally used for that flashy banner ad. You could put
                button links to your favorite websites.</b></td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td width="759" height="4" colspan="3" bgcolor="#70B4D3">
        <p align="center"><b>Put some ads or sponsors or more links or buttons
        or something else here!</b></td>
    </tr>
    <tr>
   <!-- PLEASE DO NOT REMOVE OR ALTER THE FOLLOWING SECTION GIVING FREE TEMPLATE CREDIT TO HTTP://FREE-TEMPLATES.ORG -->
      <td width="759" height="4" colspan="3">
        <p align="center"><b><font size="2" face="Arial">This template was provided
        free by  <a href="http://www.free-templates.org">www.free-templates.org</a> 
        </font></b></td>
    <!-- PLEASE DO NOT REMOVE OR ALTER THE ABOVE SECTION GIVING FREE TEMPLATE CREDIT TO HTTP://FREE-TEMPLATES.ORG-->   
    </tr>
  </table>
  </center>
</div>

</body>

</html>
wand die ik gedownlaod heb pakt ie niet op de sufer:(
 
Wat heeft dat dan weer voor nut, maar ga je maar eens photoshoppen leren en css, dan leer je je nog html, dan lukt het je wel om een layout te maken, zo heb ik het ook geleerd...
PS: je site zit vol typfouten
ja ben ook niet echt handig met nederlands:(
 
@opensourceweb: Het is geen site-check dus behandel gewoon de vraag en zeik hem niet af. Attendeer hem hier anders via e-mail op, en dan op een vriendelijkere manier.
ga je maar eens photoshoppen leren en css, dan leer je je nog html, dan lukt het je wel om een layout te maken, zo heb ik het ook geleerd
Dat jij het zo hebt geleerd betekent niet dat een ander dat ook zo eenvoudig leert. Daarnaast heeft Photoshop in dit hele verhaal maar een minimale rol te vervullen.

Ontopic:
Wanneer je tegenwoordig fatsoenlijke websites wilt afleveren kun je niet meer aankomen met een site die is opdeelt door middel van tabellen.

Een tabel is om data weer te geven, niet om ergens model aan te geven.

Download een gratis CSS template en verdiep je in de code, vervolgens kun je regels wijzigen om te zien wat er gebeurd. Zo leer je ook hoe bepaalde dingen reageren en wat je er mee kunt.
 
@opensourceweb: Het is geen site-check dus behandel gewoon de vraag en zeik hem niet af. Attendeer hem hier anders via e-mail op, en dan op een vriendelijkere manier.

Dat jij het zo hebt geleerd betekent niet dat een ander dat ook zo eenvoudig leert. Daarnaast heeft Photoshop in dit hele verhaal maar een minimale rol te vervullen.

Ontopic:
Wanneer je tegenwoordig fatsoenlijke websites wilt afleveren kun je niet meer aankomen met een site die is opdeelt door middel van tabellen.

Een tabel is om data weer te geven, niet om ergens model aan te geven.

Download een gratis CSS template en verdiep je in de code, vervolgens kun je regels wijzigen om te zien wat er gebeurd. Zo leer je ook hoe bepaalde dingen reageren en wat je er mee kunt.
bedankt voor de tip:thumb:
 
@opensourceweb: Het is geen site-check dus behandel gewoon de vraag en zeik hem niet af. Attendeer hem hier anders via e-mail op, en dan op een vriendelijkere manier.

Dat jij het zo hebt geleerd betekent niet dat een ander dat ook zo eenvoudig leert. Daarnaast heeft Photoshop in dit hele verhaal maar een minimale rol te vervullen.

Hoi,
Kijk eens bij al zijn berichten, hoevaak is er al gezegd dat hij html moet leren voordat hij iets kan, en zo gaat het ook met php.
En een css template heb ik hem ook al als voorbeeld gegeven...

Robin
 
Simpele Template 1
HTML:
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="CREATOR" content="Free templates provided by Doyle courtesy of http://free-templates.org">
<meta name="KEYWORDS" content="replace, these, words, that, describe, your, site, and, page, contents, separated, by, 
commas">
<meta name="DESCRIPTION" content="Here is where you put a short sentence or two describing this page and it's goals">
<title>Free website web page template #32 from www.free-templates.org</title>
</head>

<body bgcolor="#2D4151" link="#0066FF">

<div align="center">
  <center>
  <table border="0" cellpadding="0" cellspacing="0" width="820" height="765" background="images/template32.jpg">
    <tr>
      <td width="814" height="131" colspan="3">
        <div align="center">
          <table border="0" cellpadding="2" cellspacing="1" width="784" height="107">
            <tr>
              <td width="766" height="101">
                <p align="center"> 
                <p align="center">728x90 ad or banner</p>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
    <tr>
      <td width="814" height="13" colspan="3"> </td>
    </tr>
    <tr>
      <td width="169" height="621">
        <div align="right">
          <table border="0" cellpadding="2" cellspacing="1" width="146" height="140">
            <tr>
              <td width="136" height="11" valign="top">
                <p align="center">
                <b><font face="Arial">Navigation</font></b>
                </p>
            </td>
            </tr>
            <tr>
              <td width="136" height="13" valign="top">
                <b><font size="2" face="Arial">Linky</font></b></td>
            </tr>
            <tr>
              <td width="136" height="16" valign="top">
                <b><font size="2" face="Arial">Linky</font></b></td>
            </tr>
            <tr>
              <td width="136" height="16" valign="top">
                <b><font size="2" face="Arial">Linky</font></b></td>
            </tr>
            <tr>
              <td width="136" height="11" valign="top">
                <b><font size="2" face="Arial">Linky</font></b></td>
            </tr>
            <tr>
              <td width="136" height="11" valign="top">
                <b><font size="2" face="Arial">Linky</font></b></td>
            </tr>
            <tr>
              <td width="136" height="11" valign="top">
                <b><font size="2" face="Arial">Linky</font></b></td>
            </tr>
            <tr>
              <td width="136" height="10" valign="top">
                <b><font size="2" face="Arial">Linky</font></b></td>
            </tr>
            <tr>
              <td width="136" height="5" valign="top">
                <b><font size="2" face="Arial">Linky</font></b></td>
            </tr>
            <tr>
              <td width="136" height="10" valign="top">
                <b><font size="2" face="Arial">Linky</font></b></td>
            </tr>
            <tr>
              <td width="136" height="20" valign="top">
                <b><font size="2" face="Arial">Linky</font></b></td>
            </tr>
          </table>
        </div>
  <center>
        <div align="center">
          <table border="0" cellpadding="2" cellspacing="1" width="144" height="330" align="right">
            <tr>
              <td width="134" height="21"></td>
            </tr>
            <tr>
              <td width="134" height="258">
                <p align="center">Replace this text with 120x240 ad or text. Do
                not put anything in these vertical boxes wider than 120 pixels
                wide. It will distort the entire layout.</td>
            </tr>
            <tr>
              <td width="134" height="45">
                <p align="center">88x31 button</td>
            </tr>
          </table>
        </div>
      </center>
      </td>
      <td width="8" height="621"> </td>
      <td width="637" height="621">
        <div align="center">
          <table border="0" cellpadding="3" cellspacing="1" width="604" height="604">
            <tr>
              <td width="593" height="596" valign="top">
                 <p align="center"><b><font face="Arial">Header Text Goes Here</font></b></p>
              <p align="left">              You are welcome to modify
              this template to suit your needs. <b>All I ask is that you do not
              remove the link to my site: <a href="http://free-templates.org" target="_blank">http://free-templates.org</a>
              found at the bottom of this page.</b> I put many hours in the
              layout of this template to make your web design easier.
              <p align="left">               This web page is set up
              to be a certain distance from top to bottom. The template will
              distort if you add too much content to this box. If it starts
              looking funny at the bottom, you will need to remove some content.
              The links on the left behave the same way. You can only use 1
              short line of text (1 or 2 words) to replace the "Linky".
              Making it go to 2 lines will distort the template.
              <p align="left">     Other than that, there is
              nothing to it <b> :-)</b>
                <p align="center">Good Luck!</p>
                <p align="center">Need a free guestbook or hit counter to put
                here?<br>
                <a href="http://www.bravenet.com?afilid=3813648466" target="_blank"><b>CLICK
                HERE</b></a></p>
</center>
            </td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
  </table>
</div>
<p align="center"><a href="index.html"><font size="4"><b>HOME</b></font></a></p>

</body>

</html>
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan