Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se Webmaster DAG 9 VT09 Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se.

Slides:



Advertisements
Liknande presentationer
Mahmud Al Hakim Lärare - Folkuniversitetet
Advertisements

Att göra en modern släktbok för CD och webb med Disgen
Innehåll, huvudpresentation 4. Rangordning av ordningsstörningar (fråga 1) 5. Problem med nedskräpning (fråga 1a) 6. Problem med skadegörelse (fråga 1b)
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!
FLASH – Lektion 5 Mahmud Al Hakim 1Copyright, Mahmud Al Hakim, 2010.
Excel 2003 Grundkurs Dag 2 Mahmud Al Hakim 1.
MS Excel 2007 Lektion 3 1 Copyright, Mahmud Al Hakim, 2008.
MS Excel 2010 – Dag 2 Mahmud Al Hakim
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
Tillämpning av bolagsstyrningskoden vid årsstämmor 2005 och 2006.
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.
©storm.
I NNEHÅLLSHANTERINGSSYSTEM J OOMLA CMS L EKTION 2 Mahmud Al Hakim
Skånedatabasen & Region Skånes tillgänglighetsmodell
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
W EBMASTER DAG 8 HT08 Mahmud Al Hakim
WEBMASTER DAG 13 Mahmud Al Hakim
Excel Pivottabeller och Makron
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.
V E R S I O N N R 2. 0 T A V E L I D É E R I M I L J Ö.
Bastugatan 2. Box S Stockholm. Blad 1 Läsarundersökning Maskinentreprenören 2007.
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.
Excel 2003 Grundkurs Lektion 5 Mahmud Al Hakim 1.
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
Excel Kalkylering Fortsättningskurs
DATABASHANTERING för programmerare Lektion 3 Mahmud Al Hakim
TÄNK PÅ ETT HELTAL MELLAN 1-50
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.
IT - Lektion 11 MS Excel 2007 –Del 4/5 1 Copyright, Mahmud Al Hakim, 2008.
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.
Mallar i Word och Excel Lektion 1 Mahmud Al Hakim
Adobe FLASH - Lektion 01 Mahmud Al Hakim 1Copyright, Mahmud Al Hakim, 2010.
IT - Lektion 8 MS Excel 2007 –Del 2/5 1 Copyright, Mahmud Al Hakim, 2008.
Excel 2003 Grundkurs Lektion 2 Mahmud Al Hakim 1.
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.
FLASH – Lektion 3 Mahmud Al Hakim 1Copyright, Mahmud Al Hakim, 2010.
Excel 2003 Grundkurs Lektion 1 Mahmud Al Hakim 1.
© Anders Broberg, Ulrika Hägglund, Lena Kallin Westin, 2003 Föreläsning 12 Sökning och Sökträd.
FLASH – Lektion 2 Mahmud Al Hakim 1Copyright, Mahmud Al Hakim, 2010.
BVForum - en genomgång för revisorer Sören Thuresson.
Dreamweaver fortsättning DAG 1 VT09 Mahmud Al Hakim
Copyright, Mahmud Al Hakim, Hakimdata.se Agenda 1. Ordbehandlingsprogrammet 2. Redigera text 3. Formatera text Att läsa Litteratur: modul 3,
1 Jan Lundström OV’s Hemsida Utbildning Ledare. 2 Jan Lundström OV’s Hemsida Standard Lagrum.
MS Excel 2007 Fortsättning Lektion 2 1 Copyright, Mahmud Al Hakim, 2008.
IT - LEKTION 12 MS POWERPOINT 2007 – DEL 1. Agenda Copyright, Mahmud Al Hakim, Börja arbeta med PowerPoint.
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
Excel 2003 för assistenter Dag 2 Mahmud Al Hakim 1.
2 Agenda 1. Börja arbeta med PowerPoint 2. Arbeta med presentationer 3. Formatera 4. Mallar, teman och bildobjekt 5. Grafik och diagram 6. Effekter och.
Presentationens avskrift:

Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se Webmaster DAG 9 VT09 Mahmud Al Hakim mahmud@hakimdata.se www.hakimdata.se

Agenda 9.00 – 10.15 CSS - Lagerhantering 10.15 – 10.30 Paus 10.30–12.00 Server Side Include (SSI) Flash text och Flash knappar Bibliotek (Library) 12.00 – 13.00 Lunch 13.00 – 14.15 Beteenden och Spry Framework Fragment (Snippets) Tillägg (Extensions ) 14.15 – 14.30 14.30 – 16.00 Vidareutveckling av projektarbete Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 2

Lager (AP-element) Ett lager i Dreamweaver är oftast ett AP-element AP-element står för ”Absolut Positionerat element”. Ett AP-element är en div-tagg som har tilldelats en absolut position. Ett lager kan innehålla text, bilder eller annat innehåll. Lager används för att utforma webbsidor. Lager kan placeras framför och bakom varandra. Du kan dölja vissa lager och visa andra samt flytta lager över skärmen. Du kan placera en bakgrundsbild i ett lager. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Infoga Div-taggar Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Formatera Div-taggar med CSS Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Infoga ett lager (Ap-Div) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Tips: Ctrl-dra (Windows) om du vill rita flera lager i följd.

Panelen AP-element och CSS-format Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Dubbelklicka och skriv ett nytt namn Byta namn på ett lager Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Dubbelklicka och skriv ett nytt namn

Lagrets egenskaper Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 CSS-P-element: En identifierare för Lagret som används t.ex. av CSS och JavaScript. V: Vänster, T: Topp, B: Bredd, H: Höjd Z-Index: Lagrets ordning i förhållande till andra Lager när de överlappar varandra Tips: Klicka på frågetecknet för mer information.

Ändra bakgrundsfärg och bakgrundsbild i ett lager Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Visa och dölja lager Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Överlappade lager och Z-Index Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Markera flera lager med Ordna flera lager Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Markera flera lager med Skift + Klicka

Stödraster (Grid) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Stödlinjer Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Visa CSS-lagerbakgrunder Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Övning Skapa följande layout m.h.a. tre lager Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Centrera AP-Element (Överkrus) Infoga ett Huvud-AP-Element och ange följande egenskaper Lägg till följande egenskap margin-left: -300px; (minus halva bredden) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Centrera AP-Element Infoga nya AP-element innanför Huvud-AP-Elementet. Tips: Håll ner ALT för att få nya lager innuti huvudlagret. Ladda ner källkoden från www.hakimdata.se Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

SSI – Server Side Include 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

SSI - exempel Visa aktuell datum och tid <!--#echo var="DATE_LOCAL"--> Infoga ett dokument <!--#include file=”sidfot.html" --> 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. <HTML> och <BODY>. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

SSI i Dreamweaver Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Infoga Flash text Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Infoga Flash knappar Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Bibliotek (Library) 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

Exempel 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

Skapa en ny bibliotekspost Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Redigera en bibliotekspost Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Obs! lbi-filen sparas under Library Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Infoga en bibliotekspost Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Drag och släpp eller ”Infoga”

Uppdatera en bibliotekspost Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Beteenden Ett beteende är en kombination av en händelse och en åtgärd (JavaScript funktion) som sätts igång när händelsen inträffar. Beteendekod är ett JavaScript som körs på klienten. Det betyder att koden körs i webbläsaren och inte på servern. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Övning: Öppna webbläsarfönster Detta är en Null Link Skriv # eller Javascript:; Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Övning: Validera ett formulär Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Spry framework Spry framework är ett JavaScript-bibliotek som ger webbdesigners möjlighet att bygga webbsidor som erbjuder besökarna en större upplevelse. Spry framework är utformade så att koden är enkel och lätt att använda för dem som har grundläggande kunskaper i HTML, CSS och JavaScript. En Spry-widget är ett sidelement som ger en större användarupplevelse genom aktivering av åtgärder från användaren. T.ex. widgeten Textfält för validering Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Widgeten Textfält för validering Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Tips Klicka på frågetecknet för mer info.

Fragment (Snippets) Med fragment (Snippets ) kan du spara innehåll för att snabbt kunna återanvända det. Du kan skapa, infoga eller redigera fragment av HTML, JavaScript, PHP med flera. Några fördefinierade fragment som du kan använda som utgångspunkt finns tillgängliga under panelen ”Filer– Fragment”. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Att skapa kodfragment Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

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

Skapa kortkommando till dina Fragment och exportera uppsättning som HTML Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Övning: Använd DW-Fragment Skapa en ny JavaScript fil. Spara som print.js Infoga ”Skriv ut sida” som finns under JavaScript – webbläsarfunktioner. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

”Skriv ut sida” fort. Skapa et nytt HTML-dokument. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008 Skapa et nytt HTML-dokument. Infoga JavaScript filen ”print.js” Infoga en knapp och ändra attributet value till ”Skriv ut”. Lägg till ett beteende: Välj händelsen ”onClick” från listan och skriv funktionens namn och parenteser till höger. Testa knappen i en webbläsare.

Tillägg (Extensions) Extensions (Tillägg) är nya funktioner som du enkelt kan lägga till i Dreamweaver. Det finns t.ex. tillägg som gör att du kan formatera om tabeller, infoga kalender eller skapa fina CSS-Menyer. Extensions kan laddas ner från Adobe Exchange http://www.adobe.com/se/exchange/ Extensions har filändelsen mxp Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Extension Manager (Tilläggshanteraren) Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Ladda ner och installera Extensions Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Övning Ladda ner följande Extension från Adobes hemsida ”Free Menu Blue Style” Skapa en enkel meny med hjälp av det nya verktyget. Byt färger och teckensitt via CSS-Panelen Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Övning Ladda ner och installera ”Calendar Object” Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008

Hemuppgift Utforma en grundmall (template) till en webbplats med hjälp av flera lager (AP-Element). Ange några ändringsbara regioner. Skapa några webbsidor som bygger på mallen. Uppdatera mallen och testa dina sidor i flera webbläsare. Copyright, www.hakimdata.se, Mahmud Al Hakim, mahmud@hakimdata.se, 2008