Mappstruktur

Gör en mapp på skrivbordet och döp till: vinn
I vinn gör du fler mappar: ramverk, sidor, utanframes

Hämta mappen bilder från Transport enheten och lägg i vinn

Dreamweaver

Öppna dreamweaver och gå till Edit/Preferences/General. Under options väljer du filtillägget .htm
· Spara första sidan som index.htm i vinn
· Ny sida och spara som resval.htm i mappen sidor
· Ny sida och spara som resval.htm i mappen utanframes
· Ny sida och spara som london.htm i mappen utanframes

Vi börjar med att göra en del av sajten utan ramverk.

Jämför med orginalsajten på internetplatsen: http://www.compusic.a.se/elev/webb2/

Första sidan
spara som: index.htm

Skriv: "Vinn en resa"
format: H2
typsnitt: Verdana
justera text: center
2 radbryt ner

Infoga bild med rollover
Original Image: nu1.gif
Rollover image: nu2.gif
Image name: nu
link: sidor/resval.htm
Alt: Klicka här nu!
2 radbryt

skriv: utan frames
Länka orden till utanframes/resval.htm

Öppna Modify/Page properties eller gå genom snabbmenyn.
Välj röd (FF0000) för text samt link. Lite mörkare för visited och orange för aktive.
Skriv Title: Vinn en resa
Se resutatet på sidan!

resval.htm i mappen utanframes
(Leder inte till ett frameset)

· Skriv: "Välj resmål:" överst.
Orange färg. Centrerad. H2. Typsnitt: Verdana.
· Infoga bild: texbild.gif
Ingen Alt text.
· Markera bilden och klicka på Map i Properties.
Map Name: Resmal
Dra en rektangel över London.
Link: london.htm i mappen utanframes.
Alt: Till London

Sitemap

Skapa en sitemap: File/New site.

Du kommer till Site definition for unnamned sites
Local Info: Site namne - ge sitemapp ett namn, vilket du vill.
Väl rätt folder: vinn
Kryssa för Cach
Site Map Layout: Homepage: välj din indexfil: index.htm
Tryck OK.
Du kommer till Define sites: Tryck Done.
Klart! Studera din sitemap.

Gör sidor från Sitemap

Markera mappen utanframes och gör nya sidor i den.
File/New file.
Klicka på filnamnen och döp om till:
mall.htm, lon_hot.htm , lon_noje.htm, lon_shop.htm, london.htm, tavla.htm
Dubbelklicka på mall.htm för att öppna den.

Mallsida(utan templates)

Gör en mallsida

Öppna Page propeties.
Title: Mallsida utan frames
Links: vitt
Visited: vitt
Active: ljustgult: FFFFCC

Tabelllayout

Infoga tabell:
Rows: 2, Cols: 2, Width: 100%
Cellpad: 0, Cellspace: 0, Border: 0

Markera översta raden. BG color: röd FF0000

Markera cell1. Width: 100 (pixlar) Height: 20
Skriv: "<<Vinn en resa". Länka den till indexsidan.

Skriv i cell 2: " Milano | Paris | London | Havanna ".
Dessa är tänkta att länkas till varsitt frameset.

Skriv text i sista cellen: Rubrik (H3, färg: FF0000)

Infoga ny tabell i sista cellen på ny rad efter rubriken.
Rows: 3, Cols: 2, Width: 400, Cellpad: 5, Border: 0
Cell 1, width: 200p
Centrera tabellen,eller?. Modify/Alignment

Vill du ange typsnitt och storlek gör det nu.
Markera kolumner eller rader och ange.

Rollover
Infoga knapparna med rollover i "menyn"

Fyll mallen!

Nu är mallen klar och gäller alla lon_ sidor samt delvis london.htm. som inte har någon nästlad tabell, istället centrerad text.

• Originalsida: spara om mallsidan till ex. lon_hotell.htm (ersätt) och lägg in texter och bilder eller markera hela tabellen och kopiera in i de andra sidorna.
• Skriv alltid in lämplig Title. Vad vill du ska stå i namnlisten?
• Fyll med original: Skriv in rätt rubrikinnehåll och sen är det bara att infoga bild och text till de nästlade tabellerna.
  
  Text i tabell är bäst att formatera i efterhand för att undvika för många onödiga "taggar". Markera kolumner eller rader och ändra attributen till t ex arial, storlek 2. Var konsekvent och enhetlig!

Fyll nästlade tabeller:

london.htm
- ta bort nästlad tabell från mallen -

Skriv in denna text och redigera enligt parenteserna samt centrera all text:

(H1, font: Georgia)
Vinn en resa till London!

(P, font: arial, storlek 2)
Det hela är enkelt. Fyll bara i tävlingsformuläret och vänta på besked.
Sen är det bara att packa resväskan och bästa humöret.

Vill du ser mer av vad som ska hända?
Klicka på länkarna till vänster.

Är du klar att (infoga bild: t_knapp.gif) Så sätt igång!
(Länka bild till: tavla.htm, Target=_blank)

Företagsidan /redigera tabell

Spara en ny sida som foretag.htm
Skriv "om företaget" på sidan resval.htm och länka det till denna sida: foretag.htm

Page properties
Title: Om företaget Vinnaresa AB
Byt länkfärg: link="#FF0000" vlink="#CC0000" alink="#FF9900"

text
Rubrik: H4, font: georgia: Information om företaget: Vinnaresa
Brödtext: p, font: arial, storlek: 2, kursiv: Företaget har funnits sedan 1997

Tabell: widht: 460 pixlar
skriv in uppgifterna i tabellen

Redigera tabellinnehållet:

· Sortera tabellen i bokstavsordning efter första kolumnen, ej rad1: Commands/Sort Table

· Formatera tabellen: Ställ pekaren i tabellen. Välj Simple 3
Commands/Format Table

E-post:
Skriv "kontakta oss" och skriv i linkrutan: mailto:info@vinnaresa.se
(Adressen är påhittad. Vill du att den ska fungera kan du skriva dein egen.)

Tips! Gemensam länkfärg

Förenkla gemensam länkfärg för hela eller delar av siten genom att kopiera de slutgiltiga länk-attributen från en sida och ersätta den med standard färgerna.
Edit/Replace
· Find In: välj: denna sida, mapp eller site
· Find What: Html Source
· text som ska ersättas: Kopiera in gamla link attribut (link="# …")
· Replace With: Klistra in nya link-attribut

Viktig information
Vilken sida ska ha information om Senast Uppdaterad samt länk till webmaster?
Tänk på att en bra sajt är en levande sajt. Glöm inte uppdateringen!

Tävla-sidan / Formulär med e-post

Page properties:
· Background: #FFFFCC
· Title:Tävlingsformulär till Vinn en resa

Text:
Skriv den förklarande texten ovanför formuläret.
Dessutom att de ska stänga fönstret eftersom sidan visas i eget fönster (Target:-blank).

Tävla här!(H3, Verdana)

