SYFTE: I det här avsnittet kommer vi att översiktligt gå igenom några verktyg som är bra att använda sig av när man konstruerar en Web-sida. Motivet till att vi inte startar med att lära oss göra sidor med dessa verktyg utan istället började med "råkodning" i HTML, har jag tagit upp förut, men gör det gärna igen. Det finns inget verktyg som klarar av att göra allt det som du kommer att vilja göra på din sida - jag garanterar er det. Däremot är verktygen bra på att göra enklare sidor och tabeller, samt lägga in bilder och grafik. Det går framför allt snabbare. I fortsättningen kommer vi altså att starta våra sidor i ett verktyg och låta det göra grovjobbet, när vi sedan vill lägga in finesser och hotta upp ytterligare, så får vi återgå till "råkodning". Det finns massor av program som man kan använda för att göra Web-sidor med - det är bara att gå ut på nätet och söka. Det tycker jag ni skall göra för de flesta är shareware och ni har oftast en månad på er att testa programmen. Jag har själv varit ute och hämtat hem program - och visst till en viss gräns är de bra - men ganska snart blev jag bara f-b att det inte ens klarade att... Jag går inte in i detalj på verktygen det är upp till dig själv att göra!

Innehåll

Vi skall arbeta på motsvarande sätt nu som tidigare! - Så klicka här (l3.zip)och spara hem detta avsnitt till C:\HTML\kurs1 och packa upp filen l3.zip. Sedan öppnar du h_index.htm i din browser. AVSLUTA din Internetanslutning!

I Netscape har du en knapp som heter "Edit" - den tar dig till verktyget som du kan editera Web-sidor i.

gör det

a) Klicka på Edit nu - och bli f-b. Du får ett meddelande om att "Sorry, you can't edit frames in this version" - Förstår ni vad jag menar, en så enkel sida(i allafall förefaller den så) klarar inte Netscape Editor av.

b) Klicka bort varningen och gå in under File/Open file in Editor och öppna C:\HTML\kurs1\index.htm och nu öppnar du altså din egen hemsida.

c) Öppna Netscape igen och fortsätt att läsa/studera den här kursen.Du har altså Netscape och Netscape Editor öppnade samtidigt.

Jag tycker att Du kan gå igenom knappar och menyer själv! Nedan går jag dock igenom de viktigaste delarna.

New Web-Browser - öppnar en ny browser. Att jämföras med Browse dokument och knappen som ser ut som en halv båt-ratt (Viev in Browser), som båda går tillbaka till den Browser du redan har öppen.

Publish(finns även som knapp)- kan väl närmast översättas med publisera, vilket innebär att om du gjort din sida i exvis ett annat bibliotek en du har på servern så kan du med Publish skicka din sida inklusive bilder till servern. Den här funktionen använder jag sällan då jag ju ändå måste använda ett annat program för att lägga mina sidor på rätt plats, vilket vi kommer till i Avsnitt 4. Jag tar upp funktionen för att den är bra på att "sno" med. När du är ute och surfar på Internet och du kommer till en sida, som du tycker har mycket som du skulle vilja använda själv, klicka då på "Edit" i Netscape för att öppna Editorn - du får då ett varningsmeddelande om att du inga rättigheter har för sidan - vill du spara hem den i stället med bilder och allt? Då svarar du ja, och har du valt så sparars bilderna som ingår i sida också. Det är m.a.o. en slags omvänd Publish man gör.

Här är det igentligen snbbkommandonen jag vill/kräver att ni skall lära er. De är generella för Windows och jag förstår att de flesta känner ni igen/kan alla redan från andra program, men....

Ctl + Z Undo - Ångra det senast gjorda

Ctrl + X Cut - Klipp ur det markerade

Ctrl + C Copy - Kopiera det markerade till Urklipp

Ctrl + V Paste - Klistra in från Urklipp

Del(knappen) Delet - Ta bort

Ctrl + A Select All - Markera hela sidan

Allt går mycket snabbare om du i fortsättningen alltid använder dessa absolut vanligaste knapparna när du arbetar i Windows-miljö

Delete Table - om du skall ta bort en tabell eller delar av så skall du gå in här.

Remove Links - Har du en en länk som du vill ta bort, markerar du den och klickar här. Är det fler än en länk du markerat/råkat markera så får du ett varningsmeddelande.

De flesta är väl givna här dock är skilnaden på Reload och Refresh den att den första laddar om sidan på nytt, som i vanliga Netscape. Den andra uppdaterar helt enkelt sidan.

Display Tables - Ha alltid denna förbockad så att du ser dina tabellers omfång även om du inte har någon kantlinje (bordersize=0)

De fem första här finns även som knappar.

Link (Ctrl + L), (HM-höger musknapp)- gör en länk till en sida och/eller bokmärke/ankare

Target - gör ett bokmärke/ankare där jag markerar.

Image - Lägg in en bild där jag har klickat.

Table - Infoga en tabell. Observera att det är här på extra meny-rutan vid pilen du lägger till flera rader kolumner och celler till en tabell om du vill utöka den struktur du hade valt från början.

Horizontel Line - Lägg in en horisontell linje där jag har klickat.

HTML Tag - Lägg in en HTML Tag, en rad i taget. Funktionen använder jag ytterst sällan, då det ju som ni vet redan är mycket enklare att använda exvis Notepad direkt.

Av de tre olika "Break" du hittar sist tycker jag den sista är viktig att komma ihåg, det är ju den där taggen   som vi har använt tidigare fär att fylla ut en tom cell i en tabell. Du ser ju att snabbknappar är Shift + Space(mellanslag)

Vi hoppar över alla utom en, för du når alla de andra genom att klicka med HM. Vill du exempelvis ändra inställningarna för en bild, så markera bilden och klicka med HM, så når du de olika inställningarna för bilden.

Document - som har de tre underflikarna General, Appearance och Advanced. Av dessa skall vi i detta avsnitt bara ägna oss åt Appearance, där vi kan ändra färg på text och länkar. Ändra bakgrundsfärger eller lägga in bakgrundsbilder mm.

Motsvarar detsamma som i vanliga Netscape

Ctrl + A Markera hela dokumentet
Ctrl + B Fet stil
Ctrl + C eller Ctrl + Insert. Kopierar markerad text till urklipp.
Ctrl + F Visar Sök-dialogrutan.
Ctrl + I Kursiv stil.
Ctrl + K Tar bort textformatering.
Ctrl + L Visa dialogen för länkinställningar.
Ctrl + M Öppna Mail fönstret.
Ctrl + R Ladda om dokumentet.
Ctrl + S Spara.
Ctrl + T Sätt fast fontvidd.
Ctrl + U Gör understruket.
Ctrl + V eller Shift + Insert Klistra in från urklipp.
Ctrl + W Stäng dokumentet.
Ctrl + X Klipp ut till urklipp.
Ctrl + Z eller Alt + Back Ångra senaste
Ctrl + End Gå till slutet på dokumentet.
Ctrl + Home Gå till början av dokumentet.

Alt + Tab Nästa öppna fönster.
Shift + Space Lägg in non-breaking space.
Shift + Enter Radbryt.

Esc Stänger dialogrutor utan att göra något..

 Vi skall nu öva att byta färger på bakgrunder och texter/länkar

gör det!

a) Först skall du ändra färg på bakgrunden till blå, därefter ändra länkar(links) till gul och aktiva/använda (activ/followed) länkar till röd. Det gör du på en gång under Properties/Document.Prova att byta till andra färger på länkar och bakgrund tills du hittar en kombination du tycker är snygg. Spara och titta efter i browsern hur det blev.

b)Öppna Index-sidan i Notepad och försök att hitta var det har skett förändringar.

