MAAK WEBSITES MET MAC
Sabine van Erp Alkmaar mei 2011 www.sabinevanerp.nl
1
1.
DE WERKOMGEVING VERKENNEN.............................................................4 1.1. iWeb starten..................................................................................................4 1.2. Kiezen voor een sjabloon..............................................................................5 1.3. Indeling van de werkomgeving .....................................................................6 2. BASISHANDELINGEN .....................................................................................7 2.1. Elementen verwijderen, schalen, verplaatsen of roteren ................................7 2.1.1. Verwijderen van een element .................................................................7 2.1.2. De grootte aanpassen (het schalen) van een element...............................8 2.1.3. Verplaatsen van een element ..................................................................8 2.1.4. Roteren van een element ........................................................................8 2.2. Elementen invoegen......................................................................................9 2.2.1. Tekstvak invoegen .................................................................................9 2.2.2. Afbeelding invoegen ..............................................................................9 2.2.3. Vorm invoegen ......................................................................................9 2.2.3.1. Vorm aanpassen ............................................................................10 2.3. Webpagina’s toevoegen ..............................................................................11 2.4. Webpagina’s verwijderen ...........................................................................11 3. SNEL VAN A NAAR Z....................................................................................11 3.1. Voorbereiding.............................................................................................11 3.1.1. De ontwerpfase ....................................................................................11 3.1.2. Verzamelen van teksten .......................................................................11 3.1.3. Verzamelen van fotomateriaal, afbeeldingen en eventueel logo’s .........12 3.2. Werken vanuit een sjabloon ........................................................................12 3.3. Namen aanpassen .......................................................................................13 3.4. Een fotoalbum maken op de webpagina ......................................................15 3.5. Hyperlinks maken naar andere websites......................................................17 3.6. Pagina’s ordenen ........................................................................................18 4. WERKEN MET TEKSTEN ..............................................................................18 4.1. Uitlijnen van tekst.......................................................................................19 4.2. Achtergrondvulling.....................................................................................19 4.3. De letter-, of regelafstand veranderen..........................................................20 4.4. Marges aanpassen .......................................................................................20 4.5. Opsommingtekens ......................................................................................20 4.6. Lettertypen .................................................................................................21 4.7. Het gebruik van tekst uit andere digitale bronnen........................................22 4.7.1. Tekst ontdoen van opmaakkenmerken..................................................22 4.8. Spellingscontrole ........................................................................................22 4.9. Speciale tekens invoegen in een tekst..........................................................23 5. WERKEN MET FOTO’S..................................................................................24 5.1. Foto’s tussen een tekst plaatsen...................................................................24 5.2. Een album maken .......................................................................................25 5.3. Wijzigen van een fotomasker......................................................................26 5.4. Een foto invoegen in een vorm....................................................................27 5.5. Een fotopagina maken ................................................................................27 5.6. Aanpassen van een foto ..............................................................................28 5.7. Aanpassen van een fotopagina of fotoalbum ...............................................28 5.7.1. Kolommen verminderen of vermeerderen ............................................29 5.7.2. Foto’s voorzien van een rand ...............................................................29 5.7.3. De kwaliteit van de foto’s binnen het album instellen...........................30 5.7.4. Instellingen maken voor een diavoorstelling.........................................30 5.7.5. Abonneren op uw foto’s.......................................................................31 2
6.
FOTO’S, VORMEN EN TEKSTVAKKEN AANPASSEN...............................31 6.1. Instellingen maken onder het infovenster Afbeelding..................................32 6.1.1. Vulling.................................................................................................32 6.1.2. Lijn......................................................................................................32 6.1.3. Schaduw ..............................................................................................33 6.1.4. Weerspiegeling ....................................................................................34 6.1.5. Ondoorzichtigheid ...............................................................................34 6.2. Instellingen maken onder het infovenster Formaat ......................................35 7. EEN NIEUWSBRIEF OF BLOG PLAATSEN OP UW SITE ...........................36 7.1. Werkwijze ..................................................................................................36 8. WIDGETS GEBRUIKEN .................................................................................39 8.1. MobileMe-galerie .......................................................................................39 8.2. YouTube.....................................................................................................39 8.3. Google Maps ..............................................................................................40 8.4. Google AdSense .........................................................................................41 8.5. iSight-foto ..................................................................................................41 8.6. iSight-film ..................................................................................................41 8.7. Aftellen ......................................................................................................42 8.8. RSS-Kanaal ................................................................................................42 8.8.1. Een RSS kanaal opzoeken....................................................................42 8.8.2. De URL invoeren in de RSS-kanaal widget..........................................43 8.9. HTML-fragmenten .....................................................................................43 8.10. Datum en tijd invoegen.............................................................................43 9. HYPERLINKS / KOPPELINGEN EN NAVIGATIE ........................................44 9.1. Koppelingen naar een andere webpagina binnen uw eigen website maken ..44 9.2. Koppelingen naar andere websites maken op uw webpagina.......................45 9.3. Een e-mail link maken op uw webpagina ....................................................46 9.4. Uw bezoekers kunnen een bestand downloaden .........................................47 9.5. De Navigatiebalk ........................................................................................48 9.5.1. Pagina’s verwijderen uit de navigatiebalk ............................................49 9.5.2. Pagina’s koppelen door middel van hyperlinks.....................................49 9.5.3. Zelf een navigatiebalk maken...............................................................50 10. ACHTERGRONDEN EN KLEUREN.............................................................50 10.1. Een webveilige kleur in de achtergrond.....................................................50 10.2. Een afbeelding in de achtergrond ..............................................................51 10.2.1. Achtergrond pagina............................................................................52 10.2.2. Achtergrond browser..........................................................................53 11. HET PUBLICEREN OF UPLOADEN VAN DE WEBSITE ...........................53 11.1. Welke mogelijkheden tot hosting zijn er?..................................................53 11.2. Publiceren met behulp van de FTP ondersteuning .....................................54 11.2.1. Bij mijn abonnement van de KPN (gratis) ..........................................54 11.2.2. Bij een aanbieder van gratis webruimte ..............................................56 11.2.3. Bij een eigen domein..........................................................................56 11.3. Elke aanpassing opnieuw publiceren.........................................................57 11.4. Veel voorkomende fouten bij het invullen van de FTP gegevens...............57 12. TIPS EN EIGENAARDIGHEDEN .................................................................57 12.1. Mijn website doet het niet goed op een ander computer! ...........................57 12.2. Sommige elementen werken niet wanneer ik de website heb gepubliceerd 58 12.3. Een Back-up maken van uw website .........................................................58 12.4. Wat is de Ftp server van mijn provider?....................................................58
3
EVEN VOORAF Welke computervaardigheden zijn gewenst? Basis tekstverwerking: zorgvuldig kunnen typen van tekst Tekst kunnen selecteren, knippen/kopiëren en plakken Het kunnen slepen van objecten (zoals foto’s) met de muis / het trackpad Foto’s kunnen overbrengen van uw fotocamera in iPhoto Minimale kennis van iPhoto (het ordenen van foto’s in een Album of Gebeurtenis) Wat hebt u nodig: Een Macbook of iMac met het programma iWeb 3.0.3. (onderdeel vanaf iLife 9) Een goedwerkende internetverbinding Webruimte om uw website te publiceren Gewenst: Foto’s in iPhoto die u gaat gebruiken in uw website Webruimte wat is dat? Met webruimte bedoel ik een plek op een internetcomputer (een server) waar uw website op ‘draait’ en waar bezoekers uw website kunnen bekijken. In hoofdstuk 11 leest u hier meer over.
1. DE WERKOMGEVING VERKENNEN 1.1. iWeb starten Ga naar de Finder en klik op Programma’s. Dubbelklik op het icoon van iWeb.
U krijgt het scherm te zien van Mobile Me waarin u een account kunt aanmaken of kunt inloggen op uw reeds bestaande account. Hebt u geen account klik dit scherm dan voorlopig even weg: Nee Bedankt
4
Wanneer u klikt op Afspelen, dan ziet u een Engelstalige instructiefilm die u een overzicht geeft van de mogelijkheden van iWeb.
1.2. Kiezen voor een sjabloon Nu verschijnt een venster waarin u moet kiezen voor een sjabloon (dit is een grafische vorm die voor herhaaldelijk gebruik is bedoeld). De makers van iWeb hebben een
5
reeks kant en klare vormgegeven webpagina’s voor u klaar liggen. Dat is lekker makkelijk: u gebruikt de basis en voegt uw eigen ingrediënten toe! In de linker kolom moet u een keuze maken voor de basisvormgeving. De plaatjes in de rechter kolom zijn de bijbehorende pagina’s waar u de website uit gaat opbouwen. In een later stadium kunt u trouwens altijd wisselen van stijl (bv. switchen van de stijl ‘Wit’ naar ‘Bladmotief’. In dit boek werken we met de stijl ‘Wit’. Standaard is de eerste pagina ‘Welkom’ geselecteerd. In principe maakt het niet uit welke pagina u het eerst gaat maken, de volgorde kunt u later altijd aanpassen. U kunt uw website zelfs beperken tot een enkele ‘Mijn albums’ pagina. Het is echter zowel voor de bezoekers van uw website, als voor uzelf logischer dat u begint met een ‘Welkom’ of een ‘Over mij’ pagina. Zie de voorbeeld pagina’s in de rechterkolom slechts als basis voor ons eigen ontwerp. We kunnen zo’n basispagina meerdere keren gaan gebruiken in onze website. De benamingen ‘Welkom’ of ‘Over mij’ gaan we dadelijk aanpassen aan onze eigen wensen. We laten de ‘Welkom’ geselecteerd en klikken op Kies. 1.3. Indeling van de werkomgeving In de linker kolom kunt u schakelen tussen de verschillende websites en de bijbehorende pagina’s. Nu is één website met één pagina zichtbaar. In de middelste kolom gaat u dadelijk uw pagina bewerken door inhoud (bv. foto’s) uit de rechter kolom toe te voegen. Op de onderste knoppenbalk ligt allerlei gereedschap klaar.
de navigatiekolom met naam van de website: Site, met daaronder de naam van de eerste webpagina: Welkom
De webpagina
Dit is de media browser. Al de media op uw Mac (audio, foto’s, en films) liggen klaar om gebruikt te worden in uw website.
De knoppenbalk met gereedschap om de website aan te passen
6
Soms is de media browser verborgen. U kunt deze weer zichtbaar maken door in de knoppenbalk op de pijltjes knop naast A letter te klikken.
Zichtbare basis elementen op de webpagina Wanneer we ons richten op de ‘Welkom’ webpagina dan kunnen we de volgende elementen onderscheiden: • Bovenaan de ‘hoofd’navigatie (Welkom) • Een horizontale lijn (voor de overzichtelijkheid) • De kop (Welkom op mijn site) • Een foto • Tekst waarin de maker vertelt waar de website over gaat Wat bedoelen ze met navigatie? In dit verband bedoelen we de route die de bezoeker van onze website kan volgen om de aangeboden informatie te vinden. De website bestaat tot nu toe slechts uit één pagina, nl ‘Welkom’. Dadelijk gaan we meerdere pagina’s toevoegen en we willen dat onze bezoekers deze pagina’s kunnen vinden. Wanneer we een tweede pagina (bv. ‘Over mij’) toevoegen aan de website, dan voegt iWeb als vanzelf een tweede knop toe aan de navigatie. Wanneer de bezoeker klikt op zo’n navigatie element, dan wordt de bijbehorende webpagina geladen. iWeb gebruikt de term navigatie ook voor de linkerkolom waarin de pagina’s staan: de navigatiekolom.
2. BASISHANDELINGEN Laten we eerst wat gaan stoeien met al die zichtbare elementen om de ‘feeling’ met de werkomgeving te krijgen. Oefen vooral met alle elementen van het sjabloon. Na afloop van de oefeningen kunnen we de pagina gewoon verwijderen. In het vorige hoofdstuk hebben we een ‘Welkom’ pagina geopend. Daar gaan we nader naar kijken. 2.1. Elementen verwijderen, schalen, verplaatsen of roteren Alle elementen van een sjabloon zijn slechts ‘placeholders’ (tijdelijke opvullingen) die we kunnen aanpassen. Waneer u klikt op zo’n element, dan ziet u er een rand omheen verschijnen met een aantal kleine vierkanten op de hoeken en midden op de horizontale en verticale as. Het element is geselecteerd en dus klaar om aangepast te worden, zoals:
2.1.1.
Verwijderen van een element
Is het element geselecteerd? Druk op de delete knop (sommige noemen het backspace). Wanneer u deze knop per ongeluk hebt ingedrukt, dan kunt u met de toetsencombinatie cmd-⌘ + Z uw laatste opdracht weer ongedaan maken. 7
2.1.2.
De grootte aanpassen (het schalen) van een element
Is het element geselecteerd? Op het navigatie element ná (dit heeft beperkingen) kunt u elk element in grootte aanpassen. Plaats de muiswijzer op een van de vierkantjes en pas de grootte aan door middel van slepen met de muis. De maten (b: 272 px h: 141 px) worden tijdens het slepen in px (pixels of beeldpunten) weergegeven in een wit kader. Wanneer u een foto element in grootte verandert, dan schaalt iWeb de foto vanzelf. De verhoudingen van de foto blijven bij de standaard instelling intact, zodat u nooit ‘uitgerekte’ foto’s te zien krijgt. Wanneer u tekst elementen schaalt, dan blijft de lettergrootte van de tekst ongewijzigd.
2.1.3.
Verplaatsen van een element
Plaats de muiswijzer in het midden van het element en versleep het met de muis. iWeb toont af en toe hulplijnen die u kunt gebruiken om elementen uit te lijnen. Laat de muis los wanneer het element op de juiste plaats staat. U kunt ook de pijltjes toetsen gebruiken om een element te verplaatsen. Met de toetsencombinatie shift + een pijltjes toets verplaatst u een element 10 punten per toetsaanslag.
2.1.4.
Roteren van een element
Is het element geselecteerd? Plaats de muiswijzer op één van de hoekpunten van het geselecteerde element, druk de cmd-⌘ toets in en houdt die ingedrukt. De muiswijzer verandert in een boogvorm met een pijl aan ieder uiteinde. U kunt het element nu ronddraaien. Laat de cmd-⌘ toets en de muis los wanneer u tevreden bent.
8
2.2.
2.2.1.
Elementen invoegen
Tekstvak invoegen
Klik op de Tekstvak knop die u op de knoppenbalk onderin het scherm vindt. er verschijnt een klein vierkant op de pagina met een knipperende cursor. U kunt gelijk beginnen met typen. Pas de grootte en positionering aan zoals hiervoor beschreven is.
2.2.2.
Afbeelding invoegen
Klik op de knop Foto’s in de media-browser. Uw fotocollectie uit iPhoto komt in beeld. Kies een foto en sleep deze met de muis op de pagina. Tijdens het slepen ziet u de foto als een soort schaduw aan de muiswijzer hangen. Pas de grootte en positionering aan zoals hiervoor beschreven is.
2.2.3.
Vorm invoegen
Klik op het menu Voeg in en kies daarna bij Vorm voor één van de aangeboden vormen óf klik op de knop Vorm in de knoppenbalk. De vorm verschijnt op uw pagina. Pas de grootte en positionering aan zoals hiervoor beschreven is.
9
2.2.3.1. • • • • •
Vorm aanpassen
Voeg de door u gewenste vorm in (1) Plaats de muiswijzer op de schuifknop onder de vorm (2) Sleep de schuifknop naar links of rechts om de vorm aan te passen (3) Plaats de muiswijzer op de blauwe markering (4) Sleep het blauw gemarkeerde punt naar buiten of naar binnen om de vorm verder aan te passen (5)
10
