Výukový program Dreamweaveru


Výukový program Dreamweaveru, ktorý vytvára webovú stránkuAko viete, táto stránka je o tom, ako vytvoriť webovú stránku. Pomocou WordPress, Joomla alebo Drupal sa môžete učiť rôznymi spôsobmi. Máme dokonca návod, ako používať čisto HTML ako za starých čias (samozrejme s najnovšou verziou HTML5). V tomto tutoriále Dreamweaver pre začiatočníkov sa naučíte ďalší.


Pre tých, ktorí to nevedia, je Dreamweaver aplikácia, ktorá vám umožňuje navrhovať, kódovať a spravovať webové stránky. Zaujímavé je, že Dreamweaver ponúka možnosť písania kódu, ako aj vytvorenie webovej stránky pomocou vizuálneho rozhrania.

V tomto tutoriále Dreamweaver sa naučíte všetko, čo potrebujete vedieť, aby ste mohli začať vytvárať webové stránky s Dreamweaverom. Dozviete sa o programe a o tom, čo môže robiť, upozorňuje na hlavné body a ako ho nastaviť. Potom nájdete podrobného sprievodcu o tom, ako vytvoriť jednoduchú webovú stránku pomocou Dreamweaveru, ako ju urobiť mobilnou a potom ju nahrať na server..

Bude to dlhá cesta. Budete však prekvapení, ako rýchlo sa dostanete do tohto veľmi intuitívneho programu.

Contents

Čo je Dreamweaver a čo môže robiť?

Na povrchu je Dreamweaver IDE (Integrated Development Environment). To znamená, že ide o softvér, ktorý kombinuje rôzne nástroje na uľahčenie webového dizajnu a vývoja.

Zvláštnosťou je to, že je niekde medzi redakčným systémom (kde všetko ovládate prostredníctvom svojich webových stránok pomocou vizuálneho rozhrania) a editorom čistých kódov. Takto fungujú rôzne časti.

Vytvárajte webové stránky prostredníctvom vizuálneho návrhového rozhrania

Sada nástrojov vizuálneho dizajnu v podstate umožňuje vytvárať webové stránky pomocou myši. Umožňuje vám umiestniť prvky webových stránok tak, ako vytvoríte rozloženie v programe Word. V zásade vidíte svoj web tak, ako by ste videli v prehliadači, ale zároveň máte možnosť s ním manipulovať.

To je veľmi užitočné, pretože vám to umožňuje rýchlo a bez toho, aby ste museli písať jediný riadok kódu, vytvoriť kostru webovej stránky. Namiesto toho Dreamweaver automaticky vytvorí potrebný kód. Teoreticky tak môžete zostaviť celú webovú stránku ručne a nahrať ju na svoj server.

Na druhej strane, ak ste schopní kódovania, Dreamweaver má na to všetky potrebné nástroje.

Funguje ako plnohodnotný editor kódu

Druhou časťou Dreamweaveru je plne vybavený editor kódu. Je vybavený všetkými štandardnými funkciami vrátane:

  • Zvýraznenie syntaxe – To znamená, že Dreamweaver zvýrazňuje rôzne prvky (napríklad operátory, premenné atď.) V rôznych farbách, aby sa kód ľahšie čítal a opravoval..
  • Dokončenie kódu – Dokončenie kódu funguje podobným spôsobom ako automatické doplňovanie vo vašom telefóne. Začnite písať a editor vytvorí návrhy na to, čo sa snažíte napísať. Týmto spôsobom nemusíte všetko písať úplne.
  • Zlyhanie kódu – Zlyhanie kódu je ďalšou funkciou na uľahčenie čítania kódu. Umožňuje vám vizuálne zmenšiť časti kódu, keď ich nepotrebujete. Týmto spôsobom nemusíte prechádzať celým súborom, ale môžete sa zaoberať iba časťami, na ktorých musíte pracovať.

Dreamweaver podporuje najdôležitejšie jazyky pre návrh webových stránok (HTML5, CSS, JavaScript, PHP) a oveľa viac.

