POGLAVLJE 16. Izgradnja interaktivnih web stranica U prethodnom poglavlju smo istražili biblioteku Ext Core. Obilje objekata, svojstava, metoda i događaja vrti vam se u glavi... Kako svo ovo bogatstvo primijeniti u praksi Ovo će poglavlje u potpunosti biti posvećeno tome. Naučićemo

Kreiranje sekvenci stranica: Šta je redosled stranica? To je niz stranica sa istim karakteristikama (na primjer, poglavlje u knjizi) koje se po želji mogu formatirati na isti način. Stranice u rezultirajućem dokumentu u

Kreiranje brojeva stranica: Ugrađeni objekt za formatiranje stvara inline oblast koja prikazuje trenutni broj stranice. Na primjer: Sada čitate stranicu .Sa elementom može se primijeniti sljedeće

Kreiranje, otvaranje i čuvanje web stranica Pomoću programa možete kreirati nove web stranice, kao i uređivati ​​prethodno kreirane.Da biste kreirali novu web stranicu, potrebno je izvršiti naredbu glavnog menija Datoteka?

Poglavlje 1 Savremeni svijet. Era informatičke tehnologije Jedan od paradoksa razvoja čovječanstva je da je čovjek tokom čitavog svog razvoja koristio, akumulirao, prenosio informacije bez razumijevanja ili čak razmišljanja o tome.

Poglavlje 6 Kreiranje stranica za pristup podacima Stranica za pristup podacima je posebna vrsta datoteke dizajnirane za pregled i rad putem Interneta ili intraneta sa podacima pohranjenim u Microsoft Access ili Microsoft SQL Server bazama podataka. Stranica za pristup podacima se učitava u Access 2002 bazu podataka

Priručnik se može koristiti za stacionarno učenje i učenje na daljinu u izučavanju sljedećih disciplina: Programiranje na jeziku visokog nivoa. Interakcija čovjek-mašina. Objektno orijentirano programiranje.
Glavna pažnja u priručniku je posvećena HTML programskom jeziku, CSS tehnologiji, JavaScript programskom jeziku, grafičkom uređivaču Adobe Photoshop, multimedijalnoj tehnologiji.
Priručniku je priložen elektronski udžbenik na CD-ROM-u koji sadrži teorijski materijal, primjere realizacije različitih zadataka (mjesto za obuku) i praktični dio (zadaci, kontrolna pitanja i smjernice za laboratorijski rad). Osim toga, na disku se nalazi program za testiranje uz pomoć kojeg nastavnik može brzo i objektivno procijeniti stepen savladanosti gradiva.
Zanimljiva karakteristika elektronskog udžbenika je da svaki dio prati smirena instrumentalna muzika koja stvara dobro raspoloženje.
Ovaj udžbenik je namenjen studentima specijalnosti 220400 (230105) - Softver za računarsku tehnologiju i automatizovane sisteme. Prisustvo elektronskog udžbenika omogućava nastavnicima da jednostavno riješe problem repliciranja smjernica.
Knjiga je nezamjenjiva za sve početnike u učenju web dizajna.

1. Globalne računarske mreže.

Globalne mreže (kao i lokalne) sastoje se od računara povezanih komunikacijskim kanalima. Globalne računarske mreže (WAN) širom svijeta povezane su jedna s drugom putem Interneta.
Za rad u vodoopskrbi korisnik mora imati odgovarajući hardver i softver. U najjednostavnijem slučaju hardvera, potrebno je dodatno instalirati modem, uz pomoć kojeg se komunikacija obavlja putem telefonske linije (na primjer, iz stana). Imajte na umu da su moderni računari opremljeni mrežnim karticama i kada su povezani na mrežu, ali na namjenski kanal, dodatni hardver nije potreban.
Softver je podijeljen u dvije klase:
serverski programi koji se nalaze na mrežnom čvoru koji opslužuje računar korisnika;
klijentske programe koji se nalaze na računaru korisnika i koriste usluge servera.
Globalne mreže pružaju korisnicima niz usluga. WAN vam omogućava rad sa distribuiranim bazama podataka, razmjenu pisama putem e-maila, poruke putem telekonferencija, ćaskanje u realnom vremenu, slanje fajlova itd. Svaki servis (ponekad kažu: servis, servis) radi po određenim pravilima (protokolima). ..

Uvod
1. Globalne mreže
2. Načini povezivanja na Internet
3. Prebacivanje kanala, poruka i paketa
4. Protokoli, usluge, usluge
5. Pregledači
6. Pretraživači i imenici
7. Osnovni koncepti web dizajna
8. Struktura web stranice
9. Mrežne tehnologije web dizajna
10. HTML jezik
10.1. Formatiranje teksta
10.2. Stolovi
10.3. Grafika
10.4. Hiperveze
10.5. Meta oznake
10.6. Link mape
10.7. Multimedija
10.8. Okviri
10.9. Kaskadni CSS stilovi
11. JavaScript jezik
11.1. Redoslijed pokretanja skripte
11.2. Metode unosa informacija
11.2.1. Unošenje informacija metodom policajac-firma ().
11.2.2. Unos informacija pomoću Promt () metode
11.2.3. Unos informacija pomoću okvira za tekst
11.2.4. Unos i izlaz informacija pomoću tcxtarca tekstualnog područja
11.2.5. Interaktivni oblici
11.3. Metode prikaza informacija
11.3.1. Prikaz informacija pomoću metode upozorenja ().
11.3.2. Prikaz informacija pomoću metode write ().
11.3.3. Prikaz informacija pomoću okvira za tekst
11.3.4 Prikaz informacija pomoću kreiranih prozora
11.4. Događaji
11.5. Aritmetičke operacije
11.6. Logičke operacije i operacije pomaka
11.7. Operacije sa string varijablama
11.7.1. Pretvaranje brojeva iz jednog brojevnog sistema u drugi.
11.8. Matematičke funkcije i konstante
11.9. Redovni ciklusi
11.10 Operatori prijenosa uvjetne kontrole if-else (cond) i prekidač (x)
11.11 Primjeri skripti
11.11.1 Animacija u naslovnoj traci pretraživača
11.11.2 Osvijetljeno dugme
11.11.3 Implementacija iterativnih petlji
Dodatak 1: Spisak laboratorijskih radova i zadataka koji se nalaze na optičkom disku
Dodatak 2: Procedura za pokretanje test programa
Dodatak 3: Lokacija "Samara i ovo je sama Rusija"
Zaključak
Bibliografija

Besplatno preuzmite e-knjigu u prikladnom formatu, gledajte i čitajte:
Preuzmite knjigu Uvod u web dizajn, tutorijal, Aleksejev A.P., 2008 - fileskachat.com, brzo i besplatno.

Uvod u web dizajn

• Šta je web dizajn?
• Zašto je ovo potrebno?
• Neophodni alati
• Glavni "postulati" web dizajna

• Tehnologije web dizajna
• Logička i fizička struktura stranice
• Početna stranica
• Dinamički i statični izgled stranice
• Statički izgled stranice
• Dinamički izgled stranice

• Elementi web stranice
• Gdje početi?

Šta je web dizajn?

Svaki resurs objavljen na World Wide Webu, od globalnog informativnog portala sa desetinama hiljada posjetilaca dnevno do skromne početne stranice, koju mjesečno posjećuju samo dvije osobe, uključujući i njenog autora, prvenstveno je umjetničko djelo, kompleksan set inženjerskih i dizajnerskih rješenja. Proces kreiranja takvog komada naziva se web dizajn.

Web dizajn je kreativnost, a kreativnost je jaka. Upravo u oblasti web dizajna možete u potpunosti pokazati sve svoje sposobnosti, jer ovdje ste vi sami i posjetitelji vaše stranice cenzor rezultata vašeg rada. Niko vas ne ograničava ni u obimu, ni u sadržaju, ni u izgledu resursa koji razvijate, niko vas ne tjera u bilo kakve krute okvire. Budite kreativni i prije ili kasnije vaš će projekt naći zasluženo priznanje višemilionske publike korisnika interneta.

Početna stranica odjeljka; moja porodica

Priča o mojoj ženi

Priča o mom malom sinu

Moja fotografija na plaži u Sočiju

Iz svega rečenog postaje očigledno da je fizička struktura sajta skrivena od posetilaca vašeg resursa: oni mogu samo da posmatraju logičku strukturu, i to baš onako kako je predstavljena uz pomoć navigacionih elemenata. Odavde slijedi potpuno logičan zaključak: struktura navigacijskog sistema bi trebala, ako ne u potpunosti da se ponovi, onda barem što je više moguće odgovara logičkoj strukturi stranice koju ste razvili.

Početna stranica

Jedan od kriterija po kojem se različite web stranice mogu podijeliti u dvije glavne kategorije je da li imaju uvodnu stranicu ili ne.

Stranica zaglavlja je html dokument koji ne uključuje nikakve bitne informacije i elemente navigacije. Fajl naslovne stranice nosi naziv index.html, dok se početna stranica naziva drugačije i poziva se organiziranjem hiperveze sa početne stranice, koja se prva učitava kada se pristupi stranici. Glavna stranica po pravilu sadrži logo kompanije koja je vlasnik ovog resursa, brojač posjeta i prijedlog za odabir ćiriličnog kodiranja ili izbor između engleske i ruske verzije stranice. Primjer web resursa opremljenog takvom stranicom prikazan je na Sl. 3.2.

Prilikom pristupa stranicama koje nemaju početnu stranicu, prvo se prikazuje početni dokument koji uključuje neku vrstu sadržaja, elemente navigacije i ponekad najave tematskih naslova koji čine ovaj resurs. Na sl. 3.3 prikazuje primjer stranice bez početne stranice.

Da li koristiti početnu stranicu prilikom kreiranja vlastitog projekta na Internetu stvar je ukusa svakog webmastera. Teško je dati neke iscrpne preporuke u vezi s tim, jer konačna odluka zavisi prvenstveno od vaših umetničkih preferencija, a ponekad i od želje kupca koji plaća vaš rad.

Dinamički i statični izgled stranice

Moderne video kartice podržavaju nekoliko proizvoljno postavljenih video modova, koje karakterizira rezolucija ekrana i broj boja koje se koriste pri prikazivanju informacija na ekranu računara. Koristeći ugrađene funkcije operativnog sistema, korisnik može podesiti nekoliko standardnih rezolucija ekrana, kao što su 640x480, 800x600, 1024x768, 1152x864, 1280x1024 ili 1600x1200 piksela. Naravno, kada otvorite web stranicu u istom pretraživaču, možda neće biti prikazana na isti način, ovisno o rezoluciji ekrana koju koristi posjetitelj stranice.

Kako bi se izbjeglo pomicanje elemenata html dokumenta jedan u odnosu na drugi i, kao rezultat toga, deformacija web stranice u cjelini prilikom promjene parametara ekrana, koristi se prilično jednostavna i učinkovita tehnika: sve komponente web stranice su zatvorene u odgovarajuće ćelije nevidljive tabele, a svakom objektu je dodeljena jedna, striktno definisana pozicija. Tako se pojavljuje drugi kriterij prema kojem se sve postojeće web stranice mogu podijeliti u dvije uslovne kategorije. Ovoj tablici se može dodijeliti striktno definirana širina u pikselima, na primjer, 640 piksela, a zatim se čvrsto postaviti u centar ekrana ili pritisnuti na njegovu lijevu ivicu. Ovaj tip izgleda sajta može se nazvati statičnim jer se širina tabele ne menja u zavisnosti od rezolucije ekrana. Naravno, kada promijenite parametre ekrana, ne dolazi do ni najmanjeg pomaka elemenata dizajna stranice.

Drugi pristup je kada se širina nevidljive tabele koja sadrži fragmente veb stranice postavlja kao procenat trenutne širine ekrana. Kada se poveća rezolucija ekrana, tabela se razvlači horizontalno, a svi elementi smešteni u njene ćelije, pozicionirani ili u centru ili duž ivica kolona, ​​pomeraju se prema utvrđenom algoritmu. Zbog činjenice da se parametri tablice mijenjaju ovisno o postavkama ekrana, ovaj princip izgleda html dokumenta može se nazvati dinamičkim. Oba pristupa imaju i prednosti i nedostatke, koji su navedeni u nastavku.

Statički izgled stranice

Dostojanstvo. Jednostavnost algoritma izgleda dokumenta. Optimizacijom stranice za prikaz u rezoluciji na ekranu od 640x480 piksela, možete biti sigurni da elementi dizajna neće plutati kada promijenite prilagođene postavke ekrana. Pored toga, ova opcija izgleda sajta u većini slučajeva (podložno nizu dodatnih uslova) omogućava postizanje identičnog prikaza html dokumenta u pretraživačima Microsoft Internet Explorer i Netscape Navigator.

Nedostaci. Kada prikazujete dokument na računaru u visokoj rezoluciji ekrana, postoji primetna prazna margina oko ivica ekrana ili na desnoj strani ekrana.

Dinamički izgled stranice

Dostojanstvo. Dokument se proteže po cijeloj širini ekrana, ne ostavljajući neiskorištene prazne margine.

Nedostaci. Složenost izgleda i otklanjanja grešaka stranice, vrlo često se manifestuje neadekvatnost prikaza takvih dokumenata u pretraživačima Microsoft Internet Explorer i Netscape Navigator.

NAPOMENA Vrijednosti piksela (tačaka) koje se koriste u HTML komandama pretpostavljaju fizičku veličinu tačke na ekranu korisnika i zavise od tipa monitora.

