|
HTML&CSSösszefoglalás 1. htmlAlapformátum <html> <head> <title> </title> </head> <body> </body> </html> 2. htmlCímkék nyelvtani szabályai <Tag Name attribútum1=Ingatlanérték1" attribútum2=Ingatlanérték2”>Tag</Címkenév> 3. Hiperlink címkék <a href="hová ugorj" ></a> Funkció: Oldalugrás. Kérdés: Ha egy képet (picture1.jpg) hiperkapcsolódni szeretnél, hogyan írd meg? <a href=""><img src="picture1.jpg" /></a> 4. Táblázatok szintaxisa <table> <tr> <td> Kis formák </td> <td>Tartalom</td> </tr> </table> Megjegyzés: Az űrlap tartalmának a következőképpen kell írniaTDBelül 5. A táblázatok közös jellemzői a) Táblázat:szegély=Számok(Keret) bordercolor=Szegély színebgcolor=Háttérszíncellpacing=Szám (cellák közötti távolság) cellpadding=szám (távolság a tartalom és a tábla határa között)magasság="Fix számok|Százalékos%"Magasságwidth="Fix számok|Százalékos%"Szélesség b) Tr: bgcolor=Háttérszínmagasság="Fix számok|Százalékos%"Magasságwidth="Fix számok|Százalékos%"Szélességbordercolor c) Td: bgcolor=Háttérszínmagasság="Fix számok|Százalékos%"Magasságwidth="Fix számok|Százalékos%"Szélességcolspan=Számok (oszlopok összevonása)rowspan=Számok (sorok összevonása)bordercolor Kérdés: Hogyan lehet beállítani a szegély vastagságát és színét, amikor a kép középre van helyezve? Szélesvonal széles, szél színe 6. Formák a) Funkció: Adat küldése a szervernek b) Szintaxis:<form ></form> c) Forma elemek 1. bemenetcímkék i. Szöveg<input type=text /> ii. Jelszók<input type=password /> iii. Egyválasztási lehetőség<input type=radio name="Név ugyanaz" /> iv. Többválasztási lehetőségek<input type=checkbox /> V. gombok<input type=button /> Beküldés<input type=submit /> Reset<input type=reset> Tulajdonságok: Szöveg:size=Szöveg hosszamaxlength=Maximális karakterek beírhatók Kiválasztani:ellenőrizteAlapértelmezés szerint kiválasztva Gombok:érték=A gomb felett megjelenített szöveg 2Legördülő címkék: Szintaxis, tulajdonságok <válassz többszöröst(Többszörös választás lehetséges)size=Láthatod a lehetőségek számát> <opció kiválasztva(Alapértelmezés szerint kiválasztva)>Tartalom</option> </select> 7. CSSA kaszkádos stíluslapok Funkció: Tartalom gazdagítása és a kódmennyiség csökkentése Írás: Hely (3fajok) 1. Sorban:Közvetlenül hozzáadni attribútumokat a címkékhezstílus="Ingatlan:Attribútumérték;…” 2. Beágyazás:nélfejKiadóírás:<style type="text/css"> Selector{Tulajdonságok:Attribútumérték;…} </style> Pontok3Alapvető szűrők:htmlSelector,OsztályOsztályválasztó (.osztály neve),azonosítóSelector (#idName) az egyetlen 3. Külső:Készíts egy külön egyet.cssFájlt adj hozzá, majd hozzáadod a hivatkozási kódot arra az oldalra, amit használni szeretnél, igen2Írásfajta Emlékezz a: nélfejCímkék hozzáadása<link rel="stylesheet" type="text/css" href="stylesheet fájlnév.css”> Megjegyzés: Ha ütközés van a stíluslapban, előbb az inline prioritást használd, majd az inline-t használod, végül pedig külső oldalt használd Kérdés: HasználatDIV+CSSelrendezés ésTáblázatA kiosztás előnyei és hátrányai? 8. Pseudoclass (selector) a:link {szín: #FF0000} /* nem látogatott linkek */ A:Meglátogatott {szín: #00FF00} /*Meglátogatott linkek*/ a:lehengeld {szín: #FF00FF} /* Egér mozgás linkre */ a:aktív {szín: #0000FF} /*Kiválasztott link*/ 9. DIV(Dobozmodell) Funkció: HelyettesítőTáblázatTáblázat Írás:<div>Tartalom (be lehet bészkelni.)div）</div> Használat: Állított szélesség és magasság, kombinálhatóPozícióAttribútumok Közös tulajdonságok: 1. határ: A doboz vastagsága 2. Határ: a dobozok közötti távolság 3. Párnázás: a doboz tartalma és a doboz közötti távolság. 4. magasság、szélesség: Magasság, szélesség 5. Háttér: Doboz színe, minta 6. Lebegés: A páholy üléseBalra、Jobbra 10. HágóÁlomszövőKészíts sablont Funkció: Ugyanazt a weboldal-stílust érje el, csökkentse a kód mennyiségét, és javítsa a weboldalfejlesztés hatékonyságát Hogyan készítsünk és használjunk sablonokat 1. Create: file à new à regular à HTMLsablonà Create 2. Mentse el: Ments a saját weboldaladon, megjegyzés: a helyes út, hogy a weboldal alján megjelenik egy Sablon mappa, amely tárolja a sablonfájlokat (.dwt） 3. Írás: Akárcsak a hétköznapi oldalak írása, a weboldalon ugyanazt a szövegtípust és szöveget írni. Különböző tartalmakhoz szerkeszthető területet kell létrehoznod (a jobb kattintással a szerkesztési terület fölé lépni à jobb kattintással, és válaszd a Template à New editable area-t) 4. Hozzon létre egy oldalt egy sablon alapján: Fájl à Új à Sablon à Válaszd ki a használt sablont 11. ÁlomszövőKapcsolódó tudáspontok V. ElfogadvaÁlomszövőWeboldal létrehozása: Oldalà New site à advanced à local information Nevezd meg a helyszínt, és állítsd be az útvonalat az oldalhoz Megjegyzés: Az oldal útvonala nem lehet kínaiul BIsmerősségÁlomszövőTudnunk kell, hogyan tudjuk előadni azokat az alapvető címkéket, amiket korábban megtanultunk A hangsúly az oldal tipográfiáján van táblázatokon keresztül CA következőkbenÁlomszövőegy hiperhivatkozás (relatív és abszolút címek) 12. CSSKözös tulajdonságok border:1px solid #000000; /*a határ3Közös tulajdonságok*/ szélesség; magasság; /*Állítsd be a szélességet és magasságot*/ szöveg-igazítás /*Állítsd be a tartalmat középen balra és jobbra*/ vonalmagasság /*A korrekciós tartalom fel-le középre van helyezve*/ lebegés /*Float(Lebegő rendszert kell használni vízszintes hiperhivatkozások létrehozásához)*/ margó /*Állítsd be a doboz külső távolságát*/ Párnázás /*Állítsd be a távolságot a dobozon belül*/ pozíció /*Pozicionálás, majd később leszbal felsőHasználat együtt*/ color:#000000; /*Állítsd be a szöveg színét*/ background-color:#000000; /*Állítsd be a háttérszínt*/ font-size:14px; /*Állítsd be a betűméret*/ szöveg-díszítés /*Állítsuk be, hogy a hivatkozás aláhúzott-e, általában használtAláhúzásvagySemmi*/ list-style-type:none; /*Stílus a linket (pont nélkül)*/
| 
Közzétéve 2014. 11. 09. 10:42:19
|
|
|
Közzétéve 2014. 11. 10. 13:27:37
