Kompozer Webdesign

KompoZer Webdesign Basis

5-2-10 16:21

Hier vind je de cursus op het internet: www.acc.dds.nl/acconline/

Kompozer Webdesign www.acc.dds.nl/lesonline/kompozer/ Een bestaande website met kompozer www.acc.dds.nl/lesonline/kompozer/website/ Bestanden downloaden www.acc.dds.nl/lesonline/kompozer/bestanden/kompozer.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 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.

file:///Users/--/Desktop/Gallerys/kompozer/indexpdf.html

Pagina 1 van 14


5-2-10 16:21

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


5-2-10 16:21

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


5-2-10 16:21

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 www.acc.dds.nl/lesonline/kompozer/bestanden/kompozer.html 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, Email 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 file:///Users/--/Desktop/Gallerys/kompozer/indexpdf.html

Pagina 4 van 14


5-2-10 16:21

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



5-2-10 16:21

Pagina 6 van 14


5-2-10 16:21

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, email.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


5-2-10 16:21

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


5-2-10 16:21

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 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 - 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 file:///Users/--/Desktop/Gallerys/kompozer/indexpdf.html

Pagina 9 van 14


5-2-10 16:21

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 http://kompozer.net/

Download Kompozer. Kompozer kan je downloaden voor Windows, Mac en Linux. Je hoeft Kompozer niet te installeren. Volg deze handleiding.


Pagina 10 van 14


5-2-10 16:21

Download Kompozer

Open de Kompozer map


Pagina 11 van 14


5-2-10 16:21

Als je dit bestand ziet moet je het uitpakken door er 2x op te klikken

Wizard uitpakken - Klik op doorgaan


Pagina 12 van 14


5-2-10 16:21

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 file:///Users/--/Desktop/Gallerys/kompozer/indexpdf.html

Pagina 13 van 14


5-2-10 16:21

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 http://filezilla-project.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.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

Kompozer Webdesign

Recommend Documents