3
Webprogramozás
Webprogramozás
Σχετικά
Oldalszerkezet kialakítása GRID-ekkel
Εκκρεμείς δραστηριότητες
Finish all activities to earn the playlist badge
Ολοκληρώστε τις παρακάτω δραστηριότητες, κερδίστε σήματα και θα δείτε την πρόοδο της playlist σας να ενημερώνεταιΣχετικά
Ebből a kurzusból elsajátíthatod, hogy miképp tervezheted meg és alakíthatod ki css stíluslap segítségével HTML oldalad szerkezetét. Mindenképp szükséges, hogy a kurzus megkezdése előtt tisztába legyél a HTML5 szemantikus tag-jeinek jelentésével és használatával, remélhetőleg találkoztál már a css szelektorok fogalmával és csatoltál már stíluslapot html oldalhoz. A kurzus során építünk ezekre az ismeretekre.
Αποκτήστε το σήμα δραστηριότητας
Weboldalak kialakítása GRID-ek segítségével Αποκτήστε αυτό το σήμα
Ebből a kurzusból elsajátíthatod, hogy miképp tervezheted meg és alakíthatod ki css stíluslap segítségével HTML oldalad szerkezetét. Mindenképp szükséges, hogy a kurzus megkezdése előtt tisztába legyél a HTML5 szemantikus tag-jeinek jelentésével és használatával, remélhetőleg találkoztál már a css szelektorok fogalmával és csatoltál már stíluslapot html oldalhoz. A kurzus során építünk ezekre az ismeretekre.
Εργασίες
Αρ. Εργασίας 1
Εκδίδεται από τον οργανωτή ή σάρωση κώδικα QR
Az alábbi linken ingyenesen megtervezheted az elkészítendő oldalad drótvázát: https://wireframe.ccAz oldalnak legyen egy fejléce (header) , egy menüje (nav) , egy tartalmi rész (article), két oldalsó tároló elem (aside) a "Érdekességek" és a "További cikkek" rovatnak, valamint lábléce (footer).
Αρ. Εργασίας 2
Εκδίδεται από τον οργανωτή ή σάρωση κώδικα QR
A GRID-es oldalakítás elmélete
A grid rendszer 2018-ban kifejlesztett technika, és az oldalon elhelyezett elemek pozícionálása szolgál.Az oldalunkon elhelyezett elemek két csoportba oszthatók: vagy szülőelem, vagy gyerek elem. (persze előfordulhat, hogy egyazon elem néha szülőelemként, néha pedig gyerekelemként viselkedik).Az szülőelemet képzeletben oszlopokra és sorokra bontjuk, s megadjuk, hogy az elképzelt rács melyik téglalapjában melyik html elelmünk fog elhelyezkedni.Ez alapján (a flexbox-hoz hasonlóan) az utasítások itt is két csoportba oszthatók. Az utasítások egy része a szülőelemre alkalmazható, amásik része pedig a gyerek elemekre.
Szülőelemre alkalmazható utasítások - a rács kialakítása:
display:grid;grid-gap: 10px;grid-template-columns:110px 110px 110px;VAGYgrid-template-areas:"név név név név ""mas mas ot ot""negy negy negy negy";
Αρ. Εργασίας 3
Εκδίδεται από τον οργανωτή ή σάρωση κώδικα QR
Gyerekelemre alkalmazható utasítások - Elhelyezkedés a rácsongrid-column-start: 2;grid-column-end: 3;grid-row-start: 1;grid-row-end: 2;**illetve rövidítve: **grid-column: 2 / 3;grid-row: 1 / 2;**VAGY névvel: **grid-area: név;
Szokásos oldal alakítás esetén többnyire elegendő egy 12 oszlopos rácsszerkezetet elképzelni. (néha kevesebb is elég, használhatunk ettől eltérő oszlopszámú rácsot is, de ez az esetek nagy részében megfelelő oszlopszám)Ezeken a képzeletbeli oszlopokon alakítjuk ki az oldalunk szerkezetét, és elképzeljük, melyik szerkezeti elem hány oszlopon fér el.Az oldalunk bármely kimenethez történő illesztését ezen a 12 oszlopon tervezzük meg, és valósítjuk meg.
Αρ. Εργασίας 4
Εκδίδεται από τον οργανωτή ή σάρωση κώδικα QR
3. lépés: Alkalmazd a tanultakat!
https://wireframe.cc/pVpaXoAlakítsd ki a HTML vázt pl. Neatbeans program segítségével, csatold a css-t és alakítsd ki gridek segítségével az oldalszerkezetet a megtervezett mintának megfelelően a csatolt videó alapján!
Δεξιότητες
ESCO
#apply goods stacking techniques for containers
Δραστηριότητες: 2
Ξεκίνησε: 2
Η playlist ολοκληρώθηκε: 0
Ώρα για να ολοκληρωθεί: 4 ώρες
Κοινοποίηση:
Διοργανωτές
My first organisation
Η Badgecraft φιλοξενεί αυτήν την πλατφόρμα και την αναπτύσσει μαζί με κορυφαίους εκπαιδευτικούς οργανισμούς. Το πρόγραμμα Erasmus + της Ευρωπαϊκής Ένωσης συγχρηματοδότησε την κατασκευή της πρώτης έκδοσης αυτής της πλατφόρμας. Επικοινωνήστε με το support@badgecraft.eu.
Αλλαγή γλώσσας: