De tips die ik hier geef zijn verzameld uit eigen behoefte of die van vrienden, doe ermee wat je wil, of doe er niets mee! Ze zijn voornamelijk bedoeld voor Dreamweaver (CS3 of CS4).
Ik ga uit van een basis kennis van HTML of Dreamweaver en geef geen ondersteuning bij de uitvoering, dus als jou niet lukt wat hier staat of als je het er niet mee eens bent... soit!
Massa's informatie over deze onderwerpen is te vinden via Google, dus je had mij eigenlijk niet nodig;-)
De lijst van tips wordt vast nog wel uitgebreid, al naar gelang wat er in me op komt.
Klik op het onderwerp en je springt naar de bijbehorende tekst.
- Enter toets slaat een regel over
- Extra Spaties geven lukt niet
- Design centreren voor alle schermresoluties
- Flashfilmpje op je pagina - achtergrond transparant maken
- Alt teksten niet zichtbaar in Internet Explorer 8 en Mozilla Firefox
- Internet Explorer 6 ondersteunt geen transparantie van PNG bestanden.... mogelijke oplossing
- Tabellen bewerken in Dreamweaver CS4
- Hotspots maken in Dreamweaver CS4
- Enter toets slaat een regel over
Pas bezig met Dreamweaver snapte ik niet waarom een Enter in de tekst een regel oversloeg. De oplossing bleek eenvoudig:
Geef Shift+Enter en je gaat keurig naar een nieuwe regel.
De logica zit hem hierin: In HTML veroorzaakt een Enter een nieuwe alinea <p> en Shift + Enter leidt tot een nieuwe regel <br />
Probeer maar eens en kijk in de Code-weergave (de bron van de pagina dus) en het wordt meteen duidelijk
Terug naar Boven
- Extra Spaties geven lukt niet
Je merkt al snel dat je bij het opmaken van je webpagina tussen tekens maar één spatie kan geven.
Dat kan knap lastig zijn als je meer witruimte wil.
De reden dat het gebeurt is dat programma's gebaseerd op het WYSIWYG (What You See Is What You Get) principe de Enter opdracht direct omzetten naar HTML en die taal staat niet meer dan één spatie toe.
Met de toetsen Ctrl+Shift ingedrukt kun je zoveel extra spaties geven als je maar wil. Het programma zet dit om naar   (= non breaking space)
Voorbeeld: Drie maal een extra spatie geven leidt in de bron tot :
Terug naar Boven
- Design centreren voor alle schermresoluties
Methode 1:
Maak een gecentreerde tabel met 1 kolom en 1 rij en voeg daar je hele lay out in. Simpel hè?
Methode 2:
Regel het in een style sheet: In de CSS maak je een div (id) die je bijvoorbeeld noemt "container" en daar stop je de hele inhoud in.
Stel je gaat uit van een lay out van 1000px breed en 600px hoog. Het centreren regel je m.b.v. de regel "margin"
In de CSS schrijf je dat zo:
#container {
width: 1000px;
height: 600px;
margin: 0 auto;
}
Terug naar Boven
-
Flashfilmpje op je pagina - achtergrond transparant maken
In Dreamweaver voeg je een flashfilmpje (swf bestand) in op je pagina via Invoegen > Media > Flash, maar dat weet je waarschijnlijk al.
Het staat een stuk netter als je zorgt dat de achtergrond van dat filmpje geen groot, effen, vlak is, maar transparant.
Dat regel je kipsimpel in de eigenschappen van de pagina en wel als volgt:
Selecteer het flashbestand (grijs vlak met f in het midden) en klik onderaan in je eigenschappenscherm op "Parameters".
Onder "Parameter" vul je in: wmode. Klik vervolgens op "Waarde" en daaronder vul je in transparent (let op de spelling, het moet in het Engels). Klik op OK en dat klusje heb je ook weer geklaard.
- Alt teksten niet zichtbaar in Internet Explorer 8 en Mozilla Firefox
Dit is de vlag van New Zealand:
Als je er met je muis overheen gaat verschijnt er een tekstkadertje met de tekst "Vlag van New Zealand".
Dat is althans de bedoeling! We noemen dat de "Alt tekst".
Gebruik je Internet Explorer 8 of Mozilla Firefox als webbrowser, dan bestaat de kans dat je die tekst niet ziet verschijnen.
Je kunt dit oplossen als bezoeker van internet sites, maar als maker van webpagina's kun je ook iets doen waardoor je bezoekers hier niet mee worden geconfronteerd. Let op:
Voor de bezoeker heb ik alleen een oplossing voor IE8, helaas. Wat je kan doen is het volgende:
Ga in IE naar Extra en vink aan: Compatabiliteitsweergave.
Klik vervolgens daaronder op Instellingen voor compatabiliteitsweergave en in het scherm dat opent zet je helemaal onderaan een vinkje voor "Alle websites met de compatabiliteitsweergave weergeven.
Als websitemaker kun je ervoor zorgen dat al je bezoekers jouw alt teksten zien, maar dan moet je iets aanpassen in de bron. Ik laat nu eerst de bron (in Dreamweaver CS3) zien als je niets onderneemt en op de gebruikelijke manier een Alt tekst invoert:
<img src="nz_flag.jpg" alt="Vlag van New Zealand" width="30" height="20" />
De truc is nu dat je het woordje alt wijzigt in title, dus het wordt dan:
<img src="nz_flag.jpg" title="Vlag van New Zealand" width="30" height="20" /> Dat doe ik nu bij deze vlag:
Dit gaat ook op voor alt teksten van hotspots binnen afbeeldingen en het werkt in zowel IE8 als Firefox.
NOOT:
Degenen die hun websites maken met Dreamweaver CS4 hoeven niets aan te passen, want er staat vanaf die versie automatisch "title" in de bron!
- Internet Explorer 6 ondersteunt geen transparantie van PNG bestanden.
Jammer IE6 onze mooie transparante PNG bestanden niet transparant laat zien, maar met een foei lelijk lichtgrijs vlak erachter.
Dit onderwerp is vooral interessant voor degenen die graag transparante PNG bestanden op hun website gebruiken in plaats van GIF bestanden,
simpelweg omdat de transparantie van PNG stukken mooier is dan die van GIF.
Op de techniek ga ik hier niet in, daarover is via Google genoeg informatie te vinden.
Er bestaan twee verschillende IE6 "fixes", stukjes Javascript die het probleem zouden moeten oplossen, maar ik heb na allerlei testen geconcludeerd dat ze niet goed werken.
Omdat ik voor mijn grafische bewerkingen werk met Paint Shop Pro was ik niet bekend met de optie dat je een PNG bestand ook kan opslaan als 8bit PNG, wat wèl mogelijk is in Adobe Photoshop en.....
DIE PNG bestanden laat Internet Explorer 6 wèl mooi transparant zien!!
Het gaat als volgt:
Sla een transparant PNG bestand in Photoshop (het voorbeeld is in versie CS4 gemaakt) op "voor Web en Apparaten" en je hebt de oplossing!
Ik heb de instellingen gebruikt zoals hier getoond >>>
niet gehinderd door veel kennis van Photoshop;-)
- Tabellen bewerken in Dreamweaver CS4
In versie CS4 van Dreamweaver is het lastiger om tabellen te bewerken (kleurtje van de randen, achtergrond invoeren e.d.) dan in vorige versies.
Stel... ik wil een tabelrand een kleurtje geven, dan doe ik dat als volgt:
Ik selecteer in de ontwerpweergaven de hele tabel en ga dan in de codeweergave met m'n cursor meteen na de rand breedte staan.
Vervolgens klik ik op de spatiebalk en hòp... een menu komt, met o.a. de optie "border color".
Deze methode werkt ook voor andere tabelbewerkingen, zoals een achtergrond invoegen.
Terug naar Boven
- Hotspots maken in Dreamweaver CS4
Soms kan het nuttig zijn om aan één afbeelding verschillende links te verbinden. Dat kun je doen met zogenoemde Hotspots.
Als voorbeeld heb ik een afbeelding van een ladenkast genomen, waar op iedere lade een naam staat van een website. Ik wil dat men op die naam kan klikken en dan surft naar de gekozen site.
Ladenkast zonder Hotspots
Ladenkast met Hotspots
De Werkwijze:
Selecteer de afbeelding, dan verschijnt links onderaan in je beeld het overzichtje van de hotspotvormen die je kunt kiezen:
In dit geval is de rechthoek de meest geschikte, klik die aan en trek met je linkermuisknop een rechthoek over de bewuste tekst heen:
Je krijgt nu waarschijnlijk een melding dat je een Alt tekst moet invullen, klik maar op OK.
Dan ga je onderaan de toewijzing van die hotspot regelen, vul de vlakken in zoals ik laat zien, maar dan met de link die jij eraan wil geven natuurlijk!
Bij "Doel" kies ik _blank, wat betekent dat de link in een nieuw venster wordt geopend en de huidige pagina ook open blijft staan. Ik wil namelijk niet dat men bij mij vertrekt, maar alleen een uitstapje maakt naar die link!;-)
Bij "Alt" vul je in wat men ziet als men met de muis over de hotspot gaat.
NOOT: Bij Koppeling staat dit tekentje # al ingevuld. Dat laat je staan als je linkt naar een andere pagina binnen je website, blader er heen via het gele envelopje rechts.
Koppel je echter naar een pagina buiten je website, dan moet je het # teken weghalen en de volledige URL van die link invullen, zoals ik dat hier heb gedaan:
De volgende twee hotspots maak je op precies dezelfde manier.
Terug naar Boven