Dreamweaver tutorial


Dreamweaver Tutorial oprette et webstedSom du ved handler dette websted alt om, hvordan man opretter et websted. Du kan lære forskellige måder ved hjælp af enten WordPress, Joomla eller Drupal. Vi har endda en guide til brug af ren HTML som i gamle dage (naturligvis med HTML5, den nyeste version). I denne Dreamweaver-tutorial til begyndere lærer du en anden.


For dem, der ikke ved, er Dreamweaver et program, der giver dig mulighed for at designe, kode og administrere websteder. Det, der er interessant ved Dreamweaver, er, at det giver både muligheden for at skrive kode såvel som at oprette et websted ved hjælp af en visuel grænseflade.

I denne Dreamweaver-tutorial lærer du alt hvad du behøver at vide for at begynde at oprette websteder med Dreamweaver. Du lærer programmet at kende, og hvad det kan gøre, højdepunkter i funktionen, og hvordan du indstiller det. Derefter finder du en trin-for-trin-guide til, hvordan du opretter et enkelt websted med Dreamweaver, gør det mobilvenligt og derefter uploade det til din server.

Dette vil være en lang tur. Du vil dog blive forbløffet over, hvor hurtigt du kommer ind i dette meget intuitive program.

Contents

Hvad er Dreamweaver og hvad kan det gøre?

På overfladen er Dreamweaver et IDE (Integrated Development Environment). Det betyder, at det er et stykke software, der kombinerer forskellige værktøjer til at gøre webdesign og udvikling lettere.

Det, der gør det specielt, er, at det er et sted mellem et CMS (hvor du styrer alt omkring dit websted gennem en visuel grænseflade) og en ren kodeditor. Sådan fungerer de forskellige dele.

Opret websteder gennem en visuel designgrænseflade

Den visuelle designværktøjskasse giver dig grundlæggende mulighed for at bygge websteder med din mus. Det giver dig mulighed for at placere webstedselementer, som du opretter et layout i Word. Grundlæggende ser du dit websted, som du ville se i en browser, men har også evnen til at manipulere det.

Dette er meget nyttigt, fordi det giver dig mulighed for hurtigt at opbygge et websteds skelet og uden at skulle skrive en enkelt kodelinje. I stedet opretter Dreamweaver automatisk den nødvendige kode til dig. På den måde kan du teoretisk sammensætte et helt websted for hånd og uploade det til din server.

På den anden side, hvis du er i stand til at kode, har Dreamweaver alle de nødvendige værktøjer til det også.

Arbejder som en fuldgyldig kodeeditor

Den anden del af Dreamweaver er en fuldt udstyret kodeditor. Det er udstyret med alle standardfunktioner, herunder:

  • Syntaksbelysning – Det betyder, at Dreamweaver fremhæver forskellige elementer (som operatører, variabler osv.) I forskellige farver for at gøre koden lettere at læse og korrigere.
  • Kodeafslutning – Udførelse af kode fungerer på samme måde som autofuldførelse på din telefon. Begynd med at skrive, og redaktøren kommer med forslag til det, du prøver at skrive. På den måde behøver du ikke at skrive alt ud helt.
  • Kode falder sammen – Sammenlægning af kode er en anden funktion til at gøre kode lettere at læse. Det giver dig mulighed for visuelt at krympe dele af din kode, når du ikke har brug for dem. På den måde behøver du ikke at rulle gennem hele filen, men kan kun håndtere de dele, du har brug for at arbejde på.

Dreamweaver understøtter de vigtigste sprog til webdesign (HTML5, CSS, JavaScript, PHP) og meget mere.

Den bedste del: Hvis du ændrer noget i din kode, viser Dreamweaver det automatisk også på den visuelle side. På den måde kan du se det uden at skulle uploade dine filer til en server eller slukke browseren.

Der er meget flere funktioner, og du vil se mange af dem i aktion i den kommende Dreamweaver-tutorial for begyndere.

Dreamweaver installations- og webstedsdesignproces (trin for trin)

Som et første trin skal du anskaffe Dreamweaver fra det officielle Adobes websted.

