Unit 8. Tutorial 8- Tree and Book
Tutorial 8
Tree and Book
1.
In your text
editor, open treebooktxt.htm from
your student data files. Enter
your name and the date in the comment section of the file. Save the file as treebook.htm.
2.
Open treebook.htm in your Web browser and
view its appearance. The owner of
the Web page wants to update this page by using some advanced CSS styles that
can be used to add interesting visual effects to the page.
3.
The first change
will be to add drop shadows around each of the letters for the h1 heading Stanislaw Dubcek (1903-1981). Drop shadows can be added using the
text-shadow style as follows:
text-shadow:
color offsetX offsetY blur;
where
color is the color of the shadow, and
offsetX and offsetY are the distance of the shadow from the text in the
horizontal and vertical directions.
Positive values for the offsetX and
offsetY move the shadow to the right
and down from the text, while negative values move the shadow to the left and
up. The blur parameter defines the amount of space the shadow text is
stretched, creating a blurred effect.
The larger the blur value, the
less distinct are the borders of the shadow image. The default blur value
is 0 pixels for a text shadow that has very hard and distinct edges. You can create multiple shadows to the
same text by specifying different shadow styles separated by commas.
We
are going to apply a text-shadow which will give an embossed effect to the h1
heading in the document- making it appears as if the letters in the heading are
raised out from the page. In your
text editor, open the effectstxt.css file
from your student data file. Enter
your name and the date in the comment section of the
file. Save the file as effects.css.
4.
Below the comment
section, enter the following style rule:
/*
Heading text style */
section#main
h1{
color:
rgb(90, 127, 0);
text-shadow:
black 1px 1px 0px,
rgba(90,
127, 0, 0.7) 5px 5px 10px;
}
Save your changes to
the file.
5.
Return to the treebook.htm file in your text
editor. Directly below the link
element for the layout.css style sheet, insert another link element
that links the document to the effects.css
style sheet file.
6.
Save your changes
and then reopen the treebook.htm file
in your Web browser to see the appearance of the page heading.
7.
The next style
that we will learn to apply is called a Box Shadow. The CSS style to add a box shadow to any page object is:
box-shadow:
[inset] color offsetX offsetY blur [spread];
where
color, offsetX, offsetY and blur have the same meanings as they do
for text shadows.
The inset keyword is an optional keyword to
display shadows within the object.
When the inset keyword is used, the meanings of the offsetX and offsetY
values are switched. Positive offsetX and offsetY values move the inset
shadow to the left and up, while negative values move the shadow to the right
and down.
The
default size of the box shadow is equal to the size of the object, however, the
optional spread value allows you to
increase or decrease the size of the shadow relative to the size of the
element.
As
with the text-shadow style, you can apply multiple box shadows by creating a
comma separated list of shadow values.
When
applying the box shadow, you must always use browser extensions to provide the
greatest browser support.
We
will now add several box shadows to the Web page. We will add rounded corners and box shadows in the lower
right corner to the four photos.
We will also add a shadow to the table of biographical data about
Stanislaw Dubcek. Finally, we will
add an inset shadow to the entire main section of the page, to give it a
beveled appearance. Return to the effects.css file in your text
editor. At the bottom of the file,
insert the following style to create rounded corners and drop shadows for every
inline image within a figure box:
/*
Box shadow styles */
figure
img{
-moz-border-radius:
25px;
-webkit-border-radius:
25px;
border-radius:
25px;
-moz-box-shadow:
rgba(0, 0, 0, 0.6) 10px 10px 15px;
-webkit-box-shadow:
rgba(0, 0, 0, 0.6) 10px 10px 15px;
box-shadow:
rgba(0, 0, 0, 0.6) 10px 10px 15px;
}
8.
Add the following
style rule to create an interior beveled border for the entire main section:
section#main{
moz-box-shadow:
inset rgba(0, 0, 0, 0.3) -5px -5px 10px;
}
9.
Finally add the
following style rule to apply a box shadow to the Web table nested within the
main section:
section#main
table{
-moz-box-shadow:
black 5px 5px 5px;
-webkit-box-shadow:
black 5px 5px 5px;
box-shadow:
black 5px 5px 5px;
}
10.Save
your changes to the file and then reload the treebook.htm file in
your Web browser to see the current appearance of the main section of the page.
11.
Another style that enriches the appearance of a Web page is to rotate an object
using the transform style
transform:
effect(params);
where
effect is the transformation function
that will be applied to the object and params
are any parameters required by the transformation. The following are 2D transformation
functions:
translate(offX,
offY) – moves the object offX pixels to the right and
offsetY pixels
down
translate(offX)
– moves the object pixels to the right
translate(offY)
– moves the object pixels down
scale(x,
y) – resizes the object by a factor of x horizontally and a
factor
of y vertically
scaleX(x)
– resizes the object by a factor of x horizontally
scaleY(y)
– resizes the object by a factor of y vertically
skew(angleX,
angleY) – skews the object by the specified angle,
angleX horizontally and angleY vertically
skewX(angleX)
– skews the object by the specified angle, angleX
horizontally
skewY(angleY)
– skews the object by the specified angle, angleY
vertically
rotate(angle)
– rotates the object by the specified angle clockwise
(
a negative value rotates the object counter-clockwise)
matrix(n,
n, n, n, n, n) – applies 2D transformation based on a matrix
of
six values
We
are going to rotate the bottom two figures on the Web page. Return to the effects.css file in your text
editor. At the bottom of the file,
insert the following style rule to rotate the figure box for the lower-left
photo 30 degrees counter-clockwise:
( When applying the browser extensions, the ms-transform browser extension for Internet Explorer must also be
used.)
/*
Rotate styles */
figure#photo4{
-moz-transform:
rotate(-30deg);
-webkit-transform:
rotate(-30deg);
ms-transform:
rotate(-30deg);
transform:
rotate(-30deg);
}
Add
the following style rule to rotate the figure box for the lower-right photo 30
degrees clockwise:
figure#photo5{
-moz-transform:
rotate(30deg);
-webkit-transform:
rotate(30deg);
ms-transform:
rotate(30deg);
transform:
rotate(30deg);
}
12.Save
your changes to the file and then reload treebook.htm
in your Web browser. The two
figure boxes should be rotated on the page.
13.
Now we will learn about color
gradients. We have worked with
backgrounds of a single color and now will learn how to use this color gradient
where one color gradually blends into another or fades away. One type of gradient is a linear gradient where the color
blending proceeds horizontally or vertically across an object’s background.
Again, you must use browser extensions to support the different Web browsers.
Return
to the effects.css file in your text
editor. At the bottom of the file,
insert the following style rule:
/*
Style rule to add a dark green vertical gradient t the background of the
article element */
article{
background:
-moz-linear-gradient(black, rgb(51, 101, 51) 20%,
white 80%);
background:
-webkit-linear-gradient(black, rgb(51, 101, 51) 20%,
white 80%);
background:
-ms-linear-gradient(black, rgb(51, 101, 51) 20%,
white 80%);
background:
linear-gradient(black, rgb(51, 101, 51) 20%, white 80%);
}
14.Save
your changes to the file and then reopen the treebook.htm file in
your Web browser to see the vertical gradient.
15.
Next we will learn how to apply a Border
Image. We will change the
appearance of the main photo by adding a graphic border that will make the
photo look like it came from a torn piece of paper. We will use the following style to create our border.
border-image:
url(url) slice repeat;
where
url is the source of the border image file, slice is the size of the border image cut off to create the
borders, and repeat indicates whether
the side borders should be stretched to cover the objects four sides or
tiled. Again, we will need to
apply browser extensions.
/*
Border image style */
article
img{
border-width:
10px;
-moz-border-image:
url(“borderimg.png”) 50 repeat;
-webkit-border-image:
url(“borderimg.png”) 50 repeat;
border-image:
url(“borderimg.png”) 50 repeat;
}
16.Save
your changes to the file. Reload treebook.htm in your Web browser and
view the torn paper border image around the main photo in the page.
17.
The last visual effect that we will learn is how to create Semi-Transparent Objects.
We will make the two photos at the bottom of the page appear
semi-transparent so that part of the background gradient appears through the
photos using this style:
opacity:
value;
where
the value ranges from 0(completely transparent) up to 1(completely opaque).
Return
to the effects.css file in your text
editor. At the bottom of the file,
insert the following style rule:
/*
Styles for semi-transparent images */
figure#photo4,
figure#photo5{
opacity:
0.7;
}
18.Save
your changes to the file and then reload the treebook.htm in your Web browser to see the final appearance of the
Web page.
19.
Many visitors to the Tree and Book Web site might like to print out portraits
from the pictures on the page. We
are going to learn how to create a CSS style sheet for print media.
In
your text editor, open the printtxt.css style
sheet from your student data files.
Enter your name and the date in the comment section of the
file. Save the file as print.css in the same folder. This style sheet will only be used for
print devices. The other style
sheets will be for viewing the page on a computer screen.
20.Return
to the treebook.htm file in your
text editor. First, we will add
the attribute media= “screen” to the
link elements for the layout.css and
effects.css style sheets as follows:
<link
href= “layout.css” rel= “stylesheet” media=
“screen” />
<link
href= “effects.css” rel= “stylesheet” media=
“screen” />
21.Directly
below the link element for the effects.css
style sheet, add the following link element:
<link
href= “effects.css” rel= “stylesheet” media= “screen” />
<link href= “print.css” rel=
“stylesheet” media= “print” />
22.Save
your changes to the file and then reload the treebook.htm file in your Web browser. Confirm that the appearance of the page has not changed.
23.
We will now create the print styles.
The first style rule will be to hide the page header, navigation lists
and page footer by setting their display properties to none.
Return
to the print.css file in your text
editor and add the following style rule:
/*
Hide page elements that will not be printed */
header,
nav, footer{
display:
none;
}
24.Save
your changes to the file and then reload treebook.htm
in your Web browser to verify that the appearance of the page has not
changed.
25.
Either print the Web page from within your browser or use your browser’s Print
Preview command to preview the printed version of the page.
26.
We are now going to make the main photo appear on the first page along with the
table of biological information, as well as, the four figure boxes to be
resized and placed on their own pages alongside their captions. To do this, you’ll have to place
a page break in the middle of the document directly after the article element containing the main
photo and the Web table.
CSS
defines printed page by incorporating the entire page in a page box, which is composed of two areas: the page area, which
contains the content of the document, and the margin area, which contains the
space between the printed content and the edges of the page. You can specify the size of a page box,
the page margins, the internal padding and other features. The style rules for a page box are
contained within the @page{ styles } where
styles are the styles applied to the page.
We
will use the @page rule to define
the print layout of the Tree and Book page. We will set the page size to 8.5 x
11 inches, in portrait orientation, with 0.5 inch margins.
Return
to the print.css file in your text
editor. Add the following rule at
the top of the style sheet, directly after the initial comments:
@page{
size: 8.5in 11in portrait;
margin: 0.5in;
}
/*
Hide page elements that will not be printed */
Save your changes to
the file.
27.When
a document is sent to a printer, the browser determines the location of the
page breaks unless that information is included as part of the print
style. To specify a page break
that occurs either before or after a page element, you apply the style
properties:
page-break-before:
type;
page-break-after: type;
where
type has the following possible
values:
always: - to always place a page break before or after the element
avoid:
- to never place a page break
left: - to place a page break where the next page will be a left
page
right: - to place a page break where the next page will be a right
page
auto: - to allow the printer to determine whether or not to insert
a page break
inherit: - to insert the page break style from the parent element
We
are going to insert page breaks into the page to control the printed
outcome. We will make the contents
of the article element to appear on
the first page so we want the page break added directly after the article. We will also prohibit browsers from
inserting page breaks within the article element by using the page-break-inside: avoid; style property. To control the placement of page breaks
in this document, add the following style rule at the bottom of the print.css style sheet:
/*
Setting the page breaks in the document */
article{
display:
block;
page-break-after:
always;
page-break-inside:
avoid;
}
Save
your changes to the style sheet.
28.To
complete the style sheet for printed output, you’ll add style rules for the
heading and figure boxes. We will
increase the font size of the h1 heading to 28 points and set the width of the
photo to 4 inches, centering both on the page.
At
the bottom of the style sheet, insert the following style rule for the h1
heading:
/*
Styles for the h1 heading */
h1{
font-size:
28pt;
text-align:
center;
width:
100%;
}
29.Next,
insert the following style rule for the main photo:
/*
Styles for the main photo */
#photo1{
display:
block;
margin:
0in auto;
width:
4in;
}
Save
your changes to the file.
30.Finally
we will make each figure box appear on its own page. As with the article element,
you will add a page break after each figure
element and instruct browsers to avoid placing page breaks within each
figure box. You’ll also create
style rules to set the width of each figure box image and the font size of each
caption.
At
the bottom of the style sheet, add the following style rule to place each
figure box on its own page:
/*
Styles for the figure boxes */
figure{
display:
block;
text-align:
center;
page-break-after:
always;
page-break-inside:
avoid;
}
Add
the following style rules to set the width of figure box images to 5 inches and
the font size of captions to 20 points:
figure
img{
width:
5in;
}
figure
figcaption{
font-size:
20pt;
}
Finally,
add the following style rule to avoid adding a page break after the last figure
box:
figure:last-of-type{
page-break-after:
avoid;
}
31. Save your changes to the
style sheet file. Reload the treebook.htm file in your Web browser
and then either print the file or view the file in a Print Preview window. Each photo should be on its own page to
print.
