Vormgeving en techniek

Transcriptie

1

2 Site in Wordpress Maak een eigen site in WordPress.com. De site is bedoeld als portfolio. Op deze site presenteer je de kennis en vaardigheden die van belang zijn voor je toekomstige beroep. Kennis en vaardigheden die je nu hebt en gedurende het jaar zult uitbreiden en ontwikkelen. In tegenstelling tot eerdere projecten bij vormgeving telt de inhoud mee in de beoordeling. Inhoud, techniek en vormgeving zijn in dit project onlosmakelijk met elkaar verbonden. Vormgeving en techniek Elementen waarop beoordeeld wordt: 1. Account met juiste naam en titel 2. Nieuw Thema 3. Pagina s 4. Menu 5. Subpagina s 6. Vaste homepage 7. Header 8. Achtergrond 9. Favicon 10. Afbeelding 11. Fotogalerij 12. Widgets 13. Hyperlinks 14. Google maps 15. Invoegen van een PDF 16. Reacties uitzetten 17. Contactformulier 18. Inhoud 2

3 Wordpress-account aanmaken Opdracht 1 Maak een account aan in WordPress.com. Ga naar Account Maak een account aan. - Klik op Website aanmaken - Kies voor Onderwijs en organisaties - Kies voor Middelbaar onderwijs - Kies voor Een welkomstpagina voor mijn website 3

4 - Kies bij Kies een thema voor Tijdelijk overslaan - Kies bij Laten we een domein vinden voor de naam van je website. De voorkeur gaat uit naar je eigen naam. Is deze al bezet of heb je een goede reden een andere naam te kiezen, kies dan wel voor een serieus alternatief, gerelateerd aan de opleiding of het beroep. - Kies voor Gratis 4

5 Nadat je een account hebt aangemaakt en op Creëer Blog hebt geklikt, ontvang je een . Activeer nu je account. Inloggen en beheren Het adres is bijvoorbeeld: Wil je inloggen als beheerder dan plaats je achter dit adres: /wp-admin. Dus: Je komt in het inlogvenster. Site bekijken - Dashboard Om te zien hoe je site er uitziet, klik je linksboven op View site. Als je weer terug wilt naar het Dashboard klik je wp-admin links in de hoek. 5

6 Thema kiezen Opdracht 2 Probeer een aantal thema s uit en maak een keuze voor een thema. Een thema bepaalt de looks van je site. Bij WordPress kun gratis thema s vinden. Daarnaast zijn er ook bedrijven die betaalde thema s aanbieden. Maak een keuze welk thema voor jou passend is. Het thema moet Responsive zijn. Dit betekent dat het thema ook op een tablet en een smartphone goed te zien en te navigeren is. - Kies bij Weergave in het linkermenu: Thema s. - Typ in het zoekvenster Responsive - Kies in het rechter bovenmenu voor Gratis Bekijk verschillende thema s: Klik je op Voorbeeld. Sluit daarna het voorbeeld door het geopende venster te sluiten. Activeren Als je voor een thema kiest klik je op Activeren bij het door jou gekozen thema. Het thema wordt geactiveerd. Dit kan even duren. Bekijk het thema door weer te klikken op View site in de linker bovenhoek. Vind je het ontwerp toch tegenvallen, kun je op dezelfde wijze voor een ander thema kiezen. 6

7 Pagina s maken Opdracht 3 Maak tien pagina s voor je site. Inhoud 1 Welkom 2 Over mij 3 Projecten 4 Projecten 1 5 Projecten 2 6 Photoshop 7 Photoshop1 8 Photoshop2 9 Theorie 10 Contact Klik in het linkermenu op Pagina s Nieuwe pagina. Geef de pagina een naam. Pagina Bewerken Geef in het eerste veld de titel. In het grote vak kun je de inhoud typen. Om de pagina op te slaan zonder te publiceren, klik je op Opslaan als Concept (Save Draft). Wil je de pagina opslaan en direct publiceren, klik dan op Publiceren(Publish) of Bewerken (Edit). Wil je de pagina bekijken klik op Voorbeeld (Preview). 7

