Dreamweaver námskeið


Dreamweaver námskeið að búa til vefsíðuEins og þú veist snýst þessi síða um hvernig á að búa til vefsíðu. Þú getur lært mismunandi leiðir með því að nota annað hvort WordPress, Joomla eða Drupal. Við höfum meira að segja leiðbeiningar um notkun hreinna HTML eins og í gamla daga (augljóslega með HTML5, nýjasta útgáfan). Í þessu Dreamweaver námskeiði fyrir byrjendur, munt þú læra annað.


Fyrir þá sem ekki vita er Dreamweaver forrit sem gerir þér kleift að hanna, kóða og hafa umsjón með vefsíðum. Það sem er áhugavert við Dreamweaver er að það býður upp á bæði möguleika á að skrifa kóða og búa til vefsíðu með sjónrænu viðmóti.

Í þessu Dreamweaver námskeiði lærir þú allt sem þú þarft að vita til að byrja að búa til vefsíður með Dreamweaver. Þú munt kynnast forritinu og hvað það getur gert, lögun hápunktur og hvernig á að setja það upp. Eftir það finnur þú skref-fyrir-skref leiðbeiningar um hvernig á að búa til einfalda vefsíðu með Dreamweaver, gera það farsíma vingjarnlegt og senda það síðan á netþjóninn þinn.

Þetta verður löng ferð. Hins vegar munt þú vera undrandi á því hversu fljótt þú lendir í þessu mjög leiðandi forriti.

Contents

Hvað er Dreamweaver og hvað getur það gert?

Á yfirborðinu er Dreamweaver IDE (Samþætt þróunarumhverfi). Það þýðir að það er hugbúnaður sem sameinar mismunandi tæki til að auðvelda hönnun og þróun vefa.

Það sem gerir það sérstakt er að það er einhvers staðar á milli CMS (þar sem þú stjórnar öllu um vefsíðuna þína í gegnum sjónviðmót) og hreinn kóða ritstjóra. Svona vinna mismunandi hlutirnir.

Búðu til vefsíður með sjónhönnunarviðmóti

Sjónræn hönnun verkfærakistans gerir þér í grundvallaratriðum kleift að byggja vefsíður með músinni. Það gerir þér kleift að setja vefsíðuþætti á þann hátt sem þú býrð til skipulag í Word. Í grundvallaratriðum sérðu vefsíðu þína eins og þú myndir sjá í vafra en hefur einnig getu til að vinna með hana.

Þetta er mjög gagnlegt vegna þess að það gerir þér kleift að byggja beinagrind vefsíðu fljótt og án þess að þurfa að skrifa eina kóðalínu. Í staðinn mun Dreamweaver sjálfkrafa búa til nauðsynlegan kóða fyrir þig. Þannig geturðu fræðilega sett saman heila vefsíðu fyrir hönd og hlaðið henni inn á netþjóninn þinn.

Á hinn bóginn, ef þú ert fær um að kóða, þá hefur Dreamweaver öll nauðsynleg tæki til þess líka.

Virkar sem fullgildur kóða ritstjóri

Seinni hluti Dreamweaver er að fullu valinn kóða ritstjóri. Það er búið öllum stöðluðum aðgerðum, þar á meðal:

  • Yfirlits yfir setningafræði – Það þýðir að Dreamweaver dregur fram mismunandi þætti (eins og stjórnendur, breytur osfrv.) Í mismunandi litum til að auðvelda kóðann að lesa og leiðrétta.
  • Lokun kóða – Lokun kóða virkar á svipaðan hátt og sjálfvirkri útfyllingu í símanum þínum. Byrjaðu að skrifa og ritstjórinn mun koma með tillögur að því sem þú ert að reyna að skrifa. Þannig þarftu ekki að slá allt út.
  • Kóði hrynur – Kóði hrynur er annar eiginleiki til að gera kóða auðveldara að lesa. Það gerir þér kleift að skreppa saman sjónrænt hluta kóðans þíns þegar þú þarft ekki á þeim að halda. Þannig þarftu ekki að fletta í gegnum alla skrána heldur getur þú aðeins fjallað um hlutana sem þú þarft að vinna að.

Dreamweaver styður mikilvægustu tungumálin fyrir vefhönnun (HTML5, CSS, JavaScript, PHP) og margt fleira.

Besti hlutinn: ef þú breytir einhverju í kóðanum þínum mun Dreamweaver sjálfkrafa birta það á sjónhliðinni. Þannig geturðu séð það án þess að þurfa að senda skrárnar þínar á netþjóninn eða slökkva á vafranum.

Það eru miklu fleiri aðgerðir og þú munt sjá marga af þeim í aðgerð í væntanlegu Dreamweaver námskeiðinu fyrir byrjendur.

Dreamweaver skipulag og vefsíðuhönnunarferli (skref fyrir skref)

Sem fyrsta skref þarftu að eignast Dreamweaver af opinberu vefsíðu Adobe.

Þú getur fengið ókeypis prufutíma hér eða frá Creative Cloud viðskiptavininum þínum.

dreamweaver námskeið fyrir verðlagningu byrjenda

Skref 1. Sæktu og settu upp

Þegar þú færð forritið frá opinberu vefsíðunni, downloadaðu bara uppsetningarskránni, keyrðu það og fylgdu leiðbeiningunum.

Ef þú ert þegar að nota Creative Cloud (eins og við erum) geturðu einfaldlega smellt á Prófaðu inni í viðskiptavininum. Smelltu síðan á þegar forritið er sett upp Hefja prufa.

Skref 2. Fyrsta gangsetning

Þegar þú byrjar að byrja á Dreamweaver sérðu þennan skjá.

fyrsta gangsetning dreamweaver

Ef þú hefur aldrei notað forritið áður skaltu velja Nei, ég er ný. Þegar þú gerir það þá leiðir Dreamweaver þig í gegnum uppsetningarhjálp. Fyrsta skrefið er að velja hvort nota eigi vinnusvæðið fyrir forritara eða venjulegt vinnusvæði.

dreamweaver um borð leiðbeiningar velja vinnusvæði

Þar sem þetta er námskeið fyrir byrjendur Dreamweaver skaltu velja venjulegu útgáfuna. Eftir það geturðu valið litarþema fyrir vinnusvæðið þitt úr fjórum mismunandi valkostum.

dreamweaver um borð leiðbeiningar velja litasamsetningu

Lokaþrepið er að velja hvort byrja á sýnishornaskrá, nýju eða núverandi verkefni eða horfa á námskeið.

dreamweaver um borð leiðbeiningar síðasta skref

Veldu að byrja með nýja eða núverandi möppu og þú ert búinn með uppsetningarferlið. Gott starf!

Nú skulum við hefja verkefni og læra að búa til vefsíðu með Dreamweaver.

Skref 3. Hefja nýja síðu

Fyrsta skrefið er að búa til nýja síðu. Fyrir það, farðu til Vefsvæði> Ný síða. Það mun koma þér á þennan skjá:

búa til nýja síðu í dreamweaver

Fyrsta skrefið er að gefa vefsvæðinu þínu nafn. Þá þarftu að velja hvar á að vista það. Þetta er undir þér komið, en það er venjulega skynsamlegt að halda öllum verkefnum á einum stað til einföldunar.

Þú hefur einnig möguleika á að tengja nýja verkefnið þitt við Git geymslu. Þetta getur verið góð hugmynd þar sem það gefur þér útgáfustýring en þú getur sleppt því í bili.

Við munum takast á við allt undir Servers vinstra megin seinna. Sama með Forvinnsluaðilar CSS, sem er aðeins mikilvægt þegar þú notar svoleiðis.

Það sem er mikilvægt fyrir okkur er Staðbundnar upplýsingar undir Ítarlegar stillingar.

virkja sjálfgefna myndamöppu í dreamweaver

Vertu viss um að smella á möpputáknið hægra megin þar sem það segir Sjálfgefin myndamappa. Farðu síðan í nýstofnaða vefskrána þína, opnaðu hana, búðu til nýja möppu sem heitir myndir og veldu það sem sjálfgefna möppu. Þannig vistar Dreamweaver sjálfkrafa myndir sem tengjast vefsíðunni þinni.

Það er það í bili, smelltu Vista til að fara aftur í vinnusvæðið þitt.

Skref 4. Búðu til heimasíðugögnina þína

Nú þegar þú hefur búið til verkefnasíðu er kominn tími á fyrstu skrána. Við byrjum á heimasíðunni.

Ef Dreamweaver býður þér ekki upp á valkostinn sjálfan, farðu til Skrá> Nýtt. Þú getur annað hvort búið til alveg nýja skrá eða notað sniðmát sem fyrir er. Forritið kemur með nokkrum af þeim (sjá Byrjunar sniðmát). Núna munum við búa til nýjan í staðinn.

búa til nýja skrá í dreamweaver

HTML er sjálfgefið stillt og þú getur látið það vera eins og það er. Fyrir titil skjals, innslátt index.html og velja að Búa til. Þetta mun koma þér á eftirfarandi skjá.

ferskt verkefni í dreamweaver

Þetta er hattur sem við nefndum í upphafi: lifandi mynd af því hvernig vefsvæðið þitt lítur út (tómt um þessar mundir) og kóðinn á bak við hana. Þú munt líka taka eftir því að Dreamweaver hefur sjálfkrafa búið til einhverja grunn HTML merkingu sem þú getur byggt á. Við skulum gera það núna?

Skref 5. Búðu til haus

Til að setja frumefni inn á síðuna þarftu fyrst að velja staðsetningu þess. Annaðhvort smelltu á tóma síðuna (Dreamweaver mun sjálfkrafa velja þáttur ef þú gerir það) eða settu bendilinn í sama þáttinn í kóðahluta skjásins.

Eftir það þarftu að fara til Settu inn flipi í efra hægra horninu. Þetta gefur þér lista yfir algengar HTML og vefþætti sem þú getur bætt við síðuna þína. Flettu niður þar til þú sérð Haus sem valkost.

settu hausþátt inn í dreamweaver

Einfaldur smellur setur það inn á síðuna. Þú sérð það einnig birtast í HTML skjalinu.

haus sjáanlegur í sjónviðmóti og kóða ritstjóra

Einfalt, ekki satt?

Nú munt þú breyta textanum í hausnum og breyta honum einnig í fyrirsögn. Fyrir báða – merktu fyrst textann í kóða ritlinum neðst.

merkja hausatexta í dreamweaver

Eftir það skaltu fara aftur til Settu inn, smelltu á örina við hliðina Fyrirsögn og veldu H1. Þetta vefur titlinum í H1 HTML merki. Fyrir frekari upplýsingar um fyrirsögn merkimiða, lestu Þessi grein.

Eftir það geturðu einnig slegið inn titil fyrir síðuna þína. Á raunverulegu vefsíðunni þinni myndirðu velja eitthvað lýsandi með leitarorðum en ekki bara Verið velkomin á prufusíðuna mína eins og í dæminu.

breytti haus í dreamweaver

Allt í lagi, þú ert nýbúinn að búa til síðuhaus! Sem stendur lítur það út fyrir að vera svolítið gróft, svo við skulum breyta því með CSS næst.

Skref 6. Búðu til CSS skrá

Ef þú þekkir það ekki, þá er CSS sá hluti sem veitir allt stíl á vefsíðu. Það gerir þér kleift að skilgreina liti, víddir frumefna, leturgerðir og stærðir og margt fleira. Við viljum nota álagninguna til að grenja upp titil síðu okkar og læra líka hvernig á að breyta CSS í Dreamweaver.

Fræðilega er hægt að bæta við CSS rétt innan HTML skjalsins. Það er miklu minna glæsilegur valkostur en það sem við munum gera, sem er að búa til sérstaka skrá fyrir alla CSS hönnun allra vefsins.

Fyrsta skrefið er að gefa nýja hausnum þínum CSS flokk eða auðkenni. Meðan á þessu ferli stendur mun Dreamweaver einnig biðja þig um að búa til stílblaða skjal. Farðu í valmyndina DOM neðst til hægri á skjánum sem sýnir alla uppbyggingu vefsins. Gakktu úr skugga um að hausinn þinn sé valinn.

Í lifandi útsýni muntu nú sjá það merkt með bláu litlu merki og plúsmerki neðst.

bæta við CSS skrá í dreamweaver

