Skelbimas
Turinys
§1. Įvadas
§2 - Darbo su xHTML pradžia
3 dalis. Projektavimas naudojant CSS
4 dalis - daugiau informacijos
1. Įvadas: Kas yra xHTML?
Sveiki atvykę į XHTML pasaulį - Išplečiama hiperteksto žymėjimo kalba - žymėjimo kalba (panaši į programavimą), leidžianti bet kam kurti tinklalapius su daugybe skirtingų funkcijų. Daugeliu atvejų tai yra pagrindinė interneto kalba.
Taigi, kodėl mums tai svarbu?
Na, ar jūs niekada nenorėjote turėti savo svetainės? Arba kurti savo žaidimą? Šio vadovo vaidmuo yra suteikti jums šio galingo pasaulio skonį. Jei turite ankstesnės programavimo patirties, tai, žinoma, jums bus lengviau, nei jei tik pradedate savo programavimo nuotykius. Bet kuriuo atveju tikiuosi tai paaiškinti, kad net pradedantysis galėtų tai suprasti.
Mums rūpi xHTML, nes tai yra puikus atspirties taškas mokantis pagrindinių žiniatinklio elementų. Socialinių tinklų svetainėse, tokiose kaip „Facebook“, „MySpace“ ir „Twitter“, naudojama kita (serverio pusės) programavimo kalba vadinamas PHP, tačiau prieš pradedant galvą prieš programinę įrangą, verta suprasti pagrindus pasaulis. Šis vadovas yra apie pagrindus.
Jei norite sužinoti daugiau apie tai, kaip veikia internetas ar galbūt kompiuteriniai tinklai veikia visa tai techninę medžiagą ar net tai, 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 asmeninį kompiuterįLabai malonu kurti savo asmeninį kompiuterį; taip pat bauginanti. Tačiau pats procesas yra gana paprastas. Mes apžvelgsime viską, ką reikia žinoti. Skaityti daugiau
//www.makeuseof.com/tag/everything-need-know-home-networking/ Viskas, ką turite žinoti apie namų tinkląNamų tinklo nustatymas nėra toks sunkus, kaip jūs manote. Skaityti daugiau
//www.makeuseof.com/tag/guide-file-sharing-networks/ „MakeUseOf“ failų bendrinimo tinklų vadovasAr kada pagalvojote, kokie ten didžiausi failų mainų tinklai? Kuo skiriasi „BitTorrent“, „Gnutella“, „eDonkey“, „Usenet“ ir kt.? Skaityti daugiau
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ „Windows 7“: pagrindinis vadovasJei bijote naujovinti iš „Vista“ ar „XP“, nes manote, kad tai visiškai skiriasi nuo to, prie ko esate įpratę, turėtumėte perskaityti šį naują vadovą. Skaityti daugiau
//www.makeuseof.com/tag/download-how-the-internet-works/ Kaip veikia internetasDabar galime naudotis internetu iš 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 išmokimą:
• Įdėkite paveikslėlius į tinklalapius.
• Kurkite ir naudokite hipersaitus naršydami tinklalapiuose.
• Sudarykite informacijos sąrašus naudodami taškų taškus ir panašius.
• Kurti lenteles su atsitiktinių duomenų eilutėmis ir stulpeliais ir mokėti valdyti minėtų lentelių formatavimą.
• Sukurkite ir naudokite formas, kuriomis galite iš tikrųjų bendrauti.
• Padaryti tinklalapius prieinamus paieškos sistemoms.
Visa tai bus padaryta naudojant xHTML programavimą. Netikite? Skaityk. Nustebtumėte, kiek daug galite išmokti iš tokio trumpo vadovo.
Prieš iš tikrųjų įsitraukdami į šio vadovo „kodavimo“ dalį, jums reikės 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ų, darant prielaidą, kad esate studentas:
• „Microsoft Visual Studio 2010“
• 4 išraiškos studija
Jei nesate studentas, taip pat galite naudoti Užrašų knygelė ++, kurį galite gana lengvai gauti www.notepad-plus-plus.org
Kai gausite vieną iš programų ir ją įdėsite, galėsite pradėti naudotis savo xHTML.
Galite naudoti „Mac“ ar „Linux“, o ne „Windows“; turėsite rasti teksto redaktorius tai tokiu atveju jums tinka. Pabandykite surasti tokį, kuris parodytų jūsų eilučių skaičių ir spalvų kodą.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ „Leafpad“ - ypač lengvas teksto redaktorius [„Linux“] Skaityti daugiau
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - puikus lengvojo kodo redaktorius, skirtas „Linux“Keista, tačiau „Linux“ nesiūlo tiek daug gerų IDE (integruotos plėtros aplinkos). Manau, kad taip yra todėl, kad tą pačią dieną dauguma „Linux“ programuotojų išėmė seną gerą užrašų knygelę (arba „gedit“ šiuo atveju) ir pradėjo ... Skaityti daugiau
Jei nenorėtumėte 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 geresni bandymo ir projektavimo įrankiai, taip pat padeda jums jūsų kodavimas, nes jis ragina padaryti klaidą arba bandote atsiminti teisingą žodį naudoti. Paprasta yra geriau, tiesa? Aš asmeniškai naudojuosi „Notepad ++“ ir „Microsoft Visual Studio“, nors esu girdėjęs daug puikių dalykų apie „Expression Studio 4“. Turėsite nuspręsti, kas jums labiausiai patinka, tačiau visi jie veikia puikiai.
PASTABA: Norėdami išbandyti svetainę, sukurtą naudojant „Notepad“ arba „Wordpad“:
Atidarę failą spustelėkite Failas >> Išsaugoti kaip
Failo vardo pabaigoje įveskite.html ir spustelėkite Sutaupyti
Atidarykite naujai išsaugotą failą (jis bus atidarytas numatytojoje interneto naršyklėje)
2.1 Susipažinimas su „pasauliu“
Gerai, štai kelionės pradžia. Pradėkime nuo to, kad ką nors įdėsite į šio tinklalapio ekraną. 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:
Čia yra pabaigos žymos pavyzdys:
Matote skirtumą? Vieno elemento pavadinimas užklijuotas smulkiuose skliausteliuose, o kitas yra tas pats, bet turi brūkšnį prieš elemento pavadinimą.
SVARBU: Turite atidaryti žymą atidarę ją tam tikrame kodo taške. Taip pat žymos turi būti įdėtos, tai yra, tai reiškia, kad jūs negalite atlikti šių veiksmų:; turėtų būti. Pažiūrėkite, kaip etiketės dera tarpusavyje? Pagalvokite apie juos kaip apie dėžutes: pusantro dėžutės negalima sudėti kažko tvirto.
Geriausias būdas sužinoti, kaip programuoti, yra iš tikrųjų tai darant, taigi pakankamai teorijos. Norėčiau pažymėti kiekvieną kodo eilutę numeriu, kad galėčiau paaiškinti, kas vyksta.
1 eilutėje aš nurodiau html kodą, o 5 eilutėje aš jį baigiau. Viduje žyma yra
). Jei atidarysite tai interneto naršyklėje, ekrane pamatysite šiuos dalykus:
Jei norite pakeisti puslapio pavadinimą naršyklės požiūriu (pvz., pirmasis puslapis.html), galite lengvai pridėti šią kodo eilutę:
Tai padės jūsų tinklalapiui atrodyti profesionaliau.
2.2 pradedant nuo ir dirbant žemyn
Daugeliu atvejų žyma ten yra
ir a .paprastai naudojamas scenarijams kurti CSS (3 skyrius) ir „JavaScript“ (paaiškinta būsimame vadove), tuo tarpu paprastai yra puslapio turinys.
Kai kuriuos turinius galima pakeisti naudojant scenarijus
, bet paprastai yra tas turinys, kuris nekeičiamas puslapyje. Pavyzdys galėtų būti trumpas aprašymas apie jūsų lankomą svetainę.Turinio formatavimą galite pakeisti naudodami CSS (3 skyrius)
. Tačiau taip pat galite pakeisti formatavimą .Dažniausiai naudojamas rinkinyje esančių žymų rinkinys yra antraštės šriftai. Šie antraštės šriftai skiriasi dydžiu, stiprumu ir drąsumu. Tiesiog žiūrėkite patys žemiau:
2.3 Ar tavo paveikslėlis vertas tūkstančio žodžių? - Vaizdai
Iki šiol mes kalbėjome tik apie tekstą ir tai, ką jis gali padaryti svetainėje, tačiau vis dar yra daugiau. Norite, kad jūsų svetainė atrodytų dar patraukliau, nei tik išgalvoti šriftai? Pabandykite sukurti keletą gerų vaizdų, kad jūsų svetainė tikrai suteiktų auditorijai ką pažiūrėti. Vis dėlto būkite atsargūs dėl autorių teisių įstatymų; geriausia fotografuoti patiems, jei ketinate paskelbti savo svetainę internete.
Jei norite sukurti puikų paveikslėlį arba patobulinti savo įvaizdį ir padaryti jį dar nuostabesnį, gali tekti naudoti „Photoshop“ ar kai kuriuos skaitmeninio vaizdavimo įgūdžius. Išbandykite šiuos vadovus, kad gautumėte puikių patarimų ir įžvalgos:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Sužinokite apie nuotraukų redagavimą „Photoshop“ programoje: įsigykite pagrindus per 1 valandą„Photoshop“ yra bauginanti programa, tačiau vos per valandą galite išmokti visų pagrindų. Paimkite nuotrauką, kurią norite redaguoti, ir pradėkime! Skaityti daugiau
• //www.makeuseof.com/tag/guide-to-digital-photography/ Pradinis vadovas skaitmeninei fotografijaiSkaitmeninė fotografija yra puikus hobis, tačiau taip pat gali bauginti. Šis pradedančiųjų vadovas papasakos viską, ką reikia žinoti norint pradėti! Skaityti daugiau
Populiariausi vaizdo formatai yra šie:
• GIF = grafikos mainų formatas
• JPEG = jungtinė fotografijos ekspertų grupė
• PNG = Nešiojamoji tinklo grafika
Pažvelkite į žemiau esantį kodą ir toliau paaiškinsiu, ką jis reiškia; tai yra, kaip pridėti vaizdų į savo tinklalapį.
Kaip buvo mokoma ankstesniuose skyriuose, mes visada pradedame nuo ir kartu žymės. Kitas
Atidarius pastraipą 9 eilutėje, vaizdai įdedami į svetainę. Norėdami pridėti paveikslėlį / vaizdą, kurį turėtumėte naudoti Pradėti su. Toliau turite pasiūlyti, kur yra failas. Paprastai jūs mėgintumėte, kad šis failas būtų tame pačiame aplanke kaip ir interneto failai, jūs turėsite įvesti aplanko kelią, kuriame jis yra. Pirmiau nurodytu atveju aš pasinaudojau
. Tai reiškia, kad šaltinis (src) paveikslėlio yra tame pačiame aplanke, o to paveikslėlio failo pavadinimas yra Paveikslėlis.jpg. Lengva tiesa?
Jums nereikia nieko daugiau pridėti sukurti vaizdą su alt nuosavybė, tačiau galite prie jos pridėti savybių, kad joje padarytumėte keletą pakeitimų.
Taip pat žinomas kaip alt tekstas, ši savybės vertė rodoma, kai užveskite pelę ant paveikslėlio.
Galite pastebėti, kad 10 eilutėje aš pradėjau žymą ir baigė tai />. Tai yra dar vienas būdas atidaryti ir uždaryti žymas. Tai yra įprastas atvaizdų kūrimo būdas, nes galite pasirinkti skirtingas vaizdo savybes, tokias kaip plotis ir aukštis, kaip parodyta aukščiau pateiktame pavyzdyje.
11 ir 12 eilutėse įterpiamas kitas atvaizdas, tačiau šiuo būdu naudojamas kitas žymių atidarymo ir uždarymo būdas. 10 eilutė sukuria įvaizdį įvairesnį; naudokite šį metodą, o ne 11 ir 12 eilutėse nurodytą metodą.
2.4 Hipersaitai, kur jie gali eiti?
2.4.1 Judėjimas po pasaulį
Norite parodyti savo draugams keletą nuostabių svetainių jūsų svetainėje, bet nežinote kaip? Atėjote į reikiamą vietą, perskaitykite toliau ...
Pažvelkite į žemiau esantį kodą ir įsitikinkite, ar galite atspėti, ką darau, prieš tai paaiškindamas.
Teisingai, kuriu hipersaitus į puikias ir naudingas svetaines. Iš esmės norėdami hipersaitą į tam tikrą tinklalapį, kuriame yra interneto adresas, tiesiog naudokite žemiau pateiktą sintaksę:
[ką norite hipersaito]
Ar tai neatrodo labai sunku? Galite lengvai įterpti tekstą, pavyzdžiui, aukščiau pateiktą kodą. Tačiau nėra jokios priežasties, kodėl negalėtumėte naudoti kažko kito, pavyzdžiui, vaizdo. Tik šiek tiek papildomos informacijos: URL yra vienodas išteklių ieškiklis, iš esmės žiniatinklio adresas.
2.4.2 Paveikslėliai primena jums, kur buvote, ir vėl jus nuveda
Čia pateiktas vaizdo kaip hipersaito naudojimo pavyzdys:
Esu įsitikinęs, ar perskaitėte ankstesnes šio skyriaus dalis, kurias išleidote, kad tai tiesiog maišymas, kuriant vaizdus ir hipersaitus. Sintaksė yra nustatyta taip, kad hipersaitai būtų susieti iš išorės, o vaizdas - vidinėje pusėje, tokiu būdu pateikiant įterpto paveikslėlio hipersaitą.
2.4.3 Gavote paštą - hipersaitas į el. Pašto adresą
Tai paprasčiausiai paskutinės dalies pakartojimas, bet jei jūs to nesureikšminote, tiesiog pasižiūrėkite į žemiau esantį kodą:
Užuot naudojęsi URL (pvz., http://www.something.com) čia naudoju el. pašto adresą, kuriame nurodoma ši sintaksė po lygybės ženklu:
„Mailto: [jūsų pašto adresas]“
10 eilutė yra pagrindinis šios sąvokos pavyzdys. Taigi kam jūs e-paštu? Vaiduokliai!
2.4.4 Kelionė po pasaulį - vidinis hipersaitas
Dabar galite pamatyti, kaip galėtumėte apeiti savo svetainę. Tai atliekama paprasčiausiai naudojant failo vardą kaip URL. Todėl galite sukurti svetaines, kaip parodyta toliau pateiktoje schemoje. Taikoma sintaksė būtų tokia:
2.5 Ar esate ypatingas? Šie personažai yra ...
Kai įvesite informaciją, kuri tinklalapyje bus rodoma kaip turinys, gali reikėti įdėkite kažką panašaus į tokį simbolį kaip autorių teisių simbolis: © arba galbūt mažesnis ar didesnis nei simbolis. Bet kadangi kodavimo sintaksėje naudojami įprasti simboliai, tada turėjo būti dar vienas būdas išeiti iš šios mažos kliūtis, o sprendimas panaudojo ampersandą (&) ir po to trumpą kodą, kad kompiuteriui pasakytų, kokį simbolį įkišti. Žemiau yra lentelė, kurioje pateikiami keli specialiųjų kodavimo ženklų pavyzdžiai:
Pavyzdžiui, galite pasakyti:
Aukščiau pateiktoje lentelėje yra 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 dar daugiau sąrašų
Na, dabar turėsime sutvarkyti keletą dalykų, pavyzdžiui, pirkinių sąrašą. Yra du sąrašų tipai. Jie yra šie:
• Užsakytas sąrašas (skaičiai, abėcėlės, romėniški skaitmenys)
• Netvarkingas sąrašas (pažymėti taškai)
Norėdami užsakytą sąrašą, naudotumėte šias žymas =
Netvarkingam sąrašui naudotumėte šias žymas =
Pavyzdžiui:
Aukščiau pateiktame pavyzdyje aš pateikiau neorganizuotų ir užsakytų sąrašų tipus. Bet ar jūs pastebėjote, ką aš dariau? Aš taip pat įtraukiau techniką, vadinamą Lizdų sąrašai. Šie įdėtieji sąrašai gali būti naudojami hierarchiniams ryšiams atvaizduoti, kaip ir komponentų sąrašas Pirmiau pateiktas recepto žingsnis „Ingredientai“.
Galite pastebėti, kad aš pradėjau visą sąrašą kaip užsakytą sąrašą 10 eilutėje ir baigiau jį 23 eilutėje. Tarp jūsų būtų matyti ir žymas, kurias naudojau. Tai žymi Elementų sąrašas. Sąrašo elementai yra žodžiai, rodomi, pavyzdžiui, 21 eilutėje:
Jei norite pereiti prie kito hierarchinio taškų ar skaičių lygio, tada įdėkite juos į vidų taip:
2.7 Lentelės... ne matematika
Ar tai taip sunku, kaip ir jūsų daugybos lenteles? Žinoma, ne, jei eisite teisingu keliu. Jei jūs tik pradedate nuo šios idėjos ir manau, kad esate, tada dažniausiai geriausia nubrėžti lentelę, kurią norite padaryti, ant tokio popieriaus lapo, kokį turiu žemiau:
Dabar pažvelkite į tai žemiau pateiktu kodu:
Dabar sumaišykite juos kartu ir žemiau esantis ekranas turėtų padėti suprasti lentelės struktūrą:
A
ir
paryškinkite pirmą ir paskutinę eilutes, kad daugiau atkreiptumėte dėmesį į tas stalo dalis. Dauguma žmonių pirmiausia žiūrėtų į lentelės poraštę?2.8 Skaitmeninės formos (nėra rašiklių)
Naršydami tinkle turėsite bendrauti su tinklalapiais, su kuriais susiduriate. Pavyzdžiui, svetainėje www.makeuseof.com jums reikės įvesti savo el. Pašto adresą, kaip nurodyta toliau užsiprenumeruokite naujienlaiškį ir kasdienius „MakeUseOf“ naujinius. Įvedę savo el. Pašto adresą jūs paspaustų Prisijunkite ir tai išsiųs informaciją (jūsų el. pašto adresą), esančią teksto laukelyje šalia mygtuko, į duomenų bazę arba galbūt į kitą el. pašto adresą. Formos yra įpratę tai daryti, ko išmoksite šiame skyriuje.
Žemiau yra forma, naudojama įvesti tik jūsų vardą ir spustelėti bet kurią iš jų Pateikti arba Aišku:
Štai kodas iš užpakalio, kurį netrukus paaiškinsiu išsamiau:
Pirmiausia svarbiausias minėto scenarijaus dalykas yra 10 eilutė. Tai yra formos pradžia. Paprastai metodas yra arba paštu arba gauti. Gana savaime suprantama, bet paštu siunčia informaciją kur nors, kad padarytų įrašą, pvz., el. pašto adresą ar duomenų bazę. Pvz.: klausimo paskelbimas „MakeUseOf Answers“. Gaukite, kita vertus, siunčia jūsų pateiktą informaciją ir grįžta su grįžtamąja informacija, pavyzdžiui, paieškos varikliu, siunčiant paieškos raktinius žodžius ir grįžtant su rezultatais.
Aukščiau pateiktas kodavimo blokas yra pašto formos, kurią naudodami įvesite savo el. Pašto adresą, pavyzdys, jis bus išsiųstas į paslėptą nuosavybę el. Pašto adresu spustelėjus mygtuką „Pateikti“.
22–25 eilutės padėkite mygtuką „Pateikti“ ir „Atstatyti / išvalyti“ puslapyje po teksto laukeliu. Atstatyti mygtukas tiesiog ištrina tekstą, įvestą į tos formos langelį arba langelius. Pateikti mygtukas seka instrukcijas iš paslėptų formos dalių, kurios yra sukurtos 14–18 eilutėse. Paslėptas tipas paprastai reiškia, kad kažkas automatinio ar kažkas kita bus naudojama dabartine forma. Šiuo atveju pastaroji suteikia paštuRedaguoti informaciją apie kelionės tikslą, šiuo atveju [email protected], nurodydami temą atveju „Prenumeruoti el. laišką“, o tada nukreipia jus į kitą puslapį, šiuo atveju pagrindinį arba „Index.html“.
2.9 meta kas? Kodėl?
Ar kada susimąstėte, kaip paieškos varikliai suranda svetaines? Iš esmės tai jie naudojasi: meta elementai. Paieškos sistemos dažniausiai katalogizuoja svetaines atlikdamos nuorodas į rastus tinklalapius. Šie meta elementai turi informacijos apie juose esantį puslapį. Pažvelkite į šį pavyzdžio kodą:
Kaip matote aukščiau, meta informacija patenka į
3. Dizainas naudojant CSS
Dažniausiai žmonėms, žiūrintiems į tokius vadovus, tiesiog patinka žaisti vaizdo žaidimus. Vis dėlto CSS nėra „Counter Strike Source“ ir visai nėra „First Person Shooter“ (FPS). CSS yra technologija, kuri veikia su xHTML ir reiškia Ckylant STyle Slapai. xHTML savaime yra gana nuobodus, tačiau jei pridedate teisingą CSS aptarnavimą, jūsų kūrinio formatavimas ir pateikimas yra daug įdomesni. Autoriai gali pakeisti tinklalapio elementus, pavyzdžiui, šriftus, tarpus, spalvas; tai daroma atskirai nuo dokumento struktūros (vadovo, kūno ir kt.); tai bus paaiškinta vėlesniuose skyriuose). xHTML iš tikrųjų buvo skirtas dokumento turiniui ir struktūrai apibrėžti. Tai nėra taip, kad xHTML negalėjo pakeisti turinio formatavimo. Tačiau šis nustatymas yra daug naudingesnis, nes prireikus jį galima valdyti iš vienos vietos. Pvz., Jei svetainės formatą visiškai nustato pridedamas stiliaus lapas, interneto dizaineris gali tiesiog sukurti kitą stiliaus lentelę, kad smarkiai pakeistų svetainės pateikimą.
3.1 „Inline“ šokių stiliai
Kaip minėta aukščiau, šiame skyriuje yra viskas apie formatavimą ir stilius. Kadangi yra daugybė būdų pakeisti savo turinio ir puslapio stilių, maniau, kad būtų gerai pradėti nuo tiesiausios technikos, kuri yra Įtvirtinti stiliai. Tai atliekama įdedant kodą į skirtuko, kuris apima turinį, ypatybių skiltį. Kaip šitas:
Garsas per sunkus? Leiskite pateikti jums pavyzdį:
Pastaba: spalva rašoma spalva kai naudojate šį kodą, nes jis buvo sukurtas ne taip šauniai kaip Australijoje ar Kanadoje; Tikiuosi, kad tai per daug netrukdo.
Aukščiau pateiktame pavyzdyje paryškinta informacija yra formatavimas, kuris apdorojamas
žyma. Norėdami rasti šešioliktainių skirtingų spalvų kodų sąrašą, tiesiog ieškokite „Google“ arba naudokitės šia svetaine: http://html-color- kodai.lt/
3.2 Įterptiniai stiliaus lapai (apgauti lapeliai yra laimi)
Ankstesniame skyriuje pateiktų įdėtinių stilių naudojimas gali būti skausmas, jei turite labai didelę svetainę. Bet jei norite vėl ir vėl naudoti tuos pačius stilius, kodėl gi ne naudoti? Įdėtas stiliaus lapas? Ši alternatyva leidžia jums sukurti savo stilius
kodo žymą, tada į kodą įterpdami kai kuriuos savo puslapio puslapius nurodote juos. Pernelyg sudėtinga? Štai pavyzdys:
Pažiūrėkite, kaip tekstas keičia spalvą, dydį ar formatą, atsižvelgiant į stiliaus lentelę viršuje? Tai nėra labai sunku suprasti teisingai?
7 eilutėje, kurioje pristatome
16 eilutėje naudojamas .xtra klasė, kuri buvo gaminama anksčiau. Tai veikia taip, kad pridedama xtra klasė bet kokiam stiliui, kuriame jis atidaromas, perrašant bet kokias savybes xtra klasės reikmėms. Pvz.: jei stiliaus šriftas yra 20pt, jo spalva yra žalia, o jam priskiriama klasė, kuri turi skirtingas šrifto dydis, tada naujas šrifto dydis pakeis seną, bet senoji žalia spalva išliks kaip yra.
3.3 Karo stiliai (prieštaringi stiliai)
Yra trys stilių lygiai ir jie yra:
• Vartotojas (svetainės peržiūra)
• Autorius (svetainės)
• Vartotojo agentas (naršyklė)
Stiliai susilieja taip, kad sukuriama geriausia įmanoma sąranka iš vartotojo pozicijos. Šioje diagramoje parodyta trijų lygių hierarchija:
3.4 Stiliaus lapai iš išorės (išoriniai)
Ar nemanote, kad būtų erzina, jei kiekviename naujame kodavimo faile visada turėtumėte rašyti to paties stiliaus lapą? Yra sprendimas: Išoriniai stiliaus lapai. Galite sukurti kitą failą, naudodami jį formatavimui; tai yra ".cssFailą. Jei norite naudoti jį kitame faile, tiesiog įveskite šį išrašą:
Pakeiskite failo pavadinimas su jūsų CSS failo pavadinimu ir ten, kur mes einame, jie yra susieti. Įsitikinkite, kad CSS failas yra tame pačiame aplanke kaip ir susietas failas.
CSS failo pavyzdys:
Prieš tęsdamas aš nepamiršau paminėti, ką jie daro. Virš paskutinės eilutės pamatysite, kad įdėjau „ul ul {šrifto dydis: .8em; } “, O tai reiškia, kad šrifto dydis bus pakeistas santykiniu .8 arba 80% įprasto dydžio, kurį vartotojas nori, kad jis naudotų savo stiliaus lapą, įkeltą į savo naršyklę. Dauguma žmonių nenaudoja vartotojo apibrėžto stiliaus lapo, todėl nesijaudinkime dėl to.
3.5 Padėties nustatymo elementai (kur toliau?)
Kai įdedate vaizdą į tinklalapį, nelabai norite, kad jis visur patektų. Ar nenorėtumėte apie tai pasakyti? Na, kaip jūs tai darote, na, tai iš tikrųjų yra pavyzdys ir netrukus paaiškinsiu:
9–13 eilutėse pastebėsite, kad tai klasė su ID kaip fgpic ir joje naudojamos kelios savybės. padėtis turtas yra nustatytas absoliutus o tai reiškia, kad nesvarbu, kaip vartotojas jį pakeis, nuotrauka liks ten, kur jūsų (autorius), su savo kodu. viršuje ir liko savybės nurodo tašką, kuriame elementas (pvz.,. paveikslėlis / tekstas) bus įdėtas. z-indeksas nuosavybė yra labai galingas įrankis, nes jis nustato krovimo lygį, kaip parodyta toliau pateiktoje ekrano kopijoje:
Pažiūrėkite, kaip fono paveikslėlis gale yra „z“ indekso reikšmė 1, o tekstas priekyje, kai „z“ indekso vertė yra 3, o priekinio vaizdo vaizdas yra viduryje, kai z indekso vertė yra 2. Tai iš tikrųjų atrodo gana gerai, jei teisingai žaidžiate savo kortomis
3.6 Nepamirškite savo aplinkos (fonas)
Tinklalapiai atrodo gerai atsižvelgiant į foną, ar ne? Ar tikrai nebūtų nuobodu, jei visos svetainės būtų tik baltame arba juodame fone? Kodėl gi neįdėjus į jį paveikslėlio ir šiek tiek pakeitus spalvą? Yra keletas ypatybių, kurias galite naudoti, norėdami, kad jūsų puslapio fonas šiek tiek labiau išsiskirtų ir suteiktų puslapiui pagyvėjimą. Pažvelkite į šį kodą ir sužinokite, ar galite sužinoti, ką daro pažymėtos savybės:
Ar sugalvojai, ką tai daro? Iš esmės fono paveikslėlį mes naudosime fone, skliausteliuose / skliaustuose vaizdo kelias eina tokiu būdu: url (ČIA). Galite manyti, kad tai z indekso reikšmė yra 0, nes ji visada yra pačiame puslapio gale. Vaizdo fono padėtis nustatyta į apačią kairėje, beveik savaime suprantama dešinėje? Tada fono paveikslėlis buvo pakartotas skersai puslapio x ašies (pakartokite x) ir ne tik tai, bet ir pritvirtintas prie lango apačios (fonas-priedas). Galiausiai spalva atsitiktinai buvo nustatyta kaip raudona. Pažvelkite į rezultatą žemiau:
3.7. Kaip jūs manote, koks didelis? (elementų matmenys / teksto ribos)
Jei manote, kad visa tai siūlo CSS, jūs smarkiai klystate. CSS taisyklėse gali būti nurodyti tikrieji kiekvieno puslapio elemento matmenys. Paimkime teksto laukelio pavyzdį. Ar norite įvesti tekstą, kuris netaikomas per visą ekraną, ar galbūt sukurti teksto lauką, kurį galima slinkti nejudinant puslapio? Tuomet čia turėtum būti. Žr. Toliau pateiktą ekrano kopiją, ką ką tik aprašiau:
Dabar pažvelkime į užkulisių kodą:
Tiesiog nedidelė pastaba: 6 eilutė prideda kraštinę ribą kiekvieno teksto laukelio apačioje. Gana šaunu, tiesa? Bet daugiau apie sienas kitame skyriuje.
3.8 Kas vyksta aplinkui (sienos)
Nemanau, kad tam reikia paaiškinimo, bet aš vis tiek pateiksiu. Iš esmės galite apklijuoti sienas beveik bet kuo, todėl pažiūrėkime, kaip tai padaryti. Taigi štai kodas:
Kodas tai daro, iš esmės sienų asortimentas, apimantis naudojamo sienos tipo pavadinimą (-us). Turėkite omenyje, kad griovelio priešingybė yra kraiga, o įbrėžimo priešingybė yra išbrėžta.
3.9 Plaukiojantys ir tekantys elementai
Paprastai yra gana nuobodu matyti antraštes, tada tekstą, tada antraštę, tada tekstą. Nors neatrodo, kad atrodytų šiek tiek gražiau? Yra metodas, kurį galima naudoti plūduriuojantis, o dabar aš jums parodysiu, kaip tai padaryti. Plūduriuojantis leidžia perkelti elementą į vieną ekrano pusę, o kitas dokumento turinys teka aplink plūduriuojantį elementą. Plūduriuojantis elementas gali būti paveikslėlis arba antraštė ar net kitas teksto blokas. Dabar pažvelkime, kaip tai atrodo:
Gana geras keliose situacijose, dabar šis dizainas sukonstruotas taip:
Argi nenuostabu, ką galite padaryti, jei tik rasite tinkamą metodą?
3.10 Neišmeskite meniu - pavyzdys
Jei galvojate sukurti svetainę, greičiausiai jums reikės meniu, tiesa? Tai gali būti tinkama vieta, kur galėtumėte eiti, jei norite kažko, kas nėra tiesiog jame sėdintis. Dinaminiai elementai leidžia tinklalapiams atrodyti geriau ir geriau jaustis bendroje svetainėje.
Vienas iš mano mėgstamiausių meniu tipų turi būti: a išskleidžiamasis meniu todėl dabar pažiūrėkime, kaip tai padaryti naudojant CSS. Patikrinkite žemiau esantį kodą:
Aš žinau, kad tai iš pradžių atrodo šiek tiek bauginančiai, bet jei būsi kantrus ir tik skaitysi, suprasi pakankamai greitai.
15 eilutė sako: kai turiu <div> žyma su klase = “MeniuIr pelė yra užveskiteIng per tai ekranas blokuotis jo viduje.
16–21 eilutės sako: kai turiu <div> žyma su klase = “MeniuIr <a> žymę, tada nustatykite šiuos formatus. Atminkite, kad šios eilutės pasirenka paslėpto meniu mygtukų formatą. 9–14 eilutėse nustatomi meniu mygtuko formatai, kad paslinktų, kad būtų rodomas visas likęs meniu.
22 eilutė sako: kai turiu <div> žyma su klase = “MeniuIr <a> pažymėti ir aš užveskite per vieną iš šių elementų nustatykite fono spalva į kitokią žalią.
Pažvelkite į žemiau pateiktą galutinį produktą:
3.11 Vartotojo stiliaus žiniaraščiai (esate visatos centras)
Vartotojai gali apibrėžti savo vartotojo stiliaus lapai kad puslapiai atrodytų taip, kaip jie nori. Tiesiog atskirti Vartotojo stiliaus žiniaraščiai ir Autoriaus stiliaus žiniaraščiai. Vartotojo stiliai yra išoriniai stiliaus lapai, kuriuos vartotojai gali susikurti patys. Jie yra tiesiog daromi kaip CSS failai be didesnio kodavimo. Čia aš jums parodysiu:
Ar nebuvo taip paprasta?
Jei norite sužinoti, kaip tai nustatyti savo naršyklėje, tiesiog eikite į Įrankiai >> Interneto parinktys >> Bendra >> Prieinamumas >> Tada apibrėžkite savo failą Autoriaus stiliaus lapas yra apibrėžtas kodo viduje .
4. Daugiau informacijos
4.1 Kodėl verta naudoti xHTML ir co. per dizainą ir kitas programas?
Prieš pažvelgdami į tai kaip į faktą ar panašų į tai, turėtumėte žinoti, kad tai yra tiesiog požiūrio taškas priklausomai nuo to, kur stovite ir kiek esate techniškai nusiteikęs. Aš mėgau naudoti programavimo kalbas, kad galėčiau užbaigti savo projektus, nes tai reiškia, kad jūs galite suprasti, kas slypi už dizaino, tuo tarpu naudojant dizaino programas, pvz „Adobe Dreamweaver“ ir „Microsoft FrontPage“ leidžia jums sukurti savo svetainę naudojant tik meniu prieinamus įrankius. Todėl projektavimo programos apsiriboja jums suteiktu meniu variantu. Apibendrinant, visiškai akivaizdu, kad naudojant programavimo kalbas svetainė ar baigtas produktas bus sukurtas kažkas daug patrauklesnio, nes jo funkcionalumą riboja tik programuotojo mokėjimas paskirtąja kalba (pvz. „JavaScript“, CSS, xHTML). Aš žinau, kad tikriausiai galvojate, kad esu šališkas, bet jūs turėsite tiesiog išbandyti abu dalykus ir nuspręsti, kaip daug pastangų, kurias norite įdėti į savo darbą, tada pasirinkite sau tinkamas priemones, kad pasiektumėte savo Kelionės tikslas. Jūs netgi galite pasirinkti naudoti abu, nes tiek „Dreamweaver“, tiek „FrontPage“ turi „kodavimo vaizdą“ ir „dizaino rodinį“.
Yra ir kitų būdų, kaip kurti svetaines, pavyzdžiui, naudojant „Joomla“ ir „WordPress“.
4.2 Joomla
„Joomla“ yra puiki turinio valdymo sistema (CMS), turinti daug lankstumo ir lengvai naudojamą vartotoją sąsaja, dėl kurios daugybė žmonių įbauginami, kai supranta, kiek yra parinkčių ir konfigūracijų prieinama. „Joomla“ yra PHP ir MySQL pagrįsta platforma. Ši programinė įranga yra atvirojo kodo, kurią galite gauti iš http://www.joomla.org/download.html
Jei norite išsamaus Joomla vadovo, išbandykite šį „MakeUseOf“ vadovą: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Joomla vadovas pradedantiesiemsŠis vadovas padės jums sužinoti apie viską, nuo ko verta rinktis „Joomla“ ir kaip ją įdiegti savo internetiniame serveryje, iki to, kaip suprojektuoti ir pritaikyti svetainę pagal savo skonį. Skaityti daugiau
4.3 „WordPress“
„WordPress“ yra turinio valdymo sistema (CMS), leidžianti vartotojams sukurti ir prižiūrėti svetainę per administratorių sąsaja, įskaitant automatiškai sugeneruotą naršymo struktūrą, nereikia žinoti HTML ar išmokti jokio kito įrankio. „WordPress“ yra atvirojo kodo programinė įranga, sukurta tūkstančių programuotojų visame pasaulyje ir įtraukta į viešąją sritį, todėl jums nereikia mokėti už tai, kad ja naudojatės. „WordPress“ yra internetinė programa, parašyta PHP ir MySQL, skirta veikti „Linux“ serveriuose: PHP yra interneto programavimo kalba programų, „MySQL“ yra reliacinė duomenų bazė (pvz., „MS Access“), o „Linux“ yra interneto serverių operacinė sistema - visos jos taip pat yra atviros šaltinis. „WordPress“ yra pats populiariausias CMS, turintis daugiau nei 200 milijonų svetainių visame pasaulyje nuo 2009 m. Pabaigos.
Papildomi skaitymai
- 11 populiariausių HTML žymų, kurias turi žinoti kiekvienas tinklaraštininkas ir svetainės savininkas 11 populiariausių HTML žymų, kurias turi žinoti kiekvienas tinklaraštininkas ir svetainės savininkasŽiniatinklis žino daug kalbų ir yra koduojamas keliomis skirtingomis kalbomis. Tačiau viena kalba, kurią galima rasti visame pasaulyje ir kuri gyvuoja nuo pat tinklalapių išradimo, yra ... Skaityti daugiau
- 5 įdomūs dalykai, kuriuos reikia atlikti internetu naudojant HTML5 5 įdomūs dalykai, kuriuos reikia atlikti internetu naudojant HTML5HTML5 ir toliau stiprėja, vis daugiau svetainių pereina prie naujo standarto, kuris suteikia daugialypės terpės turinį internete ir nereikia papildinių, tokių kaip „Adobe Flash“. Ar tai susprogdinta ... Skaityti daugiau
- Žiniatinklio kodas su šiais įrankiais tiesiai jūsų naršyklėje Sukurkite: 11 puikių „Chrome“ plėtinių, skirtų interneto kūrėjams„Chrome“ puikiai tinka žiniatinklio kūrėjams dėl plėtinių. Jei kada planuojate kurti ar koduoti svetainę, štai keli pagrindiniai įrankiai, kuriuos turėtumėte įdiegti iškart. Skaityti daugiau
Vadovas paskelbtas: 2011 m. Birželio mėn