wordpress-logo-stacked-rgb · 2021. 3. 4. · Probeer een aantal thema’s uit en maak een keuze...
25
Transcript of wordpress-logo-stacked-rgb · 2021. 3. 4. · Probeer een aantal thema’s uit en maak een keuze...
Marketing & Communicatie / CCC
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.
De inhoud van deze website telt 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
Marketing & Communicatie / CCC
3
Wordpress-account aanmaken
Opdracht 1
Maak een account aan in WordPress.com.
Ga naar www.wordpress.com Account Maak een account aan. Sluit de pagina vervolgens
JE KRIJGT EEN MAIL VAN WORDPRESS. BEVESTIG DIE. Je komt op de volgende pagina terecht:
Klik linksboven op MIJN SITE
Marketing & Communicatie / CCC
4
• Ga dan een site aanmaken, lichtrose knop
• Geef je domein een naam: mijn 1e website
• Dit is niet zo’n handige naam (dat zie je op het volgende scherm:)
Er staat een batterij cijfers in mijn naam voor de website, ik ga die dus veranderen zodat er geen cijfers meer in staan. Kies daarna voor gratis!!.
Je komt nu in de volgende pagina,
Marketing & Communicatie / CCC
5
Inloggen en beheren Het adres is bijvoorbeeld: https://mijn1ewebsitevanhan.wordpress.com/ Wil je inloggen als beheerder dan typ je het volgende Dus: https://wordpress.com/home/mijn1ewebsitevanhan.wordpress.com Je komt in het inlogvenster (zie afbeelding hierboven. Site bekijken - Dashboard Om te zien hoe je site er uitziet, klik je linksboven op sitetitel.
In het volgende scherm op site bekijken rechtsboven. Als je weer terug wilt naar het Dashboard klik je mijn site links in de hoek.
Marketing & Communicatie / CCC
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. Kies in het linkermenu: Thema’s.
- Kies in het rechter bovenmenu voor Gratis - Kies in de zoekbalk twenty
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 het door jou gekozen thema. Kies daarna voor: activeer dit design Het thema wordt geactiveerd. Dit kan even duren. Daarna voor site aanpassen. Je site verschijnt met het gekozen thema. 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.
Sluit dat venser met het kruisje linksboven als je tevreden bent met het gekozen
thema. Ik heb voor twenty thirteen gekozen. Daar ga ik verder mee in deze
reader.
Marketing & Communicatie / CCC
7
Pagina’s maken
Opdracht 3
Maak tien pagina’s voor je site. Afhankelijk waar je site voor is. Ik kies een restaurant.
Inhoud
1 Welkom 2 Over ons 3 Menu en prijzen 4 Voorgerechten 5 Hoofdgerechten 6 Desserts 7 Arrangementen 8 Alle you van eat 9 Besloten feest 10 Contact
Klik in het linkermenu op Pagina’s. Je ziet al een aantal pagina’s staan. Die heeft het thema dat je gekozen hebt voor je gemaakt Kies voor – Nieuwe pagina kies voor – use blank layout Geef de pagina een naam in titel toevoegen. 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 bewaar als Concept (Save Draft).
- Als dat doet kan je de pagina straks niet gebruiken in je menu (een van de volgende bladzijdes in deze reader)
Wil je de pagina opslaan en direct publiceren, klik dan op 2 maal op Publiceren(Publish). Wil je de pagina bekijken klik op Voorbeeld (Preview).
Ben je klaar met de pagina klik dan op het pijltje (<) linksboven.
Maak zo alle 10 pagina’s uit de lijst hierboven. Die pagina’s komen in willekeurige volgorde op je scherm. In stap 4 kun je ze in de goede volgorde plaatsen. Wil je een site maken over een eigen onderwerp (dat mag) kies dan voor pagina’s die er toe doen. Bv. Ik wil een website maken over een restaurant maak dan pagina’s zoals menu’s, reserveren, over ons ed. Kijk op internet voor inspiratie. Zoals je waarschijnlijk al gezien had heeft je thema al een paar pagina’s gemaakt voor je. Haal die weg
door op de 3 puntjes te klikken.
VUL DE PAGINA’S MET RELEVANTE TEKST. Dat hoeft niet meer te zijn dan een halve A4. Zoek inspiratie
op internet.
De bladzijdes die je gemaakt hebt zijn nog niet zichtbaar op je website. Dat gebeurd pas als je een
menu hebt genaakt en ze daar in gezet hebt (volgende stap)
Marketing & Communicatie / CCC
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 Customizer - Je komt op een andere bladzijde, kies daar voor menu’s
- - Kies voor primary menu
- Je ziet nu 3 keer ongeldig staan (dit zijn de pagina’s die je in de vorige stap verwijderd had. Als je
daar op klikt kan je ze verwijderen. Doe dat!
Marketing & Communicatie / CCC
9
- Klik nu op Items toevoegen. Je ziet nu alle pagina’s staan die je gemaakt hebt. Klik op elke pagina om die in het menu te zetten.
- VERGEET NIET OM JE MENU OP TE SLAAN ALS JE KLAAR BENT
-
Na het opslaan zie je links het veld MenuLocaties. Klik alle opties aan
Marketing & Communicatie / CCC
10
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.
Marketing & Communicatie / CCC
11
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.
Voorgerechten, hoofdgerechten en desserts zijn subpagina’s van Menu en prijzen. All you can eat en besloten feest zijn subpagina’s van Arrangementen. Projecten.
VERGEET NIET JE MENU OP TE SLAAN
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:
- Sluit de pagina’s door op het kruisje te klikken tot je weer bij je “beginpagina” bent -
- - - Klik op de pagina die je als homepagina wil instellen (3 puntjes) - Kies voor INSTELLEN ALS HOMEPAGINA
Marketing & Communicatie / CCC
12
Header of Koptekst maken en plaatsen
Opdracht 7
Ontwerp een header in Photoshop en plaats deze in je site.
Formaat Header Ieder thema heeft een eigen maat voor de header. Thema Twenty thirteen heeft het formaat: 1600 × 230 pixels, 72 pixels/inch, RGB. Thema K2-lite heeft het formaat: 780 × 200 pixels, 72 pixels/inch, RGB. Ga naar 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, - Aanpassen / Customize – Koptekst / Header – Nieuwe afbeelding toevoegen. Volg de stappen, ze wijzen zichzelf. Tenslotte weer Wijzigingen opslaan.
Marketing & Communicatie / CCC
13
Je site lanceren Zonder lanceren ziet niemand je site. Ga helemaal terug naar het begin
ZORG ERVOOR DAT DE BALK “EEN NAAM INVOEREN” LEEG IS!!!!
Anders krijg je nooit de gratis versie.
Kies voor de onderste optie:
Kies vervolgens voor: verdergaan met je gratis site
Marketing & Communicatie / CCC
14
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.
Marketing & Communicatie / CCC
15
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 Customize -siteidentiteit. - Kies onderin voor favicon. - Blader naar je zelfgemaakte Favicon. - Kies voor Bijsnijden. - Vergeet niet de wijzigingen op te slaan.
Marketing & Communicatie / CCC
16
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 het plusje linksboven - 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 een andere pagina.
MET HET PLUSJE OP EEN PAGINA KAN JE VANALLES OP EEN
PAGINA TOEVOEGEN (FOTO’S, GALERIJ ED)
Marketing & Communicatie / CCC
17
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 het plusje - Selecteer galerij - 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.
Kies het gewenste aantal Galerijkolommen, tussen 1 en 9.
Slideshow In plaats van een galerij kun je ook kiezen voor een slideshow. Maak een galerij. Klik dan links op type en kies diashow.
Pas de rechterkolom naar behoefte aan Plaats een galerij op een van he pagina’s en daarna een diashow op een andere pagina.
Marketing & Communicatie / CCC
18
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 Customizer en dan op de volgende pagina – Widget. Dan Secundaire widgetruimte.
- Maak een keuze uit de Widgets die je op je site wilt. Kies voor bv Mijlpaal. Zet daar de datum van inleveren in. Voor sommige Widgets zoals Facebook en Twitter moet je je accountgegevens invullen. Klik als je dit gedaan hebt op Ok.
Marketing & Communicatie / CCC
19
Hyperlinks plaatsen
Opdracht 13
Plaats de volgende links in je site: 1 Interne link; 2 Externe link; 3 Email 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 typ je de eerste letters van een pagina. Dan zie je alle pagina’s van je site.
- Selecteer de gewenste pagina. Kies niet voor Open Link in nieuw venster. Klik op het
“ENTER”knopje. Plaats interne links:
- Op de pagina Welkom bijvoorbeeld naar de pagina’s Desserts en Voorgerechten. 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 http://www.kw1c.nl op de pagina Over mij. 3 Email link
- Selecteer een emailadres waaraan je een link koppelt met het Koppelteken bovenaan het tekstvenster.
- In het menu wat nu opent typ je mailto: gevolgd door je emailadres. Bijvoorbeeld mailto:[email protected]. Gebruik geen spaties.
Plaats in ieder geval een email 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 een van je pagina’s.
Marketing & Communicatie / CCC
20
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.
- Open de juiste pagina bv Contact. - Klik op de plus en zoek naar kaart.
Kies voor kaart en het volgende verschijnt:
- Typ bij Marker toevoegen voor het adres van de school: Vlijmenseweg Den bosch - Klik rechts op Bijwerken of Update.
Plaats een ingesloten kaart van Google Maps op je Contactpagina
Marketing & Communicatie / CCC
21
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 het plusje en typ pdf. Klik op bestand. - Klik op Upload. - Browse op je computer naar het PDF-bestand dat je toe wilt voegen en klik op OK. Het PDF
bestand wordt toegevoegd. Plaats een PDF met je CV op de pagina Over mij.
Marketing & Communicatie / CCC
22
Contactformulier
Opdracht 17
Plaats een contactformulier op je site.
Belangrijke redenen om voor een formulier te kiezen zijn het verzamelen van data zoals email-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. - Klik op de Pus en kies voor formulier.
Je krijgt dan het volgende scherm:
Vul je mailadres in (school) en druk op formulier toevoegen. Vergeet niet op bijwerken te drukken. Ga
naar voorbeeldpagina en probeer het uit door je formulier in te vullen en te verzenden.
Marketing & Communicatie / CCC
23
Contactinformatie
Opdracht 17
Voeg contactinfo toe aan je site
Het is natuurlijk handig dat bezoekers van je site weten waar je bedrijf oid. Zit. Voeg daarom contact info toe. Deze info kun je ook koppelen aan Google Maps.
- Open de pagina contact - Klik op de plus en vul contactinfo in. Het volgende scherm verschijnt:
Vul alles in en koppel aan Google Maps.
Marketing & Communicatie / CCC
24
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.
Marketing & Communicatie / CCC
25
Beoordeling
Onderwerp Punten
Techniek
Responsive thema 10
10 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, email, afbeelding, widget)
20
Google maps 20
PDF invoegen 10
Reactiemogelijkheden uitzetten 10 220
Inhoud
Welkom 30
Over mij 30
Projecten algemeen 20
Projecten 1 40
Photoshop algemeen 20
Contact 20 160
Vormgeving Site
Header 40
Favicon 20
Achtergrond 40
Losse afbeeldingen 40
Galerij 40 200
Extra 100
680
Beoordeling: Aantal behaalde punten gedeeld door 68.
S U C C E S
