kurshäftet

Webbutveckling 1
Vårterminen 2014
Centralt innehåll
• Webben som plattform, dess historia och samhällspåverkan.
• Teknisk orientering om webbens protokoll, adresser, säkerhet och
samspelet mellan klient och server.
• Utvecklingsprocessen för ett webbtekniskt projekt: målsättningar,
planering, specifikation av struktur och design, kodning, optimering,
testning, dokumentation och uppföljning.
• Märkspråk och deras inbördes roller, syntax och semantik – där det
huvudsakliga innehållet är standarderna för (x)html och css och
orientering om dokumentobjektsmodellen (DOM) och Ecmaskript.
• Teckenkodning: orientering om ASCII, ISO-8859, Windows-1252 och Unicode.
• Bilder och media med alternativa format, optimering och tillgänglighet.
• Nationella och internationella riktlinjer för god praxis inom
webbutveckling.
• Uppnående av interoperabilitet genom att följa standarder och testa på
olika användaragenter.
• Applikationer som fungerar oberoende av val av användaragent,
operativsystem eller hårdvaruplattform samt hur tillgänglighet uppnås
utifrån att applikationerna ska vara uppfattningsbara, användbara,
begripliga och robusta även för användare med funktionsnedsättning.
• Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.
• Lagar och andra bestämmelser som styr digital information, till exempel
personuppgiftslagen och lagen om elektronisk kommunikation.
• Terminologi inom området webbutveckling.
http://www.skolverket.se/laroplaner-amnen-och-kurser/gymnasieutbildning/gymnasieskola/sokamnen-kurser-och-program/subject.htm?lang=sv&subjectCode=web&tos=gy
2
Kunskapskrav
1. Kunskaper om internets historia, betydelse, terminologi och funktionalitet.
E
C
A
Eleven beskriver översiktligt webbens historia och
påverkan på samhället samt
grundläggande tekniker som
webben bygger på.
Eleven beskriver utförligt webbens historia och
påverkan på samhället samt
grundläggande tekniker som
webben bygger på.
Eleven beskriver utförligt och
nyanserat webbens historia
och påverkan på samhället
samt grundläggande tekniker
som webben bygger på.
Eleven använder med viss
säkerhet enkel terminologi
inom området.
Eleven använder med viss
säkerhet terminologi inom
området.
Eleven använder med
säkerhet terminologi inom
området.
2. Förmåga att planera, genomföra, dokumentera och utvärdera utvecklingsprojekt för webbplatser och webbapplikationer eller andra slags applikationer som bygger på webbtekniker.
3. Kunskaper om de tekniker som används för att bygga webbplatser och webbapplikationer
samt dessa teknikers vidgade roll inom annan mjukvaruutveckling.
5. Kunskaper om teckenkodning och förmåga att hantera olika standarder för teckenkodning.
6. Förmåga att bygga webbplatser och webbapplikationer enligt standarder och riktlinjer för
god praxis samt med god tillgänglighet för människor med olika förutsättningar.
7. Kunskaper om applikationsarkitektur, inklusive separation av olika slags logik.
E
C
A
Eleven gör en enkel projektplan för en tänkt produkt.
Utifrån projektplanen utvecklar eleven i samråd med
handledare produkten.
Eleven gör en genomarbetad projektplan för en tänkt
produkt. Utifrån projektplanen utvecklar eleven efter
samråd med handledare
produkten.
Eleven gör en genomarbetad projektplan för en tänkt
produkt. Vid behov reviderar
eleven planen. Utifrån projektplanen utvecklar eleven
efter samråd med handledare produkten.
I arbetet utvecklar eleven kod
som med tillfredsställande
resultat följer standarder och
som omfattar några av de
grundläggande teknikerna för
märkspråk och stilmallar.
I arbetet utvecklar eleven kod
som med tillfredsställande
resultat följer standarder och
som omfattar några av de
grundläggande teknikerna
för märkspråk och stilmallar.
I produkten infogar eleven
enkla diskreta domskript.
I arbetet utvecklar eleven kod
som med gott resultat följer
standarder och som omfattar
flera av de grundläggande
teknikerna för märkspråk
och stilmallar. I produkten
infogar eleven diskreta
domskript.
3
Dessutom redogör eleven
översiktligt för vanliga problem som beror på felaktigt
angiven teckenkodning i olika
applikationer.
Dessutom redogör eleven
utförligt för vanliga problem som beror på felaktigt
angiven teckenkodning i olika
applikationer samt väljer och
anger lämplig teckenkodning.
Dessutom redogör eleven
utförligt och nyanserat för
vanliga problem som beror
på felaktigt angiven teckenkodning i olika applikationer,
väljer och anger lämplig
teckenkodning samt anger
hur enklare problem som
relaterar till teckenkodningar hanteras.
I arbetet bearbetar eleven
med viss säkerhet enkel
text, bild och eventuell annan
media, så att de blir anpassade för att fungera i produkten.
I arbetet bearbetar eleven
med viss säkerhet och via
flera moment text, bild och
eventuell annan media, så
att de blir anpassade för att
fungera i produkten.
I arbetet bearbetar eleven
med säkerhet och via flera
moment text, bild och eventuell annan media, så att de
blir anpassade för att fungera
i produkten.
Produkten är av tillfredsställande kvalitet och följer
etablerad god praxis.
Produkten är av tillfredsställande kvalitet och följer
etablerad god praxis. Detta
kontrollerar eleven med
några tester.
Produkten är av god kvalitet
och följer etablerad god
praxis. Detta kontrollerar
eleven både manuellt och
med flera tester.
Eleven testar produkten i
några webbläsare samt
vidtar några enkla åtgärder
för att åstadkomma snabb
överföring av bilder och andra
mediafiler.
Eleven testar produkten på
flera plattformar, inklusive
traditionella datorer och
mobila enheter, samt vidtar
några åtgärder för att åstadkomma snabb överföring av
bilder och andra mediafiler.
Eleven testar produkten på
flera plattformar, inklusive traditionella datorer
och mobila enheter, samt
optimerar bilder och andra
mediafiler för att åstadkomma
snabb överföring och vidtar
åtgärder för att reducera
antalet överföringar per
sida.
Dessutom bygger eleven
en webbplats som med tillfredsställande resultat följer
grundläggande principer för
tillgänglighet.
Dessutom bygger eleven
en webbplats som med tillfredsställande resultat följer
grundläggande principer för
tillgänglighet och kontrollerar detta med några automatiserade tester.
Dessutom bygger eleven en
webbplats som med gott
resultat följer grundläggande
principer för tillgänglighet
och kontrollerar detta med
automatiserade tester och
simuleringar.
När arbetet är utfört gör
eleven en enkel dokumentation av de moment som har
utförts samt utvärderar med
enkla omdömen sitt arbete
och resultat.
När arbetet är utfört gör eleven en noggrann dokumentation av de moment som har
utförts samt utvärderar med
nyanserade omdömen sitt
arbete och resultat.
När arbetet är utfört gör
eleven en noggrann och
utförlig dokumentation av de
moment som har utförts med
koppling till generella principer och testresultat samt
utvärderar med nyanserade
omdömen sitt arbete och resultat och ger förslag på hur
arbetet kan förbättras.
4
8. Kunskaper om lagar och andra bestämmelser inom området samt förmåga att göra etiska
överväganden och reflektera över integritetsfrågor.
9. Kunskaper om säkerhet och förmåga att identifiera och motarbeta attacker.
E
C
A
Eleven redogör översiktligt
för innehållet i lagar och
andra bestämmelser som rör
publicering på webben samt
följer dem i sitt arbete. Eleven
hanterar lösenord eller annan
känslig data på ett etiskt
riktigt sätt.
Eleven redogör utförligt
för innehållet i lagar och
andra bestämmelser som
rör publicering på webben
samt följer dem i sitt arbete.
Eleven hanterar lösenord
eller annan känslig data på
ett etiskt riktigt sätt samt för
välgrundade resonemang
om andra webbrelaterade
frågor om etik och integritet. Dessutom anger
eleven hur tredjepartskod
kan innebära problem för
produktens säkerhet.
Eleven redogör utförligt och
nyanserat för innehållet i
lagar och andra bestämmelser som rör publicering på
webben samt följer dem i
sitt arbete. Eleven hanterar
lösenord eller annan känslig
data på ett etiskt riktigt sätt
samt för välgrundade och
nyanserade resonemang
om andra webbrelaterade
frågor om etik och integritet. Dessutom anger
eleven hur tredjepartskod
kan innebära problem för
produktens säkerhet samt
beskriver grundläggande
säkerhetskriterier vid val av
webbhotell.
E
C
A
När eleven samråder med
handledare bedömer hon eller
han med viss säkerhet den
egna förmågan och situationens krav.
När eleven samråder med
handledare bedömer hon eller
han med viss säkerhet den
egna förmågan och situationens krav.
När eleven samråder med
handledare bedömer hon eller
han med säkerhet den egna
förmågan och situationens
krav.
Betyg E: Kunskapskraven för E är uppfyllda.
Betyg D: Kunskapskrav för E och till övervägande del för C är uppfyllda.
Betyg E: Kunskapskraven för C är uppfyllda.
Betyg B: Kunskapskrav för C och till övervägande del för A är uppfyllda.
Betyg A: Kunskapskraven för A är uppfyllda.
5
En bra webbplats
• har ett bra innehåll. Texterna är välskrivna och innehållet relevant.
• är välstrukturerad och följer standard. Det är viktigt av många skäl:
webbplatsen ska fungera bra, det ska vara lätt att uppdatera och vid
behov felsöka filerna, och utan gemensam standard är det svårt att vidare
utveckla programvaror som webbläsare och hjälpmedel för funktionshindrade. Teknik utvecklas och standard förändras. Idag rekommenderas
HTML5 för innehållet och separata CSS-filer för utseendet (kommenterade
så det är lätt att hitta i dem). Lämplig teckenkodning anges och används.
H1 används som huvudrubrik, H2 som nästa nivå etc. Gillar du inte
storleken, ändra i stilmallen istället för att välja fel rubriknivå.
• är validerad. Validera dina filer i samband med att de publiceras!
• har en relevant titel. Titelns huvudfunktion är att beskriva innehållet på
sidan. Det är den som syns i sökmotorernas lista över träffar. Den syns
också på webbläsarfönstets övre kant och när besökare bokmärker sidan.
Titeln ska vara kort och beskrivande. ”Kapitel 1” är en dålig titel, ”Bind din
egen brudbukett” säger betydligt mer.
• är användarvänlig. Siten är välstrukturerad, snyggt designad och lätt
att navigera i. Bilder har alternativtexter så att även den som inte kan se
bilderna (pga av funktionshinder eller att de inte visas av någon anledning)
förstår vad de innehåller. Särskilt viktigt är detta om bilder används för
navigering. Färgkombinationer och teckensnitt är lättlästa även för dem
som inte ser så bra. Teckenstorlekar är relativa istället för att ha fasta mått.
• är sökmotoroptimerad. Sidorna innehåller ord och fraser som är
relevanta för målgruppen. Fundera över vilka sökord de skulla använda
och se till att få med dem. Även rubrikerna och interna länktexter innehåller
viktiga nyckelord, liksom bildtexterna. Texten i title-taggen är informativ
och relevant för sidan.
• är säker.
• fungerar såväl med mobiler, surfplattor och datorskärmar som med
olika webbläsare.
• går snabbt att ladda. Koden är utformad för att fungera smidigt. Bilderna
och annan media är optimerade för webben (lämpligt filformat, storlek och
komprimering). Siten innehåller inte tungladdade häftiga effekter utan allt
som ska laddas ner fyller ett syfte och är optimerat för webbpublicering.
6
Rotmapp
Du bygger normalt webbplatsen i din dator, men för att andra ska komma åt
den lägger du sedan upp filerna på en webbserver. För att allt material ska
följa med måste du lägga allt lokalt material (det du har på din dator) i en rotmapp. En rotmapp är egentligen en helt vanlig mapp, men kallas rotmapp för
att den innehåller alla andra mappar och filer till hela siten. Allt utgår från den.
En webbplats består av flera olika filer som länkas ihop. Du kan till exempel inte klistra in en bild i en html-fil, utan du skriver in kod som berättar var
bilden ska visas och var den finns att hämta. Om bilden ligger på din dator
men utanför rotmappen kommer den inte att följa med när du publicerar siten
på internet. Det är som om du skulle lägga in en lapp i din resväska som
säger att badbyxorna ligger i din garderob. Väl framme på Teneriffa hjälper
det inte att du har lappen som talar om att de ligger i garderoben hemma, du
kommer inte åt dem. Se rotmappen som en resväska. Allt som ska med på
resan måste ligga i den (såvida du inte länkar till material som redan ligger på
internet).
På kursen använder vi Dreamweaver. Det första du ska göra när du skapar en
webbplats är att definiera var din rotmapp finns:
1. Öppna Dreamweaver
2. I välkomstrutan som kommer upp väljer du Skapa ny > Webbplats. (Om
du inte ser välkomstrutan kan du gå till menyn Plats > Hantera platser >
Ny plats.)
3. Vid Platsnamn skriver du något som gör det lätt för dig att veta vilken
webbplats det gäller, till exempel ”Flugfiskeföreningen”.
4. Klicka på mappsymbolen till höger om Lokal mapp för platsen.
5. Klicka dig fram till önskad rotmapp. Har du ingen sådan än väljer du Ny
mapp och ger den ett bra namn så du aldrig behöver fundera över vilken
mapp detta är.
6. Klicka Välj
7. Klicka Spara
(Du kommer att öppna inställningarna igen senare och komplettera med fler
uppgifter om webbservern, men i nuläget räcker det att definiera rotmappen.)
7
Innehåll och utseende
Man skiljer på innehåll och utseende i en webbplats.
I HTML-filerna skriver du vad sidorna ska innehålla: rubriker, brödtext, bilder,
listor etc.
Utseendet styr du med stilmallar, Cascading Style Sheets (CSS.) Där anger
du hur det ska se ut: placeringar, storlekar, färger, teckensnitt etc.
Man kan skriva in CSS-kod direkt i en HTML-fil, men oftast väljer man att
skriva CSS i en särskild fil och länka den till HTML-filen. En stor fördel med
detta är att man kan koppla samma stilmall till flera HTML-filer. Dels slipper
man göra jobbet flera gånger och dels är det lätt att göra ändringar i en hel
site, till exempel byta färg, när man bara behöver ändra i en enda fil.
HTML
Det språk man skriver webbsidor i kallas HyperText Markup Language
(HTML). Det skulle bli alldeles för utrymmeskrävande att gå igenom all kod
här, så du får läsa mer på http://www.w3schools.com/html/ och http://www.
w3schools.com/tags/.
Skapa en HTML-fil
1. Arkiv > Nytt
2. Välj Tom sida, Sidtyp: HTML, Layout: <ingen> och Dokumenttyp:
HTML5
3. Klicka på Skapa
4. Ge sidan en relevant titel på en gång eftersom det är så lätt att glömma
det om. Det gör du i rutan vid Titel eller i kodfönstret vid <title>. Titeln
ska vara relevant för innehållet och dessutom formulerad så att den
lockar besökare som får upp den i sökmotorer. En välformulerad titel ökar
också chansen att sidan kommer högt upp i sökmotorernas rankning.
”Kapitel 1” är en dålig titel. ”Bind din egen brudbukett” säger betydligt
mer.
5. Spara sidan med kortkommandot CMD + S (PC: CTRL + S). Förutsatt att
du har definerat rotmappen kommer Dreamweaver automatiskt att lägga
filen i den, men annars måste du se till att filen hamnar i rotmappen.
Man kan lägga filer i undermappar, men de måste alltid vara placerade i
rotmappen.
6. Namnet på filen ska vara index.html (eller index.htm eller index.php) om
det är den fil som ska laddas först på en webbplats eller först i en undermapp. Annars ska namnet vara logiskt så du aldrig behöver undra
vilken fil som är vilken. Filnamnet får inte innehålla å, ä, ö, mellanslag eller
konstiga tecken! Använd endast gemener i filnamn på webben! Stora
bokstäver kan fungera, men det är som att be om strul.
(Du kan även välja att skapa HTML-filen direkt från Välkomstskärmen.)
8
9
Grundkod
Några få element saknar sluttagg och kallas tomma element. Det är element
som är självklart när de slutar. Det kan vara en horisontell linje <br> eller en
bild <img src="bild.jpg" alt="Ola håller historielektion.">.
<!DOCTYPE html>
Om det finns element i elementen är det viktigt att elementet som kom sist i
koden avslutas först. Element får inte gå omlott.
Alla html-sidor innehåller kod som inte visas på webbsidan men som krävs
för att det ska fungera.
<html lang="sv">
<head>
<meta charset: "utf-8">
<title>Sidans titel</title>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
Sidans innehåll inneslutet i lämpliga taggar.
</body>
</html>
Doctype-deklarationen måste vara allra först i dokumentet. Inte ens ett
mellanslag får komma före den! Den talar om för webbläsaren vilket språk
dokumentet är skrivet i.
<p>Maila <a href="mailto:[email protected]">Anna</a></p>
(Inte: <p>Maila <a href="mailto:[email protected]">Anna</p></a>)
Till de flesta element kan man ange egenskaper (kallas även attribut) för att
mer exakt definiera elementets funktion eller hur det ska visas på en webbsida. Attributen skrivs innanför vinkelparenteserna som omger starttaggen
och följs av likamed-tecken och attributets värde. Värdet ska omges med
raka citattecken.
<a href="http://norran.se">Norran</a>
Några vanliga element
Html-taggarna berättar att allt mellan start och sluttaggen html är html-kod.
Stycke
<p>text</p>
Meta-taggen innehåller information om sidan till sökmotorer och webbläsare.
Charset betyder teckenuppsättning och utf-8 är en uppsättning koder för
bokstäver, siffror med mera.
Rubrik
<h1>rubrik</h1>
Punktlista
<ul>
<li>Listobjekt 1</li>
<li>Listobjekt 2</li>
<li>Listobjekt 3</li>
</ul>
Title innehåller sidans titel, dvs det som ska synas på webbläsarfönstrets
övre kant och stå som rubrik i sökmotorer.
Link-taggen visar var stilmallen finns.
Det som finns mellan bodytaggarna är det som visas i webbläsarfönstret.
Element
Ett element består av starttagg, eventuella parametrar, eventuellt innehåll och
sluttagg:
<tagg>Innehåll</tagg>
<tagg attribut="värde">Text</tagg>
<h1>Välkommen till Olas historiesida!</h1>
<a href="http://norran.se">Norran</a>
10
Fungerar med h1-h6
Numrerad lista <ol>
<li>Listobjekt 1</li>
<li>Listobjekt 2</li>
</ol>
11
Tabell
Länk
Bild
<table border="1">
<tr>
<td>rad 1, cell 1</td>
<td>rad 1, cell 2</td>
</tr>
<tr>
<td>rad 2, cell 1</td>
<td>rad 2, cell 2</td>
</tr>
</table>
Box
<header>text
</header>
<nav>innehåll</nav>
<section>innehåll
</section>
<a href="Länkadress">Länktext</a>
Elementet a kräver attributet href för att styra
vart länken ska leda,
adressen.
<img src="Bildlänk"
alt="Bildbeskrivning">
Elementet img ska ha två
attribut, dels src som berättar var källan finns och
dels alt som beskriver
bilden för synskadade
och dem som av någon
anledning har stängt av
bildvisningen samt för
att sökmotorerna ska
hitta den.
<img src="Bildlänk"
alt="Bildbeskrivning" width="320"
height="250">
Ofta anger man bildens
storlek för att webbläsaren ska kunna beräkna
utrymmet direkt.
Annars kommer innehållet på sidan att hoppa
efter när bilderna laddas
och det kan vara rätt
irriterande.
Ingen sluttagg krävs vid
bilder i html.
12
<div>innehåll</div>
<article>innehåll
</article>
<aside>innehåll
</aside>
<footer>text
</footer>
<div id="wrapper">
innehåll</div>
<section
class="grey">
innehåll</div>
Span
<span class="red">
innehåll</span>
Kompletteras ofta med
attributen id eller class för
att man ska kunna styra
egenskaperna i stilmallen.
Boxar med id kan bara
användas en gång per
sida. Används till exempel
till för att positionera en
viss box.
Boxar med class kan
användas flera gånger på
samma webbsida.
Används till exempel för
att tala om att vissa boxar
ska ha speciella egenskaper, till exempel en färgad
bakgrund eller höger
justering.
Används på block-nivå
(hela stycken eller mer).
Används för att styra en
del av ett block i stilmallen.
Används på inline-nivå, till
exempel för att färgmarkera ett enskilt ord.
Kommentar
<!-- Kommentar -->
Används för anteckningar som man inte vill att
webbläsaren ska visa.
Fler taggar hittar du på http://www.w3schools.com/tags/.
13
Skriva HTML
Den första HTML-fil som ska laddas måste heta index. Övriga filer ska ha
logiska namn så man aldrig behöver fundera över vilken fil som är vilken.
Filnamnen får dock inte innehålla å, ä, ö, mellanslag eller konstiga tecken.
Namnen skrivs med små bokstäver.
Styckeindelning
När du skriver html-kod är vanliga radbrytningar helt verkningslösa. De påverkar inte alls vad som visas i webbläsaren. Att de inte syns gör att du kan
använda radbrytningar där du vill för att göra din kod mer lättläst. Självklart
vill man att webbläsaren ska visa texten indelad i stycken ändå, och det gör
man med en liten kodsnutt:
<p>Här kommer stycket.</p>
Vill du byta rad utan att det ska bli ett nytt stycke skriver du <br>. Den taggen behöver ingen sluttagg.
Framhäva ord och fraser
skärmen. Ibland kan det också vara krångligt med de svenska tecknen å, ä
och ö och då kan man använda teckenkoder även för dem.
Det finns långa listor med teckenkoder, men här nöjer vi oss med några av de
vanligaste:
<
>
&
”
©
&lt;
&gt;
&amp;
&quot;
&copy;
¼
½
¾
å
Å
&frac14;
&frac12;
&frac34;
&aring;
&Aring;
ä
&auml;
Ä
&Auml;
ö
&ouml;
Ö
&Ouml;
mellanslag &nbsp;
Man byter helt enkelt ut tecknet mot teckenkoden. Vill man skriva före & efter
blir det f&ouml;re &amp; efter.
Länkar
Taggen för länkar är <a>, och för att veta var länken leder behövs
egenskapen href följt av adressen till den aktuella filen. Om båda filerna
ligger i samma mapp räcker det att ange filnamnet som adress.
Om man vill framhäva något ord eller delar av en text använder man ofta någon av taggarna <strong> som ger fet stil eller <em> som kursiverar texten.
Vill man ge kodexempel används någon av taggarna <code> eller <samp>.
Variabler anges med taggen <var>.
<a href=”aborre.html”>hej</a>
<strong>Här är texten som ska vara fetstilt.</strong>
<a href=”vatten/fiskar/aborre.html”>hej</a>
Dessa taggar går att ge kraftigare effekt med CSS om man vill.
Ligger filen i en mapp högre upp i hierarkin ”backar” man med två punkter.
Rubriker
Använd rätt rubriknivå! Det kan vara frestande att välja rubriknivå efter hur
den ser ut, men gör inte så. Använd den korrekta nivån och justerat utseendet i stilmallen så det blir som du vill ha det.
Huvudrubriken för sidan ska ha taggen <h1>. De största underrubrikerna
heter <h2> och så vidare till <h6>.
Ligger filen i en undermapp inleder man med mappens namn, eller mapparnas om det den ligger i en undermapp till en undermapp.
<a href=”../index2.html”>hej</a>
För att länka till en annan webbsida är det enklast surfa till den och kopiera
adressen i webbläsarens adressfält.
<a href=”http://www.w3schools.com/html/”>hej</a>
Länkar med e-postadress skrivs så här:
<h1>Astrid Lindgrens uppväxt</h1>
<a href=”mailto:[email protected]”>Maila Bosse</a>
Specialtecken
Infoga bilder
En del tecken tolkas av webbläsaren som kod. Då måste man använda en
teckenkod för att förklara för webbläsaren att man faktiskt vill visa tecknet på
14
Se sidan 12.
15
CSS
Skapa en CSS-fil i Dreamweaver
Stilmallarna styr webbplatsens utseende. Man kan koppla flera stilmallar till
en och samma html-sida och man kan använda en och samma stilmall till
flera html-filer.
Stilmallar namnges ofta style.css eller stilmall.css, men kan egentligen kallas
vad som helst, förutsatt att filändelsen är rätt och att reglerna om vilka tecken
som får användas följs. Har man flera stilmallar är det viktigt att man ger dem
logiska namn så man direkt förstår vilken som är vilken (till exempel stilmall_
fotoskola.css).
I stilmallen skriver man reglerna direkt, inget inledande DOCTYPE, head,
body eller liknande alltså, förutom att teckenkodningen (@charset ”UTF8”;) brukar anges.
Man kan göra på flera sätt, men denna beskrivning utgår från att du redan
skapat en HTML-fil som är öppen.
1. Öppna panelen CSS Designer. (Om du inte ser den finns den under
menyn Fönster.)
2. Klicka på + vid Källor
3. Välj Skapa en ny CSS-fil. (Om du redan har en och vill koppla HTMLdokumentet till den väljer du Koppla befintlig CSS-fil istället.)
4. Klicka på Bläddra. Förutsatt att du redan definerat rotmappen kommer
Dreamweaver automatiskt att lägga stilmallen i den, men om du inte valt
rotmapp är det mycket viktigt att du ser till att den hamnar i den (eller i en
undermapp i rotmappen).
5. Ge CSS-filen ett bra namn så du vet vad som är vad.
Regler
En regel består av en väljare (selektor) och, inom måsvingar, en deklaration
som består av egenskap (attribut) och värde.
6. Klicka Spara. (Om du inte hunnit spara HTML-filen får du en varningsruta
som du kan ignorera.)
väljare
väljare
7. Nu är du tillbaka i rutan Skapa en ny CSS-fil. Se till att Länk är valt och
klicka OK.
body
{deklaration}
{egenskap:värde;}
{background-color:#000000;}
Väljaren styr vilket/vilka element i html-filen som ska påverkas. Elementen i
html har motsvarande väljare i css (till exempel body, a, h1).
Det kan finnas flera deklarationer i en och samma regel. Det spelar ingen roll
om man göra radbrytningar i css-dokumentet, så många föredrar att dela
upp regeln på flera rader när den har flera deklarationer (eller alltid) för att
göra texten mer överskådlig. (Du kan även lägga till mellanslag om du vill,
men inte mellan siffror och måttenheten i ett värde.)
img {
border:1px solid black;
padding:10px;
margin:10px 0 10px 0;
}
Lägg märke till att efter egenskapen skriver man kolon, och efter värdet semikolon!
16
Skapa/redigera regel i stilmall
Hoppa direkt till punkt 4 om du skapat regeln tidigare och vill redigera den
och klicka på önskad väljare.
1. Gå till panelen CSS Designer. (Om du inte ser den finns den under
menyn Fönster.)
2. Se till att stilmallen är markerad under Källor.
3. Klicka på/i det du vill styra med CSS-regeln och klicka sedan på + vid
Väljare. Du får nu förslag på väljare. Förslaget är ofta ganska specifikt,
men du kan ta bort delar, lägga till eller skriva in något helt eget.
- Regeln kan gälla en väljare, exempel: h1
- Regeln kan gälla flera väljare, exempel: h1,h2,h3 (separaras med
kommatecken)
- Regeln kan vara mer specifierad, exempel: #huvudmeny a (i detta fall
gäller regeln länkar, a, i boxen som fått namnet huvudmeny)
17
4. Under Egenskaper hittar du ett antal knappar som leder till olika grupper
av egenskaper. Välj önskad egenskap och klicka, välj eller fyll i önskat
värde. (Vill du ta bort en egenskap klickar du på papperskorgen till höger
på samma rad.)
.gulmarkerat {color:#ffff00;}
Ibland krävs flera värden för att effekten ska synas. Lägger du till exempel in
en kantlinje krävs det värden för färg, grovlek och stil för att du ska se kanten.
Kommentera din kod flitigt så blir det mycket lättare att hitta i den, särskilt
om du i ett senare skede om man vill göra ändringar!
P {
font-family:"Times New Roman",Times,serif;
font-size:0.875em;
/* 14px/16=0.875em */
font-style:italic;
}
/*Inställningar för menyn*/
/*De grå faktarutorna*/
Kommentaren vid font-size krävs inte, men det är klokt att kommentera flitigt
så man slipper undra senare hur man tänkt.
Om man vill testa olika designalternativ på en sida kan man kommentera bort
regler istället för att radera dem. Då är det enkelt att ångra sig.
Font-size kan även anges på olika sätt. Man kan använda xx-small,
x-small, small, medium, large, x-large och xx-large. Det går också
ange storleken i procent av föräldraelementets teckenstorlek (50%), smaller
eller larger än föräldraelementet. Många föredrar att använda enheten em.
Då anges storleken i förhållande till storleken på em. Om inte annat angivits
är 1em samma storlek som 16px. Det går blanda em och % i stilmallen.
Mer om CSS hittar du på:
http://helpx.adobe.com/se/dreamweaver/using/css-designer.html,
https://helpx.adobe.com/dreamweaver/how-to/edit-css-properties-visually.
html?set=dreamweaver--get-started--essential-beginners,
http://www.w3schools.com/css/ och http://www.w3schools.com/cssref/.
Några exempel på regler
. visar att det är handlar om en klass. Det kan finnas flera element med
samma klass (namn på klassen) på varje sida.
Även fasta storlekar (32px) fungerar, men det bör man använda sparsamt,
endast om storleken texten är avgörande, t.ex. i en header. Fasta storlekar
hindrar besökarna från att justera storleken i webbläsaren. Det kan behövas
då skärmarna har olika upplösning och ur ett tillgänglighetsperspektiv.
body {
background-color:#b0c4de;
background-image:url(’bakgrund.png’);
background-repeat:repeat-x;
}
h1 {
color:#00ff00;
font-size:250%;
font-weight:normal;
}
Bakgrundsbilden repeteras bara horisontellt med repeat-x. Alternativ är
repeat-y och no-repeat. Skriver man inget repeteras bakgrundsbilden
både i sid- och höjdled.
För att tydliggöra var det finns länkar låter man ofta något hända när man
håller muspekaren över den, till exempel kan den byta färg. Några exempel
på regler för länkar följer här:
#meny {
background-color:#b0c4de;
height:100px;
width:100px;
}
a {text-decoration:none;}
a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}
# visar att det är handlar om ett id. Det får bara finnas ett element med
samma id (samma namn på id:et) på varje sida.
18
/*
/*
/*
/*
/*
ingen understrykning*/
obesökt länk */
besökt länk */
mus över länk */
vald länk */
Många fler exempel och möjlighet att experimentera själv finns på http://
www.w3schools.com/css/css_examples.asp.
19
Boxar
I webbdesignsammanhang talar man om boxar. Man tänker sig fyrkantiga lådor som innehåller element (en rubrik, ett stycke eller nästan vad som helst).
En box kan också vara en större box som innehåller en eller flera andra mindre boxar. Tidigare kallade man dessa större boxar för divar, <div>. En div
är en del av webbsidan som hör ihop på något sätt. Div-taggen finns kvar,
men i HTML5 rekommendas att man använder mer specifika taggar som <header>, <nav>, <section>, <article>, <aside> och <footer> när
de finns. Om man till exempel vill samla länkar som tillsammans bildar en
meny använder man taggen <nav>.
För att kunna styra utseendet hos dessa tänker man sig själva ytterhöljet på
lådan som border. Kanten finns där oavsett om man gör den tjock eller låter
den vara helt osynlig. Avståndet mellan boxen och andra boxar alternativt
kanten på webbläsarfönstret kallar man margin. Luften i boxen, mellan ytterhöljet och innehållet kallar man padding.
#huvudmeny {
background-color:#CCCCCC;
border:3px solid black;
padding:15px 10px 20px 5px;
margin:0px;
}
Anledningen till att det står #huvudmeny som väljare är att deklarationen
gäller en box som fått attributet id och värdet huvudmeny. I stilmallen
skriver man # i stället för id. Om man istället skriver nav som väljare gäller
regeln alla navigeringsboxar (menyboxar).
Förutom möjligheten att styra var menyn hamnar ger ”samlingsboxen” oss
möjlighet att formatera innehållet på annat sätt än likadana väljare på övriga
sidan. Väljaren #huvudmeny a gör att bara länkarna i den boxen formateras
enligt regeln man ställer upp.
Positionera boxar
Om vi vill skapa en ”samlingsbox” att ha menyn i lägger vi in taggen <nav> i
html-filen. Ofta ger man den ett unikt namn också, ett id, för att kunna styra
var den ska ligga på sidan. <nav id="huvudmeny">innehåll</div>.
Det finns fyra typer av positionering: static, fixed, relativ och
absolute.
bo
x
Det är viktigt att veta att
när du anger storlek för
en box gäller det själva
innehållet. Padding och
border tillkommer om
det fått några mått
(annars är de 0px). Om
boxen är 250px bred och 100 px hög, paddingen 10px och bordern 5px
bred tar boxen med kant upp 280px (5+10+250+10+5=280) gånger 130px
(5+10+100+10+5=130).
margin
border
padding
innehåll (text, bild etc)
I stilmallen bestämmer vi hur boxen ”huvudmeny” ska se ut, till exempel kan
den få ljusgrå bakgrund och en sex pixlar tjock svart kant.
#huvudmeny {background-color:#CCCCCC; border: 6px solid
black;}
Om vi vill ange samma mått på alla fyra sidor räcker det att vi anger det en
gång. Vill vi ha olika mått börjar man att ange måttet upptill och går sedan
samma väg som klockan runt. Lägg märke till att det inte ska vara något
mellanslag mellan siffran och px!
20
Boxar används ofta för att dela in webbsidan i olika delar och styra var på
webbsidan olika innehåll ska hamna. Boxarna blir lådor – synliga eller osynliga – att stoppa in innehåll i. Om man inte anger annat, kommer de att hamna
under varandra i den ordning som angetts. Divarna kan också ligga i varandra, man kan ha en eller flera mindre lådor i en stor.
Man kan styra divarnas placering genom att välja positionerigsvariant och
mått för över- eller underkant och vänster eller höger.
För att försöka förklara hur det fungerar ska jag ge några exempel. I alla
exemplen utgår vi från följande kod i html-filen:
<div id="container">
<div id="rosa"></div>
<div id="gul"></div>
<div id="lila"></div>
</div><!-- Här slutar container -->
Jag har kommenterade sluttaggen för att det är svårt se vilken av divarna
som slutar där när avståndet är stort mellan start- och sluttagg. Gör det du
också! Eventuell felsökning blir mycket lättare.
21
Static
Fixed
#container {
background-color:#FFF;
height:200px;
width:200px;
margin-right:auto;
margin-left:auto;
}
#rosa {
background-color:#F9F;
height:50px;
width:50px;
}
#gul {
background-color:#FF6;
height:50px;
width:50px;
}
#lila {
background-color:#96F;
height:50px;
width:50px;
left:75px;
top:75px;
}
#container {
background-color:#FFF;
height:200px;
width:200px;
margin-right:auto;
margin-left:auto;
}
#rosa {
background-color:#F9F;
height:50px;
width:50px;
position:fixed;
}
#gul {
background-color:#FF6;
height:50px;
width:50px;
position:fixed;
}
#lila {
background-color:#96F;
height:50px;
width:50px;
left:75px;
top:75px;
position:fixed;
}
Static är standard. Anger du inte vilken typ av positionering du vill använda
utgår webbläsaren från att du vill använda denna. Boxarna staplas nedanför
varandra i den ordning de kommer i koden i html-dokumentet (ordningen i
css-filen styr alltså inte). De kommer inte att påverkas av top, bottom, left
eller right-inställningar.
22
På grund av att diven container
fått värdet auto margin-right och
margin-left centreras den.
De orangemarkerade deklarationerna till väljaren #lila blir overksamma med posotioneringen
static. Den lila diven lägger sig
under den gula.
Måtten som anges utgår från webbläsarens fönster. Rutan kommer inte att
flyttas när man scrollar. Element med position:fixed undantas ur det
vanliga flödet och hamnar där måtten säger oavsett var i ordningen i htmlkoden det ligger.
Att den rosa rutan inte syns beror
på att den ligger under den gula.
De har samma inställningar. Att
de ligger uppe till vänster i den
grå rutan beror på att inte left
och top angivits för dem. Hade
det stått 0px på de attributen
hade de hamnat längst upp till
vänster i webbläsarfönstret istället för i containerdiven.
I det här exemplet ligger den
lila rutan 75 pixlar från vänstra
kanten och ovankanten.
23
Relative
Absolute
#container {
background-color:#FFF;
height:200px;
width:200px;
margin-right:auto;
margin-left:auto;
}
#rosa {
background-color:#F9F;
height:50px;
width:50px;
position:relative;
}
#gul {
background-color:#FF6;
height:50px;
width:50px;
position:relative;
}
#lila {
background-color:#96F;
height:50px;
width:50px;
left:75px;
top:75px;
position:relative;
}
#container {
background-color:#FFF;
height:200px;
width:200px;
margin-right:auto;
margin-left:auto;
position:relative;
}
#rosa {
background-color:#F9F;
height:50px;
width:50px;
position:absolute;
}
#gul{
background-color:#FF6;
height:50px;
width:50px;
position:absolute;
}
#lila {
background-color:#96F;
height:50px;
width:50px;
left:75px;
top:75px;
position:absolute;
}
I det här läget flyttas diven så många pixlar som anges den plats den skulle
ha haft med standardinställningen static. I static-läget låg den lila direkt
under den gula. Nu har den flyttats 75 pixlar neråt och åt höger.
24
Den lila rutan flyttas 75 pixlar åt
höger och neråt jämfört med hur
den skulla ha placerats med
standardpositioneringen static.
Måtten som anges utgår från föräldraelementet, dvs den box boxen ligger i.
Detta gäller dock bara om föräldraelementet har en annan positionering än
standardvärdet static! Vill du utgå från en ”samlingsbox”, typ <div id=
#container>, måste
du alltså ge den någon
annan positionering än
standardvärdet. Om
inget föräldraelement
med annan positionering
finns utgår positioneringen från <html>, dvs
webbläsarfönstrets kant.
Att den rosa rutan inte syns beror
på att den ligger på under den
gula. De har samma inställningar. Vilken av rutorna som hamnar
överst kan styras med z-index vid
absolut positionering. Ju högre
tal, desto högre upp i högen
hamnar boxen, exempel:
z-index:1;
z-index:2;
z-index:-1;
Den lila rutan flyttas 75 pixlar åt
höger och neråt från föräldraelementet #containers kant (diven
lila ligger inuti diven container,
och container har en annan positionering än static).
25
Float
För att kunna lägga boxar utmed varandra måste man använda sig av
attributet float. Boxarna, som alltså kan vara allt möjligt som till exempel
”samlingsboxar”, bilder eller texter, kan flyta åt vänster eller höger. Float
används ofta för att skapa kolumner för texter eller i fotogallerier för att rada
upp bilder utmed varandra.
Float kan också användas för att få text att lägga sig runt bilder. Texten
lägger så långt till vänster/höger som det är möjligt, där det är tom yta.
Ett flytande element flyttar sig alltså så långt åt vänster eller höger det kan.
Om flera flytande element ryms utmed varandra hamnar de sida vid sida. Tar
utrymmet slut hoppar det som inte ryms ner till nästa rad.
#meny {
float:left;
height:250px;
width:100px;
}
#main {
float:left;
height:500px;
width:600px;
}
Om vi plockar fram det gamla experimentet med de färgglada boxarna blir
det så här:
#container {
background-color:#FFF;
height:200px;
width:200px;
margin-right:auto;
margin-left:auto;
}
#rosa {
background-color:#F9F;
height:50px;
width:50px;
}
#gul {
background-color:#FF6;
height:50px;
width:50px;
float:right;
}
#lila {
background-color:#96F;
height:50px;
width:50px;
left:75px;
top:75px;
float:right;
}
De orangemarkerade deklarationerna till väljaren #lila blir i detta
exempel overksamma. Den lila
diven lägger sig så nära den gula
den kan.
Clear
Om man vill avbryta floatingen, till exempel för att få nästa element att hamna
på en ny rad, använder man egenskapen clear tillsammans med någon av
väljarna left, right eller both. (Man behöver inte skapa en klass för ny rad
som i exemplet nedan, utan kan skriva in deklarationen till andra väljare.)
.nyrad {
clear:both;
}
Om du vill veta mer om hur man kan positionera element, se http://www.
w3schools.com/css/css_positioning.asp och http://www.w3schools.com/
css/css_float.asp.
26
27
Färger
Det finns 140 färger som man kan ange med namn, bl. a. black, aqua och
darkgreen. Se http://www.w3schools.com/tags/ref_colornames.asp.
Vanligtvis använder man sig dock av hexadecimala färgkoder. De består av
tecknet # följt av tre eller sex siffror/bokstäver. Är det tre bokstäver/siffror är
det en vardera för rött (R), grönt (G) och blått (B). Är det sex bokstäver/siffror
visar de två första hur mycket rött det ska vara i färgen, de i mitten grönt och
de två sista hur mycket blått det ska vara.
red
#F00
#FF0000
pink
#FFC0CB
dimgray
#696969
gray
#808080
lightgrey
#D3D3D3
white
#FFFFFF
yellow
#FFFF00
#CCFF00
#99FF00
lime
#00FF00
darkgreen
#006400
Välj färger med omsorg så webbsidan är lätt att läsa! Det är viktigt med god
kontrast mellan text och bakgrund.
Hur går det
här att läsa?
fuchia
#FF00FF
darkviolet
#9400D3
slateblue
#6A5ACD
navy
#000080
Det hexadecimala talsystemet består av de sexton siffrorna 0, 1, 2, 3, 4, 5, 6,
7, 9, A, B, C, D, E och F. Lägsta värdet är 0 och högsta F. För att få möjlighet
till fler värden kombinerar man ofta två siffror (jämför 0-9 och 00-99). Med två
hexadecimala siffror får man 256 möjliga värden (16*16=256). Lägsta värdet
är dåw 00 och högsta ff.
Du kan tänka dig tre lampor som
går tända (ff) och släcka (00)
eller dimma (alla värden
däremellan). Svart blir därmed
#000000 (alla lampor släckta)
och vitt #ffffff (alla lampor
lyser för fullt). På samma sätt
blir rött #ff0000 (bara den röda
lyser) och gult #ffff00 (den
röda och den gula lyser). Om
man vill ha en mörkare röd låter
man bara den röda lysa, men
inte med full styrka, till exempel
#990000. Låter man alla lysa
lika mycket men med begränsad
styrka blir det grått.
28
black
#000000
#000000
Hur går det
här att läsa?
Hur går det
här att läsa?
Hur går det
här att läsa?
Hur går det
här att läsa?
Välj ut några färger som du arbetar med på din webbplats och håll dig till
dem (såvida du inte har ett gott skäl att göra undantag). Det ger sajten ett
enhetligare och proffsigare intryck. Tre färger är ofta lagom. Det är viktigt att
de harmonierar med varandra.
Ta en titt på https://color.adobe.com/sv/create/color-wheel/ där du kan testa
dig fram till olika färgkombinationer. Vill du ha färdiga förslag går du in på
https://color.adobe.com/sv/explore/newest/?time=all.
Hex-koder finns på http://www.w3schools.com/tags/ref_colorpicker.asp.
Ange färg i CSS
Färgerna kan anges med färgnamn eller hexadecimal färgkod. De flesta
webbläsare klarar även att man anger rgb-värdena med vanliga tal.
#FFFF00
#FF0000
#00FF00
#FFFFFF
#FF00FF
Några fler exempel på css-kod där färg anges:
#00FFFF
#0000FF
p {color: red;}
p {color: #00ff00;}
p {color: rgb(0,0,255);}
.info {
color: #000000;
background-color: #FAFAE6;
border: 4px solid #DEB887;
}
Se mer på http://www.w3schools.com/cssref/.
29
Inkludera filer
Föra över filer med FTP (File Server Protocoll)
Skriptet för att inkludera filer fungerar inte i html-filer. Istället får man välja
filformatet php. Är det en html-fil du vill använda kan du spara om den med
filändelsen php istället för html.
Se inklistrad lapp nedan i de fall bara exempel ges.
Om siten är stor kan det vara klokt att bygga meny, footer och annat som
ingår på flera sidor i separata filer. Bygger man en meny i en separat fil kan
man inkludera denna i flera sidor. Om man sedan vill göra en ändring räcker
det att göra den på ett enda ställe, i meny-filen, istället för att ändra på alla
sidor.
Det krävs också att webbservern har stöd för php. De flesta webbhotell har
det, men ibland kan funktionen vara avstängd. Läs webbhotellets supportsidor så brukar det framgå hur man ändrar dessa inställningar så att php
accepteras.
1. Skapa en ny php-fil. Du gör på samma sätt som när du skapar en html-fil
förutom att du väljer php som filformat. Ta bort all automatskapad kod!
Det får nämligen bara finnas ett head och ett body på varje sida, och om
du inkluderar en fil i en annan blir det dubbletter av dessa om du inte tar
bort koden som lagts in automatiskt på filen som ska inkluderas.
2. Skapa innehållet på sidan (till exempel en meny).
3. I filen där den nya filen ska inkluderas ställer du muspekaren där du
vill att den filen ska infogas, till exempel mellan start och sluttaggen
<nav></nav>. Gå till Infoga-panelen, välj PHP och Inkludera. Nu skapas kodraden <?php include(""); ?>.
Gå till menyn Plats > Hantera platser. Markera aktuell plats och klicka på
pennan. Gå sedan till fliken Servrar. Klicka på + (alternativt på pennan om du
vill ändra en befintlig serverinställning). Mer om detta ser du på https://helpx.
adobe.com/dreamweaver/how-to/publish-manage-websites.html?set=dreamweaver--get-started--essential-beginners.
Servernamn
(valfritt vad, men något ska det stå)
Anslut medFTP
FTP-adress
ftpcluster.loopia.se
Port21
Användarnamn (exempel: kurt_3)
Lösenord
Rotkatalog
/public_html/
Webb-URL
(exempel: http://kurt.guldmedia.se/)
Övriga adresser
Wordpress
(exempel: http://kurt.guldmedia.se/wp/)
Inloggning wp (exempel: http://kurt.guldmedia.se/wp/wp-login.php)
E-post
(exempel: [email protected])
Webbmailhttps://webbmail.loopia.se/
4. Mellan citattecknen skriver du in sökvägen till filen som ska inkluderas.
Ligger filen i samma mapp är det filnamnet som är sökvägen. Exempel:
<?php include(”meny.php”); ?>
5. Den inkluderade filen laddas nu i sidan. Det är dock inte säkert att du
ser det på din dator, såvida du inte installerat wampserver eller annan
programvaro som ger stöd för php. Ladda upp filerna på servern och se
hur det blev om resultatet inte syns lokalt i datorn.
30
31
Arbetsprocessen
5.Granskning
Diskutera förslaget med uppdragsgivaren och gör eventuella ändringar.
1.Research
Gör en ordentlig research om förtaget, ämnet eller det du ska göra webbplatsen om.
6.Designfas 2
Nu är det dags att bygga webbsiten på riktigt med allt vad det innebär.
Kom ihåg att kommentera koden där det är lämpligt så det blir lättare att
underhålla webbsiten i framtiden! Du, eller den som uppdaterar sidan i
framtiden, kommer att tacka dig.
Förberedelserna är A och O för en bra site!
2.Analys av behov och insamling av material
Vad är syftet med webbplatsen? Vilken är målgruppen? Vilken information
förväntar de sig att hitta på webbplatsen? Vilket material finns att tillgå
(texter, bilder, logotyper etc)? Vilket material behöver skaffas fram?
3.Strukturera
Gör tankekartor eller liknande för att få fram vilka sidor och rubriker som
bör finnas med. Är siten lite större gör du ett flödesschema för att se vilka
filer som ska finnas med och hur man ska kunna navigera mellan dessa
(vart olika menyer, undermenyer och andra länkar ska leda).
4.Designfas 1
Jobba med enkla snabba
skisser för att prova olika
idéer. När du har en tanke
om hur webbplatsen ska se
ut gör du en mer ordentlig
skiss, eller ännu hellre två:
en som visar hur sidan ska
se ut och en som visar hur
den ska byggas upp med
divar, mått etc. Det underlättar kodningen oerhört!
Bygg upp en
provsida (alternativt
skapa den som
en bild i datorn)
så man ser färger,
teckensnitt,
storlekar etc.
32
7.Granskning/testning
Korrekturläs alla texter (brödtexter, rubriker, bildtexter, menyer, sidtitlar
mm). Kontrollera att allting fungerar (länkar fungerar, bilder visas och har
alternativtexter etc). Kontrollera att webbplatsen fungerar som den ska
i olika webbläsare. Validera filerna med en valideringstjänst (alternativt i
samband med publicering).
8.Publicera webbplatsen och kontrollera en extra gång
Gör en extra kontroll att allt fortfarande fungerar efter publiceringen och
att det gör det oavsett plattform (mac, pc, surfplatta, mobiltelefon). Om
du inte validerade filerna i förra steget gör du det nu. Åtgärda eventuella
problem.
9.Framtiden?
Vem ska sköta uppdateringen i framtiden? Vilka inloggningsuppgifter och
vilken annan information behöver denna få tillgång till? Ordna med detta
redan nu, medan du minns vad som gäller.
33
Länkar
Text: https://helpx.adobe.com/dreamweaver/how-to/format-headings-paragraphs-lines.html?set=dreamweaver--fundamentals--work-content
HTML
Bilder: https://helpx.adobe.com/dreamweaver/how-to/add-images-alternate-text.
html?set=dreamweaver--fundamentals--work-content
HTML taggar: http://www.w3schools.com/tags/
Typografi: https://helpx.adobe.com/dreamweaver/how-to/enhance-typography-web-designs.html?set=dreamweaver--get-started--essential-beginners
HTML handledning: http://www.w3schools.com/html/
CSS
Strukturera sidan: https://helpx.adobe.com/dreamweaver/how-to/insert-html-structure-elements.html?set=dreamweaver--fundamentals--dreamweaver-code
CSS väljare, egenskaper och värden: http://www.w3schools.com/cssref/
Förstå boxmodellen: https://helpx.adobe.com/dreamweaver/how-to/understanding-the-box-model.html?set=dreamweaver--fundamentals--web-design
CSS handledning: http://www.w3schools.com/css/
Exempel och möjlighet att experimentera själv: http://www.w3schools.com/css/
css_examples.asp
Använda CSS Designer-panelen: http://helpx.adobe.com/se/dreamweaver/using/
css-designer.html
Videoguide in CSS i Dreamweaver: https://helpx.adobe.com/dreamweaver/how-to/
edit-css-properties-visually.html?set=dreamweaver--get-started--essential-beginners
Validering
W3C:s valideringstjänst: http://validator.w3.org/
W3schools valideringstjänst: http://www.w3schools.com/website/web_validate.asp
Dreamweaver
Dreamweavers hjälpsidor: http://helpx.adobe.com/se/dreamweaver/topics.html#dynamicpod_reference_4
Videoguider: https://helpx.adobe.com/dreamweaver/tutorials.html Skrolla ner till
menyn och klicka på alternativen (”Get started”, ”Learn essentials” med mera) för att
hitta de olika undermenyerna med filmer och några textguider.
Videoguider att se inför momenten och repetera med
Dreamweavers gränssnitt: https://helpx.adobe.com/dreamweaver/how-to/
learn-user-interface.html?set=dreamweaver--get-started--essential-beginners
Använda ”Egenskaper”: https://helpx.adobe.com/dreamweaver/how-to/use-property-inspector.html?set=dreamweaver--fundamentals--navigating-the-interface
Arbeta i kod-läget: https://helpx.adobe.com/dreamweaver/how-to/edit-code-view.
html?set=dreamweaver--get-started--essential-beginners
Skapa webbsida: https://helpx.adobe.com/dreamweaver/how-to/create-html5-compliant-pages.html?set=dreamweaver--get-started--essential-beginners
34
Använda responsiv layout (Fluid grid): https://helpx.adobe.com/dreamweaver/howto/exploring-fluid-grid-layout.html (enkel att följa men koncenterar sig på de första
stegen), http://tv.adobe.com/watch/creative-cloud-for-web/enhanced-responsive-design/ (mer omfattande, men kräver lite mer förkunskaper) och https://helpx.adobe.
com/dreamweaver/how-to/dreamweaver-new-fluid-grid-layouts.html (från grunden,
bra förklaring hur man kan göra en meny)
Responsiv layout och mobilappar: https://helpx.adobe.com/dreamweaver/how-to/
develop-responsive-mobile-sites.html?set=dreamweaver--get-started--essential-beginners
Skapa mobilapp: https://helpx.adobe.com/dreamweaver/how-to/custom-design-jquery-mobile.html?set=dreamweaver--key-techniques--developing-for-responsive-and-mobile och https://helpx.adobe.com/dreamweaver/using/
packaging-web-apps.html?set=dreamweaver--key-techniques--developing-for-responsive-and-mobile
Formulär: https://helpx.adobe.com/dreamweaver/how-to/create-html-forms.html?set=dreamweaver--fundamentals--create-form och https://helpx.adobe.com/
dreamweaver/how-to/dreamweaver-working-form-properties.html?set=dreamweaver--fundamentals--create-form och https://support.loopia.se/wiki/Kontaktformul%C3%A4r_%28Formmail%29
Drop-down-meny: https://www.youtube.com/watch?v=9YGvzQEREz8 (Koden finns
färdig att ladda ner från http://sillybilly.com/CSS_DropDown.zip.)
jQuery (flikar, kalender mm): https://helpx.adobe.com/dreamweaver/how-to/
dreamweaver-jquery-widgets.html?set=dreamweaver--key-techniques--extending-web-compositions
Förhandsvisa: https://helpx.adobe.com/dreamweaver/how-to/preview-web-designs.
html?set=dreamweaver--get-started--essential-beginners
Ladda upp siten på webbservern: https://helpx.adobe.com/dreamweaver/how-to/
publish-manage-websites.html?set=dreamweaver--get-started--essential-beginners
35
Innehåll
Centralt innehåll 2
Kunskapskrav 3
En bra webbplats 6
Rotmapp 7
Innehåll och utseende 8
HTML 9
Skapa en HTML-fil 9
Grundkod 10
Element 10
Några vanliga element 11
Skriva HTML 14
CSS 16
Regler 16
Skapa en CSS-fil i Dreamweaver 17
Skapa/redigera regel i stilmall 17
Några exempel på regler 18
Boxar 20
Positionera boxar 21
Static 22
Fixed 23
Relative 24
Absolute 25
Float 26
Clear 27
Färger 28
Ange färg i CSS 29
Inkludera filer 30
Föra över filer med FTP 31
Arbetsprocessen 32
Länkar 34
HTML 34
CSS 34
Validering 34
Dreamweaver 34
Videoguider 34