Dreamweaver-opetusohjelma


Dreamweaver-opas verkkosivun luomiseenKuten tiedät, tällä sivustolla on kyse verkkosivun luomisesta. Voit oppia erilaisia ​​tapoja joko WordPressin, Joomlan tai Drupalin avulla. Meillä on jopa opas puhtaan HTML: n käytöstä kuten vanhaan (ilmeisesti HTML5: n, viimeisimmän version) kanssa. Tässä Dreamweaver-opetusohjelmassa aloittelijoille opit toisen.


Niille, jotka eivät tiedä, Dreamweaver on sovellus, jonka avulla voit suunnitella, koodata ja hallita verkkosivustoja. Mielenkiintoista Dreamweaverissa on se, että se tarjoaa sekä mahdollisuuden kirjoittaa koodia että luoda verkkosivuja visuaalisen käyttöliittymän avulla.

Tässä Dreamweaver-opetusohjelmassa opit kaiken, mitä sinun on tiedettävä aloittaaksesi verkkosivustojen luomisen Dreamweaverilla. Opit tuntemaan ohjelman ja sen ominaisuudet, ominaisuudet ja sen asennuksen. Sen jälkeen löydät vaiheittaiset ohjeet kuinka luoda yksinkertainen verkkosivusto Dreamweaverilla, tehdä siitä mobiiliystävällinen ja sitten ladata se palvelimellesi..

Tämä on pitkä matka. Saatat kuitenkin hämmästyttää kuinka nopeasti pääset tähän erittäin intuitiiviseen ohjelmaan.

Contents

Mikä on Dreamweaver ja mitä se voi tehdä?

Pinnalla Dreamweaver on IDE (integroitu kehitysympäristö). Tämä tarkoittaa, että kyseessä on ohjelmisto, joka yhdistää erilaisia ​​työkaluja verkkosivujen suunnittelun ja kehittämisen helpottamiseksi.

Erityisenä on se, että se on jossain CMS: n (jossa hallitset kaikkea verkkosivustosi visuaalisen käyttöliittymän kautta) ja puhtaan koodieditorin välillä. Näin eri osat toimivat.

Luo verkkosivuja visuaalisen suunnittelun käyttöliittymän kautta

Visuaalisen suunnittelun työkalupakin avulla voit periaatteessa rakentaa verkkosivustoja hiirellä. Sen avulla voit sijoittaa verkkosivustoelementtejä tapaan, jolla luot asettelun Wordiin. Periaatteessa näet verkkosivustosi kuten selaimessa, mutta sinulla on myös mahdollisuus manipuloida sitä.

Tämä on erittäin hyödyllinen, koska sen avulla voit rakentaa verkkosivuston luuranko nopeasti ja ilman tarvetta kirjoittaa yhtä koodiriviä. Sen sijaan Dreamweaver luo automaattisesti tarvittavan koodin sinulle. Tällä tavalla teoriassa voit koota kokonaisen verkkosivuston käsin ja ladata sen palvelimellesi.

Toisaalta, jos osaat koodata, Dreamweaverilla on myös kaikki siihen tarvittavat työkalut.

Toimii täysimittaisena koodieditorina

Dreamweaverin toinen osa on täysin varusteltu koodieditori. Se on varustettu kaikilla standarditoiminnoilla, mukaan lukien:

  • Syntaksin korostaminen – Tämä tarkoittaa, että Dreamweaver korostaa erilaisia ​​elementtejä (kuten operaattoreita, muuttujia jne.) Eri väreillä koodin lukemisen ja korjaamisen helpottamiseksi.
  • Koodin loppuun saattaminen – Koodin viimeistely toimii samalla tavalla kuin puhelimen automaattinen täydennys. Aloita kirjoittaminen ja toimittaja tekee ehdotuksia siitä, mitä yrität kirjoittaa. Tällä tavalla sinun ei tarvitse kirjoittaa kaikkea kokonaan.
  • Koodi romahtaa – Koodin romahtaminen on toinen ominaisuus, jonka avulla koodi on helpompi lukea. Sen avulla voit kutistaa koodin osia visuaalisesti, kun et tarvitse niitä. Tällä tavalla sinun ei tarvitse selata koko tiedostoa, vaan voit käsitellä vain niitä osia, joiden kanssa sinun on työskenneltävä.

Dreamweaver tukee Web-suunnittelun tärkeimpiä kieliä (HTML5, CSS, JavaScript, PHP) ja paljon muuta.

Paras osa: Jos muutat jotain koodissasi, Dreamweaver näyttää sen automaattisesti myös visuaalisella puolella. Tällä tavoin voit nähdä sen joutumatta lähettämään tiedostoja palvelimelle tai käynnistämään selainta.

Ominaisuuksia on paljon enemmän ja näet monia niistä toiminnassa tulevassa Dreamweaver-opetusohjelmassa aloittelijoille.

Dreamweaver-asennus- ja verkkosivustojen suunnitteluprosessi (vaihe vaiheelta)

Ensimmäisenä vaiheena sinun täytyy hankkia Dreamweaver viralliselta Adoben verkkosivustolta.

Voit hankkia ilmaisen kokeilun täällä tai Creative Cloud -asiakkaaltasi.

dreamweaver-opetusohjelma aloittelijoille hinnoittelusta

Vaihe 1. Lataa ja asenna

Kun saat ohjelman viralliselta verkkosivustolta, lataa vain asennustiedosto, suorita se ja seuraa ohjeita.

Jos käytät jo Creative Cloudia (sellaisena kuin olemme), voit napsauttaa vain Yrittää asiakkaan sisällä. Napsauta sitten, kun ohjelman asennus on valmis Aloita kokeilujakso.

Vaihe 2. Ensimmäinen käynnistys

Kun käynnistät Dreamweaverin ensimmäisen kerran, näet tämän näytön.

dreamweaver ensimmäinen käynnistys

Jos et ole koskaan käyttänyt ohjelmaa aiemmin, valitse Ei, olen uusi. Kun teet niin, Dreamweaver ohjaa sinut ohjatun asennustoiminnon läpi. Ensimmäinen askel on valita, käytetäänkö kehittäjien työtilaa vai tavallista työtilaa.

dreamweaver onboarding guide valitse työtila

Koska tämä on Dreamweaver-aloittelijan opetusohjelma, valitse vakioversio. Tämän jälkeen voit valita väriteeman työtilasi neljästä eri vaihtoehdosta.

dreamweaver-laivalla opas valitse värimaailma

Viimeinen vaihe on valita, aloitetaanko näytetiedostolla, uudella tai olemassa olevalla projektilla vai katsotaanko opetusohjelmaa.

dreamweaver onboarding-opas viimeinen vaihe

Valitse aloittaa uudella tai olemassa olevalla kansiolla, ja asennus on valmis. Hyvää työtä!

Aloitetaan nyt projekti ja opitaan luomaan verkkosivusto Dreamweaverin avulla.

Vaihe 3. Aloita uusi sivusto

Ensimmäinen askel on uuden sivuston luominen. Siitä mennä Sivusto> Uusi sivusto. Se vie sinut tähän ruutuun:

luo uusi sivusto dreamweaverissa

Ensimmäinen askel on antaa sivustollesi nimi. Sitten sinun on valittava, mihin se tallennetaan. Tämä on sinun, mutta yleensä on järkevää pitää kaikki projektit yhdessä paikassa yksinkertaisuuden vuoksi.

Sinulla on myös mahdollisuus yhdistää uusi projekti Git-arkistoon. Tämä voi olla hyvä idea, koska se antaa sinulle versionhallinta mutta voit ohittaa sen nyt.

Käsittelemme kaikkea alla palvelimet vasemmalla puolella myöhemmin. Sama kuin CSS-esikäsittelyt, mikä on tärkeää vain kun käytät sellainen asia.

Meille on tärkeää Paikalliset tiedot alla Lisäasetukset.

Ota oletuskuvakansio käyttöön Dreamweaverissa

Napsauta kansion kuvaketta oikealla puolella, missä se sanoo Oletuskuvat-kansio. Siirry sitten äskettäin luomasi sivustohakemistoon, avaa se, luo uusi kansio nimeltä kuvien ja valitse se oletuskansioksi. Tällä tavalla Dreamweaver tallentaa sivustoosi liittyvät kuvat automaattisesti sinne.

Se on nyt, napsauta Tallentaa palataksesi työtilaan.

Vaihe 4. Luo kotisivutiedostosi

Nyt kun olet luonut projektisivun, on aika ensimmäiselle tiedostolle. Aloitamme kotisivulta.

Jos Dreamweaver ei tarjoa sinulle itse vaihtoehtoa, mene Tiedosto> Uusi. Voit joko luoda täysin uuden tiedoston tai käyttää olemassa olevaa mallia. Ohjelmaan kuuluu muutama niistä (ks Aloitusmallit). Tällä hetkellä luomme sen sijaan uuden.

luo uusi tiedosto dreamweaverissa

HTML on asetettu oletuksena ja voit jättää sen sellaisenaan. Syötä asiakirjan otsikko index.html ja valitse Luoda. Tämä vie sinut seuraavalle näytölle.

tuore projekti dreamweaverissa

Tämä on hattu, jonka mainitsimme alussa: suora näkymä sivustosi ulkonäöstä (tyhjä, tällä hetkellä) ja sen takana oleva koodi. Huomaat myös, että Dreamweaver on luonut automaattisesti HTML-perusmerkinnät, joihin voit rakentaa. Tehdään se nyt?

Vaihe 5. Luo otsikko

Jos haluat lisätä elementin sivulle, sinun on ensin valittava sen sijainti. Joko napsauta tyhjää sivua (Dreamweaver valitsee automaattisesti elementti, jos teet) tai aseta kohdistin samaan elementtiin näytön koodiosassa.

Sen jälkeen sinun täytyy mennä Insert välilehti oikeassa yläkulmassa. Tämä antaa sinulle luettelon tavallisista HTML- ja sivuelementeistä, joita voit lisätä sivullesi. Vieritä alaspäin, kunnes näet ylätunniste valinnaisena.

Lisää otsikkoelementti Dreamweaveriin

Yksinkertainen napsautus lisää sen sivulle. Näet sen myös näkyvän HTML-dokumentissa.

otsikko näkyy visuaalisessa käyttöliittymässä ja koodieditorissa

Yksinkertainen, oikein?

Nyt muutat otsikon sisällä olevan tekstin ja muutat siitä myös otsikon. Molemmille – merkitse ensin teksti koodieditoriin alareunaan.

merkitse otsikkoteksti Dreamweaverissa

Sen jälkeen palaa takaisin Insert, napsauta nuolta vieressä otsikko ja valitse H1. Tämä kääri sivun otsikon H1-HTML-tunnisteeseen. Lisätietoja otsikkotunnisteista, lue Tämä artikkeli.

Sen jälkeen voit kirjoittaa myös otsikon sivullesi. Oikealla verkkosivustollasi valitset jotain kuvaavaa avainsanoilla eikä vain Tervetuloa My Test -sivustolle kuten esimerkissä.

Vaihdettu otsikko dreamweaverissa

Okei, olet juuri luonut sivun otsikon! Tällä hetkellä se näyttää silti hieman raa’alta, joten muutataan se seuraavan CSS: n kautta.

Vaihe 6. Luo CSS-tiedosto

Jos et tunne sitä, CSS on se osa, joka tarjoaa kaiken verkkosivun muotoilun. Sen avulla voit määrittää värit, elementtien mitat, fonttityypit ja koot sekä helvetin paljon muuta. Haluamme käyttää merkintää sivun otsikon kiristämiseen ja oppia myös muuttamaan CSS: ää Dreamweaverissa.

Teoreettisesti voit lisätä CSS: n heti HTML-dokumenttiin. On paljon vähemmän tyylikäs vaihtoehto kuin se, mitä teemme, sillä se luo erillisen tiedoston koko sivuston CSS-muotoilulle..

Ensimmäinen askel on antaa uudelle otsikollesi CSS-luokka tai tunnus. Tämän prosessin aikana Dreamweaver kehottaa sinua myös luomaan tyylitiedoston. Siirry näytön oikeassa alakulmassa olevaan DOM-valikkoon, joka näyttää koko sivustosi rakenteen. Varmista, että otsikko on valittu.

Suorassa näkymässä se näkyy nyt sinisellä merkittynä pienellä etiketillä ja plusmerkillä alareunassa.

Lisää css-tiedosto dreamweaverissa

Napsauta plusmerkkiä ja kirjoita #header avautuvassa kentässä. Hashtag tarkoittaa, että määrität tunnus vastakohtana luokalle. Paina Enter. Avausvalikossa sen sijaan Määritä sivulla valita Luo uusi CSS-tiedosto. Valitse ponnahdusvalikossa Selaa ja selaa sivustosi kansioon. Kirjoita sitten style.css (joka on tyylisivujen vakionimi) Tiedoston nimi kenttä ja osuma Tallentaa.

luoda tyylitaulukko dreamweaverissa

Kun valitset nyt kunnossa, uusi tiedosto ilmestyy live-näkymäsi yläosaan. Voit katsella ja muokata sitä sieltä. Se yhdistetään myös -osiossa sivusi HTML-osassa.

tyylitaulukko lisätty verkkosivustoon

Mahtava possum! Nyt olet valmis muuttamaan sivusi tyyliä.

Vaihe 7. Luo CSS-valitsin sivun otsikolle

Ensimmäinen asia, jonka haluat tehdä, on muuttaa otsikkosi kirjasin ja keskittää se. Tätä varten sinun on ensin luotava uusi CSS-valitsin. Valitsin on sivumme elementin nimi, jolle voit määrittää ominaisuuksia, esimerkiksi väri, koko ja muut.

Merkitse H1-otsikko DOM-näkymässä oikeassa alakulmassa (kuten aiemmin otsikon kanssa). Valitse sitten sen yläpuolella CSS-suunnittelija.

valmistele muotoilu otsikkoelementille

Luo CSS-valitsin napsauttamalla riviä, jossa lukee Säänestäjiä ja napsauta sitten plus-symbolia. Tämän pitäisi ehdottaa valitsinta automaattisesti nimeämällesi #header h1.

luo css-valitsin Dreamweaverissa

Luo se napsauttamalla Enter. Tehty!

Pikahuomautus: Kaikille uusille CSS: lle tämä valitsin tarkoittaa, että kohdistat nimeltä elementtiin H1 sisällä elementti nimeltään #header. Tällä tavoin mitä tahansa CSS: ään antamaa tietoa sovelletaan vain kirjoitettuun tekstiin, ei otsikkoelementtiin kokonaisuudessaan.

Vaihe 8. Vaihda Otsikko-fontti

Nyt kun sinulla on valitsin, voit määrittää siihen ominaisuuksia. Jos tiedät tietäsi CSS: n ympärillä, voit kirjoittaa merkinnät style.css ja ohjelma huolehtii siitä automaattisesti.

Myös vähemmän kokeneille käyttäjille Dreamweaver tekee siitä todella helpon. Pysy CSS-suunnittelija -valikko ja poista valinta ruudusta, jossa se sanoo Näytä sarja. Kun teet, se avaa paljon muita vaihtoehtoja.

Ota css-asetukset käyttöön Dreamweaverissa

Uusilla painikkeilla voit valita monia CSS-ominaisuuksia asettelun, tekstin, reunusten ja taustan alueista. Lisää -painike antaa sinulle vaihtoehtoja syöttää omat säännöt.

Vaihda fonttityyppi napsauttamalla Teksti vaihtoehto yläreunassa (vaihtoehtoisesti vieritä alas). Vie hiiri tulevissa vaihtoehdoissa font-family ja napsauta oletusfontti.

Vaihda fontw perhe Dreamweaverissa

Tämä antaa sinulle useita vaihtoehtoja yleisille kirjasimille, mukaan lukien niiden varaosat (jos käyttäjän selain ei pysty näyttämään ensisijaista kirjasinta). Voit halutessasi napsauttaa Hallitse fontteja alaosassa päästäksesi tähän valikkoon:

Adobe reunan web-fontit

Täällä voit valita ilmaisia ​​fontteja Adoben tiedostoista Edge Web Fonts -palvelu. Joko etsi kirjasinta nimen mukaan tai rajaa valinnat vasemmalla olevalla monella suodatinvaihtoehdolla, kunnes löydät jotain.

Napsauttamalla mitä tahansa kirjasintyyppiä, se merkitsee sen sisällyttämistä Dreamweaveriin. Kun olet tehnyt niin, voit joko käyttää niitä suoraan tai siirtyä Muokatut fontiniput määritellä omat vara fontit.

luoda mukautettuja fonttipinoja Dreamweaverissa

Toistaiseksi yksinkertaisesti osuma Tehty ja napsauta sitten oletusfonttit uudelleen. Tällä kertaa valitse haluamasi kirjasin ja voilá – muutos tehdään sisältäen kaikki tarvittavat koodaukset.

Vaihdettu fontti dreamweaverissa

Jos napsautat style.css tiedoston yläosassa, näet, että myös kaikki merkinnät on lisätty.

päivitetty tyylitaulukko dreamweaverissa

Vaihe 9. Keskitä otsikko ja muuta sen kokoa

Teksti voisi silti näyttää paremmalta. Seuraava tehtävä on keskittää se ja lisätä fonttikokoa. Tätä varten voit käyttää myös toista ominaisuutta nimeltään Nopea muokkaus.

Voit käyttää sitä siirtymällä koodinäkymään ja napsauttamalla hiiren kakkospainikkeella osaa, jota haluat muokata. Tässä tapauksessa se on

Sulkumerkki.

avaa pikaeditointivalikko dreamweaverissa

Täällä, valitse Nopea muokkaus huipulla. Tämä avaa tähän alaan liittyvän CSS: n. Nyt voit syöttää lisäominaisuuksia tarvitsematta etsiä koko tyylitiedostoa (joka voi olla hyvin pitkä). Lisää seuraava teksti siihen, jotta teksti voidaan keskittää ja suurentaa sitä.

kirjasinkoko: 42 kuvapistettä;
tekstin kohdistaminen: keskusta;

Kun kirjoitat, Dreamweaver tekee myös ehdotuksia siitä, mitä yrität syöttää, mikä tekee siitä vielä helpomman. Se on aiemmin mainittu koodinvalmistusominaisuus.

Kun olet valmis, se näyttää tältä:

Vaihda css Dreamweaverin nopean muokkauksen avulla

Huomaa, että teksti on jo muuttunut suorassa näkymässä. Nyt, paina poistu jättää nopeasti, muokata ja siirtyä tyylisivulle. Huomaat, että uusi CSS on lisätty oikeaan paikkaan.

Aika siistiä?

Muuten, jos et ole koskaan varma siitä, mitä CSS-ominaisuus tarkoittaa, napsauta sitä hiiren kakkospainikkeella ja valitse Pikadokumentit (tai paina Ctrl + K). Dreamweaver antaa sinulle selityksen.

dreamweaver nopea docs

Vaihe 10. Lisää lisää sisältöä

Toistaiseksi opitun avulla voit nyt rakentaa alkeellisen sivuston. Tämän Dreamweaver-opetusohjelman vuoksi olemme tehneet seuraavat:

  • Määritetyt oletusfontit otsikoille ja kappaleille
  • Lisäsi navigointipalkin ja loi linkin kotisivulle
  • Lisätty div-laatikko sisältöön, jossa on kaksi muuta laatikkoa
  • Siirtänyt yhden niistä vasemmalle ja yhden oikealle kellua omaisuus
  • Rajoitti niiden leveyden prosentteihin, jotta ne voivat kohdistaa vaakasuunnassa
  • Lisäsi vasemmalle näyteotsikon ja pikkutekstin, mukaan lukien järjestämätön luettelo
  • Luotu lomake (käytä alla olevaa avattavaa valikkoa Insert), kaksi tekstikenttää ja lähetä-painike
  • Lisätty etäisyys elementtien ympärille CSS-reunusten ja pehmusteiden avulla
  • Edellyttäen taustavärit ja reunat
  • Luonut alatunnisteen ja tekijänoikeusviestin

Tässä on tulos:

verkkosivusto edistyneellä suunnittelulla

Esimerkin koodi:

Koska tämä on vähän edistynyttä eikä kaikki tiedä miten se tehdään, löydät alla olevan HTML: n ja CSS: n, jotta voit rakentaa sen itse. Ensin HTML:





index.html

 



Koti

Pääsisällön näyteotsikko

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque-näyttelijä on tyylikäs. Suspendisse eget elit mi. Epämääräisessä 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, ei dapibus quam mi ac ligula. Vestibulum id auctor eros, muualle luokiteltu porttitor odio. Nunc effeitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi koriste, dapibus lectus in, facilisis nisl.

Esimerkki toimintakehotuksesta!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque-näyttelijä on tyylikäs. Suspendisse eget elit mi.

Copyright © 2017 Kuvitteellinen verkkosivusto

Ja sitten CSS:

@charset "utf-8";

vartalo {
taustaväri: # F5F5F5;
marginaalin yläosa: 0px;
marginaali-oikea: 0px;
marginaali-pohja: 0px;
marginaali-vasen: 0px;
}

p,
,
ul,
olia,
li,
etiketti,
tulo {
kirjasinperhe: muli, sans-serif;
fontti-tyyli: normaali;
kirjasimen paino: 300;
fonttikoko: 17px;
}

h1, h2, h3, h4, h5 {
kirjasinperhe: karla, sans-serif;
fontti-tyyli: normaali;
kirjasimen paino: 400;
tekstimuunnos: iso kirjain;
}

#header {
padding-top: 25px;
padding-bottom: 25px;
taustaväri: #FFFFFF;
reuna-alaosa: 4xx kiinteä # EB232F;
}

#header h1 {
kirjasinperhe: aguafina-script;
fontti-tyyli: normaali;
kirjasimen paino: 400;
kirjasinkoko: 42 kuvapistettä;
tekstin kohdistaminen: keskusta;
marginaalin yläosa: 0px;
marginaali-pohja: 0px;
tekstimuunnos: ei mitään;
}

#navigation {
oikea-marginaali: auto;
marginaali-vasen: auto;
max-leveys: 1140px;
reunan yläosa: 10 px;
marginaali-pohja: 10px;
}

#navigation a {
väri: # EB232F;
}

.tärkein {
näyttö: estää;
marginaalikansi: 15px;
oikea-marginaali: auto;
marginaali-vasen: auto;
marginaali-pohja: 15px;
Tyhjennä molemmat;
ylivuoto: automaattinen;
max-leveys: 1140px;
}

.main # main-right {
kellua: oikea;
leveys: 37,5%;
näyttö: estää;
}

.pää # pää-vasen {
kellua: vasen;
leveys: 57%;
näyttö: estää;
padding-right: 20px;
}

.main # main-right .cta {
tekstin kohdistaminen: keskusta;
}

.main # main-right .form {
leveys: 92%;
oikea-marginaali: auto;
marginaali-vasen: auto;
}

# pää-oikea .muoto div {
marginaali-pohja: 10px;
}

# oikeanpuoleisessa oikeassa muodossa .tunniste {

}

# oikeanpuoleinen oikean muotoinen .textfield {
leveys: 100%;

}

.main # main-right #button {
tekstin kohdistaminen: keskusta;
padding-top: 7px;
padding-bottom: 7px;
marginaali-vasen: auto;
oikea-marginaali: auto;
asema: suhteellinen;
näyttö: estää;
padding-oikea: 36px;
padding-left: 36px;
raja: ei mitään;
taustaväri: # EB232F;
väri: #FFFFFF;
kohdistin: osoitin;
}

.alatunniste {
näyttö: estää;
padding-top: 25px;
padding-bottom: 25px;
tekstin kohdistaminen: keskusta;
}

Haluamme käyttää tätä esimerkkinä näyttääksesi sinulle seuraavat vaiheet. Vaikka se vaikuttaakin monimutkaiselta, kootamme tämän samalla tavalla, kuin meille aiemmin osoitimme.

Vaihe 11. Esikatselu selaimessa ja mobiililaitteessa

Kuinka teimme kaiken tämän? No, ensinnäkin, olemme hieman kokeneempia verkkosivustojen rakentamisessa kuin luultavasti olet. Siksi meillä on jo mielessäni vaiheet oikean verkkosivun luomiseksi.

Toiseksi käytämme erittäin hyödyllistä ominaisuutta, joka auttaa minua nopeuttamaan prosessia: Selaimen esikatselu. Dreamweaverin avulla voit katsella verkkosivujasi reaaliajassa selaimessa ja jopa mobiililaitteissa.

Aloita napsauttamalla reaaliaikaista esikatselunäppäintä oikeassa alakulmassa.

Ota esikatseluvalikko käyttöön Dreamweaverissa

Tämä avaa esikatselun asetukset.

reaaliaikaiset esikatseluvaihtoehdot Dreamweaverissa

Napsauttamalla yhtä selaimen nimeä avaa verkkosivustosi projekti siinä. Voit skannata QR-koodin myös puhelimellasi tai tablet-laitteellasi (esimerkiksi Firefox Quantum) tai kirjoita näytetty osoite selaimeesi aloittaaksesi reaaliaikaisen esikatselun laitteellasi.

Huomaa vain, että sinun on annettava Adobe-tunnuksesi ja salasanasi sitä varten. Sinun pitäisi saada se rekisteröityäksesi Dreamweaveriin.

Paras osa: Kaikki Dreamweaverissa tekemäsi muutokset näkyvät automaattisesti selaimessa samalla kun teet ne.

Kuinka tämä auttoi minua laittamaan sivuston nopeammin? Ensinnäkin näytön koosta riippuen selaimen näyttö saattaa olla lähempänä alkuperäistä kuin mitä näet Dreamweaverissa.

Toiseksi sivuston tarkistaminen selaimessa antaa minun käyttää kehittäjätyökaluja muutosten testaamiseen.

kehittäjätyökalut selaimessa

Ne ovat hyvin samankaltaisia ​​kuin mitä näet Dreamweaverissa. Ne ovat meille tutumpia, jotta voimme työskennellä heidän kanssaan nopeammin ja kopioida ja liittää koodin tyylilevyllemme.

Puhelinversion tarkastelu osoittaa, että tehtävää on vielä paljon.

mobiili reaaliaikainen esikatselu dreamweaverissa

Tämä vie meidät suoraan seuraavaan kohtaan.

Vaihe 12. Lisää mediakyselyt

Jotta verkkosivustosi toimisi kaikilla laitteilla, sinun on lisättävä ns mediakyselyt. Nämä ovat ehdollisia CSS-lauseita, jotka käskevät selaimia soveltamaan tyyliä vain tiettyjen näyttökokojen ylä- tai alapuolelle tai tietyille laitteille. Tällä tavalla voit muuttaa asettelua pienemmillä näytöillä.

Toistaiseksi olet määrittänyt vain globaalit tyylit. Tämä tarkoittaa tyylejä, joita sovelletaan koko sivustoon. Nyt opit lisäämään ehdollisia tyylejä pienemmille näytöille.

Ensin, mene CSS-suunnittelija. Varmista, että tiedosto, johon haluat lisätä koodin, on valittu kohdasta Lähteet. Paina plusmerkki alle @media.

Se antaa sinulle tämän vaihtoehdon paneelin:

mediakyselyvalikko dreamweaverissa

Voit määritellä mediakyselyjen ehdot, esim. Laitteisiin, joihin ne koskevat, suunta, tarkkuus ja paljon muuta. Voit myös lisätä useita ehtoja plusmerkillä.

Mikä on tärkeämpää esimerkillemme on max-width asetus. Sen avulla pystyt määrittelemään mukautetun CSS: n, jota sovelletaan vain tiettyyn näytön enimmäiskokoon.

Oletetaan, että haluat korjata asiat ensin puhelimessa, joten kirjoitat a max-width 375 pikseliä. Kun teet, näet CSS-koodin alareunassa.

Luo mediakysely Dreamweaverissa

Mitä tapahtuu myös kun napsautat kunnossa on, että vihreä viiva ilmestyy näytön yläosaan. Tämä edustaa visuaalisesti mediakyselyä. Napsauta sitä ja näyttö hyppää automaattisesti siihen kokoon.

luoda mediakyselyjä Dreamweaverissa

Vaihe 13. Lisää ehdollinen CSS

Mobiililaitteiden suunnittelun korjaamiseksi meidän on ensin poistettava koodi, joka saa sivuston kaksi elementtiä järjestäytymään vierekkäin. Sillä ei selvästi ole tarpeeksi tilaa.

Voit tehdä tämän samalla tavalla kuin manipuloit CSS: ää aiemmin, vain tällä kertaa mediakysely on aktivoitu samalla kun teet niin.

Ensinnäkin – selaa elementtiin DOM-näkymässä. Luo sieltä uusi CSS-valitsin. Aseta sitten leveys että auto, kellua että ei mitään (estääksesi sitä menemästä vasemmalle) ja lisää sivuille pehmustetta, jotta sisältö ei rajoitu näytön reunaan.

korjattu mobiilisuunnittelu

Näyttää paljon paremmalta, eikö niin? Samalla tavalla voit muuttaa sivun kaikkien muiden elementtien CSS-asetukset saadaksesi ne kaikki näyttämään oikeilta.

Se on pohjimmiltaan se mediakyselyihin. Voit käyttää samaa menetelmää asettelun säätämiseen tableteihin ja muihin kokoihin.

