«Sida 2 av 4 Till kursens framsida Sida 4 av 4»

Sida 1 av 11 Lektion 1: sida 3 av 4 «Sida 2 av 4 Till kursens framsida Sida 4 av 4» 2. Formatera text Du kan ju redan skriva in text, men nu ska vi se hur man formaterar det man skrivit in -- alltså hur man ändrar utseende på texten. Men då börjar vi även närma oss en av de stora skillnaderna mellan Dreamweaver CS4 och de äldre versionerna. Jag går igenom grunderna för hur man formaterar text längre ned. Men först tänker jag förklara precis vad det är som hänt mellan CS3 och CS4, och varför det är bra fast det kanske inte verkar så just nu. Läs gärna om du vill hänga med i vad som hänt. 2.1. Inte som alla andra: texthantering från och med CS4 I de äldre versionerna av Dreamweaver är det jättelätt att ändra utseendet på text precis hur man vill: det är bara att markera den text man vill ändra på och klicka på de rätta knapparna så händer det grejor. Precis som i Word eller ditt e-post-program, alltså. Men fr o m CS4 är det inte alls lika rättframt. Det går att göra vissa väldigt grundläggande ändringar på texten man markerat: man kan göra den fet eller kursiv, och placera den på olika ställen på skärmen -- men det är också i stort sett allt. För så fort som man till exempel försöker ge ett ord en annan storlek eller färg, som ju är så lätt i Word, så får man ett stort fönster i ansiktet där man måste göra en massa olika kryptiska val och inställningar innan man får gå vidare. (Vi kommer att titta på dem i nästa lektion.) Detta beror på att Dreamweavers skapare försiktigt börjat knuffa oss webbutvecklare bort från ren HTML, som är det klassiska webbdesignspråket, och mer mot "nykomlingen" CSS, som är framtiden. Oj, nu blev det krångligt. Vad innebär allt det där? Jag tänker inte bli så teknisk, så vi säger såhär: istället för att du får byta utseende på texten precis som du vill med bara ett par klick så drar CS4 och senare versioner i tyglarna litet grann, för vårt eget bästa. Istället för att göra som vanligt får vi i CS4 skapa olika text-utseenden i förväg, som vi får namnge och spara i en lista. Sedan kan vi säga åt Dreamweaver vilka av de textsnuttar vi skrivit som ska ha vilket utseende ur listan. Så du kanske skapar ett utseende som gör text jättestor och lila, och sparar det som "lilarubrik" i listan. Sen kanske du skapar ett annat utseende som gör text normalstor och gul, och sparar det som "normalgul" i listan. Då kan du sedan lätt säga åt Dreamweaver att den och den paragrafen ska ha utseendet lilarubrik, och det och det ordet ska ha utseendet normalgul. Du börjar alltså med att designa ett utseende för texten och sparar det i en lista. Sedan kan du använda dina utseenden på de textbitar du vill ska se ut så. Det är en del av grunden i CSS. Detta känns säkert litet klumpigt i början, och Adobe verkar säkert taskiga och elaka som inte låter oss CS4-användare göra som vi vill på lättast möjliga vis, som man kan i t ex Dreamweaver MX eller CS3. Men det finns faktiskt en tanke bakom det hela: designspråket CSS är verkligen framtiden på nätet, så alla som vill pyssla med webbsidor måste ändå lära sig åtminstone grunderna i det förr eller senare -- och efter ett litet tag kommer du att märka hur bra och lättanvänt det faktiskt är! För du kan alltid gå in i dina listor och mixtra med dina sparade utseenden precis när du vill, och då kommer dina ändringar automatiskt att utföras överallt där du använt de utseendena. Så om du t ex ändrar i utseendet lilarubrik och gör den röd istället så kommer all text som har lilarubrik som angivet utseende att omedelbart bli röd istället för lila, oavsett var den är -- till och med om den befinner sig på helt olika sidor! Och när du väl sitter där med 10, 20 olika sidor i din webbplats så lär du inse hur mycket tid och arbete CSS-formatet faktiskt sparar åt dig: om du hade skapat dina lila rubriker på vanligt vis, som man kan göra i t ex Word eller äldre Dreamweavers, och vill göra dem röda istället så hade du behövt öppna varje sida, en i taget, ändrat på rubrikerna för hand, och sedan sparat dem igen. Det hade tagit mycket, mycket längre. Men med CSS-formatet går en sådan ändring alltså bokstavligen på ett par sekunder. Om det fortfarande känns begränsande så är det ändå inte så farligt -- för om du tänker efter så är det ändå inga utom de värsta clownsidorna som har vidare många ändringar i textens utseenden. Man brukar skilja på rubriker, länkar och brödtext, men det är också allt: tre olika utseenden. Så det är inte mycket att hålla reda på heller. Och ni som som sitter med äldre versioner än CS4 behöver inte känna er utanför: vi kommer att jobba mer och mer med CSS ju

Sida 2 av 11 längre in i kursen vi kommer, och i slutet har vi blivit riktiga experter! Men just nu behöver ingen av oss tänka mer på sånt, för nu ska vi se hur man påverkar text på enklast möjliga vis. Man måste ju lära sig grunderna först. Om du hängde med i kurstexten så har du ju redan provat att skriva litet på din webbsida, och har märkt att det definitivt inte är något märkvärdigt. Man klickar någonstans på sidan så visas en blinkande markör där. Om du då skriver något så dyker det upp text. Det fungerar alltså precis som i t ex Word eller ditt e-post-program. Och precis som i de programmen så kan du dessutom formatera texten. Det betyder att du kan ge den olika utseenden. Du kan göra den fet eller kursiv, bland annat. Du kan göra så att den hamnar...... längst till vänster...... i mitten...... eller längst till höger. Och om du använder en äldre version än CS4 kan du snabbt ge de delar av texten du markerar olika teckensnitt, storlekar och färger. (Vi ska som sagt se hur man gör detta i CS4 i nästa lektion.) Hur gör man då för att få texten att se ut på alla de här visen? Vi går igenom vart och ett i tur och ordning, men börjar först med ett par vanliga saker man bör känna till: 2.2. Paragrafer, radbrytningar och hur man markerar Detta är väldigt grundläggande, men om du inte känner till detta eller är litet osäker så skadar det inte om du läser igenom det här stycket. Det handlar om skillnaden mellan textparagrafer och radbrytningar och hur man får till dem, samt hur man gör för att markera text. Paragrafer När du skriver text och trycker på tangenten Enter hoppar markören alltid över raden direkt nedanför och landar på efterföljande rad istället. På så vis hamnar texten du just skrev i ett tydligt stycke. Ett sådant stycke kallas för paragraf. Det har ingen större betydelse förutom när man t ex ska justera text, vilket vi tittar närmare på alldeles strax. Den här texten blir till en separat paragraf så snart jag trycker på Enter, vilket jag gör nu! Ser du? Markören hoppade över raden mellan stycket ovan och det här. Det är alltså det som händer när man trycker på Enter. Och nu har jag två paragrafer: den ovan, och den jag skriver nu. Men om man inte vill att texten ska hoppa över en tom rad? Då vill man inte ha en paragraf, utan en radbrytning. Enter. Det gula skenet visar var du hittar Enter på ditt tangentbord. Radbrytningar En radbrytning får du till genom att hålla ned någon av de två Shifttangenterna på ditt tangentbord. Medan Shift är nedtryckt trycker du en gång på Enter. (Se exempelbilden intill om du är osäker på vilka Shifttangeterna är: det är samma tangenter man håller ned för att skriva med stora bokstäver.) Så nu håller jag ned SHIFT OCH TRYCKER EN GÅNG PÅ ENTER: Ser du? Nu hoppade markören inte över någon rad alls! En radbrytning, alltså. Men även om man satt in en radbrytning så har man ändå inte bytt paragraf: du kan trycka in hur många radbrytningar som helst, men det du skriver efter dem hör fortfarande till samma paragraf som texten ovanför radbrytningarna. Det är inte förrän du trycker på Enter (utan Shift) som du skapar en ny paragraf. Shift. Det gula skenet visar var du hittar de två Shift-tangenterna. Håll ned en av dem. Medan du håller någon av Shift-tangenterna nedtryckt så trycker du en gång på Enter. Då får du till en radbrytning. Paragrafer är ofta mer lättlästa, och är dessutom en viktig del av webbdesign, så man gör bäst i att hålla sig till dem i längden. Dessutom: observera att du aldrig behöver lägga till egna radbrytningar så snart din text börjar nå slutet på "pappret". Allt sånt sköter programmet, så det är bara att skriva på! Markera text Om du skrivit text och vill till exempel göra den fet eller kursiv så är det bara att markera texten och sedan ge den dess nya utseende. Men hur markerar man text? Det är inget märkvärdigt; det sitter redan i ryggmärgen på de allra flesta som brukar