Du kan få en gratis prøveversion her eller fra din Creative Cloud-klient.

dreamweaver-tutorial til prissætning af begyndere

Trin 1. Download og installer

Når du får programmet fra det officielle websted, skal du bare downloade installationsfilen, udføre det og følge instruktionerne.

Hvis du allerede bruger Creative Cloud (som vi er), kan du blot klikke på Prøve inde i klienten. Klik derefter på, når programmet er færdig med installationen Start prøveperiode.

Trin 2. Første opstart

Når du først starter Dreamweaver, vil du se denne skærm.

dreamweaver første opstart

Hvis du aldrig har brugt programmet før, skal du vælge Nej, jeg er ny. Når du gør det, fører Dreamweaver dig gennem en installationsguide. Det første trin er at vælge, om arbejdsområdet skal bruges til udviklere eller et standard arbejdsområde.

dreamweaver onboarding guide vælg arbejdsområde

Da dette er en Dreamweaver-begyndertutorial, skal du vælge standardversionen. Derefter kan du vælge et farvetema til dit arbejdsområde fra fire forskellige indstillinger.

dreamweaver onboarding guide vælg farveskema

Det sidste trin er at vælge, om der skal startes med en eksempelfil, nyt eller eksisterende projekt eller se en tutorial.

dreamweaver onboarding guide sidste trin

Vælg at starte med en ny eller eksisterende mappe, og du er færdig med installationsprocessen. Godt arbejde!

Lad os nu starte et projekt og lære at oprette et websted med Dreamweaver.

Trin 3. Start et nyt sted

Det første trin er at oprette et nyt sted. Gå til Websted> Ny side. Det kommer dig til denne skærm:

oprette et nyt sted i dreamweaver

Det første trin er at give dit websted et navn. Derefter skal du vælge, hvor det skal gemmes. Dette er op til dig, men det er normalt fornuftigt at holde alle projekter på et sted for enkelhed.

Du har også muligheden for at knytte dit nye projekt til et Git-arkiv. Dette kan være en god idé, da det giver dig version kontrol men du kan springe det over nu.

Vi vil beskæftige os med alt under Servere på venstre side senere. Samme med CSS-forprocessorer, hvilket kun er vigtigt, når du bruger den slags ting.

Det, der er vigtigt for os, er Lokal info under Avancerede indstillinger.

aktiver standardbilledermappe i dreamweaver

Sørg for at klikke på mappeikonet til højre, hvor det står Standard mappe til billeder. Gå derefter til dit nyligt oprettede sidekatalog, åbn det, opret en ny mappe kaldet billeder og vælg det som din standardmappe. På den måde gemmer Dreamweaver automatisk billeder, der er tilknyttet dit websted.

Det er det for nu, klik Gemme for at gå tilbage til dit arbejdsområde.

Trin 4. Opret din hjemmefil

Nu hvor du har oprettet et projektsted, er det tid for den første fil. Vi starter med hjemmesiden.

Hvis Dreamweaver ikke tilbyder dig selve indstillingen, skal du gå til Fil> Ny. Du kan enten oprette en helt ny fil eller bruge en eksisterende skabelon. Programmet leveres med et par af dem (se Startskabeloner). Lige nu opretter vi en ny i stedet.

oprette en ny fil i dreamweaver

HTML er indstillet som standard, og du kan lade det være som det er. For dokumenttitel indtastes index.html og vælg at skab. Dette får dig på følgende skærm.

nyt projekt i dreamweaver

Dette er hat, som vi nævnte i begyndelsen: et levende billede af, hvordan dit websted ser ud (tomt i øjeblikket) og koden bag det. Du vil også bemærke, at Dreamweaver automatisk har oprettet nogle grundlæggende HTML-markeringer, som du kan bygge på. Lad os gøre det nu, skal vi?

Trin 5. Opret en overskrift

