načítání...
nákupní košík
Košík

je prázdný
a
b

Kniha + CD: Adobe Dreamweaver CS5 -- Oficiální výukový kurz - Adobe Creative Team

Adobe Dreamweaver CS5 -- Oficiální výukový kurz
-14%
sleva

Kniha + CD: Adobe Dreamweaver CS5 -- Oficiální výukový kurz
Autor:

Nejrychlejší, nejsnadnější a nejpraktičtější způsob, jak se naučit pracovat v Adobe Dreamweaveru CS5 Naučte se také, jak tvořit statické a dynamické webové stránky, vkládat do nich ... (celý popis)


hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%hodnoceni - 0%   celkové hodnocení
0 hodnocení + 0 recenzí

Specifikace
Nakladatelství: Computer press
Médium: Kniha + CD
Rok vydání: 2010-11-15
Počet stran: 400
Rozměr: 167 x 225 mm
Úprava: 400 stran : ilustrace
Vydání: Vyd. 1.
Název originálu: Adobe Dreamweaver CS5
Spolupracovali: překlad Tereza Dusíková
Vazba: brožovaná lepená
ISBN: 9788025132531
EAN: 9788025132531
Ukázka: » zobrazit ukázku
Popis / resumé

Průvodce programem, který naučí vytvářet webové stránky pomocí HTML a CSS. Software je vhodný pro operační systém Windows a Mac.

Popis nakladatele

Nejrychlejší, nejsnadnější a nejpraktičtější způsob, jak se naučit pracovat v Adobe Dreamweaveru CS5 Naučte se také, jak tvořit statické a dynamické webové stránky, vkládat do nich grafiku, text a video, vyvíjet interaktivní aplikace či nahrávat a spravovat celé weby, a mnohem více. Zcela nový oficiální výukový kurz pro Adobe Dreamweaver CS5 obsahuje 17 lekcí, v nichž se sami krok za krokem naučíte vše od práce s texty, obrázky a odkazy až po tvorbu layoutu a navigace, včetně tvorby dynamického a interaktivního obsahu a praktického využití nových funkcí. V jednotlivých lekcích budete postupně vytvářet skutečné webové stránky. Mimoto kniha poskytuje množství tipů a technik, díky nimž budete ve své práci s Dreamweaverem produktivnější. Kniha byla oproti příručce k minulé verzi programu zcela přepracována. Autoři se v knize mimo jiné věnují těmto tématům: - Tvorba kostry stránky v HTML a její stylování v CSS - Jak na layout stránky a triky pro jeho stylování - Jak vytvořit a využít předlohy webu či položky knihovny - Formátování textů, tvorba nadpisů, seznamů a tabulek - Vkládání obrázků a inteligentních objektů Photoshopu - Tvorba všech typů odkazů a navigační nabídky - Přidání interaktivních prvků a Flashe do stránky - Interaktivní formuláře reagující na vstup uživatele - Nastavení testovacího serveru a tvorba dynamických stránek - Ladění kódu a publikování hotových stránek na Internetu Oficiální výukové kurzy vytvořené odborníky ze společnosti Adobe jsou světově nejvyhledávanějšími učebnicemi pro výuku tohoto softwaru. Pomohou vám poznat programy Adobe v akci a ovládnout je bez zbytečného tápání. Své dovednosti s nimi zdokonalujete krok po kroku, v postupech řešících vždy jasně danou činnost, efekt či problém a na profesionálních grafických materiálech, jež budou jedinečnou inspirací pro vaši práci. Kniha obsahuje prvky jak českého, tak anglického uživatelského rozhraní Dreamweaveru. Přiložené CD obsahuje materiály ke všem výukovým lekcím. (oficiální výukový kurz : [praktická učebnice od tvůrců softwaru v Adobe Systems])

Předmětná hesla
Související tituly dle názvu:
Adobe InDesign CS oficiální výukový kurz Adobe InDesign CS oficiální výukový kurz
Team Adobe Creative
Cena: 351 Kč
Adobe Dreamweaver CS4 Adobe Dreamweaver CS4
Team Adobe Creative
Cena: 341 Kč
Adobe DreamWeaver CS6: Oficiální výukový kurz Adobe DreamWeaver CS6: Oficiální výukový kurz
Team Adobe Creative
Cena: 434 Kč
Adobe Flash CS5 Professional Adobe Flash CS5 Professional
Team Adobe Creative
Cena: 427 Kč
Adobe Photoshop CS5 Adobe Photoshop CS5
Team Adobe Creative
Cena: 593 Kč
Recenze a komentáře k titulu
Zatím žádné recenze.


Ukázka / obsah
Přepis ukázky

336

TVORBA DYNAMICKÝCH

WEBOVÝCH STRÁNEK S DATY V této lekci V  této lekci se naučíte, jak dynamicky vytvořit obsah webové stránky pomocí informací uložených v tabulkách a databázích. Provedete následující: • Vytvoříte sadu záznamů z on-line dat • Dynamicky vložíte data do webové stránky • Vytvoříte sadu s hlavní a detailní stránkou • Shromáždíte data z on-line formuláře a vložíte je do databáze Dokončení této lekce vám zabere okolo 90 minut. Před tím, než začnete, seujistěte, že jste na svůj pevný disk zkopírovali soubory lekce 15, jak popisuje kapitola Začínáme na začátku této knihy. Pokud v  této lekci začínáte od nuly, pak zvolte metodu „Skoková výuka“ popsanou v kapitole Začínáme.

15


337

Dreamweaver má zabudované funkce, které vám

pomohou vytvořit interaktivní, dynamické a daty

poháněné webové stránky pomocí jednoduchých

nástrojů ve formě ukaž a klepni.


338 LEKCE 15 Tvorba dynamických webových stránek s daty

Tvorba stránek pomocí ASP, ColdFusion nebo PHP

V lekci14 jste se naučili, jak vybrat serverový model, nastavit testovací server a připojit sek online databázi. Jakmile jste připojení, Dreamweaver usnadňuje zpřístupnění těchto dat k vytvoření

dynamického obsahu.

 Poznámka: Vývoj dynamických aplikací je náročná práce, která se nemusí vydařit i  v  případě

maličkosti. Proto čtěte a následujte každý krok v této lekci velmi pečlivě.

Tvorba sady záznamů

Dalším krokem v  postupu vytváření dynamického obsahu je vytvoření sady záznamů. Sada

záznamů je pole informací vytažených z  jedné nebo více tabulek vaší databáze jako výsledek

otázky kódu webových stránek napsané v SQL.

Otázka neboli dotaz může jednoduše vypadat takto: „Ukaž mi všechny události v tabulceudálostí.“ Může být ale také složitý, například: „Ukaž mi události v tabulce, které se konají od 1. května

a které stojí méně než 100 Kč, a vypiš je sestupně podle abecedy.“ Dotaz je často také dynamický

– vytváří jej uživatel tím, že klepne na zaškrtávací pole nebo vybere přepínač, zvolí položku

v  nabídce či napíše text do nějakého textového pole (tak jako to děláte na stránce vyhledávače

Google).

Tak jako ASP, ColdFusion a PHP i SQL je robustní jazyk se svými vlastními termíny, strukturou

a syntaxí. Dreamweaver vám může pomoci napsat většinu příkazů, které budete kdy potřebovat,

ale k vykonání složitých datových rutin si budete muset najmout profesionála nebo se sami naučit

jazyk SQL. Adobe poskytuje základní instruktáž na adrese tinyurl.com/yk5xnag, nebo se můžete

podívat na tutoriály W3Schools na adrese tinyurl.com/6l43.

 Upozornění: Toto cvičení můžete dokončit pouze, pokud máte správně nakonfigurovaný testovací

server a jste připojeni k databázi greendata, jak bylo popsáno v lekci 14.

 Poznámka: Pokud začínáte v  této lekci od nuly, prohlédněte si postup „Skoková výuka“ v  kapitole

Začínáme na začátku této knihy. A poté následujte kroky tohoto cvičení.

V  tomto cvičení vytvoříte kalendář událostí v  roce 2010 dynamicky pomocí tabulky v  rámci

vašeho současného připojení k databázi.

1 Otevřete soubor udalosti.html z  kořenové složky webu. A  prozkoumejte panel Databáze

(Databases).

Připojení k databázi, které jste vytvořili dříve, není viditelné a ikona plus je šedivá, cožoznačuje, že právě nyní nemůžete vytvořit databázové spojení, i kdybyste chtěli. Stránka Události

obsahuje příponu .html, která není kompatibilní s  žádným jiným dynamickým serverovým

modelem než Ajax.


339ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

 Tip: Pokud se připojení k  databázi neobjeví, zkontrolujte panel Databáze (Databases), abyste zjistili,

jaké kroky je potřeba udělat před připojením. Ve většině případů bude stačit klepnout na odkaz, jímž

vyberete typ dokumentu, jak popisuje lekce 14.

2 Vyberte Soubor (File)  Uložit jako (Save As). Název změňte na udalosti.php.

Pro ASP bude přípona samozřejmě .asp a  pro ColdFusion zase .cfm, nebo případně jiná,

pokud používáte jiný serverový model.

Připojení k databázi by se mělo zobrazit v panelu Databáze (Databases). Dreamweaverposkytuje připojení k databázi automaticky (pokud jste již jedno vytvořili) ihned, jakmile otevřete

nebo uložíte stránku s odpovídající příponou. 3 Zvolte Okno (Window)  Svázání (Bindings).

Zobrazí se panel Svázání (Bindings). Obvykle se nachází ve stejné skupině s  panely Databáze (Databases) a  Serverová chování

(Server Behaviors). 4 Na panelu klepněte na ikonu plus ( ) a  v  nabídce zvolte Sada

záznamů (Dotaz)/Recordset (Query).

Zobrazí se stejnojmenný dialog. Současné databázové připojení

by se mělo zobrazit v roletce Připojení (Connection). Jestliže máte

více než jedno připojení k databázi, v dialogu se nyní nemusízobrazit to, které chcete. 5 Vyberte požadované připojení k databázi, pokud je třeba.

Výběrem voleb v tomto dialogu vám Dreamweaver umožní psát sofistikované příkazy jazyka

SQL, aniž byste museli znát jediný řádek specifikace jazyka SQL. Pokročilá verze dialogu vám

umožní vytvořit složitější příkazy SQL. 6 Do pole Název (Name) zapište sz_udalosti.

Písmena sz jsou zkratkou pro sadu záznamů. Toto pole vytváří název sady záznamů, na kterou

se odkáže dotaz. 7 Z roletky Tabulka (Table) vyberte udalosti.

Tímto výběrem určíte tabulku, z níž se budou vybírat data.  Tip: Pokud se databáze greendata nezobrazuje v  panelu Databáze (Databases), budete muset stisknout tlačítko Definovat (Define) a vložit znovu přihlašovací údaje. 8 Pokud bude třeba, vyberte přepínač Vše (All) v části Sloupců (Columns).

Tato volba označuje, že chcete vytáhnout data ze všech sloupců tabulky. 9 V první roletce Filtr (Filter) vyberte udalost_datum. V  roletce vpravo zvolte >=. A v roletce

na řádku níže vyberte volbu Zadaná hodnota (Entered Value). A do posledního pole napište

aktuální datum ve formátu rrrr/m/d.


340 LEKCE 15 Tvorba dynamických webových stránek s daty

 Poznámka: V databázi MySQL se nejdříve vkládá rok.

Část Filtr (Filter) definuje vyhledávání tím, že vybírá specifická data a jiná data vylučuje. Tyto

výběry z tabulky požadují vytažení seznamu událostí, které se konají dnes nebo v budoucnu.

Události naplánované na dnešní datum se budou ignorovat a  neměly by se ve výsledcích

zobrazit.  Poznámka: Tabulka obsahuje data až od 4/30/2011. Pokud datum zapsané v dialogu bude pozdější, vaše sada záznamů bude prázdná. 10 V  roletce Uspořádat (Sort) zvolte udalost_datum. V  přidružené roletové nabídce vyberte

Vzestupně (Ascending).

Část Uspořádat (Sort) vám umožňuje zobrazit data vzestupně nebo sestupně podle abecedy. 11 Stiskněte tlačítko Testovat (Test).

Pokud vše funguje správně, dialog Testovat příkaz SQL (Test SQL Statement) zobrazí výsledky

práv vytvořeného dotazu. Pokud žádná data nevidíte nebo pokud se zobrazí chybové hlášení,

může to znamenat, že tabulka neobsahuje žádné záznamy, jež odpovídají kritériímvyhledávání, nebo že je problém s vaší databází, připojením k databázi nebo v konfiguraci testovacího

serveru.


341ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

 Upozornění: Všimněte si špatně se zobrazujících českých znaků. V kódu bude třeba později nastavit

ještě správné kódování, aby se zobrazily také české znaky.

12 Stiskněte tlačítko OK k návratu do dialogu Sada záznamů (Recordset). Zde stiskněte tlačítko

Rozšířený (Advanced).

Dialog poskytuje pokročilé možnosti tvorby příkazů SQL. Všimnout byste si měli, že se právě

vytvořený příkaz SQL zobrazuje v  poli SQL. Pokud již víte, jak psát příkazy jazyka SQL,

můžete je zapsat přímo do tohoto pole. Všimněte si částí dialogu, jež se věnují proměnným

a  položkám databáze. Tyto vestavěné nástroje typu „ukaž a  klepni“ vám pomohou urychlit

proces ručního psaní příkazů tím, že vám poskytnou rychlý přístup ke zdrojům vašich dat

a specifickým příkazům jazyka SQL.

Všimněte si data zobrazujícího se v části SQL. To je datum, které jste zadali v kroku 9. Zadání

data tímto způsobem je vhodné, pokud se datum nemění. Problém je v tom, že chcete vytvořit

tabulku, která má zobrazit pouze současné a budoucí události. Vámi vytvořený filtr tak bude

zítra zastaralý. Namísto toho potřebujete zadat speciální funkci jazyka SQL, která bude platná

vždy. 13 Datum vyberte a smažte. 14 Do pole napište now().

Funkce now() získá aktuální čas a datum ze serveru a tyto údaje se následně použijí ve filtru

dat. Ruční zadávání data již není třeba.  Poznámka: Častokrát stačí zkopírovat příkaz jazyka SQL z  jiných programů, například z  Microsoft Accessu, a vložit jej do tohoto dialogu. Příkaz bude takto bez problémů fungovat. 15 Stiskněte tlačítko Testovat (Test).

V zobrazeném dialogu se zobrazí výsledky dotazu. Měly by být shodné s textem vykonaným

v kroku 11.  Poznámka: Tabulka obsahuje data až od 31. 12. 2011. Jestliže datum vložené v  dialogu je pozdější, vaše sada záznamů bude prázdná. 16 Sadu záznamů ukončíte stisknutím tlačítka OK.

V panelu Svázání (Bindings) se zobrazí Sada záznamů (sz_udalosti)/Recordset (sz_udalosti).


342 LEKCE 15 Tvorba dynamických webových stránek s daty

17 Sadu zde rozbalte a  prozkoumejte zobrazené položky.

Sada záznamů obsahuje položky pro všech pět sloupců

dat tabulky Události. 18 Všechny soubory uložte. Nyní jste připraveni vytvořit dynamické webové stránky. V  dalším cvičení se naučíte, jak zobrazit data generovaná sadou záznamů. Zobrazení dat z databáze Nyní, když máte vše nainstalované, chybí už jen stroj rozběhnout. Podobně jako v případě jiných kroků, je zobrazení dat v Dreamweaveru jednoduchý postup ve formě ukaž a klepni myší. 1 Pokud bude třeba, otevřete soubor udalosti.php nebo soubor vytvořený v předchozímcvičení.

Přípona souboru by nyní měla být kompatibilní s  vaším serverovým modelem. A  soubor

by měl obsahovat připojení k databázi a sadě záznamů vytvořené v předchozím cvičení. Ale

stránka také zobrazuje dvě sady záznamů založené na Spry. Spry data používat nebudete, ale

to neznamená, že byste museli začít úplně od nuly. Zrušíte sadu dat Spry a podpůrný kód, ale

znovu použijete výplňovou tabulku. 2 Kurzor umístěte do výplňové tabulky událostí. V  selektoru značek zvolte značku <table>.

Stiskněte Ctrl+X/Cmd+X, čímž tabulku vyjmete.

Tabulka Spry obsahovala element div, v  němž se nachází odkaz na sadu dat Spry, a  ten již

není potřeba. Pokud jste kurzorem dosud nepohnuli, v  selektoru značek se stále zobrazuje

značka <div>. 3 Značku v selektoru značek vyberte a stiskněte Delete.

I když tento postup pravděpodobně nevyvolá žádné potíže, měli byste také vymazat odkazy

na potřebný kód Spry. 4 Přepněte se do zobrazení Kód (Code). V části za značkou <head> najděte 12 řádků kóduurčeného datové tabulce Spry, který se nachází mezi značkami <!-- InstanceBeginEditable

name=“head“ --> a <!InstanceEndEditable -->. 5 Kód mezi těmito značkami vyberte a vymažte.


343ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

Značky samotné nebudete schopni vymazat, protože ty jsou součástí předlohy, takže tento

kód je zamčený.  Poznámka: Vymazáním tohoto kódu také zneplatníte fungování ovládacích prvků Spry tabulky s výukovými kurzy. 6 Přepněte se do zobrazení Návrh (Design). 7 Kurzor umístěte za nadpis Vzdělávání a události. Stiskněte Ctrl+V/Cmd+V, čímž vložítevýplňovou tabulku. Ta se zobrazí pod nadpisem. Obsahuje zbytky kódu Spry, který by měl být také

smazán. 8 Kurzor umístěte do řádku se záhlavím tabulky. Přepněte se do zobrazení Kód (Code)a prozkoumejte elementy řádku záhlaví.

Každá značka <th> obsahuje atribut spry:sort. 9 Atribut včetně jeho hodnoty ze všech značek vymažte. Buďte ale opatrní, abyste nevymazali

atribut class.

Všimněte si také dalších atributů Spry v řádku dat. 10 Všechny odkazy na Spry v tomto řádku tabulky smažte. 11 Přepněte se do zobrazení Návrh (Design) a všechny soubory uložte.

Převod výplňových dat Spry v současném pracovním rozložení je jednoduchý. 12 V tabulce vyberte výplň {Datum}. 13 Pokud bude třeba, otevřete panel Svázání (Bindings) a rozbalte sadu záznamů sz_udalosti. 14 V panelu vyberte pole udalosti_datum. Pak stiskněte tlačítko Vložit (Insert) u spodníhookraje panelu.

V buňce tabulky se zobrazí nová výplň {sz_udalosti.udalost_datum}, která nahradí výplň

Spry. 15 Vyberte výplň {Událost}. A nahraďte ji polem udalost_nazev. 16 Vyberte výplň {Místo}. A nahraďte ji polem udalost_umisteni. 17 Vyberte výplň {Cena}. A nahraďte ji polem udalost_cena.


344 LEKCE 15 Tvorba dynamických webových stránek s daty

18 Všechny soubory uložte.

Když pracujete na dynamických stránkách, je důležité často testovat funkčnost. Ale na rozdíl

od struktury dat Spry jisté soubory musíte nahrát na testovací server před tím, než budete moci

aktuální dynamický layout prohlížet.

Připojení informace o znakové sadě

Databáze využívá kódování UTF-8. Před samotným vypsáním bude třeba do kódu tuto informaci

vložit.

1 Přepněte se do zobrazení Kód (Code).

2 A  najděte část s  kódem jazyka PHP před řádkem DOCTYPE. Na řádku 34 najdete příkaz

