Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website...
Transcript of Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website...
![Page 1: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/1.jpg)
Website
implementation -
modalsUNIT 14 WEBSITE DESIGN
HND IN COMPUTING AND SYSTEMS DEVELOPMENT
![Page 2: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/2.jpg)
How far have we got?
Pass criteria
Responsive
Use of CSS
Common style across pages
Consistent navigation
Classes
Headings
Lists
Buttons
Clickable images
Interaction
(eg shopping cart) modals
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
![Page 3: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/3.jpg)
What is a modal?
A JavaScript plugin that displays dialog
box/popup window on top of the current page
Built in to Bootstrap
Can contain text or images
We will add a thumbnail image to our home page
![Page 4: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/4.jpg)
Image
Copy the kid.jpg from studshare/HND/Units/14Images into your image folder
![Page 5: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/5.jpg)
Where will the image go?
Inside the jumbotron
![Page 6: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/6.jpg)
The modal content
<div class="modal-content"> <!– This div defines the contents
-->
<div class="modal-body">
<img src="images/kid.jpg"> <!– The image is put in the
body -->
</div>
<div class="modal-footer"> <!– We can add a footer -->
<!– We will add a button to close the modal -->
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
![Page 7: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/7.jpg)
How will the modal appear
<div class="modal fade" id="myModal" role="dialog"> <!–
Fades in/out-->
<div class="modal-dialog"> <!– Aids screen readers->
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<img src="images/kid.jpg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
![Page 8: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/8.jpg)
What triggers the modal
We need to make a small version of the image
<img src="images/kid.jpg"
style="width:200px;height:150px">
The style attribute adjusts the image to those pixel
dimensions
You can adjust these to suit images with different
aspect ratios
![Page 9: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/9.jpg)
Trigger script
<a href="#myModal" role="button" data-
toggle="modal">
This calls the modal with the ID of myModal, makes it
a button and toggles it on or off
![Page 10: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/10.jpg)
Complete jumbotron
<div class="jumbotron">
<h2>Computing Department</h2>
<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>
<div class="container">
<a href="#myModal" role="button" data-toggle="modal">
<img src="images/kid.jpg" style="width:200px;height:150px"></a>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="images/kid.jpg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
![Page 11: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/11.jpg)
Operation
Clicking in the thumbnail fades the background and drops in
the full image
Clicking the close button, or outside the modal will close the
modal
![Page 12: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/12.jpg)
Adding text
Simply add text inside the modal body
<div class="modal-body">
<Sean – aged 9</p>
<img src="images/kid.jpg">
</div>
![Page 13: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/13.jpg)
Button instead of an image
<div class="container">
<button type="button" class="btn btn-info btn-lg"
data-toggle="modal" data-target="#myModal">Help ?</button>
<div class="modal fade" id="myModal"
role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<p>You have come to the wrong
place - try the sixth form</p>
</div>
<div class="modal-footer">
<button type="button" class="btn
btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
![Page 14: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/14.jpg)
Button help
![Page 15: Website implementation - modalswiki.computing.hct.ac.uk/_media/computing/unit14... · Website implementation - modals UNIT 14 WEBSITE DESIGN HND IN COMPUTING AND SYSTEMS DEVELOPMENT](https://reader034.fdocuments.in/reader034/viewer/2022051606/601d8d04319d807c4f5d0f97/html5/thumbnails/15.jpg)
How far have we got?
Pass criteria
Responsive
Use of CSS
Common style across pages
Consistent navigation
Classes
Headings
Lists
Buttons
Clickable images
Interaction
(eg shopping cart) modals
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