Primeri implementacije sajtova sa statičkim i dinamičkim izgledom stranica prikazani su na Sl. 3.4 i 3.5. Ove slike su snimljene sa fiksnom rezolucijom ekrana od 800x600 tačaka.

Elementi web stranice

Svaka web stranica sadrži određeni skup standardnih elemenata koji su obavezne komponente svakog internetskog resursa. Naravno, asortiman i broj takvih objekata može varirati u zavisnosti od tematskog fokusa stranice, količine materijala objavljenih na njoj, kao i od ciljeva i zadataka kreatora ovog resursa. Raspored takvih elemenata, dizajn njihove relativne pozicije jedan je od glavnih zadataka web-mastera.

Prvi element web stranice koji ćemo pogledati je njen naslov. Može se napraviti iu tekstualnom i u grafičkom obliku, ali u oba slučaja treba da se nalazi na vrhu dokumenta. Ponekad se sa naslovom kombinuju meni za izbor ćiriličnog kodiranja i dugmad za prelazak sa ruske na englesku verziju sajta, ako je ovaj veb-resurs predstavljen na dva jezika. Neposredno podnaslov dokumenta, po pravilu, je prostor predviđen za postavljanje reklamnog banera. U većini slučajeva, uključivanje banera u gornji dio web stranice je preduvjet za registraciju stranice u servisima za razmjenu banera - sistemima koji oglašavaju resurs koji ste kreirali u zamjenu za prikazivanje reklama drugih članova mreže za razmjenu banera. na stranicama Vašeg sajta. Standardna veličina banera objavljenih ispod naslova dokumenta je obično 468x60 piksela. Ako koristite statički izgled stranice, širina zaglavlja vašeg dokumenta bit će približno 640 piksela, prvenstveno zbog potrebe da se dokument ispravno prikazuje na monitorima s rezolucijom ekrana od 640x480 piksela i da se izbjegne pojava horizontalnog traka za pomicanje koja otežava pregled. Očigledno je da će širina banera u ovom slučaju biti mnogo manja od širine naslova, zbog čega će se u dijelu stranice na kojem planirate dodijeliti prostor za oglašavanje formirati nezauzeti prostor koji se može popuniti sa logom kompanije koja je vlasnik ove stranice ili linkom na server koji implementira web.hosting. Naravno, logo nije uvijek neophodan: u pravilu se uključuje na web stranicu samo ako je stranica komercijalnog fokusa.

Glavni dio dokumenta zauzima takozvano tekstualno polje - područje u kojem se nalazi semantički sadržaj stranice: informativni informativni tekst i ilustracije. Navedeni elementi nazivaju se i sadržajem (od engleskog content - sadržaj). Lokacija tekstualnog okvira prvenstveno ovisi o tome kako web dizajner postavlja ostatak dokumenta.

Sljedeći obavezni dio web stranice su elementi za navigaciju - hiperveze koje povezuju ovaj dokument sa drugim dijelovima stranice. Elementi za navigaciju mogu se izvršiti u obliku tekstualnih nizova, grafičkih objekata, odnosno dugmadi ili aktivnih komponenti, na primjer, Java apleta. Potonji su isti gumbi koji, za razliku od svojih tradicionalnih sestara, mogu reagirati na pokrete miša, izvodeći neke jednostavne radnje kada kursor lebdi preko njih (uključivanje pozadinskog osvjetljenja, stvaranje efekta pritiska, promjena oblika, itd.) . Kao što sam već spomenuo u odjeljku Osnovni "postulati" web dizajna, navigacijski elementi trebaju biti raspoređeni tako da su uvijek na vidiku, pri ruci, odnosno da korisnik ne mora premotavati stranicu unazad. ako je tekstualno polje nekoliko fizičkih ekrana, a zatim dugo tražite veze do drugih odjeljaka. Najčešći pristup je postavljanje navigacijskih elemenata na lijevu stranu stranice.

Na dnu dokumenta uobičajeno je da se objavljuju podaci o programerima stranice i adresa e-pošte na koju posjetitelji resursa mogu poslati svoje odgovore, sugestije i želje vlasnicima stranice. Ako je web stranica početni dokument, na njenom dnu se postavlja i brojač pogodaka - mala skripta koja poziva CGI skriptu instaliranu na serveru, koja bilježi svako otvaranje dokumenta u pretraživaču korisnika, mijenjajući vrijednost indikator brojača. Zahvaljujući tome, web-master može lako odrediti broj posjetitelja koji su posjetili njegovu stranicu u bilo kojem vremenskom periodu. Imajte na umu da se brojač poseta postavlja samo na prvoj stranici koja se poziva prilikom pristupa sajtu, a nema ga u ostatku dokumenata resursa. Takođe se ne preporučuje postavljanje nekoliko različitih brojača na jednu stranicu.