Sida 3 av 11 använda datorer. Men om du är osäker kan du läsa igenom det här stycket ändå så lär du dig hur man gör. Om du vill markera ett enskilt ord räcker det med att bara dubbelklicka på ordet. Då markeras det. Prova att dubbelklicka på det här ordet: dubbelklick! För att avmarkera klickar du bara någonstans i texten. Då stängs markeringen av. Om du vill markera flera ord, eller bara en del av ett ord, gör du såhär: För muspekaren till början på den text du vill markera. Sedan håller du ned vänster musknapp. För pekaren över det du vill markera. Därefter släpper du upp musknappen. När du nu klickar på någon av de olika knapparna som ändrar textens utseende så är det bara den markerade delen som påverkas. Du kan ofta lägga till flera olika utseenden på samma text. Här är ett exempel: 1. Jag vill markera en bit av texten intill. Hur gör jag? 2. Jag för pekaren till början på det jag vill markera. Sedan håller jag ned vänster musknapp... 3.... och drar musen åt det håll jag vill markera. När jag släpper musknappen är markeringen klar. 4. Då kan jag ge den markerade texten hurdant utseende jag vill utan att något annat påverkas. Vi går igenom grunderna i hur man ändrar utseende på det man markerat alldeles strax. Du kan prova markera texten i den här sidan om du vill, eller vilken webbsida som helst. Du kan visserligen inte ändra utseende på den, men du kan i alla fall få grepp om hur man gör för att markera. Om du håller ned musknappen och för pekaren uppåt eller nedåt så markerar du hela rader. Och om du vill ändra utseende på ett enskilt ord är det ännu enklare! Då räcker det nämligen med att du bara klickar en gång mitt i ordet så att markören visas någonstans i det. När du sedan t ex klickar på knappen för kursiv stil så blir hela ordet kursivt. Prova att markera texten du nu läser på de olika vis jag beskrivit. Du kan visserligen inte ändra utseende på den (du kan bara ändra utseendet på dina egna sidor medan skapar dem), men du får åtminstone se hur det fungerar. Om texten ändrar färg betyder det att den markerats. Så enkelt är det alltså! Nu kan du skriva text och markera den. Då ska vi se hur man formaterar den -- alltså ändrar utseende på den. Vi ska som sagt hålla oss till de mest grundläggande visen just nu. 2.3.1. Formatera text i CS4 Eftersom CS4 skiljer sig i textformateringen från de andra versionerna kommer jag att ta upp CS4 enskilt, och de övriga får sitt eget stycke längre ned (2.3.2. Formatera text i äldre versioner). Om du inte har något intresse av hur detta går till i CS4 kan du hoppa dit istället. Vi kommer att börja med att se hur man använder Properties-fältet för att ändra på texten man skrivit i sin sida. Det viktiga nu i början är att du ser till så att knappen HTML längst till vänster i fältet är intryckt (alltså att den är ljus). Om du klickar på CSSknappen så kan du alltid gå tillbaka genom att klicka på HTML-knappen igen. Du hittar rutor för färg och storleksval när du klickat på CSS, men dem tar vi nästa gång, för det är som sagt inte att bara använda dem rakt av. Om du börjar mixtra med dem så kommer du att få upp ett stort fönster som vill att du ska göra vissa val. Där är det i så fall bara att klicka på Cancel, så stänger du fönstret. Vi ska nöja oss med standardinställningarna för tillfället, och de flesta av dem gör man alltså med Properties-fältet inställt på HTML. Bilderna nedan visar de val vi bör hålla oss till under lektion 1. Du kommer att märka att jag ofta skriver vad knapparna jag klickat på heter, fast det står ju inga namn på själva knapparna. Du får fram namnen genom att hålla muspekaren över en knapp. Då dyker det upp en liten etikett med knappens namn. 1. Fet och kursiv stil

Sida 4 av 11 2. Rubriker 3. Indragen text 4. Listor

Sida 5 av 11 5. Justering 6. Standarfärger och standardteckensnitt Dreamweaver CS4 kan använda sig av en enklare form av CSS för att låta dig ändra på sidans standardfärger -- alltså sidans bakgrundsfärg och textfärg -- samt dess standardteckensnitt. Det enda du behöver göra är att klicka på det du vill ha, svårare är det inte. Då ska vi se hur man gör! Börja med att klicka på knappen Page Properties längst ned i Properties-fältet.

