Site-uri și aplicații pentru WWW

Aplicații (4)


Stilizarea unui document complex

Exercițiul 1

Adăugați în directorul D:\postuniv\web\blog\css un fișier denumit stil.css. Modificați succesiv conţinutul acestuia, astfel:

  • includeți la începutul fișierului stil.css un set de reguli de stilizare cunoscute sub numele de reguli de resetare:
  • html {
       box-sizing: border-box;
       font-size: 62.5%;   /* =10px */
    }
    
    *, *:before, *:after {
       box-sizing: inherit;
    }
    
    header, section, footer, aside, nav, main, article
    {
       display: block;
    }
    
    aside, article, body, div, footer, header, html, nav, ol, p, ul {
       margin: 0;
       padding: 0;
    }


  • impuneţi o culoare de fundal şi o culoare pentru scris pentru întreaga pagină:
  • 
    body {
       background-color:#ebebeb;
       color:#555555;
    } 
    

  • definiţi în stil.css două containere: un container care va conţine întreaga pagină (#pagina) şi unul care va fi adăugat după elementul nav denumit #continut. Apoi referiţi cele două blocuri în fişierul index.html:
  • #pagina {
       background-color:#68CE54;
       width: 1000px;
       border:1px solid #007F0E;
    }
    
    #continut {
       background-color:#44C4A6;
       width: 95%;
       border:1px solid #19493D;
    }  
    

    În fişierul index.html:

    <body>
       <div id="pagina">
       <nav>
       ...
       </nav>
       <div id="continut">
          <main>
             <article>
                <h1>Fotografia favorita de azi </h1>
                <h3>Postat de mine  .  .  . comentarii</h3>
             </article>
       ......
       </div> <!-- de la #continut -->
       <footer>
       ...
       </footer>
       </div> <!-- de la #pagina --> 
    


  • definiţi în stil.css un stil pentru elementul header. Elementul conține imaginea myblog.png:
  • header {
       background-color:#C7B6D8;
       width:100%;
       border:1px solid #7F00FF;
    }
  • definiţi elementul nav care va conţine meniul:
  • nav {
       width: 1000px;
       height: 3rem;
    }
  • definiţi elementul main care cuprinde postările (elementele article):
  • main{
       background-color:#FFE97F;
       width: 95%;
       border:1px solid #FFF600;
       padding: 15px;
    }
  • impuneţi câte o culoare de fundal şi o culoare pentru border tuturor elementelor rămase:
  • article {
        background-color:#FFF;
        width: 80%;
        border:1px solid blue;
    }
    
    footer {
        background-color:#364956;
        width: 100%;
        border:1px solid blue;
    }
    
  • adăugaţi clasa .dreapta pentru a putea stiliza diferit elementele section conținute în elementul aside şi modificaţi în fişierul index.html:
  • .dreapta {
        background-color:lightgreen;
        width: 80%;
        border:1px solid darkgreen;
    }
        <aside>
           <section class="dreapta">
              <p>formular de cautare</p>
           </section>
     
           <section class="dreapta">
              <p>Like us</p>
           </section>
     
           <section class="dreapta">
              <p>Posturi populare</p>
           </section>
        </aside> 
    

Observaţii:

  • culorile de fundal şi border-ele sunt doar orientative, după stilizarea finală nu va mai fi nevoie de ele;
  • lăţimea elementelor va fi modificată după stilizarea finală.



TOP

Exercițiul 2

Îmbunătăţiţi aspectul fişierului creat anterior, D:\postuniv\web\blog\index.html modificând pe rând fiecare parte a lui, astfel:

  • centraţi conţinutul paginii, modificând containerul #pagina, adăugând:
  •    margin: 0 auto;
    
  • ştergeţi culoarea de fundal şi border-ul aplicat elementului header şi asiguraţi-vă că lăţimea acestuia este egală cu lăţimea imaginii folosite. În cazul nostru imaginea myblog.png are dimensiunile 1000 x 115px;
  • stilizaţi lista din elementul nav încadrând-o într-un container , #navcontainer, care se întinde pe orizontală în afara containerului principal (#pagina), este de culoarea #364956 şi are înălţîmea de 3rem. Aceste elemente sunt indentificate din şablonul folosit activând în browser opţiunea "Inspect element".
    Adăugaţi în fişierul stil.css
  • #navcontainer {
       background: #364956;
       height: 3rem;
       width: 100%;
    }

    Observaţie:

    Pentru a putea lăsa bara care conţine meniul să se extindă pe tot ecranul, blocul #pagina va trebui întrerupt şi apoi reluat după nav. Deoarece un element căruia i s-a ataşat un identificator (ID) nu poate să apară în pagină decât o singură dată (vezi cursul 1), soluţia este renunţarea la #pagina şi definirea unei clase, .pagina, cu aceeaşi stilizare. Rezultat:

  • modificaţi în fişierul .html:
  •    <div id="navcontainer">
         <nav>
            <ul>
               <li><a href="index.html>HOME</a></li>
               <li><a href="prezent.html">PROIECTE</a></li>
               <li><a href="prezent.html">CALATORII</a></li>
               <li><a href="prezent.html">DESPRE MINE</a></li>
            </ul>
         </nav>
       </div>
    


  • schimbaţi modul de afişare a listei, renunţând la marcatorii de la începutul rândurilor:
  • ul {
       list-style-type: none;
    }
  • schimbaţi afişarea listei astfel ca ea să devină de tip "inline", cu elementele li dispuse pe orizontală, adăugând în fişierul de stil:
  • nav ul li {
       float: left;
       display:inline; /* Dispunere in linie */
       line-height: 3rem;
    }
  • adăugaţi centrarea pe orizontală pentru elementul nav:
  • nav {
       width: 1000px;
       margin: 0 auto;
       line-height: 3rem;
    }
  • coloraţi scrisul în alb şi introduceţi stilul care distanţează cuvintele meniului:
  • nav ul li a {
       display:block;
       line-height: 3rem; /* coincide cu marimea barei nav */
       text-align: center;
       color: white;
       padding: 0 1rem;
    } 
  • aduceţi primul cuvânt (HOME) în dreptul marginii din stânga a paginii adăugând o stilizare punctuală (inline) pe elementul li în cauză:
  •    <div id="navcontainer">
         <nav>
            <ul>
               <li><a href="index.html" style="margin-left:-1rem;">HOME</a></li>
               <li><a href="prezent.html">PROIECTE</a></li>
               <li><a href="prezent.html">CALATORII</a></li>
               <li><a href="prezent.html">DESPRE MINE</a></li>
            </ul>
         </nav>
       </div>
    



    TOP