DreamWeaver: HTML + CSS Stylesheets

Wat zijn Stylesheets?

In de les over HTML ‘De Meest Basic Website Ooit’, heb ik uitgelegd dat een HTML pagina, dus een internetpagina, eigenlijk hetzelfde is als een .txt tekst pagina, maar dan met de extensie .html aan het einde en met tekst erin die is ‘opgemaakt’ met HTML codes. Web browsers zoals Internet Explorer, Firefox, Google Chrome en Safari etc. kunnen pagina’s die html bevatten lezen en vertonen.

In principe kun je met alleen HTML een hele goede en complexe website bouwen. Het nadeel van werken met uitsluitend HTML is dat je dan voor iedere pagina moet aangeven van welke kleuren, lettertypes, en formaten de pagina gebruik maakt.
Dit is niet alleen veel werk, het is ook onhandig, als je ineens besluit toch voor een andere ‘stijl’ te gaan, dan moet je namelijk iedere pagina afzonderlijk veranderen.

Om dit een stuk eenvoudiger te maken gebruikt men ‘Stylesheets’.
Een Stylesheet is een .css bestand waarin regels staan voor de opmaak van één of meerdere HTML pagina’s. Dus regels voor welke lettertypes, kleuren etc. de .html pagina’s moeten gebruiken.
Dit bestand wordt gewoonlijk in hetzelfde mapje als de index.html pagina (dus de hoofdpagina van je site) en de andere .html pagina’s geplaatst, zodat alle HTML pagina’s van dezelfde Stylesheet gebruik kunnen maken.

Dit is handig want als je website gebruikt maakt van .css Stylesheets en je besluit om voor een ander lettertype te gaan hoef je alleen de regel daarvoor in het .css bestand te veranderen en dan veranderen alle .html pagina’s die gebruik maken van die stylesheet vanzelf mee.

Deze les gaat over hoe dit principe werkt, en hoe je een simpele basis html website die gebruik maakt van een .css Stylesheet, kunt maken met Dreamweaver.

Wat we gaan maken

Omdat ik deze les vooral wil laten gaan over de basis van Dreamweaver, HTML en CSS, heb ik het onderwerp voor de website die we gaan maken al gekozen.
We gaan een site maken over ons zonnestelsel met informatie over, en afbeeldingen van, de verschillende planeten. De informatie en afbeeldingen kopiëren we van Wikipedia. Aan het einde van deze les heb je een site die er (ongeveer) zo uit ziet:

Stap 1: Dreamweaver starten en de layout aanpassen.

Start Dreamweaver en klik op “New > HTML Document” om een nieuwe .html pagina aan te maken. Klik in het volgende scherm wat opent op “Create” en Dreamweaver zal verder openen met een vrijwel lege .html pagina.

Omdat we de website zelf in .html en .css gaan schrijven is het handig om de layout van Dreamweaver wat aan te passen. Dit doen we door de twee hoofd vensters van Dreamweaver: het Code en het Live venster, naast elkaar op te stellen, zodat we aan de linkerkant van het beeld het Live venster zien en rechts het Code venster.

Ik weet niet hoe de layout eruit ziet als jullie Dreamweaver openen maar zorg ervoor dat je indeling er zo uit ziet als in het plaatje hierboven, door links bovenin naast “Code” op “Split” te klikken.

Klik daarna bovenin in de menu bar op “View” en zet “Split Vertically” en “Live View on Left”aan.

Stap 2: Een website map aanmaken.

Klik in de menu bar op “File > Save as” en navigeer naar de Desktop van je computer. Maak daar een nieuwe map aan met de naam “MijnWebsite” of iets dergelijks en sla het .html bestand op in die website map met de naam “index.html”.

Dit is de hoofdpagina van je website en die moet altijd de naam index.html hebben zodat de web-host waar je de website eventueel op zet weet wat je hoofdpagina is.

Open de website map op je desktop en maak hierin nog drie nieuwe mapjes aan met de namen “images”, “pages”, en “styles”. Hier gaan we later onze plaatjes, de andere .html pagina’s en de .css stylesheet in stoppen.

Het is belangrijk deze mapjes structuur aan het begin goed te bepalen zodat we later niet alle verwijzingen in de html pagina’s hoeven te wijzigen en zodat de website map overzichtelijk blijft.

