Introducerea siglei

Pentru a umple tabelul cu conținut, vom introduce în mod consecvent imagini, link-uri și text în celule de tabelă.
1. Sigla.
Primul tabel, care va conține logo-ul și link-urile (am scris deja codul în a doua lecție):

Atenție vă rog! Nu uita un punct important (Vreau despre el a reamintit că are loc o astfel de eroare): unică ( „) și ghilimele duble („) în alte limbaje de programare html și au diferite semnificații Două ghilimele simple nu va înlocui o dublă în acest caz .. în toate codurile pe care le citez, citatele trebuie să fie duble.

1.1. În primul rând, avem nevoie de o imagine pe care o vom folosi ca siglă. Această imagine trebuie făcută cu o anumită dimensiune și încărcată fie în Radical.ru, fie în directorul rădăcină al site-ului nostru. Este mai bine să mergeți la dosarul rădăcină, deoarece atunci nu veți depinde de problemele cu serviciul de imagine Radikal.ru, care se întâmplă uneori.

1.2. Deci, am încărcat imaginea de care avem nevoie în directorul rădăcină al site-ului nostru, numindu-l "logo", de exemplu.
Apoi, inserăm imaginea în etichetele corespunzătoare, așa cum am făcut-o, inserând imaginea în banner:

Introducerea siglei
Culoarea roșie indică o imagine. Nu uitați să puneți formatul în care este executată imaginea. Acesta este în acest caz jpg, dar poate fi o imagine salvată în format GIF sau pe o altă imagine.

1.3. Acum, tot acest link trebuie inserat în codul HTML al mesei noastre, în locul în care avem cuvântul "Logo". Pentru a face ca logo-ul să fie aliniat la stânga, adăugați atributul alignment align = "left"

Introducerea siglei

Acum înlocuim acest tabel în pagina noastră, pe care am făcut toate tabelele pentru site-ul nostru și tot codul va arăta astfel:

Introducerea siglei

1.4. Descărcați tot acest design pe pagina noastră. Aceasta este ceea ce obțineți:
Prima noastră pagină

2. Culoarea fundalului și imaginea de fundal (bgcolor și fundal)

2.1. Pentru ca pagina noastră să aibă o anumită culoare, trebuie să setăm culoarea de fundal. Deoarece culoarea este prescrisă pentru întreaga pagină, adică pentru "corpul" ei, este necesar să atribuiți un atribut de culoare interiorului etichetei Culoarea de fundal este setată de atributul bgcolor, căruia îi este atribuită valoarea culorii de care aveți nevoie. De exemplu, dorim ca fundalul paginii să fie gri deschis. Ne găsim în tabelul de culori, sau în Photoshop culoare corespunzătoare # C0C0C0 - care este responsabil pentru aceasta este de culoare gri deschis, și pune acest atribut cu valoarea sa, la fel cum ne-am prescris valorile altor atribute: bgcolor = „# C0C0C0“. Și acum am pus acest atribut în etichetă Inserați această etichetă modificată în pagina noastră și obțineți aceasta:
Prima noastră pagină, fundal gri

Culoarea de care aveți nevoie poate fi găsită în aceste tabele:


2.2. Acum am stabilit o altă valoare - fundal. Acest atribut înseamnă și imaginea de fundal.
Să inserăm această imagine în fundal:

Voi explica de ce e atât de mică.
Dacă doriți, puteți pune o imagine de fundal care să ocupe întregul ecran. Dar rețineți că această imagine în fundal are mai multe calități inerente:

Să presupunem că avem o imagine foarte frumoasă, de exemplu un peisaj de iarnă. Dimensiune imagine 1024x768. Și dacă te uiți la monitor, a cărui rezoluție este de 1024 de 768 - totul va arăta bine. Dar dacă te uiți la site-ul nostru utilizatorul care 1280x1024 rezoluția monitorului, el va vedea că imaginea în sine alunecat în colțul din stânga sus, iar spațiul liber din partea de jos și dreapta a acestuia au fost umplute cu bucăți de aceeași imagine, nu este andocat la imaginea originală. În general, fundalul nostru va fi desfigurat la o astfel de rezoluție.
Dacă, pe de altă parte, utilizatorul are o rezoluție mai mică decât 1024x768, el va vedea doar o bucată din fundal, mai precis colțul din stânga sus.
Nu ne convine.

A doua dificultate: cu cât dimensiunea imaginii este mai mare, cu atât este mai mare greutatea acesteia, cu atât mai mult va fi încărcată și va fi consumat mai mult trafic de utilizatori.

Deci, rezumăm: greutatea imaginii de fundal este adăugată la greutatea totală a paginii, astfel încât să nu încărcați imagini grele grele, salvați traficul.
Imaginea de fundal nu poate fi deschisă din anumite motive imediat, mai ales dacă doriți să o descărcați nu pe site-ul dvs., ci să economisiți spațiu, să profitați de serviciile de imagine ale unei persoane. De exemplu, același Radical. Și dacă Radicalul nu reușește, imaginea voastră ar putea să nu se încarce deloc.
Acesta trebuie să fie luate în considerare în același mod în care, dacă aveți un text tastat cu litere negre, și a pus o imagine de fundal de un fundal negru - în cazul în care imaginea de fundal nu apare, text negru pe o citire de fond negru nu va fi posibilă, iar oaspetele va fi foarte surprins să vadă o pată neagră solidă în locul paginii dvs. .
Cu alte cuvinte, atunci când alegeți o imagine de fundal, trebuie să țineți cont de contrastul textului cu privire la imaginea de fundal și fundalul de dedesubt. Că textul dvs. este ÎN VEDERE întotdeauna!


În fundal, în acest caz, am făcut o imagine foarte mică, de 30 de 28 de pixeli, care cântărește foarte puțin, aproximativ 51 de octeți. Și greutatea întregii pagini va fi luată în considerare numai pe o singură imagine, care se înmulțește pur și simplu în fundal de nenumărate ori. Acum, să vedem cum să punem o imagine de fundal.

2.3. Să presupunem că am încărcat o imagine de fundal în dosarul nostru unde toate paginile se află, și i-a dat numele "f3.gif" (formatul poate fi jpg).
Din moment ce fundalul este pentru întreaga pagină, atunci trebuie să-l înregistrați în "corpul" paginii, care este tot în același Acesta va arata astfel: Prima noastră pagină, fundal gri + imagine de fundal

Imaginea de fundal poate fi prescrisă nu numai pentru întreaga pagină. Poate fi scris într-o celulă de tabelă sau într-un tabel specific. Imaginea de fundal, spre deosebire de imaginea inserată, este întotdeauna scalată și puteți introduce text peste ea. Iar imaginea nu are o scară, are o dimensiune strict definită și nimic nu poate fi scris peste ea.
Lecția sa terminat.

Articole similare