Layout Coderen

Status
Niet open voor verdere reacties.
S

samoerie

Gebruiker
Lid geworden
31 jan 2011
Berichten
217
Hallo, ik ben Samer.

Ik heb een layout met paint gemaakt. Alleen nu wil ik hem HTML maken..... hoe kan dat? Of is er geen mogelijkheid?
 
In paint? Waarom niet in photoshop?
Met photoshop kun je makkelijk snijden in de layout en opslaan als html.
 
Oeps, het is idd met photoshop gemaakt xD zat te denken aan paint!
 
Maar ehh.... hoe zit dat nu? Hoe krijg ik hem .html?



OEPS! Sorry voor dubbelpost ik dacht dat hij automatich bij de vorige ging :S kon ik hem maar verwijderen :(
 
Laatst bewerkt:
klopt. maar met paint kan het ook wel lukken. alleen word het moeilijker om hem in een site te weergeven.
 
Ik zie net: Het is gemaakt met Paint.net GEEN PAINT! Maar: Paint.net! Weet iemand hoe ik .html maak?
 
weetje, eigenlijk waar heb je de layout voor nodig? want als je een layout via een tekenprogramma gaat maken, moet je hem alsnog zelf helemaal gaan coderen.
deze codes moet je zelf allemaal in kladblok ofzo maken.
als je dat af hebt, moet je :''bestanden" - ''opslaan als'' - ''alle bestanden'' - en als naam ''index.html''
dan kun je zien hoe je layout eruit ziet als je die op een site hebt staan.
als je alles met afbeeldingen wilt doen, dan kun je het wel gaan vergeten, want een layout kan alleen gemaakt worden in css. in html gaat dat eigenlijk onmogelijk worden.
css is bijna het zelfde als html. heb er niet genoeg verstand van om het uit te leggen wat het verschil is. maar wat je ook kan doen is ''web page maker'' downloaden. daarmee kun je de afbeelding in web page maker zetten, en dan kun je menu en alles toevoegen. Alleen moet je wel van je site waar je hem op wil hosten moet je de host van je site weten, gebruikersnaam, wachtwoord en de poort. dan kun je makkelijk een hele mooie site maken :). maar ik houd het bij html en css.
hier heb je wel een kopie van een layout, css code van 'habbo'. dit kun je allemaal aanpassen door je afbeeldingen in een site te zetten. dan kun je de css zo op je site plaatsen, maar de provider moet wel html en css ondersteunen, als dat niet zo is, zul je het met basis layouts moeten doen. maar hier is je code.
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Language" content="en-gb">
<base target="I1">
<title>DanceHabbo - Bringing the summer to you!</title>
<style type="text/css">
p
{
font: 900 12px verdana
}
</style>
<style type="text/css">
body {
	font: 10px verdana;
	text-align:left;
	color: #000000;
	margin:10px auto 10 auto;
}

