A 8-a lecție

Creați un site web

Rezumați cunoștințele noastre din ultimele 8 lecții.
Putem face în HTML:

• Creați pagini;
• Tastați și formatați textul;
• Link către pagini;
• Lucrați cu culori de fundal și text;
• Să construiască și să facă mese;

Ei bine, atunci. Este timpul să creați ceva mai complicat decât am făcut înainte, dar folosind cunoștințele acumulate în lecțiile anterioare.

În această lecție, vom face un site de 2 pagini. De exemplu, despre crearea unui site web.

Porniți Notepad și scrieți setul minim pentru a crea pagina.

Acum scrieți între etichete numele paginii noastre, de exemplu, aici

Apoi, postați etichetele

Pentru a crea un cadru de pagină, vom folosi un tabel, dar puțin mai șirent decât am făcut în tutorialul HTML despre tabele. Avem nevoie de un tabel în care prima linie conține o celulă, iar pe cealaltă linie vor fi 2 celule, adică Aici avem nevoie de tabel:

După cum puteți vedea, într-o astfel de tabelă "șiretlic" se folosește doar o pereche de etichete în primul rând al mesei, și nu două, ca în construcția mesei 2x2. Dar a apărut parametrul colspan = "2". Acest parametru pare să spună cât de mare ar fi o celulă. În acest caz, celula trebuie să fie de 2 celule în lățime.

Deci Acum, să stabilim dimensiunea mesei. Vom face lățimea mesei de 750 de pixeli. Din calculul pe care cineva de la vizitatorii site-ului le poate utiliza monitorul la 800x600 de puncte și pentru a vizualiza un site mai larg nu va fi confortabil.

Înălțimea mesei va fi de 600 de pixeli

Ie codul paginii noastre va fi astfel.

Pentru a vedea granițele unor părți ale site-ului - "umple" zona de meniu și zona culorii capului. De exemplu, astfel:

Pagina ar trebui să arate așa. Dacă nu, căutați o greșeală.

Poate că era o întrebare. De ce ați numit dosarul paginii în acest fel?

Există o regulă. Pagina de pornire a site-ului ar trebui să fie numită index.htm l sau index.htm. Numele altor fișiere sunt alese destul de arbitrar. Desigur, numai literele latine (eu sunt așa, doar în caz, am clarificat, și apoi orice se poate întâmpla.). Sau index.php. dacă pagina este scrisă în PHP. Ține minte asta.

Acum introduceți antetul site-ului nostru.

Salvați imaginea capacelor de pe computer în același director unde fișierul de pagină este situat sub numele său "nativ" stroymaster6.gif

(de ex. mutați mouse-ul peste imagine, faceți clic dreapta și selectați "Salvați imaginea ca."). Alegeți directorul WWW principal și salvați imaginea în dosarul cu imagini (consultați lecția 4). De ce? Un ton bun în HTML este locația fișierelor grafice într-un singur director, astfel încât să nu se caute obiectul de fiecare dată. De obicei, un astfel de dosar de stocare pentru imagini se numește "imagini".

În cazul în care pentru a lua astfel de pălării. Desenați-vă singuri. Despre cum se face acest lucru va fi spus separat.

De obicei, în orice caz, în mod tradițional, imaginile de pe html-page sunt de 2 tipuri: .gif și .jpg. Acest lucru nu înseamnă că browserul nu va afișa formatul .bmp sau .tif, dar există anumite tradiții și nu le sfătuiesc să-l încalce - doar în caz.

Acum inserați imaginea antetului în site-ul nostru. Despre cum să inserăm o imagine pe site, am demonstrat AICI.

Acum stabilim dimensiunile exacte ale celulei de tabel destinate capacului. pentru că Imaginea capacelor este de 750x144, apoi vom face dimensiunea celulei de masă 750 x 144.

Acum, pagina noastră va arăta așa.

Setați lățimea meniului la 200 de pixeli, pentru aceasta adăugăm la eticheta corespunzătoare lățimea = "200"

Aici este meniul	Iată conținutul paginii

Fundalul meniului "umple" cu acest fundal, salvează acest fundal cu numele său "nativ": sv12.gif în același director unde este fișierul de pagină. (de exemplu, deplasați mouse-ul peste imagine, faceți clic dreapta și selectați "Salvați imagine ca."). Alegeți directorul WWW principal și salvați imaginea în dosarul cu imagini (consultați lecția 4).

Și acum scriem codul necesar

Aici este meniul	Iată conținutul paginii

Pentru cei care nu au avut timp să dau seama ce conține de fapt diferite formate gif și jpg (aka jpeg), menționează întâmplare că GIF este un format maxim de culoare de 8 biți, și, prin urmare, o paletă de 256 de culori sau mai puțin, în timp ce , precum jpg (24 biți) conține o paletă clară de 256 nuanțe de roșu, 256 de nuanțe de verde și 256 de nuanțe de albastru. Astfel, jpg mai potrivite pentru fotografii și alte compoziții complexe și GIF - pentru grafica, nemnogotsvetnoy nepretențioase, și încă mai au un gif frumos inima mea, calitatea - este posibil să se stabilească culoarea transparentă.

Acum, pagina noastră va arăta așa.

S-ar putea să aveți o întrebare de ce browser-ul nu "lucrează" la lățimea meniului 200. Meniul va arăta mai mult de 200 de pixeli. Da. Există o astfel de eroare a browserului, dar totul va intra în vigoare dacă începeți să scrieți text în secțiunea principală a paginii.

Pentru a confirma acest lucru, vom adăuga text pe site-ul nostru.

= "images / sv12.gif" width = "200"> Aici este meniul	Iată conținutul paginii

Site-ul va arăta astfel

Acum, totul este aproape în regulă. Aproape pentru că în fața unei mici probleme. Textul este afișat exact în mijloc (vertical), dar textul trebuie să fie situat în partea de sus a celulelor.

Pentru aceasta, trebuie să înregistăm un alt parametru în etichete

meniul și conținutul principal al paginii. Am trecut acest parametru în lecția despre tabele - acesta este parametrul de aliniere verticală valign = "top". Valoarea topului înseamnă că conținutul va fi plasat în partea de sus. Acum, pagina noastră va arăta așa. Apoi, faceți un meniu. În timp ce site-ul nostru va fi de 2 pagini. Pagina principală și pagina de link. Lăsați elementele de meniu să fie numite Acasă și Linkuri. Pentru a "mișca" textul, folosim eticheta Acum trebuie să facem meniul text sub formă de link-uri. Cuvântul Home este legat de pagina index.htm. și cuvântul Legături către pagina ssilki.htm l. pe care o vom crea mai târziu. principal referințe principal referințe Acum site-ul nostru va arata SO. Rămâne să faceți a doua pagină a site-ului. Pentru a simplifica munca, vom face acest lucru - salvați pagina noastră index.html sub un alt nume ssilki.html. apoi editați fișierul. Selectați Fișier-> Salvare ca în Notepad. alegeți același director unde este localizat fișierul index.html. scrieți numele paginii în care doriți să salvați fișierul ssilki.html și faceți clic pe OK. Ie pe computer ar trebui să aveți 2 până în prezent aceeași pagină - index.htm l și ssilki.htm l. Acum modificați numele paginii (între etichete ) și modificați textul paginii, de exemplu, aici este SO principal referințe Pe această pagină vor fi plasate linkuri către site-uri unde sunt postate materiale despre programarea web și designul web. Și vom salva. (Fișier -> Salvare) A doua pagină a site-ului va arăta Așadar, am creat un site simplu, pe care îl puteți edita și posta pe Internet. Următoarea lecție finală despre plasarea unui site pe Internet este AICI. Articole similare 40 Lecții de grunge în Photoshop 9 Lecții de stil de la superba Audrey Hepburn Lecția integrată (din bibliotecă) pe această temă - ce sunt emblemele, de ce au nevoie de oameni Pagina anterioară Pagina următoare Trimiteți-le prietenilor: