Chat with us, powered by LiveChat mobile platform of the web design supermarket | All Paper
+1(978)310-4246 credencewriters@gmail.com
  

ASSIGNMENT 5: NECESSARY MOBILE VERSION CHANGESDue in week 7 and worth 50 points Your client has a few questions about the differences between mobile and the standard one you’re building.In a short document, explain what changes are necessary to your current site to make it usable as a mobile Website.For your Final Deliverable you will need to be prepared for both versions.Your assignment must follow these formatting requirements:Be typed, double spaced, using Times New Roman font (size 12), with one-inch margins on all sides; citations and references must follow SWS. Check with your professor for any additional instructions.Include a cover page containing the title of the assignment, the student’s name, the professor’s name, the course title, and the date. The cover page and the reference page are not included in the required assignment page length.This assigment feeds of those chapters
cis_273__week_5_web_design_and_development_home.pdf

cis_273__week_6web_design_and_development_home.pdf

cis_273__week_7_web_design_and_development_home.pdf

Unformatted Attachment Preview

5/19/2019
CIS 273: Web Design and Development home
5.1 Common properties
Common CSS properties
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
Common CSS properties used to to control web page elements include:
StrayerCIS273Spring2019
color: The color property changes the color of the element’s content.
background: The background properties changes the element’s background to display as a
solid color, slightly or fully transparent, a color gradient, or an image.
font: The font properties changes the text’s font name, size, weight, style, and variant.
oat, clear: The oat property allows an element to oat to the left or right so that text
wraps around the element, while the clear property moves the element below any previous
oating elements.
text-align: The text-align property allows text to display left-aligned, right-aligned, centered,
or justi ed.
display: The display property controls the layout of the element on a web page, such as
displaying as an inline element, a block element, or hiding the element.
Color property
The color CSS property changes the color of the text. The value of the color property is speci ed
by a color value.
A color value is speci ed using a color name, RGB or RGBA values, hexadecimal values, or HSL
or HSLA values. CSS also de nes 140 color names, such as White, Blue, Black, Gray,
ForestGreen, Magenta. Color names are not case sensitive, so DarkGray and darkgray are
the same color.
An RGB color value speci es a color using the rgb(red, green, blue) function by
indicating the red, green, and blue intensities. Each intensity for red, green, and blue is
between 0 and 255, where 0 is the lowest intensity and 255 is the highest.
Ex: rgb(0, 0, 0) is black, rgb(0, 0, 255) is blue, rgb(255, 255, 0) is yellow,
and rgb(255, 255, 255) is white.
©zyBooks
05/19/19 07:16
473675
A hexadecimal color speci es a color using the #RRGGBB format
by indicating
the red,
Irving Jimenez
green, and blue intensities. Each intensity for red, green, and blueStrayerCIS273Spring2019
is between 00 and ff
hexadecimal numbers, where 00 is the lowest intensity and ff is the highest.
Ex: #000000 is black, #0000ff is blue, #ffff00 is yellow, and #ffffff is white.
An HSL color value speci es a color using the hsl(hue, saturation, lightness)
function by indicating the hue, saturation, and lightness values. The hue value ranges
between 0 and 360, and the saturation and lightness values range between 0% and 100%.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
1/31
5/19/2019
CIS 273: Web Design and Development home
Ex: hsl(0, 0%, 0%) is black, hsl(120, 100%, 50%) is green, and
hsl(0, 100%, 25%) is dark red.
The HSL color speci cation method is harder to understand and is not used as frequently
as the RGB and hexadecimal color speci cation methods.
The RGB and HSL color values can add an alpha value to allow for transparency. The RGBA
color value speci es a color using the rgba(red, green, blue, alpha) function by
©zyBooks 05/19/19 07:16 473675
indicating the red, green, blue, and alpha intensities. The HSLA color value
speci es a color
Irving Jimenez
using the hsla(hue, saturation,lightness, alpha) function
by indicating the
StrayerCIS273Spring2019
hue, saturation, lightness, and alpha intensities. The intensities have the same ranges as
for RGB or HSL color values, but the alpha intensity is between 0 and 1. An alpha of 0
means fully transparent, 1 means fully opaque, and 0.5 means half transparent.
PARTICIPATION
ACTIVITY
5.1.1: Color values and names.
Match each color value to the color name.
rgb(0, 0, 0)
#006400
rgba(255, 255, 255, 0.5)
rgb(80, 80, 80)
#FFFFFF
#FFD700
#0000FF
rgb(144, 238, 144)
Blue
Black
White
DarkGreen
LightGreen
Gray
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Gold
Semitransparent white
Reset
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
2/31
5/19/2019
CIS 273: Web Design and Development home
PARTICIPATION
ACTIVITY
5.1.2: CSS text color.
Modify or add one CSS rule for each requirement below to change the text color
property as speci ed.
1. By color name: change the text color for byname class elements from black to
©zyBooks 05/19/19 07:16 473675
blue.
Irving Jimenez
2. By RGB values: change the text color for byrgb class elements
from black
StrayerCIS273Spring2019
(rgb(0, 0, 0)) to green by modifying the second number to be 255.
3. By HSL values: change the text color for byhsl class elements from black
(hsl(0, 0%, 0%)) to cyan by modifying the rst number to be 200, the second
number to 100%, and the third number to 50%.
HTML
CSS
1 The text is blue
2
3 The text is green
4
5 The text is cyan
6
Render web page
Reset code
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
3/31
5/19/2019
CIS 273: Web Design and Development home
Your web page
Expected web page
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Background properties
Every element in a web page has a set of background properties. The web browser rst draws
the element’s background and then draws the element’s content. If the element’s background is
not fully opaque, the element’s parent will be visible under the element’s content. Common
background properties include:
The background-color property speci es the background color.
The background-image property speci es a background image.
The background property is shorthand for setting several of the element’s background
properties at the same time.
Background colors are speci ed using color names, a color function (RGB, RGBA, HSL, HSLA), or
one of the values such as transparent. Background images are speci ed with the none value
or the url(‘URL’) function, where URL indicates the location of the image. By default, the
initial background color is transparent and background image is none, which means the
element’s parent’s background will display underneath the element’s content. When a
background color and image are both speci ed, the background image is rendered on top of the
color.
PARTICIPATION
ACTIVITY
5.1.3: Styling background color and image.
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Animation captions:
1. The elements display with transparent backgrounds.
2. The p element has a LightSkyBlue background color.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
4/31
5/19/2019
CIS 273: Web Design and Development home
3. The div element uses an image for a background, and is displayed over the p element’s
background.
PARTICIPATION
ACTIVITY
5.1.4: Determining background properties.
Given the HTML below, indicate the background properties used ©zyBooks
for the elements.
05/19/19 07:16 473675
Irving
Jimenez
Assume that the smiley.gif image has a transparent background.
StrayerCIS273Spring2019
Below is the word “Hello” in different languages.

