Dreamweaver cs3 och css

Tim Berners-Lee
(the inventor of the webb)
http://www.nationalencyklopedin.se/kort/timbernerslee

Berners-Lee [bə:nəzli:´],
Sir Tim, född 1955, brittisk
systemutvecklare och
datavetenskapsman,
upphovsman till WWW på
Internet. Berners-Lee var
verksam vid CERN i
Genève och föreslog 1989
ett hypertextsystem
(jämför hypertext) för
spridning av information.
Han skrev program för
den första WWW-servern
och den första
webbläsaren 1991, starten
för den explosiva
utvecklingen av webben.

Webbplats med god funktion(navigeringslist)
och tilltalande layout(grönt,blått)

Kanske inte så bra ?
 Sidan
fortsätter
nedåt med
mycket
bilder och
grafik som
tar lång tid
att ladda
 Navigeringe
n lite

En webbläsare förstår bara html-kod
W3C bestämmer hur html-koden skall
se ut
The World Wide Web Consortium (W3C) is an international consortium where
Member organizations, a full-time staff, and the public work together to develop
Web standards.
Det finns olika html-standards
HTML 2.0, HTML 3.2 (som är förlegade)
HTML 4.0 (5.0 nyare)
XHTML 1.0 strict , XHTML 1.0 transitional (modern)
X står för extended som är en flexibel påbyggnad.
Dreamweaver kollar automatiskt koden mot den standard som du valt när du
skapar ett nytt tomt dokument
Du kan själv kolla din html-kod eller css-kod hos w3c
Om du efter gymnasiet vill lära dig webbdesign kommer all html-kod och css-kod
att kollas hos w3c

http://validator.w3.org/ http://jigsaw.w3.org/css-validator/

Du väljer html-standard i Dreamweaver
när ett nytt dokument skapas

Dreamweaver kollar din html-kod mot den standard du angett

Skapa en ny webbplats 1
 Öppna
Dreamweaver
CS3
 Klicka på Plats
och Ny Plats
 Kalla din plats
för DWCS3
 Klicka på Nästa

 Markera
översta
alternativet
 Välj sedan
Nästa

 Markera
alternativet
Ingen
 Välj sedan
Nästa

Dina dokument läggs i mappen
DWCS3
Klicka på Klart

Det bör se ut så här, klicka på
Klart

Öppna ett nytt html-dokument
 Skriv ditt namn
 Spara dokumentet som testsida_XY (dina
initialer)
 Klicka på fyrkanten

Skapa en plats på skolans
webbserver

 Välj Plats.. Hantera
Platser, Redigera
 Välj Avancerat..
Fjärrinformation
 Fyll i dialogrutan
ostrarealsgymnasium.se
 NAMN=Två första
bokstäver i ditt
efternamn + 2
första i förnamn (ej
å,ä,ö)
 Lösen får du av
läraren
 Klicka på Testa

Anslut till skolans fjärrserver
 Klicka på connectknappen
 Markera ditt dokument på höger sida
 Klicka på ladda upp

Nu öppnar vi filen på internet
 Din sida finns på adressen
 www.ostrarealsgymnasium.se/NAMN/filnamn.
html

En webbplats skall ha en grafisk
profil
 Den grafiska profilen kan bestå av:
 T.ex. Två typsnitt
 Två/tre färger Rubriktext
 Logotyp/Bild
Brödtext

 Tänk på upphovsrätten, hämta material på
Multimediabyrån och använd skolans
kameror

I DWCS3 välj Arkiv…Nytt och
Skapa, spar som
stilmallstest_XY

Skapa en webbplats med
boken
 Övningsboken ”Allt i en bok” kap. 3 sid. 59-61 punkt
1-5 beskriver hur det går till.
 Ändra under punkt 4 vid Lokal rotmapp:
H:DokumentDWCS3
 Välj Fönster…Filer så
ser du din webbplats
 Gör en mapp Css
(för dina extra stilmallar)
 Gör en mapp Images
(för dina extra bilder)

Dreamweaver CS3 och Css
formatmallsfiler
 En webbläsare förstår bara (X)HTML-kod som är det som finns mellan
