Skelbimas
Turinys
§1. Įvadas
§2 – Darbo su xHTML pradžia
§3 – dizainas naudojant CSS
§4 – daugiau informacijos
1. Įvadas: Kas yra xHTML?
Sveiki atvykę į XHTML pasaulį – Išplečiamoji hiperteksto žymėjimo kalba – žymėjimo kalba (panaši į programavimą), kuri leidžia bet kam kurti tinklalapius su daugybe skirtingų funkcijų. Daugeliu atžvilgių tai yra pagrindinė interneto kalba.
Taigi, kodėl mums tai rūpi?
Na, ar niekada nenorėjote turėti savo svetainės? Arba sukurti savo žaidimą? Šio vadovo tikslas yra suteikti jums šio galingo pasaulio skonį. Jei turite bet kokios ankstesnės programavimo patirties, jums tai bus lengviau, žinoma, nei tada, kai tik pradedate savo programavimo nuotykį. Bet kuriuo atveju tikiuosi tai paaiškinti, kad net naujokas suprastų.
Mums rūpi xHTML, nes tai yra geras atspirties taškas norint išmokti pagrindinių žiniatinklio blokų. Socialinių tinklų svetainėse, tokiose kaip Facebook, MySpace ir Twitter, naudojama kita (serverio pusės) programavimo kalba vadinamas PHP, tačiau prieš stačia galva pasineriant į programavimą pravartu suprasti pagrindus pasaulis. Šis vadovas yra apie pagrindus.
Jei norite sužinoti daugiau apie tai, kaip veikia internetas arba kaip su visa tai veikia kompiuterių tinklai techninius dalykus ar net kaip galima sukurti kompiuterius, tada išbandykite šiuos puikius savo draugų vadovus Pasinaudoti:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Kaip sukurti savo kompiuterįLabai džiugu sukurti savo kompiuterį; taip pat bauginanti. Tačiau pats procesas iš tikrųjų yra gana paprastas. Mes jums paaiškinsime viską, ką jums reikia žinoti. Skaityti daugiau
//www.makeuseof.com/tag/everything-need-know-home-networking/ Viskas, ką reikia žinoti apie namų tinkląNustatyti namų tinklą nėra taip sunku, kaip manote. Skaityti daugiau
//www.makeuseof.com/tag/guide-file-sharing-networks/ „MakeUseOf“ failų bendrinimo tinklų vadovasAr kada susimąstėte, kokie yra didžiausi failų bendrinimo tinklai? Kuo skiriasi „BitTorrent“, „Gnutella“, „eDonkey“, „Usenet“ ir kt.? Skaityti daugiau
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Windows 7: Ultimate vadovasJei bijote atnaujinti iš Vista arba XP, nes manote, kad tai visiškai skiriasi nuo to, prie kurios esate įpratę, turėtumėte perskaityti šį naują vadovą. Skaityti daugiau
//www.makeuseof.com/tag/download-how-the-internet-works/ Kaip veikia internetasDabar galime pasiekti internetą iš savo namų kompiuterių, biuro, nešiojamųjų kompiuterių ir telefonų. Tačiau daugelis žmonių vis dar nėra visiškai tikri, kas yra internetas ir kaip jis iš tikrųjų veikia. Skaityti daugiau
2. Darbo su xHTML pradžia
Šiame skyriuje sužinosite, kaip kurti ir tinkinti svetaines įvairiais būdais, įskaitant mokymąsi, kaip:
• Pridėti paveikslėlių į tinklalapius.
• Kurkite ir naudokite hipersaitus tinklalapiams naršyti.
• Sudarykite informacijos sąrašus naudodami taškus ir pan.
• Kurti lenteles su atsitiktinių duomenų eilutėmis ir stulpeliais ir mokėti valdyti minėtų lentelių formatavimą.
• Kurkite ir naudokite formas, su kuriomis iš tikrųjų galite bendrauti.
• Padaryti tinklalapius prieinamus paieškos sistemoms.
Visa tai bus daroma naudojant xHTML programavimą. Netikite? Skaityk. Nustebtumėte, kiek daug galite išmokti iš tokio trumpo vadovo.
Prieš pradėdami eiti į šio vadovo „kodavimo“ dalį, turėsite naudoti tam tikrą programinę įrangą, kad galėtumėte redaguoti, išbandyti ir iš esmės kurti savo programas. Eikite į www.dreamspark.com ir NEMOKAMAI gaukite vieną iš šių programų, jei esate studentas:
• Microsoft Visual Studio 2010
• Expression Studio 4
Jei nesate studentas, taip pat galite naudoti Notepad++, iš kurio galite lengvai gauti www.notepad-plus-plus.org
Kai gausite vieną iš programų ir ją įdiegsite, galėsite pradėti savo xHTML patirtį.
Galbūt naudojate Mac arba Linux, o ne Windows; jums reikės rasti a teksto redaktorius tai jums tinka tokiu atveju. Pabandykite rasti tą, kuriame būtų rodomas eilučių skaičius ir spalvų kodas.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad – itin lengvas teksto rengyklė [Linux] Skaityti daugiau
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany – puikus lengvas kodo redaktorius, skirtas LinuxKeista, bet „Linux“ nesiūlo tiek daug gerų IDE (integruotų kūrimo aplinkų). Manau, kad taip yra todėl, kad anais laikais dauguma Linux programuotojų išėmė seną gerą Notepad (arba šiuo atveju gedit) ir pradėjo... Skaityti daugiau
Jei nenorite atsisiųsti jokių specialių įrankių, vis tiek galite naudoti teksto rengyklę, pvz Užrašų knygelė arba Wordpad. Tačiau aukščiau pateiktos programos yra daug geresnės testavimo ir projektavimo priemonės, taip pat padedančios jūsų kodavimas, nes jis paragins jus, jei suklydote arba bandote prisiminti teisingą žodį naudoti. Paprasta yra geriau, tiesa? Aš asmeniškai naudoju „Notepad++“ ir „Microsoft Visual Studio“, nors girdėjau daug puikių dalykų apie „Expression Studio 4“. Turėsite nuspręsti, kas jums labiausiai patinka, bet visi jie veikia puikiai.
PASTABA: Norėdami išbandyti svetainę, sukurtą iš Notepad arba Wordpad:
Atidarę failą spustelėkite Failas >> Išsaugoti kaip
Failo pavadinimo pabaigoje įveskite .html ir spustelėkite Sutaupyti
Atidarykite naujai išsaugotą failą (jis bus atidarytas numatytojoje interneto naršyklėje)
2.1 „Pasaulio pažinimas“
Gerai, štai kelionės pradžia. Pradėkime nuo to, kad šiame tinklalapyje ką nors parodysime ekrane. Pirmiausia turite žinoti, ką yra. XHTML kodas naudoja pradžios ir pabaigos žymas, kad išsiaiškintų, kas vyksta su kiekvienu puslapio elementu.
Čia yra pradžios žymos pavyzdys:
Štai pabaigos žymos pavyzdys:
Matai skirtumą? Vieno elemento pavadinimas yra smailiuose skliaustuose, o kito yra toks pat, bet prieš elemento pavadinimą yra pasvirasis brūkšnys.
SVARBU: turite uždaryti žymą, kai atidarote ją tam tikru kodo tašku. Taip pat žymos turi būti įdėtos, tai reiškia, kad negalite atlikti šių veiksmų:; turėtų būti. Pažiūrėkite, kaip žymos telpa viena kitos viduje? Pagalvokite apie juos kaip apie dėžutes: į pusantros dėžutę negalima įdėti kažko tvirto.
Geriausias būdas sužinoti, kaip programuoti, yra tai daryti iš tikrųjų, taigi pakankamai teorijos. Tik kaip atskaitos tašką, kiekvieną kodo eilutę pažymėsiu skaičiumi, kad galėčiau eilutė po eilutės paaiškinti, kas vyksta.
1 eilutėje nurodžiau html kodą, o 5 eilutėje jį užbaigiau. Viduje žyma yra
). Jei atidarysite tai žiniatinklio naršyklėje, ekrane pamatysite:
Jei norite pakeisti puslapio pavadinimą naršyklės požiūriu (pvz. firstpage.html), tada galite lengvai pridėti šią kodo eilutę:
Taip jūsų tinklalapis atrodys profesionaliau.
2.2 Pradedant nuo ir dirbant žemyn
Daugeliu atvejų viduje žyma yra a
ir a .The paprastai naudojamas scenarijui kurti CSS (3 skyrius) ir JavaScript (paaiškinta būsimame vadove), o dažniausiai yra puslapio turinys.
Tam tikrą turinį galima pakeisti naudojant scenarijų
, bet paprastai yra nekeičiamas turinys puslapyje. Pavyzdys galėtų būti trumpas pasakojimas apie svetainę, kurioje lankotės.Galite keisti turinio formatavimą naudodami CSS (3 skyrius).
. Tačiau taip pat galite keisti formatavimą .Dažniausiai naudojamas žymų rinkinys, naudojamas turinyje, yra antraštės šriftai. Šie antraštės šriftai skiriasi dydžiu ir stiprumu / drąsumu. Tiesiog pažiūrėkite patys žemiau:
2.3 Ar jūsų nuotrauka verta tūkstančio žodžių? - Vaizdai
Iki šiol kalbėjome tik apie tekstą ir tai, ką jis gali padaryti svetainėje, tačiau yra ir daugiau. Norite, kad jūsų svetainė atrodytų dar patraukliau nei tik įmantrūs šriftai? Pabandykite gauti gerų vaizdų, kad jūsų svetainė tikrai suteiktų auditorijai į ką pažiūrėti. Vis dėlto saugokitės autorių teisių įstatymų; geriausia daryti savo nuotraukas, jei ketinate savo svetainę paskelbti internete.
Jums gali prireikti naudoti „Photoshop“ arba kai kuriuos skaitmeninio vaizdo gavimo įgūdžius, kad sukurtumėte puikų vaizdą arba galbūt pagerintumėte savo vaizdą ir jis atrodytų dar nuostabiau. Išbandykite šiuos vadovus, kad gautumėte puikių patarimų ir įžvalgų:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Išmokite redaguoti nuotraukas naudodami „Photoshop“: sužinokite pagrindus per 1 valandą„Photoshop“ yra bauginanti programa, tačiau vos per valandą galite išmokti visus pagrindus. Paimkite nuotrauką, kurią norite redaguoti, ir pradėkime! Skaityti daugiau
• //www.makeuseof.com/tag/guide-to-digital-photography/ Skaitmeninės fotografijos vadovas pradedantiesiemsSkaitmeninė fotografija yra puikus hobis, tačiau jis taip pat gali būti bauginantis. Šis pradedančiųjų vadovas jums pasakys viską, ką reikia žinoti norint pradėti! Skaityti daugiau
Populiariausi vaizdo formatai yra šie:
• GIF = grafikos mainų formatas
• JPEG = jungtinė fotografijos ekspertų grupė
• PNG = Portable Network Graphics
Pažvelkite į toliau pateiktą kodą ir toliau paaiškinsiu, ką jis reiškia; tai yra, kaip į savo tinklalapį įtraukti vaizdų.
Kaip buvo mokoma ankstesniuose skyriuose, mes visada pradedame nuo ir bendrai žymės. Toliau
Atidarius pastraipą 9 eilutėje, čia vaizdai įterpiami į svetainę. Norėdami pridėti paveikslėlį / paveikslėlį, turėtumėte naudoti Pradėti su. Toliau turite pasiūlyti, kur yra failas. Paprastai bandysite šį failą turėti tame pačiame aplanke kaip ir svetainės failus, kitu atveju turėsite įvesti aplanko kelią, kuriame jis yra. Aukščiau nurodytu atveju aš naudoju
. Tai reiškia, kad šaltinis (src) nuotraukos yra tame pačiame aplanke ir to paveikslėlio failo pavadinimas yra Paveikslėlis.jpg. Lengva tiesa?
Nereikia pridėti nieko daugiau nei sukurti vaizdą su an alt ypatybę, bet galite pridėti ypatybių, kad atliktumėte kai kuriuos jos pakeitimus.
Taip pat žinomas kaip alternatyvus tekstas, ši ypatybės reikšmė rodoma, kai užvedate pelės žymeklį ant nuotraukos.
Galite pastebėti, kad 10 eilutėje žymą pradėjau nuo ir baigė />. Tai dar vienas žymų atidarymo ir uždarymo būdas. Tai įprastas vaizdų kūrimo būdas, nes galite pasirinkti skirtingas vaizdo savybes, pvz., plotį ir aukštį, kaip parodyta aukščiau esančiame pavyzdyje.
11 ir 12 eilutėse įterpiamas kitas paveikslėlis, tačiau tai naudojamas kitas žymų atidarymo ir uždarymo būdas. 10 eilutė sukuria vaizdą daug tvarkingiau; naudokite jį, o ne 11 ir 12 eilutėse nurodytą metodą.
2.4 Hipersaitai kur jie gali būti?
2.4.1 Judėjimas „pasaulyje“
Norite parodyti savo draugams keletą nuostabių svetainių savo svetainėje, bet nežinote, kaip? Atėjote į reikiamą vietą, skaitykite toliau…
Pažvelkite į toliau pateiktą kodą ir pažiūrėkite, ar galite atspėti, ką darau, prieš jį paaiškindami.
Taip, aš kuriu hipersaitus į keletą puikių ir naudingų svetainių. Iš esmės norėdami sukurti hipersaitą į tam tikrą tinklalapį, turintį žiniatinklio adresą, tiesiog naudokite toliau pateiktą sintaksę:
[ką norite hipersaitą]
Ar neatrodo labai sunku? Galite gana lengvai tiesiog įdėti tekstą, kaip aukščiau pateiktas pavyzdinis kodas. Tačiau nėra jokios priežasties, kodėl negalėtumėte naudoti kažko kito, pavyzdžiui, vaizdo. Šiek tiek papildomos informacijos: URL yra Uniform Resource Locator, iš esmės žiniatinklio adresas.
2.4.2 Nuotraukos primena, kur buvote, ir vėl nukelia jus ten
Štai pavyzdys, kaip naudoti vaizdą kaip hipersaitą:
Esu tikras, kad jei perskaitėte ankstesnes šio skyriaus dalis, kurias išleidžiate, tai tiesiog maišomas vaizdų ir hipersaitų kūrimas. Sintaksė nustatyta taip, kad hipersaitas būtų išorėje, o vaizdas – viduje, todėl įterpto vaizdo hipersaitas yra.
2.4.3 Gavote paštą – hipersaitas į el. pašto adresą
Tai tiesiog paskutinės dalies pakartojimas, bet jei nekreipėte tiek dėmesio, tiesiog pažiūrėkite į žemiau esantį kodą:
Užuot naudoję URL (pvz., http://www.something.com) čia aš naudoju el. pašto adresą, kuriame po lygybės ženklo reikia įdėti šią sintaksę:
„mailto: [jūsų pašto adresas]“
10 eilutė yra pagrindinis šios koncepcijos pavyzdys. Taigi, kam jūs ketinate siųsti el. Vaiduoklių medžiotojai!
2.4.4 Kelionė aplink pasaulį – vidinis hipersaitas
Dabar galite pamatyti, kaip apeiti savo svetainę. Tai daroma tiesiog naudojant failo pavadinimą kaip URL. Todėl galite sukurti svetaines, kaip parodyta toliau pateiktoje diagramoje. Jūsų naudojama sintaksė būtų maždaug tokia:
2.5 Ar esate ypatingas? Šie personažai yra…
Kai įvedate informaciją, kuri bus rodoma svetainėje, pvz., turinį, jums gali prireikti įdėkite kažką panašaus į simbolį, pvz., autorių teisių simbolį: © arba galbūt mažiau nei arba didesnis nei simbolis. Tačiau kadangi kodavimo sintaksė naudoja įprastus simbolius, reikėjo rasti kitą būdą, kaip įveikti šią smulkmeną. kliūtis, o sprendimas buvo naudoti ampersandą (&), o po to trumpą kodą, nurodantį kompiuteriui, kokį simbolį įdėti. Žemiau yra lentelė su keletu specialiųjų kodavimo simbolių pavyzdžių:
Pavyzdžiui, galite pasakyti:
Aukščiau pateiktoje lentelėje yra < šešios eilutės, bet > 2 eilutės
Aukščiau pateiktoje lentelėje yra < 6 eilutės, bet > 2 eilutės
2.6 Sąrašai, sąrašai ir daugiau sąrašų
Gerai, dabar turėsime sutvarkyti keletą dalykų, pvz., pirkinių sąrašą. Yra dviejų tipų sąrašai. Jie yra:
• Sutvarkytas sąrašas (skaičiai, abėcėlės, romėniški skaitmenys)
• Netvarkingas sąrašas (ženkleliai)
Sutvarkytam sąrašui naudotumėte šias žymas =
Netvarkingam sąrašui naudotumėte šias žymas =
Pavyzdžiui:
Aukščiau pateiktame pavyzdyje įtraukiau ir nerūšiuotus, ir sutvarkytus sąrašų tipus. Bet ar pastebėjote, ką dar aš padariau? Taip pat įtraukiau techniką, vadinamą Įdėtieji sąrašai. Šie įdėtieji sąrašai gali būti naudojami hierarchiniams ryšiams atstovauti, pvz., sudedamųjų dalių sąrašą Gaukite ingredientų žingsnį pagal aukščiau pateiktą receptą.
Galite matyti, kad visą sąrašą pradėjau kaip sutvarkytą sąrašą 10 eilutėje ir užbaigiau 23 eilutėje. Tarpu pamatytumėte ir žymės, kurias naudojau. Šie žymi Elementų sąrašas. Sąrašo elementai yra žodžiai, kurie rodomi, pavyzdžiui, 21 eilutėje:
Jei norite pereiti į kitą taškinių taškų arba skaičių hierarchinį lygį, įdėkite į save taip:
2.7 Lentelės... ne, ne matematika
Ar tai taip sunku, kaip jūsų daugybos lentelės? Žinoma, ne, jei elgsitės teisingai. Jei tik pradedate naudoti šią koncepciją ir manau, kad taip ir darote, tada paprastai geriausia lentelę, kurią norite padaryti, nupiešti ant popieriaus lapo, kaip aš pateikiau žemiau:
Dabar pažiūrėkite į tai žemiau esančiame kode:
Dabar sumaišykite juos ir toliau pateiktas ekranas turėtų padėti suprasti lentelės struktūrą:
A
ir
atitinkamai paryškinkite pirmąją ir paskutinę eilutes, kad atkreiptumėte daugiau dėmesio į tas lentelės dalis. Daugelis žmonių pirmiausia žiūrėtų į bendrą sumą lentelės poraštėje, tiesa?2.8 Skaitmeninės formos (be rašiklio)
Naršydami tinkle turėsite bendrauti su tinklalapiais, su kuriais susiduriate. Pavyzdžiui, adresu www.makeuseof.com turėsite įvesti savo el. pašto adresą, kaip nurodyta toliau užsiprenumeruokite naujienlaiškį ir kasdienius MakeUseOf atnaujinimus. Įvedę savo el. pašto adresą, jūs spaustų Prisijunk ir tai būtų išsiųsta informacija (jūsų el. pašto adresas) teksto laukelyje šalia mygtuko į duomenų bazę arba galbūt kitą el. pašto adresą. Formos yra naudojami tam daryti, ką sužinosite šiame skyriuje.
Žemiau yra forma, kuri naudojama tik jūsų vardui įvesti ir spustelėti Pateikti arba Aišku:
Štai kodas iš užkulisių, kurį netrukus paaiškinsiu plačiau:
Pirma, svarbiausias dalykas aukščiau pateiktame scenarijuje yra 10 eilutė. Tai yra formos pradžia. Metodas paprastai yra arba paštu arba gauti. Gana savaime aišku, bet paštu siunčia informaciją kažkur, kad padarytų įrašą, pvz., el. pašto adresą arba duomenų bazę. Pavyzdžiui: paskelbti klausimą MakeUseOf Answers. Gauk, kita vertus, siunčia informaciją, kurią pateikėte, ir grįžta su grįžtamojo ryšio informacija, pvz., paieškos varikliu, siunčia paieškos raktažodžius ir grįžta su rezultatais.
Aukščiau pateiktas kodavimo blokas yra pranešimo formos pavyzdys, kai spustelėjus mygtuką Pateikti įvestumėte savo el. pašto adresą ir jis būtų išsiųstas į paslėptą el. pašto adresą. The
22–25 eilutėse įdėkite mygtukus Pateikti ir Atstatyti / Išvalyti puslapyje po teksto laukeliu. The Nustatyti iš naujo mygtukas tiesiog ištrina bet kokį teksto laukelyje arba laukeliuose toje formoje įvestą tekstą. The Pateikti mygtukas seka instrukcijas iš paslėptų formos dalių, sukurtų 14–18 eilutėse. Paslėptas tipas paprastai reiškia kažką automatinio arba kažko kito, naudojamo dabartine forma. Šiuo atveju pastarasis suteikia paštued informaciją apie paskirties vietą, šiuo atveju [email protected], su nustatyta tema atveju „Prenumeruoti el. laišką“, o tada nukreipia į kitą puslapį, šiuo atveju į pagrindinį puslapį arba „index.html“.
2.9 meta kas? Kodėl?
Ar kada susimąstėte, kaip paieškos sistemos randa svetaines? Na iš esmės tai yra tai, ką jie naudoja: meta elementai. Paieškos sistemos paprastai kataloguoja svetaines, sekdamos nuorodas į rastų svetainių puslapius. Šie meta elementai turi informaciją apie puslapį. Kaip pavyzdį pažvelkite į šią ištrauką iš tam tikro kodo:
Kaip matote aukščiau, meta informacija patenka į
3. Dizainas su CSS
Dažniausiai žmonės, kurie žiūri į tokius vadovus, tiesiog mėgsta žaisti vaizdo žaidimus. Tačiau CSS nėra „Counter Strike Source“ ir apskritai nėra „First Person Shooter“ (FPS). CSS yra technologija, kuri veikia su xHTML ir reiškia Ckylantis Style Slakštai. xHTML pats savaime yra gana nuobodus, bet jei pridėsite sąžiningą CSS, jūsų kūrinio formatavimas ir pateikimas bus daug įdomesnis. Autoriai gali keisti tinklalapio elementus, pvz., šriftus, tarpus, spalvas; tai daroma atskirai nuo dokumento struktūros (galvos, korpuso ir kt.; tai bus paaiškinta vėlesniuose skyriuose). xHTML iš tikrųjų buvo sukurtas siekiant nurodyti dokumento turinį ir struktūrą. Nėra taip, kad xHTML negalėtų pakeisti turinio formatavimo. Tačiau ši sąranka yra daug naudingesnė, nes prireikus ją galima valdyti iš vienos vietos. Pavyzdžiui, jei svetainės formatas visiškai nustatomas pagal pridedamą stiliaus lapą, interneto dizaineris gali tiesiog įdėti kitą stiliaus lapą, kad smarkiai pakeistų svetainės pateikimą.
3.1 Inline šokių stiliai
Kaip minėta aukščiau, šiame skyriuje kalbama apie formatavimą ir stilius. Kadangi yra daug būdų pakeisti turinio ir puslapio stilių, maniau, kad būtų gerai pradėti nuo paprasčiausios technikos, kuri yra Įterpti stiliai. Tai atliekama įdedant kodą į turinį apimančio skirtuko ypatybių skyrių. Kaip šitas:
Skamba per sunku? Pateiksiu pavyzdį:
Pastaba: spalva parašyta spalva naudojant šį kodą, nes jis buvo sukurtas kur nors ne taip šauniai kaip Australija ar Kanada; Tikiuosi, kad tai jūsų per daug nevargina.
Aukščiau pateiktame pavyzdyje paryškinta informacija yra formatavimas, kuris apdorojamas turinyje, įtrauktame į
žyma. Norėdami gauti šešioliktainių skirtingų spalvų kodų sąrašą, tiesiog ieškokite „Google“ arba naudokite šią svetainę: http://html-color- codes.com/
3.2 Įterptieji stiliaus lapai (Cheat Sheets yra laimi)
Jei turite labai didelę svetainę, ankstesniame skyriuje pateiktų eilutinių stilių naudojimas gali būti nepatogus. Bet jei norite naudoti tuos pačius stilius vėl ir vėl, kodėl gi nenaudoti a Įterptasis stiliaus lapas? Ši alternatyva leidžia jums sukurti savo stilių
kodo žymą, o tada nurodykite jas kode, įterpdami turinį į savo puslapį. Per daug komplikuota? Štai pavyzdys:
Pažiūrėkite, kaip keičiasi teksto spalva, dydis ar formatas, priklausomai nuo viršuje esančio stiliaus lapo? Tai nėra labai sunku suprasti, tiesa?
7 eilutėje, kurioje pristatome pradžią
16 eilutėje naudojama .xtra klasė, kuri buvo sukurta anksčiau. Tai veikia taip, kad prideda xtra klasei, kad ir kokiame stiliuje ji būtų atidaryta, perrašant bet kokias savybes xtra klasės naudojimas. Pavyzdžiui: jei stilius turi 20 pt dydžio šriftą ir yra žalios spalvos, o ant jo yra klasė, kurioje yra Skirtingo dydžio šriftas, tada naujas šrifto dydis pakeis senąjį, bet senoji žalia spalva išliks kaip yra.
3.3 Stiliai karo metu (prieštaraujantys stiliai)
Yra trys stilių lygiai ir jie yra:
• Vartotojas (žiūri svetainę)
• Autorius (svetainės)
• Vartotojo agentas (naršyklė)
Stiliai susilieja taip, kad būtų sukurta geriausia sąranka iš vartotojo pozicijos. Šioje diagramoje parodyta trijų lygių hierarchija:
3.4 Stiliaus lentelės iš išorės (išorės)
Ar nemanote, kad būtų nemalonu, kad kiekviename naujame kodavimo faile visada tektų rašyti tą patį stiliaus lapą? Yra sprendimas: Išoriniai stiliaus lapai. Galite sukurti kitą failą, kad galėtumėte jį naudoti formatavimui; tai yra ".css“ failą. Norėdami naudoti jį kitame faile, tiesiog įveskite šią ištrauką:
Pakeiskite failo pavadinimas su savo CSS failo pavadinimu ir mes, jie yra susieti. Įsitikinkite, kad jūsų CSS failas yra tame pačiame aplanke kaip ir susietas (-i) failas (-ai).
CSS failo pavyzdys:
Prieš tęsdamas, nepaminėjau, ką jie daro. Viršuje paskutinėje eilutėje matysite, kad įdėjau „ul ul { font-size: .8em; }“, o tai reiškia, kad šrifto dydis bus pakeistas į santykinį .8 arba 80 % įprasto dydžio, kurį vartotojas nori, naudodamas savo stiliaus lapą, įkeltą į naršyklę. Daugelis žmonių nenaudoja vartotojo apibrėžto stiliaus lapo, todėl nesijaudinkime dėl to.
3.5 Elementų išdėstymas (kur toliau?)
Kai įdedate vaizdą į tinklalapį, jūs tikrai nenorite, kad jis tiesiog kur nors nukeliautų. Ar nenorėtumėte tame pasisakyti? Na, štai kaip jūs tai darote, na, tai iš tikrųjų yra pavyzdys ir aš trumpai tai paaiškinsiu:
9–13 eilutėse pastebėsite, kad tai klasė, kurios ID yra kaip fgpic ir turi keletą jame naudojamų savybių. The padėtis nuosavybė nustatyta absoliutus o tai reiškia, kad nesvarbu, kaip vartotojas jį pakeis, paveikslėlis liks ten, kur jį įdės jūsų (autorius) su savo kodu. The viršuje ir paliko savybės nurodo tašką, kuriame elementas (pvz. paveikslėlis/tekstas) bus patalpintas. The z indeksas nuosavybė yra labai galingas įrankis, nes jis nustato krovimo lygį, kaip parodyta toliau pateiktoje ekrano kopijoje:
Pažiūrėkite, kaip fono vaizdas yra gale, kai z indekso reikšmė yra 1, o tekstas yra priekyje, kai z indekso reikšmė yra 3, o priekinio plano vaizdas yra viduryje, kai z indekso reikšmė yra 2. Iš tikrųjų tai atrodo gana gerai, jei teisingai žaidžiate kortomis
3.6 Atsižvelkite į aplinką (fonas)
Tinklalapiai gerai atrodo su fonu, ar ne? Ar tikrai nebūtų nuobodu, jei visos svetainės būtų tik baltas arba juodas fonas? Kodėl neįdėjus ten nuotraukos ir šiek tiek nepakeitus spalvos? Yra keletas ypatybių, kurias galite naudoti norėdami, kad puslapio fonas išsiskirtų dar labiau ir suteiktų puslapiui ryškumo. Pažvelkite į šį kodą ir sužinokite, ar galite išsiaiškinti, ką daro paryškintos savybės:
Ar išsiaiškinote, ką tai daro? Iš esmės fono paveikslėlis yra tai, ką mes naudosime fone, vaizdo kelias eina skliausteliuose / skliaustuose, kaip šis> url(ČIA). Galite manyti, kad tai turi z indekso reikšmę 0, nes ji visada yra pačioje puslapio gale. Vaizdo fono padėtis nustatyta apačioje kairėje, gana savaime suprantama, tiesa? Tada fono vaizdas buvo pakartotas per puslapio x ašį (pakartokite-x) ir ne tik tai, bet ir pritvirtintas prie lango apačios (fono priedas). Galiausiai spalva buvo atsitiktinai nustatyta, kad daugiausia būtų raudona. Rezultatą pažiūrėkite žemiau:
3.7 Kaip manote, kokio dydžio? (elementų matmenys / teksto apribojimai)
Jei manote, kad tai yra viskas, ką gali pasiūlyti CSS, labai klystate. CSS taisyklės gali nurodyti tikruosius kiekvieno puslapio elemento matmenis. Paimkime teksto laukelio pavyzdį. Ar norite įvesti tekstą, kuris nepereina per visą ekraną, o gal sukurti teksto laukelį, kurį būtų galima slinkti nejudinus puslapio? Štai kur tuomet turėtumėte būti. Žemiau esančioje ekrano kopijoje rasite tai, ką ką tik aprašiau:
Dabar pažvelkime į kodo užkulisius:
Tik nedidelė pastaba: 6 eilutė kiekvieno teksto laukelio apačioje prideda kraštinę. Gana šaunu, tiesa? Bet daugiau apie sienas – kitame skyriuje.
3.8 Kas vyksta aplink, tas ir aplinkui (sienos)
Nemanau, kad tam reikia paaiškinimo, bet aš vis tiek pateiksiu. Iš esmės kraštines galite dėti beveik bet ką, todėl pažiūrėkime, kaip tai padaryti. Taigi čia yra kodas:
Štai ką daro kodas, iš esmės yra kraštinių, supančių naudojamo krašto tipo pavadinimą (-us), asortimentas. Turėkite omenyje, kad griovelio priešingybė yra kraigas, o priešinga įdėklai yra pradžia.
3.9 Plaukiojantys ir tekantys elementai
Paprastai gana nuobodu matyti antraštę, tada tekstą, tada antraštę ir tekstą. Nors neatrodytų šiek tiek gražiau? Yra metodas, kurį galima naudoti, vadinamas plaukiojantis, o dabar aš jums parodysiu, kaip tai padaryti. Slankiojantis elementas leidžia perkelti elementą į vieną ekrano pusę, o kitas dokumento turinys juda aplink slankųjį elementą. Plūduriuojantis elementas gali būti paveikslėlis, antraštė ar net kitas teksto blokas. Dabar pažiūrėkime, kaip tai atrodo:
Gana gerai tinka daugeliui situacijų, dabar šis kodas sukuria šį dizainą:
Argi nenuostabu, ką galite padaryti, jei tik rasite tinkamą metodą?
3.10 Neišleiskite meniu – pavyzdys
Jei ketinate sukurti svetainę, greičiausiai jums reikės meniu, tiesa? Na, tai gali būti jums tinkama vieta, jei norite kažko, kas ne tik sėdėtų. Dėl dinaminių elementų tinklalapiai atrodo geriau ir suteikia geresnį visos svetainės pojūtį.
Vienas iš mano mėgstamiausių meniu tipų turi būti a išskleidžiamasis meniu Taigi dabar pažiūrėkime, kaip tai padaryti naudojant CSS. Patikrinkite žemiau esantį kodą:
Žinau, kad iš pradžių tai atrodo šiek tiek bauginančiai, bet jei būsite kantrūs ir tiesiog perskaitysite, greitai suprasite.
15 eilutėje sakoma: kai aš turiu <div> žyma su klase = "Meniu“, o pelė yra užveskite pelės žymeklįper jį ekranas į blokass jo viduje.
16-21 eilutėse sakoma: kai turiu <div> žyma su klase = "Meniu“ ir <a> žymą, tada nustatykite šiuos formatus. Atminkite, kad šiose eilutėse pasirenkamas paslėptų meniu mygtukų formatas. 9–14 eilutėse nustatomi meniu mygtuko formatai, kad būtų rodoma likusi meniu dalis.
22 eilutėje sakoma: kai aš turiu <div> žyma su klase = "Meniu“ ir <a> žyma ir aš užveskite pelės žymeklį per vieną iš šių elementų, tada nustatykite fono spalva į kitą žalią.
Žemiau žiūrėkite galutinį produktą:
3.11 Vartotojo stiliaus lentelės (jūs esate visatos centras)
Vartotojai gali nustatyti savo vartotojo stiliaus lapai kad puslapiai atrodytų taip, kaip jie nori. Tiesiog norint atskirti Vartotojo stiliaus lapai ir Autoriaus stiliaus lapai. Vartotojo stiliai yra išoriniai stilių lapai, kuriuos vartotojai gali susikurti patys ir kurie tiesiog daromi kaip CSS failai be didžiosios dalies kodavimo. Čia aš jums parodysiu vieną:
Ar tai nebuvo labai paprasta?
Jei norite sužinoti, kaip tai nustatyti savo naršyklėje, tiesiog eikite į Įrankiai >> Interneto parinktys >> Bendra >> Prieinamumas >> Tada nustatykite savo failą Autoriaus stiliaus lapas yra apibrėžtas kode tarp jų .
4. Daugiau informacijos
4.1 Kodėl verta naudoti xHTML ir kt. per dizainą ir kitas programas?
Prieš žiūrėdami į tai kaip į faktą ar į ką nors panašaus, turėtumėte žinoti, kad tai tik požiūris, priklausantis nuo jūsų padėties ir jūsų techninio mąstymo. Man patinka naudoti programavimo kalbas užbaigiant savo projektus, nes tai reiškia, kad galite suprasti, kas slypi už dizaino, o naudojant projektavimo programas, pvz. Adobe Dreamweaver ir Microsoft FrontPage leidžia kurti svetainę naudojant tik meniu esančius įrankius. Todėl dizaino programos apsiriboja jums pateikta meniu parinktimi. Apibendrinant, visiškai akivaizdu, kad naudojant programavimo kalbas būtų galima sukurti svetainę ar užbaigtą produktą kažkas daug patrauklesnio, nes jo funkcionalumą riboja tik programuotojo įgūdžiai naudoti nurodytą kalbą (pvz. JavaScript, CSS, xHTML). Žinau, kad tikriausiai manote, kad esu šališkas, bet turėsite tiesiog išbandyti abu ir nuspręsti, kaip daug pastangų norite įdėti į savo darbą, tada pasirinkite tinkamus įrankius Kelionės tikslas. Jūs netgi galite pasirinkti naudoti abu, nes „Dreamweaver“ ir „FrontPage“ turi „kodavimo rodinį“ ir „dizaino vaizdą“.
Yra ir kitų būdų, kaip kurti svetaines, pavyzdžiui, naudojant „Joomla“ ir „WordPress“.
4.2 Joomla
„Joomla“ yra puiki turinio valdymo sistema (TVS), pasižyminti dideliu lankstumu ir lengvai naudojamu vartotoju. sąsaja, kurią daugelis žmonių išsigąsta supratę, kiek daug parinkčių ir konfigūracijų prieinama. Joomla yra PHP ir MySQL platforma. Ši programinė įranga yra atvirojo kodo, kurią galite gauti iš http://www.joomla.org/download.html
Jei norite gauti išsamų Joomla vadovą, išbandykite šį MakeUseOf vadovą: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ „Joomla“ vadovas pradedantiesiemsŠiame vadove bus paaiškinta, kodėl verta rinktis „Joomla“ ir kaip ją įdiegti žiniatinklio serveryje, iki kaip sukurti ir pritaikyti svetainę pagal savo skonį. Skaityti daugiau
4.3 „WordPress“.
„WordPress“ yra turinio valdymo sistema (TVS), leidžianti vartotojams kurti ir prižiūrėti svetainę naudojant administracinę funkciją sąsaja, įskaitant automatiškai sugeneruotą naršymo struktūrą, nereikia mokėti HTML ar mokytis kito įrankio. „WordPress“ yra atvirojo kodo programinės įrangos dalis, kurią sukūrė tūkstančiai programuotojų visame pasaulyje ir paskelbta viešai, todėl jums nereikia mokėti už naudojimąsi ja. „WordPress“ yra žiniatinklio programa, parašyta PHP ir MySQL kalbomis, skirta veikti „Linux“ serveriuose: PHP yra žiniatinklio programavimo kalba programos, MySQL yra reliacinė duomenų bazė (pvz., MS Access), o Linux yra žiniatinklio serverių operacinė sistema – visos jos taip pat yra atviros. šaltinis. 2009 m. pabaigoje „WordPress“ yra pati populiariausia TVS, turinti daugiau nei 200 milijonų svetainių visame pasaulyje.
Papildomas skaitymas
- 11 geriausių HTML žymų, kurias turi žinoti kiekvienas tinklaraštininkas ir svetainių savininkas 11 geriausių HTML žymų, kurias turi žinoti kiekvienas tinklaraštininkas ir svetainių savininkasPasaulinis žiniatinklis moka daug kalbų ir yra užkoduotas keliomis skirtingomis kalbomis. Tačiau vienintelė kalba, kurią galima rasti visur ir kuri egzistuoja nuo pat tinklalapių išradimo, yra... Skaityti daugiau
- 5 įdomūs dalykai, kuriuos reikia padaryti internete naudojant HTML5 5 įdomūs dalykai, kuriuos reikia padaryti internete naudojant HTML5HTML5 ir toliau tobulėja, vis daugiau svetainių pereina prie naujo standarto, kuris perkelia daugialypės terpės turinį į žiniatinklį, nereikalaujant įskiepių, tokių kaip „Adobe Flash“. Ar tai susprogdinta... Skaityti daugiau
- Interneto kodas naudojant šiuos įrankius tiesiai jūsų naršyklėje Sukurkite: 11 puikių „Chrome“ plėtinių žiniatinklio kūrėjams„Chrome“ puikiai tinka žiniatinklio kūrėjams dėl savo plėtinių. Jei kada nors planuojate kurti ar koduoti svetainę, čia yra keletas pagrindinių įrankių, kuriuos turėtumėte nedelsdami įdiegti. Skaityti daugiau
Vadovas paskelbtas: 2011 m. birželio mėn