Datorer, Internet och sökning, Tommy Maltell - Kapitel 25h - Övning 8 i Dreamweaver 3

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

Kapitel 25h - Dreamweaver 3
Svensk version - Övning 8

CSS med STYLE-taggar för en fil

. 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 är det mest effektiva. Man kan använda CSS också på en sida eller på en del av en sida.
Öppna filen itskolan.css i programmet Anteckningar. Kopiera texten. Öppna sedan si.htm i Dreamweaver och klicka på <> längst ned till höger för att kunna redigera HTML-koden. Gå till raden under raden som börjar med <link rel.. Skriv där
<style>  </style>
Kllistra in texten du kopierade mellan de båda style-taggarna.
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å. Ändra därför i den inkopierade texten så här:
1. TABLE - ändra font-size till 12
2. I - ändra font-size till 16
3. LI - ändra font-size till 11
4. BODY - ändra font-size till 14
5. B - ändra color till #000000 och lägg till font-size : 22pt
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äntar med att ändra den igen tills nästa kapitel.

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):

Sabotage, intrång eller annan störande verksamhet mot systemet är förbjudet.
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)

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.
Använd alltid ett vårdat språk när du skriver på datorn.

CSS för en del av en sida

CSS-mallen fungerar när du har kopierata in sidorna. Dock fattas det en del formateringar. Vi ska nu använda CSS på ett annat sätt. Klicka på Fönster i menyraden och sedan på CSS-format. Välj att klicka på knappen längst till vänster av de tre knapparna längst ner dvs på Nytt format. Välj 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. I CSS-formatfönstret anger du sedan att .reglerna skall användas i body.
Du är inte riktigt nöjd. Du skulle vilja ha samma formateringar också när det gäller rubrikerna. Gå till Klicka på Fönster i menyraden och sedan på CSS-format. Välj att klicka på knappen längst till vänster av de tre knapparna längst ner dvs på Nytt 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. Med CSS-formatfönstret öppet klickar du på de rubriker som har olika storlek och anger för var och en att .reglerna skall användas.
Klicka nu på <> längst ned till höger i arbetsytan för att se HTML-koderna. Det finns andra metoder att uppnå samma resultat.
Man kan också välja att markera ett vissa område på sidan och sedan välja att någon av de anpassade formaten skall gälla för denna markering.

Skikt

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.
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.
Ä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.
Infoga ett skikt till. Ändra dess värden till B=250, H=250, 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.
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 och sedan på Skikt så att Skiktpaletten visas. Sätt en bock i rutan framför Förhindra överlappning.
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
Öppna sedan denna fil. Se till att filen använder CSS-mallen itenhet.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.
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.
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, Skikt och hotspot-objekt. Välj Gör samma bredd. Markera alla skikt igen på samma sätt och välj sedan gör samma höjd.
Ä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
Öppna i filen itskolan.css i programmet Anteckningar. 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.
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.
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

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

Denna sida uppdaterades senast 01-10-17 av
tommy.maltell@pb.edu.jonkoping.se

Länkar:
Kursens ingångssida - Skolornas portal

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