ࡱ > @ jbjb 9 y l \ \ \ \ 8 < H , _ ( ( _ _ _ _ _ _ _ , hb d _ @ _ \ \ \ 8 _ " " \ \ \ \ _ u [ _ t $ Yc o l ] F _ _ _ )^ f e e _ Webdesign II -8 Zoek en vervang Zoek naar: in de code in alle documenten in je map en vervang dat in: NOTE: Het is eigenlijk beter en netter om al je stijlen in een aparte map te zetten bijvoorbeeld stijlen. Redefine HTML-tag:
Kies in het stijlenpalet het ikoontje met het plusje: new style. Redefine de HTML-tag: p. Nu ga je dus voor je hele site alle paragrafen ofwel ps stylen. Ga uitgebreid langs alle opties en paneeltjes. Kies Apply om het effect van de wijziging meteen te zien. Probeer zo de typografie precies zo te maken als je het hebben wilt. Fonts Zet de fontgrootte en interlinie (lineheight) altijd in % of Em, dan kan de gebruiker van Win-Explorer nog een eigen fontgrootte instellen. Gebruik eens iets anders dan Times en Arial: bijv. de Georgia, de Andale mono, Verdana, Trebuchet of Comic Sans. Deze zijn op vrijwel alle computers genstalleerd. Alleen genstalleerde fonts kun je gebruiken. Als ze niet in Dreamweaver staan kun je ze aanmaken via edit font list onderin het fontlijstje. Trebuchet, Arial, Helvetica, sans-serif betekent dan: als de gebruiker geen Trebuchet heeft, neem dan de Arial, als-ie die niet heeft, neem dan Helvetica etc. Redefine op dezelfde manier de H1, H2, H3 Herhaal de bovenstappen voor de Headings 1 t/m 3. Redefine de algeme links Kies weer het plusje, kies nu advanced. Style de links per selector: eerst a:link, Dan a:visited, dan a:hover, dan a:active. Wijzig ze evt later via de tag inspector. Body Background: een achtergrondkleur van de hele site Elke HTML-tag kan een background hebben. Je kunt niet alleen de kleur aangeven maar ook een plaatje. Redefine de tag BODY, op dezelfde manier zoals we de P net hebben gemaakt. Definieer nu maar 1 attribuut: kies bij background een achtergrondkleur. Bekijk met Apply het effect. Je kunt dus met het wijzigen van 1 kleurtje je hele site in 1x wijzigen. Background image Dan is de volgende stap het plaatsen van een backgroundplaatje. Maak het plaatje altijd 100% op 72 dpi in een Image-programma. Je kunt in de css aangeven hoe het plaatje moet repeteren en hoe het moet uitlijnen: met woorden: left top bottom right en center, met percentages vanaf left top: eerst hori, dan verti: 30% 80%; of idem met getallen: 20px 40px. Een mix: 50% 20px (hori gecentreerd, van boven 20 px gezakt) Repeteren kan via de repeat-opties. TIP 1: Je kunt hier handig gebruik van maken. Maak bijvoorbeeld verloooptintjes door het verloopje maar 1 pixel breed of hoog te maken, en die repeterend in de achtergrond te zetten. TIP 2: Je kan achtergronden toevoegen in een bepaalde TD of andere HTML-tags. Code-voorbeeld: background-image: url(skyline.jpg); background-repeat: no-repeat; background-position: bottom right; background-attachment: fixed; Body: margin en padding Wil je geen standaard witte marge en padding rondom je site, dan voeg je toe bij de css van de BODY: padding:0; margin:0; Open en edit style.css Je kan het css ook direct als code bekijken en editen door het bestand te openen (of rechtsklik op de css > Go to code, of dubbelklik). Het werkt dan verder zoals we gezien hebben bij het maken en wijzigen van inline-stijlen en bij het HTML-code editen: je krijgt overal hulp van Dreamweaver als je een paar eerste letters intikt. Deze code moet je wel leren lezen, bij schrijven krijg je dus veel hulp. Deze code is hetzelfde als de getallen in de tag-inspector, en ook hetzelfde als de paneeltjes die je te zien krijgt bij een nieuwe stijl (of rechtsklik: edit stijl). Stijl het linkmenu Selecteer nu de hele ul (linksonderin) en zet er een div omheen (insert > layout objects) met id: menu Maak een nieuwe stijl aan: via het plusje in het stijlenpalet, we noemen de stijl #menu (het hekje betekent: de stijl wordt in de HTML met id aangeroepen) Define in menu.css staat aan. Kies bij Font de Arial, size 85%, en zet bij Box de width op 200px. Nu gaan we de unordered list