mysql_select_db($database_greenstart, $greenstart);. 3 Kurzor umístěte na řádek za něj a stiskněte Enter. 4 Do nového řádku napište mysql_query(„SET NAMES ‚UTF8‘“);. 5 Soubor uložte a přepněte se zpět do zobrazení Návrh (Design). Tím jste zajistili, že se data z databáze budou zobrazovat správně s českou diakritikou. Umístění souborů na testovací server Dokud nenahrajete určité soubory propojující stránku s databází na lokálním testovacím serveru, nebudete moci tento soubor testovat v živém zobrazení nebo v prohlížeči. Takže které soubory je třeba nahrát? Naštěstí za vás tuto logistiku zvládne sám Dreamweaver.  Poznámka: Tuto stránku nebudete moci testovat, dokud nebudete mít správně nainstalovaný a nakonfigurovaný místní testovací server pro PHP a MySQL. Více informací poskytuje lekce 14. 1 Přepněte se do živého zobrazení. Na to vás Dreamweaver vyzve k aktualizaci souboru natestovacím serveru. 2 Soubor nechte aktualizovat stisknutím tlačítka Ano (Yes).

Dreamweaver by vás měl vyzvat k nahrání závislých souborů. Pokud je to poprvé, co soubor

testujete, pak stiskněte tlačítko Ano (Yes). Jakmile jsou závislé soubory nahrané, pravděpodobně již nebude potřeba je znovu nahrávat, pokud neprovedete nějaké větší změnyna stránce.


345ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

 Poznámka: Cvičení využívá pro práci místní webový server. Databáze MySQL je aktuálně nahraná

na  vašem vlastním pevném disku a  hostovaná vaším serverem. Web můžete také nakonfigurovat tak,

aby používal internetový webový server PHP/MySQL. V takovém případě budete muset před testováním

nahrát a nakonfigurovat přiloženou databázi MySQL.

Pokud vás Dreamweaver nevyzve k  nahrání závislých souborů, pravděpodobně jste změnili

nastavení předvoleb Dreamweaveru. V kategorii Web (Site) zaškrtněte volbu Závislé soubory

(Dependent Files) pro obě operace Dotaz při získání (Get) i Dotaz při odeslání (Put). 3 Stiskněte tlačítko Ano (Yes) pro nahrání souborů.  Poznámka: Aby dynamický obsah fungoval v  pořádku. Budete muset nahrát závislé soubory na testovací server alespoň jednou v průběhu tohoto cvičení. Tabulka nyní zobrazuje data v jednom řádku. K zobrazení více dat budete muset přidat chování Opakovat oblast (repeat region).  Poznámka: Když prohlížíte soubor v  živém zobrazení, Dreamweaver nahraje jakékoli potřebné soubory na testovací server před tím, než se zobrazí obsah. Přidání opakující se oblasti Výplně pro data dokáží zobrazit pouze jeden záznam v jednu chvíli. Abyste viděli více záznamů, budete muset výplně obalit serverovým chováním nazvaným Opakovat oblast (repeat region). 1 Kurzor umístěte na začátek řádku dat tabulky a vyberte celý řádek. V selektoru značek zvolte

značku <tr>. 2 Zvolte příkaz Okno (Window)  Serverová chování (Server Behaviors).V zobrazenémpanelu klepněte na ikonu + a v nabídce vyberte Opakovat oblast (repeat region).

Ve stejnojmenném dialogu se v  roletce Sada záznamů (Recordset) zobrazí sz_udalosti jako

aktuální sada záznamů. Ve výchozím nastavení sada v jednu chvíli zobrazí 10 záznamů. Určit

můžete jiný počet, nebo nechat zobrazit všechny záznamy.

Pokud si vyberete zobrazení méně záznamů než všechny, budete muset přidat také chování

Stránkování sady záznamů (Record Paging), abyste uživateli umožnili zobrazit zbývající data.

V případě této tabulky nechte jednoduše zobrazit všechna data. 3 Zvolte přepínač Všechny záznamy (All Records) Pak stiskněte tlačítko OK.

Nad řádkem v tabulce se nyní v šedé záložce zobrazuje slovo Opakovat (Repeat).


346 LEKCE 15 Tvorba dynamických webových stránek s daty

4 Všechny soubory uložte a stránku si prohlédněte v živém zobrazení.

 Poznámka: S  výjimkou filtrování podle data jsou kroky nutné k  náhradě zbývající tabulky Spry

s přehledem kurzů v případě PHP totožné s těmi popsanými v tomto cvičení. Jestliže máte čas, otestujte

své nové vědomosti a nahraďte zbývající ovládací prvek Spry vaším vlastním.

Tabulka zobrazuje všechny nadcházející události od dneška do budoucnosti. Jak jste asi uhodli,

zatím jsme se v případě možností dynamických stránek pohybovali pouze po povrchu. V dalším

cvičení vytvoříte jednu z  nejběžnějších dynamických aplikací: sadu hlavní stránky a  stránky

s detailem.

Bonusové cvičení: vytvoření dynamické tabulky pro kurzy

a semináře

Ještě než se vrhnete do dalšího cvičení, použijte své znalosti, které jste se nedávno naučili

ke znovu vytvoření tabulky Spry určené kurzům a seminářům. Kroky budou následující:

1 Vytvořte sadu záznamů vracející data ze všech polí tabulky kurzů v  databázi. Na rozdíl

od tabulky s událostmi, není v tomto případě potřeba vytvářet filtr nebo třídění podle data.  Poznámka: Pravděpodobně budete muset stisknout tlačítko Jednoduché (Simple), abyste se vrátili zpět do jednoduchého dialogu sady záznamů. 2 Vyberte tabulku Spry a  vyjměte ji do schránky. Vymažte element div a  tabulku vložte zpět

do layoutu, a to do stejného místa. 3 Odstraňte jakýkoli přebytečný kód Spry, který zůstal v tabulce. 4 Vložte výplně pro data z nové sady záznamů do správných buněk na řádku. 5 Na datový řádek použijte serverové chování Opakovat oblast (repeat region). 6 Výsledek otestujte. 7 Uložte všechny soubory.


347ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

Dynamické zobrazení dat je oproti statickým seznamům a  tabulkám ohromné zlepšení. Tím,

že uživatelům umožníte interakci s daty, je vtáhnete do procesu způsobem, jenž nelze nahradit.

A v tomto okamžiku se do hry zapojuje koncept sady hlavní stránka/stránka s detailem.

Na mnoha webových stránkách je běžné, že stránka zobrazí seznam několika výrobků neboudálostí a vy klepnete na ten, který vás zrovna zajímá; poté web nahraje novou stránku sespecifickými detaily o položce, na níž jste klepnuli. Co ale nevidíte, nebo čeho si nevšimnete, je, jak první,

hlavní, stránka poslala požadavek stránce druhé, s detailem. V následujícím cvičení se naučíte, jak

vytvořit sadu hlavní stránka/stránka s detailem.

Vytvoření sady hlavní stránka/stránka s detailem

Sada s hlavní stránkou a stránkou s detailem se často používá na dynamických webovýchstránkách. Přidáním odkazu na zobrazená data návštěvníkům umožníte přejít na novou stránku,

na níž se zobrazí informace o  určité položce. Tyto sady stránek je možné vytvořit pomocí ASP,

ColdFusion, PHP nebo Spry. Kroky a  procedury jsou podobné v  případě každého serverového

modelu. ASP poskytuje vestavěné serverové chování k odkázání na stránku s detailem, zatímco

ColdFusion a PHP vyžadují vytvoření dynamického odkazu ručně.

Vytvoření hlavní stránky

V tomto cvičení vytvoříte sadu hlavní/detailní stránky s pomocí existujícího připojeník databázi.

1 Pokud je třeba, spusťte Dreamweaver a otevřete soubor vyrobky.php vytvořený v předchozí

lekci. Tuto stránku použijete jako hlavní.  Poznámka: Stránku vyrobky.php jste vytvořili v lekci 14. Pokud jste tuto lekci přeskočili, budete muset soubor vytvořit nyní a připojit jej k databázi. Více informací poskytuje lekce 14. 2 Vyberte nadpis Sem vložte hlavní nadpis. A napište GreenStart nabízí pouze ty nejlepšíspořivé výrobky. 3 Vyberte text Sem vložte obsah. A  napište Klepněte na jakýkoli výrobek, o  němž se chcete

dozvědět více. 4 Stiskněte Enter/Return k založení nového odstavce. 5 Otevřete panel Databáze (Databases), abyste se ujistili, že je stále dostupné připojeník databázi. 6 Přepněte se do panelu Svázání (Bindings). V  něm klepněte na ikonu + a  v  nabídce vyberte

Sada záznamů (Recordset). 7 Sadu pojmenujte takto: sz_vyrobky. V  roletce Připojení (Connection) zvolte greenstart.

V  roletce Tabulka (Table) vyberte vyrobky. V  roletkách uspořádat (Sort) vyberte vyrobek_

kategorie a Vzestupně (Ascending). Pak stiskněte tlačítko Testovat (Test).


348 LEKCE 15 Tvorba dynamických webových stránek s daty

V zobrazeném dialogu najdete seznam výrobků z databáze greendata. 8 Ve všech dialozích stiskněte tlačítko OK, abyste se vrátili do okna dokumentu.

Sada záznamů sz_vyrobky se zobrazí v panelu Svázání (Bindings). Neexistuje žádné omezení

na to, jak používat datová pole v  sadě záznamů. Vkládat je můžete jednou, vícekrát nebo

vůbec. Zobrazit je na stránce můžete libovolně. 9 Pokud bude třeba, kurzor vložte do prázdného odstavce, který jste vytvořili v kroku 4. 10 Otevřete panel Vložit (Insert), v němž klepněte na Vložit tag Div (Insert Div Tag).

Do pole Třída (Class) napište vyrobek-hlavni.

Pak stiskněte tlačítko OK.

Kolem výplňového textu se zobrazí element div. Jestliže vložíte ze sady záznamů pole, to

automaticky nahradí výplňový text. 11 V  panelu Svázání (Bindings) vyberte pole vyrobek_nazev. A  stiskněte tlačítko Vložit

(Insert).

Text {sz_vyrobky:vyrobek_nazev} nahradí výplňový text ve značce <div.vyrobek-hlavni>. 12 Text naformátujte jako Nadpis 3 (Heading 3). A pod výplňový text vložte nový odstavec.


349ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

13 Na dalším řádku vložte pole vyrobek_popis_kratky.

Vytvořte nový odstavec a vložte do něj pole vyrobek_velikost. 14 A nakonec je třeba ještě nastavit kódování UTF-8 tak, jak to ukazuje postup Připojeníinformace o znakové sadě dříve v této lekci. 15 Všechny soubory uložte a stránku si prohlédněte v živém zobrazení. Pokud vás Dreamweaver

vyzve k nahrání závislých souborů, zvolte tlačítko Ano (Yes).  Poznámka: Jestliže se stránku pokusíte prohlédnout v prohlížeči, zobrazí se vám pouze HTML stránka, a to do té doby, než na testovací server nahrajete všechny závislé soubory. Ale v živém zobrazení by vše mělo fungovat i tak. Pokud máte váš testovací server správně nakonfigurovaný, Dreamweaver zobrazí vybraná tři pole prvního záznamu z databáze v okně dokumentu. Ale dynamický obsah se neomezuje pouze na text; dynamicky můžete zobrazit také obrázky. Dynamické zobrazení obrázků Co by to bylo za stránku s výrobkem bez přítomnosti obrázků? Přidání obrázků k popisuvýrobku není těžší než vložení textu. V  tomto cvičení se naučíte, jak do layoutu vkládat dynamické obrázky. 1 Přepněte se do zobrazení Návrh (Design). 2 Před elementem h3 v elementu div.vyrobek-hlavni vytvořte nový odstavec. 3 Kurzor umístěte do tohoto nového odstavce. V  režimu HTML v  inspektoru Vlastnosti

(Properties) vyberte z roletky Formát volbu Odstavec (Paragraph). 4 Zvolte Vložit (Insert)  Obraz (Image).

V  zobrazeném dialogu byste normálně vybrali požadovaný obrázek a  jednoduše stisknuli

tlačítko OK. Ale vložení dynamického obrázku bude vyžadovat pár kroků navíc. 5 Vyberte přepínač Zdroje dat (Data Sources), načež se dialog změní. Zobrazí datové pole

ze sady záznamů sz_vyrobky. 6 Zvolte pole vyrobek_obr_maly.

Pole Adresa URL v  dialogu nyní zobrazuje celý kód, jenž vloží obrázek na základě názvu

souboru uloženého v databázi – v tomto případě vyrobek_obr_maly. Ale pole obsahuje pouze

název souboru obrázku.

Jelikož se názvy a umístění mohou časem měnit, nedávalo by smysl vložit do databázového

pole informaci o  cestě k  obrázku. Na místo toho můžete jednoduše vytvořit příkaz k  cestě

obrázku v  kódu dynamicky, tedy tehdy, kdy to budete potřebovat. Tímto způsobem budete

muset v případě, kdy obrázek přesunete z jedné složky do jiné, provést pouze jedinoudrobnou úpravu v kódu, aby se změně přizpůsobil.


350 LEKCE 15 Tvorba dynamických webových stránek s daty

7 Kurzor umístěte na začátek pole URL (Code) a napište vyrobky/. A stiskněte tlačítko OK.

Vložením názvu složky do pole URL (Code), jej Dreamweaver vždy vloží před název obrázku,

aby z této složky vytáhnul správný obrázek, například: vyrobky/1-velky.jpg. 8 V  zobrazeném dialogu pro usnadnění přístupu vyberte v  poli Alternativní text (Alternate

Text) volbu <prázdné> (). Pak stiskněte tlačítko OK. 9 Všechny soubory uložte a stránku si prohlédněte v živém zobrazení. Na obrazovce se nyní zobrazuje i malý obrázek výrobku. Nyní, když se jeden výrobek zobrazuje správně, je již jednoduché zobrazit více výrobků stejně, jako jste to provedli v  případě tabulky s událostmi. Zobrazení více položek Abyste zobrazili více než jeden záznam, budete muset přidat opakující se oblast, jak jste již učinili dříve. Ačkoliv zde není žádný řádek tabulky jako v předchozím případě, chování můžete namísto toho přidělit elementu div.productmaster.


351ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

1 Přepněte se do zobrazení Návrh (Design) a v selektoru značek vyberte značku <div.vyrobek-

hlavni>. 2 Zobrazte panel Serverová chování (Server Behaviors). 3 Klepněte na ikonu + a v nabídce zvolte Opakovat oblast (Repeat Region). 4 V  roletce Sada záznamů (Recordset) vyberte sz_vyrobky. Zvolte přepínač Zobrazit (Show)

a do pole vedle zapište číslo 6. Pak stiskněte tlačítko OK.

Nad elementem div.vyrobek-hlavni se zobrazí šedá záložka Opakovat (Repeat). 5 Všechny soubory uložte a  stránku si prohlédněte v  živém zobrazení. Stiskněte tlačítko Ano

(Yes) k nahrání souborů na testovací server. A totéž proveďte v případě nahrání závislýchsouborů. Dreamweaver nyní zobrazuje šest záznamů z  tabulky vyrobky. Neboť je element div.vyrobek- hlavni ve výchozím nastavení široký 100 % šířky hlavní obsahové oblasti, záznamy se zobrazí nad sebou. K  zobrazení sady dalších šesti záznamů. Budete muset přidat chování Stránkování sady záznamů (Record Paging). Vytvoření chování Stránkování sady záznamů Ovladač stránkování se obvykle vkládá mimo opakující se oblast, takže se na stránce zobrazí jen jeden. V tomto cvičení vytvoříte chování Stránkování sady záznamů pro sadu záznamů sz_vyrobky.


352 LEKCE 15 Tvorba dynamických webových stránek s daty

1 Klepněte na šedou záložku Opakovat (Repeat) nad opakující se oblastí. Pak stiskněte klávesu

se šipkou doprava, abyste kurzor posunuli za element div a opakující se oblast.

Ovladač stránkování lze na stránku vložit jako text nebo jako grafický prvek. Často sek tvorbě ovládání stránkování používá tabulka. 2 Do stránky vložte tabulku se dvěma řádky a čtyřmi sloupci. Všechny ostatní pole se záznamy

smažte. 3 Do pole Tabulka (Table ID) v inspektoru Vlastnosti (Properties) napište hlavni_strankovani. 4 Následující text zapište do prvního řádku tabulky:

Buňka 1: << První

Buňka 2: < Předchozí

Buňka 3: Další >

Buňka 4: Poslední >>

Ostré závorky poskytují vizuální vodítko uživateli v prezentaci stránkování. 5 Vyberte text << První. A  zvolte Vložit (Insert)  Datové objekty (Data Objects) 

Stránkování sady záznamů (Recordset Paging)  Přejít na první stránku (Move To First

Page).

Zobrazí se stejnojmenný dialog. Pole Odkaz (Link) obsahuje položku Výběr: „<

(Selection: „<< První“) a roletka Sada záznamů (Recordset) obsahuje sz_vyrobky.


353ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

6 Pak v  dialogu stiskněte tlačítko OK. Hypertextový odkaz se použije na text. Tento odkaz

povede na první záznam v tabulce výrobků. 7 Použijte chování stránkování na následující slova:

< Předchozí: Přejít na předcházející stránku (Move To Previous Page).

Další >: Přejít na další stránku (Move To Next Page).

< Předchozí: Přejít na poslední stránku (Move To Last Page). 8 Všechny soubory uložte. A stránku si prohlédněte v živém zobrazení.

Zobrazí se prvních šest záznamů. Pokud klepnete na ovladač stránkování, nic se nestane.

Abyste ovladač zprovoznili, musíte použít modifikátorový klíč. 9 Podržte klávesu Ctrl/Cmd a klepněte na odkaz Další. V živém zobrazení uvidíte saduposledních záznamů. 10 Otestujte také odkazy Předchozí a První. Ovládací prvky stránkování nyní fungují, ale je zde malý problém. Pokud jste na první sadě záznamů, odkazy První a Předchozí jsou stále viditelné, ačkoliv nic neprovádí. To by mohlo být pro uživatele matoucí a  je to známkou slabého designu. Naštěstí existuje serverové chování potřebné právě v této situaci. Skrytí nechtěného ovládání stránkování Viditelnost je běžnou vlastností, kterou lze kontrolovat jak v HTML, tak v CSS. Nastavit elementu viditelnost je poměrně jednoduché, a poté vyvolat chování nebo akci skriptu, aby se viditelnost změnila. V tomto cvičení použijete dynamické serverové chování, které změní viditelnost odkazu stránkování založeného na výsledcích ze sady záznamů. Ve výsledku se tak skryjí ovladače, které jsou v danou chvíli neplatné. 1 Kurzor umístěte do odkazu První a v selektoru značek vyberte značku <a>.

Abyste skryli všechny stopy po odkazu, budete muset vybrat zdrojový kód elementustránkování. Chování Zobrazit oblast (Show Region) lze zpřístupnit z  nabídky Vložit (Insert) nebo

z panelu Serverová chování (Server Behavior). 2 V  panelu Serverová chování (Server Behavior) klepněte na ikonu + a  v  nabídce vyberte

Zobrazit oblast (Show Region)  Zobrazit kromě první stránky (Show Region If Not First

Page).


354 LEKCE 15 Tvorba dynamických webových stránek s daty

Zobrazí se stejnojmenný dialog obsahující v  roletce Sada záznamů (Recordset) položku

sz_vyrobky. 3 Stiskněte tlačítko OK. V šedé záložce se nad slovem První se ukáže text Zobrazit když (Show

If ). 4 Vyberte odkaz Předchozí, jako v  kroku 1. A  použijte na něj chování Zobrazit kromě první

stránky (Show Region If Not First Page). 5 Vyberte odkaz Další a odkaz Poslední, a přidělte jim chování Zobrazit kromě poslední stránky

