Inhoudsopgave HANDLEIDING WEBSITE X5

HANDLEIDING WEBSITE X5 Versie: 010v2 Dit is een korte handleiding die correspondeert met de demosite van Website X5 waarin de primaire onderwerpen hoe u met behulp van de toepassing Website X5 de door u gewenste website kunt bouwen wordt toegelicht. Deze handleiding bestaat uit de volgende hoofdstukken:

Inhoudsopgave 1. Installatie

3

2. Stap 1, het maken van een website in 5 stappen

3

2.1. Menu type

5

2.2. Sjabloon / Template

6

2.3. Test uw grafisch ontwerp

8

3. Stap 2

8

4. Stap 3

9

4.1. Invoeren van de content

10

4.2. Het invoeren van afbeeldingen

11

4.3. Tabellen

13

4.4. Flash animatie

15

4.5. Video, Audio en YouTube

15

4.6. Afbeeldingen browser

15

4.7. Diavoorstelling

16

4.8 e-mail formulier

17

4.9. Html code

18

4.10. Lijst van producten

18

5. Stap 4 omvat de geavanceerde instellingen

19

5.1. Hoofdmenu

20

5.2. Popup-menu

20

5.3. Stijl van het submenu

21

5.4. Tekststijl

21

5.5. Introductie pagina

22

5.6. Advertentiehoek

23

5.7. Blog of weblog

23

5.8. RSS Feed

25

5.9. Beschermde omgeving

26

5.10. Winkelwagen e-Commerce

28

Alle overeenkomsten worden uitgevoerd onder toepassing van onze algemene leverings- en betalingsvoorwaarden.

Referentie: 21 juni 2010

5.10.1. Verzending

30

5.10.2. Klantgegevens

31

5.10.3. Algemeen

32

5.10.4. Na het inrichten van het e-commerce traject

33

6. Exporteren van de website

38

6.1. FTP

39

6.2. Exporteer de website naar een map (directory) op uw disk

40

6.3. Verzamel de projectbestanden in één map

41

7. Bijzondere zaken

41

8. Tot Slot..!

41

8.1. Mailing

41

8.2. Veel succes

42

Blad -

2-


1. Installatie Gefeliciteerd met het aanschaffen van het CMS (Content Management Programma) Website X5. Om het programma Website X5 op uw computer of computer netwerk te kunnen installeren, heeft u een productcode nodig. Deze code verkrijgt u alleen wanneer de betaling aan de distributeur heeft plaats gevonden. De productcode wordt u per e-mailbericht toegezonden*. Gelijk met de productcode ontvangt u een inlog websitelink, waarvan u het programma kunt downloaden. Na het downloaden ontvangt u een gebruikerssleutel, die correspondeert met de computer (werkstation) waarop u het programma gaat gebruiken. Deze sleutel plakt u op de aangegeven plaats. Hierna kunt u het programma gaan gebruiken. *=Deze procedure geldt ook voor de templates die u bestelt. Zie het voorbeeldscherm

Voorbeeldscherm installatie

Let op! U kunt het programma downloaden in diverse talen, ook in het Nederlands. 2. Stap 1, het maken van een website in 5 stappen Met behulp van Website X5 maakt u in 5 stappen een website. De eerste stap is het vastleggen van de Algemene instellingen. Hier begint u met het invoeren van de naam van de website, de naam van de auteur en het internetadres, zoals de website op het internet bekend wordt. Dan geeft u de beschrijving van de website in, gevolgd door de kernwoorden die door de zoekmachines, zoals Google, Yahoo, etc. worden gebruikt. Vervolgens kiest u voor de taal en eventueel het icon.

Blad -

3-


Bij het tabblad geavanceerd geeft u aanvullende gegevens in, zoals de persoonlijke code om de website header aan te passen, de metatag code, code voor de website statistieken, het activeren van de Google-SiteMap en het activeren van de beveiligingscode voor het gebruiken van de rechtermuisknop.

Het basisscherm geeft de 5 stappen aan

Blad -

4-


Scherm Algemene instellingen tabblad Geavanceerd

