|
HTML&CSSyhteenveto 1. htmlPerusformaatti <html> <head> <title> </title> </head> <body> </body> </html> 2. htmlTagien kielioppisäännöt <Tagin nimen attribuutti1=Kiinteistön arvo1" attribuutti2=Kiinteistön arvo2”>tag</Tagin nimi> 3. Hyperlinkkitunnisteet <a href="minne hypätä" ></a> Funktio: Sivun hyppy. Kysymys: Jos haluat tehdä kuvasta (picture1.jpg) hyperlinkittyä, miten sinun pitäisi kirjoittaa se? <a href=""><img src="picture1.jpg" /></a> 4. Taulukoiden syntaksi <table> <tr> <td> Pienet muodot </td> <td>Sisältö</td> </tr> </table> Huomautus: Lomakkeen sisältö on kirjoitettavaTDSisällä 5. Taulukoiden yleiset ominaisuudet a) Taulukko:reuna=Numerot(Kehys) bordercolor=Reunuksen väribgcolor=Taustaväricellspacing=Luku (etäisyys solujen välillä) cellpadding=luku (etäisyys sisällön ja taulukon reunuksen välillä)korkeus="Kiinteät numerot|Prosenttiosuus%"Pituusleveys="Kiinteät numerot|Prosenttiosuus%"Leveys b) Tr: bgcolor=Taustavärikorkeus="Kiinteät numerot|Prosenttiosuus%"Pituusleveys="Kiinteät numerot|Prosenttiosuus%"Leveysreunaväri c) Td: bgcolor=Taustavärikorkeus="Kiinteät numerot|Prosenttiosuus%"Pituusleveys="Kiinteät numerot|Prosenttiosuus%"Leveyscolspan=Numerot (sarakkeiden yhdistäminen)rowspan=Numerot (Yhdistä rivit)reunaväri Kysymys: Kuinka asettaa reunuksen paksuus ja väri, kun kuva on keskitetty? Reunuksen leveys Reunusväri 6. Muodot a) Toiminto: Lähetä tiedot palvelimelle b) Syntaksi:<form ></form> c) Muotoelementit 1. Syöttötagit i. Teksti<input type=text /> ii. Salasanat<syöttötyyppi=salasana /> iii. Yksivalinta<tulotyyppi=radion nimi="Nimi sama" /> iv. Monivalinta<input type=valintaruutu /> v. napit<input type=button /> Lähetä<input type=submit /> Nollaus<input type=reset> Ominaisuudet: Teksti:size=Tekstin pituusmaxlength=Maksimimerkkejä voi syöttää Valitse:tarkistettuValittu oletuksena Napit:value=Painikkeen yläpuolella näkyvä teksti 2Pudotusvalikot Tunnisteet: Syntaksi, Ominaisuudet <valitse monta(Useita valintoja on mahdollista)size=Voit nähdä vaihtoehtojen määrän> <vaihtoehto valittu(Valittu oletuksena)>Sisältö</option> </select> 7. CSSKaskadityylilomakkeet Toiminto: Rikastuta sisältöä ja vähennä koodin määrää Kirjoitus: Paikka (3laji) 1. Rivissä:Lisää attribuutteja suoraan tageihintyyli="Omaisuutta:Attribuuttiarvo;…” 2. Upotukset:AtJohtoLevy-yhtiön kirjoittaminen:<tyylityyppi="teksti/css"> Valitsin{Ominaisuudet:Attribuuttiarvo;…} </style> Pisteet3Perusvalitsimet:htmlValitsija,LuokkaLuokkavalitsin (.luokan nimi),henkilöllisyystodistusValitsin (#idNimi) on ainoa 3. Ulkoinen:Luo erillinen.cssTiedosto, ja lisää sitten viitekoodi sivulle, jota haluat käyttää, kyllä2Kirjoitustyyliä Muista a: AtJohtoLisää tagit sisälle<link rel="stylesheet" type="text/css" href="stylesheet-tiedostonimi.css”> Huomautus: Jos tyylilomakkeessa on ristiriita, priorisoi inline-koodi ennen inline-käyttöä ja lopuksi ulkopuolinen Kysymys: KäyttöDIV+CSSRakenne jaTaulukkoLayoutin hyvät ja huonot puolet? 8. Pseudoluokka (valitsija) a:link {väri: #FF0000} /* vierailemattomat linkit */ a:vieraili {väri: #00FF00} /*Linkit, joita on vierailtu*/ a:hover {color: #FF00FF} /* Hiiri siirretään linkkiin */ a:aktiivinen {väri: #0000FF} /*Valittu linkki*/ 9. DIV(Laatikkomalli) Toiminto: SijainenTaulukkoTaulukko Kirjoittaminen:<div>Sisältö (voidaan sisäkyttää.)divisioona)</div> Käyttö: Aseta leveys ja korkeus, voidaan yhdistääAsemaOminaisuudet Yleiset ominaisuudet: 1. Reunus: Laatikon paksuus 2. Marginaali: laatikoiden välinen etäisyys 3. Pehmuste: etäisyys laatikon sisällön ja laatikon välillä. 4. pituus、Leveys: Korkeus, leveys 5. Tausta: Laatikon väri, kuvio 6. kellua: Laatikon istuinVasen、Oikea 10. KuluaDreamweaverLuo mallipohja Toiminto: Saavuttaa sama verkkosivuston tyyli, vähentää koodin määrää ja parantaa verkkosivujen kehityksen tehokkuutta Kuinka luoda ja käyttää pohjia 1. Luo: tiedosto à new à regular à HTMLmallineà Luo 2. Tallenna: Tallenna omalle verkkosivustollesi, huomaa: Oikea polku on, että sivuston alareunaan ilmestyy Templates -kansio, joka tallentaa mallipohjatiedostot (.dwt) 3. Kirjoittaminen: Aivan kuten tavallisten sivujen kirjoittaminen, tekstin ja saman tyylin kirjoittaminen verkkosivustolla. Eri sisältöjä varten sinun täytyy luoda muokattava alue (vie hiiri muokkausalueen päälle, jonka haluat luoda à hiiren oikealla klikkauksella ja valitse Mallipohja à Uusi muokattava alue) 4. Luo sivu mallipohjan pohjalta: File à New à Template à Valitse käytettävä mallipohja 11. DreamweaverAiheeseen liittyvät tietopisteet V. HyväksyttyDreamweaverLuo verkkosivusto: Sivustoà Uusi sivusto à edistynyt à paikallinen tieto Nimeä sivusto ja aseta polku sivustolle Huomautus: Sivuston polun ei tulisi olla kiinaksi BTuttuusDreamweaverMeidän täytyy osata tuottaa aiemmin opitut perustagit Painopiste on sivun typografiassa taulukoiden kautta CSisälläDreamweaverkäyttämällä hyperlinkkiä (suhteelliset ja absoluuttiset osoitteet) 12. CSSYleiset ominaisuudet border:1px solid #000000; /*rajan3Yleiset ominaisuudet*/ leveys; pituus; /*Aseta leveys ja korkeus*/ tekstin kohdistus /*Aseta sisältö keskelle vasemmalle ja oikealle*/ viivan korkeus /*Säätösisältö on keskitetty ylös ja alas.*/ float /*Kellunta(Floatingia on käytettävä vaakasuorien hyperlinkkien tekemiseen)*/ marginaali /*Aseta laatikon ulkoetäisyys*/ Pehmuste /*Aseta etäisyys laatikon sisällä*/ sijainti /*Sijoittuminen, jonka kanssa ollaan myöhemminvasen ylhäälläKäytä yhdessä*/ color:#000000; /*Aseta tekstin väri*/ background-color:#000000; /*Aseta taustaväri*/ font-size:14px; /*Aseta fonttikoko*/ teksti-koristelu /*Määritä, onko hyperlinkki alaviivainen, yleisesti käytettyAlleviivaustaiei mitään*/ list-style-type:none; /*Tyylittele linkki (ei pisteitä)*/
|