Innehållsförtäckning.

Transkript

1 Dreamweaver

2 Innehållsförtäckning. Skapa en ny webbsida 3 Inställningar för sidan. 3 Sidtitel 4 Bakgrundsbild och bakgrundsfärg 4 Färg på texten 4 Marginaler 4 Text 5 Format 5 Teckensnitt 5 Teckenstorlek 6 Utseende 6 Länkar 6 Target 6 Text kulör 6 Bilder och Grafik 7 Filformat för bilder på webben 7 Infoga bilder 7 Bildens egenskaper 7 Namn och storlek 7 Källa 8 Länk 8 Ange alltid Alt! 8 V-mellanrum och H-mellanrum 8 Kant 8 Bredd och höjd 8 Justera Bildens position på webbsidan 9 Justera bilden i förhållande till texten 9 Klickbara bilder och kartor 9 överrullningsbilder 9 Tabeller och ramar 10 Tabeller 10 Ramar 11 Hur fungerar ramar? 11 Arbeta med ramar 11 Fylla ramarna med innehåll 11 Ramkontrollen 11 Egenskaper 12 Ramens namn 12 Scrolla 12 Ändra storlek 12 Kanter och kantfärg 12 Marginal 12 2

3 Innan du sätter igång med att skapa din webbsida i Dreamweaver är det bra om du har en någolunda genomtänkt plan på hur sidan ska se ut och vilken målgrupp den riktar sig till. Du bör börja med att rita en trädstruktur på papper hur du vill att dina sidor ska förhålla sig till varandra, så att du får en klar bild över hur du har tänkt dig att användaren ska navigera på din sida. Därefter ritar du upp en noggrannare detaljskiss över hur varje sida på din webbplats ska se ut, du kan rita ut vilka länkar som ska finnas på sidan och vart de ska länkas till, skriv även ner bildfilernas namn och vilka kulörer du använder dig av i din produktion. Du kommer att finna detta mycket användbart när det är dags att skapa din webbproduktion, och du kommer att kunna jobba betydligt effektivare eftersom du inte behöver bläddra mellan dina filer för att kontrollera om du tex. Använder dig av rätt kulörnyans eller om du glömmer vart din länk skulle ta vägen någonstans, du kan istället ha hela strukturen framför dig på papper. Skapa en ny webbsida För att skapa en ny webbsida i dreamweaver väljer du File /New. Då får du upp ett odöpt dokument. Spara det på en gång med det namn du vill använda på webbsidan och i den mapp den ska ligga i. Inställningar för sidan. Varje webbsida har en uppsättning sidegenskaper som gäller för hela webbsidan men inte för hela webbplatsen. Bland sidegenskaperna ingår till exempel bakrundsbild, färg på bokstäver och länkar, och sidtitel på webbsidan. För att komma åt dessa sidegenskaper öppnar du modify / page properties eller med kortkomandot (apple J). 3

4 Sidtitel Titeln, är det som står i namnlisten längst upp i webbläsaren. Titeln används på flera olika vis. När en söktjänst som Alta Vista eller en nätkatalog som Yahoo! presenterar din webbsida så är det sidans titel som används. Därför ska du alltid skriva en titel som så utförligt som möjligt beskriver vad sidan handlar om, men använd inte mer än 50 tecken för då kapas texten. Titeln har inget att göra med vad du har döpt din HTML-fil till. Bakgrundsbild och bakgrundsfärg Bakgrundsbilder är ofta små mönstrade bilder som fyller bakgrunden på sidan. Dessa bilder är ofta uppbyggda så att mönstret på den högra sidan av bilden går igen på den vänstra sidan (detsamma gäller ovan- och undersidan), detta gör så att ögat inte uppfattar någon skarv mellan bilderna och bakgrunden blir enhetlig. En varnig med att använda bakgrundsbilder är att läsbarheten på en sida som använder sig av bakgrundsbild blir sämre eftersom texten skrivs ovanpå bilden, man kan med hjälp av Photoshop eller Fireworks urvattna bilden så att den blir blekare eller ljusare. Bakgrundsfärg är ett alternativ till bakgrundsbild, där man bestämmer viken kulör bakgrunden ska ha, man använder här webbsäkra färger som består av ett hexadesimalt nummer med sex tecken tex. vit = FFFFFF och svart = Även här är det viktigt att tänka på läsbarheten på sidan därför kan det vara bar om man tänker på att använda ljus bakgrund till mörk text. Färg på texten På samma sätt som man ställer in kulören på bakgrunden ställer man även in kulören på texten, här kan man välja att ha olika kulörer på vanlig text, obesökta länkar, besökta länkar och aktiva länkar. Marginaler Med marginal inställningarna kan du ställa in hur breda marginaler du vill ha mellan fönstrets kant och webbsidans innehåll. Du kan ställa in maginalen från vänster och uppifrån. 4

5 Text Att skriva in och formatera text på en webbsida är oerhört en kelt med Dreamweaver, det är bara att klicka på den tomma sidan och då kommer textmarkören upp och det är bara att skriva. För att omforma texten som du vill ha den så kan du öppna Egenskapskontrollen (Properties), det gör du antingen genom att öppna Window och därefter klicka på Properties, eller så använder du dig av snabbkommandot apple F5. Format Under format kan man ställa in vilken typ av text det är man arbetar med tex. Huvudrubrik Teckensnitt I Dreamweaver har man inte lika stor valmöjlighet när det gäller typsnitt. Om man tittar på listan här bredvid, då ser man att typsnitten är indelade i grupper om tre till fyra olika typsnitt. Detta betyder att om det första typsnittet inte finns i användarens dator så kommer det andra typsnittet att visas istället. Längst ner finns det en rad som hetter Edit font list, med den kan man lägga upp en egen lista med typsnitt. 5

6 Teckenstorlek Alla teckenstorlekar i HTML är relativa och relateras till teckenstorleken i användarens browser. Både Netscape och Explorer har Times New Roman 12 som standard vid installationen, men detta kan användaren ändra själv i sin browser. Om användarens Browser har standard inställningarna installerade brukar 1 motsvara 6 punkter vilket är knappt läsbart i browsern och 7 motsvarar 42 punkter. + och - framför en siffra innebär att tecken storleken blir lite mindra eller lite större än motsvarande siffra utan + och -, ex. -2 blir lite mindre än 2. Utsende Med dessa knappar kan man få texten fet, kursiv, vänsterställd,centrerad eller högerställd. Man kan även skapa punktlistor som är numrerade eller onumrerade. Med de två sista lnapparna justerar man indrag. Länkar För att skapa länkar till andra HTML sidor direkt i texten markerar du den text som ska utgöra länken, och med hjälp av fönstret bredvid skriver man in adressen till sidan länken ska gå till. Detta kan göras på tre olika sätt, dels kan man skriva in adressen manuellt, eller genom att klicka på mappen längst till höger och därefter letar reda på sidan (denna metod kräver att du länkar till en annan sida du har skapat), det sista sättet är att använda gummisnodden som ser ut som ett kryss bredvid mappen, den använder du så att du håller mer nusknappen på krysset och släpper den på en annan sida du har öppen samtidigt. Target Med target bestämmer du vilket fönster länken ska öppnas i (samma sida, ny sida, olika frames) Text kulör Om man vill ändra på kulören hos en text utan att det ska påverka utseendet på hela sidan, använder man sig av kulörpalettern som visas här till höger. Du markerar texten du vill ändra kulör på och därefter så är det bara att klicka på någon av kulörerna. Hittar man inte den kulören man vill ha så kan man klicka på cirkeln som finns i förnstrets överkant. 6

7 Bilder och Grafik Filformat för bilder på webben Det finns två bildformat som används på webben idag, JPEG och GIF. Både JPEG och GIF är av kallad bitmapgrafik, detta innebär att bilderna är uppdelade i små fyrkantiga rutor och varje ruta har en enskild färg. Det som skiljer dessa åt är det sätt de är komprimerade på. Enkelt kan man säga att JPEG passar bäst till fotografiska bilder medan GIF passar till ritade bilder. Infoga bilder Att infoga bilder till din webbsida är mycket enkelt, antingen tar du tag i en ikon av den bild du vill ha på din sida, och drar den med musen från den mapp den ligger i och släpper den på det stället där du vill ha den. Det andra sätet är att klicka på en ikon som ser ut som den här bredvid, (den ligger i objekt-fönstret under common), därefter är det bara att leta rätt på den fil du vill ha. Om du har valt en bild som inte ligger i samma mapp som du har sparat dina html sidor kommer du att få en fråga om du vill kopiera bilden till den mappen, svarar du ja på den frågan kommer en kopia av bilden att skapas och lägga sig i din rotmapp. Bildens egenskaper Presis som när vi tittade på texter så finns det även ett egenskaps fönster även för bilder, det är samma fönster som för texten men om du markerar en bild som du har placerat på sidan kommer du att märka att utseendet förändras, och det dyker upp andra funktioner. Det kan vara så att du inte ser alla fuktioner som visashär men om du klickar på pilen längst ner i det högra hörnet kommer fler alternativ att komma upp. Om du inte har egenskapskontrollen framme överhuvutaget får du fram den genom att öppna Window och därefter klicka på Properties, eller så använder du dig av snabbkommandot apple F5. Namn och storlek Bredvid miniatyren av bilden har du en text ruta där du kan skriva in ett namn på bilden. Namnet du skriver in har inget att göra med bildfilens namn, utan det är ett namn du helt själv kan hitta på Detta används framförallt när ett skriptspråk som JavaScript eller VBScript av någon anledning behöver hänvisa till en bild. Ovanför text rutan kan du även få information om hur stor bilden är i KB. Dreamweaver 3 Mattias Edin 7