Sida 6 av 11 Då öppnas fönstret med samma namn. Se till så att valet Appearance (CSS) är markerat i listan till vänster. Då är det bara att börja klicka på grejor! Page font avgör vilket teckensnitt som ska vara standard för sidan. De är samlade i grupper om teckensnitt som liknar varann, så det är bara att välja en grupp som du tycker om. Om du ogillar ett val är det bara att välja ett annat, det är inget märkvärdigt med det. Size bestämmer vilken standardstorlek texten i din sida ska ha. Det är bara att välja en storlek i rutan till vänster, och ett mått i rutan till höger. Håll dig till det vanligaste måttet, px, för tillfället. Text color bestämmer såklart vilken färg texten ska ha "i grunden". Just nu är det svart som gäller, men du kan välja vilken färg du vill. Klicka bara på den grå rutan intill Text color så dyker textväljaren fram. Där kan du välja mellan de 256 standardfärger som finns tillgängliga. Det går även att välja och blanda till precis hurdan nyans man vill, men det tar vi upp i nästa lektion. Det viktiga just nu är att du får känna på grunderna. Klicka bara på den färg du vill ha, och om du ångrar dig så går du bara in på färgväljaren igen och väljer en annan färg -- eller, om du vill återställa färgen till hur den var först, så kan du klicka på den genomstrukna vita rutan uppe till höger i färgväljaren. Då återställs textfärgen till svart. Background color fungerar precis likadant som Text color, fast den här färgen gäller förstås sidans bakgrund. Just nu är bakgrunden vit, men nog vore det väl roligare med någon annan färg? Resten av valen tar vi senare. När du valt Page font, Size, Text color och Background color kan du klicka på OK, så verkställs dina val:

Sida 7 av 11 Tjusigt! Om du är missnöjd med något av dina val så är det alltså bara att klicka på knappen Page properties igen och ändra på det du inte tycker om. 2.3.1. Formatera text i äldre versioner När du skrivit text i en sida kan du markera det du vill ändra på och sedan välja hur du vill ändra det med hjälp av knapparna och rutorna i Properties-fältet. Du kommer att märka att jag ofta skriver vad knapparna jag klickat på heter, men det står ju inga namn på dem. Det är inga trollkonster från min sida: du får fram namnet på en knapp genom att hålla pekaren över den. Då dyker det upp en liten etikett med dess namn. 1. Rubriker 2. Fetstil och kursiv stil

Sida 8 av 11 3. Justering 4. Teckensnitt 5. Textstorlek 6. Listor

Sida 9 av 11 7. Indrag 8. Teckenfärg

Sida 10 av 11 Page properties Utöver allt jag skrivit ovan kan man även ändra på saker via Page Properties. Klicka bara på knappen längst ned i Propertiesfältet så får du upp ett fönster med samma namn. Se till så att valet Appearance är valt i listan till vänster. (Om ditt Dreamweaver inte har någon Page Properties-knapp kan du gå in på Modify > Page Properties istället. Då får du upp en liknande ruta som den nedan, fast då lär du inte behöva välja Appearances i någon lista. Det kan saknas andra val med, men inget livsviktigt -- i stort sett så ska allt fungera likadant.) Nu märker du nog att många av de saker du kan ändra på i Page Properties verkar identiska med de som finns att ändra på i Properties-fältet. Så vad är skillnaden? Skillnaden är att det du ändrar på här gäller sidans standardinställningar. Om du t ex klickar i rutan Text Color och väljer en annan färg så kommer all text på sidan att få den färgen -- utom den text du redan gett någon annan färg via Properties-fältet. Det beror på att de ändringar du gör i Properties-fältet täcker över alla standardinställningar. Visst låter det virrigt? Här är ett exempel: om jag skapar en ny sida så är dess standardteckenfärg svart, som vanligt. Om jag då skriver litet text i sidan och färgar ett ord rött...... och sedan går in i Page Properties och ändrar Text Color till grönt, så är det bara den ofärgade texten, alltså den standardfärgade (svarta) texten, som blir grön:

Sida 11 av 11 För att förvärra det hela kan jag tala om att den röda texten också blivit grön under det röda. Så om jag markerar den röda texten och "tvättar bort" den röda färgen genom att klicka på färgrutan i Properties-fältet och välja den genomkorsade rutan uppe i färgväljarens högra hörn...... så ser vi att det ordet också blivit grönt under all färg -- eftersom sidans standardfärg för text ju numera är grönt. Om jag inte gjort standardfärgen grön hade ordet blivit svart istället när jag tvättade bort den röda färgen. Testa gärna så att du får litet grepp om det hela. Det är inte livsviktigt, men värt att känna till. Alla ändringar du gör i fönstret Page Properties gäller alltså hela sidan, men påverkar (till synes) bara det du inte varit och mixtrat på med hjälp av Properties-fältet. Om du vill ändra på sidans standardinställningar kan du hålla dig till Page font, Size, Text color och Background color under den här lektionen. Värt att nämna kan vara att du kan "tvätta bort" ett teckensnitt du lagt på en text via Properties-fältet genom att markera den drabbade texten, klicka i rutan Font i Properties-fältet, och välja Default i listan. Då får den markerade texten det teckensnitt som valts som standard i Page Properties-fönstret istället. «Sida 2 av 4 Till kursens framsida Sida 4 av 4»