Hjemmesider med KompoZer - kommentarer og erfaringer
knapforsidedesign-1
Klik en fremhævet tekst for at navigere - Retur med [Backspace ]
knapinfoside


Klik farvet link eller
fremhævet tekst for
at navigere

Retur med [BackSpace]

- eller [Alt] + [ < ]


 Link til:

 Projekt

 Domæne

 Web-server

 FTP-program

 Hjemmesiden

 KompoZer-programmet

 CSS-editoren

 CSS-filer - interne eller eksterne?

 Advarsel mod dumheder















 Link til:

 Projekt

 Domæne

 Web-server

 FTP-program

 Hjemmesiden

 KompoZer-programmet

 CSS-editoren

 CSS-filer - interne eller eksterne?

 Advarsel mod dumheder















 Link til:

 Projekt

 Domæne

 Web-server

 FTP-program

 Hjemmesiden

 KompoZer-programmet

 CSS-editoren

 CSS-filer - interne eller eksterne?

 Advarsel mod dumheder















 Link til:

 Projekt

 Domæne

 Web-server

 FTP-program

 Hjemmesiden

 KompoZer-programmet

 CSS-editoren

 CSS-filer - interne eller eksterne?

 Advarsel mod dumheder















 Link til:

 Projekt

 Domæne

 Web-server

 FTP-program

 Hjemmesiden

 KompoZer-programmet

 CSS-editoren

 CSS-filer - interne eller eksterne?

 Advarsel mod dumheder















 Link til:

 Projekt

 Domæne

 Web-server

 FTP-program

 Hjemmesiden

 KompoZer-programmet

 CSS-editoren

 CSS-filer - interne eller eksterne?

 Advarsel mod dumheder















 Link til:

 Projekt

 Domæne

 Web-server

 FTP-program

 Hjemmesiden

 KompoZer-programmet

 CSS-editoren

 CSS-filer - interne eller eksterne?

 Advarsel mod dumheder















 Link til:

 Projekt

 Domæne

 Web-server

 FTP-program

 Hjemmesiden

 KompoZer-programmet

 CSS-editoren

 CSS-filer - interne eller eksterne?

 Advarsel mod dumheder















 Link til:

 Projekt

 Domæne

 Web-server

 FTP-program

 Hjemmesiden

 KompoZer-programmet

 CSS-editoren

 CSS-filer - interne eller eksterne?

 Advarsel mod dumheder















 Link til:

 Projekt

 Domæne

 Web-server

 FTP-program

 Hjemmesiden

 KompoZer-programmet

 CSS-editoren

 CSS-filer - interne eller eksterne?

 Advarsel mod dumheder















 Link til:

 Projekt

 Domæne

 Web-server

 FTP-program

 Hjemmesiden

 KompoZer-programmet

 CSS-editoren

 CSS-filer - interne eller eksterne?

 Advarsel mod dumheder
































































         Projekt

        Du skal have et egnet materiale
        Du skal have et formål med hjemmesiden
        Du skal vurdere dine egne forudsætninger       
        Du skal have en realistisk planlægning
        - og masser af tid - 

        Du kunne jo prøve med KompoZer, - et charmerende         program, - selv om det kan være lidt drilsk ind
        imellem.
       




 Domæne

Først skal du anskaffe dig et domæne, - en standplads på internettet, hvorfra du kan vise din hjemmeside.
Jeg bestilte mit "naturshow.dk" hos http://www.dk-hostmaster.dk,
og det var der ingen overraskelser i, - tillidsvækkende behandling hele vejen.



 Web-server


Du skal anbringe dit domæne på en web-server, når din hjemmeside er køreklar.

Du kan vælge selv at have en web-server kørende derhjemme, f.eks."Apache", eller alternativt hos en udbyder på nettet.
Udbyderen stiller web-server kapacitet til rådighed mod betaling.

En web-server består af et egnet program, som du kan finde på nettet ( gratis ).
Plus en PC, der skal køre i døgndrift.
En stationær PC vil typisk bruge 75 watt-timer i 24 timer pr. døgn svarende til 1,8 Kwt á 2,00 kr. = 3,60 kr. pr. døgn
På et år bliver det til 1314,- kr. plus værdien af den PC du vil anvende.
Når du har gransket udbydernes tilbud, samt egne nyrer og lever for at vælge vejen ud på internettet, er tiden kommet til at anskaffe et FTP-program.



 FTP-program


Når din hjemmeside er klar til præsentation, skal den flyttes fra din PC til web-serveren.
Det benytter du et ftp-program til
(ftp = fil-transport-program).
Jeg benytter FileZilla (gratis) som anbefalet i hæftet, og det virker helt forrygende godt.
 
Hentes her http://www.filezilla-project.org/download.php.

Vort - naturshow.dk - fylder p.t. ca. 1 gigabytes og min internetforbindelses upload-kapacitet er på 30 Gigabits/s. En mindre upload-rate kan sagtens fungere, - der er blot ventetiden til forskel.

FileZilla klarer hele overførslen herfra på ca. 1 kvarter op til min udbyders web-server.

Jeg har lejet mig ind hos http://www.UnoEuro.com.

Udgiften til 4 Gigabyte plads beløber sig til under 500 kr. pr. år, og da alt hidtil har fungeret upåklageligt, kan jeg kun anbefale denne udbyder.
UnoEuro har en overskuelig og forståelig hjemmeside med god info.
Jeg får hver morgen leveret statistik over besøgene på naturshow.dk, med mange oplysninger om besøgendes adfærd på hjemmesiden - det er ret interessant, også fordi det kan give et vink om, hvor ændringer kunne være en god idé.



 Hjemmesiden


Du kan købe et stort (dyrt) professionelt program, hvis dine ambitioner er til det, og dertil kommer utvivlsomt behov for kurser - de koster ofte 2 - 4000 kr pr. dag.

Tro så ikke du er udlært bagefter, - først da kommer arbejdet med at lære programmets muligheder
- og finurligheder ordentligt.

Du kan på internettet finde gratis programmer, der er udmærkede, hvis din hensigt er at kode indholdet
i hånden, - det giver mange muligheder for at tilføje interaktivitet mellem hjemmesiden og evt. brugere, men først skal du have lært at kode, og bagefter tager det lang tid at skrive dem.

eller

Vil du undgå direkte programering, men kunne skrive og designe siden ved hjælp af et program, der laver kodningen for dig, så findes det også,
 - og som uundgåelig konsekvens af den automatiske kodning, - vil det i nogen grad begrænse dine muligheder?

Det er nu du skal gøre dig klart , hvor avanceret siden
skal (behøver) at være, - og nu nærmer vi os mine overvejelser inden naturshow-projektet tog endelig form.

Jeg har lidt programeringserfaring med VisualBasic 6 og scripting til regneark, så jeg er ikke så bange for koder, - det kan endda være ret underholdende.
Jeg anså det derfor i begyndelsen for en selvfølge, at jeg skulle lære html-kodning, - det grundlæggende programeringssprog, der anvendes til hjemmesiderne på internettet.

Min tidligere erfaring med html begrænser sig til et 3 timers introkursus for 10-12 år siden, så det er der ikke meget tilbage af på mit personlige datalager.
Jeg har søgt efter materiale til selvstudium, dels på nettet, dels på biblioteket.

På internettet syntes rådene at være, at lære sig PHP-sproget (gratis) og kombinere det med MySQL-databasen (gratis) for derpå at pakke det hele ind i html-kode, altså ægte hjemmelavet.

Som pensionist havde jeg tiden til det, så jeg begyndte med at finde og installere såvel MySQL-databasen som en PHP fortolker.
Hertil kom så en Apache web-server, så jeg kunne illudere rigtig internet-aktivitet på min egen PC.

Alt det forløb nu ikke smertefrit, - det tog sin tid med en del "om igen øvelser", men til sidst kørte det, og jeg er stadig ret imponeret over perspektiverne i den database og den fine styring, der også var til rådighed.

Og det hele er gratis, - det er flot !

Nu, da "huset" var rejst, skulle funktionen blot
stables på benene, - men her begyndte jeg at indse,
at jeg måske havde lagt an til at "skyde spurve med
kanoner".

