pagina indeling zelfde als index

kar · 08 jul 2010, 08:23

Hallo,
Ik heb volgende vraag, ik heb en website in dreamweaver CS3 en ik zou ieder nieuwe paginag hetzelfde uitzicht willen ,zoals de index pagina zonder dat ik de code van hetgeen ik op de volgende pagina wens, moet copieren
hieronder de code die op iedere pagina zou moeten komen
Alvast Bedankt
mvg
karel

<div align="center">
<table width=100%>
<tr>
<td>
<img src="Image/logo_links.jpg" width="116" height="155"border="1"></td>

<td><h1><center><font color="#0000FF">Verenigde Antwerpse Seingevers
Merksem</h1><br/><center>Lokaal: Cafe & Feestzaal "Bart" Sint Bartholomeusstraat 9a Merksem</center></td>
<td>
<img src="Image/Veldrijden.jpg"border="1"align="right"></td>
</tr></table></div>
<hr color="#ffffff">

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Listamatic: Rollover horizontal list</title>
<style type="text/css" media="screen"></style>
<link rel="SHORTCUT ICON" href="/listamatic/listamatic.ico">
<style type="text/css">
#navlist { width:100%; }

ul#navlist
{
margin-left: 30px;
padding-left: 0;
white-space: nowrap;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a { padding: 3px 10px; }

#navlist a:link, #navlist a:visited{

color: #fff;
background-color: #C44C4C;
text-decoration: none;
}

#navlist a:hover
{
color: #fff;
background-color: #C44C4C;
text-decoration: none;
}

</style>
</head>
<div id="navcontainer">
<ul id="navlist"><center>
<li id="active"><a href="index.html">Home</a></li>
<li> <a href="Bestuur.html">Bestuur</a></li>
<li><a href="Kalender.html">Kalender</a></li>
<li><a href="foto's.html">foto,s</a></li>
<li><a href="info.html">Info</a></li>
<li><a href="Nieuws.html">Nieuws</a></li>
<li><a href="http://www.feestzaalbart.be">Lokaal</a></li>
</ul>
<hr color="#FFFFFF">
</div>
</div>

<td><center>
<p><img align "left" src="Image/Belgie.gif" width="85" height="90"border="" scr="Image/Belgie.gif">  
<a href="Nieuws.html"><img src="Image/KBWB (75 x 90).jpg" width="75" height="90" alt="KBWB"></a>
<img src="Image/logo_1.jpg"border="1">
<img src="Image/logo_2.jpg"border="1">
<img src="Image/logo_3.jpg"border="1">
<a href="http://www.wielerbondvlaanderen.be/"><img src="Image/logo_0.jpg"border="1"></a>
<img src="Image/logo_4.jpg"border="1">
<a href="http://www.uci.ch/templates/UCI/UCI2/la ... yMjQ"><img src="Image/logo_5.jpg"border="1"></a></p> en plakken

defietser · 08 jul 2010, 14:52

In dreamweaver opslaan als template en dan een nieuwe pagina aanmaken van die template
Mvg
Defietser

kar · 08 jul 2010, 17:03

Hallo
Bedankt voor het snelle antwoord , ga het direkt uittesten
mvg
karel

coderunner · 08 jul 2010, 17:45

Beste Karel,

Voor je doet wat "de fietser" zegt, zou ik je aanraden eerst grondig je bovenstaande broncode na te kijken en te verbeteren daar de volgorde voor de opbouw van een html pagina niet wordt gerespecteerd wat problemen gaat opleveren.

De opbouw van een html bestand ziet er als volgt uit

Code: Selecteer alles

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
		
		<title>...</title>
		
		<style type="text/css"> 
		... 
		</style> 
	</head> 

<body>



</body>

</html>

Meer uitleg hierover vind je op volgende link: >>> HTML - Intro en opbouw <<<

mvg,
Coderunner

coderunner · 08 jul 2010, 18:15

Beste Karel,

