Dreamweaver veiledning


Dreamweaver Tutorial opprette et nettstedSom du vet handler dette nettstedet om hvordan du lager et nettsted. Du kan lære forskjellige måter ved å bruke WordPress, Joomla eller Drupal. Vi har til og med en guide for bruk av ren HTML som i gamle dager (tydeligvis med HTML5, den nyeste versjonen). I denne Dreamweaver-opplæringen for nybegynnere lærer du en annen.


For de som ikke vet, er Dreamweaver et program som lar deg designe, kode og administrere nettsteder. Det som er interessant med Dreamweaver er at det gir både muligheten til å skrive kode i tillegg til å lage en webside ved hjelp av et visuelt grensesnitt.

I denne Dreamweaver-opplæringen lærer du alt du trenger å vite for å begynne å lage nettsteder med Dreamweaver. Du vil bli kjent med programmet og hva det kan gjøre, høydepunkter og hvordan du konfigurerer det. Etter det vil du finne en trinn-for-trinn-guide for hvordan du oppretter en enkel webside med Dreamweaver, gjør den mobilvennlig og deretter laster den opp til serveren din.

Dette blir en lang tur. Imidlertid vil du bli overrasket over hvor raskt du kommer inn i dette veldig intuitive programmet.

Contents

Hva er Dreamweaver og hva kan det gjøre?

På overflaten er Dreamweaver et IDE (Integrated Development Environment). Det betyr at det er et programvare som kombinerer forskjellige verktøy for å gjøre webdesign og utvikling enklere.

Det som gjør det spesielle er at det er et sted mellom et CMS (hvor du kontrollerer alt om nettstedet ditt gjennom et visuelt grensesnitt) og en ren kodeditor. Slik fungerer de forskjellige delene.

Lag nettsteder gjennom et visuelt designgrensesnitt

Den visuelle designverktøykassen lar deg i utgangspunktet bygge nettsteder med musen. Det lar deg plassere nettstedselementer slik du oppretter en layout i Word. I utgangspunktet ser du nettstedet ditt som du vil se i en nettleser, men har også muligheten til å manipulere det.

Dette er veldig nyttig fordi det lar deg bygge skjelettet til et nettsted raskt og uten å måtte skrive en eneste kodelinje. I stedet oppretter Dreamweaver automatisk den nødvendige koden for deg. På den måten kan du teoretisk sett sette sammen en hel webside for hånd og laste den opp til serveren din.

På den annen side, hvis du er i stand til å kode, har Dreamweaver alle nødvendige verktøy for det også.

Fungerer som en fullverdig Code Editor

Den andre delen av Dreamweaver er en fullt utstyrt kodeditor. Den er utstyrt med alle standardfunksjonene, inkludert:

  • Syntaks utheving – Det betyr at Dreamweaver fremhever forskjellige elementer (som operatører, variabler osv.) I forskjellige farger for å gjøre koden lettere å lese og korrigere.
  • Kodeavslutning – Kodeavslutning fungerer på samme måte som autofullføring på telefonen. Begynn å skrive, og redaktøren vil komme med forslag til det du prøver å skrive. På den måten trenger du ikke skrive ut alt helt.
  • Koden kollapser – Kodekollaps er en annen funksjon for å gjøre koden enklere å lese. Den lar deg visuelt krympe deler av koden din når du ikke trenger dem. På den måten trenger du ikke bla gjennom hele filen, men kan bare håndtere delene du trenger å jobbe med.

Dreamweaver støtter de viktigste språkene for webdesign (HTML5, CSS, Javascript, PHP) og mye mer.

Den beste delen: Hvis du endrer noe i koden din, vil Dreamweaver automatisk vise den også på den visuelle siden. På den måten kan du se det uten å måtte laste opp filene dine til en server eller starte nettleseren.

Det er mange flere funksjoner, og du vil se mange av dem i aksjon i den kommende opplæringen til Dreamweaver for nybegynnere.

Dreamweaver konfigurering og prosjektering av nettsteder (trinn for trinn)

