Totale website met CSS en HTML maken

[Verwijderd]

Mijn excuses voor mijn mogelijk niet duidelijke titel, maar denk dat dit toch wel de lading dekt.

Mijn probleem is heel kort. Ik heb een webpagina gemaakt volledig in HTML icm CSS. Na alle tutorials en pagina's te hebben gelezen heb ik alles gecodeerd met div's etc. Echter, wat altijd ontbreekt is de stap na het maken van één pagina! Dit ontbreekt in werkelijk alle tutorials, ze beschouwen voornamelijk de syntax etc, maar mij is onduidelijk hoe ik mijn pagina omvorm naar een site. Dat wil zeggen, als ik op bijvoorbeeld op contact druk dat één div (deel van de site) veranderd en andere content laat zien. En al druk ik daarna weer op home dat weer de hoofdpagina wordt vertoond. Ik wil het gebeuren niet dynamisch (dus geen CMS), maar omdat het een simpele bedrijfspagina betreft enkel statisch. Moet ik nu voor elke apart pagina (home, contact, producten etc) een aparte xhtml pagina maken? en ze dan onderling linken, of kan ik ook alleen bepaalde gebieden met content laten wijzigen, wanneer de bezoeker op een link drukt.

Kortom, ik heb een site, hoe kan ik de content laten wijzigen op bepaalde delen, wanneer je op een link drukt. Geen enkele tutorial behandeld dit.

Bedankt! Ik weet zeker dat het relatief makkelijk is, maar ik wil graag weten welke standaarden hiervoor worden gebruikt. ik kan namelijk niet geloven dat ik 10 xhtml pagina's moet maken.

[Quinie]

ja 10 keer een pagina of met Ajax gaan werken of meer met een CMS oplossing/ php /asp

[giMoz]

je eigen gedachtegang is in principe correct: ja je zal wel 10 pagina's moeten maken.
Maar je kan de bovenste stuk en je onderste stuk best in een server side include stoppen (met php of met asp)

Maar om mezelf even tegen te spreken: Je kan ook alles in 1 pagina stoppen en met javascript div'jes laten displayen of niet.
Of: je kan met AJAX real time de desgewenste info uit een xml file halen..

Mogelijkheden te over maar zoals je nu overkomt klink je niet als iemand die er veel verstand van heeft, tip mijnerzijds zoek iemand die er wel verstand van heeft.

[Verwijderd]

Geloof het maar wel..

Wil je dat doen wat jij wilt dan kom je toch een of ander script te gebruiken (PHP, Javascript, Perl enz enz)

Anders wordt het toch 10 aparte bestandjes maken ( wat toch niet al te veel werk is lijkt me)

[iworx]

Of met templates in een tool zoals Dreamweaver -- dan bouw je eenmaal je structuur, duidt de te wijzigen stukken aan en done. Nieuwe pagina's maak je dan adhv. je template.

[Verwijderd]

Zoals giMoz al opmerkte kan je gewoon een pagina ophalen via een xmlhttprequest, de opgehaalde data uitlezen en gebruiken om divjes mee te vullen.

Voor een voorbeeld zou je de code van AjaxTabsContent eens kunnen bekijken.

Of je stapt over op een pakket als Backbase oid, dan is het nog simpeler en hoef je alleen maar een carddeck te gebruiken.

[Zerora]

Een andere manier, een wat eenvoudigere manier dan het gebruik van PHP en ASP, is: iframes.
Laat het onderdeel dat steeds moet wisselen laden in een iframe.
Zo blijft je header/menu/etc.. gewoon intact, terwijl de content wel wisselt na 1 druk op de knop.

[Verwijderd]

Tweakers,

Ik ben al een stuk wijzer geworden! Zoals GiMoz al direct opmerkte ben ik niet iemand die er heel veel verstand van heeft, maar ik leer graag. Zijn advies om het door iemand anders te laten doen pas ik dus ook niet aan. Ik vind het juist leuk om te experimenteren.

Ik ga de opties met het laden vanuit een database bekijken, backbase en toch een cms. Ik ben echt een voorstander van bijvoorbeeld Joomla, daar heb ik al een template voor ontworpen. Maar ik wilde dat voor deze site niet doen, omdat ik persoonlijk vind dat templates voor een cms de designer teveel beperken. Het is dan in mindere mate mogelijk om goed gelikte sites te maken.

