Lecții de abilități web

Creați primul site web

În această lecție vom crea un site de testare utilizând un exemplu concret, având ca bază pagina care a fost dată ca exemplu în lecția 5 (a se vedea "PC World", nr. 5/04) atunci când studiază CSS (Figura 1).
Vom dezvolta o structură de fișiere pentru aceasta.
Să designem toate paginile într-un singur stil: o singură navigație, locația elementelor de pe ecran, titlul paginii, conținutul paginii. Pentru a face acest lucru, creați un șablon de pagină.
Utilizăm un singur tabel de stil pentru crearea site-ului (vezi lecția "PC World", nr. 5/04).
Vom învăța cum să conectăm navigația și toate elementele de pagină duplicat folosind tehnologia SSI și directiva de includere.
Configurați serverul web.

Elementele de bază ale designului site-ului

Când creați site-ul deja în prima etapă, veți avea imediat mai multe sarcini. Vom enumera câteva dintre ele:

1. Gândiți-vă asupra structurii logice a site-ului - conținutul, secțiunile, sistemul de navigație. Nu faceți pagini inutile - "prin".

O structură competentă, un sistem de navigare inteligibil va permite vizitatorilor să obțină rapid informațiile furnizate.

În practică, aceasta este doar una dintre cele mai dificile sarcini, în special în cazul siturilor destul de mari. Ca regulă, un utilizator al World Wide Web are nevoie de informații, nu de fotografii frumoase, și cu cât mai devreme, cu atât mai bine. Timpul este bani! Atât în sens literal cât și figurativ. La urma urmei, multe pentru utilizarea internetului sunt plătite din buzunarul propriu.

Dacă ai reușit să faci asta, atunci vizitatorul va deveni al tău. El se va întoarce pe site-ul dvs. de mai multe ori și, poate, va recomanda o resursă pentru unul dintre prietenii sau colegii săi.

2. Creați un design interesant. Un design bun nu este o imagine frumoasă deloc. Site-ul poate fi realizat aproape fără imagini grafice.

Aceasta, în primul rând, o locație convenabilă a informațiilor și a navigării pe pagină. În al doilea rând, alegerea de culori pentru proiectarea site-ului. Nu alegeți culori strălucitoare - este imposibil să vă uitați la astfel de pagini pentru o lungă perioadă de timp. Din același motiv, nu utilizați o mulțime de imagini animate. În al treilea rând, alegeți un font ușor de citit de pe ecran, nu utilizați multe fonturi diferite pe pagină, unul sau doi este suficient. Evitați fonturile exotice, cel mai probabil, utilizatorul nu le are pe computer. În al patrulea rând, nu supraîncărcați paginile cu imagini, sarcina dvs. este să creați pagini pe care utilizatorul le vede cât mai repede posibil. Urmați motto-ul: cu cât este mai bună pagina, cu atât mai bine! (Nu se recomandă să faceți pagini mai mari de 50 KB împreună cu grafica.) Desigur, sunt posibile excepții pentru paginile individuale.) După cum știți, cea mai mare "greutate" a paginilor este dată de imagini. Rețineți cum ați vizitat aceste sau alte resurse. Faceți clic pe link și pe. Așteptați mult timp când apare conținutul paginii sau imaginii. Și care a fost reacția ta? Cel mai probabil iritație.

3. Desigur, este posibil din punct de vedere tehnic să implementăm toate acestea.

4. Dacă este posibil, reduceți la minimum timpul petrecut pentru crearea și susținerea site-ului. Este foarte important ca ulterior să fie ușor să adăugați noi secțiuni și să le completați pe cele existente. Deja în stadiul inițial este necesar să se dezvolte o tehnologie pentru crearea și susținerea site-ului. Desigur, toate momentele dintr-o dată nu prevăd, ca o regulă, vine cu experiență. Dar vom analiza unele dintre ele în această lecție.

Figura 1 prezintă pagina web. Să presupunem că aceasta este o "schiță" a unui site web al unei firme. Așa cum se poate vedea din fig. 1, numai partea dreaptă se modifică în cazul în care conținutul paginii va fi plasat. Restul - partea de sus, partea stângă (navigația) și partea de jos - rămân neschimbate, ele sunt aceleași pentru toate paginile site-ului.

Acest aranjament este convenabil pentru vizitatori. Folosind partea de navigare din stânga, puteți naviga printre pagini, în timp ce navigarea va rămâne întotdeauna în același loc - în stânga.

Din această pagină vom crea un șablon și din acesta vom forma toate celelalte pagini ale site-ului: schimbând partea dreaptă (plasând conținutul paginii acolo), vom salva fișierul cu nume diferite și în diferite directoare. Dar mai întâi vom dezvolta o structură de fișiere pentru site-ul nostru.

Structura fișierului site-ului

O organizare competentă și gînditoare a structurii fișierelor site-ului va economisi timp pentru susținerea și întreținerea acestuia. În plus, vă va ajuta să navigați cu ușurință în numărul mare de fișiere care alcătuiesc un site Web. Acest lucru este important în special pentru site-urile mari sau atunci când site-ul nu este foarte mare (ca în exemplul nostru), dar intenționați să îl dezvoltați în continuare și să adăugați secțiuni noi.

Prima pagină (de pornire) a site-ului primește, de regulă, numele: index.html (pentru serverul web Apache); default.htm (pentru Microsoft IIS).
Restul fișierelor sunt denumite aleatoriu, dar este recomandat să faceți acest lucru în funcție de scopul documentului sau de conținutul acestuia, de exemplu despre. html și mycat.html. Dați folderelor și fișierelor nume semnificative (nu dați nume ca 12345.html).
Desemnarea directoarelor și a fișierelor este permisă numai în codarea principală engleză.
Imaginile sunt mai bine plasate într-un director separat (/ images / sau / images /). Dacă există o mulțime de grafică, creați subdirectoare în interiorul acestui director.

Recomandată pentru structura fișierului cazului site-ului este prezentată în Fig. 2.

Fig. 2. Structura fișierului site-ului

Să aruncăm o privire mai atentă la ea:

Și câteva recomandări pentru denumirea de directoare și fișiere.

Numele fișierelor și directoarelor este recomandat în litere mici.

Acestea sunt diferențele în denumirea fișierelor în diferite sisteme de operare. Ei, de exemplu, Unix, sunt case-sensitive în numele fișierelor și directoarelor. În Windows, registrul nu contează (Despre .html și about.html - pentru Windows același fișier. Pentru Unix, acestea sunt două fișiere diferite).

În practică, apar adesea erori atunci când se deplasează fișiere de pe mașina locală unde Windows este instalat pe serverul în care este instalat Unix.

Să presupunem că site-ul companiei în care lucrați este localizat la furnizor. Ca regulă (cea mai frecventă opțiune), sunt instalate Unix OS și server web Apache.

Pe computerul dvs. personal aveți o copie a site-ului. Cel mai probabil, aveți Windows. După efectuarea modificărilor și completărilor necesare versiunii locale, transferați fișierele pe site-ul web de lucru - către furnizor. Aici sunteți în pericol. Se pare că totul funcționează. Ai verificat și ai testat totul. De ce, după transferul de fișiere de pe site nu se vedea unele imagini, link-uri nu funcționează?

Acum, dacă adăugați un profil nou, creați un director separat, cu numele secțiunii în limba engleză (sau în transliterare - cuvinte rusești în litere latine), deschideți șablonul de pagină, puneți-l în conținutul său și de a salva fișierul pe un disc într-un director de pre-create.

Conceptul de rădăcină a serverului și pagina de pornire

Înainte de a studia tehnologia SSI, ne vom familiariza cu două concepte foarte importante: rădăcina serverului și pagina de start.

Directorul rădăcină sau rădăcina serverului. Notată cu / (slash, slash forward). Acesta este directorul de pe discul computerului, în interiorul căruia există tot conținutul site-ului dvs. - structura fișierului.

După ce a primit o astfel de solicitare, serverul din directorul rădăcină caută directorul webschool și are fișierul webschool.htm în el.

Directorul rădăcină este definit în setările serverului. Implicit, IIS este C: Inetpubwwwroot, în Apache, dacă ați instalat implicit, - C: Program FilesApache GroupApachehtdocs (care rulează Windows).

Puteți configura rădăcina serverului la orice director de pe disc, desigur, cu condiția să aveți privilegii de administrator pe acesta.

Care este pagina definită în setările serverului?

Implicit în IIS este implicit.htm, în Apache - index.html. Acest fișier este adesea numit index.

Pe baza celor de mai sus, vă recomandăm să denumiți fișierul de intrare din directorul cu numele fișierului index. De exemplu, dacă un site are o secțiune asupra companiei, este logic să se numească directorul / aboutcompany / și pagina principală a acestei secțiuni - index.html în cazul Apache și default.htm IIS în cazul.

Includeți pe partea de server. Includeți directiva și creați un șablon de pagină

Începem să studiem tehnologia Server Side Includes (SSI). SSI este una dintre primele tehnologii de servere. În lecția 1 ne-am familiarizat cu conceptele unei pagini statice și dinamice. O pagină statică constă din html-coduri "curate". Am învățat deja cum să creăm astfel de pagini.

Directivele pot fi localizate oriunde pe pagină. Și în interiorul celulei tabelului și în secțiune

și în altele. În consecință, în locul în care se află directiva, serverul introduce rezultatul executării acestuia.

Înainte de a începe să luăm în considerare sintaxa tehnologiei SSI, vom configura serverul nostru web:

1) root server;
2) Suport SSI pentru fișierele cu extensii .html și .htm. Adică fișierele cu aceste extensii înainte de a fi trimise clientului vor fi verificate de server pentru instrucțiuni (directive) pe care serverul ar trebui să le efectueze.

Configurarea serverului Apache

Unde este localizat fișierul httpd.conf?

Dacă ați instalat serverul implicit, apoi în folderul C: Program FilesApache, grupul GroupApacheconf httpd.conf. Puteți să-l deschideți direct în Notepad.
Dacă ați uitat calea către locul unde ați realizat instalarea, utilizați căutarea StartoSearchoFor sau Foldere. În bara de căutare, tastați httpd.conf.
Vom edita acest fișier prin meniul principal din Windows. StartoProgramsoApache HTTP Servero Configurați Apache ServeroEdit Fișierul de configurare Apache httpd.conf (Figura 5.)

În fișierul de configurare httpd.conf, vom configura rădăcina site-ului și suportul pentru includerea serverului pentru fișierele cu extensiile .html și .htm (Figura 6.)

Fig. 6. Configurarea suportului serverului root și SSI în fișierul de configurare Apache httpd.conf

Configurarea directorului rădăcină al nodului (/)

Rețineți șorile directe (spre deosebire de tălpile inverse din Windows).

În interiorul directorului, care este specificat în setările serverului, veți crea structura de fișiere a site-ului dvs.

Configurarea suportului SSI

Găsiți liniile:
După ele trebuie să adăugați (fără #):

Suportul SSI este instalat pentru fișierele cu extensii

.html și .htm. Adăugat tipul documentului AddType text / html .html (htm). Direcția AddHandler activează serverul server-side parsed.

Și încă o dată. Găsiți linia:

Opțiuni Indexuri FollowSymLinks MultiViews

În Opțiuni, adăugați un spațiu inclus. Linia rezultată ar trebui să arate astfel:

Opțiuni Indexuri FollowSymLinks Include MultiViews

Important! Pentru ca modificările să aibă efect, serverul trebuie repornit.

Pentru a face acest lucru, în meniul principal Windows, selectați: Start? Programe? Apache HTTP Server? Control Apache Server?

Dacă ați făcut totul corect, atunci serverul va eșua cu succes. În cazul unor erori, verificați sintaxa, asigurați-vă că directorul rădăcină este specificat corect. Poate ați uitat să creați mai întâi discul.

Acum, serverul nostru este gata să lucreze cu incluziunile serverului.

Dacă alegeți IIS ca server de lucru, puteți vedea procesul de instalare și configurare din Anexa 1 la sfârșitul articolului.

Sintaxa SSI

Câteva observații despre sintaxă:

Acest lucru este important pentru serverul Apache (de exemplu, serverul IIS funcționează atât cu un spațiu, cât și fără acesta).

Directivele de bază ale SSI: includ directiva

Cea mai comună directivă este inclusă - introduce conținutul unui document în altul.

Aici include - denumirea directivei; virtual - numele atributului; /ssi/top.html - calea către fișierul de la rădăcina serverului, conținutul căruia este inserat în pagina html.

Directiva include poate avea atribute de fișier sau virtuale. În acest exemplu, documentul care conține directiva include include conținutul fișierului top.html care se află în dosarul SSI. Dacă utilizați atributul virtual, valoarea acestuia este calea către fișierul de la rădăcina serverului. Specificarea căilor din rădăcina serverului este adesea mai preferabilă (a se vedea bara laterală "Definiția traseului").

Directivele includ mai multe documente într-un singur document.

În Fig. 7 arată un exemplu de utilizare a directivei include pentru a crea un șablon de document. Pagina inițială este prezentată în Fig. 1.

După cum sa menționat mai sus, toate paginile site-ului au un singur design. În consecință, pentru a crea un șablon de pagină, lăsăm pe el numai elemente unice: numele paginii

Articole similare

Pagina anterioară

Pagina următoare