c) Under "Det här är Ditt namn hemsida" lägger du in en horisontell linje, med knappen översta raden, trea från höger. Spara och titta i Browsern. Öppna nu din index.htm i Notepad på nytt. Leta reda på taggen för den horisontella linjen <HR WIDTH="100%">. Ändra på WIDTH och se efter vad som händer. Lägg till SIZE="4"(höjden på linjen), COLOR="FFFFFF" inom taggen och titta efter vad som har hänt.Slutligen gör en hel linje utan skuggning genom att lägga in NOSHADE inom taggen. Exprimentera med attributen ovan tills du finner en linje som passar för din sida.

Insändningsuppgift 3:2:9) Hur ritar man en vertikal linje som är 5 pixels bred och 20 pixels hög?-Skick lösningen till mig!

Här skall vi bl.a byta bakgrundsbilder

a) Byt bakgrundsbild på din sida med Properties/Document och klicka i rutan Use Image och Brows for file. Du hittar några bakgrunder i kurs1-biblioteket. Filerna slutar på .jpg eller .gif. Beroende på bakgrund du väljer så kanske du behöver ändra färg på länkar och/eller text.

b) Gör en länk från LSK-loggo(markera bilden och använd HM) till LSK-hemsida (http://home5.swipnet.se/~w-50340)

Insändningsuppgift 3:2:10) Exprimentera nu med alla knappar som finns i editorn och fixa till din hemsida. När du tycker att den är tillräckligt snygg så skickar du den till mig. Ni får även mycket gärna lägga in mer nyttigheter på er sida så den blir mer personlig. Är det längre texter som du har i Word/Excel-dokument så bör du gå igenom nedanstående innan du lägger in dem.

 Till skillnad mot Office 97 så har Word och Excel inte inbyggt i sig att göra HTML av ett dokument men...

Det finns ett tillägg till alla Windows-programmen, som kallas "Internet Assistant". För Word heter filen wdia204z.exe och finns att hämta gratis hos Microsoft. Motsvarande fil för Excel heter html.xla. Vi som går LSK har dessa filer på den CD som medföljde Internet abonemanget. Annars kan du hämta dem på adressen under länkar nedan.

 a) Installera Internet Assistant för Word

b) Öppna ett dokument som du vill ha på din hemsida i Word och spara det som HTML i biblioteket C:\hemsida

c) Länka in dokumentet till din index.htm, på en plats som passar.

Insändningsuppgift 3:3 ) Skicka ett mail till mig om hur du har lyckats.

Prova gärna någon av programmen du hittar länkar till nedan.Observera länkarna som finns på vår hemsida och handlar om Web-grafik.

Internet Assistant http://www.microsoft.com/sbnmember/download/download.asp

Shareware
Shareware kan man hitta i princip överallt på nätet. Det är program man får testa först, vanligtvis i 30 dagar och sedan registrera sig som användare. Kostar oftast ingen större summa pengar plus att man då oftast får lite extra godis som hör till programmet.

Sausage har många olika web-editor.
Hos Jumbo finns mängder av sharewares.
Även hos Shareware.com finns en hel del.
På Sunet finns massor att hämta.
Microsoft sprider program omkring sig...
Torgets Tucows-spegel uppdateras dagligen.
Windows 95.com välsorterat sharewarearkiv.
HomeSite HTML-editor

Grafik
Grafik kan du plocka ned från nätet. Dels via olika hemsidor som har lagt upp "lager" för nedtankning. Samt när du är ute och surfar och hittar en bra bild, klicka med höger musknapp och välj Save images as. Med viss urskiljning förstås.

Image-O-Rama har allt
Ny häftig grafik sajt, måste ses
Web-design
Färgpalett
Barry´s Clip Art Server
Clip Art On-Line
Anthony's WWW Images
MacDaddy's Background Sampler!
Bakgrunder