[HTML] (Hoe) Frames vervangen?

[Maarten]

All,

Een aantal jaren geleden heb ik een site (intranet) ontwikkeld, destijds met wat basis kennis over HTML en PHP. Nu werkt het nog steeds prima, maar wil ik de boel naar een hoger niveau tillen / vernieuwen.

Destijds maakte ik gebruik van HTML + Frames. Iets wat in het huidige landschap niet echt past. Ik zou dus graag afscheid nemen van de frames, de vraag is hoe?

De huidige layout bevat een header, menu en content dus 3 frames. Vergelijkbaar met onderstaande afbeelding (via Google)


Nu heb ik gekeken naar CSS, omdat ik hier veel over lees als zijnde vervanging van frames?

Binnen CSS kan ik een aantal blocken (div ID) maken echter betekent dit volgens mij dat ik deze blocken (div's) in elke pagina moet toevoegen. Stel dus dat ik het logo wil aanpassen moet ik dit voor elke pagina doen, waar dit binnen frames nu slechts één maal hoef te doen, te weten de header.

Mis ik een essentieel deel? Of is mijn bevinding correct? Zo ja, hoe lossen jullie dat op voor een vergelijkbare site? (zie bovenstaande plaat).

Veel dank voor jullie hulp zover!

[RobIII]

Maarten schreef op dinsdag 01 februari 2011 @ 15:09:
Nu heb ik gekeken naar CSS, omdat ik hier veel over lees als zijnde vervanging van frames?

Heeft geen drol met frames van doen. CSS houdt zich bezig met het "stijlen" van elementen. In CSS definieer je hoe een <p>, <h1>, <div> (of zelfs <div id="menu"> of <span class="woei"> en nog wel ingewikkelder constructies) eruit moet zien. Je scheidt daarmee presentatie van inhoud. De HTML bevat dus (bij voorkeur semantisch correcte) inhoud en geen presentatie; die stop je in de CSS.

Maarten schreef op dinsdag 01 februari 2011 @ 15:09:
Mis ik een essentieel deel?

Kijk eens naar server-side talen als PHP/ASP.net/Whatever en neem een basistutorial daarvan door.

[ Voor 30% gewijzigd door RobIII op 01-02-2011 15:18 ]

[Maarten]

RobIII schreef op dinsdag 01 februari 2011 @ 15:11:
[...]

Heeft geen drol met frames van doen. CSS houdt zich bezig met het "stijlen" van elementen. In CSS definieer je hoe een <p>, <h1>, <div> (of zelfs <div id="menu"> of <span class="woei">) eruit moet zien. Je scheidt daarmee presentatie van inhoud.

Eens, hiervan heb ik meerdere tutorials gezien en ook gelopen / uitgevoerd (oa via w3schools.com).

Kijk eens naar server-side talen als PHP/ASP.net/Whatever en neem een basistutorial daarvan door.

De site is nu geschreven met flarden php, onder andere voor het opvragen van formulier informatie vanuit een database.

Het is me echter niet duidelijk hoe ik dan die 3 blocken van mijn eerste plaatje kan maken in één pagina, bij voorkeur dusdanig dat ik die 3 blocken slechts één keer hoef aan de passen en dat deze dan over de gehele site verwerkt zijn.

Moet dit met PHP includes? Of? Kun je me een pointer geven?

[RobIII]

Maarten schreef op dinsdag 01 februari 2011 @ 15:20:
Kun je me een pointer geven?

Dat deed ik al: Pak de eerste de beste (fatsoenlijke) PHP/ASP.Net/Whatever tutorial en je moet er uit komen.

[ Voor 6% gewijzigd door RobIII op 01-02-2011 15:36 ]

[Wiethoofd]

Maarten schreef op dinsdag 01 februari 2011 @ 15:20:
Het is me echter niet duidelijk hoe ik dan die 3 blocken van mijn eerste plaatje kan maken in één pagina, bij voorkeur dusdanig dat ik die 3 blocken slechts één keer hoef aan de passen en dat deze dan over de gehele site verwerkt zijn. Moet dit met PHP includes?

Zorg dat je in php/html een template/basispagina hebt waarin de top en left reeds instaan en laat alleen de daadwerkelijke content (right) wijzigen, een include/require of een DB-query om de content van die pagina op te halen en te tonen.

[Maarten]

Wiethoofd schreef op dinsdag 01 februari 2011 @ 15:27:
[...]

Zorg dat je in php/html een template/basispagina hebt waarin de top en left reeds instaan en laat alleen de daadwerkelijke content (right) wijzigen, een include/require of een DB-query om de content van die pagina op te halen en te tonen.

Dank voor deze pointer, het zoeken naar PHP + templates heeft me een aantal goede pointers gegeven hoe dit op te pakken:
http://www.1stwebdesigner...ate-php-website-template/
http://www.dynamicdrive.com/forums/showthread.php?t=28260

[Kompaan]

Je kan natuurlijk ook gewoon een CMS uitzoeken, template aanpassen, content erin stoppen?

[Bosmonster]

We hebben het nu over een tig jaar oude frames-site ombouwen. Het lijkt mij persoonlijk ook een beter idee om de site opnieuw te bouwen ipv proberen de oude meuk in een niet-frames jasje te krijgen.

[martijn2008]

Maarten schreef op dinsdag 01 februari 2011 @ 15:09:
[......]
Binnen CSS kan ik een aantal blocken (div ID) maken echter betekent dit volgens mij dat ik deze blocken (div's) in elke pagina moet toevoegen. Stel dus dat ik het logo wil aanpassen moet ik dit voor elke pagina doen, waar dit binnen frames nu slechts één maal hoef te doen, te weten de header.
[.....]

Met een PHP include kan je er voor zorgen dat het menu en de header er overal het zelfde uitziet. Het is namelijk maar 1 bestandje waar je naar toe verwijst. De gebruiker kan dit verder niet zien, omdat PHP natuurlijk server side is. Ik denk dat helpt bij het zoeken van je oplossing. En als je gewoon 3 divjes doet, moet het volgens mij je wel lukken

HTML:

<div class="header"><?php include('include/header.php'); ?></div>
<div class="menu"><?php include('include/menu.php'); ?></div>
<div class="content">CONTENT</div>

Cascading Stylesheet:

.header {
width:100%;
height:200px; } /* header */
.menu {
float:left;
width:200px; } /* menu */
.content {
float:left; } /* inhoud */

Dit is uit de losse hand, dus ik hoop dat ik alles goed zeg en dat het werkt iig suc6 ermee
in de map include staat het bestand menu.php en dat bevat de code voor het menu.

Bosmonster schreef op dinsdag 01 februari 2011 @ 16:02:We hebben het nu over een tig jaar oude frames-site ombouwen. Het lijkt mij persoonlijk ook een beter idee om de site opnieuw te bouwen ipv proberen de oude meuk in een niet-frames jasje te krijgen.

Is denk ik wel het mooist en het best, ligt eraan hoeveel tijd je eraan wil spenderen.

[ Voor 20% gewijzigd door martijn2008 op 01-02-2011 16:31 ]

[winkbrace]

Gelukkig geef martijn2008 tenminste antwoord.

[Bosmonster]

BazzPsychoNut schreef op dinsdag 01 februari 2011 @ 16:24:
Gelukkig geef martijn2008 tenminste antwoord.

Gelukkig voeg jij ook heel veel toe aan dit topic

[martijn2008]

BazzPsychoNut schreef op dinsdag 01 februari 2011 @ 16:24:Gelukkig geef martijn2008 tenminste antwoord.

Bosmonster schreef op dinsdag 01 februari 2011 @ 16:26:Gelukkig voeg jij ook heel veel toe aan dit topic

Gelukkig ik krijg ik complimentjes, en voel ik me niet zo noobie meer

[ Voor 26% gewijzigd door martijn2008 op 01-02-2011 16:28 ]

[NMe]

@martijn2008: Width en height in HTML gebruiken? Alles zomaar naar links floaten zonder verdere resets? Ik denk dat je beter geen adviezen kan geven aan een beginner als je zelf nogal wat beginnersfouten maakt. Dat verwart alleen maar meer.

@Maarten: koop een boek. Dit ga je niet zomaar redden door voorbeeldjes van internet bij elkaar te slepen en pleuren. Voor sommige dingen moet je gewoon een basis hebben, dan daarvoor kun je bronnen op internet vaak ofwel niet vertrouwen, ofwel ze sluiten niet op jouw ervaring/kennis aan. Boeken zijn in dat opzicht veel beter.

Verder kan ik het alleen maar met Bosmonster eens zijn dat je dit niet om moet willen bouwen, dit hoor je opnieuw op te zetten. Kost waarschijnlijk nog minder tijd dan ombouwen ook.

edit:

martijn2008 schreef op dinsdag 01 februari 2011 @ 16:27:
[...]

Gelukkig ik krijg ik complimentjes, en voel ik me niet zo noobie meer

Sorry.

[ Voor 12% gewijzigd door NMe op 01-02-2011 16:29 ]

[martijn2008]

Nou dat width en height was alleen maar even als voorbeeld, ik dacht el dat hij zou begrijpen dat je dat beter in css zou kunnen doen. Maar wat bedoel je me die resets... ik zat het aanpassen

[Maarten]

Bosmonster schreef op dinsdag 01 februari 2011 @ 16:02:
We hebben het nu over een tig jaar oude frames-site ombouwen. Het lijkt mij persoonlijk ook een beter idee om de site opnieuw te bouwen ipv proberen de oude meuk in een niet-frames jasje te krijgen.

Akkoord, dit is dan ook het plan . Vandaar ook de vraag, ik zou het nu graag goed willen doen .

NMe schreef op dinsdag 01 februari 2011 @ 16:27:
@Maarten: koop een boek. Dit ga je niet zomaar redden door voorbeeldjes van internet bij elkaar te slepen en pleuren. Voor sommige dingen moet je gewoon een basis hebben, dan daarvoor kun je bronnen op internet vaak ofwel niet vertrouwen, ofwel ze sluiten niet op jouw ervaring/kennis aan. Boeken zijn in dat opzicht veel beter.

Het boek wat ik nu heb (PHP Applicatieontwikkeling (ISBN: 9039523940)) voldoet dus niet aan mijn vraag, (ik ga eens zoeken naar een boek meer gericht op het ontwerp deel, iemand nog goede ervaringen met bepaalde boeken?

[ Voor 47% gewijzigd door Maarten op 02-02-2011 08:34 ]

[tonyisgaaf]

offtopic:
Heerlijk toontje hier weer. GoT wordt er echt stukken aantrekkelijker op de laatste jaren. "OMFG wat een domme oplossing!!!" Zo sla je een forum wel dood.

Maarten schreef op woensdag 02 februari 2011 @ 08:31:
[...]
Het boek wat ik nu heb (PHP Applicatieontwikkeling (ISBN: 9039523940)) voldoet dus niet aan mijn vraag, (ik ga eens zoeken naar een boek meer gericht op het ontwerp deel, iemand nog goede ervaringen met bepaalde boeken?

Ik denk dat het boek wel de concepten beschrijft die je nodig hebt, maar dat je ze als zodanig niet herkent. De frames die je eerder beschreef waren een "elegante" oplossing voor het opknippen van de site in functionele blokken. Probeer je deze functionele blokken nu voor te stellen als herbruikbare modules. Elk van deze modules zou je in een apart PHP bestand kunnen stoppen. Of je dat op een object georiënteerde wijze doet laat ik in het midden .
PHP (en het is wat jaren geleden dat ik me daaraan gewaagd heb) heeft dan vervolgens instructies als "include" en "include once" en/of "require" en "require once" om deze "modules" op een specifiek moment (door jou gekozen) in de (huidige) pagina te laden.

Dit neemt natuurlijk niet weg dat je, om PHP de juiste HTML te laten genereren, niet verstoken kunt zijn van genoeg kennis van HTML en CSS.
Begin dus met het maken van het "ontwerp", liefst op papier (zodat je het jezelf niet kwalijk neemt om een versie "weg te gooien"). Maak vervolgens een statische versie in HTML en CSS. Identificeer herbruikbare (oftewel in praktijk repeterende) onderdelen, waaronder bijvoorbeeld een header met logo en menu.
Maak een eerste PHP versie met alles in één bestand. Begin dan aan de "refactoring": knip een stuk uit de HTML wat in elke pagina voor moet komen, stop het in een nieuw PHP bestand en "include" dit in het originele PHP bestand op de oude plek waar de weggeknipte HTML stond. Etcetera.

Op een gegeven moment realiseer je je dat het handig is in een menu (uiteraard een (un)ordered list in HTML, maar dat wist je al) om via een CSS class aan te geven wat het huidige pad is. Je steekt dus het genereren van een menu in een functie, die de URL van de huidige pagina accepteert als parameter. En voor je het weet heb je een serieuze concurrent voor Wordpress gemaakt.

Als dit overigens geen hobby-project, maar een serieus project is: gebruik een CMS. Er moet ook nog geld verdiend worden.

[Cartman!]

tonyisgaaf schreef op donderdag 03 februari 2011 @ 11:31:

offtopic:
Heerlijk toontje hier weer. GoT wordt er echt stukken aantrekkelijker op de laatste jaren. "OMFG wat een domme oplossing!!!" Zo sla je een forum wel dood.

Dat ligt denk ik aan jou dan, ik merk alleen maar dat het niveau hier hoog is en dat er veel moeite wordt gedaan dit zo te houden.

Aan de TS: je moet vooral het idee loslaten dat alleen het gewijzigde deel wilt inladen, met hedendaagse browsers zul je bij een goed opgebouwde pagina met gescheiden opmaak (html) en styling (css) vaak niet eens een reload duidelijk zien.

[m0nk]

Heb ik erg veel aan gehad:
http://www.barelyfitz.com...training/css/positioning/

En deze:
http://developerscorner.nl/csshunter/phpsite/tutorial.htm

[ Voor 27% gewijzigd door m0nk op 07-02-2011 09:58 ]

[Verwijderd]

Ik ben ook bezig met HTML, CSS, en PHP, Java, het is voor mij best een warboel, maar ik zelf heb een aantal fijne boeken gevonden die mij op weg helpen, van Peter Kassenaar,
http://www.kassenaar.com/blog/category/Boeken.aspx
daar staan goede boeken tussen.

Ik werk nu met Dreamweaver, heel vroeger een beetje zitten spelen daar mee met de MX serie, maar nu CS5, een behoorlijke vooruitgang. maar ik zou persoonlijk eerst een beetje verdiepen in de Css, dat voorkomt een hoop gepruts! en frustratie!

dus mischien heb je daar wat aan,! aan die link met boeken goede voorbereiding is het halve werk.