Stap 3: De index.html pagina opzetten.

Zoals je ziet heeft Dreamweaver al een paar regels html voor ons in de index.html pagina gezet.
Op regel 1 zie je de tag <!doctype html>.
Dit is de “document type declaratie”, deze tag verteld de internet browser dat het hier om een html document gaat en niet een ander soort document zoals bijvoorbeeld .xml.

Het volgende wat Dreamweaver voor ons heeft klaargezet op regel 2 is de <html> open tag . Dit geeft aan waar het html gedeelte van het document begint en onderaan waar het eindigt, met de </html> sluit tag.

Alle inhoud van onze pagina komt tussen deze twee html tags.

De meeste html tags/elementen hebben een open en close tag, de close tag is altijd hetzelfde als de open tag maar dan met een forward slash / ervoor.

Dreamweaver heeft ook de <head> en de <body> tags voor ons klaargezet.

In de <head> sectie heeft Dreamweaver de <title> tags met daarin de titel van de pagina gezet.

Verander in regel 5 “Untitled Document” naar “The Solar System” want dat wordt de titel van onze pagina.

<title>The Solar System</title>

Deze titel is alleen te zien in te title bar van sommige webbrowsers en niet op de pagina zelf.
De <head> sectie is ook niet zichtbaar op de pagina zelf en wordt voornamelijk gebruikt voor extra informatie over de pagina, zoals de taal van de pagina, voor ‘meta tags’ voor zoekmachines en zoals je later in deze les zult zien, voor koppelingen naar stylesheets.

De <body> open en </body> sluit tags zijn het belangrijkst want hier komt eigenlijk alle tekst, plaatjes en andere inhoud van onze html pagina in.
Je kunt dit voor het gemak zien als een grote (nu nog onzichtbare) doos waarin we andere kleinere dozen met plaatjes en tekst kunnen gaan stoppen.

Stap 4: Een titel en een tekst “doos” maken

Maak wat ruimte om te schrijven, door op regel 8 achter <body> te klikken en een paar keer op enter te drukken.
Typ daarna de <h1> open en </h1> sluit tags en typ daar nogmaals de titel van onze pagina “The<br>Solar System”.
Zorg ervoor dat je code er zo uit ziet:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>The Solar System</title>
</head>
<body>

<h1> The<br>Solar System</h1>

</body>
</html>

Je zult zien dat rechts in de Live view in dikke koeienletters de titel is verschenen. De <h1> t/m <h6> tags worden gebruikt om verschillende groottes pagina koppen of “headers” te creëren waarvan <h1> de grootste is.
De <br> (break) tag wordt gebruikt om een enter in te voegen zodat “Solar System” onder “The” komt te staan.

Het volgende wat we toevoegen is een “doos” met een stukje informatie tekst over het zonnestelsel wat ik van Wikipedia heb gekopieerd. Omdat dit een paragraaf gewone tekst is gebruiken we hiervoor de <p> </p> paragraaf tags.

Kopieer en plak de paragraaf hieronder, 2 regels onder de titel als volgt;

<h1> The<br>Solar System</h1>

<p> The Solar System[a] comprises the Sun and the planetary system that orbits it, either directly or indirectly.[b] Of those objects that orbit the Sun directly, the largest eight are the planets,[c] with the remainder being significantly smaller objects, such as dwarf planets and small Solar System bodies such as comets and asteroids.[d] Of those that orbit the Sun indirectly, two are larger than the smallest planet. </p>

Stap 5: Het navigatie-menu

We hebben nu een titel kop en een tekst paragraaf. Het derde onderdeel wat we nog nodig hebben voor onze pagina is een navigatie menu wat we gebruiken voor links naar de verschillende pagina’s van de planeten van het zonnestelsel.
Dit doen we met de <nav> </nav> navigatie kolom tags, waarin we meerdere <a> </a> “anchor” tags, die de links naar de pagina’s vormen, plaatsen.
Vroeger werden hyperlinks, ankers “anchors” genoemd, vandaar de letter ‘a’.

