Digitale vormgeving Wordpress deel 1

Transcriptie

1 Digitale vormgeving Wordpress deel 1

2 2 Inhoud Site in WordPress... 3 Maak een eigen site in WordPress.com Wordpressaccount aanmaken... 4 Opdracht Thema kiezen... 6 Opdracht Pagina s maken... 7 Opdracht Header of Koptekst maken en plaatsen... 8 Opdracht Opdracht Achtergrond maken en plaatsen... 9 Opdracht Menu aanmaken en pagina s toevoegen...10 Opdracht Subpagina s maken...11 Opdracht Startpagina met een vaste homepage instellen...11 Opdracht Favicon maken en plaatsen...12 Opdracht Afbeelding en Fotogalerij toevoegen...13 Opdracht Beoordeling...15

3 Site in WordPress 3 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: - Account met juiste naam en titel - Nieuw Thema - Pagina s - Eigen Header - Eigen Achtergrond - Menu - Subpagina (minimaal 1) - Vaste homepage - Favicon - Fotogalerij en losse afbeeldingen Inhoud Onderdelen die in deze site zeker aan bod moeten komen : - Voorstellen aan toekomstige stagebieder/werkgever: Wie ben je; Wat doe je; Wat zijn je interesses en ambities. Uiteraard toegespitst op je toekomstige beroep en niet privé. - CV - Projecten: Korte omschrijving projecten; (behaalde) Leerdoelen; Bevindingen/Conclusies; Producten; Foto s/afbeeldingen - Photoshop: Producten; Omschrijving van producten; Geleerde vaardigheden/technieken. Naast de reader kun je gebruiken maken van websites voor WordPress op internet:

4 4 Wordpressaccount aanmaken Opdracht 1 Maak een account aan in WordPress.com. Ga naar Account Maak een account aan. Vul in: adres. Gebruikersnaam: je gebruikersnaam mag minimaal vier karakters hebben en mag alleen bestaan uit kleine letters en cijfers. Wachtwoord: hiervoor mag je hoofdletters, kleine letters, cijfers en symbolen gebruiken. Blog Adres: kies een adres voor je blog (WordPress controleert het adres). Uit privacy-oogpunt kun je kiezen voor een naam die niet gerelateerd is aan je eigen naam. Gratis Blog, in de tweede rij alleen het vinkje bij Gratis Blog. Klik daarna op Creëer Blog. 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 uit dit voorbeeld is nu: Wil je inloggen als beheerder dan plaats je achter dit adres: /wp-admin Dus: komt in het volgende inlogvenster:

5 Site bekijken - Dashboard Om te zien hoe je site er uitziet, klik je in de bovenbalk op de naam van je site. Als je weer terug wilt naar het Dashboard klik je weer op de naam van je site links in de hoek, onder deze naam verschijnt het woord Dashboard en klik op het woord Dashboard. 5 Het Dashboard bestaat uit drie onderdelen: 1 Dashboard algemeen. 2 Menu-items die met het plaatsen van content op de website te maken hebben. 3 Menu-items die met de werking en het uiterlijk van de website te maken hebben

6 6 Thema kiezen Opdracht 2 Probeer een aantal thema s uit en maak een keuze voor een thema. Bij WordPress kun je meer dan 1200 gratis thema s vinden. Daarnaast zijn er ook bedrijven die betaalde thema s aanbieden. Maak een keuze welk thema voor jou passend is. Kies bij Weergave in het linkermenu: Thema s. Je kunt bladeren in thema s: Willekurig, A-Z, populair, Newest, Premium, Vrienden van WP.com. Je kunt ook gericht zoeken via Functie filters op Kleur, Kolommen, Breedte en Eigenschappen. 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 de naam van je site in de linker bovenhoek. Vind je het ontwerp toch tegenvallen, kun je op dezelfde wijze voor een ander thema kiezen.

7 7 Pagina s maken Opdracht 3 Maak vijf pagina s voor je site. Inhoud 1 Welkom of Home Welkom aan de bezoeker van je site. Beschrijving van wat hij / zij op de site kan vinden. 2 CV (Curriculum Vitae) of About Me Voorstellen aan toekomstige stagebieder/werkgever: Wie ben je; Wat doe je; Wat zijn je interesses en ambities. Uiteraard toegespitst op je toekomstige beroep en niet privé. 3 Projecten Projecten: Korte omschrijving projecten; (behaalde) Leerdoelen; Bevindingen/Conclusies; 4 Photoshop Producten gemaakt bij Digitale Vormgeving. Afbeeldingen en Omschrijving van de producten. Beschrijving van de geleerde vaardigheden/technieken. 5 Contact Plaats hier in ieder geval je naam en een -adres. 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). Pagina- attributen instellen Hoofd: hier geef je aan of een pagina een hoofd- of sub-pagina is. Template: is afhankelijk van het gekozen thema. Volgorde: Via deze optie kun je de volgorde van de pagina s aangeven in de navigatiebalk of bij de subpagina s onder elkaar. Publiceer de pagina s.