For at indsætte et element på siden skal du først vælge dets placering. Klik enten på den tomme side (Dreamweaver vælger automatisk (hvis du gør det) eller placer markøren i det samme element i kodedelen på skærmen.

Derefter skal du gå til Indsæt fane i øverste højre hjørne. Dette giver dig en liste over almindelige HTML- og siteelementer, som du kan tilføje til din side. Rul ned, indtil du kan se Header som en mulighed.

indsæt header element i dreamweaver

Et enkelt klik indsætter det på siden. Du kan også se det vises i HTML-dokumentet.

overskrift synlig i visuel interface og kodeditor

Enkelt, ret?

Nu skal du ændre teksten inde i overskriften og også omdanne den til en overskrift. For begge – markér først teksten i kodeditoren nederst.

markér overskriftstekst i dreamweaver

Gå derefter tilbage til Indsæt, Klik på pilen ved siden af Overskrift og vælg H1. Dette indpakker sidetitlen i et H1 HTML-tag. For mere information om overskrifttags, skal du læse denne artikel.

Derefter kan du også indtaste en titel til din side. På dit rigtige websted ville du vælge noget beskrivende med nøgleord og ikke kun Velkommen til Min testwebsted som i eksemplet.

ændret overskrift i dreamweaver

Okay, du har lige oprettet en sidehoved! I øjeblikket ser det stadig lidt råt ud, så lad os ændre det via CSS næste.

Trin 6. Opret en CSS-fil

Hvis du ikke er bekendt med det, er CSS den del, der giver al styling på en webside. Det giver dig mulighed for at definere farver, dimensioner på elementer, skrifttyper og -størrelser og meget mere. Vi vil bruge markeringen til at grantræde vores sidetitel og også lære at ændre CSS i Dreamweaver.

Teoretisk set kan du tilføje CSS lige inde i HTML-dokumentet. Der er en meget mindre elegant mulighed, end hvad vi vil gøre, som skaber en dedikeret fil til al CSS-styling af hele websitet.

Det første trin er at give din nye header en CSS-klasse eller id. Under denne proces vil Dreamweaver også bede dig om at oprette en stilarkfil. Gå til DOM-menuen nederst til højre på skærmen, der viser hele din webstedsstruktur. Sørg for, at din header er valgt.

I den levende visning vil du nu se den markeret i blåt med en lille etiket og et plustegn i bunden.

tilføj css-fil i dreamweaver

Klik på plustegnet, og skriv ind #header i det felt, der åbnes. Hashtaggen betyder, at du tildeler en id i modsætning til en klasse. Tryk på enter. I åbningsmenuen i stedet for Definer på side Vælg Opret en ny CSS-fil. Vælg i pop op-vinduet Gennemse og naviger til din sidemappe. Skriv derefter style.css (som er standardnavnet for typografiark) i Filnavn felt og ramt Gemme.

oprette stilark i dreamweaver

Når du nu vælger Okay, en ny fil vises øverst i din livevisning. Du kan se og redigere det derfra. Det vil også være knyttet til sektion af HTML-delen af ​​din side.

stilark tilføjet til webstedet

Awesome possum! Nu er du klar til at ændre din sides styling.

Trin 7. Opret en CSS-vælger til sidetitlen

Den første ting, du vil gøre, er at ændre skrifttypen på din overskrift og også centrere den. Til det skal du først oprette en ny CSS-vælger. En vælger er navnet på et element på vores side, som du kan tildele egenskaber til, f.eks. Farve, størrelse og mere.

Marker din H1-overskrift i DOM-visningen nederst til højre (som du gjorde med overskriften før). Vælg derefter over dette CSS Designer.

forberede styling til overskrift element

For at oprette en CSS-vælger skal du klikke på linjen, hvor det står Svælgere og klik derefter på plussymbolet. Dette bør automatisk foreslå en vælger til din navngivne #header h1.

oprette css-vælger i dreamweaver

Tryk på Enter for at oprette det. Færdig!

Hurtig note: for alle de nye i CSS betyder denne vælger, at du målretter mod det navngivne element h1 inde det kaldte element #header. På den måde anvendes uanset hvad du indtaster som CSS kun til den skrevne tekst og ikke til hovedelementet samlet.

Trin 8. Skift overskriftstype

Nu når du har en vælger, kan du tildele egenskaber til den. Hvis du kender din vej omkring CSS, kan du blot indtaste markering i style.css og programmet tager automatisk sig af det.

For de mindre erfarne brugere gør Dreamweaver det også rigtig let. Bliv i CSS Designer menu og fjern markeringen i afkrydsningsfeltet, hvor det står Vis sæt. Når du gør det, vil det låse op for en masse yderligere indstillinger.

aktiver css-indstillinger i dreamweaver

Med de nye knapper kan du vælge mange CSS-egenskaber fra områderne med layout, tekst, kant og baggrund. Det Mere -knappen giver dig muligheder for at indtaste dine egne regler.

For at ændre skrifttypen skal du klikke på Tekst valgmulighed øverst (alternativt rulle ned). Hold markøren over i de kommende indstillinger font-family og klik på standard skrifttype.

skift fontfamilie i dreamweaver

Dette giver dig et antal indstillinger for almindelige skrifttyper, inklusive deres tilbagefald (i tilfælde af at brugerbrowseren ikke er i stand til at vise den primære skrifttype). Du ønsker måske at klikke på Administrer skrifttyper nederst for at komme til denne menu:

adobe edge web skrifttyper

Her er du i stand til at vælge gratis skrifttyper fra Adobes Edge Web Fonts-tjeneste. Søg enten efter en skrifttype med navn, eller brug de mange filterindstillinger til venstre for at indsnævre dine valg, indtil du finder noget.

Et klik på et hvilket som helst af skrifterne markerer det for inkludering i Dreamweaver. Når du har gjort det, kan du enten bruge dem direkte eller gå til Brugerdefinerede skrifttabler til at definere dine egne dropback-skrifttyper.

oprette brugerdefinerede skrifttypestabler i dreamweaver

For nu skal du blot slå Færdig og klik derefter på standard skrifttyper igen. Denne gang skal du vælge din valgte tilpassede skrifttype og voilá – ændringen udføres inklusive al den nødvendige kodning.

ændret font i dreamweaver

Hvis du klikker på din style.css fil øverst, vil du se, at al markup også er tilføjet.

opdateret stilark i dreamweaver

Trin 9. Center overskriften og ændre dens størrelse

Teksten kunne stadig se bedre ud. Den næste opgave er at centrere den og øge skriftstørrelsen. Til det kan du også bruge en anden kaldet funktion Hurtig redigering.

For at bruge det skal du gå til kodevisningen og højreklikke på den del, du vil redigere. I dette tilfælde er det på

beslag.

åbn hurtig redigeringsmenu i dreamweaver

Her skal du vælge Hurtig redigering på toppen. Dette åbner CSS, der er knyttet til dette element under det. Nu kan du indtaste yderligere egenskaber uden at skulle søge i hele stilarkfilen (som kan være meget lang). For at centrere teksten og gøre den større skal du tilføje følgende kode til den.

skriftstørrelse: 42px;
tekstjustering: center;

Når du skriver, vil Dreamweaver også fremsætte forslag til det, du prøver at indtaste, hvilket gør det endnu lettere. Det er den kodekonfliktionsfunktion, der er nævnt tidligere.

Når du er færdig, ser det sådan ud:

ændre css via hurtig redigering i dreamweaver

Bemærk, at teksten allerede er ændret i livevisningen. Tryk nu på Esc for at overlade hurtigt, redigere og gå over til typografiet. Du vil opdage, at den nye CSS er tilføjet på det passende sted.

Temmelig sej, ikke?

Forresten, hvis du nogensinde er usikker på, hvad en CSS-egenskab betyder, skal du blot højreklikke på den og vælge Hurtige dokumenter (eller tryk på Ctrl + K). Dreamweaver giver dig derefter en forklaring.

dreamweaver hurtige dokumenter

Trin 10. Tilføj mere indhold

Med det, du har lært hidtil, kan du nu bygge et rudimentært sted. Af hensyn til denne Dreamweaver-tutorial har vi gjort følgende:

  • Definerede standardskrifttyper til overskrifter og afsnit
  • Tilføjet en navigationslinje og oprettede et link til hjemmesiden i den
  • Tilføjet en div-boks til indhold med yderligere to bokse inde
  • Flyttede en af ​​dem til venstre og en højre med flyde ejendom
  • Begræns deres bredde til procenter, så de kan justeres vandret
  • Føjede en prøveoverskrift og dummy-tekst til venstre inklusive en ikke-ordnet liste
  • Oprettet en formular (brug rullemenuen under Indsæt), to tekstfelter og en indsenderknap
  • Tilføjet afstand omkring elementerne via CSS-marginer og polstring
  • Forudsat baggrundsfarver og rammer
  • Oprettet en sidefod og en copyrightbesked

Her er resultatet:

webside med avanceret design

Kode til eksemplet:

Da dette er lidt avanceret, og ikke alle vil vide, hvordan man gør det, kan du finde HTML og CSS nedenfor, så du kan rekonstruere det for dig selv. Først HTML:





index.html

 



Hjem

Prøveoverskrift for hovedindhold

Lorem ipsum dolor sidder amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi. I imperdiet auctor leo vitae blandit.

  • Etiam tempus urna condimentum libero varius
  • Ud commodo risus finibus
  • Duis odio lacus, elementum eget sem finibus
  • Mollis dignissim enim.
  • Quisque molestie suscipit odio vel facilisis

Curabitur vestibulum, lorem a tincidunt dapibus, erat sem rhoncus nisl, non dapibus quam mi ac ligula. Vestibulum id auctor eros, nec porttitor odio. Nunc effektivitet turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Eksempel på opfordring til handling!

Lorem ipsum dolor sidder amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi.

Copyright © 2017 My Imaginary Website

Og så CSS:

@charset "utf-8";

krop {
baggrundsfarve: # F5F5F5;
margin-top: 0px;
margin-right: 0px;
margin-bund: 0px;
margin-left: 0px;
}

p,
-en,
ul,
ol,
li,
etiket,
input {
font-familie: muli, sans-serif;
font-stil: normal;
fontvægt: 300;
skriftstørrelse: 17px;
}

h1, h2, h3, h4, h5 {
font-familie: karla, sans-serif;
font-stil: normal;
fontvægt: 400;
tekst-transformation: store bogstaver;
}

#header {
polstring: 25px;
polstring-bund: 25px;
baggrundsfarve: #FFFFFF;
kant-bund: 4px solid # EB232F;
}

#header h1 {
font-family: aguafina-script;
font-stil: normal;
fontvægt: 400;
skriftstørrelse: 42px;
tekstjustering: center;
margin-top: 0px;
margin-bund: 0px;
tekst-transformation: ingen;
}

#navigation {
margin-right: auto;
margin-left: auto;
max-bredde: 1140px;
margin-top: 10px;
margin-bund: 10px;
}

#navigation a {
farve: # EB232F;
}

.vigtigste {
display: blokering;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
margin-bund: 15px;
klar: begge;
overløb: auto;
max-bredde: 1140px;
}

.vigtigste # hoved-højre {
float: højre;
bredde: 37,5%;
display: blokering;
}

.main # main-left {
flyde: venstre;
bredde: 57%;
display: blokering;
polstring-højre: 20px;
}

.main # main-right .cta {
tekstjustering: center;
}

.main # main-right .form {
bredde: 92%;
margin-right: auto;
margin-left: auto;
}

# hoved-højre .form div {
margin-bund: 10px;
}

# hoved-højre .form .label {

}

# hoved-højre .form .textfelt {
bredde: 100%;

}

.vigtigste # hoved-højre #knap {
tekstjustering: center;
polstring-top: 7px;
polstring-bund: 7px;
margin-left: auto;
margin-right: auto;
position: relativ;
display: blokering;
polstring-højre: 36px;
polstring til venstre: 36px;
grænse: ingen;
baggrundsfarve: # EB232F;
farve: #FFFFFF;
markør: markør;
}