8 Menu aanmaken en pagina s toevoegen Opdracht 4 Maak een menu aan en plaats de pagina s in de juiste volgorde in het menu. Als je zelf geen menu hebt aangemaakt, plaatst Wordpress de pagina s in de volgorde waarin ze zijn gemaakt. Als je een andere volgorde wilt kan dat. Je maakt daarvoor zelf een menu aan. Menu aanmaken - Ga naar Weergave / Appearance Menu - Type een menunaam in bij Menunaam. De naam is aan de voorkant niet zichtbaar dus niet belangrijk. - Klik op Menu aanmaken. Na het opslaan zie je links het veld Locaties. Kies uit de uitklaplijst de naam en klik op Opslaan. Beneden aan de pagina zie je het venster Menu instellingen. Plaats een vinkje bij Automatisch nieuwe top-level pagina s toevoegen en bij Primaire navigatie. Pagina s in de juiste volgorde plaatsen. Met de cursor kun je de pagina s in het menu in de juiste volgorde slepen. Vergeet niet het menu daarna weer op te slaan. Als je de looks van je site toch niet zo leuk vindt en je kiest ervoor een ander thema te kiezen blijft de inhoud van je site behouden. Wat je meestal wel opnieuw moet instellen is het menu. Het menu is wel bewaard maar het vinkje bij primaire navigatie is verdwenen. Als je het opnieuw aanvinkt is je site weer intact. 8

9 Subpagina s maken Opdracht 5 Maak een uitklapmenu door een subpagina aan een pagina toe te voegen. Pagina plaatsen als subpagina in menu - Ga in het linkermenu naar Weergave Menu s - Schuif de pagina s die bedoeld zijn als Subpagina rechts onder de Pagina waar deze bij horen. - Kies voor Menu opslaan. Photoshop 1 en Photoshop 2 zijn subpagina s bij Photoshop. Projecten 1 en Projecten 2 zijn subpagina s bij Projecten. Startpagina met een vaste homepage instellen Opdracht 6 Stel de homepage in als startpagina van je site. Een standaard Wordpress-site opent met een bericht en niet met de homepage. Om dit te veranderen ga je volgt te werk: - Ga naar Instellingen (onderaan in het linkermenu). - Kies voor Lezen/Read - Vink aan Statische pagina - Blader bij startpagina naar de pagina Welkom - Klik onderaan de pagina op Instellingen bijwerken. 9

10 Header of Koptekst maken en plaatsen Opdracht 7 Ontwerp een header voor in Photoshop en plaats deze inje site. Formaat Header Ieder thema heeft een eigen maat voor de header. Thema Twenty Ten heeft het formaat: pixels, 72 pixels/inch, RGB. Thema K2-lite heeft het formaat: pixels, 72 pixels/inch, RGB. Ga naar Dashboard, Weergave/ Appearance, - Aanpassen / Customize Koptekst / Header. Kijk hoe groot de header voor jouw website moet worden. Schrijf hier het formaat:.. Ontwerp in Photoshop Neem het formaat als uitgangspunt van een header die je maakt in Photoshop. Dus: Bestand Nieuw Breedte: bijvoorbeeld 940 Hoogte: bijvoorbeeld 198 DPI: 72 pixels per inch. De header moet meer zijn dan een plaatje met een tekst. Maak gebruik van een eigen foto. Bewerk de foto in Photoshop met selecties, verloop, filters, etc. - Zorg ervoor dat de header past bij het gekozen thema. - Sla de header op als PSDbestand (om later nog wijzigingen te kunnen toepassen). - Sla de header op als JPGbestand (om te kunnen uploaden in Wordpress). Header in Wordpress Om zelf een header te plaatsen ga je naar Dashboard, Weergave/ Appearance, - Aanpassen / Customize Koptekst / Header Nieuwe afbeelding toevoegen. Tenslotte weer Wijzigingen opslaan. Klik op Publiceren 10