In ieder geval bedankt alvast voor alle feedback. Mogelijk hebben meerdere er wat aan.

[Boelie-Boelie]

Als je met een extern stylesheet werkt en het is maar een handjevol pagina's, dan kun je ook best zonder al die (in dit geval) over-the-top-oplossingen als AJAX (bijv. Backbase) of een CMS (bijv. Joomla). Wanneer je styling vastligt in een extern bestand, zal elke pagina die gelinkt is naar dat stylesheet er hetzelfde uit komen te zien. Je hoeft dus alleen de HTML te kopiëren en een stuk van de content te wijzigen; de layout blijft hetzelfde.

Als je daarnaast stukken HTML hebt die op elke pagina hetzelfde zijn, dan kun je PHP-includes proberen. Het stukje dat regelmatig terugkomt, zet je in een extern bestand dat je aanroept op de plek waar het terug moet komen; het wordt er dan automatisch ingeplakt.

Verder hebben templates niet of nauwelijks iets met de beperkingen van een designer te maken, dat ligt aan de designer zelf. Hoe zou een template creativiteit kunnen beperken? Op CSS Zen Garden wordt gebruik gemaakt van één HTML-template, met honderden zeer creatieve designs.
Wel schijnt het zo te zijn dat templates maken volgens webstandaarden onder Joomla gepaard gaat met hoofdbrekens; in dat geval kan het CMS je beperken.

[mithras]

In plaats van de AJAX hype te volgen en je daarop te storten, kan php volgens mij prima wat je wil. Dan gaat het wel ff over de schutting naar PRG, maar dan kan je zoiets doen als dit:

PHP: index.php

<?php
$page=$_GET['page'];
switch($page){
  case 'contact':
    $include='contact';
    break;
  case 'producten':
    $include='producten';
    break;
  default:
    $include='main';
}
?>

HTML: index.php

<html>
<body>
<div id="container">
    <div id="menu">
      <!-- hier je menu -->
      </div>
    <div id="content">
      <?php include($include.'.htm'); ?>
      </div>
  </div>
</body>
</html>

Je kan dan een pagina 'producten.htm' laten invoegen op een bepaalde plaats door naar de url 'index.php?page=producten' te verwijzen. Als het keyword achter page= bestaat in de lijst (de switch functie), dan wordt een bepaald bestand geinclude. Staat de page niet in de switch, wordt de home page getoond (main.htm). Is dus gelijk in dat opzicht veilig tegen script input

[Verwijderd]

Gebruik alsjeblieft géén AJAX voor een website zoals deze! Maak aparte HTML-pagina's en gebruik hyperlinks om van de een naar de andere webpagina te komen. AJAX gebruik je alleen als je een interactieve website maakt, en dan nog alleen als het duidelijk meerwaarde biedt en je precies weet wat je doet. AJAX zorgt aan alle kanten voor verwarring: de zoekmachine kan er niets mee, de bezoeker zal zich afvragen waarom de back-button niet werkt en als je als website-bouwer niet wat er gebeurt kom je hopeloos in de knoei als je de website wilt uitbreiden.

[moozzuzz]

