Dreamweaver cs3 och css

517 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
517
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dreamweaver cs3 och css

  1. 1. Tim Berners-Lee (the inventor of the webb) http://www.nationalencyklopedin.se/kort/timbernersleeBerners-Lee [bə:nəzli:´],Sir Tim, född 1955, brittisksystemutvecklare ochdatavetenskapsman,upphovsman till WWW påInternet. Berners-Lee varverksam vid CERN iGenève och föreslog 1989ett hypertextsystem(jämför hypertext) förspridning av information.Han skrev program förden första WWW-servernoch den förstawebbläsaren 1991, startenför den explosivautvecklingen av webben.
  2. 2. Webbplats med god funktion(navigeringslist)och tilltalande layout(grönt,blått)
  3. 3. Kanske inte så bra ? Sidan fortsätter nedåt med mycket bilder och grafik som tar lång tid att ladda Navigeringe n lite
  4. 4. En webbläsare förstår bara html-kod W3C bestämmer hur html-koden skall se utThe World Wide Web Consortium (W3C) is an international consortium whereMember organizations, a full-time staff, and the public work together to developWeb standards.Det finns olika html-standardsHTML 2.0, HTML 3.2 (som är förlegade)HTML 4.0 (5.0 nyare)XHTML 1.0 strict , XHTML 1.0 transitional (modern)X står för extended som är en flexibel påbyggnad.Dreamweaver kollar automatiskt koden mot den standard som du valt när duskapar ett nytt tomt dokumentDu kan själv kolla din html-kod eller css-kod hos w3cOm du efter gymnasiet vill lära dig webbdesign kommer all html-kod och css-kodatt kollas hos w3chttp://validator.w3.org/ http://jigsaw.w3.org/css-validator/
  5. 5. Du väljer html-standard i Dreamweavernär ett nytt dokument skapas Dreamweaver kollar din html-kod mot den standard du angett
  6. 6. Skapa en ny webbplats 1 Öppna Dreamweaver CS3 Klicka på Plats och Ny Plats Kalla din plats för DWCS3 Klicka på Nästa
  7. 7. Skapa en ny webbplats 2 Markera översta alternativet Välj sedan Nästa
  8. 8. Skapa en ny webbplats 3 Markera översta alternativet Välj sedan Nästa
  9. 9. Skapa en ny webbplats 4 Markera alternativet Ingen Välj sedan Nästa
  10. 10. Dina dokument läggs i mappenDWCS3Klicka på Klart
  11. 11. Det bör se ut så här, klicka påKlart
  12. 12. Öppna ett nytt html-dokument Skriv ditt namn Spara dokumentet som testsida_XY (dina initialer) Klicka på fyrkanten
  13. 13. Skapa en plats på skolans webbserver Välj Plats.. Hantera Platser, Redigera Välj Avancerat.. Fjärrinformation Fyll i dialogrutan ostrarealsgymnasium.se NAMN=Två första bokstäver i ditt efternamn + 2 första i förnamn (ej å,ä,ö) Lösen får du av läraren Klicka på Testa
  14. 14. Anslut till skolans fjärrserver  Klicka på connectknappen  Markera ditt dokument på höger sida  Klicka på ladda upp
  15. 15. Nu öppnar vi filen på internet Din sida finns på adressen www.ostrarealsgymnasium.se/NAMN/filnamn. html
  16. 16. En webbplats skall ha en grafiskprofil Den grafiska profilen kan bestå av: T.ex. Två typsnitt Två/tre färger Rubriktext Logotyp/Bild Brödtext Tänk på upphovsrätten, hämta material på Multimediabyrån och använd skolans kameror
  17. 17. I DWCS3 välj Arkiv…Nytt ochSkapa, spar somstilmallstest_XY
  18. 18. Skapa en webbplats medboken Övningsboken ”Allt i en bok” kap. 3 sid. 59-61 punkt 1-5 beskriver hur det går till. Ändra under punkt 4 vid Lokal rotmapp: H:DokumentDWCS3 Välj Fönster…Filer så ser du din webbplats Gör en mapp Css (för dina extra stilmallar) Gör en mapp Images (för dina extra bilder)
  19. 19. Dreamweaver CS3 och Cssformatmallsfiler En webbläsare förstår bara (X)HTML-kod som är det som finns mellan olika html-taggar <body> Starttagg för dokumentområdet </body> Sluttagg med snedstreck Du måste lära dig några html-taggar, t.ex <p> stycke <h1>rubrik (rad 3) www.w3.org är en organisation som sköter xhtml-standarden (rad 6) Charset=utf-8 gör att vi kan använda å, ä och ö
  20. 20. Lär dig webbdesign med Dreamweaver cs3Du skapar textrutor, kolumner och plats förbilder med css-stilmallar Textområde Textområde
  21. 21. All modern design av webbsidor görs med stilmallar, cascading stylesheets Vi provar med ett enkelt exempel! Skissa på ett papper hur din layoyt ska se ut med rubriktext, brödtext, textkolumner och bilder. (Kolumner, rutor och rektangulära områden görs med div-taggar i kap. 7) Koppla en tom formatmall och skriv formatregler för de olika taggarna <p>, <h1>, <img> som du vill ändra på. Gör du en webbplats med flera sidor kan formatmallen (css) användas på alla sidor. En ändring av en regel slår igenom på alla sidor på en gång. Fomatmallen (css) ger dig total kontroll över hur du formger din layout så att sidan kan se ut som en broschyr eller ett tidningsuppslag.
  22. 22. Så här skall texten se ut Öppna ett nytt dokument i DW och skriv texten som visas till höger. Spar som stilmalltest_XY.htm i H:DokumentDWCS3 (XY=Dina initialer) Dela fönstret så du ser kod och design samtidigt. Använd egenskaps-panelen och ställ in rubrikstycken, rubrik och underrubrik. Pröva att klicka på taggväljaren och markera taggarna en i taget. Öppna ett nytt tomt malldokument och spar som malltest_XY.css i din Css-katalog.
  23. 23. Nu skall vi skapacss-regler som styr layout och design Öppna panelen Css och klicka på kedjelänken nederst för att koppla din stilmall (malltest_XY.css). Klicka på plustecknet nederst och välj enligt dialogrutan överst. Klicka OK. Fyll sedan i enligt dialogrutan till höger.
  24. 24.  Nu har din rubrik <h1> blivit blå Gör på samma sätt en ny CSS- regel för underrubriken <h2> men gör den grön. Gör ytterligare en ny regel för brödtexten <p> och gör den orange med storlek 14px I fönstret CSS visas dina nya regel h1, h2 och p. Infoga en bild(city.jpg) i dokumentet före ordet skolan. Skriv en regel för taggen <img> (ruta->flyt->vänster och box 20px marginal) Du kan slå av och på användning av stilmallar Visa…Style Rendering…Visa stilar eller knappen Stilmallen visas som flik
  25. 25. Klicka på flikenstilmall.css
  26. 26. Inför nya css-regler Skapa luft kring bilden (ändra regeln för img) Gör ett rektangulärt område för text eller bild Lägg till ny regel en s.k. div tag #rektangel
  27. 27. Lägg till det rektanguläraområdet för att komma under bilden Tryck på <Enter>  Välj Infoga….Layoutobjekt…Div-kod  Markera rektangel vid ID och tryck <Enter>
  28. 28. Validera din kod hos W3C Markera all html-kod och kopiera den Gå till http://validator.w3.org/ på internet Klistra in koden via Direct input Gör samma med css-koden http://jigsaw.w3.org/css-validator/
  29. 29. Rätta felet: Här är det img och alt-tag som måste ha ett värde!
  30. 30. Skapa knappar som du kan använda i en navigationslist med PSH dokument i PSH (100 x 30 px) Öppna nytt Fyll med grön färg, använd hinken Använd Textverktyget, storlek 22p och skriv Home på knappen Se till att du bara har ett textlager (som det står ett T på) Välj Arkiv…Spara för Webb & Enheter. Spar med namnet Home_XY och lägg bilden i din webbplats DWCS3 och mappen images
  31. 31. Skapa understruken text Välj Fönster Tecken i PSH Markera textlagret Tryck på understruket T i panelen tecken Välj Arkiv…Spara för Webb & Enheter. Spar med namnet Home_U_XY och lägg bilden i din webbplats DWCS3 och mappen images
  32. 32. Skapa två knappar till Ändra texten till Info och spar för Webb & Enheter som Info_XY Gör texten understruken och spar på nytt som Info_U_XY Ändra texten igen till till Produkter och spar som ProdukterXY Gör texten understruken och spar som Produkter_U_XY Vi har nu totalt sex lika stora knappar
  33. 33. Skapa en navigationslist medDW Öppna nytt dokument i DW, spar som Navigationslist_XY Infoga tabell, 1rad, tre kolumner 300 px bred Välj Infoga Bildobjekt Överrullningsbild, välj två matchande bilder som du gjort i PhotoShop Gör samma sak i de två övriga cellerna
  34. 34. Så här kan det se ut när det ärklart Lägg till länkar till bilderna Spar och visa med Explorer och testa din navigationslist
  35. 35. Skapa ett nytt dokument tidning_XYSkapa en ny stilmall tidningsmall_XY för media screen. Infoga div-taggar (se nästa sida) Bildområde Textområde #bild_XY #left_col_XY Textområde #right_col_XY
  36. 36. Design med två textrutor
  37. 37. Kapitel 1. Kom igång medDreamweaver CS3 och stilmallar
  38. 38. Kapitel 1. Kom igång med Dreamweaver CS3 Kopiera Lesson01 från fronter till din webbplats, du måste göra mappen Lesson01 och mappen images innan du kopierar Kapitlet ger en översikt av layout och design Ändra titel på sidan Ändra rubriker Infoga text och bilder Länka till andra sidor Spara dokumentet på din egen webbplats h:documentDW_CS3Lesson01index_XY.htm där XY är dina initialer Skapa layout med css-stilmallar. En flik med stilmallen öppnas när du gör en ändring i stilmallen. Arbeta med id –taggar (div #taggnamn) Spar övningsfilen home.htm som home_XY.htm i samma katalog där XY är dina initialer
  39. 39. Kapitel 2 . Göra inställningar och användastilmall för mobiltelefon(handheld)
  40. 40. Kapitel 2 . Göra inställningar iDreamweaver CS3 Arrangera paneler Studera verktygsfälten Göra allmänna inställningar Skriva direkt i html-koden Arbeta med taggväljaren Anpassa verktygsfältet Favoriter Arbeta med statusfältet Testa stilmallar för print och handheld
  41. 41. Kapitel 3 . Vi länkar externastillmallar i Dreamweaver CS3 Skapa mapparna Lesson03 på din sajt Skapa mappen CSS i mappen Lesson03 Skapa mappen Images och i den mappen Nav Kopiera alla filer som hör till mapparna från Fronter Gå till 61 i boken och öppna home_final Förhandsgranska och stäng filen Fortsätt på sid 63 och punkt 1. Spara som home_XY.html
  42. 42. Kapitel 3 . Vi länkar externa stillmallar iDreamweaver CS3. Här visas print
  43. 43. Kapitel 3 . Stillmallar iDreamweaver CS3 Kopiera katalogen lesson3 till din webbplats Här skapar vi nya css-regler för både dokument (screen) och utskrift(print) Vi skapar klassregler för stycken <p>. Dessas börjar med en punkt (.more) t.ex. och kan användas på flera ställen på sidan Vi kan även göra en stillmall som passar för mobiltelefon(handheld). Sätt bredden på taggen <body> till 240px.Viktigt är att inte ha stora bilder. Gör en regel för taggen <img> och sätt attributet ”visa”till ”ingen”. Kom ihåg att alltid spara dokument och stilmallar på din egen webbplats (h:dataDW_CIB) Du kan alltid titta i html-koden under taggen <link> för att se vilka stilmallar som kan används Du kan slå av och på användning av stillmall
  44. 44. Kapitel 4. Text i Dreamweaver CS3.Vi skapar tabell och css-reglerför taggen <th> tablehead
  45. 45. Kapitel 4. Text iDreamweaver CS3 Kopiera katalogen lesson4 till din webbplats Skriva rubriker och brödtexter Hämta text från annat dokument Infoga numrerade listor Kontrollera stavning Sök och ersätta text Skapa tabeller och lägga till css-regel (th) tablehead Importera tabeller. Använda klassregel. Obs! använd kolon i övningen punkt 4 sid.101.
  46. 46. Kapitel 5 . Bilder i Dreamweaver cs3 Bilder på webben är i formatet gif, jpg eller png. Jpg komprimerar bra och passar bäst för bilder. Gif kan göra bakgrunden (blå) genomskinlig Png är ett format som på sikt kommer att ersätta gif som är patenterat och kostar i licensavgift att använda. Redigera och optimera bilder Använda Fireworks och Bridge Övningen images_start.html använder fel css-fil. Tag bort main_final.ccs, print_final.css och koppla main.css i stället
  47. 47. Webbgrafik i Fireworks Öppa filen navbar.png i Fireworks Öppna panelen Objekt och ändra knapptexten enligt bilden ovan. Klicka på länkguiden och skriv in webbadresser till tidningarna. Detta går även att göra i Dreamweaver Exportera till din webbkatalog enligt anvisningarna i boken. Gör en mapp navbar för bilderna.
  48. 48. Länkar, kap.6 länkar till andra sidor (nysida.html) till webbadresser (http://www.nysida.htm) e-postlänkar (mailto:min@epost.se) länkar i ett dokument (anlarlänkar)
  49. 49. Använda id-taggar. Kap 7 Här skall vi skapa rektangulära områden som liknar layouten på en tidningssida Vi skriver CSS-regler för id-taggar och sparar dessa i vårt dokument CSS-reglerna exporteras till en separat stilmall när vi är klara Vi använder linjalen och stödlinjer Färgmarkera områdena för bättre synlighet
  50. 50. Kap7. Formge med id-element sid.144 #wrapper #header #logo #nav #banner #content #leftColumn #rightColumn #footer
  51. 51. Justera egenskaper för id-taggar med css-regler #wrapper #header #logo Vi måste skapa 9 st id taggar (#wrapper, #nav #header o.s.v.) och använda css-regler på #banner dessa så vi får önskad design och sedan #content infoga dessa efter varandra så de #leftColumn #rightColumn rektangulära områdena placeras på rätt sätt #logo, #nav och skall ha olika höjd men ligga inuti #header, #banner utanför #leftColumn och #rightColumn #footer skall flyta vänster, resp höger och får inte vara för breda Ändra färgerna på id-taggarna så #wrapper får grön bakgrund, #header rosa o.sv. Gör lite mellanrum mellan #nav och #banner genom att lägga till 10px marginal upptill eller nedtill. Om du gjort rätt skall utrymmet mellan dessa bli rosa, inte grönt. #nav och # banner ligger inuti #header som har rosa bakgrund. Vi lägger css-reglerna i html-dokumentet och flyttar dom till en css-fil på slutet Boken gör en regel för selektorn body med centrerad text. Sedan görs texten vänsterställd i #wrapper. Detta görs för att det skall fungera med äldre webbläsare. Dreamweaver kan färglägga dina id-taggar med View…Visual Aids…CSS Layot Backgrounds
  52. 52. Skapa interaktiva sidor. Kap.8 Vi lär oss om beteenden och skapar interaktiva sidor Beteendet byta bild vid mouseOver Beteendet öppna ny webbsida vid mouseClick Beteendet växla bild vid mouseOver
  53. 53. Beteendet onMousOut ochonMouseOversom byter bild och byter tillbaka
  54. 54. Ajax och Spray. Kap9.(Överkurs) Ajax och Spray hör till det som kallas Web 2.0 Ett pluginprogram sköter lokalt på datorn uppgifter som annars skulle utföras på fjärrservern. Detta ökar funktionaliteten och ökar snabbheten.
  55. 55. Formulär kap.10. Vi använder formulärobjet som t.ex. textfält, alternati vknappar, kryss rutor, listor och några Ajax och Spray objekt för att kontrollera inmatningen i textfält E:mail och Username får ej vara tomma Sist finns en Skickaknapp
  56. 56. Multimedia kap. 11 Här provar vi bildvisare och Flashvideo

×