HTML hoofdmenu inlezen in Frontpage

Status
Niet open voor verdere reacties.

pvp128

Gebruiker
Lid geworden
27 okt 2012
Berichten
5
Mijn website bestaat uit een stuk of 15 pagina's en op elke pagina staat dit hoofdmenu. Nu wil ik een aparte Frontpage (html) pagina aanmaken die vanuit elke subpagina wordt aangeroepen en daarna gewoon het script afwerkt. Dus zoiets als een GOSUB-functie inbasic. Hoe doe ik dat? Voorbeelden svp. Ik ben niet thuis in css of php dus wil ik een oplossing in html. Het hoofdmenu bestaat uit gifplaatjes waaraan ik een linkje heb gekoppeld. Kijk voor een voorbeeld op www.sunrise-taichi.nl.
 
Hoi Paul,
Je wilt dus hetzelfde menu op iedere pagina laten terugkomen.
Ik ben niet thuis in css of php dus wil ik een oplossing in html.
Jaha ... dat kan je wel willen ;), maar dan zou de enige mogelijkheid zijn om van de site een frame-site te maken. En dat is ernstig af te raden, want (a) dat is een heel gedoe, (b) onderhoud aan de site wordt moeilijker, en (c) daarmee maak je de site een stuk slechter voor Google, gebruiksvriendelijkheid en toegankelijkheid. Dat zal niet de bedoeling zijn...
  • O, nog een mogelijkheid: voor veel geld een webbouw-programma als Dreamweaver aanschaffen, en dat het vuile werk laten doen. Ook dat zou ik niet aanraden.

=======
Dus zoiets als een GOSUB-functie in basic
Maar kijk, daar rijst de zon!
Als je met een GOSUB-functie in basic kunt omgaan, kan je het heel eenvoudig doen met een PHP-include. En anders ook, want het is maar 1 regeltje code, en verder hoef je geen PHP te kennen.
In plaats van de GOSUB-opdracht komt er een PHP-opdracht met verwijzing naar het uitgeknipte fragmentje met het hoofdmenu.
Meer is het niet. :)



Met vriendelijke groet,
CSShunter
 
Hoi csshunter,

Bedankt voor je antwoord. Zover was ik ook al gekomen. Maar nu de essentie. Om te voorkomen dat ik dubbel werk ga doen, wil ik het bestaande menu omzetten in PHP, CSS of iets anders. HOE doe ik dat?

dit is het hoofdmenu dat op elke pagina terugkeert:

<!-- Hoofdmenu start -->
<!-- Hoofdmenu start -->

<span><a href="index.html"><img border="0" src="afbeeldingen/mini_home.gif" style="position: absolute; top: 80; left: 32" width="83" height="30"></a></span>

<span><a href="welkom/welkom.htm"><img border="0" src="afbeeldingen/mini_welkom.gif" style="position: absolute; top: 120; left: 28; width: 126px; height: 30px; z-index: 7" width="126" height="30"></a></span>

<span><a href="lessen/lessen.htm"><img border="0" src="afbeeldingen/mini_lessen.gif" style="position: absolute; top: 160; left: 31" height: 28" 95; height="28" width="95"></a></span>

<span><a href="workshops/workshops.htm"><img border="0" src="afbeeldingen/mini_workshops.gif" style="position: absolute; top: 200; left: 30" height="34" 160"; width="160"></a></span>

<span><a href="gastenboek/gastenboek.htm"><img border="0" src="afbeeldingen/mini_gasten.gif" style="position: absolute; top: 240; left: 29" height: 33" 161; height="33" width="161"></a></span>

<span><a href="video/videomainmenu.htm"><img border="0" src="afbeeldingen/mini_video.gif" style="position: absolute; top: 278; left: 28" width="100" height="39"></a></span>

<span><a href="artgallery/artgallery.htm"><img border="0" src="afbeeldingen/mini_artgallery.gif" style="position: absolute; top: 320; left: 32" height: 33" 143; height="33" width="142"></a></span>

<span><a href="zen/zen00.htm"><img border="0" src="afbeeldingen/mini_zen.gif" style="position: absolute; top: 360; left: 35" width="53" height="28"></a></span>

<span><a href="zhongwen/chinese_studie.htm"><img border="0" src="afbeeldingen/mini_zhongwen.gif" style="position: absolute; top: 400; left: 34; width: 147px; height: 32px" width="147" height="34"></a></span>