.sidefod {
display: blokering;
polstring: 25px;
polstring-bund: 25px;
tekstjustering: center;
}

Vi ønsker at bruge dette som et eksempel til at vise dig de næste trin. Selvom det virker kompliceret, sammensætter vi dette på samme måde, som vi viste dig før.

Trin 11. Eksempelvisning i browser og på mobilenhed

Hvordan gjorde vi alt dette? Nå, først og fremmest er vi lidt mere erfarne med at bygge websteder end du sandsynligvis er. Derfor har vi allerede mine trin i, hvordan jeg opretter en ordentlig webside.

For det andet bruger vi en meget nyttig funktion, der hjælper mig med at fremskynde processen: Browser-forhåndsvisning. Dreamweaver giver dig mulighed for at se dine websider i realtid i en browser og endda på mobile enheder.

For at komme i gang skal du klikke på preview-knappen i realtid i nederste højre hjørne.

aktiver preview-menu i dreamweaver

Dette åbner forhåndsvisningsindstillingerne.

realtid preview muligheder i dreamweaver

Et klik på et af browsernavnene åbner dit webstedsprojekt i det. Du kan også scanne QR-koden med din telefon eller tablet (for eksempel med Firefox Quantum) eller skriv den viste adresse i din browser for at starte live preview på din enhed.

