Apmācība sapņiem


Apmācība Dreamweaver vietnes izveidošanaiKā jūs zināt, šī vietne ir domāta tam, kā izveidot vietni. Jūs varat iemācīties dažādus veidus, izmantojot WordPress, Joomla vai Drupal. Mums pat ir rokasgrāmata par tīra HTML izmantošanu, piemēram, senatnē (acīmredzot ar HTML5, jaunāko versiju). Šajā Dreamweaver apmācībā iesācējiem jūs uzzināsit vēl vienu.


Tiem, kuri nezina, Dreamweaver ir lietojumprogramma, kas ļauj jums izveidot, kodēt un pārvaldīt vietnes. Dreamweaver ir interesanti, ka tas piedāvā gan iespēju rakstīt kodu, gan arī izveidot vietni, izmantojot vizuālo saskarni.

Šajā Dreamweaver apmācībā jūs uzzināsit visu, kas jums jāzina, lai sāktu izveidot vietnes ar Dreamweaver. Jūs iepazīsities ar programmu un tās iespējām, galvenajiem iezīmēm un to, kā to iestatīt. Pēc tam jūs atradīsit detalizētu rokasgrāmatu par to, kā ar Dreamweaver izveidot vienkāršu vietni, padarīt to draudzīgu mobilajām ierīcēm un pēc tam augšupielādēt to uz jūsu serveri.

Šis būs ilgs brauciens. Tomēr jūs pārsteigs, cik ātri jūs nokļūsit šajā ļoti intuitīvajā programmā.

Contents

Kas ir Dreamweaver un ko tas var darīt??

Uz virsmas Dreamweaver ir IDE (integrētā attīstības vide). Tas nozīmē, ka tā ir programmatūra, kas apvieno dažādus rīkus, lai atvieglotu tīmekļa dizainu un attīstību.

Īpašu padara tas, ka tas atrodas kaut kur starp CMS (kur jūs visu kontrolējat savu vietni, izmantojot vizuālo saskarni) un tīru kodu redaktoru. Lūk, kā darbojas dažādās daļas.

Izveidojiet tīmekļa vietnes, izmantojot vizuālā dizaina saskarni

Vizuālā dizaina rīklodziņš pamatā ļauj izveidot vietnes ar peli. Tas ļauj izvietot vietnes elementus tā, kā Word veidojat izkārtojumu. Būtībā jūs redzat savu vietni tāpat, kā jūs redzētu pārlūkprogrammā, bet arī spēja ar to manipulēt.

Tas ir ļoti noderīgi, jo tas ļauj ātri izveidot vietnes skeletu un nav nepieciešams rakstīt vienu koda rindu. Tā vietā Dreamweaver automātiski izveidos jums nepieciešamo kodu. Tādā veidā teorētiski jūs varat salikt visu vietni ar rokām un augšupielādēt to uz jūsu servera.

No otras puses, ja jūs protat kodēt, Dreamweaver ir arī visi nepieciešamie rīki.

Darbojas kā pilntiesīgs koda redaktors

Dreamweaver otrā daļa ir pilnībā aprīkota koda redaktors. Tas ir aprīkots ar visām standarta funkcijām, tai skaitā:

  • Sintakse izceļot – Tas nozīmē, ka Dreamweaver izceļ dažādus elementus (piemēram, operatorus, mainīgos utt.) Dažādās krāsās, lai kodu būtu vieglāk lasīt un labot..
  • Koda aizpildīšana – koda aizpildīšana darbojas līdzīgi kā automātiskā pabeigšana tālrunī. Sāciet rakstīt, un redaktors sniegs ieteikumus tam, ko mēģināt rakstīt. Tādā veidā jums viss nav pilnībā jāizraksta.
  • Kods sabrūk – Kodu sabrukšana ir vēl viena funkcija, kas atvieglo koda lasīšanu. Tas ļauj jums vizuāli sašaurināt koda daļas, kad jums tās nav vajadzīgas. Tādā veidā jums nav nepieciešams ritināt visu failu, bet var strādāt tikai ar tām detaļām, pie kurām jums jāstrādā.

Dreamweaver atbalsta svarīgākās tīmekļa dizaina valodas (HTML5, CSS, JavaScript, PHP) un vēl daudz vairāk.

Labākā daļa: ja kaut ko maināt savā kodā, Dreamweaver automātiski to parādīs arī vizuālajā pusē. Tādā veidā jūs to varat redzēt, bez nepieciešamības augšupielādēt failus serverī vai aktivizēt pārlūku.

