Dreamweaver MX - Övning 46c

A. Hämta filer och testa att logga in

1. Hämta en zippad fil med filer som du skall använda. Filen ligger i en mapp på webbadressen:
   http://www.pb.edu.jonkoping.se/dwmx2/

2. Zippa upp filen och lägg mappen dwmx2 på enheten H.
   
3. Starta Dreamweaver MX och skapa sedan en ny plats (en lokal webbplats). Välj fliken Avancerat. Huvudmappen för platsen ska vara mappen dwmx2 som du nyss hämtade. Välj DWMX2 som namn för platsen. Ange på Platskartelayout att Hemsidan är ingang.htm.
   
4. Fyll också i dina Fjärrinformationsuppgifter. Välj Åtkomst: FTP och FTP-värd: 193.183.219.197. Som värdkatalog väljer du dwmx2 om du tidigare har lagt in en mapp vid namnet dwmx2 i huvudmappen på den webbplats som du har tillgång. Om du inte har gjort mappen i förväg så väljer du ingen värdkatalog. Sedan går du in på hela din webbplats och skapar mappen. Gör sedan inget mer. Därefter ändrar du i Fjärrinformationen så att dwmx2 blir värdkatalog.
   
5. Exportera informationen om platsen DWMX2 och spara exportfilen i huvudmappen dwmx2.
   
6. Du skall nu bara bli informerad om  hur du kan hitta lite hjälp. Klicka på Fönster och sedan på Referens. Har kan du på engelska läsa om en HTML-kod och dess attribut. Klicka sedan på Hjälp och på Självstudier. Här kan du på olika sätt hitta information på svenska om allt i Dreamweaver. Om man skriver ut allt så blir det 3 fulla pärmar.

B. Hoppmeny och Startmeny

1. Öppna ingang.htm i Dremweaver.
   
2. Med hjälp av platskartan ska vi nu skapa länkar till alla filerna för olika århundraden som finns i historia-mappen. Gå till platskartan genom att först klicka på ikonen Expandera/komprimera lämgst till höger i det lilla platsfönstret. Klicka sedan på ikonen för Platskarta och välj att visa både karta och filer. (Man kan också klicka på Visa och sedan på Platskarta.)
   
3. Klicka nu på ikonen för ingang.htm så att Peka-på-fil-ikonen (trådrullen) syns. Dra sedan från denna ikon en gång för varje årtals-fil (1200-talet.htm, ...2000-talet.htm). När du är färdig tittar du på resulatet i ingang.htm. Flytta nu alla länkarna som har skapats till cellen till höger om bilden och lägg dem i en punktad lista.
   
4. I cellen till vänster om bilden skall du lägga in en hoppmeny med samma länkar.
   
5. Markera i cellen till höger. På menyraden väljer du Infoga, Formulär. Låt markören vara kvar i det med rött markerade formuläret. Välj Infoga, Formulärobjekt, Hoppmeny. Nu poppar fönstret Infoga hoppmeny upp. Låt namnet menu1 vara kvar. Sätt en bock framför Markera första post efter URL-ändring. Till höger om Text skriver du: Välj århundrande. Detta är en upplysningstext utan länk. Nu skall du fylla på med länkarna.
   
   
6. Klicka på +knappen och skriv in en ny text och därefter bläddrar du dig fram till den fil som du ska länka till. Sedan klickar du på +knappen osv. Lägg alltså in samma länkar som i cellen till höger om bilden. Klicka sedan på OK och spara om.
   
   
7. Välj nu att förhandsgranska i webbläsaren. Testa i webbläsaren att alla länkarna fungerar. Om du i Dreamweaver markerar hoppmenyn så finns det en del alternativ när det gäller ändringar om du höger-klickar. Ta fram egenskaper. Om den inte omedelbart visar rätt så klicka på <select> längst ned till vänster under arbetsytan. Du kan t.ex. klicka på knappen listvärden och sedan ändra på dessa. Kolumnen Värde är ifylld med dina länkar.
   
