Datorer, Internet och sökning
en kurs av Tommy Maltell

Kapitel 45h - Dreamweaver MX
Svensk version - Övning 8

CSS med STYLE-taggar för en fil

  1. Du skall fortsätta lite med med CSS. Man behöver inte ha en separat fil för hela webbplatsen även om det är det normalt sett mest effektiva. Man kan använda CSS också på en sida eller på en del av en sida.

  2. Öppna filen itskolan.css. Kopiera texten. Öppna sedan si.htm och klicka på <> längst upp till vänster för att kunna redigera HTML-koden. Gå till raden under raden som börjar med <link rel.. Skriv där
    <style> <!--
    Gör lite plats och skriv några rader längre ned men innan </head>
    --> </style>
    Kllistra in texten du kopierade mellan de båda style-taggarna. Stäng filen itskolan.css.

  3. Du har nu lagt in en korrekt kod för css bara på den här sidan. Vi ska nu ändra lite på det du kopierade in. Det är ju fortfarande samma koder som i den separata filen. Det man lägger in på en särskild sida prioriteras framför det som finns i den separat filen. Vi ska nu kontrollera att det blir så. Om inte CSS-formatfönstret syns till höger så klickar du först på Fönster på menyraden och sedan på CSS-format. Nu visas i CSS-formatfönstret till höger dels de formateringar som finns mellan STYLE-koderna under filen si.htm som rubrik och dels de formateringar som finns i CSS-filen itskolan.css. Du kan nu ändra båda dessa formateringar i CSS-fönstret men om du ändrar i CSS-filen itskolan.css så ändrar du ju också för alla andra sidor som är kopplade till den här mallen.

    Ändra nu i den inkopierade texten mellan STYLE-koderna enligt nedan. Du kan göra ändringarna direkt bland koderna men du ska öva på att göra ändringarna till höger i CSS-mallen. Tänk på att ändra enbart det som särskilt ska gälla för filen si.htm och inte det som finns i CSS-filen itskolan.css. Börja en ändring med att i CSS-fönstret markera gällande vilken av koderna TABLE, I, LI osv som ändringen skall ske. Klicka sedan på den tredje ikonen från vänster (Redigera formatmall). När du har ändrat i CSS-formatfönstret för en av koderna så ser du till vänster i filen hur formateringarna mellan STYLE-koderna ändras. Ändra så här:
    1. TABLE - ändra font-size till 12 punkter
    2. I - ändra font-size till 16 punkter
    3. LI - ändra font-size till 11 punkter
    4. BODY - ändra font-size till 14 punkter
    5. B - ändra color till #000000 och lägg till font-size : 22pt (22 punkter)

  4. Som du ser så ändras allt men inte texten Uppgifterna i tabellen... Markera denna text. I egenskapspaletten ser du att storleken är 2. Titta också i HTML-koderna. Du ser att det finns en särskild kod som omringar den här texten: <font size="2"> och </font>. Egna sådana koder gäller före style-koder överst bland HTML-koderna för en hel sida som i sin tur går före en separat CSS-mallsfil. Sidan ser inte bra ut nu men eftersom den ska vara med i facit som den ser ut nu så vänta med att ändra den igen tills nästa kapitel.

  5. Vi ska nu börja med att kopiera in följande text under tabellen i filen datasalen.htm.

    Regler för användning av skolans IT-resurser (Rubrik 2)

    Datorresurser, datornät, kringutrustning och konton ägs och drivs av Jönköpings kommuns Skol- och barnomsorgsförvaltning tillsammans med respektive skolor. Utrustningen får endast användas till den verksamhet som tillhör skolans uppdrag. Innan du blir behörig att använda skolans datorutrustning, så skall du ta del av nedanstående föreskrifter samt intyga att du är medveten om det ansvar som finns för dig som användare av skolans datorutrustning.

    För användarna gäller (Rubrik 3):

    • Kontot får endast användas av kontoinnehavaren
    • Lösenord skall hållas hemligt och väljas med omsorg
    • Logga alltid ur när du lämnar datorn, så att ingen annan kan använda ditt konto

     

    För användning av skolans datorer och datornät gäller (Rubrik 3):

    1. Sabotage, intrång eller annan störande verksamhet mot systemet är förbjudet.
    2. Att använda datorerna till spel eller allmän chattning är inte tillåtet.

     

    Påföljder och åtgärder vid regelbrott (Rubrik 4)

    • Systemansvariga har rätt att vid grundad misstanke om regelbrott tillfälligt utestänga användare från all användning av dator- nät- och systemresurser.
    • Brott mot dessa föreskrifter kommer att anmälas till skolledningen och Skol- och barnomsorgsförvaltningens IT-enheten. Lagöverträdelser polisanmäls.

     

    ETISKA REGLER FÖR ANVÄNDNING AV SKOlANS DATORER (Rubrik 5)
    1. Vid användande av tillgängliga tjänster t ex E-post och Internet skall man bete sig så att man inte orsakar skolan dåligt rykte. Användaren bär ansvaret för innehållet i brev från sin adress.
    2. Använd alltid ett vårdat språk när du skriver på datorn.

