Sesiune 3

SESIUNE 3
Adăugarea componentelor în pagina de bază a site-ului

DESIGNER VS PROGRAMMER ;)
CE FACEM AZI?
▪ Din design-ul (imaginea) paginii -> realizăm macheta site-ului,

utilizând resursele Bootstrap4, la necesitate adăugăm unele elemente HTML, unele
proprietăți de stil etc.
CREĂM FOLDER-UL PROIECTULUI
▪ Și creăm, apoi structurăm sub-folderele necesare proiectului nostru web

CÂTEVA CUVINTE DESPRE
NAVIGABILITATE ȘI ACCESARE RESURSE
INDEX.HTML INIȚIAL ERA
ACCESEZ TEMELE BOOTSTRAP
CREEZ LEGĂTURA CU FIȘIERUL .CSS,
ÎNCĂRCAT
...<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Bootstrap-ecommerce by Vosidiy">
<title>UI KIT - Marketplace and Ecommerce html template</title>
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">

<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>

<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>

<link href="fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet"> ...
EU AM ADĂUGAT TEMA ”JOURNAL”
CA BAZĂ AM LUAT MAGAZINUL ONLINE
LAREDOUTE.FR
ADAUG FAVICON-UL SITE-ULUI
▪ Accesez http://www.iconarchive.com/tag/favicon-shopping sau altceva ce va

place mai mult
Modific în ”head” linia <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">,

schimbând imaginea
Era Este
SCHIMB TEXTUL ȘI IMAGINEA DE LA LOGO
▪ Era
▪ Este acum
Modific conținutul elementelor responsabile
<div class="brand-wrap">
<img class="logo" src="images/shopping-bags-
icon.png">
<h2 class="logo-text">myMarket</h2>
</div>
FAC BARA CU MENIUL FIXĂ
▪ Adaug
<nav class="navbar navbar-expand-sm navbar-dark bg-secondary fixed-top">
SCHIMB ANTETUL PAGINII DE START
▪ Am modificat opțiunile din meniu, am adăugat iconițe de pe fontawesome...etc.

pentru login, wish list și coșul de cumpăraturi și obțin...
...Sau puteți utiliza componente preluate din ...

bootstrap-ecommerce-uikit/ui-ecommerce/starter-alibaba-home.html
sau un alt fișier din resursele recomandate
ADAUG O IMAGINE
▪ ...și un slider pentru produsele cu reduceri

PENTRU ACEASTA...
▪ Preiau din fișierul
.../bootstrap-ecommerce-uikit/ui-ecommerce/starter-landing.html
secvența de cod responsabilă pentru generarea acestui bloc cu poză și modific un pic primele linii

<section class="section-intro pt-0">
<div class="container-fluid intro">
<div class="row d-flex" style="min-height:600px;">
<div class="col-sm-6 d-flex align-items-center">
<header class="intro-wrap text-white">
<h2 class="display-3"> Holidays! </h2>
<p class="lead">50% discount on home appliances!</p><a href="#" class="btn btn-warning">Order now!</a>
</header> 
</div> 
</div> 
</div> 
</section>
ADAUG STILURI PENTRU BLOCUL
INTRODUS
▪ În fișierul styles.css, adaug secvența
.intro {
background-image: url("../images/intro.jpg");
background-size: cover;
}
ÎN CONTINUARE ADAUG UN SLIDER
▪ Pentru produsele cu reducerea de 50% - fiecare slide este și un link
▪ Accesez fișierul ... /bootstrap-ecommerce-uikit/ui-ecommerce/example-sliders.html
▪ Adaug link-urilie către owlCarousel și copii codurile pentru slider


<link href="plugins/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="plugins/owlcarousel/assets/owl.theme.default.css" rel="stylesheet">
<script src="plugins/owlcarousel/owl.carousel.min.js"></script>

<link href="plugins/slickslider/slick.css" rel="stylesheet" type="text/css" />
<link href="plugins/slickslider/slick-theme.css" rel="stylesheet" type="text/css" />
<script src="plugins/slickslider/slick.min.js"></script>
CODUL PENTRU SLIDER L-AM PRELUAT
▪ ...din fișierul .../bootstrap-ecommerce-uikit/ui-ecommerce/example-sliders.html
...și am modificat un pic structura cardului – am adăugat prețul vechi tăiat,

reducerea, iar apoi prețul nou, redus
MAI ADĂUGAȚI 1-2 COMPONENTE ÎN
PAGINA DE START
Eu am adăugat încă un slider...pentru cele mai solicitate produse...
Vedeți rezultatele obținute...
SCHIMB FOOTER-UL
▪ Îl preiau din fișierul ...
bootstrap-ecommerce-uikit/ui-ecommerce/starter-alibaba-listing-grid.html
▪ Era
▪ Este acum
DATA VIITOARE...
▪ vom continua cu stabilirea fluxului de evenimente și scenariile posibile de

deplasare prin paginile site-ului
▪ Vom determina paginile suplimentare necesare
▪ Vom crea o pagină cu categoriile unui compartiment menționat în meniu

Sesiune 3

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Sesiune 3

Încărcat de

Drepturi de autor:

Formate disponibile

SESIUNE 3

Adăugarea componentelor în pagina de bază a site-ului

▪ Din design-ul (imaginea) paginii -> realizăm macheta site-ului,

▪ Și creăm, apoi structurăm sub-folderele necesare proiectului nostru web

▪ Accesez http://www.iconarchive.com/tag/favicon-shopping sau altceva ce va

Modific în ”head” linia <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">,

▪ Am modificat opțiunile din meniu, am adăugat iconițe de pe fontawesome...etc.

...Sau puteți utiliza componente preluate din ...

▪ ...și un slider pentru produsele cu reduceri

<section class="section-intro pt-0">

<div class="container-fluid intro">

<div class="row d-flex" style="min-height:600px;">

<div class="col-sm-6 d-flex align-items-center">

<header class="intro-wrap text-white">

<h2 class="display-3"> Holidays! </h2>

<p class="lead">50% discount on home appliances!</p><a href="#" class="btn btn-warning">Order now!</a>

</header>

</div>

</div>

</div>

▪ ...din fișierul .../bootstrap-ecommerce-uikit/ui-ecommerce/example-sliders.html

...și am modificat un pic structura cardului – am adăugat prețul vechi tăiat,

▪ vom continua cu stabilirea fluxului de evenimente și scenariile posibile de

S-ar putea să vă placă și