Dreamweaver

 skriv ut »

Grunderna i Dreamweaver 4:
Skapa en webbplats (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 webbplatser 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 webbplatsen administerar du i Site-fönstret.

I guiderna om Dreamweaver använder vi benämningarna webbsida och webbplats. Det förekommer flera benämningar på samma sak och vilken du använder avgör du själv:
webbsida (webbsida - hemsida - homepage - internetsida) = sidan som visas i webbläsaren
webbplats (webbplats - site - website - webbsajt) = en samling webbsidor

En av Dreamweaver's fördelar är att du kan hantera stora webbplatser 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 webbsidorna. Förutsättningen för att få en sådan dynamisk koppling mellan alla webbsidor i en webbplats är att du skapar en Site (Plats).

OBS! Om du arbetar i Dreamweaver MX ska du istället titta i guiden "Skapa webbplats 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å webbsidorna. 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 webbsidan:

... eller jobba direkt i HTML-koden:

Skapa en webbplats

För att utnyttja Dreamweavers kraftfulla funktioner måste du ange vilka dokument och bilder som ingår i din webbplats. 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 webbplats lokalt på din dator används de lokala hårddiskarna som sökvägar men när du senare publicerar webbplatsen till en webbserver måste sökvägarna vara relativa till ett domännamn eller IP-adress.

1. Öppna programdelen "Site" med menyn "Site/Site files" (Plats/Platsens filer) eller F8 eller knappen "Show Site":
   
2. Välj menyn "Site/New Site..." (Plats/Ny plats...). Dialogrutan "Site Definition" (Platsdefinition) använder du för att att ange var webbplatserna ligger i datorns filsystem och vad de heter. Dessutom kan du här ange vilken FTP-server eller webbserver i nätverket du tänker publicera din webbplats till.
   Du kan ange flera webbplatser 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 webbplatsen ä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 webbplats 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 webbplatsen. Skapa hellre en ny mapp för ändamålet.
   
   
   
   Gå ur dialogrutan med knappen "Done" (Klar) och din webbplats är nu skapad.
   
3. Fönstret för Site är delat. På den högra sidan kommer de dokument och bilder som du använder i webbplatsen att sparas. Den vänstra delen används för att visa filerna på webbservern / FTP-servern när du kopplar upp mot den för att publicera webbplatsen. Du kan också använda utrymmet för att grafiskt visa delarna och länkarna i din webbplats.
   
   webbplatsen med det enda som finns hittills; root folder (rotmappen):
   
   
4. För att börja arbeta med en ny webbsida 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 webbplats

Den första sidan som visas i en webbplats när någon skriver in adressen (URL) i webbläsaren kan ju egentligen heta vad som helst. För att göra adressen till webbplatsen kortare kan du dock ange de namn som webbservrarna 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 webbserver för Unix/Linux. Namnet "default" är vanligt på Microsoft's webbserverprogram som tex Internet Information Server (ISS), Personal webbserver (PWS) etc och måste användas om du använder ASP-script på dina webbsidor.
Filtillägget kan variera beroende på vilken teknik som används, HTML, SSI, ASP, JSP, PHP mm. Här är några exempel:

.php - .php - .asp - .shtm - .shtml - .ssi - .css - .xml - .js

Övriga rekommendationer för namngivning på webbsidor 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.php

kan du istället namnge filen:

dromvavaren_for_html-sidor.php

...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å webbserverns 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 webbplatsen och filerna tex inte tillåts av webbservern. Att döpa om hundratals filer är inte roligt...

Spara din startsida med menyn "File/Save..." (Arkiv/Spara...). Om du väljer namnet "index.php" behöver du inte ange filtillägget .php 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å webbsidan - Title

Förutom att spara webbsidan 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 webblä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 webbsidorna med vägledning av bla Titeln. Din webbplats 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 webbsidorna ä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 webbläsare kräver och anger dessutom att bakgrundsfärgen ska vara Vit och textfärgen Svart.

De olika delarna av koden som reglerar vad webblä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 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 webbsida 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 webbläsaren. Används för information till sökmotorer, sidtitel, "Meta-märken" mm.

<TITLE>

- Sidans titel som syns i webbläsaren och blir Favorit/Bokmärkesnamnet. Dessutom indexerar många sökmotorer webbsidor 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å webbsidan i webblä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 webbsidor 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 webbsidans 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.

1. Växla tillbaka till designläge med knappen eller med CTRL+TABB:
   
   
   
2. Skriv in några rader med text.
   
   
   
3. 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 webbläsare är då större än om du anger själva tecknet i HTML-koden. Så här ersätter Dreamweaver ÅÄÖ:
   
   å = &aring;
   Å = &Aring;
   ä = &auml;
   Ä = &Auml;
   ö = &ouml;
   Ö = &Ouml;
   
   
   
   (Se mer om specialtecken längre ned)
   
4. 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 webblä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 webbläsarfönstret minskas:
   
   
5. I HTML finns bara ett Mellanslag mellan ord. Vill du göra flera mellanslag efter varandra måste du använda specialtecknet &nbsp; (Non Breaking Space). I exemplet nedan skrivs dubbla mellanslag mellan postnummer och ort med två stycken &nbsp; med tangenttryckningen CTRL+SHIFT+MELLANSLAG.
   
   
   
   Fler användningsområden för &nbsp; är t ex i förkortningar och sammansatta ord som riskerar att brytas om de hamnar i fönsterkanten på webblä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:

Att gå vidare: Textformatering »