Dreamweaver Tutorial


Ang Dreamweaver Tutorial na lumilikha ng isang websiteTulad ng alam mo, ang site na ito ay tungkol sa kung paano gumawa ng isang website. Maaari mong malaman ang iba’t ibang mga paraan gamit ang alinman sa WordPress, Joomla o Drupal. Mayroon pa kaming isang gabay sa paggamit ng purong HTML tulad ng sa mga nakaraang araw (malinaw na may HTML5, ang pinakabagong bersyon). Sa ganitong tutorial ng Dreamweaver para sa mga nagsisimula, matutunan mo ang isa pa.


Para sa mga hindi nakakaalam, ang Dreamweaver ay isang application na nagbibigay-daan sa iyo na magdisenyo, code at pamahalaan ang mga website. Ano ang kagiliw-giliw na tungkol sa Dreamweaver ay nag-aalok ng parehong posibilidad na magsulat ng code pati na rin gumawa ng isang website gamit ang isang visual interface.

Sa ganitong gabay ng Dreamweaver, malalaman mo ang lahat na kailangan mong malaman upang simulan ang paglikha ng mga website na may Dreamweaver. Malalaman mo ang programa at kung ano ang magagawa nito, magtatampok ng mga highlight at kung paano i-set up ito. Pagkatapos nito, makakahanap ka ng isang hakbang-hakbang na gabay sa kung paano lumikha ng isang simpleng website kasama ang Dreamweaver, gawin itong mobile friendly at pagkatapos ay i-upload ito sa iyong server.

Ito ay magiging isang mahabang pagsakay. Gayunpaman, mamamangha ka sa kung gaano kabilis makakapasok ka sa napaka intuitive program na ito.

Contents

Ano ang Dreamweaver at Ano ang Magagawa nito?

Sa ibabaw, ang Dreamweaver ay isang IDE (Integrated Development Environment). Nangangahulugan ito na isang piraso ng software na pinagsasama ang iba’t ibang mga tool upang gawing mas madali ang disenyo ng web at pag-unlad.

Ano ang espesyal na ito ay na ito ay sa isang lugar sa pagitan ng isang CMS (kung saan kinokontrol mo ang lahat tungkol sa iyong website sa pamamagitan ng isang visual interface) at isang purong editor ng code. Narito kung paano gumagana ang iba’t ibang mga bahagi.

Lumikha ng mga Website sa pamamagitan ng Visual Design Interface

Ang visual na toolbox ng visual na disenyo ay nagbibigay-daan sa iyo na bumuo ng mga website gamit ang iyong mouse. Pinapayagan ka nitong maglagay ng mga elemento ng website sa paraang lumikha ka ng isang layout sa Salita. Karaniwan, nakikita mo ang iyong website tulad ng makikita mo sa isang browser ngunit mayroon ding kakayahang manipulahin ito.

Ito ay lubhang kapaki-pakinabang sapagkat pinapayagan ka nitong mabuo ang balangkas ng isang website nang mabilis at nang walang pangangailangan na magsulat ng isang linya ng code. Sa halip, ang Dreamweaver ay awtomatikong lilikha ng kinakailangang code para sa iyo. Sa ganoong paraan, ayon sa teorya, maaari mong pagsamahin ang isang buong website sa pamamagitan ng kamay at i-upload ito sa iyong server.

Sa kabilang banda, kung ikaw ay may kakayahang mag-coding, ang Dreamweaver ay may lahat ng kinakailangang mga tool para sa gayon din.

Gumagana bilang isang ganap na Code Editor

Ang pangalawang bahagi ng Dreamweaver ay isang ganap na tampok na editor ng code. Nilagyan ito ng lahat ng mga karaniwang pag-andar, kabilang ang:

  • Ang pag-highlight ng sintepon – Nangangahulugan ito na ang Dreamweaver ay nagtatampok ng iba’t ibang mga elemento (tulad ng mga operator, variable, atbp.) Sa iba’t ibang kulay upang gawing mas madaling mabasa at tama ang code..
  • Pagkumpleto ng Code – Ang pagkumpleto ng code ay gumagana sa katulad na paraan tulad ng autocomplete sa iyong telepono. Simulan ang pag-type at ang editor ay gagawa ng mga mungkahi para sa kung ano ang sinusubukan mong isulat. Sa ganoong paraan, hindi mo kailangang i-type nang buo ang lahat.
  • Pagguho ng code – Ang pagbagsak ng code ay isa pang tampok para mas madaling mabasa ang code. Pinapayagan ka nitong biswal na pag-urong ng mga bahagi ng iyong code kapag hindi mo ito kailangan. Sa ganoong paraan, hindi mo kailangang mag-scroll sa buong file ngunit maaari lamang makitungo sa mga bahagi na kailangan mong magtrabaho.