Som et første trinn, må du skaffe Dreamweaver fra det offisielle Adobes nettsted.

Du kan få en gratis prøveperiode her eller fra Creative Cloud-klienten.

dreamweaver tutorial for pris for nybegynnere

Trinn 1. Last ned og installer

Når du får programmet fra det offisielle nettstedet, bare last ned installasjonsfilen, kjør den og følg instruksjonene.

Hvis du allerede bruker Creative Cloud (som vi er), kan du bare klikke Prøve inne i klienten. Klikk deretter på når programmet er ferdig installert Start prøvetiden.

Trinn 2. Første oppstart

Når du først starter Dreamweaver, vil du se dette skjermbildet.

dreamweaver første oppstart

Hvis du aldri har brukt programmet før, velger du Nei, jeg er ny. Når du gjør det, fører Dreamweaver deg gjennom en installasjonsveiviser. Det første trinnet er å velge om arbeidsområdet skal brukes for utviklere eller et standard arbeidsområde.

dreamweaver onboarding guide velger arbeidsområde

Siden dette er en Dreamweaver nybegynnerveiledning, velger du standardversjonen. Etter det kan du velge et fargetema for arbeidsområdet ditt fra fire forskjellige alternativer.

dreamweaver onboarding guide velg fargevalg

Det siste trinnet er å velge om du vil starte med en eksempelfil, nytt eller eksisterende prosjekt eller se en tutorial.

dreamweaver onboarding guide siste trinn

Velg å starte med en ny eller eksisterende mappe, og du er ferdig med installasjonsprosessen. Godt jobbet!

La oss starte et prosjekt og lære hvordan du lager et nettsted med Dreamweaver.

Trinn 3. Start et nytt nettsted

Det første trinnet er å lage et nytt nettsted. For det, gå til Nettsted> Ny side. Den vil komme deg til denne skjermen:

opprette en ny side i dreamweaver

Det første trinnet er å gi nettstedet ditt et navn. Deretter må du velge hvor du vil lagre den. Dette er opp til deg, men det er vanligvis fornuftig å holde alle prosjekter på ett sted for enkelhets skyld.

Du har også muligheten til å knytte det nye prosjektet ditt til et Git-lager. Dette kan være en god idé siden det gir deg versjonskontroll men du kan hoppe over det for nå.

Vi skal takle alt under servere på venstre side senere. Samme med CSS forprosessorer, som bare er viktig når du bruker den typen ting.

Det som er viktig for oss er Lokal info under Avanserte innstillinger.

aktiver standardmappe for bilder i dreamweaver

Husk å klikke på mappeikonet til høyre der det står Standard Bilder-mappen. Gå deretter til den nyopprettede nettstedskatalogen, åpne den, opprett en ny mappe som heter Bilder og velg det som standardmappe. På den måten vil Dreamweaver lagre bilder tilknyttet nettstedet ditt automatisk der.

Det er det for nå, klikk Lagre for å gå tilbake til arbeidsområdet ditt.

Trinn 4. Lag hjemmesiden din

Nå som du har opprettet et prosjektnettsted, er det på tide med den første filen. Vi starter med hjemmesiden.

Hvis Dreamweaver ikke tilbyr deg selve alternativet, gå til Fil> Ny. Du kan enten opprette en helt ny fil eller bruke en eksisterende mal. Programmet kommer med noen få av disse (se Startmaler). Akkurat nå vil vi opprette en ny i stedet.

opprette en ny fil i dreamweaver

HTML er satt som standard, og du kan la det være som det er. For dokumenttittel, skriv inn index.html og velger å Skape. Dette får du på følgende skjermbilde.

ferskt prosjekt i dreamweaver

Dette er en hatt vi nevnte i begynnelsen: et levende syn på hvordan nettstedet ditt ser ut (tomt for øyeblikket) og koden bak. Du vil også legge merke til at Dreamweaver automatisk har opprettet en grunnleggende HTML-markering som du kan bygge på. La oss gjøre det nå, skal vi?

