Dreamweaver. Een handleiding Linda Pieke

Maat: px
Weergave met pagina beginnen:

Download "Dreamweaver. Een handleiding Linda Pieke"

Transcriptie

1 Dreamweaver Een handleiding Linda Pieke

2 Inhoud Mappen structuur Het aanmaken van een website Rondleiding Dreamweaver Pagina Eigenschappen (opmaken van de pagina) Titel van de pagina & pagina opslaan Titel van de pagina Pagina s opslaan Style sheets Tabellen aanmaken Rollover Buttons & Navigatie Balk aanmaken Rollover Buttons Navigatie Balk Webpagina s aanmaken Plaatjes en tekst invoegen Het resultaat Een Flash animatie in Dreamweaver zetten Een mailto link maken met een button in Flash Website opmaken via Photoshop Het opslaan van afzonderlijke elementen voor de webpagina via Photoshop IFrames: Veranderde inhoud bij gebruik van website via Photoshop

3 Mappen structuur Deze tutorial vertelt je hoe je begint met een website in Dreamweaver. Allereerst moet je een aantal mappen aanmaken. Je structuur moet er zo uit komen te zien: Dus: Een map voor je website (naam) o Een map voor je plaatjes/ afbeeldingen o Een map voor je content/ documenten (functioneel ontwerp) Eventueel verder in de map van je website: o o o o o Een map voor je menu (buttons e.d.) Een map voor je films Een map voor je geluid Een map voor je scriptjes Een map voor je CSS files Je kan pas echt met Dreamweaver werken, nadat je al wat artwork hebt gemaakt, zoals buttons, plaatjes en content. Anders moet je gebruik maken van tekst of voorbeelden in Dreamweaver zelf. Ook moet je eerst een Flowchart afhebben (voor de hoeveelheid pagina s) en als je geen buttons hebt, in ieder geval een Look & Feel door middel van een storyboard of een design in Illustrator/ Photoshop.

4 Het aanmaken van een website Open Dreamweaver. Je gaat eerst een site aanmaken, NIET alleen een HTML pagina. Als je namelijk zo begint krijg je problemen met de structuur van je site. Op deze manier blijft alles netjes bij elkaar. Dit is het venster wat je ziet: Selecteer: Dreamweaver Site Een wizard wordt geopend, om een aantal gegevens van je te weten te komen. Volg deze nauwlettend volgens de screenshots, dan kan er niets misgaan. Verander de naam van Unnamed Site 1(Naamloos) in de naam van jouw website. Klik op Volgende. Je wil geen server technologie gebruiken. Klik op Volgende.

5 Hier moet je aangeven waar de bestanden die je aanmaakt opgeslagen moeten worden. Je hebt als het goed is al een mappen structuur aangemaakt, dus je bladert tot je deze gevonden hebt. Klik op Volgende. Op dit moment maak je geen gebruik van een FTP server om je files op het internet te zetten. Vink Geen aan en klik op Volgende. Als laatste krijg je te zien wat je allemaal hebt ingevuld. Als er iets niet klopt, kun met de Back (Terug) button de gegevens veranderen. Ook kan je de site verder veranderen en uitbreiden met informatie in de Geavanceerd tab op een later tijdstip. Klik op Gereed. Ga terug naar het beginvenster. Open nu wel een HTML pagina. Ga naar Menu > Site > Sites Beheren. Klik op Exporteer. Selecteer de map waar je website in staat en klik op Bewaar. Je hebt nu een.ste bestand aangemaakt. Dit bestand onthoudt waar je map staat. Bij het opnieuw openen van je website importeer je de website map door je.ste bestand te selecteren. Ga naar Menu > Site > Sites Beheren en klik op Importeer. Je site structuur zal weer in Dreamweaver geopend worden.

6 Rondleiding Dreamweaver Nu eerst even een rondleiding door de tabbladen en de menu opties. Dit is eerder al aan de orde geweest in je Flash les, toen je de Flash site moest importeren in Dreamweaver. Even een opfrisser hieronder. Je Dreamweaver omgeving opent zich standaard in de Ontwerp view als je de nieuwe HTML page hebt aangeklikt. Je kunt door middel van de tabbladen bovenin verder kiezen uit Code (HTML), Ontwerp (uiterlijk) en Gedeeld (splitsing van beiden). Het Eigenschappen paneel lijkt op die van Flash. Deze zweeft meestal onderaan de pagina. Je kunt hiermee de achtergrond en tekst veranderen net zoals je die ook gebruikt in Flash. Andere objecten komen eventueel later aan de orde. Het Invoeg paneel heeft verschillende mogelijkheden en is belangrijk voor het toevoegen van inhoud in je pagina. Deze staat helemaal bovenin onder het menu. Zorg ervoor dat je Algemeen (Common) ziet staan. We gaan er een aantal uitleggen. Hyperlink. Dit is als je een tekst of plaatje wilt verwijzen naar een andere pagina. link. Hiermee kan je een mailadres toewijzen. Anker. Hiermee kan je een link laten verwijzen naar een bestemming op dezelfde pagina. Tabellen. Hiermee kan je tabellen aanmaken en zo je inhoud alvast van te voren vastleggen in je pagina. Plaatjes. Hiermee kan je diverse soorten plaatjes invoegen. Je kunt een menu maken van diverse plaatjes en ook handmatig apart mouse-over plaatjes toevoegen. Je kunt er een Navigatie Bar mee maken. Ook kan je Hotspots toevoegen aan plaatjes, een selectie dat je over een plaatje heentrekt, die een link naar een andere pagina maakt. Media. Deze functie moeten we gebruiken om onder andere Flash files in te voegen. Ook Java kan hiermee worden toegevoegd.

7 Pagina Eigenschappen (opmaken van de pagina) Nu gaan je de eerste pagina opmaken. Ga naar Wijzigen>Pagina Eigenschappen. Verander je lettertype in Verdana. Times New Roman wordt weinig gebruikt en is het standaard lettertype waarmee Dreamweaver een pagina opent. Op een beeldscherm is een schreefloos font het meest leesbare. Arial is ook een optie, maar daar staan de letters te dicht op elkaar. Daarom is er speciaal voor dit medium Verdana ontwikkeld. Kies een kleur voor je lettertype. Kies ook je achtergrond kleur. Je kunt als je in Photoshop een design hebt gemaakt de Hexadecimale code kopiëren (de cijfers en letters achter de kleur, altijd beginnend met een #) en plakken in dit venster. Kies voor de grootte van je lettertype een daadwerkelijke grootte, niet klein of extra klein. Ga naar Links in het rechtermenu en kies de kleuren voor je links. Ga dan naar Headings (Koppen) en selecteer daar je hoeveelheid Titels, welke kleur ze moeten hebben en welke grootte. Als je naar Titel/Codering gaat moet je HTML 4.01 Transitional aanvinken. Klik op OK.

8 Titel van de pagina & pagina opslaan Titel van de pagina Hoe vaak kom je niet tegen dat een webpagina untitled document wordt genoemd als je via Google iets opzoekt? Juist, heel vaak. Dit komt omdat men vergeet de pagina een naam te geven voor in de internet browser. Je kunt je pagina en dus ook je website een naam geven door bij het kopje Titel datgene in te typen wat je wilt dat men ziet als je de URL van je website aanklikt. In dit geval zoals onderstaand voorbeeld: voorbeeld website Dreamweaver. In Safari ziet je titel er dan zoals bovenstaand voorbeeld uit. Pagina opslaan In tegenstelling tot de titel van je document moet je de eerste (Home)pagina, je HOME pagina index.html noemen. Dat is een HTML codering voor je pagina. Dit doe je ALTIJD met de eerste pagina. Anders kan deze niet geopend worden op het internet! Het is namelijk de manier waarop HTML aangeroepen wordt, en dat HTML de pagina herkent als website!

9 Style sheets Je pagina heeft nu de achtergrondkleur gekregen die jij hebt aangegeven. Typ eens een tekst in. Je zult zien dat deze nu verschijnt volgens de stijl die jij hebt geselecteerd. Maak er een Heading (Kop) van. Hij verandert qua grootte en kleur zoals jij hebt aangegeven. Eigenlijk heb je een mini CSS gemaakt, een kleine style sheet. Als we naar de code kijken ziet dat eruit zoals de afbeelding hiernaast. Deze style sheet kan je kopiëren in elke nieuwe pagina, zodat de stijl direct aangepast wordt aan de andere gekozen pagina. Dit noemen we Inline CSS. Dat doe je in de Code view, zoals hieronder. Een TAG, zoals dat heet, ziet er zo uit als hij geopend wordt: <style> en zo </style> als hij gesloten wordt. Alles tussen deze tags (en de tags zelf) moet je dus selecteren. Een style sheet is in de Code view te herkennen aan de roze kleur die de verschillende onderdelen laat zien. Een style sheet staat altijd in de HEAD sectie (tag). Dit is het gedeelte waar je alle gegevens inzet die onthouden moeten worden, maar niet gezien mogen worden door een gebruiker die je site opent op internet. In je BODY tag zet je alles neer wat direct gezien mag worden, of plaats je scriptjes die te maken hebben met een bepaald onderdeel (plaatje, zoekmachine, video, etc.) wat je op de pagina zelf gezet hebt. Maar omdat we nu alleen deze pagina opgemaakt hebben is dat nu niet nodig.

10 Tabellen aanmaken Ga terug naar je Index pagina. Klik op Invoegen>tabel. Er verschijnt nu een tabel dialoog venster. Tel de hoeveelheid Buttons (Knoppen) van je hoofdmenu op, dus level 1 van je Flowchart, voeg daarbij een titel en onderkant toe en je hebt de hoeveelheid Regels die je nodig hebt. Klik voor Kolommen 1 rij voor je Links/Buttons, 1 kolom voor je tekst, 1 kolom voor je plaatje(s) en eventueel een kolom voor een rechtermenu met andere links. Zorg ervoor dat de Randdikte 0 is. Klik op OK. Je tabel ziet er nogal klein uit, maar je kunt de breedte en lengte aanpassen door deze met je muis uit te rekken. Ook kun je alle cellen verdelen, verwijderen en toevoegen als dat nodig is (CTRL-Click voor het Menu hiervoor). In je Eigenschappen Paneel kun je zien wat er allemaal mogelijk is binnen de tabel om deze er zo uit te laten zien zoals jij voor ogen hebt. Hiernaast staat een tabel zoals deze er na bewerking uit kan zien.

11 Rollover buttons en Navigatie Balk aanmaken Rollover Images: Buttons Je kunt elke button afzonderlijk invoeren. Een voordeel hiervan is, is dat je zelf in de hand hebt waar je menu komt in de webpagina en je kan daardoor dus gebruik maken van de tabel zoals jij deze hebt ingericht. Vooraf moet je wel eerst PER CEL weten wat de hoogte en breedte van de cellen is waar je de buttons in wilt plaatsen. Je kunt de hoogte en de breedte ook terugvinden in de code. Zoniet, pas dan eerst met schuiven van de cellen met je muis in je ontwerp de hoogte en breedte aan terwijl je in de code blijft kijken. Vervolgens maak je een nieuw document aan in Photoshop met de maten die je in de tabel gevonden hebt. Hieronder een voorbeeld. Let erop dat je buttons maakt voor het beeldscherm, dus 72 DPI (Dots Per Inch)! Vervolgens maak je 2 lagen aan voor de achtergrond van je button, en/of, als je een transparante achtergrond wilt, 2 lagen tekst. Je moet namelijk een gewone versie van je button maken en een highlight (rollover) versie. Je kunt daarbij gebruikt maken van transparantie als achtergrond of een kleur. Je slaat je images op onder Opslaan als Web en Apparaten.

12 Dit is het dialoogvenster wat je ziet:

13 Voor een transparante achtergrond sla je je image op als GIF, waarbij je de keuze hebt om een randkleur te kiezen. Dit is erg handig, als je de letters van je button wilt laten overvloeien in de achtergrond van je webpagina. Kies hiervoor de hexadecimale code van de kleur. Deze is te vinden in elk dialoog venster Kleur, zowel bij Dreamweaver als de andere opmaakprogramma s van Adobe. (In het voorbeeld # ) Als je van een gekleurde achtergrond gebruik maakt kun je volstaan met JPG. Links onderaan in het menu kun je zien hoe groot je bestand is. Sla je bestand op als bt_home en als bt_home_hl. Denk erom dat je geen spatie of teken gebruikt in je naam, maar schrijf de naam aan elkaar! Let er ook op dat alle plaatjes in een daarvoor aangewezen map worden opgeslagen binnen je Dreamweaver site, anders kan Dreamweaver de plaatjes niet meer vinden! Nu ben je klaar voor het toevoegen van de button in Dreamweaver! Selecteer Afbeeldingen>Rollover images.

14 In het dialoog venster selecteer je je opgeslagen buttons voor de gewone en de highlight versie. Als je al verschillende pagina s hebt opgeslagen kan je de buttons al intern koppelen, maar dit kan ook later in het Eigenschappen paneel aan de onderkant van je beeldscherm. Je kunt deze stappen herhalen voor de hoeveelheid buttons die je in gedachten had. Navigatie Balk In het tabblad Algemeen staat onder het kopje Image ook de icoontje van een Navigatie Balk. LET OP: Voor je dit KAN gaan doen, moet je eerst een paar images van je buttons, (rollover, down) hebben gemaakt in Photoshop en deze weggeschreven hebben in Opslaan voor Web en Apparaten als GIF of PNG. Zorg er ook voor dat deze images in de map Menu zitten van je website mappen structuur, anders kan Dreamweaver deze buttons straks niet meer vinden!

15 Je komt nu in het dialoog venster van de Navigatie Balk. Geef je element een naam van een button die je hebt aangemaakt, bijvoorbeeld Home. Selecteer je Up (Omhoog) image, dus het plaatje wat je ziet als je op de website komt. Selecteer daarna je Over (Boven) image, je rollover plaatje, als je erover zweeft met je muis. Eventueel kan je ook een ander plaatje selecteren voor de Down (Omlaag), Over while Down (Afbeelding Boven terwijl omlaag), maar je kunt hier ook gewoon het plaatje neerzetten van je eerder toegevoegde Up Image. Bij When Clicked, Go to URL (Ga als er op wordt geklikt, naar de URL) blader je door je website map tot je de Dreamweaver pagina tegenkomt waarnaar de button moet verwijzen. Klik daarna op + om een nieuwe button aan te maken voor je Navigatie Balk. Vervolgens doe je hetzelfde met een andere button tot je het hele menu, dus alle webpagina s die je wilt linken van je hoofdmenu hebt geselecteerd. Je kan per pagina maar 1 Navigatie Balk maken. Als je dit wilt omzeilen, zou je moeten werken in Frames, of met tekst Links. Je kunt natuurlijk wel aparte buttons (Image Objects) aanmaken of plaatjes door laten linken door er een Hotspot van te maken. Ook kun je aparte buttons aanmaken. Aan jou de keuze of je een Navigatie Balk maakt van je Hoofdmenu en verder met aparte buttons de rest van je website door laat linken, of dat je de hele website in de Navigatie Balk zet.

16 Webpagina s aanmaken Er zijn verschillende momenten waarop je de pagina s van je website aan kan maken. In principe geldt dat je de pagina s aanmaakt op het moment dat je de algemene vormgeving die voor alle pagina s geldt af hebt. Dus je tabel, logo en je buttons. Reden hiervoor is dat je anders de afzonderlijke elementen moet kopiëren naar de andere pagina s en dat is meer werk. Je gaat de index pagina dus eerst helemaal opmaken en deze dan meerdere keren onder een andere naam opslaan. Zo maak je de meerdere pagina s van je website aan. Sla de pagina s op onder de namen van je site die je in je Flowchart hebt gemaakt. Gebruik hiervoor elke keer Bestand>Opslaan Als.. Je hebt nu rechts in je venster de volgende website structuur overzicht:

17 Plaatjes en tekst invoegen Onder het tabblad geeft het plaatje van de boom aan dat als je daarop klikt dat je een plaatje in kan voegen. Zorg er alleen wel voor dat je de locatie waar je het plaatje in wilt zetten hebt geselecteerd in de tabel! Je kunt dezelfde optie ook vinden onder het Menu > Invoegen: Selecteer nu je plaatje (uit je mappen structuur!) als het dialoogvenster opent. In het Eigenschappen Paneel kan je het plaatje dan verder uitlijnen. De tekst kan je dan verder vormgeven, door de Celruimte en Celopvulling te veranderen in het Eigenschappen Paneel, en de tekst zelf uit te lijnen e.d.. Als je tekst in wilt voegen, maar je weet nog niet precies wat je moet neerzetten, ga dan naar de Lorem Ipsum site, een fake tekst generator die gebruikt wordt door designers om de tekst vorm te geven, zonder dat ze afhankelijk zijn van door de klant (vaak te laat) aangeleverde inhoud (content).

18 Het Resultaat Als je je webpage bewaart en je klikt op Menu > Bestand > VoorvertoALT-F12, dan kun je zien hoe het eruit ziet op internet. Mocht je tevreden zijn, dan kun je de tabel kopiëren en aanpassen in de overige pagina s van je website. Je neemt dan ook gelijk je Menu mee (handig). Index pagina Introductie pagina

19 Flash animatie in Dreamweaver zetten Een korte handleiding over hoe je een Flash animatie in Dreamweaver zet. Open een pagina in Dreamweaver (.html) waar je een plaatje hebt staan, wat je om kan zetten in een Flash animatie. Heb je dat niet, gebruik dan een pagina van je website waar een tabel in staat en gebruik het formaat van het plaatje in deze handleiding. Klik op het plaatje en kijk vervolgens onder in je Eigenschappen paneel wat het formaat is van het plaatje. In dit geval is dat 390 X 240. Open een nieuw Flash document. Open je document eigenschappen en verander het formaat in het formaat van het plaatje in Dreamweaver. Verander ook de kleur van de achtergrond in de kleur van de achtergrond van je plaatje/tabel of website. Of kies een kleur die bij je vormgeving past. Sla je Flash document op in een mapje dat je hebt aangemaakt in je Dreamweaver site map, waar ook je afbeeldingen en menu mappen hebt staan. Nu ga je de plaatjes uitzoeken en of de vormen/letters/woorden maken die je wilt in je animatie. Hou er rekening mee dat je animatie moet blijven spelen in een loop, dus als je straks een mailto button moet maken, moet deze de hele movie te zien zijn. Je kan ervoor kiezen om je film 1 keer te laten spelen en de mail button als laatste te laten verschijnen, maar dan moet je niet vergeten op de laatste Keyframe een STOP actie neer zetten, anders begint je film automatisch weer van het begin en hebben bezoekers geen tijd om op je mail button te klikken.

20 Een mailto link maken met een button in Flash Hoe maak je een mail button? In de vorige handleiding van de Flash website heb je geleerd hoe je een externe link kan maken vanuit Flash. Hieronder een opfrisser. In layer (laag) 4 staat een button, namelijk klik hier. Hoe maak je een button? Typ een tekst, of gebruik een plaatje, druk op F8. Het volgende dialoogvenster verschijnt: Daarna klik je op de button en kom je in het submenu van de button. Selecteer nu je HIT frame, zet er een Keyframe (Hoofdframe) neer en trek je een rechthoek over de tekst. Dit is de ruimte waarin de gebruiker kan klikken.

21 Ga terug naar scene 1. Klik op de button om deze te selecteren. Open je Action menu. (het schuine pijltje in het Eigenschappen Paneel onderaan). Klik op Global Functions > Browser/Network > geturl. Vul bij URL in:

22 Sla je movie op. Klik op Command > Enter en kijk of alles werkt. (niet vergeten!) Ga naar Dreamweaver. Open je Dreamweaver pagina. Selecteer het plaatje wat je gaat vervangen en verwijder deze. In je Common tabblad bovenaan kun je media invoegen. Kies Flash. Haal je swf file (niet je Fla!!) uit de map waarin je deze opgeslagen hebt.

23 Als het allemaal goed is gegaan heb je nu een swf document van hetzelfde formaat als je plaatje op dezelfde plek. Sla je pagina op en ga naar Preview in Browser (safari). Je plaatje is nu veranderd in een flash animatie met een button naar je .

24 Website opmaken via Photoshop Hierboven kun je direct in Dreamweaver je site opmaken. Handig, maar misschien heb je al wat gemaakt in Photoshop, of wil je dat liever eerst doen en wil je die vormgeving gebruiken als basis voor je website. Voordat je begint met de opmaak in Photoshop, is het noodzaak om je te beseffen dat je goed met werken met je layers (lagen). Doe je dit niet, dan zal het later moeilijk zijn om veranderende elementen aan te passen, bijvoorbeeld buttons. Doe dus je achtergrond in een aparte laag, je plaatjes in een aparte laag, je teksten in een aparte laag en je buttons in een aparte laag. Geef de lagen een naam, zodat je niet de hele tijd hoeft te zoeken naar je elementen. Als je alle elementen hebt opgemaakt, zoals hierboven te zien is, dan ga je de verschillende delen snijden met de slice ol (gereedschap). (zie hiernaast) Dit doe je, omdat je een vlakverdeling wilt krijgen van alle delen die je apart zou willen bewerken. Je moet dus bijvoorbeeld je buttons apart slicen, je tekstkolom, je plaatjes en eventuele andere links, waarvan je wilt dat ze heel blijven. De rest wordt opgedeeld door Photoshop zelf. Zet hiervoor als hulpmiddel de magnetische hulplijnen aan. Te vinden onder Menu > Weergave > Magnetisch > Hulplijnen. Op deze manier zorg je ervoor dat alles goed uitgesneden wordt. Elk element wat je uitgesneden hebt krijgt een nummer. Heb je de uitgesneden onderdelen niet goed op elkaar uitgelijnd dan wordt er een apart element toegevoegd, namelijk: spacer.gif. Let dus goed op hoe je snijdt, anders krijg je veel onnodige segmenten en uiteindelijk dus ook teveel cellen in je tabel (zie later in dit hoofdstuk)

25 Hieronder een close-up van de verschillende segmenten: Als je alles hebt gesliced, ga je de totale pagina opslaan voor Web (save for web), te vinden in het hoofdmenu. Kies voor JPG, vink alles uit, behalve Geoptimaliseerd, kies voor een kwaliteit van het plaatje (de hoeveelheid compressie die erop moet worden uitgevoerd) en klik op Save/Opslaan Opslaan.

26 je krijgt nu een dialoogvenster waar je het plaatje op moet slaan. Er wordt gevraagd of je alleen plaatjes of HTML en plaatjes wilt opslaan, kies voor HTML and Images. Selecteer vervolgens de map in je mappenstructuur van je website, waar je van te voren een aparte map hebt aangemaakt met bijv. de naam Website. Sla de naam van je pagina op zoals jij wilt dat hij wordt weergegeven op internet. Bij je homepage is dat index.html. (Je kunt namelijk als je wilt elke pagina maken en slicen in Photoshop. Klik op Opslaan. Je plaatje is nu in verschillende delen (segmenten) opgeslagen in de door jou geselecteerde map. Ga naar Dreamweaver. Klik op Open. Kies voor je opgeslagen bestand met de.html extensie.

27 Je plaatje zal zichzelf nu in cellen van een tabel tonen in Dreamweaver zoals jij deze hebt gesneden in Photoshop. Doordat nu je buttons, tekst en plaatjes zijn opgedeeld in tabellen, kan je deze dynamisch maken. Je kunt bijvoorbeeld meerdere variaties van je buttons maken en deze invoegen als onderdeel van je Navigatie Balk of Roll Over Buttons. Vervolgens verwijder je de huidige buttons in je tabel, en vervangt deze door de buttons die je net hebt aangemaakt in je Navigatie Balk/ Roll over Buttons. Hetzelfde kan je ook doen met plaatjes. Maak een Flash filmpje van je plaatje in hetzelfde formaat en vervang het. Of maak een nieuwe afbeelding in Photoshop. Je kunt de formaten vinden in je codescherm. (Zie het voorbeeld hiernaast: 752 pixels bij 575 pixels). Zorg ervoor dat je in Photoshop bij het aanmaken van een nieuw bestand de eigenschappen voor web aan hebt staan. Je document kan alleen maar in 72 DPI gemaakt worden voor het web. Hieronder wordt verder beschreven hoe je elementen moet opslaan voor je webpagina.

28 Het opslaan van afzonderlijke elementen voor de webpagina via Photoshop Als je bepaalde elementen wilt veranderen in je HTML pagina zou het jammer zijn als je de hele pagina weer zou moeten opslaan. Wellicht heb je al iets gewijzigd in je webpagina, en dat zou dan weer overschreven worden. Photoshop maakt bij het Opslaan voor Web met HTML en Afbeeldingen van je slices een map aan met je.html bestand en slaat al het beeldmateriaal op in 1 aparte map die erbij staat. Deze map heet Afbeeldingen. Het is daarom erg belangrijk dat je telkens dezelfde locatie hanteert van je koppelingen. Het werkt een beetje hetzelfde als bij Illustrator. Als je daar de plaatjes niet bij het bestand insluit, en je verplaatst je document en niet je map met plaatjes, zal Illustrator de koppelingen die in die map staan niet meer kunnen vinden, en daarmee is de koppeling dus verbroken. Hou je de koppeling wel in stand dan kun je dus hierdoor bepaalde slices (delen) veranderen en deze in de map met al je eerder opgeslagen plaatjes opslaan onder dezelfde naam van het veranderde deel. Omdat het HTML bestand namelijk niet kan zien hoe het deel eruit ziet, maar alleen kijkt naar de naam ervan, zal de HTML pagina geen verandering waarnemen in de code en het nieuwe deel weergeven. Hoe werkt dit in Photoshop? Je kunt, in plaats van alle slices te kiezen in je menuopties van Opslaan voor Web, ook verschillende delen aan klikken. Selecteer je het veranderde deel, dan opent zich een dialoogvenster waarin je de naam moet zetten van de slice die je wilt opslaan. Kijk eerst in je map met opgeslagen Images hoe dat deel heet. In je dialoogvenster selecteer je daarbij dan alleen Alleen Afbeeldingen en niet HTML en Afbeeldingen. Vervolgens klik je in Dreamweaver zelf op F5 (Vernieuw) en dan zal het veranderende deel geplaatst worden. Wil je een mouse-over button maken? Sla je afbeeldingen (let op het formaat van je segment!!) op onder een andere naam als Alleen Afbeeldingen. In Dreamweaver importeer je dit bestand in je Roll over Button of Navigatie Balk en volg je de stappen zoals in de vorige paragraaf is besproken. Kijk voor meer informatie over Roll Over Buttons in het aparte hoofdstuk hierover.

29 IFrames: veranderde inhoud bij gebruik van website via Photoshop Door Harun Kupschus Een I-Frame is een heel simpel iets. Het is een soort tabel waar je verschillende pagina s in kan plaatsen. Dit kan handig zijn voor als je best wel een zware website hebt en niet telkens wil dat de pagina opnieuw geladen wordt als je naar een andere pagina wil. Hier ga ik uitleggen wat een i-frame precies is en doet. Zoals je ziet bestaat een i-frame uit een regeltje tekst. <iframe name= menu src= menu.html frameborder= 0 height= 416 scrolling= no width= 140 > </ iframe> <iframe name= menu Dit is de naam van de i-frame. Deze moet je weten als je verschillende pagina s in dit frame wil openen. De computer weet dan waar hij de desbetreffende pagina moet openen. src= menu.html Een i-frame opent standaard altijd een pagina. De pagina die hier standaard wordt geopend is dus menu. html. frameborder= 0 Een i-frame heeft ook een border thickness. Het is natuurlijk mooier(in de meeste gevallen) als je deze gewoon op 0 zet. height= 416 width= 140 Dit spreekt voorzich dit zijn de standaard formaten die het i-frame moet hebben. scrolling= no Binnen een i-frame kan ook je ook scrollen. dit kan natuurlijk aan en uit worden gezet. no=uit yes=aan. met een.css bestand kan je de scrollbar ook nog aanpassen. Een iframe door middeel van slicen in Photoshop We hebben de standaard dingen over een i-frame nu gehad. Nu ga ik je vertellen hoe je een i-frame moet gebruiken. Hiervoor maken we een photoshop layout, deze gaan we later slicen. Ik heb hier snel even een layout in photoshop gemaakt. De bruine vlakken gaan we slicen in photoshop. Let goed op dat je echt alleen de bruine vlakken sliced. Als je iets van de achtergrond meeneemt wordt dit later lelijk als je het plaatje gaat vervangen met een i-frame.

30 Zoals je op de afbeelding hiernaast ziet heb ik deze gesliced. Dat houdt dus in dat ik straks 2 plaatjes heb met een bruine achtergrond. Deze 2 plaatjes vervang ik straks in de broncode met een de i-frame regel. Zometeen hier meer over. Nu ik de layout heb gesliced ga ik hem opslaan voor het web. Eenmaal op opslaan voor en en apparaten geklikt krijg je een venster geopend met instelling om je afbeeldingen op te slaan. Laat dit gewoon standaard tenzei je een laag of hoog kwaliteit afbeeldingen

31 Eenmaal op opslaan geklikt krijg je nog een klein venster. Hier kun je kiezen waar je de website wil opslaan. zorg ervoor dat je de er alles hetzelfde maakt als hieronder. Eenmaal opgeslagen krijg ik een mapje met een index.html bestand en een mapje met afbeeldingen. We hebben tijdens het slicen 2 vakken uitgesliced (de 2 bruine). Dat zijn index_03.gif en index_05.gif We moeten nu de maten van deze 2 afbeeldingen onthouden index_03 breedte:112 hoogte:391 index_05 breedte:334 hoogte:391 We openen nu index.html met scripteditor (code)

32 We zien hier een regel staan: <img src= afbeeldingen/index_03.gif width= 122 height= 391 alt= > Deze regel gaan we vervangen met de i-frame regel. maar dit kost een beetje moeite. <iframe name= menu src= menu.html frameborder= 0 height= 416 scrolling= no width= 140 > </ iframe> Zoals we zien is afbeelding index_03.gif 122 width en 391 height. deze gegevens voeren we in de i-frame regel in. <iframe name= menu src= menu.html frameborder= 0 height= 391 scrolling= no width= 112 > </ iframe> <--ZO MOET HET DUS WORDEN. Nu we deze regel goed hebben vervangen we hem met de origenele regel van de afbeelding. Voorbeeld: OUD NIEUW Doe dit ook met index_05.gif. maar LET OP! index_03.gif wordt ons menu dus die i-frame heeft als naam menu. maakt dit bij index_05.gif content zo raakt de computer niet in de war naar welke pagina s hij moet linken. Als je nu de index.html opent zie je dat er geen afbeelding meer staat maar dat je browser de pagina niet kan vinden. maak dus een menu.html bestand een. doe dit ook voor content.html Zo nu zijn we met het iframe gedeelte klaar. om nu een pagina van menu naar content te linken maak je in dreamweaver een link. In menu.html hebben we een link gemaakt. hiernaast zie je hoe ik dit heb gedaan. Nu zou er in menu.htm een link moeten staan met home. Maak nog een aparte pagina home.html en deze opent dan in je content frame.

design ook items uitsnijden

design ook items uitsnijden (fig1) Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het

Nadere informatie

Flash Website ActionScript handleiding Linda Pieke

Flash Website ActionScript handleiding Linda Pieke Flash Website ActionScript handleiding Linda Pieke Basis ActionScript Tutorial Inhoudsopgave Basis ActionScript Tutorial... 2 Werkwijzer volgorde:... 2 Actionscript tutorial... 3 De Buttons... 3 De Webpagina

Nadere informatie

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien. Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te

Nadere informatie

E.M. van Nieuwaal. Frontpage 2003. Jouw vak op het leerlingenweb. Copyright 2008. http://cursus.anguillanova.nl

E.M. van Nieuwaal. Frontpage 2003. Jouw vak op het leerlingenweb. Copyright 2008. http://cursus.anguillanova.nl Frontpage 2003 Jouw vak op het leerlingenweb E.M. van Nieuwaal Copyright 2008 http://cursus.anguillanova.nl Inleiding... 3 1. Ontwerp een sitemap... 4 2. Index.htm... 4 3. Nieuwe pagina s maken... 7 4.

Nadere informatie

Om in te loggen in het CMS (Content Management Systeem) gaat u naar http://domeinnaam.nl/admin Hier ziet u het inlogscherm:

Om in te loggen in het CMS (Content Management Systeem) gaat u naar http://domeinnaam.nl/admin Hier ziet u het inlogscherm: CMS Handleiding Inhoudsopgave Inloggen in het CMS... 3 Pagina s toevoegen... 4 Pagina s bewerken... 7 Een link toevoegen... 8 Een afbeelding toevoegen... 10 Foto s plaatsen op de fotopagina... 12 Media...

Nadere informatie

CMS Template Handleiding

CMS Template Handleiding CMS Template Handleiding Inhoudsopgave Inloggen in het CMS... 3 Pagina s toevoegen... 4 Pagina s bewerken... 6 Een link toevoegen... 7 Een afbeelding toevoegen... 9 Foto s plaatsen op de fotopagina...

Nadere informatie

De tekstverwerker. Afb. 1 de tekstverwerker

De tekstverwerker. Afb. 1 de tekstverwerker De tekstverwerker De tekstverwerker is een module die u bij het vullen van uw website veel zult gebruiken. Naast de module tekst maken onder andere de modules Aankondigingen en Events ook gebruik van de

Nadere informatie

Safira CMS Handleiding

Safira CMS Handleiding Safira CMS Handleiding Inhoudsopgave 1Mappen en artikelen... 2 1.11.1 Naam wijzigen map/ pagina... 3 1.21.2 Website structuur: nieuwe pagina aanmaken, pagina verwijderen, pagina blokkeren, structuur wijzigen...

Nadere informatie

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG EBUILDER HANDLEIDING De Ebuilder is een product van EXED internet www.exed.nl info@exed.nl 1 INHOUDSOPGAVE Inleiding Een korte introductie over het Ebuilder» Navigatie» Snelnavigatie Pagina s Hier vind

Nadere informatie

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond

Achtergrond en lettertype Opmaak Achtergrond Opmaak Achtergrond Afbeelding in achtergrond Frontpage Express is het meest eenvoudige programma voor het maken van je homepage. Is het programma niet geïnstalleerd op je PC, dan is het te downloaden en daarna te installeren. We zullen nu een aantal

Nadere informatie

HTML Editor: tabellen en hyperlinks

HTML Editor: tabellen en hyperlinks LES 19 HTML Editor: tabellen en hyperlinks In deze les leert u nog iets meer over HTML en de HTML Editor van OpenOffice.org. U leert hoe u absolute en relatieve hyperlinks maakt. We staan even stil bij

Nadere informatie

Uw TEKSTEDITOR - alle iconen op een rij

Uw TEKSTEDITOR - alle iconen op een rij Uw TEKSTEDITOR - alle iconen op een rij Hieronder ziet u alle functionaliteiten van uw teksteditor onder elkaar ( op alfabetische volgorde). Afbeelding (zie foto) Bestanden (zie link) Broncode Citaat Documenten

Nadere informatie

Snel aan de slag met BasisOnline en InstapInternet

Snel aan de slag met BasisOnline en InstapInternet Snel aan de slag met BasisOnline en InstapInternet Inloggen Surf naar www.instapinternet.nl of www.basisonline.nl. Vervolgens klikt u op de button Login links bovenin en vervolgens op Member Login. (Figuur

Nadere informatie

Je ziet het ontwerpscherm voor je. Ontwerpen is actief en dat zie je aan de linkeronderkant van je scherm net boven de taakbalk.

Je ziet het ontwerpscherm voor je. Ontwerpen is actief en dat zie je aan de linkeronderkant van je scherm net boven de taakbalk. Inhoudsopgave frontpage 2003... 2 een thema gebruiken... 4 afbeeldingen op de pagina zetten... 5 knoppen maken... 8 knoppen maken in linkerframe... 10 een tabel maken... 12 opdrachten... 14 een fotopagina

Nadere informatie

Webonderdelen (Web Parts)

Webonderdelen (Web Parts) Webonderdelen (Web Parts) Een SharePoint pagina is opgedeeld in een aantal zones op het scherm. In elke zone kunnen Webonderdelen, veelal Web Parts genoemd, geplaatst worden. Deze Web Parts zijn kleine

Nadere informatie

Handleiding Vedor-editor

Handleiding Vedor-editor Handleiding Vedor-editor Mei 2007, versie 0.9 Inhoudsopgave Inleiding... 3 Aanmelden... 4 De werkbalk... 5 Het context menu... 6 Navigeren binnen je website... 7 Tekst toevoegen en bewerken... 8 Afbeeldingen

Nadere informatie

Digitale vormgeving 2014 2015. Wordpress deel 1

Digitale vormgeving 2014 2015. Wordpress deel 1 Digitale vormgeving 2014 2015 Wordpress deel 1 2 Inhoud Site in WordPress... 3 Maak een eigen site in WordPress.com.... 3 Wordpressaccount aanmaken... 4 Opdracht 1... 4 Thema kiezen... 6 Opdracht 2...

Nadere informatie

Trippeltrap Content Management System

Trippeltrap Content Management System Handleiding Trippeltrap Content Management System versie 2.4 Aanmelden Voordat u de tekst op uw webpagina kunt aanpassen, moet u zich eerst aanmelden. Bovenaan de pagina vindt u een link naar het intranet.

Nadere informatie

Navigator CMS 2009. Beknopte handleiding v1.0

Navigator CMS 2009. Beknopte handleiding v1.0 Navigator CMS 2009 Beknopte handleiding v1.0 Inhoudsopgave 1. Inleiding... 3 2. Inloggen... 4 3. Menustructuur... 5 4. Document Verkenner... 6 5. Mappen beheren... 7 5.2 Map hernoemen... 7 5.3 Map verplaatsen...

Nadere informatie

Handleiding Vedor-editor

Handleiding Vedor-editor Handleiding Vedor-editor Oktober 2008 Versie 1.1 Inhoudsopgave 1 Inleiding... 3 2 Aanmelden... 4 3 De werkbalk... 5 4 Het contextmenu... 7 5 Navigeren binnen je website... 8 6 Tekst toevoegen en bewerken...

Nadere informatie

Central Station. CS website

Central Station. CS website Central Station CS website Versie 1.0 18-05-2007 Inhoud Inleiding...3 1 De website...4 2 Het content management systeem...5 2.1 Inloggen in het CMS... 5 2.2 Boomstructuur... 5 2.3 Maptypen... 6 2.4 Aanmaken

Nadere informatie

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4 Handleiding CMS Inhoud 1 Inloggen 2 Algemeen 3 Hoofdmenu 4 Pagina s 4.1 Pagina s algemeen 4.2 Pagina aanpassen 5 Items 5.1 Items algemeen 5.2 Item aanpassen 6 Editor 6.1 Editor algemeen 6.2 Afbeeldingen

Nadere informatie

Een quiz plaatsen op je website

Een quiz plaatsen op je website Een quiz plaatsen op je website Om de deelnemers een beetje na te laten denken kan je een quiz toevoegen op je site. Dat doe je op de volgende manier: a. Een quiz aanmaken Ga naar je eigen pagina en klik

Nadere informatie

Handleiding Mijneigenweb.nl

Handleiding Mijneigenweb.nl Handleiding Mijneigenweb.nl Inhoud 1 Inloggen 2 Kleurenschema en lettertype 2.1 Kies een standaard kleurenschema 2.2 Kleurenschema en lettertypes aanpassen/ zelf samenstellen 3 Logo 4 Visual 4.1 Eigen

Nadere informatie

HANDLEIDING CMS Versie 2.4 januari 2013

HANDLEIDING CMS Versie 2.4 januari 2013 Het CMS dat bij deze site geleverd wordt heeft hoofdzakelijk tot doel om goed door Google gevonden te worden. De hiërarchie van het CMS geeft aan hoe google per pagina naar uw website kijkt. De mate van

Nadere informatie

Welkom bij Sitebuilder, een praktijksite maken in 5 stappen.

Welkom bij Sitebuilder, een praktijksite maken in 5 stappen. Welkom bij Sitebuilder, een praktijksite maken in 5 stappen. Wat is sitebuilder Site Builder is een uiterst gebruiksvriendelijk en zeer uitgebreid product waarmee u snel een eigen praktijkwebsite kunt

Nadere informatie

Websites i.s.m. Service @ School

Websites i.s.m. Service @ School Websites i.s.m. Service @ School Inhoudsopgave Introductie...3 Inloggen in het Beheer Panel...3 Aanpassen van de tekst op de pagina s...4 Nieuwe pagina maken...5 Toelichting op enkele knoppen...6 Een link

Nadere informatie

Inhoud van de website invoeren met de ContentPublisher

Inhoud van de website invoeren met de ContentPublisher Inhoud van de website invoeren met de ContentPublisher De inhoud van Muismedia websites wordt ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem (CMS): de ContentPublisher.

Nadere informatie

Handleiding om uw website/webshop aan te passen

Handleiding om uw website/webshop aan te passen Handleiding om uw website/webshop aan te passen ONDERWERP PAGINA 1. Hoe moet ik inloggen in het beheer? 2 2. Hoe pas ik een bestaande pagina aan? 2 3. Hoe plaats ik een afbeelding? 3 4. Hoe maak ik een

Nadere informatie

Hoe moet je een prachtige presentatie maken?

Hoe moet je een prachtige presentatie maken? Hoe moet je een prachtige presentatie maken? www.meestermichael.nl Geef de presentatie een titel. Klik dit vak aan om jouw presentatie een ondertitel te geven. Hier kun je je presentatie een titel geven

Nadere informatie

Handleiding Joomla 3.x

Handleiding Joomla 3.x Handleiding Joomla 3.x Hoe maak ik een call to action button? Geschreven: Sandra van der Heijden (2015) AdviesMies Introductie Het wordt regelmatig geroepen. Je hebt call to action buttons nodig op je

Nadere informatie

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010

Het Wepsysteem. Het Wepsysteem wordt op maat gebouwd, gekoppeld aan de gewenste functionaliteiten en lay-out van de site. Versie september 2010 Het Wepsysteem Het Wepsysteem is een content management systeem, een systeem om zonder veel kennis van html of andere internettalen een website te onderhouden en uit te breiden. Met het Content Management

Nadere informatie

TEKST INVOEREN EN BEWERKEN

TEKST INVOEREN EN BEWERKEN TEKST INVOEREN EN BEWERKEN Het invoeren en bewerken van tekst gaat via de editor. Onderstaand een overzicht van de te gebuiken knoppen (indien je rechts op de knoppen klik krijg je de betekening in tekst

Nadere informatie

Handleiding. Yvonne Rijks-Waardenburg. Tine Strikkers. Christel van de Steenoven-Livius. Pagina 1

Handleiding. Yvonne Rijks-Waardenburg. Tine Strikkers. Christel van de Steenoven-Livius. Pagina 1 Handleiding Yvonne Rijks-Waardenburg Tine Strikkers Christel van de Steenoven-Livius 1 Inhoud 1. Inloggen SharePoint 3 2. Groepspagina bewerken ` 4 3. Foto s 3.1 Foto s uploaden 8 3.2 Foto s bewerken 10

Nadere informatie

Een website ontwerpen in Dreamweaver met de opmaakweergave

Een website ontwerpen in Dreamweaver met de opmaakweergave Een website ontwerpen in Dreamweaver met de opmaakweergave door G. Van Soest Met Dreamweaver kan je zeer snel een website in elkaar bouwen; ook het onderhoud van een website is met Dreamweaver uiterst

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce

Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce Gebruikershandleiding websitebeheer m.b.v. Wordpress incl. Woo-Commerce Saft Websites Gebruikershandleiding Wordpress icm Woocommerce pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Liever persoonlijke

Nadere informatie

Globale kennismaking

Globale kennismaking Globale kennismaking Kennismaking Tesla CMS 1. Dashboard 2. pagina beheer - pagina aanmaken - pagina aanpassen - pagina verwijderen - pagina seo opties - zichtbaarheid pagina 3. subpagina beheer - subpagina

Nadere informatie

Handleiding Joomla CMS

Handleiding Joomla CMS Handleiding Joomla CMS Inhoudsopgave Inloggen bij de beheeromgeving 3 Artikelen 4 Prullenbak bekijken 4 Nieuw artikel maken / bewerken 5 Afbeelding toevoegen aan artikel 6 Link in een artikel plaatsen

Nadere informatie

CMS Handleiding. Opgesteld door

CMS Handleiding. Opgesteld door CMS Handleiding Opgesteld door Alleen beschikbaar voor klanten v1.2 24-01-2008 Index 1. Inloggen... 3 2. De CMS Omgeving... 5 NAVIGATIE... 5 MENU... 6 CONTENT... 6 3. Content Wijzigen... 7 DE WERKBALK...

Nadere informatie

Algemene basis instructies

Algemene basis instructies Inhoud: Algemene basis instructies... 2 Pictogrammen en knoppen... 2 Overzicht... 3 Navigeren (bladeren)... 3 Gegevens filteren... 4 Getoonde gegevens... 5 Archief... 5 Album... 5 Tabbladen en velden...

Nadere informatie

De basisknop 'alle site inhoud tonen' links in uw scherm

De basisknop 'alle site inhoud tonen' links in uw scherm 2.1 Inleiding De mogelijkheden om binnen een Sharepoint-teamsite informatie (content) te presenteren, te delen en te beheren zijn groot. De starttemplates waar uit kunt kiezen (zie 1.3) kunnen door u zelf

Nadere informatie

Handleiding voor Leden Teampagina aanpassen op www.witkampers.nl

Handleiding voor Leden Teampagina aanpassen op www.witkampers.nl Handleiding voor Leden Teampagina aanpassen op www.witkampers.nl 1 Inleiding & Inhoudsopgave Deze handleiding helpt bij het aanpassen van de teampagina s op www.witkampers.nl. Het doel van de website is

Nadere informatie

Gebruikershandleiding websitebeheer m.b.v. Wordpress

Gebruikershandleiding websitebeheer m.b.v. Wordpress Gebruikershandleiding websitebeheer m.b.v. Wordpress Saft Websites Gebruikershandleiding Wordpress pag. 1 Inhoudsopgave Inhoudsopgave Inhoudsopgave Inleiding Inloggen in administratorgedeelte Informatie

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

Pro templates. Copyright Starteenwinkel.nl Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen

Nadere informatie

Handleiding Content Management Systeem

Handleiding Content Management Systeem Handleiding Content Management Systeem Inhoudsopgave Inhoudsopgave... 2 1. Inloggen... 3 2. Paginavolgorde... 3 3. Pagina en menutitel... 3 4. Pagina s bewerken... 4 5. De tekstverwerker... 4 6. Interne

Nadere informatie

Web Presence Builder. Inhoud

Web Presence Builder. Inhoud Web Presence Builder Inhoud Inhoud... 1 Wat is Web Presence Builder?... 2 Het categoriescherm... 2 De eerste stappen naar een eigen website... 3 Onderwerp selecteren en website naam aanpassen... 3 Vooraf

Nadere informatie

Ga naar www.basisonline.nl of selecteer in de website van de school- intranet basisonline

Ga naar www.basisonline.nl of selecteer in de website van de school- intranet basisonline Werken met de website basisonline Ga naar www.basisonline.nl of selecteer in de website van de school- intranet basisonline - login met de verkregen inlognaam en wachtwoord - je inlognaam is jouw emailadres

Nadere informatie

Werken met afbeeldingen in webpagina's

Werken met afbeeldingen in webpagina's Werken met afbeeldingen in webpagina's In webpagina's komen heel vaak afbeeldingen voor. Toch gaan webpagina's helemaal anders om met afbeeldingen dan bijvoorbeeld een PowerPoint-presentatie of een Word-document.

Nadere informatie

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen.

HTML en CSS. Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. Terminologie HTML en CSS HTML: Hyper Markup language Je website bestaat uit HTML. Dat is een taal die browsers (Internet explorer, Chrome, Safari) kunnen lezen. CSS: Cascading StyleSheet stylesheet for

Nadere informatie

Inhoud. Handleiding Dododent. Beste tandarts of praktijkmanager,

Inhoud. Handleiding Dododent. Beste tandarts of praktijkmanager, Handleiding Dododent Beste tandarts of praktijkmanager, Hartelijk dank voor de aanschaf van een website bij Dodoworks. Hieronder volgt een uitgebreide handleiding van het Dododent systeem waarmee de website

Nadere informatie

Portfolio s in Google Sites

Portfolio s in Google Sites Portfolio s in Google Sites Vanaf het schooljaar 2012-2013 biedt de NHL de optie om portfolio s aan te maken met Google Sites. De NHL-accounts bij Google zijn afgeschermd voor mensen die niet bij de NHL

Nadere informatie

PvdA websites Quick Start voor het werken met het Hippo CMS

PvdA websites Quick Start voor het werken met het Hippo CMS PvdA websites Quick Start voor het werken met het Hippo CMS Versie 2.0 Amsterdam, 16 maart 2009 2 Inhoudsopgave 1. Beginnen 5 1.1 Het CMS opstarten en afsluiten 5 1.2 De preview website bekijken 5 1.3

Nadere informatie

Handleiding. Beheeromgeving

Handleiding. Beheeromgeving Handleiding Beheeromgeving Kant en Klare Site Veluwelaan 80 8443 AH Heerenveen www.kantenklaresite.nl - info@kantenklaresite.nl - fax: 084-8368243 KvK 01134248 Inhoud Inloggen op de beheeromgeving...3

Nadere informatie

Highpotech IT. Nieuwsbrief. Een webpagina maken. heeft een zekere es- verhouding van 4:3

Highpotech IT. Nieuwsbrief. Een webpagina maken. heeft een zekere es- verhouding van 4:3 Uitgave 6 versie 2 Augustus 2010 Highpotech IT Nieuwsbrief Een webpagina maken Eerdere uitgaven Een website wordt weergegeven op een hoek waarvan de verhoudingen dicht in de Werken met Excel beeldscherm

Nadere informatie

Handleiding bij het Content Management Systeem

Handleiding bij het Content Management Systeem Handleiding bij het Content Management Systeem 1. Content Managent System startvenster 2. Hoe voeg ik een nieuwe gebruiker toe? 3. Hoe maak ik een hoofdmenu-item aan? 4. Hoe koppel ik tekst aan een hoofdmenu-item?

Nadere informatie

DEEL: THEMA. Klik op Thema. Nu verschijnen er een aantal thema s. Dubbelklik op een thema en je krijgt het volgende schermpje:

DEEL: THEMA. Klik op Thema. Nu verschijnen er een aantal thema s. Dubbelklik op een thema en je krijgt het volgende schermpje: DEEL: THEMA In het Notebook kun je zelf snel de bladzijde een leuk uiterlijk geven d.m.v. een thema. Deze thema s vind je op de volgende manier: Klik op Gallery Klik op Thema Nu verschijnen er een aantal

Nadere informatie

Stappenplan Website de Palster. Deze uitleg werkt met Internet Explorer. In Firefox of een andere browser werkt het anders.

Stappenplan Website de Palster. Deze uitleg werkt met Internet Explorer. In Firefox of een andere browser werkt het anders. Stappenplan Website de Palster Deze uitleg werkt met Internet Explorer. In Firefox of een andere browser werkt het anders. 1 Inhoudsopgave: Titel bladzijde Aanmelden op de website 3 Foto s in het fotoboek

Nadere informatie

Handleiding invoegen afbeeldingen en downloadlinks t.b.v. het CMS

Handleiding invoegen afbeeldingen en downloadlinks t.b.v. het CMS Handleiding invoegen afbeeldingen en downloadlinks t.b.v. het CMS Het blijkt dat we de nodige moeite hebben met het invoegen van afbeeldingen en het maken van downloadkoppelingen binnen ons CMS. Er moet

Nadere informatie

Uitleg site maken. Stap 2) Nu kiezen we de lay-out. Je kunt het aantal kolommen kiezen. Je kiest nu de eerste. Maar dit kun je later veranderen

Uitleg site maken. Stap 2) Nu kiezen we de lay-out. Je kunt het aantal kolommen kiezen. Je kiest nu de eerste. Maar dit kun je later veranderen Uitleg site maken Hier vind je een uitleg hoe je bij Google een site kunt maken. Maak eerst een map bij je Favorieten en zet daar onderstaande sites in. Later zet je daar ook je eigen site in. Handig om

Nadere informatie

Handleiding Joomla! Frontend, content en gallery. september 2014 versie 1.0

Handleiding Joomla! Frontend, content en gallery. september 2014 versie 1.0 Handleiding Joomla! Frontend, content en gallery. september 2014 versie 1.0 1 Inhoudsopgave Toevoegen nieuw artikel, of wijzigen...3 Extra web-functionaliteit...4 toevoegen van een foto/plaatje...4 toevoegen

Nadere informatie

Handleiding teksteditor

Handleiding teksteditor In deze handleiding leggen we de werking van de teksteditor uit. De teksteditor wordt gebruikt voor het bewerken van tekst. Uw tekstpagina s bewerkt u met deze editor, maar u vindt m op vele plekken terug.

Nadere informatie

Nieuwsbrieven versturen met MailPoet

Nieuwsbrieven versturen met MailPoet Nieuwsbrieven versturen met MailPoet Een nieuwe nieuwsbrief maken Om een nieuwe nieuwsbrief te maken klik je op de button nieuwe nieuwsbrief (2). Je kunt ook een reeds bestaande nieuwsbrief dupliceren

Nadere informatie

CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd

CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd Introductie Deze handleiding heeft tot doel een eenvoudige stap voor stap handleiding te zijn voor eindgebruikers van CMS Made Simple

Nadere informatie

Stap 2 Je template invullen

Stap 2 Je template invullen Stap 2 Je template invullen Allereerst in stap 2 gaan we onze template ophalen. Die staat op www.alphamegahosting.com/516, ook de uitleg is daar te vinden. Je kunt hem vanaf daar downloaden en op je bureaublad

Nadere informatie

Een pagina toevoegen en/of bewerken.

Een pagina toevoegen en/of bewerken. Een pagina toevoegen en/of bewerken. Na het inloggen in het CMS zie u het volgende: 2 3. Een klik op dit menu geeft een overzicht van alle pagina s waar de website op dat moment uit bestaat: 2. Een klik

Nadere informatie

Gebruikershandleiding online vacaturebanken vrijwilligerswerk

Gebruikershandleiding online vacaturebanken vrijwilligerswerk Gebruikershandleiding online vacaturebanken vrijwilligerswerk Inloggen Ga via uw internetbrowser (bij voorkeur Google Chrome of firefox) naar www.servicepuntvrijwilligerswerkhengelo.nl/typo3 U ziet vervolgens

Nadere informatie

Handleiding Joomla 3.x

Handleiding Joomla 3.x Handleiding Joomla 3.x Hoe voeg ik een plaatje toe aan mijn artikel? Geschreven: Sandra van der Heijden (2015) AdviesMies Introductie Wanneer je dit document voor je hebt, betekent dit dat je een Joomla

Nadere informatie

FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie:

FrontPage. Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: 1 FrontPage Kies Bestand, nieuw en kies vervolgens Website met één pagina: Kies bij voorkeur een locatie: Merk op dat de ene pagina die al aangemaakt is 'index.htm' heet. Dit is belangrijk De startpagina

Nadere informatie

Verwijderen van een persoon kan door de regel leeg te maken. Met de knop (linksonder) Verwijderen verwijdert u de hele pagina!

Verwijderen van een persoon kan door de regel leeg te maken. Met de knop (linksonder) Verwijderen verwijdert u de hele pagina! Algemeen Ingelogd als moderator/ pagina beheerder kan je teksten op een pagina plaatsen, bewerken of verwijderen. Ga naar de pagina waar je toegang tot hebt. Onder het logo en boven de foto (header) krijg

Nadere informatie

Ga naar http://www.domeinnaam.nl/wp-admin en log in met de gebruikersnaam en wachtwoord verkregen via mail.

Ga naar http://www.domeinnaam.nl/wp-admin en log in met de gebruikersnaam en wachtwoord verkregen via mail. INLOGGEN Ga naar http://www.domeinnaam.nl/wp-admin en log in met de gebruikersnaam en wachtwoord verkregen via mail. Vul hier je gebruikersnaam en wachtwoord in en klik op Inloggen. Bij succesvolle login

Nadere informatie

Algemene WordPress Handleiding uitleg basics Karin de Wit Design

Algemene WordPress Handleiding uitleg basics Karin de Wit Design Inhoudsopgave Inhoudsopgave... 2 Algemene informatie... 3 Introductie... 4 Inloggen bij WordPress... 5 Introductie in het dashboard... 6 Berichten en pagina's... 8 Bericht Categorieën... 8 Nieuw Bericht...

Nadere informatie

SWIS Handleiding Webbeheer

SWIS Handleiding Webbeheer 1 SWIS Handleiding Webbeheer Inhoudsopgave I. Inloggen in Webbeheer en je wachtwoord resetten... 4 Inlogscherm... 4 Dashboard met toptaken en statistieken... 4 Je wachtwoord vergeten?... 5 II. Modules:

Nadere informatie

Animatie. Korte opdrachten. Tekst Geluid Beeld

Animatie. Korte opdrachten. Tekst Geluid Beeld Animatie Korte opdrachten Tekst Geluid Beeld 1 Tekstanimatie Tekstlagen - Maak een Nieuw bestand: 800 px breed 200 px hoog 72 dpi kleur RGB. - Geef de achtergrond een kleur of verloop die je leuk vindt.

Nadere informatie

Handleiding Wordpress CMS 4-5-2015

Handleiding Wordpress CMS 4-5-2015 Handleiding Wordpress CMS 4-5-2015 Inhoud 1. Het dashboard.... 3 2. Een pagina of bericht aanpassen.... 5 3. Een nieuw bericht toevoegen... 6 4. Een pagina maken... 7 5. Website met sitebuilder... 8 6.

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

Pro templates. Copyright Starteenwinkel.nl Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Vormgever 5. Sliders aanpassen

Nadere informatie

Handleiding bij WSM MailformGenerator

Handleiding bij WSM MailformGenerator 1. Voorwoord Welkom bij de handleiding voor de WSM MailformGenerator. Deze handleiding hebben we gemaakt om je snel en gemakkelijk uit te leggen hoe de WSM MailformGenerator werkt. Deze handleiding is

Nadere informatie

CMS made simple Handleiding CMS: deel 1. Tekst en Links. drs. Erik van der Pol. Januari 2014, Versie 1.1

CMS made simple Handleiding CMS: deel 1. Tekst en Links. drs. Erik van der Pol. Januari 2014, Versie 1.1 CMS made simple Handleiding CMS: deel 1 Tekst en Links drs. Erik van der Pol Januari 2014, Versie 1.1 Introductie Deze handleiding is geschreven om met het beheermenu van CMS Made Simple (CMS) de website

Nadere informatie

Handleiding Website Laatste update: april 2014

Handleiding Website Laatste update: april 2014 Laatste update: april 2014 1. Google Search Tijdens de ontwikkeling van uw website werd er veel aandacht besteed aan optimalisatie voor zoekmachines zoals Google. Dit onder andere door de broncode technisch

Nadere informatie

INDEX Frontpage Handleiding:

INDEX Frontpage Handleiding: 1 INDEX Frontpage Handleiding: Pagina Onderdeel 1 Index 2 Eerste stappen 3 Website aanpassen: opstarten: Nieuwe pagina maken Wijzigingen 4 Opslaan Tekst opties instellen Modus ontwerpen/splitsen/code/voorbeeld

Nadere informatie

Handleiding voor het gebruik van uw nieuwe CMS

Handleiding voor het gebruik van uw nieuwe CMS Handleiding voor het gebruik van uw nieuwe CMS Inhoud (klik op een van onderstaande titels) 1. Toegang tot het CMS 2. Inhoud toevoegen 3. Afbeelding toevoegen 4. Bestand toevoegen 5. Instructie & Vragen

Nadere informatie

Basis handleiding CMS

Basis handleiding CMS Basis handleiding CMS Inhoud Basis handleiding CMS... 1 Inloggen... 3 Pagina beheren... 4 Pagina toevoegen/wijzigen... 6 WYSIWYG editor... 8 externe / interne link toevoegen... 9 Plaatjes toevoegen...

Nadere informatie

Schoolwebsite.nu. Snel aan de slag met uw website. Versie 4.0

Schoolwebsite.nu. Snel aan de slag met uw website. Versie 4.0 Schoolwebsite.nu Snel aan de slag met uw website Versie 4.0 Inhoudsopgave Inhoudsopgave... 2 1 Inleiding... 3 2 Voor dat u begint... 4 3 Teksten op de website... 6 4 Groepspagina s... 8 5 De groepspagina...

Nadere informatie

Handleiding Content Management Systeem Umbraco. Versie 1.2

Handleiding Content Management Systeem Umbraco. Versie 1.2 Handleiding Content Management Systeem Umbraco Versie 1.2 Inhoudsopgave 1. Umbraco tour... 3 1.1 Inloggen in het Umbraco systeem... 3 1.2 De indeling van Umbraco... 3 2. Inhoud van uw website... 5 2.1

Nadere informatie

De WordPress 3.5 Beginners Handleiding

De WordPress 3.5 Beginners Handleiding De WordPress 3.5 Beginners Handleiding Internetbureau Elephant april 13 Inhoud Introductie... 2 Inloggen... 3 Het dashboard... 5 Berichten en pagina's... 6 Nieuw Bericht... 6 Nieuwe Pagina... 8 Afbeeldingen,

Nadere informatie

Handleiding Wordpress

Handleiding Wordpress Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde

Nadere informatie

Handleiding WIS TM Live-editing Live editing is een WIS TM module

Handleiding WIS TM Live-editing Live editing is een WIS TM module Handleiding WIS TM Live-editing Live editing is een WIS TM module Live-edit 1. Inleiding De nieuwe versie van WIS tm beschikt over een aantal nieuwe functionaliteiten, waarvan vooral liveediting als nieuwe

Nadere informatie

Auteur : MM-Pro Datum : 09-02-09 Versie : 0.1.5. Handleiding Beheer Standaard Website

Auteur : MM-Pro Datum : 09-02-09 Versie : 0.1.5. Handleiding Beheer Standaard Website Auteur : MM-Pro Datum : 09-02-09 Versie : 0.1.5 Handleiding Beheer Standaard Versie Datum Opmerkingen 0.1.2 29-01-09 Note opgenomen op pagina 7 over subpagina's en weergave in menu structuur. 0.1.3 02-02-09

Nadere informatie

PLAKKEN Nadat u een gedeelte heeft geknipt of gekopieerd kunt u met dit icoon de selectie weer in het veld plakken.

PLAKKEN Nadat u een gedeelte heeft geknipt of gekopieerd kunt u met dit icoon de selectie weer in het veld plakken. KNIPPEN Als u na de selectie van een gedeelte van een tekst of een afbeelding op dit icoon klikt, knipt u de selectie uit het veld. Op deze manier kunt u het geselecteerde verwijderen, maar het ook juist

Nadere informatie

Gemeente Haarlemmermeer. Leer zelf je nieuwsbrief maken in YMLP. Opgesteld door: drs. Mariska I.R. Franse Datum: 6 en 11 juni 2013

Gemeente Haarlemmermeer. Leer zelf je nieuwsbrief maken in YMLP. Opgesteld door: drs. Mariska I.R. Franse Datum: 6 en 11 juni 2013 Gemeente Haarlemmermeer Leer zelf je nieuwsbrief maken in YMLP Opgesteld door: drs. Mariska I.R. Franse Datum: 6 en 11 juni 2013 Nwsbrf.nl Office @ Igluu Jansdam 2a 3512HB Utrecht 06 447 08 349 info@nwsbrf.nl

Nadere informatie

WORDPRESS. op de FourBottles manier. Pagina 1

WORDPRESS. op de FourBottles manier. Pagina 1 WORDPRESS op de FourBottles manier Pagina 1 Fijn dat je voor FourBottles hebt gekozen voor het realiseren van je website. Bij een website hoort natuurlijk een Content Management Systeem (CMS). Ik maak

Nadere informatie

Een checklist invoegen in je pagina

Een checklist invoegen in je pagina Een checklist invoegen in je pagina Een checklist bestaat uit 2 onderdelen, een tabel en een checkbox. Als eerste moet er een tabel gemaakt worden zodat de checkbox in de tabel kan worden ingevoegd. Ook

Nadere informatie

IMPACTS SITES BEZOOM V2.1 GEBRUIKSAANWIJZING

IMPACTS SITES BEZOOM V2.1 GEBRUIKSAANWIJZING INHOUD I. LOGIN IMPACTS SITES BEZOOM V2.1 GEBRUIKSAANWIJZING II. BEHEER UW WEBSITE 1. ONDERWERP A. Informatie B. Contactpersoon C. Links D. Footer E. Favicon 2. CMS A. Toevoegen (een pagina) B. SEO 3.

Nadere informatie

Handleiding CMS EWall

Handleiding CMS EWall Handleiding CMS EWall Inhoud: 1. Inleiding 2 2. Hoe log ik in op mijn EWall account? 3 3. Werken in groepen 4 4. Hoe plaats ik tekst achter een tegel? 5 5. Hoe plaats ik een foto achter een tegel? 6 6.

Nadere informatie

Handleiding Concrete5 website. Outbound Media

Handleiding Concrete5 website. Outbound Media Handleiding Concrete5 website Outbound Media In deze handleiding behandelen we de basis benodigdheden om uw website up-to-date te kunnen houden. We behandelen: Inloggen editen (bewerken) van tekst een

Nadere informatie

- Plan Zo kun je een. website bouwen!

- Plan Zo kun je een. website bouwen! - Plan Zo kun je een website bouwen! BoekjeHoeKanJeEenWebsiteBouwen.i1 1 8-7-2008 17:23:14 BoekjeHoeKanJeEenWebsiteBouwen.i2 2 8-7-2008 17:23:15 In dit boekje staat de uitgebreide versie van hoe je een

Nadere informatie

Je website is het centrum van al je online activiteiten. Dat werkt allerlei kanten op.

Je website is het centrum van al je online activiteiten. Dat werkt allerlei kanten op. Kathleenferrier.nl: het KF centrum online Handleiding voor de Blog & Nieuwssectie Je website is het centrum van al je online activiteiten. Dat werkt allerlei kanten op. Het is de plek waarvandaan mensen

Nadere informatie

Handleiding CMS Online Identity Webontwikkeling. Handleiding CMS

Handleiding CMS Online Identity Webontwikkeling. Handleiding CMS Handleiding CMS 1 Inhoudsopgave 1. Inloggen... 3 2. Het CMS... 3 3. Websitecontent... 4 3.1 Een nieuwe pagina toevoegen... 4 3.2 Een pagina wijzigen... 4 3.3 Een pagina verwijderen... 5 4. De WYSIWYG editor...

Nadere informatie

Een website omzetten naar WordPress

Een website omzetten naar WordPress 1 Een website omzetten naar WordPress Er zijn talloze programma s beschikbaar om websites te maken. In de titels Basisgids Websites maken met WordPress en Websites maken met WordPress voor senioren wordt

Nadere informatie

Algemene handleiding beheermodule: WORDPRESS. digital4u.nl effectief op internet

Algemene handleiding beheermodule: WORDPRESS. digital4u.nl effectief op internet Algemene handleiding beheermodule: WORDPRESS digital4u.nl effectief op internet Inhoudsopgave Algemene handleiding 03 04 04 05 05 06 06 07 07 08 09 11 12 13 15 16 17 Introductie Inloggen Dashboard Berichten

Nadere informatie