multimedia

Description

Having Trouble Meeting Your Deadline?

Get your assignment on multimedia completed on time. avoid delay and – ORDER NOW

Do my paper

TEC 5343 Multimedia Web Technology

Web Development Lab Project 9 Instructions Due @ 11:59p on Sunday

NOTE: THIS ASSIGNMENT IS TO BE COMPLETED IN INDIVIDUALLY (THIS IS NOT A GROUP PROJECT)

NOTE: THIS ASSIGNMENT CONTAINS 12 TOTAL STEPS ON 11 TOTAL PAGES.BE SURE TO READ EVERYTHING!

Step	Instructions	Complete?
(1)	Download the webdevelopmentlab9.zip file from the D2L Dropbox.Unzip and extract the folders contents.On Mac, you should not need to do anything special to open it.On PC, you may require software, such as 7-Zip.Instructions on how to acquire and use 7-Zip can be found at the YouTube video at this link: (https://www.youtube.com/watch?v=ZLFntYmdQMc&ab_channel=Apoqsi).	?

Step

Instructions

Complete?

(2)

(a) With the contents of the webdevelopmentlab9.zip file unpacked, set up your coding environment.You may choose to move the contents of the uncompressed lab9 folder to your Documents folder on your hard drive and work from there.View Coding Video 7 if you need additional guidance on setting up your coding environment.Just copy everything to your Documents folder and go forward from there. The index.html file should be sitting just inside of the lab9 folder, which is what we will primarily be working with.Open the index.html file in Brackets.

NOTE: Make sure you are using the index.html document you find in the .zip folder for this Lab Project, and not the file you created for Lab Project 4 or used for Lab Project 7 or 8!You may need to delete or move the index.html files from previous labs into a new subfolder to avoid confusion.

You should now be ready to proceed with coding.

NOTE: You are permitted to copy and paste any code you wish from this instruction sheet into your lab project!No deduction will be taken if you copy/paste on this assignment.

Step

Instructions

Complete?

(3)

(a) We will be working with the BootStrap framework.You will need to add the Bootstrap Framework to your index.html page.Start by adding the following to the <head> element of the index.html document:

<meta charset=”utf-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

(b) Either go to the website https://getbootstrap.com/docs/3.3/getting-started/ and copy and paste the MaxCDN into the <head> of the document or type out the following:

<!– Latest compiled and minified CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/cs…

/bootstrap.min.css”>

<!– jQuery library –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”>

</script>

<!– Latest compiled JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js

/bootstrap.min.js”>

</script>

(c) The MaxCDN will automatically load the BootStrap framework into your webpage. Save the file and preview it in a web browser. Notice how the fonts are preformatted to behave differently at different screen sizes.

Step

Instructions

Complete?

(4)

(a) In this step, we will create a fluid container.Fluid containers are needed so that columns can be preformatted into different and predetermined sizes.

(b) Find the <main> element. Add the following attribute to the opening tag:

class=container

Done correctly, it should look like this:

<main class=container>

(c) Save the file and preview it in a web browser. Notice how when the notice how when the screen changes size, the content changes.

Step

Instructions

Complete?

(5)

(a) In this step, we will create a column-based layout.BootStraps grid system allows up to 12 columns across a page.If you do not want to use all 12 columns individually, you can group the columns together to create wider columns.The BootStrap grid system has four classes:

xs (for phones)

sm (for tablets)

md (for desktops)

lg (for larger desktops)

(b) These classes can be combined to create more dynamic and flexible layouts.Lets take a look at this a bit closer.

class=”col-md-12″

Done correctly, it should look like this:

<div id=tagline class=col-md-12>

(d) Save the file and preview it in a web browser.Take note how now when the screen changes sizes, the content changes with it.

(e) Find each <section> element within the index.html document.Add the following attribute to each one:

class=col-md-6

Done correctly, it should look like this:

<section class=col-md-6>

(f) Save the file and preview it in a web browser.Take note how now when the screen changes sizes, the <section> elements change from two columns to one.

(g) Find each <article> element within the index.html document.Add the following attribute to each one:

class=col-md-4

Done correctly, it should look like this:

<article class=col-md-4>

(h) Save the file and preview it in a web browser.Take note how now when the screen changes sizes, the <article> elements change from three columns to one.

More information on responsive grids can be found at these links to the W3C Schools:

http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Step

Instructions

Complete?

(6)

(a) In this step, we will make images responsive.As both images and screens come in all sizes, making images responsive will cause them to automatically adjust to fit the size of the screen.

(b) Find each <img> element within the index.html document.Add the following attribute to each one:

class=img-responsive

Done correctly, it should look like this:

<img class=img-responsive>

(c) Save the file and preview it in a web browser.Take note how now when the screen changes sizes, the <img> elements automatically adjust in size to fit the screen.

More information on responsive images can be found at this link to the W3C Schools:

http://www.w3schools.com/bootstrap/bootstrap_images.asp

Step

Instructions

Complete?

(7)

(a) In this step, we will create a responsive navigation bar.A navigation bar is typically placed along the top of the page to help users navigate within a website.With BootStrap, we can easily create a navigation bar that can extend or collapse, depending on the screen size.To do this, we must write some HTML and CSS.Because the CSS is in a local external CSS sheet, it will override some of the settings that are defaulted in BootStrap.

(b) Find the <header> element within your index.html document and insert the following code within it (remember, you are permitted to copy and paste this code!):

<nav class=”navbar navbar-default navbar-fixed-top navbar-center”>

<div class=”container-fluid”>

<div class=”navbar-header”>

<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#myNavbar”>

<span class=”icon-bar”></span>

</button>

<a class=”navbar-brand” href=”index.html”>Will Wilson’s Widgets</a>

</div>

<div class=”collapse navbar-collapse” id=”myNavbar”>

<ul class=”nav navbar-nav navbar-right”>

<li class=”active”><a href=”index.html”>Home</a></li>

<li class=”dropdown”>

<a class=”dropdown-toggle” data-toggle=”dropdown” href=”products.html”>Products<span class=”caret”></span></a>

<ul class=”dropdown-menu navbar-center”>

<li><a href=”products1.html”>Product 1</a></li>

<li><a href=”products2.html”>Product 2</a></li>

<li><a href=”products3.html”>Product 3</a></li>

</ul>

</li>

<li><a href=”about.html”>About Us</a></li>

<li><a href=”contact.html”>Contact Us</a></li>

</ul>

</div>

<div id=”search”>

<button type=”button” class=”btn btn-info”>

<span class=”glyphicon glyphicon-search”></span> Search

</button>

</div>

</nav>

(d) Create a new file called screen.css.Save this file in your root folder.

(e) Insert the following code into your new screen.css file (remember, you are permitted to copy and paste this code!):

#search {

width: 90px;

height: 35px;

float: right;

}

.navbar {

background-color: lightgray;

}

.btn {

background-color: black;

}

.navbar-center {

width: 100%;

text-align: center;

}

(f) Save the screen.css file with this new code in place.

(g) Return to your index.html file and insert the following code into the <head> element of the document to link it to your screen.css file:

<link rel=”stylesheet” type=”text/css” href=”screen.css” />

(h) Save the file and preview it in a web browser.Take note how now when the screen changes sizes, the navigation bar expands and collapses depending on the current screen size.

Step

Instructions

Complete?

(8)

(a) In this step, we will improve upon our responsive navigation bar so that the navigation format changes as the screen size does.

(b) Find the <footer> element within your index.html document and insert the following code within it (remember, you are permitted to copy and paste this code!):

<nav class=”navbar navbar-default navbar-center”>

<div class=”container-fluid”>

<ul class=”nav navbar-nav”>

<li class=”active”><a href=”index.html”>Home</a></li>

<li class=”dropdown”><a class=”dropdown-toggle” data-toggle=”dropdown” href=”products.html”>Products<span class=”caret”></span></a>

<ul class=”dropdown-menu navbar-center”>

<li><a href=”products1.html”>Product 1</a></li>

<li><a href=”products2.html”>Product 2</a></li>

<li><a href=”products3.html”>Product 3</a></li>

</ul>

</li>

<li><a href=”about.html”>About Us</a></li>

<li><a href=”contact.html”>Contact Us</a></li>

</ul>

</div>

<div id=”social”>

http://www.facebook.com”> class=”footerimg” src=”images/facebook.png” alt=”Image alt text” />

http://www.twitter.com”> class=”footerimg” src=”images/twitter.png” alt=”Image alt text” />

http://www.link.com”> class=”footerimg” src=”images/youtube.png” alt=”Image alt text” />

</div>

</nav>

(d) Return to your screen.css file and insert the following code (remember, you are permitted to copy and paste this code!):

#social {

width: 200px;

height: auto;

margin-left: auto;

margin-right: auto;

margin-bottom: 20px;

}

(e) Save the screen.css file with this new code in place.

(f) Return to your index.html file and preview it in a web browser.Take note how now when the screen changes sizes, the navigation menu moves into a stacked orientation.

More information on responsive navigation menus can be found at this link to the W3C Schools:

http://www.w3schools.com/bootstrap/bootstrap_navbar.asp

Step

Instructions

Complete?

(9)

(a) In this step, we will create a responsive photo slideshow or carousel.

(b) Find the <div id=slideshow> element within your index.html document and nest the following code between the opening and closing <div id=slideshow> tags (remember, you are permitted to copy and paste this code!):

<!– Indicators –>

</ol>

<!– Wrapper for slides –>

</div>

</div>

</div>

</div>

<!– Left and right controls –>

<span class=”sr-only”>Previous</span>

</a>

</a>

</div>

(d) Return to your screen.css file and insert the following code (remember, you are permitted to copy and paste this code!):

#slideshow {

float: left;

width: 100%;

padding: 0;

border: none;

margin-top: 75px;

background-color: gray;

overflow: hidden;

background-position: center center;

background-repeat: no-repeat;

}

.carousel-inner > .item > img,

.carousel-inner > .item > a > img {

width: 70%;

margin: auto;

}

(e) Save the screen.css file with this new code in place.

(f) Return to your index.html file and preview it in a web browser.Your slideshow carousel should now be functioning.If your carousel has no photos, make sure that your images folder is in the proper place.

More information on responsive slideshow carousels can be found at this link to the W3C Schools:

http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

Step

Instructions

Complete?

(10)

(a) In this step, we will override the BootStrap framework with our own local, external CSS.

(b) Return to your screen.css file and insert the following code (remember, you are permitted to copy and paste this code!):

h2 {

color: dimgray;

}

h3 {

color: lightgray;

}

@media only screen and (max-width: 1024px) {

h1 {

font-size: 40px;

font-family: sans-serif;

font-weight: 500;

color: black;

line-height: 1.3em;

}

h2 {

font-size: 25px;

font-family: sans-serif;

color: dimgrey;

font-weight: 500;

line-height: 1.2em;

}

h3 {

font-size: 20px;

font-family: sans-serif;

color: lightgray;

font-weight: 500;

line-height: 1.2em;

}

p {

font-size: 12px;

font-family: sans-serif;

color: black;

line-height: 2em;

}

@media only screen and (max-width: 600px) {

h1 {

font-size: 28px;

font-family: sans-serif;

color: black;

line-height: 1.3em;

}

(e) Save the screen.css file with this new code in place.

(f) Return to your index.html file and preview it in a web browser.Take note how now the typefaces and styles of each of the heading <h1> through <h3> elements has changed.

More information on responsive typography can be found at this link to the W3C Schools:

http://www.w3schools.com/bootstrap/bootstrap_typography.asp

Step	Instructions	Complete?
(11)	(a) Make your index.html page your own by changing the <title>, <meta description>, <meta keywords>, and <meta author> elements to your own information.	?

Step

Instructions

Complete?

(12)

(a) Launch FileZilla and connect to your webspace.If you have not already done so, create your lab9 folder.(DO NOT FORGET TO ADD YOUR RANDOM SALT TO YOUR FOLDER NAME, SEE THE LECTURE 0 WELCOME & WEEK 1 INTRODUCTION VIDEO FOR DETAILS ON HOW TO DO THIS!).

(b) Within the Documents folder on your desktop, copy the images folder and screen.css file to your web space using FileZilla.

(c) Upload the index.html document to the lab9 folder in your webspace.Remember that the web pages sit in the root folder (the labX folder).(DO NOT FORGET TO ADD YOUR RANDOM SALT TO YOUR FOLDER NAME!).

(d) Ensure that it works by visiting pen.eiu.edu/YourEIUNetID/lab9-YourSalt/lab9.html.

(e) Make sure that your <link> element pointing to your CSS file remains correct and does not need adjustment after upload.

HINT: If the link you place in the D2L Dropbox looks like this, you are trying to submit the file from your desktop, which will not work:

file:///C:/Users/YourEIUNetID/Documents/index.html

The link you submit to the D2L Dropbox *MUST* work when I click it to receive full credit for the assignment.Submissions that are not uploaded to your webspace (when the instructions require you to do so) will lose 25% of the total possible points for the assignment, and you will be asked to resubmit properly (if you are submitting your index.html file and CSS files directly into the D2L Dropbox, you are subject to this penalty make sure you are submitting a weblink directly to your site).Submissions that do not include a direct link to your submission (when the instructions require you to do so) are subject to a 10% reduction in total possible points for the assignment (basically, if I have to guess around your webspace for your site after you submit, this penalty applies).Properly uploading your web documents and being able to create a link to them are essential components to being a web developer.

If you experience difficulties in uploading your submissions to your webspace where appropriate to complete Lab Projects, I urge you to book a Zoom or Teams meeting with me so that we can resolve this problem.I am not doing this to be arbitrarily punitive, this will be a minimum expectation in any web development job you apply for.I want to help you overcome these problems, so please reach out.

(f) Submit your working web link to the Web Development Lab Project 9 Dropbox in D2L no later than 11:59p on Sunday.

Remember that the Coding Watercooler is a resource available to you if you become lost or stuck.Also remember to help out your classmates there if you can!

Explanation & Answer

Our website has a team of professional writers who can help you write any of your homework. They will write your papers from scratch. We also have a team of editors just to make sure all papers are of HIGH QUALITY & PLAGIARISM FREE. To make an Order you only need to click Order Now and we will direct you to our Order Page at Litessays. Then fill Our Order Form with all your assignment instructions. Select your deadline and pay for your paper. You will get it few hours before your set deadline.

Fill in all the assignment paper details that are required in the order form with the standard information being the page count, deadline, academic level and type of paper. It is advisable to have this information at hand so that you can quickly fill in the necessary information needed in the form for the essay writer to be immediately assigned to your writing project. Make payment for the custom essay order to enable us to assign a suitable writer to your order. Payments are made through Paypal on a secured billing page. Finally, sit back and relax.

Do you need an answer to this or any other questions?

Description

Having Trouble Meeting Your Deadline?

write a discussion

webpage T7, computer science homework help

Doubly linkedlist implementation, programming homework help

HU Database Systems Inserting Data Into the Appointment Table Project

mobile friendly, computer science homework help

Programming Question

Payments

QUICK LINKS

Discover

Help

Description

Having Trouble Meeting Your Deadline?

Similar Posts

Payments

QUICK LINKS

Discover

Help

Get in touch