Med vore billeder liggende i en database, ville vi få
adgang til at søge, hente og sortere dem i talløse kombinationer, men da formålet primært var at vise dem frem, - og ikke at lave et egentligt botanisk opslagsværk, endsige et undervisningsmateriale, så fandt jeg det
nødvendigt at tænke mig om endnu engang.
Jeg var samtidig kommet tæt nok på PHP til at se, at
sprogets primære formål var interaktivitet mellem bruger og hjemmeside, - og det var netop ikke en del af min målsætning.

Altså PAUSE !

Jeg begyndte at søge på nettet efter et program, der opfyldte mine ret enkle behov.
Jeg fandt nogle.
Det dyreste kostede 12.000 kr. - og ville nok kræve et kursus.

Jeg fandt også dem, der var gratis.

Jeg forsøgte mig med tabeller, hvor du linker
minikopier af billederne til fremvisningseksemplarerne, men det var tungt at danse med, - og helt uoverskueligt til den mængde billeder, vi havde tænkt os at vise frem.

Senere lærte jeg så også, at det med tabellerne er en meget gammeldags fremgangsmåde, så det - -

- og det var stadig nødvendigt med en del håndkodning i de fleste tilfælde.



 KompoZer

Så nåede jeg omsider frem til KompoZer.

Programmet blev præsenteret som ideelt til konstruktion
af en hjemmeside, idet du laver siden med tekst og designer layoutet tilsyneladende som i et almindeligt teksbehandlings- og tegneprogram, hvorefter KompoZer programmet tager sig af kodningen.

Det lød ret smart, - det var en nærmere undersøgelse
værd,  - så jeg anskaffede mig det lille Libris-hæfte

 " Hjemmesider med KompoZer
 af Kim Ludvigsen "


http://www.libris.dk/produkt/Hjemmesider_med_KompoZer.htm
http://www.kimludvigsen.dk/programmer-internet-kompozer.php

 Fidusen ved netop KompoZer er, at det indeholder en CSS-editor, hvormed du er i stand til at lave layout på hjemmesiden med rammer, farver og positioner, - næsten som man gør det i et ægte tegneprogram,
- men i praksis er det nu ikke helt så lige til.

Får du behov for at ændre udseendet på en hel gruppe ens sider med samme layout, er det muligt at styre layoutet i gruppen med én fælles ekstern CSS-fil.

Genialt, - syntes jeg det lød, - det var temmelig meget lige det jeg havde brug for, - men kunne programmet nu også lave tingene som jeg ønskede dem?,  - og var det driftsikkert?

Jeg kører p.t. Windows ver. 7 - 32 pro.

Den korte konklusion er, at her virker det, - hatten af for KompoZer-programmet, - men

Jeg har haft dårlige erfaringer med at køre flere åbne filer samtidig i programmet ( ver. 7.10 ), - men det er nu til at leve med.
Har også  forsøgt med en nyere version - 8.xx, men
den fik jeg mærkelige fejl med, så ver. 7.10, og kun den er brugbar her i huset.



 CSS-editoren


CSS-editoren fungerer egentlig helt upåklagelig, men anvendelsen af den har en udtalt svaghed.

Når du ønsker at indsætte et grafisk element på siden, sker det ved at udnævne en tekstlinie til at "bære" elementet - f.eks. en ramme - linien udnævnes til at være en "div-box".
Derpå foretages opbygningen af rammen i CSS-editoren m.h.t. størrelse, farver, rammelinier og position på siden.

Det er forholdsvis lige ud ad landevejen, men  den
aktuelle tekstlinie - "div-boxen", der nu bærer en ramme som du har bestemt pladseringen af, - den er stadigvæk / samtidig underlagt standardafhængheden tekstlinierne imellem.


 Læs lige ovenstående én gang til !

Det betyder, at foretager du senere ændringer på én ramme, så vil det i mange tilfælde påvirke andre elementer på siden,
 - og "det er rigtig træls" !

Til at begynde med river man sig i den sparsomme hårpragt, - men efterhånden som sammenhængen går op for en, bliver det til at styre, men det er et større arbejde at ændre layoutet,
- og det er altså stadigvæk "træls" !

Det er kun rammernes dimensioner og pladsering, der giver problemer, - farver, kanter m.m. virker
tilsyneladende som de bør.
Problemet vokser selvsagt, jo flere elementer du anbringer på en side, - og med det 'in mente', kan du passende overveje at begrænse dig lidt.