olika html-taggar
 <body> Starttagg för dokumentområdet
 </body> Sluttagg med snedstreck
 Du måste lära dig några html-taggar, t.ex <p> stycke <h1>rubrik
 (rad 3) www.w3.org är en organisation som sköter xhtml-standarden
 (rad 6) Charset=utf-8 gör att vi kan använda å, ä och ö

Lär dig webbdesign med Dreamweaver cs3
Du skapar textrutor, kolumner och plats för
bilder med css-stilmallar

Textområde

Textområde

All modern design av webbsidor görs
med stilmallar, cascading stylesheets
 Vi provar med ett enkelt exempel!
 Skissa på ett papper hur din layoyt ska se ut med
rubriktext, brödtext, textkolumner och bilder.
 (Kolumner, rutor och rektangulära områden görs med
div-taggar i kap. 7)
 Koppla en tom formatmall och skriv formatregler för de
olika taggarna <p>, <h1>, <img> som du vill ändra på.
 Gör du en webbplats med flera sidor kan formatmallen
(css) användas på alla sidor. En ändring av en regel
slår igenom på alla sidor på en gång. Fomatmallen
(css) ger dig total kontroll över hur du formger din
layout så att sidan kan se ut som en broschyr eller ett
tidningsuppslag.

Så här skall texten se ut
 Öppna ett nytt dokument i DW
och skriv texten som visas till
höger. Spar som
stilmalltest_XY.htm i
H:DokumentDWCS3 (XY=Dina
initialer)
 Dela fönstret så du ser kod och
design samtidigt.

 Använd egenskaps-panelen och
ställ in rubrikstycken, rubrik och
underrubrik.

 Pröva att klicka på taggväljaren
och markera taggarna en i taget.

 Öppna ett nytt tomt
malldokument och spar som
malltest_XY.css i din Css-katalog.

Nu skall vi skapa
css-
regler som styr
layout och design
 Öppna panelen Css
och klicka på
kedjelänken nederst
för att koppla din
stilmall
(malltest_XY.css).
 Klicka på
plustecknet nederst
och välj
enligt dialogrutan
överst. Klicka OK.
Fyll sedan i enligt
dialogrutan till
höger.

 Nu har din rubrik <h1> blivit blå
 Gör på samma sätt en ny CSS-
regel för underrubriken <h2>
men gör den grön.
 Gör ytterligare en ny regel för
brödtexten <p> och gör den
orange med storlek 14px
 I fönstret CSS visas dina nya
regel h1, h2 och p.
 Infoga en bild(city.jpg) i
dokumentet före ordet skolan.
Skriv en regel för taggen <img>
(ruta->flyt->vänster och box
20px marginal)
 Du kan slå av och på
användning av stilmallar
Visa…Style Rendering…Visa
stilar eller knappen
 Stilmallen visas som flik

Klicka på fliken
stilmall.css

Inför nya css-regler
 Skapa luft kring
bilden (ändra regeln för img)
 Gör ett rektangulärt
område för text eller bild
Lägg till ny regel en s.k.
div tag #rektangel

Lägg till det rektangulära
området för att komma under bilden
Tryck på <Enter>
 Välj Infoga….Layoutobjekt…Div-kod
 Markera rektangel vid ID och tryck <Enter>

Validera din kod hos W3C
 Markera all html-kod och kopiera den
 Gå till http://validator.w3.org/ på internet
 Klistra in koden via Direct input
 Gör samma med css-koden http://jigsaw.w3.org/css-validator/

Rätta felet: Här är det img och alt-tag som måste ha ett värde!

Skapa knappar som du kan
använda i en navigationslist med

PSH dokument i PSH (100 x 30 px)
Öppna nytt
 Fyll med grön färg, använd hinken
 Använd Textverktyget, storlek 22p och skriv Home på knappen
 Se till att du bara har ett textlager (som det står ett T på)
 Välj Arkiv…Spara för Webb & Enheter. Spar med namnet
Home_XY och lägg bilden i din webbplats DWCS3 och mappen
images

Skapa understruken text
 Välj Fönster Tecken i PSH
 Markera textlagret
 Tryck på understruket T i panelen tecken
 Välj Arkiv…Spara för Webb & Enheter. Spar med
namnet Home_U_XY och lägg bilden i din
webbplats DWCS3 och mappen images

Skapa två knappar till
 Ändra texten till Info och spar för Webb &
Enheter som Info_XY
 Gör texten understruken och spar på nytt
som Info_U_XY
 Ändra texten igen till till Produkter och
spar som ProdukterXY
 Gör texten understruken och spar som
Produkter_U_XY
 Vi har nu totalt sex lika stora knappar

Skapa en navigationslist med
DW
 Öppna nytt dokument i DW, spar som
Navigationslist_XY
 Infoga tabell, 1rad, tre kolumner 300 px bred
 Välj Infoga Bildobjekt Överrullningsbild, välj
två matchande bilder som du gjort i
PhotoShop
 Gör samma sak i de två övriga cellerna

Så här kan det se ut när det är
klart
 Lägg till länkar till bilderna
 Spar och visa med Explorer och testa din
navigationslist

Skapa ett nytt dokument tidning_XY
Skapa en ny stilmall tidningsmall_XY för media
screen. Infoga div-taggar (se nästa sida)

Bildområde

Textområde #bild_XY

#left_col_XY

Textområde
#right_col_XY

Kapitel 1. Kom igång med
Dreamweaver CS3 och stilmallar

Kapitel 1. Kom igång med
Dreamweaver CS3
 Kopiera Lesson01 från fronter till din webbplats, du måste göra
mappen Lesson01 och mappen images innan du kopierar
 Kapitlet ger en översikt av layout och design
 Ändra titel på sidan
 Ändra rubriker
 Infoga text och bilder
 Länka till andra sidor
 Spara dokumentet på din egen webbplats