Smelltu á plúsmerki og sláðu inn #header á sviði sem opnast. Hashimerkið þýðir að þú ert að úthluta id öfugt við bekk. Ýttu á Enter. Í opnunarvalmyndinni, í staðinn fyrir Skilgreindu á síðu veldu Búðu til nýja CSS skrá. Veldu í sprettiglugganum Flettu og farðu í möppuna þína. Sláðu síðan inn style.css (sem er staðlað nafn fyrir stílblöð) í Skráarnafn sviði og lamdi Vista.

búið til stílblað í dreamweaver

Þegar þú velur núna Allt í lagi, ný skjöl birtist efst á lifandi útsýni. Þú getur skoðað það og breytt því þaðan. Það verður einnig tengt við hluta HTML hluta síðunnar.

stílblað bætt við vefsíðu

Awesome possum! Nú ertu tilbúinn að breyta stíl síðunnar þinnar.

Skref 7. Búðu til CSS val fyrir síðutitilinn

Það fyrsta sem þú vilt gera er að breyta letri fyrirsagnarinnar og miðja það líka. Til þess þarf fyrst að búa til nýjan CSS val. Val er nafn frumefnis á síðunni okkar sem þú getur úthlutað eignum til, td litar, stærðar og fleira.

Merktu H1 fyrirsögnina þína í DOM skjánum neðst til hægri (eins og þú gerðir með hausnum áður). Veldu fyrir ofan það CSS hönnuður.

undirbúa stíl fyrir yfirskrift frumefni

Til að búa til CSS val, smelltu á línuna þar sem hún segir Skjósendur og smelltu síðan á plúsartáknið. Þetta ætti sjálfkrafa að leggja til val sem þú heitir #header h1.

búa til css val í dreamweaver

Smelltu á Enter til að búa til það. Lokið!

Fljót athugasemd: fyrir alla þá sem eru nýir í CSS þýðir þessi val að þú miðar á þann hlut sem nefndur er h1 inni þátturinn sem kallaður er #header. Þannig er öllu sem þú slærð inn sem CSS aðeins notað á skrifaðan texta en ekki hausinn í heildina.

Skref 8. Skiptu um fyrirsögn fyrirsagnar

Nú þegar þú ert með val, getur þú úthlutað eiginleikum við það. Ef þú veist um CSS geturðu einfaldlega slegið inn áskrift style.css og forritið mun sjálfkrafa sjá um það.

Fyrir minna reynda notendur gerir Dreamweaver það líka mjög auðvelt. Vertu í CSS hönnuður valmyndinni og hakið úr reitnum þar sem segir Sýna sett. Þegar þú gerir það mun það opna fullt af viðbótarmöguleikum.

gera kleift css valkosti í dreamweaver

Með nýju hnappunum geturðu valið marga CSS eiginleika úr sviðum skipulag, texta, ramma og bakgrunni. The Meira hnappur gefur þér möguleika á að setja inn eigin reglur.

Til að breyta leturgerð, smelltu á Texti valkostur efst (skrunaðu að öðrum kosti). Sveimaðu yfir á næstu valkosti leturfjölskylda og smelltu á sjálfgefið leturgerð.

breyta leturfjölskyldu í dreamweaver

Þetta mun gefa þér fjölda valkosta fyrir algengar leturgerðir, þ.mt fall þeirra (ef notandi vafra getur ekki sýnt aðal leturgerð). Þú gætir viljað smella á Stjórna leturgerðum neðst til að komast í þessa valmynd:

Adobe brún vefur leturgerðir

Hér getur þú valið ókeypis leturgerðir frá Adobe Þjónusta við Edge Web Fontur. Annað hvort að leita að letri með nafni eða nota marga síuvalkostina vinstra megin til að þrengja val þitt þar til þú finnur eitthvað.

Með því að smella á eitthvert leturgerðarmerkið er það merkt með í Dreamweaver. Þegar þú hefur gert það geturðu annað hvort notað þær beint eða farið til Sérsniðin letur stafla til að skilgreina eigin fallback leturgerðir.

búa til sérsniðna letur stafla í dreamweaver

Í bili, einfaldlega högg Lokið og smelltu síðan á sjálfgefin letur aftur. Að þessu sinni skaltu velja sérsniðna leturgerð og voilá – breytingin er gerð með öllum nauðsynlegum kóða.

breytt leturgerð í dreamweaver

Ef þú smellir á þinn style.css skjalið efst, þá sérðu að öll merking hefur verið bætt við.

uppfært stílblað í dreamweaver

Skref 9. Miðju fyrirsögnina og breyttu stærð hennar

Textinn gæti samt litið betur út. Næsta verkefni er að miðja það og auka leturstærð. Til þess geturðu einnig notað annan eiginleika sem kallast Flýtiritun.

Til að nota það, farðu í kóðaskjáinn og hægrismelltu á hlutinn sem þú vilt breyta. Í þessu tilfelli er það á

krappi.

opnaðu skyndibreytingarvalmynd í dreamweaver

Veldu hér Flýtiritun á toppnum. Þetta mun opna CSS tengt þessum þætti fyrir neðan það. Nú geturðu sett inn viðbótareiginleika án þess að þurfa að leita í allri sniðmátaskránni (sem getur verið mjög löng). Til að miðja textann og gera hann stærri skaltu bæta eftirfarandi kóða við hann.

leturstærð: 42px;
texta-samræma: miðja;

Þegar þú slærð inn mun Dreamweaver einnig gera tillögur um það sem þú ert að reyna að setja inn, sem gerir það enn auðveldara. Það er sá eiginleiki að ljúka kóða sem fyrr segir.

Þegar þú ert búinn mun það líta svona út:

breyttu css með skjótum breytingum í dreamweaver

Athugaðu að textinn hefur þegar breyst á lifandi skjánum. Nú, ýttu á Esc til að fara fljótt, breyta og fara yfir á stílblaðið. Þú munt komast að því að nýja CSS hefur verið bætt við á viðeigandi stað.

Frekar flott, ekki satt?

Við the vegur, ef þú ert einhvern tíma í vafa um hvað CSS eign þýðir, einfaldlega hægrismellt á hana og valið Skyndiskjöl (eða ýttu á Ctrl + K). Dreamweaver mun þá gefa þér skýringar.

dreamweaver skjót skjöl

Skref 10. Bættu við meira efni

Með því sem þú hefur lært hingað til geturðu nú byggt upp rudimentarsíðu. Í þágu þessa Dreamweaver námskeiðs höfum við gert eftirfarandi:

  • Skilgreind sjálfgefin letur fyrir fyrirsagnir og málsgreinar
  • Bætti við sigarastiku og bjó til tengil á heimasíðuna í henni
  • Bætti div kassa fyrir efni með tveimur reitum í viðbót
  • Flutti einn af þeim vinstri og einn hægri með fljóta eign
  • Takmarkað breidd sína við prósentur svo þeir geti samstillt sig lárétt
  • Bætti sýnishorns fyrirsögn og dummy texta til vinstri þar á meðal óraðaðan lista
  • Búðu til eyðublað (notaðu fellivalmyndina undir Settu inn), tveir textareitir og senda hnapp
  • Bætti við bil í kringum þættina um CSS framlegð og padding
  • Veittir bakgrunnslitir og landamæri
  • Búðu til fót og höfundarréttarskilaboð

Hér er niðurstaðan:

vefsíða með háþróaðri hönnun

Kóði fyrir dæmið:

Þar sem þetta er svolítið langt gengið og ekki allir vita hvernig á að gera það, þá geturðu fundið HTML og CSS hér að neðan svo þú getir endurbyggt það sjálfur. Fyrst HTML:





index.html

 



Heim

Sýnishorn fyrir aðalefni

Lorem ipsum dolor sitja amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Suspendisse eget elit mi. Leo vitae blandit á auði auctor.

  • 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, ekki annað en porttitor odio. Nunc virkni turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Dæmi um ákall til aðgerða!

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

Höfundarréttur © 2017 Ímyndaða vefsíðan mín

Og svo CSS:

@charset "utf-8";

líkami {
bakgrunnslitur: # F5F5F5;
framlegð-toppur: 0px;
framlegð til hægri: 0px;
framlegð-botn: 0px;
framlegð-vinstri: 0px;
}

bls,
a,
ul,
ól,
li,
merkimiða,
inntak {
leturfjölskylda: muli, sans-serif;
leturstíll: eðlilegt;
leturþyngd: 300;
leturstærð: 17px;
}

h1, h2, h3, h4, h5 {
leturfjölskylda: karla, sans-serif;
leturstíll: eðlilegt;
leturvigt: 400;
text-umbreyting: hástafi;
}

#header {
padding-toppur: 25px;
padding-botn: 25px;
bakgrunnslitur: #FFFFFF;
landamæri-botn: 4px solid # EB232F;
}

#header h1 {
font-family: aguafina-script;
leturstíll: eðlilegt;
leturvigt: 400;
leturstærð: 42px;
texta-samræma: miðja;
framlegð-toppur: 0px;
framlegð-botn: 0px;
textabreyting: engin;
}

#navigation {
framlegð-hægri: farartæki;
framlegð-vinstri: farartæki;
hámarksbreidd: 1140px;
framlegð-toppur: 10px;
framlegð-botn: 10px;
}

#navigation a {
litur: # EB232F;
}

.aðal {
sýna: loka;
framlegð-toppur: 15px;
framlegð-hægri: farartæki;
framlegð-vinstri: farartæki;
framlegð-botn: 15px;
skýr: bæði;
yfirfall: farartæki;
hámarksbreidd: 1140px;
}

.aðal # aðal-hægri {
fljóta: rétt;
breidd: 37,5%;
sýna: loka;
}

.aðal # aðal-vinstri {
fljóta: vinstri;
breidd: 57%;
sýna: loka;
padding-hægri: 20px;
}

.aðal # aðal-hægri .cta {
texta-samræma: miðja;
}

.aðal # aðal-hægri. form {
breidd: 92%;
framlegð-hægri: farartæki;
framlegð-vinstri: farartæki;
}

# aðal-hægri. form div {
framlegð-botn: 10px;
}

# aðal-hægri .form. merki {

}

# aðal-hægri .form .textasvið {
breidd: 100%;

}

.aðal # aðal-hægri # hnappur {
texta-samræma: miðja;
padding-toppur: 7px;
padding-botn: 7px;
framlegð-vinstri: farartæki;
framlegð-hægri: farartæki;
staða: ættingi;
sýna: loka;
padding-hægri: 36px;
padding-vinstri: 36px;
landamæri: enginn;
bakgrunnslitur: # EB232F;
litur: #FFFFFF;
bendill: bendill;
}

.fótur {
sýna: loka;
padding-toppur: 25px;
padding-botn: 25px;
texta-samræma: miðja;
}

Við viljum nota þetta sem dæmi til að sýna þér næstu skref. Jafnvel þótt það virðist flókið, settum við þetta saman á sama hátt og við sýndum þér áður.

Skref 11. Forskoðun í vafra og í farsíma

Hvernig gerðum við þetta allt saman? Í fyrsta lagi erum við aðeins reyndari í að byggja upp vefsíður en þú ert líklega. Þess vegna höfum við þegar skrefin í huga mínum um hvernig eigi að búa til rétta vefsíðu.

Í öðru lagi notum við mjög gagnlegan eiginleika sem hjálpar mér að flýta ferlinu: forskoðun vafra. Dreamweaver gerir þér kleift að skoða vefsíður þínar í rauntíma í vafra og jafnvel í farsímum.

Smelltu á forskoðunartakkann í rauntíma í neðra hægra horninu til að byrja.

virkja forskoðunarvalmynd í dreamweaver

Þetta mun opna forskoðunarmöguleika.

rauntíma forskoðunarmöguleikar í dreamweaver

Með því að smella á eitt af vafraheitunum opnar vefsíðugerðin þín í því. Þú getur einnig skannað QR kóða með símanum eða spjaldtölvunni (til dæmis með Firefox Quantum) eða sláðu vist vistfang inn í vafrann þinn til að ræsa forskoðun í tækinu.

Vertu bara meðvituð um að þú þarft að setja inn Adobe ID og lykilorð fyrir það. Þú ættir að hafa það frá því að skrá þig í Dreamweaver.

Besti hlutinn: Allar breytingar sem þú gerir í Dreamweaver birtast sjálfkrafa í vafranum á sama tíma og þú gerir þær.

