Sunteți pe pagina 1din 22

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">
<!-- jQuery -->
<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>
<!-- Bootstrap4 files-->
<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!-- Font awesome 5 -->
<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 INTRO ========================= -->

<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> <!-- intro-wrap .// -->

</div> <!-- col.// -->

</div> <!-- row.// -->

</div> <!-- container .// -->

</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
<!--adaug link-urile la slider-->
<!-- plugin: owl carousel -->
<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>
<!-- plugin: slickslider -->
<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