(Show Region If Not Last Page). 6 Všechny soubory uložte a stránku si prohlédněte v živém zobrazení.

Zobrazilo se prvních šest záznamů. Prozkoumejte nyní odkazy stránkování. Odkazy Poslední

a První se nyní nezobrazují. 7 Podržte klávesu Ctrl/Cmd a klepněte na odkaz Poslední. Zobrazí se poslední sada záznamů. Všimněte si, že se odkazy Další a Poslední již neobrazují. Chování je automaticky skrylo a odkazy stránkování zobrazuje podle toho, zda stránka zobrazuje první nebo poslední sadu záznamů, nebo záznamy mezi nimi. Dreamweaver nabízí přes tucet vestavěných serverových chování, která vám umožňují přizpůsobit všechny aspekty zobrazení záznamů. Zobrazení počtu záznamů Jestliže máte k zobrazení spoustu záznamů, snadno zapomenete, jaké záznamy jste již prohlédli. Je proto vhodné poskytnout uživateli záznam o  stavu. V  tomto cvičení vložíte chování, které zobrazí celkový počet záznamů a stránek v sadě. 1 Přepněte se do zobrazení Návrh (Design). Vyberte všechny čtyři buňky ve druhém řádku.

Pravým tlačítkem na výběr klepněte a  vyberte Tabulka (Table)  Sloučit buňky (Merge

Cells). 2 Zvolte Vložit (Insert)  Datové objekty (Data Objects)  Zobrazit počet záznamů (Display

Record Count)  Navigační stav sady záznamů (Recordset Navigation Status). 3 Pokud bude třeba, zvolte sadu záznamů sz_vyrobky. Pak stiskněte tlačítko OK.

Do druhého řádku tabulky se vloží blok kódu a výplňový text. 4 Všechny soubory uložte a stránku si prohlédněte v živém zobrazení. Záznam stavu zobrazuje

Záznamy 1 až 6 z 28 (Records 1 to 6 of 28).


355ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

5 Podržte klávesu Ctrl/Cmd a klepněte na odkaz Další. Pak prozkoumejte záznam stavu, který

nyní zobrazuje Záznamy 7 až 12 z 28 (Records 7 to 12 of 28). 6 Přepněte se do zobrazení Návrh (Design). Stránka je už téměř hotová, ale před tím, než vytvoříte stránku s  detailem a  chování potřebná k propojení těchto dvou stránek dohromady, přidejte zobrazení výrobků trochu stylování. Stylování dynamických dat Přidání stylu a vkusu dynamickým datům se neliší od stylování statických stránek. V tomtocvičení vytvoříte pravidla CSS formátující text a strukturu vašich dynamických dat. Začněte změnou způsobu, jímž se výrobky na stránce zobrazují. 1 Otevřete stránku s výrobky vytvořenou v předchozích cvičeních a přepněte se do zobrazení

Návrh (Design), pokud bude třeba. 2 Otevřete panel Styly CSS (CSS Styles) a vyberte poslední pravidlo v šabloně mojestyly.css. 3 Vytvořte nové pravidlo se selektorem typu Složený prvek (Compound) a s názvem .content

.vyrobek-hlavni. Pak mu přidělte následující stylování: 4 Vytvořte další pravidlo s  názvem .content .vyrobek-hlavni h3 a  použijte na něj následující

stylování: 5 Vytvořte pravidlo s názvem .content .vyrobek-hlavnip a použijte na něj následujícístylování: 6 Vytvořte další pravidlo s názvem .content#hlavni-strankovani a použijte na něj následující

stylování:


356 LEKCE 15 Tvorba dynamických webových stránek s daty

7 Poté vytvořte další pravidlo s názvem .content #hlavni-strankovanitd a použijte na nějnásledující stylování: 8 Vytvořte pravidlo s názvem .content#hlavni-strankovani a a použijte na něj následujícístylování: 9 A vytvořte pravidlo s názvem .content#hlavni-strankovani a:hover a použijte na nějnásledující stylování: 10 Nakonec všechny soubory uložte a stránku si prohlédněte v živém zobrazení. Díky novému stylování se výrobky zobrazí vedle sebe ve dvou řádcích – díky čemuž musí uživatel prohlédnout méně prostoru a  nemusí se posouvat stránkou dolů. Ovladače stránkování uživatelovi umožňují přeskakovat mezi výrobky jako v katalogu, a to jednoduše klepnutím na odkaz.


357ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

V dalších cvičeních se naučíte, jak hlavním elementům přidat speciální hypertextový odkaz, jenž

načte detailní zobrazení určitého výrobku.

Vložení chování pro přechod na stránku s detailem

Jestliže na hlavní stránce udržíte popis a fotografii výrobku v malém rozměru, umožnítezákazníkům rychle projít celý katalog výrobků. Čím více výrobků můžete komfortně zobrazit na jednom

místě, tím spíše si zákazník vybere něco, co jej zajímá. A  poté se pravděpodobně budou chtít

dozvědět o výrobku něco více. V tu chvíli přichází na řadu stránka s detailem výrobku. V tomto

cvičení vložíte speciální chování do dynamických výplní, které načítají detailní stránku jakékoli

položky, na níž uživatel na hlavní stránce klepne myší.

1 Pokud bude třeba, otevřete stránku vyrobky.php a  přepněte se do zobrazení Návrh

(Design).

Textu a  obrázkům můžete přidělit dynamický odkaz, který uživatele přenese na stránku

s detailem výrobku. Ačkoliv ASP poskytuje pro tyto účely vlastní chování, v PHPa ColdFusion budete muset odkaz vytvořit sami. 2 Vyberte výplň pro obrázek v elementu div.vyrobek-hlavni.

Dynamický odkaz se vloží pomocí dialogu Odkaz (Link). 3 Klepněte na ikonu Procházet (Browse) vedle pole Odkaz (Link) v  inspektoru Vlastnosti

(Properties). 4 V zobrazeném dialogu vyberte přepínač Zdroje dat (Data Sources). 5 Vyberte pole výrobek_ID. A do pole Adresa URL (URL) se vloží následující kód:

<?php echo $row_sz_vyrobky[ vyrobek_ID‘]; ?> 6 Kurzor umístěte na začátek textu v poli URL (URL). 7 Napište vyrobek_detail.php?vyrobek_ID= a stiskněte tlačítko OK.

Právě vložený kód pošle vyrobek_ID vybraného elementu stránce s  detailem, kde by se měl

