Studio Visual Steps
Een website omzetten van WEB! Pro naar Web Easy
Aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy
Een website omzetten van WEB! Pro naar Web Easy
2
Een website omzetten van WEB! Pro naar Web Easy Een aantal jaren was het Visual Steps-boek Websites maken met WEB! Pro hét handboek voor het eenvoudig maken van websites met het programma WEB! Pro. Helaas wordt WEB! Pro al enige tijd niet meer ondersteund door de softwareproducent. Sinds de laatste update van Java, de programmeertaal waarmee WEB! Pro werkt, functioneert het programma niet meer. Voor mensen die een website hebben gemaakt met WEB! Pro en deze willen gebruiken en aanpassen in Web Easy is dit PDF-bestand gemaakt. Omdat het niet mogelijk is bestanden gemaakt met WEB! Pro direct te gebruiken in Web Easy, moet u uw bestaande website stap voor stap opnieuw opzetten in Web Easy. U leest in dit PDF-bestand hoe u dit het snelste en gemakkelijkste doet aan de hand van uw bestaande website. Als u uw website met een ander programma dan WEB! Pro heeft gemaakt, kunt u dit PDF-bestand ook gebruiken om een website op te bouwen en aan te passen in Web Easy. Een voordeel van het omzetten van een website naar Web Easy is dat u uw website voortaan kunt bijhouden in een programma dat up-to-date wordt gehouden. U kunt het omzetten ook meteen gebruiken om uw website eventueel opnieuw op te maken. Bijvoorbeeld door teksten en afbeeldingen aan te passen, andere kleuren te gebruiken of een andere indeling van de website te maken.
Let op! Niet alle onderdelen van uw oude website zijn exact over te zetten naar een website in Web Easy. Soms moet u van een alternatief gebruikmaken.
Let op! In dit PDF-bestand wordt ervan uitgegaan dat u beschikt over basiskennis computervaardigheden. Indien u niet weet hoe u een handeling uitvoert, kunt u het boek Websites bouwen met Web Easy als naslagwerk gebruiken.
Inhoudsopgave 1. Uw website inventariseren....................................................................................... 3 2. Uw website omzetten ............................................................................................ 21
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
1. Uw website inventariseren Voordat u uw website om gaat zetten in Web Easy is het verstandig eerst te inventariseren wat er allemaal moet gebeuren en wat u daarvoor nodig heeft. Zo is het verstandig vast te stellen uit welke pagina’s de website bestaat, wat de grootte van de website is en welke teksten en afbeeldingen er nodig zijn. Door dit van te voren goed op een rijtje te zetten, spaart u werk uit bij omzetten van de website. Voordat u de inventarisatie maakt, is het handig om eerst de huidige website af te drukken. Dan kunt u op papier en per pagina aantekeningen maken. U drukt als volgt een website af: Open uw website in uw internetbrowser Maak het venster van de internetbrowser schermvullend Zet uw printer aan U ziet uw website in het venster:
Druk op Klik op Klik op
U ziet het venster Afdrukken: Klik bij op de gewenste printer Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
3
Een website omzetten van WEB! Pro naar Web Easy
De webpagina zal nu worden afgedrukt. Open de volgende pagina van de website Druk de pagina af Herhaal dit voor alle webpagina's
Hieronder ziet u de punten waar u op moet letten bij de inventarisatie:
Uit welke pagina’s bestaat de website? Zet de namen van de webpagina’s onder elkaar op papier. Vergeet niet ook de pagina’s te vermelden die niet direct vanuit het menu te bereiken zijn, maar alleen vanaf een bepaalde pagina. Zoals een formulier dat alleen vanaf de contactpagina kan worden geopend. Zet ook bij de pagina’s of ze in het menu vermeld staan of alleen op een bepaalde pagina: Voorbeeld Home
Menu
Mijn hobby’s
Menu
Links
Menu
Contact
Menu
Formulier
Contact
Tip Website vernieuwen Dit is een goed moment om te kijken of er nieuwe pagina’s nodig zijn voor de website of dat bestaande pagina’s kunnen worden verwijderd.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
4
Een website omzetten van WEB! Pro naar Web Easy
5
Wat is de grootte van de website? Een webpagina kan verschillende formaten hebben. De standaardformaten zijn: 800 x 600 en 1024 x 768. Deze getallen geven de breedte en hoogte van een webpagina aan in pixels of beeldpunten. Deze maten komen overeen met de vaste maten van beeldschermen. Een webpagina van 800 x 600 zal precies passen in een beeldscherm van 800 pixels breed en 600 pixels hoog. Overigens is dit de maat van oudere beeldschermen en zijn de meeste tegenwoordig groter. Om het huidige formaat van de website te achterhalen, moet u de website bekijken bij verschillende resoluties op uw beeldscherm. Maximaliseer het venster van de internetbrowser U ziet uw website in het venster: Als de website qua breedte precies in het venster past (er staat geen verticale schuifbalk onder in het venster), geeft de beeldschermresolutie de grootte van de website weer:
Minimaliseer het venster van de internetbrowser Rechtsklik op het bureaublad Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
U ziet het venster Persoonlijke instellingen: Klik op
U ziet het venster Beeldscherminstellingen: Als de website precies in het venster past qua breedte, kunt u de resolutie lezen in dit venster: Noteer de resolutie Klik op Sla de overige stappen over Anders: Versleep de schuif helemaal naar links Klik op U ziet dit venster: Klik op
De resolutie van uw beeldscherm wordt aangepast. © 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
6
Een website omzetten van WEB! Pro naar Web Easy
7
Maximaliseer het venster van de internetbrowser U ziet uw website in het venster: Als de website wat betreft de breedte nog niet precies in het venster past (er staat een verticale schuifbalk onder in het venster), is dit nog niet de juiste resolutie: Pas de resolutie nogmaals aan Anders: Noteer de resolutie Zet de beeldschermresolutie terug naar de resolutie waarmee u werkt U weet nu de minimale grootte van uw website.
Tip Website vernieuwen Dit is een goed moment om te kijken of u de grootte van uw website wilt aanpassen. Moderne beeldschermen zijn groter en hebben een hogere resolutie gekregen. Vroeger was de grootte 800 x 600 een goede maat voor websites. Tegenwoordig wordt 1024 x 768 veel gebruikt. Houd er wel rekening mee dat u bij een andere paginagrootte de pagina anders zult moeten indelen wat betreft teksten, afbeeldingen en andere onderdelen.
Wat zijn de gebruikte lettertypen en andere lettereigenschappen? Als u de website in Web Easy zoveel mogelijk op uw bestaande website wilt laten lijken, wilt u misschien ook dezelfde lettertypen en andere lettereigenschappen voor de gewone tekst en de koppen gebruiken. Hoogstwaarschijnlijk zult u niet meer uit uw hoofd weten welke lettertypen u gebruikt heeft. Er zijn verschillende mogelijkheden om te zien welke lettertypen zijn gebruikt voor een website.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
8
Wanneer WEB! Pro nog op uw computer werkt, kunt u de website daarin openen om te kijken welke lettertypen en andere -eigenschappen voor de verschillende teksten zijn gebruikt. In dit voorbeeld ziet u een webpagina die in het programma WEB! Pro is geopend: Dubbelklik op de tekst U ziet de eigenschappen van de tekst in het venster Tekst Eigenschappen:
Wanneer WEB! Pro niet meer werkt op uw pc, moet u op een andere manier de gebruikte lettertypen en andere teksteigenschappen achterhalen. Het handigst is dit te doen met behulp van Word. Als dit tekstverwerkingsprogramma op uw computer staat: Open Word Open het venster van uw internetbrowser U ziet uw website in het venster: Selecteer de tekst waarvan u de eigenschappen wilt weten
Let op! Selecteer alleen dezelfde soort tekst per keer, niet allerlei verschillende soorten tekst tegelijk. Zo kunt u per soort tekst de eigenschappen bepalen.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
Druk op Klik op Klik op
U ziet het venster van Word:
Druk op
+
De tekst is ingeplakt:
U kunt nu de eigenschappen van de tekst bekijken: Rechtsklik op de tekst Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
9
Een website omzetten van WEB! Pro naar Web Easy
10
U ziet het venster Lettertype: Hierin staan de eigenschappen van de tekst: Noteer de eigenschappen Klik op
Op dezelfde manier kunt u de eigenschappen van de andere teksten op de website achterhalen.
Let op! Als voor uw website oorspronkelijk een lettertype is gebruikt dat niet op de computer staat waarop u de website bekijkt, zal er een ander lettertype worden weergegeven. Als u geen Word heeft om de eigenschappen van teksten te achterhalen, moet u zelf in de HTML-code van de website kijken: U ziet uw website in het venster van Internet Explorer: Rechtsklik op de webpagina Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
11
U ziet de HTML-code van de webpagina:
Deze HTML-code ziet er cryptisch uit voor iemand zonder kennis van HTML. U kunt nu gaan zoeken naar de gebruikte lettertypen. Hiervoor zoekt u in de HTMLcode op de tekst ‘Font’: Klik op Klik op
U ziet het venster Zoeken: Typ bij
: font
Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
12
Een website omzetten van WEB! Pro naar Web Easy
U ziet nu de eerste HTMLregel met de lettertypeeigenschappen: : lettergrootte : letterkleur : lettertype
In het venster Zoeken: Klik op
Het is erg moeilijk om in WEB! Pro-bestanden te zien welk lettertype precies bij welke tekst hoort. Daarom kunt u de eigenschappen vermeld in de HTML-code alleen als algemene indicatie voor de teksten gebruiken. U kunt de gegevens die bij elkaar horen - deze staan achter elkaar - bij elkaar opschrijven, zodat u ze later kunt uitproberen en gebruiken in Web Easy. U ziet bij gebruik al snel of ze bij een kop horen of gewone tekst. Hierbij kunt u ook de kleurcode gebruiken. In het onderstaande voorbeeld van een schema staan achtereenvolgens het lettertype, de lettergrootte en letterkleur: Voorbeeld
Lettergrootte
Letterkleur
Arial
15
#000000
Arial
19
#000000
Comic Sans
15
#004080
Tip Website vernieuwen Dit is een goed moment om te kijken of u andere lettertypen en -eigenschappen voor uw website wilt gebruiken. Zo kunt u ook de kleur van teksten aanpassen als u een andere achtergrondkleur kiest. U kunt ook kiezen voor een moderner lettertype dat wellicht beter bij uw website past.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
13
Welke afbeeldingen zijn gebruikt op de website? Als er afbeeldingen zijn gebruikt op uw website, is het verstandig deze voor het omzetten naar Web Easy al in een map te plaatsen. Wanneer u de afbeeldingen al bij elkaar in een map op uw computer heeft staan, kunt u deze direct gebruiken in Web Easy. Als u ze niet meer op uw computer heeft staan, kunt u ze vanaf uw website opslaan op uw computer: U ziet uw website in het venster: Rechtsklik op de eerste afbeelding die u wilt overzetten Klik op
U ziet het venster Afbeelding opslaan: Open de map waarin de afbeelding opgeslagen moet worden Met de knop kunt u een nieuwe map voor de afbeeldingen maken: Klik op Op dezelfde manier kunt u andere afbeeldingen opslaan.
Tip Website vernieuwen Dit is een goed moment om te kijken of u andere afbeeldingen wilt gaan gebruiken op uw website. Bijvoorbeeld actuelere foto’s.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
14
Welke kleuren zijn gebruikt op de website? Op uw website zal meestal een kleur zijn gebruikt voor één of meer onderdelen, zoals de achtergrond of bepaalde vormen. Deze kleuren zijn vastgelegd met een kleurcode. Als u WEB! Pro nog werkend op uw computer heeft staan, kunt u de kleuren in het programma zelf bekijken: Dubbelklik op de plaats waarvan u de kleur wilt weten U ziet het venster Document Eigenschappen. Klik bij op het kleurvak Volg de stappen vanaf pagina 16 Als WEB! Pro bij u niet meer werkt, kunt u de kleurcodes van verschillende onderdelen makkelijk achterhalen met behulp van een tekenprogramma, zoals Paint. Open Paint Maak het venster van Paint schermvullend Open uw internetbrowser
Tip Noteren U kunt de afgedrukte pagina’s van de website gebruiken om de kleurcode te noteren. U gaat nu een schermafbeelding maken van de website: U ziet het venster van uw internetbrowser: Zorg dat het gedeelte van de website waarvan u een kleur wilt weten in beeld is
Druk op
+
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
Open het venster van Paint U ziet het venster van Paint:
Druk op
+
De schermafbeelding is ingeplakt:
U kunt nu de kleuren bepalen: Klik op Klik op de plaats waarvan u de kleur wilt weten
U ziet dat de kleur wordt overgenomen: Klik op Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
15
Een website omzetten van WEB! Pro naar Web Easy
U ziet het venster Kleuren bewerken: Klik op
U kunt in dit venster de kleurcodes noteren: Noteer de kleurcodes bij , en Klik op
Op deze manier kunt u de codes van alle kleuren op een website vaststellen.
Tip Hexadecimale code Als u werkt met een tekenprogramma, zoals Paint Shop Pro of Adobe Photoshop Elements, kunt u ook de hexadecimale code van de kleur noteren. Deze ziet er als volgt uit: #xxxxxx. Op de plaats van de x-en staat een nummercode, bijvoorbeeld #001123
Tip Website vernieuwen Dit is een goed moment om te kijken of u andere kleuren wilt gebruiken. Soms kan het aanpassen van de kleuren al de indruk van een vernieuwde website geven. © 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
16
Een website omzetten van WEB! Pro naar Web Easy
17
Welke extra onderdelen zijn gebruikt op de website? Websites kunnen voorzien zijn van extra onderdelen, zoals een veld dat de actuele datum weergeeft, een formulier of onderdelen die bewegen. Deze onderdelen kunt u bij het omzetten vervangen door soortgelijke onderdelen: U ziet uw website in het venster: Blader de pagina’s door en noteer de bijzondere onderdelen
Voorbeeld Home
Bewegend logo - Actuele datum
Contact
Formulier
Tip Website vernieuwen Dit is een goed moment om te kijken of u de speciale onderdelen nog wilt gebruiken op uw nieuwe website of ze liever verwijdert of vervangt door nieuwe onderdelen.
Welke links zijn gebruikt op de website? Het is handig een overzicht te maken van alle hyperlinks die gebruikt worden op uw website. Het gaat dan om hyperlinks die verwijzen naar andere onderdelen op de website, zoals pagina’s en bestanden. Maar ook om e-maillinks en hyperlinks naar andere websites. U kunt deze informatie noteren op de afgedrukte pagina’s van uw website of in een apart schema. U hoeft niet exact op te schrijven waar een hyperlink naar verwijst, een korte omschrijving is voldoende. Tijdens het omzetten kunt u makkelijk direct de links overzetten naar Web Easy.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
18
U ziet uw website in het venster: Blader de pagina’s door en noteer de hyperlinks
In een lijst kunt u bijvoorbeeld de pagina noteren met daarachter de links op de pagina en waarnaar ze verwijzen: Voorbeeld Home
[email protected]: hetzelfde mailadres Skireizen: reisbureau Skivakanties
Contact
Contactformulier: pagina formulier
Tip Website vernieuwen Dit is een goed moment om te kijken of u bepaalde links wilt verwijderen en of alle links nog wel goed werken. Soms verandert een webadres.
Zijn er frames zijn gebruikt op de website? Frames zijn delen op een webpagina die kunnen blijven staan in een venster, terwijl de rest van een website wordt vernieuwd. Op deze manier kan bijvoorbeeld een frame met een menu blijven staan, terwijl alleen het gedeelte met informatie op de pagina wordt vervangen. Een frame met een menu op een pagina:
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
19
Frames worden tegenwoordig niet zoveel meer gebruikt. In Web Easy is het dan ook niet mogelijk om webpagina’s in te delen in frames. Dat is ook niet nodig, omdat een pagina zonder frames ook goed werkt. In het boek wordt ook beschreven hoe u zonder frames een website opbouwt.
Welke metatags zijn gebruikt op de website? Metatags vormen de informatie waarmee zoekmachines, zoals Google, uw website opnemen in hun database. Metatags bestaan onder andere uit trefwoorden die uw website beschrijven. Ook geven metatags meer informatie over de website, zoals wie hem heeft gemaakt. U kunt zelf in de HTML-code van de website kijken welke metatags zijn gebruikt: U ziet uw website in het venster: Rechtsklik op de webpagina Klik op
U ziet de HTML-code van de webpagina:
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
20
U kunt nu gaan zoeken naar metatags. Hiervoor zoekt u in de HTML-code op de tekst ‘meta’: Klik op Klik op
U ziet het venster Zoeken: Typ bij
: meta
Klik op
U ziet nu de eerste HTMLregel met de metatags: Bij staan de META-tags die u bij het bouwen van de overgezette website kunt gebruiken: U kunt deze gegevens opschrijven of bij het bouwen van de website direct kopiëren naar Web Easy. U kunt ook zelf nieuwe metatags bedenken. In het venster Zoeken: Klik op
Sluit het venster van Kladblok
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
21
2. Uw website omzetten Als u de inventarisatie voltooid heeft, kunt u de website van WEB! Pro naar Web Easy omzetten. Hiervoor bouwt u de website stap voor stap opnieuw op in Web Easy aan de hand van de inventarisatie en met behulp van de teksten en afbeeldingen die u al heeft.
Let op! De handelingen voor het omzetten zullen in deze paragraaf alleen kort worden behandeld. Voor een uitgebreide beschrijving van het werken met Web Easy kunt u het boek gebruiken.
Stap 1. De nieuwe website aanmaken Als eerste stap maakt u een nieuwe website aan in Web Easy: Open uw website in uw internetbrowser Maak het venster van de internetbrowser schermvullend Open Web Easy Maak het venster van Web Easy schermvullend Maak een lege website Klik op de resolutie voor uw website en kies voor één pagina Als de juiste resolutie er nog niet bij staat, kies dan een willekeurige. Deze past u straks aan. Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
U ziet de eerste (en enige) lege pagina van de lege website: Later gaat u deze pagina kopiëren als sjabloon voor de andere pagina’s van de website.
U kunt nu, indien nodig, de resolutie van de pagina nog aanpassen:
Klik op
Klik in het vak bij
Typ de breedte Klik in het vak bij
Typ de hoogte Klik op U gaat nu de titel voor de pagina opgeven:
Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
22
Een website omzetten van WEB! Pro naar Web Easy
23
Klik in het vak bij
Typ de naam van de pagina Klik op
Stap 2. De achtergrond instellen Het is een goed idee om bij het bouwen van een website altijd met de achtergrond te beginnen. In Web Easy is het verstandig eerst de achtergrond in te stellen die om de website heen te zien zal zijn, als de website kleiner is dan het venster. De achtergrond van de website zelf maakt u vervolgens met behulp van vormen: Achtergrond om website heen: Achtergrond van de website zelf:
Tip Informatie uit het boek U kunt de informatie uit Hoofdstuk 2 De eerste webpagina maken van het boek gebruiken om een achtergrond in te stellen. U ziet nu hoe u de kleurcodes van uw oude website gebruikt om in Web Easy een kleur op te geven voor de achtergrond die om de website heen te zien is:
Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
Klik op tabblad
Als u een hexadecimale kleurcode (#xxxxxx) heeft, kunt u deze direct invullen: Typ bij kleurcode
de
Klik op Anders: Klik op Klik op
Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
24
Een website omzetten van WEB! Pro naar Web Easy
In dit venster kunt u de kleurcode opgeven: Typ bij , en de bijbehorende kleurcodes Klik op
Klik op
U ziet de achtergrond om de website heen:
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
25
Een website omzetten van WEB! Pro naar Web Easy
26
U kunt nu boven op deze achtergrond de achtergrond van de website zelf toevoegen met behulp van vormen:
Tip Informatie uit het boek U kunt de informatie in Hoofdstuk 3 Werken met vormen van het boek gebruiken om een achtergrond met vormen in te stellen. Maak een achtergrond met vormen
Het is verstandig tussentijds de website in aanbouw regelmatig op te slaan: Klik op Klik op Klik op
Standaard worden documenten in Web Easy opgeslagen in de map Documenten Web Easy - Documents. U ziet het venster Opslaan als: Typ bij de naam voor de website Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
27
Stap 3. Teksten overzetten De volgende stap is het overzetten van de teksten van uw oude website naar Web Easy. Deze teksten kunt u direct kopiëren vanaf uw oude website:
Tip Informatie uit het boek U kunt de informatie in Hoofdstuk 4 Werken met teksten van het boek gebruiken om te werken met teksten.
Tip Als WEB! Pro bij u nog werkt, kunt u ook teksten uit WEB! Pro kopiëren in plaats van vanuit de internetbrowser. Voeg een nieuw tekstobject toe
Open het venster met de website Selecteer de tekst die u wilt kopiëren
Druk op
+
Open het venster van Web Easy © 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
Dubbelklik op het nieuw tekstobject Verwijder de tekst
Druk op
+
Klik naast het tekstobject
U ziet dat de tekst is toegevoegd: Geef het tekstobject de gewenste grootte Zet het tekstobject op de gewenste positie
U kunt de tekst nu de juiste eigenschappen meegeven, zoals het lettertype en de lettergrootte: Klik op het tekstobject
Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
28
29
Een website omzetten van WEB! Pro naar Web Easy
Geef de eigenschappen op Klik op
De tekst is aangepast aan de instellingen:
Tip Tekstkleur aanpassen De kleur van een tekst past u aan met de knop
.
Op deze manier kunt u ook de andere teksten van de oude website overzetten. De volgorde waarin u dat doet, is afhankelijk van uw eigen voorkeur. Het is vaak het handigst om van boven naar beneden te werken.
Tip Tekstobject kopiëren Bij het overzetten van teksten met dezelfde eigenschappen (lettertype en -grootte) is het handig om daarvoor gebruik te maken van het tekstobject in Web Easy dat u al eerder voor die tekst heeft gebruikt. Dat object kopieert u eerst in Web Easy, vervolgens kopieert u de tekst van de oude website naar dat nieuwe tekstobject. Zie ook paragraaf 4.11 Tekst kopiëren uit een ander programma van het boek.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
30
Stap 4. Afbeeldingen overzetten De volgende stap is het overzetten van de afbeeldingen van uw oude website naar Web Easy. Deze afbeeldingen heeft u als het goed is al tijdens de inventarisatie in een aparte map geplaatst.
Tip Informatie uit het boek U kunt de informatie in Hoofdstuk 5 Werken met afbeeldingen van het boek gebruiken om te werken met afbeeldingen.
Klik op
Klik op Klik op een type afbeelding
Open de map met de afbeeldingen Klik op de afbeelding Klik op
Klik op de gewenste plaats op de pagina
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
31
U ziet dat het afbeeldingsobject is toegevoegd: Geef het object de gewenste grootte Zet het object op de gewenste positie
Pas, indien gewenst de eigenschappen van de afbeelding aan Op deze manier kunt u ook de andere afbeeldingen van de oude website overzetten. Voeg, indien gewenst ook bijzondere objecten toe, zoals de huidige datum Zie paragraaf 5.15 Een speciaal object toevoegen van het boek voor meer informatie.
Stap 5. Het menu toevoegen De volgende stap is het overzetten van het menu. Het menu gebruikt u om bezoekers naar de andere pagina’s op de website te verwijzen. Als u bij uw oude website aparte afbeeldingen, zoals knoppen of foto’s, heeft gebruikt, kunt u die overzetten naar Web Easy. Daarvoor kunt u de informatie gebruiken uit de vorige stap.
Tip Informatie uit het boek U kunt de informatie in Hoofdstuk 6 Een menu maken van het boek gebruiken om te werken met menu’s.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
32
Voeg het menu toe
De hyperlinks naar de andere pagina’s voegt u toe in stap 7.
Stap 6. Volgende pagina’s toevoegen De volgende stap is het één voor één toevoegen van de andere pagina’s van de oude website.
Tip Informatie uit het boek U kunt de informatie in Hoofdstuk 7 Webpagina’s toevoegen van het boek gebruiken om te werken met nieuwe pagina’s. U voegt als volgt een nieuwe webpagina toe aan uw website in Web Easy: Klik op Klik op
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
33
Het is het makkelijkste om de eerder gemaakte pagina te gebruiken als basis voor de volgende pagina’s: Klik op Typ bij de titel van de nieuwe pagina Klik op
Let op! Accenten als è en ë worden niet meegenomen in bestandsnamen of vertoond in de titelbalk van internetbrowsers. U ziet dat de nieuwe pagina is toegevoegd: In de titelbalk staat de naam van de nieuwe pagina en het nummer in het document: De pagina is verder een exacte kopie van de homepagina.
Pas de pagina aan
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
34
Voeg ook de andere pagina’s toe Op deze manier kunt u alle pagina’s van de oude website overzetten.
Stap 7. Hyperlinks toevoegen De volgende stap is het toevoegen van de hyperlinks van de oude website.
Tip U kunt de informatie in Hoofdstuk 8 Hyperlinks maken van het boek gebruiken om te werken met hyperlinks. U kunt voor hyperlinks naar andere websites de hyperlinks gebruiken van uw oude website: Klik op de tekst of afbeelding
Klik op
Klik bij
op
Klik op
Open het venster met de website
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
Klik op de hyperlink
U ziet de website die bij de hyperlink hoort: Selecteer de hyperlink in de adresbalk
Druk op
+
Klik in het vak bij
Druk op
+
Klik een vinkje
bij
Klik op U heeft nu de oude hyperlink overgezet naar Web Easy. Voeg ook de andere hyperlinks toe
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
35
Een website omzetten van WEB! Pro naar Web Easy
U kunt voor hyperlinks naar e-mail de hyperlinks gebruiken van uw oude website: Klik op de tekst of afbeelding
Klik op
Klik bij
op
Klik op
Open het venster met de website
14
Klik op de hyperlink
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
36
Een website omzetten van WEB! Pro naar Web Easy
37
U ziet dat het e-mailprogramma wordt geopend: Selecteer bij het e-mailadres
Druk op
+
Klik in het vak bij
Druk op
+
Verwijder overbodige tekst Klik op U heeft nu de oude e-maillink overgezet naar Web Easy. Voeg ook de andere e-mailhyperlinks toe De hyperlinks naar andere pagina’s en bestanden kunt u niet kopiëren. Deze moet u zelf opgeven. U kunt wel uw oude website gebruiken om te zien naar welke pagina’s en bestanden bepaalde hyperlinks verwijzen: Voeg hyperlinks toe naar andere pagina’s en bestanden
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
38
Stap 8. De overige onderdelen toevoegen Voeg nu nog de overgebleven onderdelen in Web Easy toe, zoals geluid- en videobestanden. Gebruik hiervoor de instructies in het boek. Voor het opnieuw aanmaken van een formulier gebruikt u het PDF-bestand Een formulier maken.
Stap 9. De website testen, bouwen en uploaden De laatste stap is het testen, bouwen en uploaden van de overgezette website in Web Easy.
Tip U kunt de informatie in Hoofdstuk 9 Bouwen en uploaden van het boek gebruiken om te zien hoe u websites gemaakt met Web Easy test, bouwt en uploadt. Open het websitevoorbeeld U ziet de website in uw internetbrowser: Controleer de teksten, afbeeldingen en andere objecten Controleer de hyperlinks
Sluit het venster van uw internetbrowser U kunt nu de website laten bouwen en uploaden:
Let op! Als u uw website uploadt naar dezelfde map van de hostingprovider waar uw originele website staat, zal deze worden overschreven als alle bestanden dezelfde naam hebben. Meestal is dat echter niet het geval en kunt u de bestanden beter eerst verwijderen uit de map van de hostingprovider voordat u de nieuwe bestanden erin plaatst. Zo voorkomt u dat bestanden elkaar in de weg gaan zitten. Het bouwen en uploaden van een overgezette website verloopt hetzelfde als het overzetten van een nieuw gemaakte website in Web Easy, zoals beschreven in Hoofdstuk 9 Bouwen en uploaden van het boek. © 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6
Een website omzetten van WEB! Pro naar Web Easy
39
U kunt de metatags van uw oude website invullen tijdens het bouwen van de website: Vul de metatags in
In dit PDF-bestand heeft u geleerd hoe u een oude website, gemaakt in een ander webbouwprogramma stap voor stap omzet naar een website die gemaakt is in Web Easy.
© 2009 Visual Steps B.V. – www.visualsteps.nl – Dit is een aanvullend PDF-bestand bij het boek Websites bouwen met Web Easy – ISBN 978 90 5905 026 6