Drie vragen over de index pagina. (dreamweaver CS5)

Steffanie · 26 feb 2011

Hallo,

Sinds kort werk ik met Dreamweaver. De meeste dingen lukken wel: plaatjes, filmpjes etc. Maar een aantal dingen lukken ook niet.

De index pagina (meestal "home" genoemd) is voor mij een groot raadsel. Ik heb 3 verschillende dingen waar ik tegenaan loop.

Pagina-indeling
Hoe maak ik deze pagina indeling: menubalk (boven of links) en tekst (onder of rechts)? Ik heb ergens gelezen dat daar 3 verschillende manieren voor zijn? Maar ik snap niet zo goed welke manier de beste is en hoe deze werken.
Nog een vraag die hierbij aansluit: stel ik maak een site met "home", "over mij", "contact" en "links", ik weet dat ik voor elke nieuwe pagina een nieuw bestand moet maken (en al deze bestanden samen vormen mijn website). Moet ik dan ook voor elk van deze pagina's de pagina-indeling in dat bestand vermelden?

Lay-out
Daarbij heb ik ook de vraag; stel ik programmeer zoiets in HTML & CSS (want ik ga er vanuit dat ik het daarmee wel voor elkaar moet krijgen), hoe krijg ik dan een mooie lay-out? Ik kan overweg met photoshop, maar is het mogelijk om m'n lay-out die ik in photoshop maak te verwerken in dreamweaver?

Links
Boven zie je een menu. Als je op 1 van die knoppen klikt, veranderd de tekst die eronder staat, maar de rest van de site (dus het "navigatie-menu" blijft hetzelfde).
Hoe krijg ik het voor elkaar dat bij het klikken op de knop de tekst onder de knoppen veranderd? Als ik zoiets maak, komt de tekst die ik onder de knoppen wil laten verschijnen op de plaats van de knoppen terecht. :S

Hopelijk is het zo duidelijk?
Alvast bedankt voor de hulp.

Mvg,
Steffanie

csshunter · 26 feb 2011

Hoi Steffanie,
Daar komt ie!

Pagina-indeling
De 3 manieren van pagina-indeling die je gelezen hebt, zijn vermoedelijk de 3 manieren waarop je css in de pagina kunt verwerken.

CSS-opmaak met "inline styles":
De opmaak-voorschriften staan dan regelrecht in de HTML-code zelf. Bv.

HTML:

<p style="color: green">Dit is groene tekst, maar <span style="color: red">dit is rood</span>.</p>
<p>Dit is gewone zwarte tekst.</p>
<p style="color: green">Dit is weer groene tekst.</p>

CSS-opmaak met een "style-block" in de <head> van de pagina:
De HTML-code heeft aangrijpingspunten voor de CSS (met o.a. "classes" en "ID's"), en de CSS opmaak-voorschriften staan dan apart bij elkaar. Bv.

HTML:

...
<head>
...
<style type="text/css">
.veilig {
    color: green;
    }
.alarm {
    color: red;
    }
</style>
</head>
<body>
...
<p class="veilig">Dit is groene tekst, maar <span class="alarm">dit is rood</span>.</p>
<p>Dit is gewone zwarte tekst.</p>
<p class="veilig">Dit is weer groene tekst.</p>

CSS-opmaak met een apart "stylesheet":
De HTML-code heeft weer dezelfde aangrijpingspunten voor de CSS, maar alle opmaakregels staan nu in een CSS-bestandje (bv.: opmaak.css) bij elkaar, vaak in een apart mapje (bv.: toebehoren/). Dat stylesheet wordt in de <head> aan de pagina vastgeknoopt. Bv.:

HTML:

...
<head>
...
<link rel="stylesheet" type="text/css" href="toebehoren/opmaak.css">
</head>
<body>
...
<p class="veilig">Dit is groene tekst, maar <span class="alarm">dit is rood</span>.</p>
<p>Dit is gewone zwarte tekst.</p>
<p class="veilig">Dit is weer groene tekst.</p>

Het CSS-bestandje is een gewoon Kladblok-bestand (tekst-bestand), maar dan met de uitgang .css. In ons geval is de inhoud van opmaak.css (hetzelfde als bij de CSS in de <head>):

Code:

.veilig 
    color: green;
    }
.alarm {
    color: red;
    }

Er hoeft alleen geen <style>...</style> bij, want dat blijkt al uit het aanhaken als .css-bestand.

Wie van de 3?

