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. Daudzos veidos 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ī izveidojiet savu spēli? Šīs rokasgrāmatas uzdevums ir sniegt jums šīs spēcīgās pasaules garšu. Ja jums ir iepriekšēja programmēšanas pieredze, jums tas, protams, būs vieglāk, nekā tad, ja jūs tikai sākat savu programmēšanas piedzīvojumu. Katrā ziņā es ceru to izskaidrot tā, lai pat iesācējs to saprastu.
Mums rūp xHTML, jo tas ir spēcīgs sākumpunkts, lai apgūtu tīmekļa pamatelementus. Sociālo tīklu vietnes, piemēram, Facebook, MySpace un Twitter, izmanto citu (servera puses) programmēšanas valodu ko sauc par PHP, taču ir lietderīgi izprast pamatus, pirms iedziļināties programmēšanā pasaule. Šī rokasgrāmata ir par pamatiem.
Ja vēlaties uzzināt vairāk par to, kā darbojas internets vai, iespējams, kā datortīkli darbojas ar šo visu tehniskas lietas vai pat to, kā var uzbūvēt datorus, tad izmēģiniet šos lieliskos ceļvežus no saviem draugiem vietnē Izmantot:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Kā izveidot savu datoruIr ļoti patīkami izveidot savu datoru; kā arī biedē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īkluMājas tīkla iestatīšana nav tik sarežģīta, kā jūs domājat. Lasīt vairāk
//www.makeuseof.com/tag/guide-file-sharing-networks/ MakeUseOf rokasgrāmata failu koplietošanas tīkliemVai esat kādreiz domājuši, kuri 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: Ultimate rokasgrāmataJa baidāties jaunināt no Vista vai XP, jo uzskatāt, ka tas pilnīgi atšķiras no tā, pie kā esat pieradis, izlasiet š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ājas datoriem, biroja, klēpjdatoriem un tālruņiem. Taču daudzi cilvēki joprojām nav pilnībā pārliecināti, kas ir internets un kā tas īsti 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, tostarp uzzināsiet, kā:
• Pievienojiet Web lapām attēlus.
• Izveidojiet un izmantojiet hipersaites, lai pārvietotos tīmekļa lapās.
• Izveidojiet informācijas sarakstus, izmantojot punktu punktus un tamlīdzīgi.
• Izveidot tabulas ar nejaušu datu rindām un kolonnām un spēt kontrolēt šo tabulu formatējumu.
• Izveidojiet un izmantojiet veidlapas, ar kurām jūs varat mijiedarboties.
• Padariet tīmekļa lapas pieejamas meklētājprogrammām.
Tas viss tiks darīts ar xHTML programmēšanu. Vai neticat? Turpini lasīt. Jūs būtu pārsteigts, cik daudz jūs varat mācīties no tik īsas rokasgrāmatas.
Pirms mēs ķeramies pie šīs rokasgrāmatas “kodēšanas” daļas, jums būs jāizmanto programmatūra, lai jūs varētu rediģēt, pārbaudīt un būtībā izstrādāt savas programmas. Dodieties uz vietni www.dreamspark.com un BEZ MAKSAS iegūstiet kādu no tālāk norādītajām programmām, pieņemot, ka esat students:
• Microsoft Visual Studio 2010
• Expression Studio 4
Ja neesat students, varat arī izmantot Notepad++, no kuras var diezgan viegli iegūt www.notepad-plus-plus.org
Kad esat ieguvis kādu no programmām un to instalējis, varat sākt savu xHTML pieredzi.
Iespējams, Windows vietā izmantojat Mac vai Linux; jums būs jāatrod a teksta redaktors kas jums noder tādā gadījumā. Mēģiniet atrast tādu, kas parāda jūsu līniju skaitu un krāsu kodu.
• //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 viegls koda redaktors operētājsistēmai LinuxPārsteidzoši, ka Linux nepiedāvā tik daudz labu IDE (integrētās izstrādes vides). Es uzskatu, ka tas ir tāpēc, ka tajā laikā lielākā daļa Linux programmētāju izņēma veco labo Notepad (vai šajā gadījumā gedit) un sāka... Lasīt vairāk
Ja 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ī palīdz jums jūsu kodēšana, jo tā liek jums kļūdīties vai mēģināt atcerēties pareizo vārdu izmantot. Vienkāršs ir labāks, vai ne? Es personīgi izmantoju Notepad++ un Microsoft Visual Studio, lai gan esmu dzirdējis daudzas lieliskas lietas par Expression Studio 4. Jums būs jāizlemj, kas jums patīk vislabāk, taču tie visi 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 Saglabāt
Atveriet tikko saglabāto failu (tas tiks atvērts jūsu noklusējuma interneta pārlūkprogrammā)
2.1. Pasaules iepazīšana
Labi, šeit ir ceļojuma sākums. Sāksim ar kaut kā ievietošanu šīs tīmekļa lapas ekrānā. Vispirms jums jāzina, kas ir. XHTML kods izmanto sākuma un beigu tagus, lai noskaidrotu, kas notiek ar katru lapas elementu.
Šeit ir sākuma taga piemērs:
Šeit ir beigu taga piemērs:
Vai redzat atšķirību? Viena elementa nosaukums ir ievietots smailajās iekavās, bet otram ir tāds pats elements, taču pirms elementa nosaukuma ir slīpsvītra.
SVARĪGS: jums ir jāaizver tags pēc tā atvēršanas kādā koda punktā. Arī tagiem ir jābūt ligzdotiem, tas nozīmē, ka jūs nevarat veikt tālāk norādītās darbības.; tam vajadzētu būt. Vai redzat, kā atzīmes iederas viena otrā? Padomājiet par tām kā par kastēm: pusotrā kastē nevar ievietot kaut ko cietu.
Labākais veids, kā uzzināt, kā programmēt, ir to faktiski darot, tāpēc pietiek ar teoriju. Atsauces nolūkos es apzīmēšu katru koda rindiņu ar numuru, lai es varētu rindiņu pa rindiņai izskaidrot, kas notiek.
1. rindā esmu norādījis html kodu un 5. rindā esmu to pabeidzis. Iekšpusē tags ir
). Ja to atverat tīmekļa pārlūkprogrammā, ekrānā redzēsit tālāk norādīto.
Ja vēlaties mainīt lapas nosaukumu no pārlūkprogrammas viedokļa (piem. firstpage.html), tad varat viegli pievienot šādu koda rindiņu:
Tādējādi jūsu tīmekļa lapa izskatīsies profesionālāk.
2.2 Sākot no un strādājot uz leju
Vairumā gadījumu iekšpusē tagā ir a
un a .The parasti tiek izmantots skriptu veidošanai CSS (3. sadaļa) un JavaScript (paskaidrots gaidāmajā rokasgrāmatā), savukārt parasti ir lapas saturs.
Dažu saturu var mainīt, izmantojot skriptus
, bet parasti ir saturs, kas lapā nav maināms. Piemērs varētu būt īss apraksts par jūsu apmeklēto vietni.Varat veikt izmaiņas satura formatējumā, izmantojot CSS (3. sadaļa).
. Tomēr varat arī veikt izmaiņas formatējumā .Parasti lietotā tagu kopa, kas tiek izmantota pamattekstā, ir galvenes fonti. Šie galvenes fonti atšķiras pēc lieluma un stipruma/drosmības. Skatieties pats zemāk:
2.3. Vai jūsu attēls ir tūkstoš vārdu vērts? - Attēli
Līdz šim mēs esam runājuši tikai par tekstu un to, ko tas var sniegt vietnē, taču ir vēl vairāk. Vai vēlaties, lai jūsu vietne izskatītos vēl pievilcīgā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 aplūkot. Tomēr esiet piesardzīgs pret autortiesību likumiem; vislabāk ir uzņemt savus attēlus, ja plānojat ievietot savu vietni internetā.
Iespējams, jums būs jāizmanto Photoshop vai dažas digitālās attēlveidošanas prasmes, lai izveidotu lielisku attēlu vai, iespējams, uzlabotu savu attēlu un padarītu to vēl satriecošāku. 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/ Apgūstiet fotoattēlu rediģēšanu programmā Photoshop: iegūstiet pamatus 1 stundāPhotoshop ir biedējoša programma, taču tikai vienas stundas laikā jūs varat apgūt visus pamatus. Paņemiet fotoattēlu, kuru vēlaties rediģēt, un sākam! Lasīt vairāk
• //www.makeuseof.com/tag/guide-to-digital-photography/ Digitālās fotogrāfijas ceļvedis iesācējiemDigitālā fotogrāfija ir lielisks hobijs, taču tas var būt arī biedējošs. Šajā rokasgrāmatā iesācējiem būs norādīts viss, kas 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ā fotogrāfiju ekspertu grupa
• PNG = portatīvā tīkla grafika
Apskatiet tālāk norādīto kodu, un es paskaidrošu, ko tas nozīmē; tas ir, kā tīmekļa lapai pievienot attēlus.
Kā tika mācīts iepriekšējās sadaļās, mēs vienmēr sākam ar un co tagus. Nākamais
Pēc rindkopas atvēršanas 9. rindiņā šeit attēli tiek ievietoti vietnē. Lai pievienotu attēlu/attēlu, jāizmanto sākt ar. Tālāk jums jāiesaka, kur atrodas fails. Parasti jūs mēģināt ievietot šo failu tajā pašā mapē ar vietnes failiem, pretējā gadījumā jums būs jāievada mapes ceļš, kurā tas pastāv. Iepriekš minētajā gadījumā esmu izmantojis
. Tas nozīmē, ka avots (src) no 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 varat tam pievienot rekvizītus, lai veiktu tajā dažas izmaiņas.
Zināms arī kā alternatīvais teksts, šī rekvizīta vērtība tiek parādīta, kad virzāt peles kursoru virs attēla.
Jūs varat pamanīt, ka 10. rindiņā esmu sācis tagu ar un beidza to ar />. Šis ir vēl viens tagu atvēršanas un aizvēršanas veids. Šis ir parastais attēlu izveides veids, jo varat izvēlēties dažādas attēla īpašības, piemēram, platumu un augstumu, kā parādīts iepriekš minētajā piemērā.
11. un 12. rindiņā ir ievietots cits attēls, taču tiek izmantota cita metode tagu atvēršanai un aizvēršanai. 10. rindiņa veido attēlu daudz kārtīgākā veidā; izmantojiet to, nevis 11. un 12. rindā norādīto metodi.
2.4. Hipersaites, kur tās var iegūt?
2.4.1. Pārvietošanās pa pasauli
Vai vēlaties parādīt draugiem dažas lieliskas vietnes savā vietnē, bet nezināt, kā to izdarīt? Jūs esat nonācis īstajā vietā, lasiet tālāk…
Apskatiet tālāk norādīto kodu un pārbaudiet, vai varat uzminēt, ko es daru, pirms es to izskaidroju.
Tieši tā, es veidoju hipersaites uz dažām lieliskām un noderīgām vietnēm. Lai izveidotu hipersaiti uz noteiktu tīmekļa lapu, kurai ir tīmekļa adrese, vienkārši izmantojiet tālāk norādīto sintaksi:
[ko vēlaties izveidot hipersaiti]
Nešķiet ļoti grūti, vai ne? Jūs varat diezgan vienkārši ievietot tekstu, piemēram, iepriekš norādītajā koda piemērā. Tomēr nav iemesla, kāpēc jūs nevarētu izmantot kaut ko citu, piemēram, attēlu. Tikai nedaudz papildu informācijai: URL ir vienotais resursu vietrādis, būtībā tīmekļa adrese.
2.4.2. Attēli atgādina, kur esat bijis, un aizved jūs uz turieni vēlreiz
Tālāk ir sniegts piemērs attēla kā hipersaites izmantošanai.
Esmu pārliecināts, ka, ja lasāt šīs sadaļas iepriekšējās daļas, kuras jūs izlaižat, tas vienkārši sajauc attēlus un hipersaites. Sintakse ir iestatīta tā, lai hipersaite būtu ārpusē un attēls būtu iekšpusē, tādējādi ievietojot ievietotā attēla hipersaiti.
2.4.3. Jums ir pasts — hipersaite uz e-pasta adresi
Šis ir tikai pēdējās daļas atkārtojums, taču, ja neesat tik daudz pievērsis uzmanību, vienkārši apskatiet tālāk esošo kodu:
Tā vietā, lai izmantotu URL (piem. http://www.something.com) šeit es izmantoju e-pasta adresi, kas ietver šādas sintakses ievietošanu aiz vienādības zīmes:
“mailto: [jūsu pasta adrese]”
10. rindiņa ir šīs koncepcijas pamatpiemērs. Tātad, kam jūs sūtīsit e-pastu? Spoku mednieki!
2.4.4. Pārvietošanās pa pasauli — iekšējā hipersaite
Tagad varat redzēt, kā jūs varētu apiet savu vietni. Tas tiek darīts, vienkārši izmantojot faila nosaukumu kā URL. Tāpēc varat izveidot tādas vietnes, kā parādīts zemāk esošajā diagrammā. Sintakse, kuru jūs izmantotu, būtu aptuveni šāda:
2.5 Vai jūs esat īpašs? Šie varoņi ir…
Ievadot informāciju, kas tiks parādīta vietnē, piemēram, saturu, iespējams, tas būs nepieciešams ievietojiet kaut ko līdzīgu simbolam, piemēram, autortiesību simbolam: © vai varbūt mazāku par vai lielāku par simbols. Bet, tā kā kodēšanas sintakse izmanto parastos simbolus, tad vajadzēja būt citam veidam, kā pārvarēt šo mazo šķērslis, un risinājums bija izmantot & (&) un pēc tam — īsu kodu, lai pateiktu datoram, kuru simbolu ielikt. Tālāk ir sniegta tabula ar dažiem kodēšanas īpašo rakstzīmju piemēriem:
Piemēram, jūs varētu teikt:
Augšējā tabulā ir < sešas rindas, bet > 2 rindas
Augšējā tabulā ir < 6 rindas, bet > 2 rindas
2.6 Saraksti, saraksti un citi saraksti
Labi, tagad mums būs jāsakārto dažas lietas, piemēram, iepirkumu saraksts. Ir divu veidu saraksti. Tie ir:
• Sakārtots saraksts (cipari, alfabēti, romiešu cipari)
• Nesakārtots saraksts (aizzīmes)
Sakārtotam sarakstam jūs izmantotu šādus tagus =
Nesakārtotam sarakstam izmantotu šādus tagus =
Piemēram:
Iepriekš minētajā piemērā es iekļāvu gan nesakārtotos, gan sakārtotos sarakstu veidus. Bet vai pamanījāt, ko vēl es darīju? Es iekļāvu arī tehniku, ko sauc Ligzdotie 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ā sakārtotu sarakstu 10. rindā un pabeidzu to 23. rindā. Starplaikos jūs redzētu un tagus esmu izmantojis. Tie apzīmē Saraksta vienumi. Saraksta vienumi ir vārdi, kas tiek parādīti, piemēram, 21. rindā:
Ja vēlaties pāriet uz nākamo punktu punktu vai skaitļu hierarhijas līmeni, ievietojiet tos šādi:
2.7. Tabulas... nē, ne matemātika
Vai tas ir tikpat grūti kā jūsu reizināšanas tabulas? Protams, nē, ja jūs to darāt pareizi. Ja jūs tikko sākat izmantot šo koncepciju un es pieņemu, ka jūs to darāt, tad parasti vislabāk ir uzzīmēt tabulu, kuru vēlaties izveidot uz papīra, kā es to daru zemāk:
Tagad apskatiet to zemāk esošajā kodā:
Tagad sajauciet tos, un tālāk redzamajam displejam vajadzētu palīdzēt saprast, kā tabula ir strukturēta.
A
un
treknrakstā attiecīgi pirmo un pēdējo rindu, lai pievērstu lielāku uzmanību šīm tabulas daļām. Lielākā daļa cilvēku vispirms skatītu kopējo summu tabulas kājenē, vai ne?2.8 Digitālās veidlapas (pildspalvas attālumā)
Sērfojot tīklā, jums būs jāsazinās ar tīmekļa lapām, ar kurām saskaraties. Piemēram, vietnē www.makeuseof.com jums būs jāievada sava e-pasta adrese, kā norādīts tālāk aplī abonējiet biļetenu un ikdienas atjauninājumus no MakeUseOf. Pēc e-pasta adreses ievadīšanas jūs nospiestu Pievienojies un tādējādi tiks nosūtīta informācija (jūsu e-pasts) tekstlodziņā blakus pogai uz datu bāzi vai, iespējams, citu e-pasta adresi. Veidlapas tiek izmantoti, lai to izdarītu, ko jūs uzzināsit šajā nodaļā.
Tālāk ir parādīta veidlapa, kas tiek izmantota, lai ievadītu tikai savu vārdu un noklikšķiniet uz jebkura Iesniegt vai Skaidrs:
Šeit ir kods no aizkulisēm, ko es drīzumā paskaidrošu sīkāk:
Pirmkārt, vissvarīgākā lieta iepriekš minētajā skriptā ir 10. rindiņa. Šis ir veidlapas 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 datubāzi. Piemēram: jautājuma ievietošana vietnē MakeUseOf Answers. gūtno otras puses, nosūta jūsu sniegto informāciju un atgriežas ar atgriezeniskās saites informāciju, piemēram, meklētājprogrammu, nosūtot meklēšanas atslēgvārdus un atgriežoties ar rezultātiem.
Iepriekš minētais kodēšanas bloks ir ziņas veidlapas piemērs, kurā jūs ievadāt savu e-pasta adresi, un pēc noklikšķināšanas uz pogas Iesniegt tā tiks nosūtīta uz slēpto īpašumu ar e-pasta adresi. The
22.–25. rindiņā ievietojiet pogas Iesniegt un Atiestatīt/Notīrīt lapā zem tekstlodziņa. The Atiestatīt poga vienkārši izdzēš jebkuru tekstu, kas ievadīts šīs formas tekstlodziņā vai lodziņos. The Iesniegt poga izpilda norādījumus no veidlapas slēptajām daļām, kas izveidotas 14.–18. rindā. Slēptais veids parasti tiek uzskatīts par kaut ko automātisku vai daļu no kaut kā cita, kas tiek izmantots pašreizējā formā. Šajā gadījumā tas ir pēdējais, kas dod pastued informāciju par galamērķi, šajā gadījumā [email protected], ar tēmu iestatītu šajā gadījumā “Abonēt e-pastu”, un pēc tam novirza jūs uz citu lapu, šajā gadījumā uz galveno lapu vai “index.html”.
2.9 meta kas? Kāpēc?
Vai esat kādreiz domājis, kā meklētājprogrammas atrod vietnes? Būtībā viņi izmanto šo: meta elementi. Meklētājprogrammas parasti kataloģizē vietnes, sekojot saitēm uz atrasto vietņu lapām. Šajos meta elementos ir informācija par lapu. Apskatiet šādu koda izrakstu kā piemēru:
Kā redzat iepriekš, meta informācija tiek ievadīta
3. Dizains ar CSS
Lielāko daļu laika 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, ne arī pirmās personas šāvēja (FPS). CSS ir tehnoloģija, kas darbojas ar xHTML un apzīmē Caskādes Style Spalagi. xHTML pats par sevi ir diezgan garlaicīgs, taču, ja pievienojat godīgu CSS, jūsu darba formatējums un prezentācija ir daudz interesantāka. Autori var veikt izmaiņas tīmekļa lapas elementos, piemēram, fontos, atstarpēs, krāsās; tas tiek darīts atsevišķi no dokumenta struktūras (galva, korpuss utt.; tas tiks paskaidrots turpmākajās nodaļās). xHTML faktiski tika izstrādāts, lai norādītu dokumenta saturu un struktūru. Nav tā, ka xHTML nevarētu veikt izmaiņas satura formatējumā. Tomēr šī iestatīšana ir daudz izdevīgāka, jo vajadzības gadījumā to var vadīt no vienas vietas. Piemēram, ja vietnes formātu pilnībā nosaka pievienotā stila lapa, tīmekļa dizaineris var vienkārši ievietot citu stila lapu, lai būtiski mainītu vietnes prezentāciju.
3.1. Inline deju stili
Kā minēts iepriekš, šī sadaļa ir par formatējumu un stiliem. Tā kā ir daudz veidu, kā mainīt satura un lapas stilu, es domāju, ka būtu labi sākt ar visprecīzāko tehniku, kas ir Iekļautie stili. To veic, ievietojot kodu cilnes rekvizītu sadaļā, kas ietver saturu. Kā šis:
Izklausās pārāk grūti? Ļaujiet man sniegt jums piemēru:
Piezīme: krāsa ir uzrakstīta krāsa izmantojot šo kodu, jo tas tika izveidots kaut kur, kas nav tik foršs kā Austrālijā vai Kanādā; Es ceru, ka tas jūs pārāk neuztrauc.
Treknrakstā norādītā informācija iepriekš minētajā piemērā ir formatējums, kas tiek apstrādāts saturā, kas ietverts
tagu. Lai iegūtu dažādu krāsu heksadecimālo kodu sarakstu, vienkārši meklējiet Google vai izmantojiet šo vietni: http://html-color- codes.com/
3.2. Iegultās stila lapas (krāpnieciskās lapas ir win)
Ja vietne ir ļoti liela, iepriekšējā sadaļā ietverto stilu izmantošana var būt sāpīga. Bet, ja vēlaties atkal un atkal izmantot vienus un tos pašus stilus, kāpēc gan neizmantot a Iegultā stila lapa? Šī alternatīva ļauj jums izveidot savus stilus
koda tagu un pēc tam atsaucieties uz tiem kodā, ievietojot kādu saturu savā lapā. Pārāk sarežģīti? Šeit ir piemērs:
Vai redzat, kā teksta krāsa, izmērs vai formāts mainās atkarībā no augšpusē esošās stila lapas? Tas nav ļoti grūti saprast, vai ne?
7. rindiņā, kurā mēs ievadām sākumu
16. rindā tiek izmantots .xtra klase, kas tika izveidota agrāk. Veids, kā tas darbojas, ir tāds, ka tas papildina xtra klasei neatkarīgi no stila, kurā tā tiek atvērta, tādējādi pārrakstot visus rekvizītus xtra klases lietojumi. Piemēram: ja stilam ir 20 pt fonta izmērs un tā krāsa ir zaļa, un uz tā ir ievietota klase, kurai ir dažāda lieluma fontu, tad jaunais fonta lielums aizstās veco, bet vecā zaļā krāsa turpināsies kā ir.
3.3 Kara stili (pretrunīgi stili)
Ir trīs stilu līmeņi, un tie ir:
• Lietotājs (skata vietni)
• Autors (vietnes)
• Lietotāja aģents (pārlūks)
Stili saplūst kopā tādā veidā, kas rada vislabāko iespējamo iestatījumu no lietotāja pozīcijas. Šajā diagrammā ir parādīta trīs līmeņu hierarhija:
3.4. Stila lapas no ārpuses (ārēja)
Vai jūs nedomājat, ka būtu kaitinoši, ja katrā jaunā 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, lai to izmantotu formatēšanai; tas ir ".css” failu. Lai to izmantotu citā failā, vienkārši ierakstiet šādu ekstraktu:
Aizvietot faila nosaukums ar jūsu CSS faila nosaukumu, un tie ir saistīti. Pārliecinieties, vai jūsu CSS fails atrodas tajā pašā mapē, kurā atrodas saistītais(-ie) fails(-i).
CSS faila paraugs:
Pirms mēs turpinām, es neesmu pieminējis, ko viņi dara. Augšpusē pēdējā rindā redzēsit, ka esmu ievietojis “ul ul { font-size: .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, izmantojot savu pārlūkprogrammā ielādētu stila lapu. Lielākā daļa cilvēku neizmanto lietotāja definētu stila lapu, tāpēc neuztraucīsimies par to.
3.5. Pozicionēšanas elementi (kur tālāk?)
Kad ievietojat attēlu tīmekļa lapā, jūs nevēlaties, lai tas kaut kur nonāktu. Vai jūs nevēlaties tajā izteikties? Lūk, kā jūs to darāt, un tas patiesībā ir piemērs, un es to īsumā paskaidrošu:
No 9. līdz 13. rindiņai pamanīsit, ka tā ir klase ar ID kā fgpic un tajā ir izmantotas dažas īpašības. The pozīciju īpašums ir iestatīts uz absolūts kas nozīmē, ka neatkarīgi no tā, kā lietotājs to mainīs, bilde paliks tur, kur tavs (autors) to ievietos ar savu kodu. The tops un pa kreisi rekvizīti apzīmē punktu, kurā elements (piem. attēls/teksts) tiks ievietots. The z-indekss īpašums ir ļoti spēcīgs rīks, jo tas nosaka sakraušanas līmeni, kā parādīts tālāk esošajā ekrānuzņēmumā:
Skatiet, kā fona attēls atrodas aizmugurē ar z indeksa vērtību 1 un teksts ir priekšā ar z indeksa vērtību 3, savukārt priekšplāna attēls atrodas vidū ar z indeksa vērtību 2. Tas izskatās diezgan labi, ja pareizi izspēlējat kārtis
3.6. Ņemiet vērā apkārtējo vidi (fons)
Vietnes izskatās labi ar fonu, vai ne? Vai nebūtu patiešām garlaicīgi, ja visām vietnēm būtu tikai balts vai melns fons? Kāpēc gan neielikt tur bildi un nedaudz pamainīt krāsu? Ir daži rekvizīti, kurus varat izmantot, lai lapas fons izceltos vairāk un piešķirtu lapai mirdzumu. Apskatiet tālāk norādīto kodu un uzziniet, vai varat noskaidrot, ko dara iezīmētie rekvizīti:
Vai jūs sapratāt, ko tas dara? Būtībā fona attēls ir tas, ko mēs izmantosim fonā, attēla ceļš iet iekavās/iekavās, piemēram, šis > url(ŠEIT). Varētu domāt, ka z indeksa vērtība ir 0, jo tā vienmēr atrodas lapas pašā aizmugurē. Attēla fona pozīcija ir iestatīta apakšējā kreisajā stūrī, diezgan pašsaprotami, vai ne? Pēc tam fona attēls ir atkārtots pāri lapas x asij (atkārtot-x) un ne tikai tas, bet arī tas ir fiksēts loga apakšā (fona pielikums). Visbeidzot, krāsa ir nejauši iestatīta galvenokārt sarkanā krāsā. Rezultātu skatiet zemāk:
3.7 Cik liels, jūsuprāt? (elementu izmēri/teksta ierobežojumi)
Ja domājat, ka tas ir viss, ko CSS var piedāvāt, jūs smagi maldāties. CSS noteikumi var norādīt katra lapas elementa faktiskos izmērus. Ņemsim tekstlodziņa piemēru. Vai vēlaties ierakstīt tekstu, kas nepāriet pa visu ekrānu, vai varbūt izveidot tekstlodziņu, kuru var ritināt, nepārvietojot lapu? Šeit jums vajadzētu būt. Skatiet tālāk redzamo ekrānuzņēmumu, lai uzzinātu, ko es tikko aprakstīju:
Tagad apskatīsim kodu aizkulisēs:
Tikai neliela piezīme: 6. rindiņa katra tekstlodziņa apakšā pievieno malu apmali. Diezgan forši, vai ne? Bet vairāk par robežām nākamajā sadaļā.
3.8. Kas notiek apkārt, tas ir apkārt (robežas)
Es nedomāju, ka tam ir vajadzīgs skaidrojums, bet es vienalga to sniegšu. Pamatā apmales var aplikt gandrīz jebko, tāpēc apskatīsim, kā to izdarīt. Tātad, šeit ir kods:
Lūk, ko dara kods, būtībā apmaļu klāsts, kas aptver izmantotā apmales veida nosaukumu/-us. Ņemiet vērā, ka rievas pretstats ir izciļņa un pretstats ielaidumam ir sākums.
3.9. Peldošie un plūstošie elementi
Parasti ir diezgan garlaicīgi tikai redzēt virsrakstu, tad tekstu, tad virsrakstu un tekstu. Lai gan nepadara to mazliet jaukāku? Ir metode, ko var izmantot, ko sauc peldošs, un tagad es jums parādīšu, kā to izdarīt. Peldošā funkcija ļauj pārvietot elementu uz vienu ekrāna pusi, kamēr 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ā tas izskatās:
Diezgan labs dažām situācijām, 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. Nenolaižamajā izvēlnē — 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 tādu, kas nav tikai sēdētājs. Dinamiskie elementi uzlabo tīmekļa lapu izskatu un uzlabo vietnes kopējo izskatu.
Vienam no maniem iecienītākajiem ēdienkartes veidiem ir jābūt a nolaižamā izvēlne tāpēc tagad apskatīsim, kā to izveidot, izmantojot CSS. Pārbaudiet tālāk norādīto kodu:
Es zinu, ka sākumā tas šķiet mazliet biedējoši, taču, ja būsiet pacietīgs un vienkārši lasīsit tālāk, jūs sapratīsit pietiekami drīz.
15. rindā teikts: kad man ir <div> atzīme ar klasi = "izvēlne” un pele ir novietojiet kursorupāri tam displejs uz bloķēts tajā iekšā.
16-21 rindā teikts: kad man ir <div> atzīme ar klasi = "izvēlne” un <a> tagu, pēc tam iestatiet šos formātus. Ņemiet vērā, ka šīs rindas izvēlas slēpto izvēlnes pogu formātu. 9.–14. rindā ir iestatīti izvēlnes pogas formāti, lai ritinātu pāri, lai parādītu pārējo izvēlni.
22. rindā teikts: kad man ir <div> atzīme ar klasi = "izvēlne” un <a> tag un es novietojiet kursoru virs viena no šiem elementiem, pēc tam iestatiet fona krāsa uz citu zaļumu.
Apskatiet galaproduktu zemāk:
3.11. Lietotāja stila lapas (jūs esat Visuma centrs)
Lietotāji var definēt savu lietotāja stila lapas lai lapas izskatītos tā, kā tās vēlas. Tikai, lai atšķirtu Lietotāja stila lapas un Autora stila lapas. Lietotāju stili ir ārējās stilu lapas, kuras lietotāji var izveidot paši, un tās vienkārši tiek veiktas kā CSS faili bez lielākās daļas kodēšanas. Šeit es jums parādīšu vienu:
Vai tas nebija ārkārtīgi vienkārši?
Ja vēlaties uzzināt, kā to iestatīt savā pārlūkprogrammā, vienkārši dodieties uz Rīki >> Interneta opcijas >> Vispārīgi >> Pieejamība >> Pēc tam definējiet 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. par dizainu un citiem lietojumiem?
Pirms uzlūkojat to kā faktu vai kaut ko līdzīgu tam, jums jāzina, ka tas ir vienkārši skatījums atkarībā no jūsu stāvokļa un jūsu tehniskās domāšanas. Man patīk izmantot programmēšanas valodas, lai pabeigtu savus projektus, jo tas nozīmē, ka jūs varat saprast, kas slēpjas aiz dizainiem, turpretim izmantojot dizaina lietojumprogrammas, piemēram, Adobe Dreamweaver un Microsoft FrontPage ļauj izveidot vietni, izmantojot tikai izvēlnēs pieejamos rīkus. Tāpēc dizaina lietojumprogrammas ir ierobežotas ar jums piedāvāto izvēlnes opciju. Noslēgumā jāsaka, ka ir pilnīgi skaidrs, ka, izmantojot programmēšanas valodas, tīmekļa vietne vai pabeigtais produkts tiks iebūvēts kaut kas daudz pievilcīgāks, jo tā funkcionalitāti ierobežo tikai programmētāja prasme izmantot norādīto valodu (piem. JavaScript, CSS, xHTML). Es zinu, ka jūs droši vien domājat, ka esmu neobjektīvs, taču jums būs vienkārši jāizmēģina abas un jāizlemj, kā rīkoties daudz pūļu, ko vēlaties ieguldīt savā darbā, pēc tam izvēlieties piemērotus rīkus, lai tos sasniegtu galamērķis. 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 viegli lietojamu lietotāju. saskarne, ko daudzi cilvēki nobiedē, saprotot, cik daudz iespēju un konfigurāciju ir pieejams. Joomla ir platforma, kuras pamatā ir PHP un MySQL. Šī programmatūra ir atvērtā koda, kuru varat iegūt no http://www.joomla.org/download.html
Ja vēlaties iegūt padziļinātu Joomla rokasgrāmatu, izmēģiniet šo MakeUseOf rokasgrāmatu: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Joomla ceļvedis iesācējiemŠajā rokasgrāmatā ir sniegta informācija par visu, sākot no tā, kāpēc izvēlēties Joomla un kā to instalēt savā tīmekļa serverī, līdz tam, kā izveidot un pielāgot vietni atbilstoši savām 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īvos līdzekļus interfeiss, tostarp automātiski ģenerēta navigācijas struktūra, bez nepieciešamības zināt HTML vai apgūt citus rīkus. WordPress ir atvērtā pirmkoda programmatūra, ko izveidojuši tūkstošiem programmētāju visā pasaulē un kas ir nodota publiskajā domēnā, tāpēc jums nav jāmaksā, lai to izmantotu. WordPress ir tīmekļa lietojumprogramma, kas rakstīta PHP un MySQL un paredzēta darbam uz Linux serveriem: PHP ir tīmekļa 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 — tās visas ir arī atvērtas avots. WordPress līdz šim ir vispopulārākā SPS ar vairāk nekā 200 miljoniem vietņu visā pasaulē 2009. gada beigās.
Papildu lasīšana
- 11 populārākie HTML tagi, kas jāzina katram emuāru autoram un vietņu īpašniekam 11 populārākie HTML tagi, kas jāzina katram emuāru autoram un vietņu īpašniekamPasaules tīmeklis zina daudzas valodas un ir kodēts vairākās dažādās valodās. Tomēr vienīgā valoda, ko var atrast visā pasaulē un kas ir bijusi kopš tīmekļa lapu izgudrošanas, ir... Lasīt vairāk
- 5 jautras lietas, ko darīt tiešsaistē, izmantojot HTML5 5 jautras lietas, ko darīt tiešsaistē, izmantojot HTML5HTML5 turpina attīstīties, arvien vairāk vietņu pārejot uz jauno standartu, kas nodrošina multivides saturu tīmeklī, neizmantojot tādus spraudņus kā Adobe Flash. Vai tas ir uzspridzināts... Lasīt vairāk
- Kods tīmeklim, izmantojot šos rīkus tieši jūsu pārlūkprogrammā Izveidojiet to: 11 izcili Chrome paplašinājumi tīmekļa izstrādātājiemPārlūks Chrome ir lieliski piemērots tīmekļa izstrādātājiem tā paplašinājumu kopuma dēļ. Ja kādreiz plānojat izstrādāt vai kodēt vietni, šeit ir daži būtiski rīki, kas jums nekavējoties jāinstalē. Lasīt vairāk
Ceļvedis Publicēts: 2011. gada jūnijā
