Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 10. Előadás Css Tananyag:Web-programozás.

Slides:



Advertisements
Hasonló előadás
Szerver oldali programozás
Advertisements

Települési vízgazdálkodás I. 6.előadás
MINŐSÉGMENEDZSMENT 2. előadás PTE PMMK MÉRNÖKI MENEDZSMENT TANSZÉK 2011.
PTE PMMK Műszaki Informatika Tanszék
Delphi programozás alapjai
Vizuális és web programozás II. TRTLB226 Tantárgyfelelős: Lénárt Anett mérnöktanár Rendszer- és Szoftvertechnológia Tanszék B137
Környezeti és Műszaki Áramlástan I. (Transzportfolyamatok I.)
Kommunális technológiák I. 10. előadás
HTML űrlapok kezelése és feldolgozása PHP segítségével
Stílus, mesteroldal, témák
Gazdaságelemzési és Statisztikai Tanszék
© BZ, 2006Stíluslapok használata1 Váltsunk stílust! Stíluslapok a webszerkesztésben.
WEBOLDALFEJLESZTÉS
OLDALSZERKEZET ELEMEK 1. A TAG A header taggel fejléc adható meg. Ez a rész tartalmaz bevezető információt a weboldalról vagy annak egy részéről (pl..)
Delphi programozás alapjai Nagyváradi Anett PTE PMMK MIT.
PTE Természettudományi Kar
LabView használata PTE PMMK MIT Nagyváradi Anett
Microsoft szoftverek a szakképzésben
SharePoint Designer és Expression Web
Delphi programozás alapjai Nagyváradi Anett PTE PMMK MIT.
Programozás I Függvények általános jellemzői
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Előadás JavaScript Tananyag: W eb - programozás.
Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Vizuális és web programozás II. Tananyag: 2. konzultáció CSSJavaScript.
Vizuális és web programozás II.
Vizuális és web programozás II.
Vizuális és web programozás II.
Webszerkesztés Stíluslapok (CSS).
A jogi informatika tananyagának elérhetősége
Esettanulmány Focalis segmentalis glomerulosclerosis
CSS.
STATISZTIKA II. 3. Előadás Dr. Balogh Péter egyetemi adjunktus Gazdaságelemzési és Statisztikai Tanszék.
EJF Építőmérnöki Szak (BSC)
EJF VICSA szakmérnöki Vízellátás
EJF Építőmérnöki Szak (BSC)
Weblapok elrendezésének, dizájnjának kialakítása Borsi Katalin webfejlesztő, oktató NetAcademia Oktatóközpont.
Nem irodai programok fájltípusai
XHTML 1. óra. Miért térjünk át HTML-ről XHTML- re? HTML-szabványban tartalom és forma összemosódott HTML 4.0 szabványban stíluslapok használatát javasolták.
Korpásné Szűcs Melinda web-referens DEENK Korpásné Szűcs Melinda web-referens DEENK.
CSS A CSS bemutatása.
Weboldal tervezés programozó szemmel. Alapok Minden webcím www. –tal kezdődikMinden webcím www. –tal kezdődik Webböngésző = Internet ExplorerWebböngésző.
Script nyelvek alkalmazása a webkartográfiában 1/14 Script nyelvek alkalmazása a webkartográfiában Gede Mátyás MFTTT, március 22.
Hyper Text Markup Language
Érdekességek. Tudod-e? Mit jelent a „www”? A) Wild Windows Wave B) World Wide Web C) Wide World Web.
Web-grafika II (SVG) 8. gyakorlat Kereszty Gábor.
Párizs, a fények városa Szakdolgozatom témájának azért választottam Párizst, mert világ életemben csodáltam magát a várost, mindig is nagy vágyam volt,
Web-programozás Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 1. Előadás Tananyag: A WWW A HTML nyelv alapjai.
Wordforce e-learning szerkesztő lehetőségei és korlátai
Az NVU webszerkesztő program
Szerver oldali programozás 3. Előadás Tananyag: PHP string-kezelő függvények Lénárt Anett mérnöktanár - PTE PMMIK Rendszer- és Szoftvertechnológia Tanszék.
Tananyag: 3. Előadás A HTML nyelv alapjai Kép beillesztés Navigációk
Okostelefon köztesréteg (1.3-5)
Web-programozás Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 2. Előadás Tananyag: A HTML nyelv meta elemei.
Spanyolország gyöngyszeme: GRANADA Egy hobby portál kivitelezése.
Webprogramozó tanfolyam
Java web programozás 2..
Szerver oldali programozás
Budapest szeptember 28.. A webes alkalmazás a CD főkönyvtárában lévő index.html nevű fájllal indítható el.
Web programozás, I. - Kecskeméti Fõiskola GAMF Kar, tanév, őszi félév1 Web programozás I., Web programozás tantárgyi információk.
Egressy projekt Előadó: Beschenbacher Kornél Felkészítő tanár: Gál Tamás Iskola neve,címe: Budapesti Műszaki Szakképzési Centrum Egressy Gábor Két Tanítási.
Tóth Attila Informatika Alkalmazásai Tanszék. Digitalizáló csapat JGYPK Informatika Alkalmazásai Tanszék Szakmai vezető: Dr. Galambos Gábor Ellenőrzés:
1 Műszaki kommunikáció 8. előadás vázlat Dr. Nehéz Károly egyetemi adjunktus Miskolci Egyetem Alkalmazott Informatikai Tanszék.
Alkalmazott Informatikai Tanszék
Webprogramozó tanfolyam
Delphi programozás alapjai
Hogyan írhatunk játékprogramokat?
CSS Cascading Style Sheet HTML.
Terméksimertető Készítette: Sárfi Benjámin Verzió: 1.0beta4
Az előadás címe: Modern parazitológiai diagnosztika és terápia
Cascading Style Sheet.
Manapság az internetes technológiákat körülbelül 1,4 milliárdan használják személyes, illetve üzleti célokra. Jelenleg kutatások zajlanak az internet technikai.
Előadás másolata:

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 10. Előadás Css Tananyag:Web-programozás

Cascading Style Sheets (CSS) HTML oldalak stíluslapjai A HTML oldalak szerzői a weboldalaikhoz egyedi stílust rendelhetnek A fejlesztők a stílust egyszer rögzítik, és hozzákapcsolhatják minden általuk készített HTML laphoz Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék

<META …. cím … Külső.css fájl meghívása a.html fájlba

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Külső.css fájlban deklarált stílusosztály behívása a.html fájlba Példa: … A külső.css fájlban lévő B_stilusa stílusosztály elemeit örökölte. …

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék A.css fájl Egy css utasítás két részből áll: 1.a szelektor tartalmazza a formázandó HTML tag megnevezését (B); 2.a deklaráció végzi el a szelektorban meghatározott tag formázását.

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék 1. Példa: B { color: #FF0000 } A deklaráció is két részre bontható: egy tulajdonságra (color) és a hozzá tartozó értékre (red). A.css fájl

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék A.css fájl 2. Példa:.B_stilusa { font-size:24px; color: #FF0000; } A.B_stilusa egy globális stílusosztály. Deklarációjában 2 tulajdonság és 2 érték szerepel.

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Alapértelmezett stílustulajdonság beállítása Példa: BODY { color: black; background: url(hatter.gif) white; } A BODY szövegszínét feketére állítja be, háttérként képet rendel hozzá. Ha a kép nem érhető el, a háttérszín fehér lesz. A.css fájl

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék CSS referencia: Cascading Style Sheets (CSS)

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda1.css: tag stílusformázása: pelda1.html: A különböző html tag-ekhez hozzárendelhetőek stílusok, melyek öröklődnek.

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda1.css: b { font-size:24px;color: #FF0000; } pelda1.html: Példa 1 Öröklődünk Öröklődünk2

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda2.css: Globális stílusosztály definiálása. pelda2.html: A globális stílusosztály meghívása CLASS opcióval. STYLE opcióval való formázás.

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda2.css:.b_stilusa { font-size:40px; color:#0000CC; } pelda2.html: Öröklődünk2 class- szal

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda3.css: Globális stílusosztályok definiálása. pelda3.html: A globális stílusosztályok meghívása CLASS opcióval. lsd. a mintafájlokat!

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék CSS: DIV-ek CSS: DIV-ek A DIV-ek úgynevezett befoglaló dobozok, melyek segítségével a weboldalt részekre bonthatjuk és elemenként kezelhetjük. A DIV-ek egymásba ágyazhatóak és stílusok rendelhetőek hozzájuk. A stílusokat öröklik a DIV-ben lévő html elemek is. Alkalmazása: tag-ek Alap tulajdonságai: width, height, border, margin, padding, és ezek altulajdonságai pl.: margin-left.

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda4.css:.elso_div { width:300px; height:100px; border:1px red solid; } pelda4.html : Ez egy div a pelda4.css fájl-ból

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda5.css: DIV-ek használata. A DIV-ek alapesetben egymás alatt jelennek meg. Tulajdonságok: pelda5.html : DIV-ek meghívása.

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda6.css : A float tulajdonsággal pozícionálni tudjuk a div-eket. A clear tulajdonság visszaállítja az alapállapotot. pelda6.html: DIV-ek meghívása.

Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék Mintafájlok pelda6.css:.bal { width:150px; height:500px; background-color:#FF0000; float:left; } pelda6.html:

Folytatás a GYAKORLATOKON! Lénárt Anett egyetemi adjunktus - PTE PMMK Rendszer- és Szoftvertechnológia Tanszék