Ministerul Educa iei, Culturii i Cercet rii al Republicii Moldova Universitatea

Tehnic a Moldovei

Facultatea Electronic i Telecomunica ii

Departamentul Telecomunicatii i Sisteme Electronice

Lucrare de laborator
La disciplina:
,,Aplicații software specializate”

A efectuat: st.gr.RST-181 Rotari Mihail

A verificat: lect.univ., Lachi Arina

ă






ţ




ă
ş


ş
ş

ă
ţ

 Chi in u 2021

1) În primul rând, înainte de a începe să mutăm orice element, facem unele

clarificări în CSS-ul nostru. În fișierul main.css, chiar sub stilurile noastre
de grilă, adăugăm clarificarea sub clasa group, la fel ca înainte.
/*
========================================
Clearfix
========================================
*/
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
2) Acum plutim elementul <h1> din elementul <header> la stânga și permitem
ca toate celelalte conținuturi din antet să se înfășoare în dreapta acestuia.
Pentru a face acest lucru, să adăugăm o clasă de logo la elementul <h1>.
Apoi, în CSS-ul nostru, să adăugăm o nouă secțiune de stiluri pentru antetul

ş
ă

 principal. În această secțiune, vom aselecta elementul <h1> cu clasa de logo

și apoi îl vom pluti la stânga.

<h1 class="logo">
<a href="index.html">BOLT.MD</a>
</h1>
/*
========================================
Primary header
========================================
*/

.logo {
border-top: 4px solid #648880;
padding: 40px 0 22px 0;
float: left;
}
3) Cel mai apropiat element părinte al elementului <h1> este elementul
<header>, așa că vom dori să adăugăm clasa group la elemental <header>.
Făcând acest lucru, se aplică stilurile de clarificare pe care le-am configurat
anterior elementului <header>.
<header class="container group">
<section class="container">
<h1 class="logo">
<a href="index.html">BOLT.MD</a>
</h1>
</section>

 <nav>
<a href="index.html">Acasă</a>
<a href="servicii.html">Serviciile noastre</a>
<a href="Recenzii.html">Recenzii</a>
<a href="contacts.html">Contacte</a>
<a href="about.html">Despre noi</a>
</nav>
</header>
4) Elementul <header> prinde contur, deci aruncăm o privire asupra
elementului <footer>. La fel cum am făcut cu elementul <header>, vom
pluti drepturile de autor la stânga în elementul <small> și vom lăsa toate
celelalte elemente să îl înfășoare în dreapta. Pre deosebire de elemental
<header>, nu vom folosi o clasă direct pe elementul plutit. Acum vom
aplica o clasă părintelui elementului plutit și vom folosi un selector CSS
unic pentru a selecta elementul, apoi a pluti. Să începem prin adăugarea
clasei primary-footer la alementul <footer>. Deoarece știm că vom pluti un
element în elemental <footer>, ar trebui să adăugăm și clasa group.
<footer class="primary-footer container group">
<small>&copy; Bolt.md | UTM 2021</small>
<nav>
<a href="index.html">Acasă</a>
<a href="servicii.html">Serviciile noastre</a>
<a href="Recenzii.html">Recenzii</a>
<a href="contacts.html">Contacte</a>
<a href="about.html">Despre noi</a>
</nav>
</footer>

 5) Acum, când clasa primary-footer se află pe elementul <footer>, putem

folosi acea clasă pentru a precalifica elementul <small> cu CSS. Vom dori
să selectăm și să plutim elementul <small> la stânga. Să nu uităm să creăm
o nouă secțiune în fișierul main.css pentru aceste stiluri.
/*
========================================
Primary footer
========================================
*/
.primary-footer small {
float: left;
}
Aici selectăm elementul <small>, care trebuie să se afle într-un element cu
valoarea atibutului de cală a primary-footer, cum ar fi elementul <footer>, de
exemplu.
6) În cele din urmă, haideți să adaugăm padding în partea de sus și de jos a
elementului <footer> pentru a-l separa puțin mai mult de restul paginii.
Putem face acest lucru direct folosind clasa primary-footer cu un selector
de clase.
.primary-footer {
padding-bottom: 44px;
padding-top: 44px;
}
Cu toate aceste modificări ale elementelor <header> și <footer>, trebuie să
fim siguri că le realizăm pe fiecare pagină, nu doar pe pagina index.html.
7) Voi crea un aspect reutilizabil în trei coloane folosind elementele bloc inline.
Vom face acest lucru într-un mod care să ne permită să avem trei coloane cu

 lățimea egală sua două coloane cu lățimea totală împărțită între ele, două
