Publicitate
Cuprins
§1. Introducere
§2–Noțiuni introductive cu xHTML
§3–Proiectare cu CSS
§4–Mai multe informații
1. Introducere: Ce este xHTML?
Bun venit în lumea XHTML - Limbajul de marcare hipertext extensibil – un limbaj de marcare (similar cu programarea) care permite oricui să construiască pagini web cu multe funcții diferite. În multe privințe, este limba principală a internetului.
Deci, de ce ne pasă?
Ei bine, nu ți-ai dorit vreodată să ai propriul tău site web? Sau să-ți faci propriul joc? Rolul acestui ghid este de a vă oferi un gust din această lume puternică. Dacă aveți vreo experiență anterioară de programare, atunci veți găsi acest lucru mai ușor, desigur, decât dacă tocmai vă începeți aventura de programare. Oricum, sper să explic asta, astfel încât chiar și un novice să poată înțelege.
Ne pasă de xHTML, deoarece este un punct de plecare puternic pentru a învăța elementele de bază ale web-ului. Site-urile de rețele sociale precum Facebook, MySpace și Twitter folosesc un alt limbaj de programare (pe partea de server). numit PHP, dar este o idee bună să înțelegeți elementele de bază înainte de a vă arunca cu capul înainte în programare lume. Acest ghid este despre elementele de bază.
Dacă doriți să aflați mai multe despre cum funcționează Internetul sau poate despre cum funcționează rețelele de computere cu toate acestea chestii tehnice sau chiar cum pot fi construite computerele, apoi încercați aceste ghiduri grozave de la prietenii dvs. la A te folosi de:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Cum să-ți construiești propriul computerEste foarte îmbucurător să-ți construiești propriul computer; precum și intimidant. Dar procesul în sine este de fapt destul de simplu. Vă vom prezenta tot ce trebuie să știți. Citeste mai mult
//www.makeuseof.com/tag/everything-need-know-home-networking/ Tot ce trebuie să știți despre rețelele de acasăConfigurarea unei rețele de acasă nu este atât de dificilă pe cât crezi că este. Citeste mai mult
//www.makeuseof.com/tag/guide-file-sharing-networks/ Ghidul MakeUseOf pentru rețelele de partajare a fișierelorTe-ai întrebat vreodată care sunt cele mai mari rețele de partajare a fișierelor? Care sunt diferențele dintre BitTorrent, Gnutella, eDonkey, Usenet etc.? Citeste mai mult
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Windows 7: Ghidul finalDacă vă este frică să faceți upgrade de la Vista sau XP pentru că simțiți că este complet diferit de ceea ce v-ați obișnuit, ar trebui să citiți acest nou ghid. Citeste mai mult
//www.makeuseof.com/tag/download-how-the-internet-works/ Cum funcționează internetulAcum putem accesa internetul de pe computerele noastre de acasă, de la birou, laptopuri și telefoanele noastre. Dar mulți oameni încă nu sunt pe deplin siguri ce este Internetul și cum funcționează cu adevărat. Citeste mai mult
2. Noțiuni introductive cu xHTML
În acest capitol veți învăța cum să creați și să personalizați site-uri web în multe moduri diferite, inclusiv cum să:
• Adăugați imagini în paginile web.
• Creați și utilizați hyperlinkuri pentru a naviga în paginile web.
• Configurați liste de informații utilizând puncte și altele.
• Creați tabele cu rânduri și coloane de date aleatorii și puteți controla formatarea tabelelor menționate.
• Creați și utilizați formulare cu care puteți avea de fapt o anumită interacțiune.
• Faceți paginile web accesibile pentru motoarele de căutare.
Toate acestea se vor face cu programare xHTML. Nu crezi? Citiți mai departe. Ai fi surprins cât de mult poți învăța dintr-un ghid atât de scurt.
Înainte de a intra în partea de „codare” a acestui ghid, veți avea nevoie de un software de utilizat, astfel încât să puteți edita, testa și, practic, să vă dezvoltați programele. Accesați www.dreamspark.com și obțineți unul dintre următoarele programe GRATUIT, presupunând că sunteți student:
• Microsoft Visual Studio 2010
• Expression Studio 4
Dacă nu sunteți student, puteți utiliza și Notepad++, de la care poți obține destul de ușor www.notepad-plus-plus.org
După ce obțineți unul dintre programe și îl instalați, puteți începe experiența xHTML.
Este posibil să utilizați un Mac sau Linux în loc de Windows; va trebui să găsiți un editor de text care funcționează pentru tine în acest caz. Încercați să găsiți unul care să vă arate numărul de linii și codul de culori pentru dvs.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad - Un editor de text ultra-ușor [Linux] Citeste mai mult
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - Un excelent editor de cod ușor pentru LinuxÎn mod surprinzător, Linux nu oferă atât de multe IDE-uri bune (Medii de dezvoltare integrate). Cred că acest lucru se datorează faptului că pe vremea aceea, majoritatea programatorilor Linux au scos vechiul Notepad (sau gedit în acest caz) și au început... Citeste mai mult
Dacă preferați să nu descărcați instrumente dedicate, puteți utiliza în continuare un editor de text precum Blocnotes sau Wordpad. Cu toate acestea, programele de mai sus sunt instrumente mult mai bune pentru testare și proiectare, precum și pentru a vă ajuta codarea dvs., deoarece vă solicită dacă faceți o greșeală sau dacă încercați să vă amintiți cuvântul corect pentru utilizare. Simplu este mai bine, nu? Eu personal folosesc Notepad++ și Microsoft Visual Studio, deși am auzit multe lucruri grozave despre Expression Studio 4. Va trebui să decideți ce vă place cel mai mult, dar toate funcționează bine.
NOTĂ: Pentru a testa un site web creat din Notepad sau Wordpad:
Cu fișierul deschis, faceți clic Fișier >> Salvare ca
La sfârșitul numelui fișierului tastați .html și faceți clic Salvați
Deschideți fișierul nou salvat (se va deschide în browserul dvs. de Internet implicit)
2.1 Cunoașterea „lumii”
Bine, iată începutul călătoriei. Să începem doar cu a pune ceva pe ecran pe această pagină web. Mai întâi va trebui să știi ce sunt. Codul XHTML folosește etichete de început și de sfârșit pentru a sorta ce se întâmplă cu fiecare element al paginii.
Iată un exemplu de etichetă de pornire:
Iată un exemplu de etichetă finală:
Vezi diferenta? Unul are numele elementului cuprins între paranteze ascuțite, iar celălalt este același, dar are o bară oblică înaintea numelui elementului.
IMPORTANT: Trebuie să închideți o etichetă după ce o deschideți la un moment dat din cod. De asemenea, etichetele trebuie să fie imbricate, adică nu puteți face următoarele:; ar trebui să fie. Vedeți cum se potrivesc etichetele una în cealaltă? Gândește-te la ele ca la cutii: nu poți pune ceva solid într-o cutie și jumătate.
Cel mai bun mod de a cunoaște cum să programezi este să o faci efectiv, deci suficientă teorie. Doar pentru un punct de referință, voi eticheta fiecare linie de cod cu un număr, astfel încât să pot explica rând cu linie ce se întâmplă.
În rândul 1 am precizat codul html și în rândul 5 l-am încheiat. În interiorul eticheta este
). Dacă îl deschideți într-un browser web, veți vedea următoarele pe ecran:
Dacă doriți să schimbați titlul paginii din punctul de vedere al browserului (ex. firstpage.html), atunci puteți adăuga cu ușurință următoarea linie de cod:
Acest lucru va face pagina dvs. web să arate mai profesională.
2.2 Pornind de la și lucrând în jos
În cele mai multe cazuri, în interiorul etichetă există o
si a .The este de obicei folosit pentru scripting în CSS (Secțiunea 3) și JavaScript (explicat într-un manual viitor), în timp ce este de obicei conținutul paginii.
Unele conținuturi pot fi modificate folosind scriptul din
, cu exceptia este de obicei conținutul care este neschimbabil pe pagină. Un exemplu ar fi o scurtă poveste despre site-ul pe care îl vizitați.Puteți face modificări la formatarea conținutului folosind CSS (Secțiunea 3) în
. Cu toate acestea, puteți face și modificări la formatarea în .Un set de etichete utilizate în mod obișnuit care sunt folosite în corp sunt fonturile de antet. Aceste fonturi de antet variază ca dimensiune și putere/îndrăzneală. Vedeți singuri mai jos:
2.3 Poza ta valorează cât o mie de cuvinte? – Imagini
Până acum, am vorbit doar despre text și despre ce poate face acesta pe un site web, dar sunt încă mai multe. Doriți să faceți site-ul dvs. să arate și mai atrăgător decât fonturile de lux? Încercați să obțineți niște imagini bune pentru ca site-ul dvs. să ofere publicului ceva la care să se uite. Aveți grijă totuși la legile drepturilor de autor; cel mai bine să vă faceți propriile fotografii dacă intenționați să vă puneți site-ul web pe internet.
S-ar putea să fie nevoie să utilizați Photoshop sau unele abilități de imagine digitală pentru a crea o imagine grozavă sau poate să vă îmbunătățiți propria imagine și să o faceți să arate și mai minunat. Încercați aceste ghiduri pentru câteva sfaturi și informații excelente:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Aflați editarea fotografiilor în Photoshop: obțineți elementele de bază în 1 orăPhotoshop este un program intimidant, dar cu doar o oră, puteți învăța toate elementele de bază. Luați o fotografie pe care doriți să o editați și să începem! Citeste mai mult
• //www.makeuseof.com/tag/guide-to-digital-photography/ Un ghid pentru începători pentru fotografia digitalăFotografia digitală este un hobby grozav, dar poate fi și intimidantă. Acest ghid pentru începători vă va spune tot ce trebuie să știți pentru a începe! Citeste mai mult
Cele mai populare formate de imagine sunt următoarele:
• GIF = Graphics Interchange Format
• JPEG = Grupul mixt de experți fotografici
• PNG = Grafică de rețea portabilă
Aruncă o privire la codul de mai jos și voi explica în continuare ce înseamnă; adică cum să adăugați imagini în pagina dvs. web.
După cum a fost predat în secțiunile anterioare, începem întotdeauna cu și co etichete. În continuare
După deschiderea paragrafului în rândul 9, aici sunt inserate imaginile pe site. Pentru a adăuga o imagine/imagine ar trebui să utilizați a începe cu. Apoi, trebuie să sugerați unde se află fișierul. De obicei, veți încerca să aveți acest fișier în același folder cu fișierele site-ului web, altfel va trebui să introduceți calea folderului în care există. In cazul de mai sus am folosit
. Aceasta înseamnă că sursa (src) a imaginii se află în același folder și numele acelui fișier imagine este Imagine.jpg. Ușor nu?
Nu trebuie să adăugați nimic mai mult decât pentru a crea o imagine cu o alt proprietate, dar îi puteți adăuga proprietăți pentru a-i face unele modificări.
De asemenea cunoscut ca si text alternativ, această valoare a proprietății este afișată când treceți mouse-ul peste imagine.
Puteți observa că în rândul 10 am început eticheta cu și a încheiat-o cu />. Acesta este un alt mod de a deschide și închide etichetele. Acesta este modul obișnuit de a crea imagini, deoarece puteți alege diferitele proprietăți ale imaginii, cum ar fi lățimea și înălțimea, așa cum se arată în exemplul de mai sus.
În rândurile 11 și 12 este inserată o altă imagine, dar se folosește cealaltă metodă pentru deschiderea și închiderea etichetelor. Linia 10 creează imaginea într-un mod mult mai ordonat; utilizați asta mai degrabă decât metoda din rândurile 11 și 12.
2.4 Hyperlinkuri unde pot ajunge?
2.4.1 Deplasarea în „întreaga lume”
Vrei să arăți prietenilor tăi câteva site-uri interesante de pe site-ul tău, dar nu știi cum? Ați ajuns la locul potrivit, citiți mai departe...
Aruncă o privire la codul de mai jos și vezi dacă poți ghici ce fac înainte să-l explic.
Așa este, creez hyperlinkuri către câteva site-uri grozave și utile. Practic, pentru a face hyperlink către o anumită pagină web care are o adresă web, pur și simplu utilizați sintaxa de mai jos:
[ceea ce vrei să hyperlink]
Nu pare foarte dificil, nu? Ați putea destul de ușor să puneți text acolo, cum ar fi exemplul de cod de mai sus. Cu toate acestea, nu există niciun motiv pentru care nu ați putea folosi altceva ca o imagine. Doar pentru câteva informații suplimentare: un URL este un Uniform Resource Locator, practic adresa web.
2.4.2 Imaginile vă amintesc unde ați fost și vă duc din nou acolo
Iată un exemplu de utilizare a unei imagini ca hyperlink:
Sunt sigur că, dacă ați citit părțile anterioare ale acestei secțiuni pe care le eliberați, aceasta este pur și simplu amestecarea creării de imagini și hyperlinkuri. Sintaxa este setată să aibă hyperlinkul în exterior și imaginea în interior, plasând un hyperlink al imaginii inserate.
2.4.3 Aveți e-mail – Hyperlink la o adresă de e-mail
Aceasta este pur și simplu o repetare a ultimei părți, dar dacă nu ați acordat atât de multă atenție, aruncați o privire la codul de mai jos:
În loc să utilizați o adresă URL (de ex. http://www.something.com) aici folosesc o adresă de e-mail care implică punerea următoarei sintaxe după semnul egal:
„mailto:[adresa ta de e-mail]”
Linia 10 este exemplul de bază al acestui concept. Deci cui vei trimite e-mail? Ghostbusters!
2.4.4 Deplasarea în lumea ta – Hyperlinking intern
Acum puteți vedea cum v-ați deplasa prin propriul site web. Acest lucru se face pur și simplu utilizând numele fișierului ca URL. Prin urmare, puteți avea o configurație de site-uri web, așa cum este prezentat în diagrama de mai jos. Sintaxa pe care ați folosi-o ar fi cam așa:
2.5 Esti special? Aceste personaje sunt…
Când introduceți informații care vor apărea pe site ca conținut, atunci este posibil să aveți nevoie introduceți ceva de genul unui simbol, cum ar fi simbolul dreptului de autor: © sau poate mai puțin sau mai mare decât simbol. Dar, din moment ce simbolurile normale sunt folosite de sintaxa de codare, atunci trebuia să existe o altă modalitate de a trece peste acest mic obstacol, iar soluția a fost utilizarea unui ampersand (&) și apoi un cod scurt pentru a spune computerului ce simbol să pune înăuntru. Mai jos este un tabel cu câteva exemple de caractere speciale din codificare:
De exemplu ai putea spune:
Există < șase rânduri în tabelul de mai sus, dar > 2 rânduri
Există < 6 rânduri în tabelul de mai sus, dar > 2 rânduri
2.6 Liste, liste și mai multe liste
În regulă, acum va trebui să organizăm câteva lucruri, cum ar fi o listă de cumpărături. Există două tipuri de liste. Ei sunt:
• Listă ordonată (numere, alfabete, cifre romane)
• Listă neordonată (marcatori)
Pentru o listă ordonată, ați folosi următoarele etichete =
Pentru o listă neordonată, ați folosi următoarele etichete =
De exemplu:
În exemplul de mai sus am inclus atât tipuri de liste neordonate, cât și ordonate. Dar ai observat ce am mai făcut? Am inclus și o tehnică numită Liste imbricate. Aceste liste imbricate pot fi folosite pentru a reprezenta relații ierarhice, cum ar fi lista de ingrediente din Obțineți pasul Ingrediente din rețeta de mai sus.
Puteți vedea că am început întreaga listă ca o listă ordonată în rândul 10 și am terminat-o în rândul 23. Între ai vedea și etichete pe care le-am folosit. Acestea denotă Listează articole. Elementele din listă sunt cuvintele care apar, cum ar fi în rândul 21:
Dacă doriți să treceți la următorul nivel ierarhic de puncte sau numere, atunci cuib în interiorul lor astfel:
2.7 Tabele... nu, nu matematică
Este asta la fel de dificil ca și tabelele tale de înmulțire? Bineînțeles că nu, dacă procedați corect. Dacă abia începi cu acest concept și presupun că ești, atunci cel mai bine este de obicei să desenezi tabelul pe care vrei să-l faci pe o bucată de hârtie, așa cum o am mai jos:
Acum uită-te la asta în codul de mai jos:
Acum amestecați-le împreună, iar afișajul de mai jos ar trebui să vă ajute să înțelegeți cum este structurat tabelul:
A
și
aldine primul și, respectiv, ultimul rând pentru a atrage mai multă atenție asupra acelor părți ale tabelului. Majoritatea oamenilor s-ar uita mai întâi la totalul din subsolul tabelului, nu?2.8 Formulare digitale (pentru pixuri departe)
Când navigați pe net, va trebui să interacționați cu paginile web pe care le întâlniți. De exemplu, la www.makeuseof.com ar trebui să introduceți adresa dvs. de e-mail, așa cum este încercuită mai jos, pentru a abonați-vă la buletinul informativ și la actualizările zilnice de la MakeUseOf. După ce ați introdus adresa dvs. de e-mail, dvs ar apăsa A te alatura și aceasta ar trimite informațiile (e-mailul dvs.) din caseta de text de lângă buton fie la o bază de date, fie la o altă adresă de e-mail. Forme sunt folosite pentru a face acest lucru, ceea ce veți învăța în acest capitol.
Mai jos este un formular care este folosit pentru a introduce doar numele dvs. și faceți clic pe oricare Trimite sau clar:
Iată codul din culise, pe care îl voi explica mai detaliat în scurt timp:
În primul rând, cel mai important lucru din scriptul de mai sus este linia 10. Acesta este începutul formularului. Metoda este de obicei fie post sau obține. Destul de explicit de la sine, dar post trimite informațiile undeva pentru a face o înregistrare, cum ar fi o adresă de e-mail sau o bază de date. De exemplu: postarea unei întrebări pe MakeUseOf Answers. obține, pe de altă parte, trimite informațiile pe care le-ați furnizat și returnează cu informații de feedback, cum ar fi un Motor de căutare, trimițând cuvintele cheie de căutare și revenind cu rezultatele.
Blocul de codificare de mai sus este un exemplu de formular de postare prin care ați introduce adresa dvs. de e-mail și va fi trimis la proprietatea ascunsă cu o adresă de e-mail după ce faceți clic pe butonul Trimiteți. The
Rândurile 22 – 25 plasează butoanele Trimitere și Resetare/Ștergere pe pagină sub caseta de text. The Resetați butonul șterge pur și simplu orice text introdus în caseta de text sau casetele din acel formular. The Trimite butonul urmează instrucțiunile din părțile ascunse ale formularului care sunt create în rândurile 14 – 18. Tipul ascuns ar presupune de obicei pentru ceva automat sau o parte din altceva care este folosit în forma curentă. În acest caz, acesta din urmă dă posted informații o destinație, în acest caz [email protected], cu subiectul setat, în aceasta caz „Abonare e-mail”, apoi vă redirecționează către o altă pagină, în acest caz pagina principală sau „index.html”.
2.9 meta ce? De ce?
Te-ai întrebat vreodată cum găsesc motoarele de căutare site-uri web? Ei bine, practic, asta este ceea ce folosesc: meta elemente. Motoarele de căutare, de obicei, catalogează site-urile urmând link-uri către paginile de pe site-urile pe care le găsesc. Aceste meta elemente au informații despre pagina de pe ele. Aruncă o privire la următorul extras dintr-un cod pentru un exemplu:
După cum puteți vedea mai sus, meta informațiile merg în
3. Proiectați cu CSS
De cele mai multe ori, oamenilor care se uită la astfel de ghiduri se întâmplă să le placă jocurile video. Cu toate acestea, CSS nu este Counter Strike Source și nici nu este deloc un First Person Shooter (FPS). CSS este o tehnologie care funcționează cu xHTML și reprezintă Cascading Style Scălci. xHTML este destul de plictisitor în sine, dar dacă adăugați o porție corectă de CSS, formatarea și prezentarea creației dvs. sunt mult mai interesante. Autorii pot face modificări elementelor dintr-o pagină web, cum ar fi fonturi, spațiere, culori; aceasta se face separat de structura documentului (cap, corp etc.; acest lucru va fi explicat în capitolele ulterioare). xHTML a fost de fapt conceput pentru a specifica conținutul și structura unui document. Nu e ca și cum xHTML nu ar putea aduce modificări formatării conținutului. Cu toate acestea, această configurație este mult mai benefică, deoarece poate fi controlată dintr-un singur loc, dacă este necesar. De exemplu, dacă formatul unui site web este determinat în întregime de o foaie de stil atașată, un designer web poate pune pur și simplu o altă foaie de stil pentru a schimba puternic prezentarea site-ului web.
3.1 Stiluri de dans inline
După cum am menționat mai sus, această secțiune se referă la formatare și stiluri. Deoarece există multe modalități de a schimba stilul conținutului și paginii dvs., m-am gândit că ar fi bine să începeți cu cea mai simplă tehnică, care este Stiluri inline. Acest lucru se realizează prin plasarea codului în secțiunea de proprietate a unei file care cuprinde conținutul. Asa:
Sună prea greu? Hai sa-ti dau un exemplu:
Notă: Culoarea este scrisă culoare atunci când utilizați acest cod, deoarece a fost creat undeva nu la fel de cool ca Australia sau Canada; Sper sa nu te deranjeze prea tare.
Informațiile cu caractere aldine din exemplul de mai sus sunt formatarea care este procesată pe conținutul cuprins în
etichetă. Pentru o listă de coduri hexazecimale pentru diferite culori, pur și simplu căutați pe Google sau utilizați acest site: http://html-color- codes.com/
3.2 Foi de stil încorporate (Cheat Sheets sunt câștigătoare)
Utilizarea stilurilor inline din secțiunea anterioară poate fi o durere dacă aveți un site foarte mare. Dar dacă doriți să folosiți aceleași stiluri din nou și din nou, atunci de ce să nu folosiți un Foaie de stil încorporată? Această alternativă vă permite să vă creați propriile stiluri în
eticheta codului și apoi vă referiți la ele în cod atunci când introduceți conținut în pagina dvs. Prea complicat? Iată un exemplu:
Vedeți cum textul își schimbă culoarea, dimensiunea sau formatul în funcție de foaia de stil din partea de sus? Acest lucru nu este foarte greu de înțeles, nu?
În rândul 7, unde introducem începutul
Linia 16 folosește .xtra clasa care a fost făcută mai devreme. Modul în care funcționează este că adaugă la xtra clasa la orice stil pe care este deschisă, prin care suprascrie orice proprietăți pe care xtra utilizări de clasă. De exemplu: dacă un stil are dimensiunea fontului de 20 pt și este culoarea verde și este pusă peste el o clasă care are un dimensiune diferită a fontului, atunci noua dimensiune a fontului o va înlocui pe cea veche, dar vechea culoare verde va continua asa cum este.
3.3 Stiluri în război (stiluri conflictuale)
Există trei niveluri de stiluri și acestea sunt:
• Utilizator (vizionând site-ul web)
• Autor (al site-ului web)
• Agent utilizator (browser)
Stilurile se îmbină în așa fel încât să creeze cea mai bună configurație posibilă din poziția utilizatorului. Următorul grafic arată ierarhia celor trei niveluri:
3.4 Foi de stil de dincolo (externe)
Nu crezi că ar fi enervant să scrii mereu aceeași foaie de stil în fiecare fișier nou de codare? Exista o solutie: Foi de stil externe. Puteți crea un alt fișier cu scopul de a-l folosi pentru formatare; e o ".css” dosar. Pentru a-l utiliza într-un alt fișier, trebuie doar să tastați următorul extras:
A inlocui nume de fișier cu numele fișierului dvs. CSS și iată-ne, sunt legate. Asigurați-vă că fișierul dvs. CSS se află în același folder cu fișierul(ele) conectat(e).
Exemplu de fișier CSS:
Înainte de a continua, am omis să menționez ce fac. Mai sus veți vedea în ultimul rând că am pus „ul ul { font-size: .8em; }” și asta înseamnă că dimensiunea fontului va fi schimbată la 0,8 sau 80% din dimensiunea normală pe care utilizatorul dorește să o folosească folosind propria foaie de stil încărcată în browser. Majoritatea oamenilor nu folosesc o foaie de stil definită de utilizator, așa că să nu ne facem griji pentru acest lucru.
3.5 Elemente de poziționare (unde urmează?)
Când pui o imagine pe o pagină web, nu vrei să ajungă oriunde. Nu ai vrea să ai un cuvânt de spus în asta? Ei bine, așa faci, e de fapt un exemplu și îl voi explica în scurt timp:
În rândurile de la 9 la 13 veți observa că este o clasă cu ID ca fgpic și are câteva proprietăți folosite în el. The poziţie proprietatea este setată la absolut ceea ce înseamnă că indiferent de modul în care utilizatorul o schimbă, imaginea va rămâne acolo unde (autorul) o plasează cu codul său. The top și stânga proprietățile desemnează un punct în care elementul (de ex. imagine/text) va fi plasat. The z-index proprietatea este un instrument foarte puternic, deoarece setează nivelul de stivuire, așa cum se arată în captura de ecran de mai jos:
Vedeți cum imaginea de fundal este în spate cu valoarea z-index de 1 și textul este în față cu valoarea z-index de 3, în timp ce imaginea din prim-plan este în mijloc cu o valoare z-index de 2. O face să arate destul de bine de fapt dacă îți joci cărțile corect
3.6 Ține cont de împrejurimile (fondul)
Site-urile web arată bine cu fundaluri, nu-i așa? Nu ar fi chiar plictisitor dacă toate site-urile web ar avea doar un fundal alb sau negru? De ce să nu pui o poză acolo și să schimbi puțin culoarea? Există câteva proprietăți pe care le puteți folosi pentru a face ca fundalul paginii dvs. să iasă în evidență puțin mai mult și pentru a oferi paginii un pic de strălucire. Aruncați o privire la următorul cod și vedeți dacă puteți afla ce fac proprietățile evidențiate:
Ai inteles ce face? Practic, imaginea de fundal este ceea ce vom folosi în fundal, calea imaginii merge între paranteze/paranteze astfel > url(AICI). S-ar putea să vă gândiți la acest lucru ca având valoarea z-index 0, deoarece este întotdeauna în partea din spate a paginii. Poziția de fundal a imaginii a fost setată în stânga jos, destul de explicit, nu? În continuare, imaginea de fundal a fost repetată pe axa x a paginii (repeat-x) și nu numai asta, dar este fixată în partea de jos a ferestrei (atașament de fundal). În cele din urmă, culoarea a fost setată aleatoriu să fie în principal roșu. Aruncă o privire mai jos pentru rezultat:
3.7 Cât de mare crezi? (dimensiunile elementelor/limitele textului)
Dacă crezi că asta este tot ce are de oferit CSS, te înșeli amarnic. Regulile CSS pot specifica dimensiunile reale ale fiecărui element de pagină. Să luăm exemplul unei casete de text. Doriți să introduceți un text care nu trece până la capăt pe ecran sau poate să creați o casetă de text care să poată fi derulată fără a muta pagina? Aici ar trebui să fii atunci. Vedeți captura de ecran de mai jos pentru ceea ce tocmai am descris:
Acum să aruncăm o privire la codul din culise:
Doar o notă minoră: rândul 6 adaugă un chenar marginal în partea de jos a fiecărei casete de text. Destul de misto, nu? Dar mai multe despre granițe în secțiunea următoare.
3.8 Ceea ce se întâmplă în jur vine în jur (granițe)
Nu cred că acest lucru are nevoie de o explicație, dar o voi da oricum. Practic, puteți pune margini în jurul oricăror, așa că haideți să vedem cum să faceți acest lucru. Deci, iată codul:
Iată ce face codul, practic un sortiment de chenare care înconjoară numele/numele tipului de chenar utilizat. Țineți cont de faptul că opusul canelurii este creasta și opusul insertului este începutul.
3.9 Elemente plutitoare și curgătoare
De obicei, este destul de plictisitor doar să vezi titlul, apoi textul, apoi titlul și apoi textul. În timp ce nu îl faci să arate puțin mai frumos? Există o metodă care poate fi folosită numită plutind, iar acum am să vă arăt cum să faceți exact asta. Flotarea vă permite să mutați un element într-o parte a ecranului, în timp ce alt conținut din document curge apoi în jurul elementului flotant. Elementul flotant poate fi o imagine sau un titlu sau chiar un alt bloc de text. Acum să aruncăm o privire la cum arată:
Destul de bun pentru destul de multe situații, acum acesta este codul care construiește acest design:
Nu este uimitor ce poți face dacă găsești metoda potrivită?
3.10 Nu derulați meniul – exemplu
Dacă te gândești să creezi un site web, cel mai probabil vei avea nevoie de un meniu, nu? Ei bine, acesta ar putea fi locul potrivit în care să mergi dacă vrei ceva care să nu fie doar acolo. Elementele dinamice fac paginile web să arate mai bine și oferă o senzație mai bună întregului site.
Unul dintre tipurile mele preferate de meniuri trebuie să fie a meniu derulant deci acum să aruncăm o privire la cum să facem unul folosind CSS. Consultați codul de mai jos:
Știu că la început pare puțin descurajantă, dar dacă ai răbdare și citești mai departe, vei înțelege destul de curând.
Rândul 15 spune: când am un <div> eticheta cu clasa = “meniul” și șoarecele este planarepeste ea afişa cel bloceste înăuntrul ei.
Rândurile 16-21 spun: când am un <div> eticheta cu clasa = “meniul” și un <A> etichetați apoi setați aceste formate. Rețineți că aceste linii aleg formatul pentru butoanele de meniu ascunse. Liniile 9-14 stabilesc formatele pentru butonul de meniu pentru a derula pentru a afișa restul meniului.
Rândul 22 spune: când am un <div> eticheta cu clasa = “meniul” și un <A> tag si eu planare peste unul dintre aceste elemente apoi setați culoare de fundal la un verde diferit.
Aruncă o privire mai jos pentru produsul final:
3.11 Foi de stil pentru utilizator (sunteți centrul universului)
Utilizatorii își pot defini propriile lor foi de stil utilizator pentru a face paginile să arate așa cum doresc. Doar pentru a distinge între Foi de stil utilizator și Foi de stil pentru autor. Stilurile de utilizator sunt foi de stil externe pe care utilizatorii le pot crea ei înșiși, care sunt pur și simplu realizate ca fișiere CSS, fără cea mai mare parte a codării. Aici vă arăt unul:
Nu a fost extrem de simplu?
Dacă doriți să știți cum să configurați acest lucru în propriul browser, mergeți pur și simplu la Instrumente >> Opțiuni Internet >> General >> Accesibilitate >> Apoi definiți-vă propriul fișier Foaia de stil al autorului este definită în interiorul codului intermediar .
4. Mai multe informatii
4.1 De ce să folosiți xHTML și co. peste design și alte aplicații?
Înainte de a privi acest lucru ca un fapt sau ceva asemănător cu acesta, ar trebui să știți că acesta este pur și simplu un punct de vedere, în funcție de locul în care vă aflați și de cât de tehnic puteți fi. Îmi place să folosesc limbaje de programare pentru a-mi finaliza proiectele, deoarece înseamnă că poți înțelege ce se află în spatele design-urilor, în timp ce folosesc aplicații de design precum Adobe Dreamweaver și Microsoft FrontPage vă permit să vă creați site-ul web folosind doar instrumentele disponibile în meniuri. Prin urmare, aplicațiile de design sunt limitate la opțiunea de meniu oferită. În concluzie, este complet evident că utilizarea limbajelor de programare ar construi site-ul web sau produsul finalizat ceva mult mai atrăgător, deoarece funcționalitatea sa este limitată doar de abilitatea programatorului cu limbajul desemnat (de exemplu. JavaScript, CSS, xHTML). Știu că probabil crezi că sunt părtinitoare, dar va trebui să le încerci pe ambele și să decizi cum mult efort pe care doriți să-l depuneți în munca dvs., apoi alegeți instrumentele potrivite pentru a ajunge la dvs destinaţie. S-ar putea chiar să alegeți să folosiți ambele, deoarece atât Dreamweaver, cât și FrontPage au o „vizualizare de codare” și o „vizualizare de proiectare”.
Există și alte moduri în care puteți crea site-uri web, cum ar fi utilizarea Joomla și WordPress.
4.2 Joomla
Joomla este un sistem de management al conținutului (CMS) excelent, cu multă flexibilitate și cu un utilizator ușor de utilizat interfață de care mulți oameni sunt intimidați atunci când își dau seama câte opțiuni și configurații sunt disponibil. Joomla este o platformă bazată pe PHP și MySQL. Acest software este open-source din care puteți obține http://www.joomla.org/download.html
Dacă doriți un ghid aprofundat despre Joomla, încercați acest ghid de la MakeUseOf: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Ghidul pentru începători pentru JoomlaAcest ghid vă va ghida prin toate, de la motivul pentru care să alegeți Joomla și cum să îl instalați pe serverul dvs. web până la cum să vă proiectați și să personalizați site-ul după bunul plac. Citeste mai mult
4.3 WordPress
WordPress este un sistem de gestionare a conținutului (CMS) care permite utilizatorilor să creeze și să întrețină un site web printr-un sistem administrativ interfață, inclusiv o structură de navigare generată automat, fără a fi nevoie să cunoașteți HTML sau să învățați orice alt instrument. WordPress este o bucată de software open source creată de mii de programatori din întreaga lume și pusă în domeniul public, așa că nu trebuie să plătiți pentru a-l folosi. WordPress este o aplicație web, scrisă în PHP și MySQL, concepută pentru a rula pe servere Linux: PHP este un limbaj de programare pentru web aplicații, MySQL este o bază de date relațională (cum ar fi MS Access), iar Linux este un sistem de operare pentru servere web - toate acestea sunt, de asemenea, deschise sursă. WordPress este, de departe, cel mai popular CMS cu peste 200 de milioane de site-uri în întreaga lume, la sfârșitul anului 2009.
Lectură suplimentară
- Top 11 etichete HTML pe care fiecare blogger și proprietar de site trebuie să le cunoască Top 11 etichete HTML pe care fiecare blogger și proprietar de site trebuie să le cunoascăWorld Wide Web cunoaște multe limbi și este codificat în mai multe limbi diferite. Cu toate acestea, singura limbă, care poate fi găsită peste tot și există de la inventarea paginilor web, este... Citeste mai mult
- 5 lucruri distractive de făcut online cu HTML5 5 lucruri distractive de făcut online cu HTML5HTML5 continuă să crească din ce în ce mai puternic, mai multe site-uri web trecând la noul standard care aduce conținut multimedia pe Web fără a fi nevoie de pluginuri precum Adobe Flash. E nenorocit... Citeste mai mult
- Cod pentru web cu aceste instrumente chiar în browser Construiește-l: 11 extensii Chrome strălucitoare pentru dezvoltatorii webChrome este excelent pentru dezvoltatorii web datorită grupului său de extensii. Dacă intenționați vreodată să proiectați sau să codificați un site web, iată câteva instrumente esențiale pe care ar trebui să le instalați imediat. Citeste mai mult
Ghid publicat: iunie 2011