Dakle, analizirali smo sve glavne komponente web stranice i njihovu moguću lokaciju jedna u odnosu na drugu.

U praksi je uobičajeno pronaći web stranice u čijem dizajnu su navigacijski elementi pozicionirani duž desne ivice ekrana. U ovom slučaju, polje teksta je pomaknuto ulijevo, a ostale komponente dokumenta su raspoređene po principu maksimalne estetike njihove kombinacije.

Kao što vidite sa slike, logo je u ovom slučaju postavljen u istoj ravni sa naslovom dokumenta, a reklamni baner je pozicioniran u odnosu na centar stranice. Ovim pristupom preporuča se zadržati grafički dizajn naslova, logotipa i reklamnog polja u jednoj boji i umjetničkom stilu - tada asimetrija položaja ovih objekata neće biti tako očigledna i neće rezati oči pristalica stroge, tabelarne estetike dizajna.

Elementi za navigaciju mogu se postaviti ne samo blizu desne i lijeve ivice stranice, već i na vrhu dokumenta. Ova opcija izgleda je, po mom mišljenju, najprikladnija za kreiranje početnih stranica: u ovom slučaju svi objekti stranice harmonično se uklapaju u navedenu širinu nevidljive tablice, dok je priprema same tablice uvelike pojednostavljena. Jedini nedostatak ovakvog pristupa je potreba za dupliranjem navigacijskih elemenata na dnu dokumenta, jer pri vertikalnom pomicanju stranice nestaju s vrha ekrana, a da bi došao do njih, korisnik će morati premotati ekran unazad. , što je, vidite, veoma nezgodno.

Naravno, sve što je rečeno u ovom dijelu nije lijek, već vodič za akciju. Pokušavam iznijeti samo opća načela koja se primjenjuju pri sastavljanju strukture stranice, konačna odluka uvijek ostaje na webmasteru. U konačnici, bez obzira koji dizajn stavite u osnovu svog budućeg projekta, rezultat vašeg rada će i dalje biti ispravan: nema cenzure na Internetu, niti bilo kakvih propisa koji tjeraju kreatora stranice u određene krute okvire. Primjer dizajnerskog rješenja koje ne spada ni u jednu od navedenih kategorija je takozvani mješoviti raspored.

Kao što možete vidjeti sa slike, u ovom primjeru, neki od kontrolnih elemenata ugrađeni su direktno u naslov stranice - riječ je o dugmadima za prebacivanje između ruske i engleske verzije stranice, kao i o navigacijskim tipkama: ovo može biti veza do e-mail adrese kreatora resursa, duplirana na dnu dokumenta, i veza do jednog od tematskih odjeljaka, na primjer, stranice s vijestima. Glavni blok navigacijskih elemenata pozicioniran je u odnosu na lijevu ivicu dokumenta, ali se meni za odabir ćiriličnog kodiranja nalazi direktno ispod reklamnog banera na vrhu stranice. Tekstualno polje je podijeljeno u dvije asimetrične kolone, a desna sadrži kratke najave tematskih naslova koji čine resurs, uključujući veze do ovih odjeljaka.

Očigledno, može postojati veliki izbor opcija za mješoviti izgled web stranice: konkretne odluke zavise od broja odjeljaka koji čine resurs, količine teksta pripremljenog za postavljanje na web stranicu i, konačno, od mašta samog dizajnera. Važno je samo da izgled stranice ne izaziva pritužbe posjetitelja. Na kraju krajeva, samo vi kao programer, vi i niko drugi, imate pravo da pokažete sve svoje sposobnosti i talente i napravite stranicu po svom ukusu. Kreatori nekih početnih stranica, ne mučeći se sumnjama, postavljaju brojač pogodaka u gornji desni ugao dokumenta, napišu naziv sajta sitnim slovima i objavljuju ga pod reklamnim banerom, i iz nekog razloga, navigacijski elementi se neočekivano pojavljuju tačno u sredini tekstualnog bloka, između priče o sebi i fotografija voljenog psa autora projekta. Za ukus i boju, kako kažu, nema drugova. Ali meni lično ova bolest izgleda neizlječiva.

Gdje početi?

Sada je vrijeme da prijeđemo na praktične aspekte web dizajna. A najhitnije pitanje koje se obično postavlja prilikom kreiranja prvog samostalnog projekta nalazi se u naslovu ovog odjeljka. Dakle, odakle početi? Od početka, naravno.

