Vil du prøve at designe din egen hjemmeside, og er uden forkundskaber, så er hjemmesideprogrammet Visual Web Designer et godt sted at starte.
Har du altid haft lyst til at lege med hjemmesider fra designet til oprettelse af indhold og udgivelse af det færdige resultat?
Så er det gratis hjemmesideprogram Visual Web Designer, som du kan hente i Microsoft Store til Windows 11, den rigtige legeplads for dig.
Vi gennemgår her i detaljer Visual Web Designer fra oprettelsen af den første hjemmeside med design og billeder til opsætning med indhold og endelig eksport af det færdige resultat i HTML
Hvad kan du med Visual Web Designer?
Visual Web Designer kan du bruge til at designe din egen hjemmeside grafisk fra bunden og selv indsætte indholdet eller du kan vælge at bruge en af de gratis templates som udgangspunkt for dit hjemmeside projekt.
Når du er færdig med dit hjemmesideprojekt, så kan du eksportere det færdige resultat i HTML, og gemme hjemmesiden lokalt på din harddisk, og herefter se den fysiske hjemmeside i din internetbrowser lokalt.
Hvis du får lyst til at udgive din hjemmeside på nettet, så skal du finde en hostingudbyder, som du kan bruge til at hoste din hjemmeside, og dermed udgive den på nettet, så den er tilgængelige for andre mennesker også.
1. Først skal du hente Visual Web Designer
For at du kan komme i gang med at designe din første hjemmeside på din Windows 11-PC, så skal du hente og installere det gratis hjemmesideprogram Visual Web Designer fra Microsoft Store.
2. Nu skal du åbne Visual Web Designer-appen
Når du har installeret Visual Web Designer-appen, så skal du åbne programmet, hvorefter du bliver mødt af dette introbillede, se figur 1.
 |
| Figur 1: Visual Web Designer - Introbillede |
3. Så skal du vælge en hjemmesideskabelon i Visual Web Designer
I den gratis udgave af Visual Web Designer har du mulighed for at vælge mellem de tre første skabeloner. Vi vælger skabelon nummer 2, som er en god template at starte med, da den allerede er opbygget som en hjemmeside, så den er nem at arbejde med første gang.
 |
| Figur 2: Visual Web Designer - Vælg skabelon |
Du skal nu klikke på hjemmesideskabelon nummer 2, som vist i figur 2, så du kan komme i gang med at designe din første hjemmeside. Hvis du senere får mod på mere, så kan du jo starte med en hel tom hjemmesideskabelon og bygge den op helt fra bunden.
Så bliver bedt om at navngive og gemme dit hjemmesideprojekt lokalt på din PC, så det gør du.
4. En gennemgang af brugerfladen i Visual Web Designer
Før vi går videre med selve designet af hjemmesiden, så bruger vi lige et par øjeblikke på, at kigge på opbygningen af brugerfladen i det gratis hjemmesideprogram til Windows 11.
 |
| Figur 3: Visual Web Designer - Brugerfladen |
I menuen til venstre finder vi et overblik over de sider, som vi arbejder med og her er det: Main Page, som er hjemmesidens hovedside og Page 2, som er en underside. Når du laver flere undersider, vil de også fremgå i samme menu til venstre.
Kigger vi på hovedmenuen, så består den af "Add", hvor du tilføjer en ny side eller en sektion til en eksisterende side. Så kommer "Preview" hvor du kan få hjemmesiden, som du arbejder med, at se i sin sin endelige form i din internetbrowser.
Herefter kommer "Settings", hvor du blandt andet kan se de gratis funktioner: "Page Properties", "Page Background Color" og "Page Listings".
 |
| Figur 4: Visual Web Designer - Page Properties |
Under sektionen "Page Properties" kan du tilføje et baggrundsbillede og baggrundsvideo, og du kan navnegive den pågældende side og indtaste søgeord, så hjemmesiden bliver nemmere for folk at finde på Google. Dertil kommer seks kasser med tilvalg, se figur 4, som du selv kan eksperimentere med.
Under "Page Background Color" kan du skifte baggrundsfarve på den pågældende side, hvor du under "Page Listings" kan åbne og slette undersider.
Ellers har vi menupunkterne: "Publish", "Save" og "Upgrade", som mere eller minde jo giver sig sig selv.
Sidst finder vi menupunktet "...", hvor du blandt kan finde hjælp under "Help" og Zoome ind og ud på siden med "Zoom", hvilket er en særdeles nyttig funktion.
5. Nu skal du designe en hjemmeside i Visual Web Designer
Nu er vi så kommet til det mest spændende punkt af dem alle, og det er tidspunktet, hvor vi skal til at lære at designe en hjemmeside med Visual Web Designer-appen.
Vi vælger i eksemplet at opbygge en testhjemmeside, der hedder "Æblefabrikken.
6. Opret titlen på hjemmesiden i Visual Web Designer
Det første du nu skal gøre er at navngive hjemmesiden og vi vores tilfælde, giver vi hjemmesiden titlen "Æblefabrikken".
 |
| Figur 5: Visual Web Designer - Opret titel |
Du opretter titlen på en hjemmeside i Visual Web Designer ved at højre klikke med musen på "Website Titel", hvor du vælger "Edit" og indtaster titlen "Æblefabrikken", som vist i figur 5, og klikker på "Save".
7. Nu skal du tilføje tekst på hjemmesiden i Visual Web Designer
Nu er vi så kommet til det punkt, hvor vi skal prøve at tilføje noget tekstindhold til hjemmesiden, og det gør vi i form af en lille velkomst til vores gæster.
 |
| Figur 6: Visual Web Designer - Tilføj tekstindhold |
Vil tilføjer vores test til forsiden på hjemmesiden i Visual Web Designer ved at dobbeltklikke på den fortrykte tekst på hjemmesideskabelonen under "Section 2". Her indtaster vi vores velkomsthilsen og en lille punktopstilling, om hvilke produktet Æblefabrikken tilbyder.
8. Nu skal du tilføje en ny sektion til hjemmesiden i Visual Web Designer
Nu skal vi tilføje en ny sektion til hjemmesiden i Visual Web Designer, som vi skal bruge bagefter til at indsætte et billede i.
Du tilføjer en ny sektion ved at klikke med musen på "Add", hvorefter du vælger "Add Page Section" og herefter igen "Single Column Section".
9. Nu skal du flytte en sektion på hjemmesiden i Visual Web Designer
Den nye sektion, som vi netop har oprettet, skal vi have flyttet op under vores velkomsthilsen på hjemmesiden.
 |
| Figur 7: Visual Web Designer - Flyt sektion |
Det gør du ved at klikke på "Tandhjulet" i venstre side foroven, som vist i figur 7, på den nye sektion, og herefter vælger du "Move Section Up" indtil den nye sektion er placeret direkte under sektionen ved vores velkomsthilsen.
10. Nu skal du tilføje et billede på hjemmesiden i Visual Web Designer
Nu skal vi så tilføje et billede af et æble på vores hjemmeside "Æblefabrikken" i Visual Web Designer, og til formålet har vi hentet et æble fra den gratis billeddatabase Pixabay, som vi skal bruge til formålet.
I den nye sektion, som vi netop har tilføjet, trykker du først med musen på blyanten, som er placeret under "Tandhjulet" i venstre side i sektionen.
 |
| Figur 8: Visual Web Designer - Tilføj billede |
Nu klikker du så på "Plusset", som vist i figur 8, og vælger "Photo", og henter billeder af æblet fra din harddisk. Som du sikkert kan se, så er der mange flere muligheder under "Plusset" som indsættelse af video, HTML, Audio og Galleri og lign. Disse funktioner kan du ved behov selv eksperimentere med.
11. Nu skal du slette en sektion på hjemmesiden i Visual Web Designer
Sektionen under vores nye sektion med billedet af vores æble, skal vi nu have slettet, da vi ikke skal bruge den på hjemmesiden.
Du sletter en sektion i Visual Web Designer ved at klikke på "Tandhjulet" i den pågældende sektion, og herefter vælge "Section Properties" og sætte flueben i "Delete This Section" og afslutte med "Save".
12. Nu skal du udfylde Footer på hjemmesiden i Visual Web Designer
Hjemmsideskabelonen har i bunden en sektion som hedder "Example Footer", og den skal vi have udfyldt med vores egne oplysninger på Æblefabrikken.
 |
| Figur 9: Visual Web Designer - Udfyld Footer |
Du kan se i figur 9, hvordan vi har udfyldt vores "Footer" med oplysningerne på Æblefabrikken, og du skal gøre det samme ved at klikke med musen i tekstfeltet, og indtaste den samme tekst.
13. Nu skal du oprette en underside på hjemmesiden i Visual Web Designer
Hjemmesideskabelonen indeholder allerede en undersider som hedder "Page 2 Title" i menuen til venstre, og den kan du selv foretage ændringer i ved at benytte den samme fremgangsmåde, som vi allerede har vist dig vedr. hovedsiden på Æblefabrikken.
14. Nu vil du se den færdige hjemmeside i Visual Web Designer
Nu er vi klar til at se, hvordan vores hjemmeside, som vi har lavet på Æblefabrikken i Visual Web Designer, ser ud færdig, og det gør du ved at klikke på "Preview" i hovedmenuen foroven.
 |
| Figur 10 - Visual Web Designer - Æblefabrikken |
Hvis du har fulgt vores vejledning, skal din hjemmeside gerne ligne det færdige resultat i figur 10 på Æblefabrikken.
15. Eksport af hjemmesiden i HTML i Visual Web Designer
For at du kan have glæde af din nye hjemmeside, så skal du vælge "Publish" i hovedmenuen og herefter "Export Page As HTML", hvorefter du kan vælge "Launch In Browser", hvorefter du kan se den færdige hjemmeside i din internetbrowser. Resultatet svarer til, hvis du vælger at få din hjemmeside online via et hostingfirma.
Hjemmesiden er nu gemt på din harddisk, så du altid kan hente den frem i din browser, og du kan sådan set bare gennem den som en "Favoritside" i din browser, så er det let at finde den igen.
Hvis du ønsker, at din nye hjemmeside fremstillet med Visual Web Designer skal være online, så skal du finde en hostingudbyder, hvor du kan få hjemmesiden hostet på en server, og her skal du uploade indholdet fra din harddisk med hjemmesidefilerne via udbyderens interface, og det plejer for det mest at være til at have med at gøre.