het includen van pagina's

Status
Niet open voor verdere reacties.
L

langedie

Nieuwe gebruiker
Lid geworden
7 jul 2011
Berichten
3
Hallo allenmaal,

Ik ben bezig met het maken van een website over Coktails. Nu heb ik hier een mooi logo voor gemaakt en een mooie layout(naar mijn mening:p) Ik heb alleen eenbeetje problemen met het laden van mijn pagina...

(mijn indeling ziet er zo uit: )
Untitled-1.gif


...De kop heeft een aantal zware afbeeldingen en is dus even bezig met laden voor een keer is dat niet zo erg, maar het word wel vervelend als dat elke keer gebeurt als je op een link druk. Dus nu ben ik met div gaan werken en met java nu is het zo als ik op een link druk vanuit elke div word deze geladen in de contenterea dus daar was ik heel blij mee. Maar nu struikel ik weer over het volgende als ik op vernieuwen druk (F5) dan laad mijn pagina weer van vooraf aan i.p.v. op de pagina die in de contenterea is geladen. Mijn vraag aan uw hoe kan ik dit verhelpen?

mvg Roy
 
maar het word wel vervelend als dat elke keer gebeurt als je op een link druk.
Klik om te vergroten...
Als de link naar de afbeelding dezelfde is op elke pagina zou de browser hem gewoon uit z'n cache moeten plukken, herladen is dan onnodig. Natuurlijk even aangenomen dat de gebruiker z'n cache niet op 0 MB heeft gezet. Als je navigatie puur op javascript gebaseerd is krijg je wel het probleem dat mensen die, om wat voor reden dan ook, javascript uit hebben staan je site niet meer kunnen gebruiken. Bots van zoekmachines zullen het ook moeilijk krijgen. Tenzij je natuurlijk een gewone link als reserve gebruikt.
 
Hoi langedie,
Het voelt aan alsof je gebruik maakt van frames om de repeterende pagina-bestanddelen binnen te halen. Klopt dat?

Dan gaat inderdaad bij een refresh de pagina van voren af aan beginnen met de frameset en het eerste frame in het inhoud-gebied.
Op een vervolg-pagina wordt alleen het inhoud-frame veranderd, en daar kleven ook allerlei andere nadelen aan (ook: niet een directe link naar een vervolgpagina kunnen geven; ook: slechter voor Google, voor toegankelijkheid , enz.).

Beter is het om van de frame-benadering af te stappen, en precies het omgekeerde te doen:
  • De inhoud van elke pagina is een afzonderlijke complete pagina.
  • Op die pagina staan zich herhalende onderdelen.
  • Die haal je op met een include.
  • Maar niet met een frame (of <iframe>), maar met een php-include.
  • De php-includes zijn fragmenten html (zonder <head>, <body>, enz.), met alleen het stukje html-code dat op de betreffende plek moet komen.
  • Moet er iets in zo'n herhalend onderdeel veranderen (bv. een nieuw menu-item), dan hoeft dat alleen maar in dat ene fragment aangepast te worden.
  • De nieuwe versie van dat ene fragment even uploaden, en dan wordt het automatisch tevoorschijn getoverd op alle pagina's die vanaf dat moment geopend worden. :)
Simpel en zéér doeltreffend!
Prettige bijkomstigheid: er is geen javascript voor nodig, de server plakt alles vanzelf in elkaar. Dus nooit problemen met mensen die zonder javascript browsen. En zoekmachines lusten er wel cocktails van!
Met vriendelijke groet,
CSShunter
____________
PS: Misschien valt er aan de "zware afbeeldingen" in de kop nog iets te doen. Heb je een link?
 
Laatst bewerkt:
Re:

heey csshunter,

ik heb even snel gekeken naar die minitutorial en ik ben er al bijna helemaal van overtuigt dat dit precies is wat ik zoek! ik ga er vanavond of morgen meteen even aan werken ik laat het je meteen even horen of het gelukt is! Bedankt voor je reactie!
Ik gebruik helemaal geen frames (of <iframes>) ik had in eerste instandsie me website helemaal opgebouwd met php include 'naam.php'; maar op een pagina met een cocktial word er veel info en afbeeldingen geladen. Maar nogmaals ik denk dat dit is wat ik zoek!

gr. Roy

als je nog even wilt kijken op me website hier is de url: Cocktails en Dreams.nl ( ik ga de tutorial even uitproberen in /test/ )
 
Laatst bewerkt:
Re:

Heey csshunter,
nogmaals bedankt voor je tip! ik heb de mini tutorial doorgenomen ik snap alleen een deeltje niet zou je even kunnen helpen(A) ik snap niet hoe ik nu een "swits" moeten maken naar een anderen pagina wat moet ik daar op zetten, al die div weer en dan alleen en body class veranderen?
gr. Roy

HTML: 
<!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=iso-8859-1" />
<title>Cocktails en Dreams.nl</title>
<style>
 Body { 
		width: 1144px;
		background-image: url(http://www.cocktailsendreams.nl/images/border_new.gif);
		background-repeat: repeat-x;
		background-color: #FFFFFF;
		margin: 0 auto;
		padding: 0; 
		} 
 img{
 border:0px;
 }
#header {
		width: 1144px;
		height: 62px;
		}
#logo {
		position: fixed;
		margin-left: 72px;
		padding: 1px;
		}
#loginarea{
		position:fixed;
		margin-left:720px;
		}
#menu_scrol{
		margin-top:20px;
		float:left;
		}
#menu_scrol ul{
		list-style: none;
		}
#menu_scrol li{
		display:list-item;
		}
#full_vborder{
		background-image: url(http://www.cocktailsendreams.nl/images/full_vborder.gif);
		width:970px;
		height:7px;
		float:left;
		margin-top:15px;
		}
#full{
		background-color:#FFFFFF;
		width:970px;
		height:410px;
		float:left;
		}
#menu {
		width:200px;
		float:left;
		background-color:#FFFFFF;
		margin-left: 20px;
		}
#menu div {
		display: none;
		margin-bottom: 2em;
		}
#menu #advertentie{
		display:block; 
		}
.mgarni #menu #mgarni {
		display:block;
		}
#content{
		width:510px;
		background-color:#FFFFFF;
		float:left;
		margin-left: 20px;
		}
#ads{
		width:200px;
		background-color:#FFFFFF;
		float:left;
		margin-left: 20px;
		}
</style>
</head>

<body class="mgarni">
<div id="header">
<div id="logo">
<a href="http://www.cocktailsendreams.nl/"><img src="http://www.cocktailsendreams.nl/images/logo_2.gif" alt="Cocktails en Dreams" width="329" height="42" border="0" /></a></div>
<div id="loginarea"><?php include '../home_login.php'; ?></div>
</div>



<div id="menu_scrol"> 
<ul> 
	<li><a id="mcocktails" href="/test/"><img src="http://www.cocktailsendreams.nl/images/menu_link_cocktails.gif" width="50" height="50"></a></li> 
	<li><a href="/"><img src="http://www.cocktailsendreams.nl/images/menu_link_dranken.gif" width="50" height="50"></a></li> 
	<li><a href="/"><img src="http://www.cocktailsendreams.nl/images/menu_link_tools.gif" width="50" height="50"></a></li> 
	<li><a href="/"><img src="http://www.cocktailsendreams.nl/images/menu_link_glazen.gif" width="50" height="50"></a></li> 
	<li><a href="/"><img src="http://www.cocktailsendreams.nl/images/menu_link_garni.gif" width="50" height="50"></a></li> 
</ul> 
</div> 

<div id="full_vborder"></div>

<div id="full">

<div id="menu">
		<div id="mcocktails">
			Cocktails
		</div>
		
		<div id="mdranken">
			Dranken
		</div>
		
		<div id="mtools">
			Tools
		</div>
		
		<div id="mglazen">
			Glazen
		</div>
		
		<div id="mgarni">
			Garni
		</div>
		<div id="advertentie">
		<br />advertenties
		</div>
</div>



<div id="content">
content area met info ect.
comments ect..
</div>



<div id="ads">
ads,,
</div>

</div>

<div class="clearBoth"><!-- ! --></div>

</body>
</html>
csshunter zei:
Hoi langedie,
Het voelt aan alsof je gebruik maakt van frames om de repeterende pagina-bestanddelen binnen te halen. Klopt dat?

Dan gaat inderdaad bij een refresh de pagina van voren af aan beginnen met de frameset en het eerste frame in het inhoud-gebied.
Op een vervolg-pagina wordt alleen het inhoud-frame veranderd, en daar kleven ook allerlei andere nadelen aan (ook: niet een directe link naar een vervolgpagina kunnen geven; ook: slechter voor Google, voor toegankelijkheid , enz.).

Beter is het om van de frame-benadering af te stappen, en precies het omgekeerde te doen:
  • De inhoud van elke pagina is een afzonderlijke complete pagina.
  • Op die pagina staan zich herhalende onderdelen.
  • Die haal je op met een include.
  • Maar niet met een frame (of <iframe>), maar met een php-include.
  • De php-includes zijn fragmenten html (zonder <head>, <body>, enz.), met alleen het stukje html-code dat op de betreffende plek moet komen.
  • Moet er iets in zo'n herhalend onderdeel veranderen (bv. een nieuw menu-item), dan hoeft dat alleen maar in dat ene fragment aangepast te worden.
  • De nieuwe versie van dat ene fragment even uploaden, en dan wordt het automatisch tevoorschijn getoverd op alle pagina's die vanaf dat moment geopend worden. :)
Simpel en zéér doeltreffend!
Prettige bijkomstigheid: er is geen javascript voor nodig, de server plakt alles vanzelf in elkaar. Dus nooit problemen met mensen die zonder javascript browsen. En zoekmachines lusten er wel cocktails van!
Met vriendelijke groet,
CSShunter
____________
PS: Misschien valt er aan de "zware afbeeldingen" in de kop nog iets te doen. Heb je een link?
Klik om te vergroten...
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan