Web programozás. 3. előadás

Web programozás

3. előadás

Űrlapok ●

form

●

label for

●

input type

●

select, option value

●

textarea

–

szöveges mező: text

–

jelszó: password

–

rádiógomb: radio

–

jelölőnégyzet: checkbox

–

küldés gomb: submit

Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév

2

form, input szöveges
Vezetéknév:
Keresztnév:

3

Rádió gomb
Nő
férfi

4

Jelölőnégyzet
Van biciklim
Van autóm

5

label elem ●

●

●

Nő

●

●

●

●

férfi


6

Űrlap adatok elküldése
Felhasználói név:

7

Lenyíló lista
<select name="autok">


8

Több soros szöveges mező Kezdőszöveg


9

Példa


10

Űrlap források ●

http://www.webaim.org/techniques/forms/controls.php

●

http://www.websemantics.co.uk/tutorials/accessible_forms/

●

http://www.alistapart.com/articles/prettyaccessibleforms

●

http://www.lukew.com/resources/articles/WebForms_LukeW.pdf


11

HTML szabványok ●

HTML 4.01 transitional, strict, frameset

●

XHTML 1.0: nincs frameset

●

XHTML 1.1: csak egyféle van

●

Validátor: –

http://validator.w3.org/

–

Firefox: Tidy HTML Validator kiterjesztés


12

Példa Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév

13

Stílusok ●

külső stíluslap: link vagy style

●

belső stílus: style

●

soron belüli: style tulajdonság (érdemes kerülni)


14

Külső stíluslap <style type="text/css"> @import url("stilus.css");


15

Beágyazott stíluslap <style type="text/css"> body {background-color: red} p {margin-left: 20px} ... Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév

16

Soron belüli stílus
Ez egy bekezdés


17

"Joker" elemek ●

●

●

div, span csak a stílusos formázás miatt kellenek, jelentésük nincs [DEMO] http://www.opendesigns.org/preview/?template=1181


18

Fejrész (head) ●

title

●

meta: keywords, description, ...

●

base href

●

link: külső fájlok (CSS, JavaScript, RSS)


19

Szkriptek ●

belső:

<script type="text/javascript"> document.write("A böngésző támogatja a JavaScriptet.") ●

külső

<script type="text/javascript" src="message.js"> Web programozás I. - Kecskeméti Fõiskola GAMF Kar, 2010-2011. tanév, őszi félév

20

Általános tulajdonságok ●

class, id, style, title

●

dir, lang

●

accesskey, tabindex

●

esemény tulajdonságok: onXXX


21

URL kódolás ●

●

Űrlapba bármit be lehet írni, az URL viszont nem bír el bármit: kódolni kell pl. szóköz: %20


22

CSS


23

Listák ●

list-style-type: disc, circle, square, none, decimal, lower-roman, upper-alpha, ...

●

list-style-image: url('arrow.gif')

●

list-style-position: inside, outside

●

közös: –

list-style: square inside url('arrow.gif')


24

Méretek ●

width, height

●

min-width, max-width

●

Explorer hiba:


25

A megjelenítés módja ●

●

display: block, inline vagy none elem függő az alapértemezés (block vagy inline)

p {display: inline} div {display: none}
Első bekezdés.

Második bekedés.

Nem látható div elem.

26

Lebegtetés ●

legtöbbször képnél alkalmazzák a "szöveg körbefuttatására"

●

[DEMO: kép aláírással]

●

[DEMO: horizontális menü]


27

Felesleges táblázatok nélküli oldalkialakítás ●

●

Elavult technikák: keretek, tárbázat az oldalszerkezet kialakítására, távtartó gif-ek, stb. [DEMO: oldalszerkezet]


28

Pozícionálási sémák ●

●

●

●

●

alapértelmezett: static relatív: odébb toljuk az elemet, ettől a helye nem lesz tartalommal kitötve, üresen marad [DEMO: cím árnyékkal] abszolút pozíció: kikerül a sémából, a helye is fel lesz használva fix: az ablakhoz képest (keretek helyett használható!)


29

Láthatóság ●

●

●

visibility: visible vagy hidden eltérés a display:none-től: itt a helye megmarad felhasználás: több "füles" dialógusablak: div-ek egymáson, és mindig csak egy látszik


30

Látszólagos osztályok ●

●

●

speciális hatást tudunk elérni, amit máshogy nem tudnánk csak megjelenítés alatt derül ki, mit és hogyan kell formázni legismertebb a linkek viselkedése: a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}


31

Média típusok ●

●

●

●

Ma már nem csak képernyőn nézünk weboldalakat @media screen { p.test {font-family: verdana, sans-serif; fontsize: 14px} } @media print { p.test {font-family: times, serif; font-size: 10px} } @media screen, print { p.test {font-weight: bold} }


32

Külön stíluslapok ●

fontosabb eszközök:

●

all, aural, handheld, print, projection, screen

●

●

●

lehet teljesen külön, vagy csak részben szétválasztva


33

Linkek ●

Validátor: –

●

http://jigsaw.w3.org/css-validator/

10 (!) cikk: –

http://weblabor.hu/cikkek/cssalapjai1

●

http://css.lap.hu

●

http://www.opendesigns.org/


34

Web programozás. 3. előadás

Recommend Documents