8 Källa Bildens källa är helt enkelt sökvägen till den bild som ska visas. När du utvecklar webbsidor lokalt på din egen dator kan bilden ligga vart som helst på din hårddisk, men när du sedan publicerar webbsidan på Internet måste naturligtvis bilden vara åtkomlig via Internet. Du bör därför spara en kopia eller originalbilden i mappen för din webbplats och ange denna som källa för bilden. Länk Precis som när du länkade text kan du även länka bilder. Den kommer då att få en blå ram och när man klickar på bliden kommer webbläsaren att hoppa till den länk du har angivit i rutan. Ange alltid Alt! Du bör alltid skriva in en beskrivning av bilden i detta fönster. Denna beskrivning kommer då att kunna användas på olika sätt i webbläsaren. Det brukar ta lite längre tid för en bild att visas på sidan än för text, medan bilden håller på att laddas kommer den text du skrivit in i altfönstert att visas istället. När bilden är laddas så kommer den text du skrivit in under Alt att visas i en liten text ruta som kommer upp när man för muspekaren över bilden. På senare tid har det även kommit webbläsare för synskadade, när dom för muspekaren över bilden kommer den text du har skrivit in under Alt att läsas upp av webbläsaren. V-mellanrum och H-mellanrum Med dessa inställningar kan du justera hur stort mellanrum du vill att det ska finnas mellan bilden och den övriga texten. Kant I textrutan border kan du ange hur många bildpunkter kanten runt bilden ska bestå av. Som standard har Dreamweaver satt denna till 0. När man har skapat en länk av bilden så kommer denna kant att färgas blå, detta för att användaren ska uppfatta att det är en länk. Om man inte vill ha denna kant ska man se till att det inte står något i denna ruta. Bredd och höjd Lagrat i bildfilen finns bildens bredd (W) och höjd (H), dessa värden skrivs in automatiskt när du öppnar en bild. Om du vill skala om en bild kan du antingen dra i de tre klossarna som kommer fram i den markerade bildens nederkant, eller så kan du ändra på värdena i boxen. Dreamweaver 3 Mattias Edin 8

9 Justera Bildens position på webbsidan Bilden fungerar på många vis som en enskild bokstav i vanlig text. Om den står ensam på en egen rad betraktas den som ett stycke och om den står tillsammans med någon typ av text så betraktas blocket med text och bild som ett stycke. Om du tittar på det på det viset så förstår du att du kan högerjustera, vänsterjustera eller centrera bildens position på webbsidan med samma tre knappar som du använder för text. Justera bilden i förhållande till texten Med listrutan Align kan du justera hur bilden ska förhålla sig gentemot texten. Du kan testa och se hur förhållandet mellan texten och bilden förändras när du väljer de olika varianterna. Klickbara bilder och kartor En klickbar bild eller karta är en vanlig bild som du delar upp i olika områden och kopplar en hyperlänk till var och en. När användaren klickar på ett vist område på bilden kommer hyperlänken att hoppa till den sida som är ihoplänkad med det aktuella området. För att skapa en klickbar karta så lägger du in en bild på din sida på vanligt sätt, därefter använder du map verktygen och markerar ut de olika områdena du vill ska vara klickbara. När du har gjort det så kommer utseendet på egenskapsfönstret att förändras och du kommer att kunna ange länken dit du vill att man ska förflytta sig till. Välj även target om du vill att den nya länken ska öppnas någon annan stans än i det nuvarande webbfönstret. överrullningsbilder Med överrullningsbilder menas det att bilder kan bytas ut när muspekaren kommer över bilden, man kan tex. få en bildlänk att byta utseende när muspekaren kommer i kontakt med det aktiva området. För att infoga en överrullningsbild så klickar du på ikonen som ser ut som den till höger, eller så kan du välja insert och därefter rollover image. I den ruta somkommer upp så kan du skriva in eller leta dig fram till bilderna via filsystemet. Dreamweaver 3 Mattias Edin 9

