Unit 4. Tutorial 4- Cycle Pathology
Tutorial 4
Cycle Pathology
1.
Open the cycletxt.htm file found in the Cycle
Pathology file from the Student Data files. Enter your name and date in the
comment section and then save the file as cycle.htm.
2.
Open the cycle.htm file and view the current
appearance of the page. We are going to change how the page is displayed by
applying display properties, which arranges the different elements on the page.
Most page elements are displayed in one of two ways. Blocks, such as
paragraphs or block quotes, occupy a defined rectangular area within the
page. Inline elements, on the other hand, such as a sentence within a
paragraph or a citation within a block quote, flow within a block. The display type is specified by using
the display: style property.
3.
First, we are
going to create a Reset Style Sheet which applies styles to define our own
default styles that will not allow a browser change the appearance of our
page. Use your text editor to open
the cp_resettxt.css file from your
Student Data files. Enter your
name and the date in the comment section and then save the file as cp_reset.css. Below the comment section, add the following comment and
style rule:
/*
Display HTML5 structural elements as blocks */
article,
aside, figure, figcaption, footer, hgroup, header, section, nav{
display:
block;
Save
your changes to the file.
4.
Next, we will
define some default styles for all of the page body elements by adding the
following style rule: Note: This styles uses an asterisk (*)
selector to apply the styles to every element nested within the body element.
/*
Set the default page element styles */
body
* {
font-family:
Verdana, Geneva, sans-serif;
font-size:
100%;
font-weight:
inherit;
line-height:
1.2em;
list-style:
none;
vertical-align:
baseline;
}
Save
your changes to the file.
5.
Finally, as we
lay out the Cycle Pathology home page, we’ll actually format the main sections
of the page one at a time. Rather
than having the page cluttered with those sections that you haven’t formatted
yet, we will temporarily hide each section by adding the following style rule
to the cp_reset.css style sheet:
/*
Temporarily hide the page sections */
nav.horizontalNAV,
#president, nav.verticalNAV, #story, header, aside, footer{
display:
none;
}
Save
your changes to the file.
6.
Return to the cycle.htm file in your text
editor. Directly above the closing
</head> tag, insert the following link to the reset style sheet:
<link
href= “cp_reset.css” rel= “stylesheet” />
Save
your changes to the file and then reload the cycle.htm file in your
Web browser to verify that no content is displayed in the browser window.
7.
Open the cp_stylestxt.css file found in the
Cycle Pathology file from the Student Data files. Enter your name and date in the comment section and then
save the file as cp_styles.css.
8.
We are going to
set the color to black and insert an image (bike_bg.png) positioned in the top
left. Also, when a browser loads
an image, it repeats the image in both the vertical and horizontal directions
until the entire background is filled.
You can control this process called tiling
by using the background-repeat style rule. The options are:
background-repeat:
repeat; - the image is tiled both
horizontally and vertically.
background-repeat:
repeat-x; - the image is tiled
horizontally.
background-repeat:
repeat-y; - the image is tiled vertically.
background-repeat:
no-repeat; - the image is not tiled.
We
will set the background repeat to no-repeat.
Below
the comment section, insert the following style rules.
/*
Styles for the page body */
body{
background:
black url(bike_bg.png) top left no-repeat;
}
Save
your changes to the file.
9.
Return to the cycle.htm file and link the cp_styles.css by adding the following link directly
below the link element for the cp_reset.css
style sheet:
<link
href= “cp_styles.css” rel= “stylesheet” />
Save
your changes. Reload the cycle.htm file
in your Web browser and view the displayed image of a cyclist silhouetted
against the sunset on a black background.
10.We
are now going to set the page width and height. Some browsers will automatically increase the height of an
element to match its content. To
prevent this from distorting your page, you can set the maximum and minimum
height and width by using style properties. We will add these styles to the
body by adding the following directly under the background style:
body{
background:
black url(bike_bg.png) top left no-repeat;
width: 95%;
min-width: 1000px;
max-width: 1400px;
}
Save
your changes.
11.Below
the style rule for the body, we are going to add styles to format the
navigation lists. The first style
will remove the underlining from all of the hypertext links within any
navigation list. The second style
will set the font size to 87.5%, float
to the left (or position it along the left side of its containing element),
center the text and set the width to 20%.
The third style sets the color of the links in navigation lists that are
part of the horizontalNAV class to yellow except when a user hovers the mouse
pointer over a link, which it will turn to white.
Add
the following to insert these style rules:
/*
General Navigation List Style */
nav
a{
text-decoration:
none;
}
/*
Horizontal Navigation List */
nav.horizontalNAV
li{
font-size:
87.5%;
float:
left;
text-align:
center;
width:
20%;
}
nav.horizontalNAV
li a{
color:
rgb(255, 255, 99);
}
nav.horizontalNAV
li a:hover{
color:
white;
}
Save
your changes.
12.Next,
you will change the reset style sheet rules in your text editor so that the
horizontal navigation list is once again displayed. Return to the cp_reset.css
style sheet in your text editor and scroll down to the style rule at the
bottom of the page. Remove the
selector nav.horizontalNAV along with
the comma separator that follows it from the start of the selector list.
/*
Temporarily hide the page sections */
#president,
nav.verticalNAV, #story, header, aside, footer{
display:
none;
}
Save
your changes to the reset style sheet and then reload cycle.htm in your Web
browser and view the hypertext links rendered in a single row across the top of
the page. Verify that the color of
each link changes to white when you hover the cursor over them.
13.We
are now going to style the presidents message article. Because the article appears below the
horizontal navigation list, we will need to use the clear property to ensure that it’s displayed only when the left
margin is clear of floated objects.
Clearing a float prevents an object from wrapping around a floating
element or ensures that the following element appears after the row is
completed. To place an element
below a float, you use the style clear:
left; . The position choices
are left, right or both.
Remember
that different browsers read certain styles differently so we are going to use
progressive enhancement to set the background color either to medium gray or to
white with 30% opacity. The width of the article should also be set to 40% of
the width of the page body.
To
format the president’s message, scroll down to the bottom of the cp_styles.css style sheet and insert
the following rule:
/*
President’s message */
#president{
background-color:
rgb(105, 96, 87);
background-color:
rgba (255, 255, 255, 0.3%);
clear:
left;
float:
left;
width:
40%;
}
Save
your changes.
14.We
will now re-display the president’s message. Return to the cp_reset.css
style sheet in your text editor.
Remove the selector #president and
the comma that follows it from the start of the selector list in the style rule
at the bottom of the file.
/*
Temporarily hide the page sections */
nav.verticalNAV,
#story, header, aside, footer{
display:
none;
}
Save
your changes. Reload the cycle.htm file in your Web browser and
view the article on the page below the horizontal navigation list.
15.By
setting margins and padding, we are going to change the layout by dividing the
page into thirds. We will shift
the horizontal navigation list and the president’s message from the top right
of the page to the middle page section.
CSS
supports several styles to set the size of the margin. Here are some options:
margin-top:
margin-right:
margin-bottom:
margin-left:
Return
to the cp_reset.css style sheet in
your text editor. Locate the style
rule that defines the default page element styles and add the following style
property:
/* Set the default page element styles
*/
body
* {
font-family:
Verdana, Geneva, sans-serif;
font-size:
100%;
font-weight:
inherit;
line-height:
1.2em;
list-style:
none;
margin: 0px;
vertical-align:
baseline;
}
Save
your changes to the file.
16.Return
to the cp_styles.css file and add the following rule directly
below the comment Horizontal Navigation List:
nav.horizontalNAV{
margin-left:
33%;
width:
66%;
}
17.Scroll
down to the style rule for the president’s message and add the following style
directly below the float style:
/*
President’s message */
#president{
background-color:
rgb(105, 96, 87);
background-color:
rgba (255, 255, 255, 0.3%);
clear:
left;
float:
left;
margin-left: 33%;
width:
40%;
}
Save
your changes. Reload cycle.htm in
your Web browser to see the revised layout of the page.
18.Padding
enhances a web page by creating gaps between elements on a page. Like the margin, the padding can be
specified by using the following ways:
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
or you can use the following style
to set all of the padding spaces within one property:
padding: 5px ; (applies the style to all four sides)
Return to the cp_reset.css style sheet file in your
text editor. Within the style rule
for the default page styles, add the following property:
/*
Set the default page element styles */
body
* {
font-family:
Verdana, Geneva, sans-serif;
font-size:
100%;
font-weight:
inherit;
line-height:
1.2em;
list-style:
none;
margin:
0px;
padding: 0px;
vertical-align:
baseline;
}
Save
your changes to the file.
19 .Return
to the cp_styles.css file in your
text editor and add the following style for list items in the horizontal
navigation list directly below the float style:
/*
Horizontal Navigation List */
nav.horizontalNAV
li{
font-size:
87.5%;
float:
left;
padding: 15px 0px;
text-align:
center;
width:
20%;
}
Save your changes to the file
and then reload cycle.htm in your
Web browser to verify that additional space has been added above and below the
horizontal navigation list.
20.We
are going to add more style rules to the president’s message. Return to the cp_styles.css style sheet in your text editor. To format the h1 heading in the
president’s message to be bold cursive style font that is 158% of the size of
the default text, with 10px margins above and to the left of the text content,
add the following style rule:
#president h1{
font-family: ‘Lucida
Calligraphy’, ‘Apple Chancery’, cursive;
font-size: 158%;
font-weight: bold;
margin: 10px 0px 0px 10px;
}
21.The
next style will display the h2 heading in the president’s message in a font
size that is 105% of the size of the default text with a 10px margin below the
text and a 15px margin to the left of the text:
#president h2{
font-size: 105%;
margin: 0px 0px 10px 15px;
}
Save your changes.
22.We
are going to add a graphic image of the president to the background of the
president’s message box. The image will be placed in the bottom-right corner of
the box and sized to 40% of the width of the box. The font size of the
paragraph text will be set to 87.5% of the default font and the right margins
of the paragraphs to 40%.
Return
to the cp_styles.css file in your
text editor. To add the style rule to set the paragraph font size and margins,
add the following style rules at the bottom of the file:
#president
p{
font-size:
87.5%;
margin:
0px 40% 20px 15px;
}
To
add the image, add the following properties to the #president selector style to define the source, position, tiling
and size of the background image:
#president{
background-color:
rgb(105, 96, 87);
background-color:
rgba (255, 255, 255, 0.3%);
background-image: url(atwood.png);
background-position: bottom right;
background-repeat: no-repeat;
clear:
left;
float:
left;
width:
40%;
}
For the size: continue adding
the following with the progressive enhancement:
background-image:
url(atwood.png);
background-position:
bottom right;
background-repeat:
no-repeat;
-moz-background-size: 40%;
-webkit-background-size: 40%;
background-size: 40%;
clear: left;
float: left;
width: 40%;
}
Save your changes. Reload cycle.htm in your Web browser and view the revised appearance of
the president’s message box.
23.The
next item to format is the vertical navigation list. First, we will redisplay it on the Web page. Return to the cp_reset.css file in your text editor and remove the selector nav.verticalNAV and the comma that
follows it from the last style rule.
/*
Temporarily hide the page sections */
#story,
header, aside, footer{
display:
none;
}
Save
your changes to the file.
24.
Now return to the cp_styles.css file
in your text editor. We will float
the navigation list alongside the president’s message by setting the left
margin 3% and the width to 23%. At
the bottom of the file, insert the following style rules to format the vertical
navigation list:
/*
Vertical Navigation List */
nav.verticalNAV{
float:
left;
margin-left:
3%;
width:
23%;
}
To
set the color of the hyperlinks to light yellow and the line-height to 2.2em
units, add the following:
nav.verticalNAV
a{
color:
rgb(182, 182, 92);
line-height:
2.2em;
}
Save your changes and reload cycle.htm in your Web browser to view
the revised appearance of the page.
25.Adding
borders to sections of a web page also enhance its appearance. We will add a
1px solid yellow bottom border to the hyperlinks for the nav.verticalNAV a selector.
Also, by displaying each hyperlink to block, the border will extend
across the complete width of the list. Add the following styles in alphabetical
order:
nav.verticalNAV
a {
border-bottom:
1px solid rgb(182, 182, 92);
color:
rgb(182, 182, 92);
display:
block;
line-height:
2.2em;
}
26.We
will also write a style rule for when the user places the mouse pointer over
the hyperlinks of the nav.verticalNAV
a. This style will change the color to medium gray or a
semi-transparent white during the hover event. Add the following rule:
nav.verticalNAV a:hover{
background-color: rgb(105,
96, 87);
background-color: rgba(255,
255, 255, 0.3);
}
Save your changes to the file
and reload cycle.htm in your Web
browser to verify that the hyperlinks now display a bottom border with the
hover effect.
27.Sometimes
a web page could look too boxy.
Creating rounded corners softens the design. You can round all four corners or specify which corners you
want rounded by using the following styles:
border-top-left-radius: 20px;
border-top-right-radius:
20px;
border-bottom-right-radius:
20px;
border-bottom-left-radius:
20px;
Or you can apply the same
radius to all four corners by writing the style like this:
border-radius: 20px;
Note: Since this style is new to web design,
you would use progressive enhancement to allow this style to be read by all
browsers.
Return to the cp_styles.css and apply this rule for
the #president selector below the background-size:
background-image:
url(atwood.png);
background-position:
bottom right;
background-repeat:
no-repeat;
-moz-background-size:
40%;
-webkit-background-size: 40%;
background-size: 40%;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
clear: left;
float: left;
width: 40%;
}
Save your changes and open
the cycle.htm to view the
president’s message with rounded corners.
28.The
webpage has a story section with an article and a figure box showing a cyclist on
Rim Rock Drive. We are going to format these sections so that the story section
is aligned with the president’s message and placing the article and figure box
side by side. First, we will
redisplay the story section on our Web page. Return to the cp_reset.css
file in your text editor and then go to the style rule at the bottom of the
file that hides page elements.
Remove the selector #story and
the comma that follows it from the style rule as follows:
/*
Temporarily hide the page sections */
header, aside, footer{
display:
none;
}
Save
your changes to the file.
Return to the cp_styles.css file. At the bottom of
the file, add the following style rule to align the story section directly
below the president’s message, separated by a 20 pixel vertical margin.
/* Story section styles*/
#story{
background-color: gray;
background-color: rgba(255,
255, 255, 0.8);
clear: left;
float: left;
margin: 20px 0px 0px 33%;
width: 66%;
}
29.Below
the style rule that you just added, add the following two styles to float the
article and figure box side by side, with each one taking up about half of the
width of the story section.
/* Article styles*/
#story article {
border-right: 1px solid
black;
float: left;
width: 50%;
}
/* Figure box styles*/
#story figure {
float: left;
width: 49%;
}
Save your changes. Reload cycle.htm to check the placement of the story section as well as
the Rim Rock Drive article and figure box within it.
30.We
will now format the h1 and h2 headings to display it in a light brown font on a
dark brown background. We will
also resize the heading group to 90 pixels high with a background image of
Kathy Rawlings displayed in the bottom right corner of the box.
Return to the cp_styles.css. Directly below the style rule for the story article selector,
insert the following rules to format the size, background and text of the
article heading group:
#story article hgroup{
background: rgb (97, 30, 2)
url (rawlings.png) bottom right no-repeat;
-moz-background-size:
contain;
-webkit-background-size:
contain;
background-size: contain;
color: rgb (145, 98, 78);
color: rgba (255, 255, 255,
0.3);
height: 90px;
text-indent: 10px;
}
31.The
following style rule will set the size of the h1 heading in the article to 158%
of the default font size and set the kerning to 3px. Add the following style rule:
#story article hgroup h1 {
font-size: 158%;
letter-spacing: 3px;
}
#story article hgroup h2 {
font-size: 105%;
}
Save your changes. Reload the cycle.htm to see the appearance of the article heading.
32.Next,
we will format the paragraph and unordered list text. The font size will be set to 80% of the default size and
increase the margin space around the paragraphs and list items.
Return to the cp_styles.css file. Directly below the style rule that you
last created, insert the following rules:
#story article p{
font-size: 80%;
margin: 10px;
}
#story article ul li{
font-size: 80%;
margin: 15px 25px;
}
#story article ul li strong{
font-weight: bold;
}
Save your changes and reload cycle.htm in your Web browser to view
the final format of the article heading and text.
33.Next
we will format the contents of the figure box. We will change the inline image displaying the cyclist on
Rim Rock Drive into a block element and then center it horizontally within the
figure box by setting its left and right margins to auto. We will also size the image to be based
on the size of the figure box by setting the width to 80% and the browser will
then determine the height automatically.
We will also add a 5 pixel light brown inset border and center the
figure caption, in addition to reducing the font size and displaying the
caption in italics.
Return
to the cp_styles.css file in your
text editor. At the bottom of the
style sheet, insert the following rules:
#story figure img {
border: 5px inset rgb (227,
168, 145);
display: block;
margin: 30px auto 10px;
width: 80%;
}
#story figure figcaption {
font-size: 75%;
font-style: italic;
text-align: center;
}
Save your changes and open
the cycle.htm to see the current
state of the story section.
34.We
have the ability to position objects anywhere on the website using different
style values: static, absolute or relative.
Static –
browsers place an element based on where it would naturally flow within the
document.
Absolute – places an element at specific
coordinates either in the page or within a container element.
Relative –
is used to move an element relative to where the browser would have placed it
if no positioning had been applied.
We are going to place the
header element for the Cycle Pathology page at the coordinates (20, 20) using
absolute positioning.
First, we need to redisplay
the header on our Web page. Return
to the cp_reset.css file in your
text editor. Remove the selector header and the comma that follows it
from the style rule at the bottom of the file that hides the page elements, as
follows:
/*
Temporarily hide the page sections */
aside,
footer{
display:
none;
}
Save your changes to the
file.
Return to the cp_styles.css and insert the following style rule directly
below the style rule for the body
selector near the top of the page:
/* Styles for the Page Header
*/
header {
position: absolute;
top: 20px;
left: 20px;
}
Save your changes and open
the cycle.htm file to see that the
Cycle Pathology logo appears in the top left corner of the browser window.
35.Next,
we will place the sidebar listing the upcoming cycling events at the left edge
of the browser window, directly below the graphic image of the cyclist standing
before the sunset.
First, let’s redisplay the
aside element on our Web page.
Return to the cp_reset.css file
in your text editor. Remove the aside element and the comma that follows
it from the style rule at the bottom of the file, leaving only the footer selector.
Save your changes to the file.
Return to the cp_styles.css file. At the bottom of the file, insert
the following style rule to place the aside element halfway down the left edge
of the page:
/* Sidebar styles */
aside {
color: rgb (145, 98, 78);
position: absolute;
top: 400px;
left: 10px;
width: 30%;
}
Save your changes and reload cycle.htm. The sidebar describing the
upcoming rides starts halfway down the left edge of the page.
36.Return
to the cp_styles.css file in your
text editor. The sidebar consists
of h1 and h2 headings and paragraphs that describe each ride. We will apply style rules for the h1,
h2 and p elements in the aside element by adding the following rules:
aside
h1{
font-size:
105%;
font-weight:
bold;
margin-bottom:
25px;
text-align:
center;
}
aside
h2{
font-size:
85%;
font-weight:
bold;
}
aside
p{
font-size:
75%;
margin:
15px;
}
Save
your changes to the file and reload the cycle.htm
file in your Web browser to view part of the formatted aside element.
37.In
a fluid layout, you want the sizes of all the page sections to be based on the
same thing so that they all are resized the same way. To fix this in the Cycle Pathology Web page, you’ll place
the entire page body using the relative positioning.
Return
to the cp_styles.css file and find
the style rule for the body selector near the top of the page. Add the following property to the style
rule directly below the background: black url (bike_bg.png) top left no-repeat;
body{
background:
black url(bike_bg.png) top left no-repeat;
position: relative;
width:
95%;
min-width:
1000px;
max-width:
1400px;
}
Save
your changes and then reload the cycle.htm
file in your Web browser to view the appearance of your Web page..
38.The
aside element is very long, displaying several upcoming events. We are going to set a smaller height
using the height property so we have to define how browsers handle the content
that overflows the allotted
space. Scroll bars are displayed
automatically when the content overflows this space.
On the cp_styles.css file, scroll down to the style rule for the aside
selector near the bottom of the file and add the following styles:
/* Sidebar styles */
aside {
color: rgb (145, 98, 78);
position: absolute;
top: 400px;
left: 10px;
width: 30%;
height: 450px;
overflow: auto:
}
Save your changes and reload
the cycle.htm. Check to see that a scroll bar was
added to the aside element.
39.The
last styles to apply will format the footer and footer address. Let’s redisplay the footer section on the Web page. Return to the cp_reset.css
file in your text editor.
Scroll to the bottom of the file and delete the entire style rule that
hides page elements, which only contains the footer selector along with the
style comment.
Save your changes to the
file.
Return to the cp_styles.css. At the bottom of the file, insert the following style
rules for the page footer:
/* Page footer styles */
footer {
clear: left;
margin-left: 33%;
width: 66%;
}
Directly below the footer
style rule, add the following style rule for the address element:
footer address {
color: rgb (182, 182, 92);
font-size: 80%;
font-style: normal;
padding-top: 10px;
text-align: center;
}
Save your changes and reload
the cycle.htm file to see the final
appearance of the Cycle Pathology home page.
No comments:
Post a Comment