CSS för en del av en sida

  1. Rubrikformateringarna försvinner (liksom tabellkoderna) vid kopieringen. Rubriken ingår istället i ett stycke. Tryck på Enter efter varje rubrikrad. Formatera sedan rubriktexterna till Rubrik 2 osv. När du har gjort detta tar du bort ev överflödigt mellanrum mellan rubriken och texten.

  2. Det fattas det en del formateringar. Vi ska nu använda CSS på ett annat sätt. Om inte CSS-formatfönstret redan visas så klicka på Fönster i menyraden och sedan på CSS-format. Markera först filnamnet datasalen.htm i CSS-fönstret för att visa att det är i dokumentet du skall göra något och inte i formatmallsfilen itskolan.css.Klicka sedan på andra ikonen från vänster av de fyra ikonerna längst ner dvs på Nytt CSS-format.

    [Om man nu väljer omdefiniera HTML-kod så skapar man formateringar inom STYLE-koder så som vi gjorde ovan fast ovan skapade vi inte STYLE-koderna från CSS-formatfönstret utan vi skrev in och kopierade in koderna direkt. Sedan ändrade vi på dem med hjälp av CSS-formatfönstret.]

    Välj nu att skapa anpassat form. Namnet skall vara .reglerna (Namnet ska börja med en punkt). Ändra under typ färgen till #909090 och vikt till 500. 300 är normal vikt medan 700 är fetstil. 500 borde ligga mitt emellan. Man kan sedan gå till fler rubriker till vänster innan man klickar på OK. Undersök vad de innehåller genom att klicka på dem men välj sedan inte något mer utan klicka sedan på OK.

    Nu kan man väja var i dokumentet som .reglerna skall användas. Du skall nu välja hela dokumentet. Ändra visnigen av sidan från Visa kod till Visa design. Klicka på Redigera på menyraden och sedan på Markera allt. Därefter klickar du någonstans på sidan med höger musknapp och väljer CSS-format. Klicka på reglerna.

  3. Du är inte riktigt nöjd. Du skulle vilja ha samma formateringar också när det gäller rubrikerna. I CSS-formatfönstret ser du till att filnamnet datasalen.htm är markerat. Klicka sedan igen på andra ikonen från vänster dvs på Nytt CSS-format. Välj att skapa anpassat form. Namnet skall nu vara .rubrikerna (Namnet ska börja med en punkt). Ändra under typ färgen till #90905D. Markera sedan en av rubrikerna och klicka sedan på höger musknapp och välj CSS-format. Klicka på rubrikerna. Gör om samma sak för var och en av de andra rubrikerna.

  4. Klicka nu på <> längst upp till vänster i dokumentfönstret för att se HTML-koderna. Man kan istället för att markera en visst område för en viss tagg/kod också välja att markera vilket område som helst på sidan och sedan välja att någon av de anpassade formaten skall gälla för denna markering. Skillnaden blir att om man anger för en viss tagg så blir koden t ex:
    <h2 class="rubrikerna">Regler ...</h2>
    och om man anger för ett visst stycke så blir koden
    <p><span class="rubrikerna">Det ...</p>