11 Achtergrond maken en plaatsen Opdracht 8 Geef de site een passende kleur of afbeelding als achtergrond. Achtergrondkleur Ga naar Dashboard, Weergave/ Appearance, - Aanpassen / Customize Achtergrond. Hier kun je een Kleur of een Afbeelding als Achtergrond plaatsen. Je kunt de code van de kleur intypen of een kleur kiezen. Achtergrondafbeelding in Photoshop Je kunt ook een Achtergrondafbeelding plaatsen. Deze maak / bewerk je eerst in Photoshop. Om een afbeelding volledig achter je site te plaatsen heeft deze wel een bepaalde grootte nodig. Deze is per thema anders. Start met een minimale breedte van 1800 pixels (72 dpi). Check het resultaat. De kans is groot dat je het formaat moet wijzigen, sla je bestand daarom op als PSDbestand en als JPGbestand. Achtergrondafbeelding in Wordpress Ga naar Dashboard, Weergave/ Appearance, - Aanpassen / Customize Achtergrond/Afbeelding uploaden. Blader naar de afbeelding (kies hier voor het JPGbestand) en kies voor Uploaden. Tenslotte kun je bij Weergave-instellingen bepalen: - Positie: Links, Gecentreerd of Rechts - Herhalen: Geen herhaling, Uittrekken, Horizontaal naast elkaar. - Sla de wijzigingen op. 11

12 Favicon maken en plaatsen Opdracht 9 Maak een favicon in Photoshop en plaats deze in je site. Een favicon is een klein icoontje dat je vooraan in de adresbalk van je browser ziet staan en ook vaak in je favorietenlijst en bladwijzers. Het is eigenlijk niets anders dan een mini-afbeelding die bij een website hoort. Het betekent dan ook dat je icoontje eenvoudig moet zijn: details gaan gauw verloren. Veel favicons gebruiken alleen een letter zoals Google. Favicon in Photoshop Maak in Photoshop een nieuw bestand (250 pixels bij 250 pixels 72 dpi). Maak een afbeelding als icoon voor je site. Kies voor een duidelijke grafische afbeelding, dit vergroot de herkenbaarheid. Sla de afbeelding op als JPG. Voorbeelden van Favicons: Favicon in Wordpress Ga naar Instellingen/Settings Algemeen/General. - Kies in de Rechter bovenhoek voor Blogfoto/Icoon invoegen. - Blader naar je zelfgemaakte Favicon. - Kies voor Bijsnijden. - Vergeet niet de wijzigingen op te slaan. 12

13 Afbeelding toevoegen Opdracht 10 Voeg een Afbeelding toe aan één van je pagina s. Ga als volgt te werk: - Kies voor een Nieuwe of bestaande Pagina. - Klik op Media toevoegen. - Bestanden uploaden. Bestanden selecteren. - Let op dat het bestand de juiste extensie heeft, PSD- niet, JPG wel. - Rechts zie je nu het bestand dat je hebt geüpload. Type bij Titel de naam ven de foto. Bij Uitlijning kun je de positie aangeven Bij Afmeting geef je grootte aan Bij Link naar kies je voor geen. - Klik tenslotte op In pagina invoegen Plaats in ieder geval enkele afbeeldingen op de pagina Welkom en de pagina Projecten 1. 13

14 Galerij toevoegen Opdracht 11 Voeg een Galerij toe aan één van je pagina s. Galerij toevoegen WordPress.com heeft een standaard Galerij-functie. Hiermee toon je één of meerdere afbeeldingen binnen een bericht of pagina. - Kies voor een Nieuwe of bestaande Pagina - Klik op Media toevoegen/add media.. - Selecteer een Afbeelding - Klik op In pagina invoegen - Klik nog een keer op Media Toevoegen/Add media. Rechts onder het woord Media toevoegen zie je nu Galerij aanmaken/create gallery. - In het midden staan alle bestanden die je hebt ingevoerd. Rechts staan de bijlagedetails. - Upload en / of selecteer minimaal 8 foto s. Vink de foto s aan door er op te klikken. - Klik nu rechtsonder op Een nieuwe galerij aanmaken. Rechts zie je Gallery-instellingen. Kies het gewenste aantal Galerijkolommen, tussen 1 en 9. Galerij bewerken Open de pagina waar de galerij in staat. Klik op de galerij. In de linkerbovenhoek zie je hetzelfde een potloodje met de tekst bewerken. Klik daarop om je Galerij te bewerken. Slideshow In plaats van een galerij kun je ook kiezen voor een slideshow. Maak een galerij. Klik dan rechts op type en kies Slideshow en vervolgens Galerij bijwerken. Plaats in eerste instantie een galerij op de pagina Photoshop1 en daarna per periode een galerij op de pagina Photoshop2. 14

