internet a zdroje (web design) -...
Post on 29-May-2018
213 Views
Preview:
TRANSCRIPT
Internet a zdroje
(web design)
Mgr. Petr Jakubec
Katedra fyzikalnı chemieUniverzita Palackeho v Olomouci
Tr. 17. listopadu 12
19. 11. 2010
(KFC-INTZ) web design 19. 11. 2010 1 / 25
1 Zakladnı zasady tvorby WWW stranekZohlednenı cılove skupiny ctenaru WWW stranekVelikost WWW stranek a hypertextove odkazyPrehlednost a vhodne usporadanı WWW stranekObrazky na WWW strankachAutorska prava na InternetuZaklady typografie – typy pısmaBarvy na WWW strankachBitmapove graficke formaty pro WWW stranky
2 Zakladnı struktura WWW stranekEditory vhodne k tvorbe WWW stranekStandard jazyka HTML v4.01Zakladnı rozvrzenı dokumentu HTMLZakladnı rozvrzenı dokumentu HTMLDefinice struktury HTML dokumentuHlavicka HTML dokumentuTelo HTML dokumentu, jeho zakladnı formatovanıTagy urcene pro obecne formatovanı textuTagy definujıcı styly v HTML dokumentuVlozenı obrazku do HTML dokumentuHypertextove odkazy v HTML dokumentuDoporucena literatura
(KFC-INTZ) web design 19. 11. 2010 2 / 25
Planovanı obsahove naplne WWW stranek
1 Definice podstaty informace zverejnovane na strankach (Co?)2 Definice typickeho navstevnıka stranek (Kdo?)3 Definujte sdelenı navstevnıkovi4 Utrıdenı prezentovanych informacı do logickych skupin5 Definice hlavnıch zasad konecne prezentace6 Vlastnı proces tvorby stranek
• technicke moznosti Internetu• prehlednost zdrojaku• zobrazovanı ruznymi prohlızeci
7 Zabezpecenı prubezne aktualizace obsahu stranek
(KFC-INTZ) web design 19. 11. 2010 3 / 25
Zohlednenı cılove skupiny ctenaru WWW stranek
• Stranky nabızejıcı prıme sluzby ci prodej, tzv. e-komerce• Stranky prezentujıcı produkty ci sluzby (firemnı stranky)• Informativnı nekomercnı stranky• Ostatnı stranky
(KFC-INTZ) web design 19. 11. 2010 4 / 25
Velikost WWW stranek a hypertextove odkazy
1 Typicke rozlisenı monitoru → zohlednit pri tvorbe WWW stranek2 Hypertextove odkazy na WWW strankach
• Plynulost textu• Uspornost pouzitı odkazu• Napoveda
(KFC-INTZ) web design 19. 11. 2010 5 / 25
Prehlednost a vhodne usporadanı WWW stranek
1 Obsah prvnı stranky2 Hierarchie temat – pyramidovy system3 System umıstenı odkazu4 Mnozstvı textu a jeho citelnost5 Navigace po strankach, tlacıtko zpet6 Mapa stranek, vyhledavanı klıcovych slov7 Unifikace oznacovanı systemu souboru
(KFC-INTZ) web design 19. 11. 2010 6 / 25
Obrazky na WWW strankach
1 Odkazy jako ikony nebo text2 Minimalizace velikosti obrazku3 Vyuzitı parametru pro vymezenı prostoru (HEIGHT, WIDTH)4 Alternativnı popisky (ALT)5 Obrazky na jinych serverech, fotoalba, ikony atd.6 Obrazky na pozadı
(KFC-INTZ) web design 19. 11. 2010 7 / 25
Autorska prava na Internetu
1 Bernska umluva (1886)2 Copyright c© × ochranna znamka R© TM.
3 Sırenı autorsky chranenych materialu4 citovat, Citovat, CITOVAT! → citacnı etika5 Co je vlastne chraneno? Autorsky zakon 121/2000 sb.
(KFC-INTZ) web design 19. 11. 2010 8 / 25
Zaklady typografie – typy pısma
• Verzalky, minusky, kapitalky• Patkove pısmo (Serif)• Bezpatkove pısmo (Sans-Serif)• Sırka pısma – proporcionalnı a neproporcionalnı• Typ pısma a jeho vyuzitı, rez pısma, stupen a sırka pısma
(KFC-INTZ) web design 19. 11. 2010 9 / 25
Kodovanı narodnıch znaku
anglicka abeceda (ASCII tabulka) – 128 znaku (8 bit)vychodoevropske jazyky:
• ISO 8859-2• Windows CP-1250• Unicode UTF-8 (32 bitu)
(KFC-INTZ) web design 19. 11. 2010 10 / 25
Barvy na WWW strankach
CMYK a RGB kodovanı
• RGB kodovanı• jmeno: red• hexadecimalnı kod #RRGGBB: #FF0000• procentovy zapis: rgb(100%,0%,0%)
• Typy obrazku pouzitelnych v prostredı Internetu• Bitmapove (rastrove, bodove) obrazky• Vektorove (objektove orientovane) obrazky
(KFC-INTZ) web design 19. 11. 2010 11 / 25
Bitmapove graficke formaty pro WWW stranky
obrazek 10×15 cm, 24 bit barevna skala, TIFF bez komprese 2,8 MB
• TIFF – standard, ale ne pro web (LZW, 10×15: 2 MB, 1/3:240 kB)
• GIF – 8 bit barva, bezztratova komprese, animace(380 kB–50 kB)
• JPEG – 24 bit barva, ztratova komprese (75 %: 105 kB–18 kB)• PNG – 8, 24 a 32 bit barva, bezztratova komprese
(1,5 MB–200 kB)
(KFC-INTZ) web design 19. 11. 2010 12 / 25
Editory vhodne k tvorbe WWW stranek
WYSIWYG editory
• MS FrontPage 2003
• NVU 1.0
• BlueVoda Website Builder 10.1
Ostatnı editory
• MAX’s HTML Beauty++ 2004
• Notepad++ 5.8.4
• PSPad editor 4.5.4
• HTML-Kit 1.0 Build 292
• AceHTML Freeware Build 9
(Ne)vyhody: WISIWYG editor × textovy editor
(KFC-INTZ) web design 19. 11. 2010 13 / 25
Standard jazyka HTML
1 prısny (strict) – pouzıva jen prvky noveho standardu<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
2 prechodovy (transitional) – lze pouzıvat i tzv. zastarale prvky<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd>
3 s ramy (frameset) – stejny jako prechodovy rezim a navıc lzepouzıvat prvky pro tvorbu ramu (napr. frame, frameset)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/frameset.dtd">
Vyvoj: HTML + XML = XHTML v. 1.1
(KFC-INTZ) web design 19. 11. 2010 14 / 25
Zakladnı rozvrzenı dokumentu HTML
• Strukturu a formatovanı dokumentu definujı znacky (tagy)• Znacky jsou parove <html> a </html> a neparove <br>
• Znacky se mohou vnorovat, ale nesmı se krızit• Znacky majı parametry <html lang="cz">
• Lze vkladat komentare <!-- komentar -->• Nektere znaky lze vkladat pouze neprımo (napr. < je <)
(KFC-INTZ) web design 19. 11. 2010 15 / 25
Zakladnı rozvrzenı dokumentu HTML
Znacka Vyznam Atributy<html>. . . </html> Definuje pocatek a konec HTML dokumentu. dir=smer
lang=jazyk
version=retezec
<head>. . . </head> Vymezuje tzv. hlavicku HTML dokumentu.Jejı obsah se nezobrazuje.
dir=smer
lang=jazyk
profile=url
<body>. . . </body> Vymezuje vlastnı obsah (telo) HTML doku-mentu a definuje nektera zakladnı pravidlazobrazenı dokumentu v prohlızeci.
background=url
bgproperties=hodnota
bgcolor=barva
text=barva
link=barva
alink=barva
vlink=barva
leftmargin=hodnota
topmargin=hodnota
(KFC-INTZ) web design 19. 11. 2010 16 / 25
Definice struktury HTML dokumentu
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN"
2 "http ://www.w3.org/TR /1999/REC -html401 -19991224/ loose.dtd">
3 <html >
4 <head >
5 .........
6 </head >
7 <body >
8 .........
9 </body >
10 </html >
(KFC-INTZ) web design 19. 11. 2010 17 / 25
Hlavicka HTML dokumentu
Znacka Vyznam Atributy<meta> Zakladnı informace o obsahu HTML doku-
mentu pro vyhledavacıho robota. Je soucastıhlavicky HTML dokumentu.
dir=smer
lang=jazyk
charset=jmeno
name=retezec
content=retezec
http-equiv=retezec
scheme=schema
<base> Definuje zakladnı adresu pro vsechny rela-tivnı adresy v ramci dokumentu.
href=url
target=jmeno
<title>...</title> Nazev HTML dokumentu, ktery se zobra-zuje v zahlavı okna prohlızece. Je soucastıhlavicky HTML dokumentu
(KFC-INTZ) web design 19. 11. 2010 18 / 25
Hlavicka HTML dokumentu
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN"
2 "http ://www.w3.org/TR /1999/REC -html401 -19991224/ loose.dtd">
3 <html >
4 <head >
5 <title >Koloidnı strıbro - metody jeho prıpravy </title >
6 <meta name=" description" content =" Stranky o strıbru">
7 <meta name=" keywords" content ="koloid , strıbro , prıprava">
8 <meta name=" author" content =" Libor Kvıtek">
9 </head >
10
11 <body >
12 .........
13 </body >
14 </html >
(KFC-INTZ) web design 19. 11. 2010 19 / 25
Telo HTML dokumentu, jeho zakladnı formatovanı
Znacka Vyznam Atributy<b>. . . </b> Tucne pısmo. obecne<i>. . . </i> Kurzıva. obecne<u>. . . </u> Podtrzene obecne<tt>. . . </tt> Neproporcionalnı pısmo. obecne<small>. . . </small> Pısmo o bod mensı. obecne<big>. . . </big> Pısmo o bod vetsı. obecne<sub>. . . </sub> Dolnı index. obecne<sup>. . . </sup> Hornı index. obecne<font>. . . </font> Definuje zmeny vlastnostı pısma oproti stan-
dardnımu nastavenı pro prıslusnou castHTML dokumentu.
size=hodnota
color=hodnota
name=retezec
face=retezec
<div>. . . </div> Menı zarovnanı a barvu textu uzavrenehomezi znackami.
align
color
<pre>. . . </pre> Prohlızec ponechava formatovanı textuz puvodnıho dokumentu.
(KFC-INTZ) web design 19. 11. 2010 20 / 25
Tagy urcene pro obecne formatovanı textu
Znacka Vyznam Atributy<p>. . . </p> Formalnı a fyzicke rozdelenı textu na od-
stavce.obecne
<h>. . . </h> Formalnı a fyzicke rozdelenı textu na nadpisy. align
<br> Zalomenı radku obecne<hr> graficky oddelovac size
color
noshade
width
align
<center>. . . </center> Centrovanı textu obecne
(KFC-INTZ) web design 19. 11. 2010 21 / 25
Tagy definujıcı styly v HTML dokumentu
Znacka Vyznam Atributy<cite>. . . </cite> oznacenı citovane casti textu obecne<code>. . . </code> syntaxe zdrojovych kodu obecne<var>. . . </var> syntaxe zdrojovych kodu obecne<dfn>. . . </dfn> vyznacenı pojmu pro rejstrık obecne<blockquote>. . . </blockquote> vyznacenı dlouhe citace obecne<address>. . . </address> oznacenı adresy obecne<em>. . . </em> kurziva obecne<strong>. . . </strong> tucny font obecne
(KFC-INTZ) web design 19. 11. 2010 22 / 25
Vlozenı obrazku do HTML dokumentu
<img src="obr1.gif"> → obrazek umısteny prımo v adresari<img src="../gifs/obr2.gif"> → obrazek umısteny v adresari gifs vcetnecele adresarove cesty<img src="http://www.neco.cz/gifs/obr3.gif"> → obrazek je zadan s celouURL i adresarovou adresouparametry:• alt="popis"
• align="left|right|top|middle|bottom"
• width="hodnota" (v px ci %) × height="hodnota" (v px)• border="hodnota" (v px)• hspace="hodnota" × vspace="hodnota" (prostor nad a pod v px)
(KFC-INTZ) web design 19. 11. 2010 23 / 25
Hypertextove odkazy v HTML dokumentu
tag <a> – anchor (kotva), tj. tag odkazujıcı na jiny souborprıklady pouzitı:
1 <a href="http://www.seznam.cz">seznam, najdu tam co neznam</a>
2 <a href="./bla/blabla/index.html">nejaka blbost</a>
3 <a name="retezec">...</a>
1 Odkaz na <a href ="# strana3">stranu c. 3</a>
2 (probıha nekolik stran textu)
3 .
4 .
5 .
6 <a name ="# strana3"></a>
7 (text pokracuje na tretı strane )
(KFC-INTZ) web design 19. 11. 2010 24 / 25
Doporucena literatura (za korunky/zadarmıko)
Za korunky• HLAVENKA, J. Vytvarıme www stranky a spravujeme modernı web site. 7. vyd. Brno:
Computer Press, 2005. 356 s. ISBN 80-251-0801-5.• BROZA, P. Programovanı www stranek pro uplne zacatecnıky. 1. vyd. Praha: Computer
Press, 2000. 172 s. ISBN 80-7226-278-5.• STANICEK, P. CSS Kaskadove styly – Kompletnı pruvodce. 2. vyd. Brno: Computer
Press, 2003. 178 s. ISBN 80-7226-872-4.• SMITH E., Bud. Creating Web Pages for Dummies. 7th Ed. Indianapolis: Wiley
Publishing, Inc., 2004. 387 p. ISBN 0-7645-7327-6.• TITTEL, E. HTML, XHTML & CSS for Dummies. 6th Ed. Indianapolis: Wiley
Publishing, Inc., 2008. 403 p. ISBN 978-0-470-23847-9.
ZadarmıkoCZ
• http://www.jakpsatweb.cz/• http://ewebtvorba.unas.cz/manualy/html/index.php
ENG
• http://www.w3.org/TR/html401/• http://www.w3schools.com/html/
(KFC-INTZ) web design 19. 11. 2010 25 / 25
top related