a {	font: 10px verdana; }
a:link    { color: #24C2FF; }
a:visited { color: #24C2FF; }
a:hover   { text-decoration: none; color: #D8FF00; }
a:active  { color: #24C2FF; }

body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #000000;
}

.style5 {font-size: 9px}

.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:left;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}

.submenu{
margin-bottom: 0.5em;
margin-left: 1em;
text-align:left;
}
</style>
</head>

<body id="layout" background="images/bg.gif" topmargin="2" bottommargin="1" style="text-align: center" leftmargin="1" rightmargin="1" marginwidth="1" marginheight="1">
<table width="953" height="625" border="0" align="center" cellpadding="0" cellspacing="0" id="HFFM_v6">
<tr>
		<td class="img_01" colspan="3"><img border="0" src="images/index.2.gif"></td>
  </tr>
<tr>
		<td class="img_01" colspan="3">
		<div align="center">
			<table border="0" width="909" cellspacing="0" cellpadding="0" height="27">
				<tr>
					<td background="images/index.4.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000" width="910" height="28">
					<table border="0" width="100%" cellspacing="0" cellpadding="0">
						<tr>
							<td width="76"><b><font color="#FFFFFF">&nbsp; DJ 
							Says:</font></b></td>
							<td><b><font color="#FFFFFF">
							<marquee>DJ Says here :D</marquee></font></b></td>
						</tr>
					</table>
					</td>
				</tr>
			</table>
		</div>
		</td>
  </tr>
	<tr>
	  <td class="img_02" rowspan="4" width="5"></td>
	</tr>
	<tr>
	  <td align="center" valign="top" class="img_09" width="206">
		<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>
				<TABLE id="Table_03" cellSpacing="0" cellPadding="0" border="0">
					<TR>
						<TD width="170" height="35" background="index.5.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left"><font size="1">&nbsp; </font>
						<font size="1" color="#FFFFFF">Navigation</font></TD>
					</TR>
					<TR>
						<TD vAlign="top" align="middle" background="images/index.6.gif" height="26" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left">
				<!-- Keep all menus within masterdiv-->
						</TD>
					</TR>
					<TR>
						<TD style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<img border="0" src="images/index.7.gif"></TD>
					</TR>
					<TBODY>
					</TBODY>
				</TABLE></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>
				<TABLE id="Table_4" cellSpacing="0" cellPadding="0" border="0">
					<TR>
						<TD width="170" height="35" background="index.5.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left"><font size="1">&nbsp; </font>
						<font size="1" color="#FFFFFF">Radio Box</font></TD>
					</TR>
					<TR>
						<TD vAlign="top" align="middle" background="images/index.6.gif" height="26" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left">
				<!-- Keep all menus within masterdiv-->
						</TD>
					</TR>
					<TR>
						<TD style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<img border="0" src="images/index.7.gif"></TD>
					</TR>
					<TBODY>
					</TBODY>
				</TABLE></td>
			</tr>
			<tr>
				<td>&nbsp;</td>
			</tr>
		</table>
		<table border="0" width="100%" cellspacing="0" cellpadding="0">
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
				<TABLE id="Table_5" cellSpacing="0" cellPadding="0" border="0">
					<TR>
						<TD width="170" height="35" background="index.5.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left"><font size="1">&nbsp;
						<font color="#FFFFFF">Featured Content</font></font></TD>
					</TR>
					<TR>
						<TD vAlign="top" align="middle" background="images/index.6.gif" height="26" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left">
				<!-- Keep all menus within masterdiv-->
						</TD>
					</TR>
					<TR>
						<TD style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<img border="0" src="images/index.7.gif"></TD>
					</TR>
					<TBODY>
					</TBODY>
				</TABLE></td>
			</tr>
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">&nbsp;</td>
			</tr>
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
				<TABLE id="Table_6" cellSpacing="0" cellPadding="0" border="0">
					<TR>
						<TD width="170" height="35" background="index.5.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left"><font size="1">&nbsp;
						<font color="#FFFFFF">Poll</font></font></TD>
					</TR>
					<TR>
						<TD vAlign="top" align="middle" background="images/index.6.gif" height="26" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<p align="left">
				<!-- Keep all menus within masterdiv-->
						</TD>
					</TR>
					<TR>
						<TD style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
						<img border="0" src="images/index.7.gif"></TD>
					</TR>
					<TBODY>
					</TBODY>
				</TABLE></td>
			</tr>
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">&nbsp;</td>
			</tr>
		</table>
		<p>
		  <br>
          </td>
	  <td height="485" rowspan="3" valign="top" width="754" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
		<div align="right">
		<table border="0" width="94%" cellspacing="0" cellpadding="0" align="right">
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">&nbsp;</td>
			</tr>
			<tr>
				<td background="index.8.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000" height="36">
				<p align="left"><font size="1">&nbsp; </font>
				<font size="1" color="#FFFFFF">Content</font></td>
			</tr>
			<tr>
				<td background="images/index.9.gif" style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">&nbsp;</td>
			</tr>
			<tr>
				<td style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000000">
				<img border="0" src="images/index.10.gif"></td>
			</tr>
		</table>
		</div>
		</td>
	</tr>
	</table>
</body>
</html>

veel plezier ermee :).
 
Wil toch nog even zeggen dat CSS en HTML niet hetzelfde zijn en ook niet bijna. HTML is eigenlijk (kort door de bocht) voor de teksten en CSS (weer kort door de bocht) voor de layout.
 
Ik heb hem nu in html door photoshop. Maar nu heb ik weer een ander probleem rechts en onder is er nog een stuk leeg.... Ligt niet aan de layout.... maar heel die layout zie ik alleen onder en rechts is het nog leeg.... hoe zorg ik dat heel die layout over heel de site gaat??
 
Mischien is het toch beter om je website in div's te bouwen
anders ff je tbody breedte op 100% zetten en de background-repeat:repeat-x
 
Ik zie in het script niets van background of body width......
En ik wil liever gewoon zo slicen..... Niemand oplossing?
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan