Html és css órák, 4. lecke

1. Keretek szervezése

A kereteket a böngészőablak több területre történő felosztására használják, amelyek mindegyike külön HTML dokumentum (keret vagy keret).

A keretek valós célja a navigáció (és nem az oldalelrendezés eszköze). A keret ötlete, hogy a képernyőt több területre vagy ablakra osztja. Ez lehetővé teszi, hogy egyszerre több dokumentumot jelenítsen meg, és lehetővé teszi a navigáció végleges rögzítését a képernyőn.

Ha egy egyszerű kialakítást használ két keretrel (1.

• A keretszerkezetet leíró dokumentum,
• dokumentum a bal oldali kerethez,
• dokumentum a megfelelő kerethez.

Ábra. 1. Egy egyszerű keretszerkezet két keretből

A kereteket a szerkezet tartalmazza és . az oldalra cserélve a kereteket és , azaz A keretszerkezetet leíró dokumentumnak nincsenek címkéi és .

Beágyazhatja a keretterületeket.

Címke attribútumok

Ez az attribútum határozza meg a keret oszlopok számát és szélességét. Az oszlopok szélessége pixelben vagy százalékban megadható.

cols = n - egy n-szélességű oszlopot határoz meg.

cols = n% - az adott keret n% oszlopát osztja ki - a böngészőablak szélességének aránya.

Ez az attribútum határozza meg a keretvonalak számát és magasságát. A sorok magassága pixelben vagy százalékban megadható.

sorok = n - egy n-es magasságú karakterláncot határoz meg.

sorok = n% - a keret e vonalát osztja ki n% - a böngészőablak magasságának aránya.

Ez az attribútum határozza meg a keretszerkezet keretének megjelenítését.

frameborder = yes - megjelenik a 3D keret (az alapértelmezett érték).

frameborder = no - a keret láthatatlan

Jobb, ha a sorokat és oszlopokat nem képpontokban határozzuk meg, hanem relatív értékeket használva. A csillag (*) jelöli, hogy a képernyő van osztva arányos részek: COLS = "*, *, *" - megfelel a COLS = "33%, 33%, 33%."

A COLS (oszlop), ROWS (string) értékeknél a listát idézőjelek közé kell tenni. Ha az idézeteket nem használják, az értékek között nem lehet szóköz.

Tekintsünk egy példát egy egyszerű keretszerkezet kódra, amelyet a 2. ábrán mutatunk be. 1.

Gyakorlati feladat 1

1. Készítse el a keretek mappáját. Másolja be a fájlokat háttérképekkel fon3.jpg, fon8.jpg, fon10.jpg a mappából html_css_4
2. Nyissa meg a shablon.html fájlt
3. Módosítsa a kódot a 2. ábrán szereplő listán. Mentse el a dokumentumot frames_2.html fájlként
4. Hozzon létre egy fájlt a 3. ábrán. Mentse el a dokumentumot doc1.html formátumban
5. Hozzon létre egy fájlt a 4. ábrán. Mentse el a dokumentumot doc2.html formátumban
6. Futtassa a frames_2.html fájlt egy dupla kattintással. Az Internet Explorer böngészőablakában a weboldalnak meg kell egyeznie a 2. ábrán látható módon. 1

2. ábra Kétoszlopos vázszerkezet

3. ábra Dokument doc1.html

4. ábra Dokumentum doc2.html

Az 1. ábrán. Az 1. ábra a HTML-oldal megjelenését jeleníti meg a böngészőben. A képernyő függőlegesen 2 képkockára oszlik. A bal oldali keret a képernyő 25% -át foglalja el, és tartalmaz egy, az doc1.html nevű oldalt. A jobb oldali keret a képernyő 75% -át veszi fel, és tartalmazza a doc2.html oldalt.

címke meghatároz egy külön keretet. Ez egy párosítatlan címke. címke pontosan annyi területnek kell lennie, mint a képernyő osztja. A címke a következő attribútumok állnak rendelkezésre:

Ez az attribútum tiltja a felhasználót a keretek átméretezésével, hogy megakadályozza az oldaltervezés torzulását.

Gyakorlati feladat 2

1. Nyissa meg a shablon.html fájlt.
2. Módosítsa a szöveget, mint az 5. ábrán.
3. Mentse a dokumentumot a frame mappába frames_3.html fájlként
4. Írja be az új dokumentumba a 6. listában látható szöveget. Mentse a dokumentumot doc3
5. Futtassa a frames_3.html fájlt egy dupla kattintással. Az Internet Explorer böngészőablakában a weblapnak meg kell egyeznie a 3. ábrán látható módon. 7.

Felhívjuk figyelmét arra a tényre, hogy a keretszerkezetben a nyílás számát egyenlőnek kell lennie a zárás számával

5. ábra Három keret keretszerkezete

6. ábra Dokumentum doc3.html

7. ábra: Három keret keretszerkezete

• Hozzon létre egy fájlt a weboldal MyHouse.ru keretszerkezetével, amely három keretből áll (8. ábra). Mentse el a public_html mappába index.html címen
• Adja meg a főnevet a jobb oldali kerethez.
• A felső keretben állítsa be a futó sort (file shapka.html)
• A bal oldali keretben helyezze el a projektek listáját (file menu.html).
• A jobb oldali keretben a main.html fájl.

8. ábra: Keretszerkezet a webhely MyHouse.ru

2. Hiperhivatkozások szervezése

Tekintsük csak a szükséges attribútumot href.

A forrás horgony a szöveg vagy kép, amelyet a felhasználó az egérrel egy másik webhelyre vagy weboldalra ugrik.

A hiperhivatkozások bárhol beilleszthetők a HTML dokumentumba.

Az 1. ábrán. A 9. ábra egy példát mutat a HTML kódra a hiperhivatkozás és a nézet megtekintéséhez az oldal böngészőjében ezzel a kóddal:

Részletes információ az ügynökségünk szolgáltatásairól

itt

Ebben a példában a "ris.jpg" kép egy grafikus snap elem. A böngésző kék szegéllyel kiemeli.

• <а href="../folder/my.htm"> - menjen egy másik dokumentumba a webhelyén

például: A hiperhivatkozás szövege

Gyakorlati feladat 3

Gyakorlati feladat4

1. A public_html mappában hozza létre a projekt mappát. és benne van a mappa img_d_152_1d.

2. Hozzon létre egy weboldalt a d-152-1d projektről, a projektek / d-152-1d mappák anyagai (szövegek és fotók) segítségével. Weboldal tervezéséhez a stíluslap stílusait és a címke attribútumokkal történő formázást kell használni.

3. Minden anyagot fel kell használni. Ennek eredményeképpen a weboldalon a következő blokkok szükségesek: cím, megjegyzés, anyagok, ár a projekthez, tervek, homlokzatok

4. Mentse el a weblapot projekt_d-152-1d.html fájlként a projektek mappájában. Az ábrán látható közelítő eredmény. 12.

Ábra. 12. Weblap projekt_d-152-1d.html.

5. townhouse.html web-oldal helyét a képet a projekt D-152-1D és az „Project D-152-1D» hiperhivatkozásokként az oldalon projekt_d-152-1d.html. amely részletesebb információkat tartalmaz a projektről (13. ábra).

6. Ellenőrizze a hiperlinkek működését.

Ábra. 13. A kép egy hiperhivatkozás

Például létre kell hoznia egy hivatkozást a tartalomjegyzékből az első fejezethez

1. Az 1. fejezet címe mellett található tartalomjegyzékben létre kell hoznia egy rekordot:

2. Az 1. fejezet címsorának melletti weboldalon hozzon létre egy címkét, és használja a címke nevének attribútumát adjon neki egy nevet. A böngésző nem jelöli meg a címke tartalmát referenciaként, mivel címkesként használják. A dokumentumon belül a címke egyedinek kell lennie.

Gyakorlati feladat 5

1. Nyissa meg a létrehozott projekt_d-152-1d.html weboldalt.

2. A "House Design No. D-152-1D" címsor alatt adja hozzá a bekezdéseket

3. Hozzon létre in-page hiperlinkeket minden újonnan létrehozott elemről a megfelelő weboldalra (14. ábra, a)

4. Az oldal alján hozzon létre egy hivatkozást. amikor rákattint, a felhasználó visszatér az oldal tetejére (14. ábra, b).

Ábra. 14. In-page hiperhivatkozások

A hiperhivatkozások színének megadása

Webes színek alapértelmezés szerint a hiperhivatkozásokhoz: kék a nem látogatott hiperhivatkozásokhoz, piros az aktivált hiperlinkeknél (a kattintás pillanatában), lila a már meglátogatott hiperhivatkozásoknál.

Ha ezeknek az attribútumoknak az alapértelmezett értékei egyértelműen nem egyeznek meg az oldal tervével, akkor az értékek módosíthatók. Ehhez a címkét vannak megfelelő attribútumok.

Gyakorlati feladat 6

1. A bal oldali tetején tegye a logót egy grafikus hiperlinkbe, hogy aktiválásakor a webhely (a main.html fájl) oldalát beilleszti a jobb keretbe.
2. Győződjön meg róla, hogy minden hiperhivatkozás működik. A webhelynek olyannak kell lennie, mint ez, amint az a 2. ábrán látható. 15, amikor rákattint a "Városi házak és blokkolt házak projektjeire" linkre, amint az az 1. ábrán látható. 16, amikor a D-152-1D projekt képére kattintasz, ahogy az 1. ábrán látható. 17.

Ábra. 15. A MyHouse.ru honlapja

Ábra. 16. A weboldal meglátása az aktív linkkel "Városlakások és blokkolt házak projektjei"

Ábra. 17. A "D-152-1D projekt" aktív linket tartalmazó honlap megtekintése

Speciális elemekkel való munka

A speciális elemekkel való munkavégzés pszeudoosztályokkal történik.

Az ál-osztály egy speciális választó, amely meghatározza, hogyan néz ki egy HTML elem egy adott pillanatban.

Például a CSS meghatároz egy pszeudosztályt, amely meghatározza, hogy a hiperhivatkozások hogyan néznek ki bizonyos időpontokban:

Az elem első karakterére pszeudoosztály definiálható. Például egy bekezdéshez:

p: első betű. Ez kényelmes a speciális hatások meghatározására a nagybetűsítéshez.

Gyakorlati feladat 7

1. A projektoldal legfelső menüjében adja meg a fájlban a külső stílus specifikációt, amely bizonyos pontokon meghatározza a hiperhivatkozás típusát. Ehhez definiálja a stílust paramétereket a 2. ábra szerint. 18.

2. Ellenőrizze a stílust.

a - nem látogatott linkek

Ábra. 18. Hiperhivatkozás típusa egy bizonyos időpontban

Gyakorlati feladat 8

1. A "Városi házak és blokkolt házak projektjei" című tételhez csatolja a fájlban egy külső stílusmeghatározást, amely bizonyos pillanatokban meghatározza a hiperhivatkozás típusát. Ehhez definiálja a stílust paramétereket a 2. ábra szerint. 19.

2. Ellenőrizze a stílust. Vegye figyelembe, hogy a háttérszín és az egyéb menüpontok nem változnak meg. Csak a hiperhivatkozás típusának kell változnia.

Ábra. 19. Hiperhivatkozás típusa "Városi házak és blokkolt házak projektjei"

3. A proekt_townhouse.html oldalon található projektnévvel rendelkező elemhez mellékeljen egy külső stílus specifikációt, amely meghatározza a hiperhivatkozás típusát bizonyos pontokon. Ehhez definiálja a stílust paramétereket a 2. ábra szerint. 20.

4. Ellenőrizze a stílust.

Ábra. 20. Hivatkozás típusa a projektek nevére

Ennek a témának a következtében létre kellett hoznia a következő fájlokat:

Kapcsolódó cikkek

• Html és css a példák gombján küldje el

• Létrehoz egy html linket, amely elindítja a skype hívást, a cyber univerzumomat

• Különbségek css a html-ből