Trinn 5. Lag en overskrift

For å sette inn et element på siden, må du først velge sin plassering. Enten klikker du på den tomme siden (Dreamweaver vil automatisk velge element hvis du gjør det) eller plasser markøren i det samme elementet i kodedelen på skjermen.

Etter det må du gå til Sett inn kategorien i øverste høyre hjørne. Dette gir deg en liste over vanlige HTML- og sideelementer som du kan legge til på siden din. Bla nedover til du kan se Overskrift som et alternativ.

sett inn headerelement i dreamweaver

Et enkelt klikk setter det inn på siden. Du ser også det vises i HTML-dokumentet.

overskrift synlig i visuelt grensesnitt og kodeditor

Enkelt, ikke sant?

Nå vil du endre teksten i overskriften og også gjøre den om til en overskrift. For begge – merk først teksten i kodeditoren nederst.

merk topptekst i dreamweaver

Etter det, gå tilbake til Sett inn, Klikk på pilen ved siden av Overskrift og velg H1. Dette pakker sidetittelen inn i en H1 HTML-kode. For mer informasjon om overskriftskoder, les denne artikkelen.

Etter det kan du også skrive inn en tittel for siden din. På det virkelige nettstedet ditt ville du velge noe beskrivende med nøkkelord og ikke bare Velkommen til Min testnettsted som i eksemplet.

endret overskrift i dreamweaver

OK, du har nettopp opprettet en sideoverskrift! For øyeblikket ser det fremdeles litt rått ut, så la oss endre det via CSS neste gang.

Trinn 6. Lag en CSS-fil

I tilfelle du ikke er kjent med det, er CSS den delen som gir all styling på en webside. Den lar deg definere farger, dimensjoner på elementer, skrifttyper og størrelser og mye mer. Vi ønsker å bruke markeringen til å gran opp sidetittelen og også lære å endre CSS i Dreamweaver.

Teoretisk kan du legge til CSS rett innenfor HTML-dokumentet. Det er mye mindre elegant alternativ enn det vi skal gjøre, som lager en dedikert fil for all CSS-styling på hele nettstedet.

Det første trinnet er å gi den nye overskriften din en CSS-klasse eller ID. Under den prosessen vil Dreamweaver også be deg om å lage en stilarkfil. Gå til DOM-menyen nederst til høyre på skjermen som viser hele nettstedstrukturen. Forsikre deg om at toppteksten er valgt.

I live-visningen vil du nå se den merket i blått med en liten etikett og et plussskilt nederst.

legg til css-fil i dreamweaver

Klikk på plustegnet og skriv inn #Overskrift i feltet som åpnes. Hashtaggen betyr at du tildeler en id i motsetning til en klasse. Trykk enter. I åpningsmenyen, i stedet for Definer på side å velge Lag en ny CSS-fil. Velg hurtigmenyen Bla og naviger til mappen din. Skriv deretter inn style.css (som er standardnavnet for stilark) i Filnavn felt og treff Lagre.

lag stilark i dreamweaver

Når du nå velger ok, en ny fil vises øverst i livevisningen. Du kan se og redigere det derfra. Det vil også være knyttet til delen av HTML-delen av siden din.

stilark lagt til nettstedet

Fantastisk possum! Nå er du klar til å endre sidens styling.

Trinn 7. Lag en CSS-velger for sidetittelen

Det første du vil gjøre er å endre skrifttypen på overskriften og også sentrere den. For det må du først lage en ny CSS-velger. En velger er navnet på et element på siden vår som du kan tildele egenskaper til, for eksempel farge, størrelse og mer.

Merk H1-overskriften i DOM-visningen nederst til høyre (som du gjorde med overskriften før). Deretter velger du over det CSS Designer.

forberede styling for kurselement

For å lage en CSS-velger, klikker du på linjen der det står Svelgere og klikk deretter på plussymbolet. Dette bør automatisk foreslå en velger du har navngitt #header h1.