Sinusuportahan ng Dreamweaver ang pinakamahalagang wika para sa disenyo ng web (HTML5, CSS, JavaScript, PHP) at marami pang iba.

Ang pinakamagandang bahagi: kung binago mo ang anumang bagay sa iyong code, awtomatikong ipapakita rin ito sa Dreamweaver. Sa ganoong paraan, makikita mo ito nang hindi kinakailangang i-upload ang iyong mga file sa isang server o sunugin ang browser.

Marami pang mga tampok at makikita mo ang marami sa kanila na kumikilos sa paparating na tutorial ng Dreamweaver para sa mga nagsisimula.

Dreamweaver Setup at Proseso sa Pagdisenyo ng Website (Hakbang-hakbang)

Bilang isang unang hakbang, kailangan mong makakuha ng Dreamweaver mula sa opisyal na website ng Adobe.

Maaari kang makakuha ng isang libreng pagsubok dito o mula sa iyong kliyente ng Creative Cloud.

pangarap na tutorial para sa mga nagsisimula ng pagpepresyo

Hakbang 1. I-download at I-install

Kapag nakuha mo ang programa mula sa opisyal na website, i-download lamang ang file ng pag-install, isagawa ito at sundin ang mga tagubilin.

Kung gumagamit ka na ng Creative Cloud (tulad namin), maaari mong i-click lamang Subukan sa loob ng kliyente. Pagkatapos, kapag tapos na ang pag-install ng programa, mag-click Simulan ang Pagsubok.

Hakbang 2. Unang Startup

Kapag una mong sinimulan ang Dreamweaver, makikita mo ang screen na ito.

pangarap na startweaver

Kung hindi mo pa ginamit ang programa, pumili Hindi, bago ako. Kapag nagawa mo, pinangungunahan ka ng Dreamweaver sa pamamagitan ng isang wizard sa pag-setup. Ang unang hakbang ay ang pumili kung gagamitin ang workspace para sa mga developer o isang standard na workspace.

pinipili ng gabay sa pangarap na pang-onboard ang workspace

Dahil ito ay isang tutorial ng nagsisimula ng Dreamweaver, piliin ang karaniwang bersyon. Pagkatapos nito, maaari kang pumili ng isang tema ng kulay para sa iyong workspace mula sa apat na magkakaibang mga pagpipilian.

piniling pinapayuhan ng gabay sa pangarap na barko ang scheme ng kulay

Ang huling hakbang ay ang pagpili kung magsisimula sa isang sample file, bago o umiiral na proyekto o manood ng isang tutorial.

pangarap na gabay sa onboarding huling hakbang

Piliin upang magsimula sa isang bago o umiiral na folder at tapos ka na sa proseso ng pag-setup. Magaling!

Magsimula na tayo ng isang proyekto at alamin kung paano lumikha ng isang website kasama ang Dreamweaver.

Hakbang 3. Magsimula ng isang Bagong Site

Ang unang hakbang ay ang paglikha ng isang bagong site. Para sa, pumunta sa Site> Bagong Site. Dadalhin ka nito sa screen na ito:

lumikha ng isang bagong site sa panaginip

Ang unang hakbang ay upang bigyan ang isang pangalan ng iyong site. Pagkatapos, kailangan mong pumili kung saan i-save ito. Nasa sa iyo ito, ngunit karaniwang may katuturan upang mapanatili ang lahat ng mga proyekto sa isang lugar para sa pagiging simple.

Mayroon ka ring posibilidad na iugnay ang iyong bagong proyekto sa isang repositoryo ng Git. Ito ay maaaring maging isang magandang ideya dahil ito ay nagbibigay sa iyo kontrol ng bersyon ngunit maaari mong laktawan ito para sa ngayon.

Kami ay makitungo sa lahat ng bagay sa ilalim Mga server sa kaliwang kalaunan. Parehong kasama Mga Preprocessors ng CSS, na mahalaga lamang kapag gumagamit ka ang ganyang uri ng bagay.

Ang mahalaga sa atin Lokal na Impormasyon sa ilalim Mga Advanced na Setting.

paganahin ang mga default na folder ng imahe sa dreamweaver

Siguraduhing mag-click sa icon ng folder sa kanan kung saan sinasabi nito Folder ng Default na Larawan. Pagkatapos, pumunta sa iyong bagong nilikha na direktoryo ng site, buksan ito, lumikha ng isang bagong folder na tinatawag mga imahe at piliin iyon bilang iyong default folder. Sa ganoong paraan, mai-save ng Dreamweaver ang mga larawan na awtomatikong maiugnay sa iyong site doon.

Iyon lang ito, i-click I-save upang bumalik sa iyong workspace.

Hakbang 4. Lumikha ng Iyong Homepage File

Ngayon na lumikha ka ng isang site site, oras na para sa unang file. Magsisimula kami sa homepage.

Kung ang Dreamweaver ay hindi nag-aalok sa iyo ng pagpipilian mismo, pumunta sa File> Bago. Maaari ka ring lumikha ng isang ganap na bagong file o gumamit ng isang umiiral na template. Ang programa ay may ilan sa mga iyon (tingnan Mga template ng Starter). Sa ngayon, gagawa tayo ng bago.

lumikha ng isang bagong file sa panaginip

Ang HTML ay itinakda nang default at maaari mong iwanan na tulad ng. Para sa pamagat ng dokumento, input index.html at pumili sa Lumikha. Dadalhin ka nito sa sumusunod na screen.

sariwang proyekto sa pangarap

Ito ang sumbrero na nabanggit namin sa simula: isang live na pagtingin sa hitsura ng iyong site (blangko, sa sandaling ito) at ang code sa likod nito. Mapapansin mo rin na ang Dreamweaver ay awtomatikong lumikha ng ilang mga pangunahing markup ng HTML na maaari kang bumuo. Gawin natin iyan ngayon, dapat ba natin?

Hakbang 5. Lumikha ng isang header

Upang magpasok ng isang elemento sa pahina, kailangan mo munang piliin ang lokasyon nito. Alinmang mag-click sa walang laman na pahina (Awtomatikong pipiliin ng Dreamweaver ang elemento kung gagawin mo) o ilagay ang cursor sa parehong elemento sa bahagi ng code ng screen.

Pagkatapos nito, kailangan mong pumunta sa Ipasok tab sa kanang kanang sulok. Nagbibigay ito sa iyo ng isang listahan ng mga karaniwang HTML at mga elemento ng site na maaari mong idagdag sa iyong pahina. Mag-scroll pababa hanggang sa makita mo Header bilang isang pagpipilian.

ipasok ang elemento ng header sa panaginip

Ang isang simpleng pag-click ay sumingit sa pahina. Nakita mo rin itong lilitaw sa loob ng dokumento ng HTML.

header na nakikita sa visual interface at code editor

Simple, tama?

Ngayon ay babago mo ang teksto sa loob ng header at i-on din ito sa isang heading. Para sa pareho – markahan mo muna ang teksto sa editor ng code sa ibaba.

markahan ang header text sa panaginip

Pagkatapos nito, bumalik sa Ipasok, mag-click sa arrow sa tabi Pamumuno at pumili H1. Ibinabalot nito ang pamagat ng pahina sa isang tag na H1 HTML. Para sa karagdagang impormasyon sa mga tag ng heading, basahin Ang artikulong ito.

Pagkatapos nito, maaari ka ring mag-type sa isang pamagat para sa iyong pahina. Sa iyong tunay na website, pipiliin mo ang isang bagay na naglalarawan sa mga keyword at hindi lamang Maligayang pagdating sa Aking Website ng Pagsubok Tulad ng halimbawa.

nagbago header sa panaginip

Sa totoo lang, nilikha mo lang ang isang header ng pahina! Sa sandaling ito ay nakikita pa rin ang isang maliit na krudo, kaya magbago na sa pamamagitan ng susunod na CSS.

Hakbang 6. Lumikha ng isang CSS File

Kung sakaling hindi ka pamilyar dito, ang CSS ay ang bahagi na nagbibigay ng lahat ng mga estilo sa isang web page. Pinapayagan ka nitong tukuyin ang mga kulay, sukat ng mga elemento, mga uri ng laki at font at marami pa. Nais naming gamitin ang markup upang mapukaw ang aming pamagat ng pahina at alamin din kung paano baguhin ang CSS sa Dreamweaver.

Teoretikal, maaari kang magdagdag ng CSS mismo sa loob ng dokumento ng HTML. Mayroong maraming mas hindi gaanong matikas na pagpipilian na kung ano ang gagawin namin, na lumilikha ng isang nakatuong file para sa lahat ng estilo ng CSS ng buong site.

Ang unang hakbang ay upang bigyan ang iyong bagong header ng isang klase ng CSS o id. Sa panahon ng prosesong iyon, aanyayahan ka rin ng Dreamweaver na lumikha ng isang style sheet file. Pumunta sa menu ng DOM sa ibabang kanang bahagi ng screen na naglista ng iyong buong istraktura ng site. Siguraduhin na ang iyong header ay napili.

Sa live na view, makikita mo na ngayon na ito ay minarkahan ng asul na may isang maliit na label at isang plus sign sa ilalim.

magdagdag ng css file sa dreamweaver

I-click ang plus sign at mag-type sa # header sa bukid na magbubukas. Ang hashtag ay nangangahulugang nagtatalaga ka ng id kumpara sa isang klase. Pindutin ang enter. Sa menu ng pagbubukas, sa halip na Tukuyin sa pahina piliin Lumikha ng isang bagong CSS file. Sa pop-up, pumili Mag-browse at mag-navigate sa folder ng iyong site. Pagkatapos ay i-type style.css (na siyang pamantayang pangalan para sa mga style sheet) papunta sa Pangalan ng file bukid at hit I-save.

lumikha ng style sheet sa panaginip

Kapag napili mo na ngayon Ok, lilitaw ang isang bagong file sa tuktok ng iyong live na pagtingin. Maaari mong tingnan at i-edit ito mula doon. Ito ay maiugnay din sa seksyon ng HTML na bahagi ng iyong pahina.

style sheet idinagdag sa website

Galing possum! Ngayon ay handa ka nang baguhin ang estilo ng iyong pahina.

Hakbang 7. Lumikha ng isang Piniling CSS para sa Pamagat ng Pahina

Ang unang bagay na nais mong gawin ay upang baguhin ang font ng iyong heading at isentro din ito. Para sa mga ito, kailangan mo munang lumikha ng isang bagong tagapili ng CSS. Ang isang pumipili ay ang pangalan ng isang elemento sa aming pahina na maaari kang magtalaga ng mga katangian, e.g kulay, sukat, at marami pa.

Markahan ang iyong H1 heading sa view ng DOM sa ibabang kanan (tulad ng ginawa mo sa header bago). Pagkatapos, pumili sa itaas, pumili Taga-disenyo ng CSS.

maghanda ng estilo para sa elemento ng heading

Upang lumikha ng isang CSS selector, mag-click sa linya kung saan sinasabi nito Smga elector at pagkatapos ay mag-click sa plus simbolo. Dapat itong awtomatikong magmungkahi ng isang tagapili sa iyong pinangalanan #header h1.

lumikha ng css selector sa panaginip

Pindutin ang ipasok upang likhain ito. Tapos na!

Mabilis na tala: para sa lahat ng mga bago sa CSS, ang tagapili na ito ay nangangahulugang target mo ang elemento na pinangalanan h1 sa loob ang elementong tinawag # header. Sa ganoong paraan, kahit anong i-input mo bilang CSS ay inilalapat lamang sa nakasulat na teksto lamang at hindi sa pangkalahatang elemento ng header.

Hakbang 8. Baguhin ang Font ng Headline

Ngayon na mayroon kang isang tagapili, maaari kang magtalaga ng mga pag-aari dito. Kung alam mo ang iyong paraan sa paligid ng CSS, maaari mo lamang i-type ang markup style.css at ang programa ay awtomatikong aalagaan ito.

Para sa mga hindi gaanong nakaranas na mga gumagamit, ginagawang madali din ang Dreamweaver. Manatili sa Taga-disenyo ng CSS menu at alisan ng tsek ang kahon kung saan sinasabi Ipakita ang Set. Kapag ginawa mo, i-unlock ito ng maraming karagdagang mga pagpipilian.

paganahin ang mga pagpipilian sa css sa panaginip

Gamit ang mga bagong pindutan, maaari kang pumili ng maraming mga katangian ng CSS mula sa mga lugar ng layout, teksto, hangganan, at background. Ang Marami pa Binibigyan ka ng pindutan ng mga pagpipilian upang ma-input ang iyong sariling mga patakaran.

Upang mabago ang uri ng font, mag-click sa Teksto pagpipilian sa tuktok (Bilang kahalili, mag-scroll pababa). Sa paparating na mga pagpipilian, mag-hover over pamilya-font at mag-click sa default na font.

baguhin ang pamilya ng font sa panaginip

Bibigyan ka nito ng isang bilang ng mga pagpipilian para sa mga karaniwang font kasama ang kanilang mga fallbacks (kung sakaling ang browser ng gumagamit ay hindi maipakita ang pangunahing font). Maaaring nais mong mag-click sa Pamahalaan ang mga Font sa ibaba upang makarating sa menu na ito:

adobe gilid web font

Dito, maaari kang pumili ng mga libreng font mula sa Adobe Edge serbisyo ng Web Font. Alinmang maghanap para sa isang font sa pamamagitan ng pangalan o gamitin ang maraming mga pagpipilian sa filter sa kaliwa upang paliitin ang iyong mga pagpipilian hanggang sa makakita ka ng isang bagay.

