Dreamweaver. Een handleiding Linda Pieke

Dreamweaver Een handleiding Linda Pieke

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

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.

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.

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.

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. E-mail 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.

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.

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!

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 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.

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.

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.

Dit is het dialoogvenster wat je ziet:

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 #999999 ) 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.

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!

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.

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:

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).

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

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.

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.

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: mailto:[email protected]

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.

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 email.

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)

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.

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.

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.

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.

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 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.

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

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)

We zien hier een regel staan: 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”> 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”> <--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.