Kompozer Webdesign

Maat: px

Weergave met pagina beginnen:

Download "Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/"

Sylvia de Ruiter
10 jaren geleden
Aantal bezoeken:

1 Hier vind je de cursus op het internet: Kompozer Webdesign Een bestaande website met kompozer Bestanden downloaden Inhoud Inleiding De struktuur van een website De Kompozer menu balk Opdracht Een website maken De website in de browser bekijken Tekst, lettertype, grootte, kleur Pagina kleuren en achtergrond Kompozer downloaden De website publiceren Inleiding De cursus Webdesign bestaat uit 3 delen:1jalbum fotogallery, 2 Webdesign Kompozer, 3 HTML programmeren. JAlbum is een programma waarmee je snel en makkelijk een mooie Web foto gallery kunt maken. Je kunt Jalbum gratis downloaden en een jalbum account nemen zodat je je fotogallery op het internet kunt publiceren. Kompozer is een webeditor net als Dreamweaver waarmee je een complete website kunt maken. Voordat je aan deze cursus begint is het belangrijk om goed op het internet naar andere websites te kijken. Je merkt dat het navigeren; Het doorklikken naar andere pagina's en weer terugkeren naar de homepage essentieel zijn voor een goed werkende website. Daarnaast is een frisse en creatieve vormgeving ook van belang. Pagina 1 van 14

html Inhoud Inleiding De struktuur van een website De Kompozer menu balk Opdracht Een website maken De website in de browser bekijken Tekst, lettertype, grootte, kleur Pagina kleuren en achtergrond

2 HTML is de afkorting voor: Hyper Text Markup Language. Het is een taal die aan de browser verteld hoe alles op de internetpagina moet worden weergegeven. Met HTML krijg je meer inzicht in de struktuur van een website en kan je ook gebruiken om een website te maken. Internet Explorer of Firefox De meeste mensen gebruiken de browser Internet Explorer. Dat komt omdat Explorer standaard bij Windoes wordt geleverd. Gebruik bij voorkeur Firefox. Deze browser is webvriendelijk en je kunt er bestanden van het internet mee downloaden. Het programma KompoZer is een verbeterde versie van NVU. Als je NVU hebt kan je deze cursus ook met NVU volgen. De struktuur van een website Een website bestaat uit de Homepage of index.html. De homepage, de eerste pagina die je ziet is de index.html, de onderliggende pagina's zijn dan pagina1.html en pagina2.html. enz... Alle pagina's, afbeeldingen en foto's zitten altijd in 1 map!! De pagina's zijn onderling verbonden door knoppen, tekst of image - links. Webbestanden en fotobestanden In de map met je webbestanden zitten meestal 2 soorten bestanden. Pagina 2 van 14

Dat komt omdat Explorer standaard bij Windoes wordt geleverd. Gebruik bij voorkeur Firefox. Deze browser is webvriendelijk en je kunt er bestanden van het internet mee downloaden.

3 Webbestanden en Fotobestanden Naamgeving webbestanden De naam van een webbestand moet achterelkaar staan, dus zonder spaties of leestekens. Niet zo Maar zo De naam van de map met de webbestanden moet achterelkaar staan, dus zonder spaties of leestekens. Niet zo Pagina 3 van 14

Niet zo Maar zo De naam van de map met de webbestanden moet

4 Maar zo De Kompozer menubalk In de menubalk : Bestand enz...hier staan alle functie van Kompozer. In de diverse werkbalken daaronder zijn een aantal van die functie's als snelmenu te gebruiken. Een website maken met 3 pagina's Download de bestanden en verander de naam van de map in 'mijnsite'. Hier kan je de bestanden downloaden Deze map met bestanden bestaat uit: Headers, Navigatieknoppen en foto's om een website met Kompozer te kunnen maken. De bestanden kan je alleen maar downloaden met Firefox en niet met Internet Explorer. De homepage of index pagina is eigelijk te Titel pagina van je website. Daarna volgen Pagina 1, Pagina 2. enz. 2 pagina's met Banners, foto's en tekst. 4 navigatie-knoppen: Home, Pagina 1, Pagina 2, Opdracht: Maak voor je website gebruik van de foto's die je in Photoshop hebt bewerkt. Of foto's die je met je camera hebt gemaakt.de fotos moeten aan de volgende afmetingen voldoen: maximaal 800 pixels breed Pagina 4 van 14

html Deze map met bestanden bestaat uit: Headers, Navigatieknoppen en foto's om een website met Kompozer te kunnen maken.

5 maximaal 800 pixels breed De hoogte kent geen beperking 72 dpi bestandsformaat: jpg Kwaliteit: 7 (medium) Basislijnen:standaard Ontwerp je eigen Header in Photoshop van 800 pixels breed en 200 pixels hoog en 72 dpi jpg De homepage of indexpagina maken We beginnen met de Header, daarna volgen de navigatie knoppen, de openingstekst en de foto's op de homepage te plaastsen We gaan een header invoegen Invoegen - Afbeelding -Afbeeldingseigenschappen - Bestand Kiezen - mijnsite - Header.jpg Klik op: Geen alternatieve tekst gebruiken Klik op OK Pagina 5 van 14

daarna volgen de navigatie knoppen, de openingstekst en de foto's op de homepage te plaastsen We gaan een header invoegen Invoegen -

6 Pagina 6 van 14

7 Een website heeft een navigatiebalk zodat je naar de andere webpagina's kunt klikken. We gaan de navigatie knoppen invoegen invoegen Invoegen - Afbeelding - Afbeeldingseigenschappen - Bestand Kiezen - mijnsite - home.jpg, pagina1.jpg, pagina2.jpg, .jpg Klik op: Geen alternatieve tekst gebruiken Klik op OK Een witregel envoegen Klik op Enter Een halve witregel invoegen Klink op Shift + Enter Type: Een openingstekst Een witregel envoegen Klik op Enter We gaan een foto invoegen Invoegen - Afbeelding -Afbeeldingseigenschappen - Bestand Kiezen - mijnsite - Snow.jpg Klik op: Geen alternatieve tekst gebruiken De webpagina opslaan Menu - Bestand - Opslaan Pagina 7 van 14

jpg Klik op: Geen alternatieve tekst gebruiken Klik op OK Een witregel envoegen Klik op Enter Een halve witregel invoegen Klink op Shift + Enter Type: Een openingstekst

8 Niets invullen Klik op OK Opslaan als:index.html De webpagina in de browser bekijken (zo komt de webpagina er uit te zien op het internet) Menu - Bestand - Pagina bekijken Je hebt de homepage of indexpagina gemaakt. We gaan nu de andere pagina's maken Pagina 1 Natuurlijk komt er op pagina1 een andere foto Delete foto Snow Een andere foto invoegen Invoegen - Afbeelding -Afbeeldingseigenschappen - Bestand Kiezen - mijnsite - Thee.jpg Pagina 1 opslaan Menu - Bestand - Opslaan als: pagina1.html Pagina 2 Delete - foto Mountain Een andere foto invoegen Invoegen - Afbeelding -Afbeeldingseigenschappen - Bestand Kiezen - mijnsite - Sunset.jpg Pagina 2 opslaan Menu - Bestand - Opslaan als: pagina2.html Om te kunnen navigeren van de Homepage naar de andere pagina's worden de Navigatie knoppen door middel van links met elkaar verbonden Menu - Bestand openen: index.html De Home knop linken Klik op: Home Menu - Invoegen - Koppeling Bestand kiezen: index. html en klik op OK Pagina 8 van 14

We gaan nu de andere pagina's maken Pagina 1 Natuurlijk komt er op pagina1 een andere foto Delete foto Snow Een andere foto invoegen Invoegen - Afbeelding -Afbeeldingseigenschappen - Bestand Kiezen -

9 De Pagina 1 knop linken Klik op pagina1 Menu - Invoegen - Koppeling Bestand kiezen: pagina1. html en klik op OK De Pagina 2 knop linken Klik op pagina2 Menu - Invoegen - Koppeling Bestand kiezen: pagina2. html en klik op OK De knop linken Klik op: Menu - Invoegen - Koppeling Vink aan: Het bovenstaande is een adres Vul je adres in en kik op OK De pagina opslaan: Menu - Bestand - Opslaan Volg dezelfde procedure voor pagina1 en pagina2 Daarna is de website gereed om in de browser bekeken te worden Menu - Bestand - Pagina bekijken Tekst Met Kompozer kan je teksten op de webpagina maken. Lettertype's, Lettergrootte en kleuren kiezen kies een lettertype Menu - Opmaak - Lettertype - kies :Arial De tekst een kleur geven Menu - Opmaak - Tekstkleur Pagina 9 van 14

html en klik op OK De Emailknop linken Klik op: Email Menu - Invoegen - Koppeling Vink aan: Het bovenstaande is een emailadres Vul je emailadres in en kik op OK De pagina opslaan: Menu - Bestand -

10 Kies een kleur en klik op OK Type: Dit een tekst De tekst uitlijnen Selecteer de tekst Menu - Opmaak - Uitlijnen op Links, midden of rechts rechts uitlijnen. kies voor midden uitlijnen Een pagina of achtergrond een andere kleur geven Menu - Opmaak - Paginakleuren en Achtergrond Kies een paginakleur of een achtergrondkleur Kompozer downloaden Download Kompozer. Kompozer kan je downloaden voor Windows, Mac en Linux. Je hoeft Kompozer niet te installeren. Volg deze handleiding. Pagina 10 van 14

kies voor midden uitlijnen Een pagina of achtergrond een andere kleur geven Menu - Opmaak - Paginakleuren en Achtergrond Kies een

11 Download Kompozer Open de Kompozer map Pagina 11 van 14

12 Als je dit bestand ziet moet je het uitpakken door er 2x op te klikken Wizard uitpakken - Klik op doorgaan Pagina 12 van 14

13 Je ziet 2 mappen. In de rechtse map zit het uitgepakte Kompozerbestand Klik 2 keer op de map en je ziet deze bestanden. Als je op het Kompozer icoon klikt dan kun je Kompozer starten om ermee te werken. Je kunt eventueel de hele Kompozer map naar 'Mijn Documenten slepen en een Alias op je buroblad plaatsen. Nederlandse taal Als je KompoZer voor de eerste keer opstart, zie je dat alles in het Engels staat. In de map van KompoZer zit echter een taalbestand om het programma om te zetten in de Nederlandse taal. Open KompoZer, ga naar het tabblad Tools, klik op het item Extenions, klik op Install, navigeer naar de map KompoZer, klik het bestaan aan: kpz-langpack-nlnl.xpi Klik op openen en na een paar seconden klik je op install. De website publiceren Download de Filezilla PDF FileZilla is een programma waarmee je website kunt uploaden naar de Server van je Pagina 13 van 14

Nederlandse taal Als je KompoZer voor de eerste keer opstart, zie je dat alles in het Engels staat.

14 FileZilla is een programma waarmee je website kunt uploaden naar de Server van je Provider. Daarna is je website online op het internet te zien. Download Filezilla van Installeer Filezilla Vul de FTP ( File Transfer Protocol) gegevens in die je van je Provider hebt gekregen. (Dit is een voorbeeld!) Host: ftp.planet.nl Gebruikersnaam: mijnsite Wachtwoord: 2010 Poort: Vul niets in of 21 Als je een engelse versie van Filezilla hebt dan zie je: Host, Username, Password, Port, Connect. Klik op snelverbinden om verbinding te maken met de server Veel plezier met je website Pagina 14 van 14

org/ Installeer Filezilla Vul de FTP ( File Transfer Protocol) gegevens in die je van je Provider hebt gekregen. (Dit is een voorbeeld!) Host: ftp.planet.

Vergelijkbare documenten

Zimplit is een CMS (content management system). Dat betekend dat je een website kunt ontwerpen en veranderen terwijl die online staat.

Zimplit is een CMS (content management system). Dat betekend dat je een website kunt ontwerpen en veranderen terwijl die online staat. Een website maken met ZIMPLIT. Geen kennis van html nodig. www.acc.dds.nl/lesonline/zimplit/ Download Zimplit handleiding pdf Download de Zimplit bestanden Zimplit CMS Handleiding Zimplit is een CMS (content