Hola
Olá

Salut
Hej
Bog

smiley face on green
smiley face on yellow
smiley face on red
blue
smiley face on clouds
Hola
Olá
Salut
Hej
Bog
Reset
©zyBooks
05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Font properties
Many CSS properties control the font properties for displaying text. CSS font properties include:
The font-family property speci es the font family, such as “Times New Roman” or
serif.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
5/31
5/19/2019
CIS 273: Web Design and Development home
The font-size property changes the font size, such as 120%, small, or 12pt.
The font-weight property speci es the font weight, such as normal or bold.
The font-style property changes the text style, such as normal, italic, or oblique.
The font-variant property speci es the variant of the text, such as normal or
small-caps.
The font property is shorthand for setting several of the element’s font properties at the
same time.
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
The font family property contains a list of fonts speci ed as a family name
or a generic family
StrayerCIS273Spring2019
separated by commas. A family name is the name of a speci c font, like “Times New Roman”,
“Arial”, or “Georgia”. Family names containing spaces must be wrapped in quotations marks,
while family names without spaces do not. A generic family is a more general group of fonts, like
serif, sans-serif, cursive, fantasy, or monospace. The web browser will use the rst font listed
that is available. Good practice is to start the list with the intended font and end with a generic
family.
Example 5.1.1: Generic family names.
Generic
family
Distinguishing features
Example CSS
Displayed
Serif
“Embellishments” like nishing
strokes or are ends
font-family:
serif;
Generic
Family
Sans-Serif
Plain stroke ends
font-family:
sans-serif;
Generic
Family
Cursive
Cursive or calligraphy
characteristics like joined strokes
font-family:
cursive;
Generic
Family
Fantasy
Decorative
font-family:
fantasy;
Generic
Family
Monospace
Constant width for letters,
punctuation, and space
font-family:
monospace;
Generic
©zyBooksFamily
05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
The font size can be speci ed using a prede ned size name, a relative size name, a relative
percentage, or a speci c length. The prede ned size names are xx-small, x-small, small,
medium, large, x-large, and xx-large, where medium is the default size. The relative size
names are smaller and larger which change the font size for an element to be smaller or
larger than the font size of the parent element. The relative percentage changes the font size for
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
6/31
5/19/2019
CIS 273: Web Design and Development home
an element to the speci ed percentage of the font size of the parent element. Ex:
font-size: 120%; speci es the font should be 120% times the parents element’s font size, or
20% larger. The speci c length changes the font size to be a size, which can be speci ed in pixels
(px), centimeters (cm), points (pt), etc.
PARTICIPATION
ACTIVITY
5.1.5: Computing font properties.
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
Given the HTML below, answer the following questions regarding font
properties.
StrayerCIS273Spring2019