Ir daudz vairāk funkciju, un daudzas no tām darbībā redzēsit gaidāmajā apmācības programmā Dreamweaver iesācējiem.

Dreamweaver iestatīšana un vietņu projektēšanas process (soli pa solim)

Kā pirmais solis jums jāiegūst Dreamweaver no oficiālās Adobe vietnes.

Bezmaksas izmēģinājumu varat iegūt šeit vai no sava Creative Cloud klienta.

apmācība dreamweaver iesācējiem cenu noteikšanā

1. solis. Lejupielādējiet un instalējiet

Kad saņemat programmu no oficiālās vietnes, vienkārši lejupielādējiet instalācijas failu, izpildiet to un izpildiet instrukcijas.

Ja jūs jau izmantojat Creative Cloud (kā mēs), varat vienkārši noklikšķināt Izmēģiniet klienta iekšienē. Pēc tam, kad programma ir pabeigta instalēšana, noklikšķiniet uz Sāciet izmēģinājumu.

Pirmais sākums

Pirmoreiz startējot Dreamweaver, jūs redzēsit šo ekrānu.

Dreamweaver pirmā startēšana

Ja jūs nekad iepriekš neesat izmantojis programmu, izvēlieties Nē, es esmu jauns. Kad jūs to darāt, Dreamweaver ved jūs caur iestatīšanas vedni. Pirmais solis ir izvēlēties, vai izmantot darba vietu izstrādātājiem vai standarta darbvietu.

Dreamweaver iekāpšanas ceļvedis izvēlas darbvietu

Tā kā šī ir Dreamweaver apmācības programma iesācējiem, izvēlieties standarta versiju. Pēc tam jūs varat izvēlēties krāsu motīvu darbvietai no četrām dažādām iespējām.

Dreamweaver iekāpšanas ceļvedis izvēlas krāsu shēmu

Pēdējais solis ir izvēle, vai sākt ar faila paraugu, jaunu vai esošu projektu vai skatīties apmācību.

Pēdējais solis - sapņu aušanas iekāpšanas ceļvedis

Izvēlieties sākt ar jaunu vai esošu mapi, un iestatīšanas process ir pabeigts. Labs darbs!

Tagad sāksim projektu un uzzināsim, kā izveidot vietni ar Dreamweaver.

3. solis. Sāciet jaunu vietni

Pirmais solis ir jaunas vietnes izveidošana. Tādēļ dodieties uz Vietne> Jauna vietne. Jūs nokļūsit šajā ekrānā:

sapņu tīklā izveidojiet jaunu vietni

Pirmais solis ir piešķirt savai vietnei vārdu. Pēc tam jums jāizvēlas, kur to saglabāt. Tas ir atkarīgs no jums, bet parasti ir jēga visus projektus turēt vienuviet vienkāršības labad.

Jums ir arī iespēja saistīt savu jauno projektu ar Git krātuvi. Šī var būt laba ideja, jo tā jums to dod versijas vadība bet pagaidām varat to izlaist.

Mēs tiksim galā ar visu zem Serveri vēlāk kreisajā pusē. Tas pats ar CSS priekšapstrādātāji, kas ir svarīgi tikai tad, kad lietojat tāda veida lieta.

Mums ir svarīgi Vietējā informācija zem Papildu iestatījumi.

iespējot noklusējuma attēlu mapi sapņotājā

Noteikti noklikšķiniet uz mapes ikonas labajā pusē, kur tā ir norādīta Noklusējuma mape. Pēc tam dodieties uz savu jaunizveidoto vietņu direktoriju, atveriet to, izveidojiet jaunu mapi ar nosaukumu attēlus un atlasiet to kā noklusējuma mapi. Tādā veidā Dreamweaver automātiski tur saglabās ar jūsu vietni saistītos attēlus.

Tagad tas ir, noklikšķiniet Saglabāt atgriezties savā darbvietā.

4. solis. Izveidojiet savas mājas lapas failu

Tagad, kad esat izveidojis projekta vietni, ir pienācis laiks pirmajam failam. Mēs sāksim ar mājas lapu.

Ja Dreamweaver pats jums nepiedāvā iespēju, dodieties uz Fails> Jauns. Varat izveidot pilnīgi jaunu failu vai izmantot esošu veidni. Programmai ir daži no tiem (skat Sākuma veidnes). Šobrīd tā vietā mēs izveidosim jaunu.