Kopieer en plak het volgende stukje code boven de <h1> titel regel en je zult zien dat er op je pagina 10 links verschijnen naar de 9 verschillende planeten pagina’s en terug naar de “Home” pagina, wat deze index.html pagina is.

<nav>
<a href="index.html"> <span>Home </span> </a>
<a href="pages/sun.html"> <span>Sun </span> </a>
<a href="pages/mercury.html"> <span>Mercury </span> </a>
<a href="pages/venus.html"> <span>Venus </span> </a>
<a href="pages/earth.html"> <span>Earth </span> </a>
<a href="pages/mars.html"> <span>Mars </span> </a>
<a href="pages/jupiter.html"> <span>Jupiter </span> </a>
<a href="pages/saturn.html"> <span>Saturn </span> </a>
<a href="pages/uranus.html"> <span>Uranus </span> </a>
<a href="pages/neptune.html"><span>Neptune </span> </a>
</nav>

De <a> <a/> links bestaan uit twee delen: Het href= gedeelte geeft de naam en de locatie van de pagina aan waar we naar toe willen linken. In dit geval is dat een pagina in het pages mapje van de website map maar dit kan ook een link zijn naar een andere internet pagina.
De <span> </span> tag bepaalt welke naam we daadwerkelijk zien staan op de web pagina.

Controleer of je html code er in zijn geheel als volgt uitziet:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>The Solar System</title>
</head>
<body>

<nav>
<a href="index.html"> <span>Home </span> </a>
<a href="sun.html"> <span>Sun </span> </a>
<a href="mercury.html"> <span>Mercury </span> </a>
<a href="venus.html"> <span>Venus </span> </a>
<a href="earth.html"> <span>Earth </span> </a>
<a href="mars.html"> <span>Mars </span> </a>
<a href="jupiter.html"> <span>Jupiter </span> </a>
<a href="saturn.html"> <span>Saturn </span> </a>
<a href="uranus.html"> <span>Uranus </span> </a>
<a href="neptune.html"><span>Neptune </span> </a>
</nav>

<h1> The<br>Solar System</h1>

<p>
The Solar System[a] comprises the Sun and the planetary system
that orbits it, either directly or indirectly.[b] Of those objects that
orbit the Sun directly, the largest eight are the planets,[c] with the
remainder being significantly smaller objects, such as dwarf planets
and small Solar System bodies such as comets and asteroids.[d]
Of those that orbit the Sun indirectly, two are larger than
the smallest planet.
</p>

</body>
</html>

Download de planeten pagina’s met de link hieronder en plaats deze in het pages mapje van je website map, om de links in het navigatie menu te laten werken:

https://www.dropbox.com/sh/to5d2ha8a2uro8c/AADam0gX5gZZ_0aSS8D3FwnXa?dl=0

!Tip: Om te kijken hoe je website er in Internet Explorer of een andere browser uitziet kun je naar je website map gaan en dubbelklikken op het index.html bestand om het te openen in je browser. Je kunt ook in Dreamweaver op File > Preview in brower klikken.

Stap 6: De .css Stylesheet aanmaken

We zijn voor nu even klaar met de .html pagina en kunnen een begin maken aan de stylesheet.
Klik in de Dreamweaver menu bar op “File > New” . Selecteer bij “Document Type”, CSS en klik daarna op “Create”.
Ga nogmaals naar “File” en klik op “Save as”.
Sla de stylesheet op met de naam MyStyle.css in het “styles” mapje van je website map.
Sluit het MyStyle bestand in Dreamweaver af en keer voor nu weer terug naar de index.html pagina.

Stap 7: De html pagina koppelen aan de stylesheet

Om de index.html pagina te laten weten welke stylesheet gebruikt moet worden voor de opmaak, plaatsen we een link in de <head> sectie van onze code al volgt;

<head>
<meta charset="UTF-8">

<link rel="stylesheet" href="styles/MyStyle.css">

<title>The Solar System</title>

</head>

Je ziet dat de <link> tag naar de stylesheet uit twee delen bestaat:
het rel= gedeelte geeft de relatie aan, in dit geval is dat “stylesheet” en het href= gedeelte geeft (net als bij de <a> links in het navigatie menu) aan waar de stylesheet gevonden kan worden. Dus de locatie van het bestand in de website map en de naam van het bestand.
We hebben de stylesheet niet in dezelfde map als de index pagina opgeslagen maar in het aparte styles mapje, dus dat moet aangegeven worden in de link.

