CAPITOLUL 16: Crearea paginilor web interactive În capitolul anterior, am explorat biblioteca Ext Core. Abundența de obiecte, proprietăți, metode și evenimente îți face capul învârtit... Cum să aplici toată această bogăție în practică? Acest capitol va fi dedicat în întregime acestui lucru. Vom învăța

Crearea secvențelor de pagini: Ce este o secvență de pagini? Aceasta este o serie de pagini cu aceleași caracteristici (de exemplu, un capitol dintr-o carte) care pot fi formatate în același mod dacă se dorește. Paginile din documentul rezultat în

Crearea numerelor de pagină: Obiect de formatare încorporat creează o zonă inline care afișează numărul curent al paginii. De exemplu: Acum citiți pagina .Cu element pot fi folosite următoarele

Crearea, deschiderea și salvarea paginilor web Folosind programul, puteți crea pagini web noi, precum și le puteți edita pe cele create anterior.Pentru a crea o pagină web nouă, trebuie să executați comanda din meniul principal Fișier?

Capitolul 1 Lumea modernă. Era tehnologiei informației Unul dintre paradoxurile dezvoltării umane este că, de-a lungul întregii sale dezvoltări, omul a folosit, acumulat și transmis informații fără să înțeleagă sau măcar să se gândească la ea.

Capitolul 6 Crearea paginilor de acces la date O pagină de acces la date este un tip special de fișier conceput pentru vizualizarea și lucrul prin Internet sau intranet cu date stocate în bazele de date Microsoft Access sau Microsoft SQL Server. O pagină de acces la date este încărcată într-o bază de date Access 2002

Manualul poate fi utilizat pentru învățământul staționar și la distanță în studiul următoarelor discipline: Programare într-un limbaj de nivel înalt. Interacțiunea om-mașină. Programare orientată pe obiecte.
Manualul se concentrează pe limbajul de programare HTML, tehnologia CSS, limbajul de programare JavaScript, editorul grafic Adobe Photoshop și tehnologia multimedia.
Manualul de instruire este însoțit de un manual electronic pe CD, care conține material teoretic, exemple de implementare a diferitelor sarcini (site de formare) și o parte practică (sarcini, întrebări de testare și îndrumări pentru efectuarea lucrărilor de laborator). În plus, discul conține un program de testare cu ajutorul căruia profesorul poate evalua rapid și obiectiv gradul de stăpânire a materialului.
O caracteristică curioasă a manualului electronic este că fiecare secțiune este însoțită de muzică instrumentală calmă care creează o bună dispoziție.
Acest manual este destinat studenților specialității 220400 (230105) - Software de calculator și sisteme automatizate. Prezența unui manual electronic permite profesorilor să rezolve pur și simplu problema replicării instrucțiunilor metodologice.
Cartea este indispensabilă pentru oricine începe să studieze designul web.

1. Rețele globale de calculatoare.

Rețelele globale (cum ar fi rețelele locale) constau din calculatoare conectate prin canale de comunicare. Rețelele globale de calculatoare (WAN) din întreaga lume sunt interconectate prin Internet.
Pentru a lucra într-un sistem de alimentare cu apă caldă, utilizatorul trebuie să aibă hardware-ul și software-ul corespunzător. În cel mai simplu caz hardware, trebuie să instalați suplimentar un modem, care este utilizat pentru a comunica printr-o linie telefonică (de exemplu, dintr-un apartament). Rețineți că computerele moderne sunt echipate cu plăci de rețea, iar atunci când se conectează la o rețea printr-un canal dedicat, nu este nevoie de hardware suplimentar.
Software-ul este împărțit în două clase:
programe server situate pe nodul de rețea care deservește computerul utilizatorului;
programe client care se află pe computerul utilizatorului și utilizează serviciile serverului.
Rețelele globale oferă utilizatorilor o varietate de servicii. WAN-urile vă permit să lucrați cu baze de date distribuite, să faceți schimb de scrisori prin e-mail, mesaje prin teleconferințe, chat în timp real, trimiteți fișiere etc. Fiecare serviciu (numit uneori serviciu, serviciu) funcționează după anumite reguli (protocoale).