opprett css-velger i dreamweaver

Trykk enter for å lage den. Ferdig!

Rask merknad: for alle de som er nye på CSS, betyr denne velgeren at du er målrettet mot det navngitte elementet h1 innsiden elementet som heter #Overskrift. På den måten brukes det du bare legger inn som CSS bare på den skrevne teksten og ikke på toppelementet generelt.

Trinn 8. Endre overskriftstypen

Nå som du har en velger, kan du tilordne egenskaper til den. Hvis du kjenner deg til CSS, kan du ganske enkelt skrive inn merking i style.css og programmet vil automatisk ta seg av det.

For de mindre erfarne brukerne gjør Dreamweaver det også veldig enkelt. Bo i CSS Designer menyen og fjern merket i boksen der det står Vis sett. Når du gjør det, vil det låse opp mange flere alternativer.

aktiver css-alternativer i dreamweaver

Med de nye knappene kan du velge mange CSS-egenskaper fra områdene layout, tekst, kant og bakgrunn. De Mer -knappen gir deg muligheter til å legge inn dine egne regler.

For å endre skrifttypen, klikk på Tekst alternativet øverst (alternativt, rull ned). Hold markøren over de kommende alternativene font-family og klikk på standard font.

endre fontfamilie i dreamweaver

Dette vil gi deg en rekke alternativer for vanlige skrifter inkludert tilbakefallene deres (i tilfelle brukerens nettleser ikke kan vise den primære skrifttypen). Det kan være lurt å klikke på Administrer skrifter nederst for å komme til denne menyen:

adobe edge fonter

Her kan du velge gratis skrifter fra Adobes Edge Web Fonts-tjeneste. Enten søker du etter en font med navn, eller bruk de mange filteralternativene til venstre for å begrense valgene dine til du finner noe.

Et klikk på et av skrifttypene markerer det for inkludering i Dreamweaver. Når du har gjort det, kan du enten bruke dem direkte eller gå til Tilpassede skrifttabler for å definere dine egne tilbakefallsfonter.

lage egendefinerte fontstabler i dreamweaver

For nå er det bare å treffe Ferdig og klikk deretter på standard skrifter en gang til. Denne gangen velger du den valgte tilpassede skrifttypen og voila – endringen gjøres inkludert all nødvendig koding.

endret font i dreamweaver

Hvis du klikker på din style.css fil øverst, vil du se at all markup er lagt til også.

oppdatert stilark i dreamweaver

Trinn 9. Sentrer overskriften og endre størrelsen

Teksten kan fremdeles se bedre ut. Neste oppgave er å sentrere den og øke skriftstørrelsen. For det kan du også bruke en annen funksjon som heter Rask redigering.

For å bruke den, gå til kodevisningen og høyreklikk på delen du vil redigere. I dette tilfellet er det på

brakett.

åpne hurtigredigeringsmeny i dreamweaver

Her velger du Rask redigering på toppen. Dette vil åpne CSS tilknyttet dette elementet under det. Nå kan du legge inn flere egenskaper uten å måtte søke i hele stilarkfilen (som kan være veldig lang). Legg til følgende kode for å sentrere teksten og gjøre den større.

skriftstørrelse: 42px;
tekstjustering: sentrum;

Når du skriver, vil Dreamweaver også lage forslag til hva du prøver å legge inn, noe som gjør det enda enklere. Det er koden fullføringsfunksjonen som er nevnt tidligere.

Når du er ferdig, vil det se slik ut:

endre css via rask redigering i dreamweaver

Legg merke til at teksten allerede har endret seg i livevisningen. Nå, trykk Esc for å legge igjen raskt, rediger og gå over til stilarket. Du vil finne at den nye CSS-en er lagt til på riktig sted.

Ganske kult, ikke sant?

Forresten, hvis du noen gang er usikker på hva en CSS-egenskap betyr, bare høyreklikk på den og velg Hurtige dokumenter (eller trykk på Ctrl + K). Dreamweaver vil deretter gi deg en forklaring.