Ziehier de aangepaste en verbeterde code

Code: Selecteer alles

<html>

	<head>

	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> 
	<title>V.A.S.</title> 


		<style type="text/css">
		body
		{
		background-color: #BFBFBF;
		}
		#navlist { width:100%; } 
		
		ul#navlist 
		{ 
		margin-left: 30px; 
		padding-left: 0; 
		white-space: nowrap; 
		} 
		
		#navlist li 
		{ 
		display: inline; 
		list-style-type: none; 
		} 
		
		#navlist a 
		{
		padding: 3px 10px; 
		} 
		
		#navlist a:link, #navlist a:visited
		{
		color: #fff; 
		background-color: #C44C4C; 
		text-decoration: none; 
		} 
		
		#navlist a:hover 
		{ 
		color: #fff; 
		background-color: #C44C4C; 
		text-decoration: none; 
		} 

		</style> 

	</head> 

<body>

	<div align="center"> 
		<table width=100%> 
			<tr> 
				<td> 
				<img src="Image/logo_links.jpg" width="116" height="155"border="1">
				</td>

				<td><center><font color="#0000FF"><h1>Verenigde Antwerpse Seingevers Merksem</h1><br/>
				Lokaal:&nbsp;Cafe & Feestzaal&nbsp;&quot;Bart&quot;&nbsp;Sint Bartholomeusstraat 9a Merksem</font></center>
				</td>

				<td> 
				<img src="Image/Veldrijden.jpg"border="1"align="right">
				</td>
			</tr>
		</table>
	</div>

	<hr color="#ffffff"> 

	<div id="navcontainer"> 
		<ul id="navlist"><center> 
			<li id="active"><a href="index.html">Home</a></li> 
			<li><a href="Bestuur.html">Bestuur</a></li> 
			<li><a href="Kalender.html">Kalender</a></li> 
			<li><a href="foto's.html">foto,s</a></li> 
			<li><a href="info.html">Info</a></li> 
			<li><a href="Nieuws.html">Nieuws</a></li> 
			<li><a href="http://www.feestzaalbart.be">Lokaal</a></li> 
		</ul> 
 	</div> 

	<hr color="#FFFFFF">

	<div align="center"> 
		<p>
			<img align "left" src="Image/Belgie.gif" width="85" height="90"border="" scr="Image/Belgie.gif">&nbsp;&nbsp; 
			<a href="Nieuws.html"><img src="Image/KBWB (75 x 90).jpg" width="75" height="90" alt="KBWB"></a> 
			<img src="Image/logo_1.jpg"border="1"> 
			<img src="Image/logo_2.jpg"border="1"> 
			<img src="Image/logo_3.jpg"border="1"> 
			<a href="http://www.wielerbondvlaanderen.be/"><img src="Image/logo_0.jpg"border="1"></a> 
			<img src="Image/logo_4.jpg"border="1"> 
			<a href="http://www.uci.ch/templates/UCI/UCI2/layout.asp?MenuId=MTUyMjQ"><img src="Image/logo_5.jpg"border="1"></a>
		</p>
	</div>
		
</body>

</html>

mvg,
Coderunner

kar · 08 jul 2010, 18:47

Hallo coderunner
alvast bedankt,ik heb je verbeterde code een copy gemaakt en geplakt in een nieuwe doc in dreamw geeft hij het goed maar in de test op expl alleen tekst code ,voor ik de index pag aanpas zou ik eerst graag die template pag maken
mvg
karel

coderunner · 08 jul 2010, 19:01

Beste Karel,

Je hebt in Dreamweaver de verbeterde code toch geplakt in het broncode-scherm.

mvg,
Coderunner

kar · 08 jul 2010, 19:18

hallo coderunner
Er is blijkbaar toch iets mis met explorer hier, als ik de test via opera doe gaat het wel ...is wel goed geplakt in de bron pagina
Ik heb je sugestie in de andere topic opgevolgd in verband met explorer maar dit heeft geen result gehad
alvast bedankt
karel

coderunner · 08 jul 2010, 19:40

Beste Karel,

De hogervermelde verbeterde code moet werken in alle browsers daar het allemaal standaard codes zijn.

Dan is er blijkbaar, zoals je zelf zegt, toch iets mis met je Internet Explorer (zie ook je andere geopende topic i.v.m. problemen om topics te openen op seniorennet).

Heb je al geprobeerd Internet Explorer terug te zetten naar zijn standaard instellingen ?

Je probleem met IE is meer een topic om onder "Software" te plaatsen i.p.v. onder "Eigen website".

Daar zal je meer respons krijgen om dit probleem op te lossen.

mvg,
Coderunner

defietser · 08 jul 2010, 20:46

@karel
Je maakt een website met dreamweaver. Het eerste wat je vindt in een nieuwe html pagina bij dreamweaver is een doctype

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Waarom ontbreekt die bij U?
Dat kan al voor een probleem zorgen in een browser.
haal uw code door een validator bv.
http://jigsaw.w3.org/css-validator/en
http://validator.w3.org/ en je css is Dit document is gevalideerd als CSS versie 2.1 !
Dat is al een goed punt
Maak nu eens een pagina aan met een doctype
Ik heb zelf eens die code die de coderunner had aangepast en verbeterd door de validator gehaald ongeveer 48 errors en enkele warnings
Ik heb die nu zelf eens die html verbeterd een doctype gegeven en door de validator gehaald
Nog een warning waar je niet moet over tobben "Using Direct Input mode: UTF-8 character encoding assumed"
Van de css heb ik een externe stylsheet gemaakt die in de pagina wordt geladen hier volgen ze:
De html

Code: Selecteer alles

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
      <table width="100%" align="center">
         <tr>
            <td><img src="Image/logo_links.jpg" width="116" height="155" border="1" alt=""/>
            </td>

            <td align="center" valign="middle"><h1>Verenigde Antwerpse Seingevers Merksem</h1><br/>
            Lokaal:&nbsp;Cafe & Feestzaal&nbsp;&quot;Bart&quot;&nbsp;Sint Bartholomeusstraat 9a Merksem
            </td>

            <td>
            <img src="Image/Veldrijden.jpg" border="1" align="right" alt=""/>
            </td>
         </tr>
      </table>
   

   <hr/>

   <div id="navcontainer">
      <ul id="navlist">
         <li><a href="index.html">Home</a></li>
         <li><a href="Bestuur.html">Bestuur</a></li>
         <li><a href="Kalender.html">Kalender</a></li>
         <li><a href="foto's.html">foto,s</a></li>
         <li><a href="info.html">Info</a></li>
         <li><a href="Nieuws.html">Nieuws</a></li>
         <li><a href="http://www.feestzaalbart.be">Lokaal</a></li>
      </ul>
</div>

   <hr/>

   <div align="center">
      <p>
         <img align="left" src="Image/Belgie.gif" width="85" height="90" border="" alt=""/>&nbsp;&nbsp;<a href="Nieuws.html"><img src="Image/KBWB (75 x 90).jpg" width="75" height="90" alt="KBWB"/></a><img src="Image/logo_1.jpg" border="1" alt=""/><img src="Image/logo_2.jpg" border="1" alt=""/>
         <img src="Image/logo_3.jpg" border="1" alt=""/>
         <a href="http://www.wielerbondvlaanderen.be/"><img src="Image/logo_0.jpg" border="1" alt=""/></a>
         <img src="Image/logo_4.jpg" border="1" alt=""/>
         <a href="http://www.uci.ch/templates/UCI/UCI2/layout.asp?MenuId=MTUyMjQ"><img src="Image/logo_5.jpg" border="1" alt=""/></a>
      </p>
   </div>
      
</body>
</html>

De css

Code: Selecteer alles

