werken met een sjabloon

Status
Niet open voor verdere reacties.
K

Koenie

Gebruiker
Lid geworden
14 mei 2004
Berichten
312
Hallo allemaal,

ik ben bezig met het vernieuwen van een website dmv een sjabloon in dreamweaver.
De opbouw is nu gebasseerd op allemaal losse pagina's en we gebruiken de volgende code
<li><a class="selected" href="index.html">Home</a></li> om in het menu aan te geven dat je op de indexpagina zit.
Alle andere pagina's hebben ook deze code maar dan natuurlijk met de betreffende html pagina.

Zo kunnen bezoekers zien op welke pagina zij zich bevinden.
De code wordt op elke pagina afzonderlijk ingevoerd voor de betreffende pagina.
dus b.v. de vereniging.html pagina heeft als code; <a class- "selected" href= vereniging.html"> enz...enz....

Omdat de site groter wordt en we niet steeds op elke pagina handmatig de veranderingen door willen voeren, willen we deze gaan maken op basis van een sjabloon.
En daar loop ik nu dus tegen het probleem op dat bij alle andere pagina's de tab op de index pagina blijft staan omdat we het menu niet bewerkbaar willen hebben op alle losse pagina's.

heeft iemand een idee hoe ik dit op kan lossen zodat bij het selecteren van een pagina de betreffende tab in het menu geselecteerd wordt.

bvd
Monique
 
Laatst bewerkt:
Hoi Monique,
Ja: daar is een css-truc voor! :)
Wat te doen?

Stap 1
Je maakt eerst een universeel menu, waarin alle pagina-links een eigen id hebben, bv.:
HTML: 
<ul id="menu">
    <li><a class="hme" href="index.html">Home</a></li>
    <li><a class="ver" href="vereniging.html">Vereniging</a></li>
    .... enz.
    <li><a class="ctc" href="contact.html">Contact</a></li>
</ul>
Dit zet je op deze manier in het .dwt-sjabloon, dan komt het op elke pagina.
In het .dwt-sjabloon maak je ook de <body>-tag tot "editable region" (als die dat nog niet is).
Er gebeurt nog niets, geen enkele pagina is in het menu uitgelicht als "selected".

Stap 2
Je gaat naar het stylesheet van de pagina's, bv. /stylesheets/general.css.
Daarin zet je dit:
Code: 
#hme a.hme,
#ver a.ver,
...
#ctc a.ctc { /* de styles die de pagina in het menu moet krijgen als dat de "selected" pagina is: */
    color: ...;
    background: ... ;
    enz.
    }
Nu gebeurt er nog steeds niets, want op geen enkele pagina wordt de class="hme" voorafgegaan in de html door ergens een id="hme" (enz.): de waterval werkt nog niet.

Stap 3
Je gaat nu naar de homepage, en gaat de <body>-tag editten.
Daar maak je van: <body id="hme">.
Bekijk je 'm nu, dan gebeurt er wel wat: de Home-knop (/link) heeft nu de opmaak van de actuele pagina.
Want op deze pagina wordt wel de class="hme" voorafgegaan in de html door (in de <body>-tag) een id="hme", waardoor de cascade losbarst en de knop/link de actuele status heeft gekregen.
Alle andere pagina's reageren hier niet op, want die hebben géén id="hme" op de pagina staan.

Stap 4 t/m 1575 ;)
Hetzelfde doe je met alle andere 1570 pagina's in het menu (en/of de submenu's): elk krijgt in de body-tag de id die als class in het menu staat.
Nu reageert elke pagina op z'n gelijkluidende id en class, terwijl de andere pagina's in het menu op die pagina niet reageren.

Stap 1576
Komt er een nieuwe pagina in het menu bij (met nieuwe class-waarde), dan moet je niet vergeten die als id-waarde toe te voegen aan het rijtje in het stylesheet.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan