SWOA cursus Webdesign. Les 1

Transcriptie

1 SWOA cursus Webdesign Les 1

2 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 Een tekstframe toevoegen Een aangepast frame (A-frame) aanmaken Een HTML- frame aanmaken met overvloeiende tekst Schuifbalk toevoegen Een HTML- frame aanmaken met daarin passende tekst Gekoppelde aangepast frames (A-frames) aanmaken De website opslaan Zie ook Met Tekst werken in Nuttige info: De Gebruikershandleiding SWOA cursus Webdesign, les 1 Pagina 2 van 18

3 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: SWOA cursus Webdesign, les 1 Pagina 3 van 18

4 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 : SWOA cursus Webdesign, les 1 Pagina 4 van 18

5 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. SWOA cursus Webdesign, les 1 Pagina 5 van 18

6 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: SWOA cursus Webdesign, les 1 Pagina 6 van 18

7 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+ SWOA cursus Webdesign, les 1 Pagina 7 van 18

8 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: SWOA cursus Webdesign, les 1 Pagina 8 van 18

9 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 SWOA cursus Webdesign, les 1 Pagina 9 van 18

10 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. SWOA cursus Webdesign, les 1 Pagina 10 van 18

11 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: SWOA cursus Webdesign, les 1 Pagina 11 van 18

12 Nu een tekstbestand (Vindverhaal.rtf) ophalen en in het A-frame plaatsen: Alle tekst past niet in dit frame. Klik op [Nee]: SWOA cursus Webdesign, les 1 Pagina 12 van 18

13 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. SWOA cursus Webdesign, les 1 Pagina 13 van 18

14 Bekijk deze Pagina 3 in Voorbeeld in venster en zie dat hetzelfde beeld zichtbaar is als bij het A- frame. 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 Pagina 14 van 18

15 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. SWOA cursus Webdesign, les 1 Pagina 15 van 18

16 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. SWOA cursus Webdesign, les 1 Pagina 16 van 18

17 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 Pagina 17 van 18

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. SWOA cursus Webdesign, les 1 Pagina 18 van 18