SCMS - Smart Content Management System

Transcriptie

1 Online websites bouwen & beheren met SCMS Smart Content Management System & website builder Inhoud: Hoofdstuk 1: Inleiding, wat is SCMS?... 4 Hoofdstuk 2: Inloggen SCMS... 5 Hoofdstuk 3: Control Panel Basis:... 7 Hoofdstuk 4: Web Pagina aanmaken Hoofdstuk 5: Pagina achtergrond aanmaken Algemene pagina achtergrond Achtergronden weghalen Hoofdstuk 6: Items toevoegen en aanpassen Lagenindex Meerdere items tegelijk verplaatsen Items toevoegen en verwijderen Items kopiëren en verwijderen Hoofdstuk 7: Text-item aanmaken Het bewerken van tekst Hoofdstuk 8: Image item toevoegen Het toevoegen van een Image item als afbeelding op pagina Overige opties bij images Hoofdstuk 9: Button-item aanmaken Buttons maken in verticale positie Buttons voorzien van een interne link om te navigeren Uitrolmenu maken horizontaal of verticaal Pagina 1

2 9.4 Handmatig een uitrolmenu maken Hoofdstuk 10: Page item aanmaken Navigatiestructuur gebruiken met Page in Page Hoofdstuk 11: Flash-item aanmaken Het toevoegen van Flash-object Hoofdstuk 12: Form-item aanmaken Het toevoegen van Form item Hoofdstuk 13: Goed om te weten Zoekmachines Statistieken - Snoobi Webanalyse Social Media Pagina 2

3 voorwoord SCMS is tot stand gekomen door de behoefte aan een eenvoudige manier om websites te bouwen en deze volledig zelf te kunnen beheren. Dit alles zonder de noodzaak voor langdurige studies of technische kennis van programmeertalen en scripting. SCMS is in ontwikkeling sinds 2006 binnen een samenwerking tussen Gideon Edel (Edel software) en ondergetekende (mark-e-ting, 12websakee). SCMS is beschikbaar als hosted en managed online dienst op abonnementsbasis en in een SCMS Enterprise maatwerk editie. Een woord van dank gaat uit naar onze partners: YOiS BV, ICT2MKB, Pro ictief dienstverlening, De Computerdocente, Medication webdesign, Van Opzeeland communicatie Voor het door hen in SCMS gestelde vertrouwen en de nog altijd voortdurende betrokkenheid en ondersteuning op diverse gebieden. Tevens dank aan Sandra van de Wijngaart (De Computerdocente, Roosendaal) voor het herschrijven van deze handleiding. Ik wens u als lezer van deze handleiding veel succes en plezier met het bouwen en beheren van uw website! Voor vragen, opmerkingen en ondersteuning kunt u terecht via onderstaande contactinformatie. Met vriendelijke groet, Mark Tielemans Steegstraat AC Herkenbosch t info@scms.nl Pagina 3

4 Hoofdstuk 1: Inleiding, wat is SCMS? Wat is SCMS? CMS staat voor Content Management System. Dit wil zeggen een systeem waarmee de inhoud (content) van een website makkelijk beheerd kan worden (Management). In de meeste gevallen kan dan een vooraf afgeschermd stuk binnen een webpagina worden aan gepast. U heeft gekozen voor SCMS dat in tegenstelling tot standaard CMS omgevingen, de mogelijkheid brengt om de volledige website aan te kunnen passen en uit te breiden zonder beperkingen. Dit alles op uiterst eenvoudige wijze zelfs zonder enige ervaring op het gebied van website bouw en onderhoud. Aan de andere kant biedt SCMS tevens mogelijkheden om kennis van CSS en scripting, toe te passen. Daarmee is de gekozen naam verklaard: Smart Content Management System. Met SCMS kan men een eigen website opzetten, indelen, voorzien van functionaliteit en vervolgens eenvoudig beheren. Hiermee bedoelen we dus niet alleen het aanpassen van de teksten op de site, maar echt alle onderdelen, beelden, links en functies op elke webpagina. Het is niet meer nodig om te werken met ingewikkelde HTML of andere codes. Met SCMS software wordt dit volledig gevisualiseerd in de zogeheten Graphical User Interface (GUI). In de die u na de registratie van ons hebt ontvangen, zijn de gegevens aan u verstrekt waarmee ingelogd kan worden op het SCMS systeem. Bewaar deze gegevens goed. Indien u niet beschikt over de inloggegevens neem dan contact met ons op via: info@scms.nl of bel: (dagelijks binnen kantooruren) Let op Om SCMS met alle functionaliteit te gebruiken, adviseren wij u om als (eventueel extra) webbrowser Mozilla Firefox te gebruiken. De kosteloze download van deze webbrowser vindt u op: Pagina 4

5 Hoofdstuk 2: Inloggen SCMS Na eenmaal FireFox te hebben gedownload en geïnstalleerd kunnen we gaan beginnen met het inlogscherm. Wanneer de link, zoals vermeld in de door ons verstrekte gegevens, naar het SCMS programma wordt gevolgd, zal het volgende scherm verschijnen. Via de webbrowser (bij voorkeur Firefox ) gaan we inloggen in het SCMS systeem. O E F E N I N G 1 Zorg dat u Firefox hebt opgestart of Internet Explorer. Ga naar (of gebruik de link die u hebt gekregen via uw mail) U krijgt dan het volgende inlogscherm te zien. Vul hier uw Gebruikersnaam en Wachtwoord in. Klik dan op Login. Pagina 5

6 Vervolgens krijgt u de Controlepanel te zien. Een voorbeeld ziet u hieronder. SCMS is nu opgestart en klaar voor gebruik. In de verdere handleiding gaan we er steeds vanuit dat u ingelogd bent. Pagina 6

7 Hoofdstuk 3: Control Panel In dit hoofdstuk gaan we u op weg helpen met de Control Panel. Na de allereerste keer inloggen hebt u alleen een Control Panel voor u en verder een geheel leeg blad. Dit is alles wat u nodig hebt om uw website te gaan opmaken. Hieronder ziet u in één oogopslag welke functies er allemaal zijn. Aan de hand van een aantal opdrachten, gaan we u uitleggen hoe het werkt. Hiermee kunt u de Control Panel verplaatsen. Geeft positie van de muis aan Invoegen van een nieuw item Uitrolmenu met alle gemaakte pagina s Achtergrond bepalen Het toevoegen van een CSS code Toevoegen van HTML code voor in de kop van website. Uitloggen SCMS Bepalen van positie Toevoegen van afbeeldingen Toevoegen van flash animaties Het daadwerkelijk online brengen Handleiding in PDF opvragen 3.1 Basis: Verplaatsing Control Panel Boven aan de Control Panel ziet u aan de linkerkant een blauw kruis met 4 pijlen eraan. Deze dient ervoor om de Control Panel te verplaatsen. Dit zorgt er dan ook voor dat de Control Panel niet in de weg staat. O E F E N I N G 2 Zorg ervoor dat u met uw muis op deze blauwe pijlencombinatie gaat staan. Klik nu uw linkermuisknop in, houd deze ingedrukt en sleep nu de Control Panel naar een ander gedeelte van uw beeldscherm. Laat daar weer los. U hebt zojuist de Control Panel ergens anders neergezet. Pagina 7

8 Positie bepalen (van een item) X, Y, geeft aan in pixels op welke plaats de cursor zich op dat moment begeeft. W, H, geeft in pixels bij items de afmeting ervan aan. O E F E N I N G 3 Beweeg uw muis naar links en u ziet dat de getallen bij X en Y veranderen. U gaat nu een Item toevoegen, zodat u ook kunt zien wat er gebeurt. Klik hiervoor op de tekst New Item van de Control Panel. New Item Er opent zich een nieuw scherm, zoals hieronder wordt weergegeven: Zoals u ziet bestaat de optie New item uit de volgende onderdelen: o Text = Tekstvak o Image = Afbeelding o Flash = Flash-animatie o Page = Een pagina o Form = Formulier o Button = Knop o Home = Terug naar normaal scherm Klik op optie Text U krijgt een klein venster te zien (zoals hieronder) waar u de volgende tekst intypt: test1 en geef een Enter of u klikt op de button met de pijl naar rechts Helemaal links bovenin het hoekje krijgt u een tekstvak te zien. Zie voorbeeld Standaard komt elke nieuw gemaakte tekstvak linksboven te staan. U kunt dit vak oppakken en slepen naar een andere plaats. Doe dat maar eens en merk op dat nu de getallen bij de X en de Y steeds veranderen. Laat nu los op een plaats op uw beeldscherm, dan ziet u ook dat de waarden bij X en Y ingevuld worden. Pagina 8

9 Probeer het vak maar eens op de volgende waarde te zetten: X = 285 / Y = 173. Opmerking: Merk ook op dat de waarde bij W en H op getal 100 staat. Deze waarde betekenen W = Width (breedte) en H = Height (hoogte) U hebt nu net geleerd hoe u een tekstvak moet invoegen. Maak nog een tekstvak aan en noem deze: test2 Zet tekstvak genaamd test2 ergens willekeurig op uw beeldscherm neer. Maak nog een tekstvak aan en noem deze: test3. Verplaats test3 ook naar een andere plaats op uw beeldscherm. Opmerking: U heeft nu 3 tekstvakken. Wanneer u op 1 van die vakken klikt, ziet u meteen dat het vak geselecteerd is en dit wordt door middel van een gele kleur aangegeven. De andere zijn dan groen. Wat u verder ermee gaat doen, leert u verder op in deze handleiding. Align U heeft nu gezien dat u zelf een tekstvak kunt verplaatsen op uw beeldscherm, naar de positie die u wenst. U heeft ook gezien dat de getallen van de X- en Y-as zelf worden ingevuld. Ook de Hoogte en de breedte van het tekstvak wordt voor u als standaard opgemaakt. Maar u kunt ook exact bepalen waar u het tekstvak wilt laten uitlijnen. Dat doet u aan de hand van de optie Align. O E F E N I N G 4 Voordat u met de mogelijkheden van align gaat werken, gaat u eerst een tekstvak een kleur geven, zodat u het resultaat daarna beter te zien krijgt. Ga met uw muis in het eerst gemaakte tekstvak staan en klik vervolgens op uw rechtermuisknop. U krijgt een menu te zien, waarmee u dit tekstvak kunt bewerken. Het menu ziet er als volgt uit: Pagina 9

10 U heeft de keuze uit: o Edit text o Edit text (black background) o Background image o Background color o Clear background o Visible o Clipped o Border color o Item naar voorgrond plaatsen o Item naar achtergrond plaatsen o Sluiten (zonder wijzigingen) Klik op de optie Background Color. U krijgt het volgende venster te zien Klik op een willekeurige kleur groen. Meteen veranderd het menu in die kleur en wanneer u er tevreden mee bent, klikt u rechtsonder aan van dit venster op de knop OK. U ziet nu dat uw tekstvak een achtergrondkleur heeft gekregen. Doe dit nu ook voor de andere 2 tekstvakken. Om u een beeld te geven wat de Uitlijning doet op een webpagina heeft u nu 3 gekleurde vakken op een willekeurige positie neergezet. Met de optie Align kunt u zien wat er gebeurt. Klik achter de tekst Align op het driehoekje, zodat deze uitrolt. U kunt de keuze maken uit: o Fixed position o Horizontal o Horizontal & Vertical o Horizontal on Bottom Pagina 10

11 Klik op optie fixed position. U zult nu in het gewone werkscherm nog niets zien. Daarvoor gaat u het Live brengen en kunt u het resultaat bekijken als het online weergegeven zou worden. Klik hiervoor in de Control Panel op Live. Er opent zich een nieuw tabblad met uw resultaat, zie voorbeeld hieronder. Bekijk goed waar de tekstvakken nu staan gepositioneerd. Klik vervolgens op het tabblad SCMS om terug te keren naar uw Control Panel. U laat uw vakken staan, maar u veranderd nu de uitlijning naar een andere positie, zijnde: Horizontal. Klik vervolgens weer op de tekst Live. Er opent weer een nieuw tabblad met uw resultaat. Bekijk uw resultaat opnieuw. En u ziet dat de vakken nu anders gepostioneerd zijn. Ga terug naar uw Control Panel en probeer de andere posities nu zelf ook eens uit. Bekijk telkens het resultaat op een nieuw tabblad. Aan de hand van deze opdracht heeft u gezien hoe en waar uw webpagina lay-out gepositioneerd kan worden op uw beeldscherm. In het volgende hoofdstuk gaat u leren om een webpagina toe te voegen. Pagina 11

12 Hoofdstuk 4: Web Pagina aanmaken Voordat u een website gaat maken, is het belangrijk om eerst een lijstje te maken met een aantal punten. Waar wilt u uw bezoekers mee informeren? Het is natuurlijk afhankelijk van uw bedrijf, maar om u een idee te geven volgt hier een voorbeeld van een aantal punten waarvan u uw bezoeker kan informeren: Een welkomstpagina (index genoemd) Algemeen of informatie over het bedrijf Producten (als het gaat om verkoop) Locatie Contactgegevens Wilt u meer weten over hoe u dit het beste kunt opzetten, dan kunt altijd nog een extra training volgen bij ICT2MKB. Wij hebben de specialisten voor u, die u hierbij volledig kunnen helpen. Uitgaande van dat u al enige inzicht heeft in het opzetten van een website, kunt u met deze handleiding verder. Nieuwe pagina aanmaken In dit hoofdstuk wordt beschreven hoe er een nieuwe pagina aan uw project wordt toegevoegd. Standaard begint u met een pagina dat al is aangemaakt met de naam: index. Zodra men het URL-adres intypt in een webbrowser (bijvoorbeeld: dan gaat men meteen naar de indexpagina toe. Het bouwen van een website begint dus altijd met een indexpagina. O E F E N I N G 5 Klik in de Control Panel op het pijltje achter Page: Het uitrolmenu laat zien dat er al een indexpagina aanwezig is. Daar staat u op dit moment op. Verder kunt u een nieuwe pagina aanmaken. Klik in het uitrolmenu op de tekst <new page>. U ziet dat de tekst achter de optie Page veranderd is in de tekst: Enter here new page name. Klik op deze tekst en u kunt hier een naam in gaan typen. Vul hier de volgende naam in: Algemeen en geef direct daarna een Enter. U heeft zojuist een nieuwe lege pagina aangemaakt. Deze pagina heet Algemeen. U kunt dit terugzien in het uitrolmenu van Page. Klik maar eens op het uitrolmenu-knop achter de tekst Page en u ziet uw resultaat erbij staan. In het voorbeeld hier rechts ziet u dat het uitrolmenu uit de volgende opties bestaan: o Algemeen o Index o Karate o <new page> o <delete this page> Pagina 12

13 Verwijderen van een pagina U kunt een zojuist aangemaakte pagina, waar nog niks opstaat, ook meteen weer verwijderen. Mocht u al bezig zijn geweest op een pagina en er staan items op, dan kunt u niet zomaar de pagina inclusief die items verwijderen. U moet er dan eerst voor zorgen dat de gehele pagina leeg is, zodat deze geen items meer bevat. Pas dan kunt u verwijderen. O E F E N I N G 6 U gaat eerst nog een nieuwe pagina aanmaken. Klik in de Control Panel op het pijltje achter de optie Page. In het uitrolmenu klikt u op <new page>. Klik weer op de tekst Enter here new page name en typ de volgende tekst: testpagina geef daarbij een Enter ter bevestiging. Wanneer u deze testpagina direct zou willen verwijderen, klikt u weer op het uitrolmenu van Page In het uitrolmenu klikt u dan op de optie <delete this page> Uw pagina genaamd testpagina is momenteel verwijderd. Ter controle kunt u even op het uitrolmenu klikken van Page en dan zult u uw resultaat zien. Verwijder de pagina en klik op deze tekst. Opmerking: Merk op zodra u een nieuwe pagina hebt aangemaakt en er staat nog niks op vermeld, dus blanco, dan is de optie <delete this page> ook zichtbaar. Op andere pagina s waar u al informatie op hebt gemaakt is deze optie dus niet zichtbaar. Pagina 13

14 De eerste beginselen om met de Control Panel te kunnen werken, heeft u in de voorgaande lessen bekeken en uitgeprobeerd. Om een website zelf te maken is enige creativiteit en inzicht een belangrijk punt. En omdat niet iedereen zoveel creativiteit heeft om zelf een lay-out in elkaar te zetten, gaan we in deze handleiding werken met een voorbeeld, zodat u een goed beeld krijgt van hoe u iets kunt maken. Via deze methode komt u erachter en brengen we u misschien op meer ideeën. Om u een goed beeld te kunnen geven, gebruiken we een voorbeeld pagina, zoals hieronder wordt getoond. Aan het eind van deze handleiding kunt u ook zo n soortgelijke pagina maken. Pagina 14

15 Het maken van een webpagina aan de hand van het voorbeeld. Start aanmaken nieuwe pagina We gaan volledig beginnen met een lege pagina. Deze opdracht heeft u al gehad (zie opdracht 5) maar we zullen het hier nogmaals herhalen. O E F E N I N G 7 U gaat eerst nog een nieuwe pagina aanmaken. Klik in de control Panel achter de optie Page op het uitrolmenu en klik op de tekst <new page> Vervolgens moet u een naam geven aan deze pagina, we noemen deze pagina welkomstpagina en geef weer een Enter ter bevestiging. Er wordt weer een lege pagina aangemaakt. Enige voorbereiding is al gedaan, om deze layout te kunnen maken. U kunt dan ook de bestanden hier downloaden en opslaan op uw computer in een map. De bestanden kunnen dan gebruikt worden om deze lay-out in elkaar te zetten. U mag natuurlijk ook zelf meteen beginnen met een eigen ontwerp, als u dat prettiger vindt. Pagina 15

16 Hoofdstuk 5: Pagina achtergrond aanmaken Background betekent achtergrond. In deze software wordt bedoeld dat u een achtergrondkleur of een afbeelding als achtergrond kunt toevoegen. Er zijn een aantal verschillende items waar een Background kan worden toegevoegd. 5.1 Algemene pagina achtergrond Een algemene pagina achtergrond, kunt u instellen. In dit voorbeeld gebruikt u een lichte gele kleur als achtergrond. Deze moet niet overheersend zijn op de rest van de pagina. Tenslotte willen we niet dat de bezoekers naar uw achtergrond worden afgeleid maar naar u informatie. O E F E N I N G 8 Klik in de Control Panel op de optie Background. Opmerking: U kunt zowel op de tekst als op het icoontje voor de tekst van background klikken. Het volgende kleurenpalet van Background verschijnt: Door aan de linkerkant op één van de kleuren te klikken, wordt er meteen een achtergrondkleur ingevoegd. Dit is de meest simpele manier van een kleur invoegen. In dit voorbeeld hanteren we een simpele lichte achtergrondkleur. Klik hiervoor bijvoorbeeld op de laatste rij op het 3 e vak en u ziet dat u een lichte achtergrond kleur krijgt. Klik vervolgens op de knop OK. U ziet nu dat uw webpagina een lichte gele kleur heeft gekregen. Wat de overige mogelijkheden van dit venster is, wordt hieronder uitgelegd. Kleurenpalet: Aan de linkerkant staan een aantal kleuren. Zodra u op 1 van deze kleuren klikt, verandert de kleur van de achtergrond van uw huidige pagina. Probeer het maar eens uit. Pagina 16

17 RGB schuifbalken: Door de RGB-balken te gebruiken, kunt u tot exact de gewenste kleur komen. Zo kan het zijn dat aan de linkerkant uw gewenste kleur er niet bij staat. U kunt dan toch een kleur aanklikken aan de linkerkant en vervolgens met de schuifbalken van RGB schuiven net zo lang totdat uw gewenste kleur te zien krijgt. Door de blokjes in de schuifbalk van R,G en de B-lijn te verplaatsen, verandert meteen de kleur. Verder is het ook mogelijk om de hexadecimale kleurcodes in te voeren. Bent u bekend met grafische programma s dan weet u hoe deze methode verder werkt. Gaat u uit van de standaard kleuren, dan hoeft u hiermee verder nog niks te doen. O E F E N I N G 9 U gaat starten met een simpele achtergrond kleur. U klikt aan de linkerkant in de kleurenpalet op de bijvoorbeeld blauw. Nu gaat u met de schuifbalken rechts daarvan werken. U ziet 3 schuifbalken zijnde: o R = Rood o G = Groen o B = Blauw Schuif maar eens één van die schuifregelaars naar links of rechts, meteen ziet u dat de achtergrondkleur wordt aangepast. Zo kunt u een beetje met de schuifregelaars spelen om te kijken welke kleuren er allemaal mogelijk zijn. schuifregelaars Kies een bepaalde kleur en laat deze zo ingesteld staan. Vervolgens klikt u op de knop OK ter bevestiging. Het venster van background sluit en u komt terug op uw pagina. Pagina 17

18 Achtergrond afbeelding: Stel u had toch liever een patroontje willen hebben als achtergrond. Het instellen van een afbeelding als achtergrond is mogelijk, maar maak het niet te druk. O E F E N I N G 1 0 We gaan u toch een voorbeeld geven hoe dat er uit zou komen te zien. Klik in de Control Panel op de optie Background. Klik vervolgens op de optie Page Background. U komt nu voor het eerst in een scherm terecht waar u alle afbeeldingen kunt bewaren. Eerst zult u afbeeldingen moeten uploaden, pas daarna kunt u ze gaan gebruiken. Bij deze handleiding hebt u de mogelijkheid om een aantal voorbeelden te downloaden en dat is al eerder in deze handleiding aangegeven. U hebt dan ook de voorbeelden op uw computer in een aparte map bewaard. Het is belangrijk dat u ook de afbeeldingen geordend houdt. Daarom zorgt u er eerst voor dat u een map gaat aanmaken, waar u de afbeeldingen in kunt bewaren. Heeft u met meerdere onderdelen op uw website te maken, dan zou u ervoor kunnen kiezen om ook een aantal mappen aan te maken voor de verschillende afbeeldingen. Pagina 18

19 Klik in het linker gedeelte in het vak met de tekst new folder. Typ nu de tekst: voorbeeldlayout. En geef daarna een Enter Klik dan op de zojuist aangemaakte map en de map wordt geopend. Deze is nog leeg, maar die gaat u gebruiken om nieuwe afbeeldingen in te bewaren. U gaat nu een afbeelding opzoeken op uw computer en daarna gaat u deze uploaden. Klik aan de rechterkant van uw scherm op de knop bladeren. Klik hier om een nieuwe map aan te maken. Bladeren en uw afbeelding opzoeken U zoekt de volgende afbeelding op: Patroon1.png. Patroon1.png Zodra u deze afbeelding hebt gevonden klikt u op de tekst en vervolgens komt deze in het vak aan de linkerkant van de knop bladeren te staan. Zodra u dat hebt klikt u op de knop Upload. Nu wordt uw afbeelding geupload naar de server, zodat deze weer gebruikt kan worden in uw website. U ziet ook meteen in het grote gedeelte uw patroon staan. Nu klikt u 1 keer op de afbeelding en dan wordt deze nu geladen en als achtergrond weergegeven. U ziet meteen het resultaat. Herhaal deze opdracht en haal de volgende patronen op: patroon2.png en patroon3.png. Probeer nu zelf eens deze patronen als achtergrond weer te geven op uw webpagina. U ziet ook dat het heel belangrijk is dat u een patroon best kunt doen, maar dan moet het ook niet al te veel aanwezig zijn. U kunt zelf patronen maken in een fotobewerkingsprogramma. Maak deze bestanden niet te groot, want de afbeelding wordt toch herhaalt net zolang totdat het beeld vullend is. Pagina 19

20 Items background: Met dit gedeelte is de bedoeling eigenlijk dat de zogeheten Body van de website (dus alle achtergrond vormen en kleuren) als één geheel een plaatje vormen waar alles op komt te staan. Deze extra achtergrond is pas zichtbaar wanneer er een item op staat. De weergave van deze achtergrond wordt door middel van het item rechts onder uitgelijnd afgebeeld. Haal het Background -venster voor u. Kies hier dan voor de optie Items background. Het afbeeldingenscherm verschijnt weer. Het kiezen van een afbeelding gaat volgens de op de vorige pagina beschreven- gebruikelijke methode. Deze Item- -of Body- background wordt over de Page background geplaatst. Pagina 20

21 5.2 Achtergronden weghalen Om een achtergrond weg te halen, zijn er verschillende manieren. O E F E N I N G 1 1 Een Page background verwijderen: Klik in de Control Panel op de optie Background. Klik vervolgens op de tekst of icoon: Page background. u komt in het scherm van de afbeeldingen. Dit is hetzelfde venster waar u kiest voor u achtergrond. Hier klikt u vervolgens op de knop: No Image. No image = achtergrond verwijderen. Uw achtergrond afbeelding is nu verdwenen. Achtergrondkleur verwijderen: Zorg dat u de optie Background weer voor u hebt. In het venster ziet u de optie Clear staan. Klik op deze tekst en uw achtergrondkleur wordt verwijderd. Vervolgens klikt u op de knop OK. Item background verwijderen. Zorg dat u de optie Background weer voor u hebt Kies in het venster voor Item background. Nu komt u opnieuw in het venster van de afbeeldingen. Dit is hetzelfde venster waar u kiest voor u achtergrond. Klik dan voor de optie No image bovenaan in beeld. No image = item achtergrond verwijderen. Uw items background is weer verdwenen. Pagina 21

22 Hoofdstuk 6: Items toevoegen en aanpassen In dit hoofdstuk van de handleiding wordt het onderdeel items behandeld., met de nadruk op het toevoegen en het aanpassen van de items. Items kunt u herkennen aan de gestippelde lijn om een vak. Alles wat dus omgeven is door een gestippelde lijn noemen we een item. 6.1 Items Items kunnen over elkaar heen worden geplaatst. Mocht het zo zijn dat 2 of meerdere items over elkaar staan geplaatst, wordt dit aangegeven in de linkerbovenhoek van een item. Deze zullen in plaats van de normale groene kleur, een rode kleur hebben. Nadat we een achtergrondkleur hebben toegevoegd, gaan we een paar items invoegen en bekijken hoe we de items makkelijk over elkaar heen kunnen zetten. O E F E N I N G 1 2 Zorg ervoor dat u op de juiste pagina staat zijnde: Welkomstpagina. Eerst gaat u de achtergrondkleur zetten op de volgende kleurencode: #FFFF99. Klik vervolgens in de Control Panel op de optie New item In het venster dat verschijnt, klikt u meteen op de optie Image. In het kleine venster dat dan verschijnt typt u de volgende tekst: KOP Geef een Enter of klik op de knop met de pijl die naar rechts wijst achter het vak waar u zojuist een tekst hebt getypt. U komt dan meteen in het gedeelte waar u de afbeeldingen worden bewaard. Voordat u deze gaat opzoeken op uw eigen locatie, moet u er ook voor zorgen dat u aan de linkerkant de afbeeldingen in de juiste map gaat plaatsen. U klikt dan ook op de map met de tekst: voorbeeldlayout. Klik vervolgens op de knop Bladeren. En zoek uw afbeelding op en selecteer deze dan ook. Pagina 22

23 Na het selecteren van de afbeelding op uw locatie gaat u verder om deze afbeelding te uploaden en u klikt hiervoor dan op de knop Upload. Na het uploaden, wordt de afbeelding zichtbaar en klikt u op de zojuist geuploade afbeelding. Deze wordt nu ingevoegd op uw pagina. U hebt dan ongeveer het volgende voorbeeld: Stel u hebt nog een afbeelding in de vorm van uw eigen logo, dan zou u dat ook kunnen toevoegen aan deze kop. Klik weer op de tekst New Item van de Control Panel. Klik vervolgens weer op de item Image. Geeft een naam aan deze afbeelding bijvoorbeeld de tekst: logo. Geef een Enter of klik op de knop die daar rechts staat van dat venster. U komt weer in het scherm terecht waar u opnieuw een afbeelding kunt invoegen. Klik op de knop Bladeren en zoek de afbeelding op met de tekst: logo.png. Klik op de knop Upload en uw afbeelding wordt weer geupload. Klik dan op uw afbeelding wanneer deze zichtbaar is geworden. Nu wordt de afbeelding toegevoegd aan uw pagina. Zet deze op de positie in de kop en u ziet nu meteen dat het mogelijk is om over een andere afbeelding heen een nieuwe afbeelding te zetten. Opmerking: U ziet ook dat het vak kop rood is en het vak logo de oranje kleur heeft. Hiermee wordt aangegeven dat ze over elkaar heen vallen. En de oranje kleur geeft ook aan dat u op dit moment de item logo heeft geselecteerd Pagina 23

24 6.2 Lagenindex In het systeem wordt dus met de zogeheten lagen gewerkt. Dat betekent dat elke nieuwe item weer boven op een item kan komen te liggen. Elke item wordt in een aparte laag verwerkt. U hebt dan ook op 1 pagina met diversen lagen te maken, die telkens boven op elkaar liggen. Dat kan zichtbaar zijn maar dat hoeft niet altijd zichtbaar te wezen. U merkt het eigenlijk pas op wanneer u meerdere items op elkaar legt. O E F E N I N G 1 3 U gaat het structuur van de lagen eens bekijken, schuif daarvoor het item met het logo maar eens een stukje naar links. Zet deze halverwege op de kop en halverwege naast de kop. Ga met uw muisaanwijzer op de afbeelding van logo staan en klik vervolgens op de rechtermuisknop. U krijgt het volgende venster te zien: Naast het simpel toevoegen van een afbeelding heeft u nog meer mogelijkheden om de afbeelding uit te breiden tot bijvoorbeeld een link. Maar zover zijn we nog niet en u bekijkt dan ook in dit gedeelte het onderdeel Lagen. Deze vindt u dan ook rechtsboven in van dit venster (links van het rode kruisteken). Pagina 24 Klik hier om item naar achtergrond te brengen. Klik hier om item naar voorgrond te brengen.

25 Klik op de optie set item to background. En u ziet dan deels van uw afbeeldingslogo naar achteren is verplaatst. Deze optie kunt u gebruiken als u heel snel een item snel naar achteren wilt verplaatsen. Maar u wilt ervoor kiezen dat u deze itemlaag niet helemaal naar achteren wilt verplaatsen maar 1 laagje naar voren wilt halen. Dan is dat ook mogelijk om dit op deze manier te doen. Klikt u nu op de afbeeldingslogo met uw rechtermuisknop. Klik vervolgens op de optie set item to foreground. Dan wordt nu de afbeeldingslogo met 1 stapslaag naar voren gehaald. Op dit moment ziet u daar niet zoveel verschil in, maar wanneer u straks verder bent zult u het gaan opmerken dat er meerdere stapslagen zijn waarmee u kunt spelen. Zet uw afbeeldingslogo weer terug op de goede plaats. U gaat nu een tekst item toevoegen en dit wordt dan uw 3 e laag. Klik van de Control Panel op de optie New Item. In het venster dat verschijnt klikt u op de optie Text. In het venster dat wordt weergegeven geeft u de naam aan deze textlaag: slogan. Geef een Enter of klik op de knop om te bevestigen. Er wordt nu links boven in het hoekje een nieuwe item toegevoegd met de tekst slogan. U gaat dit item zetten ook in de kop maar nu een beetje aan de rechterkant ervan. Dit vak wordt aangemaakt met een standaardwaarde zijnde 100 x 100. U gaat de afmeting veranderen naar 160 x 50. Het aanpassen van deze waarde doet u als volgt. Klik op de tekstitem. Vervolgens houdt u de shift-toets ingedrukt en u drukt op uw linkermuisknop en sleep nu de muis een beetje naar rechts en naar boven. U ziet nu dat het vak makkelijk aan te passen is. Maak zelf de grootte van het vak en probeer dit op 160 x 50 zetten. Opmerking: wanneer u het vak bijna op de juiste afmeting hebt staan en het met de muis niet wilt lukken om exact hetzelfde formaat te krijgen, kunt u dit ook verder makkelijk aanpassen met behulp van de Shift-toets en de pijltjestoetsen. Probeer het maar eens uit. Terwijl u deze toetscombinaties gebruikt ziet u dat de waarde in de Control Panel ook wordt aangepast. Dit is ideaal als u een exacte waarde wilt hebben. Er staat nog geen tekst in het vak, dat gaat u nu doen. Terwijl uw muisaanwijzer in het tekstvak staat, klikt u op uw rechtermuisknop en u krijgt een venster te zien waar u weer een hoop mee kunt doen. Pagina 25

26 Voor dit onderdeel gebruikt u de bovenste optie zijnde Edit text. Klik op deze tekst om verder te gaan met het toevoegen van tekst. Er opent zich weer een nieuw onderdeel waar u de tekst in kunt gaan typen en ook de opmaak van de tekst kunt aanpassen. Het venster dat nu wordt getoond bij deze optie ziet er als volgt uit: U ziet ook dat het tekst vak nu wit is geworden. U moet hier eerst in klikken met uw muis, anders kunt u niet bij de opmaak van het menu dat hierbij hoort. Klik in het tekst vak en typ de volgende tekst: Hier komt mijn slogan. Ook de opmaak voor tekst is een standaardopmaak. Als u de tekst wat groter zou willen dan kunt u nu in dit onderdeel de opmaak aanpassen naar uw eigen wensen. Wanneer u uw getypte tekst wilt aanpassen aan een andere opmaak, zorg er dan voor dat u eerst de gehele tekst (of een deel ervan) selecteert. Selecteer uw tekst. Klik op Font Size en geef het de puntgrootte: 14. Klik op Font Family en geef het de volgende lettertype: Impact. U gaat deze instelling opslaan, door op het icoontje met de afbeelding van een diskette te klikken, worden uw wijzigingen opgeslagen. Klik hierop om het te bewaren. U heeft niet aan de tekstkleur gewerkt, dus komt het automatisch in het zwart te staan. Wilt u dit aanpassen naar bijvoorbeeld een witte kleur of andere kleur dan gaat u dat alsnog doen. Zorg ervoor dat u weer in hetzelfde tekstvak staat en klik op uw rechtermuisknop. In het menu klikt u dan weet op de optie Edit Text. Nu u weer terug bent in het tekstgedeelte, selecteert u eerst weer de gehele tekst. Nu kunt u onderaan van de opmaakmenu op het icoontje van de kleurenpalet klikken en de kleur wit selecteren. Opmerking: Mocht u per ongeluk net buiten het tekst vak klikken, wanneer u in de tekstopmaak menu zit, dan wordt uw handeling geannuleerd en wordt het tekstopmaak menu gesloten. U moet dan weer opnieuw beginnen om bij de tekst te komen. Pagina 26

27 6.2 Meerdere items tegelijk verplaatsen Het is ook mogelijk om meerdere items tegelijk te verplaatsen. Stel u wilt toch liever met uw lay-out iets meer naar links toe opschuiven. Mocht u nou al een aantal items hebben toegevoegd, dan zou u de items één voor één kunnen opschuiven. Het is dan ook veel prettiger als dit sneller kan verlopen. O E F E N I N G 1 4 U gaat de gehele lay-out die u tot nu toe hebt gemaakt een stuk naar links opschuiven. Selecteer altijd 1 item als eerste. U selecteert in dit geval item kop. Vervolgens drukt u nu van uw toetsenbord de toets CTRL in en houd deze ingedrukt. Dan klikt u 1 voor 1 alle overige items aan met de CTRL ingedrukt. Als u alle items hebt gehad mag u de CTRL-toets weer loslaten. U hebt nu een selectie van meerdere items tegelijk gemaakt. En u kunt dan ook zien dat alle items de kleur oranje hebben. U gaat nu in de selectie staan en vervolgens klikt u op de linkermuisknop en houd deze ingedrukt en u sleept zo de selectie naar bijvoorbeeld links. Vervolgens laat u weer los als u de gewenste positie heeft bereikt. Opmerking: Om preciezer de items te verplaatsen, kunt u gebruik maken van de pijltjestoetsen op het toetsenbord. Probeer dat maar eens uit en beweeg naar een willekeurig richting en u ziet dat de gehele selectie beetje bij beetje verplaatst. Op deze manier is het mogelijk om de items te verplaatsen pixel voor pixel. Wanneer het dan naar wenst goed staat, klikt u vervolgens op 1 item om de gehele selectie op te heffen. 6.3 Items toevoegen en verwijderen U zult tijdens het maken van uw lay-out wel eens een item te veel hebben aangemaakt, of een item gewoon niet meer nodig hebben. Deze items kunt u dan het beste verwijderen. O E F E N I N G 1 5 U gaat eerst een item aanmaken bijvoorbeeld een tekstitem. Maak een tekst item aan zoals u geleerd hebt. Geef het bijvoorbeeld de naam: extra tekstvak. Geef een Enter om het te bevestigen. Uw tekstvak is ingevoegd en staat weer links boven aan. Zet deze op een willekeurige plaats op uw beeldscherm. Pagina 27

28 Probeer nu zelf een tekst in dit vak te krijgen, met de middelen die u net hebt geleerd. Voorzie uw tekst van een andere opmaak. Vul dit naar eigen wens in. Bewaar uw gemaakte tekstopmaak. Maar nog een tekstvak. Geef het nog een naam en vul zelf een naam in. Vervolgens geeft u weer een Enter ter bevestiging. Ook hier mag u weer naar eigen wensen een tekst invullen. Voor zie uw tekst van een andere opmaak. Geef de tekst een andere kleur. En zet het tekstvak op een willekeurige plaats neer. U heeft nu 2 vakken zelf gemaakt. Stel u wilt 1 tekstvak verwijderen. Dan klikt u allereerst op dat tekstvak. Vervolgens drukt u op de DELETE-toets Er komt een klein schermpje met de vraag of u het geselecteerde item wilt verwijderen. Zoals hieronder wordt weergegeven: Druk van uw toetsenbord de Y in en het geselecteerde item wordt verwijderd. Maar u mag natuurlijk ook met de muis in dit venster de Y aanklikken. Probeer beide opties uit, wanneer u een item wilt verwijderen. 6.4 Items kopiëren en verwijderen Als u weer iets verder bent en handiger wordt in het systeem is het vaak ook gebruikelijk dat u meerdere items die dezelfde opmaak bijvoorbeeld hebben te kopiëren. Dit werkt ook sneller. Zo kunt u elk item makkelijk kopiëren. O E F E N I N G 1 6 Als het goed is hebt u nog een tekst item waar u zelf tekst aan hebt toegevoegd. Ook de opmaak heeft u zelf bepaalt. Mocht dat niet meer het geval zijn, maak dan even een nieuw tekstvak aan om hiermee deze opdracht te kunnen maken. Wanneer u dan een tekstvak hebt en deze is ook voorzien van een gewenste opmaak, dan zorgt u ervoor dat u dit item selecteert. Vervolgens gebruikt u de toetscombinatie CTRL +C En nu kunt u meteen de toetscombinatie CTRL+V gebruiken om te kopiëren. Pagina 28

29 U ziet nu dat er een tekstvak is gekopieerd. Deze heeft dezelfde naam gekregen als van het waarvan u de kopie hebt gemaakt en er staat een 2 achter. Hieraan kunt u zien dat het een kopie is van.. Drukt u nog eens op de toetscombinatie CTRL+V. Nu krijgt u nog een kopie maar nu met het cijfer 3 erachter. Zet de zojuist aangemaakte kopie tekstvak op een andere plaats. Drukt u nog eens op CTRL+V. En weer komt er een tekst vak bij. Opmerking: Onthoud deze handeling goed, dit kan u straks goed helpen wanneer u meerdere pagina s hebt en u wilt op een andere pagina een tekstvak ook gebruiken. Dan kunt u met deze handeling snel een tekstvak kopiëren en toevoegen aan een pagina. U hebt zojuist geleerd hoe u items makkelijk kunt kopiëren. U kunt weet ook inmiddels hoe u een item kunt verwijderen. Maar het is ook mogelijk om meerdere items tegelijk te verwijderen. Klik 1 item aan dat u wenst te verwijderen. Vervolgens drukt u op de CTRL-toets en houd deze ingedrukt. Klik dan op de volgende item die ook verwijderd mag worden. Klik nog een item aan dat weg mag. Doe dit net zo lang totdat u alle items hebt aangeklikt die verwijderd mogen worden. (Als u maar de kop, logo en slogan behoudt). Laat nu de CTRL-toets los en druk vervolgens op de DELETE-toets. U krijgt de vraag of u de geselecteerde items wilt verwijderen. Druk op de Y-toets en de items worden verwijderd. Opmerking: U hebt zojuist geleerd dat u meerdere items tegelijk kunt verwijderen met gebruik van de CTRL-toets. Met de CTRL-toets kunt u dan ook meerdere items tegelijk kopiëren als u dat wenst. Pagina 29

30 Hoofdstuk 7: Text-item aanmaken In het vorige hoofdstuk hebt u gezien hoe u kunt werken met items en wat de mogelijkheden daarbij zijn. In dit hoofdstuk gaan we dieper in op het gebruik van een tekst-item en wordt er uitgelegd hoe u kunt werken met de mogelijkheden die bij het text-item horen. 7.1 De mogelijkheden van een text-item U heeft al eerder gezien dat er meerdere mogelijkheden zijn bij het onderdeel van het toevoegen van een text-item. De volgende onderdelen krijgt u te zien: - Edit text - Edit text (black background) - Background image - Background color - Clear background - Visible - Clipped - Border color - Pixelgrootte Edit text / Edit text black background Met deze 2 opties kunt u tekst toevoegen. De eerste methode die heeft u al geleerd en daarmee heeft u al een stukje tekst toegevoegd. De tweede methode is bijna hetzelfde als de eerste, alleen hebt u een zwarte achtergrond tijdens het typen van uw tekst in dit vak. Dit kan handig zijn als u een tekstvak wilt toevoegen waarvan de tekstkleur ook wit moet zijn. Bij de eerste methode ziet u uw witte tekst niet omdat de achtergrond daar ook al wit is, gebruik dan de tweede optie waarvan de achtergrond tijdelijk zwart is en zo kunt u uw tekst zien. O E F E N I N G 1 7 Voeg een text-item toe. Geef het de naam: tekstvakwit. Geef Enter ter bevestiging. U hebt zojuist een tekstvak erbij gekregen. Zet het tekstvak wat midden op uw beeldscherm. Klik in dat vak op uw rechtermuisknop en klik op Edit text. Typ de volgende tekst: Dit is een test om te kijken wat het doet met de witte tekst. Selecteer de tekst. Geef het de kleur: Wit U ziet vervolgens uw tekst niet meer staan. Toch staat deze tekst er wel. Save uw tekst maar eens. Pagina 30

31 U gaat nu nog een tekst-item toevoegen. Geef het de naam: tekstvakwit2. Zet uw zojuist gemaakte tekstvak weer een beetje meer in het midden. Blijf met uw muis in dit vak staan en klik vervolgens op uw rechtermuisknop. Klik nu op de tweede methode zijnde Edit text (black background). U ziet nu dat uw vak zwart wordt weergegeven. Klik in het zwarte vak en typ de volgende tekst: Dit is een test om te kijken hoe mijn tekst wordt weergegeven in dit vak. U ziet uw tekst niet als u typt. Niet handig, daarom kunt u beter uw tekst helemaal selecteren en vervolgens de kleur zetten op bijvoorbeeld Wit. Wanneer u de kleur op Wit hebt gezet, ziet u uw tekst en kunt u verder typen. U gaat dit vak ook weer bewaren en u klikt op het icoontje Save this content. U ziet nu dat de zwarte achtergrond weg is en dat uw tekst wit is. Pas de grootte van het tekstvak eventueel aan als u uw tekst niet helemaal volledig ziet. Background image Background image geeft de mogelijkheid om aan de gehele tekstvak een achtergrondafbeelding te plaatsen. O E F E N I N G 1 8 Kopieer een reeds gemaakte tekstvak. De gekopieerde tekstvak gaat u voorzien van een achtergrondafbeelding. U klikt dus in de tekstvak op uw rechtermuisknop. In het snelmenu klikt u op de optie Background image. U komt eerst weer in het scherm te recht met alle geuploade afbeeldingen, maar u gaat een nieuwe afbeelding ophalen. Klik hiervoor eerst op de knop Bladeren. Zoek de volgende afbeelding op: patroon1.png. Upload deze afbeelding. Daarna klikt u op de afbeelding patroon1.png en uw achtergrond is opgevuld met patroon1. Background color Background color geeft de mogelijkheid om aan de gehele tekstvak een effen achtergrondkleur toe te voegen. O E F E N I N G 1 9 Kopieer een reeds gemaakte tekstvak. De gekopieerde tekstvak gaat u voorzien van een achtergrondkleur. U klikt dus in de tekstvak op uw rechtermuisknop. In het snelmenu klikt up de optie Background color. Pagina 31

32 U krijgt nu het venster te zien met de kleurenpalet. U kiest hier een gewenste kleur uit. Klik vervolgens op de knop OK. En uw achtergrond van het tekstvak is gevuld met die kleur. Clear background Met de optie Clear background kunt u de gemaakte handeling voor een achtergrondkleur of een achtergrondafbeelding laten verwijderen. O E F E N I N G 2 0 Ga op één van de tekstvakken staan, die een achtergrond bevat. Klik vervolgens op uw rechtermuisknop om in het snelmenu te komen. U klikt dan op de optie Clear background. Uw achtergrondkleur of -afbeelding wordt verwijderd. Visible en Clipped Met de optie visible kunt u aangeven of u de tekst zichtbaar wilt op de pagina of dat u dit onzichtbaar wilt maken. O E F E N I N G 2 1 Ga met uw muis op een tekstvak staan die u nog over hebt. Klik vervolgens op uw rechtermuisknop. Bij de optie die getoond worden, ziet u de optie Visible staan. Achter deze tekst hebt u de mogelijkheid om op het driehoekje te klikken om de uitrolmenu ervan uit te laten rollen. U heeft de keuze uit: o Visible o Hidden Zet u de keuze op door Hidden aan te klikken dan zal dit tekstvak niet zichtbaar zijn wanneer u de pagina online brengt. Wel is deze natuurlijk zichtbaar in het werkgebied waar u nu bent. Pagina 32

33 Naast de optie Visible hebt u ook nog een keuzevak met de volgende mogelijkheden: o Clipped Als u de keuze hierop zet, dan is de tekst in het vak alleen zichtbaar dat binnen het vakgebied valt. Alle tekst erbuiten is niet zichtbaar. In principe is het vak dan te klein voor de hoeveelheid tekst en zult u het vak groter moeten maken. o Srollbars Hiermee voegt u een scrollbar toe. Dat kan verticaal zijn maar ook horizontaal en dit hangt af van hoe groot het tekstvak is met de tekst die u hierin zet. Als de getypte tekst breder is en langer is dan de tekstvak, dan kunt u er scrollbars aan toevoegen, zodat de bezoeker toch uw gehele tekst d.m.v. van deze scrollbars kan lezen. o All Visible Hiermee geeft u aan dat alle tekst zichtbaar moet zijn en het tekstvak zal dan ook aanpassen aan de hoeveelheid tekst die u in zo n vak gaat typen. Clipped Normaal gesproken staat deze standaard ingesteld. U zult dan ook vaak de tekst in zo n vak automatisch groter maken, als u de tekst niet helemaal volledig kunt zien. o Maak een New text item aan. o Geef het een de naam testclipped o Zet het tekstvak een beetje in het midden van uw beeldscherm. o Zorg ervoor dat u weer in het Edit text gedeelte zit. o Vul uw tekstvak met een tekst naar eigen wens. Zorg dat u voldoende tekst hebt staan, zodat het u ook opvalt dat uw tekst buiten het tekstvakgebied loopt. U mag ook tekst vanuit bijvoorbeeld Microsoft Word kopiëren. Zie voorbeeld: o Bewaar de tekst. En u ziet dat uw vak niet automatisch aan uw tekst aanpast. U ziet een deel van de tekst. Om alle tekst toch te laten weergeven, gaat u het tekstvak groter maken, zodat u alle tekst zichtbaar wordt. U past dus het tekstvak aan. Pagina 33

34 Scrollbars Wilt u het tekstvak juist niet groter maken, dan kunt u ervoor kiezen om het tekstvak te voorzien van scrollbars. o Voeg een New text item toe. o Geef het de naam: testscrollbars o Zorg er voor dat u weer in het Edit text gedeelte bent. o Vul het tekstvak weer met redelijk wat tekst, zodat het in ieder geval er deel buiten het tekstvak valt. o Bewaar het vervolgens. o Blijf met uw muis op het tekstvak staan en klik vervolgens op uw rechtermuisknop. o In het snelmenu klikt u op de optie clipped en in het uitrolmenu ervan klikt u de optie scrollbars aan. o U ziet nu dat uw tekstvak een scrollbar heeft gekregen. Deze scrollbar is niet actief in het werkgebied maar wel wanneer u het Live brengt. Zie voorbeeld: o Klik in de Control Panel op de optie Live en bekijk uw resultaat. All visible Wanneer u er liever voor kiest dat de gehele tekst meteen zichtbaar is en dat men niet hoeft te scrollen, kunt u ervoor kiezen om de optie All visible te gebruiken. o Voeg een New text item toe. o Geef het de naam: testallvisible. o Zorg er voor dat u weer in het Edit text gedeelte zit. o Vul het tekstvak weer met tekst naar eigen wens in. o Bewaar het vervolgens. o Blijf weer in het tekstvak staan en klik weer op uw rechtermuisknop. o Klik in het menu weer op de optie clipped en klik in het uitrolmenu op All visible. o Nu ziet u dat uw tekst helemaal wordt weergegeven. Ook ziet u dat het tekstvak (de stippellijn) qua grootte niet veranderd maar uw tekst dat eigenlijk buiten het vak loopt wordt nu wel zichtbaar weergegeven. o Klik maar eens weer op de optie Live en bekijk uw resultaat. Pagina 34

35 7.2 Het bewerken van tekst U bent al werkzaam geweest in het onderdeel Edit text. Hier hebt u kunnen zien dat u de opmaak van uw tekst kunt aanpassen naar uw eigen wensen. U gaat met de volgende opdrachten ook verder werken aan de voorbeeld lay-out om straks een geheel te krijgen. Wij hebben op de zogeheten Welkomstpagina een aantal tekstvakken aangemaakt om een beetje meer vertrouwt te raken met de gereedschappen van het tekst item. Maar de gemaakte tekstvakken gaan we eerst verwijderen om daarna met ons voorbeeld verder te kunnen gaan. O E F E N I N G 2 2 Verwijder alle proef tekstvakken van de voorgaande opdrachten. En zorg ervoor dat u alleen nog maar de kop, logo en slogan hebt staan. En gebruik daarbij de CTRL-toets om sneller meerdere tekstvakken tegelijk te verwijderen. Uw voorbeeld lijkt op het voorbeeld zoals hier wordt weergegeven: Als uw scherm er dan zo uit ziet zoals in dit voorbeeld, gaat u opnieuw een tekst item toevoegen. Maak een New text item aan. Geef het de naam bijvoorbeeld: teksthome Zorg er voor dat u weer in het Edit text gedeelte komt. Vul uw tekstvak met ruim tekst. Zorg er dan voor dat het vak de breedte heeft van 337 en de hoogte heeft van 367. En zet het op de volgende positie neer: X = 553 en Y = 141 Pagina 35

36 U krijgt dan ongeveer de volgende indeling te zien: Maak een kopie van het zojuist aangemaakte tekstvak. En maak het tekstvak de breedte 185 en de hoogte 132 Zorg er voor dat de teveel aan tekst of vervalt of zorg er voor dat u het tekstvak voorziet van een scrollbar. Maak zelf een keuze. Zet het op de volgende positie: X= 438 en Y= 383 Wanneer u het goed hebt gedaan, hebt u ongeveer hetzelfde als het voorbeeld hieronder: Pagina 36

37 Tekstopmaak U heeft nu een aantal tekstvakken aangemaakt en precies op een bepaalde plaats op de webpagina neergezet. Bij de tekstopmaak kunt u o.a. de bekende opmaken gebruiken zoals: Vetgedrukt (Bold) Cursief (Italic) Onderstrepen (Underlined) Links uitlijnen Centreren Rechts uitlijnen Uitvullen Opsommingstekens gebruiken Opsommingscijfers gebruiken Pungrootte (Font Size) Lettertype (Font Family) Stijlen / koptekst (Font Format) Inspringing toevoegen Inspringing verwijderen Deze worden verder niet behandeld omdat dit bij o.a. een basiscursus (training) Word behoort. Bij het volgen van deze handleiding gaan we ervan uit dat u de basis dan ook volledig beheerst. Wij zullen in deze basis handleiding alleen die onderdelen behandelen die van toepassing zijn voor het opzetten van een basis webpagina. De volgende opties die u terug vindt bij Tekstopmaak worden hieronder besproken en verder uitgewerkt: Add Image Koppeling toevoegen Koppeling verwijderen Remove Formatting Pagina 37

38 Add Image U kunt in een tekstvak een afbeelding toevoegen, wanneer u dat wenst. Zo kunt u de tekstvakken wat interessanter maken voor de bezoeker. O E F E N I N G 2 3 U gaat eerst een afbeelding uploaden, zodat het systeem meteen na het invoegen de juiste afbeelding kan vinden. Klik in de Control Panel op Images. In het scherm dat u nu krijgt te zien, gaat u eerst weer de afbeelding opzoeken. Klik op de knop Bladeren. Zoek en selecteer uw afbeelding genaamd: bloem.jpg Klik vervolgens op de knop Upload. Zodra deze zichtbaar is op uw scherm, kunt u op de optie Return klikken, want we hebben de afbeelding nog niet nodig. Klik op de eerste grote tekstvak met uw rechtermuisknop. In het snelmenu klikt u op de optie Edit text. Nu komt u weer in het gedeelte van de tekstopmaak. Belangrijk is wel dat u, wanneer u al tekst hebt staan dat u altijd aangeeft wat u wilt gaan doen. Selecteer dan ook eerst een deel van de tekst. (bijvoorbeeld 1 e alinea). Voorzie deze tekst van een andere opmaak. U kunt dit zelf invullen door bijvoorbeeld vetgedrukte letter, cursief, onderstreping enz. Bepaal hier dan ook zelf hoe de indeling wilt gaan maken. Wanneer u tevreden bent met de opmaak gaat u nu een afbeelding toevoegen. Klik na de eerste alinea, zodat u uw cursor te zien krijgt en geef een extra Enter om meer ruimte te creëren tussen de alinea s. Klik nu op Add Image. U krijgt vervolgens aan de tekstopmaak mogelijkheden een menu waar u alle gegevens omtrent de afbeelding kunt gaan invullen. Achter de optie URL typt u de locatie waar de afbeelding zich bevindt bijvoorbeeld: Bij de optie ALT TEXT typt u een korte omschrijving wat de afbeelding betreft, bijvoorbeeld: Bloem Bij de optie Align daarmee bepaalt u waar u de afbeelding in het tekstvak wilt plaatsen op de lijn (=regel). Keuze Default is standaard, Left of Right. Maak uw keuze. Vervolgens klikt u op Query verzenden. Klik hier om een afbeelding toe te voegen Pagina 38

39 Het extra gedeelte van Add Image gaat meteen weer weg. En u klikt dan ook meteen op het icoontje Save this Content. En u bekijkt uw resultaat. Opmerking: belangrijk om te weten, de locatie van uw afbeelding moet overeenkomen met waar u alle afbeeldingen bewaart. Standaard worden alle afbeeldingen op de locatie IMAGE bewaart. Wanneer u zelf geen onderverdeling in de map IMAGE maakt, dan zullen uw afbeeldingen hier bewaard worden. En dan wordt de locatie dan ook Hebt u wel een onderverdeling gemaakt en zult u achter /image/ de naam van de aangemaakte map moeten opgeven. Bekijk uw resultaat weer online d.m.v. op Live te klikken. Ga daarna weer terug naar het SCMS werkgebied. Koppeling toevoegen (Add link) U kunt in een tekstvak ook verwijzen naar bijvoorbeeld een adres of naar een andere locatie intern of het kan ook een externe link zijn. U gaat in deze opdracht kijken hoe het werkt om een adres te koppelen. O E F E N I N G 2 4 Gaat u weer terug naar Edit text van het eerste grote tekstvak. Voeg aan dit tekstvak een adres toe. Typ bijvoorbeeld: info@computerdocente.nl Vervolgens selecteer u het adres dat u zojuist hebt getypt. Nu klikt u op het icoontje Add Link. Het venster wordt weer langer om de mogelijkheid toe te kunnen passen voor het plaatsen van een link. In het scherm van Add/Edit link typt u achter Name bijvoorbeeld mailto:info@computerdocente.nl Het is wel handig als u hetzelfde typt zoals het ook hoort, want hebt u in 1 tekstvak straks meerdere adressen dan kunt u straks bij het plaatsen van de definitieve link precies zien om welk adres het gaat. U zult het zo te zien krijgen. Bij de optie Title geeft u een naam bijvoorbeeld of stuur uw mail of stuur een mail. Dit mag u zelf invullen. U ziet dan ook wanneer u later op het adres gaat staan dat deze tekst wordt weergegeven. Klik nu op de knop Query verzenden. En uw handelingen worden opgeslagen. Vervolgens klikt u op Save this content. En gaat u nu de echte link plaatsen zodat deze ook daadwerkelijk werkt op uw online pagina. Klik hier om een link toe te voegen Pagina 39

40 Klik maar eens op uw rechtermuisknop en u ziet nu dat het snelmenu ietsjes is uitgebreid met de link toepassing. Klik op de optie <not linked> en in het uitrolmenu dat wordt weergegeven kunt u kiezen of u de link wilt laten wijzen naar een interne link of naar een externe link. Bij deze opdracht gaat u een externe link kiezen. Klik op deze tekst. Er komt in het venster een extra regel erbij. Hier typt dan exact de juiste informatie om de mail straks goed te laten verlopen. In deze opdracht typt u: mailto:info@computerdocente.nl Vervolgens klikt u op de knop die daar rechts van staat om het te bevestigen. U kunt ook nog een keuze maken of u het in This window wilt laten weergeven of dat het in een New window geopend moet worden. Laat de optie This window maar staan. Deze handeling maakt voor deze opdracht niet uit, omdat er toch automatisch u eigen programma geopend zal worden. Wel is de optie New window interessant wanneer u het gebruikt naar een andere link (externe) buiten uw website om, want dan wordt er automatisch een nieuw tabblad geopend met de webpagina naar waar u gelinked hebt. Opmerking: voor het linken naar een andere pagina extern bijvoorbeeld, typt u dan exact de adreskoppeling in en daar moet u dan geen mailto voorzetten. Koppeling verwijderen (Remove link) Wanneer u de gemaakte link ongedaan wilt laten maken, of u wilt later een link verwijderen in een tekstgedeelte dan kunt u de volgende handeling toepassen. O E F E N I N G 2 5 Gaat u weer terug naar Edit text van het eerste grote tekstvak. Selecteer vervolgens de tekst met uw link. Klik op de optie Remove link. Klik even naast de zojuiste verwijderde tekst nu zonder link om te kijken of het systeem het heeft toegepast. Daarna slaat u het weer op en klikt u op Save this content. De link is verwijderd. Klik hier om een link te verwijderen. Pagina 40

41 Hoofdstuk 8: Image item toevoegen In het vorige hoofdstuk hebt u gezien hoe u kunt werken met tekst items en welke mogelijkheden u allemaal heeft om het o.a. te verfraaien. Ook kunt u nu in een stuk tekst een afbeelding toevoegen en een link plaatsen. Daarbij is het ook mogelijk om niet in een tekstvak een afbeelding te plaatsen, maar los daarvan kunt u op elk gewenste positie aan uw pagina afbeeldingen toevoegen. 8.1 Het toevoegen van een Image item als achtergrondvlak Aan onze voorbeeld lay-out gaat u 3 afbeeldingen toevoegen, om de pagina wat meer te verfraaien en wat interessant te laten weergeven. De afbeeldingen kunt u gebruiken die u bij deze handleiding ontvangt, maar het is natuurlijk ook mogelijk om uw eigen afbeeldingen te gebruiken. Het principe werkt hetzelfde. O E F E N I N G 2 6 U start met een afbeelding toe te voegen die hier als achtergrond gedeelte moet gaan weergeven. Dat is het grote witte vlak dat achter de tekst komt te staan. Het toevoegen van een afbeelding wordt een New item en daarvoor klikt u in de Control Panel op de tekst New item. In het venster dat verschijnt klikt u op de tekst Image. U krijgt een klein venster te zien met de naam New Image waar u eerst een naam aan de afbeelding moet geven. Geef het de naam: achtergrondvlaktekst. Geef vervolgens een Enter. U bent al meer in het gedeelte geweest van de afbeeldingen, dus nu komt u voor dit onderdeel ook automatisch in dit scherm terecht. U gaat de volgende afbeelding toevoegen en u klikt dan ook eerst op Bladeren. Zoek en selecteer de volgende afbeelding: achtergrondvlaktekst.png Klik vervolgens op de optie Upload. Zodra deze is geupload, kunt u op de afbeelding klikken en dan wordt deze toegevoegd aan uw pagina. Zet de afbeelding op de juiste plaats (zie voorbeeld op volgende pagina) Pagina 41

42 Wat u nu ziet is dat al uw andere tekstvakken niet meer zichtbaar zijn. Nu krijgt u duidelijk te zien dat u met lagen werkt en dit is immers de laatste laag dus komt deze automatisch boven alle andere lagen te liggen. Dat is niet handig uw wilt uw tekst naar voren halen. U kunt dan het beste deze achtergrondlaag naar achter brengen. Klik op de achtergrondlaag met uw rechtermuisknop. In het snelmenu dat getoond wordt, klikt u op het icoontje met de tekst Set item to background. Nu u de achtergrondafbeelding naar achteren hebt verplaatst, ziet u uw tekstvakken weer tevoorschijn komen. U hebt nu al een aardig lay-out ontworpen. Nog niet helemaal af natuurlijk maar het begint nu al wat te lijken. U hebt ongeveer deze lay-out zoals hieronder wordt weergegeven. Hiermee kunt u de afbeelding naar de achtergrond plaatsen. Bekijk ook uw resultaat eens in de Live weergave. Pagina 42

43 8.2 Het toevoegen van een Image item als afbeelding op pagina De volgende afbeeldingen die u gaat invoegen zijn afbeeldingen om op een willekeurige plaats te kunnen zetten van uw pagina. O E F E N I N G 2 7 U gaat een aantal afbeeldingen toevoegen op deze webpagina. Klik weer in de Control Panel op de optie New Item om in het vervolgvenster de keuze te kunnen maken. In het venster klikt u op Image. Nu kunt u weer een naam geven aan het vak van de afbeelding. Geef het de naam: afbbloem en geef een Enter. U komt dan in het gedeelte waar de afbeeldingen staan en u klikt op de knop Bladeren om de afbeelding van de bloem eerst op te halen. Zoek en selecteer de afbeelding: bloem.jpg. Vervolgens klikt u op de knop Upload. Zodra de afbeelding ge-upload is, klikt u op de afbeelding en wordt deze weer op uw webpagina geladen. Zet de afbeelding aan de linkerkant van de tekst (bijvoorbeeld: X=282, y=142). Opmerking: Wanneer u een afbeelding toevoegt die kleiner of groter getoond moet worden, dan kunt u ter plekke de afbeelding nog qua grootte veranderen. Druk de shift-toets in en klik op de afbeelding en sleep nu de afbeelding naar gewenste grootte. U gaat nu nog een afbeelding toevoegen. Klik weer in de Control Panel op de optie New Item. Volg de stappen hierboven nogmaals en haal de volgende afbeelding op: foto-links.jpg. Zet deze afbeelding links onder op het witte achtergrondvlak. Probeer eventueel de grootte aan te passen naar uw eigen wensen. Uw voorbeeld kan er als volgt uitzien: Pagina 43

44 Niet alleen foto s kunt u toevoegen, maar het is ook mogelijk om bijvoorbeeld een scheidingslijn (zowel verticaal als horizontaal) als afbeelding toe te voegen aan uw pagina. Dit geeft net even wat meer accent aan uw pagina. Klik weer in de Control Panel op de optie New Item. Klik op de optie Image. Geef het bijvoorbeeld de naam: verticale lijn (u mag dit natuurlijk zelf invullen) Geef een Enter ter bevestiging als u dat nog niet had gedaan. Ga weer op zoek naar de volgende afbeelding en upload deze. De afbeelding wordt genoemd: vert-lijn.png. Wanneer u de afbeelding weer ge-upload hebt, kunt u de afbeelding toevoegen aan uw pagina. Zet de afbeelding tussen de foto s, bedoelt als scheidingslijn. U gaat nog een afbeelding uploaden maar nu is het een horizontale lijn die een beetje onderaan de webpagina komt te staan. De afbeelding heet: horizontale-lijn.png. Zet de lijn op zijn positie op uw webpagina. Bekijk uw resultaat nu eens met Live. 8.3 Overige opties bij images Een afbeelding die u plaatst op een webpagina kan gewoon als afbeelding een toegevoegde waarde zijn voor uw webpagina. Maar de afbeelding kan ook fungeren als bijvoorbeeld een link naar een interne pagina of een externe pagina. Wat voor mogelijkheden er zijn gaan we in deze opdracht bekijken. O E F E N I N G 2 8 De afbeelding aan de linkerkant die u geplaatst hebt, kunnen we laten veranderen door met de muis eroverheen te bewegen. We noemen dit de mouseover functie. Ga met uw muis op de afbeelding staan en klik vervolgens op uw rechtermuisknop. U krijgt nu een menu te zien met de mogelijkheden die bij de afbeelding ingesteld kunnen worden. Zie voorbeeld: Pagina 44

45 Standard image: Wanneer u deze optie aanklikt, kunt u op een gebruikelijke manier de afbeelding wijzigen in een andere afbeelding. Deze optie is vrijwel hetzelfde dan wanneer u via new item een afbeelding wilt toevoegen. U komt dan ook meteen in de map terecht met de ge-uploade afbeeldingen. Mouseover image: Hiermee kunt u een andere afbeelding zichtbaar maken, wanneer iemand op uw webpagina met zijn/haar muis over de standard image beweegt. Gaat men weer met de muis van de image af, dan wordt de standard image weer getoond. o U gaat een mouseover image maken. Klik op de tekst Mouseover image. o U komt nu weer bij de afbeeldingen. Eerst gaat u een afbeelding toevoegen door weer te klikken op Bladeren en de volgende afbeelding te zoeken en te selecteren: afb_3.png. o Upload de afbeelding en voeg deze toe door op de afbeelding te klikken. o Wanneer u uw muis op de foto zet, ziet u meteen dat deze veranderd in de gekozen foto. Gaat u met uw muis van de foto af, ziet u de eerste foto weer. o Bekijk dit ook wanneer u op live klikt. Onclick image: Hiermee kunt u bijvoorbeeld door middel van een klik te geven met uw muis de standaard foto laten veranderen in een andere foto. o Ga op de foto staan en klik vervolgens op uw rechtermuisknop. o U gaat eerst de mouseover image verwijderen. Klik op de tekst mouseover image. o U komt in het map van de afbeeldingen en u ziet bovenaan staan de tekst no image. Klik deze tekst aan. o U hebt zojuist de mouseover image optie uitgeschakeld. o Zorg er voor dat u het snelmenu weer tevoorschijn krijgt. En nu klikt u op de optie onclick image. U komt nu ook in de map afbeeldingen terecht. Zoek de foto op in de lijst met de tekst: afb_3.png. Klik deze tekst of foto aan. o De optie onclick image hebt u zojuist geactiveerd. Klik maar eens op de foto en u ziet dat de foto veranderd. Ga naar live en bekijk uw resultaat. Original size: Wanneer u een foto toevoegt die u ter plekke van grootte hebt veranderd en later toch weer zijn originele grootte terug wilt hebben, kunt u deze optie gebruiken. Deze optie werkt dan ook alleen maar als u een foto toevoegt en de grootte van die foto veranderd. o De foto die u hebt gaat u tijdelijk kleiner maken. Maak de foto nu kleiner. o Klik vervolgens op de foto met uw rechtermuisknop. o In het snelmenu van afbeeldingen klikt u nu op Original size. Uw foto krijgt weer de originele grootte. Pagina 45

46 Resize: met deze optie kunt u de foto groter of kleiner maken, zonder dat de foto vervormd. De verhoudingen blijven intact. Maar het is ook mogelijk een foto aan te passen los van elkaar (breedte of hoogte). Of u kunt een foto kleiner maken door een deel uit de foto te laten weergeven. We gaan dit verder uitwerken. o o o o o o o o Om een goed voorbeeld te krijgen, gaat u eerst de afbeelding veranderen door van de afbeelding een liggend rechthoek te maken. Hoe groot u dat doet maakt even niet uit. Ga nu o de afbeelding staan en klik op uw rechtermuisknop. Klik op het driehoekje achter de optie Resize en u krijgt de volgende keuze: Resize to width and height Resize to height Resize to width Do not resize Klik vervolgens op de tekst resize to height en u ziet dat de afbeelding veranderd. De foto wordt nu kleiner maar is wel geheel te zien. Ga nog eens in de foto staan en klik vervolgens op de rechtermuisknop. In het menu klikt u weer bij resize, maar nu klikt u op de optie resize to width. Nu wordt de afbeelding aangepast aan de breedte en u ziet ook dat de foto nu niet meer in zijn geheel wordt weergegeven. Een deel wordt zichtbaar. Wat zou er dan gebeuren als u nu kiest voor de optie do not resize? Probeer deze eens uit en bekijk uw resultaat ook eens in Live. Visible: met deze optie kunt u ervoor kiezen om de afbeelding zichtbaar of onzichtbaar te laten weergeven op de webpagina. Nu is het natuurlijk niet zo gebruikelijk om een foto onzichtbaar te plaatsen, want dan kan de bezoeker deze niet zien. Maar misschien hebt u straks wel een tekstvak bijvoorbeeld die u wilt plaatsen op uw site maar niet zichtbaar hoeft te zijn voor uw bezoekers dan is het wel weer handig. o o We bekijken deze optie wel met de afbeelding. U gaat de afbeelding onzichtbaar maken, zodat u weet hoe het werkt. Klik in de afbeelding op uw rechtermuisknop. Klik op het driehoekje achter visible en klik in het uitrolmenu op de optie hidden. Pagina 46

47 o Vervolgens ziet u de afbeelding natuurlijk wel in het SCMS systeem. Klik op live om te bekijken hoe het dan wordt weergegeven. U ziet bij de optie live de afbeelding niet.zet de afbeelding weer op zichtbaar. Not linked: de optie not linked geeft aan dat de foto op dit moment geen link bevat. Maar u kunt ervoor kiezen om een afbeelding te linken naar een interne of externe webpagina. o o o o o o o Ga op de foto staan en klik rechts. In het menu klikt u op de tekst (of driehoekje) <not linked> en u krijgt een keuzelijst te zien. U kunt in deze lijst kiezen voor <external link> of u kunt één van uw eigen pagina s aanklikken als u binnen uw eigen website wilt linken. Klikt u op een interne link dan ziet u alleen de tekst van de pagina staan. Klik u op <external link> dan krijgt u er 2 regels erbij om daar de url-adres in te typen en aan te geven in welk venster het geopend mag worden. De optie this window geeft aan dat de pagina op hetzelfde tabblad geladen wordt. Kiest u de optie new window dan wordt de pagina op een nieuw tabblad geladen. Klik maar eens op de tekst <external link>. Typ bijvoorbeeld de volgende linkadres: (geef enter of klik op het knop rechts ervan) Kies de optie new window. Bekijk nu uw resultaat maar eens via live. Opmerking: U kunt ook van de afbeelding een link maken naar een adres. Wanneer u daarvoor kiest begint u altijd met de tekst mailto:. voorbeeld: mailto:sandra@ict2mkb.nl. Het maakt niet uit of u de optie op new window of this window heeft staan, want er wordt dan contact gemaakt met uw programma en staat daar los van. o Het overige gedeelte in dit snelmenu van de afbeelding, komt aan de orde bij het onderdeel button-item maken verderop in deze handleiding. Pagina 47

48 Hoofdstuk 9: Button-item aanmaken Om een pagina compleet te maken, is het handig als u een aantal knoppen gaat plaatsen, zodat de bezoeker na het lezen van deze pagina verder kan gaan klikken om de overige informatie ook op uw site te kunnen lezen. U hebt dan ook een navigatiestructuur nodig, zodat de bezoeker verder kan. Er zijn verschillende manieren om te navigeren op een website. U kent de gebruikelijke navigatiestructuur die vaak links verticaal geplaatst wordt. Of het is ook mogelijk om bovenaan de website een horizontale navigatiestructuur te maken. Dit is ook afhankelijk van uw smaak en wensen. In ons voorbeeld hebben we de volgende knoppen gemaakt in een verticale navigatiestructuur. Welkom Algemeen Producten Vestigingen Contact 9.1 Buttons maken in verticale positie U gaat deze buttons maken in verticale positie. Het is mogelijk om een menu te maken met gebruik van buttons in een verticale weergave, maar het is ook mogelijk om dit in een horizontale weergave te doen. De keuze is aan u, maar we zullen u aan de hand van ons voorbeeld een beetje op weg helpen. O E F E N I N G 2 9 In ons voorbeeld maken we gebruik van afbeeldingsknoppen, maar het is ook mogelijk om simpele knoppen te maken zonder een afbeelding. Maak de eerste knop als volgt. Klik in de Control panel op de optie new item. Klik in het kleine menu op de optie new button. U gaat eerst de button een naam geven. U mag ervoor kiezen om het button1 te noemen, maar u mag het ook al de naam geven zoals u ook de button gaat noemen bijvoorbeeld welkom. Geef het in ons voorbeeld de naam welkom of button1. Klik op de knop achter de tekst om te bevestigen of druk op de entertoets. Helemaal linksboven ziet u uw eerste button staan. Sleep deze button naar de juiste positie (bijvoorbeeld links van de tekst aan het begin van het witte vlak). Pagina 48

49 Ga nu op de button staan met uw muis en klik vervolgens op uw rechtermuisknop. U krijgt nu het volgende menu te zien: Eerst gaat u bij de optie text de naam van de button invullen. Standaard staat deze op Button. Klik in het vak en typ de volgende tekst: Welkom Klik achter dit vak op de bevestigingsknop (of geen Enter). Optie Border kunt u aangeven of u de knop wil voorzien van een lijn. U heeft de keuze uit Solid of 3D. Dit houdt in dat u de lijn strak/eenvoudig kan laten weergeven of met een 3D effect. En aan de hand van het aantal pixels, kunt u de lijndikte bepalen. Hoe meer aantal punten u hier ingeeft, hoe meer diepte u krijgt, wanneer u deze op 3D zet. Omdat u een afbeelding gebruikt, heeft u de optie Border en pixels niet nodig en daarmee schakelt u ook de rand uit door 1px te zetten op 0px. Optie alignment geeft aan waar u de tekst wilt laten beginnen op de knop. U hebt de keuze uit: o Left o Center o Right U zet bij alignment de keuze gewoon op Center. Pagina 49

50 Het volgende onderdeel in dit menu heeft te maken met de knopweergave, wanneer er een muis op de knop komt te staan. U kunt de Button laten veranderen als men met een muis op de button gaat staan. 3 onderdelen om de muis te kunnen instellen: o Standard o Mouseover o Onclick We bekijken eerst de gegevens bij de optie Standard. U gaat een button-afbeelding toevoegen, hiervoor klikt u dan ook op de optie image. U komt dan weer in het onderdeel afbeeldingen terecht. U gaat de afbeelding weer opzoeken op uw eigen locatie. Zoek de afbeelding op en upload deze naar de server: button1.png Na het uploaden, selecteert u de afbeelding zodat deze weer toegevoegd wordt. U ziet dan dat de buttonafmetingen niet overeenkomen met de grootte van de afbeelding. Zorg ervoor dat u het afbeeldingvak aanpast aan de grootte van de afbeelding. U ziet ook dat de tekst die op deze afbeelding veel te donker is. De standaard kleur van de tekst is voor deze afbeelding niet goed en deze kunt u dan ook aanpassen een andere kleur. Klik hiervoor op het gekleurde vlak genaamd textcolor om de kleur te wijzigen in bijvoorbeeld wit. Ook is het mogelijk om het lettertype aan te passen. Standaard staat deze op Verdana maar wilt u liever een andere lettertype, klik dan op de tekst Verdana en kijk welke mogelijkheden er zijn om een andere lettertype in te stellen. De grootte van de lettertype kunt u dan ook aan passen. Bij de optie 12px wijzigt u de puntgrootte van de lettertype. Probeer dit ook zelf eens uit. Daarbij bestaat er ook nog de mogelijkheid om het lettertype aan te passen in de bekende optie Bold, Italic en/of Underlined (Vet, cursief en onderstrepen).standaard staat de letter ingesteld op Bold en dit wordt ook aangegeven dat de B rood is. Wanneer u dit niet wenst, klikt u op de letter B en daarmee schakelt u het vetgedrukte uit. Pagina 50

51 Bij de optie standard hebt u de eerste regel helemaal bekeken en uitgevoerd. De tweede regel bij de optie zijnde: image, color, transparant en border color, heeft u image al toegepast. De overige opties gaat u hier bekijken De optie Color, houdt in dat wanneer u een gewone button maakt, zonder afbeelding u hiermee de kleur van de button kan bepalen. Deze is dan ook nu niet van toepassing. De optie Transparant, houdt in dat u een button kan maken die een transparante achtergrond heeft, daarmee zou u de button overeen andere afbeelding heen kunnen plaatsen zodat de achterliggende afbeelding door de button heen wordt weergegeven. Deze is ook nu niet van toepassing. De optie Border color, houdt in dat wanneer u gekozen heeft om een rand te laten weergeven om de button heen, dat u hiermee de kleur van de rand kan bepalen. Ook deze optie is hier niet van toepassing. U gaat nu bekijken hoe u een mouseover kan maken met de volgende optie Mouseover. U voegt een afbeelding toe door bij de optie mouseover te klikken op image. In het venster zoekt u de afbeelding op: button2.png Selecteer deze en upload deze naar de server. Daarna klikt u de afbeelding aan, zodat deze wordt toegevoegd aan uw button. Ga op de button staan en u ziet meteen het resultaat. U ziet ook dat de grijze tekst niet helemaal de kleur is om voor deze afbeelding te gebruiken. Pas de tekstkleur aan in bijvoorbeeld zwart. U hebt zojuist geleerd hoe u het lettertype en de puntgrootte kunt aanpassen, verander indien nodig deze gegevens. Ook weet u hoe u het vetgedrukte moet aanpassen en wijzig indien nodig. Bij de 3 e optie onclick kunt u nog een andere afbeelding toevoegen als dat wenselijk is. Deze is ervoor bedoelt dat wanneer iemand op de website klikt op die button dat deze dan een andere afbeelding weergeeft. Bijvoorbeeld de button in een andere kleur. Maar het is ook mogelijk om dezelfde image te gebruiken bij de mouseover. Dat is gebeurd in dit voorbeeld. Vandaar dat u dan ook dezelfde afbeelding mag gebruiken. Klik bij optie onclick op de tekst image en zoek bij de ge-uploade afbeeldingen de afbeelding op button2.png en klik deze aan om toe te passen. Verander daarbij, indien nodig, het lettertype, puntgrootte, vetgedrukt, letterkleur. Bekijk uw gemaakte button eens met de optie Live. Pagina 51

52 Door een vinkje te plaatsen voor de optie Show mouseover appearance if linked to current page wordt de mouseover-stijl weergegeven, wanneer de gebruiker zich op de pagina bevindt waar de button naartoe verwijst. De optie Original size betekent dat de button zijn originele grootte krijgt als men op deze optie klikt. In ons voorbeeld heeft u voor de button met een originele grootte gewerkt, dus u zult hier weinig verschil in zin wanneer u op deze optie hebt geklikt. U weet nu hoe u een button moet aanmaken. U gaat dan ook voor de overige knoppen op dezelfde manier te werk. Maak nu ook de volgende buttons aan: o Algemeen o Producten o Vestigingen o Contact 9.2 Buttons voorzien van een interne link om te navigeren U hebt zojuist een aantal buttons aangemaakt en met de volgende stap kunt u deze gaan linken naar de betreffende interne pagina. Omdat we nog maar 1 pagina hebben aangemaakt zult u eerst nog een paar blanco pagina s aanmaken zodat de pagina s al wel bekend zijn. Anders kunt u natuurlijk geen interne links koppelen. O E F E N I N G 3 0 U gaat blanco pagina s aanmaken om daarna te kunnen linken. Het aanmaken van een pagina hebt u al eerder geleerd in deze handleiding. (Op blz. 12 van deze handleiding kunt u het nog eens nazien.) Maak dan de volgende pagina s aan: o Algemeen o Producten o Vestigingen o Contact Dat deze pagina s blanco zijn, is niet erg dat kunt u later verder invullen. Maar de namen van de pagina s zijn nu bekend, zodat we kunnen gaan koppelen. Klik rechts op de eerste button zijnde welkom van uw welkomstpagina. U krijgt weer het menu te zien met de mogelijkheden, een deel hiervan ziet u hieronder. De optie visible wordt aangegeven of de button zichtbaar moet zijn voor de bezoekers ja of nee. Deze laten we dan ook op visible staan. Pagina 52

53 Met de optie Go to page die daar onder staat kunt u aangeven naar welke pagina deze button gelinked moet worden. Klik op deze optie, zodat u een uitrolmenu krijgt met de mogelijkheden. In dit rijtje ziet u staan bovenaan: o <not linked> o <External link> o index o Alle aangemaakte pagina s binnen de website, zoals in dit voorbeeld algemeen, producten, vestigingen en contact U klikt vervolgens op de pagina met de tekst welkomstpagina. Nu is de koppeling geplaatst. Dan is er nog de optie Open page in. Met deze optie kunt u aangeven of u de website in This window of New window wilt laten openen. Klikt u hier voor this windows wordt de pagina geopend in hetzelfde tabblad. Kiest u voor openen in New window wordt de vervolgpagina geopend op een Nieuwe tabblad op Internet. Als u interne links maakt is het verstandig om dit in hetzelfde tabblad te laden dan kiest u voor this window, wanneer u een externe link zou koppelen, kies dan eventueel voor de optie new window. Voor deze opdracht zet u het dan ook op this window. Geef nu voor alle buttons de juiste link. 9.3 Uitrolmenu maken horizontaal of verticaal Wanneer u een website hebt die meer pagina s bevat dan ons voorbeeld, dan kunt u in het SCMS uitrolmenu s maken. Een menu met uitrolmogelijkheden kunt u zowel horizontaal als verticaal maken. Een uitrolmenu kunt u maken met image items en button items. O E F E N I N G 3 1 In deze opdracht gaat u een simpele uitrolmenu maken. We gebruiken hiervoor nieuwe knoppen die we gaan toevoegen. Deze knoppen bevatten geen afbeelding. Klik op de optie New item zodat u in het vervolgschermpje kunt klikken op de optie Button. Geef het de naam welkom en geef een enter ter bevestiging. Links boven in het hoekje ziet u toegevoegde button. U gaat deze nu boven aan in het zwarte gedeelte zetten. Sleep de eerste button naar de gewenste positie. U ziet dat de button niet zo heel erg opvalt. Zie voorbeeld hiernaast. Voorlopig houdt u deze button qua grootte zo als deze nu is, wel kunt u beter de letterkleur verander in bijvoorbeeld wit. Pas dit aan. Ook verandert u de naam van de button in: Welkom. Wanneer u deze button gaat bekijken met de optie Live, krijgt u ongeveer hetzelfde als het voorbeeld hiernaast te zien. Met een 1 pixelrand. Pagina 53

54 Keer terug naar het werkgebied om verder te gaan. Wanneer u de rand niet mooi vindt kunt u deze weghalen. Dat gaat u in deze opdracht ook doen. Schakel de 1 pixelrand uit. Wanneer u nu naar Live gaat, ziet u dat het knopeffect niet zo heel erg meer zichtbaar is. Wel is het effect met de kleuren van de tekst nog iets aanwezig. Namelijk deze verandert van wit naar grijs als men erop gaat staan met de muis. Om het knopeffect meer accent te geven gaat u voor de mouseover de knopkleur veranderen in bijvoorbeeld rood / bordeaux rood of een kleur naar eigen wens. Daarbij verandert u ook de tekstkleur in een iets duidelijkere kleur. Ook dit mag u zelf invullen. De optie Onclick mag u ook naar eigen wens invullen. U mag zelf hier creatief in zijn, dus probeer het eens uit wat de mogelijkheden zijn. De volgende stappen leert u hoe u van deze knop een uitrolmenu kan maken. U gaat eerst deze button op onzichtbaar zetten, want de buttons die als uitrolmenu worden gemaakt, moeten straks alleen tevoorschijn komen als men op de button welkom gaat staan. Anders zijn ze dus verborgen. Ga op de button staan en klik vervolgens op de rechtermuisknop zodat het snelmenu weer tevoorschijn komt. Klik op de optie Visible en zet deze op Hidden. U ziet nu dat de naam van de button nu lichtblauw van kleur is. Hiermee wordt aangegeven dat deze button onzichtbaar is ingesteld. Sluit het snelmenu en klik vervolgens op de toetscombinatie CTRL + C om te kopiëren. Vervolgens drukt u de toetscombinatie CTRL + V in om de button te plakken. De button wordt nu over de eerste button geplakt (gekopieerd) en u ziet dan ook in het blauwe gedeelte van die button staan welkom_2. Zoals in het voorbeeld hier rechts. Ga op deze button staan en sleep deze een stukje naar beneden en sluit deze button mooi onder de eerste button. Druk vervolgens nog een keertje op CTRL + V en u ziet dat er nog een knop gekopieerd wordt. Deze wordt dan welkom_3 genoemd. Zet deze button net onder de 2 e button. Maak nog een button en deze heet welkom_4 zet deze button onder de 3 e button. En maak nog een button aan deze heet welkom_5 zet deze button onder de 4 e button. U hebt dan een verticale uitrolmenu gemaakt van 3 buttons onder de button welkom. Zie voorbeeld. Verander nu ook de namen van de buttons in algemeen, producten, vestigingen en contact. Vervolgens klikt u nu de eerste button weer aan met de rechtermuisknop en u gaat deze button weer op visible zetten. Nu u dat gedaan hebt krijgt u in het snelmenu te zien de optie Create pulldownmenu. Klik op deze tekst en uw verticale uitrolmenu wordt nu automatisch gemaakt. Pagina 54