Het creëren van een HTML template helpt u snel toekomst pagina's van een website te bouwen . Kopieer code van de template en plak het in de editor om een nieuwe pagina te maken . Met behulp van divs betekent dat u gemakkelijk de lay-out van uw website door het bewerken van een bestand kunnen veranderen : het CSS- bestand, dat de lay-out van de divs over de hele site beheert . Wat je
HTML /CSS editor naar keuze
Need Toon Meer Aanwijzingen
1 Maak een HTML-bestand in een editor naar keuze .
< Br > 2 Voeg de volgende HTML code , die de structuur van uw pagina creëert en bevat een link naar het CSS-bestand . ( De CSS- bestand wordt aangemaakt in een later stadium . )
Layout <br> 1 < /title > < br > <p> <link type="text/css" media="screen" rel="stylesheet" href="MyName.css" /> <br> <p> < /head > <br> <p > <body> <p> < /body > Telefoonkaarten <p> < /html > <br> <p> Voeg een titel van uw keuze om de tekst " Lay-out 1 " te vervangen . < br > <br> 3 <p> Voeg de volgende " divs " tussen de " <body> " tags. <p> <div id="header"> <br> <p> <br> header <br> <p> < /div > <div <p> id="navigation"> <p> Navigatie <br> <p> <br> < /div > <br> <p > id="content"> <p> Content <br> <p> <br> < /div > <div <p> id="footer"> <br> <div <p > Footer <p> < /div > <br> <p> <br> Dit is een typische lay-out voor een webpagina . De " Header " verwijst naar de bovenkant van de pagina , het menu bevindt zich onder . De belangrijkste inhoud van elke afzonderlijke pagina gaat in de sectie "Inhoud" en de sectie " voettekst" herbergt meestal onderaan menu op een webpagina . Elke sectie heeft een ID die wordt gebruikt door het CSS-bestand te verwijzen naar elk element en plaats het in het desbetreffende gedeelte van de pagina . <br> 4 <p> Sla de pagina . ( Zorg ervoor dat het wordt opgeslagen als een " . Html " bestand . ) <br> 5 <p> Maak een nieuwe " . Css " bestand . <br> <p> Insert 6 code van de lay-out voor de algehele document en vervolgens toevoegen en manipuleren het lettertype en de achtergrondkleur met de volgende code : <br> <p> * { margin <p> <br> : 0 ; <p> padding <br> : 0 ; <br> <p > } <p> lichaam <br> { <p> achtergrond | : # eeeeee ; <p> font-family <br> : sans - serif ; <p> font-size <br> : 12px ; <br> <p> } <br> 7 <p> In de stijl voor de header div , die de hoogte en de kleur zal bepalen : <p> div # header <br> { <p> hoogte <br> : 160px ; <p> achtergrond | : # 800000 ; } <p> <br> 8 <p> <br> Definieer de stijl voor de andere div elementen van de pagina : de " navigatie " , de " inhoud " en de " footer " : <p> div # navigatie <br> { <p> achtergrond | : wit; <p> breedte <br> : 25 % ; <p> float <br> : left ; <br> <p > } <p> div beelden # inhoud { <p> margin <br> : 0 25 % ; <p> achtergrond | : # BDBD00 ; <br> <p> } <p> div <br> # footer { <p> achtergrond | : # 800000 ; <p> breedte <br> : 100 % ; <br> <p> duidelijk : links; <br> <p> } <br> 9 <p > Sla het bestand op als " MyName.css " . <br> <p> Test 10 de pagina in een browser door het openen van de HTML- pagina die je net hebt aangemaakt . Kopieer de HTML-code en voeg toepassing inhoud om elke nieuwe pagina voor uw website te creëren . <br> <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/software/open-source-code/201309/144045.html' >Wat betekent Open Source Mean ? </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/software/open-source-code/201309/144047.html' >Problemen met OpenOffice & Foxfire </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Open Source Code</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/open-source-code/201309/144063.html" title="Definieer Mapserver " target="_self">Definieer Mapserver </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/open-source-code/201309/143925.html" title="Hoe uw website titel in Kompozer Verander " target="_self">Hoe uw website titel in Kompoz…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/open-source-code/201309/144151.html" title="Linux Geheugenlekkage Gereedschap " target="_self">Linux Geheugenlekkage Gereedsc…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/open-source-code/201309/144237.html" title="Hoe te installeren Java JDK 1.5 " target="_self">Hoe te installeren Java JDK 1.…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/open-source-code/201309/143951.html" title="Hoe maak je een Facebook Connect voor WordPress Maak " target="_self">Hoe maak je een Facebook Conne…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/open-source-code/201309/144197.html" title="Corel Draw 8 Tutorial " target="_self">Corel Draw 8 Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/open-source-code/201309/143725.html" title="Hoe je CSS aanpassen naar Shift de hele rechter kolom dan in PrestaShop " target="_self">Hoe je CSS aanpassen naar Shif…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/open-source-code/201309/144103.html" title="Hoe te Tomcat configureren voor gebruik van een proxyserver " target="_self">Hoe te Tomcat configureren voo…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/open-source-code/201309/144084.html" title="Hoe te openen Office Calculator en Capitalize Maanden " target="_self">Hoe te openen Office Calculato…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/software/word-processing-software/201309/181073.html' target="_self">Hoe maak je een Tilde gebruiken in een W…</a><br><a class='LinkArticleCorrelative' href='/software/word-processing-software/201309/181072.html' target="_self">Hoe kan ik een Umlaut gebruiken in een W…</a><br><a class='LinkArticleCorrelative' href='/software/word-processing-software/201309/181071.html' target="_self">Hoe maak je een Holiday Nieuwsbrief op u…</a><br><a class='LinkArticleCorrelative' href='/software/word-processing-software/201309/181070.html' target="_self">Hoe maak je een viervoudige Wenskaart ma…</a><br><a class='LinkArticleCorrelative' href='/software/word-processing-software/201309/181069.html' target="_self">Hoe maak je een Tent - Fold Wenskaart Ma…</a><br><a class='LinkArticleCorrelative' href='/software/word-processing-software/201309/181068.html' target="_self">Hoe te Spelling en grammatica fouten te …</a><br><a class='LinkArticleCorrelative' href='/software/word-processing-software/201309/181067.html' target="_self">Hoe kan ik een document Zoom in Word 200…</a><br><a class='LinkArticleCorrelative' href='/software/word-processing-software/201309/181066.html' target="_self">Hoe je tekst rond een afbeelding in Word…</a><br><a class='LinkArticleCorrelative' href='/software/word-processing-software/201309/181065.html' target="_self">Hoe je de uitlijning van de tekst wijzig…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Software Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/word-processing-software/201309/176204.html" title="Hoe je Ouderlijk toezicht Impose in Word 2003 " target="_self">Hoe je Ouderlijk toezicht Impose in Word…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/word-processing-software/201309/175988.html" title="Hoe je tekst Wijzig naar Old Engels " target="_self">Hoe je tekst Wijzig naar Old Engels </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/photoshop/201309/148153.html" title="Hoe te Transparantie Effecten maken in Photoshop " target="_self">Hoe te Transparantie Effecten maken in P…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/pc-games/201309/146918.html" title="Hoe Rip DVD Games " target="_self">Hoe Rip DVD Games </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/audio-software/201309/107105.html" title="Hoe maak je een WAV -bestand te spelen op een PC " target="_self">Hoe maak je een WAV -bestand te spelen o…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/microsoft-access/201309/134624.html" title="Hoe te converteren naar UTM breedte-en lengtegraad in Excel " target="_self">Hoe te converteren naar UTM breedte-en l…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/desktop-video/201309/120429.html" title="Hoe te Voice In een film " target="_self">Hoe te Voice In een film </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/database-software/201309/114509.html" title="Hoe maak je een Macro converteren naar code in Access 2007 " target="_self">Hoe maak je een Macro converteren naar c…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/software/gimp/201309/133395.html" title="Hoe te gebruiken Gimp Wimpers " target="_self">Hoe te gebruiken Gimp Wimpers </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