8. Stäng ingang.htm och öppna first.htm. Markera Jönköpings historia överst i filen topp.htm. Låt Dreamweaver uppfatta texten som en länk genom att du skriver tecknet # som länk i Egenskaper. Öppna beteendefönstret om det inte redan är öppet. Klicka på +tecknet. När texten Snabbmeny är markerad klickar du i beteeendefönstret på +tecknet . Välj Visa snabbmeny och lägg där samma länkar igen. Förinställt är att länkarna går lodrät. Eftersom det blir många länkar så väljer du Storlek 10 när det gäller texten. Testa och se att länkarna inte syns vågrät pga att du använder ramar. Ändra vid Utseende till vågrät och vid Placering ändrar du så att länkarna hamnar snyggt under texten "Jönköpings historia". Testa också med att ändra på färgerna.
   
9. Som du märker så kan du låta länkarna öppnas på olika ställen. Det går inte om man väljer hoppmenyn. Däremot syns en hoppmeny lodrät om man lägger en sådan i topp.htm.
   
10. Testa ev fler beteenden som hänger ihop med länkar innan du går vidare till nästa upppgift. Testa t ex med att använda bilderna i mappen bilder. Markera t ex på 1900-talet Gamla epidemisjukhuset och välj Gå till URL-adress. Skriv bilden gamlabiblioteketc.jpg som URL-adress. Välj sedan att låta ett webbläsarfönster öppnas med en motsvarande bild när man för musen över texten stadshuset i Huskvarna.
    
11. När du har klickat på +tecknet så klicka längst ned på Hämta fler Beteenden. Man kan hos Macromedia hämta olika typer av filer t.ex. Beteenden, Kommandon, Objekt, Sviter, Serverfunktioner. För att kunna hämta måste man registrera sig. Intressant för lärare är sviten Course Bilder (som lär ha kostat en hel del pengar för något år sedan) och kommandot Learning Site. Det handlar dock om omfattande saker som inte hinns med på den här kursen. MX-versionen fungerar just nu dessutom inte i Windows 98 och ME. Som en demonstration har jag hämtat en fil som finns i mappen Extensions. Klicka på den filen så att den installeras. Det är ett kommando vid namn Kaosweaver.com - Live Clock. Starta om Dreamweaver, öppna ingang.htm, markera ovanför texten "Den här sidan uppdaterades.." och leta rätt på kommandot. Klicka på Live Clock, ändra till vad som är lämpligt och lägg in klockan. Kontrollera i webbläsaren.

C. Spela in kommandon , sök och ersätt i flera filer samtidigt och testa att ändra arbetsytan

1. Vi har inga huvudceller med rubrikerna Årtal och Händelser överst i alla tabellerna i årtalsfilerna. Vi ska först spela in ett kommando för att göra sådana huvudceller. Vi sparar sedan kommandot i Historiafönstret och testar att använda det i en fil. Emellertid ska vi inte använda kommandot för alla filerna. Vi använder istället Redigera, Sök och ersätt för att snabbt lägga in koder i alla filer.
   
2. Öppna fönstret Historia genom att först klicka på Fönster, Andra, Historia. Öppna filen 2000-talet. Sätt markören i översta vänstra cellen i tabellen. Klicka på Komandon och välj Starta inspelning. Klicka med höger musknapp i cellen och välj Tabell, Infoga rader eller kolumner, 1 rad ovanför markeringen. Du hamnar nu i översta vänstra cellen på en ny rad. Skriv Årtal i cellen och i Egenskaper sätter du ett kryss till höger om Tabellhuvud. Tryck på piltangenten åt höger så att du hamnar i cellen till höger. Skriv där Händelser och sätt ett kryss till höger om Tabellhuvud. Du är nu klar. Klicka på Kommandon på menyraden och sedan på Stoppa inspelning. Inspelningen finns nu lagrad. Öppna filen 1900-talet och testa inspelningen genom att markera i översta vänstra cellen. Klicka sedan på Kommandon, Spela upp inspelat kommando. Om det fungerar så går du till Historiafönstret och markerar Kör kommando. Klicka sedan på disketten längst ned till höger (Spara markerade steg som ett kommando). Ge kommandot namnet Huvudcellrad. ommandot finns nu sparat. Klicka på Kommandon och sedan finner du ditt kommando längst ned.
   
3. Stäng nu alla filerna på platsen utom filen 2000-talet. Ändra till Visa kodläge. Du ser att koden för tabellen börjar med
   <table width="576" border="1" cellspacing="3" cellpadding="3">
   <tr>
   <th>&Aring;rtal</th>
   <th>H&auml;ndelse</th>
   </tr>
   
4. Om du till i filen 1800-talet så finner du att skillnaden är att där finns bara koden
   <table width="576" border="1" cellspacing="3" cellpadding="3">
   
5. Markera nu i platsfönstret till höger de filer som inte är ändrade dvs 1800-talet, 1700-talet ... 1200-talet.
6. På menyraden väljer du nu Redigera, Sök och ersätt. Ändra vid Sök i till Markerade filer i mappen och vid Sök ändrar du Text till Källkod. Till höger därom skriver du in HTML-koden i punkt 4 ovan och vid Ersätt med skriver du koden i punkt 3 ovan. Låt markeringen vara kvar vid Ignorera skilnader i mellanrum. Klicka sedan på Ersätt alla. Du får en varning att du inte kan ångra ändringarna på de sidor som inte är öppna för tillfället. Acceptera denna. Spara alla öppna filer. Kontrollera några av sidorna som nu ska vara ändrade.
   
7. Vi ska också testa ett annat användargränssnitt till Dreamweaver som liknar Dreamweaver 4. Det kan särskilt vara användbart om du har en bärbar dator. Då behöver du all plats du kan få och du kan låta fönstren flyta ovanpå. Klicka nu på Redigera och sedan på Inställningar längst ned. Klicka på Ändra arbetsyta och välj Dreamweaver-4-arbetsytan. Stäng Dreamweaver och öppna igen.  Testa eventuellt en stund att arbeta med den här arbetsytan.
   

D. Göra ett enkelt formulär och använd det på skolans webbplats