Hvernig hjálpaði þetta mér að setja upp síðuna hraðar? Í fyrsta lagi, allt eftir stærð skjásins, skjárinn í vafranum gæti verið nær upprunalegu en það sem þú sérð í Dreamweaver.

Í öðru lagi, með því að athuga vefinn í vafranum, gerir mér kleift að nota forritaratólin til að prófa breytingar.

verktaki verkfæri í vafra

Þeir eru mjög líkir því sem þú sérð í Dreamweaver. Þeir þekkja okkur betur svo við getum unnið hraðar með þeim og bara afritað og límt kóðann á stílblaðið okkar.

Líta á símútgáfuna sýnir að enn er mikil vinna að vinna.

forskoðun farsíma í rauntíma í dreamweaver

Þetta færir okkur strax á næsta stig.

Skref 12. Bættu við fyrirspurnum frá miðöldum

Til að láta vefsíðuna þína virka á öllum tækjum þarftu að bæta við svokölluðum fjölmiðlafyrirspurnum. Þetta eru skilyrt CSS yfirlýsingar sem segja vöfrum að eiga aðeins við um stíl yfir eða undir ákveðnum skjástærðum eða á tilteknum tækjum. Þannig geturðu breytt skipulagi á smærri skjám.

Hingað til hefur þú aðeins skilgreint alþjóðlegan stíl. Það þýðir að stíllinn sem er notaður á alla síðuna. Nú munt þú læra hvernig á að bæta við skilyrðum stíl fyrir smærri skjái.

Farðu fyrst til CSS hönnuður. Gakktu úr skugga um að skráin sem þú vilt bæta kóða við sé valin undir Heimildir. Högg plús táknið undir @media.

Það gefur þér þennan möguleika spjaldið:

valmynd fjölmiðla fyrirspurn í dreamweaver

Þú getur skilgreint skilyrði fyrir fjölmiðlafyrirspurnir, td tækin sem þau beita, stefnumörkun, upplausn og margt fleira. Þú getur einnig bætt við mörgum skilyrðum með plúsmerki.

Það sem er mikilvægara fyrir dæmið okkar er hámarksbreidd stilling. Með því ertu fær um að skilgreina sérsniðna CSS sem eiga aðeins við um ákveðna hámarksskjástærð.

Við skulum segja að þú viljir laga hlutina í símanum fyrst, svo þú slærð inn a hámarksbreidd af 375 dílar. Þegar þú gerir það geturðu séð CSS kóðann neðst.

búðu til fjölmiðlafyrirspurn í dreamweaver

Hvað er líka að gerast þegar þú smellir Allt í lagi er að græn lína birtist efst á skjánum. Þetta táknar sjónrænt fjölmiðlafyrirspurnina. Smelltu á hann og skjárinn hoppar sjálfkrafa í þá stærð.

búðu til fjölmiðlafyrirspurnir í dreamweaver

Skref 13. Bættu við skilyrt CSS

Til að leiðrétta hönnun fyrir farsíma er það fyrsta sem við þurfum að gera til að koma í veg fyrir kóðann sem gerir það að verkum að tveir þættirnir á vefnum raða sér hver við annan. Það er greinilega ekki nóg pláss fyrir það.

Þú getur gert þetta á sama hátt og þú notaðir til CSS áður, aðeins í þetta skiptið sem þú hefur virkjað fjölmiðlafyrirspurn á meðan þú gerir það.

Fyrst af öllu – farðu til atriðisins á DOM skjánum þínum. Þaðan er búinn til nýr CSS valur fyrir það. Settu síðan breiddfarartæki, fljótaenginn (til að hindra það í að fara til vinstri) og bæta við einhverju bólstrun á hliðarnar svo að innihaldið renni ekki á brún skjásins.

leiðrétt farsímahönnun

Lítur miklu betur út, er það ekki? Á sama hátt geturðu breytt CSS allra annarra þátta á síðunni til að láta þá alla líta vel út.

Það er í grundvallaratriðum það fyrir fyrirspurnir í fjölmiðlum. Þú getur notað sömu aðferð til að aðlaga skipulag að spjaldtölvum og öðrum stærðum.

Pro ábending: Ekki fínstilla fyrir ákveðin tæki og stærðir þeirra, búðu til fjölmiðlafyrirspurnir eftir skipulagi. Það þýðir að spila með skjástærðinni og bæta við fyrirspurnum á þeim tímapunktum þegar útlitið lítur ekki vel út lengur.

Einn hlutur til viðbótar: Þú getur líka búið til fjölmiðlafyrirspurnir aðeins auðveldara með því að nota forstillta tækjastærðir neðst í horninu og smella á plússtáknið efst þegar þú hefur fundið punkt þar sem þú vilt bæta við einum.

búðu til fjölmiðlafyrirspurnir með flýtileiðum í dreamweaver

Skref 14. Settu síðuna þína upp á netþjóninn

Við mælum með að nota Bluehost (tengd tengill) til að hýsa Dreamweaver síðuna þína.

Þegar þú ert búinn með hönnunarhlutann ertu nokkurn veginn tilbúinn að hlaða síðunni upp á netþjóninn þinn. Eins og getið var í upphafi gerir Dreamweaver þetta líka mjög auðvelt.

Farðu fyrst til Vefsvæði> Stjórna vefsvæðum. Veldu núverandi vefsíðu þína úr valmyndinni og veldu Breyta neðst til vinstri. Smelltu á í eftirfarandi glugga Servers.

ytri netþjónstillingu í dreamweaver

Settu inn öll mikilvæg gögn til að tengjast FTP netþjóninum. Nafnið er undir þér komið, afgangurinn (FTP heimilisfang, notandanafn, lykilorð) kemur frá hýsingaraðilanum þínum. Ekki gleyma að tilgreina hvaða skrá til að setja skrárnar inn og veffang lifandi vefsvæðis þíns! Síðasti hlutinn er mikilvægur svo að Dreamweaver geti búið til innbyrða tengla á síðuna.

Undir Háþróaður þú hefur nokkra fleiri möguleika (hvort þú vilt hlaða skrám sjálfkrafa við vistun). Þú getur venjulega haldið hlutunum eins og þeir eru. Högg Vista tvisvar og þú ert búinn.

Farðu nú til Skrár spjaldið (annað hvort efst til hægri eða í gegnum Gluggi> Skrár) og smelltu á lengsta vinstra táknið til að tengjast netþjóninum:

hlaðið upp síðu á ytri netþjóninn í dreamweaver

Þegar tengingunni hefur verið komið á skaltu velja skrárnar sem þú vilt hlaða upp og smella á örina sem vísar upp til að gera það. Þegar þessu er lokið ætti vefsvæðið þitt að vera aðgengilegt á vefslóðinni þinni.

Vel gert! Þú smíðaðir og sendir inn einfaldan vef með Dreamweaver!

Dreamweaver námskeið – lokaorð

Dreamweaver er frábært forrit til að byggja upp vefsíður. Það sameinar leiðandi notendaviðmót með fullgildum kóða ritstjóra. Með þessari blöndu gerir það auðvelt fyrir byrjendur, millistig og háþróaða notendur að smíða hágæða vefsíður.

Í þessari námskeið fyrir Dreamweaver fyrir byrjendur höfum við kynnt þér Dreamweaver og getu þess. Við höfum sýnt þér hvernig þú setur upp forritið og byrjar á fyrstu vefsvæðinu þínu. Þú hefur lært hvernig á að búa til grunn HTML uppbyggingu og stíl það með CSS. Við fórum einnig yfir hvernig á að gera vefsíðu farsíma móttækileg og hlaða því inn á netþjóninn þinn.

Núna hefur þú góðan skilning á því hvernig Dreamweaver virkar og hvernig þú getur notað það til að búa til vefsíðu. Nú er það undir þér komið að kafa dýpra og átta þig á næstu skrefum.

Ekki gleyma: Dreamweaver er aðeins ein leið til að búa til vefsíðu. Það eru margir fleiri og þú getur fundið mikið af upplýsingum um það hérna. Gangi þér vel!

Hefurðu notað Dreamweaver áður? Hver er þín skoðun? Er eitthvað að bæta við ofangreint? Láttu okkur vita í athugasemdinni hér að neðan!

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