@charset "utf-8";
/* CSS Document */
 body
      {
      background-color: #BFBFBF;
      }
      #navlist {
	width:100%;
	text-align: center;
}
      
      ul#navlist
      {
      margin-left: 30px;
      padding-left: 0;
      white-space: nowrap;
      }
      
      #navlist li
      {
      display: inline;
      list-style-type: none;
      }
      
      #navlist a
      {
      padding: 3px 10px;
      }
      
      #navlist a:link, #navlist a:visited
      {
      color: #fff;
      background-color: #C44C4C;
      text-decoration: none;
      }
      
      #navlist a:hover
      {
      color: #fff;
      background-color: #C44C4C;
      text-decoration: none;
      }

Mvg
Defietser

coderunner · 08 jul 2010, 21:55

defietser schreef:Ik heb zelf eens die code die de coderunner had aangepast en verbeterd door de validator gehaald ongeveer 48 errors en enkele warnings

Helabah ... wel graag juiste informatie doorgeven hé ...

Het al dan niet geven van errors en warnings in een validator hangt af van het gebruikte DOCTYP. Wanneer je er een verkeerd DOCTYP bovenplakt en dan gaat valideren kan het aantal errors en warnings verschillen! Wanneer er GEEN DOCTYP geplaatst wordt gaat een validator daar zelf een DOCTYPE aan geven en dan ook zullen het aantal errors en warnings verschillen.
Wanneer ik aan jouw code een andere DOCTYP meegeef dan zal deze ook weer andere errors en warnings geven hoor!

De errors die jij hierboven aanhaalt zijn niet noodzakelijk fouten maar oudere html codes zoals <center> <br> enz ... of het niet toevoegen van het attribuut alt="" in de img tag. Deze worden met een DOCTYP bestempeld als onjuist voor dat gebruikte DOCTYP maar zijn daarvoor niet echt fout.
Wanneer bv. Dreamweaver nog gebruik maakt van deze codes dan zal de validator deze wel markeren als error natuurlijk. Ik gebruik dit programma niet dus ik weet niet of het programma deze codes heeft geplaatst of dit manueel werd gedaan.

Ik heb me dan ook alleen beperkt tot het ordenen van de hierboven geplaatste html code tot de normale html opmaak en niet tot het verbeteren van de code zelf.

mvg,
Coderunner

defietser · 09 jul 2010, 07:52

@coderunner

Helabah ... wel graag juiste informatie doorgeven hé ... Smile
Het al dan niet geven van errors en warnings in een validator hangt af van het gebruikte DOCTYP. Wanneer je er een verkeerd DOCTYP bovenplakt en dan gaat valideren kan het aantal errors en warnings verschillen! enz

Volledig mee akkoord. Hopelijk verstaat Kar die uitleg ook.
Want wat ik tussen de lijntjes lees van Kar zijn vraag

Hallo,
Ik heb volgende vraag, ik heb en website in dreamweaver CS3 en ik zou ieder nieuwe paginag hetzelfde uitzicht willen ,zoals de index pagina zonder dat ik de code van hetgeen ik op de volgende pagina wens, moet copieren

Is hij in het bezit van dreamweaver C3 maar heeft hij het programma niet onder de knie denk ik.
Mvg
Defietser

kar · 09 jul 2010, 10:31

Hallo fietser en coderunner en de rest
De tekst hieronder staat toch in ieder doc dat in dreamw , waar ontbreekt dat !
wanneer ge een nieuw doc (pagina) maakt wordt toch auto onderstaande tekst aangemaakt

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

mvg
karel
alvast bedankt voor de hulp

defietser · 09 jul 2010, 12:15

Hallo fietser en coderunner en de rest
De tekst hieronder staat toch in ieder doc dat in dreamw , waar ontbreekt dat !
wanneer ge een nieuw doc (pagina) maakt wordt toch auto onderstaande tekst aangemaakt

Hier ontbreekt dat, uw eerste code die je geeft

