MySuccess Website Designer Associate - ICE Malta

MySuccess Website Designer AssociateVersion 2.0

Topic 11 – Final Project - A Responsive Company Site

MySuccess Website Designer Associate | Copyright © 2013-2017 ICE Malta | Topic 11 | Slide 2

In this Lesson

• Topic 11: Final Project – A Responsive Company Site

• Plan.

• Setting up Bootstrap.

• Creating the initial pages.

• Refinement.

Plan


Our Plan• We are going to be creating a ‘skeleton’ for the website of a

telecommunications company: Novitel.• The site will contain the following sections:• The home page.• Plans.• MyNovitel.• Support.

• One requirement for our site is that it has to be responsive – looking presentable on any screen size.

• We need to implement a responsive navigation bar at the top of the page for easy navigation.

• We also need a big banner to display the latest news/offer.


Our Plan

• The first page should also have three ‘featured’ stories.


Our Plan• We are going to be using Bootstrap for this project.• Bootstrap is a popular HTML, CSS and JavaScript framework for developing

responsive, mobile first projects on the web.• For this project, we will not be providing content, instead we will create the

skeleton structure of the site, ready to accept the content.

Setting Up Bootstrap


Download and Install• For this project, we will download and install Bootstrap to our site. • Note that this is not strictly required, as we can link to Bootstrap over a CDN

instead.• Go to http://getbootstrap.com and Click “Download Bootstrap”, then click

“Download Bootstrap” again.• Create a new site ‘novitel’, and copy the three folders (css, fonts, js) from the

unzipped folder to this new folder.• Create an index.html file in the same folder.


Download and Install

• Bootstrap depends on jQuery. • Download jQuery from http://jquery.com. • Move the jQuery JavaScript file to the ‘js’ folder in the ‘novitel’ folder.


Testing the Installation• Let’s create some skeleton code in the index page to test Bootstrap.

<!DOCTYPE html><html lang="en"><head>

<meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Novitel</title><link rel="stylesheet" href="css/bootstrap.css"><link rel="stylesheet" href="css/bootstrap-theme.css">

</head> <body> <h1>Hello, World!</h1>

<script src="js/jquery-3.1.1.js"></script><script src="js/bootstrap.js"></script>

</body> </html>

• Ensure you have no errors in console view.

Creating the Initial Pages


Navigation Bar• Let’s start by building a responsive menu. Add <header> to the body with the

following content:<nav class="navbar navbar-inverse navbar-fixed-top">

<div class="container"><div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span> <span class="icon-bar"></span>

<span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Novitel</a>

</div> <div id="navbar" class="navbar-collapse collapse"><ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li> <li><a href="#about">Plans</a></li> <li><a href="#contact">MyNovitel</a></li> <li><a href="#contact">Support</a></li>

</ul> <form class="navbar-form navbar-right"><div class="form-group">

<input type="text" placeholder="Search" class="form-control"></div>

<button type="submit" class="btn btn-success">Search</button></form>

</div> </div>

</nav>


Navigation Bar• The previous code adds a navigation bar to the top of our page.

• This navigation bar is responsive thanks to Bootstrap. Try resizing your browser window to simulate a tablet or a smartphone.


Jumbotron• Now let’s add a jumbotron to our page, featuring the latest/most important

story.<main>

<div class="jumbotron"><div class="container"><h1>Google Pixel</h1> <p>Built-in Google Assistant. Unlimited photo storage. Daydeam View support. Highest rated smartphone

camera ever.</p><p><a class="btn btn-primary btn-lg" href="#" role="button">See the colours »</a></p>

</div> </div>

</main>


Featured Stories• We also need three featured stories.

<div class="container"><div class="row"> <div class="col-md-4"> <h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget... </p><p><a class="btn btn-default" href="#" role="button">View details »</a></p>

</div> <div class="col-md-4"> <h2>Heading</h2>

<p>Donec id elit non mi porta gravida at eget... </p><p><a class="btn btn-default" href="#" role="button">View details »</a></p>

</div> <div class="col-md-4"> <h2>Heading</h2>

<p>Donec sed odio dui. Cras justo odio, dapibus...</p><p><a class="btn btn-default" href="#" role="button">View details »</a></p>

</div> </div> <hr>

</div>

• You can find sample text at http://www.lipsum.com/


Featured Stories• Note that the featured stories are also responsive:


How Bootstrap Works

• Bootstrap makes pages responsive using CSS and JavaScript.• The page is divided into 12 columns. • The page can be rendered by different screen sizes, and in Bootstrap these

are referred to as xs (phones), sm (tablets), md (desktops), lg (large desktops).

• By default, any element occupies the full screen width (12 columns). • You can change this by specifying sizes for the element by assigning classes.


How Bootstrap Works• For example

<div class="row"><div class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> Content

</div> </div>

• This specifies a div that is full-screen width on mobile devices, half the screen on tablets, and a quarter of the screen on desktops.

• Bootstrap columns automatically scale up, and sizes not covered by a rule will default to full width (12 columns).

• Hence, the above can also be written as:<div class="row">

<div class="col-sm-6 col-md-3"> Content

</div> </div>

• xs will be 12 (default) and lg will be 3 (scales up from md).


Adding a Footer• Now let’s add a footer that sticks to the bottom of the page.• First, create the content.

• Now create a novitel.css file in the CSS folder, and add the following:

<footer class="footer"><div class="container">

<p>© 2016 Novitel, plc.</p> </div>

</footer>

.footer {position: absolute;bottom: 0;width: 100%;height: 60px;background-color: #f5f5f5;

}

• Finally, link to the new CSS file in index.html:<link rel="stylesheet" href="css/novitel.css">


