Reklāma
Satura rādītājs
§1. Ievads
§2 - darba sākšana ar xHTML
3.§ - dizains ar CSS
4.§ - vairāk informācijas
1. Ievads: Kas ir xHTML?
Laipni lūdzam XHTML pasaulē - Paplašināma hiperteksta iezīmēšanas valoda - iezīmēšanas valoda (līdzīga programmēšanai), kas ļauj ikvienam izveidot tīmekļa lapas ar daudzām dažādām funkcijām. Daudzējādā ziņā tā ir galvenā interneta valoda.
Tātad, kāpēc mums tas rūp?
Nu, vai jūs nekad neesat vēlējies izveidot savu vietni? Vai arī izveidot savu spēli? Šīs rokasgrāmatas uzdevums ir sniegt jums priekšstatu par šo spēcīgo pasauli. Ja jums ir kāda iepriekšēja programmēšanas pieredze, tas, protams, jums būs vieglāk, nekā tad, ja jūs tikai sākat savu programmēšanas piedzīvojumu. Katrā ziņā es ceru to izskaidrot, lai pat iesācējs to saprastu.
Mums rūp xHTML, jo tas ir labs sākumpunkts tīmekļa pamata veidošanas elementu apguvei. Sociālo tīklu vietnēs, piemēram, Facebook, MySpace un Twitter, tiek izmantota cita (servera puses) programmēšanas valoda ko sauc par PHP, taču ir laba ideja izprast pamatus, pirms galīgi iedziļināties programmēšanā pasaule. Šī rokasgrāmata ir par pamatiem.
Ja vēlaties uzzināt vairāk par to, kā darbojas internets vai varbūt par to, kā darbojas datortīkli tehniskas lietas vai pat tikai to, kā var izveidot datoru, izmēģiniet šos lieliskos ceļvežus no draugiem vietnē Izmantot:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Kā izveidot savu datoruIr ļoti iepriecinoši izveidot savu datoru; kā arī iebiedējoši. Bet pats process patiesībā ir diezgan vienkāršs. Mēs iepazīstināsim jūs ar visu, kas jums jāzina. Lasīt vairāk
//www.makeuseof.com/tag/everything-need-know-home-networking/ Viss, kas jums jāzina par mājas tīkla izveidošanuMājas tīkla iestatīšana nav tik grūta, kā jūs domājat. Lasīt vairāk
//www.makeuseof.com/tag/guide-file-sharing-networks/ Failu koplietošanas tīklu ceļvedis MakeUseOfVai esat kādreiz domājis, kādi ir lielākie failu apmaiņas tīkli? Kādas ir atšķirības starp BitTorrent, Gnutella, eDonkey, Usenet utt.? Lasīt vairāk
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Windows 7: galīgais ceļvedisJa jūs baidāties veikt jaunināšanu no Vista vai XP, jo uzskatāt, ka tā pilnīgi atšķiras no tā, pie kuras esat pieradis, jums vajadzētu izlasīt šo jauno rokasgrāmatu. Lasīt vairāk
//www.makeuseof.com/tag/download-how-the-internet-works/ Kā darbojas internetsTagad mēs varam piekļūt internetam no mūsu mājas datoriem, biroja, klēpjdatoriem un mūsu tālruņiem. Bet daudzi cilvēki joprojām nav pilnībā pārliecināti, kas ir internets un kā tas patiesībā darbojas. Lasīt vairāk
2. Darba sākšana ar xHTML
Šajā nodaļā jūs uzzināsit, kā izveidot un pielāgot vietnes daudzos dažādos veidos, ieskaitot iemācīšanos:
• Pievienojiet Web lapām attēlus.
• Izveidojiet un izmantojiet hipersaites, lai pārvietotos Web lapās.
• Izveidojiet informācijas sarakstus, izmantojot punktveida punktus un citus.
• Izveidot tabulas ar nejaušu datu rindām un kolonnām un spēt kontrolēt minēto tabulu formatējumu.
• Izveidojiet un izmantojiet veidlapas, ar kurām jūs faktiski var kaut ko mijiedarboties.
• Padariet tīmekļa lapas pieejamas meklētājprogrammām.
Tas viss tiks darīts ar xHTML programmēšanu. Netici tam? Turpini lasīt. Jūs būtu pārsteigts, cik daudz jūs varat iemācīties no tik īsa ceļveža.
Pirms mēs faktiski nokļūstam šīs rokasgrāmatas “kodēšanas” daļā, jums būs nepieciešama programmatūra, kas jāizmanto, lai jūs varētu rediģēt, testēt un būtībā visapkārt attīstīt savas programmas. Dodieties uz vietni www.dreamspark.com un BEZMAKSAS iegūstiet kādu no šīm programmām, pieņemot, ka esat students:
• Microsoft Visual Studio 2010
• Expression Studio 4
Ja neesat students, varat arī izmantot Notepad ++, kuru varat diezgan viegli iegūt www.notepad-plus-plus.org
Kad esat saņēmis kādu no programmām un to instalējis, varat sākt izmantot savu xHTML.
Jūs, iespējams, Windows vietā izmantojat Mac vai Linux; jums būs jāatrod a teksta redaktors kas jums šajā gadījumā der. Mēģiniet atrast tādu, kurā parādīts jūsu līniju skaits un krāsu kods.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad - īpaši viegls teksta redaktors [Linux] Lasīt vairāk
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - lielisks viegla koda redaktors operētājsistēmai LinuxPārsteidzoši, ka Linux nepiedāvā tik daudz labu IDE (Integrētās attīstības vides). Es uzskatu, ka tas ir tāpēc, ka tajā pašā dienā vairums Linux programmētāju izņēma veco labo Notepad (vai šajā gadījumā gedit) un sāka ... Lasīt vairāk
Ja jūs nevēlaties lejupielādēt īpašus rīkus, joprojām varat izmantot teksta redaktoru, piemēram Notepad vai Wordpad. Tomēr iepriekš minētās programmas ir daudz labāki rīki testēšanai un projektēšanai, kā arī jums palīdz jūsu kodēšana, jo tas liek jums izdarīt kļūdu vai mēģināt atcerēties pareizo vārdu izmantot. Vienkārši ir labāk, vai ne? Es personīgi izmantoju Notepad ++ un Microsoft Visual Studio, lai gan esmu dzirdējis daudz lielisku lietu par Expression Studio 4. Jums būs jāizlemj, kas jums patīk vislabāk, bet visi tie darbojas lieliski.
PIEZĪME: Lai pārbaudītu vietni, kas izveidota no Notepad vai Wordpad:
Kad fails ir atvērts, noklikšķiniet uz Fails >> Saglabāt kā
Faila nosaukuma beigās ierakstiet.html un noklikšķiniet uz Saglabāt
Atveriet tikko saglabāto failu (tas tiks atvērts noklusējuma interneta pārlūkā)
2.1. Iepazīšanās ar pasauli
Labi, šeit ir ceļojuma sākums. Sāksim ar kaut kā kaut ko ievietošanu ekrānā šajā tīmekļa lapā. Vispirms jums jāzina, ko ir. XHTML kods izmanto sākuma un beigu tagus, lai sakārtotu, kas notiek ar katru lapas elementu.
Šeit ir sākuma tagu piemērs:
Šeit ir beigu tagu piemērs:
Vai redzat atšķirību? Vienam elementa nosaukums ir ievietots smailās iekavās, bet otrs ir tāds pats, bet pirms elementa nosaukuma ir slīpsvītra.
SVARĪGS: Pēc koda atvēršanas kādā brīdī tas ir jāaizver. Arī tagos jābūt ligzdotiem, tas ir, tas nozīmē, ka nevar veikt šādas darbības:; tam vajadzētu būt. Skatiet, kā tagi iederas viens otram? Padomājiet par tiem, piemēram, kastēm: pusotrā kastītē nevar ievietot kaut ko cietu.
Labākais veids, kā uzzināt, kā programmēt, ir to faktiski izdarīt, tātad pietiek teorijas. Vienīgi atskaites punktam es katru koda rindu apzīmēšu ar numuru, lai es rindām pa rindām varētu izskaidrot notiekošo.
1. rindā esmu norādījis html kodu, un 5. rindā es to esmu beidzis. Iekšpusē tags ir
). Ja atvērsit to tīmekļa pārlūkprogrammā, ekrānā redzēsit sekojošo:
Ja vēlaties mainīt lapas nosaukumu no pārlūka skatupunkta (piemēram, pirmā lapa.html), tad jūs varat viegli pievienot šo koda rindu:
Tas padarīs jūsu vietni izskatīgāku.
2.2 Sākot no un strādājot pie
Vairumā gadījumu tag tur ir
un a .parasti tiek izmantots skriptu veidošanai CSS (3. sadaļa) un JavaScript (izskaidrots gaidāmajā rokasgrāmatā), turpretī parasti ir lapas saturs.
Dažu saturu var mainīt, izmantojot skriptu
, bet parasti ir saturs, kas nav maināms lapā. Kā piemēru var minēt īsu vietnes apmeklējumu.Jūs varat mainīt satura formatējumu, izmantojot CSS (3. sadaļa)
. Tomēr jūs varat arī mainīt formatējumu .Parasti tagu komplekts, kas tiek izmantots pamattekstā, ir galvenes fonti. Šie galvenes fonti ir lieluma un stipruma / treknrakstā. Vienkārši apskatiet zemāk:
2.3. Vai jūsu attēls ir tūkstoš vārdu vērts? - Attēli
Līdz šim mēs runājām tikai par tekstu un to, ko tas var darīt tīmekļa vietnē, taču ir vēl kas cits. Vai vēlaties, lai jūsu vietne izskatās vēl vilinošāka nekā tikai izdomāti fonti? Mēģiniet iegūt dažus labus attēlus, lai jūsu vietne patiešām sniegtu auditorijai kaut ko apskatīt. Tomēr esiet piesardzīgs attiecībā uz autortiesību likumiem; vislabāk uzņemt savus attēlus, ja jūs plānojat ievietot savu vietni internetā.
Lai izveidotu lielisku attēlu vai, iespējams, uzlabotu savu attēlu un padarītu to vēl satriecošāku, jums, iespējams, būs jāizmanto Photoshop vai dažas digitālās attēlveidošanas prasmes. Izmēģiniet šos ceļvežus, lai iegūtu lieliskus padomus un ieskatu:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Uzziniet fotoattēlu rediģēšanu Photoshop: iegūstiet pamatus 1 stundāPhotoshop ir iebiedējoša programma, taču tikai vienas stundas laikā jūs varat iemācīties visus pamatus. Satveriet fotoattēlu, kuru vēlaties rediģēt, un sāksim darbu! Lasīt vairāk
• //www.makeuseof.com/tag/guide-to-digital-photography/ Iesācēja rokasgrāmata digitālajai fotogrāfijaiDigitālā fotogrāfija ir lielisks hobijs, taču tā var arī iebiedēt. Šis iesācēja ceļvedis jums pateiks visu, kas jums jāzina, lai sāktu! Lasīt vairāk
Populārākie attēlu formāti ir šādi:
• GIF = grafikas apmaiņas formāts
• JPEG = Apvienotā fotoekspertu grupa
• PNG = portatīvā tīkla grafika
Apskatiet zemāk redzamo kodu, un es paskaidrošu tālāk, ko tas nozīmē. tas ir, kā pievienot attēlus savai vietnei.
Kā tika mācīts iepriekšējās sadaļās, mēs vienmēr sākam ar un co tagus. Tālāk
Pēc rindkopas atvēršanas 9. rindā attēlus ievieto vietnē. Lai pievienotu attēlu / attēlu, kas jums jāizmanto sākt ar. Tālāk jums jāierosina faila atrašanās vieta. Parasti jūs mēģinātu šo failu atrast tajā pašā mapē kā vietnes failus, citur jums būs jāievada mapes ceļš, kurā tas pastāv. Iepriekš minētajā gadījumā esmu izmantojis
. Tas nozīmē, ka avots (src) attēla atrodas tajā pašā mapē, un šī attēla faila nosaukums ir Attēls.jpg. Viegli, vai ne?
Jums nav jāpievieno nekas vairāk kā lai izveidotu attēlu ar alt īpašumu, taču jūs varat tam pievienot īpašumus, lai tajā izdarītu dažas izmaiņas.
Zināms arī kā alt teksts, šī īpašuma vērtība tiek parādīta, novietojot peles kursoru virs attēla.
Jūs varat pamanīt, ka 10. rindā es esmu sācis tagu un to beidza ar />. Tas ir vēl viens tagu atvēršanas un aizvēršanas veids. Šis ir parastais attēlu veidošanas veids, jo varat izvēlēties dažādas attēla īpašības, piemēram, platumu un augstumu, kā parādīts iepriekšējā piemērā.
11. un 12. rindā tiek ievietots cits attēls, bet tagos tiek izmantota cita metode tagu atvēršanai un aizvēršanai. 10. rinda attēlu veido daudz daudzveidīgāku; izmantojiet šo metodi, nevis metodi 11. un 12. rindā.
2.4 Hipersaites, kur tās var aiziet?
2.4.1 Pārvietošanās pa pasauli
Vai vēlaties parādīt draugiem dažas lieliskas vietnes jūsu vietnē, bet nezināt, kā? Esat nonācis pareizajā vietā, lasījis ...
Apskatiet zemāk redzamo kodu un noskaidrojiet, vai varat uzminēt, ko es daru, pirms es to izskaidroju.
Tas ir pareizi, es izveidoju hipersaites uz dažām lieliskām un noderīgām vietnēm. Lai hipersaiti izveidotu uz noteiktu tīmekļa lapu, kurai ir tīmekļa adrese, vienkārši izmantojiet zemāk esošo sintakse:
[ko vēlaties hipersaiti]
Vai tas nešķiet ļoti grūti? Diezgan viegli tur varēja ievietot tekstu, piemēram, iepriekš norādīto kodu. Tomēr nav iemesla, kāpēc jūs nevarētu izmantot kaut ko citu, piemēram, attēlu. Tikai nedaudz papildu informācijas: vietrādis URL ir vienots resursu vietrādis, pamatā tīmekļa adrese.
2.4.2. Attēli atgādina par to, kur esat bijis, un atkal ved tur jūs
Šis ir piemērs, kā attēlu izmantot kā hipersaiti:
Es esmu pārliecināts, ka, lasot iepriekšējās šīs sadaļas daļas, kuras jūs atbrīvojat, tas vienkārši sajauc attēlu veidošanu un hipersaites. Sintakse ir iestatīta tā, lai hipersaite būtu no ārpuses un attēls no iekšpuses, tādējādi ievietojot ievietotā attēla hipersaiti.
2.4.3. Jums ir pasts - hipersaite uz e-pasta adresi
Tas ir vienkārši pēdējās daļas atkārtojums, bet, ja jūs neesat pievērsis tik lielu uzmanību, vienkārši apskatiet zemāk redzamo kodu:
Tā vietā, lai izmantotu URL (piemēram, http://www.something.com) šeit es izmantoju e-pasta adresi, kas paredz šādas sintakses ievietošanu aiz vienādības zīmes:
“Mailto: [jūsu adreses adrese]”
10. rinda ir šīs koncepcijas pamata piemērs. Tātad, uz ko jūs e-pastu Spoku krāpnieki!
2.4.4 Pārvietošanās pa pasauli - iekšējā hipersaite
Tagad jūs varat redzēt, kā jūs varētu apiet savu vietni. To var izdarīt, vienkārši izmantojot URL faila nosaukumu. Tādēļ jums var būt tādu vietņu iestatījums, kā parādīts zemāk redzamajā diagrammā. Sintakse, kuru jūs lietotu, būtu šāda:
2.5. Vai jūs esat īpašs? Šīs rakstzīmes ir…
Ievadot informāciju, kas vietnē parādīsies, piemēram, saturs, iespējams, jums tas būs jādara ielieciet kaut ko līdzīgu simbolam, piemēram, autortiesību simbolam: © vai varbūt mazākam vai lielākam par simbolu. Bet, tā kā parastos simbolus izmanto kodēšanas sintakse, tad bija jābūt citam ceļam, kā iziet no šī mazā šķērslis, un risinājums bija, izmantojot ampersand (&) un pēc tam īsu kodu, lai datoram pateiktu, kāds simbols ielikt Zemāk ir tabula ar dažiem kodēšanas speciālo rakstzīmju piemēriem:
Piemēram, jūs varētu teikt:
Iepriekš tabulā ir
Iepriekš tabulā ir <6 rindas, bet> 2 rindas
2.6. Saraksti, saraksti un citi saraksti
Labi, ka tagad mums būs jāorganizē dažas lietas, piemēram, iepirkumu saraksts. Ir divu veidu saraksti. Tie ir:
• Pasūtīts saraksts (cipari, alfabēts, romiešu cipari)
• Nesakārtots saraksts (aizzīmju punkti)
Pasūtītam sarakstam jūs izmantotu šādus tagus =
Nesakārtotam sarakstam jūs izmantotu šādus tagus =
Piemēram:
Iepriekš minētajā piemērā es iekļāvu gan nesakārtotus, gan sakārtotus saraksta veidus. Bet vai jūs pamanījāt, ko vēl es izdarīju? Es arī iekļāvu tehniku, ko sauc par Ligzdotu saraksti. Šos ligzdotos sarakstus var izmantot, lai attēlotu hierarhiskas attiecības, piemēram, sastāvdaļu sarakstu Iegūstiet sastāvdaļas iepriekš norādītajā receptē.
Jūs varat redzēt, ka es sāku visu sarakstu kā pasūtītu sarakstu 10. rindā un pabeidzu to 23. rindā. Starp jums varētu redzēt un tagus, kurus esmu izmantojis. Tie apzīmē Sarakstu vienības. Saraksta vienības ir vārdi, kas parādās, piemēram, 21. rindā:
Ja vēlaties pāriet uz nākamo hierarhisko punktu punktu vai skaitļu līmeni, tad ligzdojiet iekšā šādi:
2.7. Galdi… nē, nav matemātika
Vai tas ir tikpat grūti kā jūsu reizināšanas tabulas? Protams, nē, ja iet pa pareizo ceļu. Ja jūs tikai sākat darboties ar šo koncepciju, un es pieņemu, ka esat, tad parasti vislabāk ir uzzīmēt tabulu, kuru vēlaties izgatavot, uz tādas papīra lapas, kā man ir zemāk:
Tagad apskatiet to zemāk redzamajā kodā:
Tagad sajauciet tos kopā, un zemāk redzamajam displejam vajadzētu palīdzēt saprast tabulas struktūru:
A
un
treknrakstā attiecīgi pirmo un pēdējo rindu, lai pievērstu lielāku uzmanību tām tabulas daļām. Lielākā daļa cilvēku vispirms skatās kopējo tabulas kājenē?2.8. Digitālās veidlapas (pildspalvas nav)
Sērfojot tīklā, jums būs jāsaskaras ar Web lapām, ar kurām jūs sastopaties. Piemēram, vietnē www.makeuseof.com jums jāievada sava e-pasta adrese, kā norādīts zemāk abonējiet jaunumu biļetenu un ikdienas atjauninājumus no vietnes MakeUseOf. Pēc tam, kad esat ievadījis savu e-pasta adresi, jūs spiestu Pievienojieties un tas nosūtīs informāciju (jūsu e-pastu) tekstlodziņā blakus pogai uz datu bāzi vai, iespējams, uz citu e-pasta adresi. Veidlapas tiek izmantoti, lai to izdarītu, un to jūs iemācīsities šajā nodaļā.
Zemāk ir veidlapa, kuru izmanto, lai ievietotu tikai jūsu vārdu un noklikšķiniet uz vai nu Iesniegt vai Skaidrs:
Šis ir aizkulisēs izmantotais kods, kuru drīzumā paskaidrošu sīkāk:
Pirmkārt, vissvarīgākā lieta iepriekšminētajā skriptā ir 10. rinda. Tas ir formas sākums. Metode parasti ir vai nu pastu vai gūt. Diezgan pašsaprotami, bet pastu sūta informāciju kaut kur, lai izveidotu ierakstu, piemēram, e-pasta adresi vai datu bāzi. Piemēram: ievietojiet jautājumu vietnē MakeUseOf Answers. gūtno otras puses, sūta jūsu sniegto informāciju un atgriežas ar atgriezenisko saiti, piemēram, meklētājprogrammu, nosūta meklēšanas atslēgvārdus un atgriežas kopā ar rezultātiem.
Iepriekš minētais kodēšanas bloks ir ziņas veidlapas piemērs, kurā jūs ievadījāt savu e-pasta adresi, un pēc noklikšķināšanas uz pogas Iesniegt to nosūtīs uz slēpto īpašumu ar e-pasta adresi.
22. – 25. Līnija novietojiet pogas Iesniegt un Atiestatīt / Notīrīt lapā zem tekstlodziņa. Atiestatīt poga vienkārši izdzēš tekstu, kas ievadīts šajā formā esošajā tekstlodziņā vai rūtiņās. Iesniegt poga seko norādījumiem no formas paslēptajām daļām, kas izveidotas 14. – 18. rindā. Slēptais tips parasti tiek pieņemts, ka kaut kas automātisks vai kaut kas cits tiek izmantots pašreizējā formā. Šajā gadījumā pēdējais dod pasturediģēta informācija par galamērķi, šajā gadījumā [email protected], ar tēmu, šajā gadījumā “Abonēt e-pastu” un pēc tam jūs novirza uz citu lapu, šajā gadījumā galveno lapu vai “Index.html”.
2.9 meta kas? Kāpēc?
Vai esat kādreiz domājuši, kā meklētājprogrammas atrod vietnes? Būtībā viņi to izmanto: meta elementi. Meklētājprogrammas parasti kataloģizē vietnes, sekojot saitēm uz lapām vietnēs, kuras viņi atrod. Šiem meta elementiem ir informācija par lapu tajos. Apskatiet, piemēram, šādu izrakstu no kāda koda:
Kā redzat iepriekš, meta informācija nonāk
3. Dizains ar CSS
Lielākoties cilvēkiem, kuri skatās šādus ceļvežus, vienkārši patīk spēlēt videospēles. Tomēr CSS nav Counter Strike Source, kā arī tas nav pirmās personas šāvējs (FPS). CSS ir tehnoloģija, kas darbojas ar xHTML Cascading Style Slapas. xHTML pats par sevi ir diezgan garlaicīgs, bet, ja pievienojat godīgu CSS kalpošanu, jūsu radīšanas formatēšana un noformējums ir daudz interesantāks. Autori var mainīt vietnes elementus, piemēram, fontus, atstarpes, krāsas; tas tiek darīts atsevišķi no dokumenta struktūras (galva, korpuss utt.); tas tiks izskaidrots turpmākajās nodaļās). xHTML faktiski tika izstrādāts, lai precizētu dokumenta saturu un struktūru. Nav tā, ka xHTML nevarētu mainīt satura formatējumu. Tomēr šis iestatījums ir daudz izdevīgāks, jo, ja nepieciešams, to var vadīt no vienas vietas. Piemēram, ja vietnes formātu pilnībā nosaka pievienotā stila lapa, tīmekļa dizainers var vienkārši ievietot citu stila lapu, lai ievērojami mainītu vietnes noformējumu.
3.1. Inline dejošanas stili
Kā minēts iepriekš, šajā sadaļā ir viss par formatējumu un stiliem. Tā kā ir daudz veidu, kā mainīt sava satura un lapas stilu, es domāju, ka būtu labi sākt ar visvienkāršāko tehniku, kas ir Iekļautie stili. To veic, ievietojot kodu cilnes rekvizītu sadaļā, kas aptver saturu. Kā šis:
Izklausīties pārāk grūti? Ļaujiet man sniegt jums piemēru:
Piezīme: krāsa ir uzrakstīta krāsa lietojot šo kodu, jo tas tika izveidots kaut kur ne tik foršā kā Austrālijā vai Kanādā; Es ceru, ka tas jūs pārāk netraucē.
Iepriekš parādītajā treknrakstā norādītā informācija ir formatēšana, kas tiek apstrādāta
birka. Dažādu krāsu heksadecimālo kodu sarakstam vienkārši meklējiet Google vai izmantojiet šo vietni: http://html-color- kodi.com/
3.2 Iegultās stila lapas (krāpšanās lapas ir uzvarētas)
Iepriekšējā sadaļā iekļauto stilu izmantošana var radīt sāpes, ja jums ir ļoti liela vietne. Bet, ja vēlaties atkal un atkal izmantot tos pašus stilus, kāpēc gan neizmantojat Iegultā stila lapa? Šī alternatīva ļauj jums izveidot savus stilus
koda tagu un pēc tam, ievietojot kādu saturu savā lapā, jūs atsaucaties uz tiem kodā. Pārāk sarežģīti? Šis ir piemērs:
Uzziniet, kā teksts maina krāsu, izmēru vai formātu atkarībā no stila lapas augšpusē? Vai to nav ļoti grūti saprast?
7. Rindā, kur mēs iepazīstinām ar
16. rindā tiek izmantots .xtra klase, kas tika izveidota agrāk. Veids, kā tas darbojas, ir tas, ka tas papildina xtra klase jebkuram stilam, kurā tā tiek atvērta, pārrakstot visas īpašības, kuras xtra klases lietojumiem. Piemēram: ja stilam ir fonts 20pt un tā krāsa ir zaļa, un tam tiek likta klase, kurai ir atšķirīgs fonta lielums, tad jaunais fonta lielums aizstās veco, bet vecā zaļā krāsa tiks turpināta kā ir.
3.3. Kara stili (pretrunīgi stili)
Pastāv trīs stilu līmeņi, un tie ir:
• Lietotājs (vietnes apskate)
• Autors (tīmekļa vietnē)
• Lietotāja aģents (pārlūks)
Stili saplūst tādā veidā, kas no lietotāja pozīcijas rada vislabāko iespējamo iestatīšanu. Šajā tabulā parādīta trīs līmeņu hierarhija:
3.4 Stila lapas no ārpuses (ārēja)
Vai nedomājat, ka būtu kaitinoši, ja katrā jaunajā kodēšanas failā vienmēr būtu jāizraksta viena un tā pati stila lapa? Ir risinājums: Ārējās stila lapas. Varat izveidot citu failu ar mērķi to izmantot formatēšanai; tas ir ".css”Fails. Lai to lietotu citā failā, vienkārši ierakstiet šo izrakstu:
Aizvietot faila nosaukums ar jūsu CSS faila nosaukumu, un tur mēs ejam, tie ir saistīti. Pārliecinieties, vai jūsu CSS fails atrodas tajā pašā mapē, kur pievienotais (-ie) fails (-i).
CSS faila paraugs:
Pirms mēs turpinām, es esmu aizmirsis pieminēt, ko viņi dara. Virs pēdējās rindiņas redzēsit, ka esmu uzlicis “ul ul {fonta lielums: .8em; } ”, Un tas nozīmē, ka fonta lielums tiks mainīts uz relatīvo .8 vai 80% no parastā lieluma, kādu lietotājs vēlas, lai tas izmantotu viņu pašu pārlūkā ielādēto stila lapu. Lielākā daļa cilvēku neizmanto lietotāja definētu stila lapu, tāpēc par to nav jāuztraucas.
3.5. Pozicionēšanas elementi (kur tālāk?)
Ievietojot attēlu tīmekļa lapā, jūs nevēlaties, lai tas vienkārši nonāktu jebkur. Vai jūs nevēlaties, lai tajā tiktu teikts? Tas ir labi, kā jūs to darāt, tas faktiski ir piemērs, un es to drīz paskaidrošu:
9. līdz 13. rindā pamanīsit, ka tā ir klase ar ID fgpic un tajā ir izmantotas dažas īpašības. pozīcija īpašums ir iestatīts uz absolūts kas nozīmē, ka neatkarīgi no tā, kā lietotājs to maina, attēls paliks tur, kur jūsu (autors) to ievietos ar savu kodu. tops un pa kreisi īpašības apzīmē punktu, kurā elements (piemēram,. attēls / teksts) tiks ievietots. z indekss īpašums ir ļoti spēcīgs rīks, jo tas nosaka kraušanas līmeni, kā parādīts zemāk esošajā ekrānuzņēmumā:
Skatiet, kā fona attēls ir aizmugurē ar z-indeksa vērtību 1 un tekstu priekšā, ar z-indeksa vērtību 3, bet priekšplāna attēls ir pa vidu ar z-indeksa vērtību 2. Liekas, ka tas izskatās diezgan labi, ja pareizi spēlējat kārtis
3.6 Ņemiet vērā apkārtni (fons)
Vietnes izskatās labi ar fonu, vai ne? Vai nebūtu tiešām garlaicīgi, ja visām vietnēm būtu tikai balts vai melns fons? Kāpēc gan neievietot tajā attēlu un mazliet mainīt krāsu? Ir dažas īpašības, kuras varat izmantot, lai jūsu lapas fons nedaudz vairāk izceltos un piešķirtu lapai nelielu uzliesmojumu. Apskatiet šo kodu un noskaidrojiet, vai varat uzzināt, ko izceļ izceltie rekvizīti:
Vai jūs izstrādājāt, ko tas dara? Pamatā fona attēls ir tas, ko mēs izmantosim fonā, attēla ceļš iet iekavās / iekavās šādi: url (ŠEIT). Jūs varētu domāt par to, ka z indeksa vērtība ir 0, jo tas vienmēr atrodas lapas aizmugurē. Attēla fona pozīcija ir iestatīta apakšējā kreisajā stūrī, diezgan labi izskaidrojoša? Pēc tam fona attēls tika atkārtots pāri lapas x asij (atkārtot-x), un ne tikai, bet tas tika fiksēts pie loga apakšas (fons-pielikums). Visbeidzot krāsa pēc nejaušības principa ir iestatīta galvenokārt uz sarkanu. Tālāk apskatiet rezultātu:
3.7. Cik liels, jūsuprāt, ir? (elementu izmēri / teksta ierobežojumi)
Ja domājat, ka tas ir viss, ko var piedāvāt CSS, jūs esat nopietni kļūdījies. CSS kārtulas var norādīt katra lapas elementa faktiskos izmērus. Ņemsim par piemēru tekstlodziņu. Vai vēlaties ierakstīt tekstu, kas pilnībā neiziet pāri ekrānam, vai varbūt izveidot tekstlodziņu, kuru var ritināt, nepārvietojot lapu? Tad jums vajadzētu būt šeit. Skatīt tikko aprakstīto ekrānuzņēmumu:
Tagad apskatīsim kodu aizkulisēs:
Tikai neliela piezīme: 6. rinda katra tekstlodziņa apakšā pievieno marginālu malu. Diezgan forši, vai ne? Bet vairāk par robežām nākamajā sadaļā.
3.8 Tas, kas notiek apkārt, notiek apkārt (robežas)
Es nedomāju, ka tam ir nepieciešams skaidrojums, bet es tik un tā to sniegšu. Būtībā jūs varat ap robežas izvietot gandrīz jebko, tāpēc apskatīsimies, kā to izdarīt. Tātad, šeit ir kods:
Šis ir tas, ko kods dara, galvenokārt robežu sortiments, kas apņem izmantotā robežas tipa nosaukumus. Paturiet prātā, ka rievas pretstats ir grēda un ieliktņa pretstats ir izveidots.
3.9. Peldošie un plūstošie elementi
Parasti ir diezgan garlaicīgi redzēt tikai virsrakstu, tekstu, pēc tam virsrakstu un tekstu. Kaut arī tas nepadara to izskatīgāku? Ir metode, kuru var izmantot peldošs, un tagad es jums parādīšu, kā tieši to izdarīt. Peldošs ļauj pārvietot elementu uz vienu ekrāna pusi, bet cits dokumenta saturs plūst ap peldošo elementu. Peldošais elements var būt attēls vai virsraksts vai pat cits teksta bloks. Tagad apskatīsim, kā izskatās:
Diezgan labs diezgan daudzās situācijās, tagad šis ir kods, kas veido šo dizainu:
Vai nav pārsteidzoši, ko jūs varat darīt, ja vienkārši atrodat pareizo metodi?
3.10 Nenoņemiet izvēlni - piemērs
Ja domājat izveidot vietni, visticamāk, jums būs nepieciešama izvēlne, vai ne? Šī varētu būt īstā vieta, kur doties, ja vēlaties kaut ko ne tikai tur sēdēt. Dinamiskie elementi padara tīmekļa lapas labākas un ļauj labāk izjust vietnes kopējo izskatu.
Viens no maniem iecienītākajiem izvēlņu veidiem ir: a nolaižamā izvēlne tāpēc tagad apskatīsim, kā to izveidot, izmantojot CSS. Pārbaudiet zemāk redzamo kodu:
Es zinu, ka tas sākotnēji šķiet mazliet biedējoši, bet, ja esat pacietīgs un tikai lasāt, jūs sapratīsit pietiekami drīz.
15. rindā teikts: kad man ir <div> atzīme ar klasi = “izvēlneUn pele ir lidinātiesing pār to displejs bloķēts tā iekšpusē.
16. – 21. Rindā teikts: kad man ir <div> atzīme ar klasi = “izvēlne”Un <a> tag, pēc tam iestatiet šos formātus. Ņemiet vērā, ka šīs līnijas izvēlas slēptās izvēlnes pogu formātu. 9. – 14. Rindā ir iestatīti izvēlnes pogas formāti, lai ritinātu, parādot pārējo izvēlni.
22. rindā teikts: kad man ir <div> atzīme ar klasi = “izvēlne”Un <a> birka un es lidināties virs viena no šiem elementiem iestatiet fona krāsa uz citu zaļu.
Tālāk apskatiet galaproduktu:
3.11. Lietotāja stila lapas (jūs esat Visuma centrs)
Lietotāji var definēt savu lietotāja stila lapas lai lapas izskatās tā, kā viņi to vēlas. Tikai atšķirt Lietotāja stila lapas un Autora stila lapas. Lietotāju stili ir ārējas stilu lapas, kuras lietotāji var izveidot paši, un tās tiek vienkārši izveidotas kā CSS faili bez lielākās daļas kodēšanas. Šeit es jums parādīšu vienu:
Vai tas nebija tik vienkārši?
Ja vēlaties uzzināt, kā to iestatīt savā pārlūkprogrammā, jūs vienkārši apmeklējat Rīki >> Interneta opcijas >> Vispārīgi >> Pieejamība >> Pēc tam definējiet pats savu failu Autora stila lapa ir definēta koda iekšpusē .
4. Vairāk informācijas
4.1 Kāpēc izmantot xHTML un co. vairāk nekā dizains un citi pielietojumi?
Pirms skatāties uz to kā uz faktu vai kaut ko tamlīdzīgu, jums jāzina, ka tas ir vienkārši viedoklis atkarībā no tā, kur stāvat un cik tehniski domājat. Man patīk izmantot programmēšanas valodas, lai pabeigtu savus projektus, jo tas nozīmē, ka jūs varat saprast, kas ir aiz dizainparauga, turpretī, piemēram, izmantojot dizaina programmas Adobe Dreamweaver un Microsoft FrontPage ļauj jums izveidot savu vietni, izmantojot tikai izvēlnēs pieejamos rīkus. Tāpēc dizaina lietojumprogrammas ir ierobežotas ar jums piedāvāto izvēlnes iespēju. Noslēgumā ir pilnīgi skaidrs, ka, izmantojot programmēšanas valodas, vietne vai pabeigtais produkts tiks izveidots kaut kas daudz pievilcīgāks, jo tā funkcionalitāti ierobežo tikai programmētāja prasme lietot noteikto valodu (piemēram, JavaScript, CSS, xHTML). Es zinu, ka jūs droši vien domājat, ka esmu neobjektīvs, bet jums būs tikai jāizmēģina abas iespējas un jāizlemj, kā to izdarīt daudz pūļu, ko vēlaties ieguldīt savā darbā, pēc tam izvēlieties piemērotus rīkus, lai sasniegtu galapunkts. Jūs pat varētu izvēlēties izmantot abus, jo gan Dreamweaver, gan FrontPage ir “kodēšanas skats” un “dizaina skats”.
Ir arī citi veidi, kā izveidot vietnes, piemēram, izmantojot Joomla un WordPress.
4.2 Joomla
Joomla ir lieliska satura pārvaldības sistēma (CMS) ar lielu elastību un ērti lietojamu lietotāju saskarne, par kuru daudzi cilvēki iebiedē, kad saprot, cik daudz iespēju un konfigurāciju ir pieejams. Joomla ir platforma, kuras pamatā ir PHP un MySQL. Šī programmatūra ir atvērtā koda, no kuras varat iegūt http://www.joomla.org/download.html
Ja vēlaties iegūt padziļinātu ceļvedi par Joomla, izmēģiniet šo rokasgrāmatu no MakeUseOf: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Iesācēju ceļvedis JoomlaiŠajā rokasgrāmatā sniegts viss, sākot no tā, kāpēc izvēlēties Joomla un kā to instalēt savā tīmekļa serverī, līdz vietnes noformēšanai un pielāgošanai pēc jūsu vēlmēm. Lasīt vairāk
4.3 WordPress
WordPress ir satura pārvaldības sistēma (CMS), kas lietotājiem ļauj izveidot un uzturēt vietni, izmantojot administratīvo saskarne, ieskaitot automātiski ģenerētu navigācijas struktūru, nepārzinot HTML vai apgūstot nevienu citu rīku. WordPress ir atvērtā pirmkoda programmatūras gabals, ko tūkstošiem programmētāju izveidojis visā pasaulē un ievietojis publiskajā domēnā, tāpēc jums par to nav jāmaksā. WordPress ir tīmekļa lietojumprogramma, kas rakstīta PHP un MySQL un paredzēta darbināšanai uz Linux serveriem: PHP ir Web programmēšanas valoda lietojumprogrammas, MySQL ir relāciju datu bāze (piemēram, MS Access), un Linux ir tīmekļa serveru operētājsistēma - visi šie ir atvērti avots. WordPress ir vispopulārākais CMS ar vairāk nekā 200 miljoniem vietņu visā pasaulē kopš 2009. gada beigām.
Papildu lasījums
- 11 populārākie HTML tagi, kas jāzina visiem emuāru autoriem un vietnes īpašniekiem 11 populārākie HTML tagi, kas jāzina visiem emuāru autoriem un vietnes īpašniekiemPasaules tīmeklis zina daudzas valodas un ir kodēts vairākās dažādās valodās. Tomēr viena no valodām, kas ir atrodama visā pasaulē un ir pastāvējusi kopš tīmekļa lapu izgudrošanas, ir ... Lasīt vairāk
- 5 jautras lietas, kas jādara tiešsaistē, izmantojot HTML5 5 jautras lietas, kas jādara tiešsaistē, izmantojot HTML5HTML5 turpina darboties spēcīgākā, arvien vairāk vietņu pārejot uz jauno standartu, kas multivides saturu nodrošina tīmeklī bez nepieciešamības pēc spraudņiem, piemēram, Adobe Flash. Vai tas ir uzsprādzis ... Lasīt vairāk
- Kods tīmeklim ar šiem rīkiem tieši jūsu pārlūkprogrammā Veidojiet to: 11 izcili Chrome paplašinājumi tīmekļa izstrādātājiemPārlūku Chrome paplašinājumu dēļ ir lieliski piemērots tīmekļa izstrādātājiem. Ja kādreiz plānojat izveidot vai kodēt vietni, šeit ir daži svarīgi rīki, kas jums jāinstalē uzreiz. Lasīt vairāk
Ceļvedis publicēts: 2011. gada jūnijā