Når en ramme er dannet, får den automatisk sit eget tekstmiljø - med tekstlinier, som du kender dem.

Det er derfor også muligt at bede CSS-editoren fremstille
et element inde på en rammes egne tekstlinier, blot du udnævner linien til at være en "div-box".
Det kan evt. gøre livet lidt lettere, men ulemperne, kendt fra siden udenfor rammen, findes altså også her.

Lægger du to rammer delvis over hinanden, vil evt.
tekst i den ene ramme "skinne igennem" på den andens baggrund.
Det er næppe et større problem, men fortæller måske lidt om opbygningen af CSS-elementerne.

For at give kode-generatoren besked om, at nu dannes der altså et CSS-element, skal en tekstlinie ændres til at være en "div-box".
Det sker ved at skrive en lille, - helst  "sigende" tekst på linien, - markere teksten, og vælge "Indsæt div.box " fra rullemenuen "Alm. tekst". Se Fig. 2-8

Jeg kan stærkt anbefale, at du fremstiller det planlagte, og nødvendige antal "div-boxe" samtidig, som beskrevet i en øvelse i hæftet "Hjemmesider med KompoZer".



 CSS-filer - interne eller eksterne

Når din html-fil startes, kan den hente oplysninger om sidens layout fra en CSS-fil, hvis en henvisning findes i kildekoden.

En intern CSS-fil er bundet til koden på den aktuelle side, og kun den. Det betyder, at her behøver du ikke henvise siden til en mappe, hvor den kan finde CSS-filen.

En ekstern CSS-fil derimod genereres ved, at du i CSS-editoren angiver
        1) at du agter at anvende en ekstern CSS-fil, og
        2) at du definerer, hvor den er gemt.
Den eksterne CSS-fils force er, at denne ene fil kan anvendes af flere sider med samme layout, og ønsker du at ændre layoutet på denne gruppe sider, skal ændringen kun udføres i deres fælles eksterne CSS-fil.
Det er smart !



 Advarsel !


Jeg har selv dummet mig et par gange, når jeg har genbrugt en side fra en gruppe med fælles CSS-fil.

Man tager en side fra gruppen, "flår den og renser den",
for nu skal den genbruges i anden sammenhæng.
Denne "nye" sides CSS-fil er imidlertid stadig "fællesfilen fra gruppen, og idet du ændrer CSS-indstillinger i den "nye" fil ændrer du jo samtidig  de indstillinger, som gruppen benytter !

Det kaldes en "Hovsa".

Gruppe-CSS-filen skal kopieres, og kopien omdøbes til brug i den "nye" genbrugsside.
Derpå starter du den "nye" html-fil, åbner CSS-editoren og importerer den omdøbte CSS-fil, der trods navneskiftet jo stadig indeholder det layout du ønsker af bibeholde.



NÅR DU DUMMER DIG, - for det gør du før eller siden !

 Så er det rart at have en backup 

Foruden standard-backup på en anden harddisk, benytter jeg mig altid af "multi-fil-udgave-konceptet".
Det går i al enkelhed ud på, at filen f.eks.
"Min hjemmeside er guld.html"
efterhånden som projektet skrider frem - evt. flere gange om dagen - gemmes som
"Min hjemmeside er guld-2.html"
"Min hjemmeside er guld-3.html"
"Min hjemmeside er guld-4.html"
o.s.v.
Hermed har du altid en mulighed for at vende langt nok tilbage i fil-rækken til at finde den udgave, der ligger før en evt. bommert.



Mine bemærkninger til "Hjemmesider med KompoZer" slutter foreløbigt her, - men da jeg agter at arbejde videre med programmet - og lære mere derom, så vil der måske dukke lidt mere op senere.

Til begyndere udi hjemmeside-fremstilling, vil jeg gerne endnu en gang anbefale ovennævnte hæfte,
- jeg har i hvert fald haft rigtig megen fornøjelse af det !

                                                                                 J.L.




















Om mine erfaringer med
hjemmelavede hjemmesider i
 KompoZer
+ et par tips i tilgift














Fig. 1


Hjemmesider med kompozer - forside

 Hæftet er absolut pengene værd.

Kim Ludvigsen har dog skullet spare på pladsen,
så nogle af hans forklarende illustrationer er
lige små nok, - jeg kunne godt have brugt
bedre billeder til vejledning i brug af CSS-editoren

