Oglas
Sadržaj
§1. Uvod
§2 - Početak rada s xHTML-om
§3 - Dizajn s CSS-om
§4 - Više informacija
1. Uvod: Što je xHTML?
Dobrodošli u svijet XHTML - Jezik za označavanje hiperteksta koji se može proširiti - označni jezik (sličan programiranju) koji omogućuje bilo kojem web mjestu da izrađuje web stranice s mnogo različitih funkcija. Na mnogo načina to je glavni jezik Interneta.
Pa zašto nas briga?
Pa, niste li nikada željeli imati vlastitu web stranicu? Ili napravite svoju igru? Uloga ovog vodiča je da okusite ovaj moćni svijet. Ako imate prethodno iskustvo u programiranju, onda će vam ovo biti lakše, naravno, nego ako tek započinjete svoju programsku avanturu. Bilo kako bilo, nadam se objasniti to pa čak i novak može razumjeti.
Brinemo o xHTML-u jer je snažna polazna točka za učenje osnovnih gradivnih blokova weba. Web-lokacije društvenih mreža poput Facebooka, MySpacea i Twittera koriste drugi (programski) strani programski jezik koji se zove PHP, ali dobro je razumjeti osnove prije nego što se zaronite glavom u programiranje svijet. Ovaj vodič govori o osnovama.
Ako želite znati više o tome kako Internet funkcionira ili možda kako računalne mreže rade sa svim tim tehničke stvari ili čak samo kako računala mogu biti izgrađena, a zatim isprobajte ove sjajne vodiče kod vaših prijatelja Iskoristiti:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Kako izgraditi svoje računaloIzvrsno je razviti vlastiti PC; kao i zastrašivanje. No sam postupak je zapravo prilično jednostavan. Proći ćemo vas kroz sve što trebate znati. Čitaj više
//www.makeuseof.com/tag/everything-need-know-home-networking/ Sve što trebate znati o kućnom umrežavanjuPostavljanje kućne mreže nije tako teško kao što mislite da jest. Čitaj više
//www.makeuseof.com/tag/guide-file-sharing-networks/ Vodič za MakeUseOf za mreže za dijeljenje datotekaJeste li se ikad zapitali koje su najveće mreže za dijeljenje datoteka vani? Koje su razlike između BitTorrent, Gnutella, eDonkey, Usenet itd.? Čitaj više
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ Windows 7: Ultimate vodičAko se bojite nadogradnje s Viste ili XP jer smatrate da je potpuno drugačija od onoga na što ste navikli, pročitajte ovaj novi vodič. Čitaj više
//www.makeuseof.com/tag/download-how-the-internet-works/ Kako Internet funkcioniraSada možemo pristupiti internetu s kućnih računala, ureda, prijenosnih računala i naših telefona. No mnogi ljudi još uvijek nisu u potpunosti sigurni što je Internet i kako stvarno funkcionira. Čitaj više
2. Početak rada s xHTML-om
U ovom ćete poglavlju naučiti kako stvoriti i prilagoditi web stranice na mnogo različitih načina, uključujući učenje kako:
• Dodajte slike na web stranice.
• Stvorite i koristite hiperveze za navigaciju po web stranicama.
• Postavljanje popisa informacija pomoću točaka i slično.
• Stvorite tablice s redovima i stupovima slučajnih podataka i moći ćete kontrolirati oblikovanje navedenih tablica.
• Stvorite i koristite obrasce s kojima zapravo možete imati interakciju.
• Neka web stranice budu dostupne tražilicama.
Sve će to biti učinjeno pomoću xHTML programiranja. Ne vjerujete? Nastavi čitati. Iznenadili biste se koliko možete naučiti iz tako kratkog vodiča.
Prije nego što zapravo uđemo u „kodiranje“ dijela ovog vodiča, trebat će vam neki softver koji ćete moći uređivati, testirati i razvijati programe. BESPLATNO idite na www.dreamspark.com i preuzmite jedan od sljedećih programa s pretpostavkom da ste student:
• Microsoft Visual Studio 2010
• Expression Studio 4
Ako niste student, možete i upotrebljavati Notepad ++, iz koje se vrlo lako može doći www.notepad-plus-plus.org
Nakon što nabavite jedan od programa i instalirate ga, tada možete započeti svoje xHTML iskustvo.
Možda biste umjesto Mac-a koristili Mac ili Linux; morat ćete pronaći uređivač teksta što vam u tom slučaju djeluje. Pokušajte pronaći onu koja će vam prikazati broj linija i kod boja.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad - Ultra lagan uređivač teksta [Linux] Čitaj više
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - sjajan uređivač koda za LinuxZačudo, Linux ne nudi toliko dobrih IDE-ova (Integrirano razvojno okruženje). Vjerujem da je to zato što je u to doba većina Linux programera izvadila stari dobar Notepad (ili u ovom slučaju gedit) i započela ... Čitaj više
Ako radije ne preuzmete bilo koji namjenski alat, i dalje možete koristiti uređivač teksta blokčić za bilješke ili WordPad. Navedeni programi, međutim, daleko su bolji alati za testiranje i oblikovanje, kao i za pomoć u tome vaše kodiranje jer to od vas traži da li pogriješite ili ako se želite sjetiti ispravne riječi koristiti. Jednostavno je bolje, zar ne? Osobno koristim Notepad ++ i Microsoft Visual Studio, iako sam čuo mnogo sjajnih stvari o programu Expression Studio 4. Morat ćete odlučiti što vam se najviše sviđa, ali sve funkcionira u redu.
BILJEŠKA: Za testiranje web stranice stvorene iz Notepad-a ili Wordpad-a:
Kada se datoteka otvori, kliknite Datoteka >> Spremi kao
Na kraju imena datoteke upišite.hTML i kliknite Uštedjeti
Otvorite novo spremljenu datoteku (otvorit će se u vašem zadanom internetskom pregledniku)
2.1 Upoznavanje sa "svijetom"
U redu, evo početka putovanja. Započnimo s postavljanjem nečega na ekran na ovoj web stranici. Prvo morate znati što su. XHTML kôd koristi početne i završne oznake za određivanje onoga što se događa sa svakim elementom stranice.
Evo primjera početne oznake:
Evo primjera krajnje oznake:
Vidite razliku? Jedan ima naziv elementa priložen u šiljastim zagradama, a drugi je isti, ali ima crta ispred naziva elementa.
VAŽNO: Oznaku morate zatvoriti nakon što je otvorite u nekom trenutku koda. Također se oznake moraju ugnijezditi, to znači da ne možete učiniti sljedeće:; trebalo bi biti. Pogledajte kako se oznake uklapaju jedna u drugu? Misli na njih kao na kutije: ne možeš staviti nešto čvrsto u okvir i pol.
Najbolji način da se upoznate s programiranjem je zapravo radeći to, dovoljno teorije. Samo za referencu, svaki ću kôd označiti brojem kako bih mogao svaki put po jedan objasniti što se događa.
U retku 1 navedio sam html kod, a u retku 5 završio sam ga. Unutar oznaka je
). Ako ovo otvorite u web-pregledniku, vidjet ćete sljedeće na zaslonu:
Ako želite promijeniti naslov stranice sa stajališta preglednika (npr. firstpage.html) onda lako možete dodati u sljedeći redak koda:
Tako će vaša web stranica izgledati profesionalnije.
2.2 Polazeći od i radi na dolje
U većini slučajeva unutar oznaka postoji
i a .obično se koristi za skriptiranje u CSS-u (odjeljak 3) i JavaScript-u (objašnjeno u narednom priručniku), a je obično sadržaj stranice.
Neki se sadržaji mogu mijenjati pomoću skripti u
, ali je obično sadržaj koji se na stranici ne može promijeniti. Primjer bi mogao biti kratak popis web stranica koje posjećujete.Možete promijeniti promjene u oblikovanju sadržaja koristeći CSS (odjeljak 3) u odjeljku
. No također možete promijeniti promjene u formatu .Često korišteni skup oznaka koji se koriste u tijelu su slova zaglavlja. Ove zaglavne fontove variraju u veličini i jačini / odvažnosti. Samo pogledajte u nastavku:
2.3 Vrijedna je tvoja slika tisuću riječi? - Slike
Do sada smo samo govorili o tekstu i onome što se može učiniti na web lokaciji, ali ima ih još. Želite učiniti da vaše web mjesto izgleda još privlačnije od samo fantastičnih fontova? Pokušajte nabaviti dobre slike da bi web mjesto zaista pružilo publici nešto da pogleda. Pazite, ipak, na zakone o autorskim pravima; Najbolje je slikati se ako namjeravate postaviti svoju web stranicu na Internet.
Možda ćete trebati koristiti Photoshop ili neke digitalne vještine za stvaranje slika kako biste stvorili odličnu sliku ili možda poboljšali svoju sliku i učinili je još sjajnijom. Isprobajte ove vodiče za nekoliko sjajnih savjeta i uvida:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Naučite uređivanje fotografija u Photoshopu: Smanjite osnove za 1 satPhotoshop je zastrašujući program - ali sa samo sat vremena možete naučiti sve osnove. Uzmite fotografiju koju želite urediti i krenimo! Čitaj više
• //www.makeuseof.com/tag/guide-to-digital-photography/ Vodič za digitalnu fotografiju za početnikeDigitalna fotografija odličan je hobi, ali može biti i zastrašujuća. Ovaj vodič za početnike reći će vam sve što trebate znati da biste započeli! Čitaj više
Najpopularniji formati slika su sljedeći:
• GIF = Format grafičke razmjene
• JPEG = Zajednička grupa stručnjaka za fotografije
• PNG = prijenosna mrežna grafika
Pogledajte donji kôd i objasnit ću vam što to znači; to jest kako dodati slike na svoju web stranicu.
Kao što je podučeno u prethodnim odjeljcima, uvijek započinjemo s i co oznake. Zatim slijedi
Nakon otvaranja stavka u retku 9, slike su ovdje umetnute na web mjesto. Za dodavanje slike / slike koju biste trebali upotrijebiti za početak. Zatim trebate sugerirati gdje se datoteka nalazi. Obično biste pokušali i ovu datoteku imati u istoj mapi kao i datoteke web mjesta, morat ćete unijeti putanju mape u kojoj postoji. U gornjem slučaju koji sam koristio
. To znači da je izvor (Src) slika se nalazi u istoj mapi i ime je datoteke slike slika.jpg. Lako zar ne?
Ne morate dodati ništa više od toga stvoriti sliku s an alt svojstvo, ali možete mu dodati svojstva kako biste ga promijenili.
Također poznat kao alt tekst, ova vrijednost svojstva prikazuje se kada pokažite mišem iznad slike.
Možda ćete primijetiti da sam u retku 10 započeo oznaku i završio s />. Ovo je još jedan način otvaranja i zatvaranja oznaka. Ovo je uobičajeni način stvaranja slika jer možete odabrati različita svojstva slike, kao što su širina i visina kao što je prikazano u gornjem primjeru.
U retcima 11 i 12 ubačena je druga slika, ali to se koristi drugom metodom za otvaranje i zatvaranje oznaka. Linija 10 stvara sliku na mnogo uredniji način; koristiti to umjesto metode u linijama 11 i 12.
2.4 Hiperlinkovi gdje mogu otići?
2.4.1 Kretanje po "svijetu"
Želite pokazati prijateljima neke super stranice na vašoj web lokaciji, ali ne znate kako? Došli ste na pravo mjesto, čitajte dalje ...
Pogledajte donji kôd i vidite možete li pogoditi što radim prije nego što ga objasnim.
To je tačno, stvaram hiperveze do nekih sjajnih i korisnih web lokacija. U osnovi za hipervezu na određenu web stranicu koja ima web adresu jednostavno koristite donju sintaksu:
[što želite hipervezati]
Ne čini se da je to vrlo teško? Jednostavno možete jednostavno unijeti tekst poput primjera koda iznad. Međutim, nema razloga zašto ne biste mogli koristiti nešto drugo poput slike. Samo za nekoliko dodatnih informacija: URL je Uniformni lokator resursa, u osnovi web adresa.
2.4.2 Slike vas podsjećaju gdje ste bili i odvode vas tamo opet
Evo primjera upotrebe slike kao hiperveza:
Sigurna sam da ako ste pročitali prethodne dijelove ovog odjeljka koje objavite da se to jednostavno miješa stvaranjem slika i hiperveza. Sintaksa je postavljena tako da ima hipervezu izvana i sliku iznutra, pri čemu postavlja hipervezu umetnute slike.
2.4.3 Dobili ste poštu - hiperveza na adresu e-pošte
Ovo je jednostavno ponavljanje zadnjeg dijela, ali ako niste toliko obraćali pažnju, samo pogledajte kôd u nastavku:
Umjesto korištenja URL-a (npr. http://www.something.com) ovdje koristim adresu e-pošte koja uključuje stavljanje sljedeće sintakse nakon znaka jednakosti:
„Mailto: [youremailaddress]”
Redak 10 osnovni je primjer ovog koncepta. Pa s kime ćete poslati e-poštu? Istjerivaci duhova!
2.4.4 Obilaziti svijet - Interna hiperveza
Sada možete vidjeti kako biste zaobišli svoju vlastitu web stranicu. To se događa jednostavnim korištenjem vašeg datoteke kao URL-a. Stoga možete imati postavljanje web lokacija poput prikazanih na donjem dijagramu. Sintaksa koju biste koristili imala bi ovako nešto:
2.5 Jeste li posebni? Ti su likovi…
Kada upišete podatke koji će se pojaviti na web mjestu poput sadržaja, možda ćete to trebati ubacite nešto poput simbola poput simbola autorskog prava: © ili možda manji ili veći od simbol. No, budući da normalni simboli koriste sintaksu kodiranja, mora postojati drugi način da se ovo malo prijeđe prepreka, a rješenje je koristilo ampersand (&), a zatim kratak kôd nakon toga da kažemo računalu koji simbol treba staviti unutra. Ispod je tablica s nekoliko primjera posebnih znakova iz kodiranja:
Na primjer, možete reći:
U gornjoj tablici nalazi se 2 reda
U gornjoj tablici nalazi se <6 redaka, ali> 2 reda
2.6 Popisi, popisi i više popisa
U redu, sada ćemo morati organizirati nekoliko stvari, poput popisa za kupovinu. Postoje dvije vrste popisa. Oni su:
• Naručeni popis (brojevi, abecede, rimski brojevi)
• Neuređeni popis (tačke sa oznakom)
Za naručeni popis koristili biste sljedeće oznake =
Za popis bez narudžbe upotrijebite sljedeće oznake =
Na primjer:
U gornjem primjeru uključio sam i neuređene i naručene vrste popisa. Ali jeste li primijetili što sam još učinio? Uključio sam i tehniku zvanu Uneseni popisi. Ovi ugniježđeni popisi mogu se koristiti za predstavljanje hijerarhijskih odnosa, poput popisa sastojaka u Dobijte gornji korak sastojaka recepta.
Možda ćete vidjeti da sam čitav popis započeo kao naručeni popis u retku 10, a završio u 23. retku. Između biste vidjeli i oznake koje sam koristio. Oni označavaju Popis stavki. Stavke na popisu su riječi koje se pojavljuju kao u retku 21:
Ako želite prijeći na sljedeću hijerarhijsku razinu točkastih točaka ili brojeva, gnijezdi se unutar sebe ovako:
2.7 Tablice… ne, matematika
Je li to tako teško kao i vaše tablice množenja? Naravno da ne, ako to krenete pravim putem. Ako tek počinjete s ovim konceptom, a pretpostavljam da jeste, obično je najbolje nacrtati tablicu koju želite napraviti na komadu papira kao što je to ispod:
Sada to pogledajte u kodu ispod:
Sada ih miješajte zajedno, a prikaz u nastavku trebao bi vam pomoći da shvatite kako je tablica strukturirana:
i
podebljajte prvi i zadnji red da biste privukli više pozornosti na one dijelove tablice. Većina bi ljudi prvo gledala ukupan zbroj u podnožju tablice?2.8 Digitalni obrasci (olovke su udaljene)
Tijekom surfanja mrežom morat ćete komunicirati s web stranicama na koje nailazite. Na primjer, na www.makeuseof.com trebali biste unijeti svoju adresu e-pošte kako je niže naznačeno pretplatite se na newsletter i dnevna ažuriranja od MakeUseOf. Nakon što unesete svoju adresu e-pošte pritisnuo bi Pridružiti a to će poslati informaciju (vašu e-poštu) u tekstni okvir pored gumba bilo bazi podataka ili možda drugoj adresi e-pošte. obrasci Za to se koristi, što ćete naučiti u ovom poglavlju.
Ispod je obrazac koji se koristi za unošenje samo vašeg imena i kliknite bilo koji podnijeti ili Čisto:
Evo koda iza scene, što ću vam ukratko objasniti:
Prvo je najvažnija stvar u gornjoj skripti linija 10. Ovo je početak obrasca. Metoda je obično jedna ili druga pošta ili dobiti. Sasvim samorazumljivo, ali pošta šalje informacije negdje radi snimanja, poput adrese e-pošte ili baze podataka. Na primjer: postavljanje pitanja na MakeUseOf odgovore. Dobitis druge strane šalje podatke koje ste naveli i vraća s povratnim informacijama, poput tražilice, slanje ključnih riječi za pretraživanje i vraćanje s rezultatima.
Gornji kodni blok primjer je obrasca za objavu u koji biste unijeli svoju adresu e-pošte i ona će biti poslana na skriveni entitet s adresom e-pošte nakon klika na gumb Pošalji.
Linije 22 - 25 smjestite gumbe za slanje i resetiranje / brisanje na stranicu ispod tekstnog okvira. Reset gumb jednostavno briše bilo koji tekst unesen u tekstni okvir ili okvire u tom obliku. podnijeti gumb slijedi upute sa skrivenih dijelova obrasca koji su stvoreni u linijama 14 - 18. Skriveni tip obično pretpostavlja da se nešto automatski koristi ili da se dio trenutnog oblika koristi u nečem drugom. U ovom slučaju potonje daje poštaed informacije, odredište, u ovom slučaju pretplatite [email protected], s timom predmeta, u ovom u slučaju "Pretplatite se na e-poštu", a zatim vas preusmjerava na drugu stranicu, u ovom slučaju glavnu stranicu ili „Index.html”.
2.9 meta što? Zašto?
Jeste li se ikada pitali kako tražilice pronalaze web stranice? Pa u osnovi to je ono što oni koriste: meta elementi. Tražilice obično katalogiziraju web mjesta slijedeći veze na stranice na stranicama koje pronađu. Ovi meta elementi imaju podatke o stranici na sebi. Pogledajte primjer sljedećeg izvoda iz neke šifre:
Kao što možete vidjeti gore, meta informacije se nalaze u
3. Dizajn s CSS-om
Većinu ljudi koji gledaju vodiče poput ovih jednostavno se sviđa igranje videoigara. CSS ipak nije Counter Strike Source, niti je pucač prve osobe (FPS). CSS je tehnologija koja radi s xHTML i zalaže se za Cascading STyle Sheets. xHTML je sam po sebi prilično dosadan, ali ako dodate korektno posluživanje CSS-a, oblikovanje i predstavljanje vaše kreacije mnogo je zanimljivije. Autori mogu mijenjati elemente na web stranici kao što su fontovi, razmak, boje; to se vrši odvojeno od strukture dokumenta (glava, tijelo itd.; to će biti objašnjeno u kasnijim poglavljima). xHTML je zapravo osmišljen za određivanje sadržaja i strukture dokumenta. To nije poput xHTML ne bi moglo promijeniti promjene u formatu sadržaja. Međutim, ovaj je set daleko korisniji jer se po potrebi može kontrolirati s jednog mjesta. Na primjer, ako je format web stranice u potpunosti određen priloženim tablicom stilova, web dizajner može jednostavno postaviti drugu listu stilova da uvelike promijeni prezentaciju web stranice.
3.1 Stilovi plesa u liniji
Kao što je gore spomenuto, ovaj se odjeljak odnosi na oblikovanje i stilove. Budući da postoji mnogo načina za promjenu stila vašeg sadržaja i stranice, mislio sam da bi bilo dobro započeti s najobičnijom tehnikom naprijed, koja je Inline stilovi. To se izvodi postavljanjem koda u odjeljak svojstva na kartici koja obuhvaća sadržaj. Kao ovo:
Zvuči previše teško? Dopustite mi da vam dam primjer:
Napomena: boja je ispisana boja kada koristite ovaj kôd jer je stvoren negdje ne tako cool kao Australija ili Kanada; Nadam se da vam to ne smeta previše.
Podebljane informacije u gornjem primjeru su oblikovanje koje se obrađuje na sadržaju koji je obuhvaćen u
označiti. Za popis heksadecimalnih kodova za različite boje jednostavno pretražite Google ili upotrijebite ovu web lokaciju: http://html-color- codes.com/
3.2 Ugrađeni listovi stila (Cheat Sheets su dobitak)
Korištenje stilova inline u prethodnom odjeljku može predstavljati bol ako imate jako veliko web mjesto. Ali ako želite koristiti iste stilove iznova i iznova, zašto ne biste koristili an Ugrađeni list stila? Ova alternativa omogućuje vam stvaranje vlastitih stilova u sustavu
oznaku koda, a zatim na njih u pozivu upućujete prilikom umetanja nekog sadržaja na svoju stranicu. Prekomplicirano? Evo primjera:
Pogledajte kako tekst mijenja boju, veličinu ili format, ovisno o stilu stranice pri vrhu? Ovo nije teško razumjeti zar ne?
U retku 7 gdje uvodimo početak
U retku 16 koristi se .xtra klase koja je napravljena ranije. Način na koji ovo funkcionira je da dodaje na Xtra klase prema bilo kojem stilu na kojem se otvara, čime se prepisuju sva svojstva koja Xtra koristi klase. Na primjer: ako stil ima font veličine 20pt i ako je zelena boja, na njega se stavi klasa koja sadrži a različite veličine fonta, tada će nova veličina fonta zamijeniti staru, ali stara zelena boja će se i dalje nastaviti kao što je.
3.3 Stilovi rata (sukobljeni stilovi)
Postoje tri razine stilova i to su:
• Korisnik (pregledavanje web stranice)
• Autor (web stranice)
• Korisnički agent (preglednik)
Stilovi se stapaju zajedno na način koji stvara najbolju moguću postavku sa pozicije korisnika. Sljedeći grafikon prikazuje hijerarhiju tri razine:
3.4 Tablice stila izvana (izvana)
Ne mislite li da bi bilo neugodno da u svaku novu datoteku za kodiranje uvijek pišete isti stilski list? Postoji rješenje: Vanjske stilske tablice. Možete stvoriti drugu datoteku u svrhu korištenja za oblikovanje; to je ".css" datoteka. Da biste ga koristili u drugoj datoteci, jednostavno upišite sljedeći ekstrakt:
Zamijeniti naziv datoteke s imenom vaše CSS datoteke i evo nas, oni su povezani. Provjerite nalazi li se vaša CSS datoteka u istoj mapi kao i povezane datoteke.
Primjer CSS datoteke:
Prije nego što nastavimo zanemario sam spomenuti što radi. Iznad ćete u posljednjem retku staviti "ul ul {font-size: .8em; } ”, A to znači da će se veličina fonta promijeniti na relativnu .8 ili 80% normalne veličine koju korisnik želi da koristi svoj vlastiti stilski stil umetnut u svoj preglednik. Većina ljudi ne upotrebljava korisnički stilski obrazac pa se ne brinemo o tome.
3.5 Elementi pozicioniranja (kamo dalje?)
Kada sliku postavite na web stranicu, ne želite da ona ide bilo kamo. Ne biste li željeli imati riječ o tome? Pa evo kako to radite, to je zapravo primjer i objasnit ću vam to uskoro:
U linijama 9 do 13 primijetit ćete da je to klasa s ID-om kao fgpic i ima nekoliko svojstava koja se koriste u njemu. položaj svojstvo je postavljeno na apsolutan što znači da bez obzira na to kako ga korisnik promijeni, slika će ostati tamo gdje je vaš (autor) smjestio svoj kod. vrh i lijevo svojstva označavaju točku na kojoj element (npr. slika / tekst) će biti postavljen. z-index svojstvo je vrlo moćan alat jer postavlja razinu slaganja kao što je prikazano na slici ispod:
Pogledajte kako je pozadinska slika straga sa z-indeksom vrijednosti 1, a tekst s prednje strane sa z-indeksom 3, dok je slika prednjeg dijela u sredini sa z-indeksom 2. Čini se da zapravo izgleda prilično dobro ako igrate svoje karte ispravno
3.6 Pazite na svoje okruženje (pozadina)
Web stranice izgledaju dobro s pozadinom, zar ne? Ne bi li bilo stvarno dosadno da su sve web stranice imale bijelu ili crnu pozadinu? Zašto tamo ne stavite sliku i malo promijenite boju? Postoji nekoliko svojstava koja možete koristiti kako bi se pozadina stranice malo istaknula i kako bi stranica postala blistava. Pogledajte sljedeći kôd i provjerite možete li utvrditi što rade istaknuta svojstva:
Jeste li otkrili što to radi? U osnovi, pozadinska slika je ono što ćemo koristiti u pozadini, put slike ide u zagrade / zagrade poput ovog> url (OVDJE). Možda ovo mislite kao da ima vrijednost z-indeksa 0 jer je uvijek na stražnjoj strani stranice. Pozadinski položaj slike postavljen je u donjem lijevom kutku, prilično sam po sebi razumljivo? Zatim je pozadinska slika ponovljena na osi stranice (ponovi x), i ne samo to, već je fiksirana na dnu prozora (pozadinski prilog). Konačno je boja nasumično postavljena da je uglavnom crvena. U nastavku pogledajte rezultat:
3.7 Koliko mislite veliki? (dimenzije elemenata / ograničenja teksta)
Ako mislite da je to sve što CSS može ponuditi, griješite. CSS pravila mogu odrediti stvarne dimenzije svakog elementa stranice. Uzmimo za primjer tekstni okvir. Želite li upisati neki tekst koji ne ide skroz preko zaslona ili možda napraviti tekstni okvir koji se može pomicati bez pomicanja stranice? Ovdje biste trebali biti. Pogledajte snimku zaslona u nastavku za ono što sam upravo opisao:
Pogledajmo kôd iza kulisa:
Samo mala napomena: redak 6 dodaje rubnu obrub na dnu svakog okvira s tekstom. Prilično cool, zar ne? Ali više o granicama u sljedećem odjeljku.
3.8 Što se događa okolo (granice)
Mislim da ovo nema potrebu za objašnjenjem, ali ipak ću ga dati. U osnovi možete postaviti granice oko gotovo svega, pa pogledajmo kako to učiniti. Dakle, evo koda:
Evo što radi kod, u osnovi asortiman obruba koji okružuju naziv / imena vrste obruba koji se koristi. Imajte na umu da je suprotan utor greben, a suprotni ulomak ispružen.
3.9 Lebdeći i tečeći elementi
Obično je prilično dosadno vidjeti samo naslov, zatim tekst, a zatim naslov i tekst. Iako to ne bi izgledalo malo ljepše? Postoji metoda koja se može koristiti plivajući, a sada ću vam pokazati kako to učiniti. Lebdenje vam omogućava da premjestite element na jednu stranu zaslona, dok se drugi sadržaj u dokumentu tada giba oko plutajućeg elementa. Plutajući element može biti slika ili naslov ili čak još jedan blok teksta. A sada pogledajmo kako to izgleda:
Prilično dobro za nekoliko situacija, ovo je kôd koji stvara ovaj dizajn:
Nije li nevjerojatno što možete učiniti ako samo pronađete pravu metodu?
3.10 Ne padajte na izborniku - primjer
Ako razmišljate o izradi web mjesta, vjerojatno vam je potreban izbornik, zar ne? Pa, ovo bi moglo biti pravo mjesto da odete ako želite nešto što ne samo sjedi tamo. Dinamični elementi čine da web stranice izgledaju bolje i pružaju bolji osjećaj cjelokupnom web mjestu.
Jedna od mojih najdražih vrsta jelovnika mora biti a padajući izbornik pa sada pogledajmo kako to napraviti pomoću CSS-a. Pogledajte kôd u nastavku:
Znam da je ovo u početku pomalo zastrašujuće, ali ako budete strpljivi i samo čitate, shvatit ćete vrlo brzo.
Redak 15 kaže: kada imam <div> tag with class = "izbornik"I miš je lebdjetiing nad njim prikaz blokje unutra.
Linije 16-21 kažu: kad imam <div> tag with class = "izbornik"I <> tag zatim postavite ove formate. Imajte na umu da ovi redovi odabiru oblik skrivenih gumba izbornika. Linije 9-14 postavljaju formate za tipku izbornika za pomicanje da biste prikazali ostatak izbornika.
U retku 22 piše: kada imam <div> tag with class = "izbornik"I <> tag i ja lebdjeti preko jednog od tih elemenata zatim postavite boja pozadine do drugačijeg zelenog.
U nastavku pogledajte krajnji proizvod:
3.11 tablice korisničkog stila (vi ste središte svemira)
Korisnici mogu definirati svoje vlastito listovi korisničkih stilova kako bi stranice izgledale onako kako one žele. Samo da razlikujem Tablice korisničkog stila i Tablice sa stilovima autora. Korisnički stilovi su vanjski listovi stilova koje korisnici mogu kreirati sami, a koji se jednostavno izvode kao CSS datoteke bez većine kodiranja. Evo pokazat ću vam jedno:
Nije li to bilo jednostavno jednostavno?
Ako želite znati kako to postaviti u svom pregledniku jednostavno biste otišli Alati >> Internetske mogućnosti >> Općenito >> Pristupačnost >> Zatim definirajte svoju datoteku Shema autorskog stila definirana je unutar koda između .
4. Više informacija
4.1 Zašto koristiti xHTML i co. preko dizajna i drugih aplikacija?
Prije nego što na ovo gledate kao na činjenicu ili na nešto slično, trebali biste znati da je to jednostavno gledište ovisno o mjestu gdje stojite i koliko tehnički mislite. Uživam u korištenju programskih jezika za dovršavanje mojih projekata jer to znači da možete razumjeti što stoji iza dizajna, dok koristite dizajnerske aplikacije poput Adobe Dreamweaver i Microsoft FrontPage omogućuju vam stvaranje web mjesta pomoću samo alata dostupnih na izbornicima. Stoga su dizajnerske aplikacije ograničene na mogućnost izbornika koja vam je dana. Zaključno, potpuno je očito da će pomoću programskih jezika graditi web stranicu ili dovršeni proizvod nešto daleko privlačnije jer je njegova funkcionalnost ograničena samo vještinom programera s određenim jezikom (Npr. JavaScript, CSS, xHTML). Znam da vjerojatno mislite da sam pristrana, ali morat ćete pokušati oboje i odlučiti kako mnogo truda želite uložiti u svoj posao, a zatim odaberite odgovarajući alat kako biste došli do svog odredište. Čak možete odabrati kako koristiti oboje, jer i Dreamweaver i FrontPage imaju "kodiranje" i "dizajn".
Postoje i drugi načini za kreiranje web stranica poput Joomla i WordPress.
4.2 Joomla
Joomla je izvrstan sustav za upravljanje sadržajem (CMS) s puno fleksibilnosti i s korisnikom koji je jednostavan za korištenje sučelje koje se mnogi zastrašuju kada shvate koliko je opcija i konfiguracija dostupno. Joomla je platforma koja se temelji na PHP-u i MySQL-u. Ovaj softver je open-source iz kojeg možete dobiti http://www.joomla.org/download.html
Ako želite detaljni vodič o Joomli, isprobajte ovaj vodič iz MakeUseOf: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ Vodič za početnike JoomlaOvaj će vas vodič provesti kroz sve, od toga zašto odabrati Joomla i kako to instalirati na svoj webserver do dizajna i prilagodbe web stranice po vašoj želji. Čitaj više
4.3 WordPress
WordPress je sustav za upravljanje sadržajem (CMS) koji korisnicima omogućuje stvaranje i održavanje web stranice putem administracije sučelje, uključujući automatski generiranu navigacijsku strukturu, bez potrebe da poznajete HTML ili naučite bilo koji drugi alat. WordPress je dio softvera otvorenog koda koji je stvorilo više tisuća programera širom svijeta i koji je stavljen u javnu domenu, tako da ne biste trebali platiti da biste ga koristili. WordPress je web-bazirana aplikacija, napisana na PHP-u i MySQL-u, dizajnirana za pokretanje na Linux poslužiteljima: PHP je programski jezik za web aplikacija, MySQL je relacijska baza podataka (kao što je MS Access), a Linux je operativni sustav za web poslužitelje - svi su oni također otvoreni izvor. WordPress je, do sada, najpopularniji CMS sa preko 200 milijuna web mjesta širom svijeta.
Dodatno čitanje
- 11 najboljih HTML oznaka koje svaki Bloger i vlasnik web mjesta moraju znati 11 najboljih HTML oznaka koje svaki Bloger i vlasnik web mjesta moraju znatiWorld Wide Web poznaje mnoge jezike, a šifriran je u nekoliko različitih jezika. Međutim, jedan jezik koji se može pronaći diljem svijeta i postoji od pronalaska web stranica jest ... Čitaj više
- 5 zabavnih stvari koje trebate učiniti na mreži s HTML5 5 zabavnih stvari koje trebate učiniti na mreži s HTML5HTML5 nastavlja s jačanjem snage, s tim da se sve više web lokacija prebacuje na novi standard koji donosi multimedijski sadržaj na web bez dodataka kao što je Adobe Flash. Je li to razneseno ... Čitaj više
- Kôd za web s tim alatima pravo u vaš preglednik Izradite: 11 sjajnih Chromeova proširenja za web programereChrome je izvrstan za web programere zbog svog niza proširenja. Ako ikad planirate dizajnirati ili kodirati web mjesto, evo nekoliko osnovnih alata koje biste trebali instalirati odmah. Čitaj više
Vodič objavljen: lipanj 2011