Klik na het plaatsen van de link, in de Live view, op het refresh knopje of druk op F5 om de pagina te verversen en je zult zien dat links boven de Live view, naast “Source Code” een knopje is verschenen met “MyStyle.css”.

Je kunt daarmee schakelen tussen de index.html source code pagina en de gelinkte MyStyle.css stylesheet pagina.

Stap 8: Beginnen met de vormgeving

Klik op het MyStyle.css knopje om te schakelen naar de stylesheet.

Dreamweaver heeft in de stylesheet alvast twee regels klaargezet.
Regel 1 “@charset “UTF-8”;” geeft aan dat we van de UTF-8 “tekencodering” gebruik maken, dit is voor ons niet interessant maar heeft te maken met hoe letters in de computer opgeslagen worden als bytes.

Op regel twee zie je een stukje commentaar staan:
/* CSS Document */

Deze regel heeft geen echt effect en is alleen bedoeld als informatie aan jou.
Alles wat je tussen /* en */ typt wordt niet door de computer gelezen als code maar gezien als commentaar en is bedoeld voor notities aan jezelf en aan andere mensen die eventueel je code lezen.
Je kan de commentaar tags ook gebruiken om éen of meerdere regels code (tijdelijk) uit te schakelen!

We hebben nu een werkende html pagina die uit drie onderdelen bestaat: het navigatiemenu, de titel en een paragraaf met tekst.
Alle drie de onderdelen hebben we in de <body> van onze html pagina gestopt.

We kunnen nu in ons css bestand aangeven welk lettertype en welke kleuren etc. we willen gebruiken voor de <body> sectie, en tegelijkertijd alle onderdelen in onze <body> sectie.

Kopieer en plak het volgende code blokje op regel 4 van MyStyle.css:

body
{
font-family: Georgia, "Times New Roman", Times, serif;
color: #6CE6EB;
text-align: center;
background-image: url(../images/orionnebula2048x1280.jpg);
}

de font-family: ; regel geeft we aan welk lettertype we gebruiken, color: ; de kleur van de letters en tekst-align: ; dat de tekst in het midden wordt uitgelijnd.

Het maakt met CSS niet uit hoeveel spaties je gebruikt tussen je codes en of je de regels code achter elkaar of onder elkaar zet. Onder elkaar is wel vaak makkelijker leesbaar.
Iedere afzonderlijke regel code moet wel worden geëindigd met een punt komma ; .

De background-image: ; regel zorgt voor de achtergrond afbeelding, maar om deze te laten werken moet je even dit plaatje downloaden en in het images mapje van je website map plaatsen:

http://das.leerpodium.nl/dreamweaver/wp-content/uploads/sites/119/2015/10/orionnebula2048x1280.jpg

Door de code tussen de krulhaakjes van het body { } element te schrijven geven we aan dat we de codes willen toepassen op de <body> sectie van het html document.

Als je een van de regels css code verwijdert en daarna zelf overnieuw typt, zal je merken dat Dreamweaver je helpt met schrijven door verschillende opties te tonen. Als je bijvoorbeeld color: typt kun je in het schermpje wat vanzelf opent, een kleuren keuze menu openen en op die manier een kleur uitzoeken.

Tip!: Alle CSS en HTML codes, met voorbeelden, zijn te vinden op www.w3schools.com. Deze pagina legt bijvoorbeeld uit hoe we een achtergrond kunnen plaatsen en instellen met CSS: http://www.w3schools.com/css/css3_backgrounds.asp

Stap 9: Het navigatiemenu en de pagina links vormgeven

Plak de volgende code blokken onder de body { } sectie om het navigatiemenu en de links in het menu wat meer vorm te geven:

nav
{
font-size: 24px;
background-color: black;
}

a:link { color: rgba(108,230,235,0.6); text-decoration: none; }
a:visited { color: rgba(108,230,235,1.00); text-decoration: none; }
a:hover { color: rgba(108,230,235,1.00); text-decoration: underline; }
a:active { color: rgba(108,230,235,1.00); text-decoration: underline; }