- så her er de måske -

Fig. 2

KompoZer-eks-41
Før du starter CSS-editoren
 (palet-ikonet med underteksten CaScadeS) 
skal et antal tekstlinier markeres, der svarer til det antal elementer (rammer) du vil bruge på siden.
Her er 5 tomme linier øverst, derpå 3 linier forsynet
med teksterne Box1 - Box2 - Box3
og de er derpå markerede.
Da det er vanskeligt at tilføje ekstra tekstlinier senere,
har jeg tilføjet en reservelinie, der kan slettes,
 hvis der ikke bliver brug for ekstra div-boxe.



Fig. 3

KompoZer-eks-41-b
Når du har markeret det ønskede antal tekstlinier
til reservation for CSS-elementer, laver du selve reservationen ved at klikke "indsæt div-box" som
vist. I koden (Åbn siden "Kildekode" nederst til venstre)
vil du nu kunne se, at der er afsat plads til CSS-data
for hver af de tre kommende CSS-elementer.

Fig. 4

KompoZer-eks-43
Nu skal du afgøre om det skal være en intern eller
ekstern CSS-fil du skal bruge.
Editoren vil automatisk lave en intern fil, hvis du ikke
foretager dig noget, men ønsker du at der skal
 genereres en ekstern fil, skal du klikke den lille sorte
pil øverst til venstre i CSS-editoren.
Vælg eksternt og skriv i feltet ud for "Titel:",
hvor du ønsker filen anbragt.
Klik nu på palet-ikonet
Her får du valget mellem 4 element-typer.
Vælg den øverste til "stjerne-elementet", der er en
simpel nul-stilling af editoren.

Fig. 5

KompoZer-eks-45
Klik igen på palet-ikonet.
Vælg denne gang mulighed nr. 2 - "Stil som skal
tilføjes alle elementer i en klasse".
Derved sættes automatisk et " . " i skrivefeltet.
I forlængelse af dette punktum skal du skrive navnet på det element du er i færd med at bygge, - her Box1,
så der står " .Box1 ".
Nu kan du tildele elementet diverse egenskaber, -
mit element bliver 200px (pixels) bred og 150 px høj.
Det får en margin til venstre skærmkant på 10 px
og en margin til øverste skærmkant - eller en evt. eksisterende tekstlinie på 10 px.
Det er nu nærliggende også at indsætte værdier for
"Tekst", "Baggrund" og "Kanter".
Vælg fanen "Generelt" for at se de data du har valgt.

I Tekst har jeg valgt indstillingen 100% skriftstørrelse og forud-defineret Ariel m.v.
Det giver dig færre fejl i diverse browsere, der har det med at tolke html-filens indstillinger efter forgodtbefindende.
Nødvendig formateringen foregår så fra KompoZers menulinier i stedet.
Idet jeg klikker OK skrives de valgte data ind i koden
og CSS-editoren forsvinder.


Fig. 6

KompoZer-eks-46
Dine valgte data for elementet "Box1" som de
bliver skrevet i koden.
Denne samling data til en div-box kaldes en "Klasse".


fig. 7

KompoZer-eks-47
Jeg markerer ordet "Box1" i den øverste div-box.

I rullemenuen under ikonet "Overfør", hvor der i starten
står "Ingen klasse" er det nu muligt at vælge de data 
du genererede i CSS-editoren og indsætte dem i den
markerede div-box, "Box1" nede på siden.


Fig. 8

KompoZer-eks-49
Her har jeg vist de 5 tomme linier over "Box1" og
div-boxen "Box1", efter den har fået tildelt sin "Klasse"


Fig. 9

KompoZer-eks-4
Blot endnu et eksempel med 3 elementer og formateret
tekst øverst på siden.
i naturshow.dk har jeg ikke "løse tekster" på siderne,
der er al tekst skrevet inde i rammer.


Fig. 10

public.html-traeet
Mit "træ" som det kopieres op til web-serveren.
[ 1 - er kataloget med CSS-filerne
[ 2 - denne sides katalog med html-fil og billeder
[ 3 - forside-html filen med navnet index.html,
som mange udbydere kræver det.


Illustrationer
med
kommentarer


























































































































































































































































evt-1
evt-2
evt-3