2.1. Menu type De volgende stap is de keuze van het menu type; indeling horizontaal of verticaal. Hierbij moet u rekening houden met het aantal rubrieken van uw website. Bij een keuze van horizontaal is de beperking al snel 5 tot 6 rubrieken (hoofdstukken), terwijl deze bij een verticale indeling kan oplopen tot circa 20 stuks.

Schema menu type kiezen

Blad -

5-


Indien u het vinkveld “Toont de lagen van het menu onderaan in de webpagina” aanklikt, dan wordt het menu onderin van iedere pagina geprojecteerd. 2.2. Sjabloon / Template Dit betreft de grafische presentatie van de website. Over het algemeen bestelt iedere gebruiker een template reeks, die talrijke mogelijkheden biedt om uw website in te delen zoals u dat graag wenst. Daarnaast heeft u de mogelijkheid om zelf een template te maken of om een standaard template aan te passen.

Blad -

6-


Schermvoorbeeld van een sjabloon / template

U kunt, indien u gekozen heeft voor een standaard sjabloon, deze nog aanpassen met; tekst, afbeelding(en), flash animatie, zoekveld, etc. Dit is eveneens van toepassing voor de voet van het sjabloon.

Voorbeeldscherm wijzigen sjabloon kop Blad -

7-


2.3. Test uw grafisch ontwerp Indien u klaar bent met de werkzaamheden aan uw sjabloon kunt u kijken wat het resultaat is door op de testknop te drukken.

Voorbeeldscherm grafische presentatie

Hierna kunt u beginnen met stap twee. 3. Stap 2 In stap 2 gaan wij de map aanmaken waaruit de website straks gaat bestaan. Level en pagina’s. Iedere website heeft altijd minstens een basispagina, vaak Homepage genoemd. Vervolgens kan de indeling bestaan uit een menu (Level of Laag), genoemd met een aantal pagina’s.

Voorbeeldscherm map indeling Blad -

8-


Aan de linkerbovenkant ziet u hoe u pagina’s kunt bewerken. De belangrijkste zijn; het onzichtbaar maken, het beveiligen en het registreren van pagina eigenschapen. Bij het onzichtbaar maken worden de pagina’s aan het menu onttrokken. Bij het beveiligen gaat u er van uit, dat de gebruiker moet inloggen alvorens hij of zij deze pagina of pagina’s kan zien. En bij pagina eigenschappen geeft u extra kernwoorden en eventueel de update frequentie op. Kenmerken die o.a. belangrijk zijn voor de zoekmachines. Na deze stap kunt u de content invoeren. Dat is de derde stap.

gaan

4. Stap 3 In deze stap gaan wij de pagina’s vullen, of wel de inhoud vastleggen.

Blad -

9-


De soorten content kunnen bestaan uit: Tekst Afbeeldingen Tabellen Flash animaties Video en Audio Een foto presentatie Een diapresentatie Producten die in een e-commerce mogelijkheid worden aangeboden E-mail formulieren waarmee bezoekers bijv. hun vragen kenbaar kunnen maken. Eventueel kunt u direct html toepassingen toevoegen. 4.1. Invoeren van de content Op de eerste plaats kiest u voor het aantal kolommen. Standaard staat deze op twee ingesteld.

Voorbeeldscherm van het content werkblad

Blad -

10 -


Met Met Met Met

het het het het

eerste icoon kunt u het object met één kolom vergroten. tweede icoon kunt u het object met één rij vergroten. derde icoon kunt u het object met één kolom verkleinen. vierde icoon kunt u het object met één rij verkleinen.

Het invoeren van de content gaat als volgt; u klikt de soort aan, bijv. “tekst” en sleept deze naar het werkblad. Na met de linkermuisknop erop te hebben dubbelgeklikt, wordt de invoer vrij gegeven.

U kunt ook de content knippen en plakken. Kopiëren vanuit de tekstverwerker en plakken op de content pagina.

Schermvoorbeeld van enkele invoer functies bij tekst

4.2. Het invoeren van afbeeldingen Het invoeren van een afbeelding verloopt praktisch identiek als het invoeren van tekst.

Blad -

11 -