Introducere
1. Rețele globale
2. Metode de conectare la Internet
3. Comutare de circuite, mesaje și pachete
4. Protocoale, servicii, servicii
5. Browsere
6. Motoare de căutare și directoare
7. Concepte de bază ale designului web
8. Structura paginii web
9. Tehnologii de rețea de Web design
10. Limbajul HTML
10.1. Formatarea textului
10.2. Mese
10.3. Arte grafice
10.4. Hiperlinkuri
10.5. Meta etichete
10.6. Link hărți
10.7. Multimedia
10.8. Rame
10.9. Foi de stil CSS în cascadă
11. Limbajul JavaScript
11.1. Ordinea de lansare a scriptului
11.2. Metode de introducere a informațiilor
11.2.1. Introducerea informațiilor folosind metoda con-firm().
11.2.2. Introducerea informațiilor folosind metoda promt().
11.2.3. Introducerea informațiilor folosind un câmp de text
11.2.4. Introducerea și afișarea informațiilor folosind zona de text tcxtarca
11.2.5. Formulare interactive
11.3. Metode de ieșire a informațiilor
11.3.1. Afișarea informațiilor folosind metoda alert().
11.3.2. Ieșirea informațiilor folosind metoda write().
11.3.3. Afișarea informațiilor folosind un câmp text
11.3.4 Afișarea informațiilor folosind ferestrele create
11.4. Evenimente
11.5. Operatii aritmetice
11.6. Operații logice și de schimb
11.7. Operații cu variabile șir
11.7.1. Conversia numerelor dintr-un sistem numeric în altul.
11.8. Funcții și constante matematice
11.9. Cicluri regulate
11.10 Operatori de transfer condiționat if-else(cond) și switch(x)
11.11 Exemple de scripturi
11.11.1 Animație în bara de titlu a browserului
11.11.2 Buton iluminat
11.11.3 Implementarea buclelor iterative
Anexa 1: Lista lucrărilor și sarcinilor de laborator plasate pe discul optic
Anexa 2: Procedura de lansare a programului de testare
Anexa 3: Site-ul web „Samara este Rusia însăși”
Concluzie
Bibliografie

Descărcați cartea electronică gratuit într-un format convenabil, vizionați și citiți:
Descarcă cartea Introducere în Web Design, ghid de studiu, Alekseev A.P., 2008 - fileskachat.com, descărcare rapidă și gratuită.

Introducere în Web Design

• Ce este web design?
• De ce este necesar acest lucru?
• Instrumente necesare
• „Populatele” de bază ale designului web

• Tehnologii de web design
• Structura logică și fizică a site-ului
• pagina principala
• Aspect dinamic și static al site-ului web
• Aspect static de pagină
• Aspect dinamic de pagină

• Elementele paginii web
• Unde sa încep?

Ce este web design?

Orice resursă publicată pe World Wide Web, de la un portal global de informare cu zeci de mii de vizitatori pe zi până la o pagină de pornire modestă vizitată de doar două persoane pe lună, inclusiv autorul său, este în primul rând o operă de artă, un complex set de soluții de inginerie și proiectare. Procesul de creare a unei astfel de lucrări se numește web design.

Designul web este creativitate și creativitate pronunțată. În domeniul web design-ului îți poți demonstra pe deplin toate abilitățile, deoarece aici cenzorul rezultatelor muncii tale ești tu însuți și vizitatorii paginii tale. Nimeni nu vă limitează volumul, conținutul sau aspectul resursei pe care o dezvoltați; nimeni nu vă obligă să intrați în vreun cadru strict. Fii creativ și, mai devreme sau mai târziu, proiectul pe care îl creezi va găsi o recunoaștere binemeritată de la un public multimilionar de utilizatori de internet.

Pagina de început a secțiunii; familia mea

O poveste despre soția mea

O poveste despre fiul meu

Fotografia mea pe plaja din Soci

Din tot ce s-a spus, devine evident că structura fizică a site-ului este ascunsă vizitatorilor resursei dvs.: aceștia pot observa doar structura logică și exact așa cum este prezentată folosind elemente de navigare. Acest lucru duce la o concluzie complet logică: structura sistemului de navigație ar trebui, dacă nu se repetă complet, atunci cel puțin să corespundă cât mai aproape posibil cu structura logică a site-ului pe care l-ați dezvoltat.

pagina principala

Unul dintre criteriile prin care putem împărți diverse site-uri web în două categorii principale este prezența unei pagini de titlu (splash) sau lipsa acesteia.

Pagina principală este un document HTML care nu include conținut sau elemente de navigare. Fișierul paginii principale se numește index.html, în timp ce pagina de start este numită diferit și este apelată prin organizarea unui hyperlink din pagina principală, care se încarcă mai întâi la accesarea site-ului. Pagina principală conține de obicei sigla companiei care deține această resursă, un contor de vizite și o ofertă de a alege codarea chirilică sau o alegere între versiunile în engleză și rusă ale site-ului. Un exemplu de resursă web echipată cu o astfel de pagină este prezentat în Fig. 3.2.

La accesarea site-urilor care nu sunt dotate cu o pagină de titlu, primul document afișat este documentul de start, care include unele informații de conținut, elemente de navigare, iar uneori anunțuri ale secțiunilor tematice care compun această resursă. În fig. Figura 3.3 prezintă un exemplu de site care nu are o pagină de titlu.

Dacă folosiți sau nu o pagină de pornire atunci când vă creați propriul proiect pe Internet este o chestiune de gust pentru fiecare webmaster. Este dificil să dai recomandări cuprinzătoare în acest sens, deoarece decizia finală depinde în primul rând de preferințele tale artistice și uneori de dorințele clientului care plătește pentru munca ta.

Aspect dinamic și static al site-ului web

Plăcile video moderne acceptă mai multe moduri video setate arbitrar, caracterizate prin rezoluția ecranului și numărul de culori utilizate la afișarea informațiilor pe ecranul computerului. Folosind funcțiile încorporate ale sistemului de operare, utilizatorul poate seta mai multe valori standard ale rezoluției ecranului, de exemplu 640x480, 800x600, 1024x768, 1152x864, 1280x1024 sau 1600x1200 pixeli. Desigur, la deschiderea unei pagini web în același browser, este posibil ca aceasta să nu fie afișată în același mod în funcție de rezoluția ecranului utilizată de vizitatorul site-ului.

Pentru a evita deplasarea elementelor unui document html unul față de celălalt și, în consecință, deformarea întregii pagini web la modificarea parametrilor ecranului, se folosește o tehnică destul de simplă și eficientă: toate componentele paginii web sunt plasate în celulele corespunzătoare ale unui tabel invizibil, fiecăruia i se atribuie o poziție strict definită. Astfel, apare un al doilea criteriu prin care toate site-urile existente pot fi împărțite în două categorii condiționate. Acestui tabel i se poate atribui o lățime strict definită în pixeli, de exemplu, 640 pixeli, și apoi poziționat rigid în centrul ecranului sau apăsat pe marginea stângă. Această opțiune de aspect al site-ului poate fi numită static, deoarece lățimea tabelului nu se modifică în funcție de rezoluția ecranului. Desigur, atunci când se schimbă parametrii ecranului, nu există nici cea mai mică schimbare în elementele de design ale paginii.

O altă abordare este atunci când lățimea unui tabel invizibil care conține fragmente dintr-o pagină web este setată ca procent din lățimea curentă a ecranului. Pe măsură ce rezoluția ecranului crește, tabelul este întins pe orizontală, iar toate elementele plasate în celulele sale, poziționate fie în centrul, fie la marginile coloanelor, sunt deplasate conform algoritmului stabilit. Datorită faptului că parametrii tabelului se modifică în funcție de setările ecranului, acest principiu de aranjare a unui document HTML poate fi numit dinamic. Ambele abordări au atât avantaje, cât și dezavantaje, care sunt enumerate mai jos.

Aspect static de pagină

Avantaje. Simplitatea algoritmului de aspect al documentului. Optimizând pagina dvs. pentru a fi afișată la o rezoluție a ecranului de 640x480 pixeli, puteți fi sigur că elementele de design nu vor pluti atunci când schimbați setările ecranului utilizatorului. În plus, această opțiune de aspect al site-ului în majoritatea cazurilor (sub rezerva unui număr de condiții suplimentare) vă permite să obțineți afișarea identică a unui document HTML în browserele Microsoft Internet Explorer și Netscape Navigator.

Defecte. Când afișați un document pe un computer la o rezoluție mare a ecranului, există o zonă goală vizibilă în jurul marginilor ecranului sau în partea dreaptă a ecranului.

Aspect dinamic de pagină

Avantaje. Documentul se întinde pe toată lățimea ecranului, fără a lăsa margini goale neutilizate.

Defecte. Complexitatea aspectului paginii și a depanării are ca rezultat adesea afișarea inadecvată a unor astfel de documente în browserele Microsoft Internet Explorer și Netscape Navigator.

NOTĂ Valorile pixelilor (puncte convenționale) utilizate în comenzile HTML implică dimensiunile fizice ale unui punct de pe ecranul utilizatorului și depind de tipul monitorului acestuia.

Exemple de implementare a site-urilor cu aspect de pagină statică și dinamică sunt prezentate în Fig. 3.4 și 3.5. Aceste imagini au fost realizate cu o rezoluție fixă ​​a ecranului de 800x600 pixeli.