Inline styles zijn soms wel eens handig om even vlug te kijken hoe iets er in een bepaalde opmaak uit ziet. Verder vervuilt het de HTML-code enorm: HTML-code wordt gemengd met opmaak-code, je moet het steeds opnieuw aan nieuwe regels toevoegen, en je ziet door de bomen het bos niet meer. Af te raden!
Een style-block in de <head> maakt het meteen een stuk overzichtelijker in de HTML-code. Voordeel is ook: als je iets toch anders wilt hebben hoef je dat maar één keer te doen, en het heeft effect op de hele pagina tegelijk (met inline styles had het per regel nagekeken en/of veranderd moeten worden). Bv.

HTML:

...
<head>
...
<style type="text/css">
.veilig {
    color: green;
    }
.alarm {
    color: red;
    font-style: italic;
    }
</style>
</head>
<body>
...
<p class="veilig">Dit is groene tekst, maar <span class="alarm">dit is rood</span>.</p>
<p>Dit is gewone zwarte tekst.</p>
<p class="veilig">Dit is weer groene tekst.</p>

In dit geval worden alle elementen op de hele pagina met de class="alarm" niet alleen rood, maar ook cursief.
Deze manier is aan te raden als je met de aanbouw van de opmaak bezicht bent: alles overzichtelijk op 1 pagina bij elkaar, en met het opslaan van een versie heb je meteen de bijbehorende CSS erbij. In een volgende versie kan je de CSS veranderen, maar in geval van nood kan je altijd één of meer versies terug om te kijken hoe je het oorspronkelijk ook al weer had (vooral handig als iets mis blijkt te gaan in de nieuwere versie!).

Een apart stylesheet. Dat is het uiteindelijke doel!
Als alle opmaak in orde is, kan deze uit de <head> verdwijnen en gepromoveerd worden tot een echt CSS-stylesheet. Want met styles in de <head> werken ze wel op die ene pagina, maar niet op alle andere pagina's. Daar zou het hele <style>...</style> verhaal opnieuw in de <head> ingeplakt moeten worden. Met het ene verwijsregeltje in de <head> ben je daar mooi van af. Voor een wijziging op alle pagina's van de hele site hoef je nu alleen maar iets in het stylesheet te veranderen, en het wordt automatisch overal toegepast.

De structuur van je HTML-pagina's moet wel hetzelfde zijn, anders kan de CSS niet werken. Bv.

HTML:

<body>
<div id="header">
    <h1>Mijn website!</h1>
</div>

<div id="linkerkant">
    <ul id="menu">
        <li> ... </li>
        <li> ... </li>
        <li> ... </li>
    </ul>
    <h2>Contactgegevens:</h2>
    <p> ... </p>
</div>

<div id="inhoud">
    <h2>Welkom!</h2>
    <p>Op deze vrolijke website vind je ...</p>
</div>

</body>
</html>

Een <div> is een indelingsblok, en deze <div>'s komen op die manier terug op elke pagina die er hetzelfde uit moet zien. Alleen de inhoud kan dan verschillen.

Lay-out
Het belangrijkste staat al hierboven: de indeling van je pagina en wat er in die indeling aan opmaak moet gebeuren. De grafische opmaak met afbeeldingen kan hierin verwerkt worden, door bv. de afbeeldingen als achtergrond-afbeeldingen aan een bepaald element vast te maken.
Er zijn hierbij wel wat voetangels en klemmen! Bij meer tekst op de ene pagina dan op de andere pagina mag de tekst op de grotere pagina niet uit de achtergrond weglopen. - Maar daar zijn meestal wel (CSS-) oplossingen voor te vinden.

Links

Boven zie je een menu.

Ik zie niks.

Je beschrijving van wat er moet gebeuren snap ik niet helemaal. Bedoel je dat op een andere pagina de tekst van een menu-knop veranderd moet zijn?

=======

Om goed met Dreamweaver overweg te kunnen, ook al is het een WhatYouSee... enz. editor (maar soms niet helemaal te vertrouwen in de preview...), is het nodig om wat basiskennis van HTML en CSS te hebben.
Wat hierboven staat, is daar een deel van. Maar er is meer!

Aanbevolen leesvoer: www.web-garden.be/cursus-html/cursus-html

Met vriendelijke groet,
CSShunter

Drie vragen over de index pagina. (dreamweaver CS5)

Steffanie

Nieuwe gebruiker

csshunter

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy