SWOA cursus Webdesign. Les 1

SWOA cursus Webdesign Les 1

Inhoud Start het programma ............................................................................................................................... 3 Een nieuwe website opzetten ................................................................................................................. 4 De stramienpagina instellen .................................................................................................................... 4 Achtergrondkleur stramienpagina wijzigen ........................................................................................ 5 Koptekst toevoegen ............................................................................................................................ 6 Navigatiebalk toevoegen ..................................................................................................................... 7 Een pagina toevoegen aan de website................................................................................................ 8 Website bekijken ............................................................................................................................... 10 Een tekstframe toevoegen .................................................................................................................... 11 Een aangepast frame (A-frame) aanmaken ...................................................................................... 11 Een HTML- frame aanmaken met overvloeiende tekst................................................................ 13 Schuifbalk toevoegen .................................................................................................................... 14 Een HTML- frame aanmaken met daarin passende tekst. ............................................................... 16 Gekoppelde aangepast frames (A-frames) aanmaken ................................................................. 17 De website opslaan ........................................................................................................................... 18 Zie ook … ........................................................................................................................................... 18 Met “Tekst werken” in Nuttige info: ............................................................................................. 18 De Gebruikershandleiding ............................................................................................................. 18

SWOA cursus Webdesign, les 1 Publicatiedatum 19-3-2011

Pagina 2 van 18

Start het programma Kies werkruimte: <Standaardprofiel>

Kies daarna “Nieuwe website maken”

Verberg de “Snel aan de slag / Mediabalk” om meer ruimte te maken. Klik op het aangegeven pijltje:


Pagina 3 van 18

Een nieuwe website opzetten Je ziet nu een blanco pagina:

De stramienpagina instellen Een stramienpagina bevat elementen zoals achtergrondkleur, logo, vaste koptekst etc., die op andere pagina’s van de website moeten komen te staan. Alle elementen op de stramienpagina worden overgenomen op de overige pagina’s die gebaseerd zijn op deze stramienpagina. Je kunt meerdere stramienpagina’s maken binnen één website en deze aan afzonderlijke pagina’s van je site toewijzen. Klik op het pijltje naast “Stramienpagina’s” :


Pagina 4 van 18

Dubbelklik op: N.B.: Je ziet nu een oogje op de icoon verschijnen. Dit oogje stond daarvoor nog bij de Startpagina. Het oogje dient ervoor om snel te kunnen zien welke pagina op dat moment bewerkt wordt.

Achtergrondkleur stramienpagina wijzigen  

Klik met rechter muisknop op de achtergrond van de stramienpagina. Kies “Eigenschappen van de pagina…”



Haal het vinkje weg bij “Instellingen van schema gebruiken”. We willen een achtergrondkleur die afwijkt van het actieve kleurenschema. Het kleurenschema omvat 11 kleuren. In het hieronder getoonde kleurenschema zie je de kleuren gemerkt: 1 t/m 5, H, F, A, R, B, O.

Kleur B is de kleur van de achtergrond (background) van de pagina. Hier is deze wit. Kleurenschema’s worden in een latere les behandeld.


Pagina 5 van 18



Klik op het getoonde 3-hoekje achter Paginakleur en daarna op “Meer kleuren”



Vul de juiste getallen in om een zacht gele kleur te krijgen en klik daarna 2x op [OK]. o R: 255 o G: 255 o B: 242

Koptekst toevoegen 

Kies “Artistieke tekst invoegen”



Type de volgende tekst in de kop van de stramienpagina:


Pagina 6 van 18



Stel de lettergrootte in op 30 pt zodat de tekst de hele bladbreedte beslaat.

Navigatiebalk toevoegen 

Klik in de werkbalk aan de linkerzijde op het icoon voor het maken van een navigatiebalk:



Kies “Designer (Javascript)” en klik op *Selecteren+ naast de eerst getoonde balk:



Laat de keuze staan op “Hoogste niveau” en klik onderaan op *OK+


Pagina 7 van 18



Verschuif de balk naar een plaats in de kop van de stramienpagina.

Een pagina toevoegen aan de website 

Voeg een 2e pagina toe aan de site door op de aangegeven knop te klikken:



In het nu getoonde venster niets wijzigen maar op [OK] klikken:


Pagina 8 van 18

De pagina krijgt automatisch de naam “Pagina 2”. Deze naam kan je eventueel wijzigen.



De navigatiebalk (in de stramienpagina) wordt automatisch aangepast:



Met “Artistieke tekst” zowel op de Startpagina als op Pagina 2 een korte vermelding maken met als inhoud de naam van de pagina, “Startpagina” en “Pagina 2”:



Website opslaan als “Mijn website – Les 1.wpp”


Pagina 9 van 18

Website bekijken 

Website bekijken in Internet Explorer:



Website bekijken in “Voorbeeld in venster”

Je kunt hier bekijken hoe de site eruit zal zien op een PC met een andere schermresolutie . Bekijk de weergave bij diverse instellingen van de resolutie.


Pagina 10 van 18

Een tekstframe toevoegen Dubbelklik op Pagina 2 zodat deze actief wordt in de werkruimte. Let op het oogje!

Een aangepast frame (A-frame) aanmaken Klik in de werkbalk aan de linkerzijde op het icoon voor het maken van een Aangepast frame::

Teken met de kruisvormige cursor een rechthoek op de pagina:


Pagina 11 van 18

Nu een tekstbestand (Vindverhaal.rtf) ophalen en in het A-frame plaatsen:

Alle tekst past niet in dit frame. Klik op [Nee]:


Pagina 12 van 18

Er zijn rechts onderaan het frame een groen plusteken en een rood vierkantje zichtbaar:

Als je op het plusteken klikt dan worden er nieuwe pagina’s aangemaakt met elke eenzelfde frame. Meestal is dit niet de bedoeling omdat we voor het lezen van alle tekst op dezelfde pagina willen blijven. Daarom gaan we in de volgende stap een HTML-frame aanmaken. Een HTML- frame aanmaken met overvloeiende tekst. We voegen een nieuwe pagina toe aan de website. Dit wordt “Pagina 3”. Activeer eerst “Pagina 2” zodat de nieuwe pagina achter Pagina 2 komt i.p.v. achter de Startpagina. Als je het toch verkeerd gedaan hebt, dan kan je de volgorde wijzigen door te klikken op:

Op deze nieuwe pagina voegen we ook een tekstframe toe, maar kiezen nu voor “HTML-frame toevoegen”:

Het frame maken we even groot als het A-frame op Pagina 2. We halen weer het Vindverhaal op en merken op dat er dit keer geen boodschap verschijnt dat de tekst niet in het frame past. Er verschijnt nu alleen een rood vierkantje. Als je met de cursor hierop gaat staan dan komt er een boodschap dat de overige tekst niet in een volgend HTML-frame geplaatst kan worden.


Pagina 13 van 18

Bekijk deze Pagina 3 in “Voorbeeld in venster” en zie dat hetzelfde beeld zichtbaar is als bij het Aframe. Op het eerste oog schieten we hier dus niets mee op. Schuifbalk toevoegen We gaan een schuifbalk toevoegen waarmee we de tekst binnen het frame kunnen verschuiven. Klik met de rechter muisknop ergens binnen het frame en gaan naar het getoonde menu in het volgende venster. Omdat hier “Verbergen” staat aangevinkt (dit is de standaard optie) , was de overvloeiende tekst niet zichtbaar .

Kies nu voor “Overvloeien”. Bekijk het resultaat in het Voorbeeldvenster. Daar zie je dat het frame veel langer geworden is (de pagina is ook langer geworden) en dat alle tekst zichtbaar is. Het is niet de bedoeling dat de pagina langer wordt. De tekst moet binnen het frame blijven. SWOA cursus Webdesign, les 1 Publicatiedatum 19-3-2011

Pagina 14 van 18

Vervolgens kiezen we voor “Automatische schuifbalk weergeven”.

Het frame is nu niet groter geworden maar aan de rechter zijde staat een schuifbalk waarmee de tekst verschoven kan worden. Als laatste kiezen we “Vaste schuifbalk”. Nu zien we in het Voorbeeldvenster aan de onderzijde van het frame ook nog een horizontale balk, die hier geen nut heeft. Deze heeft wel nut als het frame zo smal is dat een heel lang woord niet op één regel binnen het frame past. Maak nu het frame heel smal, ongeveer 2 cm en bekijk het resultaat in het Voorbeeldvenster.


Pagina 15 van 18

Een HTML- frame aanmaken met daarin passende tekst. Voeg weer een nieuwe pagina toe: Pagina 4. Maak daarop een HTML-frame aan en plaats daarin het tekstbestand “Vindverhaal – klein.rtf”.

Kies voor “Automatisch schuifbalk weergeven”. De opties “Verbergen” en “Overvloeien” hebben hier geen effect omdat alle tekst in het frame past. Bekijk de pagina en zie dat er geen schuifbalk te zien is. Als dit wel het geval is, maak dan het frame een ietsje breder omdat het frame niet hoger gemaakt kan worden.. Kies nu voor “Vaste schuifbalk” en bekijk het resultaat weer. Aan de rechterzijde en aan de onderzijde is ruimte gecreëerd voor een schuifbalk. De schuifbalken zelf zijn niet aanwezig omdat de tekst in zijn geheel binnen het frame past. Deze optie zal niet zo vaak gebruikt worden.


Pagina 16 van 18

Gekoppelde aangepast frames (A-frames) aanmaken Voeg weer een nieuwe pagina toe: Pagina 5. Maak daarop een A-frame aan en plaats daarin het tekstbestand “Vindverhaal – klein.rtf”. Het verhaal past niet in het A-frame. Beantwoord de volgende vraag met NEE:

Maak naast het bestaande A-frame nog een A-frame aan, maar laat dit leeg.

Klik op het rode vierkantje. De cursor verandert in een schenkkannetje waarin nu de overvloeiende tekst zit. Klik met het kannetje in het lege A-frame en zie dat de tekst uit het kannetje in het frame vloeit. Als je het eerste A-frame kleiner maakt dan zie je de tekst naar het tweede A-frame gaan. Deze twee frames zijn dus “gekoppeld”. SWOA cursus Webdesign, les 1 Publicatiedatum 19-3-2011

Pagina 17 van 18

De website opslaan Sla de website op onder de naam “Mijn website – Les 1”

Zie ook … Met “Tekst werken” in Nuttige info:

De Gebruikershandleiding Hoofdstuk 4 (blz 66): Met tekst werken.


Pagina 18 van 18

SWOA cursus Webdesign. Les 1

Recommend Documents