Reklaam
Sisukord
§1. Sissejuhatus
§2 – xHTML-iga alustamine
§3 – Disain CSS-iga
§4 – rohkem teavet
1. Sissejuhatus: Mis on xHTML?
Tere tulemast XHTML-i maailma – Laiendatav hüperteksti märgistuskeel – märgistuskeel (sarnane programmeerimisega), mis võimaldab igaühel koostada paljude erinevate funktsioonidega veebilehti. Paljudel juhtudel on see Interneti peamine keel.
Niisiis, miks me hoolime?
Noh, kas te pole kunagi soovinud oma veebisaiti? Või tee oma mäng? Selle juhendi ülesanne on anda teile maitse sellest võimsast maailmast. Kui teil on varasemaid programmeerimiskogemusi, on see muidugi lihtsam kui programmeerimisseiklust alles alustades. Igal juhul loodan ma seda selgitada, et isegi algaja sellest aru saaks.
Me hoolime xHTML-ist, sest see on hea lähtepunkt veebi põhiliste ehitusplokkide õppimisel. Suhtlusvõrgustikud nagu Facebook, MySpace ja Twitter kasutavad teist (serveripoolset) programmeerimiskeelt nimega PHP, kuid enne programmeerimisse sukeldumist on hea mõte mõista põhitõdesid maailmas. See juhend käsitleb põhitõdesid.
Kui soovite rohkem teada saada, kuidas Internet töötab või kuidas arvutivõrgud selle kõigega töötavad tehnilisi asju või isegi seda, kuidas arvuteid saab ehitada, siis proovige neid suurepäraseid juhendeid oma sõpradelt aadressil MakeUseOf:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Kuidas luua oma arvutiOma arvuti loomine on väga rõõmustav; kui ka hirmutav. Kuid protsess ise on tegelikult üsna lihtne. Juhendame teid kõike, mida peate teadma. Loe rohkem
//www.makeuseof.com/tag/everything-need-know-home-networking/ Kõik, mida peate koduvõrgu kohta teadmaKoduvõrgu seadistamine pole nii keeruline, kui arvate. Loe rohkem
//www.makeuseof.com/tag/guide-file-sharing-networks/ Failijagamisvõrkude MakeUseOfi juhendKas olete kunagi mõelnud, millised on suurimad failijagamisvõrgud? Millised on erinevused BitTorrenti, Gnutella, eDonkey, Useneti jne vahel? Loe rohkem
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Windows 7: Ultimate GuideKui kardate Vista või XP versioonile üle minna, sest arvate, et see erineb täiesti sellest, millega olete harjunud, peaksite lugema seda uut juhendit. Loe rohkem
//www.makeuseof.com/tag/download-how-the-internet-works/ Kuidas Internet töötabNüüd pääseme Internetti ligi oma koduarvutitest, kontorist, sülearvutitest ja telefonidest. Kuid paljud inimesed pole ikka veel päris kindlad, mis on Internet ja kuidas see tegelikult töötab. Loe rohkem
2. xHTML-iga alustamine
Sellest peatükist saate teada, kuidas veebisaite mitmel erineval viisil luua ja kohandada, sealhulgas õppida, kuidas:
• Lisage veebilehtedele pilte.
• Looge ja kasutage veebilehtedel navigeerimiseks hüperlinke.
• Koostage teabeloendeid kasutades punktipunkte jms.
• Loo tabeleid juhuslike andmete ridade ja veergudega ning oskab juhtida nimetatud tabelite vormindamist.
• Looge ja kasutage vorme, millega saate tegelikult suhelda.
• Muutke veebilehed otsingumootoritele juurdepääsetavaks.
Kõik see tehakse xHTML-i programmeerimisega. Ei usu seda? Loe edasi. Oleksite üllatunud, kui palju saate nii lühikesest juhendist õppida.
Enne selle juhendi "kodeerimise" osa juurde asumist vajate mõnda tarkvara, et saaksite oma programme redigeerida, testida ja põhimõtteliselt arendada. Minge aadressile www.dreamspark.com ja hankige üks järgmistest programmidest TASUTA, eeldusel, et olete üliõpilane:
• Microsoft Visual Studio 2010
• Expression Studio 4
Kui te pole üliõpilane, võite ka kasutada Notepad++, kust saad üsna lihtsalt kätte www.notepad-plus-plus.org
Kui olete mõne programmi hankinud ja selle installinud, saate alustada oma xHTML-i kogemust.
Võimalik, et kasutate Windowsi asemel Maci või Linuxit; peate leidma a tekstiredaktor see töötab teie jaoks sel juhul. Proovige leida üks, mis näitab teile joonte arvu ja värvikoodi.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad – ülikerge tekstiredaktor [Linux] Loe rohkem
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany – suurepärane kerge koodiredaktor Linuxi jaoksÜllataval kombel ei paku Linux nii palju häid IDE-sid (integreeritud arenduskeskkondi). Usun, et selle põhjuseks on asjaolu, et omal ajal võtsid enamik Linuxi programmeerijaid välja vana hea Notepadi (või antud juhul gediti) ja alustasid... Loe rohkem
Kui te ei soovi spetsiaalseid tööriistu alla laadida, saate siiski kasutada tekstiredaktorit, näiteks Märkmik või Wordpad. Ülaltoodud programmid on aga palju paremad tööriistad testimiseks ja kujundamiseks ning abistamiseks oma kodeeringut, kuna see annab teada, kui teete vea või kui proovite õiget sõna meelde jätta kasutada. Lihtne on parem, eks? Kasutan isiklikult Notepad++ ja Microsoft Visual Studiot, kuigi olen Expression Studio 4 kohta palju häid asju kuulnud. Peate otsustama, mis teile kõige rohkem meeldib, kuid kõik need töötavad suurepäraselt.
MÄRGE: Notepadi või Wordpadi abil loodud veebisaidi testimiseks tehke järgmist.
Kui fail on avatud, klõpsake Fail >> Salvesta nimega
Tippige failinime lõppu .html ja klõpsake Salvesta
Avage äsja salvestatud fail (see avaneb teie vaike-Interneti-brauseris)
2.1 Maailma tundmaõppimine
Olgu, siin on teekonna algus. Alustame lihtsalt selle veebilehe ekraanile panemisega. Kõigepealt peate teadma, mida on. XHTML-kood kasutab algus- ja lõpumärgendeid, et selgitada välja, mis lehe iga elemendiga toimub.
Siin on algusmärgendi näide:
Siin on näide lõpumärgendist:
Kas näete erinevust? Ühel on elemendi nimi sulgudes ja teisel on sama, kuid elemendi nime ees on kaldkriips.
TÄHTIS: Peate sildi sulgema pärast selle avamist mingil koodi hetkel. Samuti peavad sildid olema pesastatud, see tähendab, et te ei saa teha järgmist.; see peaks olema. Vaadake, kuidas sildid üksteise sisse mahuvad? Mõelge neile nagu kastidele: pooleteisesse kasti ei saa panna midagi kindlat.
Parim viis programmeerimise tundmaõppimiseks on seda tegelikult teha, seega piisab teooriast. Võrdluseks märgin iga koodirea numbriga, et saaksin rea haaval lahti seletada, mis toimub.
1. real olen märkinud html koodi ja real 5 olen selle lõpetanud. Sees silt on
). Kui avate selle veebibrauseris, näete ekraanil järgmist:
Kui soovite muuta lehe pealkirja brauseri vaatenurgast (nt. firstpage.html), siis saate hõlpsasti lisada järgmise koodirea:
See muudab teie veebilehe professionaalsemaks.
2.2 Alates ja töötades alla
Enamikul juhtudel sees silt on a
ja a .The kasutatakse tavaliselt skriptimiseks CSS-is (jaotis 3) ja JavaScriptis (selgitatakse tulevases juhendis), samas kui on tavaliselt lehe sisu.
Mõnda sisu saab muuta, kasutades skripti jaotises
, kuid on tavaliselt sisu, mida lehel ei saa muuta. Näiteks võib tuua lühikese jutu teie külastatava veebisaidi kohta.Saate muuta sisu vormingut, kasutades CSS-i (jaotis 3).
. Kuid saate teha ka muudatusi vormingus .Tavaliselt kasutatav siltide komplekt, mida kasutatakse kehas, on päisefondid. Nende päisefondide suurus ja tugevus/paksus on erinev. Lihtsalt vaadake ise allpool:
2.3 Kas teie pilt on väärt tuhat sõna? - Pildid
Siiani oleme rääkinud ainult tekstist ja sellest, mida see veebisaidil teha saab, kuid seal on veel rohkem. Kas soovite muuta oma veebisaidi veelgi ahvatlevamaks kui lihtsalt uhked fondid? Proovige hankida häid pilte, et teie sait tõesti vaatajaskonnale vaatamisväärset annaks. Olge siiski autoriõiguse seadustega ettevaatlik; Kui kavatsete oma veebisaidi Internetti üles panna, on parem teha ise pilte.
Teil võib tekkida vajadus kasutada Photoshopi või mõnda digitaalse pildistamise oskust, et luua suurepärane pilt või täiustada oma pilti ja muuta see veelgi vingemaks. Suurepäraste näpunäidete ja ülevaate saamiseks proovige neid juhendeid:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Õppige Photoshopis fototöötlust: saate põhitõed selgeks 1 tunnigaPhotoshop on hirmutav programm, kuid kõigest ühe tunniga saate õppida kõik põhitõed. Võtke foto, mida soovite töödelda, ja alustame! Loe rohkem
• //www.makeuseof.com/tag/guide-to-digital-photography/ Digitaalse fotograafia juhend algajateleDigitaalne fotograafia on suurepärane hobi, kuid see võib olla ka hirmutav. See algaja juhend ütleb teile kõike, mida peate alustamiseks teadma! Loe rohkem
Kõige populaarsemad pildivormingud on järgmised:
• GIF = Graphics Interchange Format
• JPEG = Joint Photographic Experts Group
• PNG = Portable Network Graphics
Vaadake allolevat koodi ja ma selgitan järgmisena, mida see tähendab; st kuidas oma veebilehele pilte lisada.
Nagu eelmistes osades õpetati, alustame alati tähega ja kaassildid. Järgmisena
Pärast lõigu avamist real 9 lisatakse siia pildid veebisaidile. Pildi/pildi lisamiseks tuleks kasutada alustuseks. Järgmisena peate soovitama, kus fail asub. Tavaliselt proovite hoida seda faili veebisaidi failidega samas kaustas, muidu peate sisestama kausta tee, milles see eksisteerib. Ülaltoodud juhul olen kasutanud
. See tähendab, et allikas (src) pildist asub samas kaustas ja selle pildifaili nimi on Pilt.jpg. Lihtne eks?
Te ei pea lisama midagi rohkem kui pildi loomiseks an alt atribuut, kuid saate sellele atribuute lisada, et selles mõningaid muudatusi teha.
Tuntud ka kui alternatiivtekst, kuvatakse see atribuudi väärtus, kui hõljutate kursorit pildi kohal.
Võite märgata, et real 10 olen sildi alustanud ja lõpetas sellega />. See on veel üks viis siltide avamiseks ja sulgemiseks. See on tavaline piltide loomise viis, kuna saate valida pildi erinevaid omadusi, nagu laius ja kõrgus, nagu on näidatud ülaltoodud näites.
Ridadele 11 ja 12 lisatakse teine pilt, kuid see kasutab siltide avamiseks ja sulgemiseks teist meetodit. 10. rida loob pildi palju puhtamal viisil; kasutage seda, mitte ridadel 11 ja 12 toodud meetodit.
2.4 Hüperlingid kuhu need minna saavad?
2.4.1 "Maailmas" ringi liikumine
Kas soovite näidata sõpradele oma veebisaidil lahedaid saite, kuid ei tea, kuidas? Oled jõudnud õigesse kohta, loe edasi…
Enne selle selgitamist vaadake allolevat koodi ja vaadake, kas saate arvata, mida ma teen.
See on õige, ma loon hüperlinke mõnele suurepärasele ja kasulikule saidile. Põhimõtteliselt kasutage teatud veebiaadressiga veebilehe hüperlinkimiseks lihtsalt allolevat süntaksit:
[mida soovite hüperlinkida]
Ei tundu väga raske? Saate üsna lihtsalt sinna teksti panna, nagu ülaltoodud näitekood. Siiski pole põhjust, miks te ei võiks kasutada midagi muud, näiteks pilti. Lisateabe huvides: URL on ühtne ressursiotsija, põhimõtteliselt veebiaadress.
2.4.2 Pildid tuletavad teile meelde, kus olete olnud, ja viivad teid uuesti sinna
Siin on näide pildi kasutamisest hüperlingina:
Olen kindel, et kui loete selle jaotise eelmisi osi, mille avaldate, on see lihtsalt piltide ja hüperlinkide loomise segamine. Süntaks on seatud nii, et hüperlink on väljas ja pilt sees, paigutades sisestatud pildi hüperlingi.
2.4.3 Teil on meilisõnum – hüperlink e-posti aadressile
See on lihtsalt viimase osa kordus, kuid kui te pole nii palju tähelepanu pööranud, siis vaadake lihtsalt allolevat koodi:
URL-i asemel (nt. http://www.something.com) siin kasutan e-posti aadressi, mis hõlmab järgmise süntaksi panemist pärast võrdusmärki:
"mailto: [teie meiliaadress]"
10. rida on selle kontseptsiooni põhinäide. Kellele sa siis meili saadad? Tondipüüdjad!
2.4.4 Maailmas ringi liikumine – sisemine hüperlinkimine
Nüüd näete, kuidas saate oma veebisaidil ringi liikuda. Seda tehakse lihtsalt kasutades oma failinime URL-ina. Seetõttu saate luua veebisaidid, nagu on näidatud alloleval diagrammil. Teie kasutatav süntaks oleks umbes selline:
2.5 Kas sa oled eriline? Need tegelased on…
Kui sisestate veebisaidil ilmuvat teavet, näiteks sisu, peate võib-olla seda tegema sisestage midagi nagu sümbol, näiteks autoriõiguse sümbol: © või võib-olla väiksem või suurem kui sümbol. Kuid kuna kodeerimise süntaks kasutab tavalisi sümboleid, siis pidi sellest vähesest mööda saamiseks olema mõni muu viis takistus ja lahendus oli ampersandi (&) ja seejärel lühikoodi kasutamine, et öelda arvutile, millist sümbolit sisse panema. Allpool on tabel mõne näitega kodeerimisel saadud erimärkidest:
Näiteks võite öelda:
Ülaltoodud tabelis on < kuus rida, kuid > 2 rida
Ülaltoodud tabelis on < 6 rida, kuid > 2 rida
2.6 Loendid, loendid ja muud loendid
Olgu, nüüd peame korraldama mõned asjad, näiteks ostunimekirja. Nimekirju on kahte tüüpi. Need on:
• Järjestatud loend (numbrid, tähestikud, rooma numbrid)
• Järjestamata loend (täpppunktid)
Järjestatud loendi jaoks kasutaksite järgmisi silte =
Järjestamata loendi jaoks kasutaksite järgmisi silte =
Näiteks:
Ülaltoodud näites kaasasin nii järjestamata kui ka järjestatud loenditüübid. Aga kas sa märkasid, mida ma veel tegin? Lisasin ka tehnika nimega Pesastatud loendid. Neid pesastatud loendeid saab kasutada hierarhiliste suhete esitamiseks, näiteks koostisosade loendit Hankige ülaltoodud retsepti koostisosade etapp.
Võib-olla näete, et alustasin kogu loendit järjestatud loendina real 10 ja lõpetasin selle real 23. Vahepeal näeksid ja sildid, mida olen kasutanud. Need tähistavad Loendi elemendid. Loendiüksused on sõnad, mis kuvatakse, näiteks real 21:
Kui soovite minna punktipunktide või numbrite järgmisele hierarhilisele tasemele, pesake nende sees järgmiselt:
2.7 Tabelid… ei, mitte matemaatika
Kas see on sama keeruline kui teie korrutustabelid? Muidugi mitte, kui lähete asjasse õigesti. Kui te alles alustate selle kontseptsiooniga ja ma eeldan, et olete seda teinud, siis on tavaliselt kõige parem joonistada tabel, mida soovite teha, paberile, nagu ma allpool.
Nüüd vaadake seda allolevas koodis:
Nüüd segage need kokku ja allolev kuva peaks aitama teil mõista, kuidas tabel on üles ehitatud:
A
ja
tühjendage esimene ja viimane rida vastavalt paksus kirjas, et neile tabeliosadele rohkem tähelepanu pöörata. Enamik inimesi vaataks kõigepealt tabeli jaluses olevat kogusummat, eks?2.8 Digitaalsed vormid (pliiatsite kaugusel)
Netis surfates peate suhtlema veebilehtedega, millega kokku puutute. Näiteks aadressil www.makeuseof.com peate sisestama oma e-posti aadressi, nagu allpool ringjoon tellige MakeUseOfi uudiskiri ja igapäevased värskendused. Pärast oma e-posti aadressi sisestamist vajutaks Liitu ja see saadaks nupu kõrval olevas tekstikastis oleva teabe (teie e-posti aadress) kas andmebaasi või mõnele teisele meiliaadressile. Vormid kasutatakse selleks, mida sellest peatükist õpid.
Allpool on vorm, mida kasutatakse ainult oma nime sisestamiseks ja kummalgi klõpsamiseks Esita või Selge:
Siin on kood kulisside tagant, mida ma peagi üksikasjalikumalt selgitan:
Esiteks on ülaltoodud skripti kõige olulisem asi 10. rida. See on vormi algus. Meetod on tavaliselt kas postitus või saada. Üsna iseenesestmõistetav, aga postitus saadab teabe kuhugi salvestuse tegemiseks, näiteks e-posti aadressi või andmebaasi. Näiteks: küsimuse postitamine MakeUseOf Answersis. Hangi, teisest küljest saadab teie esitatud teabe ja naaseb koos tagasisidega, näiteks otsingumootoriga, saadab otsingu märksõnad ja naaseb koos tulemustega.
Ülaltoodud kodeerimisplokk on näide postitusvormist, kus sisestate oma e-posti aadressi ja see saadetakse pärast nupul Esita klõpsamist e-posti aadressiga peidetud atribuuti. The
Read 22–25 asetage nupud Esita ja Lähtesta/Tühjenda lehele tekstikasti alla. The Lähtesta nupp lihtsalt kustutab selle vormi tekstikasti või kastidesse sisestatud teksti. The Esita nupp järgib juhiseid vormi peidetud osadest, mis luuakse ridadel 14–18. Varjatud tüüp eeldab tavaliselt, et praegusel kujul kasutatakse midagi automaatset või osa millestki muust. Sel juhul annab see viimane postitused teavet sihtkoha kohta, antud juhul [email protected], koos teemaga juhul "Telli meilisõnum" ja suunab teid seejärel teisele lehele, antud juhul avalehele või "index.html".
2.9 meta mis? Miks?
Kas olete kunagi mõelnud, kuidas otsingumootorid veebisaite leiavad? Põhimõtteliselt on see see, mida nad kasutavad: meta elemendid. Tavaliselt kataloogivad otsingumootorid saite, järgides nende leitud saitide lehtede linke. Nendel metaelementidel on teave lehe kohta. Vaadake näiteks järgmist väljavõtet mõnest koodist:
Nagu ülalpool näete, läheb metateave sisse
3. Disain CSS-iga
Enamasti meeldib inimestele, kes selliseid juhendeid vaatavad, videomänge mängida. CSS ei ole aga Counter Strike Source ega ka FPS (First Person Shooter). CSS on tehnoloogia, mis töötab xHTML-iga ja tähistab Ctõusev Style Slehed. xHTML on iseenesest üsna igav, kuid kui lisate korraliku CSS-i, on teie loomingu vormindamine ja esitus palju huvitavam. Autorid saavad muuta veebilehel olevaid elemente, näiteks fonte, tühikuid, värve; seda tehakse dokumendi struktuurist (pea, keha jne) eraldi; seda selgitatakse hilisemates peatükkides). xHTML oli tegelikult loodud dokumendi sisu ja struktuuri täpsustamiseks. See ei tähenda, et xHTML ei saaks sisu vormingus muudatusi teha. See seadistus on aga palju kasulikum, kuna seda saab vajadusel ühest kohast juhtida. Näiteks kui veebisaidi vormingu määrab täielikult lisatud stiilileht, võib veebidisainer lihtsalt panna paika teise stiililehe, et veebisaidi esitusviisi oluliselt muuta.
3.1 Inline tantsustiilid
Nagu eespool mainitud, käsitleb see jaotis vormindamist ja stiile. Kuna oma sisu ja lehe stiili muutmiseks on palju võimalusi, mõtlesin, et oleks hea alustada kõige otsesemast tehnikast, mis on Tekstisisesed stiilid. Seda tehakse, asetades koodi sisu hõlmava vahekaardi atribuutide jaotisesse. Nagu nii:
Kõlab liiga raskelt? Lubage mul tuua teile näide:
Märkus: värv on kirjutatud värvi selle koodi kasutamisel, kuna see loodi kuskil, mis pole nii lahe kui Austraalia või Kanada; Loodan, et see teid liiga ei häiri.
Paksus kirjas märgitud teave ülaltoodud näites on vormingus, mida töödeldakse
silt. Erinevate värvide kuueteistkümnendkoodide loendi saamiseks otsige lihtsalt Google'ist või kasutage seda saiti: http://html-color- codes.com/
3.2 Manustatud stiililehed (Cheat Sheets on võidukas)
Kui teil on väga suur sait, võib eelmise jaotise tekstisiseste stiilide kasutamine olla valus. Aga kui soovite kasutada samu stiile ikka ja jälle, siis miks mitte kasutada a Manustatud stiilileht? See alternatiiv võimaldab teil luua oma stiile
koodi märgendit ja seejärel viitate neile oma lehele sisu sisestamisel koodis. Liiga keeruline? Siin on näide:
Kas näete, kuidas tekst muudab värvi, suurust või vormingut olenevalt ülaosas olevast stiililehest? Seda pole väga raske mõista, eks?
Real 7, kus tutvustame algust
16. rida kasutab .xtra klass, mis tehti varem. See toimib nii, et see lisab xtra klass mis tahes stiilile, millel see avatakse, kirjutades üle kõik atribuudid xtra klassikasutusi. Näiteks: kui stiilil on 20 pt suurune font ja selle värvus on roheline ning sellele asetatakse klass, millel on erineva suurusega fondi, siis asendab uus kirjasuurus vana, kuid vana roheline värv jääb kehtima nagu on.
3.3 Stiilid sõjas (vastuolulised stiilid)
Stiile on kolm taset ja need on:
• Kasutaja (veebisaidi vaatamine)
• (veebisaidi) autor
• Kasutajaagent (brauser)
Stiilid sulanduvad kokku nii, et luuakse kasutaja positsioonist lähtudes parim võimalik seadistus. Järgmine diagramm näitab kolme taseme hierarhiat.
3.4 Stiilitabelid väljaspoolt (väline)
Kas te ei arva, et oleks tüütu, kui igas uues kodeerimisfailis tuleks alati välja kirjutada sama stiilileht? Lahendus on olemas: Välised stiililehed. Saate luua teise faili eesmärgiga kasutada seda vormindamiseks; see on ".css” faili. Selle kasutamiseks teises failis tippige lihtsalt järgmine väljavõte:
Asenda faili nimi koos oma CSS-faili nimega ja ongi olemas, need on lingitud. Veenduge, et teie CSS-fail oleks teie lingitud faili(de)ga samas kaustas.
CSS-faili näidis:
Enne kui jätkame, olen jätnud mainimata, mida nad teevad. Ülalpool näete viimasel real, et olen pannud "ul ul { font-size: .8em; }” ja see tähendab, et fondi suurus muudetakse suhtelisele 0,8-le ehk 80% tavalisest suurusest, mida kasutaja soovib, kasutades oma brauserisse laaditud laadilehte. Enamik inimesi ei kasuta kasutaja määratud stiililehte, nii et ärgem selle pärast muretsege.
3.5 Positsioneerimiselemendid (kuhu edasi?)
Kui panete veebilehele pildi, ei taha te tegelikult, et see lihtsalt kuhugi läheks. Kas sa ei tahaks selles sõna sekka öelda? Nii saate seda teha, see on tegelikult näide ja ma selgitan seda peagi:
Ridadel 9 kuni 13 märkate, et see on klass, mille ID on as fgpic ja sellel on kasutatud mõningaid omadusi. The positsiooni atribuut on seatud absoluutne mis tähendab, et olenemata sellest, kuidas kasutaja seda muudab, jääb pilt sinna, kuhu teie (autor) selle oma koodiga asetab. The üleval ja vasakule omadused tähistavad punkti, kus element (nt. pilt/tekst) paigutatakse. The z-indeks atribuut on väga võimas tööriist, kuna see määrab virnastamise taseme, nagu on näidatud alloleval ekraanipildil:
Vaadake, kuidas taustpilt on taga z-indeksi väärtusega 1 ja tekst ees, z-indeksi väärtusega 3, samal ajal kui esiplaani pilt on keskel z-indeksi väärtusega 2. Kui mängite kaarte õigesti, näeb see päris hea välja
3.6 Pöörake tähelepanu oma ümbrusele (taust)
Veebisaidid näevad taustaga head välja, kas pole? Kas poleks tõesti igav, kui kõigil veebisaitidel oleks ainult valge või must taust? Miks mitte panna sinna pilt ja veidi värvi muuta? On mõned atribuudid, mille abil saate oma lehe tausta paremini esile tõsta ja lehele sära anda. Vaadake järgmist koodi ja vaadake, kas saate välja selgitada, mida esiletõstetud omadused teevad:
Kas saite aru, mida see teeb? Põhimõtteliselt on taustpilt see, mida me taustal kasutame, pildi tee läheb sulgudes/sulgudes niimoodi > url(SIIN). Võib arvata, et sellel on z-indeksi väärtus 0, kuna see on alati lehe lõpus. Pildi tausta asend on seatud all vasakule, üsna iseenesestmõistetav, eks? Järgmiseks on taustapilti korratud üle lehe x-telje (repeat-x) ja mitte ainult, vaid see on fikseeritud akna allserva (taustamanus). Lõpuks on värv juhuslikult valitud peamiselt punaseks. Vaata tulemust allpool:
3.7 Kui suur sa arvad? (elementide mõõtmed/tekstipiirangud)
Kui arvate, et see on kõik, mida CSS-il pakkuda on, eksite rängalt. CSS-i reeglid võivad määrata iga leheelemendi tegelikud mõõtmed. Võtame tekstikasti näite. Kas soovite sisestada teksti, mis ei liigu kogu ekraani ulatuses, või võib-olla luua tekstikasti, mida saab kerida ilma lehte liigutamata? Siin peaksite siis olema. Vaadake allolevat ekraanipilti selle kohta, mida ma just kirjeldasin:
Vaatame nüüd koodi kulisside taga:
Lihtsalt väike märkus: rida 6 lisab iga tekstivälja alla marginaalse äärise. Päris lahe, eks? Piiridest lähemalt aga järgmises osas.
3.8 Ümberringi tuleb ümber (piirid)
Ma arvan, et see ei vaja selgitust, kuid ma annan selle siiski. Põhimõtteliselt saate ääriseid panna peaaegu kõigele, nii et vaatame, kuidas seda teha. Nii et siin on kood:
Siin on see, mida kood teeb, põhimõtteliselt ääriste valik, mis ümbritseb kasutatava piiritüübi nime/nimesid. Pidage meeles, et soone vastand on hari ja sisendi vastand on alguses.
3.9 Ujuvad ja voolavad elemendid
Tavaliselt on üsna igav lihtsalt näha pealkirja, siis teksti, siis pealkirja ja teksti. Kuigi mitte muuta see natuke kenamaks? On meetod, mida saab kasutada, nn ujuvad, ja nüüd ma näitan teile, kuidas seda teha. Ujumine võimaldab teil liigutada elementi ekraani ühele küljele, samal ajal kui muu dokumendi sisu liigub seejärel ümber hõljuva elemendi. Ujuv element võib olla pilt või pealkiri või isegi mõni muu tekstiplokk. Vaatame nüüd, kuidas see välja näeb:
Päris hea mitme olukorra jaoks, nüüd on see kood, mis selle kujunduse konstrueerib:
Kas pole hämmastav, mida saate teha, kui leiate lihtsalt õige meetodi?
3.10 Ärge langetage menüüd – näide
Kui mõtlete veebisaidi loomisele, vajate tõenäoliselt menüüd, eks? Noh, see võib olla õige koht, kuhu minna, kui soovite midagi, mis poleks lihtsalt istumine. Dünaamilised elemendid muudavad veebilehed paremaks ja annavad saidile üldise mulje.
Üks mu lemmikmenüütüüpe peab olema a rippmenüüst Nii et nüüd vaatame, kuidas seda CSS-i abil luua. Vaadake allolevat koodi:
Ma tean, et see tundub alguses pisut hirmutav, kuid kui olete kannatlik ja lihtsalt loete edasi, saate sellest varsti aru.
15. rida ütleb: kui mul on <div> märgend klassiga = "menüü” ja hiir on hõljumasellest üle kuva a blokks selle sees.
Read 16-21 ütlevad: kui mul on <div> märgend klassiga = "menüü” ja <a> tag ja seejärel määrake need vormingud. Pidage meeles, et need read valivad peidetud menüünuppude vormingu. Ridadel 9–14 seadistatakse menüünupu vormingud, et ülejäänud menüü kuvamiseks üle kerida.
Rida 22 ütleb: kui mul on <div> märgend klassiga = "menüü” ja <a> silt ja mina hõljuma üle ühe neist elementidest ja seejärel määrake taustavärv erinevale rohelisele.
Vaadake lõpptoote allpool:
3.11 Kasutaja stiilitabelid (olete universumi keskpunkt)
Kasutajad saavad ise määratleda kasutaja stiililehed et lehed näeksid välja sellised, nagu nad tahavad. Lihtsalt selleks, et vahet teha Kasutaja stiililehed ja Autori stiililehed. Kasutajastiilid on välised stiililehed, mida kasutajad saavad ise luua ja mida tehakse lihtsalt CSS-failidena ilma suurema osa kodeerimiseta. Siin ma näitan teile ühte:
Kas see polnud mitte väga lihtne?
Kui soovite teada, kuidas seda oma brauseris seadistada, minge lihtsalt aadressile Tööriistad >> Interneti-suvandid >> Üldine >> Juurdepääsetavus >> Seejärel määrake oma fail Autori stiilileht on määratletud vahepealses koodis .
4. Rohkem informatsiooni
4.1 Miks kasutada xHTML-i ja co. disaini ja muude rakenduste üle?
Enne kui vaatate seda kui tõsiasja või midagi sarnast, peaksite teadma, et see on lihtsalt vaatenurk, mis sõltub teie asukohast ja sellest, kui tehniliselt mõtlete. Mulle meeldib oma projektide lõpuleviimiseks kasutada programmeerimiskeeli, kuna see tähendab, et saate aru, mis on kavandite taga, samas kui kasutate disainirakendusi, nagu Adobe Dreamweaver ja Microsoft FrontPage võimaldavad teil oma veebisaiti luua, kasutades ainult menüüdes saadaolevaid tööriistu. Seetõttu on disainirakendused piiratud teile pakutava menüüvalikuga. Kokkuvõttes on täiesti ilmne, et programmeerimiskeelte kasutamine ehitaks veebisaidi või valmistoote sisse midagi palju ahvatlevamat, kuna selle funktsionaalsust piirab ainult programmeerija oskus määratud keelega (nt. JavaScript, CSS, xHTML). Ma tean, et arvatavasti arvate, et olen erapoolik, kuid peate lihtsalt mõlemat proovima ja otsustama, kuidas palju vaeva, mida soovite oma töösse panustada, seejärel valige omale jõudmiseks sobivad tööriistad sihtkoht. Võite isegi valida mõlema kasutamise, kuna nii Dreamweaveril kui ka FrontPage'il on "kodeerimisvaade" ja "kujundusvaade".
Veebisaitide loomiseks on ka teisi viise, näiteks Joomla ja WordPressi abil.
4.2 Joomla
Joomla on suurepärane sisuhaldussüsteem (CMS), millel on palju paindlikkust ja hõlpsasti kasutatav kasutaja liides, mida paljud inimesed hirmutavad, kui mõistavad, kui palju valikuid ja konfiguratsioone on saadaval. Joomla on PHP-l ja MySQL-il põhinev platvorm. See tarkvara on avatud lähtekoodiga, mille saate hankida http://www.joomla.org/download.html
Kui soovite Joomla kohta põhjalikku juhendit, proovige seda MakeUseOfi juhendit: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Joomla juhend algajateleSee juhend juhendab teid kõigega alates sellest, miks valida Joomla ja kuidas seda oma veebiserverisse installida, kuni selleni, kuidas oma saiti oma maitse järgi kujundada ja kohandada. Loe rohkem
4.3 WordPress
WordPress on sisuhaldussüsteem (CMS), mis võimaldab kasutajatel administraatori kaudu veebisaiti luua ja hallata liides, sealhulgas automaatselt genereeritud navigeerimisstruktuur, ilma et peaksite teadma HTML-i või õppima mõnda muud tööriista. WordPress on avatud lähtekoodiga tarkvara, mille on loonud tuhanded programmeerijad üle maailma ja mis on avalikustatud, nii et te ei pea selle kasutamise eest maksma. WordPress on veebipõhine PHP-s ja MySQL-is kirjutatud rakendus, mis on loodud töötama Linuxi serverites: PHP on veebi programmeerimiskeel rakendused, MySQL on relatsiooniandmebaas (nt MS Access) ja Linux veebiserverite operatsioonisüsteem – kõik need on samuti avatud allikas. WordPress on 2009. aasta lõpu seisuga ülekaalukalt kõige populaarsem CMS, millel on üle 200 miljoni saidi üle maailma.
Täiendav lugemine
- 11 parimat HTML-märgendit, mida iga blogija ja veebisaidi omanik peab teadma 11 parimat HTML-märgendit, mida iga blogija ja veebisaidi omanik peab teadmaVeeb oskab paljusid keeli ja on kodeeritud mitmes erinevas keeles. Kuid üks keel, mida võib leida kõikjalt ja mis on olnud kasutusel alates veebilehtede leiutamisest, on... Loe rohkem
- 5 lõbusat asja, mida veebis HTML5 abil teha 5 lõbusat asja, mida veebis HTML5 abil tehaHTML5 muutub üha tugevamaks ja rohkem veebisaite lülitub üle uuele standardile, mis toob multimeediumisisu veebi ilma pistikprogrammide, nagu Adobe Flash, vajaduseta. Kas see on lõhki löödud... Loe rohkem
- Nende tööriistadega veebikood otse teie brauseris Ehitage see: 11 hiilgavat Chrome'i laiendust veebiarendajateleChrome sobib suurepäraselt veebiarendajatele oma laienduste kogumi tõttu. Kui plaanite kunagi veebisaiti kujundada või kodeerida, on siin mõned olulised tööriistad, mille peaksite kohe installima. Loe rohkem
Juhend Avaldatud: juuni 2011