Beide goede mogelijkheden zijn al gegeven:
- 10 verschillende html-documenten maken en linken (eenvoudig, geen js, meer onderhoud)
- 1 html-document maken met 10 verschillende divs (moeilijker voor beginner, minder onderhoudswerk, js nodig voor je pagina's)

[ Voor 5% gewijzigd door moozzuzz op 06-09-2006 16:10 ]

[Verwijderd]

moozzuzz schreef op woensdag 06 september 2006 @ 16:09:
Beide goede mogelijkheden zijn al gegeven:
- 10 verschillende html-documenten maken en linken (eenvoudig, geen js, meer onderhoud)
- 1 html-document maken met 10 verschillende divs (moeilijker voor beginner, minder onderhoudswerk, js nodig voor je pagina's)

Nogmaals, ga alsjeblieft niet moeilijk lopen doen met javascript en div-elementen. Gebruik HTML zonder JavaScript en zet met php een klein framework op om de tijd die je kwijt bent aan onderhoud te verminderen. In dit topic hebben anderen al aangegeven hoe dat met php te bereiken is.

Houd het simpel, zeker als je nog niet precies weet hoe alles werkt. Javascript is leuk, maar er kleven nogal wat nadelen aan, zeker als het aankomt op toegankelijkheid van je website. Bouw mee aan het web zoals het bedoeld is: losse HTML-pagina's die met hyperlinks naar elkaar verwijzen.

[Zerora]

Je kan ook een combinatie van veschillende documenten en 1 pagina keuze doen.
Bijv.:
Je maakt 1 volledige pagina met alle opmaak etc..
Dan maak je php een event dat als er op een knop wordt gedrukt dat een aparte html/php (alleen tekst/plaatjes) pagina wordt geinclude in je volledige site pagina.

resultaat is dat je aparte pagina hebt, maar als je op internet gaat bekijken is het maar 1 pagina.

[moozzuzz]

Verwijderd schreef op woensdag 06 september 2006 @ 16:17:
Nogmaals, ga alsjeblieft niet moeilijk lopen doen met javascript en div-elementen. Gebruik HTML zonder JavaScript en zet met php een klein framework op om de tijd die je kwijt bent aan onderhoud te verminderen. In dit topic hebben anderen al aangegeven hoe dat met php te bereiken is.

Ik weet ook wel dat je met SSI het makkelijkst werkt, maar dat is volgens mij geen optie in dit geval. Je weet niet of de TS een php-installatie kan bewerkstelligen. Met PHP haal je mogelijks extra beveiligingsproblemen op de kop. PHP is zeer simpel en krachtig, maar dat kan zich ook tegen je keren... Iemand die nog niet met PHP gewerkt heeft, zou ik alvast geen php-website (voor een bedrijf) aanraden.

Daarentegen is de inhoud van een div laten aanpassen safer + makkelijk via google te leren. Een tiental keer je bronbestand kopiëren en dan de inhoud aanpassen is ook de grote moeite niet.

[Verwijderd]

moozzuzz schreef op woensdag 06 september 2006 @ 16:40:
[...]

PHP is zeer simpel en krachtig, maar dat kan zich ook tegen je keren... Iemand die nog niet met PHP gewerkt heeft, zou ik alvast geen php-website (voor een bedrijf) aanraden.

Zoveel kan er niet mis gaan met include('menu.html') lijkt me (aangenomen dat z'n ISP de PHP install/upates doet).

Daarentegen is de inhoud van een div laten aanpassen safer + makkelijk via google te leren.

En helaas ook ontoegankelijker.

[ Voor 14% gewijzigd door Verwijderd op 06-09-2006 22:51 ]

[H004]

Als je php tot je beschikking hebt, zou je deze tutorial eens kunnen volgen. Hierin wordt stap voor stap uitgelegd wat oa. Mithras86 voorstelt. Een template waarin je verschillende pagina's (met alleen de wisselende inhoud) kan laden. Heel eenvoudig, en minder werk dan 10 html-pagina's maken. Als je bv een kleine aanpassing in het uiterlijk van je website wil maken, bv een divje op een andere plaats, hoef je met deze php-manier alleen de template-pagina aan te passen. Met 10 verschillende html-pagina's moet je op alle 10 de pagina's de aanpassing maken. Meer werk dus.

De switch van Mithras86 kun je eventueel later inbouwen voor extra veiligheid etc., zodra je doorhebt hoe includen in zn werk gaat. Dan maak je voor elke verschillende pagina een case met een eigen include_once(), zodat eventuele vervelende mensen geen kwaad meer kunnen.

Heel eenvoudig, en t werkt prima!

[Verwijderd]

Super! Ik ga de hierboven genoemde tutorial gebruiken en de php switch functie. Ik wist dat het op soortgelijke manier mogelijk was, omdat je het bij de meeste simpele websites op deze manier ziet gebeuren. Bedankt voor jullie hulp. Ik laat weten of ik eruit ben gekomen, maar vertrouw erop dat het gaatlukken.