de van hetgeen ik op de volgende pagina wens, moet copieren
hieronder de code die op iedere pagina zou moeten komen
Alvast Bedankt
mvg
karel

<div align="center">
<table width=100%>
<tr>
<td>
<img src="Image/logo_links.jpg" width="116" height="155"border="1"></td>

<td><h1><center><font color="#0000FF">Verenigde Antwerpse Seingevers
Merksem</h1><br/><center>Lokaal: Cafe & Feestzaal "Bart" Sint Bartholomeusstraat 9a Merksem</center></td>
<td>
<img src="Image/Veldrijden.jpg"border="1"align="right"></td>
</tr></table></div>
<hr color="#ffffff">

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Listamatic: Rollover horizontal list</title>
<style type="text/css" media="screen"></style>
<link rel="SHORTCUT ICON" href="/listamatic/listamatic.ico">
<style type="text/css">
#navlist { width:100%; }

ul#navlist
{
margin-left: 30px;
padding-left: 0;
white-space: nowrap;
} enz..

Waar staat dat doctype hierboven in die code?
Als je begint met een onvolledige code te geven hoe wil je dan dat je een correct antwoord krijgt?

En wat de coderunner betreft ze mogen hier tevreden zijn op het forum dat er een zo toegewijd persoon aanwezig is. Want wat die met een engelen geduld voor iedereen probeert een oplossing te bieden is fenomenaal, en dat mag ook eens gezegd worden !!
Karel suc6 met site.
Mvg
Defietser

ultddave · 11 jul 2010, 13:01

@Francois; Dat is een heel slechte manier. Als je je footer wilt veranderen, moet je manueel alle footers in al je HTML pagina's aanpassen ten gevolge van je huidige manier van werken.

Een betere methode zou zijn om een footer.html pagina aan te maken waarin enkel de HTML code van de footer staat (dus zonder body, head, html tags - Enkel de code van de footer zelf). En dan in elke pagina zoals test1.html test2.html , ... deze code te zetten;

<?php
include_once('footer.html');
?>

(footer.html moet hiervoor in dezelfde map zitten. Als hij in een apparte map zit genaamd 'includes' bijvoorbeeld, wordt het dit;

<?php
include_once('includes/footer.html');
?>

Als de footer dan verandert moet worden, moet je enkel die footer.html aanpassen. En dan wordt dat toegepast voor elke pagina die footer.html include.

**********

Een nog betere methode is om gebruik te maken van de MVC (Model-View-Controller) architectuur, waarbij je dus HTML code en programmadata (PHP bijvoorbeeld) van elkaar scheidt en dus volledig dynamische pagina's maakt met templates.
Ik heb bijvoorbeeld 1 template.php pagina waarin ik dus afhankelijk van de parameters die worden meegegeven, bepaalde CSS files inlaad en bepaalde Models inlaad.

Bijvoorbeeld "index.php?page=index" laadt dan template.php in. En in die template.php wordt dan aangevuld met de juiste CSS code, images en inhoud (Models).

De index.php pagina zelf bevat dus enkel code voor templates te beheren en voor configuraties, logging settings etc in te lezen. En ook voor de taal in te lezen.

Die laatste methode wordt nu meer en meer gebruikt, maar is niet echt zo makkelijk aangezien je moet kunnen programmeren in PHP.

**********

Maar als je webhost PHP ondersteunt zou ik zeker die eerste methode met 'include_once' eens bezien.

Uiteraard kan je die dingen toepassen voor menubalken, headers, footers, ... Dingen die op elke pagina hetzelfde zijn.

(Als je hosting geen PHP ondersteunt, heb ik uiteraard niets gezegd.)

@Karel; Als je niet weet waarover ik het heb, laat je alles maar gewoon zoals je het hebt. Of kan je het doen zoals Beginnen experimenteren is zeker niet aangeraden

.

De MVC aanpak zou ik zoiezo links laten liggen voor het moment.

Succes.

Mvg,
Dave