Grundlæggende DW, HTML, CSS, udskæring
Oversigt over dagen Grundlæggende HTML Grundlæggende CSS Grundlæggende Dreamweaver (meget kort) Fra Photoshop til Dreamweaver Opgave i udskæring / HTML / CSS Fremlæggelse af opgaver og evt. cv sider
Grundlæggende HTML Lidt om HTML HTML er et kodesprog man benytter til at lave en side med HTML er enkelt og bruges primært til at generere visuelle ting med (i modsætning til f.eks. PHP) Andre sprog kan benyttes inde i en HTML kode PHP, ASP, javascript, css mv. * HTML betyder: http://www.superusers.dk/artikler/html.htm
Grundlæggende HTML HTML er bygget op af tags Eksempler på tags Startes altid med <tagnavn> Sluttes altid med </tagnavn> Eksempler på tags <HTML></HTML> Selve dokumentet <HEAD></HEAD> Head– vises ikke på side men bruge til f.eks. Css/css angivelse, metatags osv. <TITLE></TITLE> Navnet på siden – vises i browser <BODY></BODY> Starter det som brugeren kan se HTML eksempel 1
Grundlæggende HTML Man kan formatere tekst og lign. via HTML tags. <b>Fed tekst</b> eller <strong>Fed tekst</strong> <em>italic tekst</em> eller <i>italic tekst</i> <a href=”link.html”>dette er et link</a> <p>Paragraf – felt som kan indeholde tekst billeder mv</p> Genvej til ny / linjeskift med <p> = ENTER <br /> linjeskift – Genvej er SHIFT+ENTER Tags uden slutning Nogle slutter sig selv, f.eks.: Linjeskift: linje 1 <br /> linje 2 <br /> linje 3 HTML eksempel 2
Grundlæggende HTML Nogle ting bruger mange tags, f.eks. Tabeller <TABLE> starter selve tabellen <TR> Generer en ny række <TD> Generer et nyt felt Attributter kan tilføjes til nogle tags Link: <a href=”link.html” target=”_blank”>dette er et link</a> Attribut: Target (fortæller hvor den skal åbne linket) Billede: <img src=”billede.jpg" alt="Beskrivelse" width="128" height="122"> Attributter: Src, alt, width, height Tabel <TABLE width="100%" border="0" Atributter: width og border Tabelfelt: <td align="left" valign="top"> Attributter: align og valign HTML eksempel 3
Grundlæggende HTML Hvad laver dette eksempel? <html> <head> <title>Hello 3 semester</title> </head> <body> <img src="billede.jpg" alt="Beskrivelse" width="128" height="122"> <table width="100%" border="0"> <tr> <td align="left" valign="top">tekst</td> <td align="left" valign="top”> <a href="link.html” target="_blank">tekst</a></td> </tr> </table> </body> </html>
Grundlæggende HTML Lær mere Hvad er vigtigt? Benyt Dreamweaver – studer koden Køb ekstra bogmateriale, f.eks.: www.libris.dk HTML HTML bogen Prøv dig frem Hvad er vigtigt? Forstå princippet At kunne læse koden
Mini øvelse Lav et eksempel på en HTML fil som skriver: Der skal være fed tekst og et link Der skal være et billede på siden Der skal være en tabel med 3 rækker og 2 kolonner Koden skal skrives direkte! Dreamweaver må IKKE benyttes til at genererer koden i denne øvelse
Grundlæggende CSS Hvorfor benytte CSS? Forstå CSS CSS kan styre en hel side via en fil CSS har flere muligheder end HTML CSS giver nemt overblik Forstå CSS Kan sammenlignes med f.eks. typografi i Word HTML svarer til teksten CSS svarer til typografi der kan sættes på
Grundlæggende CSS 3 måder at benytte CSS I <Head> på dokumentet direkte Skrives på samme måde som i ekstern fil Ved hjælp af en style attribut F.eks. <td style=”color: #000000;”> = sort tekstfarve i felt I en ekstern fil Den vi kigger nærmere på Mest brugte metode – benyt generelt denne Nemmest at rette i mv.
Grundlæggende CSS Sæt CSS fil sammen med HTML CSS eksempel 1 Tilføj i <HEAD></HEAD> <link href="css_eksempel.css" rel="stylesheet" type="text/css"> Attributten href angiver placeringen af CSS fil Attributten rel styre relationen mellem HTML og CSS fil StyleSheet: Benytter altid det fra CSS filen, evt ovenpå Alternative StyleSheet: Benytter fra HTML først Attributten Type styrer hvilken type det er. Det gør at browsere der ikke understøtter typen kan ignorere den. Er som default altid text/css CSS eksempel 1
Grundlæggende CSS Elementer – en linje består typisk af Selektor { egenskab: værdi; } Selektor = på hvad egenskaben skal gælde Egenskab = ting man skal ændre, f.eks. farve Værdi = Værdien for egenskaben, f.eks. sort
Grundlæggende CSS Grundlæggende 3 typer selektorer i ekstern css fil Klasser, Tags og Links Klasser Kan bruges på de elementer man ønsker – navngives frit Klasser skrives med punktum foran i css filen Tags Vises automatisk på den pågældende html tag Tags skrives så de er magen til HTML tag, men uden punktum foran Links Bruges på links generelt og kan tilføjes til klasse-links CSS eksempel 2
Grundlæggende CSS De mest brugte: Baggrundbillede: Tekst: Links: background-image:url(navnbillede.jpg); Gentagelse: background-repeat:repeat-x; Tekst: Skrifttype: font-family:Arial, Helvetica, sans-serif; Størrelse: font-size:10px; Farve: color:#000000; (Her sort) Links: a:link, a:active, a:visited og a:hover
Grundlæggende CSS Kom videre med CSS Hvad er vigtigt? Lav en CSS fil med Dreamweaver og lad den hjælpe www.libris.dk CSS Hvad er vigtigt? Forstå hvorfor det er smart at benytte Forstå princippet i de 3 typer og hvordan de benyttes
Grundlæggende CSS Hvad gør denne CSS fil a:link{ color:#000000; } a:active{ color:# 000000; } a:visited{ color:# 000000; } a:hover{ color:#FFFFFF; } .min1{ background-image:url(css_eksempel_3.jpg); background-repeat:repeat-x; height:122px; } .min2{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#FF0066; font-weight:normal; p{ font-weight:bold; color: #000000;
Mini øvelse Lav en html fil og en css fil (husk at gemme dem relativt) Lav en HTML side der beskriver dig (f.eks. job, interesser eller lign). Kort beskrivelse Hav min. en tabel, noget teks, et link og et billede på siden. Brug css til at styre designet, farver, skrifter, billeder, links mv
Hvorfor bruge Dreamweaver Det er nemmere/hurtigere Et stort skema i kodeskrivning = 10 minutter Et stort skema i DW = 1 minutter Den husker for dig Kan afslutte tags Den har en god kodeeditor Bl.a. Med farvet tekst
HTML med Dreamweaver Eksempel på hvor nemt HTML laves med DW Tabel Billede Link Prøv dig selv frem med flere ting Lav øvesider
CSS med Dreamweaver Eksempel på hvor nemt CSS laves med DW CSS dokument vedhæftes til html dokument Tag laves og vises Klasse laves og vises Prøv dig selv frem med flere ting Lav øvesider med eksterne css filer
Inden udskæring Hvilke ting skal du tænke på når du designer? Det er ikke DTP – det skal kunne køre fornuftigt på en side Benyt gerne mønstre, men hold dem så de kan gentages (ikke et stort billede) Design til målgruppen, men også til udskæring
Udskæring Hvilke ting er vigtige når man udskærer Klip så småt som muligt og benyt css til gentagelser Benyt farvede tabeller frem for billeder, hvor det er muligt Bruges tabeller, så definer altid justering, størrelser, spacing mv. Undgår problemer med mellemrum i design mv. Benyt ekstern CSS fil til at styre så meget som muligt, frem for HTML
Udskæring Hvordan griber du det an når du har PSD fil Tegn en skitse med tabelindeling på papir Kig designet igennem efter mønstre der gentager sig Læg mærke til om noget indhold ligger ”ovenpå” noget andet Påbegynd tabelopbygning i Dreamweaver Lav billeder og definer dem i ekstern css fil
Opgave Lav designet om til HTML, CSS (udskæring) Benyt ekstern css fil Farver, skrifter, billeder i design, mv skal opsættes heri Forstå HTML kode (hvis du benytter DW) Kig på koden, sørg for du forstår hvad DW laver Prøv evt. selv at skrive noget af det direkte Udskær designet ud fra de vigtige ting, der var beskrevet før
Fremlæg opgave Fremlæg opgaven Fremlæg evt. CV side Udvælg et stykke HTML kode og forklar det Udvælg et stykke CSS kode og forklar det Forklar hvordan du har skåret ud, og hvordan du har fulgt de vigtige ting omkring udskæring Fremlæg evt. CV side Kom evt. ind på hvad du kunne have gjort bedre mv. HUSK (både nu og temaprojekter) Man er her for at lære – ikke for at være bedst