Publicitate
Cuprins
§1. Introducere
§2 - Noțiuni introductive cu xHTML
§3 - Proiectare cu CSS
§4 – Mai multe informații
1. Introducere: Ce este xHTML?
Bine ați venit în lumea XHTML - Limbă 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 feluri, este limba principală a Internetului.
Deci, de ce ne pasă?
Ei bine, nu ai dorit vreodată să ai propriul site web? Sau creează-ți propriul joc? Rolul acestui ghid este de a vă oferi un gust al acestei lumi puternice. Dacă aveți vreo experiență de programare anterioară, veți găsi acest lucru mai ușor, desigur, decât dacă tocmai începeți aventura dvs. de programare. Oricum, sper să explic acest lucru, 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. Site-urile de rețele sociale precum Facebook, MySpace și Twitter folosesc un alt limbaj de programare (din partea serverului) numit PHP, dar este o idee bună să înțelegeți elementele de bază înainte de a vă arunca cu capul î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 cum funcționează rețelele de calculatoare cu toate acestea chestii tehnice sau chiar cum pot fi construite computerele, apoi încercați aceste ghiduri grozave de la prietenii dvs. la A se folosi de:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Cum să-ți construiești propriul computerEste foarte îmbucurător să vă construiți propriul computer; precum și intimidarea. Dar procesul în sine este de fapt destul de simplu. Te vom parcurge prin tot ceea ce trebuie să știi. Citeste mai mult
//www.makeuseof.com/tag/everything-need-know-home-networking/ Tot ce trebuie să știți despre rețelele de domiciliuConfigurarea unei rețele de acasă nu este atât de grea pe cât credeți. Citeste mai mult
//www.makeuseof.com/tag/guide-file-sharing-networks/ Ghidul MakeUseOf pentru rețelele de partajare a fișierelorV-ați întrebat vreodată care sunt cele mai mari rețele de partajare a fișierelor acolo? 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: Ultimate GuideDacă vă este frică să faceți upgrade de la Vista sau XP, deoarece considerați că este complet diferit de ceea ce obișnuiți, 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 calculatoarele noastre de acasă, birou, laptopuri și telefoane. Dar mulți oameni încă nu sunt în totalitate siguri care 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 mai multe moduri diferite, inclusiv învățarea cum să:
• Adăugați imagini la paginile web.
• Creați și utilizați hyperlinkuri pentru a naviga în paginile web.
• Configurați liste de informații folosind puncte punct ș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 forme cu care puteți avea o interacțiune reală.
• Faceți paginile web accesibile motoarelor 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 efectiv în partea de „codare” a acestui ghid, veți avea nevoie de niște programe software pe care să le utilizați, astfel încât să puteți edita, testa și, în general, 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, de asemenea Notepad ++, de la care puteț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 dvs. xHTML.
Este posibil să utilizați un Mac sau Linux în loc de Windows; va trebui să găsiți o editor de text asta funcționează pentru tine în acest caz. Încercați să găsiți unul care vă arată 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 mare editor de coduri ușoare pentru LinuxÎn mod surprinzător, Linux nu oferă atât de multe IDE bune (Integrated Development Environments). Cred că acest lucru se datorează faptului că, în acea vreme, majoritatea programatorilor Linux au scos un notepad vechi (sau gedit în acest caz) și au început ... Citeste mai mult
Dacă nu doriți mai degrabă să descărcați instrumente dedicate, puteți folosi totuși un editor de text Notepad 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 utilizare. Simplu este mai bun, 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 bine, dar toate funcționează bine.
NOTĂ: Pentru a testa un site web creat din Notepad sau Wordpad:
Cu fișierul deschis, faceți clic File >> Save As
La sfârșitul tipului de fișier nume.html și faceți clic pe Salvați
Deschideți fișierul recent salvat (se va deschide în browserul dvs. implicit de Internet)
2.1 Cunoașterea „lumii”
Bine, iată începutul călătoriei. Să începem doar să punem ceva pe ecran pe această pagină web. Mai întâi va trebui să știți ce sunteți. Codul XHTML folosește etichete de început și de final pentru a sorta ce se întâmplă cu fiecare element al paginii.
Iată un exemplu de etichetă de început:
Iată un exemplu de etichetă finală:
Vezi diferenta? Unul are numele elementului inclus în paranteze și celălalt este același, dar are o zgură înainte de numele elementului.
IMPORTANT: Trebuie să închideți o etichetă după ce o deschideți la un moment dat în cod. De asemenea, etichetele trebuie să fie cuibare, adică nu înseamnă că nu puteți face următoarele:; ar trebui să fie. Vedeți cum se potrivesc etichetele între ele? Gândiți-vă la ele ca la cutii: nu puteți pune ceva solid într-o cutie și jumătate.
Cel mai bun mod de a cunoaște modul de programare este efectiv făcând-o, 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 linie cu linie ce se întâmplă.
În linia 1 am menționat codul html și în linia 5 l-am încheiat. În interiorul eticheta este
). Dacă deschideți acest lucru într-un browser web, veți vedea următoarele pe ecran.
Dacă doriți să modificați titlul paginii din punctul de vedere al browserului (de ex. firstpage.html) apoi puteți adăuga ușor în următoarea linie de cod:
Acest lucru va face ca pagina dvs. web să pară mai profesională.
2.2 Pornind de la și de lucru în jos
În cele mai multe cazuri, în interiorul tag there is a
și a .este de obicei utilizat pentru scripturi în CSS (Secțiunea 3) și JavaScript (explicat într-un manual care urmează), în timp ce este de obicei conținutul paginii.
Unele conținut pot fi modificate folosind scripturile din
, cu exceptia este de obicei conținutul care nu poate fi schimbat pe pagină. Un exemplu ar fi un scurt articol despre site-ul web pe care îl vizitați.Puteți face modificări la formatarea conținutului folosind CSS (secțiunea 3) din
. Cu toate acestea, puteți face modificări și la formatarea din .Un set de etichete utilizate frecvent în corp sunt fonturile antet. Aceste fonturi de antet au dimensiuni și rezistență / îndrăzneală. Vedeți doar mai jos:
2.3 Valoarea ta valorează o mie de cuvinte? - Imagini
Până acum, am vorbit doar despre text și despre ce se poate face pe un site web, dar există încă mai multe. Doriți să faceți site-ul dvs. web să pară și mai ispititor decât fonturi fanteziste? Încercați să obțineți câteva imagini bune pentru a vă face site-ul să oferi într-adevăr audienței ceva de privit. Aveți însă grijă la legile privind drepturile de autor; cel mai bine să vă fotografiați dacă intenționați să puneți site-ul pe internet.
Este posibil să fie nevoie să utilizați Photoshop sau unele abilități de imagistică digitală pentru a crea o imagine excelentă sau poate îmbunătăți propria imagine și pentru a face să pară ș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: eliminați elementele de bază în 1 orăPhotoshop este un program de intimidare, dar cu doar o oră, puteți afla toate elementele de bază. Realizează o fotografie pe care vrei să o editezi și hai să începem! Citeste mai mult
• //www.makeuseof.com/tag/guide-to-digital-photography/ Ghid pentru începători pentru fotografie digitalăFotografia digitală este un hobby minunat, 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 = Format de schimb de grafică
• JPEG = Grupul de experți fotografi în comun
• PNG = grafică de rețea portabilă
Aruncați o privire la codul de mai jos și vă voi explica în continuare ce înseamnă; adică cum să adăugați imagini în pagina dvs. web.
Așa cum a fost învățat în secțiunile anterioare, începem întotdeauna cu și etichete co. În continuare
După ce paragraful a fost deschis în linia 9, acesta este locul în care imaginile sunt introduse pe site-ul web. Pentru a adăuga o imagine / imagine pe care ar trebui să o utilizați a începe cu. În continuare, trebuie să sugerezi unde se află fișierul. De obicei, încercați 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ă. În cazul de mai sus am folosit
. Aceasta înseamnă că sursa (Src) din imagine se află în același dosar și numele fișierului respectiv este imagine.jpg. Ușor nu?
Nu trebuie să adăugați nimic mai mult decât pentru a crea o imagine cu un Alt proprietate, dar puteți adăuga proprietăți la ea pentru a face unele modificări.
De asemenea cunoscut ca si alt text, această valoare a proprietății este afișată când treceți mouse-ul peste imagine.
Este posibil să observați că la linia 10 am început eticheta și a încheiat-o cu />. Acesta este un alt mod de deschidere și închidere a etichetelor. Acesta este modul obișnuit de a crea imagini, deoarece puteți alege diferite proprietăți ale imaginii, cum ar fi lățimea și înălțimea, așa cum se arată în exemplul de mai sus.
În liniile 11 și 12 este introdusă o altă imagine, dar aceasta folosește cealaltă metodă pentru deschiderea și închiderea etichetelor. Linia 10 creează imaginea într-o manieră mult mai simplă; folosiți asta mai degrabă decât metoda din liniile 11 și 12.
2.4 Hiperlink-uri unde pot merge?
2.4.1 Deplasarea „lumii”
Doriți să le arătați prietenilor câteva site-uri interesante pe site-ul dvs., dar nu știți cum? Ați venit la locul potrivit, citiți mai departe ...
Aruncați o privire la codul de mai jos și vedeți dacă puteți ghici ce fac înainte de a-l explica.
Așa este, creez hyperlink-uri către anumite site-uri excelente și utile. Practic pentru a face o legătură către o anumită pagină web care are o adresă web, utilizați pur și simplu sintaxa de mai jos:
[ce vrei să hiperligă]
Nu vi se pare foarte dificil? Puteți introduce cu ușurință doar text acolo, cum ar fi exemplul de mai sus. Cu toate acestea, nu există niciun motiv pentru care să nu poți folosi altceva ca o imagine. Doar pentru un pic de informații suplimentare: o adresă URL este un localizator de resurse uniforme, practic adresa web.
2.4.2 Imaginile vă amintesc de locul în care ați fost și vă vor duce 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, veți elibera că aceasta este doar o combinație de creare de imagini și hyperlink-uri. Sintaxa este setată să aibă hiperligarea la exterior și imaginea la interior, ceea ce plasează un hyperlink al imaginii inserate.
2.4.3 Ai primit e-mail - Hiperlink la o adresă de e-mail
Aceasta este pur și simplu o repetare a ultimei părți, dar dacă nu ați fost atent atât de mult, atunci aruncați o privire la codul de mai jos:
În loc să folosești o adresă URL (de ex. http://www.something.com) aici folosesc o adresă de e-mail care implică introducerea următoarei sintaxe după semnul egal:
„Mailto: [youremailaddress]“
Linia 10 este exemplul de bază al acestui concept. Deci, cui vei trimite e-mailul? Ghostbusters!
2.4.4 Trecerea în jurul lumii - Hyperlinking intern
Acum puteți vedea cum vă veți deplasa pe site-ul dvs. Acest lucru se realizează pur și simplu folosind numele de fișier ca adresă URL. Prin urmare, puteți avea un set de site-uri web, cum este prezentat în diagrama de mai jos. Sintaxa pe care o folosiți ar merge astfel:
2.5 Ești special? Aceste personaje sunt ...
Când introduceți informații care vor apărea pe site-ul web, cum ar fi conținutul, ar putea fi necesar introduceți ceva ca un 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 a trebuit să existe o altă modalitate de a trece mai puțin obstacol, iar soluția folosea un ampersand (&) și apoi un cod scurt după aceea pentru a spune computerului ce simbol să pune in. Mai jos este un tabel cu câteva exemple de caractere speciale din codare:
De exemplu, ai putea spune:
Există 2 rânduri
Există <6 rânduri în tabelul de mai sus, dar> 2 rânduri
2.6 Liste, liste și mai multe liste
Bine, 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:
• Lista ordonată (numere, alfabeturi, cifre romane)
• Lista necomandată (puncte glonț)
Pentru o listă comandată, utilizați următoarele etichete =
Pentru o listă neordonată, utilizați următoarele etichete =
De exemplu:
În exemplul de mai sus am inclus atât tipuri de listă cât și ordonate. Dar ai observat ce altceva am făcut? Am inclus și o tehnică numită Liste cuiburi. Aceste liste cuiburi pot fi utilizate pentru a reprezenta relații ierarhice, cum ar fi lista ingredientelor din Obțineți pasul cu rețetele de mai sus.
Este posibil să vedeți că am început întreaga listă ca listă ordonată în Linia 10 și am terminat-o în Linia 23. Între voi ai vedea și etichetele pe care le-am folosit. Acestea desemnează Lista elementelor. Elementele din listă sunt cuvintele care apar, cum ar fi în linia 21:
Dacă doriți să mergeți la următorul nivel ierarhic de puncte sau numere, atunci cuibărește-te în ele însele:
2.7 Tabelele... nu nu matematică
Este la fel de dificil ca tabelele dvs. de multiplicare? Bineînțeles că nu, dacă mergi corect despre asta. Dacă tocmai începeți cu acest concept și presupun că sunteți, atunci de obicei este cel mai bine să desenați masa pe care doriți să o faceți pe o bucată de hârtie, cum am mai jos:
Acum priviți-l în codul de mai jos:
Acum, amestecați-le și ecranul de mai jos ar trebui să vă ajute să înțelegeți cum este structurată tabelul:
A
și
îndrăznește primul și ultimul rând, pentru a atrage mai multă atenție asupra acelor părți ale tabelului. Majoritatea oamenilor ar privi totalul din subsolul tabelului, nu?2.8 Formulare digitale (stilouri)
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, va trebui să introduceți adresa dvs. de e-mail așa cum este încercuită mai jos la abonați-vă la newsletter și actualizări zilnice de la MakeUseOf. După ce introduceți adresa dvs. de e-mail ar apăsa A te alatura iar acest lucru ar trimite informațiile (e-mailul dvs.) din caseta de text de lângă buton către o bază de date sau poate o altă adresă de e-mail. Formulare sunt folosite pentru a face acest lucru, ceea ce veți învăța în acest capitol.
Mai jos este un formular care este utilizat pentru a introduce doar numele dvs. și faceți clic pe oricare Trimite sau clar:
Iată codul din culise, pe care îl voi explica în detaliu în curând:
Î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 explicativ, 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 Răspunsurile MakeUseOf. obține, pe de altă parte, trimite informațiile pe care le-ați furnizat și returnează cu informații despre feedback, cum ar fi un motor de căutare, trimiterea cuvintelor cheie de căutare și returnarea cu rezultatele.
Blocul de codare de mai sus este un exemplu de formular de postare prin care ați introduce adresa de e-mail și ar fi trimis proprietății ascunse cu o adresă de e-mail după ce faceți clic pe butonul Trimite.
Rândurile 22 - 25 plasează butoanele Trimitere și Resetare / Ștergere pe pagină sub caseta de text. Resetați butonul șterge pur și simplu orice text introdus în caseta de text sau în casetele din acea formă. 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 regulă, ceva automat sau o parte din altceva fiind folosită în forma curentă. În acest caz, acesta din urmă dă posted informați o destinație, în acest caz [email protected], cu subiectul setat, în acest cazul „Abonați-vă 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, asta este ceea ce folosesc: meta elemente. Motoarele de căutare catalogează de obicei 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. Aruncați o privire la următorul extras dintr-un cod pentru un exemplu:
După cum puteți vedea mai sus, informațiile meta sunt incluse în
3. Proiectare cu CSS
De cele mai multe ori, persoanelor care se uită la ghiduri de genul acesta le place să joace jocuri video. Cu toate acestea, CSS nu este Sursa Counter Strike și nici nu este deloc un Shooter pentru prima persoană (FPS). CSS este o tehnologie care funcționează cu xHTML și este de acord Cascading Style Sheets. xHTML este destul de plictisitor de unul singur, dar dacă adăugați o servire corectă de CSS, formatarea și prezentarea creației dvs. este mult mai interesantă. Autorii pot face modificări la elementele de pe o pagină web, precum 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 proiectat pentru a specifica conținutul și structura unui document. Nu se pare că xHTML nu ar putea face modificări la formatarea conținutului. Cu toate acestea, această configurare 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 totalitate de o foaie de stil atașată, un designer web poate pur și simplu să pună la punct o altă foaie de stil pentru a modifica puternic prezentarea site-ului.
3.1 Stiluri de dans in linie
După cum am menționat mai sus, această secțiune se referă la formatare și stiluri. Deoarece există multe moduri 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 în linie. Aceasta se realizează prin plasarea codului în secțiunea de proprietăți a unui tab care cuprinde conținutul. Asa:
Sună prea dificil? Permiteți-mi să vă dau un exemplu:
Notă: Culoarea este scrisă culoare când utilizați acest cod, deoarece a fost creat undeva nu la fel de cool precum Australia sau Canada; Sper să nu vă deranjeze prea mult.
Informațiile cu caractere aldine din exemplul de mai sus sunt formatarea care este procesată pe conținutul inclus în
etichetă. Pentru o listă de coduri hexadecimale pentru diferite culori pur și simplu căutați pe Google sau utilizați acest site: http://html-color- codes.com/
3.2 Fișe de stil încorporate (foile de înșelare 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 de mai multe ori, atunci de ce nu folosiți un Fișă de stil încorporată? Această alternativă vă permite să vă creați propriile stiluri în
eticheta codului și apoi faceți referire la ele în cod atunci când introduceți un anumit conținut pe 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? Nu este foarte greu de înțeles nu?
În linia 7 unde introducem începutul
Linia 16 folosește .xtra clasa care a fost făcută mai devreme. Modul în care funcționează este faptul că se adaugă pe xtra clasă la orice stil pe care este deschis, prin care se suprascrie orice proprietăți pe care xtra utilizări de clasă. De exemplu: dacă un stil are dimensiunea fontului 20pt și este culoarea verde, iar o clasă este plasată pe acesta care are un dimensiunea diferită a fontului, atunci noua dimensiune a fontului o va înlocui pe cea veche, dar vechea culoare verde va continua cum este.
3.3 Stiluri în război (stiluri conflictuale)
Există trei niveluri de stiluri și sunt:
• Utilizator (vizualizarea site-ului)
• Autor (al site-ului)
• Agent de utilizator (browser)
Stilurile se îmbină în așa fel încât creează cea mai bună configurare posibilă din poziția utilizatorului. Următorul grafic arată ierarhia celor trei niveluri:
3.4 Fișe de stil dincolo (externe)
Nu credeți că ar fi enervant să scrieți întotdeauna aceeași foaie de stil în fiecare nou fișier de codare? Există o soluție: Foi de stil externe. Puteți crea un alt fișier cu scopul de a-l utiliza pentru formatare; e o ".css”Dosar. Pentru a-l utiliza într-un alt fișier, pur și simplu introduceți următorul extras:
A inlocui nume de fișier cu numele fișierului dvs. CSS și acolo mergem, acestea sunt legate. Asigurați-vă că fișierul dvs. CSS se află în același dosar ca fișierul (ele) conectat (e).
Fișier CSS exemplu:
Înainte de a continua am neglijat să menționez ce face ei. Mai sus veți vedea în ultima linie că am pus „ul ul {font-size: .8em; } ”Și asta înseamnă că dimensiunea fontului va fi modificată la .8 sau 80% din dimensiunea normală pe care utilizatorul dorește să o folosească propria foaie de stil încărcată în browserul său. Majoritatea oamenilor nu utilizează o foaie de stil definită de utilizator, deci să nu ne îngrijoram.
3.5 Elemente de poziționare (unde urmează?)
Când puneți o imagine pe o pagină web, nu doriți cu adevărat să plece nicăieri. Nu ai vrea să ai un cuvânt de spus? Ei bine, așa o faceți, bine, de fapt, este un exemplu și o să vă explic în scurt timp:
În rândurile 9 - 13 veți observa că este o clasă cu ID-ul ca fgpic și are câteva proprietăți utilizate în ea. poziţie proprietatea este setată pe 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 lor. top și stânga proprietățile desemnează un punct în care elementul (de ex. imagine / text) va fi plasat. z-index proprietatea este un instrument foarte puternic, deoarece stabilește nivelul de stivuire așa cum se arată în imaginea de mai jos:
Vedeți cum imaginea de fundal se află în spate cu valoarea indexului z de 1, iar textul este în față cu valoarea indexului z de 3, în timp ce imaginea prim-plan este în mijloc cu o valoare a indexului z de 2. Îți face să arate destul de bine de fapt dacă îți joci corect cărțile
3.6 Înțelegeți-vă împrejurimile (fundal)
Site-urile web arată bine cu fundaluri nu? 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 utiliza pentru ca fundalul paginii dvs. să iasă în evidență un pic mai mult și pentru a oferi paginii o anumită lumină. Aruncați o privire la următorul cod și vedeți dacă puteți afla ce fac proprietățile evidențiate:
Ai rezolvat 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 acesta ca având valoarea 0 a indexului z, întrucât este întotdeauna în spatele paginii. Poziția de fundal a imaginii a fost setată în partea stângă jos, destul de explicativă, nu? În continuare, imaginea de fundal a fost repetată pe axa x a paginii (repeta-x) și nu numai asta, ci este fixată în partea de jos a ferestrei (fundal-atașare). În cele din urmă, culoarea a fost setată la întâmplare pentru a fi în principal roșie. Urmăriți mai jos rezultatul:
3.7 Cât de mare crezi? (dimensiunile elementelor / limitele textului)
Dacă credeți că este tot ce poate oferi CSS, vă confundați greșit. Normele CSS pot specifica dimensiunile reale ale fiecărui element de pagină. Să luăm exemplul unei căsuțe de text. Doriți să introduceți un text care nu merge până la capăt pe ecran sau poate crea o casetă de text care poate fi defilată fără a muta pagina? Aici trebuie să fii atunci. Vedeți imaginea de mai jos pentru ceea ce tocmai am descris:
Să aruncăm o privire asupra codului din culise:
Doar o notă minoră: linia 6 adaugă un chenar marginal în partea de jos a fiecărei casete de text. Destul de cool, nu? Dar mai multe la granițe în secțiunea următoare.
3.8 Ceea ce ocolește are loc (granițele)
Nu cred că asta are nevoie de o explicație, dar oricum o voi oferi. Practic, puteți pune granițele în jurul a aproape orice, așadar să aruncăm o privire asupra modului de realizare. Iată deci codul:
Iată ce face codul, practic un sortiment de borduri care înconjoară numele / numele tipului de graniță utilizat. Rețineți că opusul canelurii este creasta și opusul intrării este dezactivat.
3.9 Elemente plutitoare și curgătoare
De obicei este destul de plictisitor să vezi doar titlu, apoi text, apoi titlu apoi text. În timp ce nu face să pară un pic mai frumos? Există o metodă care poate fi utilizată numită plutitorși acum îți voi arăta cum să faci exact asta. Plutirea vă permite să mutați un element într-o parte a ecranului, în timp ce alt conținut din document apoi curge în jurul elementului plutit. Elementul plutit ar putea fi o imagine sau o titlu sau chiar un alt bloc de text. Acum să aruncăm o privire la cum arată:
Destul de bine 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 doar metoda potrivită?
3.10 Nu renunțați la meniu - exemplu
Dacă vă gândiți să creați un site web, cel mai probabil veți avea nevoie de un meniu, nu? Ei bine, acesta ar putea fi locul potrivit pentru care să mergi dacă vrei ceva care nu stă doar acolo. Elementele dinamice fac ca paginile web să arate mai bine și să ofere o mai bună stare site-ului general.
Unul dintre tipurile mele preferate de meniuri trebuie să fie un meniul derulant acum, să aruncăm o privire asupra modului de a face unul folosind CSS. Consultați codul de mai jos:
Știu că acest lucru pare cam descurajant la început, dar dacă ai răbdare și ai citit mai departe, vei înțelege destul de curând.
Linia 15 spune: când am un <div> tag cu class = "meniul”Și mouse-ul este planaretrecând peste ea afişa bloceste înăuntru.
Liniile 16-21 spun: când am un <div> tag cu class = "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 setează formatele pentru butonul de meniu pentru a derula pentru a afișa restul meniului.
Linia 22 spune: când am un <div> tag cu class = "meniul”Și un <A> eticheta si eu planare peste unul dintre aceste elemente, apoi setați culoare de fundal la un alt verde.
Aruncați o privire mai jos pentru produsul final:
3.11 Fișe de stil utilizator (sunteți centrul universului)
Utilizatorii își pot defini propriile foi de stil de utilizator pentru a face paginile să pară că le doresc. Doar pentru a distinge Fișe de stil utilizator și Fișe de stil de autor. Stilurile de utilizator sunt foi de stil externe pe care utilizatorii pot să le creeze singuri, care sunt făcute pur și simplu ca fișiere CSS, fără cea mai mare parte a codificării. Aici vă voi arăta unul:
Nu a fost extrem de simplu?
Dacă doriți să știți cum să configurați acest lucru în propriul browser, pur și simplu accesați Instrumente >> Opțiuni Internet >> General >> Accesibilitate >> Apoi definiți propriul fișier Fișa de stil a autorului este definită în interiorul codului .
4. Mai multe informatii
4.1 De ce folosiți xHTML și co. peste proiectare și alte aplicații?
Înainte de a privi acest lucru ca fapt sau ceva similar 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 atent vă puteți afla. Îmi place să folosesc limbaje de programare pentru a-mi completa proiectele, deoarece înseamnă că poți înțelege ce se află în spatele proiectelor, în timp ce folosesc aplicații de design precum Adobe Dreamweaver și Microsoft FrontPage vă permit să creați site-ul dvs. web utilizând doar instrumentele disponibile în meniuri. Prin urmare, aplicațiile de proiectare sunt limitate la opțiunea de meniu oferită de dvs. În concluzie, este complet evident că folosirea limbajelor de programare ar crea site-ul sau produsul finalizat ceva mult mai atrăgător, deoarece funcționalitatea sa este limitată doar de abilitatea programatorului cu limba desemnată (de exemplu. JavaScript, CSS, xHTML). Știu că probabil vă gândiți că sunt părtinitoare, dar va trebui doar să încercați și să decideți cum mult efort pe care doriți să-l depuneți în muncă, apoi alegeți instrumentele adecvate pentru a vă adresa destinaţie. S-ar putea chiar să alegeți să le utilizați, deoarece atât Dreamweaver cât și FrontPage au o „vizualizare de codare” și o „vedere de design”.
Există și alte modalități prin care puteți crea site-uri web precum Joomla și WordPress.
4.2 Joomla
Joomla este un sistem excelent de gestionare a conținutului (CMS), cu multă flexibilitate și cu un utilizator ușor de utilizat interfață despre care o mulțime de oameni se intimidează 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 de la care puteți obține http://www.joomla.org/download.html
Dacă doriți un ghid aprofundat pe Joomla, încercați acest ghid de la MakeUseOf: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Ghidul începătorilor către JoomlaAcest ghid vă va ghida prin toate elementele, de ce să alegeți Joomla și cum să îl instalați pe serverul dvs. Web până la modul de proiectare și personalizare a site-ului dvs. 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ă mențină un site web printr-un sistem administrativ interfață, incluzând o structură de navigație generată automat, fără a fi nevoie să cunoască HTML sau să învețe niciun alt instrument. WordPress este o piesă de software open source creată de mii de programatori din întreaga lume și pusă în domeniul public, deci nu trebuie să plătiți pentru a o folosi. WordPress este o aplicație bazată pe web, scrisă în PHP și MySQL, concepută pentru a rula pe serverele 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 serverele web - toate acestea sunt de asemenea deschise sursă. WordPress este, de departe, cel mai popular CMS cu peste 200 de milioane de site-uri din întreaga lume la sfârșitul anului 2009.
Lectură suplimentară
- Top 11 etichete HTML Fiecare Blogger și proprietar de site-uri trebuie să știe Top 11 etichete HTML Fiecare Blogger și proprietar de site-uri trebuie să știeWeb-ul mondial cunoaște multe limbi și este codat în mai multe diferite. Cu toate acestea, o singură limbă, care poate fi găsită peste tot și a existat de la inventarea paginilor web, este ... Citeste mai mult
- 5 lucruri amuzante de făcut online cu HTML5 5 lucruri amuzante de făcut online cu HTML5HTML5 continuă să treacă de la forță la forță, 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. Asta e explozia ... Citeste mai mult
- Cod pentru web cu aceste instrumente chiar în browserul dvs. Construiți-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
