Download presentation
Presentation is loading. Please wait.
1
Website implementation
Unit 14 Website Design HND in Computing and Systems Development
2
Suggested environment
Chrome - browser Brackets – code editor for the web Bootstrap – CSS (Cascading Style Sheets) framework Helps in making responsive web applications Class exercises to build a responsive web site with examples of features required for the assignment Use pages as a resource for more information and examples
3
Features required for assignment 3
Pass criteria 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
4
Responsive design Content automatically adjusts to the screen size of the viewing device
5
Responsive design Difficult to code by hand
Bootstrap framework does the work for us CSS Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. These provide a uniform, modern appearance for formatting text, tables and form elements.
6
Bootstrap Re-usable components
Buttons with advanced features (e.g. grouping of buttons or buttons with drop-down option, navigation lists, horizontal and vertical tabs, navigation, breadcrumb navigation, pagination, etc.), labels thumbnails warning messages and a progress bar. Components are implemented as CSS classes
7
Bootstrap JavaScript components
jQuery plugins provide additional user interface elements dialog boxes tooltips carousels
8
Setting up the environment
Create new folder Copy in the following files from studshare\HND\bootstrap dist
9
Brackets Open Brackets (if not on your machine obtain it from studshare\hnd)
10
New file File -> New File -> Save As index.html
Save in the new folder you just made, then enter this: <!DOCTYPE html> states this is HTML5 <html lang="en"> <head> contains statements that link to the framework files <meta charset="UTF-8"> <title>Unit14Example</title> appears in the browser tab <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/bootstrap-theme.min.css"> <script src=" <script src="js/bootstrap.min.js"></script> </head> </html>
11
Link to Chrome After saving click on the lightning symbol
This opens your file in Chrome When you save the file the browser will automatically update
12
Add content Add these lines between the </head> and </html> tags, then save <body> <div class="page-header"> <h2>Computing Department</h2> </div> </body> Your browser should display this:
13
CSS class="page-header“ Inside the bootstrap CSS file there is this: .page-header { padding-bottom: 9px; margin: 40px 0 20px; border-bottom: 1px solid #eee; } Any element in the web page with a class selector of .page-header will have: 9 pixels of padding at the bottom 40 pixels of top margin, 0 pixels of left and right margins with 20 pixels of bottom margin a 1 pixel wide solid light grey line at the bottom
14
Box model Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent
15
CSS If we look for h2 we find: font-size: 30px; CSS is used to set the appearance and behaviour of every element in a web page HTML is used to define the content of every web page The advantage of CSS is that you can maintain consistency of appearance across multiple pages
16
Navigation A navigation bar is built in to bootstrap
We will insert the code above the page-header When added the web page should look like this (we will fix the overlap later):
17
Navbar <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="rooms.html">rooms</a></li> <li><a href="resources.html">resources</a></li> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li> </ul> </nav>
18
Responsive Shrink the browser window
Note how the links switch to a “hamburger” dropdown
19
Explanation <div> … </div> <div class="container">
The <div> tag defines a division or a section in an HTML document and tag is used to group block-elements to format them with CSS <div class="container"> Bootstrap requires a containing element to wrap site contents
20
Explanation <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> </button> </div> These classes control the format and toggling of the full navbar to the “hamburger” version
21
Explanation <ul> </ul> defines an unordered list
<div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">home</a></li> <li><a href="rooms.html">rooms</a></li> <li><a href="resources.html">resources</a></li> <li><a href="about.html">about</a></li> <li><a href="contact.html">contact</a></li> </ul> </div> <ul> </ul> defines an unordered list <li> </li> defines each item in a list <a> </a> defines a hyperlink to the destination defined by the href Class = “active” used to highlight the current link
22
Jumbotron A jumbotron is displayed as a grey box and enlarges the font sizes of the text inside it. Use a <div> element with class .jumbotron to create a jumbotron. We can fix the overlap problem by replacing the page-header class with a jumbotron <div class=“jumbotron"> <h2>Computing Department</h2> </div>
23
Jumbotron Add some text <p> </p> defines a paragraph
<p>"The College has brilliant facilities and very helpful staff. All the equipment was continually updated so we had the level of kit that we needed".</p> <p>Sean Harris - IT student</p> <p> </p> defines a paragraph
24
Bootstrap grid Bootstrap splits a page into 12 columns
If you don’t want 12, you can combine them Columns will rearrange based on screen size and will stack on smaller screens Span 1 Span 2 Span 3 Span 4 Span 5 Span 6 Span 7 Span 8 Span 9 Span 10 Span 11 Span 12
25
Grid classes Define the grid behaviour for different devices
xs (for phones) sm (for tablets) md (for desktops) lg (for larger desktops) Classes can be combined to create more dynamic and flexible layouts. Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
26
Grid System Rules Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding Use rows to create horizontal groups of columns Content should be placed within columns Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts Grid columns are created by specifying the number of 12 available columns you wish to span. Three equal columns would use three .col-sm-4
27
Rooms page - 1 Copy the index page as room.html Open with brackets
Edit The title to Unit14Example – rooms Change class = “active” to the rooms <li> Change the home <li> to index.html and the rooms <li> to # Delete the jumbotron Test the home and rooms links on the navbar
28
Rooms page - 1 Copy the index page as room.html Open with brackets
Edit The title to Unit14Example – rooms Change class = “active” to the rooms <li> Change the home <li> to index.html and the rooms <li> to # Edit the jumbotron <p>Here are our wonderful teaching rooms, bursting with up to date technology</p> Test the home and rooms links on the navbar
29
Rooms page - 2 Add a container and some content
<div class="container-fluid"> <p>This page will describe the rooms we use in the computing department</p> </div> Container-fluid allows the content to fill the page
30
Rooms - 3 Create 3 columns of width 2, 7 and 3 (add up to 12)
<div class="container-fluid"> <div class="row"> <div class="col-sm-2"> <p>List items will go here</p> </div> <div class="col-sm-7"> <p>This page will describe the rooms we use in the computing department</p> <div class="col-sm-3"> <p>Space for a sidebar.</p>
31
Rooms - 4 When sizing the window the columns stack
32
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
33
Activity You can now make the basic web pages for MWS Next lesson
Correct navigation Implement columns as required Add content Next lesson Lists Images Custom styles
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.