Scrigroup - Documente si articole

Username / Parola inexistente      

Home Documente Upload Resurse Alte limbi doc  

CATEGORII DOCUMENTE





AccessAdobe photoshopAlgoritmiAutocadBaze de dateCC sharp
CalculatoareCorel drawDot netExcelFox proFrontpageHardware
HtmlInternetJavaLinuxMatlabMs dosPascal
PhpPower pointRetele calculatoareSqlTutorialsWebdesignWindows
WordXml


Marcaje CSS

webdesign

+ Font mai mare | - Font mai mic







DOCUMENTE SIMILARE

Trimite pe Messenger
Gestionarea site-urilor WEB
Templates and Styles (sabloane si stiluri)
Web design
HTML (Hyper Text Markup Language)
Consideratii generale privind Internet si World Wide Web
Marcaje CSS
Programare WEB - OBIECTUL 'Window'
Editarea paginilor WEB
Sisteme de reprezentare si masurare a culorilor
Tehnologii Utilizate in Proiectarea si Design-ul Site-urilor Web: HTML, XHTML, CSS, XML, XSL, XSLT, JavaScript, DHTML, Java, PHP, JSP, ASP

Marcaje CSS

 



 

 

 

 

1. Utilitate

Foarte pe scurt, utilizarea codurilor CSS (Cascading Style Sheets) a aparut ca o solutie la doua probleme ale limbajului HTML:

  • insuficienta balizelor HTML pentru nevoile de design;
  • incarcarea paginilor scrise cu coduri HTML - pentru fiecare paragraf trebuiau specificate atributele care il definesc.

 

Atentie!

1. Paginile web raman aceleasi fisiere cu extensia html, ce difera este doar stilul de formatare.
2. Stilurile de tip CSS in realizarea paginilor web trebuie privite doar ca o extensie a limbajului HTML
 Se pot folosi coduri HTML combinate cu balize CSS.

De exemplu, sa presupunem ca avem doua paragrafe intr-o pagina web, care au urmatoarele caracteristici:

  • setul de caractere: Tahoma;
  • marimea: medie;
  • culoarea: rosu;
  • atribute de caractere: bold si italic;

In HTML, paragrafele vor arata in modul urmator:

<p><font face=Tahoma size=2 color=red><b><i>
               'Va pot spune incotro merge Europa Universitatile mileniului III sunt 
               cu totul altfel decat cele pe care le aparam cu dintii. Conservatorismul
               actual trebuie sa dispara. Universitatile din Occident gandesc mult mai
               departe. Au niste ani-lumina avans in gandire. Se vorbeste de universitatile
               virtuale la modul foarte real. Universitati fara sedii, legate (mai intai)
               de oameni si de idei.'
</i></b></font></p>
<p><font face=Tahoma size=2 color=red><b><i>
               Studentii manifesta un grad ridicat de interes pentru noile tehnologii ale
               informatiei si comunicarii, accesul prin Internet la resurse variate cu
               informatii de ultima ora, prezentate intr-o forma atractiva, precum si
               posibilitatea stabilirii unui contact cu autorii articolelor fiind
               factori de motivare ce determina orientarea spre cercetare
               interdisciplinara si pentru specializare pe domeniile programei
               de studiu.
</i></b></font></p>

>> Click aici pentru a vedea rezultatul.

Folosind CSS, vom avea:

<p style='font-family:Tahoma; font-size:12px; color:red; font-weight:bold;
 font-style:italic;'>
               'Va pot spune incotro merge Europa Universitatile mileniului III sunt
               cu totul altfel decat cele pe care le aparam cu dintii. Conservatorismul
               actual trebuie sa dispara. Universitatile din Occident gandesc mult
               mai departe. Au niste ani-lumina avans in gandire. Se vorbeste de
               universitatile virtuale la modul foarte real. Universitati fara sedii, legate
               (mai intai) de oameni si de idei.'
</p>
<p style='font-family:Tahoma; font-size:12px; color:red; font-weight:bold;
 font-style:italic;'>
               Studentii manifesta un grad ridicat de interes pentru noile tehnologii
               ale informatiei si comunicarii, accesul prin Internet la resurse variate
               cu informatii de ultima ora, prezentate intr-o forma atractiva, precum si
               posibilitatea stabilirii unui contact cu autorii articolelor fiind factori de
               motivare ce determina orientarea spre cercetare interdisciplinara si
               pentru specializare pe domeniile programei de studiu.
</p>

>> Click aici pentru a vedea rezultatul.

OK, insa care este avantajul? Am scris tot atat de mult cod.

 

Ideea este ca:

1. Balizele CSS ofera posibilitati mai multe de formatare a textelor si blocurilor de elemente din paginile web.
2. Daca avem un stil de paragraf pe care il folosim foarte des, acesta se poate defini generic in antetul paginii HTML sau intr-un fisier separat, cu extensia css, care se apeleaza din pagina html.

2. Fisier CSS extern

Mai concret, ne vom ocupa de cazul in care dorim un fisier separat, extern, in care definim stilurile pe care le vom folosi in toate documentele dintr-un site.

Acest fisier se creaza in Notepad si se salveaza cu extensia css.

Deschide Notepad, defineste generic paragraful ca avand caracteristicile cerute mai sus, apoi definiti titlul de nivel 1 (H1), dupa modelul urmator:

p 
h1 

Salveaza fisierul creat cu numele 'stilulmeu.css', intr-un director gol.
Apoi creaza, in acelasi director, un fisier html, in antetul caruia apeleaza fisierul de stiluri (neaparat in sectiunea HEAD):




<html>
  <head>
     <title>Pagina mea cu stilurile mele</title>
     <link rel='stylesheet' type='text/css' href='stilulmeu.css'  />
  </head>
  <body>
               <h1>Acesta este titlul, asa cum l-am definit</h1>
               <p>Acesta este primul paragraf, care are caracteristicile definite
               in fisierul de stiluri 'stilulmeu.css'. Prin modificarea fisierului css voi
               obtine efecte in toate paginile html care il apeleaza.</p>
               <p>Pot, de exemplu, sa schimb culoarea in 'blue'.</p>
               <p>Al treilea paragraf, ca si toate care ar putea urma, se
               conformeaza normelor stilului meu.</p>
  </body>
  </html>

Salveaza, apoi deschide-l intr-un browser.

>> Click aici pentru a vedea rezultatul.

Experimental, intoarce-te in Notepad, deschide fisierul de stiluri si modifica dupa cum urmeaza:

h1 
p 

Apoi salveaza fisierul css, revino in browser si apasa F5, pentru Refresh.

Poti defini, in fisierul CSS, stilurile favorite pentru textele cuprinse in paragraf (p), titluri (de la h1 pana la h6), celule de tabel (td) etc. Apoi poti apela acest fisier din toate paginile web pe care le creezi.

 Marcaje de tip inline

Pana acum, ne-am ocupat doar de marcaje de tip bloc. Sa vedem ce folosim pentru a schimba culoarea sau marimea unui singur cuvant din cadrul unui paragraf sau dintr-un titlu. Pentru aceste interventii, se folosesc elemente de marcaj de tip inline.
Un astfel de marcaj inline este baliza <span>. Aceasta este folosita in cadrul unui alt marcaj, de tip bloc, fara sa determine trecerea la un alt rand.

Un exemplu:

<p>Acest paragraf este definit in 'stilulmeu2.css' si are o marime de 11 pixeli.
    Insa urmatorul <span style='font-size:16px;'> cuvant</span>
    este vizibil mai mare.</p>

>> Click aici pentru a vedea rezultatul.

Tot astfel, ii putem schimba culoarea, corpul de litera, grosimea etc. Mai mult, daca avem un stil de insertii de tip inline folosit destul de des intr-un site, putem defini atributele pentru <span> direct in fisierul nostru de stiluri:

  span 

4. Gruparea

In fisierul css, se pot grupa mai multe elemente care au aceleasi atribute, dupa exemplul urmator:

  h1, h2, h3, h4, h5, h6 

5. Clasa

Sa presupunem ca, pentru nevoile noastre de design, avem nevoie de mai multe tipuri de formatari pentru textele din paginile web. Unul ar trebui sa fie definit pentru textul normal, care va constitui continutul propriu-zis al paginilor. Mai avem nevoie de un text cu caractere mai mici, pentru explicatii suplimentare. Si ne-ar mai trebui un text verde ingrosat, pe care il vom folosi intr-o coloana de tabel cu background galben.

In acest moment vom defini, in fisierul estesimplu.css, mai multe clase, pe care le vom apela in cadrul diverselor balize din fisierul html. Pentru a defini o clasa, ii alegem un nume (de preferat cat mai reprezentativ), ii adaugam un punct in fata si ii specificam caracteristicile, alaturi de alte balize:

Fisierul css va arata in modul urmator:

  h1 
  p, span 
  .normal 
  .mic 
  .verde 

>> Iar fisierul html il poti vedea aici.

 

Experimenteaza. Observa. Invata singur.
Pentru realizarea paginilor html, probabil vei folosi un instrument specializat, un editor de HTML cum ar fi Macromedia Dreamweaver sau Microsoft FrontPage, care sunt extrem de simplu de utilizat. Insa, pentru design profesional, vei fi nevoit sa faci corecturi in cod html.

In lectiile urmatoare vom incerca sa abordam temele de design propriu-zis al paginilor web.

 

 

 

 

 

Printeaza

Intreaba colegii

Intreaba tutorul

Resurse si materiale suplimentare pentru acest curs

Info/Ajutor








Politica de confidentialitate

DISTRIBUIE DOCUMENTUL

Comentarii


Vizualizari: 611
Importanta: rank

Comenteaza documentul:

Te rugam sa te autentifici sau sa iti faci cont pentru a putea comenta

Creaza cont nou

Termeni si conditii de utilizare | Contact
© SCRIGROUP 2019 . All rights reserved

Distribuie URL

Adauga cod HTML in site