In nav { } geven we met font-size: ; het formaat van het lettertype aan in pixels en met background-color: ; de kleur achter de letters.

Met de a:link, a:visited, a:hover en a:active blokjes kun je verschillende opties voor de links bepalen. Voor wanneer de gebruiker met de muis over een link gaat, erop klikt en hoe de link eruit ziet als de gebruiker de link al heeft bezocht. Dit is een simpele manier om het menu voor de gebruiker wat interactiever te maken zonder gebruik te hoeven maken van plaatjes of gif’s voor de buttons.

Met text-decoration:underline; wordt hier aangegeven dat de link onderstreept wordt als de gebruiker met de muis over de link gaat of erop klikt.
Links worden standaard al onderstreept maar als je dat niet wil kun je dat uitzetten door text-decoration: none; te gebruiken.

color:; verwijst weer naar de kleur van de tekst van de <a> links, maar is deze keer opgegeven in rgba (rood, groen, blauw, alpha) waardes.
De hoeveelheid rood, groen en blauw van een kleur worden aangegeven met een getal van 0 t/m 255.
De alpha waarde bepaalt de transparantie van de kleur en wordt aangegeven met een getal tussen de 0 en 1.
0 is volledig transparant dus onzichtbaar, 0.5 is half-transparant en 1 is volledig zichtbaar, dus normaal.

Als je in de Live view met de muis over de links in de navigatiebalk gaat, zul je zien dat de links “oplichten” (eigenlijk minder transparant worden) en onderstreept worden.

Stap 10: De pagina indelen met

The
Solar System

Plaats vervolgens de titel en de paragraaf in allebei hun eigen doos met naam als volgt:

The
Solar System

</div>

Plaats als laatste, voordat we weer terug keren naar de stylesheet om de div’s in te stellen, het volgende code blokje met een afbeelding, boven de boxTitle div:

Voor deze afbeelding heb ik simpelweg met de rechtermuisknop het afbeelding adres van een Wikipedia afbeelding gekopieerd en geplakt.
Een html afbeelding hoeft dus niet perse in de images map van je website te staan maar kan ook van een andere website afkomstig zijn.

Stap 11: De div’s vormgeven en posities bepalen

Het zou waarschijnlijk een te lange les worden als ik stap voor stap uit zou leggen wat ik heb gedaan om de pagina in te delen, het is een kwestie van verschillende layout’s uitproberen en voorbeelden van internet gebruiken om het resultaat te krijgen wat je voor ogen hebt.
Ik raad aan om hiervoor later een aparte tutorial op Youtube over “html layout” te bekijken en zelf aan de slag te gaan.

Kopieer de volgende css code blokken onder de code die je al hebt staan om de website in te delen als het voorbeeld, en zie wat er gebeurt als je verschillende regels uit zet met de commentaar tags /* en */.

#boxParent
{
position:fixed;
top:calc(50% - 167px);
left:calc(50% - 400px);
width:800px;
height:334px;

/*
border-color: red;
border-width:6px;
border-style: solid;
border-radius:10px;
background: rgba(0, 0, 0, 0.66);
*/
}

#boxImage
{
position:absolute;
right:250px;
top:-3px;
height:314px;
padding:10px;
border-color: rgba(255,255,255,0.7);
border-width:medium;
border-style:solid;
border-radius:10px;
background: rgba(0, 0, 0, 0.66);
}

#boxTitle
{
position:absolute;
top:-3px;
right:-3px;
width:250px;
height:116px;
color: #6CE6EB;
border-color: rgba(255,255,255,0.7);
border-width:medium;
border-style:solid;
border-radius:10px;
background: rgba(0, 0, 0, 0.66);
}

#boxText
{
position:absolute;
right:-3px;
bottom:-3px;
width:230px;
height:195px;
padding:10px;
overflow:auto;
font-size:14px;
color: #6CE6EB ;
border-color: rgba(255,255,255,0.7);
border-width:medium;
border-style:solid;
border-radius:10px;
background: rgba(0, 0, 0, 0.66);
}