Najlepšia časť: Ak vo svojom kóde zmeníte čokoľvek, Dreamweaver ho automaticky zobrazí aj na vizuálnej strane. Môžete to vidieť bez toho, aby ste museli nahrávať svoje súbory na server alebo spustiť prehliadač.

Existuje mnoho ďalších funkcií a mnohé z nich uvidíte v akcii v nadchádzajúcom tutoriále Dreamweaver pre začiatočníkov.

Proces nastavenia Dreamweaveru a proces navrhovania webových stránok (krok za krokom)

Ako prvý krok musíte získať Dreamweaver z oficiálnych webových stránok spoločnosti Adobe.

Bezplatnú skúšobnú verziu môžete získať tu alebo od klienta Creative Cloud.

Dreamweaver tutoriál pre ceny začiatočníkov

Krok 1. Stiahnite a nainštalujte

Keď získate program z oficiálnej webovej stránky, stiahnite si inštalačný súbor, spustite ho a postupujte podľa pokynov.

Ak už používate službu Creative Cloud (tak ako sme), môžete jednoducho kliknúť vyskúšať vnútri klienta. Po dokončení inštalácie kliknite na tlačidlo OK Spustiť skúšku.

Krok 2. Prvé spustenie

Pri prvom spustení Dreamweaveru sa zobrazí táto obrazovka.

prvé spustenie Dreamweaveru

Ak ste tento program ešte nikdy nepoužili, vyberte Nie, som nový. Keď tak urobíte, Dreamweaver vás prevedie sprievodcom nastavením. Prvým krokom je zvoliť, či sa pracovný priestor použije pre vývojárov alebo štandardný pracovný priestor.

on-line sprievodca Dreamweaver vyberie pracovný priestor

Keďže ide o úvodný návod pre Dreamweaver, vyberte štandardnú verziu. Potom si môžete vybrať farebný motív pre svoj pracovný priestor zo štyroch rôznych možností.

on-line sprievodca Dreamweaver vyberie farebnú schému

Posledným krokom je výber, či začať s ukážkovým súborom, novým alebo existujúcim projektom, alebo si pozrieť príručku.

Dreamweaver palubný sprievodca posledným krokom

Vyberte, či chcete začať s novým alebo existujúcim priečinkom a ste hotoví s procesom nastavenia. Dobrá práca!

Teraz začnime projekt a naučíme sa, ako vytvoriť web s Dreamweaverom.

Krok 3. Spustite nový web

Prvým krokom je vytvorenie nového webu. Z tohto dôvodu choďte na Site> New Site. Dostanete sa na túto obrazovku:

vytvoriť novú stránku v Dreamweaveri

Prvým krokom je pomenovanie stránok. Potom si musíte vybrať, kam ho chcete uložiť. Je to len na vás, ale zvyčajne má zmysel ponechávať všetky projekty na jednom mieste kvôli jednoduchosti.

Máte tiež možnosť priradiť svoj nový projekt k úložisku Git. To môže byť dobrý nápad, pretože vám to dá kontrola verzií ale teraz ho môžete preskočiť.

Budeme sa venovať všetkému pod servery na ľavej strane neskôr. To isté s Spracovatelia CSS, čo je dôležité iba pri používaní taká vec.

Čo je pre nás dôležité, je Miestne informácie pod Pokročilé nastavenia.

povoliť predvolený priečinok s obrázkami v Dreamweaveri

Nezabudnite kliknúť na ikonu priečinka napravo od miesta, kde sa zobrazuje Predvolený priečinok Images. Potom prejdite do svojho novo vytvoreného adresára lokality, otvorte ho a vytvorte nový priečinok s názvom snímky a vyberte ho ako predvolený priečinok. Takto Dreamweaver automaticky ukladá obrázky spojené s vašimi stránkami.

To je teraz, klikni Uložiť vrátiť sa do svojho pracovného priestoru.

Krok 4. Vytvorte svoj domovský súbor

Teraz, keď ste vytvorili webovú stránku projektu, je čas na prvý súbor. Začneme úvodnou stránkou.

Ak vám Dreamweaver neponúka samotnú možnosť, prejdite na adresu Súbor> Nový. Môžete buď vytvoriť úplne nový súbor, alebo použiť existujúcu šablónu. Program prichádza s niekoľkými z nich (pozri Štartovacie šablóny). Momentálne namiesto toho vytvoríme nový.

vytvoriť nový súbor v Dreamweaveri

HTML je predvolene nastavené a môžete ho nechať tak, ako je. Pri názve dokumentu zadajte index.html a zvoliť vytvoriť. Dostanete sa na nasledujúcu obrazovku.

nový projekt v Dreamweaveri

Toto je klobúk, ktorý sme spomenuli na začiatku: živý pohľad na to, ako vyzerá váš web (momentálne prázdny) a kód za ním. Tiež si všimnete, že Dreamweaver automaticky vytvoril niektoré základné značky HTML, na ktorých môžete stavať. Urobme to hneď teraz?

Krok 5. Vytvorte hlavičku

Ak chcete na stránku vložiť prvok, musíte najskôr vybrať jeho umiestnenie. Buď kliknite na prázdnu stránku (Dreamweaver automaticky vyberie prvok, ak tak urobíte) alebo umiestnite kurzor do rovnakého prvku v kódovej časti obrazovky.

Potom musíte ísť do insert v pravom hornom rohu. Získate tak zoznam bežných prvkov HTML a stránok, ktoré môžete pridať na svoju stránku. Posuňte zobrazenie nadol, kým sa nezobrazí hlavička ako možnosť.

vložiť element hlavičky do Dreamweaveru

Jednoduché kliknutie vloží na stránku. Vidíte to aj vo vnútri dokumentu HTML.

hlavička viditeľná vo vizuálnom rozhraní a editore kódu

Jednoduché, správne?

Teraz zmeníte text v hlavičke a zmeníte ho aj na nadpis. Pre obidve – najprv označte text v editore kódu dole.

označte text hlavičky v Dreamweaveri

Potom sa vráťte na stránku insert, kliknite na šípku vedľa položky nadpis a vyberte si H1. Týmto sa zalomí názov stránky do značky H1 HTML. Ďalšie informácie o značkách nadpisov nájdete v časti tento článok.

Potom môžete zadať aj názov svojej stránky. Na svojej skutočnej webovej stránke by ste si vybrali niečo popisné s kľúčovými slovami a nielen Vitajte na mojom testovacom webe ako v príklade.

zmenená hlavička v Dreamweaveri

Dobre, práve ste vytvorili hlavičku stránky! Momentálne to vyzerá trochu surovo, takže to zmeňme ďalej prostredníctvom CSS.

Krok 6. Vytvorte súbor CSS

Ak to nepoznáte, CSS je časť, ktorá poskytuje všetky štýly na webovej stránke. To vám umožní definovať farby, rozmery prvkov, typy a veľkosti písma a peklo oveľa viac. Chceme použiť označenie, aby sme rozšírili názov našej stránky a tiež sa naučili, ako zmeniť CSS v Dreamweaveri.

Teoreticky môžete CSS pridať priamo do dokumentu HTML. Existuje oveľa menej elegantná možnosť, že to, čo urobíme, je vytvorenie vyhradeného súboru pre všetky štýly CSS celého webu..

Prvým krokom je dať vašej novej hlavičke triedu alebo ID CSS. Počas tohto procesu vás Dreamweaver tiež vyzve na vytvorenie súboru so štýlmi. Prejdite do ponuky DOM v pravej dolnej časti obrazovky, v ktorej je uvedená celá štruktúra stránok. Uistite sa, že je vybratá hlavička.

V zobrazení naživo sa teraz zobrazí modrá farba s malým štítkom a znamienkom plus v dolnej časti.

pridať súbor css do Dreamweaveru

