W EBMASTER DAG 8 HT08 Mahmud Al Hakim

En presentation över ämnet: "W EBMASTER DAG 8 HT08 Mahmud Al Hakim"— Presentationens avskrift:

1 W EBMASTER DAG 8 HT08 Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se

2 2 A GENDA 9.00 – 10.15 Lite om Webserver Server Side Include (SSI) Att koppla webbserver till domän 10.15 – 10.30Paus 10.30–12.00 Roll-over bilder (Överrullningsbilder) Flash text och Flash knappar Bibliotek (Library) 12.00 – 13.00Lunch 13.00 – 14.15CSS i Dreamweaver 14.15 – 14.30Paus 14.30 – 16.00CSS Mallar och Layouter Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

3 3 W EBBSERVER En webbserver har som uppgift att tillhandahålla webbsidor eller andra filer som distribueras vanligtvis via Internet Kommunikationen sker med hjälp av en webbläsare (klient). Användaren väljer webbsidor och webbläsaren beställer webbsidorna från webbservern och visar dem på användarens datorskärm. De vanligaste webbserverprogrammen är: Apache HTTP Server. Microsoft Internet Information Server Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

4 4 W EBBSERVERPROGRAMPAKET Webbserverprogrampaket är ett paket av program som inkluderar de mest vanligaste programvara som krävs för att köra databas- och serverbaserade webbsidor. T.ex. Apache, MySQL, PHP och phpMyAdmin. Exempel på webbserverprogrampaket är: AppServ (http://www.appservnetwork.com/)http://www.appservnetwork.com/ XAMPP (http://www.apachefriends.org/)http://www.apachefriends.org/ Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

5 5 L ADDA NER OCH INSTALLERA XAMPP Gå till http://www.apachefriends.org/ http://www.apachefriends.org/ Klicka på XAMPP XAMPP finns för många olika operativsystem. Välj ”XAMPP for Windows” Ladda ner XAMPP Installera! Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

6 6 XAMPP K ONTROLLPANEL Starta Apache Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

7 7 T ESTKÖRA GENOM ATT SURFA TILL HTTP :// LOCALHOST / Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

8 8 SSI – S ERVER S IDE I NCLUDE SSI är en teknik för att enkelt göra dynamiska sidor genom att kommunicera med webbservern. Informationen som hämtas från webbservern kan t.ex. vara aktuell tid, besöksräknare mm. Det går även att inkludera dokument och bilder som t.ex. en sidfot som ska användas på flera sidor. Filtillägget på sidor som använder SSI måste ändras till.shtml Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

9 9 SSI - EXEMPEL Visa aktuell datum och tid Infoga ett dokument OBS! om du infogar ett HTML-dokument måste du se till att det inte innehåller element och taggar som bara får förekomma en gång, t.ex. och. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

10 10 SSI I D REAMWEAVER Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

11 11 L ITE OM TCP/IP TCP/IP (Transmission control protocol / Internet Protocol) Är samlingsnamnet för de nätverksprotokoll (kommunikationsprotokoll) för datorer som kommunicerar på Internet. TCP delar upp information i datapaket som adresseras, numreras och skickas iväg till mottagaren. TCP garanterar felfri överföring av data via Internet. IP ser till att informationen hamnar hos rätt mottagare genom att kontrollera adresserna och bestämma vilken väg paketen ska ha. En IP-adress är ett unik nummer som tilldelas alla datorer anslutna till Internet (eller i ett lokalt nätverk) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

12 12 Ö VNING V AD HAR DIN DATOR FÖR IP- ADRESS ? Starta kommandotolken: Start – Kör – CMD Skriv ipconfig och tryck på retur. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

13 13 D OMÄNNAMN (D OMÄN ) Ett domännamn är ett unikt namn på en dator som erbjuder en offentlig tjänst www eller e-post. Domännamnen finns till för att människor ska slippa komma ihåg de numeriska IP-adresser. Domännamnet översättas till motsvarande IP- adress innan kommunikation sker. Detta sker vanligen automatiskt och osynligt genom en uppslagning i DNS databasen, något som kan liknas vid Internets telefonkatalog. Läs mer på http://sv.wikipedia.org/wiki/Dom%C3%A4nnamn http://sv.wikipedia.org/wiki/Dom%C3%A4nnamn Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

14 14 N ÅGRA TOPPDOMÄNER ToppdomänAnvändningsområde.seSverige.comKommersiella syften..orgInternationella organisationer.nuNiue.ukStorbritannien En Lista över toppdomäner finns här: http://sv.wikipedia.org/wiki/Lista_%C3%B6ver_toppdom%C3%A4ner Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

15 15.SE S TIFTELSEN FÖR I NTERNETINFRASTRUKTUR.SE (Stiftelsen för Internetinfrastruktur): Ansvarar för Internets svenska toppdomän,.se. Kärnverksamheten är registrering av domännamn samt administration och teknisk drift av det nationella domännamnsregistret, samtidigt som.SE verkar för en positiv utveckling av Internet i Sverige. Läs mer på http://www.iis.se/ Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

16 16 R EGISTRERA EN DOMÄN Svenska domäner http://www.loopia.se/ Internationella domäner http://www.GoDaddy.com Gratis domäner http://www.dot.tk/ Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

17 17 DNS ( D OMAIN N AME S YSTEM ) DNS eller namnservrar talar om för ISP (Internet Service Provider) vilken "adress" ett domännamn har. När du har ett konto hos ett webbhotell så måste det vara rätt DNS servrar på Ditt domännamn. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

18 18 I NFOGA Ö VERRULLNINGSBILDER Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

19 19 I NFOGA F LASH TEXT Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

20 20 I NFOGA F LASH KNAPPAR Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

21 21 B IBLIOTEK (L IBRARY ) Ett bibliotek är en särskild Dreamweaver-fil som innehåller en samling enskilda resurser eller kopior av resurser som du kan placera på dina webbsidor. Resurserna i ett bibliotek kallas biblioteksposter. Poster som du kan spara i ett bibliotek är bland annat bilder, tabeller, ljud och Flash-filer. Du kan automatiskt uppdatera alla sidor som använder en bibliotekspost när du redigerar posten. Tips: Bibliotek i Dreamweaver liknar funktionen " sidhuvud och sidfot " i MS Word. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

22 22 E XEMPEL PÅ EN BIBLIOTEKSPOST Anta att du skapar en webbplats för ett företag som vill att en sidfot ska visas på varje sida. Du kan skapa en bibliotekspost som innehåller denna sidfot och använda biblioteksposten på varje sida. Om denna sidfot ändras kan du ändra biblioteksposten och automatiskt uppdatera varje sida där den används. OBS! För länkade poster som t.ex. bilder sparar biblioteket endast en referens till posten. Den ursprungliga filen måste ligga kvar på den angivna platsen för att biblioteksposten ska fungera ordentligt. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

23 23 S KAPA EN NY BIBLIOTEKSPOST Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

24 24 S KAPA EN NY BIBLIOTEKSPOST Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

25 25 R EDIGERA EN BIBLIOTEKSPOST Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

26 26 O BS ! LBI - FILEN SPARAS UNDER L IBRARY Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

27 27 I NFOGA EN BIBLIOTEKSPOST FRÅN ”A SSETS ” Drag och släpp eller Insert Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

28 28 U PPDATERA EN BIBLIOTEKSPOST Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

29 29 T A BORT KOPPLINGEN TILL EN BIBLIOTEKSPOST Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

30 30 CSS – Repetition Vad menas med förkortningen CSS? Varför bör man använda CSS? Hur många versioner av CSS finns det idag? Hur deklarerar man en CSS regel? Ge exempel! Hur skapar man en CSS-klass? Ge exempel! Hur kopplar man ihop CSS och HTML? Tips: Läs mer på http://www.w3.org/Style/CSS/http://www.w3.org/Style/CSS/ CSS 2 referens finns här: http://www.w3schools.com/css/css_reference.asp Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

31 31 Skapa en CSS-Regel Selektor (väljare) { Egenskap: värde;... } p { font-family: Arial; font-size: 18pt; color: red } Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

32 32 Koppla ihop CSS och HTML Lägg stilmallen i dokumenthuvudet med Style-taggen CSS p {font-family:Arial; font-size:18pt; color:red} Min första CSS-mall Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

33 33 Skapa en CSS-Regel i DW via CSS-Panelen Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

34 34 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

35 35 CSS-klasser Du kan dela in dina regler i olika klasser. Detta underlättar strukturering av webbsidan. Med klasser specificerar man en regel som kan återanvändas. Klasser ger möjlighet att skapa ett enhetligt utseende! Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

36 36 Skapa en CSS-klass.blue {color:blue} Blå text OBS! Klassnamn får inte påbörjas med en siffra Observera punkten Här används klassen Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

37 37 Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

38 38 Använd CSS-Klasser Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

39 39 En extern CSS-mall Spara alla CSS-regler i en fil med filändelsen CSS t.ex. style.css Koppla CSS-filen via taggen link i dokumenthuvudet. Ex. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

40 40 Exportera CSS-regler Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

41 41 Länka till en extern CSS-mall Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

42 42 Pseudo-klasser för länkar a:link {color: red} a:visited{color: blue} a:hover {color: green} a:active {color: yellow} Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

43 43 Skapa en ID-regel #a { color:red } En Rubrik # istället för punkt id istället för klass Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

44 44 Mer om CSS-Panelen Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

45 45 CSS-Mallar Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

46 46 CSS-Layouter Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

47 47 CSS Table Gallery http://icant.co.uk/csstablegalleryhttp://icant.co.uk/csstablegallery Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

48 48 www.csszengarden.com Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

49 49 Free CSS Templates www.freecsstemplates.org www.freecsstemplates.org Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

50 50 H EMUPPGIFTER 1. Skapa en lämplig sidfot till din webbplats genom att använda en bibliotekspost. 2. Skapa följande Falsh meny m.h.a. Flash knappar. 3. Testa några ”designade” CSS-tabeller Skapa en enkel HTML-tabell. Gå till http://icant.co.uk/csstablegallery/ http://icant.co.uk/csstablegallery/ Ladda ner några CSS-mallar Testa mallarna på din tabell Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008