Site-uri și aplicații pentru WWW

Aplicații (7)


Site-ul ITCorner

Xampp

Descărcați pachetul de aplicții XAMPP de la adresa https://www.apachefriends.org/ro/download.html.

Instalaţi-l în rădăcina unuia dintre discurile calculatorului Dv., apoi porniți serverul de web Apache din panoul de control xampp-control.exe.

TOP

ITCorner

Descărcați un template gratuit bazat pe Bootstrap de la adresa: https://bootstrapmade.com/groovin-free-bootstrap-theme/. În momentul descărcării veți primi o arhivă, Groovin.zip.

Creați un subdirector derivat din .../xampp/htdocs/. Acesta va conține toate fișierele site-ului. De exemplu: E:/xampp/htdocs/ITCorner/.

Dezarhivați Groovin.zip în directorul creat și vizualizaţi site-ul tastând în caseta de adrese a browserului adresa http://localhost/ITCorner/. Aspectul site-ului trebuie să fie identic cu cel vizualizat la adresa de descărcare.

Observație: site-ul este de tip single page, fiecare intrare în meniu fiind de fapt o secțiune a site-ului. Fiecare secțiune are un id și legătura spre aceasta este realizată folosind referința specifică. De exemplu selectarea opțiunii About din meniu va realiza o translatare a conținutului afișat până la secțiunea about.




Analizați site-ul descărcat. Această analiză se referă, pentru început, la elementele care vor fi păstrate sau la care veți renunța. După ce ați hotărât "ce rămâne și ce nu" înlocuiți conținuturile fiecărei secțiuni păstrate cu informații personalizate. O analiză a conținuturilor menținute presupune identificarea imaginilor, dimensiunea acestora și locul în care sunt salvate. Puteți păstra denumirile imaginilor, sau le puteți da alte denumiri. Pentru a fi cât mai ușoară personalizarea, se recomandă menținerea denumirilor, astfel nefiind nevoie de alte modificări în coduri. Apoi se poate trece la schimbarea intrărilor în meniu și a textelor din fiecare secțiune.

Pentru simplificarea codului, propunem renunțarea la meniul "Drop Down", în contextul propus nefiind nevoie de el.

Fără obligativitatea respectării ordinii personalizării elementelor, transformați pas cu pas site-ul, astfel:

  1. Înlocuiți cel puțin una dintre imaginile afișate de carusel folosind imaginea imagine_home.jpg din directorul imagini_folosite aflat în pagina cursului
    • identificați imaginea:
    • notați dimensiunile ei:
    • alegeți imaginea nouă (sau descărcați-o pe cea propusă), redimensionați-o corespunzător folosind orice aplicație specializată în prelucrarea de imagini. O soluție la îndemână poate fi de exemplu Paint, dar dacă sunt necesare prelucrări mai complicate, se poate alege paint.net care se poate descrărca gratuit de aici. Redimensionați imaginea și redenumiți-o:
    • reafișați pagina principală:
  2. Modificați textele afișate pe primul slide:
  3. <!-- Slide 1 -->
    <div class="carousel-item active" style="background: url(assets/img/slide/slide-1.jpg);">
      <div class="carousel-container">
       <div class="carousel-content">
         <h2 class="animate__animated animate__fadeInDown">Grow Your Business</h2>
         <p class="animate__animated animate__fadeInUp">Ut velit est quam dolor ad a aliquid qui aliquid. Sequi ea ut et est quaerat sequi nihil ut aliquam. 
         Occaecati alias dolorem mollitia ut. Similique ea voluptatem. Esse doloremque accusamus repellendus deleniti vel. Minus et tempore modi architecto.</p>
       <div>
        <a href="#about" class="btn-get-started animate__animated animate__fadeInUp scrollto">Read More</a>
       </div>
      </div>
     </div>
    </div>
    
    devine:
    <!-- Slide 1 -->
    <div class="carousel-item active" style="background: url(assets/img/slide/slide-1.jpg);">
      <div class="carousel-container">
       <div class="carousel-content">
         <h2 class="animate__animated animate__fadeInDown">Construiește cu noi</h2>
         <p class="animate__animated animate__fadeInUp">Te așteptăm să devii clientul nostru. Îți oferim o gamă variată de servicii IT. 
         Compania ta va putea beneficia de experianța noastră.</p>
       <div>
        <a href="#about" class="btn-get-started animate__animated animate__fadeInUp scrollto">Află mai multe</a>
       </div>
      </div>
     </div>
    </div>
    





  4. Modificați, pe rând, toate elementele personalizabile, imagini, descrieri, etc.
  5. Adăugați legături către paginile dumneavoastră de social media, renunțând la pictogramele care nu au corespondent în realitatea dv.:
  6. Modificați intrările din meniu
  7. Modificați sigla site-ului
  8. Reîncărcați pagina index.html într-o formă intermediară:





TOP