treimi într-una și o treime în cealaltă. Pentru început, vom crea clase care
definesc lățimea acestor coloane. Cele două clase pe care le vom crea sunt
col-1-3, pentru o treime și col-2-3, pentru două treimi. În secțiunea grilă a
fișierului nostru main.css, mergem mai departe și definim aceste clase și
lățimile corespunzătoare ale acestora.
.col-1-3 {
width: 33.33%;
}
.col-2-3 {
width: 66.66%;
}
8) Vom dori ca ambele coloane să fie afișate ca elemente bloc inline. Va trebuii
să ne asigurăm că alinierea lor vericală este setată și în partea de sus a
fiecărei coloane. Să creăm doi noi selectori care vom împărtăși afișarea și
stilurile de proprietăți.de aliniere verticală.
.col-1-3,
.col-2-3 {
display: inline-block;
vertical-align: top;
}
9) Am creat două selectoare de clasă, col-1-3 și col-2-3, care sunt separate prin
virgulă. Virgula de la sârșitul primului selector semnifică că urmează un alt
selector. Al doilea selector este urmat de paranteza creată de deschidere, {,
cee ace înseamnă că urmează declarațiile de stil. Prin această separare,
putem lega aceleași stiluri la mai mulți selectori simultan.

 10)Vom dori să punem puțin spațiu între fiecare dintre coloane pentru a ajuta la
destrămarea conținutului. Putem realiza acest lucru punând padding
orizontal pe fiecare dintre coloane. Acest lucru funcționează bine; cu toate
acestea , când două coloane stau unul lângă altul, lățimea spațiului dintre ele
va fi dublă față de spațiul din coloanele exterioare până la marginea
rândului. Pentru a echilibra, vom adăuga același padding din coloanele
noastre în acea grilă. Să folosim un nume de clasă grid pentru a indentifica
grila noastră, apoi să identificăm același padding orizontal pentru clasele
noastre, col-1-3 și col-2-3. Cu virgulele care separă din nou selecțiile
noastre, CSS-ul nostru arată astfel:
.grid,
.col-1-3,
.col-2-3 {
padding-left: 15px;
padding-right: 15px;
}
11)Atunci când setăm padding orizontal, va trebui să fim atenți. Am creat un
element de container, cunoscut ca clasa de container, pentru a centra întreg
conținutul nostru pe o pagină dintr-un element cu o suprafață de 1200 pixeli.
În prezent, dacă ar fi să introducem un element cu clasa grid în interiorul
unui element cu clasa de container, padding-ul lor orizontal s-ar adăuga unul
la altul, iar coloanele noastre nu ar părea proporționale cu lățimea restului
paginii. Noi dorim să se întâmple acest lucru, așa că, în schimb, va trebuisă
împărtășim unele dintre stilurile containerului setate cu cele de grilă. Mai
exact, va trebui să împărtășim proprietatea și valorile lățimii și proprietatea
și valorile marginei.

 .container,
.grid {
margin: 0 auto;
width: 1200px;
}
.container {
padding-left: 30px;
padding-right: 30px;
}
Acum orice element cu clasa de container sau grid va avea o lățime de
1200 de pixeli și este centrat pe pagină. În plus, am păstrat padding orizontal
existent pentru orice element din clasa container mutând-o într-un set nou de
reguli separat.
12)Acum este timpul să lucrăm în HTML-ul nostru și să vedem cum
funcționează aceste clase. Vom începe cu teaserele de pe pagina principașă,
în fișierul nostru index.html, alinierea lor în trei coloane. În prezent,
teaserele sunt învelite într-un element <section> cu clasa container. Vom
dori să schimbăm acea clasă de la container la grid, astfel încât să putem
începem să plasăm coloane în el.
<section class="grid">
<section class="col-1-3">
<a href="rst.html">
<h5>Lucrăm cu:</h5>
<h3>Laptopuri</h3>
</a>
</section>

 13)În continuare vom dori să adăugăm clasa col-1-3 la fiecare dintre elementele
<selection> din elemental <section> cu clasa grid.
<section class="grid">
<section class="col-1-3">
<a href="rst.html">
<h5>Lucrăm cu:</h5>
<h3>Dispozitivele Android</h3>
</a>
</section>
<section class="col-1-3">
<a href="imtc.html">
<h5>Lucrăm cu:</h5>
<h3>Dispozitivele Apple</h3>
</a>

</section>
<section class="col-1-3">
<a href="tst.html">
<h5>Lucrăm cu:</h5>
<h3>Gadgeturi</h3>

</section>
</section>
<section class="grid">
<section class="col-1-3">
<a href="rst.html">
<h5>Lucrăm cu:</h5>

 <h3>Laptopuri</h3>
</a>
</section>
<section class="col-1-3">
<a href="imtc.html">
<h5>Lucrăm cu:</h5>
<h3>All in one și PC</h3>
</a>

</section>
<section class="col-1-3">
<a href="tst.html">
<h5>Lucrăm cu:</h5>
<h3>Alte dispozitive</h3>

</section>
14)În sfârșit, deoarece fiecare dintre coloanele noastre este un element de bloc
inline, vom dori să ne asigurăm că eliminăm spațiul gol dintre ele. Vom
folosi comentarii pentru a face acest lucru și vom adăuga un pic de
documente care notează fiecare secțiune viiitoare, pentru a ne organiza mai
bine codul.
<section class="grid">
<section class="col-1-3">
<a href="rst.html">
<h5>Lucrăm cu:</h5>
<h3>Dispozitivele Android</h3>
</a>

 </section>