sapnī izveidojiet jaunu failu

HTML ir iestatīts pēc noklusējuma, un jūs to varat atstāt tādu, kāds tas ir. Ievadiet dokumenta virsrakstu indekss.html un izvēlēties Izveidot. Tādējādi jūs nokļūsit nākamajā ekrānā.

svaigs projekts dreamweaver

Tā ir cepure, kuru mēs pieminējām sākumā: tiešraidē redzams, kā izskatās jūsu vietne (šobrīd tukša), un kods, kas atrodas aiz tā. Jūs arī pamanīsit, ka Dreamweaver ir automātiski izveidojis dažus pamata HTML marķējumus, uz kuriem varat balstīties. Darīsim to tagad, vai mēs to darīsim?

5. solis. Izveidojiet galveni

Lai lapā ievietotu elementu, vispirms jāizvēlas tā atrašanās vieta. Vai nu noklikšķiniet uz tukšās lapas (Dreamweaver automātiski izvēlēsies elementu, ja jūs to darāt) vai novietojiet kursoru tajā pašā elementā ekrāna koda daļā.

Pēc tam jums jādodas uz Ievietot cilne augšējā labajā stūrī. Tādējādi tiek parādīts parasto HTML un vietnes elementu saraksts, ko varat pievienot savai lapai. Ritiniet uz leju, līdz redzat Galvene kā opcija.

Ievietojiet galvenes elementu sapņu audējā

Vienkāršs klikšķis ievieto to lapā. Jūs redzat, ka tas parādās arī HTML dokumentā.

galvene ir redzama vizuālajā saskarnē un koda redaktorā

Vienkārši, pareizi?

Tagad jūs mainīsit tekstu galvenes iekšpusē, kā arī pārvērtīsit to virsrakstā. Abiem – vispirms atzīmējiet tekstu koda redaktorā apakšā.

atzīmējiet galvenes tekstu sapņotājā

Pēc tam dodieties atpakaļ uz Ievietot, noklikšķiniet uz bultiņas blakus Virsraksts un izvēlies H1. Tādējādi lapas nosaukums tiek iesaiņots H1 HTML tagā. Papildinformāciju par virsrakstu tagiem lasiet Šis raksts.

Pēc tam jūs varat arī ierakstīt savas lapas virsrakstu. Savā reālajā vietnē jūs izvēlētos kaut ko aprakstošu, nevis tikai atslēgvārdus Laipni lūdzam vietnē My Test kā piemērā.

mainīts galvene sapņu aušotājā

Labi, jūs tikko izveidojāt lapas galveni! Pašlaik tas joprojām izskatās nedaudz neapstrādāts, tāpēc nomainīsim to, izmantojot CSS.

6. solis. Izveidojiet CSS failu

Ja jūs to neesat pazīstams, CSS ir tā daļa, kas nodrošina visu Web lapas stilu. Tas ļauj jums noteikt krāsas, elementu izmērus, fontu tipus un izmērus un daudz ko citu. Mēs vēlamies izmantot iezīmēšanu, lai izveidotu mūsu lapas virsrakstu, kā arī iemācīsimies mainīt CSS programmā Dreamweaver.

Teorētiski varat pievienot CSS tieši HTML dokumentā. Ir daudz mazāk elegants variants nekā tas, ko mēs darīsim, tas ir, lai izveidotu īpašu failu visiem vietnes CSS stiliem..

Pirmais solis ir piešķirt jaunajai galvenē CSS klasi vai ID. Šī procesa laikā Dreamweaver arī lūgs jums izveidot stila lapas failu. Ekrāna apakšējā labajā pusē dodieties uz izvēlni DOM, kurā ir norādīta visa vietnes struktūra. Pārliecinieties, ka ir atlasīta galvene.

Tiešraides skatā to tagad redzēsit zilā krāsā ar nelielu etiķeti un plus zīmi apakšā.

pievienot css failu

Noklikšķiniet uz plus zīmes un ierakstiet #header laukā, kas atveras. Sajaukums nozīmē, ka jūs piešķirat id pretstatā klasei. Nospiediet enter. Sākuma izvēlnē, nevis Definēt lapā atlasīt Izveidojiet jaunu CSS failu. Uznirstošajā logā izvēlieties Pārlūkot un dodieties uz savas vietnes mapi. Pēc tam ierakstiet stils.css (kas ir stila lapu standarta nosaukums) Faila nosaukums lauka un hit Saglabāt.

izveidot stila lapu sapņu audējā

Kad jūs tagad izvēlaties Labi, tieša skata augšdaļā parādīsies jauns fails. Tur jūs to varat apskatīt un rediģēt. Tas būs saistīts arī ar jūsu lapas HTML daļas sadaļa.

stila lapa pievienota vietnei

Satriecošs possum! Tagad jūs esat gatavs mainīt savas lapas stilu.

7. solis. Izveidojiet CSS atlasītāju lapas nosaukumam

Pirmais, ko vēlaties darīt, ir mainīt galvenes fontu un arī to centrēt. Šim nolūkam vispirms jāizveido jauns CSS atlasītājs. Atlasītājs ir elementa nosaukums mūsu lapā, kuram jūs varat piešķirt rekvizītus, piemēram, krāsai, izmēram un citam.

Atzīmējiet H1 pozīciju DOM skatā apakšējā labajā stūrī (tāpat kā jūs to izdarījāt iepriekš). Pēc tam, virs tā, izvēlieties CSS dizainers.

sagatavot pozīcijas elementa noformējumu

Lai izveidotu CSS atlasītāju, noklikšķiniet uz līnijas, kur rakstīts Svēlētāji un pēc tam noklikšķiniet uz plus simbola. Tam automātiski jāpiedāvā atlasītājs atlasītajam #header h1.

izveidot css selektoru sapņotājā

Lai izveidotu to, nospiediet taustiņu Enter. Gatavs!

Īsa piezīme: visiem atlasītajiem CSS šis atlasītājs nozīmē, ka jūs mērķējat uz nosaukto elementu h1 iekšā elements sauc #header. Tādā veidā neatkarīgi no tā, ko ievadāt kā CSS, tiek piemērots tikai rakstītajam tekstam, nevis galvenes elementam kopumā.

8. darbība. Mainiet virsraksta fontu

Tagad, kad jums ir atlasītājs, varat tam piešķirt īpašumus. Ja zināt savu ceļu ap CSS, varat vienkārši ierakstīt iezīmēšanu stils.css un programma par to automātiski rūpēsies.

Mazāk pieredzējušiem lietotājiem Dreamweaver arī padara to patiešām vienkāršu. Palieciet CSS dizainers izvēlni un noņemiet atzīmi no izvēles rūtiņas, kur teikts Rādīt komplektu. Kad to darīsit, tas atbloķēs daudz papildu iespēju.

iespējot css opcijas

Izmantojot jaunās pogas, izkārtojuma, teksta, apmales un fona apgabalos varat izvēlēties daudzus CSS rekvizītus. Vairāk poga dod jums iespēju ievadīt savus noteikumus.

Lai mainītu fonta veidu, noklikšķiniet uz Teksts opcija augšā (vai arī ritiniet uz leju). Gaidāmajās opcijās virziet kursoru virs fontu saime un noklikšķiniet uz noklusējuma fonts.

nomainīt fontu saimi

Tas jums sniegs vairākas parasto fontu iespējas, ieskaitot to rezerves daļas (ja lietotāja pārlūkprogramma nespēj parādīt primāro fontu). Iespējams, vēlēsities noklikšķināt uz Pārvaldīt fontus apakšā, lai piekļūtu šai izvēlnei:

Adobe malas tīmekļa fonti

Šeit jūs varat izvēlēties bezmaksas fontus no Adobe Pakalpojums Edge Web Fonts. Vai nu meklējiet fontu pēc nosaukuma, vai arī izmantojiet daudzās filtru opcijas kreisajā pusē, lai sašaurinātu izvēli, līdz atrodat kaut ko.

Klikšķis uz jebkura burtveidola iezīmē to iekļaušanai Dreamweaver. Kad esat to izdarījis, varat tos tieši izmantot vai doties uz Pielāgotu fontu kaudzes lai definētu savus rezerves fontus.

izveidojiet pielāgotu fontu kaudzes sapņotājā

Pagaidām vienkārši nospiediet Gatavs un pēc tam noklikšķiniet uz noklusējuma fonti atkal. Šoreiz izvēlieties izvēlēto pielāgoto fontu un voilá – izmaiņas tiek veiktas, iekļaujot visu nepieciešamo kodēšanu.

nomainīts fonts sapņotājā

Ja jūs noklikšķiniet uz jūsu stils.css faila augšpusē, redzēsit, ka ir pievienots arī viss marķējums.

atjaunināta stila lapa Dreamweaver

9. solis. Centrējiet virsrakstu un mainiet tā lielumu

Teksts joprojām varētu izskatīties labāks. Nākamais uzdevums ir to centrēt un palielināt fonta lielumu. Šim nolūkam varat izmantot arī citu funkciju – Ātrā rediģēšana.

Lai to izmantotu, dodieties uz koda skatu un ar peles labo pogu noklikšķiniet uz daļu, kuru vēlaties rediģēt. Šajā gadījumā tas ir uz

kronšteins.

atveriet ātro rediģēšanas izvēlni

Šeit izvēlieties Ātrā rediģēšana virsotnē. Tiks atvērta CSS, kas saistīta ar šo elementu zem tā. Tagad jūs varat ievadīt papildu rekvizītus, neveicot meklēšanu visā stila lapas failā (kas var būt ļoti garš). Lai tekstu centrētu un padarītu to lielāku, pievienojiet tam kodu.

fonta lielums: 42 pikseļi;
text-align: centrs;

Rakstot, Dreamweaver arī sniegs priekšlikumus tam, ko jūs mēģināt ievadīt, padarot to vēl vieglāku. Tā ir iepriekš minētā koda aizpildīšanas funkcija.

Kad esat pabeidzis, tas izskatīsies šādi:

mainīt css, izmantojot ātru rediģēšanu

Ņemiet vērā, ka teksts tiešajā skatā jau ir mainījies. Tagad nospiediet Esc ātri atstāt, rediģēt un pāriet uz stila lapu. Jūs redzēsit, ka jaunā CSS ir pievienota vajadzīgajā vietā.

Diezgan forši, pareizi?

Starp citu, ja jūs kādreiz neesat pārliecināts par to, ko nozīmē CSS īpašums, vienkārši ar peles labo pogu noklikšķiniet uz tā un izvēlieties Ātrie dokumenti (vai nospiediet Ctrl + K). Pēc tam Dreamweaver sniegs jums skaidrojumu.

dreamweaver ātri dokumenti

10. solis. Pievienojiet vairāk satura

Izmantojot līdz šim apgūto, tagad varat izveidot sākumpunktu vietni. Šīs Dreamweaver apmācības nolūkos mēs esam rīkojušies šādi:

  • Definēti noklusējuma fonti virsrakstiem un rindkopām
  • Pievienoja navigācijas joslu un izveidoja tajā saiti uz mājas lapu
  • Pievienots div lodziņš saturam ar vēl diviem lodziņiem iekšpusē
  • Vienu no tiem pārvietoja pa kreisi un vienu pa labi ar peldēt īpašums
  • Ierobežojiet to platumu līdz procentiem, lai viņi varētu horizontāli izlīdzināties
  • Kreisajā pusē pievienots virsraksta paraugs un oriģinālais teksts, ieskaitot nesakārtotu sarakstu
  • Tika izveidota veidlapa (izmantojiet nolaižamo izvēlni zem Ievietot), divi teksta lauki un poga Iesniegt
  • Pievienots atstatums ap elementiem, izmantojot CSS piemales un polsterējumu
  • Ar fona krāsām un apmalēm
  • Izveidots kājene un autortiesību ziņojums

Rezultāts:

vietne ar modernu dizainu

Piemēra kods:

Tā kā tas ir nedaudz uzlabots un ne visi zinās, kā to izdarīt, zemāk varat atrast HTML un CSS, lai jūs varētu tos pats rekonstruēt. Vispirms HTML:





indekss.html

 



Mājas

Galvenā satura virsraksta paraugs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scenlerisque id est sēdēt oficiāli. Suspendisse eget elit mi. Inperdiet 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, citur neminēts porttitor odio. Nunc activitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Aicinājuma uz darbību paraugs!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scenlerisque id est sēdēt oficiāli. Suspendisse eget elit mi.

Autortiesības © 2017 Mana iedomātā vietne

Un tad CSS:

@charset "utf-8";

ķermeņa {
fona krāsa: # F5F5F5;
augšējā robeža: 0 pikseļi;
labā mala: 0 pikseļi;
robeža-apakšdaļa: 0 pikseļi;
kreisā mala: 0 pikseļi;
}

lpp,
a,
ul,
ol,
li,
etiķete,
ievade {
fontu saime: muli, sans-serif;
fonta stils: parasts;
burtu svars: 300;
fonta lielums: 17 pikseļi;
}

h1, h2, h3, h4, h5 {
fontu saime: karla, sans-serif;
fonta stils: parasts;
burtu svars: 400;
teksta pārveidošana: lielie burti;
}

#header {
polsterējuma augšdaļa: 25 pikseļi;
polsterējuma dibens: 25 pikseļi;
fona krāsa: #FFFFFF;
apmale-apakšdaļa: 4xx ciets # EB232F;
}

#header h1 {
fontu saime: aguafina-script;
fonta stils: parasts;
burtu svars: 400;
fonta lielums: 42 pikseļi;
text-align: centrs;
augšējā robeža: 0 pikseļi;
robeža-apakšdaļa: 0 pikseļi;
teksta pārveidošana: nav;
}

# navigācija {
labā mala: auto;
margin-left: auto;
maksimālais platums: 1140 pikseļi;
augšējā robeža: 10 pikseļi;
malas robeža: 10 pikseļi;
}

#navigation a {
krāsa: # EB232F;
}

.galvenais {
displejs: bloķēt;
augšējā robeža: 15 pikseļi;
labā mala: auto;
margin-left: auto;
malas robeža: 15 pikseļi;
skaidrs: abi;
pārpilde: auto;
maksimālais platums: 1140 pikseļi;
}

.main # main-right {
pludiņš: pa labi;
platums: 37,5%;
displejs: bloķēt;
}

.galvenā # galvenā kreisā {
pludiņš: pa kreisi;
platums: 57%;
displejs: bloķēt;
polsterējums labajā pusē: 20 pikseļi;
}

.main # main-right .cta {
text-align: centrs;
}

.main # main-right .form {
platums: 92%;
labā mala: auto;
margin-left: auto;
}

# galvenā labā labā forma div {
malas robeža: 10 pikseļi;
}

# galvenā labā labā forma. iezīme {

}

# galvenā labā labā forma .textfield {
platums: 100%;

}

.galvenā # galvenā labā puse # poga {
text-align: centrs;
polsterējuma augšdaļa: 7 pikseļi;
polsterējuma dibens: 7 pikseļi;
margin-left: auto;
labā mala: auto;
amats: radinieks;
displejs: bloķēt;
polsterējums labajā pusē: 36 pikseļi;
polsterējums-kreisais: 36 pikseļi;
robeža: nav;
fona krāsa: # EB232F;
krāsa: #FFFFFF;
kursors: rādītājs;
}

.kājene {
displejs: bloķēt;
polsterējuma augšdaļa: 25 pikseļi;
polsterējuma dibens: 25 pikseļi;
text-align: centrs;
}

Mēs vēlamies to izmantot kā piemēru, lai parādītu jums nākamās darbības. Pat ja tas šķiet sarežģīti, mēs to saliekam tāpat, kā mēs jums iepriekš parādījām.

11. solis. Priekšskatījums pārlūkprogrammā un mobilajā ierīcē

Kā mēs to visu izdarījām? Pirmkārt, vietņu veidošanā mēs esam mazliet vairāk pieredzējuši nekā jūs, iespējams, esat. Tāpēc mums jau ir prātā soļi, kā izveidot pareizu tīmekļa lapu.

Otrkārt, mēs izmantojam ļoti noderīgu funkciju, kas man palīdz paātrināt procesu: pārlūka priekšskatījums. Dreamweaver ļauj pārlūkprogrammā un pat mobilajās ierīcēs reālā laikā apskatīt savas tīmekļa lapas.

Lai sāktu, noklikšķiniet uz reālā laika priekšskatījuma pogas labajā apakšējā stūrī.

iespējot priekšskatījuma izvēlni

Tas atvērs priekšskatījuma opcijas.

reāllaika priekšskatījuma opcijas sapņotājā

Noklikšķinot uz viena no pārlūka nosaukumiem, tajā tiks atvērts jūsu vietnes projekts. Jūs varat arī skenēt QR kodu ar savu tālruni vai planšetdatoru (piemēram, ar Firefox Quantum) vai ierakstiet parādīto adresi pārlūkprogrammā, lai ierīcē sāktu tiešraides priekšskatījumu.

Tikai jāapzinās, ka jums tas ir jāievada Adobe ID un parole. Tas jums būtu vajadzīgs, reģistrējoties Dreamweaver.

Labākā daļa: Visas izmaiņas, ko veicat pakalpojumā Dreamweaver, automātiski tiek parādītas pārlūkprogrammā vienlaikus ar tām.

Kā tas man palīdzēja ātrāk izveidot vietni? Pirmkārt, atkarībā no ekrāna lieluma displejs pārlūkprogrammā varētu būt tuvāk oriģinālam nekā tas, ko redzat Dreamweaver.

Otrkārt, vietnes pārbaude pārlūkprogrammā ļauj man izmantot izstrādātāja rīkus, lai pārbaudītu izmaiņas.

izstrādātāju rīki pārlūkprogrammā

Tie ir ļoti līdzīgi tam, ko redzat vietnē Dreamweaver. Viņi mums ir pazīstamāki, lai mēs varētu ar viņiem strādāt ātrāk un vienkārši nokopētu un ielīmētu kodu mūsu stila lapā.

Apskatot tālruņa versiju, redzams, ka vēl ir daudz darāmā.

mobilā reāllaika priekšskatījums Dreamweaver

Tas noved mūs pie nākamā punkta.

12. solis. Pievienojiet multivides vaicājumus

Lai jūsu vietne darbotos visās ierīcēs, jums jāpievieno tā sauktie multivides vaicājumi. Šie ir nosacīti CSS paziņojumi, kas pārlūkprogrammām liek piemērot stilu tikai virs vai zem noteiktiem ekrāna izmēriem vai konkrētās ierīcēs. Tādā veidā jūs varat mainīt izkārtojumu mazākos ekrānos.

Līdz šim jūs esat definējis tikai globālos stilus. Tas nozīmē, ka stili tiek piemēroti visai vietnei. Tagad jūs uzzināsit, kā pievienot nosacītus stilus mazākiem ekrāniem.

Pirmkārt, dodieties uz CSS dizainers. Pārliecinieties, ka zem ir atlasīts fails, kuram jāpievieno kods Avoti. Nospiediet plus zīmi zem @media.

Tas dod jums šo iespēju paneli:

multivides vaicājumu izvēlne sapņotājā

Jūs varat definēt multivides vaicājumu nosacījumus, piemēram, ierīces, uz kurām tie attiecas, orientāciju, izšķirtspēju un daudz ko citu. Varat arī pievienot vairākus nosacījumus ar plus zīmi.

Kas ir svarīgāks mūsu piemēram, ir maksimālais platums iestatīšana. Ar to jūs varat definēt pielāgotu CSS, kas attieksies tikai uz noteiktu maksimālo ekrāna izmēru.

Pieņemsim, ka vispirms vēlaties salabot lietas pa tālruni, tāpēc ierakstiet a maksimālais platums no 375 pikseļiem. Kad to darāt, apakšā varat redzēt CSS kodu.

izveidojiet multivides vaicājumu sapņu tīklā

Kas notiks arī noklikšķinot Labi ir tas, ka ekrāna augšdaļā parādās zaļa līnija. Tas vizuāli attēlo multivides vaicājumu. Noklikšķiniet uz tā un ekrāns automātiski pāriet uz šo izmēru.

izveidojiet multivides vaicājumus sapņu tīklā

13. solis. Pievienojiet nosacīto CSS

Lai labotu mobilā tālruņa dizainu, mums vispirms ir jālikvidē kods, kas abiem vietnes elementiem liek sakārtoties viens otram. Acīmredzami tam nepietiek vietas.

To var izdarīt tāpat, kā iepriekš manipulējāt ar CSS, tikai šoreiz jums ir aktivizēts multivides vaicājums, kamēr to darāt.

Pirmkārt – dodieties uz elementu DOM skatā. Pēc tam izveidojiet tam jaunu CSS atlasītāju. Tad iestatiet to platums uz auto, peldēt uz neviena (lai tas nevirzītos pa kreisi) un pievienojiet sāniem nedaudz polsterējuma, lai saturs neierobežotu ekrāna malu.

labots mobilais dizains

Izskatās daudz labāk, vai ne? Tādā pašā veidā jūs varat mainīt visu pārējo lapas elementu CSS, lai tie visi izskatās pareizi.

Tas būtībā ir mediju vaicājumi. Jūs varat izmantot to pašu metodi, lai pielāgotu izkārtojumu planšetdatoriem un citiem izmēriem.

Pro padoms: Neoptimizējiet noteiktas ierīces un to izmērus, tā vietā izveidojiet multivides vaicājumus atkarībā no izkārtojuma. Tas nozīmē, ka jāspēlē ar ekrāna izmēru un jāpievieno vaicājumi tajos punktos, kad izkārtojums vairs neizskatās labi.

Vēl viena lieta: arī multivides vaicājumus var izveidot nedaudz vienkāršāk, izmantojot iepriekš iestatītos ierīces izmērus apakšējā stūrī un noklikšķinot uz pluszīmes simbola augšpusē, kad esat atradis punktu, kur vēlaties to pievienot..

izveidojiet multivides vaicājumus, izmantojot Dreamweaver saīsnes

Augšupielādējiet savu vietni serverī

Mēs iesakām izmantot Bluehost (saistītā saite), lai mitinātu jūsu Dreamweaver vietni.

Kad esat pabeidzis dizaina daļu, jūs esat diezgan gatavs augšupielādēt vietni savā serverī. Kā jau pašā sākumā minēts, Dreamweaver to arī ļoti viegli padara.

Pirmkārt, dodieties uz Vietne> Pārvaldīt vietnes. Izvēlnē atlasiet pašreizējo vietni un izvēlieties Rediģēt kreisajā apakšā. Nākamajā logā noklikšķiniet uz Serveri.

attālā servera konfigurēšana sapņu tīklā

Ievadiet visus svarīgos datus, lai izveidotu savienojumu ar FTP serveri. Vārds ir atkarīgs no jums, pārējais (FTP adrese, lietotājvārds, parole) nāk no jūsu mitināšanas pakalpojumu sniedzēja. Neaizmirstiet norādīt, kurā direktorijā failus ievietot, un savas aktīvās vietnes tīmekļa adresi! Pēdējā daļa ir svarīga, lai Dreamweaver varētu izveidot vietnes relatīvas iekšējās saites.

Zem Advanced jums ir vēl dažas iespējas (vai faili automātiski tiek augšupielādēti pēc saglabāšanas). Parasti lietas var turēt tādas, kādas tās ir. Sist Saglabāt divreiz un esat pabeidzis.

Tagad dodieties uz Datnes panelis (augšējā labajā pusē vai caur Logs> Faili) un noklikšķiniet uz vistālāk kreisā simbola, lai izveidotu savienojumu ar savu serveri:

Augšupielādējiet vietni attālajā serverī

Kad savienojums ir izveidots, atlasiet augšupielādējamos failus un noklikšķiniet uz augšu vērstā bultiņas. Kad tas ir izdarīts, jūsu vietnei jābūt pieejamai no jūsu tīmekļa adreses.

Labi padarīts! Jūs tikko izveidojāt un augšupielādējāt vienkāršu vietni, izmantojot Dreamweaver!

Apmācība Dreamweaver – nobeiguma vārdi

Dreamweaver ir fantastiska vietņu veidošanas programma. Tas apvieno intuitīvu lietotāja saskarni ar pilnvērtīgu koda redaktoru. Izmantojot šo sajaukumu, tas ļauj viegli izveidot augstas kvalitātes tīmekļa vietnes gan iesācējiem, gan starpproduktiem, gan pieredzējušiem lietotājiem.

Šajā Dreamweaver apmācībā iesācējiem mēs esam jūs iepazīstinājuši ar Dreamweaver un tā iespējām. Mēs jums parādījām, kā iestatīt programmu un sākt darbu ar savu pirmo vietni. Jūs esat iemācījušies, kā izveidot HTML pamata struktūru un stilu, izmantojot CSS. Mēs arī pārdomājām, kā padarīt vietni mobilo atsaucīgu un augšupielādēt to uz jūsu serveri.

Tagad jums ir skaidra izpratne par to, kā Dreamweaver darbojas un kā jūs to varat izmantot vietnes izveidošanai. Tagad jūsu ziņā ir ienirt dziļāk un izdomāt nākamās darbības.

Neaizmirstiet: Dreamweaver ir tikai viens veids, kā izveidot vietni. Ir vēl daudz vairāk, un par to jūs varat atrast daudz informācijas šeit. Veiksmi!

Vai jūs iepriekš esat izmantojis Dreamweaver? Kāds ir jūsu viedoklis? Vai ir ko pievienot iepriekšminētajam? Paziņojiet mums komentāru sadaļā zemāk!

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