Prvo što treba da uradite pre nego što se upustite u razvoj bilo koje veb stranice je da skuvate šoljicu jake aromatične kafe ili čaja, sednete za sto i dobro razmislite. Ne šalim se. Trebali biste razmisliti o ciljevima koje ste sebi postavili prilikom kreiranja novog projekta. Načini njihovog postizanja, uključujući i sam dizajn, ovisit će o izboru ciljeva. Od pravilnog postavljanja zadataka zavisiće uspeh čitavog preduzeća. Želite li početnu stranicu? Divno. Uzmite olovku, komad papira i razmislite o tome koje tematske rubrike treba da obuhvati vaša buduća kreacija, šta biste tačno uz njegovu pomoć željeli poručiti progresivnoj javnosti. Jeste li odlučili napraviti neprofitnu informativnu stranicu? Divno. Odlučite čemu će biti posvećen. Ako se radi o zabavnom projektu, nakon što osmislite listu relevantnih naslova (na primjer, anegdote, crtani filmovi ili šaljive priče), morate odabrati odgovarajuće dizajnersko rješenje za njega, manje ili više koje odgovara sadržaju. Posjetioci će vjerovatno biti pomalo zbunjeni zabavnim projektom napravljenim u stilu ozbiljnog informativnog ili novinskog portala. Možda želite da objavite resurs posvećen pravljenju domaćih vina? Prošetajte internetom, pogledajte šta su vaše kolege već napravile, koje sekcije su na sličnim sajtovima, procenite koje informacije im nedostaju, a šta je, naprotiv, preobilje, kako se te informacije prezentuju potrošaču, da li dosadno je čitati ili, obrnuto, zanimljivo i fascinantno.

Trebate li razviti komercijalnu web stranicu? U ovom slučaju, i listu tematskih sekcija i konačnu odluku o tehnikama dizajna koje primjenjujete, kao što su korištenje korporativnih boja, posebnih fontova ili dugmadi stiliziranih tako da odgovaraju općem konceptu projekta, najvjerovatnije će donijeti kupac sajta. Međutim, u svakom slučaju, morat ćete mu pružiti nekoliko probnih opcija, takozvanih dizajnerskih projekata, koji pokazuju moguće implementacije budućeg resursa. Pogledajte web stranice konkurentskih organizacija, domaćih i stranih, pogledajte koji naslovi čine njihovu web stranicu, koji podaci se nude u svakoj tematskoj sekciji.

Nakon što ste se odlučili za broj, nazive i sadržaj svih sekcija vašeg projekta, možete preći na sljedeću fazu kreiranja stranice – dizajniranje njegove logičke i fizičke strukture. Mora se imati na umu da će se i lista naslova i broj materijala predstavljenih u njima, kao i sadržaj samih dokumenata, najvjerovatnije više puta mijenjati i dopunjavati. Neki dijelovi će s vremenom biti uklonjeni kao nepotrebni, neki - naprotiv, dodati, neke web stranice smatrat ćete već nebitnim, a neki dokument će, naprotiv, morati preraditi. Logičke i fizičke strukture vašeg projekta moraju zadovoljiti takve zahtjeve mobilnosti, ne biste trebali imati ni najmanjeg problema s organiziranjem ili reorganizacijom hiperlinkova unutar projekta ako bilo koji dokument koji ga čini odjednom prestane postojati. Također ne biste trebali redizajnirati sve web stranice kada dodajete novu kategoriju projektu, samo zato što postojeće hiperveze ne dozvoljavaju da izvršite takve promjene, a novo dugme za navigaciju nema gdje nagurati. Razmislite detaljno o svim hipervezama između stranica resursa, razvijte strukturu direktorija i poddirektorija u koje ćete smjestiti dokumente. Tek nakon toga možete se obratiti direktno pitanjima dizajna.

Razmotrite i skicirajte izgled vaših budućih web stranica. Sa olovkom. Na papiru. Imajte na umu da ako logička struktura vaše stranice podrazumijeva prisustvo početnih stranica odjeljka, ili, kako ih još zovu, indeksnih datoteka, dizajn ovih stranica, kao i početni dokument same stranice, najvjerovatnije će se razlikovati malo od dizajna informativnih stranica koje čine naslov. Index fajlovi obično sadrže linkove do dokumenata koji čine dati naslov, ponekad - kratke najave ovih dokumenata. Glavni sadržaj samih informativnih stranica je informativni tekst i, prema potrebi, ilustracije.

