Week4Tutorial_ResponsiveDesign.docx - University of Canberra Faculty of Science and Technology Web Design and Programming(7175 6691 Week 4 Tutorial Web

Week4Tutorial_ResponsiveDesign.docx - University of...

This preview shows page 1 - 3 out of 10 pages.

University of Canberra Faculty of Science and Technology Web Design and Programming (7175 & 6691) Week 4 Tutorial Web Design with HTML5, CSS3 and Bootstrap Tasks Responsive image and Responsive grid Media query Bootstrap elements After completing this tutorial, you can apply the following to the web project for Assignment 1 o Using Bootstrap to make an image responsive o Using Bootstrap to change the layout of text (or image) columns on different devices o Using media query to change the file size of images and the font size of text Create a webpage for this tutorial Open Visual Studio and create a new HTML file and save it as ResponsiveDesign.html in the WDPTutorials folder. Add the following between < head > and < /head > in this HTML file o Add title: change < title > </ title > to < title > Responsive Design Tutorial </ title > o Add viewport for responsive design (below < meta charset ="utf-8" /> ) < meta name ="viewport" content ="width=device-width, initial- scale=1"> o Add links for Bootstrap < link rel ="stylesheet" href =""> < link rel ="stylesheet" href =""> < script src =""></ script > < script src =""></ script > Responsive Image and HTML5 <picture> element You have seen the HTML5 <picture> element in Week 1 lecture, Week 2 Tutorial and Week 3 lecture. This <picture> element is more flexible in specifying image resources. You can provide multiple images to nicely fill the browser viewport in different devices. The <picture> element holds two different tags: one or more <source> tags and one <img> tag. The <source> element has srcset to define the URL of the image to show and media to accept any valid CSS media query. The <img> element is used to provide backward compatibility for browsers that do not support the <picture> element, or if none of the <source> tags matched. The img-responsive class in Bootstrap is to make image responsive. Example 1: Add the following HTML5 elements between < body > and < /body > < h1 > Responsive Image using Bootstrap </ h1 > < picture > < source media ="(min-width: 992px)" srcset ="../images/floriade_md.jpg"> < source media ="(min-width: 768px)" srcset ="../images/floriade_sm.jpg"> Page 1 of 10
Image of page 1
< img src ="../images/floriade_xs.jpg" alt ="Floriade" class ="img- responsive"> </ picture > Right-click on each image below then select Save as Picture and browse to the images folder in your WDPTutorials to save it as floriade_md.jpg , floriade_sm.jpg , or floriade_xs.jpg floriade_md.jpg floriade_sm.jpg floriade_xs.jpg Save the ResponsiveDesign page and view the page in browser. Resize your web browser to have a smaller width to check if the image is responsive. To check what image is currently displayed, right-click the image and select Save image as (if you use Chrome) or Save picture as (MS Edge), and look at the filename in the File Name textbox. The filename will be either floriade_md.jpg or floriade_sm.jpg or floriade_xs.jpg
Image of page 2
Image of page 3

You've reached the end of your free preview.

Want to read all 10 pages?

  • Three '17

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes
A+ icon
Ask Expert Tutors