Reklaam
Sisukord
§1. Sissejuhatus
§2 - xHTML-iga alustamine
§3 - kujundus CSS-iga
§4 - lisateave
1. Sissejuhatus: Mis on xHTML?
Tere tulemast XHTML-i maailma - Laiendatav hüperteksti märgistuskeel - märgistuskeel (sarnane programmeerimisega), mis võimaldab kõigil luua paljude erinevate funktsioonidega veebilehti. Paljuski on see Interneti peamine keel.
Miks me siis hoolime?
Noh, kas te pole kunagi tahtnud oma veebisaiti? Või teha oma mäng? Selle juhendi eesmärk on anda teile ülevaade sellest võimsast maailmast. Kui teil on varasemaid programmeerimiskogemusi, on teil muidugi see lihtsam, kui te alles alustate oma programmeerimisseiklust. Mõlemal juhul loodan seda selgitada, nii et isegi algajad saavad sellest aru.
Me hoolime xHTML-ist, kuna see on tugev lähtepunkt veebi põhiliste ehitusplokkide õppimiseks. Suhtlusvõrgustike saidid, nagu Facebook, MySpace ja Twitter, kasutavad mõnda muud (serveripoolset) programmeerimiskeelt mida nimetatakse PHP-ks, kuid enne programmeerimises sukeldumist on hea mõte mõista põhitõdesid maailm. Selles juhendis on põhitõed.
Kui soovite rohkem teada saada, kuidas Internet töötab või kuidas arvutivõrgud selle kõigega toimivad tehnilisi asju või isegi seda, kuidas arvuteid ehitada, siis proovige neid suurepäraseid juhendeid oma sõpradelt MakeUseOf:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Kuidas oma arvutit ehitadaOma arvuti ehitamine on väga tänuväärne; samuti hirmutav. Kuid protsess ise on tegelikult üsna lihtne. Me juhendame teid kõigest, mida peate teadma. Loe rohkem
//www.makeuseof.com/tag/everything-need-know-home-networking/ Kõik, mida peate teadma koduvõrkude loomise kohtaKoduvõ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 seal? Millised on erinevused BitTorrent, Gnutella, eDonkey, Usenet jne vahel? Loe rohkem
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Windows 7: ülim juhendKui kardate Vista või XP versiooniuuendusi uuendada, kuna tunnete, et see erineb täiesti harjumuspärasest, peaksite seda uut juhendit lugema. Loe rohkem
//www.makeuseof.com/tag/download-how-the-internet-works/ Kuidas Internet töötab?Nüüd pääsete Internetti oma koduarvutite, kontorite, sülearvutite ja telefonide kaudu. Kuid paljud inimesed pole endiselt täiesti kindlad, mis Internet on ja kuidas see tegelikult töötab. Loe rohkem
2. XHTML-iga alustamine
Selles peatükis saate teada, kuidas veebisaite luua ja kohandada mitmel erineval viisil, sealhulgas õppida:
• Lisage pilte veebilehtedele.
• Looge ja kasutage veebilehtedel navigeerimiseks hüperlinke.
• Koostage teabeloendid punktpunktide abil.
• Koostage tabelid juhuslike andmete ridade ja veergudega ning saate kontrollida nende tabelite vormindamist.
• Looge ja kasutage vorme, millega saate tegelikult suhelda.
• Muutke veebilehed otsingumootoritele juurdepääsetavaks.
Kõik see toimub xHTML-programmeerimisega. Kas te ei usu seda? Loe edasi. Te oleksite üllatunud, kui palju saate sellisest lühikesest juhendist õppida.
Enne kui me selle juhendi “kodeerimise” juurde asume, on teil vaja mõnda tarkvara, mida saaksite oma programmide redigeerimiseks, testimiseks ja arendamiseks kasutada. Minge saidile www.dreamspark.com ja saate TASUTA ühe järgmistest programmidest, eeldades, et olete õpilane:
• Microsoft Visual Studio 2010
• Expression Studio 4
Kui te pole õpilane, saate seda ka kasutada Märkmik ++, mida saate üsna hõlpsalt saada www.notepad-plus-plus.org
Kui olete ühe programmi kätte saanud ja selle installinud, saate alustada oma xHTML-i kasutamist.
Võib-olla kasutate Windowsi asemel Mac-i või Linuxit; peate leidma a tekstiredaktor mis sel juhul teie jaoks sobib. Proovige leida selline, mis näitab teile teie reaarvu 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 arenduskeskkonnad). Ma usun, et selle põhjuseks on asjaolu, et enamikul Linuxi programmeerijatest võttis vana hea märkmik (või sel juhul gedit) välja ja hakkas ... Loe rohkem
Kui te ei soovi spetsiaalseid tööriistu alla laadida, saate ikkagi kasutada tekstiredaktorit, nt Märkmik või Wordpad. Ülaltoodud programmid on aga palju paremad tööriistad testimiseks ja kujundamiseks, samuti abistamiseks teie kodeering, kuna see soovitab teil viga teha või kui proovite meelde jätta õiget sõna kasutada. Lihtne on parem, eks? Kasutan isiklikult Notepad ++ ja Microsoft Visual Studio, ehkki olen Expression Studio 4 kohta kuulnud palju häid asju. Peate otsustama, mis teile kõige rohkem meeldib, kuid need kõik töötavad suurepäraselt.
MÄRGE: Notepadist või Wordpadist loodud veebisaidi testimiseks toimige järgmiselt.
Kui fail on avatud, klõpsake nuppu Fail >> Salvesta nimega
Tippige faili nime lõppu sisse.html ja klõpsake nuppu Salvesta
Avage äsja salvestatud fail (see avaneb teie vaike Interneti-brauseris)
2.1 Maailma tundmaõppimine
Olgu, siin on reisi algus. Alustame sellest, et lihtsalt paneme midagi sellel veebilehel ekraanile. Kõigepealt peate teadma, mida on. XHTML-kood kasutab algus- ja lõpp-silte, et sorteerida lehe iga elemendiga toimuv.
Siin on näide algusmärgendist:
Siin on näide lõpp-sildist:
Kas näete erinevust? Ühel on elemendi nimi suletud sulgudes ja teisel sama, kuid elemendi nime ees on kaldkriips.
TÄHTIS: Pärast sildi avamist koodis peate sildi sulgema. Ka sildid peavad olema pesastatud, see tähendab, et te ei saa teha järgmist:; see peaks olema. Vaadake, kuidas sildid sobivad üksteise sisse? Mõelge neile nagu karbid: te ei saa poolteist kasti midagi tahket panna.
Parim viis programmeerimise tundmaõppimiseks on selle tegemine, seega piisavalt teooriat. Lihtsalt võrdluspunktiks märgistan iga koodirida numbriga, et saaksin ridahaaval selgitada, mis toimub.
Reas 1 olen öelnud 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 seisukohast (nt. esimene leht.html), siis saate hõlpsalt lisada järgmise koodirea:
See muudab teie veebisaidi professionaalsemaks.
2.2 Alustades ja töötades allapoole
Enamikul juhtudel silt seal on
ja a .kasutatakse tavaliselt skriptimiseks CSS-is (jaotis 3) ja JavaScriptis (selgitatud eelseisvas käsiraamatus), samas kui on tavaliselt lehe sisu.
Mõnda sisu saab muuta, kasutades skripti jaotises
, kuid on tavaliselt lehel muutmatu sisu. Näiteks võiks tuua lühikese ülevaate külastatava veebisaidi kohta.Sisu vormingus saate muudatusi teha CSS-i abil (jaotis 3)
. Kuid saate ka vormingus muudatusi teha .Tavaliselt kasutatav siltide komplekt, mida kasutatakse kehas, on päise fondid. Nende päisefontide suurus ja tugevus / julgus on vahemikus. Vaadake ainult allpool olevat teavet:
2.3 Kas teie pilt on väärt tuhat sõna? - pildid
Siiani oleme veebisaidil rääkinud ainult tekstist ja sellest, mida see teha saab, kuid seal on veel midagi. Kas soovite muuta oma veebisaidi veelgi köitvamaks kui lihtsalt väljamõeldud fonte? Proovige saada häid pilte, et teie sait annaks publikule tõesti midagi vaadata. Ole siiski ettevaatlik autoriõiguse seaduste osas; kõige parem teha oma pilte, kui kavatsete oma veebisaidi Internetti üles panna.
Võimalik, et peate suurepärase pildi loomiseks või oma pildi parandamiseks ja veelgi ägedamaks muutmiseks kasutama Photoshopit või mõnda digitaalse pildistamise oskust. Proovige neid juhendeid, et saada suurepäraseid näpunäiteid ja teavet:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Lisateave fotode redigeerimise kohta Photoshopis: saate põhitõed 1 tunniga allaPhotoshop on hirmutav programm, kuid vaid ühe tunniga saate õppida kõiki põhitõdesid. Haarake foto, mida soovite redigeerida, ja alustame! Loe rohkem
• //www.makeuseof.com/tag/guide-to-digital-photography/ Digitaalfotograafia algaja juhendDigitaalfotograafia on suurepärane hobi, kuid võib ka hirmutada. See algaja juhend räägib teile kõike, mida peate alustamiseks teadma! Loe rohkem
Kõige populaarsemad pildivormingud on järgmised:
• GIF = graafika vahetusvorming
• JPEG = ühine fotoekspertide rühm
• PNG = kaasaskantav võrgugraafika
Vaadake allolevat koodi ja selgitan järgnevalt, mida see tähendab; see tähendab, kuidas oma veebilehele pilte lisada.
Nagu eelmistes lõikudes õpetati, alustame alati sõnaga ja ühissildid. Järgmine
Pärast lõigu avamist reas 9 sisestatakse pildid veebisaidile. Pildi / pildi lisamiseks peaksite seda kasutama alustuseks. Järgmisena peate soovitama, kus see fail asub. Tavaliselt prooviksite, et see fail oleks veebisaidifailidega samas kaustas, muidu peate sisestama kausta tee, milles see on. Ülaltoodud juhul olen kasutanud
. See tähendab, et allikas (src) pilt asub samas kaustas ja selle pildifaili nimi on Pilt.jpg. Lihtne, eks?
Peate lisama ainult midagi muud pildi loomiseks alt atribuut, kuid võite sellele atribuute lisada, et selles muudatusi teha.
Tuntud ka kui alt tekst, kuvatakse see vara väärtus, kui viite hiire pildi kohale.
Võite märgata, et reas 10 olen hakanud sildiga ja lõpetas selle />. See on veel üks võimalus siltide avamiseks ja sulgemiseks. See on piltide loomise tavaline viis, kuna saate valida pildi erinevad omadused, näiteks laius ja kõrgus, nagu on näidatud ülaltoodud näites.
Ridadesse 11 ja 12 lisatakse veel üks pilt, kuid siltide avamiseks ja sulgemiseks kasutatakse teist meetodit. 10. rida loob pildi palju mitmekesisemalt; kasutage seda mitte ridades 11 ja 12.
2.4 Hüperlingid kuhu nad võivad minna?
2.4.1 "Maailmas" liikumine
Kas soovite näidata oma sõpradele oma veebisaidil lahedaid saite, kuid te ei tea, kuidas? Olete jõudnud õigesse kohta, loe edasi ...
Vaadake allolevat koodi ja vaadake, kas saate enne selle selgitamist aimata, mida ma teen.
See on õige, loon hüperlinke mõne suurepärase ja kasuliku saidi juurde. Põhimõtteliselt hüperlingi loomiseks teatud veebiaadressile, millel on veebiaadress, kasutage lihtsalt järgmist süntaksi:
[mida soovite hüperlingida]
Kas see ei tundu väga keeruline? Saate hõlpsasti sinna lihtsalt teksti sisestada, nagu ülaltoodud näidiskood. Kuid pole mingit põhjust, miks te ei saaks kasutada midagi muud nagu pilti. Ainult natuke lisateavet: URL on ühtne ressursiotsija, põhimõtteliselt veebiaadress.
2.4.2 Pildid meenutavad teile, kus olete olnud, ja viivad teid jälle sinna
Siin on näide pildi kasutamisest hüperlingina:
Olen kindel, et kui olete lugenud selle jaotise eelmisi osi, mille te välja andsite, on see lihtsalt piltide ja hüperlinkide loomine. Süntaks on seatud nii, et hüperlingid asuvad väljastpoolt ja pilt seestpoolt, pannes sisestatud pildi hüperlingi.
2.4.3 teil on kirjad - hüperlingid e-posti aadressile
See on lihtsalt viimase osa kordus, kuid kui te pole nii palju tähelepanu pööranud, siis lihtsalt vaadake allolevat koodi:
URL-i (nt. http://www.something.com) siin ma kasutan e-posti aadressi, mis hõlmab järgmise süntaksi lisamist võrdusmärgi järele:
“Mailto: [teie e-posti aadress]”
10. rida on selle kontseptsiooni põhinäide. Kes sa siis e-kirja saadad? Kummitusröövlid!
2.4.4 Oma maailmas ringi liikumine - sisemine hüperlinkimine
Nüüd näete, kuidas saaksite oma veebisaidil ringi liikuda. Selleks kasutatakse lihtsalt URL-na failinime kasutamist. Seetõttu saate omada veebisaite, nagu on näidatud alloleval joonisel. Teie kasutatav süntaks läheks umbes nii:
2.5 Kas olete eriline? Need tegelased on…
Kui sisestate teavet, mis ilmub veebisaidil nagu sisu, peate võib-olla seda tegema pange sisse midagi sellist sümbolit nagu autoriõiguse sümbol: © või võib-olla väiksem kui või suurem kui sümbol. Kuid kuna kodeerimise süntaks kasutab tavalisi sümboleid, siis pidi olema veel üks viis sellest väikesest üle saada takistuseks ja lahendus kasutas ampersandit (&) ja seejärel lühikest koodi, et öelda arvutile, mis sümbolit sisse panema Allpool on tabel, kus on toodud mõned näited kodeerimise erimärkidest:
Näiteks võite öelda:
Ülaltoodud tabelis on
Ü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. Seal on kahte tüüpi loendeid. Need on:
• Tellitud nimekiri (numbrid, tähestikud, rooma numbrid)
• järjestamata nimekiri (täppjaotused)
Tellitud loendi jaoks kasutaksite järgmisi silte =
Korrastamata loendi jaoks kasutaksite järgmisi silte =
Näiteks:
Ülaltoodud näites lisasin nii järjestamata kui ka järjestatud loenditüübid. Aga kas sa panid tähele, mida ma veel tegin? Lisasin ka tehnika nimega Pesastatud nimekirjad. Neid pesastatud loendeid võib kasutada hierarhiliste suhete esindamiseks, nagu näiteks koostisosade loend Hankige ülaltoodud retsepti koostisosad.
Võite näha, et ma alustasin kogu nimekirja tellitud loendina reas 10 ja lõpetasin selle reaga 23. Vahel näete ja sildid, mida olen kasutanud. Need tähistavad Loendiüksused. Loendiüksused on sõnad, mis kuvatakse, näiteks reas 21:
Kui soovite liikuda punktide või numbrite järgmisele hierarhilisele tasemele, pesitsege end järgmiselt:
2.7 Tabelid... ei, mitte matemaatika
Kas see on sama keeruline kui teie korrutustabelid? Muidugi mitte, kui teete seda õiget teed. Kui alustate just selle kontseptsiooni väljatöötamist ja eeldan, et olete, siis on kõige parem joonistada tabel, mille soovite teha, paberitükile, nagu mul allpool on:
Vaadake seda allolevas koodis:
Nüüd segage need omavahel ja allolev kuva peaks aitama teil mõista tabeli ülesehitust:
A
ja
pange esimene ja viimane rida paksuks, et lauale nendele osadele rohkem tähelepanu pöörata. Enamik inimesi vaataks tabeli jaluses olevat summat kõigepealt, eks?2.8 Digitaalsed vormid (pliiatsid eemal)
Netis surfates peate suhtlema ilmnenud veebilehtedega. Näiteks veebisaidil www.makeuseof.com peate sisestama oma e-posti aadressi allpool ringikujuliseks tellige MakeUseOfi uudiskiri ja igapäevased värskendused. Pärast oma e-posti aadressi sisestamist olete vajutaks Liitu ja see saadaks nupu kõrval olevas tekstiväljas oleva teabe (teie e-posti aadressi) kas andmebaasi või võib-olla mõnele teisele e-posti aadressile. Vormid on harjunud seda tegema, sellest saate teada selles peatükis.
Allpool on vorm, mida kasutatakse ainult teie nime sisestamiseks ja klikkimiseks mõlemal Esita või Selge:
Siin on stseenide taga olev kood, mida selgitan lähiajal üksikasjalikumalt:
Esiteks on ülaltoodud skripti kõige olulisem asi rida 10. See on vormi algus. Meetod on tavaliselt kas postitada või saada. Üsna iseenesest mõistetav, aga postitada saadab teabe kuskile dokumendi, näiteks e-posti aadressi või andmebaasi tegemiseks. Näiteks: küsimuse postitamine saidile MakeUseOf Answers. Saageteiselt poolt saadab teie edastatud teabe ja tagastab koos tagasisideteabe, näiteks otsingumootori, otsingusõnade saatmise ja tulemustega tagastamise.
Ülaltoodud kodeerimisplokk on näide postituse vormist, mille abil sisestaksite oma e-posti aadressi ja see saadetaks peidetud atribuudile koos e-posti aadressiga klõpsamisega.
Ridad 22–25 asetage nupud Edasta ja Lähtesta / Kustuta lehele tekstkasti alla. Lähtesta nupp lihtsalt kustutab selle vormi tekstiväljale või kastidesse sisestatud teksti. Esita nupp järgib juhiseid vormi peidetud osadest, mis on loodud ridadele 14–18. Varjatud tüüp eeldab tavaliselt, et praegusel kujul kasutatakse automaatselt midagi või osa millestki muust. Sel juhul annab viimane postitadaMuutke teavet sihtkoha kohta, antud juhul [email protected], koos teemaga, selles juhul „Telli e-post” ja suunab teid siis teisele lehele, antud juhul põhilehele või „Index.html”.
2.9 meta mis? Miks?
Kas olete kunagi mõelnud, kuidas otsingumootorid veebisaite leiavad? Põhimõtteliselt seda nad kasutavadki: metaelemendid. Tavaliselt kataloogivad otsimootorid saite, leides linke nende leitud saitide lehtedele. Nendel metaelementidel on teavet nendel oleva lehe kohta. Vaadake näiteks mõnda koodi järgmisest väljavõttest:
Nagu ülal näete, läheb metainfo sisse
3. Kujundus CSS-iga
Enamasti meeldib inimestele, kes vaatavad selliseid juhendeid, lihtsalt videomänge. CSS ei ole siiski Counter Strike Source ega üldsegi esmakordne laskur (FPS). CSS on xHTML-iga töötav tehnoloogia Cascading Style Slehed. xHTML on üksi igav, kuid kui lisada CSS-i õiglane esitus, on teie loomingu vormindamine ja esitlemine palju huvitavam. Autorid saavad muuta veebilehe elemente, näiteks fonte, vahesid, värve; seda tehakse dokumendi struktuurist (pea, korpus jne) eraldi; seda selgitatakse hilisemates peatükkides). xHTML oli tegelikult mõeldud dokumendi sisu ja struktuuri täpsustamiseks. See pole nii, nagu xHTML ei saaks sisu vormingus muudatusi teha. See seadistus on aga palju kasulikum, kuna seda saab vajadusel ühest kohast juhtida. Näiteks kui veebisaidi vormi määrab täielikult lisatud stiilileht, saab veebidisainer veebisaidi esitusviisi tugevaks muutmiseks lihtsalt uue stiililehe paika panna.
3.1 Inline tantsustiilid
Nagu eespool mainitud, käsitletakse selles jaotises vormindamist ja stiile. Kuna teie sisu ja lehe stiili muutmiseks on palju võimalusi, arvasin, et oleks hea alustada kõige sirgjoonelisemast tehnikast, mis on Tekstilised stiilid. Selleks sisestage kood sisu hõlmava vahekaardi atribuutide sektsiooni. Nagu nii:
Kõla liiga raske? Lubage mul tuua teile näide:
Märkus: värv on kirjutatud värvi selle koodi kasutamisel, kuna see loodi kuskil mitte nii lahedas nagu Austraalias või Kanadas; Loodetavasti ei häiri see teid nii palju.
Ülaltoodud näite paksus kirjas teave on vormindamine, mida töödeldakse sisuga, mida hõlmab
silt. Erinevate värvide kuueteistkümnendkoodide loendi jaoks otsige lihtsalt Google'i otsingut või kasutage seda saiti: http://html-color- koodid.com/
3.2 Manustatud stiililehed (Cheat Sheets on win)
Eelmises jaotises olevate tekstistiilide kasutamine võib põhjustada valu, kui teil on väga suur sait. Kuid kui soovite ikka ja jälle samu stiile kasutada, siis miks mitte kasutada ka Manustatud stiilileht? See alternatiiv võimaldab teil luua oma stiile
koodi sildi ja siis viitate neile koodis, kui lisate oma lehele mingit sisu. Liiga keeruline? Siin on näide:
Vaadake, kuidas tekst muudab värvi, suurust või vormingut sõltuvalt ülaosas olevast stiililehest? Seda pole väga raske mõista, eks?
Rida 7, kus tutvustame programmi algust
Rida 16 kasutab .xtra klass, mis tehti varem. See toimib nii, et lisab xtra klassi ükskõik millises stiilis see avatakse, kirjutades üle kõik omadused, mis xtra klassikasutus. Näiteks: kui stiili suurus on 20pt, see on rohelist värvi, ja sellele pannakse klass, millel on erinevas suuruses kirjas, siis uus kirjasuurus asendab vana, kuid vana roheline värv jätkub nagu on.
3.3 Sõja stiilid (vastuolulised stiilid)
Stiile on kolm taset ja need on:
• Kasutaja (veebisaidi vaatamine)
• autor (veebisaidi)
• Kasutajaagent (brauser)
Stiilid ühinevad viisil, mis loob kasutaja seisukohast parima võimaliku seadistuse. Järgmine diagramm näitab kolme taseme hierarhiat:
3.4 Stiililehed väljastpoolt (väline)
Kas te ei arva, et oleks tüütu, kui peaksite igas uues kodeerimisfailis alati sama stiililehe välja kirjutama? On olemas lahendus: Välised stiililehed. Võite vormindamiseks kasutada mõnda muud faili; see on ".css”Fail. Mõnes teises failis kasutamiseks sisestage lihtsalt järgmine väljavõte:
Asenda faili nimi teie CSS-faili nimega ja seal me läheme, nad on lingitud. Veenduge, et teie CSS-fail oleks lingitud failidega samas kaustas.
CSS-faili näidis:
Enne jätkamist olen unustanud mainida, mida nad teevad. Ülalpool näete viimases reas, et ma panin kirja „ul ul {font-size: .8em; } ”Ja see tähendab, et fondi suurus muudetakse suhteliseks .8 või 80% tavalisest suurusest, mida kasutaja soovib, et ta kasutaks oma brauserisse laaditud stiililehte. Enamik inimesi ei kasuta kasutaja määratletud stiililehte, nii et ärgem selle pärast muretsege.
3.5 Positsioneerimisdetailid (kuhu edasi?)
Kujutisele veebilehele pannes ei taha te tegelikult seda lihtsalt kuhugi viia. Kas te ei tahaks selles sõna sekka öelda? Noh, kuidas seda teha, see on tegelikult näide ja ma selgitan seda varsti:
Ridades 9–13 märkad, et see on klass, mille ID on fgpic ja sellel on mõned omadused. positsioon vara on seatud väärtusele absoluutne mis tähendab, et ükskõik kuidas kasutaja seda muudab, jääb pilt sinna, kuhu teie (autor) selle oma koodiga paigutab. ülaosa ja vasakule omadused tähistavad punkti, kus element (nt. pilt / tekst) pannakse. z-indeks atribuut on väga võimas tööriist, kuna see seab virnastamise taseme, nagu on näidatud alloleval ekraanipildil:
Vaadake, kuidas taustpilt on tagaküljel, z-indeksi väärtus on 1 ja tekst on ees, z-indeksi väärtusega 3, samal ajal kui esiplaanipilt on keskel, z-indeksi väärtus on 2. Teeb selle üsna hea välja, kui mängite oma kaarte õigesti
3.6 Arvestage oma ümbrusega (taust)
Veebisaidid näevad hea taustaga välja, kas pole? Kas poleks tõesti igav, kui kõikidel veebisaitidel oleks lihtsalt valge või must taust? Miks mitte sinna pilti panna ja natuke värvi muuta? Siin on mõned atribuudid, mille abil saate oma lehe taustast pisut rohkem silma paista ja lehele helgida. Vaadake järgmist koodi ja vaadake, kas saate välja töötada esiletõstetud omaduste toimimise:
Kas sa said teada, mida see teeb? Põhimõtteliselt on taustpilt see, mida me taustal kasutame, pildi tee kulgeb sulgudes / sulgudes nagu see> url (SIIN). Võite arvata, et sellel on z-indeksi väärtus 0, kuna see on alati lehe kõige tagaosas. Kujutise taustasend on vasakpoolsesse vasakusse nurka seatud, päris iseenesest mõistetav? Järgmisena korrati taustpilti kogu lehe x-teljel (korda-x) ja mitte ainult, vaid see kinnitatakse akna põhja (taust-manus). Lõpuks on värv juhuslikult valitud peamiselt punaseks. Vaadake tulemust allpool:
3.7 Kui suur sa arvad? (elementide mõõtmed / teksti piirid)
Kui arvate, et see on kõik, mida CSS pakub, eksite valusalt. CSS-i reeglid võivad täpsustada iga lehe elemendi tegelikud mõõtmed. Võtame näiteks kasti. Kas soovite kirjutada teksti, mis ei lähe ekraanil täielikult läbi, või luua tekstivälja, mida saab kerida ilma lehte liigutamata? Siin peaksite siis olema. Äsja kirjeldatud kirjelduse leiate allolevast ekraanipildist:
Vaatame nüüd kulisside taga olevat koodi:
Ainult tühine märkus: 6. rida lisab iga tekstikasti põhjale äärejoone. Päris lahe, eks? Kuid lähemalt järgmises jaotises piiride kohta.
3.8 Mis ümberringi toimub, tuleb ümber (piirid)
Ma ei usu, et see vajab selgitust, kuid ma annan selle ikkagi. Põhimõtteliselt võite piirid panna peaaegu ükskõik mille ümber, nii et vaatame, kuidas seda teha. Siin on kood:
Siin on see, mida kood teeb, põhimõtteliselt valik piirjooni, mis ümbritsevad kasutatava piiri tüübi nimesid. Pidage meeles, et soone vastand on harja ja süvendi vastaskülg on välja toodud.
3.9 Ujuvad ja voolavad elemendid
Tavaliselt on üsna igav lihtsalt pealkirja, siis teksti ja seejärel pealkirja ning teksti nägemine. Ehkki mitte muuta see natuke kenamaks? Seal on meetod, mida saab kasutada ujuvadja nüüd näitan teile, kuidas seda just teha. Ujuv võimaldab teil elemendi ekraani ühele küljele teisaldada, samal ajal kui muu dokumendi sisu voolab siis ü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 üsna vähestes olukordades, nüüd on see disain see disain:
Kas pole hämmastav, mida saate teha, kui leiate lihtsalt õige meetodi?
3.10 Ärge rippuge menüüd - näide
Kui mõtlete veebisaidi loomisele, on teil tõenäoliselt vaja menüüd, eks? Noh, see võib olla õige koht, kuhu minna, kui soovite midagi, mis seal lihtsalt ei istu. Dünaamilised elemendid muudavad veebilehed paremaks ja näevad kogu saiti paremini.
Üks minu lemmikmenüüdest peab olema a rippmenüü nii et vaatame nüüd, kuidas seda CSS-i abil teha. Vaadake allolevat koodi:
Ma tean, et see tundub alguses pisut hirmutav, kuid kui olete kannatlik ja loete ainult edasi, saate sellest piisavalt kiiresti aru.
Rida 15 ütleb: kui mul on <div> sildiga klass = “menüüJa hiir on hõljumasellest üle väljapanek blokeeridas sees.
Liinid 16–21 ütlevad: kui mul on <div> sildiga klass = “menüüJa <a> märkige need vormingud. Pidage meeles, et need read valivad peidetud menüünuppude vormingu. Liinid 9-14 seadistavad menüünupu vormingud, et kerida ülejäänud menüü kuvamiseks.
Rida 22 ütleb: kui mul on <div> sildiga klass = “menüüJa <a> silt ja mina hõljuma asetage ühele neist elementidest väärtus taustavärv teisele rohelisele.
Vaata lõpptoodet allpool:
3.11 Kasutaja stiililehed (olete universumi keskpunkt)
Kasutajad saavad ise määratleda kasutaja stiililehed et lehed näeksid välja sellised, nagu nad tahavad. Ainult vahet teha Kasutaja stiililehed ja Autori stiililehed. Kasutajastiilid on välised stiililehed, mida kasutajad saavad ise luua. Neid tehakse lihtsalt CSS-failidena ilma suurema osa kodeeringuta. Siin näitan teile ühte:
Kas see polnud nii lihtne?
Kui soovite teada, kuidas seda oma brauseris seadistada, läheksite lihtsalt sinna Tööriistad >> Interneti-suvandid >> Üldine >> Juurdepääsetavus >> määratlege siis oma fail Autori stiilileht määratletakse koodi vahel .
4. Rohkem informatsiooni
4.1 Miks kasutada xHTML ja co. üle disaini ja muude rakenduste?
Enne kui vaadata seda kui tõsiasja või midagi sarnast, peaksite teadma, et see on lihtsalt vaatepunkt, sõltuvalt sellest, kus te seisate ja kui tehniliselt meelestatud võite olla. Mulle meeldib oma projektide lõpuleviimisel kasutada programmeerimiskeeli, kuna see tähendab, et saate aru, mis on disainilahenduste taga, samas kui disainirakenduste kasutamine meeldib Adobe Dreamweaver ja Microsoft FrontPage võimaldavad teil oma veebisaidi luua ainult menüüdes saadaolevate tööriistade abil. Seetõttu piirduvad disainirakendused teile pakutavate menüüvalikutega. Kokkuvõtteks on täiesti ilmne, et programmeerimiskeelte kasutamine aitaks veebisaidi või valmistoote sisse ehitada midagi palju atraktiivsemat, kuna selle funktsionaalsust piirab ainult programmeerija oskus määratud keeles (nt. JavaScript, CSS, xHTML). Ma tean, et arvate, et olen erapoolik, kuid peate mõlemad proovima ja otsustama, kuidas seda teha Kui soovite oma töösse palju vaeva näha, siis valige oma töö jaoks sobivad tööriistad sihtkohta. Võite isegi kasutada mõlemat, kuna nii Dreamweaveril kui ka FrontPage'il on "kodeerimisvaade" ja "kujundusvaade".
Veebisaitide loomiseks on ka muid viise, näiteks Joomla ja WordPressi kasutamine.
4.2 Joomla
Joomla on suurepärane sisuhaldussüsteem (CMS), millel on palju paindlikkust ja hõlpsasti kasutatav liides, mida paljud inimesed hirmutavad, kui nad mõistavad, kui palju on valikuid ja konfiguratsioone saadaval. Joomla on PHP ja MySQL põhinev platvorm. See tarkvara on avatud lähtekoodiga, mida saate hankida http://www.joomla.org/download.html
Kui soovite põhjalikku juhendit Joomla kohta, proovige seda MakeUseOfi juhendit: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Joomla algajate juhendSelles juhendis tutvustatakse teid kõigest, miks valida Joomla ja kuidas seda veebiserverisse installida, kuni saidi kujundamise ja kohandamisega oma maitse järgi. Loe rohkem
4.3 WordPress
WordPress on sisuhaldussüsteem (CMS), mis võimaldab kasutajatel administraatori kaudu veebisaiti luua ja hooldada liides, sealhulgas automaatselt genereeritav navigeerimisstruktuur, ilma HTML-i tundmata või mõnda muud tööriista õppimata. WordPress on avatud lähtekoodiga tarkvara, mille on loonud tuhanded programmeerijad kogu maailmas ja mis on pandud avalikku omandisse, nii et selle kasutamiseks ei pea te maksma. WordPress on PHP-s ja MySQL-is kirjutatud veebipõhine rakendus, mis on loodud töötama Linuxi serverites: PHP on veebi programmeerimiskeel rakendused, MySQL on relatsiooniandmebaas (näiteks MS Access) ja Linux on veebiserverite opsüsteem - kõik need on ka avatud allikas. WordPress on vaieldamatult populaarseim CMS, millel on 2009. aasta lõpus üle 200 miljoni saidi kogu maailmas.
Täiendav lugemine
- 11 parimat HTML-i silti, mida iga blogija ja veebisaidi omanik peab teadma 11 parimat HTML-i silti, mida iga blogija ja veebisaidi omanik peab teadmaVeebiveeb oskab paljusid keeli ja on kodeeritud mitmes erinevas keeles. Üks keel, mida võib leida kõikjalt ja mis on kestnud juba alates veebilehtede leiutamisest, on ... Loe rohkem
- 5 lõbusat asja, mida HTML5 abil veebis teha 5 lõbusat asja, mida HTML5 abil veebis tehaHTML5 liigub jätkuvalt tugevuselt, üha rohkem veebisaite lülitub uuele standardile, mis toob multimeediumisisu veebisse, ilma et oleks vaja pistikprogramme, näiteks Adobe Flash. Kas see on plahvatas ... Loe rohkem
- Veebi kood nende tööriistadega otse brauseris Ehitage see: 11 geniaalset Chrome'i laiendust veebiarendajateleChrome on laienduste kogumi tõttu suurepärane veebiarendajate jaoks. Kui kavatsete kunagi veebisaiti kujundada või kodeerida, on siin mõned olulised tööriistad, mille peaksite kohe installima. Loe rohkem
Juhend avaldatud: juuni 2011