Elementele paginii web

Orice pagină web conține un anumit set de elemente standard care sunt componente obligatorii ale fiecărei resurse Internet. Desigur, gama și numărul de astfel de obiecte pot varia în funcție de focalizarea tematică a site-ului, de volumul de materiale publicate pe acesta, precum și de scopurile și obiectivele pe care creatorul acestei resurse și le stabilește. Dispunerea unor astfel de elemente, proiectarea poziției lor relative este una dintre sarcinile principale ale webmasterului.

Primul element al unei pagini web pe care trebuie să ne uităm este titlul acesteia. Poate fi realizat fie sub formă de text, fie sub formă grafică, dar în ambele cazuri ar trebui să fie situat în partea de sus a documentului. Uneori, antetul este combinat cu un meniu pentru selectarea codificării chirilice și butoane pentru trecerea de la versiunea rusă la cea engleză a site-ului, dacă această resursă web este prezentată în două limbi. Direct sub titlul documentului, de regulă, se află spațiul alocat pentru amplasarea unui banner publicitar. Includerea unui banner în partea de sus a paginii web în cele mai multe cazuri este o condiție prealabilă pentru înregistrarea unui site în serviciile de schimb de bannere - sisteme care promovează resursa pe care ați creat-o în schimbul afișării reclamelor altor participanți la rețeaua de schimb de bannere pe paginile de Site-ul tău. Dimensiunea standard a bannerelor publicate sub titlul documentului este de obicei 468x60 pixeli. Dacă utilizați un aspect de pagină static, lățimea antetului documentului va fi de aproximativ 640 de pixeli, în primul rând pentru a vă asigura că documentul este afișat corect pe monitoare de 640 x 480 pixeli și pentru a evita o bară de defilare orizontală care îngreunează vizualizarea. Evident, lățimea bannerului în acest caz va fi semnificativ mai mică decât lățimea antetului, din cauza căreia în partea din pagină în care intenționați să alocați spațiu pentru publicitate va apărea spațiu neocupat, care poate fi umplut cu logo-ul companiei care deține acest site sau un link către serverul care implementează web. Desigur, un logo nu este întotdeauna necesar: ​​de regulă, acesta este inclus într-o pagină web doar dacă site-ul are un accent comercial.

Partea principală a documentului este ocupată de așa-numitul câmp de text - zona în care se află conținutul semantic al paginii: text cu informații semnificative și ilustrații. Elementele enumerate mai sunt numite și conținut (din engleză, conținut). Locația câmpului de text depinde în primul rând de modul în care designerul web va plasa elementele rămase ale documentului.

Următoarea componentă obligatorie a unei pagini web sunt elementele de navigare - hyperlink-uri care conectează acest document cu alte secțiuni ale site-ului. Elementele de navigare pot fi realizate sub formă de șiruri de text, obiecte grafice, adică butoane sau componente active, cum ar fi applet-urile Java. Acestea din urmă sunt aceleași butoane care, spre deosebire de surorile lor tradiționale, pot răspunde la mișcările mouse-ului, efectuând câteva acțiuni simple atunci când cursorul este plasat peste ele (pornirea luminii de fundal, crearea unui efect de clic, schimbarea formei etc.). După cum am menționat deja în secțiunea „Postulate” de bază ale designului web, elementele de navigare trebuie poziționate astfel încât să fie mereu la vedere, la îndemână, adică astfel încât utilizatorul să nu fie nevoit să deruleze pagina înapoi dacă câmpul de text are mai multe ecrane fizice în înălțime, iar apoi petreceți mult timp căutând link-uri către alte secțiuni. Cea mai stabilită abordare este plasarea elementelor de navigare pe marginea stângă a paginii.

În partea de jos a documentului, se obișnuiește să se publice informații despre dezvoltatorii site-ului și o adresă de e-mail la care vizitatorii resursei își pot trimite răspunsurile, sugestiile și dorințele proprietarilor paginii. Dacă pagina web este documentul de pornire, în partea de jos este plasat și un contor de accesări - un mic script care apelează un script CGI instalat pe server, care înregistrează fiecare deschidere a unui document în browserul utilizatorului, schimbând valoarea lui indicatorul de contor. Datorită acestui fapt, webmasterul poate determina cu ușurință numărul de vizitatori care i-au vizitat pagina într-o perioadă de timp. Observ că contorul de vizite este instalat doar pe prima pagină apelată la accesarea site-ului; nu este prezent în alte documente ale resursei. De asemenea, nu este recomandat să plasați mai multe contoare diferite pe o pagină.

Așadar, am examinat toate componentele principale ale unei pagini web și posibila lor locație una față de alta.

În practică, întâlnim adesea site-uri web în care designul elementelor de navigare este poziționat de-a lungul marginii din dreapta a ecranului. În acest caz, câmpul de text este deplasat spre stânga, componentele rămase ale documentului sunt aranjate pe principiul esteticii maxime a combinației lor.

După cum se poate observa din figură, în acest caz logo-ul este plasat la același nivel cu titlul documentului, iar bannerul publicitar este poziționat relativ la centrul paginii. Cu această abordare, se recomandă menținerea designului grafic al antetului, al logo-ului și al domeniului de publicitate într-o singură culoare și stil artistic - atunci asimetria poziției acestor obiecte nu va fi atât de evidentă și nu va jigni ochii susținătorilor. de o estetică strictă a designului tabular.

Elementele de navigare pot fi plasate nu numai lângă marginile din dreapta și din stânga paginii, ci și în partea de sus a documentului. Această opțiune de aspect este cea mai potrivită, după părerea mea, la crearea paginilor de pornire: în acest caz, toate obiectele paginii se încadrează armonios în lățimea dată a tabelului invizibil, în timp ce pregătirea tabelului în sine este mult simplificată. Singurul dezavantaj al acestei abordări este necesitatea de a duplica elementele de navigare din partea de jos a documentului, deoarece la derularea verticală a paginii, acestea dispar în spatele marginii de sus a ecranului, iar pentru a ajunge la ele, utilizatorul va trebui să derulați înapoi ecranul, ceea ce, vedeți, este foarte incomod.

Desigur, tot ceea ce s-a spus în această secțiune nu este un panaceu, ci un ghid de acțiune. Încerc să subliniez doar principiile generale care sunt utilizate atunci când elaborez structura unui site, dar decizia finală rămâne întotdeauna a webmasterului. În cele din urmă, indiferent de designul pe care îl folosești ca bază pentru viitorul tău proiect, rezultatul muncii tale va fi în continuare corect: pe Internet nu există nici cenzură, nici reglementări care să oblige creatorul site-ului să respecte unul sau altul cadru strict. Un exemplu de soluție de proiectare care nu se încadrează în niciuna dintre categoriile de mai sus este așa-numitul aspect mixt

După cum se poate vedea din figură, în acest exemplu, unele dintre elementele de control sunt integrate direct în antetul paginii - vorbim despre butoanele pentru comutarea între versiunile în rusă și engleză ale site-ului, precum și butoanele de navigare: acest lucru poate să fie un link către adresa de e-mail a creatorilor de resurse, duplicat în documentul de jos, și un link către una dintre secțiunile tematice, de exemplu, o pagină de știri. Blocul principal de elemente de navigare este poziționat relativ la marginea din stânga a documentului, dar meniul de selectare a codificării chirilice se află chiar sub bannerul publicitar din partea de sus a paginii. Câmpul de text este împărțit în două coloane asimetrice, iar cel din dreapta conține scurte anunțuri ale secțiunilor tematice care alcătuiesc resursa, inclusiv linkuri către aceste secțiuni.

Evident, poate exista o mare varietate de opțiuni mixte de layout pentru o pagină web: soluțiile specifice depind de numărul de secțiuni care alcătuiesc resursa, de volumul de text pregătit pentru plasare pe site și, în sfârșit, de imaginația designerul însuși. Este important doar ca aspectul site-ului să nu provoace plângeri din partea vizitatorilor. În cele din urmă, doar tu în calitate de dezvoltator, tu și nimeni altcineva, aveți dreptul să vă arătați toate abilitățile și talentele și să aranjați pagina după propriul gust. Creatorii unor pagini de start, fără chinuiți de îndoieli, plasează contorul de hit-uri în colțul din dreapta sus al documentului, numele site-ului este scris cu font mic, îngrijit și publicat sub un banner publicitar, iar din anumite motive elemente de navigare apar pe neașteptate chiar în mijlocul blocului de text, între povestea despre tine și fotografiile câinelui îndrăgit al autorului proiectului. Nu există tovarăși pentru gust și culoare, după cum se spune. Dar personal, această boală mi se pare incurabilă.

Unde sa încep?

Este timpul să trecem la aspectele practice ale designului web. Și cea mai presantă întrebare, care apare de obicei la crearea primului proiect independent, este inclusă în titlul acestei secțiuni. Deci de unde să încep? De la început, desigur.

Primul lucru pe care trebuie să-l faceți înainte de a începe să dezvoltați orice site web este să preparați o ceașcă de cafea sau ceai puternic aromat, să vă așezați la masă și să gândiți bine. Nu glumesc. Ar trebui să vă gândiți la obiectivele pe care vi le-ați stabilit atunci când creați un nou proiect. Alegerea obiectivelor va determina metodele de realizare a acestora, inclusiv designul în sine. Succesul întregii întreprinderi va depinde de stabilirea corectă a sarcinilor. Vrei o pagină de pornire? Uimitor. Luați un pix, o hârtie și descoperiți ce secțiuni tematice ar trebui să includă viitoarea dvs. creație, despre ce anume ați dori să spuneți publicului progresist cu ajutorul acestuia. Te-ai decis să creezi un site de informare non-profit? Minunat. Decideți pentru ce va fi dedicat. Dacă acesta este un proiect de divertisment, după ce veniți cu o listă de categorii relevante (de exemplu, glume, caricaturi sau povești pline de umor), trebuie să alegeți o soluție de design potrivită pentru acesta, care să corespundă mai mult sau mai puțin conținutului. Vizitatorii vor fi cel mai probabil ușor dezorientați de un proiect de divertisment conceput în stilul unui portal serios de informații sau știri. Poate doriți să publicați o resursă dedicată preparării vinurilor de casă? Faceți o plimbare pe internet, uitați-vă la ce au creat deja colegii dvs., ce secțiuni sunt pe site-uri similare, evaluați ce informații lipsesc pe ele și ce informații sunt, dimpotrivă, supraabundente, cum sunt prezentate aceste informații consumatorului , fie că este plictisitor de citit sau, dimpotrivă, interesant și fascinant.

Aveți nevoie să dezvoltați un site comercial? În acest caz, atât lista secțiunilor tematice, cât și decizia finală cu privire la tehnicile de design pe care le utilizați, precum folosirea culorilor corporative, a fonturilor speciale sau a butoanelor stilizate pentru a se potrivi cu conceptul de ansamblu al proiectului, vor fi cel mai probabil luate de către clientul site-ului. Cu toate acestea, în orice caz, va trebui să îi oferiți mai multe opțiuni de probă, așa-numitele proiecte de proiectare, care să arate posibile implementări ale viitoarei resurse. Consultați site-urile web ale organizațiilor concurente, interne și străine, vedeți ce secțiuni alcătuiesc site-ul lor, ce date sunt oferite în fiecare secțiune tematică.

Odată ce v-ați decis asupra numărului, numelor și conținutului tuturor secțiunilor proiectului dvs., puteți trece la următoarea etapă de creare a unui site - proiectarea structurii sale logice și fizice. Trebuie amintit că lista de titluri, numărul de materiale prezentate în acestea și conținutul documentelor în sine vor fi cel mai probabil modificate și completate de mai multe ori. Unele secțiuni vor fi șterse de-a lungul timpului ca fiind inutile, unele, dimpotrivă, vor fi adăugate, unele pagini web pe care le veți considera că nu mai sunt relevante, iar unele documente, dimpotrivă, vor trebui reluate. Structura logică și fizică a proiectului dvs. ar trebui să îndeplinească astfel de cerințe de mobilitate și nu ar trebui să aveți nici cea mai mică problemă în organizarea sau reorganizarea hyperlinkurilor în cadrul proiectului dacă oricare dintre documentele sale constitutive încetează brusc să existe. De asemenea, nu ar trebui să aveți nevoie să reproiectați toate paginile web atunci când adăugați o nouă categorie la proiect doar pentru că hyperlinkurile existente nu permit astfel de modificări și nu există unde să apăsați un nou buton de navigare. Gândiți-vă în detaliu la toate hyperlinkurile dintre paginile de resurse, dezvoltați o structură de directoare și subdirectoare în care veți plasa documente. Abia după aceasta vă puteți adresa direct problemelor de proiectare.

Gândiți-vă și schițați aspectul viitoarelor dvs. pagini web. Cu un creion. Pe hârtie. Vă rugăm să rețineți că, dacă structura logică a site-ului dvs. implică prezența paginilor de pornire a secțiunilor sau, așa cum sunt numite și fișiere index, designul acestor pagini, precum și documentul de pornire al site-ului în sine, vor diferi cel mai probabil. ușor din designul paginilor de informare care alcătuiesc secțiunea. Fișierele index conțin de obicei legături către documentele care alcătuiesc o anumită secțiune, uneori scurte anunțuri ale acestor documente. Conținutul principal al paginilor informative în sine constă în text informativ și, acolo unde este necesar, ilustrații.