Vær bare opmærksom på, at du skal indtaste dit Adobe ID og din adgangskode til det. Det skulle du have fra at tilmelde dig Dreamweaver.

Den bedste del: Eventuelle ændringer, du foretager i Dreamweaver, vises automatisk i browseren, på samme tid som du foretager dem.

Hvordan hjalp det mig med at sammensætte webstedet hurtigere? Afhængigt af størrelsen på din skærm kan displayet i browseren muligvis være tættere på originalen end det, du ser i Dreamweaver.

For det andet gør det muligt at kontrollere webstedet i browseren mig til at bruge udviklerværktøjerne til at teste ændringer.

udviklerværktøjer i browser

De ligner meget det, du ser i Dreamweaver. De er mere kendte for os, så vi kan arbejde hurtigere med dem og bare kopiere og indsætte koden på vores typografiark.

Et kig på telefonversionen viser, at der stadig er meget arbejde at gøre.

forhåndsvisning af mobil realtime i dreamweaver

Dette bringer os lige til vores næste punkt.

Trin 12. Tilføj medieforespørgsler

For at få dit websted til at fungere på alle enheder skal du tilføje en såkaldt medieforespørgsel. Dette er betingede CSS-udsagn, der fortæller browsere at kun gælde for stil over eller under bestemte skærmstørrelser eller på bestemte enheder. På den måde kan du ændre layout på mindre skærme.

Indtil videre har du kun defineret globale stilarter. Det betyder de stilarter, der anvendes på hele websitet. Nu lærer du, hvordan du tilføjer betingede stilarter til mindre skærme.

Gå først til CSS Designer. Sørg for, at den fil, du vil tilføje kode til, er valgt under Kilder. Tryk på plustegnet under @medier.

Det giver dig dette indstillingspanel:

medieforespørgselsmenu i dreamweaver

Du kan definere betingelser for medieforespørgsler, fx de enheder, de anvender, retning, opløsning og meget mere. Du kan også tilføje flere betingelser med plustegnet.

Det, der er mere vigtigt for vores eksempel, er max-bredde indstilling. Med det er du i stand til at definere brugerdefineret CSS, der kun gælder for en bestemt maksimal skærmstørrelse.

Lad os sige, at du først vil løse ting på telefonen, så du skriver en max-bredde på 375 pixels. Når du gør det, kan du se CSS-koden i bunden.

opret medieforespørgsel i dreamweaver

Hvad sker der også, når du klikker på Okay er, at der vises en grøn linje øverst på skærmen. Dette repræsenterer visuelt medieforespørgslen. Klik på det, og skærmen springer automatisk til den størrelse.

oprette medieforespørgsler i dreamweaver

Trin 13. Tilføj betinget CSS

For at korrigere designet til mobil er det første, vi skal gøre, at fjerne koden, der får de to elementer på webstedet til at arrangere sig ved siden af ​​hinanden. Der er helt klart ikke nok plads til det.

Du kan gøre det på samme måde som du manipulerede CSS før, kun denne gang har du aktiveret en medieforespørgsel, mens du gør det.

