Explanations to week content
Slider Plugins
You can download slider plugins for free online. You simply search html slider. You will have couple of plugins. The integration to your page follow almost the same concepts.
1. Download the plugin
2. Go to the css folder and copy the necessary style sheet files into your css folder
3. Go to the js folder and copy the necessary JavaScript into your js folder
4. If there are images referred in the css, copy the images to the appropriate folders
5. Refer to the css and the js in your head
6. Open the example file mostly index.html and see how the sliding codes are written. Most often you need to call the slider function in your JavaScript in your page. This could be seen in the example html file.
The following is the slider plugin I use for most of my web design projects. The slider is similar to the one use on the kuulchat.com home page. I have included the link and the steps to add that slider plugin to your website. Please follow the steps below:
Step 1
Download the zipped file below and extract.
Step 2
In your css, place the following files found in the css folder
Step 3
In your js folder, place the following files found in the js folder
Step 4
In your images folder, place the following files found in the images folder
Step 5
Refer to them in the head of your page
<script src="js/jquery.js"></script>
<script src="js/lean-slider.js"></script>
<link rel="stylesheet" href="css/lean-slider.css" type="text/css" />
<link rel="stylesheet" href="css/sample-styles.css" type="text/css" />
Step 6
Include the sliding divs and images at where you wish to place the slide show
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
<img src="slides/1.jpg" width="100%" />
</div>
<div class="slide1">
<img src="slides/2.jpg" width="100%" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
Note
Your sliding images are placed in divs with class slide1. You have to indicate the path of your images in the src of the image in that div. Thus in the above example the images are found in the slides folder.
The images must also be of the same dimensions (height and width) otherwise the images won't be of the same height when sliding.
You can place as many sliding images as you want by having more divs with class slide1 and inside each of them your image and its path.
Step 7
Call the slider function when the page load. At the bottom of the closing tag of the body, add this script.
<script type="text/javascript">
$(document).ready(function(){
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
Complete hmtl code is shown below:
<html>
<head>
<script src="js/jquery.js"></script>
<script src="js/lean-slider.js"></script>
<link rel="stylesheet" href="css/lean-slider.css" type="text/css" />
<link rel="stylesheet" href="css/sample-styles.css" type="text/css" />
</head>
<body>
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
<img src="slides/1.jpg" width="100%" />
</div>
<div class="slide1">
<img src="slides/2.jpg" width="100%" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
</html>
nth-child()
Is used to specify an attribute for every occurrence of an element.
Examples
To make an element at nth position have a specific attribute(s), the below style could be written
<style>
element:nth-child(n){
attribute(s) comes here
}
</style>For instance if I want the 3 paragraph to be red, I could write the style below:
<style>
p:nth-child(3){
color:red;
}
</style>
To make every even element have a specific attribute(s), the below style could be used:
<style>
element:nth-child(even){
attribute(s) comes here
}
</style>
For instance if I want every paragraph at even positions to be red, I could write the style below:
<style>
p:nth-child(even){
color:red;
}
</style>
If I want every row of a table at the even positions to be green, I could write the style below:
<style>
tr:nth-child(even){
background:green;
color:#fff;
}
</style>
To make every odd element have a specific attribute(s), the below style could be used:
<style>
element:nth-child(odd){
attribute(s) comes here
}
</style>
For instance if I want every paragraph at odd positions to be red, I could write the style below:
<style>
p:nth-child(odd){
color:red;
}
</style>
If I want every row of a table at the odd positions to be green, I could write the style below:
<style>
tr:nth-child(odd){
background:green;
color:#fff;
}
</style>
You can as well use a formula (an + b).
Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.
For instance if you are displaying divs or links inline-block and you don't want the div's at the end to have margin right, you could write the below style:
<style>
.item{
display:inline-block;
width:32%;
margin-bottom:20px;
margin-right:20;
background:#FFFFFF;
}
.item:nth-child(3n+0){
margin-right:0px;
}
</style>
Example
<html>
<head>
<style>
body{
background:#F5F5F5;
}
.container{
width:1200px;
margin-left:auto;
margin-right:auto;
}
.item{
display:inline-block;
width:32%;
margin-bottom:20px;
margin-right:20;
background:#FFFFFF;
}
.item:nth-child(3n+0){
margin-right:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
</body>
</html>
last-child
Is used to specify an attribute for the last-child of an element.
Example
If we want the last paragraph to have a specific attribute, the style below could be written.
<style>
p:last-child{
color:red;
}
</style>
Practice
You can now apply all the concepts we have learnt in weeks 1 - 4 to design the page with sliding images below.
Figure: Practice page
You simply continue from the sliding page you have already implemented after following the above steps.
Afterward you can compare your html code with the code below.
Please design your page first before referring to the code. You can as well pause the video when you get to where I am designing.
Resources
Top header background code : #fc0
Figure: Logo
Figure: Secretarial works
Figure: Web design
Figure: Computer training
Figure: Footer
Practice Page
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="description" content="I.T & computer training services" />
<meta name="keywords" content="Compu-Train, secretarial works, web design, computer training" />
<title>Compu-Train</title>
<link rel="shortcut icon" type="image/x-icon" href="images/icon.ico" />
<script src="js/jquery.js"></script>
<script src="js/lean-slider.js"></script>
<link rel="stylesheet" href="css/lean-slider.css" type="text/css" />
<link rel="stylesheet" href="css/sample-styles.css" type="text/css" />
<style>
body{
background:#F5F5F5;
}
body,div,p,ul{
margin:0px;
padding:0px;
}
.header{
background:#fc0;
position:fixed;
width:100%;
z-index:2;
}
.push{
height:45px;
}
a{
text-decoration:none;
}
ul{
list-style:none;
}
.menu li{
display:inline-block;
}
.menu li a{
color:#FFFFFF;
display:block;
padding:10px 20px 10px 20px;
}
.logo-box{
display:inline-block;
vertical-align:top;
padding: 4px 0px 4px 0px;
}
.menu-box{
display:inline-block;
vertical-align:top;
}
.container{
width:1200px;
margin-left:auto;
margin-right:auto;
}
.item{
display:inline-block;
width:32%;
margin-bottom:20px;
margin-right:20;
background:#FFFFFF;
}
.item:nth-child(3n+0){
margin-right:0px;
}
.item-heading{
padding:10px;
font-weight:bold;
text-align:center;
color:#000;
}
.item img{
width:100%;
height:230px;
}
.footer{
background-image: url('images/footer_bg.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
height:250px;
color:#FFF;
margin-top:50px;
padding:20px 0px 20px 0px;
}
.footer a{
color:#FFFFFF;
}
.footer ul li a{
display:block;
padding:5px 10px 5px 10px;
}
.footer ul li a:hover{
text-decoration:underline;
}
.footer-divider-box{
display:inline-block;
vertical-align:top;
width:32%;
margin-right:20px;
}
.footer-divider-box:nth-child(3n+0){
margin-right:0px;
}
.copy-right{
text-align:center;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="logo-box">
<a href="" class="logo"><img src="images/logo.png" width="35" /></a>
</div>
<div class="menu-box">
<ul class="menu">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Our Services</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="push"></div>
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
<img src="slides/1.jpg" width="100%" />
</div>
<div class="slide1">
<img src="slides/2.jpg" width="100%" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
<div class="container">
<h1>What we do</h1>
<div style="margin-top:20px;">
<a href="" class="item">
<div class="item-heading">Secretarial Works</div>
<img src="images/typing.jpg" />
</a>
<a href="" class="item">
<div class="item-heading">Web Design</div>
<img src="images/web_design.png" />
</a>
<a href="" class="item">
<div class="item-heading">Computer Training</div>
<img src="images/computer_training.jpg" />
</a>
</div>
</div>
<div class="footer">
<div class="container">
<div>
<div class="footer-divider-box">
<h4>Compu-Train</h4>
<ul>
<li><a href="">About Us</a></li>
<li><a href="">Our Services</a></li>
</ul>
</div>
<div class="footer-divider-box">
<h4>Connect With Us</h4>
</div>
<div class="footer-divider-box">
<h4>Contact Us</h4>
</div>
</div>
</div>
<div class="copy-right">© Copyright 2020</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
</html>
Digital Address: GZ-033-0057
King Kotey Road
Teshie - Accra
Ghana
+233 59 993 7122
Finland
+358 44 986 0934
info@kuulchat.com
© Copyright 2015 - 2024
All Rights Reserved