Nakon što ste predstavili opći izgled web stranica, razmislite o strukturi nevidljive tablice, koja će zatim uključiti njihove komponente. Prilikom dizajniranja tabele potrebno je uzeti u obzir da je između njenih kolona koji sadrže različite elemente dokumenta preporučljivo ostaviti prazne kolone širine jedan ili dva piksela. To se radi kako bi se izbjegao efekat lijepljenja kolona jedna za drugu, što se uočava kada nema horizontalnog uvlačenja između elemenata web stranice, što značajno kvari izgled dokumenta.

Kreiranje tabele rasporeda je možda jedna od najtežih procedura prilikom razvoja novog projekta. Gotovo je nemoguće precizno nacrtati tabelu iz prvog pokušaja. Vještina, zahvaljujući kojoj web-master crta sve potrebne redove i stupce okom za nekoliko sekundi, dolazi samo s iskustvom. Teško je ovdje dati bilo kakav konkretan savjet koji bi pomogao dizajneru u početnoj fazi. Postoji samo jedan način da naučite kako brzo dizajnirati tabelu izgleda za novu stranicu: učitajte nekoliko web stranica koje su kreirali drugi autori u FrontPage Express, pogledajte koje tablice koriste za prikaz ovih dokumenata, pažljivo ih proučite i zatim pokušajte kreirati par svojih....

Da biste napravili složene tabele, možete koristiti ugniježđenje jedne tablice u drugu: na primjer, primarna tablica od 640 tačaka specificira horizontalni prijelom stranice, a druga nevidljiva tablica, jednake širine, je ugniježđena u svaku od njenih ćelija, pružajući vertikalno cijepanje . Ovaj pristup vam omogućava da podijelite različite dijelove web stranice nezavisno jedan od drugog, stvarajući, na primjer, u jednom od njenih polja četiri okomite kolone različite širine, au drugom - dvije, dok radite s različitim parametrima ugniježđenih tabela unutar isti dokument - veličina razmaka između stupaca, debljina ivica itd.

Nakon što su glavni elementi dokumenta raspoređeni i nevidljiva tabela označena, trebalo bi da imate grubu skicu budućeg sajta. Sada je na redu priprema sadržaja.

Prvo, preporučujem da u bilo koji uređivač upišete sve potrebne tekstove, a najbolje je da ih sačuvate u formatu običnog teksta, odnosno u datoteku sa ekstenzijom .txt. Zatim morate nacrtati potrebne grafičke elemente u vektorskom uređivaču (na primjer, u Corel-Draw), izvesti ih u rasterski format, obraditi ih u uređivaču rasterske grafike (u našem slučaju govorimo o Adobe Photoshopu), dajući slikama potrebnu veličinu i rezoluciju, nakon čega je potrebno da se optimizuju korišćenjem specijalnih kompresora ili drugih sličnih sredstava. Detaljna priča o pripremi grafičkih slika ići će u petoj lekciji, za sada govorimo samo o redoslijedu radnji.

Tek nakon svih gore opisanih procedura možete započeti direktno sastavljanje stranice: kreiranje njenog izgleda u HTML editoru, pisanje i konačno otklanjanje grešaka koda.

Budući da će dizajn svih dokumenata koji čine vašu buduću stranicu vjerovatno biti gotovo identičan, prije svega se preporučuje da napravite tzv. šablon. Šablon je html dokument koji sadrži nevidljivu tabelu, naslov, sve grafičke objekte, elemente za navigaciju - drugim riječima, praktično sve, osim neposrednog sadržaja. Ako kasnije budete trebali u projekt uključiti novi dokument, trebat ćete samo otvoriti gotov predložak u html editoru i u njega uvesti tekst i sve potrebne ilustracije. Savjetujem vam da dizajnirate i spremite na disk dva različita predloška: jedan za stranicu sa informacijama i jedan za datoteku indeksa. Kada je stranica spremna, potrebno je provjeriti je li identičan prikaz u različitim pretraživačima pri različitim rezolucijama ekrana i paletama boja. Učitajte html dokument koji ste kreirali u Microsoft Internet Explorer, postavite paletu boja ekrana na 256 boja, a zatim promijenite rezoluciju ekrana na 640x480, 800x600 i, konačno, na 1024x768 piksela. Pogledajte da li se izgled stranice mijenja, da li njeni elementi izmiču jedan u odnosu na drugi. Slijedite isti postupak za Netscape Navigator. Ako ne primijetite nikakve značajne promjene, možete biti sigurni da će se drugi dokumenti kreirani korištenjem istog predloška s vjerovatnoćom od 95% prikazati ispravno.

Kao rezultat toga, slijed radnji za razvoj web stranice svodi se na sljedeći jednostavan algoritam:

• Postavljanje ciljeva i definisanje ključnih ciljeva.
• Izrada liste budućih tematskih sekcija.
• Razvoj logičke i fizičke strukture resursa.
• Izrada skice dizajna, izgleda lokacije, nevidljive tabele izgleda.
• Priprema tekstualnih materijala.
• Priprema grafičkih materijala u vektorskom obliku.
• Izvoz vektorskih slika u rasterski format, optimizacija slike.
• Kreiranje šablona za web stranice.
• Napravite web stranice i otklanjajte greške koda.
• Provjera identiteta prikaza web stranica sa različitim rezolucijama ekrana i paletom boja iu različitim pretraživačima.

M.: SOLON-PRESS, 2008.-- 192 str. (Serijal Studentska biblioteka)

Priručnik se može koristiti za stacionarno učenje i učenje na daljinu u izučavanju sljedećih disciplina: Programiranje na jeziku visokog nivoa, Interakcija čovjek-mašina, Objektno orijentirano programiranje.

Glavna pažnja u priručniku je posvećena HTML programskom jeziku, CSS tehnologiji, JavaScript programskom jeziku, grafičkom uređivaču Adobe Photoshop, multimedijalnoj tehnologiji.

Priručniku je priložen elektronski udžbenik na CD-ROM-u koji sadrži teorijski materijal, primjere realizacije različitih zadataka (mjesto za obuku) i praktični dio (zadaci, kontrolna pitanja i smjernice za laboratorijski rad). Osim toga, na disku se nalazi program za testiranje uz pomoć kojeg nastavnik može brzo i objektivno procijeniti stepen savladanosti gradiva.
Zanimljiva karakteristika elektronskog udžbenika je da svaki dio prati smirena instrumentalna muzika koja stvara dobro raspoloženje.

Ovaj udžbenik je namenjen studentima specijalnosti 220400 (230105) - Softver za računarsku tehnologiju i automatizovane sisteme. Prisustvo elektronskog udžbenika omogućava nastavnicima da jednostavno riješe problem repliciranja smjernica.
Knjiga je nezamjenjiva za sve početnike u učenju web dizajna.

Format: djvu

veličina: 5, 7 Mb

Skinuti: yandex.disk

SADRŽAJ
Uvod 3
1. Globalne mrežne mreže 6
2. Načini povezivanja na Internet 11I
3. Promjena kanala, poruka i paketa. trinaest
4. Protokoli, usluge, usluge 15
5. Pregledači 18
6. Pretraživači i imenici. 24
7. Osnovni koncepti web dizajna 31
8. Struktura web stranice 37
9. Mrežne tehnologije web dizajna 39
10. HTML 46
10.1. Formatiranje teksta 51
10.2. Tabele .. 55
10.3. Grafika 61
10.4. Hiperveze 67
10.5. Meta tagovi 71
10.6. Referentne karte 73
10.7. Multimedija 77
10.8. Okviri 81
10.9. CSS 85 Kaskadni listovi stilova
11. JavaScript 91
11.1. Redosled izvođenja skripte 95
11.2. Metode unosa informacija 98
11.2.1. Unošenje informacija metodom sop-firmO 99
11.2.2. Unos informacija pomoću metode Promt () .. 101
11.2.3. Unos informacija pomoću okvira za tekst 103
11.2.4. Unos i izlaz informacija pomoću tekstualnog područja textarca 106
11.2.5. Interaktivni obrasci 108
11.3. Metode prikaza informacija 124
11.3.1. Prikaz informacija pomoću metode upozorenja ().
11.3.2. Prikazivanje informacija korištenjem metode pisanja () 126
11.3.3. Prikaz informacija pomoću okvira za tekst 127
11.3.4 Prikazivanje informacija pomoću kreiranog Windowsa 129
11.4. Događaji 132
11.5. Aritmetičke operacije., 141
11.6. Logičke operacije i operacije pomaka 143
11.7. Operacije sa string varijablama. 147
11.7.1. Pretvaranje brojeva iz jednog brojevnog sistema u drugi 150
11.8. Matematičke funkcije i konstante 152
11.9. Redovni ciklusi 158
11.10 Operatori uslovnog prijenosa kontrole if-else (cond) Hswitch (x) 160
11.11 Primjeri skripti 167
11.11.1 Animacija u naslovnoj traci pretraživača 168
11.11.2 Osvetljeno dugme 169
11.11.3 Implementacija iteracijskih petlji 171
Prilog 1: Spisak laboratorijskih radova i zadataka koji se nalaze na optičkom disku 174
Dodatak 2: Procedura za izvođenje programa testiranja 176
Dodatak 3: Lokacija "Samara i ovo je sama Rusija"
Zaključak 180
Literatura 181