In deze handleiding een overzicht van de belangrijkste vernieuwingen. Inloggen op de sitebuilder De sitebuilder bereik je vanaf nu via je eigen domeinnaam. Dus: www.jouwdomein.nl/beheer (jouwdomein.nl uiteraard vervangen door je eigen domeinnaam!)

Sitemap Je website beschikt nu over een dynamische sitemap. Dit is een XML bestand dat een overzicht geeft van alle pagina’s op je website. Dit overzicht kan handig zijn voor de zoekmachines om je website gemakkelijker te indexeren. Nieuwe pagina’s die je maakt komen automatisch in deze sitemap. Daarom heet dit dus een dynamische sitemap: deze is altijd uptodate. Je hebt hier verder geen omkijken naar. Je kan de sitemap zien op www.jouwdomein.nl/sitemap.xml (jouwdomein.nl vervang je door je eigen domeinnaam).

Interne Zoekmachine In Novosite 5.0 beschik je over een krachtige interne zoekmachine. Met deze zoekmachine kun je zelf op elk moment je volledige website indexeren. Je bezoekers kunnen nu snel en gemakkelijk je website doorzoeken op trefwoorden. Deze zoekmachine indexeert zelfs je PDF documenten! De zoekmachine staat standaard nog niet aan. Je moet eerst je website indexeren. Ga naar de pagina Instellingen.

En scroll naar beneden tot je dit ziet:

Klik op: Klik hier voor beheer van de interne zoekmachine. Er opent een nieuw venster en je moet hier opnieuw inloggen met je gebruikersnaam en wachtwoord. Je ziet nu dit:

Klik op: Website opnieuw indexeren. Je website wordt nu volledig doorzocht en geindexeerd. Pagina’s die niet veranderd zijn worden overgeslagen, zo ook pagina’s die minder dan 10 woorden bevatten. Als je veel aangepast hebt aan je website vergeet deze dan niet opnieuw te indexeren, zodat je veranderingen ook vindbaar zijn via de interne zoekmachine. Daarnaast zie je nog een knop: Statistieken. Dit is interessant want hier kun je zien waarnaar de bezoekers van je site gezocht hebben. Daarnaast de knop Opschonen: Als je pagina’s op je website verwijderd hebt, kies hier dan de optie Trefwoorden opschonen. Daarna indexeer je je website opnieuw. Ook kun je hier de zoekgeschiedenis wissen. Nadat je website is geindexeerd is het tijd om een zoekveld toe te voegen aan je website.

Bij de pagina Instellingen kun je de zoekfunctie inschakelen en kiezen voor boven of onder je hoofdmenu. Ook kun je hier de kleuren van de zoekbox aanpassen. Let op: Dit is alleen van toepassing als je je hoofdmenu aan de linkerkant van de website hebt. Als je voor een hoofdmenu bovenin de website hebt gekozen dan moet je zelf een zoekbox in je website invoegen. Dit kan in een pagina zijn (bijvoorbeeld de eerste pagina van je site) zijn maar bijvoorbeeld ook in de Footer (onderaan je website). Een zoekbox kun je invoegen met de editor, met deze knop:

Hoofdmenu In Novosite 5.0 kun je schakelen tussen een hoofdmenu bovenin en een hoofdmenu aan de linkerkant. Je hebt nu dus de keuze uit 2 verschillende layouts. Layout 1: Menu aan de linkerkant. De Footer onderin (nieuw!) kun je naar wens in- of uitschakelen. De zoekfunctie (ook nieuw!) kan ook boven het hoofdmenu worden geplaatst of uitgeschakeld.

Layout 2: Menu bovenin. De Footer onderin kun je naar wens in- of uitschakelen. De zoekfunctie idem.

Zo werkt het Je menu staat standaard aan de linkerkant. (Layout 1) Ga naar de pagina Instellingen.

Bovenin zie je dit:

Wanneer je dit aanpast is dit direct op je website te zien. (wel even je pagina vernieuwen, F5 of control+r) Wat is beter, een menu links of een menu bovenin? Dit is een belangrijke keuze voor de opmaak van je website. Beide opties hebben voor- en nadelen. Een menu bovenin heeft een duidelijk voordeel: meer ruimte in de breedte voor je content. In plaats van 743 pixels breedte heb je nu de beschikking over een werkvlak van 943 pixels breedte. Je hebt immers 200 pixels erbij gekregen die door het menu aan de linkerkant gebruikt werden Er is ook een duidelijk nadeel: beperkte ruimte voor de knoppen in het menu. Je kan bij een site met 25 items in het hoofdmenu geen horizontaal menu gebruiken. Dit probleem kun je oplossen door korte menu-titels te gebruiken en je website zo in te delen dat je niet teveel items in het hoofdmenu hebt. Maak dus gebruik van het submenu en onderliggende pagina's. Dat is ook overzichtelijker voor je bezoekers. Bij moderne websites kom je vaker een menu bovenin tegen dan een menu aan de linkerkant. Een website met een menu aan de linkerkant heeft geen beperking in het aantal knoppen, want de ruimte naar beneden toe is onbeperkt. Ook is een website met menu aan de linkerkant gemakkelijker op te maken. Je werkt dan met maximaal 2 kolommen. Je website ziet er met deze layout eerder wat meer “gevuld” uit. Bij een menu bovenin moet je de volledige paginabreedte zelf invullen en hiervoor is wat meer gevoel voor opmaak / layout nodig. Om je daarbij te helpen is er in versie 5.0 een nieuwe knop in de editor waarmee je met 1 klik een perfecte 3-koloms tabel kan invoegen. Experimenteer met beide mogelijkheden, maar houdt altijd rekening met het volgende: In eerste instantie heb je je pagina’s hebt opgemaakt voor een breedte van ongeveer 743 pixels, die ruimte wordt bij het omschakelen naar het menu bovenin: 943 pixels. Het kan zijn dat je daarom de opmaak van je pagina’s even moet nalopen, mogelijk dat je e.e.a. moet aanpassen, maar dat zal op zich meevallen en hangt af van hoe je je pagina’s hebt opgemaakt. Andersom is een ander verhaal: Als je pagina’s opmaakt voor een breedte van 943 pixels, en je gebruikt bijvoorbeeld 3 kolommen voor je pagina-opmaak, dan zal deze pagina te breed zijn om terug te switchen naar een breedte van 743 pixels. In dit geval zul je zeker de opmaak van je pagina moeten aanpassen. De modules passen zich automatisch aan qua opmaak, deze worden dus correct weergegeven bij beide opties.

Footer Naast een header kun je nu dus ook een Footer in je website plaatsen. Een Footer staat op iedere pagina van je website onderin, over de hele breedte. De Footer kun je volledig zelf invullen en opmaken. Met tekst, tabellen of afbeeldingen. Zo werkt het Ga naar de pagina Instellingen.

Zet Footer tonen op Ja en bekijk je website. (pagina vernieuwen) Je ziet de Footer nu onderaan iedere pagina staan. Bij instellingen kun je een aantal algemene kenmerken voor de Footer instellen (zie hieronder). Om de Footer in te vullen klik je op: Klik hier om de Footer aan te passen >

De Footer pas je aan met de bekende editor. Het 6e icoontje van links is handig. Deze voegt een tabel met 2 kolommen in. Daarin kun je bijvoorbeeld je bedrijfsgegevens en telefoonnummer zetten. Zie het voorbeeld hieronder. Dit is heel gangbaar om in een footer te plaatsen. Ook kun je zelf een afbeelding opmaken, met een breedte van 978 pixels (zelfde als de header) en deze invoegen in je footer.

Formulieren maken In Novosite 5.0 kun je zelf gemakkelijk formulieren maken! Zo werkt het Open de pagina waarin je een formulier wil invoegen in de editor. Rechtsboven in de editor zie je 2 nieuwe knoppen.