<span><a href="contact/email.htm"><img border="0" src="afbeeldingen/mini_contact.gif" style="position: absolute; top: 440; left: 34; width: 109px; height: 28px" width="109" height="28"></a></span>

<span><a href="links/links.htm"><img border="0" src="afbeeldingen/mini_pengyou.gif" style="position: absolute; top: 480; left: 33; width: 185px; height: 34px" width="182" height="36"></a></span>

<!-- Hoofdmenu einde -->
<!-- Hoofdmenu einde -->


Het hoofdmenu verwijst naar gif-plaatjes ontworpen met paint waaraan een linkje verbonden is.

Grtzzzz, pvp
 
Laatst bewerkt:
Hoi pvp128,
Zover was ik ook al gekomen.
Mooi, dan hoef je alleen nog maar uit te voeren wat er staat geschreven. :p
Hierboven heb je al precies het fragment van het menu aangegeven. Dat moet dus nu uitgeknipt worden.
Hoe in FrontPage?

Fragment aanmaken
  1. Maak eerst een kopie van je index.html, dan heb je altijd een backup voor mocht er onverhoopt iets mis gaan.
  2. Open nu in FrontPage je index.html, en ga naar de code-weergave.
  3. Voor het uitknippen kan je knippen en plakken, maar het is wel zo makkelijk om te wissen wat er niet nodig is.
  4. Selecteer eerst alles met ingang van de eerste regel (<!DOCTYPE HTML enz.) tot en met de eerste keer <!-- Hoofdmenu start -->, en wis dat met de Delete-toets op het toetsenbord. Weg!
  5. Selecteer dan alles met ingang van de tweede regel <!-- Hoofdmenu einde --> tot en met de allerlaatste </html>, en Delete: weg!
  6. Nu is alleen de code voor het hoofdmenu over.
  7. De links gaan niet meer kloppen, want alle pagina's (behalve dit fragment) gaan straks eindigen op .php.
  8. Je gaat dus alle links in het hoofdmenu af, en maakt van href="index.html": href="index.php"; href="welkom/welkom.htm" wordt: href="welkom/welkom.php", enz.
  9. Je slaat deze (incomplete) pagina op met als naam: hoofdmenu.htm
Nu is het fragment aangemaakt dat op alle pagina's ingesloten moet worden.

PHP-code op de index-pagina zetten
  1. Je opent nu opnieuw je index.html (die is nu nog ongeschonden), en daarop selecteer je deze keer alles met ingang van de tweede keer <!-- Hoofdmenu start --> tot en met de eerste keer <!-- Hoofdmenu einde -->. Delete!
  2. Nu staat er dus in plaats van het menu alleen nog:
    HTML:
    ...
    <!-- Hoofdmenu start -->
    <!-- Hoofdmenu einde -->
    ...
  3. Daartussenin zet je nu de PHP-instructie om het hoofdmenu op te halen:
    HTML:
    ...
    <!-- Hoofdmenu start -->
    <?php include("hoofdmenu.htm"); ?>
    <!-- Hoofdmenu einde -->
    ...
  4. Vervolgens sla je de pagina op als index.php

In FrontPage zie je meteen daarna de gekleurde code veranderen in alleen maar zwart, en ook de mogelijkheid om de ontwerpweergave te bekijken (onderaan in het FP-venster) is verdwenen. Dat is een eigenaardigheid van Frontpage, maar niet erg. Als je de index.php niet via FP opent maar in de Verkenner (Openen met... FrontPage), dan laat FP de kleurtjes wel weer zien, en ook de ontwerpweergave is er weer! *)

PHP-code op de andere pagina's zetten
  1. De andere pagina's zitten in submappen, en daar moet de PHP-verwijsregel anders worden om toch bij het fragment hoofdmenu.htm in de hoofdmap te komen.
  2. Je gaat het hele rijtje pagina's langs, en begint met welkom.htm. Openen en het hoofdmenu weer wissen.
  3. Nu komt er als php-regel te staan:
    HTML:
    ...
    <!-- Hoofdmenu start -->
    <?php include("../hoofdmenu.htm"); ?>
    <!-- Hoofdmenu einde -->
    ...
    De puntje-puntje-slash betekent: ga eerst een map hoger dan de map waar de pagina in zit, en haal dan de hoofdmenu.htm binnen.
  4. De nieuwe welkom-pagina nu opslaan als welkom.php (in zijn eigen /welkom/-mapje).
  5. De andere htm-pagina's gaan analoog.