15 Widget toevoegen of verwijderen Opdracht 12 Voeg minimaal 2 widgets toe aan je site. Widgets zijn extra applicaties op je site zoals bijvoorbeeld een Kalender of een Twitter-menuutje. - Ga in het linkermenu naar Weergave/Appearance Widget. - Maak een keuze uit de Widgets die je op je site wilt. - Sleep deze widgets in in het Widgetmenu rechts. De Secundaire Widgetruimte kun je alleen gebruiken als je site uit meer dan 2 kolommen bestaat. Wordpress heeft zelf al een aantal Widgets aan je site toegevoegd. Als je deze wilt verwijderen, sleep ze dan in het menu Gedeactiveerde Widgets. Voor sommige Widgets zoals Facebook en Twitter moet je je accountgegevens invullen. Klik als je dit gedaan hebt op Ok. 15

16 Hyperlinks plaatsen Opdracht 13 Plaats de volgende links in je site: 1 Interne link; 2 Externe link; 3 link; 4 Afbeeldingslink; 5 Widget link 1 Interne link Dit is een tekst die gekoppeld wordt naar een andere pagina in dezelfde site. - Selecteer een tekst waaraan je een link koppelt met het Koppelteken bovenaan het tekstvenster. - In het menu wat nu opent scroll je naar beneden. Hier zie je alle pagina s van je site. - Selecteer de gewenste pagina. Kies niet voor Open Link in nieuw venster. Plaats interne links: - Op de pagina Projecten naar de pagina s Projecten 1 en Projecten 2 - Op de pagina Photoshop naar de pagina s Photoshop 1 en Photoshop 2. 2 Externe link - Selecteer een tekst waaraan je een link koppelt met het Koppelteken bovenaan het tekstvenster. - In het menu wat nu opent typ (of kopieer en plak) je de volledige url van de site waar je naar toe wilt linken. Kies nu wel voor Open Link in nieuw venster. Het is namelijk belangrijk dat als je de site waarnaar je gelinkt hebt sluit, je weer terug bent in jouw site. Plaats in ieder geval een externe link naar op de pagina Over mij. 3 link - Selecteer een adres waaraan je een link koppelt met het Koppelteken bovenaan het tekstvenster. - In het menu wat nu opent typ je mailto: gevolgd door je adres. Bijvoorbeeld mailto:c.vanderkroef@kw1c.nl. Gebruik geen spaties. Plaats in ieder geval een link op je pagina Contact. 4 Afbeeldingslink Dit is een afbeelding die gekoppeld wordt naar een andere pagina in dezelfde site of een externe site. - Selecteer een afbeelding. - Koppel met het Koppelteken een interne pagina of externe site zoals hierboven beschreven. Plaats in ieder geval een afbeelding van het Photoshopicoontje naar de site van Adobe Photoshop op de pagina Photoshop. 5 Widget link Dit is een link in de Sidebar of Widgetruimte van je site - Kies in het linker menu van je Dashboard voor Links Nieuwe toevoegen. - Als je Links niet zichtbaar zijn moet je bij Widgets de applicatie Links aan je Primaire Widgetruimte toevoegen. Voeg minimaal 3 relevante links toe aan je sitebar. 16