Klik eerst in de pagina op de plek waar je het formulier wil invoegen. Klik daarna op de knop Formulier invoegen (bovenste rij, 2e knop van rechts, met het rode kader) Klaar! Je hebt nu een werkend contacformulier ingevoegd. Test het formulier maar eens op je website, je zal zien dat je de ingevulde gegevens direct gemaild krijgt. Deze e-mail gaat naar het adres dat je bij Account instellingen hebt ingevuld. Formulier aanpassen Je kan dit standaardformulier naar wens aanpassen. Je kan bijvoorbeeld aangeven welke velden van het formulier verplicht ingevuld moeten worden. Klik op de knop Je ziet nu de html code van deze pagina. Zoek onderstaande regel op: <input type="hidden" value="E-mail,Naam" name="required" /> Je ziet hier dat E-mail en Naam verplicht zijn. Je kunt hier zelf velden aan toevoegen of verwijderen. Let op: Tussen de velden staat een komma, en de naam van de velden moet exact juist zijn, dit is ook hoofdletter gevoelig. Je verandert deze regel dus bijvoorbeeld in: <input type="hidden" value="E-mail,Naam,Telefoon" name="required" /> Je kan verder kiezen welke pagina getoond moet worden na het invullen van het formulier. Dat is deze regel: <input type="hidden" value="http://www.domeinnaam.nl/contactpage2.php" name="good_url" /> Je kan hiervoor eventueel zelf een onderliggende pagina aanmaken en de URL hiervan hier invullen. Hoe vind ik de URL van een onderliggende pagina? Kijk op de volgende pagina bij de titel: Pagina bekijken in de browser. Extra velden invoegen. Het kant- en klare formulier staat in een tabel. Deze tabel heeft de kleur: Tabelkleur 1. Deze kleur kun je aanpassen op de pagina Instellingen. In deze tabel kun je gemakkelijk een rij invoegen. Klik op onderstaande knop en kies Grootte en vervolgens Rij eronder invoegen of Rij erboven invoegen.

Je hebt nu een nieuwe rij in je tabel. In deze rij kun je een nieuw Formulier element invoegen.

Deze functie is toegevoegd voor de handigere gebruikers in onze klantenkring. Je kunt ook je formulier laten programmeren door de webmasters van Novosite. Of vraag hulp bij je collega-webmasters in het Forum. Binnenkort verschijnt er een video-workshop waarin dieper wordt ingegaan op het maken van formulieren. Let op: Novosite geeft geen support op zelfgemaakte formulieren of de mogelijkheden die deze functie biedt. Wanneer je er zelf niet uit komt en je wil er een Novosite professional naar laten kijken dan betaal je daarvoor het geldende uurtarief.

Pagina bekijken in de browser Als je een pagina opgemaakt hebt dan wil je deze even controleren in de browser. Hiervoor hebben we het volgende toegevoegd, zie onderstaande afbeelding. Dit staat onder de pagina editor:

Dit is vooral handig bij onderliggende pagina’s, omdat je deze niet via het hoofdmenu van de site kunt oproepen. Ook kun je hiermee snel en gemakkelijk de volledige URL van een van de pagina’s in je website achterhalen.

Afbeeldingen in groepen

Je kan nu de afbeeldingen die je in je pagina’s gebruikt indelen in groepen. Dit werkt een stuk overzichtelijker, zeker wanneer je veel afbeeldingen in je website gebruikt.

Je bestaande afbeeldingen zijn allemaal in de groep “algemeen” geplaatst. Je kunt zelf nieuwe groepen aanmaken. Voordat je een afbeelding gaat uploaden kies je dus eerst in welke groep deze terecht moet komen. (zie bovenstaande afbeelding: rechtsboven: Plaats afbeelding in groep).

Meer mogelijkheden voor pagina’s en modules Je kunt nu voor iedere pagina en iedere module van je website een eigen Header instellen, maar ook een eigen achtergrond afbeelding, een afbeelding voor in de marges en tenslotte kun je ook alle individuele pagina’s en modules afschermen met een gebruikersnaam en wachtwoord. Zo werkt het Ga naar Pagina’s.