Uploaden
  1. Het fragment hoofdmenu.htm moet geüpload worden naar de hoofdmap van de website.
  2. Alle php-pagina's van de site kunnen geüpload worden naar hun eigen mapje.
  3. De index.php ga je nog even niet uploaden!

Testen
  1. Er is nu een nieuw circuit gekomen met de php-pagina's: dit staat geheel los van de draaiende site, en kan dus nooit kwaad.
  2. Je kunt nu in je browser naar www.sunrise-taichi.nl/welkom/welkom.php gaan en het resultaat bezichtigen: in de broncode moet nu het hoofdmenu met de nieuwe verwijzingen naar alle php-pagina's staan.
  3. Dat kan uitgeprobeerd worden! Klik in welkom.php op een andere pagina (niet de Home-knop, want de index.php is er nog niet!).
  4. Vanaf de andere php-pagina's werkt het nieuwe menu ook: de nieuwe site is in principe klaar!

Definitief omschakelen
  1. Als alles in orde is, rest nog één ding: de index.php uploaden naar de hoofdmap.
  2. Is dat gebeurd, dan zit het nieuwe menu-fragment ook in de homepage.
  3. Als je in de browser naar www.sunrise-taichi.nl gaat, kom je vanzelf uit op de index.php > en daarmee blijf je in het nieuwe circuit.

Opruiming
  1. Nu staan de oude htm-pagina's met het complete menu nog steeds op de server, maar ze kunnen geen kwaad. De bezoeker komt er immers niet vanzelf bij (alleen als die bv. de oude naam www.sunrise-taichi.nl/welkom/welkom.htm zou intikken).
  2. Dus op een regenachtige ochtend/middag/avond kan je op je gemak die oude htm-pagina's van de server verwijderen.

Klaar! :)

Met vriendelijke groet,
CSShunter
__________
*) Eigenlijk is FrontPage hopeloos verouderd, en zou je beter bv. de (gratis) web-editor KompoZer kunnen gebruiken. Die werkt vergelijkbaar, maar levert wel betere code af!


  • NB: In de ontwerp-weergave van de index.php (en de andere php-pagina's) zie je nu alles behalve het menu, want er is lokaal (zonder een speciaal geïnstalleerde PHP-server) geen PHP-machine, en de include kan dus niet getoond worden.
 
Correctie!
Hola! :D
Ik zie nu dat er op de homepage in het menu met zg. relatieve paden naar de pagina's en de afbeeldingen wordt verwezen.
Op de homepage gaan bv. de gif-afbeeldingen naar src="afbeeldingen/mini_home.gif", en op de andere pagina's naar src="../afbeeldingen/mini_home.gif".
Zet je de eerste soort verwijzingen in het hoofdmenu.htm fragment, dan kunnen alle andere pagina's dan de homepage de links en de afbeeldingen niet vinden. :eek:

Dit kan opgelost worden door voor de andere pagina's een ander fragment te maken, maar dan heb je toch 2 menu-fragmenten in omloop ipv 1.

Het kan universeel door er zg. absolute paden in het hoofdmenu.htm fragment van te maken, die het volledige pad naar de pagina's en de afbeeldingen doorgeven:
HTML:
...
<a href="http://www.sunrise-taichi.nl/"><img border="0" src="http://www.sunrise-taichi.nl/afbeeldingen/mini_home.gif" style="... enz."></a>
...
<a href="http://www.sunrise-taichi.nl/welkom/welkom.php"><img border="0" src="http://www.sunrise-taichi.nl/afbeeldingen/mini_welkom.gif" style="... enz."></a>
...
enz.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
wauw CSShunter,

Sorry voor de late reactie. Had het even druk met andere zaken. Wat een goede uitleg. Ik heb precies gedaan wat je schreef en HETWERKT!!!! Alleen de verwijzing naar de Homepage moest ik aan de index.php koppelen en de absolute adressen zijn goed uitgekomen,

Ook ga ik KompoZer eens uitproberen

Heel hartelijk bedankt
PVP128

ps. Als je geïnteresseerd bent in Tai Chi dan krijg je van mij de eerste 10 lessen gratis
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan