Opslaan in een afzonderlijke pagina

aloë vera · 23 jan 2012, 14:53

Beste Website makers. Ik heb gelezen dat je "Je stijlkenmerken in een afzonderlijke pagina kunt opslaan". Nu vraag ik mij af of het ook mogelijk is voor een deel van de <body> met name de 'header' en de 'kolom links' om op deze manier in een aparte pagina op te slaan. Ik heb ondertussen al een behoorlijk aantal pagina's op mijn site en daar komen nog steeds nieuwe bij. Nu moet ik op iedere pagina afzonderlijk de nieuwe gaan toevoegen. Is hier een trucje voor zodat je niet alle pagina's 1 voor 1 moet aanpassen of is dit gewoon een kwestie van doorbijten en kopiëren en plakken? Het gaat met name over het drop-down gedeelte waar de nieuwe pagina's aan toegevoegdgaan worden.
Met vrolijke groet Aloë Vera

coderunner · 23 jan 2012, 15:42

Beste aloë vera,

Daar zijn 2 methoden voor: 1 voorbijgestreefde html methode en 1 goede methode maar daarvoor moet je php scriptingtaal voor gebruiken.

1ste methode: html
Door gebruik te maken van frames (bv. header-, menu- en main-frame).

2de methode: php
Hiervoor moeten alle pagina's de extensie *.php hebben.
Aanmaak van de verschillende pagina's (header, menu, pagina1, pagina2, pagina3, ...) en dan op de pagina1, pagina2, pagina3, ... kan je dan d.m.v. "include" de header en menu pagina "bijvoegen".
bv. helemaal bovenaan op de pagina nog vóór de doctype

Code: Selecteer alles

<?php
include 'header.php';
include 'menu.php';
?>

mvg,
Coderunner

aloë vera · 23 jan 2012, 15:51

Dank je coderunner, ga dat uitproberen in een nieuwe pagina en zien of het me lukt.
Tot later Aloë Vera

coderunner · 23 jan 2012, 15:54

Okay aloë vera ... succes !

mvg,
Coderunner

ultddave · 23 jan 2012, 16:32

Misschien nog even toevoegen dat de menu.php en header.php pagina enkel de benodigde HTML code moeten bevatten. Dus menu.php moet bijvoorbeeld geen DOCTYPE en <head> en <body> tags bevatten.
PHP gaat immers de code letterlijk kopieren en plakken zoals hij in menu.php staat

.

Dus je kan veronderstellen dat alles wat in menu.php staat, letterlijk op de plaats waar 'include 'menu.php';' staat, ingevoegd wordt

.

bv. helemaal bovenaan op de pagina nog vóór de doctype

Ik zou het onder de doctype zetten, de doctype is in principe altijd de eerste regel, tenzij je PHP sessions gebruikt.

Anders krijg je zaken zoals:

Code: Selecteer alles

<p>
Dit is mijn header die niet eens tussen <html> tags staat en geen doctype heeft.
</p>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" >
....

En dat zal ook fouten geven tijdens de validatie via W3C

.

Enkel indien je PHP sessions gebruikt, voor een loginsysteem, moet die helemaal bovenaan staan omdat die session gestart moet worden voordat er data verzonden wordt naar de gebruiker

. Zoals;

Code: Selecteer alles

<?php
	session_start();
?>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" >
	<head> 
		<meta name="description" content="beschrijving website" />
		<meta name="keywords" content="zoekwoorden, website, gescheiden, door, komma" />
		<meta name="robots" content="index, follow" />
		<title> Titel </title>
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<?php
			include 'menu.php';
		?>

		<p> Overige inhoud in HTML </p>

		<?php
			include 'footer.php';
		?>
	</body>
</html>

Bovenstaand voorbeeld bevat bijvoorbeeld de session_start(); (al wordt er in dit voorbeeld niets mee gedaan.)

(@aloë vera; Die "<?php session_start(); ?>" moet je niet plaatsen. Dat is enkel als je een loginssyteem in PHP wilt gaan toevoegen.)

En een voorbeeld voor het menu.php en bijvoorbeeld de footer.php te includen. footer.php kan bijvoorbeeld een tekst/afbeelding/links/... bevatten die onderaan elke pagina moet staan.

(@aloë vera; Ik weet niet of je de website in XHTML of HTML 4.01 geschreven hebt, vandaar dat ik je dus zou aanraden om de code hierboven desnoods even te bekijken, maar niet te kopieren.)

Succes.

Mvg,
Dave

