Dreamweaver MX - Övning 46a

1. Starta Dreamweaver MX och skapa sedan en ny plats (en lokal webbplats). Huvudmappen för platsen ska ha namnet dwmx1 och den skall ligga där du säkert kan spara mappar och filer.

2. Välj DWMX1 som namn för platsen. Vänta med att fylla i webbadress och Fjärrinformationsuppgifter.
   
   
3. Skapa 2 (under)mappar på den nya platsen. Ge dessa mappar namnen historia och bilder.
   
   
4. Skapa en nya sida på platsen direkt i huvudmappen dwmx1 vid namn ingang.htm.
   
   
5. Överst på sidan ingang.htm skriver du texten "XXX presenterar Jönköpings historia". Byt dock ut "XXX" till ditt för- och efternamn. Gör denna text till en rubrik.Välj Rubrik 2. Centrera rubriken.
   
   
6. Ange "Jönköpings historia" som title för sidan ingang.htm.
   
   
7. Välj som bakgrundsfärg på hela sidan RGB-färgen: Röd 255,Grön 255 och Blå 128.
   
   
8. Du skall nu hämta två jpg-bilder och en gif-bild och lägga dem utan att byta namn på dem i din undermapp vid namn bilder. När du hämtar bilderna passar du också på att hämta css-filen dwmx1.css som du lägger direkt i huvudmappen dwmx1 samt textfilen 151617.txt som du lägger i mappen historia. De 5 filerna ligger i en zipfil på webbadressen:
   http://www.pb.edu.jonkoping.se/filerdwmx1/filerdwmx1.zip
   
   
9. Infoga en vågrät linje under rubriken. Lägg sedan in en tabell under linjen enligt följande:
   1. Med 2 rader och 3 kolumner
   2. Bredden 580 bildpunkter
   3. Cellutfyllnad 2 och cellmellanrum 3
   4. Justera till centrerat
   5. Kant = 0
   6. Cellerna längst till vänster och höger skall uppta 25 % vardera av en rad och cellen i mitten 50 % av en rad
      
      
10. På den översta raden i tabellen i den mittersta cellen lägger du in bilden dwmx1a.jpg. Vi antar att du inte har något bildbehandlingsprogram tillgängligt och i stället för att skapa en mindre bild som passar på sidan så ändrar du visningen av bilden till bredden 256 bildpunkter och höjden 192 bildpunkter. Centrera bilden i cellen.
Ovanför och under bilden (men inte till vänster och höger om bilden) skall det finnas ett tomt utrymme. Värdet skall vara 5.


11. Infoga en vågrät linje under tabellen och under linjen skriver du texten "Den här sidan uppdaterades av XXX med e-postadressen YYY senast 2003-01-13". Ersätt "XXX" med ditt för- och efternamn och YYY med din e-postadress som också skall vara en länk till samma e-postadress. Datumen skall se ut som ovan men den skall inte skrivas in utan du skall istället välja att infoga datum så att detta datum ändras automatisk varje gång som du (ändrar och) sparar om sidan utan du behöver skriva något själv. Hela texten under linjen skall ha kursiv stil och den ska vara centrerad men inte i fetstil. Texten skall i övrigt inte vara formaterad.
    
    
12. Skapa en ny fil vid namn 151617.htm på din plats i mappen historia.
    
    
13. Skriv överst "Jönköping under 300 år". Istället för att göra en rubrik väljer du att ge texten storleken 5 i fetstil. Centrera texten. Välj samma text för titeln. På nästa rad lägger du sedan in en centrerad underrrubrik (Rubrik 3) "Jönköping år 1612".
    
    
14. Gör ett mellanslag och importera sedan data från filen 151617.txt till en tabell med 2 kolumner och flertalet rader enligt följande:
    1. Avgränsare: semikolon
    2. Justering: centrerat
    3. Bredd 70 % bredd
    4. Cellutfyllnad 4 och cellmellanrum 1
    5. Kant 1
       
       
15. Gör en länk länkar från "Jönköping år 1612" till samma årtal i tabellen (branden i juli).
    
    
16. Längst ned under tabellen infogar du en vågrät linje. Under denna skriver du texten "Tillbaka till ingångssidan". Centrera denna text och gör den till en länk tillbaka till ingångssidan. Sedan skall på en rad nedanför finnas med kursiv stil samma uppgifter som finns längst ned på sidan ingang.htm.
    
    
17. Gör nu två länkar i cellen till höger om bilden på ingångssidan. Länkarna skall ligga i en punktad lista. De två texterna som man skall klicka på är "Jönköping under 300 år", och "Jönköping år 1612". Alla länkarna ska gå till filen 151617.htm men den understa till samma plats som du gjorde länkar till från "Jönköping år 1612) i filen 151617.htm.
    
    
18. Du har tidigar hämtat css-filen dwmx1.css. Sammanknyt denna stilmall med dina två webbsiddor.
    
    
19. 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 green.gif som bakgrundsbild.
       
    7. Länkarna skall inte vara understrukna och textfärgen till länkarna skall alltid vara svart.
       
       
20. Sortera tabellen med alla årtalen i fallande ordning så att det yngsta årtalet (1797) kommer överst och det äldsta (1511) kommer längst ned.
    
21. 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.
    
22. Du skall nu göra en ny ingångssida som använder frames (ramar).
    
    
23. 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.
    
    
24. 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".
    
    
25. När man öppnar first.htm så skall ingang.htm visas i den undre ramen.
    
    
26. I den övre ramen skall links.htm visas. Gör nu två länkar i links.htm - En till ingang.htm och en till 151617.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 300 år". Centrera de två länkarna. Se till att stilmallen dwmx1.css gäller också för filen links.htm.
    
    
27. 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
    
    
28. Du ska nu använda CSS-skikt. Välj att skapa en ny sida i mappen historia som du kallar evening.htm. Ge sidan titeln "Jönköping på kvällen".
    
    
29. Infoga ett skikt med följande värden:
    B=512, H=384, V=40 och Ö=40
    
    
30. Infoga bilden dwmx1b.jpg 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.
    
    
31. Gör så att när man har kommit till sidan evening.htm så skickas man efter 5 sekunder vidare till sidan ingang.htm
    
    
32. Du ska nu göra så att ett nytt lite mindre fönster med filen evening.htm poppar upp samtidigt som filen 151617.htm öppnas. Fönstret med filen evening.htm skall ha fönsterbredden 592 och fönsterhöjden 464.
    
    
33. Ändra i platsinformationen så att du kommer åt din ev webbplats på nätet. Lägg sedan in sidorna på nätet.
    
34. Exportera informationen om platsen DWMX1 och spara exportfilen i huvudmappen dwmx1.
    
35. Ö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.
    
36. 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.
    
    
37. 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.
    
    
38. 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.
    
39. Ö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".
    
40. 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.
    
41. 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.
    
42. 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.
    
43. Välj nu att förhandsgranska i webbläsaren. Testa i webbläsaren att alla länkarna fungerar.
    
44. Du skall nu göra ett enkelt formulär.
    
45. 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.
    
    
46. 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.
    
    
47. 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.
    
    
48. 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.
    
    
49. 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".
    
    
50. 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.
    
    
51. 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.
    
    
52. 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.
    
    
53. 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.
    
    
54. 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.
    
    
55. 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.
    
    
    
56. 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 Eniros erbjudande.