1. Skapa en ny fil i mappen form med namnet form.htm. Titeln liksom huvudrubriken (Rubrik 1) skall vara Anmälan till kurs. Se till att CSS-mallen dwmx2.css gäller för sidan.
   
   
2. På menyraden väljer du Infoga, Formulär. (Det går också att på Infogapanelen ändra fliken till Formulär. Sedan kan man klicka på ikonen längst till vänster (Formulär). I egenskaper ger du formuläret namnet Kurs1.
   
   
3. Låt hela tiden markören vara kvar i det med rött markerade formuläret. Välj nu först att infoga en tabell med 3 rader och 2 kolumner och med Kant=0. I kolumnen skriver du uppifrån och ned Namn:, Skola: och E-post: Klicka sedan i den översta cellen i kolumnen till höger. Välj Infoga, Formulärobjekt, Textfält. I egenskaper ger du textfältet namnet namn. Teckenbredden ska vara 50 och vid Typ anger du en rad. Infoga sedan nya likadana textfält i den två cellerna nedanför med den enda ändringen att namnen skall vara skola och epost.
   
   
4. Låt hela tiden markören vara kvar i det med rött markerade formuläret och skriv under tabellen texten: Jag anmäler mig till följande kurser: Tryck på Enter för nytt stycke och välj nu på menyaden Infoga, Formulärobjekt, Kryssruta. Ändra inte på något i egenskaper. Till höger om kryssrutan skriver du Word. Tryck på Enter igen och välj igen Infoga, Formulärobjekt, Kryssruta. Skriv Excel till höger om den andra kryssrutan.
   
   
5. Gå nu till en ny rad och skriv texten: Jag betalar på följande sätt: På nästa rad väljer du Infoga, Formulärobjekt, Alternativknapp. Välj i egenskaper startläge: markerad. Till höger om knappen skriver du Faktura. På nästa rad väljer du igen Infoga, Formulärobjekt, Alternativknapp. Välj i egenskaper startläge: avmarkerad. Till höger om knappen skriver du "Kontant vid kursstarten".
   
   
6. Kommentar: Det går bra att välja båda kurserna och då kan kryssrutor vara lämpliga eftersom de tillåter flera alternativ. Alternativknappar tillåter bara ett alternativ och de passar bättre när det gäller betalningen som man ju helst bara gör en gång.
   
   
7. Låt hela tiden markören vara kvar i det med rött markerade formuläret. På nästa rad skriver du texten: Övriga meddelanden eller förfrågningar: och på nästa rad igen väljer du Infoga, Formulärobjekt, Textfält. I egenskaper ger du textfältet namnet extra. Teckenbredden ska vara 50 och vid Typ anger du flera rader och antalet skall vara 7 rader.
   
   
8. Under det lite större textfältet väljer du nu Infoga, Formulärobjekt, Knapp. Ändra inget i egenskaper. Till höger om den första knappen infogar du en till. Ändra nu i egenskaper genom att markera Återställ formuläret. Den första knappen använder du till att skicka formuläret men det fungerar ännu inte att använda formuläret för att skicka. Återställknappen använder du för att rensa det du har skrivit i formuläret om du vill börja om från början. Förhandsgranska nu formuläret. Skriv lite i det. Testa så att det inte går att betala på två sätt och att du kan gå båda kurserna. Testa sedan återställknappen.
   
9. Vad är det som ska hända när man klickar på Skicka-knappen? Uppgifterna kan skickas till någon via e-post. Det kan också vara så att uppgifterna läggs i en databas av något slag som eventuellt kan vara synlig på en webbsida. Du har några ytterligare frågor som du vill ställa till den som anmäler sig. Markera nu området mellan frågorna om betalningen och texten: Övriga meddelanden eller förfrågningar: och gör plats på en ny rad. Skriv där texten: Jag har följande förkunskaper, tryck på Enter och välj Infoga, Formulärobjekt, Lista/meny. Välj meny och ändra namnet till kunskaper. Klicka på listvärden. Under Postetikett skriver du först Nybörjare. Klicka därefter på +knappen och skriv: Jag har en viss vana. Klicka på +knappen igen och skriv slutligen: Jag är en van användare. Klicka seda på OK och i egenskaper längst ned vid Markerat från början så väljer du att markera Nybörjare. En meny är som en alternativknapp. Man kan bara välja ett alternativ.
   
10. Tryck på Enter och skriv texten: Vilka andra program kan jag:. Tryck på Enter igen och välj igen Infoga, Formulärobjekt, Lista/meny. Välj lista och ändra namnet till program. Ange 3 som höjd och sätt en bock framför tillåt flera. Klicka på listvärden. Under Postetikett skriver du först Dreamweaver. Klicka därefter på +knappen och skriv: PowerPoint. Klicka på +knappen igen och skriv slutligen: Publisher. Klicka seda på OK och i egenskaper längst ned vid Markerat från början så väljer du att inte markera något alternativ. En lista är som en kryssruta. Man kan välja flera alternativ.
    
11. Om man är webbansvarig på en skola i Jönköping och därmed har sina sidor på IT-enhetens webbplats så kan man läsa vidare på en särskild plats om hur man kan få ett ifyllt formulär skickat till skolan via e-post.
    
12. Flera sökplatser erbjuder hjälp till dem som på sin sida vill lägga upp ett sökformulär som vid användning leder till sökning i just denna platsens databas. Du ska nu gå in och undersöka två sådana erbjudanden. Gör en testsida vid namn sokning.htm dit du kopierar de koder som erbjuds. Försök sedan att i webbläsaren söka från din sida. Undersök först Googles erbjudande på adressen http://www.google.com/intl/sv/searchcode.html och sedan Evrekas erbjudande på adressen http://evreka.passagen.se/q/help/sitesearch/

1. Plats och resurser
2. Skikt och tidslinjer
3. Flash-knappar och Flash-text
4. Kodfragment.
5. Att göra tabeller med Layoutverktyget.
6. Skapa nya dokument och använd Kategori: Sidutformningar
7. Resurspanelen och hur man använder mallar och biblioteksposter. Mallar har tidigare till skillnad från CSS varit programberoende men intressant är att mallar nu kan exporteras till XML-filer vilket gör att en mall inte är beroende av Dreamweaver.
8. Fler beteenden t ex att lägga in ljud.
9. Att hämta tabelldata någonstans på Internet och att lägga in informationen i Excel där den bearbetas. Sedan görs dels en html-sida direkt i Excel och dels görs en skv-fil i Excel som sedan importeras i Dreamweaver.