2015 - s2 - WD - Week 10 - Coding Day 18 Page Layout Part 2

CODING:
Day 18 CSS Contd
Check it!
s
ie e
l
p g w
p
A an d/ o
or grn xt t
k e r
bc te t de
a
hi he
What style
rules are
applied
here?
Ap
p
yel lies
bck low
g
cen rnd &
te
tex rs
t
Save &
Refresh!
COMMON MISTAKES:
Forgetting a curly brace
Using parentheses or square
brackets instead of curly braces
Typing a colon where you need a
semicolon (or vice versa)
Forgetting to type # characters
where needed
Typing five-digit hex color codes
instead of six-digit codes (#fff66
instead of #ffff66)
Right now, your web page is only 1 section (a

body). We need to break it into three sections.
Each
section will
need
<div>
</div>
tags
FIRST, we need to work on the internal style

sheet to prepare it for multiple divisions
We need to
add the
style rules
for each of
the 3
sections
TRY IT
1. Open practice.html in your editor

2. Move the cursor so it's inside the
internal style sheet (between the
<style type="text/css"> and
</style> tag). Delete any content you

already have between.
3. Add these division tags to the internal
style sheet #header { } and #nav
} and #main { }.
4. Add CSS information you want (bckgrnd
colors, text colors) between #main
{ }.
TRY IT Contd
5.Add CSS styling between the

#header { } division tag.
**Use different colors than in
the #main { } section.
If you want the header (top
portion) of you web page to be a
different color, add a
background-color: attribute;
tag. If you want your header
centered, add a text-align:
center; tag.
TRY IT Contd
7. Add CSS styling between the #nav

{ } division tag.
If you want the
navigation bar
(where the links will eventually go

for your multiple pages) to be a
different color, add a backgroundcolor: attribute; tag. If you want
your links centered, add a text-align:
center; tag. If you want the text of
the links a different color, add a
color: attribute; tag.
TRY IT Contd
8. Move into the
coding.
<body> portion of your
9.Locate your heading <h1>

information. Place the division
tags around the <h1> information,
so that they are before and after
the <h1> information.
<div id=header>
<!- - ##### My header info goes here ##### - - >
<h1>The Topic of My Webpage</h1>
</div>
TRY IT Contd
10.Below your heading

information, add the
following code information
where your navigation bar
and links will eventually go.
<div id=nav>
My internal links will go here
later.
</div>
TRY IT Contd
11.Just before your main content

begins, add the following division
tag:
<div id=main>
12.All the other elements of your page
(images, text, tables, etc.) should
come after the tag you typed in
#11.
13.At the bottom, just BEFORE the
</body> tag, type in the following
tag
</div>
<!DOCTYPE html>
<head>
<title>My Title</title>
Heres an outline:
<style type="text/css">
#header { }
#nav { }
#main { }
#h1 { } **you may have this
</style>
</head>
<body>
<div id=header>
<h1>Header info goes here</h1>
</div>
<div id=nav>
My internal links will eventually go here.
</div>
<div id=main>
All my main content goes here text, images, links to other pages, photos, tables
</div>
</body>
</html>
NAVIGATION BAR
navigation area -- likely takes the
most planning
displays links leading to other pages
w/in same site
IMPORTANT DECISIONS:
How many pages do I want in my site?
What will I name those pages?
How many links are

here?
What % of window width?
CSS width:property
Lets you define how wide you want an
element
specify the width in pixels (using px) or in %
% is good when you want to create equal-width
columns
divide 100 by the number of items you want included it
the width to determine the percent width of each
column
For example, to have five items, each would have a
width of 20% (100 divided 5)
Four items?
each would have a width of 25% (100
divided by 4)
Three items?
each would have a width of 33.3%
HOW DO WE MAKE THE

a
d he
l
i
LINKS?
W
t
u
b
h
e
co
di ll u
W li ng se
ha nk f
co t s. or
di s t
ng h
? e
t
ll
i
w
e
W LE ks. s?
g
B
n
a
i
l tt
TA
ha
W
DOES THE NAV BAR

LOOK FAMILIAR TO
ANYTHING WEVE
CREATED
<a
<tabl
e>
<tr>
<td>
Lets make a page with 5

links:
1. Open layout.html in your

editor
2. Click inside the navigation bar
division (between the tags <div
id="nav"> and </div>)

3. Delete the temporary
placeholder textLinks go here
Lets make a page with 5 links:

contd
4. Type the following tags and

text.
SAVE & REFRESH
Do the links
work?
ea
20 ch
%
is
id
th
th
es
e
ye file
t? s
ex
is
hy
Do
es
in
m of
er r s.
et lo n
D co tto
bu
Use short,
simple
filenames!
TRY IT!
1. Openlayout.htmlfor editing
in Notepad.
2. Put the cursor inside the
header div, and delete the
placeholder text that
readsHeader content goes
here.
3. With the cursor still in between
the <div id="header"> and
</div>,
carefully type the following:
<h1 style="margin:0">Lou's
Records</h1>
Why is the margin 0 there?
HTML headings (h1, h2, h3, and so
forth) have some empty margin
space below them
don't notice so much when the
BACKGROUND PHOTOS?
<body background="images.jpg">
Puts the image as the
background
If you dont want it to repeat, put
this CSS Code in your internal styling
sheet:
body{
Image
background-image: image.jpg; choice
background-repeat:no-repeat; Not tiled
background-attachment:fixed; Does not
scroll
background-size: cover;
Fills it
}

2015 - s2 - WD - Week 10 - Coding Day 18 Page Layout Part 2

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

2015 - s2 - WD - Week 10 - Coding Day 18 Page Layout Part 2

Hochgeladen von

Copyright:

Verfügbare Formate

CODING:

Day 18 CSS Contd

Right now, your web page is only 1 section (a

FIRST, we need to work on the internal style

1. Open practice.html in your editor

</style> tag). Delete any content you

5.Add CSS styling between the

7. Add CSS styling between the #nav

(where the links will eventually go

<body> portion of your

9.Locate your heading <h1>

<h1>The Topic of My Webpage</h1>

10.Below your heading

11.Just before your main content

How many links are

HOW DO WE MAKE THE

DOES THE NAV BAR

Lets make a page with 5

1. Open layout.html in your

End nav -->)

Lets make a page with 5 links:

4. Type the following tags and

SAVE & REFRESH

don't notice so much when the

Das könnte Ihnen auch gefallen