dreamweaver raske dokumenter

Trinn 10. Legg til mer innhold

Med det du har lært så langt, kan du nå bygge et rudimentært sted. Av hensyn til denne Dreamweaver-opplæringen har vi gjort følgende:

  • Definerte standardfonter for overskrifter og avsnitt
  • Lagt til en navigasjonslinje og opprettet en lenke til hjemmesiden i den
  • Lagt til en div-boks for innhold med to bokser til
  • Flyttet en av dem til venstre og en høyre med flyte eiendom
  • Begrenset bredden til prosenter slik at de kan justeres horisontalt
  • Lagt en prøve overskrift og dummy tekst til venstre inkludert en ikke-ordnet liste
  • Opprettet et skjema (bruk rullegardinmenyen under Sett inn), to tekstfelt og en innsendingsknapp
  • Lagt avstand rundt elementene via CSS-marginer og polstring
  • Forutsatt bakgrunnsfarger og grenser
  • Opprettet en bunntekst og en copyright-melding

Her er resultatet:

nettsted med avansert design

Kode for eksempel:

Siden dette er litt avansert og ikke alle vet hvordan de gjør det, kan du finne HTML og CSS nedenfor slik at du kan rekonstruere det selv. Først HTML:





index.html

 



Hjem

Eksempel overskrift for hovedinnhold

Lorem ipsum dolor sit 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
  • Ut 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 efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Eksempel på oppfordring til handling!

Lorem ipsum dolor sit 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";

kropp {
bakgrunnsfarge: # F5F5F5;
margin-top: 0px;
margin-høyre: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

p,
en,
ul,
ol,
li,
merkelapp,
{inndata
font-familie: muli, sans-serif;
font-stil: normal;
fontvekt: 300;
skriftstørrelse: 17px;
}

h1, h2, h3, h4, h5 {
font-family: karla, sans-serif;
font-stil: normal;
fontvekt: 400;
tekst-transform: store bokstaver;
}

#Overskrift {
polstring-topp: 25px;
polstring-bunn: 25px;
bakgrunnsfarge: #FFFFFF;
border-bottom: 4px solid # EB232F;
}

#header h1 {
font-family: aguafina-script;
font-stil: normal;
fontvekt: 400;
skriftstørrelse: 42px;
tekstjustering: sentrum;
margin-top: 0px;
margin-bottom: 0px;
tekst-transform: ingen;
}

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

#navigation a {
farge: # EB232F;
}

.hoved {
skjerm: blokkering;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
margin-bottom: 15px;
tydelig: begge deler;
overflow: auto;
maks bredde: 1140 px;
}

.viktigste # hoved-høyre {
flyte: høyre;
bredde: 37,5%;
skjerm: blokkering;
}

.main # main-left {
flyte: venstre;
bredde: 57%;
skjerm: blokkering;
polstring-høyre: 20px;
}

.main # main-høyre .cta {
tekstjustering: sentrum;
}

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

# hoved-høyre .form div {
margin-bottom: 10px;
}

# hoved-høyre .form .label {

}

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

}

.hoved # hoved-høyre # knapp {
tekstjustering: sentrum;
polstring-topp: 7px;
polstring-bunn: 7px;
margin-left: auto;
margin-right: auto;
stilling: relativ;
skjerm: blokkering;
polstring-høyre: 36px;
polstring-venstre: 36px;
grense: ingen;
bakgrunnsfarge: # EB232F;
farge: #FFFFFF;
markør: peker;
}

.bunntekst {
skjerm: blokkering;
polstring-topp: 25px;
polstring-bunn: 25px;
tekstjustering: sentrum;
}

Vi ønsker å bruke dette som et eksempel for å vise deg de neste trinnene. Selv om det virker komplisert, setter vi dette sammen på samme måte som vi viste deg før.

Trinn 11. Forhåndsvisning i nettleser og på mobil enhet