Zoek de pagina op die je wil aanpassen en klik op de knop Trefwoorden / Instellingen. Onderaan deze pagina zie het de volgende mogelijkheden.

Let op: Je hoeft deze velden alleen maar in te vullen als je op elke pagina een andere header of andere achtergrond afbeelding wil. Wanneer je bovenstaande leeg laat dan worden de algemene instellingen gebruikt, zie hiervoor de pagina Instellingen.

Voor de modules kun je bovenstaande ook per module instellen. Ga hiervoor naar Modules

Selecteer vervolgens de gewenste module en kies dan in het menu rechtsboven Instellingen. Bijvoorbeeld: je kiest de module Fotogallery, dan zie je bovenaan dit keuze menu.

Klik dan helemaal rechts op: Fotogallery instellingen. Je ziet dan onderstaande mogelijkheden. Bij Modules kun je nu dus ook de tekst aanpassen die boven de module staat. Deze pas je aan in het onderste vak: Tekst voor deze module aanpassen.

Voor de andere modules volg je dezelfde procedure.

Nieuwe mogelijkheden bij Instellingen In Novosite 5.0 zijn er een aantal extra opties gekomen op de pagina Instellingen en heb je meer creatieve mogelijkheden om je website te personaliseren. We lopen de pagina Instellingen even langs. Ga naar instellingen.

Algemene instellingen

Als eerste zie je staan: Website Online? Hier kun je zelf (tijdelijk) je website uit de lucht halen. De instellingen daaronder zijn hetzelfde gebleven, deze ken je uit de vorige versie en spreken verder voor zich.\ Hoofdmenu Instellingen

Je kan nu een transparantie aangeven voor submenu items. Je ziet dan de pagina door de achtergrond van het submenu heen. Waarde 100 is volledig ondoorzichtig. Waarde 0 is volledig doorzichtig. Advies: gebruik een hoge waarde, tussen de 80 en 100.

Hoofdmenu items die subpagina’s hebben, hebben een pijltje om dit aan te duiden. Je kunt nu kiezen voor een zwart of wit pijltje. Advies: Donkere kleur voor je menu-knop: kies Wit. Lichte kleur voor je menu-knop: Kies Zwart. De hoogte van de knoppen in je menu kun je nu zelf kiezen. Advies: 20-30 pixels is normaal. Deze instelling heeft alleen invloed op een menu aan de linkerkant. Tekstpositie, marge links: Dit is afstand tussen de linkerkant van de button en de plek waar de tekst in de button begint.

Als je een achtergrondafbeelding hebt, of een icoontje in je button, dan wil je de tekst in de knop iets naar rechts schuiven. Dat doe je dus hier. Ook dit is alleen van toepassing wanneer je je hoofdmenu aan de linkerkant hebt. Achtergrondafbeelding in de marges van de site

Eerst even iets over de layout en breedte van je site want we krijgen hier vaak vragen over. Je website heeft een vaste breedte en staat gecentreerd op je scherm. Dit zie je bij nagenoeg alle (professionele) websites. Waarom wordt niet het hele scherm gebruikt? Omdat je uit moet gaan van bezoekers met het kleinste beeldscherm. Je wil namelijk niet dat je bezoekers horizontaal moeten scrollen in je website. Waarom niet automatisch de breedte van de site aanpassen aan de beeldschermgrootte? Omdat dan de uitlijning van je tekst en afbeeldingen op alle schermen anders zal zijn. Dan ziet je website er overal anders uit en dat wil je niet. Een vaste breedte voor websites dus, met marges links en rechts. De breedte van je website is conform de huidig geldende standaard voor websites. Deze zal voorlopig ook niet veranderen. Op een klein scherm ziet een site er bijvoorbeeld zo uit:

en op een groot scherm zo:

Mensen met een groot scherm zien dus meer marge links en rechts naast de website en hoeven minder verticaal te scrollen. Zoals je ziet bij de bovenste afbeelding kan dus niet iedereen de marges helemaal zien, dus wat is nu handig om met de marges te doen? Er zijn verschillende mogelijkheden, deze bespreken we op de volgende pagina’s ->

Standaard: een kleur in de marges van je website. Een kleur voor de marges van je site stel je in bij Instellingen:

Voorbeeld: oranje marges links en rechts.

Een herhalend patroon in de marges Dit is een zogenaamde tegel of behang-afbeelding die zich herhaalt in de marges en zo een patroon vormt. Google maar eens op background tiles of background wallpaper, website background, etc. Let wel op copyright! Je kan dergelijke afbeeldingen kopen bij fotolia.eu voor een euro. Voorbeeld: Onderstaande afbeelding is geschikt om te herhalen. (behang)

Wanneer we deze uploaden en dan kiezen voor afbeelding herhalen dan krijg je onderstaand effect. (Wanneer je herhalen kiest dan doet de positie van de afbeelding er niet toe, want hij vult de gehele marges op.)

Een kleurverloop in de marges Maak een kleurverloop zoals onderstaande afbeelding (links) en kies voor horizontaal herhalen. Deze afbeelding vult de marges dan volledig op zodat je onderstaand effect krijgt. (afbeelding rechts)

    Een foto / afbeelding in de marges. Plaatsing: achter de website. Houdt er rekening meer dat je website 978 pixels breed is. We maken nu in Photoshop bijvoorbeeld deze afbeelding:

Het middenstuk is 978 en bevat niets, dit gedeelte komt namelijk toch achter je site dus dat zie je niet. Door hier niets te zetten is het bestand kleiner. Nu uploaden we deze afbeelding en kiezen positie afbeelding: Midden en Niet Herhalen. Dan krijg je onderstaand effect. Zo kun je dus precies bepalen wat in de marges links en rechts van je website zichtbaar is.

Nog een voorbeeld: We nemen nu een grote foto, met 978 pixels uitgesneden in het midden:

We uploaden deze als Achtergrondafbeelding in de marges. Kiezen positie: Midden en herhalen: Niet herhalen De website ziet er dan zo uit.

                                     

Achtergrondafbeelding in de pagina’s van de website

Wat we hier (te) vaak tegenkomen is simpelweg een grote full color foto die als pagina-achtergrond geplaatst met als gevolg: onleesbare tekst en een chaotische, onprofessionele website. Als je al een afbeelding wil plaatsen als achtergrond, houdt het dan rustig en kies bijvoorbeeld iets met een heel licht watermerk van je logo, of een papier-structuur. Kijk uit want het wordt al snel te druk. Deze functie is meer bedoeld voor de handige photoshopper of iemand met wat meer grafische vaardigheden. Let op de verticale positie afbeelding: Als de header van je website 200 pixels hoogte heeft, vul hier dan 200 in. Is je header 150 pixels, dan vul je hier 150 in, etc. Onderstaand is een leuk voorbeeld van een achtergrondafbeelding in de pagina’s.

of deze

De fotos aan de rechterkant zijn als achtergrond afbeelding in de pagina geplaatst. Hierdoor kunnen ze helemaal rechts uitlijnen.

Achtergrondafbeelding buttons in het hoofdmenu (alleen bij menu links!)

In de vorige versie kon je kiezen uit een aantal icoontjes die dan voor de knop in je hoofdmenu geplaatst werden. Daar zit je nu niet meer aan vast; Je kunt nu namelijk zelf een achtergrondafbeelding voor je hoofdmenu uploaden. Je kunt hier bijvoorbeeld een icoontje voor gebruiken, of een achtergrondafbeelding. Let op dat deze afbeelding exact even groot is als je menubutton, dus 200x25 pixels. Als je een andere hoogte instelt dan 25 pixels dan moet deze afbeelding ook aangepast worden aan die hoogte. Bijvoorbeeld een “old-school” 3d button als deze:

Geeft dit effect:

of deze

Natuurlijk gaan we bij deze voorbeelden uit van enige kennis van grafische pakketten zoals Photoshop of Fireworks. Maar je kunt ook gratis online software gebruiken zoals www.sumopaint.com Wanneer je hier niet handig in bent, vraag dan hulp aan iemand die dat wel is, bijvoorbeeld via het Novosite Forum. Of schakel een professional in, bijvoorbeeld een webdesigner van Novosite. Of gebruik deze functies simpelweg niet. Mooie afbeeldingen en achtergronden kun je voor een paar euro kopen bij fotolia.eu of andere stockphoto sites. Gebruik niet zomaar afbeeldingen die je op Internet hebt gevonden! Hier zit vaak copyright op en er wordt veel gecontroleerd. Je bent als website-eigenaar zelf volledig verantwoordelijk en aansprakelijk voor het materiaal dat op je site staat.

Achtergrondafbeelding achter hoofdmenu (alleen bij menu bovenin)

Het vorige voorbeeld werkt alleen bij het menu links omdat alle knoppen daar even breed zijn. Maar voor het menu bovenin hebben we deze optie: een afbeelding achter het gehele menu. Hiermee kun je het menu bijvoorbeeld mooi laten aansluiten op de header. Bijvoorbeeld: we ontwerpen deze header:

En we snijden het bovenste deel met het logo apart uit. Dit is de header van de site. Vervolgens snijden we het onderste donkere deel apart uit. De breedte is gelijk aan de header.

Dit donkere deel gebruiken we als achtergrond voor het hoofdmenu. De achtergrondkleur van het hoofdmenu halen we weg want we willen de afbeelding zien. Resultaat:

Achtergrondafbeelding footer

Dit werkt hetzelfde als bovengenoemd voorbeeld. Bijvoorbeeld deze afbeelding:

En dan nog wat content in de footer.

Natuurlijk gaan we bij alle voorbeelden met deze afbeeldingen uit van enige kennis van grafische pakketten zoals Photoshop of Fireworks. Maar je kunt ook gratis online software gebruiken zoals www.sumopaint.com Wanneer je hier niet handig in bent, vraag dan hulp aan iemand die dat wel is, bijvoorbeeld via het Novosite Forum. Of schakel een professional in, bijvoorbeeld een webdesigner van Novosite. Of gebruik deze functies simpelweg niet. Mooie afbeeldingen en achtergronden kun je voor een paar euro kopen bij fotolia.eu of andere stockphoto sites. Gebruik niet zomaar afbeeldingen die je op Internet hebt gevonden! Hier zit vaak copyright op en er wordt veel gecontroleerd. Je bent als website-eigenaar zelf volledig verantwoordelijk en aansprakelijk voor het materiaal dat op je site staat. Favicon

Je kunt nu dus zelf op elk moment je favicon aanpassen. Zorg wel dat dit bestand ALTIJD favicon.ico heet en verwijder altijd eerst de oude voordat je een nieuwe plaatst. Als je na het aanpassen niet de nieuwe favicon ziet dan zit de oude nog in de cache van je browser. Bij sommige browsers blijft de oude ook hardnekkig zichtbaar. Maak eerst je cache leeg en vernieuw de pagina voordat je ons mailt dat deze functie niet werkt. Want hij werkt wel ;-)

Backup Iedere nacht wordt er automatisch een backup gemaakt van je complete website. Indien gewenst kunnen we je gehele site of individuele pagina’s herstellen vanuit de backup. Dit kan tot 7 dagen terug. Hier zijn kosten aan verbonden: 40 euro excl. b.t.w. per incident. Deze kosten zijn uiteraard niet van toepassing als we om technische redenen je site vanuit de backup moeten herstellen.

Dit waren de belangrijkste vernieuwingen waar je als gebruiker mee aan de slag kunt. De meeste overige verbeteringen zitten “onder de motorkap”. Veel plezier en creatieve inspiratie gewenst! Team Novosite