8 Header of Koptekst maken en plaatsen 8 Opdracht 4 Ontwerp een header voor je website in Photoshop. 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, Header en 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. - In de header verwerk je je naam en een passende achtergrond. - De header moet meer zijn dan een plaatje met een tekst. - Gebruik een eigen foto of een foto zonder copyright. - 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). Opdracht 5 Plaats de header die je hebt gemaakt in de WordPress-site. Uploaden Om zelf een header te plaatsen ga je naar Weergave (Appearance). Kies voor het menu-item Header. Nadat het bestand is geüpload zie je het bovenin bij Voorbeeld staan. Bij Headertekst haal je eventueel het vinkje weg. Tenslotte weer Wijzigingen opslaan.

9 9 Achtergrond maken en plaatsen Opdracht 6 Geef de site een passende kleur of afbeelding voor de achtergrond. Achtergrondkleur Ga naar Dashboard, Weergave, 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 Weergave - Achtergrond - Afbeelding uploaden - Bladeren naar de afbeelding (kies hier voor het JPGbestand) - Uploaden - Tenslotte kun je bij Weergave-instellingen bepalen: o Positie: Links, Gecentreerd of Rechts o Herhalen: Geen herhaling, Uittrekken, Horizontaal naast elkaar - Wijzigingen opslaan.

10 10 Menu aanmaken en pagina s toevoegen Opdracht 7 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 aan het menu toevoegen - Ga naar Weergave en kies Menu s. - Vink voor de nieuwe pagina s aan in het venster Pagina s. - Klik op de knop Aan menu toevoegen (Add to Menu). - Tenslotte sla alles op met de knop Menu opslaan.

11 11 Subpagina s maken Opdracht 8 Maak een uitklapmenu door een subpagina aan een pagina toe te voegen. Maak subpagina s per periode voor zowel Projecten als voor Digitale Vormgeving. Nieuwe pagina Ga naar Alle pagina s Klik op Nieuwe Pagina. Type de naam van de subpagina. Pagina plaatsen in menu - Ga in het linkermenu naar Weergave Menu s - Vink bij Pagina s (links) de nieuwe pagina s aan. - Kies voor Aan menu toevoegen. Rechts van de pagina s zie je nu alle pagina s staan. - Schuif de pagina die bedoeld is als Subpagina rechts onder de Pagina waar deze bij hoort. - Kies voor Menu opslaan. Startpagina met een vaste homepage instellen Opdracht 9 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 nu naar Instellingen (onderaan in het linkermenu). - Kies voor Lezen/Read - Vink aan Statische pagina - Blader bij startpagina naar home - Klik onderaan de pagina op Instellingen bijwerken.

12 12 Favicon maken en plaatsen Opdracht 10 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 - Algemeen. - Kies in de Rechter bovenhoek voor Blogfoto/Icoon invoegen. - Blader naar je zelfgemaakte Favicon. - Kies voor Bijsnijden. - Vergeet niet de wijzigingen op te slaan

13 13 Afbeelding en Fotogalerij toevoegen Opdracht 11 Voeg een Afbeelding en een Galerij toe aan één van je pagina s. Afbeelding toevoegen 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, PSDniet, 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 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. - Selecteer een Afbeelding. - Klik op In pagina invoegen - Klik nog een keer op Media Toevoegen. Rechts onder het woord Media toevoegen zie je nu Galerij aanmaken. - In het midden staan alle bestanden die je hebt ingevoerd.

14 14 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 Klik op gallery link. In de linkerbovenhoek zie je hetzelfde teken met de tekst Galerij bewerken. Klik daarop en je je Galerij 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.

15 15 Beoordeling Je WordPress-site wordt beoordeeld op de volgende onderdelen: Techniek Alle onderdelen zoals hierboven genoemd, moeten in je WordPress-site zijn verwerkt (per gemist onderdeel twee punten in mindering) (10 punten). Inhoud De inhoud van je WordPress-site moet duidelijk, overzichtelijk en zonder spelfouten zijn gemaakt. De website moet een duidelijke inhoud hebben die op de pagina s tot uiting komt. (per gemist onderdeel twee punten in mindering) (10 punten). Vormgeving De vormgeving van thema, header, achtergrond, favicon/blogicoon, kleur en tekst moet passen bij de site. De site moet overzichtelijk en passend zijn en een eenheid in stijl hebben (10 punten). (per gemist onderdeel twee punten in mindering) (10 punten). Onderwerp Techniek Thema Pagina s Header Achtergrond Menu Subpagina s Statische homepage Favicon Losse afbeeldingen Fotogalerij of slideshow Inhoud Home About Projecten Photoshop Contact Vormgeving Site Header Favicon Achtergrond Thema Pagina s Subpagina Contactpagina Losse afbeeldingen Galerij Extra Welkom op en inhoud van site Voorstellen aan toekomstige stagebieder/werkgever Korte omschrijving per project Korte omschrijving inhoud van de galerij Zelf ontworpen Zelf ontworpen / Duidelijk Passend Thema met header Minimaal vier In Menu verplaatst Laatste knop in de navigatiebalk Passend Minimaal 8 foto s Kolom, Titel Afvinken