Stap 1: Start uw eigen website Inleiding In dit eerste hoofdstuk gaat u beginnen met het maken van uw eigen website. De eerste en belangrijkste pagina van uw website is de homepage. Deze homepage moet er interessant uit zien. Dit is immers de eerste pagina die een bezoeker van uw website te zien krijgt. Als deze er boeiend uitziet gaat hij of zij waarschijnlijk daarna ook de rest van uw website bekijken. En dat is precies wat u wilt. Met webXpress kunt u zelf uw eigen website maken. De website toolkit is het hart van het webXpress programma. Hiermee geeft u uw eigen webpagina´s vorm. In dit boek wordt de website toolkit uitgebreid beschreven. Om u goed op weg te helpen wordt er ook extra toelichting gegeven op het kiezen van een domeinnaam, gebruik van stijlen, kleuren en lettertypes, het tekst schrijven en het bewerken van afbeeldingen. Wat gaat u doen In dit hoofdstuk gaat u de volgende activiteiten doen: - Een functioneel ontwerp maken - Uw website activeren en inloggen - Uw eigen stijl kiezen - Uw eigen kleuren kiezen - Uw lettertype kiezen - Een eerste tekst op de website plaatsen - Een afbeelding aan uw webpagina toevoegen - Uw logo bewerken - Uw disclaimer tekst instellen - Uw website off- en online zetten - Uitloggen Homepage: Een homepage is de eerste pagina van een website, een soort startpunt. Vanuit dit startpunt wordt de bezoeker via menu’s, knoppen of links naar andere pagina's van de website geleid. Website toolkit: De hulpmiddelen die beschikbaar zijn gesteld op de website van WebXpress om op een eenvoudige manier snel een doelmatige en interessante website te kunnen bouwen.
© 2Com2 internet & communicatie
17
Homepage
Website toolkit
maak je eigen website met webXpress
De website
Voordat we een website gaan maken is het goed om over de opzet na te denken. In deze webXpress voorbeeld website hebben we gekozen voor verschillende onderwerpen. Hierdoor krijgt u een goed overzicht van alle webXpress mogelijkheden. De website krijgt de volgende opzet en indeling: -
Home een pagina met last minute aanbiedingen
-
Uw reisburo een pagina waar het reisbureau nader wordt uitgelegd inclusief de medewerkers
-
Trips & Reizen waar de verschillende trips en reizen worden vermeld. Verschillende subpagina’s bevatten extra detail informatie met betrekking tot de verschillende trips en reizen.
-
Gastenboek om reacties te kunnen lezen
-
Contactpagina voor vermelding van de bedrijfsgegevens en een subpagina met contactformulier.
Vanzelfsprekend hoeft u de voorbeelden in deze cursus niet letterlijk te volgen. Als u wilt kunt u de onderwerpen natuurlijk naar eigen voorkeur invullen.
© 2Com2 internet & communicatie
18
maak je eigen website met webXpress
Functioneel ontwerp
Nadat we een globale planning gemaakt hebben is het ook goed om de structuur meer gedetailleerd in kaart te brengen en de opzet per pagina. De bovenste afbeelding op deze pagina geeft schematisch weer hoe alle webpagina’s met de homepage verbonden zijn. Het schema start met de pagina Home. Verder zijn er de volgende hoofdpagina’s (en hoofdmenu-items): Uw Reisburo, Trips & Reizen, Gastenboek en Contact. De pagina Trips & Reizen kent nog drie subpagina’s (en submenu-items): Nederland, Europa en wereldwijd. de pagina Contact kent nog1 subpagina (submenu): Formulier. In de illustraties rechts wordt per pagina kort beschreven wat de inhoud van deze pagina is. Wie zich helemaal goed voor wil bereiden kan zelfs een eenvoudige schets maken van de pagina hoe deze eruit komt te zien.
© 2Com2 internet & communicatie
19
maak je eigen website met webXpress
Aanmelden
Om uw webruimte te activeren en toegang te krijgen tot de webXpress software moet u zich eerst aanmelden. Dit gaat als volgt: Ga naar de WebXpress website: www.webXpress.nl Klik op _Aanmelden_ Als u in het bezit bent voor een aanmeldcode dan kunt deze aanmeldcode invullen vervolgens klikt u op _> Aanmelden_ Als u niet in het bezit bent van een aanmeldcode dan kunt u kiezen voor de optie _> Ik heb geen aanmeldcode_ Vul vervolgens de gevraagde gegevens in en klik op _Aanmelden_ Controleer de gegevens en klik vervolgens op _Akkoord_ U bent nu aangemeld. U heeft nu toegang tot uw eigen webruimte en de webXpress software. Als volgende stap moet u inloggen. Aanmelden: Hiermee kunt u webruimte en gebruikerstoegang voor uw eigen website activeren. © 2Com2 internet & communicatie
20
Aanmelden
maak je eigen website met webXpress
Inloggen
Als u zich zojuist heeft aangemeld dan komt u automatisch in het inlogscherm. Alle andere keren moet u naar de webXpress website gaan en op Inloggen klikken. Zo kunt u inloggen op uw website: Vul de naam van uw website in Vul uw wachtwoord in Klik op _Inloggen_
U bent nu ingelogd en u krijgt het menugedeelte van de webXpress websitemaker te zien. Let op: U moet uw eigen websitenaam en wachtwoord opgeven.
Inloggen: Met behulp van een inlognaam en een wachtwoord toegang verkrijgen tot een beveiligd gedeelte op het internet. Menu: Lijst met de verschillende te kiezen onderdelen.
© 2Com2 internet & communicatie
21
Inloggen
Menu
maak je eigen website met webXpress
Het webXpress menu
Nadat u bent ingelogd komt u in het hoofdscherm. Links ziet u het beheermenu. Dit bestaat uit de volgende hoofdonderdelen (donkergrijs): - “Uw stijl, kleuren en logo kiezen” - “Afbeeldingen, clips, en geluiden laden” - “Webpagina’s en menu beheren” - “Website instellingen aanpassen” - “Uw eigen gegevens wijzigen” Ieder hoofdonderdeel bestaat uit verschillende subonderdelen. Bijvoorbeeld het hoofdonderdeel “uw stijl, kleuren en logo kiezen” bestaat uit (lichtgrijs): - “Uw stijl kiezen” - “Uw stijlopties kiezen” - “Uw kleuren kiezen” - “Uw logo beheren” “Bekijk gemaakte website” Bijzondere menu onderdelen zijn: - “Hoe lijkt mijn site nu op het internet” “Uitloggen” Met “Hoe lijkt mijn site nu op internet” ziet u hoe bezoekers van uw website deze zien. Met “Uitloggen” verlaat u het programma.
© 2Com2 internet & communicatie
22
maak je eigen website met webXpress
Hoe lijkt mijn website nu
Voordat we verder gaan, is het misschien wel interessant om te kijken hoe de net gecreëerde website eruit ziet: Zo kunt u zien hoe uw website eruit ziet: Klik op: “Hoe lijkt mijn site nu op het internet” Er verschijnt nu een extra scherm waarin uw website wordt weergegeven. Dit scherm kunt u eventueel groter of kleiner maken. Dit groter of kleiner maken gaat als volgt: Zet de muis op de hoek rechtsonder Klik op de linker muistoets en houd deze toets ingedrukt Geef het scherm de gewenste grootte Laat daarna de muis toets los Sluit het schermpje na het kijken steeds weer af, dit doet u als volgt: Klik op de knop
(rechtsboven)
Belangrijk is dat dit scherm steeds weer wordt afgesloten. Daardoor bent u er zeker van dat u de laatste veranderingen aan uw website te zien krijgt.
© 2Com2 internet & communicatie
23
maak je eigen website met webXpress
De opbouw van een webpagina
Websites kunnen een verschillende opbouw hebben. Een veel voorkomende opbouw staat hierboven afgebeeld. Bovenaan de pagina staat de zogenaamde koptekst. Hierin staat de websitenaam en vaak een grafische afbeelding zoals een logo of sfeerplaatje. Links zit vaak het menu gedeelte. Hier vindt u de menu’s. Soms is er rechts een submenu systeem. Hier vindt u dan bijvoorbeeld “het laatste nieuws” of “aanbieding van de week”. In het midden vindt u de website-inhoud. Doordat deze in het midden staat valt deze het meest op. Onderaan vindt u het voettekst gedeelte. Hier vindt u bijvoorbeeld de contactgegevens een bezoekersteller. Probeer de inhoud van de websites zoveel mogelijk in het op het scherm zichtbare gedeelte houden. Het voordeel is dat bezoekers in één keer alle informatie goed kunnen overzien en niet hoeven scrollen. Scrollen: Dit is met de muis de inhoud van de pagina op en neer verplaatsen op het beeldscherm.
© 2Com2 internet & communicatie
24
Scrollen
maak je eigen website met webXpress
Gebruik van stijlen De keuze van de stijl is samen met de keuze van kleuren erg beeldbepalend. U kunt kiezen uit verschillende stijlrichtingen. Jong Deze stijl heeft een speelse vormgeving met links en rechts kleurenbalken. De kleuren hiervan zijn instelbaar. De logo-afbeelding met tekst loopt boven over de hele breedte van het scherm. Het menu is horizontaal boven de pagina. Het kiezen van een menu-item kan door erop te klikken. Na het kiezen worden de submenu verticaal getoond in de kleurenbalk links. Onder aan het scherm is ruimte voor een vaste tekst (disclaimer). Klassiek Deze klassieke stijl heeft een traditionele vormgeving met boven over de hele breedte het logo. Links is een balk voor het verticale menu. Het kiezen van een menu-item kan door erop te klikken. Na het kiezen worden de submenu-items getoond. Onder aan het scherm is ruimte voor een vaste tekst (disclaimer). Arty Deze stijl heeft een artistieke presentatie door middel van vakken. Deze is vooral goed bruikbaar in combinatie met korte bondige websitepagina’s. Het logo bevindt zich midden boven. Ieder vak is een hoofdmenuitem. De vakken worden versprongen van elkaar weergegeven. Aan ieder vak kan een eigen kleur worden toegekend. De menu-items worden verticaal in de vakken weergegeven zodat deze geselecteerd kunnen worden. Onder aan het scherm is ruimte voor een vaste tekst (disclaimer). Modern
Deze stijl geeft een moderne indeling waarbij het menu rechts van het scherm staat. Links boven is ruimte voor een logoafbeelding (of een korte tekst) en rechts over de verdere breedte kan de logotekst worden geplaatst. Het menu is verticaal geplaatst. Het kiezen van een menu-item kan door erop te klikken. Na het kiezen wordt het submenu getoond. Onder aan het scherm is ruimte voor een vaste tekst (disclaimer). Deze wordt in een eigen kleur getoond.
© 2Com2 internet & communicatie
25
maak je eigen website met webXpress
Zakelijk Deze stijl heeft een strakke vormgeving met een gekleurde horizontale balk tussen het logo en de webpagina. De disclaimertekst (voettekst) wordt ook weer door dezelfde horizontale kleurbalk gescheiden van de pagina. Het logo loopt boven over de hele breedte van het scherm. Het menu is horizontaal boven de pagina. Het kiezen van een menu-item kan door er op te klikken. Na het kiezen wordt het submenu links verticaal getoond. Onder aan het scherm is ruimte voor een vaste tekst (disclaimer). Nieuw Zakelijk Deze stijl is een variant op de stijl “Zakelijk”. Het grote verschil is dat deze stijl ingebouwde scrollbalken heeft die automatisch worden getoond als de pagina breder of hoger is dan de gereserveerde ruimte. Functioneel Deze stijl heeft een effectieve vormgeving met boven over de hele breedte ruimte voor het logo. Het menu wordt horizontaal weergegeven. Het kiezen van een menu-item kan door er op te klikken. Na het kiezen wordt het submenu, vlak onder het hoofdmenu, horizontaal weergegeven. Onder aan het scherm is ruimte voor een vaste tekst (disclaimer). De effectiviteit van deze stijl komt voort uit de brede pagina waarop veel tekst- of beeldinformatie geplaatst kan worden. Functioneel (schaalbaar) Deze stijl is een variant op de stijl “Functioneel”. Deze stijl past zich automatisch aan de breedte van de monitor waarop de website getoond wordt. Op een grote monitor is de website groter dan op een kleinere monitor. U moet hierbij wel rekening houden met het feit dat de website er op iedere computer anders uit kan zien.
© 2Com2 internet & communicatie
26
maak je eigen website met webXpress
Gebruik van lettertypes De keuze van het lettertype hangt sterk samen met de doelstelling van de website. Lettertypen bepalen voor een groot gedeelte de sfeer en de professionaliteit van een website. Kies dan ook van te voren welke lettertypen (fonts) u gaat gebruiken en kies ook de kleuren en groottes voor de bodytext, kopteksten en de subkopjes. Stel een lijstje op en wijk hier vervolgens niet meer vanaf! Voor een gewone website is Arial of Verdana een prima keuze. Voor een wat speelsere website is de Courier New prima te gebruiken. Als u toch een speciaal font wilt gebruiken kunt u dat bijvoorbeeld doen voor de kopteksten. Een goed gekozen en consequent doorgevoerd lettertype en dito stijl zullen zorgen voor een rustige en professionele uitstraling. Het maakt dat uw site goed te lezen is, overzichtelijk blijft en betrouwbaar aanvoelt. Maak daarom in de ontwerpfase al de keuze welke lettertypen u gaat gebruiken. Als later besluit toch een ander lettertype te gaan gebruiken, kan dat natuurlijk. Het mooie van de toolkit is dat u uw website zo vaak als u wilt aan kunt passen of kunt veranderen, net zo lang tot u helemaal tevreden bent. En als u geplaagd wordt door voortschrijdend inzicht dan neemt u gewoon de hele website op de schop. Na dit boek is zoiets voor u een peulenschil geworden! De reden dat u slechts uit een beperkt aantal lettertypes kunt kiezen komt door het feit dat het door u gekozen lettertype ook beschikbaar moet zijn op de computer van uw bezoeker. Als dat niet het geval is zal Windows zelf een lettertype kiezen. Met als gevolg dat de webpagina er anders uit komt te zien. U loopt hiermee risico dat dit afbreuk doet aan de presentatie van uw website.
© 2Com2 internet & communicatie
27
maak je eigen website met webXpress
Uw eigen stijl en lettertype kiezen
WebXpress heeft voor u verschillende stijlen voorbereid. Een stijl zorgt voor een consequente toepassing van de belangrijkste elementen van uw website. In de uitleg in dit boek gaan we uit van het lettertype Verdana en de stijl Klassiek. Klik op “Uw stijl kiezen” in het menu links Als u hier op geklikt heeft krijgt u een overzicht van verschillende stijlen. Klik op de knop _ _ achter “Gekozen stijl”. Wijzig de stijl “Jong” in “Klassiek” Klik op de knop _ _ achter “Gekozen lettertype”. Wijzig het lettertype “Arial” in “Verdana” Klik op de knop _Opslaan_ Klik op de knop _Volgende stap >>_
U kunt uw gekozen stijl wijzigen zonder dat de inhoud (tekst en afbeeldingen) verloren gaat.
© 2Com2 internet & communicatie
28
maak je eigen website met webXpress
Monitoren en resoluties U moet ook kiezen voor de breedte van uw website. Hierbij moet u rekening houden met het feit dat uw bezoekers verschillende monitoren gebruiken. Sommige bezoekers maken gebruik van een laptop met een klein scherm andere gebruikers maken gebruik van een desktop PC met een grote breedbeeld monitor. Als websitebouwer wilt u dat op al deze schermen uw website er goed uitziet. Over beeldschermbreedte en pixels De monitoren variëren in breedte. Bij de verkoop van een beeldscherm wordt de breedte uitgedrukt in inches (afgekort met “), bekende breedtes zijn 17”, 19”, 21” en 24. De breedte wordt diagonaal gemeten. De weergave wordt echter bepaald door het aantal beeldpunten ook wel pixels genoemd. Het aantal pixels dat een monitor kan weergeven wordt ook wel resolutie genoemd. Hoe meer pixels hoe hoger de resolutie. Voor een bepaalde beeldschermbreedte geldt vaak een maximum aantal pixels. De gebruiker kan hiervan echter afwijken door een instelling in Windows te wijzigen. Hierdoor wordt de inhoud groter, en dus leesbaarder, weergegeven Automatische schaalbaar Een eenvoudige oplossing voor dit probleem is om te kiezen voor een schaalbare stijl. Deze stijl is zo ingesteld dat deze zich automatisch aanpast aan de breedte van het beeldscherm van de bezoeker. Er is echter ook een sterk nadeel en dat is dat de inhoud van uw website zich mee aanpast, de website zal er op de verschillende monitoren verschillend uitzien en u heeft daarmee geen controle meer over de opmaak. Handmatig instelbaar Een goede oplossing is om de breedte handmatig in te stellen. De webXpress stijlen hebben en vooringestelde breedte, maar deze kunt u naar eigen smaak aanpassen. U moet nadenken voor welke schermbreedte/resolutie u uw website wilt ontwerpen. Het is aan te bevelen om met zoveel mogelijk gebruikers rekening te houden. U kunt kiezen voor een beeldvullende website, of een website met links en rechts nog ruimte voor een achtergrond. Kiest u voor een beeldvullende website houdt dan in de breedte rekening met het feit dat er rechts een scroll-balk wordt weergegeven wanneer uw webpagina langer is dan de hoogte van de monitor van uw bezoeker (let op: net als © 2Com2 internet & communicatie
29
maak je eigen website met webXpress
de breedte verschilt ook deze per bezoeker). En houdt u er in de hoogte rekening mee dat gebruikers verschillende webbrowsers en werkbalken ingesteld kunnen hebben. Breedte instelling van uw website In het onderstaande tabel vindt u een overzicht van de meest voorkomende resoluties (breedte x hoogte), een bijpassende monitorbreedte, en het percentage van de internetters die deze resolutie gebruiken (cijfers september 2009): Resolutie 800 x 600 1280 x 1024 1280 x 800 1440 x 900 1680 x 1050 Overige formaten
Beeldscherm 15” 19” 19” 21” 23”
Percentage 23,8 15,3 15,2 13,9 10,4 21,4 100,0%
Let op: Ontwerpt u een website die de volledige breedte van een 19” scherm benut en stelt u de breedte in op circa 1250 pixels dan krijgen 23,8% van de bezoekers een slecht leesbare website te zien! Breedte scroll-balk: Bij het instellen van de breedte van de website moet u rekening houden met een scroll-balk breedte van 20 pixels. Wilt u een website maken die de maximale breedte benut van een 15” scherm stel dan een maximum breedte in van 780 pixels (800 minus 20). Volledige breedte simuleren: Om de indruk te wekken dat uw website de volledige breedte van het beeldscherm benut kunt u de kleuren van de achtergrond gelijk aan de kleuren van de website instellen en de rand uitschakelen door de randdikte van de website in 0 wijzigen. Scroll-balk: Als de website breder of hoger is dan de resolutie van de monitor worden rechts en onder zogenaamde scroll-balken getoond waarmee u de weergave kunt aanpassen.
© 2Com2 internet & communicatie
30
Scroll-balk
maak je eigen website met webXpress
Uw stijlopties kiezen
Met betrekking tot de gekozen stijl kunt u zelf nog een aantal wijzigingen aanbrengen. De instellingen variëren per stijl. In het algemeen kunt u een website achtergrond instellen, de breedte van de website en de hoogte van het logo instellen. Hieronder krijgt u uitleg over het instellen van: Breedte, Hoogte en Randdikte. Klik op “Uw stijlopties kiezen” in het menu links Als u hier op geklikt heeft krijgt u een overzicht van in te stellen stijlopties. Voer bij “Breedte logo” de gewenste website breedte in Voor bij “hoogte logo” de gewenste ruimte voor het logo in Voer bij “Randdikte” de gewenste dikte van de website rand in Klik op de knop _Opslaan_ Klik op de knop _Volgende stap >>_ Aan het eind van dit hoofdstuk leggen we uit hoe u een achtergrondafbeelding aan uw website kunt toevoegen.
© 2Com2 internet & communicatie
31
maak je eigen website met webXpress
Gebruik van kleuren U gaat nu de websitekleuren bepalen. Bij het instellen van kleuren kunt u zelf de kleuren kiezen die u bruikbaar vindt. Vindt u het kiezen van kleuren moeilijk, dan kunt gebruik maken van de kleurenregenboog. De kleurenregenboog is een manier om een kleurenvolgorde aan te geven en kan u helpen bij het kiezen van kleuren. Kleuren die dicht bij elkaar liggen (bijvoorbeeld blauw en groen) laten uw website rustig overkomen. Tegenoverliggende kleuren (bijvoorbeeld blauw en oranje) vormen een kleurcontrast en laten de website er nogal bont uitzien. Kleur maakt emotie los en kan daardoor gevoelens als blij of boos, verrast of verveeld, ongemakkelijk of prettig veroorzaken. Dit principe kun u prima toepassen op websites door een kleurenschema te maken dat de gewenste emotie oproept. De eerste stap is om niet bij de kleur zelf te beginnen, maar bij de boodschap van de website. Wordt het een zakelijke presentatie of moet de website juist speels zijn? Op basis van de hoofdemotie kunt u met behulp van het kleurenoverzicht uw hoofdkleur vinden. Het schema helpt u een basiskleur te kiezen, ook als het niet uw persoonlijke eerste keuze zou zijn. Houd bij het gebruik van kleuren rekening met het verschil in warme en koele kleuren. De warme kleuren zijn de rode, bruine, gele en oranje tinten (herfstkleuren). De warme kleuren zijn opwindender en agressiever dan koude kleuren en kunt u daarom beter met mate toepassen. Koele kleuren zijn tinten gebaseerd op blauw, blauw-groen en paars. Omdat deze tinten meer rust uitstralen worden ze vaker toegepast dan de warme kleuren.
© 2Com2 internet & communicatie
32
maak je eigen website met webXpress
Oranje is communicatief en waarschuwend. Oranje is een warme kleur en is feestelijk, inspirerend, smakelijk, interessant en actief. Oranje teksten zijn echter minder goed leesbaar en teveel oranje kan nogal een belasting zijn voor de ogen. Rood is in veel culturen de kleur van het leven en daarom kunnen we rood associëren met dynamiek, vitaliteit en levendigheid. Rood is echter ook gebiedend (het rode stoplicht), alert en zichtbaar. Door die tegenstelling is rood een nerveuze, onrustige kleur, maar daarom niet minder nuttig. Geel is de kleur van de zon en woorden die daarom goed bij geel passen zijn helder en vrolijk, speels en nieuwsgierig, licht en opgewekt. Groen is overduidelijk de kleur van groei en natuur. Groen heeft geen haast, is uitgebalanceerd en veilig. Groen past bij ontspanning, vrije tijd en kalmte. Paars is een beetje een plechtige, melancholische kleur. Daarnaast wordt paars geassocieerd met luxe, intelligentie en magie. Paars kan ook ijdel zijn en artistiek. Paars is echter wel een koude kleur. Blauw is een veelgenoemde lievelingskleur en is net als rood een beetje tegenstrijdig. Blauw is beschermend en vreedzaam, maar ook koud, technisch, formeel en zakelijk. Blauw staat voor wijsheid, stabiliteit en hoop. Zwart is dan wel geen echte kleur, maar deze moet zeker serieus genomen worden. Zwart straalt autoriteit en macht uit en is tijdloos en stijlvol. Zwart kan echter ook overweldigend zijn en daarom zult u zwart met mate moeten toepassen. Wit is licht, puur en vooral lekker neutraal. Wit kan overal bij en kunt u erg goed gebruiken als achtergrond bij zaken die eruit moeten springen.
© 2Com2 internet & communicatie
33
maak je eigen website met webXpress
Kleurtinten kunt u maken door bij één van de kleuren uit de kleurenregenboog meer wit of zwart toe te voegen. De kleur wordt dan lichter of donkerder. In het voorbeeld hiernaast is er links boven zoveel wit toegevoegd dat de kleur wit is geworden. Rechtsonder is zoveel zwart toegevoegd dat de kleur helemaal zwart is. Tips voor het combineren van kleuren voor uw website: U kunt met twee of drie kleuren (of kleurtinten) die dicht bij elkaar liggen al een mooie levendige website maken. Wilt u een rustige site, gebruik dan minder verschillende kleuren, maar kleurtinten. Wil u uw site laten opvallen, gebruik dan meerdere kleuren die vooral tegenover elkaar liggen. Als achtergrondkleur voor de tekstpagina’s kunt u beter een lichte kleur zoals wit of lichtgeel nemen. Uw letters moeten dan wel zwart of donker gekleurd zijn. Een website bestaat uit verschillende onderdelen, zoals bijvoorbeeld: een achtergrond, teksten en een menu. Deze onderdelen kunt u allemaal verschillende kleuren geven. Bij een menutekst moet men vaak twee kleuren instellen, een kleur waarmee de menutekst normaal wordt weergegeven en een kleur waarmee de menutekst moet worden weergegeven wanneer dit menuonderdeel geselecteerd is.
© 2Com2 internet & communicatie
34
maak je eigen website met webXpress
Uw kleuren kiezen
In dit scherm krijgt u een overzicht van de websitekleuren en een voorbeeld van hoe uw website in de door u gekozen stijl en kleuren er uit zal zien. Iedere stijl heeft een eigen vooringesteld kleurenschema. Zo kunt u het kleurenschema aanpassen: Klik op “Wijzigen” achter de kleur die u wilt veranderen U krijgt nu de kleurselector te zien. Hierin kunt u de door u gewenste kleur kiezen Klik op de gewenste kleur om de kleur te selecteren Doe dit voor alle kleuren die u wilt veranderen Klik op de knop _Opslaan_ Klik op de knop _Volgende stap >>_ Kleurselector: In het vakje “Huidige kleur” krijgt u de oude gekozen websitekleur te zien. In het vakje “Preview” krijgt u de nieuwe, met de muis aangewezen, kleur te zien. In het kleurvlakje staat de kleurwaarde in zogenaamde “hexadecimale” notatie. Als dit kleurnummer bekend is, kunt u het ook in één keer intypen.
© 2Com2 internet & communicatie
35
maak je eigen website met webXpress
De Homepage
De Homepage is de belangrijkste pagina van uw website en tegelijkertijd van uw bedrijf. Hier krijgen bezoekers de eerste indruk van u, uw bedrijf en uw activiteiten. Bezoekers willen snel kunnen zien of uw website de informatie biedt die ze zoeken. Op de Homepage krijgen bezoekers een belangrijke eerste indruk. Behalve een duidelijke lay-out is het belangrijk dat de informatie kort en krachtig wordt aangeboden. Het is belangrijk dat u op uw homepage duidelijk verteld waarover de website gaat. De op deze pagina aangeboden informatie moet bezoekers uitnodigen om uw website uitgebreider te bekijken en door te klikken naar andere pagina’s waar vaak uitgebreidere informatie te vinden is. De Homepage is eigenlijk uw visitekaartje op het internet. Deze moet er goed verzorgd en overzichtelijk uitzien. Houd de teksten kort en krachtig, de details kunt u beter later uitleggen. U maakt het geheel extra aantrekkelijk door een foto toe te voegen.
© 2Com2 internet & communicatie
36
maak je eigen website met webXpress
Een goede homepage Via zoekmachines, links en/of advertenties komen bezoekers op homepage. Heel belangrijk is het dan om de bezoeker vast te houden en geïnteresseerd te krijgen zodat hij naar een vervolgpagina klikt of direct contact opneemt. Een homepage heeft de volgende belangrijke taken: Identiteit en boodschap van de website duidelijk te maken De homepage moet de bezoeker informeren wat het doel is van de website en moet aan de bezoeker duidelijk maken waarom het voor de bezoeker interessant is om deze website te bezoeken. Een overzicht geven van structuur en inhoud De homepage moet aan de bezoeker duidelijk maken welke informatie op de website te vinden is en moet aan de bezoeker duidelijk maken hoe deze informatie gevonden kan worden. Wees daarbij terughoudend in originaliteit. Juist door te doen wat een bezoeker verwacht maakt u het bezoek en de navigatie door uw website gemakkelijker. Bieden van prikkels Zoals op de voorpagina van een krant of magazine moet ook de homepage van een website “op de cover” de bezoeker prikkelen om verder te lezen ofwel door te klikken. Bijvoorbeeld door het promoten van de beste of meest bekeken informatie of het laatste nieuws. Actuele inhoud Een herhalingsbezoek is vaak belangrijk voor websites. Als bezoekers steeds terug komen is het mooi als ze nieuwe content tegenkomen en worden ze aangemoedigd om vaker langs te komen. Links naar veel gezochte informatie Bepaalde informatie op een website kan heel erg belangrijk zijn, bijvoorbeeld de link support op de website van een software leverancier. U geeft uw bezoekers een goede service door een link (of knop) naar de supportpagina op een duidelijk zichtbare plek te plaatsen. De big picture De informatie op de homepage moet niet te lang zijn, probeer te voorkomen dat uw bezoekers moeten scrollen. © 2Com2 internet & communicatie
37
maak je eigen website met webXpress
Mogelijk dat u lang niet het hele verhaal op de homepage kwijt kunt. Probeer uw bezoekers in ieder geval de hoofdlijnen aan te bieden. Maak keuzes in wat u op de homepage wil zeggen. Verplaats u in de bezoeker en vraag u af wat voor uw bezoeker belangrijk is om te lezen. Zorg dat uw hun interesse krijgt en dat ze bereid zijn om door te klikken. In vervolgpagina’s heeft u vervolgens wel de ruimte om uw boodschap helemaal duidelijk te maken. Wat u niet moet doen! Er zijn een aantal zaken die u beter niet kunt doen: Gebruik van (lange) flash intro’s, waarbij de gebruiker eerst de intro moet afwachten voordat hij de website kan bekijken Zoekplaatjes waarbij afbeeldingen of figuren menuitems vertegenwoordigen, wat pas duidelijk gemaakt wordt als de muis er overheen beweegt. Te veel of te weinig tekst waarbij de bezoeker veel moet scrollen of waarbij de bezoeker een korte tekst te zien krijgt als: “Gebruik het menu links of klik op contact”.
Op de volgende pagina wordt in meer detail een toelichting gegeven op het schrijven van teksten
© 2Com2 internet & communicatie
38
maak je eigen website met webXpress
Teksten schrijven voor het internet Niets is zo vluchtig als een bezoeker op een website. Vertrekken kost niet meer moeite dan slechts één muisklik. Website teksten moeten dus prikkelen, de aandacht vasthouden en sturen. De opbouw van de tekst is daarbij heel belangrijk. Een goed voorbeeld zijn teksten in magazines. Op de cover (homepage) wordt een artikel met een sterk aandachttrekkende tekst aangeprezen. Op de pagina zelf wordt de titel herhaald en start de tekst met een prikkelende inleiding, vaak in een iets groter lettertype. De bedoeling is om de aandacht van de lezer te vragen, verdere interesse op te wekken en te verleiden meer te gaan lezen. Vervolgens kan op dezelfde pagina of via subpagina’s het onderwerp verder uitgediept worden. Een aantal belangrijke aanwijzingen met betrekking tot het schrijven van goede webteksten zijn: Schrijf beknopt. Bezoekers van websites lezen niet maar scannen. Dat wil ze zeggen ze kijken vluchtig. Dat betekent dat voor het schrijven van webteksten het motto is: beknopt. Houdt de tekst zo kort mogelijk en beperk de tekst tot de kern. Geen lange bijzinnen. Deze worden toch niet gelezen en kosten alleen maar ruimte. Één onderwerp per alinea Omdat het lezen van een scherm moeilijker is dan van papier is de opmaak van de tekst erg belangrijk. Teksten moeten snel ter zake komen en het beste is om steeds één onderwerp per alinea te behandelen. Zet de kernzin vooraan en werk deze daarna verder uit. De bezoeker kan op deze wijze snel de alinea lezen. Tussenkopjes Net als in deze tekst kunnen tussenkopjes zeer effectief zien. De bezoeker krijgt zo snel overzicht en kan op eenvoudige wijze beslissen welke teksten hij of zij wil lezen. Belangrijk is dat deze kopjes dus duidelijk de inhoud omschrijven.
© 2Com2 internet & communicatie
39
maak je eigen website met webXpress
Gebruik opsommingen Een effectieve manier van beschrijven is het gebruik van opsommingen. Op deze wijze slat u als tekstschrijver twee vliegen in één klap, namelijk: kort en bonding en overzichtelijk. Een extra opmerking hierbij is om de opsomming te beperken tot maximaal 7 items. Meer dan 7 is voor de gemiddelde lezer niet te overzien. Schrijf prikkelend Om de lezer aan te spreken is een prikkelende tekst echt een aanrader. Verplaats je in de bezoeker en denk na wat voor hem of haar belangrijk is. Probeer hierop aan te sluiten en gebruik altijd direct en actieve werkwoorden. Een voorbeeld hiervan is: niet beschouwen maar zien. Nuttige tips bij het schrijven van webteksten: Bekijk uw website en teksten door de ogen van uw bezoeker. Het onderwerp van uw pagina moet direct zichtbaar zijn Probeer bij langere teksten “gelaagd” te schrijven: eerst de kern, dan de hoofdzaken en daarna pas de details. Beperk de inleiding tot 1 of 2 zinnen Behandel één onderwerp per pagina Schrap overbodige woorden en passages Maak tussenkopjes voor het makkelijk scannen van teksten Accentueer de belangrijke woorden en gebruik bullet-points Check of er voldoende tekstuele eye-catchers zijn. Check of de navigatiestructuur voor “verder lezen” helder is, en ook de navigatie terug. Check hoe onderscheidend uw teksten zijn ten opzichte van de concurrent. Zorg voor voldoende witregels, dat is prettig voor de ogen.
© 2Com2 internet & communicatie
40
maak je eigen website met webXpress
Een pagina selecteren om te bewerken
U heeft uw website vormgegeven, nu gaat u een eerste tekst op de homepage plaatsen. Het openen van de webpagina, in dit geval de homepage, gaat als volgt: Klik op “Webpagina’s maken” in het menu links Als u hierop geklikt hebt krijgt u een lijst met alle webpagina´s van uw website te zien. Nu is dat alleen nog “Home” Klik op “Wijzig>>” onder “Actie” op de regel “Home”
© 2Com2 internet & communicatie
41
maak je eigen website met webXpress
Tekst plaatsen op een pagina
U gaat nu een eerste tekst plaatsen.
Welkom op de website van reisburo Timboektoe
Eerste moet u de standaard tekst wissen: Wis de vooringevulde tekst “Plaats hier uw tekst” Plaats de cursor voor de “P” van “Plaats hier uw tekst” Druk op de _Delete_ knop op (op uw toetsenbord) totdat de tekst is gewist Nu kunt u uw eigen teksten toevoegen en bewerken Type uw tekst Klik op de knop _Opslaan_
Ons reisburo is bekend geworden door onze persoonlijke service. Of het nu een hotelletje in Nederland is, een stedentrip in Europa of een rondreis door Canada of Zuid Afrika, onze medewerkers vinden voor u de juiste reis. Wilt u een reis die niet standaard in de brochures staat, ook dat is geen probleem. Wij maken graag uw reis op maat.
Let op: U kunt niet zomaar teksten vanuit andere programma’s (zoals MS Word) knippen en plakken. Teksten kopiëren vanuit andere programma’s: Verder op in dit hoofdstuk vindt u uitleg hoe u teksten vanuit andere programma’s veilig kunt kopiëren.
© 2Com2 internet & communicatie
42
maak je eigen website met webXpress
Tekst lettertype wijzigen
Net als in Word kunt u het lettertype en de lettergrootte ook aanpassen. Als standaard lettertype staat Verdana ingesteld. Het advies is om het gebruik van lettertypes te beperken tot één lettertype. Als uitzondering gaan we verschillende lettertypes naast elkaar gebruiken. Het aanpassen van teksten gaat als volgt: Selecteer de hele tekst Klik op de knop _ _ achter “Grootte” Selecteer “2” Selecteer de eerste regel Klik op de knop _ _ achter “Lettertype” Selecteer “Arial” Selecteer opnieuw de eerste regel Klik op de knop _ _ achter “Grootte” Selecteer “3” Klik nu op de knop _Opslaan_ Let op: Regelmatig opslaan is belangrijk. Doet u dit niet dan kunnen onbedoeld uw inspanningen verloren gaan.
© 2Com2 internet & communicatie
43
maak je eigen website met webXpress
Teksten vormgeven
Net als in Word kunt u de teksten ook opmaken, dat wil zeggen accentueren, een kleur of een achtergrondkleur geven. Het opmaken van teksten gaat als volgt: Selecteer de eerste regel tekst en maak deze vet met de knop
(vet)
Selecteer eventueel de gewenste tekst en maak deze scheef met de knop
(cursief)
Selecteer eventueel de gewenste tekst en onderstreep deze met de knop
(onderstrepen)
Klik nu op de knop _Opslaan_ Het wijzigen van de tekstkleur of het aanbrengen van een tekstachtergrondkleur (markering) gaat als volgt: Selecteer nu de tweede regel tekst weer en geef deze een kleur met de knop
(tekst kleur)
Selecteer nu uw naam of de naam van uw website en geef deze een achtergrondkleur met de knop (tekst achtergrond kleur)
© 2Com2 internet & communicatie
44
maak je eigen website met webXpress
Teksten uitlijnen
Een extra mogelijkheid bij tekstopmaak is het uitlijnen van tekst. Het uitlijnen van teksten gaat als volgt: Selecteer één regel of de hele tekst en centreer deze met de knop
(centreren)
Selecteer één regel of de hele tekst en lijn deze rechts uit met de knop
(rechts uitlijnen)
Selecteer één regel of de hele tekst en lijn deze links uit met de knop
(links uitlijnen)
Eventueel kunt u met de knop (verdelen) de tekst over de breedte van de pagina laten verdelen Klik nu op de knop _Opslaan_
© 2Com2 internet & communicatie
45
maak je eigen website met webXpress
Teksten en alinea’s
Een alinea bestaat uit meerdere zinnen. Soms lopen deze zinnen door, andere keren moeten zinnen op de volgende regel beginnen. Als u een nieuwe alinea wilt starten wordt er automatisch door de editor een lege regel tussengevoegd. Het beginnen van een nieuwe alinea (met lege regel) gaat als volgt: Ga met de cursor aan het einde van de vorige alinea staan Klik op “Enter” De editor begint een nieuwe alinea Het beginnen van een nieuwe regel binnen de zelfde alinea (zonder lege regel) gaat als volgt: Ga met de cursor aan het einde van de vorige alinea staan Klik op “Enter” De editor begint een nieuwe alinea
Let op: Bent u klaaar met een alinea dan is het raadzaam om tussendoor ook op Opslaan te klikken. Zo kan uw werk niet verloren gaan.
© 2Com2 internet & communicatie
46
maak je eigen website met webXpress
Teksten kopiëren vanuit andere programma’s
Misschien heeft u al teksten voor uw website voorbereid of wilt u een artikel overnemen en op uw website plaatsen. Bij het knippen en plakken van teksten vanuit een andere applicatie zoals MS-Word of MS-Excel worden er vaak opmaak elementen mee gekopieerd die problemen kunnen veroorzaken bij weergave op een website. Wij adviseren om dit niet te doen! Indien u teksten in Word heeft uitgewerkt en deze werkwijze toch wilt gebruiken kunt u het beste als volgt doen: Selecteer de tekst (in bijvoorbeeld Word) Kopieer de tekst Plak de tekst in (het programma) Kladblok Selecteer de tekst in Kladblok Plak de tekst in de editor Opmerking: U hoeft de tekst in Kladblok niet eerst op te slaan. Tip: Wilt u meerdere teksten kopiëren dan laat u Kladblok gewoon open staan.
© 2Com2 internet & communicatie
47
maak je eigen website met webXpress
Afbeeldingen voor het internet Een vaak gebruikt gezegde luidt: “een afbeelding zegt meer dan 1.000 worden”. Alleen al om deze reden is het aan te bevelen om uw teksten aan te vullen met illustraties. Een tweede goede reden is dat gebruik van kleuren en afbeeldingen de website aantrekkelijker maken. Een eerste belangrijke opmerking over afbeeldingen is dat u ze niet te groot op uw website moet plaatsen. Moderne digitale camera’s maken foto’s die enkele MB’s groot zijn. Als u deze zondermeer op uw website plaatst dan duurt allereerst het uploaden erg lang, bent u snel door uw MB’s heen en duurt het vooral voor al uw website bezoekers langer voordat de complete pagina inclusief afbeeldingen getoond wordt. Verklein daarom met een speciaal programma de afbeelding tot een formaat waarin u deze afbeelding op de website wilt plaatsen. Lang niet alle bestandstypen zijn op internet bruikbaar. Beperk u daarom tot de meest gebruikte typen zoals: .JPG, .GIF of .PNG. Deze 3 formaten hebben ieder hun eigen toepassingen: JPG biedt miljoenen kleuren en is daarom zeer geschikt voor foto’s GIF biedt 256 kleuren waarvan 1 transparant kan zijn en is daarom zeer geschikt voor afbeeldingen en schema’s. PNG biedt 256 kleuren waarvan 1transparant kan zijn en is daarom zeer geschikt voor afbeeldingen en schema’s. Hoewel de afmetingen en resoluties van monitoren steeds verder toeneemt moet u uit gaan van de kleinste monitor weergave waarmee uw bezoeker uw website bekijkt. Bij het plaatsen van afbeeldingen op uw website is het aan te bevelen om kritisch naar de afbeelding te kijken en bijvoorkeur een uitsnede te maken die de kern of essentie weergeeft. Bij het uitsnijden kunt u eventueel ook het kader corrigeren waarbij het onderwerp niet in het midden maar op 1/3 of 2/3 staat (zowel horizontaal als vertikaal). Achter in deze map vindt u uitleg hoe u afbeeldingen kunt bewerken.
© 2Com2 internet & communicatie
48
maak je eigen website met webXpress
Een afbeelding aan uw pagina toevoegen
U kunt nu afbeeldingen aan uw website toevoegen. Dit gaat in drie stappen. 1. De afbeelding selecteren 2. De afbeelding op de webserver kopiëren, dit wordt ook wel uploaden of laden genoemd 3. De afbeelding op uw website zetten Webserver: Een webserver is een computer die websites beheert. Wanneer u een internetadres of URL typt in uw browser, zendt de browser een aanvraag naar de webserver, waar die website op staat. De server zendt de juiste informatie naar uw computer en via uw browser kunt u die vervolgens bekijken. Uploaden: Uploaden, of laden, is het versturen van een bestand naar een andere computer via internet. Dat kan ook een webserver zijn. Bij uploaden kopieert u een bestand van uw computer naar een andere. Downloaden is het omgekeerde. Bestand: Computerinformatie wordt opgeslagen in bestanden. Denk maar aan teksten, foto’s, geluiden en muziek.
© 2Com2 internet & communicatie
49
Webserver
Uploaden of laden
Bestand
maak je eigen website met webXpress
Een afbeelding selecteren
De eerste stap is een afbeelding uitzoeken. Zo selecteert u een afbeelding: Klik op “Afbeeldingen laden” in het menu links Klik op de knop _Bladeren_ bij “Kies afbeelding” U komt nu in het “Bestand kiezen” scherm Klik op “Deze computer” (in grijze menu links) Selecteer eventueel het gewenste opslag medium zoals harde schijf, CD-Rom of USB stick (bijvoorbeeld WebXpress CD-Rom) Open de gewenste map (bijvoorbeeld Afbeeldingen) Klik op _ _ achter “miniatuurweergaven”
en selecteer
Kies de gewenste afbeelding(bijvoorbeeld Foto_Rob) Klik op _Openen_ De naam van de gekozen afbeelding staat nu ingevuld. Niet alle typen afbeeldingsbestanden kunnen worden geladen. De volgende typen zijn toegestaan: JPG, GIF en PNG.
© 2Com2 internet & communicatie
50
maak je eigen website met webXpress
Een afbeelding laden
De tweede stap is de afbeelding sturen naar de webserver. Zo kunt u een afbeelding laden: Klik op de knop _Laden>>_ De afbeelding wordt nu naar de webserver op internet geladen. Bij kleine afbeeldingen gaat dit snel, bij grotere afbeeldingen moet men soms wat langer wachten Wacht tot de afbeelding aan het lijstje ”Uw afbeeldingen” is toegevoegd Zo kunt u de zojuist geladen afbeelding bekijken: Klik op de naam van het bestand en sluit het scherm na het kijken Afbeeldingen zijn er in soorten en maten. In het algemeen geldt dat hoe groter de afbeelding, hoe groter het bestand is, en des te langer het duurt voordat het plaatje op de computer kan worden weergegeven. Het is verstandig om grote afbeeldingen, bijvoorbeeld foto’s die met een digitale camera zijn gemaakt, eerst te verkleinen. U kunt afbeeldingen verkleinen met het programma IrfanView, zie Extra A.
© 2Com2 internet & communicatie
51
maak je eigen website met webXpress
Een afbeelding toevoegen
Als derde stap gaat u de afbeelding op uw webpagina zetten. Het plaatsen van de afbeelding op de webpagina gaat als volgt: Klik op “Webpagina’s maken” in het menu links Klik op “Wijzig” onder “Actie” op de regel “Home” U komt nu in het scherm waar u de pagina kunt bewerken Zet de cursor aan het eind van de tekst Type twee keer _Enter_ Klik op de knop galerij)
(Afbeelding invoegen uit
Klik op de gewenste afbeelding (bijvoorbeeld Foto_Rob) Klik op de knop _Opslaan_ Let op: Als u een afbeelding toevoegt die groter is dan de afmeting van de pagina dan worden de afmetingen automatisch aangepast zodat de afbeelding wel in z’n geheel kan worden weergegeven.
© 2Com2 internet & communicatie
52
maak je eigen website met webXpress
Een afbeelding uitlijnen
Als u wilt kunt u de afbeelding links, rechts of in het midden van de pagina uitlijnen. Bij links uitlijnen wordt de afbeelding tegen de linker kantlijn van de webpagina geplaatst, bij rechts uitlijnen tegen de rechter kantlijn en bij midden uitlijnen wordt de afbeelding op de webpagina gecentreerd. Zo kunt u de afbeelding links, rechts of in het midden uitlijnen: Klik op de afbeelding om deze te selecteren U ziet nu de omtrek van de afbeelding Klik op de knop uitlijnen
als u de foto in het midden wilt
Of klik op de knop uitlijnen
als u de foto rechts wilt
Of klik op de knop uitlijnen
als u de foto links wilt
Klik op de knop _Opslaan_
© 2Com2 internet & communicatie
53
maak je eigen website met webXpress
Een afbeelding in de tekst positioneren
Als u wilt kunt u de afbeelding ook in de tekst positioneren waarbij de tekst om de afbeelding heen geplaatst wordt. Zo kunt u de afbeelding bijvoorbeeld links in de tekst positioneren: Klik op de afbeelding om deze te selecteren U ziet nu de omtrek van de afbeelding Klik op de knop
(afbeelding bewerken)
Kies bij Alignment de gewenste instelling, bijvoorbeeld Left De afbeelding en tekst worden nu zeer dicht bij elkaar weergegeven, stel daarom een tussenruimte in: Stel bij Spacing Horizontal de gewenste instelling, ruimte in, bijvoorbeeld 8 Stel bij Spacing Vertical de gewenste instelling, ruimte in, bijvoorbeeld 4 Klik de knop _Ok_ Klik op de knop _Opslaan_ Let op: Hoewel er vele instelmogelijkheden genoemd worden zijn bij Alignment de instellingen Left en Right het best bruikbaar.
© 2Com2 internet & communicatie
54
maak je eigen website met webXpress
Een afbeelding op maat maken
Eventueel kunt u de afbeelding vergroten of verkleinen zodat deze beter op uw pagina past. Als u meerdere foto’s op uw website, of op één pagina, gebruikt dan wilt u misschien alle foto’s even groot maken. Met slepen is dat een lastig klusje. U kunt, als alternatief, de grootte van de afbeelding ook handmatig in stellen. Op deze wijze kunt u eenvoudig meerdere afbeeldingen dezelfde grootte geven. Dit gaat als volgt: Klik op de afbeelding U ziet nu de omtrek van de afbeelding Klik op de knop
(afbeelding bewerken)
Wijzig bij Afmetingen de Breedte in 150 (pixels) en Hoogte in 110 (pixels) Klik de knop _Ok_ Klik op _Opslaan _
© 2Com2 internet & communicatie
55
maak je eigen website met webXpress
Een afbeelding een mouseover tekst geven
U kunt de afbeeldingen een mouseover (muis-over) tekst mee geven, deze tekst wordt wanneer bezoekers van uw website met de muis over de afbeelding bewegen. Dit gaat als volgt: Klik op de afbeelding die u een naam wilt geven. Klik op de knop
(afbeelding bewerken)
Type bij “Alternatieve tekst” de naam of omschrijving die u de afbeelding wilt geven, bijvoorbeeld “uw reisleider Rob” Klik op de knop _Ok_ Klik op de knop _Opslaan_
Tip: Google leest de muis-over teksten ook en voegt deze toe aan de zoekindexen. Voer hier daarom nuttige teksten in. Zo kunt u Google helpen om beter de inhoud van uw website vast te stellen. Mouseover: Dit is een tekst die zichtbaar wordt wanneer de muis over een afbeelding wordt bewogen.
© 2Com2 internet & communicatie
56
Mouseover
maak je eigen website met webXpress
Afbeeldingen naast elkaar plaatsen
U kunt eenvoudig afbeeldingen naast elkaar plaatsen. Dit gaat als volgt: Ga met de cursor voorbij de afbeelding staan Klik op de knop galerij)
(Afbeelding invoegen uit
Klik op de gewenste afbeelding (bijvoorbeeld Foto_Mirjam) Klik op de knop _Opslaan_
© 2Com2 internet & communicatie
57
maak je eigen website met webXpress
Uw logo bewerken
Het logo bestaat soms uit twee gedeelten. Een logotekst en een logoafbeelding. U gaat zich nu vooral bezighouden met de logotekst. In de volgende stap leert u hoe u een afbeelding aan de logotekst kunt toevoegen. Zo kunt u uw logotekst bewerken: U ziet nu twee vakken. Het bovenste vak is voor de logotekst Type eventueel de gewenste logotekst Selecteer de logotekst Geef uw de gewenste grootte Geef uw logo de gewenste kleur met de knop (tekst kleur) een opvallende kleur Klik op de knop _Opslaan_ Klik op de knop _Bekijk uw gemaakte website >>_
© 2Com2 internet & communicatie
58
maak je eigen website met webXpress
Het logo verfraaien met een afbeelding
Uw logo bestaat op dit moment alleen nog maar uit een logotekst. U gaat hier nu een afbeelding aan toe voegen. In dit voorbeeld gaan we een neutrale afbeelding gebruiken. U kunt natuurlijk een eigen logo gebruiken of een andere afbeelding. Laad de afbeelding “Logo-afbeelding” Klik op “Uw logo plaatsen” in het menu links Ga naar het vak “Afbeelding (voor bovenin pagina):” Klik op de knop
(tabel toevoegen)
Voeg een tabel in van 1 rij en 3 kolommen (Rows = 1 en Cols = 3) Klik op de knop _Ok_ Ga met de cursor in het eerste (linker) vak staan Voeg de afbeelding “Logo_afbeelding” in Selecteer de afbeelding en centreer deze Herhaal dit voor de beide andere vakken Maak de tabellijnen onzichtbaar Klik op de knop _Opslaan_
© 2Com2 internet & communicatie
59
maak je eigen website met webXpress
Een logo achtergrond toevoegen
Uw logo bestaat op dit moment uit twee losse elementen als een logotekst en een logo-afbeelding. Websites gebruiken vaak een logo-afbeelding over de gehele breedte. In webXpress kan dat door het gebruik van een logo-achtergrond. Het toevoegen van een logo-achtergrond gaat als volgt: Laad de gewenste logo-achtergrondafbeelding Klik op “Uw logo plaatsen” in het menu links Klik op “kies” op de regel “Achtergrond plaatje logo” Kies de logo-achtergrond afbeelding Selecteer “Standaard (boven links)” bij “Achtergrond plaatje positie” (dit is de standaard instelling) Selecteer “Niet herhalen” bij “Achtergrond plaatje herhalen” Klik op de knop _Opslaan_
U kunt in een extern teken- en ontwerp programma zoals MS-Paint of Irfanview natuurlijk ook een complete logobalk ontwerpen. Het maken van een complete logobalk kost extra moeite en vaardigheid, maar u krijgt hierdoor een nog fraaier resultaat. U kunt deze logoachtergrondafbeelding in één keer plaatsen. De breedte en de hoogte van de logoafbeelding kunt u eenvoudig bepalen via de menu-optie “Uw stijlopties kiezen”. Hierover vindt u op de volgende pagina meer informatie.
U kunt het achtergrondafbeelding op verschillende manieren plaatsen. Als de afbeelding veel kleiner is dan de hoogte of de breedte van de beschikbare logoruimte dan kunt u het achtergrondafbeelding laten herhalen.
© 2Com2 internet & communicatie
60
maak je eigen website met webXpress
Achtergrond bij stijl kiezen
U kunt de stijl uitbreiden en voorzien van een achtergrond. Deze achtergrond wordt getoond in plaats van de achtergrondkleur. Het toevoegen van een achtergrond gaat als volgt: Laad de gewenste achtergrondafbeelding Klik op “Uw stijl kiezen” in het menu links Klik op “kies” op de regel “Gekozen afbeelding” Kies de achtergrondafbeelding Selecteer “Standaard (boven links)” bij “Achtergrond plaatje positie” (dit is de standaard instelling) Selecteer “Herhalen” bij “Gekozen herhaling” Klik op de knop _Opslaan_
Het gebruik van een achtergrond kan de presentatie van uw website verbeteren. Kies een rustige afbeelding. Of kies bewust voor een opvallende maar functionele afbeelding.
© 2Com2 internet & communicatie
61
maak je eigen website met webXpress
De disclaimer tekst instellen
Op websites kunt u regelmatig een disclaimer tegen komen. Hier krijgt u uitleg over hoe u deze tekst in WebXpress kunt instellen. Dit gaat als volgt: Klik op “Uw disclaimer tekst” in het menu links Pas de tekst in de editor naar eigen wensen aan Klip op de knop _Opslaan_
U kunt in de disclaimer ruimte uw contactgegevens plaatsen zodat bezoekers van uw website deze direct kunnen zien. Dit schept vaak vertrouwen. Disclaimer: Een disclaimer wordt op websites vaak gebruikt om uw rechten duidelijk te maken, bijvoorbeeld: “Niets van deze website mag worden overgenomen zonder toestemming van … etc. “, of om uw aansprakelijkheden in te perken, bijvoorbeeld: “Bij het maken van deze websites is de informatie nauwkeurig gecontroleerd. Mocht u desondanks … etc. “.
© 2Com2 internet & communicatie
62
Disclaimer
maak je eigen website met webXpress
Uw website off- en online zetten
Tijdens het bouwen van de website wilt u misschien wel voorkomen dat mensen uw website bezoeken en een website in aanbouw of in renovatie aantreffen. In deze situaties is het handig om uw website off-line te zetten. Zo kunt u uw website off-line zetten: Klik op “Algemene instellingen” in het menu links U krijgt een scherm te zien met diverse instellingen Klik op het rondje
“Nee” bij “Site online”
Type een tekst bij “Site off-line melding”, bijvoorbeeld: “Deze website is in verband met onderhoudswerkzaamheden tijdelijk off-line gezet.” Klik op de knop _Opslaan_ Uw website is nu niet meer op het internet te zien, maar nog wel voor uzelf via “Hoe lijkt mijn site nu op het internet”. Zo kunt u uw website weer online zetten: Klik op “Algemene instellingen” in het menu links Als u hier op geklikt hebt krijgt u een scherm met diverse instellingen Klik op het rondje
“Ja” bij “Site online”
Klik op de knop _Opslaan_ Uw website is nu weer te zien op het internet.
© 2Com2 internet & communicatie
63
maak je eigen website met webXpress
Uitloggen
Ter afsluiting van dit hoofdstuk gaat u uitloggen. Uitloggen is belangrijk omdat u dan netjes de verbinding met uw website afsluit. Let op: als u langer dan 30 minuten niet de knop _Opslaan_ hebt gebruikt zal het programma zelf uitloggen. Gaat u dan toch nog opslaan dan krijgt u een foutmelding en gaan uw wijzigingen verloren. Zo kunt u uitloggen: Klik op “Uitloggen” in het menu links Vervolgens komt het uitlogschermpje Klik op de knop _Uitloggen_
Nu bent u helemaal uitgelogd Let op: Als u niet uitlogt en iemand anders gebruikt na u deze computer, dan kan hij of zij uw website veranderen en zelfs helemaal ruïneren. Dat zou niet echt leuk zijn. Uitloggen: Hierbij sluit u uw beveiligd gedeelte op het internet.
© 2Com2 internet & communicatie
64
Uitloggen
maak je eigen website met webXpress
Uw website op het world wide web
U kunt nu met de webbrowser uw eigen gemaakte website op het World Wide Web opzoeken en bekijken. Heeft u nog geen eigen domeinnaam dan kunt u zo uw website bekijken: Start de internetbrowser Type als adres: www.uwwebsitenaam.webXpress.nl bij uwwebsitenaam vult u de naam van uw eigen website in (bijvoorbeeld: www.reisburotimboektoe.webXpress.nl) Heeft u al een eigen domeinnaam en is deze ook aan uw website gekoppeld dan kunt u als volgt uw website bekijken: Start de internetbrowser Type als adres: www.uwwebsitenaam.nl bij uwdomeinnaam vult u de naam van uw eigen website in (bijvoorbeeld: www.reisburotimboektoe.nl)l Nu bent u op uw eigen site!
© 2Com2 internet & communicatie
65
maak je eigen website met webXpress