Skikt

  1. Tabeller har länge använts för att placera ut bilder och texter på rätt ställen. En bra funktion är att tabellerna kan anpassas till olika skrivbordsstorlekar och att man då kan utnyttja hela ytan. Ibland vill man göra tvärtom. Man vill tala om exakt var någonting skall ligga på sidan. Då kan man använda det som Dreamweaver kallar Skikt. Det finns egentligen två sorters skikt. Den ena sorten är Netscape-skikten med egna Netscape-koder. Vanligast är skikt som använder CSS-koder som ju är standard och därför stöds av fler webbläsare men CSS-skikten fungerar bäst i Internet Exporer. För att kunna se skikt så måste man ha en modern webbläsare. En finess i Dreamweaver är att man kan konvertera skikt till tabeller så att äldre webbläsare och även Netscape ska kunna visa sidan på ett korrektare sätt. Du ska nu lära dig lite om CSS-skikten.

  2. Välj att skapa en ny sida i huvudmappen som du kallar skikt.htm. Se till att sidan använder CSS-mallen itskolan.css och att den är öppen. Ge sidan titeln Skiktsidan. På menyraden väljer du nu Infoga, Skikt. Strax visas en ruta och i dess vänstra kant finns en gul ikon med C på. Om du klickar på denna ikon så blir skiktet markerat så att du kan ändra storlek genom att dra med musen precis som när man ändrar storleken på ett vanligt fönster. Du får också fram egenskapspaletten för skikt. Där ser du hur brett (B)och hur högt (H) skiktet är. Du kan också se hur långt från vänstra kanten som det ligger (V) och hur långt från översta kanten som det ligger (Ö). Du kan ändra storleken och placeringen genom att dra i skiktets kanter med musen eller genom att ändra talen i egenskapspaletten.
  3. Ändra värdena till B=300, H=300, V=100 och Ö=100. Du ser att skiktet har flyttats men att skiktets ikon är kvar längst upp till vänster. För att markera skiktet så att det t.ex. går att skriva i det klickar man på denna ikon. Skriv en kort text i skiktet för att se att du enbart skriver i skiktet. Texten är: Det här är mitt första skikt. Jag ska strax skapa ett till. Det blir två rader. Du ser på texten att CSS-mallen fungerar dvs texten blir Verdana eller något annat teckensnitt i samma familj och storleken blir 2. Lägg in samma bakgrund i skiktet som i tabellerna i filen si.htm.

  4. Infoga ett skikt till. Ändra dess värden till B=450, H=450, V=200 och Ö=200. Lägg in bakgrundsbilden green.gif i detta skikt samt skriv in texten: Det här är mitt andra skikt. Kanske gör jag ett tredje. Skikten överlappar varandra. Det första med Z-index 1 kommer underst och syns ej just där skikten överlappar varandra eftersom det andra skiktet har z-index 2. Kontrollera i webbläsaren. Ändra nu Z-index till 3 för det första skiktet och nu först du hur Z-index fungerar. Det skikt som har högst Z-index ligger överst.

  5. Ibland är det olämplig med överlappningar. Gör så här om du vill förhindra all överlappning. Välj att på menyraden klicka på Fönster, Andra och sedan på Skikt så att Skiktpaletten visas. Sätt en bock i rutan framför Förhindra överlappning.

  6. Du har nu lärt dig lite om skikt. Vi ska nu använda dessa kunskaper för att placera ut texterna på datasalssidan på ett exakt sätt. Gör därför en ny sida i huvudmappen vid namn salmedskikt.htm

  7. Öppna sedan denna fil. Se till att filen använder CSS-mallen itskolan.css. Ge sidan titeln IT-skolans datasal. Lägg också in en rubrik 1 överst med samma text. Om CSS-mallen fungerar så ser flyttas rubriken automatiskt till mitten samtidigt som den får en annan färg.

  8. Om dokumentfönstret är maximerat på sin plats så kan du inte ändra storleken på dokumentfönstret och då måste du för att kunna göra nästa övning först klicka på den mellersta av de tre ikonerna längst till höger på menyraden dvs på Återställ nedåt-ikonen. Gör så dvs se till att dokumentfönstret ej är maximerat.

    Längst ned en bit till höger på arbetsytan ser man vilken fönsterstorlek som man använder. Vi ska göra en sida som kan ses om man användaren har skrivbordsstorleken 640x480 så ändra fönsterstorleken genom att klicka på pilen till höger om storleken och ändra till 600 x 300 (640x480 maximerat). På menyraden väljer du nu Infoga, Skikt. Du skall sammanlagt göra 6 skikt. Gör först ett skikt och ge det placeringen
    B=150, H=100, V=415 och Ö=180.

  9. Gör sedan de 5 övriga. Placera ut dem efterhand som du gör dem så att nr 2 blir en bit till vänster om det 1:a skiktet och nr 3 en bit till vänster om det 2:a, Det 4:e ovanför det 1:a, det 5:e till vänster om det 4:e och det 6:e slutligen till vänster om det 4:e. Gör detta genom att hålla ned vänster musknapp över den lilla kvadraten ovanför skiktet samtidigt som du drar med musen. Korrigera sedan till samma värden för bredd och höjd så här. Håll Skift-knappen nere och klicka sedan i varje skikt men välj nr 1 sist. Välj sedan på menyraden Ändra, Justera. Välj Gör samma bredd. Markera alla skikt igen på samma sätt och välj sedan gör samma höjd. Alla skikten får nu samma höjd och bredd som nr 1.
  10. Ändra sedan till exakta värden för V och Ö enligt nedan genom att klicka med piltangenterna på tangentbordet. Då förflyttas man 1 px för varje tryckning. Du kan också ange värdena i egenskapspaletten. Följande skalll gälla i tur och ordning för de 6 skikten:
    1. B=150, H=100, V=415 och Ö=180
    2. B=150, H=100, V=225 och Ö=190
    3. B=150, H=100, V=35 och Ö=180
    4. B=150, H=100, V=415 och Ö=60
    5. B=150, H=100, V=225 och Ö=70
    6. B=150, H=100, V=35 och Ö=60

  11. Öppna filen itskolan.css. Spara om filen med namnet datasalen.css i samma mapp dvs i vår huvudmapp skolan. Ändra så att det blir 8pt överallt och lägg till så att det bir 8pt också för H1 och B. Där det står H1 skriver du
    H1,H2,H3,H4,H5,H6
    dvs du ändrar så att formateringen gäller för alla rubriker och inte enbart för H1. Ta bort itskolan.css som CSS-mall för sidan vi arbetar med och lägg istället in datasalen.css.

  12. Välj nu att kopiera och klistra in från den tidigare datasalen. Klistra först in tabellen i det mellersta skiktet i övre raden. Börja med att klistra in de första 2 orden i den översta texten med sin rubrik i skiktet längst upp till vänster dvs i nr 6. Klistra sedan in listorna i tur och ordning uppifrån och från vänster. Ta bara med de första 2 orden i översta raden i varje lista inklusive rubriken. Lägg första listan längst till höger i översta raden och sedan går du från vänster till höger i den understa raden.

  13. Rubriken blir bra centrerad om man har skrivbordsstorleken 640x480 men den kommer helt fel vid andra storlekar på skrivbordet. Du skapar därför ett nytt skikt med följande värden
    B=200, H=10, V=200 och Ö=10. Infoga sedan en tabell med en cell i detta skikt. Välj för tabellen kant=0, celllutfyllnad=0, cellmellanrum=0, bredd 100 % och Justering - Centrerad. Flytta sedan rubriken till tabellen. Formatera eventuellt om texten så att den verkligen är H1 dvs rubrik 1. Kontrollera resultatet i webbläsaren.

Kontrollera i facit och gå vidare

  1. Undersök hur alla sidorna ser ut och jämför med facit.
  2. Fortsätt sedan med nästa övning.

Denna sida uppdaterades senast 2005-10-06 av
tommy.maltell@pb.edu.jonkoping.se

Länkar:
Kursens ingångssida - Skolornas portal

©  2002, 2003 Tommy Maltell