Datorer, Internet
och sökning
en kurs av Tommy Maltell
Kapitel 45k - Dreamweaver MX
Svensk version - Övning
11
Ersätta
ord och fraser i en webb
-
Du vill inte längre använda dig av en CSS-mallen itskolan.css
i de dokument som använder denna mall. Du vill istället
använda dig av style-taggar i varje dokument. Hur ska du ta bort
CSS-mallarna snabbt? Hur ser HTML-koderna ut? Undersök i någon
fil t.ex. i ingang.htm. Svaret blir att HTML-koden ser ut så
här:
<link rel="stylesheet" href="itskolan.css">
-
Stäng nu alla filerna på platsen IT-skolan. På menyraden
väljer du Redigera, Sök och ersätt. Ändra
vid Sök i till Aktuell plats och vid Sök
efter till HTML-källa. Till höger därom
skriver du in HTML-koden nämnd ovan och vid Ersätt med
skriver du ingenting. Låt markeringen vara kvar vid Ignorera
skilnader i mellanrum. Klicka sedan på Ersätt alla.
Du får en varning att du inte kan ångra ändringarna.
Acceptera denna. Därefter får du besked om att du har tagit
bort HTML-koden i 6 filer dvs i filerna datasalen.htm, form.htm,
ingang.htm, links.htm, pop.htm och skikt.htm.
-
Salmedskikt-filerna använder ju datasalen.css men hur är
det med si.htm och sp.htm. Varfär hände inget med
dessa. Om du undersöker så upptäcker du att de ju
ligger i undermappar men ändå använder de en CSS-mall
som ligger i huvudmappen. Du måste alltså också
ersätta följande kod med ingenting:
<link rel="stylesheet" href="../itskolan.css">
Stäng alla filer och gör så. Du får nu besked
om att du har tagit bort koden i ytterligare 4 filer: si.htm, sp.htm,
sp2.htm och sp3.htm.
- Du hade naturligtvis kunna ändra på många andra sätt.
Du hade kunnat tagit bort bara filnamnet itskolan.css. Då
hade det räckt med att ersätta bara en gång. Min tanke
med borttagandet är dock också att du skulle få en
situation som är jämförlig med att att du i de 10 filerna
aldrig har haft några CSS-mallar. Hur gör du då för
att få en snabb lösning eller vad kan du göra om du
i din nuvarande situation ångrar dig i alla fall och trots allt
vill ha en CSS-mall. Du bestämmer dig för att lägga in
en CSS-mall igen men samtidigt har du tänkt på att du skulle
vilja ändra lite i CSS-mallen först. Du börjar med det.
Öppna därför filen itskolan.css. Spara
om filen som itskolan2.css. Ändra där H1 till
H1,H2,H3,H4,H5,H6 dvs alla rubriker får samma färg
och är centrerade. Du tycker inte heller att det är bra att
allt som har fetstil har samma färg som rubrikerna. Du tycker dock
att sådant som är markerat med fetstil skall ha en särskild
färg. Ändra färgen för B till
#905D90. Spara om.
- Nu är du klar.
Kanske måste du efter det att du har lagt in mallen igen justera
på någon sida pga ändringarna. Bl a så är
du medveten om formateringarna när det gäller de översta
texterna (rubrikerna) i filerna si.htm och sp.htm. Måste
du nu lägga in it.skolan igen i alla 6 filerna såsom du fick
lära dig i övning 6? Nej, men vad
ska du ersätta för att kunna använda funktionen ersätta?
CSS-mallar skall ju ligga mellan <head> och </head>.
Det finns alltså två sätt. Du väljer att ersätta
koden:
</head>
med koden
<link rel="stylesheet" href="itskolan2.css">
</head>
Skriv på två rader. Dreamweaver (men inte webbläsaren)
kräver att hela koden
<link rel="stylesheet" href="itskolan2.css">
verkligen hamnar på samma rad.
Du skall emellertid bara lägga in den för just dessa ovannämnda
10 filer. Stäng därefter alla filer och markera på platsen
IT-skolan alla de 10 filerna genom att först klicka på en
och sedan hålla ned Ctrl-knappen medan du klickar på de
andra 9. Välj sedan Redigera, Ersätt och ändra vid Sök
i till Markerade filer. Lägg in vad som skall ersättas och
vad detta skall ersättas med och klicka på Ersätt alla.
Acceptera varningen och du får sedan besked att du har ändrat
i 10 filer.
- Skulle vi inte ha ersatt med en lite annorlunda kod för filerna
si.htm, sp.htm, sp2.htm och sp3.htm. Jo, du glömde detta
och därför har du nu 2 alternativ. Antingen kopierar du filen
itskolan.css till de två mapparna.
institut och program och sedan måste du komma ihåg att när
du ändrar i filen itskolan.css så har du tre filer att hålla
reda på istället för en. Du bestämmer dig för
att bara ha en fil och du gör därför en liten korrigering.
Markera dessa 4 filer på platsen IT-skolan. Ersätt sedan
itskolan2.css med ../itskolan2.css.
- Gör nu stickprov
genom att förhandsgranska med webbläsaren för att kontrollera
att allt har fungerat. WYSIWYG-funktionen i Dreamweaver är känsligare
än webbläsaren. Dreamweaver klarar inte att använda CSS-koden
om inte hela koden
<link rel="stylesheet" href="itskolan2.css">
kommer på samma rad. Om det inte fungerar i Dreamweaver så
kontrollera detta. Du kan använda ersätta för att ändra
något som står på två rader till en rad.
- Öppna si.htm
i Dremweaver och i HTML-koden tar du bort
<META http-equiv="Refresh" content="10; URL=institut/si.htm">
så att man inte hela tiden när man kommer till sidan
skickas vidare till Samhällsvetenskapliga programmets sida. "Rubrikerna"
överst vid den lilla bilden på huset i den här filen
och i sp.htm är ju inte formaterade som rubriker av den anledningen
att du inte ville få ett stycke (vilket ingår i alla rubriker)
men egentligen så är det ju rubriker och de borde få
samma färg som rubriken i ingang.htm. Dina formateringar går
före CSS-mallen. Ändra färgen på dessa båda
texter till samma färg som gäller för rubriker dvs till
#90905D. (Testa gärna och se vad som händer om du ändrar
en av texterna till Rubrik 3 istället för Storlek 4. Texten
kommer inte mitt för bilden utan högre upp i cellen. Kanske
går detta att fixa på något annat sätt med CSS
men Storlek 4 med särskild formatering av färgen är ett
enkelt sätt och det fungerar också med äldre webbläsare.
Kommandon
- Ett eller flera steg i historiapaletten kan sparas som ett kommando.
Man markerar flera händelser samtidigt genom att markera dem i
tur och ordning samtidigt som man trycker ned Ctrl-knappen. När
man har markerat färdigt så klickar man någonstans
i markeringen med höger musknapp och sedan väljer man spara
som kommando. Kommandot hittar man sedan genom att på menyraden
klicka på Kommandon.
- Du kan också skapa ett kommando genom att på menyraden
klicka på Kommandon och sedan välja Starta inspelning. Gör
så och det du skall spela in är att du ändrar lite i
egenskaper. Du gör i tur och ordning följande ändringar
i egenskaper för vanlig text: Ändra teckensnittet till
Arial,Helvetica,..., storleken till 4, färgen till grön (röd=0,
grön=455 och blå=0) dvs till #00FF00 och klicka på
B för fetstil. Börka med att klicka på Starta
inställninen genom att klicka på Kommandon, Starta inspelningen
och avsluta med att klicka på Kommandon, Stoppa inspelningen.
- Skriv en liten text som du markerar. Spela sedan upp kommandot genom
att klicka på Kommandon, Spela upp inspelat kommando. Kontrollera
att det fungerar. Spara sedan kommandot. Du gör så här.
Öppna Historiapaletten, högerklicka på händelsen
Kör kommando och välj att spara som kommando. Väl
själv ett lämpligt namn. Du kan sedan se namnet på ditt
kommando längst ned när du klickar på Kommmandon i menyraden
och du kan välja att spela upp det när du vill.
- Om du på menyraden klickar på Kommandon, Hämta
fler kommandon så kommer du först till en
informationssida på svenska. Om du där klickar på
Dreamweaver-länken så kommer du sedan till en
sida där du kan hämta fler kommandon och beteenden. För
att kunna hämta filer måste man vara medlem. Länkar
till sidor om medlemskap hittar du i kapitel
9.
- Du skall testa en annan möjlighet under Kommandon. Öppna
filen si.htm. Markera den understa tabellen med jämförelsetal
och välj sedan Kommandon, Formatera tabell. Du kan här
testa olika förvalda formateringar av tabeller. Välj till
slut att utgå ifrån AltRows:Green&Yellow. Ändra
sedan till följande och klicka därefter på OK och spara
om:
- Första: #CCCC99
- Andra: #FFFFCC
- Alternativ: varannan rad (ingen ändring)
- Bakgrundsfärg: #CCCC99
- Textfärg: Skriv inget
- Kant: 1
- Ändra inte på de andra inställningarna
CSS - utskrifter , bakgrundsbilder, opacitet
HTML har från början medgivet väldigt få formateringsmöjligheter.
Dessa har förbättrats avsevärt och särskilt med CSS
som erbjuder väldigt många möjligheter. Tyvärr har
webbläsarna ännu inte gjort det möjligt att använda
alla dessa trots att CSS2 nu har funnits i mer än 3 år.
Jag har gjort en särskild sida vid namn utskrift.htm.
Det är en sida för att testa CSS-möjligheter vid utskrifter.
CSS-mallen utskrift.css används.
I enlighet med denna skall det före utskriften av en tabell på
sidan bli en sidbrytning så att tabellen skrivs ut på en ny
sida.
Dessutom så ska tabellen skrivas ut liggande. Detta är ju
en bra funktion om tabellen är för bred för en vanlig utskrift.
Då kommer ju inte hela tabellen med vid utskrift. Det här är
en möjlighet med CSS som bara delvis fungerar i Internet Explorer
6. Sidbrytningen fungerar men inte att tabellen skrivs ut liggande, men
i framtida versioner hoppas jag att denna användbara CSS-funktion
skall fungera.
I CSS-mallen finns följande koder för tabeller:
TABLE { font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 8pt; page : rotated; page-break-before : right; }
right fungerar ej men det tolkas som always som gör
att det alltid blir sidbrytning.
Om man skriver en egen kod så tar den över. Jag har skrivit
följande kod i början av den andra tabellen:
<table border="1" cellspacing="0" cellpadding="4" align="center"
bgcolor="#DFDFDF" STYLE="{ page-break-before : auto; }">
Den nya koden page-break-before : auto; innebär att om det
finns plats så blir det ingen sidbrytning. Sidbrytning sker automatiskt
dvs som vanligt.
Följden blir att det blir en sidbrytning före den första
tabellen men ingen sidbrytning före den andra eftersom det finns
plats också för den andra tabellen på sidan 2.
Testa genom att i Internet Explorer gå till sidan. Skriv sedan
ut den. Öppna utskrift.css och
titta på hur koderna är skrivna. Det finns tre sidbrytningar
att välja på: page-break-before, page-break-after och page-break-inside.
Mer information hittar du i någon av versionerna av originaldokumentet:
CSS2-rekommendationen.
Om du vill lära dig
CSS ordentligt så kan du t.ex. hämta
pdf-versionen på 338 sidor. Dokumentet är stort och det
är därför bättre att spara det först i sin egen
dator än att öppna det direkt som plug-in i webbläsaren.
På sidorna 175-185 kan du läsa om utskrifter.
Utan CSS så har man kunnat lägga in bakgrundsbilder på
hela sidor, i tabeller och i celler. Med CSS så kan man formatera
tabeller, rubriker, fetstil, mm men också vanliga stycken med vanlig
text. Man kan t.ex. bestämma en bakgrundsbild för ett stycke.
Jag har på testsidan.htm
lagt in bilden herrgard.jpg som en bakgrundsbild för ett stycke.
Jag skrev då följande kod för stycket inklusive texten.
<p STYLE="{background-image: url(bilder/herrgard.jpg)}">Den här
texen.....</P>
Att visa bakgrundsbilder för stycken fungerar ej med Dreamweavers
WYSIWYG-funktion men dock i Internet Explorer 6. Bakgrundsbilden
på skolan är inte gjord som en tapet så det blir inte
så snyggt, men det här är ju trots allt bara en demonstration.
Det går med hjälp av CSS också att bestämma opaciteten
för en bild med värden mellan 0 och 100 där 0 innebär
en helt osynlig bild. På testsidan.htm har jag under texten
med bakgrundsbilden lagt in herrgard.jpg igen men nu som en bild med en
opacitet på 45. Att visa bilder med opacitet fungerar ej med Dreamweavers
WYSIWYG-funktion men dock i Internet Explorer 6. Koden för bilden
är:
<img src="bilder/herrgard.jpg" width="200" height="133" STYLE={"filter:Alpha(opacity=45,style=0}">
Netscape 6.1 klarar inte att visa varken bakgrundsbilden eller bilden
med opacitet. Det kan vara lämpligare att ändra opaciteten i
ett bildbehandlingsprogram och att använda tabeller för att
ange bakgrunder för en del av en sida.
Mer om att skicka från
ett formulär
- I förra kapitlet
så gjorde vi ett formulär som ännu inte fungerar. Det
finns ett sätt som ska gå att använda för att skicka
från ett formulär till en e-postadress utan att använda
scripts men det fungerar ofta inte. Det är vanligt att man använder
ett CGI-script som körs på webbservern. Man kan istället
för CGI använda andra sätt t.ex. PHP och ASP. När
man får ett webbutrymme från sin Internetleverantör
eller när man hyr plats på ett webbhotell så är
det inte alltid som man har rätt att lägga in sådana
scripts själv eftersom de om de är felgjorda innebär
en säkerhetsrisk. Däremot erbjuder webbhotellet ofta egna
scripts som man bara kan använda om man är kund.
- Jag har lagt upp ett
formulär på en sida på Internet. Där kan du
skicka ett kort meddelande till mig. När du har skickat brevet
så öppnas ett fönster med ett tack-meddelande. Titta
i HTML-koden. I t.ex. Internet Explorer gör du så här:
På menyraden klickar du på Visa och sedan på
Källa. Programmet Anteckningar öppnas nu med HTML-koderna.
Titta lite på koderna. Du ser att det finns en maxlängd på
50 tecken för de första tre raderna och en maxlängd på
100 tecken för den fjärde raden. Det går alltså
på den fjärde raden att skriva lite mer än vad som syns.
- Hos FreeWebspace.net
kan man hitta information om och länkar till 450 webbhotell som
är gratis. Om man där använder Advanced
Power Search så kan man göra en mycket avancerad sökning
där man kan ha särskilda krav. Man kan t.ex. markera att man
vill kunna använda cgi, php eller asp. Man kan också
ha krav på att en del cgi-scipts skall finnas förinstallerade.
Gå dit och gör en sökning. Det kan dock av många
skäl löna sig att betala lite för ett webbhotell. Det
finns numera många billiga sådana som erbjuder en fin service.
Du kan hitta flera svenska webbhotell t.ex. i SUNETS
ämneskatalog eller i Googles
svenska katalog. Ett exempel är FS-data
som visar en noggrann redogörelse för vad man erhåller
om man hyr plats på webbhotellet.
Det finns en omfattande
manual för kunderna.
- Det finns många
mer eller mindre avancerade sätt att skicka från ett formulär
till en e-postadress eller till en databas. Om du har tillgång
till en webbplats på vilken du kan lägga upp egna scripts
så kan du leta efter scripts hos The CGI Resource
Index. När jag besökte sidan så fanns det 4037 CGI-skripts
listade i 325 olika kategorier. När det gäller PHP Motsvarande
resurser finns The
PHP Resource Index.
- Man kan också
lära sig att själv göra olika scripts. Sådana scripts
skriver man i något programspråk. CGI skrivs vanligen med
hjälp av Perl. Det finns en del scriptkurser på nätet
t.ex. IDG:s wbstudios
CGI\Perl-kurs, PHP-kurs och ASP\VBScript-kurs.
- I kapitel 29 har jag skrivit
lite om scripts, webbprogrammering och databaser. Jag erbjuder där
fler länkar särskilt när det gäller PHP och MySQL.
Bilder, ljud och video
I den här kursen ingår inte så mycket övningar
och information när det gäller bildbehandling som ju ibland
är ett viktigt inslag när man skall producera webbsidor. Såsom
nämnts tidigare finns dock lite information om bildbehandling i kapitel
27. När man arbetar
med att göra webbsidor bör man också lära sig ett
bildbehandlingsprogram.
I kapitel 28 har jag skrivit
lite om webbproduktion och ljud och video.
Kanske kommer tiden att medge en utvidgning av kapitlen 27, 28 och 29.
Kontrollera
i facit
Undersök hur alla sidorna
ser ut och jämför med facit.
Nu är kursen slut
Nu är Dreamweaverkkursen
slut. Den här kursen hoppas jag har varit en kurs som har gjort att
du har kommit igång med Dreamweaver. Det
finns mycket mer att lära sig när det gäller att använda
Dreamweaver men det finns också en del lämpliga kurser som
inte direkt har samband med en viss WYSIWYG-editor som Dreamweaver. Jag
tänker då dels på de kurser som nämns ovan när
det gäller olika scripts men framför allt på
två kurser om koder hos IDGs
webbstudio. Det är dels en kurs om HTML 4 och dels en kurs om
CSS.
Mer information om lämpliga
fortsättningskurser finns i kapitel
20.
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
|