Ang isang pag-click sa alinman sa mga typefaces ay minarkahan ito para sa pagsasama sa Dreamweaver. Kapag nagawa mo na ito, maaari mo ring magamit ang mga ito nang direkta o pumunta sa Pasadyang Font Stacks upang tukuyin ang iyong sariling mga font ng fallback.

lumikha ng pasadyang mga stack ng font sa panaginip

Sa ngayon, pindutin lamang Tapos na at pagkatapos ay mag-click sa default na mga font muli. Ang oras na ito pumili ng iyong napiling pasadyang font at voilá – ang pagbabago ay ginagawa kasama ang lahat ng kinakailangang coding.

nagbago ng font sa panaginip

Kung nag-click sa iyong style.css file sa tuktok, makikita mo na ang lahat ng markup ay naidagdag din.

na-update na style sheet sa pangarap na pangarap

Hakbang 9. Isulat ang Headline at Baguhin ang Sukat nito

Ang teksto ay maaari pa ring magmukhang mas mahusay. Ang susunod na gawain ay ang sentro nito at dagdagan ang laki ng font. Para sa na, maaari mo ring gamitin ang isa pang tampok na tinatawag Mabilis na I-edit.

Upang magamit ito, pumunta sa view ng code at mag-right click sa bahagi na nais mong i-edit. Sa kasong ito, nasa

bracket.

buksan ang mabilis na pag-edit ng menu sa panaginip

Dito, pumili Mabilis na I-edit sa taas. Bubuksan nito ang CSS na nauugnay sa elementong ito sa ibaba nito. Ngayon ay maaari kang mag-input ng mga karagdagang pag-aari nang hindi kinakailangang maghanap sa buong style sheet sheet (na maaaring maging napakatagal). Upang maisentro ang teksto at gawin itong mas malaki, idagdag ang sumusunod na code.

laki ng font: 42px;
align ng teksto: gitna;

Kapag nag-type, ang Dreamweaver ay gagawa rin ng mga panukala para sa kung ano ang sinusubukan mong i-input, na ginagawang mas madali. Iyon ang tampok na pagkumpleto ng code na nabanggit kanina.

Kapag tapos ka na, magiging ganito ang hitsura:

baguhin ang css sa pamamagitan ng mabilis na pag-edit sa panaginip

Tandaan na ang teksto ay nagbago na sa live na view. Ngayon, pindutin Si Esc upang mag-iwan ng mabilis, mag-edit at magtungo sa style sheet. Malalaman mo na ang bagong CSS ay naidagdag sa naaangkop na lugar.

Medyo cool, tama?

Sa pamamagitan ng paraan, kung hindi ka sigurado sa kung ano ang ibig sabihin ng isang pag-aari ng CSS, i-right-click ito at pumili Mabilis na Dok (o pindutin Ctrl + K). Ang Dreamweaver ay magbibigay sa iyo ng paliwanag.

nangangarap na mabilis na mga doc

Hakbang 10. Magdagdag ng Higit pang Nilalaman

Sa iyong natutunan hanggang ngayon, maaari ka na ngayong magtayo ng isang masamang lugar. Para sa kapakanan ng Tutorial na Dreamweaver na ito, nagawa namin ang sumusunod:

  • Tinukoy na default na mga font para sa mga heading at talata
  • Nagdagdag ng isang nabigasyon bar at lumikha ng isang link sa homepage dito
  • Nagdagdag ng isang kahon ng div para sa nilalaman na may dalawang higit pang mga kahon sa loob
  • Inilipat ang isa sa kanila sa kaliwa at isang kanan kasama ang lumutang pag-aari
  • Limitado ang kanilang lapad sa mga porsyento upang maaari nilang ihanay nang pahalang
  • Nagdagdag ng isang sample heading at dummy text sa kaliwa kasama ang isang hindi nakakaugnay na listahan
  • Nilikha ang isang form (gamitin ang menu ng drop-down sa ilalim Ipasok), dalawang patlang ng teksto at isang pindutan ng isumite
  • Idinagdag ang puwang sa paligid ng mga elemento sa pamamagitan ng CSS margin at padding
  • Nagbigay ng mga kulay at hangganan ng background
  • Nilikha ang isang footer at isang mensahe ng copyright

Narito ang resulta:

website na may advanced na disenyo

Code para sa Halimbawa:

Dahil ito ay medyo advanced at hindi lahat ay malalaman kung paano ito gawin, mahahanap mo ang HTML at CSS sa ibaba upang maaari mo itong muling itayo para sa iyong sarili. Una ang HTML:





index.html

 



Bahay

Halimbawang Paunang pataas para sa Pangunahing Nilalaman

Si Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est am am or orare. Suspendisse eget elit mi. Sa imperdiet auctor leo vitae blandit.

  • Uri ng urus ng uram na condimentum libero
  • Ut commodo risus finibus
  • Duis lioo, 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. Ang Vestibulum id auctor eros, nec porttitor odio. Nunc efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Halimbawang Tumawag sa Aksyon!

Si Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est am am or orare. Suspendisse eget elit mi.

Copyright © 2017 Ang Aking Imahinasyong Website

At pagkatapos ay ang CSS:

@charset "utf-8";

katawan {
kulay ng background: # F5F5F5;
margin-tuktok: 0px;
margin-kanan: 0px;
margin-ibaba: 0px;
kaliwang margin: 0px;
}

p,
a,
ul,
ol,
li,
tatak,
input {
font-family: muli, sans-serif;
style ng font: normal;
bigat ng font: 300;
laki ng font: 17px;
}

h1, h2, h3, h4, h5 {
font-family: karla, sans-serif;
style ng font: normal;
bigat ng font: 400;
pagbabago ng teksto: malalaking titik;
}

#header {
padding-tuktok: 25px;
padding-ibaba: 25px;
kulay ng background: #FFFFFF;
hangganan-ibaba: 4px solid # EB232F;
}

#header h1 {
font-family: aguafina-script;
style ng font: normal;
bigat ng font: 400;
laki ng font: 42px;
align ng teksto: gitna;
margin-tuktok: 0px;
margin-ibaba: 0px;
pagbabago ng teksto: wala;
}

#navigation {
margin-kanan: auto;
margin-kaliwa: auto;
maximum na lapad: 1140px;
margin-tuktok: 10px;
margin-ibaba: 10px;
}

#navigation a {
kulay: # EB232F;
}

.pangunahing {
display: block;
margin-tuktok: 15px;
margin-kanan: auto;
margin-kaliwa: auto;
margin-ibaba: 15px;
malinaw: pareho;
pag-apaw: auto;
maximum na lapad: 1140px;
}

.pangunahing # pangunahing-kanan {
lumutang: tama;
lapad: 37.5%;
display: block;
}

.pangunahing # pangunahing kaliwa {
lumutang pakaliwa;
lapad: 57%;
display: block;
padding-kanan: 20px;
}

.pangunahing # pangunahing-kanan .cta {
align ng teksto: gitna;
}

.pangunahing # pangunahing-kanan .form {
lapad: 92%;
margin-kanan: auto;
margin-kaliwa: auto;
}

# pangunahing-kanan .form div {
margin-ibaba: 10px;
}

# pangunahing-kanan .form .label {

}

# pangunahing-kanan .form .textfield {
lapad: 100%;

}

.pangunahing # pangunahing-kanan #button {
align ng teksto: gitna;
padding-tuktok: 7px;
padding-ibaba: 7px;
margin-kaliwa: auto;
margin-kanan: auto;
posisyon: kamag-anak;
display: block;
kanan-padding: 36px;
padding-kaliwa: 36px;
hangganan: wala;
kulay ng background: # EB232F;
kulay: #FFFFFF;
cursor: pointer;
}

.footer {
display: block;
padding-tuktok: 25px;
padding-ibaba: 25px;
align ng teksto: gitna;
}

Nais naming gamitin ito bilang isang halimbawa upang maipakita sa iyo ang mga susunod na hakbang. Kahit na tila kumplikado, pinagsama namin ito sa parehong paraan na ipinakita namin sa iyo dati.

Hakbang 11. I-preview sa Browser at sa Mobile Device

Paano natin nagawa ang lahat ng ito? Buweno, una sa lahat, medyo may karanasan kami sa pagbuo ng mga website kaysa sa marahil. Samakatuwid, mayroon kaming mga hakbang sa aking isipan kung paano lumikha ng isang wastong web page.

Pangalawa, gumagamit kami ng isang napaka-kapaki-pakinabang na tampok na makakatulong sa akin na mapabilis ang proseso: preview ng Browser. Pinapayagan ka ng Dreamweaver na tingnan ang iyong mga web page sa real-time sa isang browser at kahit sa mga mobile device.

Upang magsimula, i-click ang pindutan ng preview ng real-time sa ibabang kanang sulok.

paganahin ang menu ng preview sa panaginip

Bubuksan nito ang mga pagpipilian sa preview.

mga pagpipilian sa preview ng real time sa dreamweaver

Ang isang pag-click sa isa sa mga pangalan ng browser ay magbubukas ng iyong proyekto sa website dito. Maaari mo ring i-scan ang QR code sa iyong telepono o tablet (halimbawa kasama Firefox Dami) o i-type ang ipinakita na address sa iyong browser upang simulan ang live na preview sa iyong aparato.

Basta magkaroon ng kamalayan, na kailangan mong i-input ang iyong Adobe ID at password para doon. Dapat ay mayroon ka mula sa pag-sign up para sa Dreamweaver.

Ang pinakamagandang bahagi: Anumang mga pagbabago na ginawa mo sa Dreamweaver ay awtomatikong lalabas sa browser nang sabay mong gawin ang mga ito.

Paano ko ito tinulungan na magkasama nang mas mabilis ang site? Una sa lahat, depende sa laki ng iyong screen, ang display sa browser ay maaaring mas malapit sa orihinal kaysa sa nakikita mo sa Dreamweaver.

Pangalawa, ang pagsuri sa site sa browser ay nagpapahintulot sa akin na gamitin ang mga tool ng developer upang subukan ang mga pagbabago.

mga tool sa developer sa browser

Ang mga ito ay halos kapareho sa kung ano ang nakikita mo sa Dreamweaver. Mas pamilyar sila sa amin upang makatrabaho namin nang mas mabilis sa kanila at kopyahin at i-paste ang code sa aming style sheet.

Ang isang pagtingin sa bersyon ng telepono ay nagpapakita na mayroon pa ring maraming gawain na dapat gawin.

mobile real time preview sa panaginip

Ito ay nagdadala sa amin ng tama sa aming susunod na punto.

Hakbang 12. Magdagdag ng Mga Query ng Media

Upang maisagawa ang iyong website sa lahat ng mga aparato, kailangan mong magdagdag ng isang tinatawag na mga query sa media. Ito ay mga kondisyong pahayag ng CSS na nagsasabi sa mga browser na mag-aplay sa estilo lamang sa itaas o sa ibaba ng ilang mga laki ng mga screen o sa mga partikular na aparato. Sa ganoong paraan, maaari mong baguhin ang layout sa mas maliit na mga screen.

Sa ngayon, tinukoy mo lamang ang mga istilo ng pandaigdig. Nangangahulugan ito ng mga estilo na inilalapat sa buong site. Ngayon matututunan mo kung paano magdagdag ng mga estilo ng kondisyon para sa mas maliit na mga screen.

Una, pumunta sa Taga-disenyo ng CSS. Siguraduhin na ang file na nais mong magdagdag ng code ay napili sa ilalim Pinagmulan. Pindutin ang pindutan ng plus sign sa ilalim @media.

Binibigyan ka nito ng panel ng mga pagpipilian na ito:

menu ng query sa media sa panaginip

Maaari mong tukuyin ang mga kondisyon para sa mga query sa media e.g ang mga aparato na inilalapat nila, orientation, resolusyon at marami pa. Maaari ka ring magdagdag ng maraming mga kondisyon kasama ang plus sign.

Ang mas mahalaga para sa aming halimbawa ay ang lapad ng maximum setting. Gamit ang, magagawa mong tukuyin ang pasadyang CSS na ilalapat lamang sa isang tiyak na laki ng screen.

Sabihin nating gusto mong ayusin ang mga bagay sa telepono, kaya nag-type ka ng isang lapad ng maximum ng 375 na mga piksel. Kapag ginawa mo, maaari mong makita ang CSS code sa ibaba.

lumikha ng query sa media sa panaginip

Ano rin ang mangyayari kapag nag-click ka Ok ay ang luntiang linya na lilitaw sa tuktok ng screen. Ito ay biswal na kumakatawan sa query sa media. I-click ito at awtomatikong tumalon ang screen sa laki na iyon.

lumikha ng mga query sa media sa panaginip

Hakbang 13. Magdagdag ng Kondisyonal na CSS

Upang iwasto ang disenyo para sa mobile, ang unang bagay na kailangan nating gawin ay ang pagtanggal ng code na gumagawa ng dalawang elemento sa site ayusin ang kanilang mga sarili sa tabi ng isa’t isa. Malinaw na walang sapat na espasyo para doon.

Maaari mo itong gawin sa parehong paraan na manipulahin mo ang CSS dati, sa oras na ito mayroon kang isang query sa media na isinaaktibo habang ginagawa mo ito.

Una sa lahat – mag-navigate sa elemento sa iyong DOM view. Mula doon lumikha ng isang bagong CSS selector para dito. Pagkatapos, itakda ang lapad sa awtomatiko, lumutang sa wala (upang itigil ito sa pagpunta sa kaliwa) at magdagdag ng ilang padding sa mga gilid upang ang nilalaman ay hindi hangganan sa gilid ng screen.

naitama ang mobile design

Mukhang mas mahusay, hindi ba? Sa parehong paraan, maaari mong baguhin ang CSS ng lahat ng iba pang mga elemento sa pahina upang maging maayos ang lahat ng mga ito.

Iyon talaga ito para sa mga query sa media. Maaari mong gamitin ang parehong pamamaraan upang ayusin ang layout sa mga tablet at iba pang mga sukat.

Pro tip: Huwag mag-optimize para sa ilang mga aparato at laki, sa halip lumikha ng mga query sa media depende sa layout. Nangangahulugan ito na maglaro kasama ang laki ng screen at pagdaragdag ng mga query sa mga puntong iyon kapag hindi na maganda ang hitsura ng layout.

Isa pang bagay: Maaari ka ring lumikha ng mga query sa media nang mas madali nang madali sa pamamagitan ng paggamit ng mga pre-set na laki ng aparato sa ibabang sulok at pag-click sa plus simbolo sa tuktok kapag nakahanap ka ng isang punto kung saan nais mong magdagdag ng isa.

lumikha ng mga query sa media sa pamamagitan ng mga shortcut sa dreamweaver

Hakbang 14. Mag-upload ng Iyong Site sa Server

Inirerekumenda namin ang paggamit Bluehost (kaakibat na link) upang ma-host ang iyong site ng Dreamweaver.

Kapag tapos ka na sa bahagi ng disenyo, handa ka nang mag-upload ng site sa iyong server. Tulad ng nabanggit sa umpisa pa lamang, ginagampanan din ito ng Dreamweaver.

Una, pumunta sa Site> Pamahalaan ang mga Site. Piliin ang iyong kasalukuyang website mula sa menu at pumili I-edit sa kaliwang kaliwa. Sa sumusunod na window, mag-click sa Mga server.

remote na pagsasaayos ng server sa panaginip

Mag-input ng lahat ng mahalagang data upang kumonekta sa iyong FTP server. Ang pangalan ay nasa iyo, ang natitira (FTP address, username, password) ay nagmula sa iyong hosting provider. Huwag kalimutan na tukuyin kung aling direktoryo ang mailalagay ang mga file at ang web address ng iyong live na site! Mahalaga ang huling bahagi upang ang Dreamweaver ay maaaring lumikha ng mga panloob na link na may kaugnayan sa site.

Sa ilalim Advanced mayroon kang ilang higit pang mga pagpipilian (kung awtomatikong mag-upload ng mga file sa pag-save). Maaari mong panatilihin ang mga bagay tulad ng mga ito. Tumama I-save dalawang beses at tapos ka na.

Pumunta ka sa Mga file panel (alinman sa kanang kanang bahagi o sa pamamagitan ng Window> Mga file) at mag-click sa pinakamalayo na kaliwang simbolo upang kumonekta sa iyong server:

mag-upload ng site sa remote server sa dreamweaver

Kapag naitatag ang koneksyon, piliin ang mga file na nais mong i-upload at i-click ang pataas na nakaturo na arrow upang gawin ito. Kapag tapos na ito, dapat makuha ang iyong site mula sa iyong web address.

Magaling! Nagtayo ka lang at nag-upload ng isang simpleng site kasama ang Dreamweaver!

Dreamweaver Tutorial – Pangwakas na Salita

Ang Dreamweaver ay isang kamangha-manghang programa upang makabuo ng mga website. Pinagsasama nito ang isang madaling gamitin na interface ng gumagamit sa isang buong editor ng code. Sa pamamagitan ng halo na ito, ginagawang madali para sa mga nagsisimula, tagapamagitan at advanced na mga gumagamit na magkamukha upang makabuo ng de-kalidad na mga website.

Sa ganitong tutorial ng Dreamweaver para sa mga nagsisimula, ipinakilala namin sa iyo ang Dreamweaver at ang mga kakayahan nito. Ipinakita namin sa iyo kung paano mag-set up ng programa at magsimula sa iyong unang site. Nalaman mo kung paano lumikha ng isang pangunahing istraktura ng HTML at istilo ito ng CSS. Nagpunta din kami kung paano gumawa ng isang mobile na tumutugon sa isang website at i-upload ito sa iyong server.

Sa ngayon mayroon kang isang matatag na pag-unawa sa kung paano gumagana ang Dreamweaver at kung paano mo magagamit ito upang makagawa ng isang website. Ngayon ay nasa iyo na sumisid ng mas malalim at malaman ang susunod na mga hakbang.

Huwag kalimutan Ang Dreamweaver ay isang paraan lamang upang makagawa ng isang website. Marami pa at maaari kang makahanap ng maraming impormasyon sa kanan dito. Buti na lang!

Nagamit mo na ba ang Dreamweaver dati? Ano ang iyong opinyon? Anumang dapat idagdag sa itaas? Ipaalam sa amin sa seksyon ng mga komento sa ibaba!

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