Tutorial:
Del 2: Skabelonen og værktøjerne
Dette er del 2 i en serie, der vil forklare hvordan man bruger en gratis hjemmesideskabelon til at opbygge og offentliggøre et komplet websted. Læs del 1.
I den første del af denne tutorial serie, bad jeg om forslag til hvad skabelon jeg skal bruge som et eksempel. I bemærkningerne til indlægget, foreslog flere læsere, at jeg skal bruge Variant Duo skabelon. Da denne serie vil blive skrevet baseret på feedback og forslag fra dem af jer, der følger den, vil jeg bruge Variant Duo som et af eksemplerne. Men jeg ønskede også at have en noget mere avanceret skabelon, der ville give nogle muligheder for tilpasning, så tidligere i dag jeg udgivet en ny gratis skabelon lavet specielt til denne tutorial. Den kaldes Learn CSS og jeg vil bruge den til at vise, hvordan små ændringer i stilarket kan laves for at give skabelonen og hjemmesiden du opbygger et mere unikt look. I denne proces, vil jeg også frigive alternative versioner baseret på de ændringer, der er foretaget i hele serien. Men at lære mere om CSS er et emne for fremtidige dele. I denne del vil jeg begynde fra begyndelsen.
Gratis eller Kommercielle skabeloner?
Når du har besluttet at opbygge en hjemmeside ved hjælp af en hjemmesideskabelon, er den første ting, at finde et udgangspunkt, der passer til dine behov. Der er en masse hjemmesider, der tilbyder høj-kvalitets skabeloner, både gratis og kommercielle. Generelt er skabeloner til kommerciel hjemmeside-brug mere avancerede og omfattende og indeholder meget mere materiale end gratis skabeloner gør. Sådanne materialer kan være forskellige former for scripts, kildekoder for design, skrifttyper, brugervejledninger og / eller billeder, der kan bruges på din hjemmeside. Dette er nyttigt i mange tilfælde. For eksempel, kildebilleder til konstruktionen, giver dig mulighed for at ændre baggrunde og header-billeder, og hvis skabelonen bruger en header eller en navigationsmenu, hvor billederne indeholder tekster (sådan som hjemmesidenavn eller link-knap titler) kan du bruge kildefilerne til at redigere tekster. Men det kan også gøre det sværere for en nybegynder at få startet da du skal bruge billedredigeringsprogrammer til at foretage flere ændringer før skabelonen kan bruges.
Skabelonerne på andreasviklund.com omfatter ikke noget billedekilde materiale, men det er ikke nødvendigt, eftersom al tekst, som ses i skabelonen er skrevet direkte ind i HTML-koden, så du kan redigere alt indhold uden at være tvunget til at bruge et billedredigeringsprogram. Yderligere, mine hjemmesideskabeloner er ikke oprettet med nogen specifikke emner i tankerne, så enhver skabelon kan bruges til enhver form for hjemmeside - i modsætning til mange kommercielle skabeloner, som ofte er skabt til en bestemt kategori af websteder. F.eks. kommercielle hostingselskaber har skabeloner, der kan vise et foto af en serverrack i hovedet, mens firmaskabeloner kan indeholde et billede af mennesker i jakkesæt på et forretningsmøde. De manglende specifikke emner giver mere frihed, men på bekostning af et mere generisk udseende, der betyder, at skabelonens design ikke skiller sig ud som unikke på nogen måde. Dette er naturligvis ikke altid tilfældet. Der er generiske skabeloner i det kommercielle marked samt gratis skabeloner med specifikke emner, men det er mindre udbredt.
Første trin: At finde og hente en skabelon
Målet med denne tutorial er at opbygge en enkel og nyttig hjemmeside fra en skabelon fra andreasviklund.com template gallery, så den første ting, er at gennemse de forskellige skabeloner for at finde en, der ser passende ud. På skabelon-siden kan du se miniaturer, der giver dig en idé om, hvordan de forskellige skabeloner ser ud. Hvis du klikker på et af billederne eller på titlen for hver skabelon, vil du komme til en side med mere information om skabelonen.
På hver enkelt skabelon side er der et download link (for nogle skabeloner flere download links til forskellige versioner af skabelonen), oplysninger om størrelsen på download, den dato, hvor skabelonen blev udgivet og et link til en live-demo af skabelonen. Der er også en kort beskrivelse af skabelonen og en eller flere miniaturer. Miniaturer kan klikkes på for at se billederne i større formater, herunder billeder i fuld størrelse. Der er en miniature for hvert layout, at skabelonen indeholder, og nogle skabeloner har miniaturer der viser de alternative versioner af skabelonen, hvor design eller layout er blevet ændret. For eksempel, andreas08 fås i to versioner, hvor den ene version har fået forskellige farver og mulighed for at bruge baggrundsbilleder.
Når du har fundet et design, du kan lide, skal du klikke på download-linket for at hente skabelonen til din egen computer. Skabelonerne er pakket i et .zip-arkiv, så det er en enkelt fil til download for hver skabelon. Som nævnt, vil jeg bruge Variant Duo som eksempel her. Du kan downloade det direkte via dette link.
Andet trin: Udpak skabelonen
Når du har hentet/downloadet skabelonen, åbnes (eller udpakkes) .zip-filen, og du vil finde en mappe, der har samme navn som .zip-filen, i dette eksempel 'variant-duo'. Omdøb mappen til 'Min hjemmeside' eller noget andet du vil kalde den, og åbn den. Du vil finde tre filer i mappen:
- index.html – HTML-filen. Denne fil indeholder det faktiske indhold (titel, overskrifter, tekster og kode til at vise indhold og billeder) og den generelle opbygning af skabelonen.
- variant-duo.css – CSS-fil, også kaldet stylesheet/stilark. Dette er den fil, der definerer, hvordan indholdet i HTML filen præsenteres, når det vises i en web browser.
- sample1.jpg – Det eneste billede, der anvendes i skabelonen, et bredt billede (980 × 250 pixels) visende blomster, der bruges som header billede i skabelon designet. Det vises gennem en linje kode i HTML-filen.
Med skabelonen udpakket på din computer, kan du åbne den i din web browser. Når du begynder at arbejde med skabelonen, vil du redigere disse filer lokalt og få vist alle ændringer via webbrowseren. Det er først på et senere tidspunkt, når skabelonen er blevet ændret til et komplet websted, at det vil blive udgivet på internettet. Så når du ser skabelonen i din browser er det det kun dine lokale filer du ser.
Tredie trin: Software til editering af skabelonen
Som forklaret i den første del af denne serie, er der mange måder at opbygge en hjemmeside - selvom du har besluttet at bruge en hjemmesideskabelon som udgangspunkt. Til redigering af en skabelon på din egen computer, findes der to forskellige typer af editors, som du kan bruge.
Den første slags er den visuelle HTML-editor, der åbner skabelonen på samme måde som en webbrowser, men giver dig mulighed for at redigere indholdet. Visuelle editorer er ofte kaldes WYSIWYG editorer ("Hvad du ser, er hvad du får"), hvilket betyder, at du kan se hele skabelonens design, mens den kode, der danner design og skaber strukturen i indholdet ikke vises. Ved hjælp af en visuel editor er det en simpel måde at redigere en hjemmeside skabelon, og mange visuelle editors indeholder hjemmesideskabeloner til en hurtig start. Et sådant eksempel er Style Master (en kommerciel editor tilgængelig for Windows og Mac, koster 59,99 dollar), som omfatter en række af mine skabeloner. Et andet eksempel er den gratis NVU editor (gratis, tilgængelig for Windows, Linux og Mac).
Den anden art, som er den slags jeg vil bruge i denne øvelse, er en kodeeditor. I modsætning til en visuel editor, der viser design, viser en kodeeditor HTML og CSS kode, som hjemmesider består af. Koden er stort set kun almindelig tekst, så enhver teksteditor kan bruges til at redigere den. Men specialiserede kodeeditors inkluderer værktøjer, der gør redigering lettere, for eksempel ved at give forskellige dele af koden forskellige farver for at gøre det lettere at se, hvad du redigerer. At lære at redigere koden direkte er ikke så nemt som at bruge en visuel editor, men det giver dig fuld kontrol og en større forståelse af, hvordan koden fungerer. Og ved hjælp af en hjemmesideskabelon som udgangspunkt behøver du ikke at vide, hvad alle dele af koden gør, så du kan lære tingene i små skridt. Jeg vil bruge en gratis kodeeditor kaldet Notepad++ (kun tilgængelig til Windows) i denne tutorial, men der er editors med lignende funktionalitet til alle operativsystemer såsom Smultron til Mac og BlueFish til Linux (begge er gratis)
Dette er, hvordan Notepad++ ser ud, når index.html og variant-duo.css åbnes i programmet (klik for at se en større version):
Der er også editors, der tillader redigering i både WYSIWYG mode og i selve koden. For yderligere læsning om editors anbefaler jeg Wikipedias List of HTML editors og HTML editor artikler, som også forklarer, hvorfor kodeeditors give mere kontrol over resultatet. Hvis du har spørgsmål om editors, skriv dem i en kommentar til dette indlæg, og jeg vil gøre mit bedste for at besvare dem.
Gå videre…
Fortsæt til del 3 hvor strukturen af HTML bliver forklaret, og hvor koderedigeringen starter…