• Home
• Archief
• Contact
• Inhoudsopgave

Hoe ga ik van frames naar een html/css website?

Er wordt vaak gevraagt hoe je naar een volgende pagina klikt waarbij net als in een frames-site het menu blijft staan en enkel de content veranderd. We zullen het eens proberen uit te leggen in de hoop dat er meer frames websites gaan verdwijnen.

Frames zijn passé

De enigste frames die nog gebruikt worden zijn inline frames <iframe>.
Een inline frame is iets anders dan frames en wordt bijvoorbeeld door Google gebruikt om een Youtube fimpje te embedden. De makkelijkste manier om dit te bereiken is gewoon met html en css.
Een andere manier is met Ajax je content te laden maar dit geeft nogal gauw problemen met de indexering in Google. Daar is wel iets voor maar dat is vrij complex.

De oplossing zit hem in het toevoegen van het menu in iedere pagina die je maakt.

Heb je een grote site met alleen .html of .htm pagina's dan zit je met het probleem dat je dus in iedere pagina het menu toe moet voegen. In dit geval ga je alle pagina's hernoemen naar .php. En vervolgens alles m.b.v. htaccess redirecten van .html naar .php. Om Google niet gek te maken zet je in een .htaccess de volgende code:
RedirectMatch 301 (.*)\.html$ http://www.website.nl$1.php

Maak je een nieuwe site geef de bestanden dan meteen de extensie .php. Met php kun je het menu in 1 enkel bestandje zetten en in iedere pagina includen dmv. een simpel regeltje php-code.

Stappenplan van frames naar html/css

• Kijk of jou webhosting php heeft draaien, dit heb je nodig.
• Backup heel je frames website en bewaar die ergens zodat je altijd terug kunt.
• Installeer WampServer lokaal op je pc, en test of hij werkt op http://localhost/.
• Zet je site in de www map van WAMP
• Hernoem alle .html of .htm pagina's van je site naar .php (php bestanden lusten ook html-tags)
• Maak een map (in dezelfde directory als waar je index.html staat) die je 'menu' noemt en zet er het bestand menu.php in.
• De index.html daar zit je frameset in, die kan in principe weg. En je voorpagina (meestal start.html o.i.d.) wordt dan je index.php

Nu zul je in ieder bestand het menu moeten zetten. Het menublok wordt nu niet een frame maar een div.

Hier is een voorbeeldje van de stuctuur + html en css. In dit voorbeeld staat het menu ook in de index uitgeschreven, dit door het verschil in directory diepte.

Heb je je pagina's in verschillende directories/mappen zitten dan kun je ook nog de volledige absolute url in de links zetten. Zit je lokaal dan beginnen ze dus met http://localhost/

Zet je het zaakje straks online dan wissel je dat pad met de url van je domein. Voordeel is dat je nu maar 1 bestandje hebt voor je menulinks.
In een teksteditor kun je hiervoor "find en replace all" doen.

Geen hapklare brokken code

Niet iedere frames site is hetzelfde van opbouw dus je zal de divs ter vervanging van je frames zelf moeten stylen en positioneren. Een goede tutorial voor hoe om te gaan met divs vindt je op sceneone.nl.

Een Content Management Systeem

Mocht je hier allemaal geen zin in hebben dan kun je eens kijken naar een CMS en daar de content en/of stukken code vanuit je frames website in de editor proberen te plakken.

15.01.2012. 01:26