Crearea de la zero a unui layout CSS (I)


Materialul de mai jos NU este scris de mine ci doar tradus. În original a apărut pe Subcide.com, autorul, Steve Dennis, fiind atât de amabil încât să ne permită preluarea. Când mi-a dat acceptul mi-a spus că deja articolul lui a apărut şi în alte limbi. Iată-l şi în română. Eu am fost interesat de el şi m-am gândit să îl traduc pentru a îl face accesibil la cât mai mulţi. Mulţumim Steve!

A se respecta © Steve Dennis.

mărturiseam recent că nu am făcut până acum un sit, cu mâna mea, în care să folosesc doar CSS şi fără tabele. Materialul lui Steve m-a învăţat cum se poate face. Citiţi şi Dvs, iertând unele abordări în traducere unde poate Dvs aţi fi optat pentru alţi termeni.

1. Introducere

Notă: Acest tutorial porneşte de la premisa că aveţi cunoştinţe minime despre folosirea CSS-urilor. Dacă nu aţi mai folosit NICIODATĂ până acum CSS ar fi bine să începeţi citind introducerea de la w3schools despre CSS.

Acest material va încerca să vă conducă pas cu pas prin procesul de creare al unui layout CSS complet funcţional. Voi încerca să explic cum pot mai bine fiecare pas, dar adesea alţii au acoperit deja aceste lucruri mai bine decât mine. De aceea vor exista din când în când legături spre informaţii suplimentare pe situri externe.

Noteă: Vă rugăm folosiţi un navigator modern precum Opera, Firefox sau Safari pentru acest exerciţiu. Nu vă speriaţi, la final situl Dvs va merge bine şi în IE.

2. Designul

Mai jos este designul pe care îl vom folosi ca bază pentru acest tutorial. Misiunea noastră este să implementăm acest design fără a folosi tabele, doar XHTML, CSS şi câteva imagini. Daţi click pe imagine pentru a o vedea mai mare.

Mai întâi trebuie să identificăm principalele elemente structurale ale designului, pentru ca să ştim cum să structurăm documentul HTML. Web-ul se bazează foarte puternic pe dreptunghiuri şi trebuie să ţinem cont de aceasta când împărţim designul. Principalele împărţiri vor sfârşi prin a fi taguri <div>. Un <div> va fi un container dreptunghiular pe care îl poziţionăm folosindu-ne de CSS. Diagrama de mai jos arată cum vom împărţi designul. Click pe el pentru a avea o imagine mai mare, nescalată.

Am identificat cinci elemente majore:

  • Main Menu (meniul principal)
    Partea de navigare principală pentru acest sit. Imaginile se vor schimba la hover (când mouse-ul trece pe deasupra).
    Lăţime: 760px. Înălţime: 50px.
  • Header (antet)
    Antetul paginii include o imagine (din motive pur estetice) şi numele companiei.
    Lăţime: 760px. Înălţime: 150px.
  • Content (conţinut)
    Aici va merge conţinutul sitului.
    Lăţime: 480px. Înălţime: se schimbă în funcţie de conţinut.
  • Sidebar (bara laterală)
    Aici va fi un alt conţinut care nu este la fel de important ca cel de mai sus.
    Lăţime: 280px. Înălţime: se schimbă în funcţie de conţinut.
  • Footer (subsol)
    Informaţii despre copyright şi un sistem de navigare text.
    Lăţime: 760px. Înălţime: 66px.

De asemenea situl va fi centrat în pagina navigatorului. Avem acum toate informaţiile pentru a începe.

3. Template-ul HTML de bază

Am creat un document HTML simplu pe care îl voi folosi ca punct de pornire pentru întreg situl. Dacă nu înţelegeţi ceva din cod ţineţi mouse-ul deasupra acelei linii pentru explicaţii. Copiaţi template-ul şi lipiţi-l în editorul Dvs HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
	<title>CompanyName - PageName</title>
	<meta http-equiv="Content-Language" content="en-us" />
	
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="MSSmartTagsPreventParsing" content="true" />
	
	<meta name="description" content="Description" />
	<meta name="keywords" content="Keywords" />
	
	<meta name="author" content="Enlighten Designs" />
	
	<style type="text/css" media="all">@import "css/master.css";</style>
</head>

<body>

</body>
</html>

Salvaţi fişierul cu numele index.html în rădăcina directorului unde se va afla situl Dvs (să zicem htdocs). Structura directoarelor trebuie să fie după cum urmează:


Pagini: 1 2 3

Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (11 evaluări, media: 4,91 din 5)
Loading...Loading...

6 comentarii

  1. camitza spune:

    Destul de util pt cei la inceput de drum.

  2. Alex Sincan spune:

    Clar, inteligibil, aplicabil. Intr-un cuvant, marfa!

  3. Matey spune:

    Foarte folositor. Ar trebui sa faceti mai multe tutoriale ca acesta!

  4. tape spune:

    Tutorialul acesta este perfect :) , foarte bine explicat :) .

  5. myke spune:

    P.s vezi ca aici e gresit
    @import „css/master.css”;

    varianta buna :)

  6. valy spune:

    Bravo! Foarte clar! Acum am prins smecheria! Mersi.


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *