skriv ut»
Grunderna
i Dreamweaver 4:
Skapa en webplats (website)
- HTML-grunderna
Dreamweaver är en kraftfull professionell HTML-editor som skapar HTML, DHTML, CSS och javascripts-kod. Använder du programmet på rätt sätt bygger du snabbt stora webplatser som är lätt att underhålla, uppdatera och bygga ut. Programmet består av två delar; Site och Editor (Plats och Editor). HTML-sidorna bygger du i Editor-fönstret och webplatsen administerar du i Site-fönstret.
I övningarna på Dreamweaverskolan använder vi benämningarna
websida och webplats. Det förekommer flera benämningar
på samma sak och vilken du använder avgör du själv:
websida (webbsida - hemsida - homepage - internetsida) =
sidan som visas i webläsaren
webplats (webbplats - site - website - webbsajt) =
en samling websidor
En av Dreamweaver's fördelar är att du kan hantera stora webplatser med tusentals dokument och bilder. Du kan tex enkelt byta layout eller namn på länkar eller filer och programmet ser till att alla HTML-koder ändras i de berörda websidorna. Förutsättningen för att få en sådan dynamisk koppling mellan alla websidor i en webplats är att du skapar en Site (Plats).
OBS! Om du arbetar i Dreamweaver MX ska du istället titta i guiden "Skapa webplats i Dreamweaver MX" »
Arbetsytan i Dreamweaver
När du startar Dreamweaver första gången är de flesta verktygsfönstren öppna. De flesta verktygen används relativt sällan och om du har en låg upplösning/liten bildskärm behöver du skärmutrymmet till innehållet på websidorna. Ett exempel på användning och placering av verktygsfönstrenär enligt nedan. De två fönster du använder mest är "Objekts" (Objekt) och "Properties" (Egenskaper), du kan alltså stänga de övriga fönstren.
Exempel på placering av verktygsfönster:
Behöver du öppna ett verktygsfönster finns de under menyn "Window" (Fönster) eller som knappar i det nedre högra hörnet av programfönstret:
Normalvyn vid arbete i Dreamweaver är förmodligen "Design view" (Visa Design). Du kan även se den HTML-kod som skapas samtidigt som du skriver text mm genom att dela programfönstret med knappen "Show Code and Design view" (Visa kod och design). Föredrar du att jobba direkt i kodfönstret och skriva HTML-kod mm själv byter du till "Code view" (Visa Kod).
Se hur HTML-koden skapas samtidigt som du bygger websidan:
... eller jobba direkt i HTML-koden:
Skapa en webplats
För att utnyttja Dreamweavers kraftfulla funktioner måste du ange vilka dokument och bilder som ingår i din webplats. Det gör du i programdelen "Site" (Plats). I Site anger du vilken mapp som ska vara "root" (rotmapp). Det är den mapp som alla sökvägar i länkar bilder mm utgår ifrån. När du arbetar med din webplats lokalt på din dator används de lokala hårddiskarna som sökvägar men när du senare publicerar webplatsen till en webserver måste sökvägarna vara relativa till ett domännamn eller IP-adress.
- Öppna programdelen "Site" med menyn "Site/Site
files" (Plats/Platsens filer) eller F8 eller knappen
"Show Site":
- Välj menyn "Site/New Site..." (Plats/Ny
plats...). Dialogrutan "Site Definition" (Platsdefinition)
använder du för att att ange var webplatserna ligger i
datorns filsystem och vad de heter. Dessutom kan du här ange
vilken FTP-server eller webserver i nätverket du tänker
publicera din webplats till.
Du kan ange flera webplatser som ligger i olika eller samma mappar på din dator. Huvudmappen "Local Root Folder" är den mapp som alla sökvägar till länkar och övriga dokument utgår ifrån. När du senare publicerar webplatsen är det Rotmappens filer som kopplas till webadressen (URL).
När du tex anger adressen hit till Webdesignskolan , www.webdesignskolan.com, så hämtar du de filer som från början låg lokalt på vår egen PC i rotmappen (Local Root Folder) innan de publicerades online.
Sätt ett namn på din nya webplats och ange vilken mapp som ska vara huvudmapp, rotmapp, genom att bläddra med den gula knappen eller ange sökvägen direkt. OBS! Använd inte en mapp som redan innehåller filer som inte ska tillhöra webplatsen. Skapa hellre en ny mapp för ändamålet.
Gå ur dialogrutan med knappen "Done" (Klar) och din webplats är nu skapad.
- Fönstret för Site är delat. På den högra
sidan kommer de dokument och bilder som du använder i webplatsen
att sparas. Den vänstra delen används för att visa
filerna på webservern / FTP-servern när du kopplar upp
mot den för att publicera webplatsen. Du kan också använda
utrymmet för att grafiskt visa delarna och länkarna i
din webplats.
Webplatsen med det enda som finns hittills; root folder (rotmappen):
- För att börja arbeta med en ny websida väljer
du menyn "File/New Window" (Arkiv/Nytt fönster)
eller väljer det tidigare Editor-fönstret genom att växla
till det på Aktivitetsfältet i Windows.
OBS! Alla nya dokument du öppnar i Dreamweaver visas i egna fönster. Du kan alltså använda Windows Aktivitetslist för att växla mellan de aktiva fönstren.
Startsidan i en webplats
Den första sidan som visas i en webplats när någon skriver in adressen (URL) i webläsaren kan ju egentligen heta vad som helst. För att göra adressen till webplatsen kortare kan du dock ange de namn som webservrarna oftast söker; index eller default.
Namnet "index" är förmodligen mest gångbart
då det varit en standard länge för tex Apache Webserver
för Unix/Linux. Namnet "default" är vanligt på
Microsoft's webserverprogram som tex Internet Information Server (ISS),
Personal Webserver (PWS) etc och måste användas om du använder
ASP-script på dina websidor.
Filtillägget kan variera beroende på vilken teknik som
används, HTML, SSI, ASP, JSP, PHP mm. Här är några
exempel:
.htm - .html - .asp - .shtm - .shtml - .ssi - .css - .xml - .js
www.webdesignskolan.com/start.htm
Övriga rekommendationer för namngivning på websidor och även mappar är att inte använda VERSALER eller mellanslag, undvik också ÅÄÖ. Använd gärna "underscore/understrykning" ( _ ) istället för mellanslag.
Om du vill ha beskrivande filnamn som tex:
Drömvävaren för HTML-sidor.htm
kan du istället namnge filen:
dromvavaren_for_html-sidor.htm
...eller bildnamn:
Bakgrundsbild startsida Drömvävaren.gif
kan du istället namnge bilden:
bakgrundsbild_startsida_dromvavaren.gif
Reglerna för namngivning varierar beroende på webserverns programvara och vad som tillåts i de olika scriptspråken. Ta det säkra före det osäkra och kolla först vad som tillåts, annars blir det en otrevlig överraskning när du ska publicera webplatsen och filerna tex inte tillåts av webservern. Att döpa om hundratals filer är inte roligt...
Spara din startsida med menyn "File/Save..." (Arkiv/Spara...). Om du väljer namnet "index.htm" behöver du inte ange filtillägget .htm då Dreamweaver gör det automatiskt.
TIPS! om du föredrar ett annat filtillägg kan du ändra grundinställningarna i Dreamweaver. Du hittar dem under menyn "Edit/Preferences..." (Redigera/inställningar...). Under kategorin "General" (Allmänt) kan du byta det förvalda filtillägget.
Titel på websidan - Title
Förutom att spara websidan med ett lämpligt filnamn bör du även ange en Titel (Title) på sidan. Dreamweaver anger "Untitled Document" som sidtitel om du själv inte väljer ett eget namn.
Funktionen för Titeln är bla att den syns i webläsarens överkant:
En annan viktig funktion för sidtiteln är att den även blir namnet på Favoriten när någon lägger till din sida som Favorit/Bokmärke:
Den kanske viktigaste anledningen till att ha ett bra namn som sidtitel är att de flesta söktjänster/sökmotorer indexerar websidorna med vägledning av bla Titeln. Din webplats har alltså betydligt större chans att bli hittad om någon söker på ett ord som ingår i din sidtitel!
Ange din sidtitel i fältet "Title" eller med menyn "Modify/Page Properties..." (Ändra/Sidegenskaper...).
Ange Titel i fältet "Title":
...eller i dialogrutan "Page Properties" (Sidegenskaper):
HTML-koden för sidan
Dags att ta en titt bakom kulisserna! Även om du föredrar att jobba i Designläget så bör du kolla din HTML-kod med jämna mellanrum så att du förstår hur websidorna är uppbyggda. Du kommer att ha stor användning för det senare när du börjar med stilmallar, CSS...
Visa all HTML-kod med knappen "Code View" (Visa
Kod) eller CTRL+TABB:
TIPS! Du kan se all kod utan att behöva bläddra i sidled om du låter raderna brytas vid fönsterkanten med menyn "View/Code View Options/Word Wrap" (Radbryt).
Dreamweaver tillämpar den obligatoriska grundkoden som webläsare kräver och anger dessutom att bakgrundsfärgen ska vara Vit och textfärgen Svart.
De olika delarna av koden som reglerar vad webläsaren ska visa kallas för "märken" eller "taggar". Vissa märken har även "attribut" som mer detaljerat anger vad i märket som ska påverkas.
<BODY> är ett märke och BGCOLOR är ett attribut till märket precis som TEXT i exemplet ovan. Vill du veta mer om de olika HTML-koderna kan du besöka någon av de olika HTML-skolorna och HTML-resurserna du hittar bland våra Weblänkar » eller W3C (WorldWideWeb Consortium) som är en sammanslutning av företag som arbetar för en gemensam standard för HTML-tekniken.
Grundkoden för din websida som Dreamweaver genererar består av följande märken:
- <HTML>
- - anger att sidan innehåller
HTML-kod.
(<html> =startmärke och </html> = slutmärke. De flesta märken måste ha ett start och ett slut. Slutmärket anges med en "slash" ( / )) - <HEAD>
- - huvudet på sidan som inte visas av webläsaren. Används för information till sökmotorer, sidtitel, "Meta-märken" mm.
- <TITLE>
- - Sidans titel som syns i webläsaren och blir Favorit/Bokmärkesnamnet. Dessutom indexerar många sökmotorer websidor med stöd av sidtiteln.
- <META>
- - kan innehålla information om sidan som tex teckenuppsättning, författare, copyright, sökord, beskrivning av innehåll, giltighetstid, uppdateringsintervall mm. (Se mer om "Meta" på Webdesignskolan ») I exemplet används teckenuppsättningen "ISO-8859-1" som är Västerländsk/Latinsk.
- <BODY>
- - allt innehåll som ska synas på websidan i webläsaren placeras inom <body>. I exemplet används attributen "bgcolor" och "text" för att ange bakgrundsfärg och textfärg.
TIPS! Du kan ändra förvald teckenuppsättning
med menyn "Edit/Preferences..." (Redigera/Inställningar)
om du tex gör websidor för den japanska marknaden...
O'Reilly HTML- CSS- och Javascriptreferens - Allt om koderna!
Vill du lära dig mer om HTML, CSS och Javascript har du informationen en knapptryckning bort! Dreamweaver innehåller en referens från O'Reilly & Associates (Safari: O'Reilly Books Online™). I referensen hittar du detaljerad information om specifika märken/taggar. Öppna referensen med knappen "Reference" eller SHIFT+F1:
TIPS! Placera markören i det märke/tagg du vill ha information
om och tryck SHIFT+F1 så kommer du till rätt avsnitt i
referensen direkt!
Avsnittet om märket <BODY>:
...och attributen till <BODY>:
Avsnitten om CSS/stilmallar:
...och Javascript:
Skriva text i Designläget
Det enklaste sättet att skriva in websidans textinnehåll är skriva det in "Designläget" (Design View). Dreamweaver lägger då in alla nödvändiga märken i HTML-koden och du jobbar som i en vanlig ordbehandlare... nästan.
- Växla tillbaka till designläge med knappen eller
med CTRL+TABB:
- Skriv in några rader med text.
- Kolla HTML-koden. Om du använt ÅÄÖ så
ser du att de ersätts med en enhet (entity). Vissa specialtecken
motsvaras i HTML-koden av ett namn eller ett nummer, däribland
bokstäverna ÅÄÖ. Chansen att de visas korrekt
på flera plattformar och webläsare är då större
än om du anger själva tecknet i HTML-koden. Så här
ersätter Dreamweaver ÅÄÖ:
å = å
Å = Å
ä = ä
Ä = Ä
ö = ö
Ö = Ö
(Se mer om specialtecken längre ned)
- Påbörja ett nytt stycke genom att trycka ENTER
och skriv mer text. Notera i koden att märket <P>
(paragraph) skapas. Format för textavsnitt är antingen
Oformaterat, Stycketext <P>
eller Rubriker <H1> till <H6>.
(Mer om textformat och rubriker i övningen "Textformatering" »)
Radavstånd finns inte i "vanlig" HTML men däremot i CSS (stilmallar) ». Det finns i grunden två avstånd mellan textområden:
Nytt stycke = <P> (ENTER)
Ny rad = <BR> (SHIFT+ENTER)
Bryt raden med SHIFT+ENTER för att skapa en <BR> (break) i koden och skriv mer text.
Notera skillnaden i avstånd mellan <P> (ENTER) och <BR> (SHIFT+ENTER).
OBS! Använd inte <BR> (SHIFT+ENTER) för att styra var dina rader ska brytas i längre löpande texter. Då uppstår problem med textförskjutning om tex webläsarfönstret minskar! Använd <BR> sparsamt, formatering av radlängd i texter gör du bättre med Tabeller (tables) »
Radbrytning gjord med <BR> (SHIFT+ENTER):
...blir inte lika rolig när webläsarfönstret minskas:
- I HTML finns bara ett Mellanslag mellan ord. Vill du göra
flera mellanslag efter varandra måste du använda specialtecknet
(Non Breaking Space).
I exemplet nedan skrivs dubbla mellanslag mellan postnummer och
ort med två stycken
med tangenttryckningen CTRL+SHIFT+MELLANSLAG.
Fler användningsområden för är t ex i förkortningar och sammansatta ord som riskerar att brytas om de hamnar i fönsterkanten på webläsaren ("Non Breaking Space" betyder ju faktiskt att det inte får brytas...)
Fler specialtecken
Övriga specialtecken som kan behöva ersättas i HTML-koden hittar du om du byter paletten "Object" (Objekt) från "Common" (Vanlig) till "Characters" (Tecken) med den lilla pilknappen:
Byt till verktygen för specialtecken: |
Vill du se fler tecken väljer du knappen: |
 |
|
Här är en "manuell" teckenuppsättning om du vill skriva koden direkt i kodläge:
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||