Først og fremmest – naviger til elementet i din DOM-visning. Derefter oprette en ny CSS-vælger til det. Indstil derefter dens bredde til auto, flyde til ingen (for at forhindre det i at gå til venstre) og tilføje noget polstring på siderne, så indholdet ikke rammer på kanten af ​​skærmen.

korrigeret mobildesign

Ser meget bedre ud, ikke? På samme måde kan du ændre CSS for alle andre elementer på siden for at få dem alle til at se ud.

Det er dybest set det til medieforespørgsler. Du kan bruge den samme metode til at justere layout til tablets og andre størrelser.

Pro tip: Optimer ikke for bestemte enheder og deres størrelser, skab i stedet medieforespørgsler afhængigt af layoutet. Det betyder at lege med skærmstørrelsen og tilføje forespørgsler på disse punkter, når layoutet ikke ser godt ud mere.

En ting mere: Du kan også oprette medieforespørgsler lidt lettere ved at bruge de forudindstillede enhedsstørrelser i nederste hjørne og klikke på plussymbolet øverst, når du har fundet et punkt, hvor du vil tilføje et.

oprette medieforespørgsler via genveje i dreamweaver

Trin 14. Upload dit websted til serveren

Vi anbefaler at bruge Bluehost (tilknyttet link) for at være vært for dit Dreamweaver-sted.

Når du er færdig med designdelen, er du stort set klar til at uploade webstedet til din server. Som nævnt helt i begyndelsen gør Dreamweaver også dette meget let.

Gå først til Websted> Administrer websteder. Vælg dit nuværende websted fra menuen, og vælg Redigere nederst til venstre. I det følgende vindue skal du klikke på Servere.

ekstern serverkonfiguration i dreamweaver

Indtast alle vigtige data for at oprette forbindelse til din FTP-server. Navnet er op til dig, resten (FTP-adresse, brugernavn, adgangskode) kommer fra din hostingudbyder. Glem ikke at specificere, hvilket bibliotek du vil placere filerne i og webadressen på dit live-sted! Den sidste del er vigtig, så Dreamweaver kan oprette site-relative interne links.

Under Fremskreden du har nogle flere muligheder (om du vil uploade filer automatisk ved gemning). Du kan normalt beholde ting som de er. Hit Gemme to gange, og du er færdig.

Gå nu til Filer panel (enten på øverste højre side eller via Vindue> Filer) og klik på det længste venstre symbol for at oprette forbindelse til din server:

upload site til fjernserver i dreamweaver

Når forbindelsen er etableret, skal du vælge de filer, du vil uploade, og klikke på pilen opad for at gøre det. Når det er gjort, skal dit websted være tilgængeligt fra din web-adresse.

Godt klaret! Du har lige bygget og uploadet et simpelt sted med Dreamweaver!

Dreamweaver tutorial – afsluttende ord

Dreamweaver er et fantastisk program til at opbygge websteder. Det kombinerer en intuitiv brugergrænseflade med en fuldgyldig kodeditor. Gennem denne blanding gør det det nemt for både begyndere, mellemmænd og avancerede brugere at opbygge websteder af høj kvalitet.

I denne Dreamweaver-tutorial til begyndere har vi introduceret dig til Dreamweaver og dens muligheder. Vi har vist dig, hvordan du opretter programmet og kommer i gang med dit første websted. Du har lært, hvordan du opretter en grundlæggende HTML-struktur og style den med CSS. Vi undersøgte også, hvordan man gør en webside mobil responsiv og uploader den til din server.

På nuværende tidspunkt har du en solid forståelse af, hvordan Dreamweaver fungerer, og hvordan du kan bruge det til at oprette et websted. Nu er det op til dig at dykke dybere og finde ud af de næste trin.

Glem ikke: Dreamweaver er kun en måde at oprette et websted på. Der er mange flere, og du kan finde en masse information om det lige her. Held og lykke!

Har du brugt Dreamweaver før? Hvad er din mening? Noget at tilføje til ovenstående? Fortæl os det i kommentarfeltet nedenfor!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map