Zoals je in de code ziet heb ik een aantal regels uit gecommenteerd met /* en */.
Als je deze commentaar tags verwijdert zal je zien dat de randen en de achtergrond van de boxParent div zichtbaar worden en dat de andere div’s daar precies in passen. Ik gebruik de boxParent div alleen als “houder” voor de andere div’s, zodat ik de posities daarvan makkelijker kan instellen.

Er zijn veel verschillende manieren waarop je kan zorgen dat een div kolom precies in het midden van je browser blijft als je de grootte van je browser scherm aanpast.
De manier die ik heb toegepast is door de “boxParent” div (waar alle andere onderdelen kind/child van zijn) een “fixed” positie in het midden van het scherm te geven
( position: fixed; ).
Omdat de andere div’s “child” zijn van de “boxParent” div kan ik de posities van de titel, het plaatje en de tekst div bepalen aan de hand van de parents positie.
Dit is aangegeven met de position: absolute; regel die eigenlijk zegt dat de positie relatief moet zijn aan die van de parent, dus als de parent beweegt, bewegen de child div’s mee.
In de #boxImage {} code verklaar ik met de top:-3px; regel dat de bovenkant van de boxImage div, -3 pixels vanaf de bovenkant van de boxParent div moet beginnen en met right: 250px; dat boxImage 250 pixels vanaf de rechterkant van de boxParent div moet beginnen.

Als je in de code wat van deze getallen veranderd zal je direct zien wat er gebeurd!

width: ; en height: ; met daarin een aantal, in pixels (50px) of procenten (50%), zijn om de hoogte en breedte van een div in te stellen.

Met right, left, top, en bottom, bepaal je de posities van de div vanaf die punten.

Met de padding: ; optie kun je aangeven hoeveel ruimte er moet zijn tussen de randen en de inhoud.

Iedere div heeft ook een rand die je aan kan zetten met border-style:solid;
en aan kan passen met verschillende opties zoals border-width, border-color en border-radius, waarmee je kan zorgen voor afgeronde hoeken.

Stap 12: Laatste tweak

Scrollbar

Als je wilt zien hoe een scrollbar werkt en hoe je veel tekst in een klein vakje kunt stoppen, ga dan terug naar de source code .html pagina en verander de tekst paragraaf door een extra stuk tekst toe te voegen als volgt:

The Solar System[a] comprises the Sun and
the planetary system that orbits it, either
directly or indirectly.[b] Of those objects that
orbit the Sun directly, the largest eight are the
planets,[c] with the remainder being significantly
smaller objects, such as dwarf planets and small Solar
System bodies such as comets and asteroids.[d]
Of those that orbit the Sun indirectly, two are
larger than the smallest planet.

The Solar System formed 4.6 billion years ago from
the gravitational collapse of a giant interstellar
molecular cloud. The vast majority of the system's
mass is in the Sun, with most of the remaining mass
contained in Jupiter. The four smaller inner planets,
Mercury, Venus, Earth and Mars, are terrestrial planets,
being primarily composed of rock and metal. The four
outer planets are giant planets, being substantially
more massive than the terrestrials. The two largest,
Jupiter and Saturn, are gas giants, being composed mainly
of hydrogen and helium; the two outermost planets, Uranus
and Neptune, are ice giants, being composed largely of
substances with relatively high melting points compared
with hydrogen and helium, called ices, such as water,
ammonia and methane. All planets have almost circular
orbits that lie within a nearly flat disc called the ecliptic.

Je zal zien dat er automatisch al een scrollbar verschijnt zodat je alle tekst in het kleine vakje toch kan lezen.
Je moet hiervoor wel in de stylesheet overflow:auto; aanzetten. Als je die regel verwijdert zal je zien dat de tekst gewoon doorloopt over de randen van de div.

Omdat ik de scrollbar kleur ook met css wou aanpassen ben ik rond gaan zoeken op internet en vond ik het volgende stukje code dat gebruik maakt van “webkit” om de scrollbar te veranderen:

::-webkit-scrollbar
{
width: 12px;
}

::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(108,230,235,0.5);
border-radius: 10px;
}

::-webkit-scrollbar-thumb
{
-webkit-box-shadow: inset 0 0 6px rgba(108,230,235,0.7);
border-radius: 10px;
}.image {
}

De volledige index.html en MyStyle.css pagina’s:

index.html

MyStyle.css