Hvordan gjorde vi alt dette? For det første er vi litt mer erfarne med å bygge nettsteder enn du sannsynligvis er. Derfor har vi allerede trinnene i tankene mine om hvordan du oppretter en riktig webside.

For det andre bruker vi en veldig nyttig funksjon som hjelper meg med å fremskynde prosessen: forhåndsvisning av nettleser. Dreamweaver lar deg se websidene dine i sanntid i en nettleser og til og med på mobile enheter.

For å komme i gang, klikk på forhåndsvisningsknappen i sanntid nederst til høyre.

aktiver forhåndsvisningsmeny i dreamweaver

Dette vil åpne forhåndsvisningsalternativene.

forhåndsvisningsalternativer i dreamweaver

Et klikk på et av nettlesernavnene åpner nettstedets prosjekt i det. Du kan også skanne QR-koden med telefonen eller nettbrettet ditt (for eksempel med Firefox Quantum) eller skriv inn den viste adressen i nettleseren din for å starte live forhåndsvisning på enheten.

Bare vær oppmerksom på at du må legge inn Adobe ID og passord for det. Det bør du ha fra å registrere deg på Dreamweaver.

Den beste delen: Eventuelle endringer du gjør i Dreamweaver vises automatisk i nettleseren samtidig som du gjør dem.

Hvordan hjalp dette meg å sette sammen nettstedet raskere? Avhengig av størrelsen på skjermen, kan skjermen i nettleseren være nærmere originalen enn hva du ser i Dreamweaver..

For det andre, ved å sjekke nettstedet i nettleseren, kan jeg bruke utviklerverktøyene til å teste endringer.

utviklerverktøy i nettleser

De ligner veldig på det du ser i Dreamweaver. De er mer kjent for oss, slik at vi kan jobbe raskere med dem og bare kopiere og lime inn koden i stilarket vårt.

En titt på telefonversjonen viser at det fortsatt er mye arbeid å gjøre.

forhåndsvisning av mobil i realtid i dreamweaver

Dette bringer oss rett til neste punkt.

Trinn 12. Legg til mediesøk

For å få nettstedet ditt til å fungere på alle enheter, må du legge til såkalte mediesøk. Dette er betingede CSS-uttalelser som forteller nettlesere å bruke stil bare over eller under visse skjermstørrelser eller på bestemte enheter. På den måten kan du endre oppsettet på mindre skjermer.

Så langt har du bare definert globale stiler. Det betyr stilene som brukes på hele nettstedet. Nå lærer du hvordan du legger til betingede stiler for mindre skjermer.

Gå først til CSS Designer. Forsikre deg om at filen du vil legge til kode til er valgt under kilder. Trykk på plussmerket under @media.

Det gir deg dette alternativspanelet:

media spørringsmeny i dreamweaver

Du kan definere betingelser for mediesøk, for eksempel enhetene de bruker på, retning, oppløsning og mye mer. Du kan også legge til flere forhold med plusstegnet.

Det som er viktigere for vårt eksempel er max bredde innstilling. Med det er du i stand til å definere tilpasset CSS som bare vil gjelde for en viss maksimal skjermstørrelse.

La oss si at du vil fikse ting på telefonen først, så skriver du inn en max bredde på 375 piksler. Når du gjør det, kan du se CSS-koden nederst.

lag mediesøk i dreamweaver

Hva kommer også til å skje når du klikker ok er at en grønn linje vises øverst på skjermen. Dette representerer visuelt mediesøket. Klikk på den, og skjermen hopper automatisk til den størrelsen.

lag mediesøk i dreamweaver

Trinn 13. Legg til betinget CSS

For å korrigere designen for mobil er det første vi trenger å gjøre å eliminere koden som gjør at de to elementene på nettstedet ordner seg ved siden av hverandre. Det er tydeligvis ikke nok plass til det.

Du kan gjøre dette på samme måte som du manipulerte CSS før, bare denne gangen har du et mediesøk som er aktivert mens du gjør det.

