1. Website implementation - continued
Unit 14 Website Design
HND in Computing and Systems Development

2. How far have we got? Pass criteria Merit/Distinction Responsive
Use of CSS
Common style across pages
Consistent navigation
Classes
Headings
Lists
Buttons
Clickable images
Interaction
(eg shopping cart)
Animation
(eg carousel)
Merit/Distinction
W3C compliance
Search engine optimisation
Correct use of body text, bullets, tables, icons
Contact details
About details
Shopping cart
Payment
Site map
Copyright
Acknowledgements

3. Lists Our first column in rooms.html has this
<div class="col-sm-2">
<p>List items will go here</p>
</div>
We need to create a list of rooms which will also be links to individual room pages
We will use the Bootstrap list-group class to enclose the text in a nice box with a different colour for the active page and hover effects

4. list-group
<div class="list-group">   <a href="#" class="list-group-item active">First item</a>   <a href="#" class="list-group-item">Second item</a>   <a href="#" class="list-group-item">Third item</a> </div>
Replace the text in column 2 with the code above and then edit it so that:
The choices are T104, T202 and T208
T104 is the current page
T202 and T202 link to roomT202.html and roomT208

5. Change the text Replace the central column text with:
An h2 heading: Room T104
This room has resources for hardware and networking lessons
Replace the sidebar text with:
This room is managed by Tom Worgan

6. Add an image
Create an images folder in your website folder. It is good practice to keep images separate from the html files
Copy the pngs from studshare\HND\Unit14Images into your new images folder
Add this code under the text in column 3
<img src="images/Worgan.PNG" class="img-responsive“ alt="Tom Worgan">
The src says where the image can be found
The image-responsive class says the image can shrink to fit a window
The alt text is for screen readers

7. Make the other room pages
Copy rooms.html twice and rename to the file names we used in the links
Edit the pages:
Correct photos
T202 managed by Phil Smith
T208 managed by Terry Prosser
T202 is the main room for programming and higher education
T208 is a general purpose room
Links and highlighting work properly

8. Clickable images Wrap the image in an href
<a href=“worgan.html">
<img src="images/Worgan.PNG" class="img-responsive" alt="Tom Worgan">
</a>
Hovering over the image changes the cursor to a hand. Clicking goes to Tom’s page which you can quickly make

9. Custom CSS What if you don’t like the default Bootstrap styling?
You can override it with your own CSS file
In the headers add a line under the bootstrap.css links to call the custom CSS file you will make
<link rel="stylesheet" type="text/css" href="css/custom.css">
Create new custom.css file in brackets
Save it in the CSS folder
The contents of custom.css will replace the default class definitions.

10. Change the colour of the jumbotron
In the bootstrap file we have:
.jumbotron {
padding: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee; }
Copy this into the custom.css file
Change the colour from light grey (#eee) to blue #99ccff

11. Add a carousel Bootstrap has a carousel class
It needs to be used in a container
My example uses small photographs, so the captions overlap, you may wish to use bigger ones

12. Carousel code part 1
<div class="container"> <br> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> This controls the order of the slides in the carousel

13. Carousel code part 2
<!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="images/Worgan.PNG" alt="Tom" > <div class="carousel-caption"> <h3>Tom Worgan</h3> <p>Level 2 tutor</p> </div> This is the source of the first slide and it’s caption

14. Carousel code part 3
<div class="item"> <img src="images/Prosser.png" alt="Terry" > <div class="carousel-caption"> <h3>Terry Prosser</h3> <p>Level 3 tutor</p> </div> This is the source of the second slide and it’s caption

15. Carousel code part 4
<div class="item"> <img src="images/Smith.PNG" alt="Phil" > <div class="carousel-caption"> <h3>Phil Smith</h3> <p>HE tutor</p> </div> This is the source of the last slide and it’s caption

16. Carousel code part 5 This adds the left and right controls
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</div>
This adds the left and right controls

17. Centring the images
When the previous script is working the images are on the left
To centre them add this css to the custom.css file
.carousel-inner { text-align: center; }
.carousel .item > img { display: inline-block; }

18. How far have we got? Pass criteria Merit/Distinction Responsive
Use of CSS
Common style across pages
Consistent navigation
Classes
Headings
Lists
Buttons
Clickable images
Interaction
(eg shopping cart)
Animation
(eg carousel)
Merit/Distinction
W3C compliance
Search engine optimisation
Correct use of body text, bullets, tables, icons
Contact details
About details
Shopping cart
Payment
Site map
Copyright
Acknowledgements