<section class="col-1-3">
<a href="imtc.html">
<h5>Lucrăm cu:</h5>
<h3>Dispozitivele Apple</h3>
</a>

</section>
<section class="col-1-3">
<a href="tst.html">
<h5>Lucrăm cu:</h5>
<h3>Gadgeturi</h3>

</section>
</section>
<section class="grid">
<section class="col-1-3">
<a href="rst.html">
<h5>Lucrăm cu:</h5>
<h3>Laptopuri</h3>
</a>
</section>
<section class="col-1-3">
<a href="imtc.html">
<h5>Lucrăm cu:</h5>
<h3>All in one și PC</h3>
</a>

 </section>
<section class="col-1-3">
<a href="tst.html">
<h5>Lucrăm cu:</h5>
<h3>Alte dispozitive</h3>

</section>
15)Avem acum o grilă reutilizabilă cu trei coloane care acceptă mai multe
aranjamente, folosind atât coloane de o treime câ și două treimi. Pagina
noastră de pornire are acum trei coloane, împărțind cele 3 teasere.

 HTML

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="utf-8">
<title>BOLT.MD</title>
<link rel="stylesheet" href="assets/stylesheets/main.css">
</head>
<body>
<header class="container group">
<section class="container">
<h1 class="logo">
<a href="index.html">BOLT.MD</a>
</h1>
</section>
<nav>
<a href="index.html">Acasă</a>
<a href="servicii.html">Serviciile noastre</a>
<a href="Recenzii.html">Recenzii</a>
<a href="contacts.html">Contacte</a>
<a href="about.html">Despre noi</a>
</nav>
</header>
<section class="hero container">
<h2>Aveți probleme cu dispozitivul dmv.?</h2>
<p>Rezolvăm orice problemă!</p>

 <a class="btn btn-alt" href="contacte.html">Contactează-ne acum!</a>

</section>
<section class="grid">

<!-- RST -->

<section class="col-1-3">
<a href="rst.html">
<h5>Lucrăm cu:</h5>
<h3>Dispozitivele Android</h3>
</a>
</section><!--

IMTC

--><section class="col-1-3">
<a href="imtc.html">
<h5>Lucrăm cu:</h5>
<h3>Dispozitivele Apple</h3>
</a>

</section><!--

TST

--><section class="col-1-3">
<a href="tst.html">

 <h5>Lucrăm cu:</h5>
<h3>Gadgeturi</h3>

</section>
</section>
<section class="grid">
<section class="col-1-3">
<a href="rst.html">
<h5>Lucrăm cu:</h5>
<h3>Laptopuri</h3>
</a>
</section><!--

IMTC

--><section class="col-1-3">
<a href="imtc.html">
<h5>Lucrăm cu:</h5>
<h3>All in one și PC</h3>
</a>

</section><!--

TST

--><section class="col-1-3">
<a href="tst.html">

 <h5>Lucrăm cu:</h5>
<h3>Alte dispozitive</h3>

</section>
</section>
<footer class="primary-footer container group">
<small>&copy; Bolt.md | UTM 2021</small>
<nav>
<a href="index.html">Acasă</a>
<a href="servicii.html">Serviciile noastre</a>
<a href="Recenzii.html">Recenzii</a>
<a href="contacts.html">Contacte</a>
<a href="about.html">Despre noi</a>
</nav>
</footer>
</body>
</html>
CSS
/* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,

 b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {

 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*
========================================
Grid
========================================
*/

*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container,
.grid {
margin: 0 auto;

 width: 1200px;
}
.container {
padding-left: 30px;
padding-right: 30px;
}
.col-1-3 {
width: 33.33%;
}
.col-2-3 {
width: 66.66%;
}
.col-1-3,
.col-2-3 {
display: inline-block;
vertical-align: top;
}
.grid,
.col-1-3,
.col-2-3 {
padding-left: 15px;
padding-right: 15px;
}
/*
========================================
Clearfix
========================================

 */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
/*
========================================
Typography
========================================
*/

h1, h3, h4, h5, p {

margin-bottom: 22px;
}
/*
========================================
Buttons
========================================
*/

 .btn {
border-radius: 5px;
display: inline-block;
margin: 0;
}
.btn-alt {
border: 1px solid #dfe2e5;
padding: 10px 30px;
}
/*
========================================
Home
========================================
*/

.hero {
padding: 22px 80px 66px 80px;
}
/*
========================================
Primary header
========================================
*/

.logo {
border-top: 4px solid #648880;

 padding: 40px 0 22px 0;

float: left;
}
/*
========================================
Primary footer
========================================
*/

.primary-footer small {
float: left;
}
.primary-footer {
padding-bottom: 44px;
padding-top: 44px;
}

 Concluzii:
În lucrarea de laborator dată am îndeplinit toate cerințele solicitate de către
profesor, am urmat toți pașii pentru ca în final să obținem o structură a site-ului
dorită, pe cât și rezultatul dorit.