17 Google Maps Opdracht 14 Plaats een ingesloten kaart van Google Maps in je site Met ingesloten of Embedded wordt bedoeld dat de kaart zich rechtstreeks in jouw site opent en dus niet in een ander venster op een andere site. - Ga naar Google Maps. - Typ het gewenste adres. - Klik Links-Boven op het Instellingenwieltje op Kaart delen of Insluiten. - Klik vervolgens op het tabblad Kaart insluiten - Kopieer de url - Ga naar Wordpress. - Open de juiste pagina. - Plak de url in deze pagina. Let op: Plak de url niet in het tabblad van de pagina dat je meestal ziet. Dat is de Wysiwyg (What you see is what you get)pagina. Deze keer klik je op he tabblad Tekst. Daar plak je de link. - Klik rechts op Bijwerken of Update. Plaats een ingesloten kaart van Google Maps op je Contactpagina 17

18 PDF invoegen Opdracht 15 Voeg een PDF toe aan je site Als je een worddocument wilt publiceren op je site moet je daarvan eerst een PDF maken. Dit kan eenvoudig in Word. Je kiest voor Bestand opslaan als PDF. PDF plaatsen in een pagina of post in Wordpress - Open de pagina waar je de pdf wilt plaatsen - Klik bovenin de pagina op Media-upload. - Klik op Select Files. - Browse op je computer naar het PDF-bestand dat je toe wilt voegen en klik op OK. Het PDF bestand wordt toegevoegd. - Klik op de Link in het bericht- of paginavenster. - Klik op het Link-icoon Kies voor Open in nieuw venster. Plaats een PDF met je CV op de pagina Over mij. Reacties uitzetten Opdracht 16 Verwijder de mogelijkheid om te reageren op je site. Wanneer je een blog schrijft is het meestal wenselijk dat mensen reageren op je berichten. Een bijkomend nadeel is dan wel dat je spam krijgt. We gaan daarom de reactiemogelijkheid uitzetten. - Ga naar Pagina s, alle pagina s en maak een keuze voor een pagina. - Je kunt dan kiezen uit Bewerken, Snel bewerken, Prullenbak, Bekijken. Kies Snel bewerken. Hier kun je het vinkje bij reacties toestaan uitzetten. Onderaan de pagina verdwijnt het vakje met de tekst Geef een reactie. Zet voor alle pagina s de reactiemogelijkheid uit. 18

19 Contactformulier Opdracht 17 Plaats een contactformulier op je site. Belangrijke redenen om voor een formulier te kiezen zijn het verzamelen van data zoals -adressen en websites en het structureren van vragen, opmerkingen en overige informatie. Maak een formulier. Verander de taal van Engels naar Nederlands of omgekeerd. Voeg minimaal 1 veld toe. Hoe ga je te werk: - Open de juiste pagina. - Kies voor Contactformulier toevoegen / Add Contact Form boven het Tekstvenster. - Klik op het minnetje naast een veld om dit veld te bewerken. - Kies voor Meer velden toevoegen / Add more fields - Kies voor Voeg dit formulier aan mijn bericht toe. Inhoud Opdracht 18 Plaats een volledige inhoud in je site. In onderstaande afbeelding (flowchart) staat schematisch de minimale inhoud van je site. Het spreekt voor zich dat spelling en grammatica correct moeten zijn. Houd er voortdurend rekening mee dat je de site maakt voor je toekomstige werkgever / stagebieder. Schrijf vanuit jezelf en niet omdat het moet. 19

20 20

21 Beoordeling Onderwerp Punten Techniek Responsive thema pagina s 10 Menu 10 4 Subpagina s 10 Vaste homepage 10 Header 10 Achtergrondkleur 10 Achtergrondafbeelding 20 Favicon 10 Losse afbeeldingen 20 Fotogalerij of slideshow 20 Widgets 20 Links (intern, extern, , afbeelding, widget) 20 Google maps 20 PDF invoegen 10 Reactiemogelijkheden uitzetten Inhoud Welkom 30 Over mij 30 Projecten algemeen 20 Projecten 1 40 Photoshop algemeen 20 Contact Vormgeving Site Header 40 Favicon 20 Achtergrond 40 Losse afbeeldingen 40 Galerij Extra Beoordeling: Aantal behaalde punten gedeeld door 68. S U C C E S 21