10 Tabeller och ramar En förutsättning för framgångsrik webbdesign ligger i att kunna arrangera informationen på webbsidan på ett robust sätt så att det ser likadant ut i olika webbläsare och på olika plattformar. två viktiga verktyg som används för detta är tabeller och ramar. Tabeller Med hjälp av tabeller så kan du kontrollerat styra hur du vill att din text och dina bilder ska placera sig på sidan. För att infoga en tabell klickar du antingen på den ikon som ser ut som den till här till höger, eller så väljer du insert och därefter table. Oavsett vilket sätt du väljer så kommer följande dialogruta att komma upp. Här kan du nu skapa de inställningar du vill ha i din tabell. Rows: Columns: Cell padding: Cell spacing: With: Border: Antal rader i tabellen. Antal kolumner i tabellen. Antal bildpunkters marginal mellan cellkant och innehåll. Antal bildpunkter mellan två celler. Anger bredden på hela tabellen, antingen som procent av hela webbsidans bredd eller i ett absolut antal bildpunkter. Antalet bildpunkters bredd på kanten mellan celllerna. sätter du denna till 0 så kommer inte kanterna att synas. Presis som tidigare så kommer egenskapshanteraren att ändra sitt utseende när du har din tabell markerad. Du kan där förändra de inställningar (som visas här ovanför) i efterhand. Dreamweaver 3 Mattias Edin 10

11 Ramar Med ramar kan du dela upp det som användaren ser i sin webbläsare i flera separata fönster. Den största fördelen med ramar är att man kan låta en viss del av informationen, till exempel en innehållsförtekning eller en logotyp ständigt synas i webbläsaren, medan användaren rullar upp och ner i den övriga informationen eller hoppar mellan olika sidor inom webbplatsen. Hur fungerar ramar? Man kan säga att det är en sida som beskriver hur de övriga sidorna ska visas, den sidan som styr hetter frameset. den HTML kod som den består av berättar endast vilken sida som ska öppnas vart och hur stor del av den sidan som ska synas. Arbeta med ramar När du skapar en webbsida med ramar så bör du börja med en ny sida och spara den med valfritt namn. Därefter öppnar du fliken längst upp till höger på objekt-menyn och välj frames. Då får du upp nya alternativ på objekt menyn, dessa kvadrater du ser motsvarar den nya sidan du just har skapat. Du ser också att dom är uppdelade med ramar på olika sätt och att det alltid är en ruta i den som är blå, när du väljer någon av varianterna motsvarar den blåa ytan den sidan som du just skapade. För att spara den eller de nya delsidorna är det bara att klicka en gång med musen på den nya sidan så att markören börjar blinka längst upp i vänstra hörnet, nu är det bara att välja file och save. Nu så behöver vi spara den sida som ska styra dessa två sidor, detta gör du genom att välja file och save frameset, döp denna sida till index så att det automatiskt blir den sidan som öppnas när sidan publiseras på någon server. Fylla ramarna med innehåll För att fylla ramarna med innehåll så är det bara att göra det som tidigare men se till att du står i rätt ram när du ska göra något. Du kan även öppna de olika sidorna försig och fixa med dom, när du sedan öppnar index kommer du att märka att förändringarna känger med. Ramkontrollen För att du lätt ska kunna ha kontroll på dina ramar så kan du ta hjälp av ramkontrollen här ser du alla dina ramar och om du klickar på de olika ramarna blir den mörk markerad. om du då tittar på din egenskapshanterare ser du att den förändras även denna gång. Dreamweaver 3 Mattias Edin 11

12 Egenskaper Med egenskaps hanteraren kan du ställa in de inställningarna som har med ramarna att göra. Om du inte har egenskapskontrollen framme överhuvutaget får du fram den genom att öppna Window och därefter klicka på Properties, eller så använder du dig av snabbkommandot apple F5. Ramens namn Börja med att skriva in vad du vill att ramen ska hetta, då blir det enklare när du tex. ska välja vilken ram du vill att dina länkade sidor ska öppnas i. Detta namn har inte med något filnamn att göra eftersom sidorna i ramen kan variera. Tidigare så gjorde vi länkar från texter och från bilder då skrev jag att man kunde välja vart man vill att länken ska öppnas, nu när vi har döpt de olika ramarna så kommer även deras namn att finnas med som alternativ. Scrolla Med denna inställning kan du välja om du vill att användaren ska kunna scrolla på dina sidor. Väljer du Yes kommer det alltid att finnas en scroll framme, väljer du No kommer användaren aldrig att kunna scrolla på sidan, även om det finns mer text på sidan än vad som får plats, väljer du Default kommer scrollen att komma fram när den behövs. Ändra storlek Med denna ruta i kryssad kommer användaren inte att kunna ändra på sorleken på ramarna i din webbläsare. Kanter och kantfärg Med dessa inställningar väljer du om du vill att dina ramar ska synas eller ej, väljer du att dom ska synas så kan du även välja vilken kulör du vill har på ramarna. Marginal Med marginal inställningarna kan du justera avståndet mellan ramens innehåll och ramen. Dreamweaver 3 Mattias Edin 12