Pro-vinkki: Älä optimoi tiettyjä laitteita ja niiden kokoa, vaan luo mediakyselyjä asettelusta riippuen. Tämä tarkoittaa, että pelataan näytön kokoa ja lisätään kyselyjä näihin kohtiin, kun asettelu ei enää näytä hyvältä.

Vielä yksi asia: Voit myös luoda mediakyselyjä hieman helpommin käyttämällä alakulmassa olevia esiasetettuja laitekokoja ja napsauttamalla yläreunan plusmerkkiä, kun olet löytänyt pisteen, johon haluat lisätä sellaisen..

luoda mediakyselyjä pikakuvakkeilla Dreamweaverissa

Vaihe 14. Lataa sivustosi palvelimelle

Suosittelemme käyttöä Bluehost (tytäryhtiö-linkki) Dreamweaver-sivustosi isäntäksi.

Kun suunnitteluosa on valmis, olet melko valmis lähettämään sivuston palvelimellesi. Kuten alussa mainittiin, myös Dreamweaver tekee tämän erittäin helpoksi.

Ensin, mene Sivusto> Hallinnoi sivustoja. Valitse nykyinen verkkosivustosi valikosta ja valitse sitten Muokata vasemmassa alakulmassa. Napsauta seuraavassa ikkunassa palvelimet.

etäpalvelimen kokoonpano dreamweaverissa

Syötä kaikki tärkeät tiedot, jotta voit muodostaa yhteyden FTP-palvelimeesi. Nimi on sinun, loput (FTP-osoite, käyttäjänimi, salasana) tulee palveluntarjoajaltasi. Älä unohda määrittää mihin hakemistoon tiedostot sijoitetaan ja live-sivustosi Web-osoitetta! Viimeinen osa on tärkeä, jotta Dreamweaver voi luoda sivustosuhteellisia sisäisiä linkkejä.

Alla Pitkälle kehittynyt sinulla on vielä joitain vaihtoehtoja (lähetetäänkö tiedostoja automaattisesti tallennuksen yhteydessä). Voit yleensä pitää asiat sellaisina kuin ne ovat. Osuma Tallentaa kahdesti ja olet valmis.

Mene nyt Tiedostot paneeli (joko oikeassa yläreunassa tai Ikkuna> Tiedostot) ja napsauta pisimmällä vasemmalla olevaa symbolia muodostaaksesi yhteyden palvelimeesi:

lataa sivusto etäpalvelimelle dreamweaverissa

Kun yhteys on muodostettu, valitse ladattavat tiedostot ja napsauta ylöspäin osoittavaa nuolta. Kun se on valmis, sivustosi pitäisi olla saatavilla verkko-osoitteestasi.

Hyvin tehty! Olet juuri luonut ja ladannut yksinkertaisen sivuston Dreamweaverilla!

Dreamweaver-opetusohjelma – Viimeiset sanat

Dreamweaver on upea ohjelma verkkosivustojen rakentamiseen. Se yhdistää intuitiivisen käyttöliittymän ja täysimittaisen koodieditorin. Tämän yhdistelmän avulla on helppoa laadukkaiden verkkosivustojen luominen aloittelijoille, välituotteille ja kokeneille käyttäjille.

Tässä aloittelijoille suunnatussa Dreamweaver-opetusohjelmassa olemme esitelleet sinulle Dreamweaverin ja sen ominaisuudet. Olemme osoittaneet sinulle, kuinka perustaa ohjelma ja aloittaa ensimmäinen sivusto. Olet oppinut luomaan HTML-perusrakenteen ja muotoilemaan sen CSS: llä. Mietimme myös kuinka tehdä verkkosivusto mobiililaitteista reagoiviksi ja ladata ne palvelimellesi.

Tähän mennessä sinulla on vankka käsitys siitä, miten Dreamweaver toimii ja kuinka voit käyttää sitä verkkosivuston luomiseen. Nyt on sinun sukellus syvemmälle ja selvittää seuraavat vaiheet.

Älä unohda: Dreamweaver on vain yksi tapa luoda verkkosivusto. Niitä on paljon enemmän ja täältä löydät paljon tietoa siitä. Onnea!

Oletko käyttänyt Dreamweaveria aiemmin? Mitä mieltä olette? Onko mitään lisättävää yllä olevaan? Kerro meille alla olevassa kommenttiosassa!

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