p {
font-family: “Verdana”, “Arial”, sans-serif;
font-size: 10pt;
}
span#band {
font-style: italic;
font-size: 120%;
}
span#music {
font-variant: small-caps;
}

My favorite band is The Shins, because their music is thought provoking!

1) What is the text size for the p
element?
pt
Check
Show answer
2) What is the text size for the span
element with band id attribute?
pt
Check
Show answer
3) What is the most preferred font for
the p element?
Check
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Show answer
4) What is the second most preferred
font for the p element?
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
7/31
5/19/2019
CIS 273: Web Design and Development home
Check
Show answer
5) What is the third most preferred font
for the p element?
Check
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Show answer
6) What is the text variant for the span
element with music id attribute?
Check
Show answer
Float property
CSS properties oat and clear control how text ows around HTML elements, making web pages
look like a magazine or newspaper article where the article’s text wraps around the images in the
page.
The oat CSS property speci es whether the element will oat to the right or left of the
element’s parent, allowing text to ow around the element.
The clear property moves an element down to avoid previously oated elements on the
left, right, or both sides.
PARTICIPATION
ACTIVITY
5.1.6: Float property values.
Specify the correct CSS values.
1) What CSS style oats an element to
the right?
float:
Check
;
Show answer
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
2) What CSS style avoids left- oating
elements?
clear:
Check
;
Show answer
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
8/31
5/19/2019
Check
PARTICIPATION
ACTIVITY
Show answer
CIS 273: Web Design and Development home
5.1.7: Floating images.
Modify the CSS below to oat to the right the rst image with floatright class, to
05/19/19
07:16 473675
oat to the left the second image with floatleft class, and to ©zyBooks
clear oating
elements
Irving Jimenez
on both sides of the p element with nofloats class.
StrayerCIS273Spring2019
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
CSS
Classifieds

Call 555-4321 for more information.

Render web page
Reset code
Your web page
Expected web page
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
9/31
5/19/2019
CIS 273: Web Design and Development home
Text-align property
The text-align property changes the horizontal alignment of text for an element. Text is left
aligned using the value left, right aligned with right, center aligned with center, or fully
justi ed with justify. Spaces in justi ed text are stretched so each line of wrapped text lls the
element. The text-align property also affects children elements that are inlined, such as img or a
elements.
Table 5.1.1: Text alignment examples.
Alignment
left
text-align: left
right
PARTICIPATION
ACTIVITY
CSS example
text-align: right
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Displayed
Example of wrapped text
using the horizontal
alignment CSS property.
Example of wrapped text
using the horizontal
alignment CSS property.
Example of wrapped text
using the horizontal
alignment CSS property.
center
text-align: center
justify
Example of wrapped text
text-align: justify using
the
horizontal
alignment CSS property.
5.1.8: Text alignment.
Provide the CSS value that correctly styles the example text as displayed.
1)
Gears and Pulleys
The untold story of power
transference.
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
text­align:
Check
Show answer
2)
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
10/31
5/19/2019
CIS 273: Web Design and Development home
The following sentences are
examples of a pangram, a
sentence that contains all of the
letters of the alphabet. The
quick brown fox jumped over a
lazy dog. Pack my box with ve
dozen liquor jugs. Jackdaws
love my big sphinx of quartz.
The ve boxing wizards jump
quickly. How vexingly quick daft
zebras jump! Bright vixens
jump;
dozy
fowl
quack.
Forsaking monastic tradition,
twelve jovial friars gave up their
vocation for a questionable
existence on the ying trapeze.
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
text­align:
Check
3)
Show answer
Due: July 4, 1776
text­align:
Check
Show answer
Display property
The display property controls the layout of the element on a web page. Values for the display
property include:
inline displays the element as an inline element, like span©zyBooks
or a elements.
05/19/19 07:16 473675
Irving
Jimenez
block displays the element as a block element, like p, h1, or div elements.
StrayerCIS273Spring2019
none hides the element from being displayed, like style elements.
inline-block displays the contents of the element as a block element, but formats the
element as an inline element.
list-item displays the contents of the element as a list item element.
PARTICIPATION
ACTIVITY
5.1.9: Display CSS values.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
11/31
5/19/2019
CIS 273: Web Design and Development home
Provide the CSS display value that correctly styles the following HTML as displayed.

.animal {
background: yellow;
width: 50px;
height: 40px;
display: …;
}

My favorite breed of
cat
is Russian Blue.
1)
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
My favorite breed of cat is
Russian Blue.
display:
Check
2)
Show answer
My favorite breed of is Russian
Blue.
display:
Check
3)
Show answer
My favorite breed of
cat
is Russian Blue.
display:
Check
4)
Show answer
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
My favorite breed of
cat
is Russian Blue.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
12/31
5/19/2019
CIS 273: Web Design and Development home
display:
Check
5)
Show answer
My favorite breed of cat
is
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
Russian Blue.
display:
Check
CHALLENGE
ACTIVITY
Show answer
5.1.1: Common properties.
Start
For the tag, set color to rgb(150, 200, 50). SHOW EXPECTED
HTML
CSS
1 p {
2
3
/* Your solution goes here */
4
5 }
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
1
Check
2
3
4
5
Next
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
13/31
5/19/2019
CIS 273: Web Design and Development home
Exploring further:
HTML Color Names from W3Schools.
CSS Legal Color Values from W3Schools.
Color HSL from W3Schools.
CSS Background Property from W3Schools.
CSS Display Property from W3Schools.
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring2019
5.2 Box model
HTML elements take up space on the webpage. The size of each element depends on the
content and also the space around the content. The box model describes this space as nested
boxes. The box model is useful and important to understand when considering design and
layout.
Content: The innermost box contains the content of the element, such as text and images.
Padding: The padding box contains the content box and adds a transparent area around
the content.
Border: The border box contains the padded content and adds an optionally colored area
around the padding.
Margin: The margin box contains all three boxes and adds a transparent area around the
border.
PARTICIPATION
ACTIVITY
5.2.1: Box model displayed.
Animation captions:
1. Box models describes the space each HTML element takes as a box. Each div element is
displayed with a blue background, and each box is highlighted
with a05/19/19
light blue
outline.
©zyBooks
07:16
473675
Irving
Jimenez
2. Padding surrounds the content element with transparent space, which is displayed using
StrayerCIS273Spring2019
the element’s background color.
3. The border surrounds the content and padding and is colored black.
4. The margin surrounds the border with transparent space and separates the element
from other elements.
Figure 5.2.1: Box model with labeled boxes.
https://learn.zybooks.com/zybook/StrayerCIS273Spring2019/chapter/5/print
14/31
5/19/2019
CIS 273: Web Design and Development home
Figure 5.2.1: Box model with labeled
boxes.
©zyBooks 05/19/19 07:16 473675
Irving Jimenez
StrayerCIS273Spring …
Purchase answer to see full
attachment