Aanvullend kunt u een afbeelding op talrijke manieren verder bewerken, uitsnijden, een masker toekennen en effecten- en filters toevoegen.

Blad -

12 -


4.3. Tabellen Tabellen worden hoofdzakelijk gebruikt indien u meerdere items exact recht onder elkaar wilt projecteren. U sleept het tabel icoon naar uw werkblad, waarna deze na de dubbelklik wordt geopend. U kunt rijen en cellen toevoegen en tabellen, bijvoorbeeld Excel tabellen, met plakken speciaal invoeren. Let op! Variabelen, bijvoorbeeld uit een Excel tabel, werken niet.

Blad -

13 -


Indien u op de testknop drukt, ziet u dat de tabel in het midden van de pagina wordt geprojecteerd. Dit heeft twee oorzaken, nl.: 1. U heeft maar één kolom gebruikt. 2. In de groepering (3e icoon van links) van de pagina is het vinkveld midden geactiveerd.

` Voorbeeldscherm groepering Blad -

14 -


4.4. Flash animatie Het invoeren van flash- en video animaties, maar ook audio bestanden, geschiedt op dezelfde manier.

Hierbij dient u voornamelijk aandacht te hebben voor de afmeting, indien u het op één scherm wilt projecteren is een afmeting van 600 x 480 pixels een veel voorkomende standaard. 4.5. Video, Audio en YouTube Bij het invoeren van Video, Audio en YouTube gebruikt u de informatie van het internet. Ook hierbij geldt uw aandacht voor de omvang. 4.6. Afbeeldingen browser Hier kunt u uw afbeeldingen toevoegen. U kunt afbeelding voor afbeelding invoeren, maar ook alle afbeeldingen in één keer invoeren. U kunt per afbeelding de beschrijving invoeren en vervolgens de instellingen en de miniatuurafbeelding vastleggen.

Blad -

15 -


Voorbeeldscherm afbeelding-browser

4.7. Diavoorstelling De diavoorstelling heeft veel overeenkomsten met de afbeeldingen browser, echter de voorstelling verloopt na het starten automatisch, dat betekent dat er aandacht besteed moet worden aan de overgangsnelheid. Dit kunt u instellen bij afbeeldingsopties. U kunt dit per dia instellen, maar dit ook allemaal tegelijk doen door alle dia’s te selecteren.

Voorbeeldscherm slideshow paginaovergang Blad -

16 -


4.8 e-mail formulier De communicatie met bezoekers van de website wordt steeds belangrijker. Bezoekers willen steeds meer een 1:1 contact, daardoor wordt het belangrijk om over goede communicatie formulieren te beschikken. De e-mail formulieren, die u met Website X5 kunt samenstellen, beperken zich niet alleen tot de naam en het e-mailadres. U kunt complete enquête formulieren maken. Alles begint met de veldinstellingen. Het volgende scherm geeft de mogelijke soorten velden weer.

Voorbeeldscherm veldinstellingen

Vervolgens kunt u op de formulieren indelen wat er moet gebeuren. Ook de reacties en de antwoordberichten kunt u definiëren.

Blad -

17 -


4.9. Html code Hier kunt u rechtstreeks html routines ingeven. Dit zullen wij hier niet verder toelichten. 4.10. Lijst van producten Het activeren voor het invoeren van een lijst van producten is alleen mogelijk nadat u de winkelwagen voor de e-commerce heeft geactiveerd. Dit vindt u terug bij geavanceerde instellingen.

Voorbeeldscherm lijst van producten

Bij de instellingen geeft u aan hoe de projectie moet plaatsvinden. Alleen tekst, afbeeldingen en tekst, tekst en afbeeldingen en alleen afbeeldingen.

Blad -

18 -


5. Stap 4 omvat de geavanceerde instellingen Bij de geavanceerde instellingen gaan wij de puntjes op de “i” zetten. In eerste instantie besteden wij aandacht aan de navigatie menu’s, vervolgens aan het letter type, de introductie pagina en de advertentiehoek, aansluitend aan de mogelijkheid van een weblog en de RSS Feed, aan de beschermde omgeving en tenslotte aan de winkelwagen.

Scherm geavanceerde instellingen

Blad -

19 -


5.1. Hoofdmenu Bij het hoofdmenu kunt u kiezen uit Algemeen, Tekst, Grafisch en 3D stijl. U kunt kiezen voor knoppen, zie het beeld van de 3D stijl. Bij de voorvertoning ziet u direct het resultaat op uw scherm.

Voorbeeldscherm maken van knoppen

Let op..! Bij de breedte van de knoppen moet u rekening houden met het sjabloon dat u heeft gekozen. Indien u de knop te breed maakt kan het gebeuren dat u de submenu’s niet meer kunt bereiken om dat deze in het informatieoppervlak valt. 5.2. Popup-menu Het maken van het popup-menu werkt identiek aan het hoofdmenu.

Voorbeeldscherm van het popup-menu

Blad -

20 -


5.3. Stijl van het submenu U kunt de grafische stijl van het submenu instellen en beoordelen of deze naar uw wens is.

Voorbeeldscherm van het submenu

5.4. Tekststijl Het instellen van de tekststijl heeft betrekking op; paginatitel, paginapad, standaard paginatekst en het footer-menu.

Blad -

21 -


Op het tweede tabblad kunt u de links instellen.

De beide tabbladen zullen wij na al het voorgaande niet nader toelichten. De schuifbalken staan standaard ingesteld, zoals gebruikelijk in Windows. 5.5. Introductie pagina De introductiepagina kan aantrekkelijk zijn wanneer u uw website ook voor buitenlanders wilt instellen. De introductiepagina kan er dan voor zorgen, dat de bezoeker alleen naar zijn taal pagina’s gaat.

Blad -

22 -


5.6. Advertentiehoek De advertentiehoek kan gebruikt worden om bezoekers te attenderen op belangrijke onderwerpen. Vaak worden deze gebruikt in e-commerce toepassingen. De advertentiehoek kunt u alleen op de homepagina of op alle pagina’s projecteren.

5.7. Blog of weblog Met een blog of weblog kunt u uw bezoeker betrekken bij onderwerpen die u publiceert. De bezoekers kunnen hier op reageren.

Het samenstellen van een weblog bestaat uit drie tabbladen, nl. Algemeen, Grafisch en Commentaren. Het tabblad Algemeen geeft het volgende beeld.

Blad -

23 -


Bij het tabblad geavanceerd kunt u gebruikers uitsluiten van commentaar. Op het Grafisch tabblad kunt u de vormgeving kiezen, alsmede uw weblog koppelen met andere sociale netwerken. Bij het tabblad Commentaren kunt u de instellingen voor commentaren instellen.

Blad -

24 -


5.8. RSS Feed RSS Feed biedt de mogelijkheid om het nieuws snel wereldkundig te maken. De geïnteresseerden dienen dan wel op hun eigen systeem het nieuwskanaal in te stellen.

De RSS Feed wordt gekoppeld aan de gelinkte pagina van de website waar de gedetailleerde informatie over het onderwerp staat.

Blad -

25 -


5.9. Beschermde omgeving Dit betekent dat u een beschermde webomgeving kunt creëren en de gebruikers moeten inloggen. Op de eerste plaats geeft u de naam van de omgeving in. Vervolgens de Gebruikersnaam en het wachtwoord. Ook kunt u een boodschap ingeven en tot slot kiest u de pagina waar de login plaatsvindt.

Voorbeeldscherm van een beschermde omgeving

Na het inloggen wordt de inlog pagina geprojecteerd. Dat is immers de pagina, die wij als registratiepagina hebben opgegeven. Let op! De beschermde omgeving wordt pas geprojecteerd nadat uw website on-line is.

Blad -

26 -


Voorbeeldscherm inloggen in een beschermde omgeving

Voorbeeldscherm na het inloggen

In dit voorbeeld ziet u een koppeling naar een handleiding. U kunt meerdere beschermde pagina omgevingen creëren. Altijd begint u met de omschrijving van de beschermde omgeving, gevolgd door de gebruikersnaam, het wachtwoord en de pagina waar de inlog gegevens moeten worden ingevoerd. Bij de websitemap (stap 2) geeft u bij de geselecteerde pagina het slot (beveiligde pagina) weer. Blad -

27 -


Voorbeeldscherm beveiligde pagina

5.10. Winkelwagen e-Commerce Indien u een e-commerce wilt activeren, geeft u als eerste de Productgegevens in, hierna kiest u het tabblad Verzending, gevolgd door het tabblad Klantgegevens en tot slot de Algemene gegevens. De eerste stap is het invoeren van het product.

Blad -

28 -


De tweede stap is het toekennen van de categorie (Artikelgroep) en het maken van de verbinding tussen de artikelen en de categorie.

Voorbeeldscherm Producten

NB; Producten kunt u ook importeren; hiervoor zijn vier velden beschikbaar; Naam / Code (Artikelnummer), Omschrijving, Afbeelding en Prijs.

Blad -

29 -


5.10.1. Verzending Op het tabblad verzending gaat u de verzend- en betalingsmogelijkheden vastleggen. Bij PayPal komt het nummer van uw zakelijke kredietkaart*. Als de betaling door de klant succesvol is afgesloten, wordt de klant naar een specifieke pagina gedirigeerd (Bevestiging URL). Indien de betaling niet correct heeft plaats gevonden, wordt de klant naar de specifieke URL pagina geleid.

*= Zorg ervoor dat uw PayPal-rekening geregistreerd is.

Blad -

30 -


Voorbeeldscherm met de melding naar de klant

Bij de betaling en verzendingskeuze kunt u tevens de tekst vastleggen, die per e-mail naar de klant wordt gestuurd. 5.10.2. Klantgegevens Op dit tabblad definiëren wij aan de rechterkant welke gegevens een klant ons moet toezenden. Ook informatie die de klant moet weten, zoals de algemene voorwaarden. Aan de linkerkant worden de gegevens van de ontvangen bestellingen verzameld. De gegevens worden in CSV (Comma Separate Values) -Komma gescheiden- bestanden vastgelegd.

Blad -

31 -


5.10.3. Algemeen Aan de algemene gegevens hebben wij weinig commentaar toe te voegen. Belangrijk is dat u de pagina om door te gaan met winkelen goed definieert. Niet naar de homepage, zoals u in het voorbeeld ziet.

Blad -

32 -


5.10.4. Na het inrichten van het e-commerce traject Na het inrichten van het e-commerce traject gaat u de e-commerce pagina opmaak uitvoeren, zoals is beschreven in hoofdstuk 4.10. Lijst van producten. Als een bezoeker een bestelling gaat plaatsen, ziet deze het volgende scherm:

Blad -

33 -


Voorbeeldscherm bestellen van producten

Nadat de gekochte artikelen in het winkelwagentje zijn geladen, kan hij of zij bij stap 2 voor de wijze van betaling en verzending kiezen.

Blad -

34 -


Voorbeeldscherm voor de keuze van verzending en betaling

Indien de keuze met de radio-button is geactiveerd, kan de bestelling worden vervolgd door op de knop “Volgende” te klikken. Op het scherm dat volgt, moeten de klantgegevens worden ingevoerd. De met een * gemerkte velden moeten verplicht worden ingevoerd.

Blad -

35 -


Voorbeeldscherm invoeren van de klantgegevens

Blad -

36 -


Voorbeeldscherm van de vierde stap van de bestelling

Blad -

37 -


Voorbeeldscherm van stap 5, de laatste stap

De klant ontvangt automatisch een e-mail bericht met de gegevens en het nummer van zijn bestelling. 6. Exporteren van de website Nu komt het belangrijkste onderwerp, namelijk uw website exporteren. Er zijn 3 mogelijkheden, nl. 1. Met behulp van FTP, 2. Exporteer de website naar een map (directory) op uw disk en 3. Verzamel de projectbestanden in één map. Zie het algemene scherm voor export.

Blad -

38 -


Algemeen scherm voor het exporteren van uw website

6.1. FTP FTP (File Transfer Protocol) is een protocol, dat uitwisseling van bestanden tussen computers vergemakkelijkt. Het standaardiseert een aantal handelingen, die tussen besturingssystemen vaak verschillen. Een FTP-client start een connectie met een FTP-server standaard via een verbinding met TCP-poort 21. Website X5 beschikt standaard over een FTP programma om de communicatie met uw hostingpartner te kunnen uitvoeren. Indien u kiest voor “Exporteer website naar internet” en drukt op de knop ziet u het volgende scherm.

Invoerscherm voor de verbindingsparameters met uw hostingpartner Blad -

39 -


Van uw hostingpartner heeft u het serveradres gekregen, meestal is dat het IP nummer. Ook de gebruikersnaam, wachtwoord, doelbestand en of u passieve FTP dient te gebruiken, worden u door de hostingpartner toegekend. Als u vervolgens op de knop start drukt, wordt met de export begonnen.

Voorbeeldscherm van de export

Indien u de website al eerder heeft geëxporteerd, kunt u de radiobutton “exporteer alleen de bestanden die gewijzigd zijn” aanklikken. Als u de RSS nieuws feature heeft geactiveerd en er nieuwe nieuwsfeiten zijn, kunt u de radiobutton alleen op deze pagina´s aanklikken. Zie hoofdstuk 5.8 RSS Feed. Opmerking: Soms is het beter om geen gebruik te maken van het standaard FTP programma, maar van een specifiek FTP programma, zoals: Smart FTP Cliënt of Leech FTP. Dit komt voor indien u specifieke bestanden wilt of moet opnemen om sturing te geven aan de uitvoering van uw website. Lees hoofdstuk 7 bijzondere zaken. 6.2. Exporteer de website naar een map (directory) op uw disk U kunt ook uw website exporteren naar uw harddisk om deze later op een CD / DVD te branden. U geef na het aanklikken van de radiobutton en de knop volgende het doelbestand op. Dat is de map waarnaar de export moet plaatsvinden.

Blad -

40 -


6.3. Verzamel de projectbestanden in één map De website wilt u naar een andere computer overbrengen om mogelijk daarop verder aan uw website te gaan werken. Er zijn drie mogelijkheden nl: 1. Er vindt geen optimalisatie van de afbeeldingen plaats. Dit is de beste oplossing indien uw website nog niet gereed is. 2. Er vindt een beperkte optimalisatie plaats. 3. Er vindt een volledige optimalisatie plaats, dit verlaagt de resolutie van afbeeldingen en past de filters en de effecten toe.

Keuze scherm voor het exporteren

7. Bijzondere zaken Er zijn talrijke onderwerpen, die het gebruik van uw website kunnen verbeteren. Enkele voorbeelden zijn: 1. Met een .htaccess bestand kunt u allerlei dingen bereiken, zoals: het maken van foutpagina's voor de site, een directory afsluiten, IP-adressen blokkeren en nog veel meer. Voor Website X5 gebruikers kan dit betrekking hebben op specifieke karakters, zoals valuta tekens. 2. Html buttons voor verwijzingen, die niet standaard in de menu’s kunnen worden geactiveerd. 8. Tot Slot..! 8.1. Mailing Steeds meer bedrijven willen hun activiteiten bij een groter publiek onder de aandacht brengen. Mail-activiteiten worden daarbij steeds belangrijker. Wij kunnen u met een mailing programma van dienst zijn. De mail-activiteiten kunnen het beste met uw webactiviteiten worden geïntegreerd. Een van de uitgangspunten hierbij is dat er ook rekening wordt gehouden met de wetgeving op het gebied van e-mailcommunicatie.

Blad -

41 -


8.2. Veel succes Wij spreken de wens uit, dat wij u met deze handleiding op weg kunnen helpen om met Website X5 aan de slag te gaan. Wij hebben getracht deze handleiding zorgvuldig samen te stellen. Het kan evenwel gebeuren, dat u tegen zaken aanloopt waar u geen oplossing voor heeft. Graag vernemen wij dan uw commentaar, op- en aanmerkingen. Het beste kunt u uw commentaar geven op onze blog.

Blad -

42 -

Inhoudsopgave HANDLEIDING WEBSITE X5

Recommend Documents