Tutorial për Dreamweaver


Dreamweaver Tutorial duke krijuar një faqe në internetSiç e dini, kjo faqe ka të bëjë me mënyrën e krijimit të një faqe në internet. Ju mund të mësoni mënyra të ndryshme duke përdorur ose WordPress, Joomla ose Drupal. Ne madje kemi një udhëzues për përdorimin e HTML të pastër si në ditët e vjetra (padyshim me HTML5, versioni i fundit). Në këtë tutorial Dreamweaver për fillestarët, do të mësoni një tjetër.


Për ata që nuk e dinë, Dreamweaver është një aplikacion që ju lejon të hartoni, kodoni dhe menaxhoni uebfaqe. Ajo që është interesante në lidhje me Dreamweaver është se ajo ofron mundësinë për të shkruar kod, si dhe për të bërë një faqe në internet duke përdorur një ndërfaqe vizuale.

Në këtë tutorial të Dreamweaver, do të mësoni gjithçka që duhet të dini për të filluar krijimin e faqeve të internetit me Dreamweaver. Do të njiheni me programin dhe atë që mund të bëjë, pikat kryesore dhe mënyrën e vendosjes së tij. Pas kësaj, ju do të gjeni një udhëzues hap pas hapi se si të krijoni një faqe interneti të thjeshtë me Dreamweaver, ta bëni atë miqësor me celularin dhe pastaj ta ngarkoni në serverin tuaj.

Kjo do të jetë një udhëtim i gjatë. Sidoqoftë, do të mahniteni se sa shpejt do të futeni në këtë program shumë intuitiv.

Contents

Isfarë është Dreamweaver dhe çfarë mund të bëjë?

Në sipërfaqe, Dreamweaver është një IDE (Mjedisi i Integruar i Zhvillimit). Kjo do të thotë se është një pjesë e programeve kompjuterike që kombinon mjete të ndryshme për ta bërë më të lehtë hartimin dhe zhvillimin e uebit.

Ajo që e bën të veçantë është se është diku midis një CMS (ku kontrolloni gjithçka në lidhje me faqen tuaj të internetit përmes një ndërfaqe vizuale) dhe një redaktori të kodeve të pastra. Ja se si funksionojnë pjesët e ndryshme.

Krijoni Uebsajte përmes një Ndërfaqe Dizajnimi Visual

Kutia e veglave të dizajnit vizual në thelb ju lejon të ndërtoni uebfaqe me miun tuaj. Kjo ju lejon të vendosni elemente të faqes në internet në mënyrën se si krijoni një plan urbanistik në Word. Në thelb, ju e shihni faqen tuaj të internetit ashtu siç do ta shihni në një shfletues por gjithashtu keni aftësinë ta manipuloni atë.

Kjo është shumë e dobishme sepse ju lejon të ndërtoni skeletin e një faqe në internet shpejt dhe pa nevojë për të shkruar një linjë të vetme të kodit. Në vend të kësaj, Dreamweaver automatikisht do të krijojë kodin e nevojshëm për ju. Në atë mënyrë, teorikisht, ju mund të bashkoni një faqe të tërë me dorë dhe ta ngarkoni atë në serverin tuaj.

Nga ana tjetër, nëse jeni i aftë të kodifikoni, Dreamweaver ka të gjitha mjetet e nevojshme edhe për këtë.

Punon si një Redaktues i Kodit të plotë

Pjesa e dytë e Dreamweaver është një redaktues i plotë i kodeve. Ai vjen i pajisur me të gjitha funksionet standarde, përfshirë:

  • Theksimi i sintaksës – Kjo do të thotë që Dreamweaver nxjerr në pah elemente të ndryshme (siç janë operatorët, variablat, etj.) Me ngjyra të ndryshme në mënyrë që ta bëjnë kodin më të thjeshtë për tu lexuar dhe korrigjuar.
  • Përfundimi i kodit – Përfundimi i kodit funksionon në një mënyrë të ngjashme si autokomplet në telefonin tuaj. Filloni të shtypni dhe redaktori do të bëjë sugjerime për ato që po përpiqeni të shkruani. Në atë mënyrë, nuk është e nevojshme të shkruani gjithçka plotësisht.
  • Rënia e kodit – Rënia e kodit është një tjetër veçori për ta bërë më të lehtë leximin e kodit. Kjo ju lejon të zvogëloni vizualisht pjesë të kodit tuaj kur nuk ju nevojiten. Në këtë mënyrë, nuk duhet të lëvizni në të gjithë skedarin, por mund të merreni vetëm me pjesët për të cilat duhet të punoni.

Dreamweaver mbështet gjuhët më të rëndësishme për hartimin e uebit (HTML5, CSS, JavaScript, PHP) dhe shumë më tepër.

Pjesa me e mire: nëse ndryshoni ndonjë gjë në kodin tuaj, Dreamweaver automatikisht do ta shfaqë atë në anën vizuale gjithashtu. Në atë mënyrë, ju mund ta shihni pa pasur nevojë të ngarkoni skedarët tuaj në një server ose të ndizni shfletuesin.

Ka shumë më tepër karakteristika dhe do të shihni shumë prej tyre në veprim në tutorialin e ardhshëm të Dreamweaver për fillestarët.

Procesi i Konfigurimit të Dreamweaver dhe Udhëzimit të Uebfaqeve (hap pas hapi)

Si hap i parë, ju duhet të blini Dreamweaver nga faqja zyrtare e internetit Adobe.

Ju mund të merrni një provë falas këtu ose nga klienti juaj Cloud Creative.

Udhëzues për Dreamweaver për çmimet e fillestarëve

Hapi 1. Shkarkoni dhe Instaloni

Kur merrni programin nga faqja zyrtare në internet, thjesht shkarkoni skedarin e instalimit, ekzekutoni atë dhe ndiqni udhëzimet.

Nëse tashmë jeni duke përdorur Creative Cloud (siç jemi ne), thjesht mund të klikoni përpiqem brenda klientit. Pastaj, kur programi të bëhet instalimi, klikoni Filloni Gjyqin.

Hapi 2. Fillimi i parë

Kur filloni për herë të parë Dreamweaver, do të shihni këtë ekran.

fillimi i parë i dreamweaver

Nëse nuk e keni përdorur kurrë programin më parë, zgjidhni Jo, jam i ri. Kur e bëni këtë, Dreamweaver ju drejton përmes një magjistari të konfigurimit. Hapi i parë është të zgjidhni nëse do të përdorni hapësirën e punës për zhvilluesit ose një hapësirë ​​pune standarde.

udhëzues në bordet e ëndrrave të ëndrrave zgjidhni hapësirën e punës

Meqenëse ky është një tutorial fillestar i Dreamweaver, zgjidhni versionin standard. Pas kësaj, ju mund të zgjidhni një temë me ngjyra për hapësirën tuaj të punës nga katër opsione të ndryshme.

udhëzues bordi dreamweaver bordit zgjidhni skemën e ngjyrave

Hapi i fundit është zgjedhja nëse duhet të filloni me një skedar kampioni, një projekt të ri ose ekzistues ose të shikoni një tutorial.

Udhëzuesi i bordit të ëndrrave në bordin e fundit

Zgjidhni për të filluar me një dosje të re ose ekzistuese dhe ju jeni bërë me procesin e konfigurimit. Punë e mirë!

Tani le të fillojmë një projekt dhe të mësojmë se si të krijojmë një faqe në internet me Dreamweaver.

Hapi 3. Filloni një sit të ri

Hapi i parë është krijimi i një siti të ri. Për këtë, shkoni te Site> sit i ri. Do t’ju sjellë në këtë ekran:

krijoni një sit të ri në dreamweaver

Hapi i parë është t’i jepni një emër sitit tuaj. Pastaj, duhet të zgjidhni ku ta ruani. Kjo varet nga ju, por zakonisht ka kuptim të mbani të gjitha projektet në një vend për thjeshtësi.

Ju gjithashtu keni mundësinë që ta lidhni projektin tuaj të ri me një depo Git. Kjo mund të jetë një ide e mirë pasi ju jep kontrolli i versionit por mund ta kaloni tani për tani.

Ne do të merremi me gjithçka nën Servers në anën e majtë më vonë. Njësoj me Përpunuesit CSS, gjë që është e rëndësishme vetëm kur përdorni atë lloj gjëje.

Ajo që është e rëndësishme për ne është Informacioni lokal nën Cilësimet e përparuara.

aktivizoni dosjen e parazgjedhur të imazheve në dreamweaver

Sigurohuni që të klikoni në ikonën e dosjes në të djathtë ku thotë Dosje Paraprakisht Imazhe. Pastaj, shkoni te drejtoria juaj e faqeve të krijuar rishtas, hapeni atë, krijoni një dosje të re të quajtur images dhe zgjidhni atë si dosjen tuaj të paracaktuar. Në atë mënyrë, Dreamweaver do të ruajë imazhe të lidhura me faqen tuaj automatikisht atje.

Kjo është tani për tani, klikoni Save të kthehesh në hapësirën tënde të punës.

Hapi 4. Krijoni skedarin tuaj të faqes në internet

Tani që keni krijuar një sit projekti, është koha për skedarin e parë. Do të fillojmë me faqen kryesore.

Nëse Dreamweaver nuk ju ofron juve vetë opsionin, shkoni tek Skedari> I ri. Mund të krijoni një skedar plotësisht të ri ose të përdorni një shabllon ekzistues. Programi vjen me disa nga ato (shiko Modelet e fillimit). Tani për tani, ne do të krijojmë një të re në vend.

krijoni një skedar të ri në dreamweaver

HTML është vendosur si parazgjedhje dhe ju mund ta lini ashtu siç është. Për titullin e dokumentit, input index.html dhe zgjidhni të krijoj. Kjo do t’ju marrë në ekranin e mëposhtëm.

projekt i freskët në ëndërrimtar

Kjo është kapela që përmendëm në fillim: një pamje live e asaj që duket faqja juaj (bosh, për momentin) dhe kodi që fshihet pas tij. Do të vini re gjithashtu se Dreamweaver ka krijuar automatikisht disa shënime themelore HTML të cilat mund t’i ndërtoni. Le ta bëjmë këtë tani, do të jemi ne?

Hapi 5. Krijoni një Header

Për të futur një element në faqe, së pari duhet të zgjidhni vendndodhjen e tij. Ose klikoni në faqen bosh (Dreamweaver automatikisht do të zgjedhë element nëse e bëni) ose vendoseni kursorin në të njëjtin element në pjesën e kodit të ekranit.

Pas kësaj, ju duhet të shkoni në Fut skedë në këndin e sipërm të djathtë. Kjo ju jep një listë të HTML të zakonshëm dhe elementeve të faqes që mund t’i shtoni në faqen tuaj. Shkoni poshtë derisa të shihni arkitra si opsion.

fut elementin e header-it në dreamweaver

Një klikim i thjeshtë e fut atë në faqe. Ju gjithashtu shihni se ai shfaqet brenda dokumentit HTML.

kokë e dukshme në ndërfaqen vizuale dhe redaktorin e kodit

E thjeshtë, e drejtë?

Tani do ta ndryshoni tekstin brenda kokës dhe gjithashtu do ta ktheni atë në një titull. Për të dy – shënoni së pari tekstin në redaktorin e kodit në fund.

shëno tekstin e header-it në dreamweaver

Pas kësaj, kthehu tek Fut, klikoni në shigjetën ngjitur me Kreu dhe zgjedh H1. Kjo përfundon titullin e faqes në një etiketë H1 HTML. Për më shumë informacion mbi etiketat e titullit, lexoni Ky artikull.

Pas kësaj, ju gjithashtu mund të shkruani një titull për faqen tuaj. Në faqen tuaj të vërtetë, ju do të zgjidhni diçka përshkruese me fjalë kyçe dhe jo vetëm Mirësevini në Uebfaqen time të Testimit si në shembull.

ndryshoi kokën në ëndërrimtarin

Mirë, ju sapo keni krijuar një kokë faqe! Për momentin duket akoma pak i papërpunuar, kështu që le ta ndryshojmë atë përmes CSS tjetër.

Hapi 6. Krijoni një skedar CSS

Në rast se nuk jeni të njohur me të, CSS është pjesa që ofron të gjithë stilin në një faqe në internet. Kjo ju lejon të përcaktoni ngjyrat, dimensionet e elementeve, llojet dhe madhësitë e shkronjave dhe një ferr shumë më tepër. Ne duam të përdorim shënimin për të spërkatur titullin tonë të faqes dhe gjithashtu të mësojmë se si të ndryshojmë CSS në Dreamweaver.

Teorikisht, ju mund të shtoni CSS menjëherë në dokumentin HTML. Ekziston një mundësi shumë më pak elegante se ajo që ne do të bëjmë, e cila është krijimi i një skedari të dedikuar për të gjithë stilimin CSS të të gjithë faqes.

Hapi i parë është t’i jepni titullit tuaj të ri një klasë ose id CSS. Gjatë këtij procesi, Dreamweaver gjithashtu do t’ju kërkojë të krijoni një skedar fletësh stili. Shkoni te menuja DOM në pjesën e poshtme të djathtë të ekranit që liston të gjithë strukturën tuaj të faqes. Sigurohuni që titulli juaj të jetë zgjedhur.

Në pamjen drejtpërdrejtë, tani do ta shihni atë të shënuar në blu me një etiketë të vogël dhe një shenjë plus në fund.

shtoni skedarin CSS në dreamweaver

Klikoni në shenjën plus dhe shkruani #header në fushën që hapet. Hashtag do të thotë që po cakton një id në krahasim me një klasë. Shtypni enter. Në menunë e hapjes, në vend të Përkufizoni në faqe zgjedh Krijoni një skedar të ri CSS. Në pop-up, zgjidhni Shfleto dhe lundroni te dosja e faqes tuaj. Pastaj shtypni style.css (i cili është emri standard për fletët e stilit) në Emri i skedarit fushë dhe hit Save.

krijoni fletë stili në ëndërrimtarin

Kur ju tani zgjidhni Ne rregull, një skedar i ri do të shfaqet në krye të pamjes suaj të drejtpërdrejtë. Mund ta shikoni dhe redaktoni atë që andej. Ajo gjithashtu do të lidhet me pjesa e pjesës HTML të faqes tuaj.

fletë stili të shtuar në faqen e internetit

Zot i mahnitshëm! Tani jeni gati të ndryshoni stilin e faqes tuaj.

Hapi 7. Krijoni një përzgjedhës CSS për Titullin e faqes

Gjëja e parë që ju doni të bëni është të ndryshoni fontin e titullit tuaj dhe gjithashtu ta përqendroni atë. Për këtë, së pari duhet të krijoni një përzgjedhës të ri CSS. Një përzgjedhës është emri i një elementi në faqen tonë të cilit mund t’i caktoni vetitë, p.sh. ngjyra, madhësia dhe më shumë.

Shënoni kokën tuaj H1 në pamjen DOM në të djathtë të poshtëm (siç e keni bërë me kokën më parë). Pastaj, mbi këtë, zgjidhni Designer CSS.

përgatisni stilimin për elementin drejtues

Për të krijuar një përzgjedhës CSS, klikoni në vijën ku thotë Szgjedhës dhe pastaj kliko në simbolin plus. Kjo automatikisht duhet të propozojë një përzgjedhës për emrin tuaj # drejtues h1.

krijoni selektorin CSS në dreamweaver

Godit hyr për ta krijuar atë. Done!

Shënim i shpejtë: për të gjithë ata të rinj për CSS, ky përzgjedhës do të thotë që ju jeni duke synuar elementin e quajtur H1 brenda elementi i quajtur #header. Në atë mënyrë, çdo gjë që futni si CSS zbatohet vetëm në tekstin e shkruar dhe jo vetëm në elementin e kokës.

Hapi 8. Ndryshoni fontin e Titullit

Tani që ju keni një përzgjedhës, ju mund t’i caktoni pronat. Nëse e dini rrugën tuaj rreth CSS, thjesht mund të shkruani shënimin style.css dhe programi automatikisht do të kujdeset për të.

Për përdoruesit më pak me përvojë, Dreamweaver gjithashtu e bën atë me të vërtetë të lehtë. Qëndroni në Designer CSS menunë dhe çblloko kutinë ku thotë Trego setin. Kur ta bëni këtë, do të zhbllokojë shumë mundësi shtesë.

aktivizoni opsionet CSS në dreamweaver

Me butonat e rinj, ju mund të zgjidhni shumë prona CSS nga fushat e paraqitjes, teksti, kufiri dhe prejardhja. më shumë butoni ju jep mundësi për të futur rregullat tuaja.

Për të ndryshuar llojin e shkronjave, klikoni në tekst opsion në krye (alternative, lëvizni poshtë). Në opsionet e ardhshme, rri pezull font-family dhe klikoni në font i paracaktuar.

ndryshoni familjen e shkronjave në dreamweaver

Kjo do t’ju japë një numër opsionesh për shkronjat e zakonshme duke përfshirë edhe gabimet e tyre (në rast se shfletuesi i përdoruesit nuk është në gjendje të tregojë fontin kryesor). Ju mund të dëshironi të klikoni në Menaxhoni shkronjat në fund për të arritur në këtë menu:

fontet e faqeve të adobe

Këtu, ju jeni në gjendje të zgjidhni shkronja falas nga Adobe Shërbimi i Fonts Web Edge. Ose kërkoni një font me emër ose përdorni shumë opsione të filtrit në të majtë për të ngushtuar zgjedhjet tuaja derisa të gjeni diçka.

Një klikim në cilindo prej llojeve të shenjave e shënon atë për përfshirje në Dreamweaver. Pasi ta keni bërë këtë, mund t’i përdorni ose direkt ose të shkoni në Stackat e shkronjave të personalizuara për të përcaktuar shkronjat tuaja kthyese.

krijoni rafte me porosi fonti në ëndërrimtarin

Tani për tani, thjesht goditi Done dhe pastaj klikoni në fontet e paracaktuar përsëri. Këtë herë zgjedhni fontin tuaj të zgjedhur me porosi dhe voila – ndryshimi bëhet duke përfshirë të gjithë kodimin e nevojshëm.

ndryshuar font në dreamweaver

Nëse klikoni në tuaj style.css skedar në krye, do të shihni që i gjithë shënjimi është shtuar gjithashtu.

fletë stil azhurnuar në dreamweaver

Hapi 9. Qendër Titulli dhe Ndrysho Madhësinë e tij

Teksti mund të duket akoma më mirë. Detyra tjetër është ta përqendroni atë dhe të rritni madhësinë e fontit. Për këtë, ju gjithashtu mund të përdorni një veçori tjetër të quajtur Redaktimi i shpejtë.

Për ta përdorur atë, shkoni te pamja e kodit dhe klikoni me të djathtën në pjesën që dëshironi të redaktoni. Në këtë rast, është në

kllapa.

hapni menunë e shpejtë të redaktimit në kutinë e ëndrrave

Këtu, zgjidhni Redaktimi i shpejtë në krye. Kjo do të hapë CSS të lidhur me këtë element poshtë tij. Tani mund të futni veti shtesë, pa pasur nevojë të kërkoni tërë skedarin e fletëve të stilit (i cili mund të jetë shumë i gjatë). Në mënyrë që ta përqendroni tekstin dhe ta bëni atë më të madh, shtoni kodin e mëposhtëm në të.

madhësia e fontit: 42px;
drejtimi i tekstit: qendër;

Kur shtypni, Dreamweaver gjithashtu do të bëjë propozime për atë që jeni duke u përpjekur të futni, duke e bërë atë edhe më të lehtë. Kjo është veçoria e plotësimit të kodit të përmendur më parë.

Kur të keni mbaruar, do të duket kështu:

ndryshoni css përmes redaktimit të shpejtë në dreamweaver

Vini re se teksti tashmë ka ndryshuar në pamjen drejtpërdrejtë. Tani, shtypni Esc për të lënë të shpejtë, ndryshuar dhe drejtuar tek fleta e stilit. Do të gjeni që CSS e re është shtuar në vendin e duhur.

Pamje shumë e lezetshme, apo jo?

Nga rruga, nëse jeni gjithnjë i pasigurt për atë që do të thotë një pronë e CSS, thjesht klikoni me të djathtën dhe zgjidhni Dokumente të Shpejta (ose shtypni Ctrl + K). Dreamweaver do t’ju japë një shpjegim.

dokumente të shpejta për ëndrra

Hapi 10. Shtoni më shumë përmbajtje

Me ato që keni mësuar deri më tani, tani mund të ndërtoni një sit rudimentar. Për hir të këtij tutoriali Dreamweaver, ne kemi bërë si më poshtë:

  • Përcaktuan fontet e paracaktuar për titujt dhe paragrafët
  • Shtoi një shirit navigimi dhe krijoi një lidhje në faqen kryesore në të
  • Shtuar një kuti div për përmbajtje me dy kuti të tjera brenda
  • Lëvizi një prej tyre majtas dhe një djathtas me shket pronë
  • Kufizuan gjerësinë e tyre në përqindje në mënyrë që të mund të rreshtohen në horizontale
  • Shtoi një titull shembulli dhe teksti kuzhinë në të majtë duke përfshirë një listë të pakontrolluar
  • Krijuar një formë (përdorni menunë e lëshuar poshtë Fut), dy fusha teksti dhe një buton dorëzimi
  • Shtimi i hapësirës përreth elementeve përmes kufijve dhe mbushjeve CSS
  • Siguruar ngjyra dhe kufijtë e sfondit
  • Krijuar një footer dhe një mesazh për të drejtat e autorit

Këtu është rezultati:

faqe interneti me dizajn të përparuar

Kodi për Shembullin:

Meqenëse kjo është pak e avancuar dhe jo të gjithë do të dinë ta bëjnë atë, ju mund të gjeni HTML dhe CSS më poshtë që të mund t’i rikonstruktoni ato vetë. Së pari HTML:





index.html

 



shtëpi

Titulli i kampionit për përmbajtjen kryesore

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

  • Etiam tempus urna condimentum libero varius
  • Fund malli
  • Duis odio lacus, element elementar i përfundimit
  • Mollis dinjitetim enim.
  • Facilisis quisque molestie suscipit odio vel

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

Thirrje Shembull për veprim!

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

Copyright © 2017 Uebfaqja ime Imagjinare

Dhe pastaj CSS:

@charset "utf-8";

trupi
sfond-ngjyra: # F5F5F5;
marzhi i sipërm: 0px;
diferenca e djathtë: 0px;
margjina-fund: 0px;
margjina-majtas: 0px;
}

p,
një,
ul,
ol,
li,
etiketë,
hyrje {
font-familja: muli, sans-serif;
font-font: normal;
pesha e shkronjave: 300;
madhësia e fontit: 17px;
}

h1, h2, h3, h4, h5
font-familje: karla, sans-serif;
font-font: normal;
pesha e shkronjave: 400;
shndërrimi i tekstit: shkronja të mëdha;
}

# drejtues {
mbushje-top: 25px;
mbushje-fund: 25px;
sfond-ngjyra: #FFFFFF;
kufiri-fund: 4px i ngurtë # EB232F;
}

#header h1
font-familje: aguafina-script;
font-font: normal;
pesha e shkronjave: 400;
madhësia e fontit: 42px;
drejtimi i tekstit: qendër;
marzhi i sipërm: 0px;
margjina-fund: 0px;
shndërrimi i tekstit: asnjë;
}

#navision {
diferenca e djathtë: automatike;
margjina e majtë: automatike;
max-gjerësia: 1140px;
diferencë-top: 10px;
margjina-fund: 10px;
}

#nevizion a {
ngjyra: # EB232F;
}

.kryesore {
ekran: bllok;
diferencë-top: 15px;
diferenca e djathtë: automatike;
margjina e majtë: automatike;
margjina-fund: 15px;
qartë: të dy;
tejmbushja: automatik;
max-gjerësia: 1140px;
}

.kryesore # kryesore-djathtas {
noton: drejt;
gjerësia: 37.5%;
ekran: bllok;
}

.kryesore # kryesore-majtas {
noton: majtas;
gjerësia: 57%;
ekran: bllok;
mbushje djathtas: 20px;
}

.kryesore # kryesore-djathtas .cta
drejtimi i tekstit: qendër;
}

.kryesore # e djathtë kryesore .form {
gjerësia: 92%;
diferenca e djathtë: automatike;
margjina e majtë: automatike;
}

# kryesore-djathtas .formë div
margjina-fund: 10px;
}

# kryesore-djathtas .form .label {

}

# djathtas kryesor .form .textfield {
gjerësia: 100%;

}

.kryesore # kryesore-djathtas #button
drejtimi i tekstit: qendër;
mbushje e sipërme: 7px;
mbushje-fund: 7px;
margjina e majtë: automatike;
diferenca e djathtë: automatike;
pozicioni: relativ;
ekran: bllok;
mbushje djathtas: 36px;
mbushje-majtas: 36px;
kufiri: asnje;
sfond-ngjyra: # EB232F;
ngjyra: #FFFFFF;
kursori: treguesi;
}

.footer {
ekran: bllok;
mbushje-top: 25px;
mbushje-fund: 25px;
drejtimi i tekstit: qendër;
}

Ne duam ta përdorim këtë si një shembull për t’ju treguar hapat e ardhshëm. Edhe nëse duket e ndërlikuar, ne i bashkojmë këto në të njëjtën mënyrë siç ju treguam më parë.

Hapi 11. Paraprakisht në Shfletuesin dhe në pajisjen celulare

Si i bëmë të gjitha këto? Epo, para së gjithash, ne jemi pak më me përvojë në ndërtimin e uebfaqeve sesa jeni ndoshta. Prandaj, ne tashmë kemi hapat në mendjen time se si të krijojmë një faqe të përshtatshme në internet.

Së dyti, ne jemi duke përdorur një veçori shumë të dobishme që më ndihmon të shpejtoj procesin: Paraprakisht nga Shfletuesi. Dreamweaver ju lejon të shikoni faqet tuaja në internet në kohë reale në një shfletues dhe madje edhe në pajisjet mobile.

Për të filluar, klikoni në butonin e shikimit në kohë reale në këndin e poshtëm të djathtë.

aktivizoni menunë e parapamjes në dreamweaver

Kjo do të hap opsionet e vrojtimit.

Opsione të shikimit të kohërave reale në dreamweaver

Një klikim në një nga emrat e shfletuesve do të hapë projektin tuaj të internetit në të. Ju gjithashtu mund të skanoni kodin QR me telefonin ose tabletin tuaj (për shembull me Quantum i Firefox-it) ose shkruani adresën e shfaqur në shfletuesin tuaj për të filluar pamjen e drejtpërdrejtë në pajisjen tuaj.

Vetëm të jenë të vetëdijshëm, që ju duhet të futni Adobe ID tuaj dhe fjalëkalimin për këtë. Ju duhet ta keni atë që nga regjistrimi në Dreamweaver.

Pjesa me e mire: Changesdo ndryshim që ju bëni në Dreamweaver automatikisht do të shfaqet në shfletuesin në të njëjtën kohë kur i bëni ato.

Si më ndihmoi kjo që të bëj site-in më shpejt? Para së gjithash, në varësi të madhësisë së ekranit tuaj, ekrani në shfletues mund të jetë më afër origjinalit sesa ai që shihni në Dreamweaver.

Së dyti, kontrollimi i faqes në shfletuesin më lejon të përdor mjetet e zhvilluesit për të provuar ndryshimet.

mjetet e zhvilluesit në shfletues

Ato janë shumë të ngjashme me ato që shihni në Dreamweaver. Ata janë më të njohur për ne, kështu që ne mund të punojmë më shpejt me ta dhe thjesht kopjoni dhe ngjisni kodin në fletën tonë të stilit.

Një vështrim në versionin e telefonit tregon se ka ende shumë punë për të bërë.

vrojtim paraprak në kohë reale në dreamweaver

Kjo na çon drejt në pikën tjetër.

Hapi 12. Shtoni pyetjet e mediave

Për ta bërë faqen tuaj të internetit të funksionojë në të gjitha pajisjet, duhet të shtoni të ashtuquajturat pyetje për media. Këto janë deklarata të kushtëzuara CSS që u tregojnë shfletuesve të aplikojnë në stil vetëm mbi ose nën madhësi të caktuara të ekraneve ose në pajisje të veçantë. Në atë mënyrë, ju mund të ndryshoni paraqitjen në ekranet më të vogla.

Deri më tani, ju keni përcaktuar vetëm stilet globale. Kjo do të thotë stilet që aplikohen në të gjithë sitin. Tani do të mësoni se si të shtoni stile të kushtëzuara për ekranet më të vegjël.

Së pari, shkoni tek Designer CSS. Sigurohuni që skedari që dëshironi të shtoni kodin është zgjedhur nën burimet. Goditi shenjën plus nën @ medias.

Kjo ju jep këtë panel opsionesh:

menyja e pyetjeve të mediave në xhepin e ëndrrave

Ju mund të përcaktoni kushte për pyetjet e mediave, p.sh. pajisjet ku ato aplikojnë, orientimin, zgjidhjen dhe shumë më tepër. Ju gjithashtu mund të shtoni kushte të shumta me shenjën plus.

Ajo që është më e rëndësishme për shembullin tonë është max-gjerësi vendosjen. Me këtë, ju jeni në gjendje të përcaktoni CSS porosi që do të zbatohet vetëm për një madhësi të caktuar të ekranit max.

Le të themi se doni të rregulloni gjërat së pari në telefon, kështu që të shkruani një max-gjerësi me 375 piksele. Kur ta bëni këtë, mund ta shihni kodin CSS në fund.

krijoni pyetje për media në dreamweaver

Whatfarë do të ndodhë gjithashtu kur të klikoni Ne rregull është që një vijë jeshile të shfaqet në pjesën e sipërme të ekranit. Kjo paraqet vizualisht kërkesën e mediave. Klikoni atë dhe ekrani automatikisht hidhet në atë madhësi.

krijoni pyetje mediatike në ëndërrimtarin

Hapi 13. Shtoni CSS me kusht

Për të korrigjuar dizajnin për celular, gjëja e parë që duhet të bëjmë është eliminimi i kodit që bën që të dy elementët në sit të sistemohen pranë njëri-tjetrit. Nuk ka hapësirë ​​të mjaftueshme për këtë.

Ju mund ta bëni këtë në të njëjtën mënyrë si keni manipuluar CSS më parë, vetëm kësaj radhe keni aktivizuar një kërkesë për media ndërsa e bëni këtë.

Para së gjithash – lundroni tek elementi në pamjen tuaj DOM. Nga atje krijoni një përzgjedhës të ri CSS për të. Pastaj, vendosni gjerësiauto, shketasnje (për ta ndaluar atë të shkojë majtas) dhe shtoni disa mbushje në anët në mënyrë që përmbajtja të mos kufizohet në skajin e ekranit.

dizajn i korrigjuar i celularit

Duket shumë më mirë, apo jo? Në të njëjtën mënyrë, mund të ndryshoni CSS të të gjithë elementëve të tjerë në faqe për t’i bërë të gjithë të duken si duhet.

Kjo është në thelb ajo për pyetjet në media. Ju mund të përdorni të njëjtën metodë për të rregulluar paraqitjen në tableta dhe madhësi të tjera.

Këshillë pro: Mos optimizoni për pajisje të caktuara dhe madhësitë e tyre, përkundrazi krijoni pyetje për media në varësi të paraqitjes. Kjo do të thotë të luani me madhësinë e ekranit dhe të shtoni pyetje në ato pika kur paraqitja nuk duket më mirë.

Një gjë tjetër: Ju gjithashtu mund të krijoni pyetje për media pak më lehtë duke përdorur madhësitë e pajisjeve të paravendosura në këndin e poshtëm dhe duke klikuar në simbol plus në krye kur të keni gjetur një pikë ku dëshironi të shtoni një.

krijoni pyetje për media përmes shkurtoreve në dreamweaver

Hapi 14. Ngarko faqen tuaj në server

Ne ju rekomandojmë të përdorni Bluehost (lidhje e filialit) për të pritur faqen tuaj të Dreamweaver.

Pasi të keni mbaruar me pjesën e projektimit, ju jeni gati shumë për të ngarkuar faqen në serverin tuaj. Siç u përmend në fillim, Dreamweaver gjithashtu e bën këtë shumë të lehtë.

Së pari, shkoni tek Sajti> Menaxhoni faqet. Zgjidhni faqen tuaj të tanishme nga menuja dhe zgjidhni redaktoj në fund të majtë. Në dritaren e mëposhtme, klikoni mbi Servers.

konfigurimi i serverit të largët në Dreamweaver

Futni të gjitha të dhënat e rëndësishme për t’u lidhur me serverin tuaj FTP. Emri varet nga ju, pjesa tjetër (adresa FTP, emri i përdoruesit, fjalëkalimi) vjen nga ofruesi juaj i pritjes. Mos harroni të specifikoni se cili direktori për të vendosur skedarët dhe adresën e internetit të faqes tuaj live! Pjesa e fundit është e rëndësishme në mënyrë që Dreamweaver të krijojë lidhje të brendshme me faqen përkatëse.

nën i përparuar keni disa mundësi më shumë (nëse duhet të ngarkoni skedarë automatikisht pas ruajtjes). Zakonisht mund t’i mbash gjërat ashtu siç janë. hit Save dy herë dhe ju jeni bërë.

Tani shkoni në Files panel (ose në anën e sipërme të djathtë ose përmes Dritarja> Skedarët) dhe klikoni në simbolin më të largët të majtë për t’u lidhur me serverin tuaj:

ngarkoni faqen në server të largët në dreamweaver

Pasi të jetë krijuar lidhja, zgjidhni skedarët që dëshironi të ngarkoni dhe klikoni në shigjetën lart-drejtuese për ta bërë këtë. Pasi të bëhet kjo, faqja juaj duhet të jetë e disponueshme nga adresa juaj e internetit.

Te lumte! Sapo keni ndërtuar dhe ngarkuar një sit të thjeshtë me Dreamweaver!

Tutorial për Dreamweaver – Fjalët përfundimtare

Dreamweaver është një program fantastik për të krijuar faqe interneti. Ai kombinon një ndërfaqe intuitive të përdoruesit me një redaktues të plotë të kodit. Përmes kësaj përzierjeje, ua bën të lehtë fillestarëve, ndërmjetësve dhe përdoruesve të përparuar njësoj të krijojnë uebfaqe me cilësi të lartë.

Në këtë tutorial Dreamweaver për fillestarët, ne ju kemi prezantuar me Dreamweaver dhe aftësitë e tij. Ne ju kemi treguar se si ta vendosni programin dhe të filloni me faqen tuaj të parë. Ju keni mësuar se si të krijoni një strukturë bazë HTML dhe ta stiloni atë me CSS. Ne gjithashtu morëm përsipër se si ta bëjmë një faqe interneti të përgjegjshme dhe ta ngarkojmë në serverin tuaj.

Tani keni një kuptim të plotë se si funksionon Dreamweaver dhe si mund ta përdorni atë për të krijuar një faqe në internet. Tani varet nga ju që të zhyteni më thellë dhe të zbuloni hapat e ardhshëm.

Mos harroni: Dreamweaver është vetëm një mënyrë për të bërë një faqe në internet. Ka shumë më tepër dhe këtu mund të gjeni shumë informacione. Paç fat!

A keni përdorur Dreamweaver më parë? Cili eshte mendimi juaj? Thingdo gjë për të shtuar më sipër? Na tregoni në seksionin e komenteve më poshtë!

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