După ce v-ați imaginat aspectul general al paginilor web, gândiți-vă la structura tabelului invizibil, care va include apoi componentele acestora. Atunci când proiectați un tabel, este necesar să țineți cont de faptul că între coloanele sale care conțin diverse elemente ale documentului, este indicat să lăsați coloane goale late de unul sau doi pixeli. Acest lucru se face pentru a evita efectul coloanelor lipite unul de celălalt, care se observă atunci când nu există spațiu orizontal între elementele unei pagini web, ceea ce strica vizibil aspectul documentului.

Crearea unui tabel de aspect este poate una dintre cele mai dificile proceduri atunci când se dezvoltă un nou proiect. Este aproape imposibil să desenezi un tabel fără erori la prima încercare. Abilitatea, datorită căreia un webmaster desenează toate rândurile și coloanele necesare cu ochi în câteva secunde, vine doar cu experiență. Este dificil să dai un sfat specific aici pentru a ajuta un designer începător. Există o singură modalitate de a învăța cum să proiectați rapid un tabel de aspect pentru un site nou: încărcați mai multe pagini web create de alți autori în FrontPage Express, vedeți ce tabele folosesc pentru a afișa datele documentului, studiați-le cu atenție și apoi încercați să creați câteva ale tale.

Pentru a construi tabele complexe, puteți utiliza imbricarea unui tabel în altul: de exemplu, un tabel primar cu o lățime de 640 de puncte specifică o partiție orizontală a paginii, iar un alt tabel invizibil de lățime egală este imbricat în fiecare dintre celulele sale. , oferind o partiție verticală. Această abordare vă permite să împărțiți diferite secțiuni ale unei pagini web independent unele de altele, creând, de exemplu, patru coloane verticale de lățimi diferite într-un câmp și două în altul, în timp ce operați cu parametri diferiți de tabele imbricate în cadrul aceluiași document - dimensiunea spațiului dintre coloane, grosimea chenarelor etc.

După ce elementele principale ale documentului au fost asamblate și tabelul invizibil a fost marcat, ar trebui să aveți o schiță aproximativă a viitorului site. Acum este timpul să pregătiți conținutul.

În primul rând, recomand să tastați toate textele necesare în orice editor și cel mai bine este să le salvați în format text simplu, adică într-un fișier cu extensia .txt. Apoi trebuie să desenați elementele grafice necesare într-un editor vectorial (de exemplu, în Corel-Draw), să le exportați în format raster, să le procesați într-un editor grafic raster (în cazul nostru vorbim despre Adobe Photoshop), oferind imagini de dimensiunea și rezoluția necesară, iar apoi necesitatea de a le optimiza folosind compresoare speciale sau alte mijloace similare. O poveste detaliată despre pregătirea imaginilor grafice va fi dată în a cincea lecție, deocamdată vorbim doar despre succesiunea acțiunilor.

Numai după toate procedurile descrise mai sus puteți trece direct la asamblarea paginii: crearea aspectului acesteia într-un editor HTML, scrierea și depanarea finală a codului.

Deoarece designul tuturor documentelor care alcătuiesc viitorul dvs. site web va fi cel mai probabil aproape identic, este recomandat mai întâi să creați un așa-numit șablon. Un șablon este un document HTML care conține un tabel invizibil, un antet, toate obiectele grafice, elemente de navigare - cu alte cuvinte, aproape totul, cu excepția conținutului real. Dacă ulterior trebuie să includeți un nou document în proiectul dvs., va trebui doar să deschideți un șablon gata făcut într-un editor html și să importați textul și toate ilustrațiile necesare în el. Vă sfătuiesc să dezvoltați și să salvați două șabloane diferite pe disc: pentru pagina de informații și fișierul index. Când pagina este gata, trebuie verificată pentru a vă asigura că se afișează identic în diferite browsere la diferite rezoluții de ecran și palete de culori. Încărcați documentul HTML pe care l-ați creat în Microsoft Internet Explorer, setați paleta de culori a ecranului la 256 de culori, apoi modificați succesiv rezoluția ecranului la 640x480, 800x600 și, în final, 1024x768 pixeli. Uitați-vă pentru a vedea dacă aspectul paginii se schimbă sau dacă elementele sale se mișcă unul față de celălalt. Urmați aceeași procedură pentru Netscape Navigator. Dacă nu observați modificări semnificative, puteți fi sigur că alte documente create folosind același șablon vor avea șanse de 95% să fie afișate la fel de corect.

Ca urmare, succesiunea de acțiuni pentru dezvoltarea unui site web se reduce la următorul algoritm simplu:

• Stabilirea obiectivelor și identificarea sarcinilor principale.
• Crearea unei liste de secțiuni tematice viitoare.
• Dezvoltarea structurii logice și fizice a resursei.
• Pregătirea unei schițe de design, aspectul site-ului web, tabelul de layout invizibil.
• Pregătirea materialelor text.
• Pregătirea materialelor grafice sub formă vectorială.
• Exportați desene vectoriale în format raster, optimizarea imaginii.
• Crearea de șabloane de pagini web.
• Construirea paginilor web și codul de depanare.
• Verificarea identității de afișare a paginilor web cu diferite rezoluții de ecran și palete de culori și în browsere diferite.

M.: SOLON-PRESS, 2008. - 192 p. (Seria „Biblioteca elevului”)

Manualul poate fi folosit pentru învățământul staționar și la distanță în studiul următoarelor discipline: Programare într-un limbaj de nivel înalt, Interacțiune om-mașină, Programare orientată pe obiecte.

Manualul se concentrează pe limbajul de programare HTML, tehnologia CSS, limbajul de programare JavaScript, editorul grafic Adobe Photoshop și tehnologia multimedia.

Manualul de instruire este însoțit de un manual electronic pe CD, care conține material teoretic, exemple de implementare a diferitelor sarcini (site de formare) și o parte practică (sarcini, întrebări de testare și îndrumări pentru efectuarea lucrărilor de laborator). În plus, discul conține un program de testare cu ajutorul căruia profesorul poate evalua rapid și obiectiv gradul de stăpânire a materialului.
O caracteristică curioasă a manualului electronic este că fiecare secțiune este însoțită de muzică instrumentală calmă care creează o bună dispoziție.

Acest manual este destinat studenților specialității 220400 (230105) - Software de calculator și sisteme automatizate. Prezența unui manual electronic permite profesorilor să rezolve pur și simplu problema replicării instrucțiunilor metodologice.
Cartea este indispensabilă pentru oricine începe să studieze designul web.

Format: djvu

Mărimea: 5,7 MB

Descarca: yandex.disk

CONŢINUT
Introducere 3
1. Rețele globale 6
2. Metode de conectare la Internet 11I
3. Schimbarea de canale, mesaje și pachete. 13
4. Protocoale, servicii, servicii 15
5. Browsere 18
6. Motoare de căutare și directoare. 24
7. Concepte de bază ale designului web 31
8. Structura paginii web 37
9. Tehnologii de rețea de web design 39
10. Limbajul HTML 46
10.1. Formatarea textului 51
10.2. Tabelele... 55
10.3. Grafică 61
10.4. Hyperlinkuri 67
10.5. Meta-etichete 71
10.6. Link hărți 73
10.7. Multimedia 77
10.8. Rame 81
10.9. Foi de stil în cascadă CSS 85
11. Limbajul JavaScript 91
11.1. Ordinea de lansare a scriptului 95
11.2. Metode de introducere a informațiilor 98
11.2.1. Introducerea informațiilor folosind metoda con-firmO 99
11.2.2. Introducerea informațiilor folosind metoda promt() .. 101
11.2.3. Introducerea informațiilor utilizând o casetă de text 103
11.2.4. Introducerea și afișarea informațiilor folosind zona de text textarca 106
11.2.5. Formulare interactive 108
11.3. Metode de ieșire a informațiilor 124
11.3.1. Afișarea informațiilor folosind metoda alert() 125
11.3.2. Ieșirea informațiilor folosind metoda write() 126
11.3.3. Afișarea informațiilor folosind un câmp de text 127
11.3.4 Afișarea informațiilor folosind ferestrele create 129
11.4. Evenimente 132
11.5. Operații aritmetice, 141
11.6. Operații logice și de schimb 143
11.7. Operații cu variabile șir. 147
11.7.1. Conversia numerelor dintr-un sistem numeric în altul 150
11.8. Funcții și constante matematice 152
11.9. Cicluri regulate 158
11.10 Transferul condiționat al operatorilor de control if-else(cond) Hswitch(x) 160
11.11 Exemple de scripturi 167
11.11.1 Animație în bara de titlu a browserului 168
11.11.2 Buton iluminat 169
11.11.3 Implementarea buclelor iterative 171
Anexa 1: Lista lucrărilor și sarcinilor de laborator plasate pe discul optic 174
Anexa 2: Procedura de lansare a programului de testare 176
Anexa 3: Site-ul web „Samara este Rusia însăși”
Concluzia 180
Referințe 181