Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Jihlava

Rozměr: px

Začít zobrazení ze stránky:

Download "Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Jihlava"

Marek Pravec
před 8 lety
Počet zobrazení:

1 Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Jihlava Šablona 32 VY_32_INOVACE_033.ICT.34 Tvorba webových stránek MS Visual Studio HTML

2 Číslo projektu: CZ.1.07/1.5.00/ Šablona: VY_32_INOVACE Číslo DUMU: 033.ICT.34 Předmět: Informační technologie Název materiálu: Tvorba webových stránek MS Visual Studio 2010 HTML Autor: Jaroslav Fišer Formát: pdf Velikost: 1033 kb Stupeň a typ vzdělávání: SŠ odborné vzdělávání Licence k obrazovému materiálu: CC BY Datum vytvoření: Klíčová slova: HTML, CSS, www, web, internet, Visual Studio Anotace: Stručný úvod do zápisu HTML kódu pomocí programu Microsoft Visual Studio. OA a JŠ Jihlava, VY_32_INOVACE_033.ICT.34 2

pdf Velikost: 1033 kb Stupeň a typ vzdělávání: SŠ odborné vzdělávání Licence k obrazovému materiálu: CC BY Datum vytvoření: 28. 09.

3 V předchozím DUMu jste na na disku M: vytvořili složku M:/www_xppppppj Ve složce máme soubor CSS stylesheet.css Soubor stylesheet.css se dá stáhnout z Spusťe program Microsoft Visual Studio. Instalační soubory vč. licencí můžete získat v rámci programu Microsoft DreamSpark, který umožňuje studentům bezplatné stažení nástrojů společnosti Microsoft pro vývojáře a návrháře. Postupujte dle následujících bodů a snímků sejmutých obrazovek. File -->Open Web Site -->M:\www_xppppppj View -->Solution Explorer -->www_xppppppj Add New Item -->Installed Template volba Visual C#, HTML page, Name=prik33.htm Obsah souboru prik33.htm v nabídce source Vložení odkazu na stylesheet.css do souboru prik33. htm do části <head> </head>, zápis HTML kódu Obsah souboru prik33.htm v nabídce design ve Visual Studiu a v prohlížeči. OA a JŠ Jihlava, VY_32_INOVACE_033.ICT.34 3

licencí můžete získat v rámci programu Microsoft DreamSpark, který umožňuje studentům bezplatné stažení nástrojů společnosti Microsoft pro vývojáře a návrháře.

4 Spusťe program Microsoft Visual Studio 2010 Instalační soubory vč. licencí můžete získat v rámci programu Microsoft DreamSpark, který umožňuje studentům bezplatné stažení nástrojů společnosti Microsoft pro vývojáře a návrháře. Odkaz zde: OA a JŠ Jihlava, VY_32_INOVACE_033.ICT.34 4

studentům bezplatné stažení nástrojů společnosti Microsoft pro vývojáře a

$-->M:\www_xppppppj$

5 File -->Open Web Site -->M:\www_xppppppj OA a JŠ Jihlava, VY_32_INOVACE_033.ICT.34 5

$-->M:\www_xppppppj$

6 Add New Item -->Installed Template volba Visual C#, HTML Page, Name=prik33.htm OA a JŠ Jihlava, VY_32_INOVACE_033.ICT.34 6

Vytvořený výřez obrazovky: 29.9.2013 7:34 7:38 Tvorba webových stránek MS Visual Studio 2010 - HTML Ukázka vygenerovaného obsahu prik33.

7 Vytvořený výřez obrazovky: :34 7:38 Tvorba webových stránek MS Visual Studio HTML Ukázka vygenerovaného obsahu prik33.htm Vložení odkazu (linku).css do souboru prik33. htm do části <head> </head> a zápis HTML kódu OA a JŠ Jihlava, VY_32_INOVACE_033.ICT.34 7

HTML Ukázka vygenerovaného obsahu prik33.htm Vložení odkazu (linku).

8 Design zobrazení ve Visual Studiu Zobrazení v internet prohlížeči OA a JŠ Jihlava, VY_32_INOVACE_033.ICT.34 8

9 Úkol 1. (MS Visual Studio). a) Ve svém website (M:\www_xppppppj) vytvořte soubor prik33.htm b) Do souboru prik33.htm vložte link na stylesheet.css. c) Do souboru prik33.htm zapište HTML kód z předchozího snímků. d) Prozkoumejte zobrazení Ssource a Design ve Visual Studiu. Úkol 2. a) Ve svem website vytvořte složku M:\www_xppppppj\priklad b) Do této vytvořené složky přesuňte soubor stylesheet.css a prik33.htm c) Ověřte funkčnost souboru prik33.htm d) Celou složku..\priklad včetně obsahu zkopírujte na své webové sídlo na serveru php5.cz Úkol 3. Využijte veškeré své znalosti a vytvořte web dle vzoru na Poznámka: Tento DUM volně navazuje na DUMy autora VY_32_INOVACE_021.ICT ICT.34. DUMem 033.ICT.34 končí série 13 dílů věnovaných HTML a CSS. V dalších šesti dílech využijeme získané vědomosti a budeme se věnovat dynamickým HTML stránkám, databázím a jejich propojení s www stránkami. OA a JŠ Jihlava, VY_32_INOVACE_033.ICT.34 9

$a) Ve svem website vytvořte složku M:\www_xppppppj\priklad b) Do této vytvořené složky přesuňte soubor stylesheet.css a prik33.htm c) Ověřte funkčnost souboru prik33.htm d) Celou složku.$

10 Doporučené odkazy: je výukový web autora DUMu Generátor Lorem ipsum Doporučená literatura: P. Roubal, Informatika a výpočetní technika pro střední školy - Praktická učebnice Programování Windows 8 aplikací pro začátečníky Použité zdroje: Veškerý obsah včetně obrázků je dílem autora. OA a JŠ Jihlava, VY_32_INOVACE_033.ICT.34 10

Roubal, Informatika a výpočetní technika pro střední školy - Praktická učebnice Programování Windows 8

Podobné dokumenty

Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Jihlava

Obchodní akademie a Jazyková škola s právem státní jazykové zkoušky Jihlava Šablona 32 VY_32_INOVACE_038.ICT.34 Tvorba webových stránek SQL stručné minimum OA a JŠ Jihlava, VY_32_INOVACE_038.ICT.34 Číslo