Adding a Footer• If the page content increases in height (for example, try resizing your

browser window to the smallest width possible), the footer flows over the content.

• Let’s add some CSS to fix that.html {position: relative;min-height: 100%;

}body {margin-bottom: 60px;

}.footer {position: absolute;bottom: 0;width: 100%;height: 60px;background-color: #f5f5f5;padding-top: 10px;

}


Banner Ad• The last item in our home page is a banner ad.• Find a suitable image, call it ’roaming’ and place it in a new folder ‘images’.• Create the container:

• Add CSS:

<div class="container roamingAd"><h2>Roam as you please.</h2><h3>Introducing Novitel's new roaming rates.</h3><button type="button" class="btn btn-lg btn-success">Compare plans</button>

</div>

.roamingAd {background-image: url(../images/roaming.jpg);background-size: cover;min-height: 400px;border-radius: 5px;color: white;text-shadow: 2px 2px #1c0707;

}.roamingAd > h3 {margin-top: 5px;

}


The Support Page• Let’s add the support page next.• First, change the main menu on the index page so we have links for the

pages we will create. <ul class="nav navbar-nav">

<li class="active"><a href="index.html">Home</a></li> <li><a href="plans.html">Plans</a></li> <li><a href="mynovitel.html">MyNovitel</a></li><li><a href="support.html">Support</a></li>

</ul>

• Now create a copy of the index page and call it ‘support.html’.• Remove all content from the <main> section.• Set the support item in the menu to be active, and remove it from the

Home item.<li><a href="index.html">Home</a></li><li><a href="plans.html">Plans</a></li> <li><a href="mynovitel.html">MyNovitel</a></li><li class="active"><a href="support.html">Support</a></li>


The Support Page• We want a contact form on the left and a map on the right. • However, for small devices, we want the contact form on top and the map

beneath it. <main>

<div class="container" style="padding-top: 40px;"><div class="page-header">

<h1>Support</h1> </div> <div class="row">

<div class="col-md-7"> Contact form goes here

</div> <div class="col-md-5">

Map goes here</div>

</div> </div>

</main>


The Support Page• Now let’s build a contact form.• Bootstrap can help us here too.<form>

<legend>Contact Us</legend> <div class="form-group">

<label for="fullName">Full Name:</label> <input type="text" class="form-control" id="fullName" placeholder="Joe Smith" required>

</div> <div class="form-group">

<label for="emailAdd">E-mail:</label> <input type="email" class="form-control" id="emailAdd" placeholder="[email protected]" required>

</div> <div class="form-group">

<label for="contactType">Contact Type:</label><select id="contactType" name="contactType" class="form-control">

<option value="1">Technical question</option> <option value="2">Billing query</option> <option value="3">Complaint report</option>

</select> </div> <div class="form-group">

<label for="comments">Comments</label> <textarea class="form-control" id="comments" name="comments">Type your question/comments here</textarea>

</div> <button type="submit" class="btn btn-default">Send</button>

</form>


The Support Page• Now to add the map. We’ll use Google Maps for this.• First, add some markup to the map container.

<div id="map-container" class="col-md-5" style="height: 400px">Map goes here

</div>

• Next we’ll add a link to the script that powers Google Maps embedding.<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

• We’ll now use a script to centre the map on our location. • The script will also add a marker showing the location of our offices.


The Support Page• The script:

<script> function init_map() {

var var_location = new google.maps.LatLng(35.8786968,14.4390802);var var_mapoptions = {

center: var_location, zoom: 18

};

var var_marker = new google.maps.Marker({position: var_location,

map: var_map, title:"Novitel"

});

var var_map = new google.maps.Map(document.getElementById("map-container"),var_mapoptions);

var_marker.setMap(var_map);

} google.maps.event.addDomListener(window, 'load', init_map);

</script>


MyNovitel Login• For our last feature, we’ll add a login form to the myNovitel page.

<form class="form-signin"><h2 class="form-signin-heading">Please sign in</h2><label for="inputEmail" class="sr-only">Email address</label><input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus><label for="inputPassword" class="sr-only">Password</label><input type="password" id="inputPassword" class="form-control" placeholder="Password" required><div class="checkbox">

<label> <input type="checkbox" value="remember-me"> Remember me

</label> </div> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>

</form>

• The class ‘sr-only’ makes the labels invisible, but keeps them there so a screen reader can still read out the labels.


MyNovitel Login.form-signin {

max-width: 330px;padding: 15px;margin: 0 auto;

}.form-signin .form-signin-heading,.form-signin .checkbox {

margin-bottom: 10px;}.form-signin .checkbox {

font-weight: normal;}.form-signin .form-control {

position: relative;height: auto;box-sizing: border-box;padding: 10px;font-size: 16px;

}.form-signin .form-control:focus {z-index: 2;

} .form-signin input[type="email"] {

margin-bottom: -1px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;

}.form-signin input[type="password"] {

margin-bottom: 10px;border-top-left-radius: 0;border-top-right-radius: 0;

}

Refinement


Jumbotron Background Image• Let’s add a relevant background image to our jumbotron.

.jumbotron {background-image: url(../images/pixel.png);background-size: cover;

}.jumbotron h1, .jumbotron p:first-of-type {background-color: hsla(0, 0%, 100%, 0.7);max-width: 400px;padding: 4px;font-variant: small-caps;

}.jumbotron p:first-of-type {max-width: 1100px;

}


Questions?

Date post:	24-Mar-2023
Category:	Documents
Upload:	khangminh22
View:	0 times
Download:	0 times

MySuccess Website Designer Associate - ICE Malta

Documents