daný výrobek zobrazit. 8 Všechny soubory uložte. Ještě než budete moci funkčnost otestovat, budete muset nejdříve vytvořit stránku s detailem. Tvorba stránky s detailem Konstrukce stránky s  detailem je téměř shodná s konstrukcí hlavní stránky. Obě vytvářejí sadu záznamů a obsahují výplň pro určitá pole. Hlavní rozdíl spočívá v tom, že hlavní stránka může zobrazit všechny záznamy, zatímco stránka s detailem zobrazí pouze jeden záznam. V tomtocvičení vytvoříte stránku s detailem, takže zobrazí informaci o výrobku, jejž uživatel vybere. 1 Vytvořte novou stránku založenou na předloze webu. A uložte ji pod názvem vyrobek_detail.

php.


358 LEKCE 15 Tvorba dynamických webových stránek s daty

2 Pokud se v panelu Databáze (Databases) nezobrazuje současné připojení k databázi,klepněte na odkaz typ dokumentu (document type) a vyberte PHP nebo jiný odpovídající serverový

model. 3 V panelu Svázání (Bindings) vytvořte novou sadu záznamů nazvanou sz_vyrobek_detail.

Zobrazí se dialog Sada záznamů (Recordset). Předchozí sady záznamů, jež jste vytvořili,

zobrazí v tabulce všechny záznamy. Na stránce s detailem tak budete muset přidat filtr, díky

němuž se zobrazí pouze záznam vybraný uživatelem na hlavní stránce. 4 Následující specifikaci vložte do dialogu Sada záznamů (Recordset): 5 Stiskněte tlačítko Testovat (Test).

Zobrazí se dialog žádající testovanou hodnotu. Budete muset vložit hodnotu odpovídající

určitému poli, například číslo výrobku. Výrobky v současné tabulce mají jednoduše hodnoty

ve formě čísla od 1 do 28. 6 Zapište číslo 1 a stiskněte tlačítko OK.

V zobrazeném dialogu se zobrazí jeden záznam. 7 Ve všech dialozích stiskněte tlačítko OK a vraťte se do zobrazení Návrh (Design). Nyní jste

připraveni vytvořit zobrazení dat na stránce s detailem. 8 Vyberte text Sem vložte hlavní nadpis. V  panelu Svázání (Bindings) vyberte pole vyrobek_

nazev. A stiskněte tlačítko Vložit (Insert).


359ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

9 Vyberte text Sem vložte obsah a vložte pole vyrobek_popis_dlouhy.

10 Vytvořte nový odstavec a  napište do něj Rozměry:, a  pak sem vložte pole vyrobek_velikost. 11 Vytvořte další odstavec a  napište do něj Množství:, a  pak vložte pole vyrobek_mnozstvi.

Stiskněte Ctrl+Shift+mezerník/Cmd+Shift+mezerník, čímž se vloží nedělitelná mezera. Pak

vložte pole vyrobek_jednotka. 12 Vytvořte nový odstavec a  napište do něj Cena: Kč, a  pak před text Kč vložte pole vyrobek_

cena. 13 Kurzor umístěte na začátek výplně {sz_vyrobek_detail.vyrobek_nazev}.

Zvolte Vložit (Insert)  Obraz (Image). 14 Zvolte přepínač Zdroje dat (Data Source) a vyberte pole vyrobek_obr_velky.

Na začátek pole URL (Code) napište vyrobky/. A stiskněte tlačítko OK. 15 V  zobrazeném dialogu pro usnadnění přístupu vyberte v  poli Alternativní text (Alternate

Text) položku <prázdné> (). Pak stiskněte tlačítko OK. 16 Vyberte výplň pro nový obrázek. V  roletce Třída (Class) vyberte fltrt. Do polí Š (Width)

a V (Height) zapište hodnotu 300. 17 A nakonec je třeba ještě nastavit kódování UTF-8 tak, jak to ukazuje postup Připojeníinformace o znakové sadě dříve v této lekci. 18 Všechny soubory uložte.

Ještě než soubory nahrajete na vzdálený server, měli byste chování otestovat na místním

testovacím serveru. 19 Otevřete stránku s výrobky a prohlédněte si ji v živém zobrazení. Podržte klávesu Ctrl/Cmd

a  klepněte na název výrobku nebo jeho obrázek. Na to se v  živém zobrazení načte stránka

vyrobek_detail.php s informacemi o vybraném výrobku.


360 LEKCE 15 Tvorba dynamických webových stránek s daty

Právě jste dokončili základní kroky k  vybudování zcela funkčního internetového obchodu.

Design a  konstrukce on-line obchodu, nákupního košíku a  způsobu platby je náročný proces,

jehož popis je nad rámec této knihy.

Předem vytvořený nákupní košík a řešení obchodu jsou v Dreamweaveru dostupné pro všechny

serverové modely. Řešení se individuálně liší cenou a náročností. Některá nejekonomičtější řešení

nabízí Google, Yahoo! a PayPal, mimo jiných, a ty také zjednodušují metodu přijímáníelektro

nických plateb pomocí kreditních karet a bankovního převodu.

V této lekci jste vytvořili dynamické stránky pomocí živých dat. Obsah stránky jste nechalivyge

nerovat z  on-line databáze a  vybudovali jste kompletní sadu hlavní stránky/stránky s  detailem.

Ale i  po tom všem jste se nepodívali pod povrch toho, co Dreamweaver nabízí v  oblasti dyna

mických dat.


361ADOBE DREAMWEAVER CS5 OFICIÁLNÍ VÝUKOVÝ KURZ

Opakování

Otázky

1 Co to je sada záznamů?

2 Proč budete muset použít opakující se oblast?

3 Co to je sada hlavní stránka/stránka s detailem?

4 Jakému účelu byste použili chování stránkování záznamů?

5 Jak můžete skrýt část ovládání stránkování, když zrovna není potřeba?

Odpovědi

1 Sada záznamů je pole informací vytažené z jedné nebo více tabulek v databázi pomocí

dotazu vytvořeného Dreamweaverem. 2 Opakující se oblast umožňuje datové aplikaci zobrazit více než jednu položku vestejném okamžiku. 3 Sada hlavní stránka/stránka s detailem je běžnou funkcí dynamických webovýchstránek. Hlavní stránka zobrazuje více záznamů a v každém záznamu poskytujedynamické odkazy, které umožňují načíst specifické informace o  vybrané položce na stránce

s detailem. 4 Chování stránkování záznamů se používá k načtení výsledků sady záznamů, když se

v jednom okamžiku zobrazí jen omezené množství záznamů. 5 Výběrem ovládacího odkazu stránkování a  přidělení chování „Zobrazit“ (Show)

odpovídajícího sadě záznamů.




       
Knihkupectví Knihy.ABZ.cz - online prodej | ABZ Knihy, a.s.
ABZ knihy, a.s.
 
 
 

Knihy.ABZ.cz - knihkupectví online -  © 2004-2018 - ABZ ABZ knihy, a.s. TOPlist