Fyll i följande formulär och tryck på Skicka-knappen när du är klar.
Vill du skriva om tryck på Börja om-knappen.
Stäng fönstret när du är klar, tack! (P, färg: #FF0000)

Infoga Formulär

Ändra Objektpalletten till Forms. Klicka på:
Insert form.

Property inspector:
· Name: namnge detta formulär
· Action: mailadress (ange din egen mailadress så att du ser om det funkar).
· Method: Post
· Öppna html och skriv innanför Form-taggens slut: enctype="text/plain". Annars lägger sig texten på en ända lång rad i e-post svaret.

Tabell
För att formuläret ska vara mer lättläst läggs det i en tabell med antal rader och kolumner som behövs.

Tabellmått: 6x2, 100%, cellpad 4. I vänsterkolumnen skriver du bara förklarande text. Se orginalsidan.

· Insert Radio Buttons, Rad1/cell2: (Tillåter bara ett alternativ, Checkbox tillåter flera.)
· RadioButton: Vaddå? Den här ska visa att de väljer: "plats"
· Checked Value: Vart då? Jo, med den här väljer de "London".
· Initial state: Är någon av radioknapparna förvalda? Välj checked eller unchecked.

· Insert Text field, Rad 2/cell2:
Namnge: Motivering. Char Width: 40 (pixlar), Lines: 4, Multi line (visar fler rader)

· Text field: Följande rader används för namn och adress. Single line. I övrigt samma som ovan. Ange samma Char width.

· Insert Button under tabell. 2 stycken på rad, centrera.

Submit:
· Button Name: skicka
· Label: Skicka
· Action: Submit form
Reset:
· Button Name: borja om
· Label: Börja om
· Action: Reset form

Frameset

Lägg in mapparna: sidor, ramverk i din sajtmapp

Skapa ramverk

Nytt dokument.
Ta fram framefönstret: Window/Frames

Frameset1
· Klicka i dokumentet.
· Modify/Frames/Split Frame up
· eller dra ner kanten med shift + option (mac), alt (pc)

Frameset1 2
· Klicka i nederdelen av dokumentet.
· Modify/Frames/Split Frame left
· Dra i ramkanten till vänster tills framen får lagom storlek av en vänstermeny.

Värden för ramverken (det yttre och det nästlade)

Markera det yttre ramverket i Frames eller i statusraden. Properties ändras. Redigera i Property inspektor.

Frameset 1

• Gör ett kantlöst ramverk: Border=No, Border width=0
• Bestäm storlek:
  övre raden: 40 pixlar,
  undre: 1 relativ (fyller resten av browserfönstret)

Frameset 2

• kantlöst som ovan
• Storlek:
  vänster kolumn: 100 pixlar,
  undre: 1 relativ

Ge framesetet en Title

Viktigt eftersom det är detta namn som syns i webbläsaren och inte de enskilda sidornas namn. Välj titel med omsorg.

• Markera framesetet i statusraden eller i framefönstret.
• Klicka på titleikonen i Head eller Modify/Page Properties och skriv: Vinn en resa till London!

Spara ramverket:

Spara i mappen ramverk som: frame_lo.htm. File/Save Frameset

---

Skriva ett NOFRAMES innehåll till äldre webbläsare

• Modify/Frameset/Edit NoFrames Contenet :
• Ny sida kommer upp. Skriv till exempel: "You need a browser that can read framesets. Du behöver en webbläsare som kan tolka ramverk."
  
• Du kan redigera sidan som vilken sida som helst.
  
• Tillbaka till sidan samma väg Modify/Frameset/Edit …
  
  

  ---

Styra enskilda ramar /frames

Döp frames
Klicka i Frame fönstrets ramar och skriv ett namn i
Frame Name i property

Markera översta ramen och döp till: top.
Markera vänster ram och döp till : left
Markera höger frame och namnge: main

OBS! Det kan vara lite trassligt att hitta rätt frameset.
Du kan också klicka och välja från statusbar i dokumentfönstret.

Värden för enskilda ramar/frames

Markera ramen i Framefönstret (ej i dokumentfönstret) och ange värden:

top:
Borders=No, Scroll=No, No Resize, Marginwidth=0, Marginwidth=0
Src= topp.htm i ramverk

left:
som top
Src= meny_l2.htm i ramverk

main:
som de förra men sätt scroll =default eftersom dessa sidor kan skifta i storlek.
Src=sidor/london.htm

Länkar i ett Frameset

Alla länkarna som ligger i denna meny ska visas i main fönstret. De måste alltså målbestämmas i property.
Target=main dvs namnet på framen

För andra targets se Dreamweaver 2 kompendiet.

Redigera sidor från ett frameset

• Klicka i den ramen för att bearbeta sidan via Page properties och övriga properties.
• Skriv in Title för alla sidor (sidorna som jag gjort har redan)
• Välj File/Save all för att spara alla sidor du har uppe.