Kliknite na znamienko plus a zadajte #header v poli, ktoré sa otvára. Značka hasht znamená, že priraďujete id na rozdiel od triedy. Stlačte Enter. V úvodnej ponuke namiesto Definovať na stránke vybrať Vytvorte nový súbor CSS. V rozbaľovacej ponuke vyberte položku Prehliadať a prejdite do priečinka svojich stránok. Potom napíšte style.css (čo je štandardný názov pre šablóny so štýlmi) Názov súboru pole a zasiahla Uložiť.

vytvorte hárok so štýlmi v Dreamweaveri

Keď teraz vyberiete ok, v hornej časti živého zobrazenia sa zobrazí nový súbor. Odtiaľto ju môžete prezerať a upravovať. Bude tiež prepojený s sekcii HTML časti vašej stránky.

šablóna štýlov pridaná na webovú stránku

Úžasné vačice! Teraz ste pripravení zmeniť štýl svojej stránky.

Krok 7. Vytvorte selektor CSS pre názov stránky

Prvá vec, ktorú chcete urobiť, je zmeniť písmo nadpisu a tiež ho vystrediť. Najprv musíte vytvoriť nový selektor CSS. Selektor je názov prvku na našej stránke, ku ktorému môžete priradiť vlastnosti, napr. Farbu, veľkosť a ďalšie.

Svoj nadpis H1 označte v zobrazení DOM v pravom dolnom rohu (ako ste to urobili s hlavičkou predtým). Potom nad tým zvoľte Dizajnér CSS.

pripraviť štýl pre prvok nadpisu

Ak chcete vytvoriť selektor CSS, kliknite na riadok, kde je uvedené písmeno Svoliči a potom kliknite na symbol plus. Týmto by ste mali automaticky navrhnúť selektora, ktorý ste pomenovali #header h1.

vytvoriť css selektor v Dreamweaver

Stlačením klávesu Enter ju vytvoríte. hotový!

Rýchla poznámka: pre všetkých nových používateľov CSS znamená tento selektor zacielenie na názov prvku h1 vnútri prvok sa volá #header. Takto sa všetko, čo zadáte ako CSS, použije iba na písaný text a nie na prvok hlavičky celkovo.

Krok 8. Zmeňte nadpis nadpisu

Teraz, keď máte selektor, môžete mu priradiť vlastnosti. Ak poznáte cestu okolo CSS, môžete jednoducho zadať označenie style.css a program sa o to automaticky postará.

Pre menej skúsených používateľov je Dreamweaver tiež skutočne jednoduchý. Zostaňte na Dizajnér CSS a zrušte začiarknutie políčka Show Set. Ak tak urobíte, odomkne sa množstvo ďalších možností.

povoliť možnosti CSS v Dreamweaveri

Pomocou nových tlačidiel si môžete vybrať veľa vlastností CSS z oblastí rozloženia, textu, orámovania a pozadia. viac Tlačidlo umožňuje zadať vlastné pravidlá.

Ak chcete zmeniť typ písma, kliknite na ikonu text možnosť hore (alternatívne posuňte zobrazenie nadol). V nadchádzajúcich možnostiach prejdite kurzorom myši font-family a kliknite na predvolené písmo.

zmena rodiny písma v Dreamweaveri

Získate tak niekoľko možností pre bežné písma vrátane ich záložných verzií (v prípade, že prehliadač používateľa nedokáže zobraziť primárne písmo). Možno budete chcieť kliknúť na Spravovať písma v dolnej časti sa dostanete do tejto ponuky:

adobe edge web font

Tu si môžete vybrať bezplatné písma od spoločnosti Adobe Služba Edge Web Fonts. Vyhľadajte písmo podľa názvu alebo pomocou mnohých možností filtra na ľavej strane zúžte výber, kým nenájdete niečo.

Kliknutím na ktorékoľvek písmo ho označíte na zahrnutie do Dreamweaveru. Keď tak urobíte, môžete ich použiť priamo alebo ísť na Balíky vlastných písiem definovať svoje vlastné núdzové písma.

vytvárať vlastné komíny fontov v Dreamweaveri

Pre túto chvíľu jednoducho stlačte hotový a potom kliknite na predvolené písma znova. Tentokrát vyberte vami vybrané vlastné písmo a voilá – zmena je vykonaná vrátane všetkých potrebných kódovaní.

zmenené písmo v Dreamweaveri

Ak kliknete na ikonu style.css v hornej časti uvidíte, že boli pridané aj všetky označenia.

aktualizovaná šablóna štýlov v Dreamweaveri

Krok 9. Vycentrujte nadpis a zmeňte jeho veľkosť

Text by mohol stále vyzerať lepšie. Ďalšou úlohou je vycentrovať ho a zväčšiť veľkosť písma. Na tento účel môžete použiť aj inú funkciu s názvom Rýchle úpravy.

Ak ju chcete použiť, prejdite do zobrazenia kódu a kliknite pravým tlačidlom myši na časť, ktorú chcete upraviť. V tomto prípade je to na

konzola.

otvorte menu rýchlej úpravy v Dreamweaveri

Tu si vyberte Rýchle úpravy na vrchu. Tým sa pod ním otvorí CSS priradený k tomuto prvku. Teraz môžete zadať ďalšie vlastnosti bez toho, aby ste museli prehľadávať celý súbor so štýlmi (ktorý môže byť veľmi dlhý). Ak chcete text vycentrovať a zväčšiť, pridajte doň nasledujúci kód.

veľkosť písma: 42 px;
zarovnanie textu: stred;

Pri písaní Dreamweaver taktiež navrhne, čo sa snažíte zadať, čo ešte viac zjednoduší. Toto je funkcia dokončovania kódu uvedená vyššie.

Keď skončíte, bude to vyzerať takto:

zmena CSS pomocou rýchlej úpravy v Dreamweaveri

Upozorňujeme, že text sa už v živom zobrazení zmenil. Teraz stlačte Esc ak chcete odísť rýchlo, upravte sa a prejdite na kartu so štýlmi. Zistíte, že nový CSS bol pridaný na vhodné miesto.

Docela v pohode, správne?

Mimochodom, ak si nie ste istí, čo vlastnosť CSS znamená, jednoducho na ňu kliknite pravým tlačidlom myši a vyberte Rýchle dokumenty (alebo stlačte Ctrl + K). Dreamweaver vám potom poskytne vysvetlenie.

rýchle dokumenty Dreamweaver

Krok 10. Pridajte ďalší obsah

Vďaka tomu, čo ste sa doteraz naučili, môžete teraz vybudovať základné miesto. Kvôli tomuto tutoriálu Dreamweaver sme urobili nasledujúce:

  • Definované predvolené písma pre nadpisy a odseky
  • Pridal sa navigačný panel a vytvoril sa odkaz na jeho domovskú stránku
  • Bola pridaná položka div pre obsah s dvoma ďalšími boxmi vo vnútri
  • Presunul jednu z nich doľava a jednu do prava plavák nehnuteľnosť
  • Obmedzili svoju šírku na percentá, aby sa mohli vodorovne zarovnať
  • Naľavo bol pridaný vzorový nadpis a fiktívny text vrátane neusporiadaného zoznamu
  • Vytvoril sa formulár (použite rozbaľovaciu ponuku pod položkou insert), dve textové polia a tlačidlo odoslania
  • Pridané medzery okolo prvkov pomocou okrajov CSS a čalúnenia
  • Poskytnuté farby pozadia a hranice
  • Vytvorená päta a správa o autorských právach

Tu je výsledok:

webová stránka s pokročilým dizajnom

Kód pre príklad:

Pretože je to trochu pokročilé a nie každý bude vedieť, ako to urobiť, nájdete nižšie HTML a CSS, aby ste ich mohli sami zrekonštruovať. Najprv HTML:





index.html

 



Domov

Vzorová hlavička pre hlavný obsah

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Pozastaviť eite elit mi. V imperdiet auctor leo vitae blandit.

  • Etiam tempus urna condimentum libero varius
  • Ut komodo 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, inc. Nunc efficitur turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

Vzorová výzva na akciu!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque id est sit amet ornare. Pozastaviť eite elit mi.

Copyright © 2017 Môj imaginárny web

A potom CSS:

@charset "utf-8";

telo {
farba pozadia: # F5F5F5;
horná hranica: 0px;
pravý okraj: 0px;
margin-bottom: 0px;
ľavý okraj: 0px;
}

p,
,
ul,
ol,
Ak,
štítok,
vstup {
rodina fontov: muli, sans-serif;
typ písma: normálny;
hmotnosť písma: 300;
veľkosť písma: 17 px;
}

h1, h2, h3, h4, h5 {
rodina fontov: karla, sans-serif;
typ písma: normálny;
hmotnosť písma: 400;
textová transformácia: veľké písmená;
}

#header {
výplň: 25px;
čalúnenie: 25px;
farba pozadia: #FFFFFF;
hraničné dno: 4px pevná č. EB232F;
}

#header h1 {
rodina fontov: aguafina-script;
typ písma: normálny;
hmotnosť písma: 400;
veľkosť písma: 42 px;
zarovnanie textu: stred;
horná hranica: 0px;
margin-bottom: 0px;
textová transformácia: žiadna;
}

#navigation {
pravý okraj: auto;
ľavý okraj: auto;
maximálna šírka: 1140 px;
horná hranica: 10px;
margin-bottom: 10px;
}

#navigation a {
farba: # EB232F;
}

.Hlavná {
displej: blok;
horná hranica: 15px;
pravý okraj: auto;
ľavý okraj: auto;
okraj-spodok: 15px;
jasný: obidva;
pretečenie: auto;
maximálna šírka: 1140 px;
}

.main # main-right {
plavák: vpravo;
šírka: 37,5%;
displej: blok;
}

.main # main-left {
plavák: vľavo;
šírka: 57%;
displej: blok;
vypchávka - pravá: 20px;
}

.main # main-right .cta {
zarovnanie textu: stred;
}

.main # main-right .form {
šírka: 92%;
pravý okraj: auto;
ľavý okraj: auto;
}

# main-right .form div {
margin-bottom: 10px;
}

# main-right .form .label {

}

# main-right .form .textfield {
šírka: 100%;

}

.main # main-right #button {
zarovnanie textu: stred;
výplň: 7px;
čalúnenie: 7px;
ľavý okraj: auto;
pravý okraj: auto;
poloha: relatívna;
displej: blok;
čalúnenie doprava: 36 px;
výplň vľavo: 36 px;
hranica: žiadna;
farba pozadia: # EB232F;
farba: #FFFFFF;
kurzor: ukazovateľ;
}

.footer {
displej: blok;
výplň: 25px;
čalúnenie: 25px;
zarovnanie textu: stred;
}

Chceme to použiť ako príklad, aby sme vám ukázali ďalšie kroky. Aj keď sa to zdá komplikované, zostavili sme to rovnakým spôsobom, ako sme vám ukázali predtým.

Krok 11. Náhľad v prehliadači a na mobilnom zariadení

Ako sme to všetko urobili? V prvom rade sme pri zostavovaní webových stránok trochu viac skúsení, ako ste asi vy. Preto už mám na mysli kroky, ako vytvoriť správnu webovú stránku.

Po druhé, používame veľmi užitočnú funkciu, ktorá mi pomáha urýchliť tento proces: Prehliadač prehliadača. Dreamweaver vám umožňuje prezerať vaše webové stránky v reálnom čase v prehliadači a dokonca aj na mobilných zariadeniach.

Ak chcete začať, kliknite na tlačidlo ukážky v reálnom čase v pravom dolnom rohu.

povoliť ponuku ukážky v Dreamweaveri

Tým sa otvoria možnosti ukážky.

možnosti ukážky v reálnom čase v Dreamweaveri

Kliknutím na jedno z názvov prehliadača sa v ňom otvorí váš webový projekt. QR kód môžete naskenovať aj pomocou telefónu alebo tabletu (napríklad pomocou Firefox Quantum) alebo zadajte zobrazenú adresu do svojho prehliadača a spustite na svojom zariadení živý náhľad.

Nezabudnite, že na to musíte zadať svoje Adobe ID a heslo. Mali by ste to mať od registrácie do Dreamweaveru.

Najlepšia časť: Všetky zmeny, ktoré vykonáte v aplikácii Dreamweaver, sa automaticky zobrazia v prehliadači v rovnakom čase, ako ich vykonáte.

Ako mi to pomohlo rýchlejšie zostaviť web? Po prvé, v závislosti od veľkosti obrazovky môže byť zobrazenie v prehliadači bližšie k originálu, ako je to, ktoré vidíte v Dreamweaveri..

Po druhé, kontrola stránok v prehliadači mi umožňuje používať vývojárske nástroje na testovanie zmien.

vývojárske nástroje v prehliadači

Sú veľmi podobné tomu, čo vidíte v Dreamweaveri. Sú nám viac oboznámení, aby sme s nimi mohli pracovať rýchlejšie a kód jednoducho skopírovať a vložiť do našej šablóny so štýlmi.

Pohľad na verziu telefónu ukazuje, že je ešte veľa práce.

mobilný náhľad v reálnom čase v Dreamweaveri

To nás privádza priamo k nášmu ďalšiemu bodu.

Krok 12. Pridajte mediálne dotazy

Ak chcete, aby váš web fungoval na všetkých zariadeniach, musíte pridať tzv. Mediálne dotazy. Toto sú podmienené príkazy CSS, ktoré povoľujú prehliadačom, aby aplikovali štýl iba nad alebo pod určitými veľkosťami obrazoviek alebo na konkrétnych zariadeniach. Týmto spôsobom môžete zmeniť rozloženie na menších obrazovkách.

Zatiaľ máte definované iba globálne štýly. To znamená štýly, ktoré sa používajú na celom webe. Teraz sa naučíte, ako pridať menšie štýly pre menšie obrazovky.

Najprv choďte na Dizajnér CSS. Skontrolujte, či je vybratý súbor, do ktorého chcete pridať kód zdroje. Hit znamienko plus pod @media.

Poskytuje vám tento panel možností:

ponuka mediálnych dopytov v Dreamweaveri

Môžete definovať podmienky pre mediálne dotazy, napríklad zariadenia, na ktoré sa vzťahujú, orientácia, rozlíšenie a oveľa viac. Pomocou znamienka plus môžete pridať aj viac podmienok.

Čo je dôležitejšie pre náš príklad, je max šírkou nastavenia. Vďaka tomu môžete definovať vlastné CSS, ktoré sa budú vzťahovať iba na určitú maximálnu veľkosť obrazovky.

Povedzme, že chcete najskôr opraviť veci v telefóne, takže napíšete znak a max šírkou 375 pixelov. Keď tak urobíte, v spodnej časti uvidíte kód CSS.

vytvoriť mediálny dotaz v Dreamweaveri

Čo sa stane, keď kliknete ok znamená, že sa v hornej časti obrazovky zobrazí zelená čiara. Toto vizuálne predstavuje mediálny dopyt. Kliknite naň a obrazovka automaticky skočí na túto veľkosť.

vytvárať mediálne dotazy v Dreamweaveri

Krok 13. Pridajte podmienené CSS

Ak chceme opraviť dizajn pre mobil, musíme najskôr odstrániť kód, vďaka ktorému sa dva prvky na webe usporiadajú vedľa seba. Na to zjavne nie je dosť miesta.

Môžete to urobiť rovnakým spôsobom, ako ste predtým manipulovali s CSS. Až teraz máte aktivovaný mediálny dopyt.

Najprv – prejdite na prvok vo vašom zobrazení DOM. Odtiaľ vytvorte nový selektor CSS. Potom nastavte jeho šírka na auto, plavák na nikto (aby ste ju nezastavili vľavo) a do strán pridajte výplň, aby obsah na okraji obrazovky neohraničil.

opravený mobilný dizajn

Vyzerá oveľa lepšie, nie? Rovnakým spôsobom môžete zmeniť CSS všetkých ostatných prvkov na stránke tak, aby vyzerali správne.

V podstate ide o mediálne otázky. Rovnakú metódu môžete použiť na úpravu rozloženia na tablety a ďalšie veľkosti.

Tip pre profesionálov: Nie je optimalizovaná pre určité zariadenia a ich veľkosti. Namiesto toho vytvárajte mediálne dotazy v závislosti od rozloženia. To znamená hrať sa s veľkosťou obrazovky a pridávať otázky v tých bodoch, keď rozloženie už nevyzerá dobre.

Ešte jedna vec: Dotazy na médiá môžete vytvoriť aj ľahšie pomocou predvolených veľkostí zariadení v dolnom rohu a kliknutím na symbol plus v hornej časti, keď nájdete bod, do ktorého chcete pridať jeden..

vytvárať mediálne dotazy pomocou skratiek v Dreamweaveri

Krok 14. Odovzdajte svoje stránky na server

Odporúčame používať Bluehost (pridružený odkaz) na hosťovanie vašej stránky Dreamweaver.

Akonáhle budete hotoví s dizajnovou časťou, ste pripravení nahrať stránku na svoj server. Ako už bolo spomenuté na začiatku, Dreamweaver to tiež uľahčuje.

Najprv choďte na Site> Spravovať stránky. Vyberte svoj aktuálny web z ponuky a zvoľte editovať vľavo dole. V nasledujúcom okne kliknite na servery.

vzdialená konfigurácia servera v Dreamweaveri

Zadajte všetky dôležité údaje na pripojenie k serveru FTP. Meno je len na vás, zvyšok (FTP adresa, užívateľské meno, heslo) pochádza od vášho poskytovateľa hostingu. Nezabudnite uviesť, do ktorého adresára sa majú súbory ukladať a webovú adresu vašich živých stránok! Posledná časť je dôležitá, aby Dreamweaver mohol vytvárať interné prepojenia súvisiace s webom.

pod Pokročilé máte niekoľko ďalších možností (či sa majú súbory automaticky ukladať pri uložení). Spravidla si veci môžete nechať tak, ako sú. hit Uložiť dvakrát a ste hotoví.

Teraz choďte na súbory panel (buď na pravej hornej strane alebo cez Okno> Súbory) a kliknutím na najvzdialenejší ľavý symbol sa pripojíte k serveru:

upload stránky na vzdialený server v Dreamweaveri

Po nadviazaní spojenia vyberte súbory, ktoré chcete nahrať, a kliknite na šípku smerujúcu nahor. Po dokončení by mali byť vaše stránky dostupné z vašej webovej adresy.

Výborne! Práve ste vytvorili a odovzdali jednoduchú stránku pomocou Dreamweaveru!

Výukový program Dreamweaver – záverečné slová

Dreamweaver je fantastický program na vytváranie webových stránok. Kombinuje intuitívne užívateľské rozhranie s plnohodnotným editorom kódov. Prostredníctvom tohto mixu uľahčujú začiatočníci, stredne pokročilí a pokročilí používatelia vytváranie vysoko kvalitných webových stránok.

V tomto tutoriále Dreamweaver pre začiatočníkov sme vám predstavili Dreamweaver a jeho možnosti. Ukázali sme vám, ako nastaviť program a začať s prvým webom. Naučili ste sa, ako vytvoriť základnú štruktúru HTML a upraviť ju pomocou CSS. Tiež sme prešli, ako nastaviť mobilnú webovú stránku tak, aby reagovala a nahrala ju na váš server.

Teraz už máte solídne znalosti o tom, ako Dreamweaver funguje a ako ho môžete použiť na vytvorenie webovej stránky. Teraz je len na vás, aby ste sa hlbšie ponorili a určili ďalšie kroky.

Nezabudnite: Dreamweaver je iba jedným zo spôsobov, ako vytvoriť webovú stránku. Je ich omnoho viac a nájdete tu veľa informácií. Veľa štastia!

Použili ste už Dreamweaver? Aký je váš názor? Niečo pridať k vyššie uvedenému? Dajte nám vedieť v sekcii nižšie!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me