aloë vera · 23 jan 2012, 18:08

Hallo ultdave en coderunner, ik was al aan het plakken gegaan om een header.php te maken en een menu.php. Daarnaast een oefenpagina waar ik dan de header en de linker kolom heb uitgehaalt. Tot zover nog geen succces. Eerst deze

Code: Selecteer alles

<?php 
include 'header.php'; 
include 'menu.php'; 
?>

bovenin geplakt, dat was niet fijn want ik kreeg allemaal rode onderlijningen in mijn Share Point Designer. Daarna de code onder de Doctype gezet en de lijnen waren weg, maar goed beeld heeft het nog niet opgeleverd.
Mijn header.php is nu deze(een verkorte versie

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>Naamloos 1</title>
</head>

<body>
         <div id="header"> 
                      <ul id="drop-down-menu">
         <li><a href="http://www.deplantenparade.nl" >Home</a>
 			<ul> 
			<li><a href="http://www.deplantenparade.nl/myself.htm" >Wie is ...</a></li> 
			<li><a href="http://www.deplantenparade.nl/myadress.htm" >Waar is ...</a></li> 
			<li><a href="http://www.deplantenparade.nl/personal.htm" >Persoonlijk Noot</a></li>
			<li><a href="http://www.deplantenparade.nl/plantenmarkt.htm" >De Plantenmarkt</a></li>
			<li><a href="http://www.deplantenparade.nl/mylinks.htm" >Links</a></li>
 		</ul> 
	  </li>

Zo heb ik nog een aantal ernaast wat de afsluiting zonder de extra </ul> verklaard, en dit is juist de drop-down waar de veranderingen het meeste voorkomen. Extra pagina's eronder b.v.
En op de proefpagina pas ik deze dan weer zo in

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl">
<head>
<?php 
include 'header.php'; 
?>      

      <link rel="shortcut icon" href="/favicon.ico" /> 

      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />  
      
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <meta http-equiv="Content-Language" content="nl" /> 
      
      <title>proefpagina</title>

Ik heb reeds een aantal varianten geprobeerd, maar ik heb echt meer hulp nodig.
hopelijk tot later
Aloë vera

coderunner · 23 jan 2012, 19:08

Beste aloë vera,

Wanneer we van je eerste pagina (index.htm) van je website de broncode nemen:

1- Daar haal je de html code van het menu bovenaan de pagina uit, plakt deze in een nieuwe lege pagina en bewaard deze als "menu-top.php"

<div id="header">
<ul id="drop-down-menu">

...
...overige codes weggelaten!
...

<li><a href="http://www.deplantenparade.nl/kaassnijder.htm" >Kaassnijder</a></li>
</ul>
</li>
</ul>
<br /><br /><br />
<br /><br/><br /><br />
</div>

Op de plaats op de index.htm pagina waar je de top-menu hebt uitgehaald, schrijf je nu

Code: Selecteer alles

<?php
include 'menu-top.php';
?>

2- Vervolgens haal je de html code van het menu dat links staat uit, plakt deze in een nieuwe lege pagina en bewaard deze als "menu-links.php"

<div class="colleft">

<a href="http://www.volkoomen.nl/L/lavandulA.htm" rel="external" onclick="this.target='_blank';"
onmouseover="doTooltip(event, messages[0] )" onmouseout="hideTip()">

...
...overige codes weggelaten!
...

<li><a href="http://www.deplantenparade.nl/myspecials.htm" >Speciale Aandacht</a></li>
</ul>
</li></ul>
<br /><br /><br /><br />
<br /><br /><br />
<br /><br /><br />
</div>

Op de plaats op de index.htm pagina waar je de linker-menu hebt uitgehaald, schrijf je nu

Code: Selecteer alles

<?php
include 'menu-links.php';
?>

Dus staat er nu op de index pagina na verwijdering html codes voor top en linkermenu en aanvulling van php include codes

...
...overige codes weggelaten!
...

<div id="container">

<?php
include 'menu-top.php';
?>
</div>

<div class="clearfloat">
</div>
<div id="contentwrapper">


<?php
include 'menu-links.php';
?>
<div class="colright">

...
...overige codes weggelaten!
...

Je index pagina is nu ingekort/gewijzigd dus bewaar nu deze index pagina als "index.php"

Houd er ook rekening mee dat je alle links in menu's en op de pagina's ook moet wijzigen naar "naam_pagina.php".

Hopelijk raak je er nu aan uit.

Succes

mvg,
Coderunner

Aanpassing: Verbetering in code

aloë vera · 23 jan 2012, 19:29

Aha, Dat ziet er mooi en duidlijk uit. Het gaat erom waar ik de nieuwe ínclude code' plaatst. Als dit niet lukt eet ik mijn toetsenbord op, krijg al wel een beetje trek hoor :).
Vrolijke groet aan u beiden en ik meld mij natuurlijk.
Aloë Vera.

coderunner · 23 jan 2012, 19:48

Beste aloë vera,

Nog even dit meegeven
Als je kiest voor 2de methode: php

Vooraleer je al deze wijzigingen doorvoert, kijk na of je webhostserver wel degelijk PHP ondersteunt anders doe je dit alles voor niets!!!

Je kan deze nieuwe php pagina's alleen online controleren of je moet zelf een server opzetten op je pc!

mvg,
Coderunner

aloë vera · 23 jan 2012, 19:53

Hij staat erop nu, kon het pas zien nadat ik het op het net had geuploaded. Even mijn site intoetsen met de /index.php en JAWEL...

Merci et Merci mes Amis.
Eet smakelijk? Ik dan toch Vrolijke groeten Aloë Vera

coderunner · 23 jan 2012, 22:10

Okay aloë vera,

Bedankt om dit hier te melden.

Nu nog alle andere pagina's ... veel moed en succes

mvg,
Coderunner

aloë vera · 23 jan 2012, 22:53

Dat gaat lukken, Was alleen te snel met het up-loaden van de pagina's die ik al klaar had. Die moeten nog even in de koelkast blijven als ik wil dat de rest ook nog zichtbaar blijft :).
Had natuurlink de menu.top al direct met de php aangepast zodat mijn pagina's onvindbaar waren geworden.
Kan dat natuurlijk wel weer even terugdraaien totdat alle pagina's klaar zijn. En dan is het een klein klusje om het terug in php te zetten dankzij de hulp weer hier op het SeniorenNet.
Morgen is er weer een dag.
Welterusten vrienden.
Aloë Vera.

aloë vera · 07 feb 2012, 12:21

Goeiemiddag webbers, daar ben ik weer eens. Heb mijn site overgezet naar de php. en dat is over het algemeen genomen redelijk vlot gegaan. Nu blijft er een klein smetje op mijn werk zitten, en dit wel letterlijk dan nog. Het merendeel van mijn pagina's zijn gewoon prima in orde, maar een enkele vertonen zowel bovenin als onderin vreemde tekens, de 'smetjes' op mijn werk dus. Wat ik ook probeer met copy en paste, deze pagina's willen maar niet knap en smetteloos worden. In de broncode van mijn website is het zichtbaar

Code: Selecteer alles

      </script> 
        </head> 
    <body onload="Tooltip.init()">
      <div id="container" style="left: 0px; top: 0px"> 
 
             ï»¿  

                         <!-- Hier begint de header --> 
         <div id="header">

(krijg er geen kleurtje op)

Code: Selecteer alles

            <!-- Hier begint de inhoud -->   
  
            ï»¿  
                     <div class="colleft"> 
                          <!-- De kolom links -->

Als ik in de broncode ga zoeken waar ik ook schrijf, SharePoint Designer, dan kan ik deze vreemde tekens niet vinden.
Ondanks dat ik de bladzijde toch zoveel mogelijk van dezelfde bron heb gekopïeerd kon ik van een aantal bladzijde de verschillen wel vinden. Maar toch zijn nu nog niet alle vlekjes weggewerkt. Deze tekens zitten in mijn nieuw gemaakte menu-top.php en menu-links.php
Het vreemde is alleen dat het niet op alle pagina's tevoorschijn komt. Help mij a.u.b. bij het wegwerken van deze vlekjes zodat mijn gehele website weer prachtig is.

O ja, onder o.a. Aardbei, Citrus en Kiwi vindt je deze 'tekens' .

coderunner · 07 feb 2012, 14:49

Beste aloë vera,

Open de pagina's die deze misterieuze tekens tonen en kijk of je daar ook de onderstaande meta tag gebruikt en geen andere.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Laat me weten of je probleem hiermee opgelost is.

mvg,
Coderunner

aloë vera · 07 feb 2012, 16:48

Weer helemaal goed beste coderunner. Dat bovenste deel had ik idd. niet steeds helemaal gekopïeerd vanwege titel en metatags.
Zo happy weer hiermee, vanaf morgen is de hele site "toonbaar".
Mijn dank als altijd en even zo ook
mijn Vrolijke Groeten, Aloë Vera.