Dreamweaver MX - Övning 46b

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/dwmx1/

2. Zippa upp filen och lägg mappen dwmx1 på enheten H.
   
3. Starta Dreamweaver MX och skapa sedan en ny plats (en lokal webbplats). Huvudmappen för platsen ska vara mappen dwmx1 som du nyss hämtade. Välj DWMX1 som namn för platsen. Vänta med att fylla i webbadress och Fjärrinformationsuppgifter.
4. Öppna filen 1900talet.htm Välj samma text för titeln som för rubriken överst.
   
5. Under den andra rubriken och bilden som avskiljer importerar du sedan data från filen 19.txt till en tabell med 2 kolumner och flertalet rader enligt följande:
   1. Avgränsare: tabb
   2. Justering: centrerat
   3. Bredd 580 bildpunkter
   4. Cellutfyllnad 3 och cellmellanrum 3
   5. Kant 1
      
6. Gör en länk från "J-södra blir tvåa i allsvenskan" till samma årtal i tabellen.
   
7. Gå till texten "Tillbaka till ingångssidan". Centrera denna text och gör den till en länk tillbaka till ingångssidan.
   
8. Gör nu två länkar av texterna i cellen till höger om bilden på ingångssidan. Ändra längst ned på sidan "idag" till ett datum som ändras varje gång som du sparar filen.
   
9. Sammanknyt stilmallen dwmx1.css med dina två webbsiddor.
   
10. Du ser nu att det blir en del ändringar när det gäller formateringarna. Du ska emellertid ändra lite på stilmallen. Gör följande ändringar och tillägg i stilmallen:
    
    1. För texter på hela sidan dvs BODY skall gälla teckensnittet Arial i första hand och om användaren saknar detta på sin dator i andra hand Helvetica, i tredje hand sans-serif. Dessutom skall teckenstorleken vara 11 pt.
    2. Kursiv stil skall ha teckenstorleken 9 pt.
    3. Du ser att i vanliga celler är teckenstorleken 10 pt men i huvudceller skall teckenstorleken vara 12 pt.
    4. Rubrik 2 skall ha färgen Röd=194, Grön=46 och Blå=68.
    5. Fetstil skall ha färgen Röd=97, Grön=92 och Blå=34.
    6. Båda sidorna skall ha filen yellowrock.gif som bakgrundsbild.
    7. Länkarna skall inte vara understrukna och textfärgen till länkarna skall alltid vara svart.
       
11. Sortera tabellen med alla årtalen i fallande ordning så att det yngsta årtalet (1997) kommer överst och det äldsta (1900) kommer längst ned.
    
12. Lägg till en rad överst i tabellen. Skriv i vänstra översta cellen: "År" och i högra cellen: "Händelse". Gör båda cellerna till huvudceller.
    
13. Du skall nu göra en ny ingångssida som använder frames (ramar).
    
14. Du skall lägga in två ramar, en övre ram topFrame som inte är så hög och en undre mainFrame som är betydligt högre.
    
15. Spara hela ramuppsättning som first.htm i huvudmappen. Titeln för first.htm skall vara "Jönköpings historia med ramar". Den övre ramen sparar du som links.htm i huvudmappen. Titeln för den här sidan skall vara "Länkar".
    
16. När man öppnar first.htm så skall ingang.htm visas i den undre ramen.
    
17. I den övre ramen skall links.htm visas. Gör nu två länkar i links.htm - En till ingang.htm och en till 1900talet.htm. När man klickar på länkarna så skall den sida som skall visas öppnas i den understa ramen. Texterna till länkarna skall se ut så här:
    "Ingångssidan - Jönköping under 1900-talet". Centrera de två länkarna. Se till att stilmallen dwmx1.css gäller också för filen links.htm.
    
    
18. Gör så att om man klickar på Sofiakyrkan (och bara om man klickar på kyrkan) på bilden som visas i filen ingang.htm så öppnas i ett nytt fönster följande webbsida:
    http://www.svenskakyrkan.se/jonkoping/kyrka/sofia.htm
    
    
19. Du ska nu använda CSS-skikt. Välj att skapa en ny sida i mappen historia som du kallar kvall.htm. Ge sidan titeln "Jönköping by night".
    
    
20. Infoga ett skikt med följande värden:
    B=512, H=384, V=40 och Ö=40
    
    
21. Infoga den andra jpg-bilden i skiktet. Vi antar att du inte har något bildbehandlingsprogram tillgängligt och i stället för att skapa en mindre bild som passar så ändrar du visningen av bilden till bredden 512 bildpunkter och höjden 384 bildpunkter.
    
    
22. Gör så att när man har kommit till sidan kvall.htm så skickas man efter 5 sekunder vidare till sidan ingang.htm
    
    
23. Du ska nu göra så att ett nytt lite mindre fönster med filen kvall.htm poppar upp samtidigt som filen 1900talet.htm öppnas. Fönstret med filen evening.htm skall ha fönsterbredden 592 och fönsterhöjden 464.
    
    
24. Ändra i platsinformationen så att du kommer åt din ev webbplats på nätet. Lägg sedan in sidorna på nätet.
    
25. Exportera informationen om platsen DWMX1 och spara exportfilen i huvudmappen dwmx1.
    
26. Öppna ingang.htm i Dremweaver. I cellen till vänster om bilden skall du lägga in en hoppmeny med samma länkar som i cellen till höger om bilden.
    
27. Markera i cellen till vänster. 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: Länkar till mina sidor. Detta är en upplysningstext utan länk. Nu skall du fylla på med länkarna.
    
    
28. 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.
    
    
29. 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.
    
30. Öppna links.htm i Dremweaver. Istället för de tidigare länkarna skall du lägga in en hoppmeny med samma länkar. Du skall också lägga in en länk till "Jönköping år 1612".
    
31. Markera längst upp i filen och på menyraden väljer du sedan 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. Välj namnet menu2. Sätt en bock framför Markera första post efter URL-ändring. Till höger om Text skriver du: Länkar till XXX:s sidor. (XXX ersätts med ditt namn). Detta är en upplysningstext utan länk. Nu skall du fylla på med länkarna.
    
32. 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. Du försöker ändra så att filerna öppnas i MainFrame men det går nog ej. Klicka på OK och spara om.
    
33. Klicka nu på Fönster på menyraden och sedan på Beteenden. Öppna First.htm. Klicka på Hoppmenyn längst upp. Nu ser du i fönstret Beteenden längst upp till höger att under Åtgärder står det Hoppmeny. Klicka på Hoppmeny. Nu kommer samma fönster upp som du använde innan när du skapade hoppmenyn. Nu kan du ändra så att URL-adressen öppnas i MainFrame.
    
34. Välj nu att förhandsgranska i webbläsaren. Testa i webbläsaren att alla länkarna fungerar.
    
35. Du skall nu göra likadant som med hoppmenyn. Öppna filen links.htm. Ställ dig till höger om hoppmeny och gör ett mellanslag och skriv sedan texten Snabbmeny. Markera texten och skriv tecknet # i Egenskaper till höger om Länk. Öppna beteendefönstret om det inte redan är öppet. När texten Snabbmeny är markerad klickar du i beteeendefönstret på +tecknet . Välj Snabbmeny och lägg där samma länkar som du har i hoppmenyn. Testa med lite olika varianter på snabbmenyn.
    
36. 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.
    
37. Välj nu att förhandsgranska i webbläsaren. Testa i webbläsaren att alla länkarna fungerar.
    
38. Testa ev fler beteenden som hänger ihop med länkar innan du går vidare till nästa upppgift. Du börjar då t ex med att skriva ytterligare en text till höger på sidan links.htm som du låter Dreamweaver uppfatta som en länk genom att du skriver tecknet # som länk i Egenskaper.
    
39. Du skall nu göra ett enkelt formulär.
    
40. Skapa en ny fil i huvudmappen med namnet form.htm. Titeln liksom huvudrubriken (Rubrik 1) skall vara Anmälan till kurs. Se till att CSS-mallen gäller för sidan.
    
    
41. 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.
    
    
42. 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.
    
    
43. 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.
    
    
44. 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".
    
    
45. 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.
    
    
46. 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.
    
    
47. 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.
    
48. 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.
49. 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.
50. Tryck på Enter och skriv texten: Skicka in den fil som visar att du behärskar grunderna:. Tryck på Enter igen och välj igen Infoga, Formulärobjekt, Filfält. Detta alternativ använder man om man vill låta användaren bifoga en fil. Om man klickar på knappen Bläddra så kan man bläddra fram till den fil i sin dator som skall bifogas. Förhandsgranska nu i webbläsaren att det fungerar att bläddra fram till en fil och undersök om du genom att hålla ned Ctrl-tangenten samtidigt kan markera flera alternativ när det gäller programmen.
    
51. 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 och sedan Evrekas erbjudande.