h:documentDW_CS3Lesson01index_XY.htm där XY är dina
initialer
 Skapa layout med css-stilmallar.
 En flik med stilmallen öppnas när du gör en ändring i stilmallen.
 Arbeta med id –taggar (div #taggnamn)
 Spar övningsfilen home.htm som home_XY.htm i samma
katalog
där XY är dina initialer

Kapitel 2 . Göra inställningar och använda
stilmall för mobiltelefon(handheld)

Kapitel 2 . Göra inställningar i
Dreamweaver CS3
 Arrangera paneler
 Studera verktygsfälten
 Göra allmänna inställningar
 Skriva direkt i html-koden
 Arbeta med taggväljaren
 Anpassa verktygsfältet Favoriter
 Arbeta med statusfältet
 Testa stilmallar för print och handheld

Kapitel 3 . Vi länkar externa
stillmallar i Dreamweaver CS3
 Skapa mapparna Lesson03 på din sajt
 Skapa mappen CSS i mappen Lesson03
 Skapa mappen Images och i den
mappen Nav
 Kopiera alla filer som hör till mapparna
från Fronter
 Gå till 61 i boken och öppna home_final
 Förhandsgranska och stäng filen
 Fortsätt på sid 63 och punkt 1.
 Spara som home_XY.html

Kapitel 3 . Vi länkar externa stillmallar i
Dreamweaver CS3. Här visas print

Kapitel 3 . Stillmallar i
Dreamweaver CS3
 Kopiera katalogen lesson3 till din webbplats
 Här skapar vi nya css-regler för både dokument (screen) och
utskrift(print)
 Vi skapar klassregler för stycken <p>. Dessas börjar med en
punkt (.more) t.ex. och kan användas på flera ställen på sidan
 Vi kan även göra en stillmall som passar för
mobiltelefon(handheld). Sätt bredden på taggen <body> till
240px.Viktigt är att inte ha stora bilder. Gör en regel för
taggen <img> och sätt attributet ”visa”till ”ingen”.
 Kom ihåg att alltid spara dokument och stilmallar på din egen
webbplats (h:dataDW_CIB)
 Du kan alltid titta i html-koden under taggen <link> för att se
vilka stilmallar som kan används
 Du kan slå av och på användning av stillmall

Kapitel 4. Text i Dreamweaver CS3.
Vi skapar tabell och css-regler
för taggen <th> tablehead

Kapitel 4. Text i
Dreamweaver CS3
 Kopiera katalogen lesson4 till din webbplats
 Skriva rubriker och brödtexter
 Hämta text från annat dokument
 Infoga numrerade listor
 Kontrollera stavning
 Sök och ersätta text
 Skapa tabeller och lägga till css-regel
(th) tablehead
 Importera tabeller. Använda klassregel.
Obs! använd kolon i övningen punkt 4
sid.101.

Kapitel 5 . Bilder i
Dreamweaver cs3
 Bilder på webben är i formatet gif, jpg eller
png.
 Jpg komprimerar bra och passar bäst för
bilder.
 Gif kan göra bakgrunden
(blå) genomskinlig
 Png är ett format som på sikt kommer att
ersätta gif som är patenterat och kostar i
licensavgift att använda.
 Redigera och optimera bilder
 Använda Fireworks och Bridge
 Övningen images_start.html använder fel
css-fil. Tag bort main_final.ccs,
print_final.css och koppla main.css i stället

Webbgrafik i Fireworks
 Öppa filen navbar.png i
Fireworks
 Öppna panelen Objekt och
ändra knapptexten enligt
bilden ovan.
 Klicka på länkguiden och
skriv in webbadresser till
tidningarna. Detta går även
att göra i Dreamweaver
 Exportera till din
webbkatalog enligt
anvisningarna i boken. Gör
en mapp navbar för bilderna.

Länkar, kap.6
 länkar till andra sidor (nysida.html)
 till webbadresser
(http://www.nysida.htm)
 e-postlänkar (mailto:min@epost.se)
 länkar i ett dokument (anlarlänkar)

Använda id-taggar. Kap 7
 Här skall vi skapa rektangulära
områden som liknar layouten på en
tidningssida
 Vi skriver CSS-regler för id-taggar och
sparar dessa i vårt dokument
 CSS-reglerna exporteras till en separat
stilmall när vi är klara
 Vi använder linjalen och stödlinjer
 Färgmarkera områdena för bättre
synlighet

Kap7. Formge med id-element sid.144
#wrapper
#header
#logo

#nav

#banner

#content
#leftColumn #rightColumn

#footer

Justera egenskaper för id-taggar med css-regler
#wrapper
#header
#logo
 Vi måste skapa 9 st
id taggar (#wrapper, #nav
#header o.s.v.) och
använda css-regler på #banner
dessa så vi får önskad
design och sedan #content
infoga dessa efter
varandra så de #leftColumn #rightColumn
rektangulära områdena
placeras på rätt sätt
 #logo, #nav och skall ha
olika höjd men ligga
inuti #header, #banner utanför
 #leftColumn och #rightColumn #footer
skall flyta vänster, resp höger
och får inte vara för breda
 Ändra färgerna på id-taggarna så #wrapper får grön bakgrund, #header rosa o.sv.
 Gör lite mellanrum mellan #nav och #banner genom att lägga till 10px marginal upptill eller nedtill.
Om du gjort rätt skall utrymmet mellan dessa bli rosa, inte grönt.
#nav och # banner ligger inuti #header som har rosa bakgrund.
 Vi lägger css-reglerna i html-dokumentet och flyttar dom till en css-fil på slutet
 Boken gör en regel för selektorn body med centrerad text. Sedan görs texten vänsterställd i
#wrapper. Detta görs för att det skall fungera med äldre webbläsare.
 Dreamweaver kan färglägga dina id-taggar med View…Visual Aids…CSS Layot Backgrounds

Skapa interaktiva sidor. Kap.8

 Vi lär oss om beteenden och skapar interaktiva sidor
 Beteendet byta bild vid mouseOver
 Beteendet öppna ny webbsida vid mouseClick
 Beteendet växla bild vid mouseOver

Beteendet onMousOut och
onMouseOver
som byter bild och byter tillbaka

Ajax och Spray. Kap
9.(Överkurs)
 Ajax och Spray hör till det som kallas Web
2.0
 Ett pluginprogram sköter lokalt på datorn
uppgifter som annars skulle utföras på
fjärrservern. Detta ökar funktionaliteten och
ökar snabbheten.

Formulär kap.10.
 Vi använder
formulärobjet
som t.ex.
textfält, alternati
vknappar, kryss
rutor, listor och
några Ajax och
Spray objekt för
att kontrollera
inmatningen i
textfält
 E:mail och
Username får ej
vara tomma
 Sist finns en
Skickaknapp

Multimedia kap. 11
 Här provar vi bildvisare och
Flashvideo

Dreamweaver cs3 och css

Recommended

Recommended

More Related Content

Similar to Dreamweaver cs3 och css

Similar to Dreamweaver cs3 och css (20)

Dreamweaver cs3 och css