Web system and technology

Web system and technology
Presented to Mam Sidra Anwar
Government College Women University Sialkot

 Proffesional look
 Attached as external file
 Take less space as images can
 Give quick idea about the concept
 File is provided free
 Easy to use
 Make website more attractive
 Use in twitter,facebook and avast user
interface

 We can use these icons in our website by
following the step by step proceadure
 Step:01
Go to google and type www.fontawesome.com

 Step:02
Click on the first link then the following
window will bw appear the hit download

 Step:03
This will contain two file fontawesome and
fontawesome min.
Difference between both is that:
 font awesome min file is conjusted and take less
space but it can not easily understandable
 font awesome file is not conjusted and take more
space but it is easily understandable

 It contains classes like css
 These classes have special effect on the
things that we want to style

 Fontawesome min will look like that

 Font awesome file will look like that:

 Step:04
 In head section a link should be given to
attach the external file
<head>
<link rel="stylesheet" type="text/cs” href="font-awesome-
4.4.0cssfont-awesome.min.css""/>
</head>

 Syntex:
<span class=“fa fa-any class name></span>
OR
<i class=“fa fa-any class name></i>

 Step:05
It can be used in menu bar like:
<li><a href = “home.html"> <i class="fa fa-home fa-fw"> </i> Home </a>
</li>
<li><a href = “Aboutus.html"> <i class="fa fa-book fa-fw "> </i> aboutus
</a> </li>
<li><a href = “Login.html"> <i class="fa fa-gear fa-fw fa-spin"> </i> Login
</a> </li>
<li><a href = “courses.html"> <i class="fa fa=graduation-cap fa-fw"> </i>
Courses </a> </li>

Output:
 Fa : stands for font awesome
 Fw : stands for fixed width
 Spin : use to spin icon
 2x : double the size of icon

 Also called tab image
 Shown in browser tab
 All websites must have a favicon
 Looks attractive and professional look
 In history it is easily identifiable as its unique
picture

 Step:01
go to google and type convert favicon
 Step:02
select any option from the list

 Step:03
 Following window will be open
 It contains four options of favicon size
 Select according to your choice
 The standard and default size is 32*32

 Then choose file and select any size
 Then click generate favicon
 The following section will be appear
 Then download the favicon

 Step:04
 In head section write the following code to
attach the file to our webpage
 <link href=“favicon.ico” type=“image”
rel=“icon”>
 After that the favicon will look like that

 Tip:
for simplicity keep the web page and favicon
in same folder.

 Used to zoom our image
 No need for separate target link to zoom
images
 Step:01
 In body:
 Give the image and a copy of the image with
different ids
 <img src="pic.jpg" alt="pic" id="picture">
 <img src="pic.jpg" alt="pic" id="bigpic">

 step:02
 In style tag:
 Set the height and width of first picture
#picture{
width:100px;
height:100px;
}

 Step:03
 In the copy of the first picture set the following
style:
#bigpic{
position:absolute;
width:0px;
transition:width 0.3s linear 0s;
}

 Step:04
at the end add the following style
#picture:hover + #bigpic{
width:400px;
}
the plus sign is for concatination

 Download the following j-query plug-ins
 jquery.advanced-panorama
 jquery.panorama
 cvi_text_lib
 jquery.easing-1.3.pack
 jquery.fancybox-1.3.1.pack or jquery.fancybox-
1.3.1
 jquery.flipv
 Jquery.js
 jquery.mousewheel-3.0.2.pack
 Thickbox.js

 CSS files
 jquery.fancybox-1.3.1
 jquery.panorama
 In head section of the page attach the
following files
<link rel="stylesheet" type="text/css"
href="css/jquery.panorama.css“/>

 <link rel="stylesheet" type="text/css" href=“
css/jquery.fancybox-1.3.1.css" media="screen" />
 <script type="text/javascript" src="../jquery.panorama.js">
</script>
 <script type="text/javascript" src="js/cvi_text_lib.js">
</script>
 <script type="text/javascript" src="../jquery.advanced-
panorama.js"></script>
 <script type="text/javascript" src="js/jquery.flipv.js">
</script>
 <script type="text/javascript" src="js/jquery.fancybox-
1.3.1.pack.js"></script>

 Add following in the head tag. It control the starting
condition and other initial functions
<script type="text/javascript">
$(document).ready(function(){
$("img.advancedpanorama").panorama({
auto_start: 0,
start_position: 1527
});
});
</script>

 In body section of first page
 <img src="img/atelier.jpg" class="advancedpanorama"
width="2642" height="375" usemap="testmap" alt="Salle de
formation" />
 <map id="testmap" name="testmap">
<area shape="rect" coords="543,105,699,225"
href="sculpteur.html" alt="vers l'atelier du sculpteur" />
</map>
 In href give the source of the 2nd page

 Css in the head section
body {
background: #595959;
text-align: center;
}
#page {
text-align: center;
color: white;
}
#page a {
color: white;
}
#page .panorama-viewport {
border: 20px solid #414141;
margin-left: auto;
margin-right: auto;
}
#page p {
margin-bottom: 1opx;
}

 It call the fancy box for hover styling
<script type="text/javascript">
$(document).ready(function(){
$('.thickbox').fancybox();
});
</script>

 2nd page: write the following in the body
section
<img src= "img/sculpteur.jpg“ class="advancedpanorama"
width="2448“ height="375“ usemap="testmap" alt=“pic" />
<map id= "testmap" name="testmap">
<area shape="rect“ coords="1653,72,1839,255"
href="salleformation.html" alt=“pic1" />

<area shape="rect“ coords="2013,114,2091,210"
href="img/statue1.jpg" alt="statues" class="thickbox" />
<area shape="rect" coords="1920,276,2070,351"
href="img/gouges.jpg" alt="gouges" class="thickbox" />
</map>
 In href use the source of 1st page

Web system and technology

More Related Content

What's hot (6)

Viewers also liked (6)

Similar to Web system and technology (20)

Recently uploaded (20)

Web system and technology