Først av alt – naviger til elementet i DOM-visningen. Derfra lager du en ny CSS-velger for den. Deretter angir du bredde til auto, flyte til ingen (for å hindre den i å gå til venstre) og legge til litt polstring på sidene, slik at innholdet ikke går på kanten av skjermen.

korrigert mobildesign

Ser mye bedre ut, ikke sant? På samme måte kan du endre CSS for alle andre elementer på siden for å få dem til å se bra ut.

Det er i utgangspunktet det for mediesøk. Du kan bruke samme metode for å justere oppsettet til nettbrett og andre størrelser.

Pro tips: Ikke optimaliser for bestemte enheter og størrelser. Opprett mediesøkninger avhengig av oppsettet. Det betyr å leke med skjermstørrelsen og legge til spørsmål på de punktene når oppsettet ikke ser bra ut lenger.

En ting til: Du kan også lage mediaspørsmål litt lettere ved å bruke de forhåndsinnstilte enhetsstørrelsene i nederste hjørne og klikke på plussymbolet på toppen når du har funnet et punkt der du vil legge til et.

lage mediesøk via snarveier i dreamweaver

Trinn 14. Last opp nettstedet til serveren

Vi anbefaler å bruke Bluehost (tilknyttet lenke) for å være vert for ditt Dreamweaver-nettsted.

Når du er ferdig med designdelen, er du ganske klar til å laste opp siden til serveren din. Som nevnt helt i begynnelsen, gjør Dreamweaver også dette veldig enkelt.

Gå først til Nettsted> Administrer nettsteder. Velg din nåværende webside fra menyen og velg Redigere nederst til venstre. I følgende vindu, klikk på servere.

ekstern serverkonfigurasjon i dreamweaver

Legg inn alle viktige data for å koble til FTP-serveren. Navnet er opp til deg, resten (FTP-adresse, brukernavn, passord) kommer fra hostingleverandøren. Ikke glem å spesifisere hvilken katalog du vil plassere filene i og webadressen til ditt live nettsted! Den siste delen er viktig, slik at Dreamweaver kan opprette nettstedrelative interne lenker.

Under Avansert du har noen flere alternativer (om du vil laste opp filer automatisk ved lagring). Du kan vanligvis beholde ting som de er. Truffet Lagre to ganger, og du er ferdig.

Gå nå til filer panel (enten på øvre høyre side eller via Vindu> Filer) og klikk på det lengste venstre symbolet for å koble til serveren din:

laste opp nettsted til ekstern server i dreamweaver

Når tilkoblingen er opprettet, velger du filene du vil laste opp og klikker på pil oppover for å gjøre det. Når det er gjort, skal nettstedet ditt være tilgjengelig fra webadressen din.

Bra gjort! Du bygde og lastet opp et enkelt nettsted med Dreamweaver!

Dreamweaver Tutorial – Final Words

Dreamweaver er et fantastisk program for å bygge nettsteder. Den kombinerer et intuitivt brukergrensesnitt med en fullverdig kodeditor. Gjennom denne blandingen gjør det det enkelt for både nybegynnere, mellomprodukter og avanserte brukere å bygge nettsteder av høy kvalitet.

I denne Dreamweaver-opplæringen for nybegynnere, har vi introdusert deg for Dreamweaver og dens funksjoner. Vi har vist deg hvordan du setter opp programmet og kommer i gang med ditt første nettsted. Du har lært hvordan du lager en grunnleggende HTML-struktur og style den med CSS. Vi har også undersøkt hvordan du kan gjøre en webside mobil responsiv og laste den opp til serveren din.

Nå har du en solid forståelse av hvordan Dreamweaver fungerer og hvordan du kan bruke det til å lage et nettsted. Nå er det opp til deg å dykke dypere og finne ut av de neste trinnene.

Ikke glem: Dreamweaver er bare en måte å lage et nettsted på. Det er mange flere, og du kan finne mye informasjon om det her. Lykke til!

Har du brukt Dreamweaver før? Hva er din mening? Noe å legge til ovenstående? Gi oss beskjed 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