W EBMASTER DAG 8 HT08 Mahmud Al Hakim

Slides:



Advertisements
Liknande presentationer
Svenska WebDewey Introduktion
Advertisements

Mahmud Al Hakim Lärare - Folkuniversitetet
Att göra en modern släktbok för CD och webb med Disgen
Joomla © 2009 Stefan Andersson 1. Kontaktformulär  På varje seriös webbplats bör det finnas ett kontaktformulär.  Använd ej maillänkar, risk för spam!
E-post juni 2013.
Flexicon – Din systempartner
MS Excel 2007 Lektion 3 1 Copyright, Mahmud Al Hakim, 2008.
MS Excel 2010 – Dag 2 Mahmud Al Hakim
Frågor Allmän IT-kunskap avsnitt 1 kapitel 1 Repetition 4
Lektion 6 Mahmud Al Hakim
Mjukvara och nätverk Vad är det?.
Programmering B PHP Lektion 1
BENÄMNA lätta ord SPRÅKTRÄNING VID AFASIKg VIII
I NNEHÅLLSHANTERINGSSYSTEM J OOMLA CMS DAG 02 Mahmud Al Hakim
I NNEHÅLLSHANTERINGSSYSTEM J OOMLA CMS DAG 2 Mahmud Al Hakim
Enkel dator teknik Tips och tricks.
MS Excel 2007 Dag 1 Lärare: Mahmud Al Hakim. Agenda 1.Börja arbeta med Excel Hantera arbetsböcker 3.Formler 4.Formatera 5.Diagram Att läsa: sid.
MS Excel 2010 – Dag 1 Mahmud Al Hakim. Kursens innehåll 2 DagInnehåll 1 Introduktion till Excel 2010 Hantera arbetsböcker Formler Formatering Litteratur:
Eddie Arnold - Make The World Go Away Images colorées de par le monde Déroulement automatique ou manuel à votre choix 1 för dig.
I NNEHÅLLSHANTERINGSSYSTEM J OOMLA CMS DAG 1 Mahmud Al Hakim
I NNEHÅLLSHANTERINGSSYSTEM J OOMLA CMS L EKTION 2 Mahmud Al Hakim
Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012.
Svenska WebDewey Introduktion
WEBMASTER DAG 4 Mahmud Al Hakim
Mahmud Al Hakim Webmaster DAG 11 VT09 Mahmud Al Hakim
WEBMASTER DAG 10 VT09 Mahmud Al Hakim
W EBMASTER DAG 11 HT08 Mahmud Al Hakim
Mahmud Al Hakim Webmaster DAG 9 VT09 Mahmud Al Hakim
WEBMASTER DAG 13 Mahmud Al Hakim
Karolinska Institutet, studentundersökning Studentundersökning på Karolinska Institutet HT 2013.
Kommunpussel Din uppgift är att sortera de organisatoriska delar på nästa sida på ett sådant sätt att det överensstämmer med hur din kommun är organiserad.
Bastugatan 2. Box S Stockholm. Blad 1 Läsarundersökning Maskinentreprenören 2007.
Programmering B PHP Lektion 2
Svenska WebDewey Introduktion Harriet Aagaard Svenska Deweyredaktion
Programmering B PHP Lektion 1 Mahmud Al Hakim Folkuniversitetet
Enkätresultat för Grundskolan Elever 2014 Skola:Hällby skola.
1 Vänsterskolan Debattartiklar. 2 Aktuell krok 3 Aktuella krokar 1. Direkt krok.
I NNEHÅLLSHANTERINGSSYSTEM J OOMLA CMS L EKTION 1 Mahmud Al Hakim
Internet Styrdatorer och kablar Uppkopplade användare Servrar 182.QRZN.
Från Gotland på kvällen (tågtider enligt 2007) 18:28 19:03 19:41 19:32 20:32 20:53 21:19 18:30 20:32 19:06 19:54 19:58 20:22 19:01 21:40 20:44 23:37 20:11.
Arbetspensionssystemet i bilder Bildserie med centrala uppgifter om arbetspensionssystemet och dess funktion
Lektion 3 Mahmud Al Hakim
Excel Kalkylering Fortsättningskurs
DATABASHANTERING för programmerare Lektion 3 Mahmud Al Hakim
TÄNK PÅ ETT HELTAL MELLAN 1-50
DATABASHANTERING för programmerare Lektion 4 Mahmud Al Hakim
1 Joomla © 2009 Stefan Andersson 1. 2 MÅL 2 3 Begrepp Aktör: en användare som interagerar med webbplatsen. I diagrammet till höger finns två aktörer:
Kouzlo starých časů… Letadla Pár foteček pro vzpomínku na dávné doby, tak hezké snění… M.K. 1 I Norrköping får man inte.
Mitt första Java program Mahmud Al Hakim Copyright, Mahmud Al Hakim, 1.
Servicekunskap Hur vill du jobba med boken?
2 Agenda 1. Börja arbeta med Excel Hantera arbetsböcker 3. Formler 4. Formatera 5. Diagram 6. Skriva ut 7. Referenser mellan kalkylblad 8. Arbeta.
Arbetspensionssystemet i bilder Bildserie med centrala uppgifter om arbetspensionssystemet och dess funktion
Mahmud Al Hakim 2  Mål för kursen  Kursplanering  Kurslitteratur  Betygsättning  Grunder om databaser  Tabeller.
Enkätresultat för Grundskolan Föräldrar 2014 Skola - Gillberga skola.
I NNEHÅLLSHANTERINGSSYSTEM J OOMLA CMS DAG 01 Mahmud Al Hakim
Informationsteknologi - Lektion 2 Trådlöst nätverk (WLAN) Trådlöst nätverk (WLAN) Filarkivet: Filarkivet:
IT - LEKTION 14 MS POWERPOINT 2007 – DEL 2. Agenda Copyright, Mahmud Al Hakim, Grafik och diagram 6.
I NNEHÅLLSHANTERINGSSYSTEM J OOMLA CMS L EKTION 3 Mahmud Al Hakim
Dreamweaver fortsättning DAG 2 VT09 Mahmud Al Hakim
Lektion 1 Webbplatsens layout Mahmud Al Hakim Dreamweaver 8 fortsättningskurs 1 Copyright, Mahmud.
Excel 2003 Grundkurs Lektion 1 Mahmud Al Hakim 1.
Förskoleenkät Föräldrar 2012 Förskoleenkät – Föräldrar Enhet:Hattmakarns förskola.
Dreamweaver fortsättning DAG 1 VT09 Mahmud Al Hakim
DATABASHANTERING för programmerare Lektion 5 Mahmud Al Hakim
1 Jan Lundström OV’s Hemsida Utbildning Ledare. 2 Jan Lundström OV’s Hemsida Standard Lagrum.
IT - LEKTION 12 MS POWERPOINT 2007 – DEL 1. Agenda Copyright, Mahmud Al Hakim, Börja arbeta med PowerPoint.
CSS del 2 Kvarnbrink Mer elementreferens ID refererar man till med #-tecken #content { width: 600px; } Klassnamn har en punkt före.newsitem.
Copyright, Mahmud Al Hakim, Hakimdata.se Agenda  Kunskapstest  Windows Skrivbord (Desktop)  Aktivitetsfält  Fönster och menyer  Systemåterställning.
Copyright, Mahmud Al Hakim, Lektion 3 Ramar, Navigeringsfält, Lager Mahmud Al Hakim
Enkel dator teknik Tips och tricks. Välja storlek och radavstånd Här väljer du storlek på texten vi vill att ni använder 14 p till rubriker och 12 p till.
Presentationens avskrift:

W EBMASTER DAG 8 HT08 Mahmud Al Hakim

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

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, Mahmud Al Hakim, 2008

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 ( XAMPP ( Copyright, Mahmud Al Hakim, 2008

5 L ADDA NER OCH INSTALLERA XAMPP Gå till Klicka på XAMPP XAMPP finns för många olika operativsystem. Välj ”XAMPP for Windows” Ladda ner XAMPP Installera! Copyright, Mahmud Al Hakim, 2008

6 XAMPP K ONTROLLPANEL Starta Apache Copyright, Mahmud Al Hakim, 2008

7 T ESTKÖRA GENOM ATT SURFA TILL HTTP :// LOCALHOST / Copyright, Mahmud Al Hakim, 2008

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, Mahmud Al Hakim, 2008

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, Mahmud Al Hakim, 2008

10 SSI I D REAMWEAVER Copyright, Mahmud Al Hakim, 2008

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, Mahmud Al Hakim, 2008

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

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å Copyright, Mahmud Al Hakim, 2008

14 N ÅGRA TOPPDOMÄNER ToppdomänAnvändningsområde.seSverige.comKommersiella syften..orgInternationella organisationer.nuNiue.ukStorbritannien En Lista över toppdomäner finns här: Copyright, Mahmud Al Hakim, 2008

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å Copyright, Mahmud Al Hakim, 2008

16 R EGISTRERA EN DOMÄN Svenska domäner Internationella domäner Gratis domäner Copyright, Mahmud Al Hakim, 2008

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, Mahmud Al Hakim, 2008

18 I NFOGA Ö VERRULLNINGSBILDER Copyright, Mahmud Al Hakim, 2008

19 I NFOGA F LASH TEXT Copyright, Mahmud Al Hakim, 2008

20 I NFOGA F LASH KNAPPAR Copyright, Mahmud Al Hakim, 2008

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, Mahmud Al Hakim, 2008

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, Mahmud Al Hakim, 2008

23 S KAPA EN NY BIBLIOTEKSPOST Copyright, Mahmud Al Hakim, 2008

24 S KAPA EN NY BIBLIOTEKSPOST Copyright, Mahmud Al Hakim, 2008

25 R EDIGERA EN BIBLIOTEKSPOST Copyright, Mahmud Al Hakim, 2008

26 O BS ! LBI - FILEN SPARAS UNDER L IBRARY Copyright, Mahmud Al Hakim, 2008

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

28 U PPDATERA EN BIBLIOTEKSPOST Copyright, Mahmud Al Hakim, 2008

29 T A BORT KOPPLINGEN TILL EN BIBLIOTEKSPOST Copyright, Mahmud Al Hakim, 2008

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å CSS 2 referens finns här: Copyright, Mahmud Al Hakim, 2008

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

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, Mahmud Al Hakim, 2008

33 Skapa en CSS-Regel i DW via CSS-Panelen Copyright, Mahmud Al Hakim, 2008

34 Copyright, Mahmud Al Hakim, 2008

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, Mahmud Al Hakim, 2008

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, Mahmud Al Hakim, 2008

37 Copyright, Mahmud Al Hakim, 2008

38 Använd CSS-Klasser Copyright, Mahmud Al Hakim, 2008

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, Mahmud Al Hakim, 2008

40 Exportera CSS-regler Copyright, Mahmud Al Hakim, 2008

41 Länka till en extern CSS-mall Copyright, Mahmud Al Hakim, 2008

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

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

44 Mer om CSS-Panelen Copyright, Mahmud Al Hakim, 2008

45 CSS-Mallar Copyright, Mahmud Al Hakim, 2008

46 CSS-Layouter Copyright, Mahmud Al Hakim, 2008

47 CSS Table Gallery Copyright, Mahmud Al Hakim, 2008

48 Copyright, Mahmud Al Hakim, 2008

49 Free CSS Templates Copyright, Mahmud Al Hakim, 2008

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 Ladda ner några CSS-mallar Testa mallarna på din tabell Copyright, Mahmud Al Hakim, 2008